/* ====================================================================== *
   eHealth-Connect – Zentrales Theme (TI-Gateway + Startseite)
   Quelle: Zusammenführung & Bereinigung
* ====================================================================== */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap");

/* —— Brand & Tokens —— */
:root{
  --brand:#0CB8B6;
  --brand-wordmark-color: #666666;
  --brand-2:#0aa3a1;
  --brand-strong:#075F5E;
  --brand-lite:#E9F8F8;
  --accent:#FCDB68;
  --danger:#DC2626;
  --neutral:#B2B2B2;
  --ink:#0e1111;
  --paper:#ffffff;
  --ring: rgba(12,184,182,.18);

  --nav-h:80px;
  --nav-offset:80px;
  --section-pad:48px;
  --container-max:1160px;

  --brand-font:"Montserrat",sans-serif;

  /* Bootstrap token overrides */
  --bs-body-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  --bs-body-color: var(--ink);
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand-strong);
  --bs-border-radius: 0.875rem;
  --bs-border-radius-lg: 1rem;
  --bs-btn-border-radius: 0.875rem;
  
  --btn-font-size: 1rem;
  --btn-line-height: 1.2;
  --btn-pad-y: 14px;
  --btn-pad-x: 18px;
  
  --content-max: 1280px;        /* max-width deiner Content-Spalte */
  --page-padding: 24px;         /* seitliche Innenabstände der Seite */
  --bleed: clamp(12px, 4vw, 120px); /* wie weit die Grafik rechts übersteht */
}

/* Desktop */
@media (min-width: 992px){
  :root{ --nav-h: 80px; }  /* deine Zielhöhe am Desktop */
}
/* Mobile */
@media (max-width: 991.98px){
  :root{ --nav-h: 64px; }  /* realistische Mobile-Höhe */
}

/* —— Reset / Base —— */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; height:100%; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
body{
  height:100%;
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  /*padding-top:var(--nav-h);*/
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0));
  position:relative;
  overflow:visible !important;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }

/* —— Große Hintergrund-Hexagons —— */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:clamp(260px,28vw,560px);
  aspect-ratio:1 / 1;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.04));
  will-change:transform;
}
body::before{ top:-60px; left:-80px; transform:rotate(-5deg); background:var(--accent); opacity:.12; }
body::after{ bottom:-80px; right:-100px; transform:rotate(7deg); background:var(--brand); opacity:.07; }

body#startseite .hero.hero-bg{
  position: relative;
}

/* —— Layout —— */
.container{ max-width:var(--container-max); margin:0 auto; padding:0 20px }
section{ background:var(--paper); border-radius:24px; padding:var(--section-pad); margin:28px 0; box-shadow:0 10px 30px rgba(0,0,0,.08); }
section,[id]{ scroll-margin-top:var(--nav-offset) }
h1,h2,h3,h4,h5,h6{ font-family:inherit; font-weight:700; line-height:1.2; }
h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin:0 0 8px }
.lede{ color:#3e4b4b; margin:0 0 24px }
.grid{ display:grid; gap:24px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }

/* —— Buttons & Chips —— */
.btn{ appearance:none; border:0; border-radius:14px; padding:14px 18px; font-weight:700; cursor:pointer; transition:.2s ease; }
.btn-primary{ background:var(--brand-strong); color:#fff; border-color:var(--brand-strong);  border:1px solid var(--brand-strong); }
.btn-ghost{ background:transparent; color:var(--brand-strong); border:1px solid rgba(12,184,182,.32) }
.btn-ghost:hover{ background:rgba(12,184,182,.06) }
/* Brand-Buttons: Bootstrap-Variablen überschreiben (keine blaue States mehr) */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-strong);
  --bs-btn-border-color: var(--brand-strong);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-strong);
  --bs-btn-hover-border-color: var(--brand-strong);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);

  --bs-btn-disabled-bg: var(--brand-strong);
  --bs-btn-disabled-border-color: var(--brand-strong);

  --bs-btn-focus-shadow-rgb: 12,184,182; /* passt zu --ring */
}
/*.btn-primary:hover{ filter: brightness(.75); }*/
.btn-primary:hover{ background:rgba(12,184,182,.06); color:var(--brand-strong); border:1px solid var(--brand-strong); }
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{ filter: brightness(.88); }
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-check:focus + .btn-primary{
  outline: none;
  box-shadow: 0 0 0 .25rem var(--ring);
}

/* Outline-Variante im Brand-Stil */
.btn-outline-primary{
  --bs-btn-color: var(--brand-strong);
  --bs-btn-border-color: rgba(12,184,182,.32);
  --bs-btn-hover-color: var(--brand-strong);
  --bs-btn-hover-bg: rgba(12,184,182,.06);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--brand-strong);
  --bs-btn-active-bg: rgba(12,184,182,.10);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 12,184,182;
}


/* Baseline für alle Buttons */
.btn{
  font-size: var(--btn-font-size) !important;
  line-height: var(--btn-line-height);
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
}

/* Auch dann gleich, wenn versehentlich lg/sm gesetzt wurde */
.btn-lg,
.btn-sm{
  font-size: var(--btn-font-size) !important;
  line-height: var(--btn-line-height);
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
}

#dna .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Timeline Layout */
.timeline {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background: var(--brand);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
}

.timeline-item {
  padding: 20px 40px;
  position: relative;
  width: 50%;
}

.timeline-item::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  right: -11px;
  background: var(--paper);
  border: 4px solid var(--brand);
  top: 32px;
  border-radius: 50%;
  z-index: 1;
}

/* ===== Story Timeline (nur #story) ===== */
#story{ --rail-w:4px; --dot:14px; --gap:28px; --card-w:min(520px,42vw); }
#story h2{ margin:0 0 12px; }

#story .timeline{
  position:relative;
  display:grid;
  grid-template-columns: 1fr var(--rail-w) 1fr;
  align-items:start;
  gap: var(--gap);
}

/* Mittige Linie + Progress */
#story .rail{
  grid-column: 2;
  position:absolute; left:50%; top:0; bottom:0;
  width:var(--rail-w); transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(12,184,182,.12), rgba(12,184,182,.06));
  border-radius:999px; overflow:hidden;
}
#story .rail .progress{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--brand,#0CB8B6), #0aa3a1);
  border-radius:999px;
}

/* Karten: alternierend links/rechts der Rail */
#story .item{
  position:relative;
  grid-column: 1;
  width: var(--card-w);
  margin-right: auto;
  background:#fff; border:1px solid #e7f4f4; border-radius:16px;
  padding:16px 18px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  opacity:0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, box-shadow .2s ease, border-color .2s ease;
}
#story .item:nth-of-type(even){ grid-column: 3; margin-left:auto; margin-right:0; }

#story .item.in{ opacity:1; transform:none; }
#story .item:hover{ border-color: var(--brand,#0CB8B6); box-shadow:0 14px 34px rgba(12,184,182,.18); }

/* Dots an der Rail */
#story .item::after{
  content:""; position:absolute; top:22px;
  width:var(--dot); height:var(--dot); border-radius:50%;
  background:#fff; box-shadow: 0 0 0 6px rgba(12,184,182,.14), inset 0 0 0 2px var(--brand,#0CB8B6);
}
#story .item:nth-of-type(odd)::after{ right: calc(-1 * (var(--gap) + var(--rail-w)/2 + var(--dot)/2 - 2px)); }
#story .item:nth-of-type(even)::after{ left:  calc(-1 * (var(--gap) + var(--rail-w)/2 + var(--dot)/2 - 2px)); }

/* Year-Pill */
#story .item .year{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; color:#075F5E;
  background:var(--brand-lite,#E9F8F8); border:1px solid #e7f4f4;
  border-radius:999px; padding:6px 12px; margin-bottom:6px;
}
#story .item h3{ margin:.2rem 0 .35rem; font-size:1.15rem; }
#story .item p{ margin:0; color:#2c3a3a; line-height:1.45; }

/* Mobile: einspaltig, Rail nach links */
@media (max-width: 900px){
  #story .timeline{ grid-template-columns: var(--rail-w) 1fr; }
  #story .rail{ position:absolute; left:0; transform:none; }
  #story .item, #story .item:nth-of-type(even){
    grid-column: 2; width:100%; margin:0 0 0 16px;
  }
  #story .item::after{ left:-28px; right:auto; }
}

/* PODCAST */
/* Hover-Effekt & Grid-Layout */
#podcast .card.episode {
  transition: transform .18s ease, box-shadow .18s ease;
}
#podcast .card.episode:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
#podcast .grid {
  display: grid;
  gap: 14px;
}
#podcast .grid-cols-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
}

/* Suchfeld & Tags */
#podcast .searchbar {
  border-radius: 14px;
  padding: .8rem 1rem;
  border: 1px solid #dbeeee;
  width: 100%;
}
#podcast .tag {
  background: #f4fbff;
  border: 1px solid #dbeeee;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
}

/* Episoden-Metadaten + Cover (50% mehr Höhe, aber zentriert) */
#podcast .epi-meta {
  font-size: .9rem;
  color: #5b7280;
}
#podcast .episode .cover {
  display: block;
  margin: auto;
  max-height: 240px;      /* vorher 160px → +50% */
  height: auto;
  width: auto;            /* NICHT auf 100% strecken */
  max-width: 100%;        /* begrenzt innerhalb der Card */
  object-fit: contain;
  background: #eef7fb;
  border-radius: 12px;
}

/* Hero-Bild */
#podcast .hero-visual {
  min-height: 280px;
  background-image: url('/static/img/podcasts/ehealth-podcast.png');
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  width: 100%;
}
@media (min-width: 992px) {
  #podcast .hero-visual { min-height: 420px; }
}

/* Player-Container */
#podcast .podigee-player {
  border: 1px solid #e7f4f4;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}

/* ==== Podcast: Button zentrieren + Player-Host ===== */
#podcast .epi-actions{ display:flex; justify-content:center; }
#podcast .btn-play{ display:inline-flex; align-items:center; justify-content:center; }

#podcast .epi-actions{ display:flex; justify-content:center; }
#podcast #playerHost{
  display:block;
  border:1px solid #e7f4f4;
  border-radius:12px;
  background:#fff;
  margin:12px 0 20px;
  overflow:hidden;
}

/* Podcast-Seite: Hosts gleich hoch & Bio auf gleicher Höhe starten */
#hosts .row > [class*="col-"]{ display:flex; }
#hosts .card{ flex:1 1 auto; display:flex; flex-direction:column; }

/* Kopfbereich (Avatar + Name + Meta) auf fixe Mindesthöhe → Bio beginnt überall gleich */
#hosts .host-head{ min-height: 104px; }

/* Optional: konsistente Abstände zum Bio-Text */
#hosts .host-bio{ margin-top: .75rem !important; }

/* Fallback: falls ein Kopf mal höher ist, bleibt die Karte trotzdem schön ausgerichtet */
#hosts .card > .host-bio{ margin-bottom: 0; }

#hosts .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* sorgt für gleich hohe Spalten */
}

#hosts .row > [class*="col-"] {
  display: flex;        /* jede Spalte selbst als Flex */
}

#hosts .card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;       /* füllt die volle Höhe aus */
}


/* Optionale Absicherung in typischen Containern (nicht zwingend nötig) */
.card .btn,
.price .btn,
.feat .btn,
.hero-cta .btn,
.footer-card .btn,
.ehc-cta.btn{
  font-size: var(--btn-font-size) !important;
  line-height: var(--btn-line-height);
}

.ehc-cta{ background:var(--brand-strong); border-color:var(--brand-strong); border-radius:14px; padding:.6rem 1rem; }
.ehc-cta:hover{ filter:brightness(.95); }
.chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; background:var(--accent); color:#064746; font-weight:700; font-size:.85rem; }

/* —— Cards / Form —— */
.card{ background:#fff; border:1px solid #eef2f2; border-radius:16px; box-shadow:none; padding:22px }
.card.disabled{ background:#f3f3f3; color:#888; opacity:.75 }
.card.disabled *{ color:rgba(0,0,0,.6) }
.form-control{ border:1px solid #dbeeee; border-radius:12px; padding:12px 14px; }
.form-control:focus{ border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(12,184,182,.15); }
.muted{ color:#395353 }
.spec{ display:flex; align-items:flex-start; gap:12px }
.spec .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); margin-top:.6rem }

/* —— Top Nav —— */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 2px 12px rgba(0,0,0,.04); }
.nav .inner{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); padding:0 24px; }

.navbar.ehc-nav{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 2px 12px rgba(0,0,0,.04); }
.navbar.ehc-nav .navbar-nav .nav-link{
  font-size:1.06rem; font-weight:700; line-height:1;
  padding:.65rem 1rem; border-radius:999px; border:1px solid transparent;
  background:transparent; color:#0e1111; text-decoration:none; gap:.75rem;
}
.navbar.ehc-nav .navbar-nav .nav-link.active,
.navbar.ehc-nav .navbar-nav .nav-link[aria-current="page"]{
  background:var(--brand-lite); border-color:var(--brand); color:var(--brand-strong); box-shadow:0 0 0 .2rem var(--ring);
}
.navbar.ehc-nav .navbar-nav .nav-link:hover,
.navbar.ehc-nav .navbar-nav .nav-item.show > .nav-link,
.navbar.ehc-nav .navbar-nav .nav-link:focus-visible{
  outline:none; background:var(--brand-lite); border-color:var(--brand);
  box-shadow:0 0 0 .2rem var(--ring); color:#0e1111;
}

/* Bestehender Look veredelt (Kompat zur alten Site) */
.ehc-nav .nav-link{ padding:.6rem .85rem; border-radius:12px; color:#0e1111; font-weight:600; border:1px solid rgba(12,184,182,.18); background:#fff; }
.ehc-nav .nav-link:hover{ background:rgba(12,184,182,.08); color:#0e1111; border-color:rgba(12,184,182,.32); text-decoration:none; }

.mega .dropdown-menu.mega-menu{ min-width: clamp(220px, 32vw, 380px); border:1px solid #e7f4f4 !important; border-radius:16px !important; box-shadow:0 10px 30px rgba(0,0,0,.08) !important; background:#fff !important; }
.ehc-menu-list{ display:flex; flex-direction:column; gap:10px; }
.ehc-menu-item{ display:block; padding:12px 14px; border:1px solid #e7f4f4; border-radius:14px; background:#fff; }
.ehc-menu-item:hover{ background:var(--brand-lite); border-color:var(--brand); }
.ehc-menu-item .menu-title{ display:block; font-weight:700; line-height:1.2; }
.ehc-menu-item .menu-desc{ display:block; color:#395353; font-size:.88rem; margin-top:2px; }

.brand{ display:flex; align-items:center; gap:.6rem; text-align:center }
.brand-link,
.navbar .navbar-brand{
  display:flex; flex-direction:column; align-items:center; line-height:1;
  padding:.6rem .85rem; border:1px solid transparent; border-radius:12px; background:transparent;
}

/* —— Hero (gemeinsam) —— */
.hero{ position:relative; color:#0f2c2b; overflow:hidden; padding:90px 0 70px; background:linear-gradient(180deg,#F3FCFC 0%, #ffffff 60%); }
.hero .container{ position:relative; z-index:1 }
.hero h1{ font-size:clamp(2.2rem,4.2vw,3.6rem); line-height:1.05; margin:0 0 14px }
.hero h1.bigger{ font-size:clamp(3rem,5vw,4.4rem); margin:.5em 0 }
.hero p{ font-size:clamp(1.05rem,1.6vw,1.25rem); opacity:.95; max-width:840px }
.hero-cta{ margin-top:28px; display:flex; gap:12px; flex-wrap:wrap }

/* Seite: TI-Gateway & Startseite – Hintergrundgrafik */
body#pflege .hero-illustration{
  grid-template-columns: 2fr 1fr;
}

body#ti-gateway .hero.hero-bg::after{
  content:""; position:absolute; inset:0 0 0 40%;
  background-image: url("/static/img/hero/hero_ti-gateway.png");
  background-position: right bottom;  /* entspricht 100% 100% */
  background-size: contain;           /* skalieren, ganz sichtbar */
  background-repeat: no-repeat;
  opacity:.70; pointer-events:none;
}
body#startseite .hero.hero-bg::after{
  content:""; position:absolute; inset:0 0 0 40%;
  background-image: url("/static/img/hero/startseite_hero_ehealth-connect_25.png");
  background-position: right bottom;  /* entspricht 100% 100% */
  background-size: contain;           /* skalieren, ganz sichtbar */
  background-repeat: no-repeat;
  opacity:.70; pointer-events:none;
}
.hero.hero-bg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* TI-Gateway Hero Layout */
.hero-illustration{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
.hero-spacer{ min-height:1px; pointer-events:none; }

/* Startseite Hero */
.hero-home{ background: linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%); padding: 96px 0 72px; }
.hero-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:40px; align-items:center; }
.hero-text{ max-width:780px; }
.lead-home{ margin:10px 0 14px; max-width:720px; opacity:.95; }
.hero-points{ list-style:none; margin:0 0 14px; padding:0; }
.hero-points li{ display:flex; gap:10px; margin:6px 0; color:#2c3a3a; }
.hero-points .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); margin-top:.55rem; }
.hero-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.hero-badges .badge{
  background:var(--brand-lite); border:1px solid #e7f4f4; color:#0f2c2b;
  border-radius:999px; padding:6px 12px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
.hero-badges .badge strong{ color:var(--brand-strong); font-size:1.05em; }
.hero-badges .badge small{ font-weight:600; opacity:.85; }
.hero-visual{
  min-height:300px;
  background:url("assets/img/hero-img1.png") center bottom / contain no-repeat;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.12));
}

/* —— Hexagon-Ecken (Sections) —— */
@supports (clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%)) {
  .hex-corner{ position:relative; isolation:isolate; overflow:visible; }
  .hex-corner::before,
  .hex-corner::after{
    content:""; position:absolute; width:clamp(120px,16vw,200px); aspect-ratio:1/1;
    clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
    pointer-events:none; filter:drop-shadow(0 10px 22px rgba(0,0,0,.06)); z-index:-9999; opacity:.12; will-change:transform;
  }
  .hex-corner::before{ left:0; top:0; transform: translate(-36px, -44px) rotate(-6deg); background:var(--accent); }
  .hex-corner::after{ right:0; bottom:0; transform: translate(40px, 50px) rotate(8deg); background:var(--brand); }
}

/* —— Features mit Seitenbildern (TI-Gateway) —— */
#features{ position:relative; overflow:hidden; background:#fff }
#features .feature-wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto }
#features .feature-wrap .grid{ display:grid; gap:24px; grid-template-columns:repeat(2,minmax(0,1fr)) }
#features::before,#features::after{
  content:""; position:absolute; bottom:0; width:32%; max-width:420px; aspect-ratio:1/1;
  background-repeat:no-repeat; background-size:contain; background-position:bottom;
  pointer-events:none; z-index:0; opacity:.90; filter:grayscale(.05) saturate(1);
}
#features::before{ left:var(--section-pad);  background-image:url("/static/img/ti-gateway/ti_gateway_apo_l.png"); transform:translateX(-25%) }
#features::after { right:var(--section-pad); background-image:url("/static/img/ti-gateway/ti_gateway_arzt_r.png"); transform:translateX(25%) }

/* —— Number KPIs —— */
.numbox{ border-radius:20px; padding:20px; background:linear-gradient(180deg,#f8fefe,#ebf9f9); text-align:center; border:1px solid #e7f4f4; }
.kpi{ font-size:clamp(2rem,3.6vw,3rem); font-weight:800; color:var(--brand-strong) }

/* —— Vergleich / Illustration —— */
.block{ display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:center }
.block.no-image{ grid-template-columns:1fr }
.illus{ filter:drop-shadow(0 12px 30px rgba(0,0,0,.18)) }
.block .illus img{ width:100%; height:auto; max-height:520px; object-fit:contain }

/* —— Pricing —— */
.pricing{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:stretch; }
.price{ border:1px solid #e7f4f4; border-radius:18px; padding:22px; display:flex; flex-direction:column; transition:.25s ease; }
.price:hover{ border-color:var(--brand); box-shadow:0 10px 22px var(--ring) }
.price h3{ margin:.2rem 0; font-size:1.2rem }
.price ul{ margin:.4rem 0 1rem 1.1rem }
.cta-block{ display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid #e7f4f4; }
.badge-old,.badge-best{ display:inline-block; font-weight:800; padding:.25rem .5rem; border-radius:.5rem; font-size:.8rem }
.badge-old{ background:#e9ecef; color:#233 }
.badge-best{ background:var(--accent); color:#1b1b1b }

/* —— Lead —— */
#lead, #beratung{ position:relative; overflow:visible; margin-top:60px }
#lead .lead-grid, #beratung .lead-grid{ display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:end }
#lead .figure-employee, #beratung .figure-employee{ position:relative }
#lead .figure-employee img, #beratung .figure-employee img{ position:absolute; left:50%; bottom:0; transform:translate(-50%,-20%); width:100%; max-width:none; filter:drop-shadow(0 12px 30px rgba(0,0,0,.18)); }
#lead .emp-caption, #beratung .emp-caption{ margin-top:220px; text-align:center; color:#395353; font-size:.9rem }
#lead .emp-caption .name, #beratung .emp-caption .name{ display:block; font-weight:700; color:var(--ink); font-size:2em }

/* —— FAQ —— */
details{ border:1px solid #e7f4f4; border-radius:12px; padding:14px 16px }
details+details{ margin-top:12px }
summary{ font-weight:700; cursor:pointer }

/* Gruender */
#gruender .member-card{
  /* Höhe des Bildbereichs: skaliert mit Viewport-Breite, begrenzt nach oben/unten */
  --avatar-h: clamp(320px, 46vw, 520px);
  --fg-hex-grey-offset: 58px;
  --fg-hex-yellow-offset: 96px;

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: center;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

/* 2-spaltig bleiben (kannst du auch weglassen, macht Bootstrap schon) */
#gruender .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Bildbereich: echte Höhe statt padding-hack → var(--avatar-h) ist jetzt eine Länge */
#gruender .member-card .member-media{
  position: relative;
  height: var(--avatar-h);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

#gruender .member-card .member-media .avatar{
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.18));
}

/* 2 blaue Hexe hinter dem Bild – nur EIN Mal definieren */
#gruender .member-card .member-media::before,
#gruender .member-card .member-media::after{
  content:"";
  position:absolute;
  aspect-ratio:1/1;
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index: 0;
  pointer-events:none;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.06));
}

#gruender .member-card .member-media::before{
  /* relativ zur Karten-/Medienbreite → wächst mit */
  width: 40%;
  background: var(--brand);
  opacity:.35;
  left:34%;
  top:-8%;
  transform: rotate(-6deg);
}

#gruender .member-card .member-media::after{
  width: 70%;
  background: var(--brand);
  opacity:.70;
  right:-18%;
  top:22%;
  transform: rotate(8deg);
}

/* graues + gelbes Hex "vor" dem Bild, am Bildboden maskiert */
#gruender .member-card h3,
#gruender .member-card .muted,
#gruender .member-card .mt-2{ padding:0 1rem; }
#gruender .member-card h3 { margin:.75rem 0 .25rem; }

/* Wichtig: top nutzt jetzt eine LÄNGE (var(--avatar-h)), dadurch exakt am Bildende */
#gruender .member-card h3::before{
  content:"";
  position:absolute;
  left:6%;
  width: 50%;
  aspect-ratio:1/1;
  background:var(--neutral);
  opacity:.95;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.06));
  top:calc(var(--avatar-h) - var(--fg-hex-grey-offset));
  -webkit-mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-grey-offset),transparent var(--fg-hex-grey-offset)) no-repeat;
          mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-grey-offset),transparent var(--fg-hex-grey-offset)) no-repeat;
}

#gruender .member-card h3::after{
  content:"";
  position:absolute;
  left:23%;
  width: 25%;
  aspect-ratio:1/1;
  background:var(--accent);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.06));
  top:calc(var(--avatar-h) - var(--fg-hex-yellow-offset));
  -webkit-mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-yellow-offset),transparent var(--fg-hex-yellow-offset)) no-repeat;
          mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-yellow-offset),transparent var(--fg-hex-yellow-offset)) no-repeat;
}


/* —— Specialists (Startseite) —— */
#specialists .member-card{
  --avatar-h: clamp(220px, 38vw, 340px);
  --fg-hex-grey-offset: 58px;
  --fg-hex-yellow-offset: 96px;

  position: relative;
  display:flex;
  flex-direction:column;
  padding:0;
  text-align:center;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
}
#specialists .member-card .member-media{
  position: relative;
  height: var(--avatar-h);
  overflow: hidden;
  border-radius:16px 16px 0 0;
}
#specialists .member-card .member-media .avatar{
  height: 100%; width: auto; max-height:none; max-width:100%;
  object-fit:contain; object-position:center; display:block; margin:0 auto;
  position: relative; z-index:1; filter: drop-shadow(0 12px 30px rgba(0,0,0,.18));
}
#specialists .member-card h3,
#specialists .member-card .muted,
#specialists .member-card .mt-2{ padding:0 1rem; }
#specialists .member-card h3 { margin:.75rem 0 .25rem; }
#specialists .member-card .muted{ margin-bottom:.25rem; }
#specialists .member-card .mt-2{ margin-top:.5rem !important; margin-bottom:1rem !important; }

/* 2 blaue Hexe hinter dem Bild */
#specialists .member-card .member-media::before,
#specialists .member-card .member-media::after{
  content:""; position:absolute; aspect-ratio:1/1;
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index: 0; pointer-events:none; filter: drop-shadow(0 10px 22px rgba(0,0,0,.06));
}
#specialists .member-card .member-media::before{
  width: clamp(140px, 24vw, 260px);
  background: var(--brand); opacity:.35; left:34%; top:-8%; transform: rotate(-6deg);
}
#specialists .member-card .member-media::after{
  width: clamp(220px, 36vw, 460px);
  background: var(--brand); opacity:.70; right:-18%; top:22%; transform: rotate(8deg);
}

/* graues + gelbes Hex vor dem Bild (am Bildboden maskiert) */
#specialists .member-card h3{ position: static; z-index:auto; }
#specialists .member-card h3::before{
  content:""; position:absolute; left:6%; width:clamp(160px, 28vw, 300px); aspect-ratio:1/1;
  background:var(--neutral); opacity:.95; transform:rotate(0deg);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index:2; pointer-events:none; filter:drop-shadow(0 10px 22px rgba(0,0,0,.06));
  top:calc(var(--avatar-h) - var(--fg-hex-grey-offset));
  -webkit-mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-grey-offset),transparent var(--fg-hex-grey-offset)) no-repeat;
          mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-grey-offset),transparent var(--fg-hex-grey-offset)) no-repeat;
}
#specialists .member-card h3::after{
  content:""; position:absolute; left:23%; width:clamp(90px, 16vw, 140px); aspect-ratio:1/1;
  background:var(--accent); transform:rotate(0deg);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
  z-index:3; pointer-events:none; filter:drop-shadow(0 8px 18px rgba(0,0,0,.06));
  top:calc(var(--avatar-h) - var(--fg-hex-yellow-offset));
  -webkit-mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-yellow-offset),transparent var(--fg-hex-yellow-offset)) no-repeat;
          mask: linear-gradient(to bottom,#fff 0,#fff var(--fg-hex-yellow-offset),transparent var(--fg-hex-yellow-offset)) no-repeat;
}

/* Weißer „Fenster“-Hintergrund für die Spalten */
#specialists .row > [class*="col-"]{ background:#fff; position:relative; z-index:0; }

/* CTA-Kachel als 4. Box in #medikation (ohne Card-Rand) */
/* Rahmen der CTA-Kachel (falls noch nicht vorhanden) */
#medikation .cta-emphasis,
#kliniken #krypto .cta-emphasis,
#cardlink .cta-emphasis,
#podcast .cta-emphasis,
#ti-beratung #krypto .cta-emphasis {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px;
  border:none;
  border-radius:16px;
  background:var(--brand-lite);
  box-shadow:0 10px 22px var(--ring);
  height:100%;
}

/* Vertikaler Stack mit Spacern */
#medikation .cta-emphasis.cta-stack, 
#kliniken #krypto .cta-emphasis,
#ti-beratung #krypto .cta-emphasis,
#cardlink .cta-emphasis,
#podcast .cta-emphasis {
  flex-direction:column;
  gap:0; /* keine Zusatzabstände */
}

/* enger Abstand Titel → Text */
#medikation .cta-emphasis.cta-stack h3{ margin:0 0 4px 0; }
#medikation .cta-emphasis.cta-stack p{  margin:0; }

/* zwei gleichgroße Spacer teilen den Restplatz → Button genau mittig */
#medikation .cta-emphasis.cta-stack .spacer{ flex:1 1 auto; }

/* Button horizontal zentrieren */
#medikation .cta-emphasis.cta-stack .btn{ align-self:center; }

@media (max-width:720px){
  #medikation .cta-emphasis{ padding:16px; }
  #medikation .cta-emphasis.cta-stack .btn{ width:100%; }
}

    /* ===== Hero mit sanfter Bewegung & Hex-Highlights ===== */
    #about .hero{
      position:relative;
      background: radial-gradient(1200px 600px at 90% 80%, rgba(12,184,182,.10) 0%, transparent 60%),
                  radial-gradient(900px 480px at 10% 10%, rgba(252,219,104,.18) 0%, transparent 60%),
                  linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%);
      overflow:hidden;
    }
    /* animierte, sehr subtile Hexe */
    #about .hero::before{
      left:auto; right:-80px; bottom:-80px;
      background: rgba(252,219,104,.55);
    }

    /* ===== Story – textuelle Auflistung ===== */
    .story-list{ margin:0; padding:0; }
    .story-list dt{
      font-weight:800; color:var(--brand-strong);
      margin:14px 0 4px 0; /* Jahr */
    }
    .story-list dd{
      margin:0 0 12px 1.25rem; color:#395353; /* eingerückter Text */
    }

    /* ===== Responsive Tweaks ===== */
    @media (max-width: 720px){
      #about .hero::after, #about .hero::before{ display:none; }
    }

#apotheken-flow .flow{
    display:grid; gap:24px;
    grid-template-columns:minmax(220px,1fr) 2fr;
    align-items:start;
  }
  #apotheken-flow .flow-rail{
    position:sticky; top:calc(var(--nav-offset,80px) + 12px);
    height:calc(100vh - var(--nav-offset,80px) - 24px);
    min-height:560px;
  }
  #apotheken-flow .flow-svg{ width:100%; height:100%; }
  #apotheken-flow #flowPath{
    fill:none; stroke:var(--brand-strong); stroke-width:3; stroke-linecap:round;
    stroke-dasharray:0 1; /* wird per JS gesetzt */
    opacity:.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,.06));
  }
  #apotheken-flow .flow-dot{
    position:absolute; left:0; top:0; transform:translate(-50%,-50%);
    font-size:24px; line-height:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.20));
    pointer-events:none;
  }
  #apotheken-flow .flow-steps{ display:grid; gap:16px; }
  #apotheken-flow .flow-step{
    opacity:0; transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease, box-shadow .25s ease, border-color .25s ease;
  }
  #apotheken-flow .flow-step.is-visible{ opacity:1; transform:none; }
  #apotheken-flow .flow-step.is-active{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem var(--ring);
  }

  /* responsive */
  @media (max-width: 900px){
    #apotheken-flow .flow{ grid-template-columns:1fr; }
    #apotheken-flow .flow-rail{ position:relative; height:320px; min-height:320px; }
  }

/* —— Skills / Chips (Startseite „Unsere Expertise“) —— */
.chips-wrap{ display:flex; flex-wrap:wrap; gap:10px; }

/* —— Footer (Startseite) —— */
.site-footer{ color:#0e1111; margin-top:48px; }
.site-footer .container{ position:relative; }
.site-footer .container::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(0,0,0,.06);
}
.footer-lede{ color:#2c3a3a; max-width:60ch; margin:0 0 12px; }
.footer-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.footer-tags li{
  border:1px solid #e7f4f4; background:var(--brand-lite);
  color:#064746; font-weight:700; font-size:.82rem;
  border-radius:999px; padding:.25rem .55rem;
}
.footer-card{
  border:1px solid #e7f4f4; border-radius:16px; padding:18px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.footer-title{ font-size:1.05rem; font-weight:800; margin:0 0 .5rem; }
.footer-card address{ color:#395353; font-style:normal; line-height:1.45; }
.footer-link{ color:var(--brand-strong); text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }
.footer-social{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.footer-chip{
  display:inline-block; border:1px solid rgba(12,184,182,.28);
  padding:.3rem .6rem; border-radius:999px; font-weight:700;
  color:#var(--brand-strong); text-decoration:none;
}
.footer-chip:hover{ background:rgba(12,184,182,.06); }
.footer-mininav{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-mininav a{ color:var(--brand-strong); text-decoration:none; }
.footer-mininav a:hover{ text-decoration:underline; }

/* —— Footer (TI-Gateway Seite) —— */
footer{ color:#0e1111; padding:32px 0 }
.footer a{ color:var(--brand-strong) }

/* —— Responsive —— */
  /* responsive */
@media (min-width:1400px){
  body::after{ width:clamp(360px,32vw,720px); }
}
@media (max-width:1040px){
  #startseite .hero-grid{ grid-template-columns: 1fr; }
  #startseite .hero-visual{
    order: 2;                         /* explizit unter den Text */
    opacity: .55;                     /* blasser */
    filter: saturate(.85) contrast(.95);
    margin-top: 12px;                 /* kleiner Abstand zum Text */
    min-height: 200px;
    background-size: 82%;             /* etwas kleiner, wirkt leichter */
    background-position: center bottom;
  }
  .hero{ padding:72px 0 52px }
  .hero-illustration{ grid-template-columns:1fr; }
  .hero-spacer{ display:none; }
  .hero.hero-bg::after{ left:10%; background-size:60%; background-position:center 100%; opacity:.26; inset:auto auto 0 auto; }
  .block{ grid-template-columns:1fr }
  #features .feature-wrap .grid{ grid-template-columns:1fr }
  #features::before,#features::after{ opacity:.24; width:38% }

  /* Startseite */
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ min-height:240px; margin-top:20px; }
  
  body#startseite .hero.hero-bg::after{
    opacity: .18 !important;          /* war .26 → blasser */
    left: 0; right: 0;
    background-position: center bottom;
    background-size: 80%;
    inset: auto auto 0 auto;
  }
}
@media (max-width: 991.98px){
  .mega .dropdown-menu{ max-width:none; }
  .mega .dropdown-menu.mega-menu{ min-width: 100%; }
  .ehc-menu-item{ padding:14px; }
}
@media (max-width: 900px){
	#apotheken-flow .flow{ grid-template-columns:1fr; }
	#apotheken-flow .flow-rail{ position:relative; height:320px; min-height:320px; }
}
@media (max-width:840px){
  section{ padding:28px }
}
/* ===== Mobile Fixes bis 720px ===== */
/* ===== Mobile Fixes bis 720px (einziger Block) ===== */
/* ===== Mobile (<=720px) – minimal & zielgenau ===== */
/* ===== Mobile bis 720px – schlank & gezielt ===== */
@media (max-width:720px){

  /* Deko ausblenden (wie gehabt) */
  body::before, body::after{ display:none; }
  .hex-corner::before, .hex-corner::after{ display:none; }

  /* Hero-Abstände / Visuals – unverändert schlank */
  .hero{ padding:60px 0 40px; }
  .hero.hero-bg::after{
    left:0; right:0;
    background-size:140%;
    background-position:center bottom;
    opacity:.32;
  }
  .hero-home{ padding:60px 0 40px; }
  .hero-visual{ min-height:200px; background-size:80%; }

  /* Startseite: Hintergrundbild etwas blasser/kleiner (wie vorher) */
  body#startseite .hero.hero-bg::after{
    opacity:.16 !important;
    background-size:88%;
  }
  #startseite .hero-visual{
    opacity:.45;
    filter:saturate(.8) contrast(.92);
    min-height:180px;
    background-size:78%;
  }

  /* Navigation */
  .nav .inner{ gap:10px; }
  .nav a{ padding:.7rem .8rem; }

  /* Feature-Ziergrafiken dezenter */
  #features::before, #features::after{ opacity:.18; }

  /* ===== Fix: Button in der „Folgerezepte …“-Karte (nur Mobile) ===== */
  /* Karte als Spalte stacken, damit der Button sauber unten sitzt */
  #medikation article.card.feat.h-100{
    display:flex !important;
    flex-direction:column !important;
  }

  /* Abstand unter der Liste, damit Button nicht „hochzieht“ */
  #medikation article.card.feat.h-100 ul{
    margin-bottom:0.75rem !important;
  }

  /* Der Button selbst: volle Breite, normaler Fluss, kein Overlay */
  #medikation article.card.feat.h-100 a.btn{
    position: static !important;   /* falls woanders mal absolut gesetzt wurde */
    display: block !important;
    width: 100% !important;
    margin-top: 1rem !important;   /* entspricht mt-3 */
    z-index: auto !important;      /* sicherheitshalber */
    clear: both;                   /* falls irgendwas floated */
  }
}



@media (max-width: 420px){
  .member-card .avatar{ aspect-ratio: 4 / 3; }
}
@media (max-width:380px){
  .brand-initials{ font-size:28px }
  .brand-wordmark{ font-size:11px; letter-spacing:.03em }
}

/* === Stabiler Brand-Logo-Fix (am Ende, gewinnt gegen Bootstrap) === */
.navbar.ehc-nav .navbar-brand .ehc_logo{
  font-family: var(--brand-font);
  font-size: clamp(32px, 4.6vw, 40px);
  color: var(--brand);
  text-transform: lowercase;
  line-height: 1;
}
.navbar.ehc-nav .navbar-brand .ehc_wordmark, 
footer .brand .ehc_wordmark {
  font-family: var(--brand-font);
  color: var(--brand-wordmark-color);
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
  color: inherit;
}

/* Brand-Block oben links */
.nav .brand .brand-initials, 
footer .brand .brand-initials {
  font-family: var(--brand-font);
  font-weight: 700;
  text-transform: lowercase;
  font-size: clamp(36px, 5.2vw, 44px);
  color: var(--brand);
  line-height: 1;
}
.nav .brand .brand-wordmark,
footer .brand .brand-wordmark {
  font-family: var(--brand-font);
  color: var(--brand-wordmark-color);
  font-weight: 300;
  font-size: clamp(12px, 1.8vw, 14px);
  margin-top: 2px;
  line-height: 1;
}

/* Hover/Focus soll Logo-Farbe nicht verändern */
.nav .brand-link,
.navbar.ehc-nav .navbar-brand{ color: inherit; }
.nav .brand-link:hover,
.nav .brand-link:focus,
.navbar.ehc-nav .navbar-brand:hover,
.navbar.ehc-nav .navbar-brand:focus{ color: inherit; }

/* ====================================================================== *
   Mobile-Fix V2 – gezielte Korrekturen (last wins)
* ====================================================================== */

/* 1) Hero-Punkte: kein Block-Umbruch bei <strong> UND <span class="fw-bold"> */
.hero-points li{ display:flex; gap:10px; margin:6px 0; color:#2c3a3a; }
.hero-points li strong{
  display:inline;
  font-weight:700;
  white-space:normal;
  line-height:inherit;
}
/* NEU: Fließtext für .fw-bold in den Bullet-Points */
.hero-points li .fw-bold{
  display:inline !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:inherit !important;
}

/* 2) Robustes Wrapping im Hero (verhindert Text-Überlauf rechts) */
#startseite .hero h1,
#startseite .lead-home,
#startseite .hero-text{
  max-width:100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* 3) Hero-Visual hinter den Text legen (größere Tablets/kleinere Desktops) */
@media (max-width:1400px){
  #startseite .hero-grid{ position:relative; }
  #startseite .hero .container{ position:relative; z-index:2; }
  #startseite .hero-text{ position:relative; z-index:2; }
  #startseite .hero-visual{
    position:absolute;
    right:0; top:0; bottom:0;
    width:min(46%, 520px);
    opacity:.28;
    filter:saturate(.9) contrast(.95);
    z-index:1;
    pointer-events:none;
    background-size:contain;
    background-position:right bottom;
    margin:0; min-height:0;
  }

  /* Pseudo-Background leicht abdunkeln */
  body#startseite .hero.hero-bg::after{
    opacity:.18 !important;
    inset:auto 0 0 40%;
    background-position:right bottom;
    background-size:70%;
  }
}

/* 4) Mobile: Hero-Bild als Overlay in die linke Box (oben rechts, volle Box-Höhe) */
@media (max-width:1040px){
  /* rechte Box ausblenden */
  #startseite .hero-visual{ display:none !important; }

  /* Pseudo-Background der Hero-Section deaktivieren, damit nichts doppelt erscheint */
  body#startseite .hero.hero-bg::after{ content: none !important; }

  /* linke Box vorbereiten: kein unnötiges bottom-Polster, Platz rechts für Bild */
  #startseite .hero-text{
    position: relative;
    overflow: visible;                          /* Bild darf nach links rauslaufen */
    padding-bottom: 0;                          /* entfernt die frühere Mehrhöhe */
    padding-right: clamp(48px, 22vw, 220px);    /* verhindert, dass Text ins Bild läuft */
  }

  /* Bild als Overlay: oben rechts, volle Box-Höhe, halbtransparent */
  #startseite .hero-text::after{
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;       /* füllt die Box */
    background-image: url('/static/img/hero/startseite_hero_ehealth-connect_25.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;                 /* Höhe = Box-Höhe */
    background-position: right -100px top 75px;    /* nach rechts rausgeschoben; anpassbar */
    opacity: 0.3;                                /* Sichtbarkeit gemäß deinem Stand */
    z-index: 0;
    pointer-events: none;
  }

  /* Text über dem Bild */
  #startseite .hero-text > *{
    position: relative;
    z-index: 1;
  }
}

/* 5) Very Small: Sicherheit + Feintuning */
@media (max-width:720px){
  .hero-visual{ display:none !important; }

  /* etwas weniger rechter Textabstand und Bild noch etwas weiter rechts raus */
  #startseite .hero-text{
    padding-right: clamp(28px, 18vw, 140px);
  }
  #startseite .hero-text::after{
	opacity: 0.1;                                /* Sichtbarkeit gemäß deinem Stand */
	background-size: auto 100%;                 /* Höhe = Box-Höhe */
    background-position: right -300px top 150px;    /* mehr Offset; bei Bedarf anpassen */
  }
}

/* === Hero-Background: immer boxhoch, rechts unten verankert (auch 49") === */
@media (min-width: 1200px){
  body#startseite .hero.hero-bg::after,
  body#kliniken .hero.hero-bg::after,
  body#arztpraxen .hero.hero-bg::after,
  body#pflege .hero.hero-bg::after,
  body#ti-beratung .hero.hero-bg::after,
  body#ti-gateway .hero.hero-bg::after,
  body#ti-beratung-und-services .hero.hero-bg::after{
    position: relative; /* Position-Kontext */
  }
  body#startseite .hero.hero-bg::after,
  body#kliniken .hero.hero-bg::after,
  body#arztpraxen .hero.hero-bg::after,
  body#pflege .hero.hero-bg::after,
  body#ti-beratung .hero.hero-bg::after,
  body#ti-gateway .hero.hero-bg::after,
  body#ti-beratung-und-services .hero.hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-size:auto 90%;       /* Höhe = 90% der Hero-Box */
    pointer-events:none;
    z-index:0;

    --container-width: min(var(--container-max), calc(100vw - 40px));
    --gutter: max(calc((100vw - var(--container-width)) / 2), 20px);
    --bleed: clamp(12px, 4vw, 100px);
    /* wächst ab 1440px bis max. +200px */
    --extra: clamp(0px, (100vw - 1440px), 200px);
    background-position: calc(100% - var(--gutter) + var(--bleed) + var(--extra)) 100% !important;
  }
}
@media (max-width: 768px) {
	/* === nur Umbruch-Verhalten wie Startseite =================== */
	#apotheken .hero h1,
	#apotheken .lead-home,
	#apotheken .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#kliniken .hero h1,
	#kliniken .lead-home,
	#kliniken .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#arztpraxen .hero h1,
	#arztpraxen .lead-home,
	#arztpraxen .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#pflege .hero h1,
	#pflege .lead-home,
	#pflege .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#ti-beratung .hero h1,
	#ti-beratung .lead-home,
	#ti-beratung .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#ti-gateway .hero h1,
	#ti-gateway .lead-home,
	#ti-gateway .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}

	#ti-beratung-und-services .hero h1,
	#ti-beratung-und-services .lead-home,
	#ti-beratung-und-services .hero-text{
	  max-width: 100%;
	  word-break: break-word;   /* sehr lange Wörter trennen */
	  overflow-wrap: anywhere;  /* weicher Umbruch, falls nötig */
	  hyphens: auto;            /* Silbentrennung, wo verfügbar */
	  text-wrap: balance;       /* schönere Zeilenverteilung (moderne Browser) */
	}
}

/* === Chip: nie umbrechen (auch nicht an •) === */
.chip{
  white-space: nowrap !important;   /* gesamter Inhalt in einer Zeile */
}
.chip strong{
  white-space: nowrap !important;   /* auch fetter Text ohne Umbruch */
}

/* === #specialists: Bullet-Liste als echter Fließtext (kein Flex, kein Spalten-Effekt) === */
section#specialists ul.hero-points{
  display:block !important;
  padding-left: 0 !important;       /* Bootstrap ps-4 neutralisieren */
  margin-left: 0 !important;
}

section#specialists ul.hero-points > li{
  display:block !important;         /* weg von Flex → normaler Blockfluss */
  position:relative;
  margin:6px 0 !important;
  padding-left:18px !important;     /* Platz für unseren Punkt */
  gap:0 !important;                 /* evtl. geerbtes gap sicher neutralisieren */
  align-items:unset !important;
  flex-wrap:unset !important;
  white-space:normal !important;    /* normaler Fließtext */
  color:#2c3a3a;
}

/* vorhandenes grünes .dot-Span ausblenden */
section#specialists ul.hero-points > li > .dot{
  display:none !important;
}

/* eigener runder Punkt via ::before */
section#specialists ul.hero-points > li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.9em;                        /* optisch mittig zur ersten Zeile */
  width:8px; height:8px;
  border-radius:50%;
  background:var(--brand);
  transform:translateY(-50%);
}

/* Fettstellen bleiben Inline-Text (kein Block / keine zweite Spalte) */
section#specialists ul.hero-points > li .fw-bold,
section#specialists ul.hero-points > li strong{
  display:inline !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:inherit !important;
  font-weight:700;
  margin:0 !important;
  flex:0 0 auto !important;         /* falls irgendwo Flex erbt */
}

/* Fallback: alle direkten Kinder (außer .dot) inline darstellen */
section#specialists ul.hero-points > li > *:not(.dot){
  display:inline !important;
}

/* Lead: Bootstrap-Layout übernehmen, altes 2-Spalten-Grid neutralisieren */
#lead .lead-grid { display: contents; }

/* === BRAND – gemeinsam für Nav & Footer (LAST WINS) === */
/* 1) Saubere Kantenglättung im gesamten Brand-Bereich */
.nav .brand,
.navbar.ehc-nav .navbar-brand,
footer .brand{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 2) Wortmarke „eHealth-Connect“ – zart, aber scharf (Nav + Footer) */
.nav .brand .brand-wordmark,
.navbar.ehc-nav .navbar-brand .ehc_wordmark,
footer .brand .brand-wordmark,
footer .brand .ehc_wordmark{
  opacity: 1 !important;          /* überschreibt alte .95 */
  filter: none !important;
  text-shadow: none !important;
  font-weight: 300 !important;     /* zart, stabiler als 100/200 */
  color: var(--brand-wordmark-color) !important;    /* volle Farbe statt halbtransparent */
  font-synthesis-weight: none;
}

/* 3) Initialen „ehc“ – gemeinsame Regeln für beide Orte */
.nav .brand .brand-initials,
.navbar.ehc-nav .navbar-brand .ehc_logo,
footer .brand .brand-initials{
  color: var(--brand) !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 4) Optional: hauchfeine Kontur für Windows (sichtbar, aber nicht „fett“) */
@supports (-webkit-text-stroke: 0.25px currentColor){
  .nav .brand .brand-wordmark,
  .navbar.ehc-nav .navbar-brand .ehc_wordmark,
  footer .brand .brand-wordmark,
  footer .brand .ehc_wordmark{
    -webkit-text-stroke: 0.25px currentColor;
  }
}

/* ===================================================================
   MOBILE NAV: Akkordeon / im Fluss (keine Überblendung der Navbar)
   =================================================================== */
@media (max-width: 991.98px){
  /* Dropdowns verhalten sich wie Abschnitt im Collapse */
  .navbar.ehc-nav .dropdown.mega{ position: static !important; }

  .navbar.ehc-nav .dropdown-menu.mega-menu{
    position: static !important;     /* NICHT fixed/absolute */
    float: none !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 0 !important;        /* kleiner Abstand unter dem Toggle */
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  }

  /* Innenabstände & Breite im Menü */
  .navbar.ehc-nav .dropdown-menu.mega-menu .container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .navbar.ehc-nav .dropdown-menu.mega-menu .ehc-menu-list{
    padding: 8px 4px !important;
  }

  /* Sauberes Wrapping: nichts ragt nach rechts raus */
  .ehc-menu-item,
  .ehc-menu-item .menu-title,
  .ehc-menu-item .menu-desc{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Sicherheit */
  .navbar.ehc-nav .navbar-collapse{ overflow: visible !important; }
  html, body{ overflow-x: hidden !important; }
}

/* === TI-Gateway: responsive Opacity + keine Verkleinerung unter 1040px === */

/* Basis (>=1041px): Bild ~0.70 sichtbar */
body#ti-gateway .hero.hero-bg::after{
  opacity: .70 !important;                 /* 0.70 */
  background-position: right bottom !important;
  background-size: auto 90% !important;    /* höhenbasiert, wirkt stabil auch auf großen Screens */
}

/* 728px – 1040px: Bild ~0.50 sichtbar, NICHT kleiner machen */
@media (min-width: 728px) and (max-width: 1040px){
  body#ti-gateway .hero.hero-bg::after{
    opacity: .50 !important;               /* 0.50 */
    /* überschreibt die globale Regel, die auf 60% schrumpft */
    background-size: auto 90% !important;  /* Höhe = 90% der Hero-Box */
    background-position: right bottom !important;
    inset: 0 0 0 40% !important;           /* wie am Desktop, ragt unter die linke Spalte */
  }
}

/* < 728px: Bild ~0.30 sichtbar, weiterhin nicht schrumpfen */
@media (max-width: 727.98px){
  body#ti-gateway .hero.hero-bg::after{
    opacity: .30 !important;               /* 0.30 */
    background-size: auto 90% !important;  /* höhenbasiert statt prozentuale Breite */
    background-position: center bottom !important; /* optional: mittiger auf sehr schmalen Screens */
    inset: 0 !important;                   /* volle Breite der Section ausnutzen */
  }
}

/* Schutz: globale Shrink-Regeln unter 1040px neutralisieren NUR für TI-Gateway */
@media (max-width: 1040px){
  /* deine globale Regel .hero.hero-bg::after { background-size:60%; ... } wird hier gezielt überschrieben */
  body#ti-gateway .hero.hero-bg::after{
    background-size: auto 90% !important;
  }
}

/* ================== Podcast: Hero-Visual – Bild nie oben abgeschnitten ================== */
body#podcast .hero.hero-bg{
  position: relative;
}

/* Rechte Spalte mit Hintergrundgrafik:
   - skaliert auf volle Höhe der Box (auto 100%)
   - verankert rechts/unten
   - kein Crop wie bei background-size: cover
*/
body#podcast .hero-visual{
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: auto 100% !important;   /* fit-to-height statt cover */
  min-height: clamp(280px, 44dvh, 520px) !important; /* behält deine Mindesthöhe bei */
  border-radius: 16px; /* falls du die Card-Optik magst */
}

/* Tablet: etwas kleiner, aber weiterhin fit-to-height */
@media (max-width: 1040px){
  body#podcast .hero-visual{
    min-height: clamp(220px, 38dvh, 420px) !important;
    background-size: auto 100% !important;
    background-position: center bottom !important; /* mittiger bei schmaleren Viewports */
  }
}

/* Mobile: bleibt unter dem Text, volle Boxhöhe, kein Crop */
@media (max-width: 720px){
  body#podcast .hero-visual{
    min-height: 220px !important;
    background-size: auto 100% !important;
    background-position: center bottom !important;
  }
}

/* Sicherheitsnetz: keine Eltern dürfen es clippen */
body#podcast header.hero .row{ align-items: stretch !important; }
body#podcast header.hero [class*="col-"]{ overflow: visible !important; }

#leadThanks { opacity: 1; transition: opacity .25s ease; }

/* ===== Eye-Catcher: 0 EUR dank Förderung ===== */
/* ===== Eye-Catcher Förderung – nutzt deinen CTA-Style, lokal für #foerderung ===== */
#foerderung .cta-emphasis{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px;
  border:none;
  border-radius:16px;
  background:var(--brand-lite);
  box-shadow:0 10px 22px var(--ring);
  height:100%;
}
#foerderung .cta-emphasis.cta-stack{ flex-direction:column; gap:0; }

/* „0 EUR“-Badge */
/* ===== Eye-Catcher Förderung (0 EUR) ===== */
#foerderung .cta-emphasis{
  display:flex;
  align-items:flex-start;
  padding:28px;
  border:none;
  border-radius:20px;
  background:var(--brand-lite);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

#foerderung .cta-emphasis.cta-stack{ flex-direction:column; }

/* Plakativer „0 EUR“-Badge */
.badge-zero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  height:110px;
  padding:0 16px;
  border-radius:20px;
  background:#fff;
  border:3px solid var(--brand-strong);
  color:var(--brand-strong);
  font-weight:900;
  font-size:2rem;
  line-height:1;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Mobile Anpassung */
@media (max-width:720px){
  #foerderung .cta-emphasis{ padding:20px; }
  .badge-zero{
    min-width:80px; height:80px;
    font-size:1.5rem;
    border-radius:16px;
  }
  #foerderung .btn-lg{ width:100%; }
}