:root {
  --color-primary: black; /* Haupttextfarbe */
  --color-secondary: #424242; /* Farbe für Überschriften */
  --color-terz: #5e5e5e; /* Farbe für übriges */
}

:root {
/* Hintergrundfarben */
	--color-bg-light: rgba(251, 250, 247, 1); /* Heller Hintergrund */
	--color-bg-light-trans: rgba(251, 250, 247, 0.5); /* Heller Hintergrund transparent */
	--color-bg-light-trans-b: rgba(243, 241, 235, 0.5); /* Heller Hintergrund transparent */
	--color-bg-medium: rgba(255, 255, 255, 0.6);
  --color-bg-dark: #2d2e2e;
  --color-accent: rgba(245, 218, 129, 1); /* Hervorhebungen */
  --color-accent-light: rgba(245, 218, 129, 0.8); /* Hervorhebungen transparent*/
  --bg-color1: rgba(248, 246, 242, 1);/* creme */
  --bg-color2: rgba(160, 213, 215, 1); /* blau */
  --bg-color2b: rgba(160, 213, 215, 0.5); /* blau transparent */
  --bg-color3: rgba(221, 208, 189, 0.6); /* hellbraun */
  --bg-color3b: rgba(221, 208, 189, 0.4); /* hellbraun transparent */
  --bg-color3full: rgba(221, 208, 189, 1); /* hellbraun full*/
  --bg-color4: rgba(46, 103, 119, 1); /* tannengrün */
  --bg-color5: rgba(136,80,83,1); /* dunkelrot */
  --bg-color6: rgba(80,71,70,0.9); /* anthrazit */
}
 
:root {
   --font-family-primary: system-ui, -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans",
                         "Helvetica Neue", Arial,
                         "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                         sans-serif;
  	--w-light: 300;
  	--w-regular: 400;
  	--w-medium: 500;
  	--w-bold: 600;
    --line-height-base: 1.65;
}

:root {
    /* Link-Stil A: Normale Textfarbe, ohne Unterstreichung */
    --link-a-color: #424242; /* Gleiche Farbe wie normaler Text */
    --link-a-decoration: none; /* Keine Unterstreichung */

    /* Link-Stil B: Blau, mit Unterstreichung */
    --link-b-color: blue; /* Blaue Links */
    --link-b-decoration: underline; /* Unterstrichen */
}

:root {
    /* Link-Stil A: Normale Textfarbe, ohne Unterstreichung */
    --link-a-color: #424242; /* Gleiche Farbe wie normaler Text */
    --link-a-decoration: none; /* Keine Unterstreichung */

    /* Link-Stil B: Blau, mit Unterstreichung */
    --link-b-color: #28315c; /* Blaue Links */
    --link-b-decoration: underline; /*unterstrichen */
    --link-b-weight: 400;
}

/* Link-Stil A: Nicht unterstrichen, normale Textfarbe */
.link-a {
    color: var(--link-a-color);
    text-decoration: var(--link-a-decoration);
}

/* Überschreiben aller Zustände */
.link-a:link, 
.link-a:visited, 
.link-a:hover, 
.link-a:active {
    color: var(--link-a-color); /* Immer inherit */
    text-decoration: var(--link-a-decoration); /* Keine Unterstreichung */
}

/* Link-Stil B: Unterstrichen, blau */
.link-b {
    color: var(--link-b-color);
    text-decoration: var(--link-b-decoration);
    font-weight: var(--link-b-weight);
}

/* Überschreiben aller Zustände */
.link-b:link, 
.link-b:visited, 
.link-b:hover, 
.link-b:active {
    color: var(--link-b-color); /* Immer blau */
    text-decoration: var(--link-b-decoration); /* Immer unterstrichen */
}

:root {
    --border-radius-small: 5px;
    --border-radius-medium: 15px;
    --border-radius-l: 25px;
    --border-style-solid: solid;
    --border-style-dot: dotted;
    --border-width: 1px;
    --border-width-extrathin: 0.7px;
    --border-width-thin: 0.9px;
    --border-color: #5e5e5e;
    --border-color-light: white;
    --border-color-accent: rgba(241, 193, 124, 0.8);
    --button-bg-color: #2d2e2e; /* Dunkle Hintergrundfarbe */
    --button-text-color: #f2faff; /* Helle Schriftfarbe */
    --button-hover-bg-color: #424242; /* Button Hover */
    --button-padding: 0.6em 1.8em;
    --button-shadow: #998C7A;
    --button-background: rgba(245, 218, 129, 1);
    
    /* Spacing */
  --spacing-none: 0;
  --spacing-xxs: 0.2em;
  --spacing-xs: 0.4em;
  --spacing-s: 0.7em;
  --spacing-m: 1em;
  --spacing-l: 1.5em;
  --spacing-xl: 2em;
  --spacing-xxl: 3em;
  --spacing-super-xxl: 5em;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

@-moz-document url-prefix() {
  html, body {
    -moz-osx-font-smoothing: grayscale;
  }
}

body {
    color: var(--color-primary);
    font-family: var(--font-family-primary);
    font-size: clamp(1rem, 3vw, 1.1rem);
    font-weight: var(--w-light);
  	line-height: 1.6;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;  /* Safari, Chrome */
  	-moz-osx-font-smoothing: grayscale;   /* Firefox (macOS) */
}

html, body {
  font-synthesis: none;                /* oder: font-synthesis-weight: none; */
}


.light {
	background-color: var(--color-bg-light);
}
.bckg-color1 {
	 background-color: var(--bg-color1);
}
.bckg-color2 {
	 background-color: var(--bg-color2);
}
.bckg-color3 {
	 background-color: var(--bg-color3);
}
.bckg-color4 {
	 background-color: var(--bg-color4);
}
.bckg-color5 {
	 background-color: var(--bg-color5);
}
.bckg-color6 {
	 background-color: var(--bg-color6);
}
.color-accent {
	background-color: var(--color-accent);
}

li {
	list-style-type: disc;
	list-style-position: outside;
	padding: 0 0 0.2rem 0;
	margin: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-l);
	border: none;
}

strong {
	font-weight: var(--w-bold);
	font-size: var(--font-size-reg-l);
}

/* Textpassagen nicht trennen */
.nicht-trennen {
	white-space: nowrap;
	-webkit-hyphens: none; 
	-ms-hyphens: none;
	hyphens: none;
}

.p-abstand-oben {
	margin-top: clamp(2rem, 6vw, 4rem);
	text-align: left;
}

.p-abstand-oben-pad {
	padding-top: clamp(2rem, 6vw, 4rem);
}

.p-abstand-oben-center {
	margin-top: clamp(1rem, 6vw, 2rem);
	text-align: center;
}

.p-abstand-oben-center-l {
	margin-top: clamp(2rem, 6vw, 3rem) !important;
	text-align: center;
}

.p-abstand-oben-left {
	margin-top: clamp(1rem, 6vw, 2rem);
	text-align: left;
}

.p-abstand-oben-center-s {
	margin-top: clamp(0.5rem, 4vw, 1rem);
	text-align: center;
}

.p-abstand-oben-left-s {
	margin-top: clamp(0.5rem, 4vw, 1rem);
	text-align: left;
}

.p-abstand-unten-center {
	margin-bottom: clamp(1.5rem, 6vw, 2.5rem);
	text-align: center;
}

.p-abstand-unten-left-l {
	margin-bottom: clamp(2rem, 6vw, 3rem) !important;
	text-align: left;
	border: 1px solid red;
}

.p-abstand-unten-left-s {
	margin-bottom: clamp(1.5rem, 6vw, 2.5rem) !important;
	text-align: left;
}

.t-straight {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.t-straight-center {
	margin-top: 0 !important;
	padding-top: 0 !important;
	text-align:center;
}

.t-space {
	margin-top: clamp(0.2rem, 5vw, 0.3rem) !important;
	padding-top: clamp(0.3rem, 5vw, 0.4rem) !important;
}

.b-straight {
	margin-bottom:0 !important;
	padding-bottom: 0 !important;
}

.b-space {
	padding-bottom: clamp(3.5rem, 5vw, 4.5rem) !important;
}

.b-space-s {
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
}

.gap-s {
	gap:clamp(1px, 4vw, 13px) !important;
}

button {
  width: 100%; /* Einheitlicher Standard */
  max-width: 10rem;
  padding: var(--spacing-s) var(--spacing-m);
  margin: 0 auto;
  margin-top: var(--spacing-xxs);
  margin-bottom: var(--spacing-xxs);
  font-size: 0.85rem;
  font-family: var(--h3);
  font-weight: var(--w-medium);
  border-radius: var(--border-radius-l);
  border: 0;
  line-height: var(--line-height-base);
  background-color:#377881;
  color: white;
  cursor: pointer;
}
@media (min-width:768px) {
	button {
		background-color:var(--button-background);
		color: var(--color-bg-dark);
	}
}

/* ----------------scrollToTop-------------------- */
.scrollToTopBtn {
  position: fixed;                 /* bleibt fixed! */
  right: 30px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 10001;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 44px;
  height: 44px;
  border-radius: 9999px;           /* kreisrund */
  border: var(--button-border-width, 1px) solid var(--button-border-color, rgba(0,0,0,.15));
  background: var(--button-bg-color, #2d2e2e);
  color: var(--button-text-color, #f2faff);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);

  /* Start unsichtbar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px);

  /* Keine transition: all; */
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}

.scrollToTopBtn::before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.scrollToTopBtn.showBtn {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 768px){
  .scrollToTopBtn {
    right: 15px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/*------------------------------- Header und Navigation -----------------------------------*/

header {
  position: sticky;
  top: 0;
  z-index:9999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 8vw, 3rem);
  background-color: var(--color-bg-light);
}

.nav-container {
	display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
	width: 100%;
}

/* Logo */
img.logo {
	display:block;
  width: 112px;
  height: auto;
}

/* Hamburger */
#hamburger {
  width: 40px;
  height: 40px;
  border: none;
  background-color: #fbfaf7;
  cursor: pointer;
}

/*--------------------------------------------------*/

.nav-menu {
    display: none; /* Standardmäßig verstecken */
    position: absolute;
   	top: calc(var(--header-h, 5.6em) - 2px); /* 2px höher */
    left: 0;
    height: auto;
    width: 100%;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    background-color: var(--color-accent);
    padding-top: 2em;
    padding-bottom: 30em;
}

/* Menü sichtbar, wenn aria-expanded="true" */
#hamburger[aria-expanded="true"] + .nav-menu {
    display: flex; /* Menü anzeigen */
}

/* aktiviertes JavaScript */
.js-enabled .nav-menu {
    display: none; /* Menü bleibt unsichtbar */
}

.js-enabled #hamburger[aria-expanded="true"] + .nav-menu {
    display: flex; /* Menü öffnen */
}

/* Menüelemente */
.nav-item {
    width: 50%;
    margin: 0 auto;
    padding: 0.7em 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: var(--border-width) var(--border-style-dot) var(--color-terz);
}

.nav-link {
    font-size: var(--font-size-reg-l);
    color: var(--color-secondary);
    text-decoration: none;
}

.dropdown {
    margin-top: 0.6em;
}

.dropdown li {
    list-style-type: none;
    padding: 0.2em 0;
    margin-left: 0;
}

.dropdown a {
    color: var(--color-terz);
    text-decoration: none;
    font-size: var(--font-size-reg);
}


/*---------------------header und navigation Mittlere Geräte-----------------------------*/
@media only screen and (min-width: 768px) {
	
	.nav-container {
		display: flex;
		max-width: 1024px;
	}
		
	img.logo {
		width: 140px;
	}
}

/*----------------header und navigation Geräte (ab 1024px)------------------------*/
@media only screen and (min-width: 1024px) {

	.nav-container {
		max-width: 1175px;
		margin: 0 auto;
		padding-left: 2em;
		padding-right: 2em;
	}

	nav {
		display: flex;
		width: 70%;
		justify-content: end;
		margin:0;
		padding: 0;
	}
  .nav-menu {
		align-items: center;
		transform: translateY(0.1rem); /* Senkt leicht ab */
		order: 3;
		margin-left: auto;
		margin:0;
		padding: 0;
		height: auto;
		background-color: #fbfaf7;
	}
	.nav-item {
		display: flex;
		align-items: start;
		width: auto;
		margin: 0 0 0 3em;
		padding: 0 0 0 0;
		border-bottom:0;
	}
	.nav-link {
		display:block;
		position:relative;
		border-top: 2px solid transparent;
		padding-bottom: 0;
		font-size: 1rem;
		transition: all 0.3s ease-in-out;
	}
	
	.nav-link:hover {
		border-top: 2px solid rgba(1, 158, 193, 0.6);
	}
	.dropdown {
		position:absolute;
		text-align: left;
		top:1.5em;
		background-color:var(--color-bg-light);
		padding-top: 0;
		margin-left: 0.2em;
		display:none;
		font-size: 1rem;
		border-radius: 5px;
	}
	.main-dropdown {
		margin-left: 0.2em;
	}
	
	.dropdown li a {
		display: block;
		padding: 1em 1em;
	}
	
	.nav-item:hover .dropdown {
		display: block;
		/*display: none;*/
	}
	
	.dropdown li:hover {
		background-color: var(--color-accent);
		border-radius: 5px;
	}
	
}

/* -----------------header und navigation ganz grosse Bildschirme -----------------*/
@media only screen and (min-width: 1441px) {
	
	.nav-container {
		width: 100%;
		max-width: 1700px;
		margin-left: 3rem;
	}

	img.logo {
		width: 180px;
		height: 122px;
		padding: 0;
	}
	nav {
		line-height: 1.7rem
		background-color: #f5f3ea;
	}
	.nav-link {
		border-top: 2px solid transparent;
		padding-top: 0.1rem;
		padding-bottom: 0;
		font-size: 1.1rem;
		transition: all 0.3s ease-in-out;
	}
	.dropdown {
		position:absolute;
		text-align: left;
		top: 1.6em;
		width: 15em;
		padding-top: 0;
		margin-left: -0.2em;
		display:none;
		border-radius: 5px;
	}
	.main-dropdown {
		margin-left: -0.1em;
	}
	
	.dropdown li a {
		display: block;
		padding: 0.6em 1em;
		font-size: 1.1rem;
	}
	
	.nav-item:hover .dropdown {
		display: block;
		/*display: none;*/
	}
	
	.dropdown li:hover {
		border-radius: 5px;
	}
}

/*---------------------------------- Hamburger-Menü ----------------------------------------*/

#hamburger {
	order: 2;
	display: block;
	width: 44px;
	height: 44px;
	background: #fbfaf7
	 url("images/hamburger.svg") no-repeat;
	border: none;
	cursor: pointer;
}
#hamburger[aria-expanded="true"] {
	background-image: url("images/hamclose.svg");
}
#hamburger[aria-expanded="true"] + .nav-menu {
	display: block;
	/*padding-top: 1.3em;*/
}
.js-enabled .nav-menu {
	display: none;
}
@media (min-width: 1024px) {
	
	#hamburger {
		display: none; /*----hamburger ausblenden------*/
	}
	
	#hamburger[aria-expanded="false"] + .nav-menu { /*----hamburger ausblenden------*/
		display: block;
		position: static;
		height: 2.2em;
		width: auto;
		display: flex;
		flex-direction: row;
		padding: 0;
	}
}

/* =========================== Noscript (Mobile-Basis) ========================== */

.noscript {
  display: block;
  width: 100%;
  margin-right: 3rem;
}

.noscript-menu {
  display: block;
  margin: 1rem 3rem 0;
  padding: 0;
  list-style: none;
}

.noscript-menu li {
  margin: 0.25rem 0;
}

/* ======================== Hero-Blöcke (mobile-first) ======================== */

/* ---------- Basis ---------- */
.hero,
.hero-c {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.linebreak {
  display: block;
  white-space: normal;
}
@media (min-width: 900px) {
  .linebreak {
    display: inline;
    white-space: nowrap;
  }
}

/* ================= HERO MEDIA WRAPPER (ein Bild, nicht gesliced) ================= */
.hero-media-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 640 / 427;         /* Mobile Default: eher hoch */
  overflow: clip;
  max-width: 1920px;
  margin-inline: auto;
}
/* Tablet */
@media (min-width: 769px) {
  .hero-media-wrap { aspect-ratio: 768 / 512; }
}
/* Desktop */
@media (min-width: 1015px) {
  .hero-media-wrap { aspect-ratio: 1024 / 576; }
}
/* Wide Desktop */
@media (min-width: 1441px) {
  .hero-media-wrap { aspect-ratio: 1600 / 776; }
}

/* Bild im Wrapper vollflächig füllen */
.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* füllt Rahmen, kein Verzerren */
  object-position: center;         /* zentrierter Ausschnitt */
  border-radius: inherit;
  display: block;
}

/* ================= Gemeinsame Titel-Stile ================= */
.hero .section-inner .hero-title,
.hero-c .section-inner .hero-title {
  width: 100%;
  max-width: 1920px;
  padding: clamp(1em, 5%, 2em);
  text-align: center;
  background-color: var(--color-accent);
  margin: 0 auto;
}

/* =========================== .hero (ohne CTA) =========================== */

.hero .section-inner {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  width: 100%;
  max-width: 1920px;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

.hero .section-inner .left {
  display: none; /* Mobile: nur das rechte Bild */
  background-color: white;
}
.hero .section-inner .right {
  width: 100%;
  background-color: white;
}
.hero .section-inner .drei {
  display: none;
  background-color: white;
}

/* Mobile Bild-Seitenverhältnis */
.hero .section-inner .right img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: auto;
  block-size: auto;
  vertical-align: bottom;
}

/* ≥ 769px: Zwei-/Drei-Spalten-Stage */
@media (min-width: 769px) {
  .hero .section-inner {
    flex-direction: row;
    max-width: 1024px;
  }

  .hero .section-inner .left {
    display: flex;
    width: 45.57692308%;
    background-image: url("images/bg-left-s.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: auto;
    aspect-ratio: 948 / 932;
    justify-content: center;
    align-items: center;
  }
  @supports (background-image: url("images/bg-left-s.webp")) {
    .hero .section-inner .left { background-image: url("images/bg-left-s.webp"); }
  }
  @supports (background-image: url("images/bg-left-s.avif")) {
    .hero .section-inner .left { background-image: url("images/bg-left-s.avif"); }
  }

  .hero .section-inner .right { width: 44.80769231%; }
  .hero .section-inner .right img { aspect-ratio: 932 / 932; }

  .hero .section-inner .drei {
    display: flex;
    background-image: url("images/bg-right-s.jpg");
    width: 9.61538462%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: auto;
    aspect-ratio: 200 / 932;
    justify-content: center;
    align-items: center;
  }
  @supports (background-image: url("images/bg-right-s.webp")) {
    .hero .section-inner .drei { background-image: url("images/bg-right-s.webp"); }
  }
  @supports (background-image: url("images/bg-right-s.avif")) {
    .hero .section-inner .drei { background-image: url("images/bg-right-s.avif"); }
  }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
  .hero .section-inner {
    width: 100%;
    max-width: 1400px;
  }

  .hero .section-inner .left {
    width: 48.75%;
    background-image: url("images/bg-left.jpg");
    aspect-ratio: 1365 / 874;
  }
  @supports (background-image: url("images/bg-left.webp")) {
    .hero .section-inner .left { background-image: url("images/bg-left.webp"); }
  }

  .hero .section-inner .right { width: 31.21428571%; }
  .hero .section-inner .right img { aspect-ratio: 874 / 874; }

  .hero .section-inner .drei {
    background-image: url("images/bg-right.jpg");
    width: 20.03571429%;
    aspect-ratio: 561 / 874;
  }
  @supports (background-image: url("images/bg-right.webp")) {
    .hero .section-inner .drei { background-image: url("images/bg-right.webp"); }
  }
}

/* ≥ 1401px */
@media (min-width: 1401px) {
  .hero .section-inner {
    width: 100%;
    max-width: 1920px;
  }
  .hero .section-inner .left { display: none; } /* Groß: nur volles rechtes Bild */
  .hero .section-inner .right {
    width: 100%;
    max-width: 1920px;
  }
  .hero .section-inner .right img { aspect-ratio: 3840 / 1200; }
  .hero .section-inner .drei { display: none; }
}

/* ≥ 1921px (Hard Cap) */
@media (min-width: 1921px) {
  .hero .section-inner {
    width: 100%;
    max-width: 1920px;
  }
}

/* =================== HERO-C (mit CTA, mobile-first) =================== */
.hero-c {
  /* Basis-Variablen */
  --img-w: 3840;
  --img-h: 1338;
  --left-w: 2502;
  --right-w: calc(var(--img-w) - var(--left-w));
  --left-p: 65.15625%;
  --right-p: 34.84375%;
  --stage-max-w: 1920px;

  /* Mobile-Aspekt für 1-Bild-Bühne */
  --stage-ar: 1536 / 908;
}

@media (max-width: 480px) {
  .hero-c {
    --stage-ar: 960 / 567;
  }
}

/* ---------- Container ---------- */
.hero-c > .section-inner {
  display: grid;
  grid-template-areas:
    "stage"
    "title"
    "cta";
  gap: 0;
  width: 100%;
  max-width: var(--stage-max-w);
  margin-inline: auto;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  overflow-x: clip; /* Schutz gegen horizontale Scrollbalken */
}

/* ---------- Bühne: mobile = EIN Bild, kein Slice ---------- */
.hero-c > .section-inner > .hero-relative-box {
  grid-area: stage;
  position: relative;
  display: block;
  z-index: 0;
  width: 100%;
  max-width: var(--stage-max-w);
  margin-inline: auto;
  background: #000;
  aspect-ratio: var(--stage-ar);
  overflow: hidden;
}
.hero-c > .section-inner > .hero-relative-box .left { display: none; }
.hero-c > .section-inner > .hero-relative-box .right {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-c > .section-inner > .hero-relative-box .right picture,
.hero-c > .section-inner > .hero-relative-box .right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- Titel unter Bild (orange Balken) ---------- */
.hero-c > .section-inner > .hero-title {
  grid-area: title;
  width: 100%;
  max-width: var(--stage-max-w);
  padding: clamp(1em, 5%, 2em);
  padding-bottom: clamp(0.2em, 5%, 0.6em);
  text-align: center;
  background-color: var(--color-accent);
  margin: 0 auto;
}

/* ---------- CTA: mobil rechteckig unter Bild ---------- */ 
.hero-c > .section-inner > .cta { 
	grid-area: cta; 
	margin-inline: auto;
	width: auto; 
	max-width: var(--stage-max-w); 
	padding-top: 0; 
	padding-bottom: clamp(1rem, 5vw, 2rem); 
	font-weight:400; 
	color:var(--color-secondary);
} 
@media (min-width:768px) {
	.hero-c > .section-inner > .cta { 
		color:rgba(16, 139, 156, 1);
	}
}

.hero-c > .section-inner {
	background: var(--color-accent); 
}

.hero-c > .section-inner > .cta .section-inner { 
	display: grid;
    justify-items: center;   /* horizontal */
		align-content: center;   /* gesamte Gruppe zentrieren */
		gap: 0.3rem;             /* Abstand zwischen p und Button */
    text-align: center; 
	place-items: center; 
	width: auto; 
	max-width: 50rem; 
	margin: 0 auto; 
	padding: clamp(1rem, 5vw, 2rem); 
	/*background: var(--bg-color1); */
	text-align: center; 
	border-radius: var(--border-radius-l); 
	/*background: radial-gradient(
      circle,
      rgba(245,218,129,0.8) 0%,    
      rgba(245,218,129,0.35) 65%,    
      rgba(245,218,129,0.5) 100%    
    );
    backdrop-filter: blur(0.5px);*/
    
     animation: ctaPulseStrong 8.5s ease-in-out infinite;
} 

.hero-c > .section-inner > .cta .section-inner .height, 
.hero-c > .section-inner > .cta .section-inner ul, 
.hero-c > .section-inner > .cta .section-inner li, 
.hero-c > .section-inner > .cta .section-inner p { 
	margin-top: 0; 
	margin-bottom: 0; 
	padding: 0; 
} 

/* ================= ≥ 769px: Slice aktiv + CTA über dem Bild ================= */
@media (min-width: 769px) {
  /* Kein separater CTA-Bereich unter dem Bild */
  .hero-c > .section-inner {
    grid-template-areas:
      "stage"
      "title";
    overflow: clip; /* Overlays sauber abschneiden */
  }

  .hero-c > .section-inner > .hero-relative-box {
    display: grid;
    grid-template-columns: var(--left-p) var(--right-p);
    aspect-ratio: var(--img-w) / var(--img-h);
    overflow: hidden;
  }

  /* Linke Slice-Fläche sichtbar (Bild wird über background eingebunden) */
  .hero-c > .section-inner > .hero-relative-box .left {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: 0;
    background-image: url("images/atemtherapie-focusing/hero-left-s.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
  }
  @supports (background-image: url("images/atemtherapie-focusing/hero-left-s.webp")) {
    .hero-c > .section-inner > .hero-relative-box .left {
      background-image: url("images/atemtherapie-focusing/hero-left-s.webp");
    }
  }

  /* Rechte Bildhälfte füllt die rechte Spalte */
  .hero-c > .section-inner > .hero-relative-box .right,
  .hero-c > .section-inner > .hero-relative-box .right picture,
  .hero-c > .section-inner > .hero-relative-box .right img {
    width: 100%;
    height: 100%;
  }
  .hero-c > .section-inner > .hero-relative-box .right img {
    object-fit: contain;
    object-position: right center;
  }

  /* CTA über dem Bild */
  .hero-c > .section-inner > .cta {
    grid-area: stage;
    align-self: center;
    justify-self: start;
    margin: 0;
    width: auto;
    padding: 0;
    position: relative;
    z-index: 2;
    background: transparent;
  }

  .hero-c > .section-inner > .cta .section-inner {
    display: grid;
    justify-items: center;   /* horizontal */
		align-content: center;   /* gesamte Gruppe zentrieren */
		gap: 0.7rem;             /* Abstand zwischen p und Button */
    text-align: center;
    border-radius: var(--border-radius-l);
    /*background: var(--color-accent-light);*/
    background:transparent;
    padding: clamp(0.5rem, 3.2vw, 1rem);
    margin-left: clamp(1rem, 6vw, 6rem);
    min-inline-size: clamp(250px, 25vw, 410px);
    max-inline-size: clamp(350px, 30vw, 630px);
    /*box-shadow: 0 8px 28px rgba(0,0,0,0.15);*/
    /*background: radial-gradient(
      circle,
      rgba(245,218,129,1) 0%,
  rgba(245,218,129,0.45) 15%,
  rgba(245,218,129,0.12) 50%,
  rgba(245,218,129,0) 100%
    );*/
    backdrop-filter: blur(1px);
    
     animation: ctaPulseStrong 8.5s ease-in-out infinite;
  }
}

/* ================= ≥ 1024px: größere Left-Slice-Grafik ================== */
@media (min-width: 1024px) {
  .hero-c > .section-inner > .hero-relative-box .left {
    background-image: url("images/atemtherapie-focusing/hero-left-m.jpg");
  }
  @supports (background-image: url("images/atemtherapie-focusing/hero-left-m.webp")) {
    .hero-c > .section-inner > .hero-relative-box .left {
      background-image: url("images/atemtherapie-focusing/hero-left-m.webp");
    }
  }
}

/* ================= ≥ 1024px: CTA als Kreis-Overlay über dem Bild ================= */
@media (min-width: 1024px) {
  .hero-c > .section-inner > .cta .section-inner {
    border-radius: 9999px;
    aspect-ratio: 1 / 1;
    min-inline-size: clamp(200px, 20vw, 300px);
    max-inline-size: clamp(260px, 26vw, 440px);
    padding: clamp(1rem, 2.6vw, 2rem);
    margin-left: clamp(1rem, 6vw, 6rem);
    font-size:clamp(1.3rem, 4vw, 1.5rem);
    
    /*background: radial-gradient(
      circle,
      rgba(245,218,129,1) 0%,
 		 	rgba(245,218,129,0.45) 35%,
  		rgba(245,218,129,0.12) 70%,
  		rgba(245,218,129,0) 100%		
    );*/
    backdrop-filter: blur(1px);
    
     animation: ctaPulseStrong 8.5s ease-in-out infinite;
  }
}

/* ================= ≥ 1400px: volle Left-Slice + CTA-Caps ================= */
@media (min-width: 1400px) {
  .hero-c > .section-inner > .hero-relative-box .left {
    background-image: url("images/atemtherapie-focusing/hero-left.jpg");
  }
  @supports (background-image: url("images/atemtherapie-focusing/hero-left.webp")) {
    .hero-c > .section-inner > .hero-relative-box .left {
      background-image: url("images/atemtherapie-focusing/hero-left.webp");
    }
  }

  .hero-c > .section-inner > .cta .section-inner {
    min-inline-size: 300px;
    max-inline-size: 520px;
    padding: clamp(1.25rem, 2vw, 2.25rem);
  }
}

/*==============Animtation=============*/

@keyframes ctaPulseStrong {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255,255,255,0.0);
  }
  45% {
    transform: scale(1.1); /* deutlichere Ausdehnung */
    box-shadow: 0 0 48px rgba(255,255,255,0); /* heller, stärker */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255,255,255,0.0);
  }
}



/* =================== HERO-C: EIN BILD – CTA flexibler Kreis =================== */

.hero-c.one-image > .section-inner {
  display: grid;
  grid-template-areas:
    "stage"
    "title"
    "cta";
  gap: 0;
  width: 100%;
  max-width: var(--stage-max-w, 1920px);
  margin-inline: auto;
  position: relative;
  padding: 0;
  box-sizing: border-box;
}

/* Bühne = Bild */
.hero-c.one-image > .section-inner > .hero-media-wrap {
  grid-area: stage;
  z-index: 0;
}

.hero-c.one-image .hero-media,
.hero-c.one-image .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Titel (orange Balken) bleibt unverändert unter dem Bild */
.hero-c.one-image > .section-inner > .hero-title {
  grid-area: title;
  width: 100%;
  text-align: center;
  background-color: var(--color-accent);
  color:#316a7b;
  margin: 0;
  border:1px solid red;
}

/* CTA – mobil rechteckig */
.hero-c.one-image > .section-inner > .cta {
  grid-area: cta;
  z-index: 1;
  width: 100%;
  padding-top: clamp(1rem, 5vw, 2rem);
  background: var(--bg-color4);
  color: #000;
}
.hero-c.one-image > .section-inner > .cta .section-inner {
  display: grid;
  place-items: center;
  width: auto;
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(1rem, 5vw, 2rem);
  background: var(--bg-color4);
  text-align: center;
  border-radius: var(--border-radius-l);
}

/* ================= ≥ 769px: CTA als flexibler Kreis über dem Bild ================= */
@media (min-width: 769px) {
  .hero-c.one-image > .section-inner {
    grid-template-areas:
      "stage"
      "title";
  }

  .hero-c.one-image > .section-inner > .cta {
    grid-area: stage;
    align-self: center;       /* vertikal mittig */
    justify-self: start;      /* leicht links */
    z-index: 2;
    margin: 0;
    background: transparent;
    width: auto;
    padding: 0;
  }

  .hero-c.one-image > .section-inner > .cta .section-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Flexible Kreisform */
    padding: clamp(2rem, 4vw, 3rem);
    min-width: clamp(10rem, 18vw, 14rem);
    min-height: clamp(10rem, 18vw, 14rem);
    aspect-ratio: 1 / 1; /* hält Kreisform */
    margin-left: clamp(2rem, 8vw, 8rem);

    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    backdrop-filter: blur(1px);
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  /* Text im Kreis */
  .hero-c.one-image > .section-inner > .cta .section-inner h2,
  .hero-c.one-image > .section-inner > .cta .section-inner p {
    margin: 0.3rem 0;
    padding: 0;
    text-align: center;
  }

  .hero-c.one-image > .section-inner > .cta .section-inner h2 {
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    line-height: 1.2;
  }

  .hero-c.one-image > .section-inner > .cta .section-inner p {
    font-size: clamp(0.8rem, 1vw, 1rem);
    line-height: 1.3;
  }

  /* Button im Kreis */
  .hero-c.one-image > .section-inner > .cta .section-inner button {
		max-width: clamp(10rem, 12vw, 13rem);
    margin-top: 0.8rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.8rem, 1vw, 1rem);
    border-radius: 9999px;
  }
  
}

/*---------------------Mobile-First Standardstile---------------------*/

h1 {
	font-weight: 300;
	font-size: clamp(1.7rem, 6vw, 2.1rem);
	color: var(--color-secondary);
	padding: var(--spacing-s) var(--spacing-s) var(--spacing-m) var(--spacing-none);
	text-align: center;
	background-color: #fee586;
	color:#316a7b;
}

h2 {
    color: var(--color-secondary);
    font-size:clamp(1.6rem, 7vw, 1.8rem);
    font-weight: var(--w-light);
    text-align: center;
    display: block;
}

.uppercase {
	padding-bottom: 0;
	font-size: var(--font-size-xxl);
	text-transform: uppercase;
}

#atemtherapie h3, #was-geschieht-atemtherapie h3, #wer-atemtherapie h3, #wirkung-atemtherapie h3, #focusing h3, #klangschalen-einsatz h3, #konditionen h3 {
	color: var(--color-secondary);
	font-weight: var(--w-medium);
	font-size: clamp(1.1rem, 4vw, 1.3rem);
	padding: clamp(1rem, 4vw, 2rem) 1.7rem clamp(0.7rem, 4vw, 1.7rem) 1.7rem;
	text-align: center;
}

#konditionen h3 {
	padding-top:clamp(1.5rem, 4vw, 2rem);
	padding-bottom::clamp(0.5rem, 4vw, 1rem);
	text-align:center;
}

@media (min-width: 1024px) {
	h3 {
		padding: clamp(1rem, 4vw, 2rem) 0 clamp(2rem, 4vw, 3rem) 0;
		text-align:center;
	}
}

#coaching button, #somatic-experiencing button, #paarberatung button {
	width: 70%; /* Einheitlicher Standard */
	max-width: 20em;
	padding: var(--spacing-s) var(--spacing-m);
  margin: 0 auto;
  margin-top: var(--spacing-xl);
	font-size: 0.85rem;
	font-family: var(--font-family-primary);
  font-weight: var(--w-regular);
  border-radius: var(--border-radius-medium);
  border: var(--border-width-extrathin) var(--border-style-solid) var(--color-bg-light);
  line-height: var(--line-height-base);
  background-color: var(--bg-color6);
  color: var(--color-bg-light);
  box-shadow: var(--button-shadow) var(--spacing-none) 4px 4px var(--spacing-minus);
  cursor: pointer;
}


main {
	width: 100%;
	max-width: 1920px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 0;
	hyphens: auto;
	hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
	height: auto;
}

/* =========================================
   LAYOUT-X — OVERVIEW / INHALTSVERZEICHNIS
   =========================================
   1. Root & Design Tokens
   2. Abschnitt & Container
   3. Grundstile: Spalten & Typo
   4. Media-Frame (Basis)
   5. Varianten
       5.1 Zwei Spalten Text/Text
       5.2 Bild links – Text rechts
       5.3 Text links – Bild rechts
       5.4 Eine Spalte (optional Bleed)
       5.5 Layout .lx--img2-clean
   6. Utilities
   7. Große Screens
   8. Variante .lx--img2-topgrid
   9. Variante .lx--stack-fluid
   10. Utility: Kreisrunde Medien
   ========================================= */


/* =========================================
   Layout-X — Stable Core (mobile-first)
   Breakpoints: 768 / 1014 / 1440
   ========================================= */


/* =========================================
   1. ROOT & DESIGN TOKENS
   ========================================= */
:root{
  /* Layout */
  --lx-max-w: var(--max-width, 1920px);
  --lx-pad-x: clamp(12px, 4vw, 48px);
  --lx-gap: clamp(25px, 4vw, 40px);
  --lx-col-gap: clamp(30px, 6vw, 60px);

  /* Media */
  --lx-media-ar: 16 / 9;

  /* Typografie/Optik */
  --line-height-base: 1.55;
  --border-radius-medium: 12px;
  --color-bg-medium: rgba(255,255,255,.6);
}


/* =========================================
   2. ABSCHNITT & CONTAINER
   ========================================= */
.lx{
  width: 100%;
  padding-block: clamp(10px, 5vw, 30px);
}
.lx > .lx-inner{
  width: 90%;
  max-width: var(--lx-max-w);
  margin-inline: auto;
  padding-inline: var(--lx-pad-x);
  display: grid;
  gap: var(--lx-gap);
  box-sizing: border-box;
  overflow-x: clip;
}
@media (min-width: 1014px){
  .lx > .lx-inner--narrow{ 
    max-width: 60%; 
    margin-inline: auto; 
  }
}


/* =========================================
   3. GRUNDSTILE: SPALTEN & TYPO
   ========================================= */
.lx .lx-content, 
.lx .lx-media{ 
  min-width: 0; 
}

.lx .lx-content{
  hyphens: auto; 
  -webkit-hyphens: auto;
  overflow-wrap: break-word; 
  word-break: break-word;
  line-height: var(--line-height-base);
  /* Optional Lesebreite */
  /* max-inline-size: 70ch; */
}


/* =========================================
   4. MEDIA-FRAME (einmalig, robust)
   ========================================= */
.lx .lx-media{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar-m, var(--lx-media-ar, 16 / 9));
  overflow: hidden;
  border-radius: var(--border-radius-medium);
  background: var(--color-bg-medium);
  isolation: isolate; /* sauberer Stacking-Kontext */
}

/* Tablet/Desktop überschreiben Mobil */
@media (min-width: 768px){
  .lx .lx-media{
    aspect-ratio: var(--ar-t, var(--ar-m, var(--lx-media-ar, 16 / 9)));
  }
}
/* 401–767 px: eigener Bildausschnitt für dieses Bild */
@media (min-width: 401px) and (max-width: 767px){
  .lx-media.is-cover.is-focus-tab img{
    object-position: 40% 50%;
  }
}
@media (min-width: 768px) and (max-width: 1013px){
  .lx .lx-media.is-cover.is-focus-tab :is(img, video, picture > img){
    object-position: 43% 50%;
  }
}
@media (min-width: 1014px){
  .lx .lx-media{
    aspect-ratio: var(--ar-d, var(--ar-t, var(--ar-m, var(--lx-media-ar, 16 / 9))));
  }
}

/* Nur echte Medienträger flächig aufspannen */
.lx .lx-media > :is(picture, img, video){
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  display: block; 
  border-radius: inherit;
}

/* Standard: vollständige Anzeige (kein Cropping) */
.lx .lx-media :is(img, video, picture > img){
  width: 100%; 
  height: 100%;
  object-fit: contain; 
  object-position: center;
  border-radius: inherit;
  background: var(--color-bg-medium);
}

/* Opt-in: Füllen/Croppen */
.lx .lx-media.is-cover :is(img, video, picture > img){ 
  object-fit: cover; 
}

/* Fallback für sehr alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .lx .lx-media::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(100% / (var(--lx-media-ar, 16 / 9)));
  }
}


/* =========================================
   5. VARIANTEN — START
   ========================================= */

/* (1) Zwei Spalten Text/Text */
.lx--2text > .lx-inner{
  grid-template-columns: 1fr;
  row-gap: var(--lx-gap);
}
@media (min-width: 1014px){
  .lx--2text > .lx-inner{
    grid-template-columns: 1fr 1fr;
    column-gap: var(--lx-col-gap);
    row-gap: var(--lx-gap);
    align-items: start;
  }
}
.lx--2text > .lx-inner > .is-below{
  grid-column: 1 / -1; 
  justify-self: center;
  max-width: min(75ch, 100%);
  margin: clamp(1rem, 4vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(2rem, 4vw, 4rem) clamp(3rem, 4vw, 5rem);
  text-align: left; 
  border-radius: 15px;
}
/* =========================================
   5. VARIANTEN — FORTSETZUNG
   ========================================= */

/* (2) Bild links – Text rechts (mit optionalem Titel) */
.lx--img-left > .lx-inner{
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "media"
    "content";
  row-gap: var(--lx-gap);
  align-items: start;
}
.lx--img-left > .lx-inner > h3{ 
  grid-area: title; 
  margin: 0 0 clamp(.5rem, 2vw, 1rem); 
}
.lx--img-left .lx-media{ grid-area: media; }
.lx--img-left .lx-content{ 
  grid-area: content; 
  position: relative; 
  z-index: 1; 
}

@media (min-width: 1014px){
  .lx--img-left{
    --col-left:  2fr;  /* Bild */
    --col-right: 3fr;  /* Text */
    --media-max: clamp(420px, 36vw, 560px);
    --content-max: 70ch;
  }
  .lx--img-left > .lx-inner{
    grid-template-areas:
      "title title"
      "media content";
    grid-template-columns: var(--col-left) var(--col-right);
    column-gap: var(--lx-col-gap);
    row-gap: var(--lx-gap);
    align-items: start;
  }
  .lx--img-left .lx-media{ 
    justify-self: start; 
    max-inline-size: var(--media-max); 
  }
  .lx--img-left .lx-content{ 
    max-inline-size: var(--content-max); 
  }
}

/* (3) Text links – Bild rechts (mit optionalem Titel) */
.lx--img-right > .lx-inner{
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "media"
    "content";
  row-gap: var(--lx-gap);
  align-items: start;
}
.lx--img-right > .lx-inner > h3{ 
  grid-area: title; 
  margin: 0 0 clamp(.5rem, 2vw, 1rem); 
}
.lx--img-right .lx-media{ grid-area: media; }
.lx--img-right .lx-content{ 
  grid-area: content; 
  position: relative; 
  z-index: 1; 
}

@media (min-width: 1014px){
  .lx--img-right{
    --col-left:  3fr; /* Text */
    --col-right: 2fr; /* Bild */
    --media-max: clamp(420px, 36vw, 560px);
    --content-max: 70ch;
  }
  .lx--img-right > .lx-inner{
    grid-template-areas:
      "title title"
      "content media";
    grid-template-columns: var(--col-left) var(--col-right);
    column-gap: var(--lx-col-gap);
    row-gap: var(--lx-gap);
    align-items: start;
  }
  .lx--img-right .lx-media{ 
    justify-self: start; 
    max-inline-size: var(--media-max); 
  }
  .lx--img-right .lx-content{ 
    max-inline-size: var(--content-max); 
  }
}

/* Bild rechts soll breiter sein */
@media (min-width: 1014px){
  .lx--img-right.is-media-wide{
    /* Text (links) schmaler, Bild (rechts) breiter */
    --col-left: 2fr;     /* Text */
    --col-right: 2.5fr;  /* Bild */
    --content-max: 62ch;
    --media-max: none;   /* Deckelung aufheben */
  }
  .lx--img-right.is-media-wide .lx-media{ max-inline-size: 100%; }
}

/* Bild links soll breiter sein */
@media (min-width: 1014px){
  .lx--img-left.is-media-wide{
    --col-left: 2.5fr;  /* Bild */
    --col-right: 2fr;   /* Text */
    --content-max: 62ch;
    --media-max: none;
  }
  .lx--img-left.is-media-wide .lx-media{ max-inline-size: 100%; }
}

/* (4) Eine Spalte (optional: Bleed) */
.lx--full > .lx-inner{ grid-template-columns: 1fr; }
.lx--full.is-bleed > .lx-inner{ background: transparent; }

/* Mobile/Tablet: Einspalter in Quell-Reihenfolge */
.lx--img2-clean > .lx-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lx-gap);
}

/* Medien immer sichtbar/skalierend (nutzt deinen Media-Frame) */
.lx--img2-clean .lx-media :is(picture, img, video){
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* passt zu deinem Standard */
}

/* Desktop: Text links (über 2 Zeilen), Bilder rechts gestapelt */
/* Mobile/Tablet unverändert (einspaltig) */
.lx--img2-clean > .lx-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lx-gap);
}

/* Desktop: 2 Spalten, Bilder intern gestapelt */
@media (min-width: 1014px){
  .lx--img2-clean{ 
    --col-left: 2fr; 
    --col-right: 2.5fr; 
    --content-max: 62ch; 
  }

  .lx--img2-clean > .lx-inner{
    grid-template-columns:
      minmax(0, var(--col-left))   /* Text */
      minmax(0, var(--col-right)); /* Bilder */
    /* nur EINE Grid-Zeile → kein „Nach unten wandern“ */
    align-items: start;
    column-gap: var(--lx-col-gap);
  }

  .lx--img2-clean .lx-content{
    grid-column: 1;
    max-inline-size: var(--content-max);
    min-width: 0;
  }

  .lx--img2-clean .media-stack{
    grid-column: 2;
    display: grid;
    grid-auto-rows: auto;
    row-gap: var(--lx-gap);
    align-content: start;
    inline-size: 100%;
    min-width: 0;
  }

  .lx--img2-clean .media-stack .lx-media{
    inline-size: 100%;
    min-width: 0;
  }
}

/* (optional) Mobile Reihenfolge: Bild1 → Text → Bild2 */
@media (max-width: 1013px){
  .lx--img2-clean .media-stack{ display: contents; } /* Bilder werden Geschwister */
  .lx--img2-clean .m1{ order: 1; }
  .lx--img2-clean .lx-content{ order: 2; }
  .lx--img2-clean .m2{ order: 3; }
}
/* =========================================
   6. UTILITIES
   ========================================= */

/* Spalten-Verhältnisse (auf 2-Spalten-Layouts aufsetzbar) */
@media (min-width: 1014px){
  .lx.is-40-60 > .lx-inner{ grid-template-columns: 2fr 3fr; }
  .lx.is-60-40 > .lx-inner{ grid-template-columns: 3fr 2fr; }
}

/* Vertikale Ausrichtung */
@media (min-width: 768px){
  .lx > .lx-inner,
  .lx--img-left > .lx-inner,
  .lx--img-right > .lx-inner,
  .lx--2text > .lx-inner{ align-items: start; }
  .lx.is-center > .lx-inner{ align-items: center; }
}

/* Kompakter Abstand unter Media bis Tablet */
@media (max-width: 1013px){
  .lx--img-left .lx-media,
  .lx--img-right .lx-media{
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
  }
}
@media (min-width: 1014px){
  .lx--img-left .lx-media,
  .lx--img-right .lx-media{ margin-block: 0; }
}

/* Kompakte Medien (ersetzt .is-small-media) */
.lx.is-compact-media{
  --media-mobile-max: 50vw;
  --media-tablet-max: 40vw;
  --media-desktop-max: clamp(360px, 36vw, 460px);
}
.lx.is-compact-media .lx-media{ margin-inline: auto; max-inline-size: 100%; }
@media (max-width: 767px){
  .lx.is-compact-media .lx-media{ max-inline-size: var(--media-mobile-max); }
}
@media (min-width: 768px) and (max-width: 1013px){
  .lx.is-compact-media .lx-media{ max-inline-size: var(--media-tablet-max); }
}
@media (min-width: 1014px){
  .lx.is-compact-media .lx-media{ max-inline-size: var(--media-desktop-max); }
}

/* H2 links neben Inhalt (.lx--full.has-side-title) */
.lx--full.has-side-title{
  display: grid;
  grid-template-columns: minmax(320px, 500px) 1fr;
  column-gap: var(--lx-col-gap);
  align-items: start;
}
.lx--full.has-side-title > h2{
  margin: 0; padding-inline: var(--lx-pad-x); text-align: left;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; font-weight: 500;
}
.lx--full.has-side-title > .lx-inner{ min-width: 0; }
@media (max-width: 1013px){
  .lx--full.has-side-title{ grid-template-columns: 1fr; justify-items: center; }
  .lx--full.has-side-title > h2{ text-align: center; }
  .lx--full.has-side-title > .lx-inner{ width: 100%; justify-self: stretch; }
}

/* Vollbreite/Bleed für einzelne Sections */
.lx.is-bleed { padding-block: 0; } /* optional: keine Zusatzhöhe um das Bild */
.lx.is-bleed > .lx-inner{
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* (optional) Wenn du öfter volle Breite im Raster brauchst */
.lx.is-edge > .lx-inner{
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* Utility: keine abgerundeten Ecken */
.lx .no-radius,
.lx .no-radius > :is(picture, img, video){
  border-radius: 0 !important;
}

/* ---------- Aspect-Ratio Utilities ---------- */
/* Mobile-First Utilities: setzen Variablen, nicht direkt aspect-ratio */
.lx .ar-m-4-3  { --ar-m: 4 / 3; }
.lx .ar-m-1-1  { --ar-m: 1 / 1; }
.lx .ar-m-3-2  { --ar-m: 3 / 2; }
.lx .ar-m-16-9 { --ar-m: 16 / 9; }
.lx .ar-m-800-267 { --ar-m: 800 / 267;}
.lx .ar-m-800-403 { --ar-m: 800 / 403;}
.lx .ar-m-800-533 { --ar-m: 800 / 533; }

@media (min-width: 768px){
  .lx .ar-t-4-3  { --ar-t: 4 / 3; }
  .lx .ar-t-16-9 { --ar-t: 16 / 9; }
}
@media (min-width: 1014px){
  .lx .ar-d-21-9 { --ar-d: 21 / 9; }
  .lx .ar-d-16-9 { --ar-d: 16 / 9; }
  .lx .ar-d-1920-631 { --ar-d: 1920 / 631; }
  .lx .ar-d-1920-966 { --ar-d: 1920 / 966; }
}


/* =========================================
   7. GROSSE SCREENS: ETWAS MEHR LUFT
   ========================================= */
@media (min-width: 1440px){
  :root{
    --lx-gap: clamp(10px, 3vw, 20px);
    --lx-col-gap: clamp(30px, 5vw, 60px);
  }
}


/* =========================================
   8. VARIANTE: .lx--img2-topgrid
   Mobile:   title -> m1 -> content -> m2
   >=768px:  title title
             m1    m2
             content content
   ========================================= */
.lx--img2-topgrid > .lx-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lx-gap);
  grid-template-areas:
    "title"
    "m1"
    "content"
    "m2";
  align-items: start;
}
/* Bereiche definieren */
.lx--img2-topgrid > .lx-inner > h3{
  grid-area: title;
  margin: 0 0 clamp(.5rem, 2vw, 1rem);
  text-align: left;
}
.lx--img2-topgrid .lx-content{
  grid-area: content;
  max-inline-size: 70ch;
  margin-inline: auto;   /* zentriert den Block */
  text-align: left;      /* aber Text bleibt linksbündig */
  padding-inline: var(--lx-pad-x); /* Abstand zum Rand */
}
.lx--img2-topgrid .m1{ grid-area: m1; }
.lx--img2-topgrid .m2{ grid-area: m2; }
/* Bilder-Hülle „durchsichtig“ fürs Grid */
.lx--img2-topgrid .media-stack{ display: contents; }
/* Bilder im Frame */
.lx--img2-topgrid .lx-media :is(picture, img, video){
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Tablet/Desktop: 2 Bilder nebeneinander, Text darunter */
@media (min-width: 768px){
  .lx--img2-topgrid > .lx-inner{
    grid-template-columns: 1fr 1fr;
    column-gap: var(--lx-col-gap);
    grid-template-areas:
      "title   title"
      "m1      m2"
      "content content";
  }
  .lx--img2-topgrid > .lx-inner > h3{ text-align: center; }
  .lx--img2-topgrid .lx-content{
    max-inline-size: 70ch;
    margin-inline: auto;   /* Block bleibt zentriert */
    text-align: left;      /* Text bleibt links */
    padding-inline: var(--lx-pad-x);
  }
}
/* Optional: Desktop etwas großzügiger */
@media (min-width: 1014px){
  .lx--img2-topgrid{
    --content-max: 68ch;
  }
  .lx--img2-topgrid .lx-content{
    max-inline-size: var(--content-max);
  }
}


/* =========================================
   9. VARIANTE: .lx--stack-fluid (final sharp)
   Reihenfolge: Titel → Text → Bild1 → Bild2 → Accordion
   - alles einspaltig
   - wachsende Seitenränder
   - Bilder + Accordion gleich breit
   - Bilder max. so groß, dass 1400px-Quellen auf 2x-Displays scharf sind (≈700 CSS px)
   ========================================= */
.lx--stack-fluid > .lx-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lx-gap);
  width: 100%;
  max-width: none;
  padding-inline: var(--pad-x, clamp(14px, 5vw, 28px));
}
/* wachsende Innenabstände */
@media (min-width: 768px){
  .lx--stack-fluid{ --pad-x: clamp(18px, 7vw, 72px); }
}
@media (min-width: 1014px){
  .lx--stack-fluid{ --pad-x: clamp(24px, 9vw, 128px); }
}
/* >>> WICHTIG: maximale Darstellungsbreite der Medien für Retina-Schärfe
   1400px native → 700px CSS (2x) */
.lx--stack-fluid{
  --media-css-max: 700px;   /* Anpassen, falls du größere Quellbilder hast */
}
/* Titel */
.lx--stack-fluid > .lx-inner > h3{
  text-align: left;
  margin: 0 0 clamp(0.2rem, 2vw, 0.5rem);
}
/* Text: angenehme Lesebreite, linksbündig */
.lx--stack-fluid .lx-content{
  max-inline-size: 70ch;
  margin-inline: auto;
  text-align: left;
}
/* Bilder */
.lx--stack-fluid .lx-media{
  width: 100%;
  max-inline-size: min(100%, var(--media-css-max));
  margin-inline: auto;
  aspect-ratio: var(--lx-media-ar, 16/9);
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  background: var(--color-bg-medium);
}
.lx--stack-fluid .lx-media :is(picture, img, video){
  width: 100%;
  height: 100%;
  object-fit: contain;  /* kein Cropping; bei Bedarf .is-cover ergänzen */
  display: block;
}
/* Accordion: exakt gleiche Breite wie Bild */
.lx--stack-fluid .lx-accordion{
  width: 100%;
  max-inline-size: min(100%, var(--media-css-max));
  margin-inline: auto;
  text-align: left;
}


/* =========================================
   10. UTILITY: Kreisrunde Medien
   ========================================= */
.lx .lx-media.is-circle{
  --lx-media-ar: 1 / 1;
  --ar-m: 1 / 1;
  --ar-t: 1 / 1;
  --ar-d: 1 / 1;

  border-radius: 50%;
  overflow: hidden;
  background: inherit; /* übernimmt z. B. .color-accent */
}
.lx .lx-media.is-circle :is(img, picture > img, video){
  object-fit: cover;
  object-position: center top; /* oder 50% 20% */
  border-radius: inherit;
}

/* ===================================
		Mobile/Desktop unterschiedlich
======================================*/

.u-only-mobile,
.u-only-desktop {
  display: block;
}

/* Standard: Desktop-Version sichtbar */
.u-only-mobile  { display: none !important; }
.u-only-desktop { display: block !important; }

/* Mobile-Breakpoint */
@media (max-width: 767px) {
  .u-only-mobile  { display: block !important; }
  .u-only-desktop { display: none !important; }
}

/* ========================================
   Logos / Mitgliedschaften (Bild links, Text rechts)
   ======================================== */

.lx--logos {
  background-color: #fff;
  padding-block: clamp(2rem, 5vw, 4rem);
  margin-block: clamp(1rem, 6vw, 2rem);
  padding-inline: clamp(1.5rem, 6vw, 4rem);
}

/* Basisgrössen (wichtig: nur diese Variablen werden gesteuert) */
.lx-logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--lx-max-w);
  margin-inline: auto;

  --logo-h: 60px;    /* Höhe quadratisch */
  --logo-w: 140px;   /* Breite rechteckig */
}

.lx-logo-item {
  flex: 1 1 calc(50% - var(--lx-gap));
  max-width: 380px;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: left;
  background-color: #fff;
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* Basis: alle Logos richten sich nach Höhe aus */
.lx-logo-item img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* Quadratische Logos — kompakt */
.lx-logo-item img[src*="oda"],
.lx-logo-item img[src*="BSGL"] {
  width: var(--logo-h);
  height: var(--logo-h);
}

/* Rechteckige Logos — breiter */
.lx-logo-item img[src*="afs-logo"],
.lx-logo-item img[src*="emr_zertifiziert"] {
  width: var(--logo-w);
  height: auto;
}

.lx-logo-item figcaption {
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  line-height: 1.4;
  color: var(--text-color, #333);
  max-width: 25ch;
}

/* Tablet: 2 nebeneinander */
@media (min-width: 600px) {
  .lx-logo-item {
    flex: 1 1 calc(50% - var(--lx-gap));
  }

  /* Logos etwas größer */
  .lx-logos-grid {
    --logo-h: 70px;
    --logo-w: 150px;
  }
}

@media (min-width: 1024px) {
  /* Logos nochmals etwas größer */
  .lx-logos-grid {
    --logo-h: 80px;
    --logo-w: 200px;
  }
}

/* Mobile: untereinander, zentriert */
@media (max-width: 599px) {
  .lx-logos-grid {
    flex-direction: column;
    align-items: center;
  }

  .lx-logo-item {
    flex: none;
    width: 100%;
    max-width: 320px;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 0.75rem;
  }

  .lx-logo-item img {
    margin-inline: auto;
  }

  .lx-logo-item figcaption {
    text-align: center;
  }
}

/* ================================
   TEASER-ANGEBOT — mobile first
   zentriert, max. 1920px inkl. Hintergrund
   ================================ */

#teaser-angebot {
  --bg-section: var(--bckg-color3);

  background-color: var(--color-accent);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(8px, 4vw, 24px);
  padding-block: clamp(14px, 4vw, 32px);
  box-sizing: border-box;
}

/* =====================================
   MOBILE: 1 Spalte, Kreise zentriert
   ===================================== */
#teaser-angebot .angebot-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);

  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* =====================================
   KREISE – kompakt & sicher zentriert
   ===================================== */
#teaser-angebot .angebot-list > li {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
	align-self: center;
  /* Basiswerte über Variablen */
  --circle-size: min(70vw, 230px);
  --circle-max: 180px;

  inline-size: var(--circle-size);
  max-inline-size: var(--circle-max);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: var(--bg-color2);
  padding: clamp(10px, 3vw, 16px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);

  /* robuste Worttrennung/Umbrüche (DE/Safari) */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;

  /* Silbentrennung feintunen (weicher Look) */
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-zone: 8%;
  -webkit-hyphenate-limit-zone: 8%;
  hyphenate-limit-lines: 2;
}

/* =====================================
   TEXT IM KREIS – saubere Silbentrennung
   ===================================== */
#teaser-angebot .angebot-list > li :is(strong, p, a, span, button) {
  max-inline-size: 90%;
  margin-inline: auto;
  text-align: center;
  line-height: 1.25;

  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  letter-spacing: 0.01em;
}

/* =====================================
   TYPOGRAFIE
   ===================================== */
#teaser-angebot .angebot-list > li > strong {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  line-height: 1.2;
  margin-bottom: 0.35em;
}

#teaser-angebot .angebot-list > li > p {
  margin: 0 0 0.6em 0;
  font-size: clamp(0.9rem, 2.8vw, 1rem);
}

#teaser-angebot .angebot-list > li > .mehr {
  display: inline-block;
  margin-top: 0;
  padding: .45em .9em;
  font-size: clamp(.9rem, 3vw, 1rem);
  color: inherit;
  text-decoration: none;
  white-space: normal;
}

/* =====================================
   SAFETY: sehr kleine Screens
   ===================================== */
@media (max-width: 330px) {
  #teaser-angebot {
    padding-inline: max(6px, 3vw);
  }
  #teaser-angebot .angebot-list {
    gap: 10px;
  }
  #teaser-angebot .angebot-list > li {
    --circle-size: min(88vw, 200px);
    --circle-max: 200px;
    padding: 10px;
  }
}

@media (max-width: 315px) {
  #teaser-angebot {
    padding-inline: max(6px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  #teaser-angebot .angebot-list {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-content: center;
  }
  #teaser-angebot .angebot-list > li {
    --circle-size: min(86vw, 190px);
    --circle-max: 190px;
    margin-inline: auto;
  }
}

/* =====================================
   AB ~820 PX: 3 SPALTEN (zentriert)
   ===================================== */
@media (min-width: 820px) {
  #teaser-angebot .angebot-list {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    justify-items: center;
    column-gap: clamp(14px, 1.5vw, 22px);
    row-gap: clamp(14px, 1.5vw, 22px);
    max-width: none;
  }

  #teaser-angebot .angebot-list > li {
    --circle-size: 200px;
    --circle-max: 200px;
    padding: clamp(12px, 2vw, 18px);
    background: var(--bg-color2);
  }
}

/* =====================================
   Unterschiedliche Grössen pro Angebot (optional)
   ===================================== */
#teaser-angebot .angebot-list > li.angebot-item--atem {
  --circle-size: min(70vw, 250px);
  --circle-max: 250px;
}

#teaser-angebot .angebot-list > li.angebot-item--focusing {
  --circle-size: min(60vw, 240px);
  --circle-max: 240px;
}

#teaser-angebot .angebot-list > li.angebot-item--klang {
  --circle-size: min(52vw, 210px);
  --circle-max: 210px;
}


@media (min-width: 820px) {
  #teaser-angebot .angebot-list > li.angebot-item--atem {
    --circle-size: 260px;
    --circle-max: 260px;
  }
  #teaser-angebot .angebot-list > li.angebot-item--focusing {
    --circle-size: 225px;
    --circle-max: 225px;
  }
  #teaser-angebot .angebot-list > li.angebot-item--klang {
    --circle-size: 190px;
    --circle-max: 190px;
  }
}

/* =====================================
   Fallback-Hilfe für Browser ohne Hyphenation
   ===================================== */
#teaser-angebot .angebot-list > li *::before {
  content: "\00AD"; /* Soft hyphen als unsichtbare Trennhilfe */
  visibility: hidden;
}
/************************************************************
 * LX-ACCORDION – Grund-Setup und Design-Variablen
 * Passe Farben/Abstände bequem an einem Ort an.
 ************************************************************/
:root {
  /* Farben */
  --lx-border: white;
  --lx-border-hover: #bbbbbb;
  --lx-bg: var(--bg-color1);
  --lx-bg-open: var(--bg-color1);
  --lx-text: #222222;
  --lx-icon: #555555;
  --lx-icon-open: #222222;

  /* Abstände & Maße */
  --lx-radius: 0.75rem;
  --lx-pad: clamp(0.5rem, 2vw, 0.8rem) clamp(1.2rem, 2vw, 1.5rem);
  --lx-font-size: clamp(1rem, 2vw, 1.1rem);
  --lx-icon-size: 1.5rem;

  /* Animation */
  --lx-dur: 0.35s;            /* einheitliche Dauer für Übergänge */
  --lx-ease: ease;            /* Timing-Funktion */
  --lx-content-max: 1600px;    /* max-height für Ein-/Ausklapp-Animation */
}

/************************************************************
 * Container des Akkordeons (optional)
 ************************************************************/
.lx-content {
  margin: 0;
  color: var(--lx-text);
}

.lx-content h3 {
	margin-bottom: clamp(0.3rem, 2vh, 0.8rem);
	font-weight: var(--w-bold);
}

.lx-content ul {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	margin-left: clamp(0, 4vw, 0.5rem);
}

.lx-content p {
	margin-bottom: 0.5rem;
}

/************************************************************
 * DETAILS / SUMMARY – Grundstruktur des Akkordeons
 ************************************************************/
.lx-accordion {
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  background: var(--lx-bg);
  padding: var(--lx-pad);
  transition: background var(--lx-dur) var(--lx-ease),
              border-color var(--lx-dur) var(--lx-ease);
}

.lx-accordion:hover {
  border-color: white;
  background: color-mix(in srgb, var(--lx-bg) 80%, #ffffff 20%);
}

/* Die Kopfzeile: klickbarer Bereich inkl. Titel und Icon */
.lx-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; /* Abstand zwischen Text und Icon */
  cursor: pointer;
  font-weight: var(--w-regular);
  font-size: var(--lx-font-size);
  list-style: none;      /* verhindert Standard-Aufzählungszeichen */
  user-select: none;     /* verhindert Textmarkierung beim Klicken */
  outline: none;         /* Fokus-Style definieren wir selbst */
}

/* Entfernt den nativen Marker in WebKit-Browsern (Safari/Chrome) */
.lx-accordion summary::-webkit-details-marker {
  display: none;
}

/************************************************************
 * SVG-Icon – großes Plus, dreht sich zu X beim Öffnen
 ************************************************************/
.lx-accordion .icon {
  width: var(--lx-icon-size);
  height: var(--lx-icon-size);
  flex-shrink: 0;
  color: var(--lx-icon); /* steuert 'stroke' via currentColor */
  transition: transform var(--lx-dur) var(--lx-ease),
              color var(--lx-dur) var(--lx-ease);
}

/* Geöffneter Zustand: Plus (+) um 45° gedreht = X */
.lx-accordion[open] .icon {
  transform: rotate(45deg);
  color: var(--lx-icon-open);
}

/************************************************************
 * Inhalt – sanftes Ein-/Ausblenden (Opacity + max-height)
 * Hinweis: max-height muss den erwarteten Inhalt abdecken.
 ************************************************************/

.lx-accordion p {
  margin-top: 1.3rem;
}

/* UL: keine native Bullets (wegen overflow:hidden), kleiner linker Rand */
.lx-accordion ul {
  margin: 0.75rem 1rem 1rem 0;
  padding-left: 0.25rem;              /* sehr kleiner Abstand zum roten UL-Border */
  list-style: none;                    /* native Marker aus */
  line-height: 1.5;

  /* Animation */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity var(--lx-dur) var(--lx-ease),
    max-height var(--lx-dur) var(--lx-ease);
}

/* LI: Platz für Marker + Text */
.lx-accordion li {
  position: relative;
  margin: 0.25rem 0;
  padding-left: 1.6rem;              /* Abstand Bullet → Text (anpassen) */
}

.lx-accordion li::before {
  content: "•";
  position: absolute;
  left: -0.2rem;
  top: -0.15em;
  font-size: 1.2em;
  color: currentColor;
  opacity: 0.8;
}

/* Sichtbarer Zustand des UL (belassen) */
.lx-accordion[open] ul {
  opacity: 1;
  max-height: var(--lx-content-max);
}

/************************************************************
 * Geöffneter Kartenhintergrund (dezentes Feedback)
 ************************************************************/
.lx-accordion[open] {
  background: var(--lx-bg-open);
  border-color: none;
}

/************************************************************
 * Tastatur-Fokus – klar und barrierefrei
 * (Focus-Ring auf der Summary-Zeile)
 ************************************************************/
.lx-accordion summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lx-icon-open) 60%, #000 40%);
  outline-offset: 4px;
  border-radius: calc(var(--lx-radius) - 2px);
}

/************************************************************
 * Reduzierte Bewegung – respektiert System-Einstellung
 ************************************************************/
@media (prefers-reduced-motion: reduce) {
  .lx-accordion,
  .lx-accordion .icon,
  .lx-accordion ul {
    transition: none !important;
  }
}

/************************************************************
 * Kleinere Verfeinerungen für Listen
 ************************************************************/

.lx-accordion ul > li {
  margin: 0.25rem 0;
  padding-left: 0.7rem;
}

/* Optional: etwas mehr Luft beim ersten/letzten Element */
.lx-accordion[open] ul > li:first-child { margin-top: 0.5rem; }
.lx-accordion[open] ul > li:last-child  { margin-bottom: 0.1rem; }


/*-----------profil, erfahrung, persönlich, tarif UL-----------------*/

#atemtherapie h2, #atemtherapie-gruppe h2, #focusing h2, #klangschalenmassage h2, #konditionen h2, #profil h2, #erfahrung h2 {
	padding-top:0;
	padding-bottom: clamp(0.5rem, 7vw, 0.5rem);
	font-size:clamp(1.8rem, 4vw, 2rem);
	text-align:left;
}

#atemtherapie h2, #atemtherapie-gruppe h2, #focusing h2, #klangschalenmassage h2, #konditionen h2 {
	text-align:center;
}

#klangschalenmassage h2{
  display: block;
  margin: 0 auto;
  padding-left:3rem;
  padding-right:3rem;
  padding-top:clamp(1.5rem, 4vw, 2rem);
}

#tarif {
	padding-bottom: clamp(1rem, 4vw, 1.5rem);
	text-align:center;
}

#profil h3, #erfahrungen h3, #tarif h3, #persoenlich h3, #portrait h3  {
	padding-bottom:0.3rem;
	margin-bottom:0.5rem;
	text-align:left;
	font-size:clamp(1.3rem, 4vw, 1.5rem);
	font-weight: var(--w-light);
	border-bottom: 0.5px solid var(--color-secondary);
}

#profil ul {
	width: 100%;
	padding-left: 0;
}

#profil li, #tarif li  {
	list-style-type: none;
	padding: clamp(1em, 4vw, 1.3em) 0 clamp(1em, 4vw, 1.3em) 0.2em;
	margin-left: 0;
	border-bottom: 0.7px dotted #5e5e5e;
}

#profil li:first-child, #tarif li:first-child {
	padding-top: 0;
}

#tarif li:first-child {
	border-top: 0;
	padding-bottom: 0;
}

#tarif li:nth-child(2) {
	border-top: 0;
	padding-bottom: 0;--w-light
	
}

#profil li:last-child, #tarif li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

#tarif li:last-child {
	padding-bottom: 1.5em;
}

.lx-inner > .centered ul {
	margin-top:0;
}
@media (min-width: 1024px) {
	.lx-inner > .centered ul {
		margin-top: 3rem;
		margin-left: 1rem;
	}
}

/*------------------Untermenu-----------------*/

#profil ul ul, #tarif ul ul {
	margin-top: 0.2em;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
}

#profil li li, #erfahrung li li, #tarif li li {
	list-style-type: disc;
	list-style-position: outside;
	padding: 0;
	margin: 0 0 0 1.3em;
	border: none;
}

/*-----------Font-Formatierung innerhalb UL-----------------*/		

.one_strong {
	display: block;
	font-weight: var(--w-medium);
	font-size: clamp(1rem, 4vw, 1.1rem);
	color:#242424;
	margin-bottom: 0;
}

.one_padding {
	display: block;
	font-weight: var(--w-light);
	font-size: 1em;
	padding-bottom: 0.1em;
}

.one_small {
	display: block;
	font-weight: var(-w-light);
	font-size: 1em;
}

/* ========================================
   Hakenliste: einspaltig & linksbündig
   ======================================== */

#portrait .lx-list-check {
  list-style: none;
  margin: 0;                                /* entfernt Zentrierung */
  padding: 0;
  max-width: 65ch;
  display: block;                           /* statt Grid/Flex */
  text-align: left;
  color: var(--text-color, #111);
  font-size: clamp(1rem, 1vw, 1.1rem);
  grid-template-columns: 1fr !important;    /* Sicherheit, falls Grid-Styles greifen */
}

/* Eintrag: Icon links, Text rechts – oben bündig */
#portrait .lx-list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
  padding-block: 0.25rem;                   /* vertikaler Rhythmus */
}

/* SVG-Haken */
#portrait .lx-list-check li > svg {
  width: 1rem;
  height: auto;
  color: var(--accent-color, #2b7a4b);
  flex-shrink: 0;
  margin-top: 0.25em;                       /* optische Feinjustierung */
}

/* Sicherheitshalber: alle media-queries auf 2 Spalten neutralisieren */
@media (min-width: 600px), (min-width: 768px), (min-width: 1024px) {
  #portrai .lx-list-check {
    display: block;
    grid-template-columns: 1fr !important;
  }
}

/* keine Linien in der Profil-Liste */
#portrait .lx-list-check,
#portrait .lx-list-check * {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}


/*--------------------Footer------------------------*/

footer {
	margin: 0 auto;
	padding: 2em 3em 2em 3em;
}

address {
	font-style: normal;
	text-align: center;
	color: white;
}

#o-no {
	margin-top:0;
	text-decoration:none;
}

.o-no-dark a {
	margin-top:0;
	text-decoration:none;
	color:black !important;
}

#phone {
	margin-top: 1em;
	padding-bottom: 0.1em;
}

address .p-abstand-oben {
	text-align: center;
}

#kontakt a {
	color: white;
	text-decoration: none;
}

.o {
	color: rgba(255, 192, 103, 1);
	font-weight: 900;
}

footer a {
	width: 100%;
	text-align: center;
	color: white;
	text-decoration: none;
}

footer nav {
	display: flex;
	justify-content: center;
	margin:0 auto;
	margin-top: 3rem;
	color: white;
}

#impressum address {
	color: black;
}

/*================== Karte ==================*/

.map-wrapper {
  width: 100%;
  display: flex;
  justify-content: center; /
}

#map-praxis {
  height: 60vw;         
  width: 100%;        
  margin-top: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 768px) {
  #map-praxis {
    height:40vw;
  }
}
@media (min-width: 1024px) {
  #map-praxis {
  	width: 70%;
    height:30vw;
  }
}

/* ======== Mobile: Karte soll gesamte Bildschirmbreite nutzen ======== */
@media (max-width: 1024px) {
  /* Wir "brechen" die Karte aus der Spaltenbreite heraus */
  .map-wrapper {
    width: 100vw;           /* ganze Viewport-Breite */
    margin-left: 50%;
    transform: translateX(-50%);  /* zentriert das 100vw-Element */
  }
  #map-praxis {
    width: 100vw;           /* echte volle Breite */
    border-radius: 0;       /* optional: Ecken entfernen */
  }
}

.karte-hinweis {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Popup-Inhalt in Marker-Gelb */
.praxis-popup .maplibregl-popup-content {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(245, 218, 129, 1);
  color: black;
  font-size: 0.80rem;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Spitze nach unten (Popup über dem Marker) */
.praxis-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: rgba(245, 218, 129, 1) !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* ===================================== */
/* ÖV-Popup kompakt + "x"     */
/* ===================================== */

.maplibregl-popup.ov-popup {
  max-width: none !important;
  width: auto !important;
}

/* Inhalt: relativer Container für das x */
.maplibregl-popup.ov-popup .maplibregl-popup-content {
  position: relative;               /* wichtig */
  background: #ffffff;
  color: #000000;
  padding: 8px 28px 8px 12px;       /* rechts Platz für das x */
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  white-space: nowrap;              /* Popup bleibt kompakt */
}

/* Das x wirklich oben rechts fixieren */
.maplibregl-popup.ov-popup .maplibregl-popup-close-button {
  position: absolute !important;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  z-index: 10;
}

.maplibregl-popup.ov-popup .maplibregl-popup-content a {
  color: #000000 !important;
  text-decoration: none;      /* optional: kein Unterstrich */
}

.maplibregl-popup.ov-popup .maplibregl-popup-content a:hover {
  text-decoration: underline; /* optional: Hover-Effekt */
}