@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap");
	
    /* =========================================
   BRAND / THEME
   ========================================= */
	:root{
	
	  --brand:#0CB8B6;
	  --brand-wordmark-color: #666666;
	  --brand-2:#0aa3a1;
	  --brand-strong:#075F5E;
	  --brand-lite:#E9F8F8;
	  --accent:#FCDB68;
	  --danger:#DC2626;
	  --neutral:#B2B2B2;
	
	  --brand:#0CB8B6;         /* Primär */
	  --brand-2:#0aa3a1;       /* Sekundär */
	  --brand-lite:#85DBDA;    /* Hell */
	  --accent:#FCDB68;        /* Akzent */
	  --ring: rgba(12,184,182,.18);
	  --ehc-border:#eaf3f3;
	  --ehc-text-muted:#526566;

	  --bs-primary:var(--brand);
	  --bs-secondary:#0f3b3a;
	  --bs-warning:var(--accent);

	  --ehc-nav-h-sm:64px;
	  --ehc-nav-h-lg:74px;

	  --anchor-offset-sm: calc(var(--ehc-nav-h-sm) + 20px);
	  --anchor-offset-lg: calc(var(--ehc-nav-h-lg) + 20px);

	  --brand-strong:#075F5E;
	  --brand-font:"Montserrat",sans-serif;

	  /* Button-Typo und Spacing */
	  --btn-font-size: 1rem;
	  --btn-line-height: 1.2;
	  --btn-pad-y: 14px;
	  --btn-pad-x: 18px;
	}

	/* Scroll-Offsets für Anker */
	html, body{
	  scroll-padding-top: var(--anchor-offset-sm);
	  scroll-behavior: smooth;
	}
	@media (min-width:992px){
	  html, body{ scroll-padding-top: var(--anchor-offset-lg); }
	}
	section[id]{ scroll-margin-top: var(--anchor-offset-sm); }
	@media (min-width:992px){
	  section[id]{ scroll-margin-top: var(--anchor-offset-lg); }
	}
	/* Fallback ::before für Browser ohne scroll-padding */
	#leistung::before, #ablauf::before, #kosten::before, #faq::before, #beratung::before, #partner::before{
	  content:"";
	  display:block;
	  height: var(--anchor-offset-sm);
	  margin-top: calc(var(--anchor-offset-sm) * -1);
	  visibility:hidden;
	}
	@media (min-width:992px){
	  #leistung::before, #ablauf::before, #kosten::before, #faq::before, #beratung::before, #partner::before{
		height: var(--anchor-offset-lg);
		margin-top: calc(var(--anchor-offset-lg) * -1);
	  }
	}

	body{
	  font-variant-ligatures:none;
	  padding-top:var(--ehc-nav-h-sm); /* Platz für fixed-top Navbar */
	}
	@media (min-width:992px){ body{ padding-top:var(--ehc-nav-h-lg); } }

	/* =========================================
	   NAVBAR (fixed-top) + EHC-LOGO/WORDMARK
	   ========================================= */
	.ehc-nav{ background:#fff; border-bottom:1px solid var(--ehc-border); }
	.ehc-nav .navbar-nav .nav-link{ padding:.75rem 1rem; color:#213030; }
	.ehc-nav .nav-link:hover, .ehc-nav .nav-link:focus{ color:var(--brand); }
	.ehc-nav .navbar-toggler{ border-color:var(--ehc-border); }
	.ehc-nav .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(12,184,182,.25); }

	/* NAV-Brand: vertikal stapeln + Originalgrößen */
	.ehc-nav .navbar-brand{
	  display: flex !important;
	  flex-direction: column !important;
	  align-items: center !important;
	  justify-content: center;
	  gap: 0 !important;
	  padding-top: .25rem;
	  padding-bottom: .25rem;
	}

	/* Navbar-Brand exakt stapeln und unabhängig von Bootstrap skalieren */
	.ehc-nav .navbar-brand{
	  display:flex !important;
	  flex-direction:column !important;
	  align-items:center !important;
	  justify-content:center;
	  gap:.2rem;
	  padding-top:.35rem;
	  padding-bottom:.35rem;
	  line-height:1;
	  font-size:0 !important;            /* neutralisiert die Eltern-Skalierung */
	}

	/* "ehc" – groß wie im Original */
	.ehc_logo{
	  font-family: var(--brand-font);
	  font-size: clamp(32px, 4.6vw, 40px) !important;          /* hart in px -> wirkt wie rechts im Screenshot */
	  color: var(--brand);
	  text-transform:lowercase;
	  line-height:1;
	}

	/* "eHealth-Connect" – kleiner Untertitel */
	.ehc_wordmark{
	  font-family: var(--brand-font);
	  font-weight:300 !important;
	  font-synthesis-weight: none;
	  font-size:12px !important;
	  line-height:1;
	  color: var(--brand-wordmark-color);
	  opacity: 1;
	  margin-top: 2px;
	  font-weight: lighter;
	}

	/* Optional: mobile etwas kompakter */
	@media (max-width: 575.98px){
	  .ehc-nav .navbar-brand .ehc_logo{ font-size:40px !important; }
	  .ehc-nav .navbar-brand .ehc_wordmark{ font-size:16px !important; }
	}


	/* CTA in der Navbar */
	.ehc-cta{
	  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
	  --bs-btn-hover-bg:var(--brand-2); --bs-btn-hover-border-color:var(--brand-2);
	  --bs-btn-color:#fff;
	  border-radius:.75rem; padding:.55rem 1rem; font-weight:600;
	  box-shadow:0 8px 18px rgba(12,184,182,.18);
	}

	/* Dropdown (einfach) */
	.dropdown-menu{
	  border:1px solid var(--ehc-border);
	  box-shadow:0 20px 40px rgba(2,41,40,.12);
	  border-radius:.75rem;
	}
	.dropdown-item{ border-radius:.5rem; }
	.dropdown-item:hover{ background:#f6fffe; color:#213030; }

	/* =========================================
	   BUTTONS
	   ========================================= */
	.btn{
	  appearance: none;
	  border: 1px solid transparent;
	  border-radius: 14px;
	  padding: 14px 18px;
	  font-weight: 700;
	  cursor: pointer;
	  transition: .2s ease;
	  font-size: var(--btn-font-size) !important;
	  line-height: var(--btn-line-height);
	}
	.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;
	}

	.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;

	  background: var(--brand-strong);
	  color: #fff;
	  border-color: var(--brand-strong);
	  box-shadow:0 8px 18px rgba(12,184,182,.18);
	}
	.btn-primary:hover{
	  background: rgba(12,184,182,.06);
	  color: var(--brand-strong);
	  border-color: var(--brand-strong);
	}
	.btn-primary:focus,
	.btn-primary:focus-visible,
	.btn-check:focus + .btn-primary{
	  outline: none;
	  box-shadow: 0 0 0 .25rem var(--ring);
	}

	.btn-outline-primary{
	  --bs-btn-color: var(--brand-strong);
	  --bs-btn-border-color: rgba(12,184,182,.5);
	  --bs-btn-hover-color: var(--brand-strong);
	  --bs-btn-hover-bg: rgba(12,184,182,.06);
	  --bs-btn-hover-border-color: var(--brand-strong);
	  --bs-btn-active-color: var(--brand-strong);
	  --bs-btn-active-bg: rgba(12,184,182,.10);
	  --bs-btn-active-border-color: var(--brand-strong);
	  --bs-btn-focus-shadow-rgb: 12,184,182;

	  background:#fff;
	  border: 1px solid rgba(12,184,182,.5) !important; /* gut sichtbarer Rand */
	}

	/* Partner-Ribbon: Close-Button klein */
	#partnerRibbon #prClose{
	  --btn-font-size: .875rem;
	  --btn-line-height: 1;
	  --btn-pad-y: .125rem;
	  --btn-pad-x: .375rem;
	  border-radius: .5rem;
	  box-shadow: none !important;
	}

	/* =========================================
	   HERO + UI
	   ========================================= */
	.hero{
	  background:linear-gradient(180deg,#f6fffe 0%, #ffffff 70%);
	  border-bottom:1px solid #eef6f6;
	}
	.badge { 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; }
	.text-muted-2{ color:#526566; }

	.feature-icon{
	  width:48px;height:48px;border-radius:.75rem;
	  background:#ecfffe; display:grid;place-items:center; color:var(--brand);
	  border:1px solid #dff4f3;
	}
	.card-border{ border:1px solid #eaf3f3; }
	.bg-soft{ background:#f8fffe; }

	/* Partner Ribbon */
	#partnerRibbon{ display:none; background:#0a6b69; color:#fff; }
	#partnerRibbon a{ color:#fff; text-decoration:underline; }

	/* =========================================
	   ABLAUF – mehr Höhe + Track/Fill (Balken)
	   ========================================= */
	/* Extra Höhe der Section (mobil & desktop) */
	#ablauf, #kosten, #leistung, #beratung, #partner, #hero_banner {
	  padding-top: 8rem !important;
	  padding-bottom: 8rem !important;
	}
	@media (min-width:720px){
	  #ablauf, #kosten, #leistung, #beratung, #partner, #hero_banner {
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;
	  }
	}
	@media (min-width:996px){
	  #ablauf, #kosten, #leistung, #beratung, #partner, #hero_banner {
		padding-top: 6rem !important;
		padding-bottom: 6rem !important;
	  }
	}
	@media (min-width:1200px){
	  #ablauf, #kosten, #leistung, #beratung, #partner, #hero_banner {
		padding-top: 7rem !important;
		padding-bottom: 7rem !important;
	  }
	}
	@media (max-width:720px){
	  #ablauf, #kosten, #leistung, #beratung, #partner, #hero_banner {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	  }
	}

	/* Karten etwas höher, damit’s „boxiger“ wirkt */
	#ablauf .step-card .card-body{ min-height: 140px; }

	/* Wrapper für Track/Füllung hinter den Karten */
	#ablauf .steps-wrap{ position: relative; }
	#ablauf .steps-wrap .row{ position: relative; z-index: 2; }

	/* Track + Fill Grundstil */
	#ablauf .step-track{
	  position: absolute;
	  pointer-events: none;
	  z-index: 1;
	  background: rgba(12,184,182,.14);             /* sichtbarer als #eaf3f3 */
	  border-radius: 9999px;
	  box-shadow: inset 0 0 0 1px rgba(12,184,182,.22);
	}
	#ablauf .step-fill{
	  position: absolute;
	  border-radius: inherit;
	  background: linear-gradient(90deg, var(--brand), var(--brand-2));
	  box-shadow: 0 8px 20px rgba(12,184,182,.18);
	}

	/* Standard: mobil/kleiner – vertikaler Balken (oben→unten) */
	#ablauf .step-track{
	  top: 0; bottom: 0;
	  left: 50%;
	  width: 10mm;              /* ≈ 1 cm */
	  transform: translateX(-50%);
	}
	#ablauf .step-fill{
	  left: 0; right: 0;
	  top: 0;
	  height: calc(var(--progress, 0) * 100%);
	}

	/* Desktop (>=1200px): horizontaler Balken (links→rechts) */
	@media (min-width:1200px){
	  /* breitere X-Gutters nur für diese Row, damit der Balken sichtbar ist */
	  #ablauf .steps-wrap .row{
		--bs-gutter-x: 2.5rem;  /* ~40px */
		position: relative;
		z-index: 2;
	  }
	  /* Track mittig hinter den Cards platzieren, leicht über die Row hinaus */
	  #ablauf .step-track{
		left: -1rem;
		right: -1rem;
		top: 50%;
		height: 10mm;           /* ≈ 1 cm */
		transform: translateY(-50%);
		z-index: 1;
	  }
	  /* Füllung entsprechend Scroll-Progress */
	  #ablauf .step-fill{
		left: 0;
		top: 0;
		bottom: 0;
		width: calc(var(--progress, 0) * 100%);
		height: 100%;
	  }
	}

	/* Sicherheit: Cards über dem Track rendern */
	#ablauf .step-card{ position: relative; z-index: 3;
	  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
	}
	#ablauf .step-card.highlight{
	  border-color:var(--brand)!important;
	  background-color:#f6fffe;
	  box-shadow:0 8px 20px var(--ring);
	}

	/* =========================================
	   LEAD-FORM (#beratung)
	   ========================================= */
	#beratung{ position:relative; overflow:visible; margin-top:80px; }
	#beratung .figure-employee{
	  position:relative;
	  min-height:0;
	  display:flex;
	  flex-direction:column;
	  align-items:center;
	  text-align:center;
	}
	#beratung .figure-employee img{
	  position:static;
	  transform:none;
	  width:90%;
	  max-width:420px;
	  height:auto;
	  filter:drop-shadow(0 12px 30px rgba(0,0,0,.18));
	}
	#beratung .emp-caption{
	  margin-top:.6rem;
	  text-align:center;
	  color:#395353;
	  font-size:.95rem;
	  position:relative;
	  z-index:1;
	}
	#beratung .emp-caption .name{
	  display:block;
	  font-weight:700;
	  color:#0e1111;
	  font-size:1.1rem;
	  line-height:1.2;
	}
	#beratung .lede{ font-size:1.05rem; color:var(--ehc-text-muted); }
	.muted{ color:#395353; }
	.btn-ghost{
	  background:#fff; color:#213030; border:1px solid var(--ehc-border);
	}
	.btn-ghost:hover{
	  background:#f6fffe; border-color:var(--brand); color:#213030;
	}
	#hp-wrapper{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

	/* =========================================
	   FOOTER
	   ========================================= */
	.site-footer{
	  background:linear-gradient(180deg,#f8fffe 0%, #ffffff 65%);
	  border-top:1px solid var(--ehc-border);
	  color:#213030;
	}
	.site-footer .brand-link{
	  display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none; color:inherit;
	}
	.site-footer .brand-initials{
	  display:inline-grid; place-items:center;
	  width:40px; height:40px; border-radius:.75rem;
	  background:linear-gradient(135deg,var(--brand),var(--brand-2));
	  color:#fff; font-weight:800; letter-spacing:.5px;
	}
	.site-footer .brand-wordmark{ font-size:1.15rem; font-weight:700; }
	.footer-lede{ font-size:1.05rem; color:#526566; }
	.footer-tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
	.footer-tags a{
	  display:inline-block; padding:.35rem .6rem; border:1px solid var(--ehc-border);
	  border-radius:999px; text-decoration:none; color:#213030; font-size:.9rem;
	}
	.footer-tags a:hover{ border-color:var(--brand); color:var(--brand); box-shadow:0 8px 18px rgba(12,184,182,.12); }
	.footer-card{
	  background:#fff; border:1px solid var(--ehc-border); border-radius:1rem;
	  box-shadow:0 20px 40px rgba(2,41,40,.06);
	}
	.footer-title{ font-size:1.1rem; font-weight:700; margin:0 0 .25rem 0; }
	.footer-link{ color:#0CB8B6; text-decoration:none; }
	.footer-link:hover{ text-decoration:underline; }
	.footer-social{ margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap; }
	.footer-chip{
	  display:inline-block; border:1px solid var(--ehc-border); border-radius:.75rem;
	  padding:.35rem .65rem; text-decoration:none; color:#213030; font-weight:600;
	}
	.footer-chip:hover{ border-color:var(--brand); color: var(--brand); box-shadow:0 8px 18px rgba(12,184,182,.12); }
	.site-footer > div:last-child{
	  border-top:1px solid var(--ehc-border);
	  background:#fff; color:#213030; padding:.9rem 0;
	}
	.footer-mininav{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
	.footer-mininav a{ color:#213030; text-decoration:none; }
	.footer-mininav a:hover{ color:#0CB8B6; text-decoration:underline; }

	/* Feinschliff */
	@media (min-width:992px){
	  .ehc-nav .navbar-nav .nav-item{ margin:0 .25rem; }
	}

	/* ===========================
	   FAQ (Accordion) – nur Border in Brand-/Primary-Farbe
	   =========================== */
	#faq .accordion{
	  /* Chevron in Brand-Farbe (#075F5E) */
	  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' stroke='%23075F5E' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M1.5 6l6 6 6-6'/%3E%3C/svg%3E");
	  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16' stroke='%23075F5E' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M1.5 6l6 6 6-6'/%3E%3C/svg%3E");
	}

	#faq .accordion-item{
	  background:#fff;
	  border:1px solid var(--ehc-border);
	  border-radius:.75rem;
	  overflow:hidden;
	  margin-bottom:.75rem;
	}

	/* Kopfzeile: weißer Hintergrund, nur Rand in Brand-Farbe */
	#faq .accordion-button{
	  background:#fff;
	  color:#213030;
	  border:1px solid var(--brand-strong);      /* wie Primary-Button */
	  border-radius:.75rem;
	  padding:.9rem 1rem;
	  box-shadow:none;
	}

	/* geschlossen: durchgehender Rand */
	#faq .accordion-button.collapsed{
	  border-color:var(--brand-strong);
	  border-bottom-color:var(--brand-strong);
	}

	/* geöffnet: weiterhin weiß, Border leicht in Richtung Brand betont */
	#faq .accordion-button:not(.collapsed){
	  background:#fff;
	  color:#213030;
	  border-color:var(--brand);                  /* minimal heller Akzent beim Offen-Zustand */
	}

	/* Hover/Focus: nur Border/Ring, kein Hintergrund */
	#faq .accordion-button:hover{
	  border-color:var(--brand);
	  box-shadow:0 0 0 .125rem rgba(12,184,182,.12);
	}
	#faq .accordion-button:focus{
	  outline:none;
	  box-shadow:0 0 0 .25rem var(--ring);
	}

	/* Body normal auf weiß */
	#faq .accordion-body{
	  background:#fff;
	  color:var(--ehc-text-muted);
	  border-top:1px solid var(--ehc-border);
	}

	/* Ablauf: Track sicher über der Row, aber unter den Cards */
	#ablauf .steps-wrap .row{ position:relative; z-index:1; }
	#ablauf .step-track{ z-index:2; }   /* statt 1 */
	#ablauf .step-card{ position:relative; z-index:3; }

	/* Falls irgendein Grid-Element doch Background hat – transparent erzwingen */
	#ablauf .steps-wrap .row,
	#ablauf .steps-wrap [class*="col-"]{ background:transparent !important; }

	/* Desktop (horizontal) – vertikale Breite zurücksetzen + richtig strecken */
	@media (min-width:1200px){
	  #ablauf .step-track{
		left: 0; right: 0;           /* statt left:-1rem/right:-1rem ok */
		top: 50%;
		height: 10mm;
		width: auto;                 /* WICHTIG: überschreibt width:10mm vom Mobile-Style */
		transform: translateY(-50%); /* überschreibt translateX */
	  }
	  #ablauf .step-fill{
		left: 0; top: 0; bottom: 0;
		width: calc(var(--progress, 0) * 100%);
		height: 100%;
	  }
	}
	/* Ablauf: Cards sicher ÜBER dem Track zeichnen */
	#ablauf .steps-wrap { position: relative; }

	/* WICHTIG: z-index von .row entfernen, damit Kinder (Cards) die Ebene wechseln dürfen */
	#ablauf .steps-wrap .row{
	  position: relative;
	  z-index: auto !important;  /* überschreibt die frühere 1 */
	}

	/* Track/Fill ganz hinten und nicht klickbar */
	#ablauf .step-track,
	#ablauf .step-fill{
	  position: absolute;
	  pointer-events: none;
	  z-index: 1 !important;
	}

	/* Cards vorne drüber */
	#ablauf .step-card{
	  position: relative;
	  z-index: 2 !important;
	  background: #fff; /* falls irgendwo transparent gesetzt war */
	}

	/* Desktop: horizontale Variante wie gehabt (stellt sicher, dass keine Mobile-Width "durchblutet") */
	@media (min-width:1200px){
	  #ablauf .step-track{
		left: 0; right: 0;
		top: 50%;
		height: 10mm;
		width: auto !important;          /* überschreibt width:10mm aus Mobile */
		transform: translateY(-50%) !important;
	  }
	  #ablauf .step-fill{
		top: 0; bottom: 0; left: 0;
		width: calc(var(--progress, 0) * 100%);
		height: 100%;
	  }
	}

	/* Safety: keine Hintergrundfarbe auf Grid-Ebenen über dem Track */
	#ablauf .steps-wrap .row,
	#ablauf .steps-wrap [class*="col-"]{
	  background: transparent !important;
	}
	
	/* Icons in Dropdown-Items: Breite für saubere Ausrichtung + Brand-Farbe */
	.dropdown-menu .dropdown-item .bi{
	  width: 1.25rem;          /* fixe Breite, damit Texte bündig stehen */
	  font-size: 1rem;
	  color: var(--brand-strong);
	  opacity: .95;
	}

	/* Beim Hover die Icon-Farbe leicht akzentuieren */
	.dropdown-menu .dropdown-item:hover .bi{
	  color: var(--brand);
	  opacity: 1;
	}
	
	/* Luft + Mindestbreite nur für dieses Menü */
	.ehc-megamenu{
	  --bs-dropdown-min-width: 20rem;
	  --bs-dropdown-item-padding-y: .9rem;
	  --bs-dropdown-item-padding-x: 2.25rem;
	}

	/* Icon-Grundbreite, damit Text ausgerichtet ist */
	.ehc-megamenu .dropdown-item i{
	  font-size: 1.1rem;
	  width: 1.25rem;          /* reserviert Platz, alle Einträge fluchten */
	  display: inline-block;
	}
	
	/* Mega-Dropdown: Emoji + Text (aus vorher) */
	.ehc-megamenu .dropdown-item{
	  display:flex;
	  align-items:center;
	  gap:.6rem;
	  /* NEU: Basis-Rahmen transparent, damit bei Hover nichts springt */
	  border:1px solid transparent;
	  border-radius:14px;                 /* wie die Buttons */
	  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	}
	.ehc-megamenu .dropdown-item .emoji{
	  flex:0 0 1.5rem;
	  display:inline-grid;
	  place-items:center;
	  font-size:1.15em;
	  line-height:1;
	}

	/* Hover/Fokus: Rand in Button-Primärfarbe, leichte Tiefe */
	.ehc-megamenu .dropdown-item:hover,
	.ehc-megamenu .dropdown-item:focus{
	  border-color:var(--brand-strong);
	  /* Optional: zarter Hintergrund – passt zum Button-Hover
		 Wenn du wirklich NUR einen Rand willst, kommentier die nächste Zeile aus */
	  background:rgba(12,184,182,.06);
	  box-shadow:0 6px 16px rgba(12,184,182,.10);
	  outline:none;
	}

	/* Tastaturfokus klar sichtbar */
	.ehc-megamenu .dropdown-item:focus-visible{
	  box-shadow:0 0 0 .2rem var(--ring);
	}

/* ===============================
   Basis-Variablen + Nav-Offset
   =============================== */
:root{
  --brand:#0CB8B6;
  --brand-2:#0aa3a1;
  --brand-strong:#075F5E;
  --ehc-border:#eaf3f3;
  --ehc-text:#213030;
  --ehc-text-muted:#526566;

  /* Fallback für Sticky-Offset des TOC */
  --nav-offset: 74px;
}

/* ===============================
   HERO exakt 10em hoch
   =============================== */
#datenschutz .hero,
#impressum .hero{
  height: 35vh !important;
  display: flex;
  align-items: center;
}
#datenschutz .hero.py-5,            /* überschreibt das Bootstrap-Padding */
#impressum .hero.py-5{            /* überschreibt das Bootstrap-Padding */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#datenschutz .hero > .container,    /* keine zusätzliche Innenabstände */
#impressum .hero > .container{    /* keine zusätzliche Innenabstände */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ===============================
   Hauptbereich & Typo
   =============================== */
main.container{ padding-block: 2rem 3rem; color: var(--ehc-text); }
#inhalt h2{ font-size:1.5rem; font-weight:800; margin:0 0 .75rem; }
#angaben h2{ font-size:1.5rem; font-weight:800; margin:0 0 .75rem; }
#inhalt h3{ font-size:1.125rem; font-weight:700; margin:1rem 0 .5rem; }
#angaben h3{ font-size:1.125rem; font-weight:700; margin:1rem 0 .5rem; }
#inhalt p, #inhalt ul{ color:var(--ehc-text-muted); }
#angaben p, #angaben ul{ color:var(--ehc-text-muted); }

/* ===============================
   #inhalt als „Hex-Kasten“
   =============================== */
#angaben.hex-corner,
#inhalt.hex-corner{
  position: relative;
  background:#fff;
  border:1px solid var(--ehc-border);
  border-radius:1rem;
  padding:1.5rem;
  box-shadow:0 20px 40px rgba(2,41,40,.06);
}
@media (min-width:992px){
  #inhalt.hex-corner{ padding:2rem 2.25rem; }
  #angaben.hex-corner{ padding:2rem 2.25rem; }
}

/* zarte Unterstreichung direkt unter der H2 */
#angaben.hex-corner > .row > .col-12:first-child h2,
#inhalt.hex-corner > .row > .col-12:first-child h2,
#angaben.hex-corner > h2,
#inhalt.hex-corner > h2{
  padding-bottom:.4rem;
  border-bottom:1px solid var(--ehc-border);
}

/* Hex-Deko-Ecken */
#angaben.hex-corner::before,
#inhalt.hex-corner::before,
#angaben.hex-corner::after,
#inhalt.hex-corner::after{
  content:"";
  position:absolute;
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  box-shadow:0 6px 14px rgba(12,184,182,.25);
}
#inhalt.hex-corner::before{ top:-10px; left:-10px; }
#angaben.hex-corner::before{ top:-10px; left:-10px; }
#angaben.hex-corner::after { bottom:-10px; right:-10px; }
#inhalt.hex-corner::after { bottom:-10px; right:-10px; }

/* ===============================
   TOC / Sidebar (left column)
   =============================== */
#angaben aside.card,
#inhalt aside.card{
  background:#fff;
  border:1px solid var(--ehc-border);
  border-radius:1rem;
  padding:1rem 1rem .875rem;
  box-shadow:0 12px 26px rgba(2,41,40,.06);
}
#inhalt aside.card h3{ margin:0; color:var(--ehc-text); }
#angaben aside.card h3{ margin:0; color:var(--ehc-text); }

/* Liste sauber setzen (statt Inline-Style) */
#angaben aside ul,
#inhalt aside ul{
  list-style:none;
  padding:0; margin:.5rem 0 0 0;
  display:grid; gap:8px;
  color:var(--ehc-text-muted);
}
#angaben aside a,
#inhalt aside a{
  display:block;
  text-decoration:none;
  color:var(--ehc-text);
  padding:.35rem .5rem;
  border:1px solid transparent;      /* verhindert Layout-Sprung bei Hover */
  border-radius:.5rem;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease;
}
#angaben aside a:hover,
#inhalt aside a:hover{
  color:var(--brand-strong);
  border-color:var(--brand-strong);
  background:rgba(12,184,182,.06);
  box-shadow:0 6px 16px rgba(12,184,182,.10);
}

/* Sticky-Top Abstand (nutzt --nav-offset) */
#angaben .sticky-top{ top: calc(var(--nav-offset) + 12px) !important; }
#inhalt .sticky-top{ top: calc(var(--nav-offset) + 12px) !important; }

/* ===============================
   Content-Card (right column)
   =============================== */
#haftung .card,
#angaben .card,
#inhalt .card{
  background:#fff;
  border:1px solid var(--ehc-border);
  border-radius:1rem;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 12px 26px rgba(2,41,40,.06);
}
#haftung .card h2{ margin:0; font-size:1.35rem; }
#angaben .card h2{ margin:0; font-size:1.35rem; }
#inhalt .card h2{ margin:0; font-size:1.35rem; }
#haftung .card h3{ margin-top:1.1rem; font-size:1.125rem; }
#angaben .card h3{ margin-top:1.1rem; font-size:1.125rem; }
#inhalt .card h3{ margin-top:1.1rem; font-size:1.125rem; }
#haftung .card ul{ margin-left:1rem; }
#angaben .card ul{ margin-left:1rem; }
#inhalt .card ul{ margin-left:1rem; }

/* Links im Content wie auf der großen Seite */
#haftung a,
#angaben a,
#inhalt a{
  color:var(--brand-strong);
  text-decoration:none;
  border-bottom:1px dotted rgba(12,184,182,.45);
}
#haftung a:hover,
#angaben a:hover,
#inhalt a:hover{
  color:var(--brand);
  border-bottom-color:var(--brand);
}

/* Fokus sichtbar, aber dezent */
#haftung a:focus-visible,
#angaben a:focus-visible,
#inhalt a:focus-visible{
  outline:none;
  box-shadow:0 0 0 .2rem rgba(12,184,182,.25);
  border-radius:.25rem;
}

/* Mobile Feinheiten */
@media (max-width:767.98px){
  #haftung .card{ padding:1.1rem; }
  #angaben .card{ padding:1.1rem; }
  #inhalt .card{ padding:1.1rem; }
}