:root{

		--white:#FFFFFF;

		--blue-deep:#0D9488; /* primary deep teal (replaced) */

		--blue-primary:#0D9488; /* primary teal */

		--blue-bright:#0D9488; /* accent / CTA */

		--light-gray:#F8FAFC; /* subtle section separation */

		--anthracite:#1F2937; /* text color */

		--glass: rgba(255,255,255,0.55);

		--card-border: #0D9488;

		--max-width:1500px;

		--gutter:28px;

		/* Typographic scale (rem-based, base 16px) */
		--font-size-base: 17px; /* 1rem = 17px now */
		--fs-h1: 3.75rem; /* 60px */
		--fs-h2: 2.75rem; /* 44px */
		--fs-h3: 2.25rem; /* 36px */
		--fs-h4: 1.5rem;  /* 24px */
		--fs-lead: 1.125rem; /* 18px */
		--fs-body: 1rem; /* 17px */
		--fs-sm: 0.9375rem; /* 16px */
		--fs-xs: 0.9375rem; /* 15px */
		--fs-xxs: 0.75rem; /* 12px */
		--fs-lg: 1.25rem; /* 20px */
		--fs-btn: 1rem; /* 16px */
	  }

	  *{box-sizing:border-box}

	  html,body,#root{height:100%}

	  body{

		margin:0;

		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

		color:var(--anthracite);

		background:var(--white);

		-webkit-font-smoothing:antialiased;

		-moz-osx-font-smoothing:grayscale;

		line-height:1.6;

		/* base font-size */
		font-size:var(--font-size-base);

	  }

	  .container{

		max-width:var(--max-width);

		margin:0 auto;

		padding:0 calc(var(--gutter));

	  }

	  /* Ensure main content isn't hidden behind fixed header */

	  .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
	  .skip-link:focus{position:static;left:auto;width:auto;height:auto;padding:8px 12px;background:#fff;color:var(--blue-primary);z-index:1000;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.08)}

	  .site{padding-top:64px}

	  .section{padding:88px 0}
	/* Feine mintgrüne Trennlinie zwischen aufeinanderfolgenden Sektionen */
	.section + .section{ border-top:2px solid rgba(13,148,136,0.12); }

	  .section__title{

		text-align:center;

		font-size:var(--fs-h3);

		margin:0;

		font-weight:500;

		color:#111827;

		line-height:1.2

	  }



	  .text-primary{

		color:var(--blue-primary);

	  }

	  .text-center{ text-align:center }



	  .services__subtitle{

		text-align:center;

		color:#111827; /* changed to black for better contrast */

		margin:12px 0 0;

		font-size:var(--fs-lead);

		line-height:1.55;

		max-width:600px;

		margin-left:auto;

		margin-right:auto

	  }



	  /* HERO */

	  .hero{

		position:relative;

		/* slightly shorter hero so more content is visible on first screen */
		min-height:70vh;

		display:flex;

		align-items:center;

		justify-content:flex-start;

		overflow:hidden;

		/* gradient fallback plus hero image - place your image at ../assets/hero.png */

		background-image:linear-gradient(180deg, rgba(13,148,136,0.06), rgba(13,148,136,0.03)), url('../assets/hero.png');

		background-size:cover;

		background-position:center center;

		background-repeat:no-repeat;

	  }

	  /* subtle white overlay to improve text contrast */
	  .hero::after{
		content: "";
		position:absolute;
		inset:0;
		/* increased opacity so foreground text remains readable on busy hero images */
		background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34));
		z-index:1;
		pointer-events:none;
	  }

	  @media (max-width:900px){
		.hero::after{ background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18)); }
	  }

	  .hero__glass{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.10));/* subtle dark overlay to improve legibility */-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none; z-index:2 }

	  .hero__content{position:relative;z-index:3;max-width:920px;padding:0 0 32px;text-align:center;width:100%} 



	  /* hero link overlay so background image can be opened directly */

	  /* hero overlay removed — no clickable area needed */
	  /* .hero__link rules intentionally removed during cleanup */

	  .hero__title{font-size:var(--fs-h1);margin:0 0 1.125rem 0;font-weight:700;letter-spacing:normal;line-height:1.05;font-family:system-ui, -apple-system, sans-serif;color:#18181B;transform:translateY(-0.5rem);}  

	  .hero__subtitle{margin:6px 0 10px;font-size:calc(var(--fs-h4) * 1.08);line-height:1.25;color:var(--blue-primary);font-weight:600;letter-spacing:normal;text-shadow:none;}  

	  .hero__lead{max-width:920px;margin:12px auto 1.125rem;color:rgba(255,255,255,0.95);font-size:calc(var(--fs-body) * 1.06);line-height:1.6;font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,0.12);} 

	  .hero__actions{display:flex;gap:20px;justify-content:center;margin-top:28px}
	  .hero__actions .btn{ padding:0.875rem 1.625rem; font-size:var(--fs-btn); box-shadow:0 10px 28px rgba(2,6,23,0.06); border-radius:6px } 

	  .btn--primary{padding:0.875rem 1.75rem;font-size:var(--fs-btn)} 

	  .btn--ghost{background:#fff;color:var(--blue-primary);border:2px solid var(--blue-primary);box-shadow:0 8px 22px rgba(2,6,23,0.08);padding:0.75rem 1.5rem;font-size:var(--fs-lead);line-height:1.6;font-weight:600;border-radius:6px;z-index:4} 
	  .btn--ghost:hover{background:var(--light-gray);transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,0.10)}

	  .hero__meta{display:flex;gap:28px;align-items:center;justify-content:center;flex-direction:row;margin-top:14px}

	  .stars{font-weight:700;color:var(--anthracite)}



	  /* rating */

	  .rating{display:flex;justify-content:center;margin:1rem 0}

	  .rating__stars{

		color:rgb(250, 204, 21);

		font-family:remixicon;

		font-size:var(--fs-lead);

		line-height:1.55;

		font-weight:normal;

		display:flex;

		gap:2px;

		align-items:center

	  }



	  /* Angled CTA */

	  .cta-angled{

		text-decoration:none;

		display:inline-block;

		margin-top:2rem

	  }

	  .cta-angled span{

		display:inline-block;

		background:rgb(30, 64, 175);

		color:white;

		padding:16px 36px;

		clip-path:polygon(8% 0, 100% 0, 92% 100%, 0% 100%);

		font-weight:500;

		font-size:var(--fs-lead);

		min-width:240px;

		transition:transform 0.2s ease, background-color 0.2s ease

	  }

	  .cta-angled:hover span{

		background:var(--blue-primary);

		transform:translateY(-2px)

	  }

	  .btn{display:inline-block;padding:12px 22px;border:2px solid var(--blue-primary);background:var(--blue-primary);color:var(--white);text-decoration:none;cursor:pointer;border-radius:6px;transition:all 220ms ease;box-shadow:0 4px 14px rgba(13,148,136,0.12)}

	  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,148,136,0.12)}

	  /* Ensure ghost variant stays white and visible (overrides .btn) */
	  .btn.btn--ghost{background:#fff;color:var(--blue-primary);border-color:var(--blue-primary);box-shadow:0 8px 22px rgba(2,6,23,0.08);z-index:4}
	  .btn.btn--ghost:hover{background:var(--light-gray);transform:translateY(-2px);box-shadow:0 10px 30px rgba(2,6,23,0.10)}

	  .hero__cta{font-weight:700}

	  .hero__scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:1.375rem;border:0;background:transparent;font-size:var(--fs-lg);color:var(--anthracite);z-index:3} 



	  /* HEADER */



	  .site-header{

		position:fixed;

		inset:0 0 auto 0;

		z-index:80;

		background:white;

		height:68px;

		border-bottom:1px solid rgba(2,6,23,0.04);

		box-shadow:none;

	  }

	  .header__inner{

		display:grid;

		/* logo | nav (center) | CTA */
		grid-template-columns: auto 1fr auto;

		align-items:center;

		height:100%;

		gap: 20px;

		padding-inline:36px; /* equal inner spacing so logo/nav/cta align visually */

	  }

	  @media (max-width:1024px){
		.header__inner{ padding-inline:18px }
	  }

	  .logo{

		text-decoration:none;

		padding-left:0; /* flush left inside the header padding */

		justify-self:start;

		display:flex;

		align-items:center;

		gap:4px;

		color:var(--blue-primary);

		font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

		font-size:var(--fs-h4);

		line-height:2rem;

		font-weight:700;

	  }

	  @media (max-width:768px){
		.logo{ padding-left:8px }
	  }

	  .logo__euregio{

		color:rgb(0, 0, 0);

		font-weight:700;

		margin-right:4px; /* space between logo words */

	  }

	  .logo__gebaudereinigung{

		color:var(--blue-primary);

		font-weight:700;

	  }

	  .nav{

		display:flex;

		gap:20px;

		flex-wrap:nowrap;

		/* absolutely center nav between logo (left) and CTA (right) */
		position:absolute; left:50%; transform:translateX(-50%);

		margin:0;

		align-items:center;

		z-index:90; /* sit above background but below header controls */

	  }

	  /* Tablet: revert to normal flow but align nav to the right (iPad behavior) */
	  @media (min-width:768px) and (max-width:1024px){
		.nav{ position:static; transform:none; justify-self:end; justify-content:flex-end; gap:12px }
		/* make sure the toggle (burger) is hidden on tablet and header CTA stays visible */
		.nav-toggle{ display:none }
		.header__cta{ display:block }
		/* allow nav links to wrap if needed but keep them compact */
		.nav a{ white-space:nowrap }
		/* ensure this wins over the mobile centering rule */
		.nav{ justify-self: end !important; }
	  }

	  /* Mobile / smaller screens: revert to normal flow and center */
	  @media (max-width:767px){
		.nav{ position:static; transform:none; justify-self:center; gap:12px }
	  }

	  /* Hide the mobile-only close button on desktop by default */
	  .nav .nav-close{ display:none; }

	  /* Hide the mobile-only contact block on desktop; show only in mobile panel */
	  .nav__contact{ display:none; }

	  .nav a{color:var(--anthracite);text-decoration:none;padding:8px 14px;font-weight:600;font-size:var(--fs-body);white-space:nowrap;letter-spacing:0.01em} 

	  /* specific header links that should be a slightly darker gray */
	  .nav a.nav__link--dark{
		color: #3F3F46;
		font-size:var(--fs-body);
		line-height:24px;
		font-weight:400;
		letter-spacing:normal;
		text-decoration:none;
	  }

	  /* keep mobile panel links white for contrast */
	  @media (max-width:768px){ .nav a.nav__link--dark{ color: #fff } }

	  /* Extra space before the CTA button on desktop */
	  .nav .btn.btn--primary{ margin-inline-start:12px; padding:10px 22px; border-radius:6px; height:44px; display:inline-flex; align-items:center; background:var(--blue-primary); color:var(--white); box-shadow:none; }

	  /* Header CTA (separate element) should visually match the nav CTA */
	  .header__cta .btn.btn--primary{ padding:10px 22px; border-radius:6px; height:44px; display:inline-flex; align-items:center; background:var(--blue-primary); color:var(--white); box-shadow:none; }

	  .nav a:hover{color:var(--blue-deep)}

	  .nav-toggle{display:none;border:0;background:transparent;font-size:1.375rem;cursor:pointer; color:var(--blue-primary); } 

	  .header__cta{

		margin-left:auto;

		justify-self:end;

	  }

	  .call-btn{

		border:2px solid var(--blue-primary);

		background:var(--blue-primary);

		color:var(--white);

		padding:8px 14px;

		border-radius:0; /* Entfernt abgerundete Ecken */

		text-decoration:none;

		display:flex;

		align-items:center;

		gap:8px

	  }

	  .call-btn i {

		color:var(--white); /* Icon weiß färben */

	  }



	  @media (max-width:768px){

		.header__inner { gap: 20px }

		/* Left-side slide-in mobile navigation panel (only for small screens) */
		.nav{
		  display:flex; /* keep in DOM but off-canvas with transform */
		  position:fixed;
		  top:0;
		  left:0;
		  height:100vh; /* volle Höhe unten */
		  /* etwas breiter: maximal 320px oder 92% der Viewportbreite */
		  width: min(320px, 92vw);
		  transform:translateX(-100%);
		  transition:transform 320ms cubic-bezier(.2,.9,.2,1);
		  background:var(--blue-deep); /* site color */
		  color:#fff;
		  flex-direction:column;
		  padding-top:72px; /* reserve top space (like logo area) */
		  padding-left:20px;
		  padding-right:20px;
		  padding-bottom:32px; /* weißer Abstand zum unteren Rand für das Icon */
		  box-shadow:18px 0 40px rgba(2,6,23,0.28);
		  z-index:220;
		  gap:8px;
		  -webkit-overflow-scrolling:touch;
		}

		/* Enlarge header/logo when mobile nav is open */
		@media (max-width:768px){
		  /* Pin the existing logo to the top-left when the nav panel is open so it appears left-aligned and fits inside the panel */
		  body.nav-open .logo {
			position: fixed;
			left: 16px;
			top: 64px; /* moved further down */
			font-size: 1.5rem; /* slightly smaller to fit comfortably */
			color: var(--white);
			z-index: 400;
			transform: none;
			text-align: left;
			max-width: calc(86vw - 56px); /* give space to the right */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 10px;
		  }
		  /* Hide the dynamically injected brand to prevent duplicate headings */
		  .nav .nav__brand{ display:none; }
		  /* If a brand block exists inside the mobile nav, enlarge that too (fallback) */
		  .nav__brand .logo__euregio { font-size:1.75rem; font-weight:700; }

		  /* Make nav links larger and left-aligned inside open panel */
		  .nav.show { padding-top: 120px; } /* push everything lower when nav is open */
		  .nav.show a {
			position: relative;
			display: block;
			font-size: 1.05rem;
			padding: 16px 12px;
			text-align: left;
		  }

		  /* Thick centered underline below each nav item */
		  .nav.show a::after{
			content: "";
			position: absolute;
			left: 12px;
			right: 12px;
			height: 3px;
			background: rgba(255,255,255,0.12);
			bottom: 6px;
			border-radius: 2px;
		  }
		  .nav.show a:last-child::after{ display:none; }

		  /* Show contact block and demarcate it */
		  .nav.show .nav__contact{ display:block; margin-top:12px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.06); }
		}

		/* visible state */
		.nav.show{
		  transform:translateX(0);
		}

		/* Close button inside panel (hidden on desktop) */
		.nav .nav-close{ display:block; position:absolute; right:12px; top:12px; background:transparent; border:0; color:rgba(255,255,255,0.9); font-size:22px; cursor:pointer }

		/* make links large and spaced, not stuck to top */
		.nav a{
		  color:#fff;
		  font-size:16px;
		  padding:14px 6px;
		  text-align:left;
		  width:100%;
		  display:block;
		  border-bottom:1px solid rgba(255,255,255,0.04);
		  text-decoration:none;
		  font-weight:700;
		  letter-spacing:0.02em;
		  margin-top:6px;
		}

		/* Ensure CTA inside mobile panel looks like other links (no extra left margin) */
		.nav .btn.btn--primary{ margin-inline-start:0; margin-top:12px; padding:12px 12px; width:100%; display:block; }

		.nav a:hover{ color: rgba(255,255,255,0.95); }

		/* Contact block: place directly under the links (not pinned to bottom) */
		.nav__contact{
		  margin-top:18px; /* move higher when panel is open */
		  display:flex;
		  flex-direction:column;
		  gap:10px;
		  padding-top:6px;
		  border-top:1px solid rgba(255,255,255,0.04);
		}

		/* Mobile brand/header inside panel */
		.nav__brand{
		  display:block;
		  padding-left:2px;
		  margin-bottom:8px;
		}
	  .nav__brand .logo__euregio{ color: #fff; font-weight:700; display:block; font-size:1.75rem; letter-spacing:0.02em; margin-bottom:2px; }
		.nav__brand .logo__gebaudereinigung{ color: var(--white); font-weight:700; display:block; font-size:var(--fs-lg); margin-top:6px }

		/* Contact icons (gold circular badges) */
		.contact-icon{
		  width:36px;
		  height:36px;
		  border-radius:50%;
		  background:var(--blue-primary); /* use site color instead of gold */
		  display:inline-flex;
		  align-items:center;
		  justify-content:center;
		  color:#fff;
		  flex-shrink:0;
		  margin-right:10px;
		  font-size:var(--fs-body);
		}
		.nav__contact a{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.95); text-decoration:none }
		.nav__contact-title{ color:rgba(255,255,255,0.9); font-weight:700; margin-bottom:6px; font-size:var(--fs-xs); line-height:1.4 }
		.contact-text{ color:rgba(255,255,255,0.95) }
		.nav__contact a{ color:rgba(255,255,255,0.95); font-weight:600; font-size:var(--fs-xs); display:flex; gap:10px; align-items:center }
		.nav__contact i{ font-size:var(--fs-lead); color:rgba(255,255,255,0.95) }

		/* show nav-toggle on mobile */
    .nav-toggle{ display:block; position:absolute; right:18px; top:50%; transform:translateY(-50%); z-index:300; padding:8px; color:var(--blue-primary); font-size:1.5rem; }
		/* keep header CTA hidden on mobile */
		.header__cta { display: none }

	  }

	  /* lock background scroll when nav is open */
	  body.nav-open{ overflow:hidden; }



	  /* SERVICES */

	  /* Light background for main content sections */
	  .services, #massages, #kiefergelenk-cmd, .about, #hausbesuche { background: #F8F9FC; overflow-x: hidden; }

	  .services__grid{

		display:grid;

		grid-template-columns:repeat(4,1fr);

		gap:24px;

		/* ensure equal-height rows so cards in the same row match each other's height */

		grid-auto-rows:1fr;

		align-items:stretch;

		margin-top:48px;

	  }

	  /* Row wrapper to place an arbitrary number of service cards centered below the grid */
	  .services__row{ grid-column:1 / -1; display:flex; gap:24px; justify-content:flex-start; flex-wrap:wrap; margin-top:0; align-items:stretch }
	  /* make each service card match the grid-column width used by the 4‑column grid above */
	  .services__row .service{ flex:0 1 calc((100% - 72px) / 4); max-width: calc((100% - 72px) / 4); min-width:220px }
	  .services__row--center{ justify-content:center }

	  @media (max-width:1024px){
		.services__row .service{ flex:1 1 100% ; max-width:none }
	  }



	  .service{

		background:var(--white);

		border:1px solid #e5e7eb;

		padding:18px; /* reduced padding to make cards visually smaller */

		text-align:center;

		transition:all 0.18s ease;

		display:flex;

		flex-direction:column;

		align-items:center;

		gap:10px;

		height:auto;

		position:relative; /* for absolute-positioned details panel */

		box-sizing: border-box;

		max-width: 100%;

		/* allow long titles like 'Manuelle Lymphdrainage (MLD)' to wrap instead of pushing the card */
		word-break: break-word;

		overflow-wrap: anywhere;

	  }

	  .service__title{
		white-space: normal;
	  }

	  /* Use teal for icons and titles in the 'Unsere Leistungen' (about) area */
	  .about .service__icon{ color:var(--blue-primary) }
	  .about .service__title{ color:var(--blue-primary) }
	  .about .service:hover{ border-color:var(--blue-primary) }



	  .service__icon{

		color:var(--blue-primary);

		display:flex;

		align-items:center;

		justify-content:center;

		transition:all 0.2s ease

	  }



	  .service__icon{margin:0 0 8px 0}



	  .service__icon i{

		font-size:24px

	  }



	  .service__title{

		margin:0;

		font-weight:500;

		color:#111827;

		font-size:16px;

		line-height:24px

	  }



	  .service__title{ text-align:center }



	  .service:hover{

		border-color:var(--blue-primary)

	  }





	  /* details/summary for service "Mehr Infos" (accessible, no JS) */

	  .service__details{

		width:100%;

		/* make details a flexible column so the 'more' block can grow and push the highlight to a consistent baseline */

		display:flex;

		flex-direction:column;

		flex:1;

	  }



	  /* Position the summary centered at the bottom of the fixed-height card */

	  .service__summary{

		position:absolute;

		left:50%;

		transform:translateX(-50%);

		bottom:16px;

		margin:0;

		cursor:pointer;

		color:var(--blue-deep);

		font-weight:600;

		padding:6px 8px;

		background:transparent;

		border-radius:6px;

		display:inline-flex;

		align-items:center;

		gap:8px;

	  }



	  /* details panel: absolute overlay below the card so opening it doesn't change

		the height of other cards in the row */

	  .service__details .service__more{

		position:absolute;

		left:12px;

		right:12px;

		top:calc(100% + 8px);

		background:var(--white);

		border:1px solid rgba(0,0,0,0.06);

		box-shadow:0 8px 24px rgba(16,24,40,0.06);

		border-radius:8px;

		padding:12px;

		z-index:30;

		max-height:0;

		overflow:hidden;

		opacity:0;

		transform:translateY(-8px);

		transition: max-height 300ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.2,1);

		pointer-events:none;

	  }

	  /* specific hover for Heißluft card */
	  .service--heissluft:hover{
		border-color:var(--blue-primary);
		box-shadow: 0 8px 24px rgba(13,148,136,0.08);
		transform:translateY(-8px);
	  }



	  .service__details.open .service__more{

		opacity:1;

		max-height:420px;

		transform:translateY(0);

		pointer-events:auto;

	  }



	  /* rotating chevron in the summary (pure CSS) */

	  .service__summary::after{

		content: '';

		display:inline-block;

		width:14px;

		height:14px;

		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");

		background-repeat:no-repeat;

		background-size:contain;

		transform-origin:center;

		transition:transform 260ms ease;

	  }



	  .service__details.open > .service__summary::after,

	  .service__details.open .service__summary::after{

		transform:rotate(180deg);

	  }



	  .service__summary{

		list-style:none;

		cursor:pointer;

		color:var(--blue-deep);

		font-weight:600;

		border:none;

		background:transparent;

		padding:6px 8px;

		border-radius:6px;

		text-align:center;

	  }

	  .service__summary:hover{opacity:0.95}

	  .service__summary:focus{outline:3px solid rgba(13,148,136,0.12);outline-offset:3px}

	  .service__summary::-webkit-details-marker{display:none}



	  .service__more{

		display:flex;

		flex-direction:column;

		flex:1;

		overflow:hidden;

		max-height:0;

		opacity:0;

		transform:translateY(-4px);

		transition: max-height 240ms ease, opacity 200ms ease, transform 200ms ease;

		color:#374151;

		font-size:var(--fs-sm);

		line-height:1.5;

		text-align:left;

		padding-left:6px;

	  }



	  .service__details.open .service__more{

		display:flex;

		flex-direction:column;

		flex:1;

		opacity:1;

		max-height:420px; /* enough for short content; adjust if you add more */

		transform:none;

		margin-top:8px;

	  }

	  /* Fully-expanded card variant (visual style like the reference image) */
	  .services .service{ 
		height:100%; 
		padding:28px; 
		text-align:center; 
		align-items:center; 
		gap:12px; 
		min-height:220px;
	  }
	  .services .service__icon{ 
		width:64px; 
		height:64px; 
		border-radius:6px; 
		background:rgba(13,148,136,0.06);
		display:flex; 
		align-items:center; 
		justify-content:center; 
		margin:0 auto 12px;
	  }
	  .services .service__icon i{
		font-size:24px; 
		color:var(--blue-primary);
		display:block;
		width:34px;
		height:34px;
		line-height:1;
		text-align:center;
	  }

	  .services .service__title{ font-size:18px; font-weight:700; margin:0 0 8px }
	  .services .service__details{ position:static; width:100%; }
	  .services .service__summary{ display:none }
	  .services .service__details .service__more{ 
		position:static; 
		background:transparent; 
		border:none; 
		box-shadow:none; 
		padding:0; 
		margin-top:8px; 
		max-height:none; 
		opacity:1; 
		transform:none; 
		text-align:left; 
		color:#374151; 
	  }
	  .services .service__more p{ margin:0 0 8px }
	  .services .service__more ul{ padding-left:1.15rem; margin:0; list-style-position:outside }
	  @media (max-width:600px){ .services .service__details .service__more{ text-align:left } }
	  /* keep a consistent divider ABOVE the green highlight text so it appears always in the same place */
	  .services .service__details .service__more::before{ display:none }
	  .services .service__highlight{ color:var(--blue-primary); font-weight:700; margin-top:12px; text-align:center; padding-top:12px; display:block; position:static }
	  .services .service__highlight::before{ content:""; display:block; height:1px; background:#eef2f6; margin-bottom:8px }
	  .services .service__highlight{ margin-top:auto }
	  .service__highlight{ color:var(--blue-primary); font-weight:700; margin-top:14px; text-align:center; padding-top:12px; display:block; position:static }
	  .service__highlight::before{ content:""; display:block; height:1px; background:#eef2f6; margin-bottom:8px }
	  .service__highlight{ margin-top:auto }



	  /* 2. Die Icons selbst (Größe und Zentrierung) */
	  #massages .service--klassisch .service__icon i,
	  #massages .service--heissrolle .service__icon i,
	  #massages .service--eis .service__icon i,
	  #massages .service--massagegun .service__icon i,
	  #massages .service .service__icon i {
		  width: 34px !important;
		  height: 34px !important;
		  font-size: 24px !important;
		  line-height: 34px !important;
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  color: var(--blue-primary);
	  }

	  /* 3. Titel-Höhe vereinheitlichen */
	  #massages .service__title {
		  min-height: 48px;
		  margin: 0 0 12px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-weight: 700;
		  font-size: 18px;
		  text-align: center;
	  }


	  #massages .service__title{ min-height:48px; margin:0 0 12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; text-align:center }
	  /* reserve space so content never reaches the highlight */
	  /* Use flowing layout for highlights on all sizes (no absolute positioning) */
	  #massages .service__more{ padding-bottom:12px; flex:1 }
	  #massages .service__highlight{ position:static; margin-top:12px; padding-top:12px; text-align:center; display:block }
	  /* Make the divider a normal block so it stays with the highlight */
	  #massages .service__highlight::before{ content:""; display:block; height:1px; background:#eef2f6; margin-bottom:8px }

	  /* Tablet (iPad) adjustments: put highlight into normal flow so wrapped titles don't push layout */
	  @media (min-width:768px) and (max-width:1024px){
		/* Reduce reserved space because the summary will flow directly under the content */
		#massages .service__more{ padding-bottom:28px }
		/* Make the green highlight flow naturally instead of being absolutely positioned */
		#massages .service__highlight{ position:static; margin-top:12px; padding-top:12px; left:auto; right:auto; top:auto }
		/* Slightly reduce title min-height on tablet so wrapped titles take less vertical space */
		#massages .service__title{ min-height:40px }
	  }

	  @media (max-width:1024px){ .services__grid{ grid-template-columns:repeat(2,1fr) } }
	  @media (min-width:1025px){ /* desktop: reserve space for absolute 'Mehr Infos' button */
		#massages .service__more{ padding-bottom:56px }
	  }
	  @media (max-width:600px){ 
		.services__grid{ grid-template-columns:1fr }
		/* Mobile fallback: restore auto rows and normal flow */
		#massages .services__grid{ grid-auto-rows:auto }
		#massages .service{ min-height:auto; padding:16px; display:block }
		#massages .service__title{ min-height:unset; margin-bottom:8px }
		#massages .service__more{ padding-bottom:12px }
		#massages .service__highlight{ position:static; margin-top:12px; padding-top:12px }

		/* Mobile button sizing tweaks: reduce padding and font-size for hero/header buttons */
		.hero__actions .btn{ padding:0.5rem 0.9rem; font-size:var(--fs-sm); }
		.header__cta .btn.btn--primary{ padding:0.5rem 0.9rem; font-size:var(--fs-sm); height:auto; }
		/* Keep mobile nav primary button usable but slightly less tall */
		.nav .btn.btn--primary{ padding:10px 12px; }

		/* Mobile: Glass/Blur panel for subtitle (Option 3) */
		.hero__glass{ background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.12)); }

		.hero__subtitle{
		  color:var(--blue-primary);
		  /* subtler panel: almost invisible edge */
		  background:rgba(255,255,255,0.03);
		  backdrop-filter: blur(4px);
		  -webkit-backdrop-filter: blur(4px);
		  padding:6px 10px;
		  border-radius:8px;
		  font-weight:700;
		  display:inline-block;
		  box-shadow: none; /* remove visible shadow/border */
		  border: none;
		  max-width:96vw;
		  line-height:1.12;
		}

		.hero__lead {
		  font-size: calc(var(--fs-body) * 1.06);
		  text-shadow: 0 1px 6px rgba(0,0,0,0.24);
		}
		/* Keep subtitle green on mobile per request */
		.hero__subtitle{ color: var(--blue-primary); font-size:1.08rem; font-weight:600; text-shadow:none; }
		.hero__lead{ color: rgba(255,255,255,0.95); line-height:1.6; text-shadow:0 1px 2px rgba(0,0,0,0.22); font-size:calc(var(--fs-body) * 1.06); }
	  }



	  .gallery{background:var(--light-gray)}

	  /* Mehr Abstand zwischen Überschrift und Bildern in der Galerie */

	  .gallery .section__title{margin-bottom:36px}

	  .gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

	  .gallery__item{background:#F1F5F9;border:1px dashed rgba(31,41,55,0.06);min-height:160px;display:flex;align-items:center;justify-content:center;font-weight:600;color:rgba(31,41,55,0.45);transition:transform 220ms ease,box-shadow 220ms ease;border-radius:6px}

	  .gallery__item:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(31,41,55,0.06);color:rgba(31,41,55,0.75)}

	  .gallery__note{text-align:center;margin-top:14px;color:rgba(31,41,55,0.6)}



	  /* make gallery items that are anchors behave like blocks */

	  .gallery__item{display:flex;text-decoration:none}

	  .gallery__item:focus{outline:3px solid rgba(13,148,136,0.18);outline-offset:4px}

	  .gallery__item span{pointer-events:none}
	  /* HAUSBESUCHE */
	  .hausbesuche__intro{ text-align:center; max-width:760px; margin:0 auto 48px; padding-top:6px; padding-bottom:36px }
	  .hausbesuche__title{ font-size:var(--fs-h3); line-height:1.05; font-weight:800; color:#111827; margin:0 auto 0.75rem }
	  @media(min-width:1024px){ .hausbesuche__title{ font-size:var(--fs-h2) } }
	  .hausbesuche__lead{ color:#6b7280; max-width:680px; margin:0 auto; font-size:var(--fs-body); line-height:1.6 }
	  .hausbesuche__notice{ max-width:720px; margin:12px auto; padding:10px 14px; border-radius:6px; background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; font-weight:600; text-align:center }

	  .hausbesuche__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:24px; max-width:980px; margin-left:auto; margin-right:auto }
	  .hb-card{ background:var(--white); border:1px solid #e5e7eb; padding:22px; box-shadow:none; border-radius:0; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:300px; transition:border-color 180ms ease, transform 160ms ease }
	  .hb-card__icon{ width:4rem; height:4rem; border-radius:0; display:flex; align-items:center; justify-content:center; background:rgba(13,148,136,0.06); color:var(--blue-primary); font-size:var(--fs-lg) }
	  .hb-card__title{ font-size:var(--fs-lead); font-weight:700; margin:1rem 0 0.5rem; color:#111827 }
	  .hb-card__text{ color:#374151; font-size:var(--fs-sm); line-height:1.6 }
	  .hb-card:hover{ border-color:var(--blue-primary) }

	  .hausbesuche__spacer{ height:56px }

	  .hausbesuche__info{ max-width:760px; margin:40px auto 0; padding:24px; background:white; border:1px solid rgba(13,148,136,0.06); border-radius:0 }
	  .hausbesuche__info-title{ font-size:var(--fs-lg); font-weight:700; color:#111827; margin:0 0 1.125rem; text-align:center }
	  .hausbesuche__info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px; align-items:start }
	  .hausbesuche__info-grid ul{ list-style:none; padding:0; margin:0 }
	  .hausbesuche__info-grid li{ display:flex; gap:10px; align-items:flex-start; color:#374151; margin-bottom:12px; padding:6px 0 }
	  .hausbesuche__info{ border:1px solid rgba(13,148,136,0.06); transition:border-color 180ms ease, box-shadow 180ms ease }
	  .hausbesuche__info:hover, .hausbesuche__info:focus-within{ border-color:var(--blue-primary); box-shadow:0 8px 24px rgba(13,148,136,0.06) }
	  .hausbesuche__check{ color:#10B981; font-size:var(--fs-lead); line-height:1; margin-top:4px }

	  @media (max-width:900px){
		.hausbesuche__grid{ grid-template-columns:repeat(2,1fr) }
		.hausbesuche__info-grid{ grid-template-columns:1fr 1fr }
	  }
	  @media (max-width:600px){
		.hausbesuche__grid{ grid-template-columns:1fr }
		.hausbesuche__info-grid{ grid-template-columns:1fr }
		.hausbesuche__title{ font-size:1.75rem }
		.hausbesuche__spacer{ height:32px }
		.hb-card{ min-height:unset; padding:18px }
	  }

	  /* CONTACT */
	  .contact {
		background: #F8F9FC;
		padding: 64px 0;
	  }

	  .contact__header--full {
		max-width: var(--max-width);
		margin: 0 auto 48px;
		text-align: center;
	  }

	  .contact__lead {
		color: #4B5563;
		font-size: var(--fs-lead);
		margin: 12px 0 0;
	  }

	  .contact__layout {
		display: grid;
		grid-template-columns: 6fr 4fr;
		grid-template-areas: 
		  "form info"
		  "form map";
		gap: 1.5rem;
		min-height: 700px;
	  }

	  /* Formular links */
	  .contact__form {
		grid-area: form;
	  }

	  /* Rechte Seite Container */
	  .contact__right {
		display: contents; /* Lässt die Kinder direkt ins Grid einordnen */
	  }

	  /* Info und Map direkt im Grid */
	  .contact__info {
		grid-area: info;
	  }

	  .contact__map {
		grid-area: map;
	  }

	  /* Form Padding anpassen */
	  .contact__form .form {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 2rem 0; /* Gleicher Abstand oben und unten */
	  }

	  /* Weißer Container mit Schatten */
	  .white-box {
		background: #fff;
		padding: 2rem;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	  }

	  /* Responsive */
	  @media (max-width: 900px) {
		.contact__layout {
		  grid-template-columns: 1fr;
		  grid-template-areas: 
			"form"
			"info"
			"map";
		  min-height: auto;
		}
	  }

	  .contact__form {
		grid-area: form;
		background: #FFFFFF;
		padding: 32px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		min-height: calc(100% - 24px); /* Volle Höhe minus gap */
		height: 100%;
		display: flex;
		flex-direction: column;
	  }

	  .contact__info {
		background: #FFFFFF;
		padding: 32px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
		height: auto; /* Höhe durch den Inhalt bestimmen lassen */
		display: flex;
		flex-direction: column;
		gap: 32px;
	  }

	.contact__map {
	  position: relative;   /* sorgt dafür, dass sie mitscrollt */
	  background: #FFFFFF;
	  padding: 32px;
	  border-radius: 8px;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	  width: 100%;
	  margin-top: 16px;
	  z-index: 1;           /* niedriger z-index, damit sie NICHT über Überschrift/Fußzeile liegt */
	}

	  .map-placeholder {
		height: 300px;
		background: #f8f9fa;
		border: 2px dashed #dee2e6;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20px;
	  }

	  .map-placeholder p {
		margin: 0 0 15px;
		color: #6c757d;
	  }

	  .map-placeholder__address {
		margin-bottom: 20px !important;
		line-height: 1.6;
	  }

	  #activate-map-btn {
		background: var(--blue-primary);
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s ease;
	  }

	  #activate-map-btn:hover {
		background: var(--blue-deep);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(13,148,136,0.15);
	  }

	  .form {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 24px; /* Gleichmäßiger Abstand zwischen den Formularfeldern */
	  }

	  .form__label {
		display: block;
		margin: 0; /* Entfernt den Margin, da wir jetzt gap im Formular verwenden */
	  }

	  .form__label textarea {
		height: 100%;
		min-height: 120px; /* Minimalhöhe für bessere Nutzbarkeit */
	  }

	  .form__label span {
		display: block;
		margin-bottom: 8px;
		color: #374151;
		font-weight: 500;
		font-size: var(--fs-sm);
	  }

	  .form__input {
		width: 100%;
		padding: 12px;
		border: 1px solid #E5E7EB;
		border-radius: 4px;
		font-size: var(--fs-body);
		transition: all 0.2s ease;
		background: #FFFFFF;
	  }

	  .form__input:focus {
		outline: none;
		border-color: var(--blue-primary);
		box-shadow: 0 0 0 3px rgba(13,148,136,0.1);
	  }

	  select.form__input {
		appearance: none;
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-size: 16px;
		padding-right: 40px;
	  }

	  .form__submit {
		width: 100%;
		padding: 14px 24px;
		background: var(--blue-primary);
		color: white;
		border: none;
		border-radius: 8px;
		font-size: var(--fs-btn);
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s ease;
	  }

	  .form__submit:hover {
		background: var(--blue-deep);
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(13,148,136,0.15);
	  }

	  /* Checkbox Styling */
	  .form__label--checkbox {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		font-size: var(--fs-xs);
		color: #4B5563;
		margin-top: 10px;
	  }

	  .form__label--checkbox input[type="checkbox"] {
		margin-top: 3px;
		width: 16px;
		height: 16px;
		border: 2px solid #E5E7EB;
		border-radius: 4px;
		cursor: pointer;
	  }

	  .form__label--checkbox a {
		color: var(--blue-primary);
		text-decoration: none;
	  }

	  .form__label--checkbox a:hover {
		text-decoration: underline;
	  }

	  .contact__sidebar {
		display: flex;
		flex-direction: column;
		gap: 24px;
	  }

	  .contact__info h3,
	  .contact__map h3 {
		color: #111827;
		font-size: var(--fs-lg);
		font-weight: 600;
		margin: 0 0 16px;
	  }

	  .contact__info-grid {
		display: flex;
		flex-direction: column;
		gap: 24px;
	  }

	  .contact-item {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	  }

	  .contact-item i {
		color: var(--blue-primary);
		font-size: 1.375rem;
		flex-shrink: 0;
	  }

	  .contact-item strong {
		display: block;
		color: #374151;
		font-size: var(--fs-sm);
		margin-bottom: 4px;
	  }

	  .contact-item div {
		color: #6B7280;
		font-size: var(--fs-xs);
		line-height: 1.6;
	  }

	  /* Ensure email links in the contact block use the same color as the surrounding text */
	  .contact-item a{ color:inherit; text-decoration:none }
	  .contact-item a:hover{ color:var(--blue-primary); text-decoration:underline }

	  .contact__map p {
		color: #6B7280;
		font-size: var(--fs-xs);
		margin: 0 0 16px;
	  }

	  /* Media Queries */
	  @media (max-width: 1024px) {
		.contact__wrap {
		  grid-template-columns: 1fr;
		  grid-template-areas: 
			"form"
			"info"
			"map";
		  gap: 24px;
		}

		.contact__form,
		.contact__info,
		.contact__map {
		  max-width: 600px;
		  margin: 0 auto;
		  width: 100%;
		}
	  }

	  @media (max-width: 640px) {
		.contact {
		  padding: 48px 0;
		}

		.contact__form {
		  padding: 24px;
		}

		.form__label {
		  margin-bottom: 20px;
		}
	  }





	  /* FOOTER */

	  .footer{background:var(--blue-deep);color:var(--white)}

	  .footer__content{padding:36px 0}

	  .footer__grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 calc(var(--gutter));align-items:start}

	  .footer__col{min-width:0;text-align:center}
	  .footer__col--legal{ text-align:left }
	  .footer__copy a{ color:rgba(255,255,255,0.9); text-decoration:none; margin-left:8px }
	  .footer__copy a:hover{ text-decoration:underline; color:var(--blue-primary) }
	  /* Make each footer column left-aligned for better readability */
	  .footer__col--info, .footer__col--nav, .footer__col--legal{ text-align:left }

	  .footer__col h4{margin:0 0 0.75rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1px;color:var(--white)}

	  .footer__col p,.footer__col a{color:rgba(255,255,255,0.9)}

	  /* Footer brand / about */
	  .footer__brand{ font-size:1.375rem; margin:0 0 0.5rem; color:var(--white); font-weight:700 }
	  .footer__desc{ color:rgba(255,255,255,0.85); max-width:420px; margin-bottom:8px; font-size:var(--fs-body) }
	  /* keep footer blurb inline by default; only split on iPad */
	  .footer__desc--line1,
	  .footer__desc--line2,
	  .footer__desc--line3{ display:inline-block; white-space:nowrap }
	  /* small spacing between lines */
	  .footer__desc--line2{ margin-top:4px }
	  .footer__desc--line3{ margin-top:2px }

  /* Mobile improvements: stronger overlay + high contrast for slogan */
  @media (max-width:767px){
    .footer__brand{ display:block; width:100%; text-align:left; }
    .footer__desc{ max-width:100%; margin-bottom:12px }
    .footer__desc--line1{
      display:block;
      color:var(--anthracite) !important; /* highest contrast */
      font-weight:800;
      font-size:calc(var(--fs-body) + 2px);
      line-height:1.12;
      /* solid white background for maximum separation from bright images */
      background:#ffffff;
      padding:12px 14px;
      border-radius:10px;
      margin-bottom:10px;
      box-shadow:0 12px 30px rgba(0,0,0,0.12);
      border-left:6px solid var(--blue-primary);
      white-space:normal;
      z-index:2;
    }
    /* fallback for dark footer: invert to white text on dark translucent band */
    .footer--dark .footer__desc--line1,
    .footer.dark-theme .footer__desc--line1{
      background:rgba(0,0,0,0.75);
      color:var(--white) !important;
      box-shadow:none;
      border-left:none;
    }
  }
  /* Override: enable 4-line footer on iPad; default inline elsewhere */
  .footer__desc--line1,
  .footer__desc--line2,
  .footer__desc--line3,
  .footer__desc--line4{ display:inline-block; white-space:nowrap }
  .footer__desc--line2{ margin-top:0 }
  .footer__desc--line3{ margin-top:0 }
  .footer__desc--line4{ margin-top:0 }

  @media (min-width:768px) and (max-width:1024px){
    /* Tablet (iPad) — 3-line footer: line1 / line2+line3 / line4 */
    .footer__desc{ max-width:720px; font-size:var(--fs-body) }
    .footer__desc--line1{ display:block; white-space:normal; margin-top:0 }
    .footer__desc--line2,
    .footer__desc--line3{ display:inline-block; white-space:nowrap }
    .footer__desc--line4{ display:block; white-space:normal; margin-top:4px }
  }

  @media (min-width:1025px){
    /* Desktop — 2-line footer: line1+line2 / line3+line4 */
    /* allow full column width and slightly smaller font so line3+line4 fit on one line */
    .footer__desc{ max-width:none; font-size:calc(var(--fs-body) - 1px); white-space:normal }
    .footer__desc--line1,
    .footer__desc--line2{ display:inline-block; white-space:nowrap }
    /* force break before line3 and keep line3 + line4 together */
    .footer__desc--line3::before{ content: ""; display:block; height:0 }
    .footer__desc--line3,
    .footer__desc--line4{ display:inline-block; white-space:nowrap; margin-top:0 }
  }

  /* Final mobile override (after global rules) to ensure slogan is visible on small screens */
  @media (max-width:767px){
    .footer .footer__brand{ display:block; width:100%; text-align:center }
    .footer .footer__desc{ max-width:100%; margin-bottom:12px }
    .footer .footer__desc--line1{
      display:block !important;
      color:var(--white) !important;
      font-weight:700 !important;
      font-size:calc(var(--fs-body) + 0px) !important;
      line-height:1.2 !important;
      background:transparent !important;
      padding:0 !important;
      border-radius:0 !important;
      margin-bottom:6px !important;
      box-shadow:none !important;
      border-left:none !important;
      white-space:normal !important;
      z-index:auto !important;
    }
  }

	  .footer__social a{ display:inline-flex; width:72px; height:72px; align-items:center; justify-content:center; margin-right:12px; background:var(--blue-primary); color:#fff; border-radius:12px; text-decoration:none }
	  .footer__social a i{ font-size:32px }

	  .footer__col--nav{ text-align:center }
	  .footer__col--nav .footer__nav{display:flex;flex-direction:column;gap:8px;align-items:center}
	  .footer__col--nav h4{ text-align:center }



	  /* Right-column (Kontakt) header should be left-aligned above the contact items for readability */
	  .footer__col--legal h4{ text-align:left }
	  .footer__contact-list a{ text-decoration:none }
	  .footer__contact-list i{ color:var(--blue-primary); margin-right:8px; font-size:var(--fs-body) }

	  /* Ensure footer bottom layout distributes three elements */
	  .footer__bottom .container{display:flex;justify-content:space-between;align-items:center;gap:12px}
	  .footer__bottom-left{ display:flex; gap:12px; align-items:center }
	  .footer__links{ display:flex; gap:12px; align-items:center }
	  .footer__links .sep{ color:rgba(255,255,255,0.75); padding:0 6px }
	  .footer__copy{ color:rgba(255,255,255,0.9); font-size:var(--fs-xs) }
	  .footer__credit{ display:none }
	  .footer__bottom .footer__bottom-links a{ margin-left:12px }
	  .footer__credit{ color:rgba(255,255,255,0.85); font-size:var(--fs-xs) }

	  /* Mobile stacking for footer bottom */
	  @media (max-width:900px){
		.footer__bottom .container{flex-direction:column;align-items:center;gap:8px}
		.footer__bottom-left{ display:flex; flex-direction:column; align-items:center; gap:6px }
		.footer__links{ order:1 }
		.footer__copy{ order:2 }
		.footer__credit{ order:3 }
	  }


	  /* Footer bottom: thinner white divider and layout tweaks */
	  .footer__bottom{background:transparent;padding:12px 0;margin-top:28px;border-top:1px solid #FFFFFF}

	  /* Underline treatment for footer legal links (Impressum / Datenschutz) */
	  .footer__links a{
		position:relative;
		padding-bottom:0; /* no gap to text */
		color:inherit;
		text-decoration:none;
		display:inline-block;
	  }
	  .footer__links a::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		height:2px;
		background:#eef2f6;
		bottom:-1px; /* pull up slightly so there's no visible gap */
		border-radius:2px;
		opacity:0.95;
	  }

	  .footer__bottom .container{display:flex;justify-content:space-between;align-items:center;gap:6px; position:relative}

	  .footer__bottom a{color:rgba(255,255,255,0.95);text-decoration:none}

	  /* Footer credit on the right */
	  .footer__credit{ display:inline-block; color:var(--white); font-size:var(--fs-xs) }
	  .footer__credit a{ color:var(--white); text-decoration:none; }
	  .footer__credit a:hover{ color:var(--white); text-decoration:none; }

	  /* Desktop: center the links horizontally across the footer */
	  @media (min-width:901px){
		.footer__links{ position:absolute; left:50%; transform:translateX(-50%); }
		/* remove separator on desktop */
		.footer__links .sep{ display:none }
	  }



	  /* Desktop: keep the Kontakt column content left-aligned for readability while the column sits on the right */
	@media (min-width:1024px){
	  .footer__col--legal { text-align: left; justify-self: end; }
	  .footer__col--legal h4 { text-align: left; }
	  .footer__contact-list { align-items:flex-start; }
	  .footer__contact-list div, .footer__contact-list a { text-align:left; }
	}

	/* Mobile: ensure the Kontakt column and its items are centered */
	@media (max-width:600px){
	  .footer__col--info{ text-align:center; }
	  .footer__contact-list{ align-items:center; width:100%; }
	  .footer__contact-list div, .footer__contact-list a{ text-align:center; margin:0 auto; }
	}

	/* ABOUT */

	  .about__lead{ text-align:center; max-width:920px; margin:12px auto 56px; color:#6b7280; font-size:var(--fs-lead); line-height:1.6; }

	  /* stack content vertically and center it under the heading */
	  .about__content{ display:block; margin-top:20px }

	  .about__cards{ max-width:980px; margin:0 auto }

	  .about .services__grid{ grid-template-columns:repeat(2,1fr); gap:24px; }

	  /* Carousel and image */
	  /* Restored original width to match initial design (reduced slightly per request) */
	  .about__image{
		text-align:center;
		margin:28px auto 0;
		max-width:640px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		padding-top:24px; /* added top spacing */
		padding-bottom:12px; /* reduced bottom spacing */
	  }

	  .about__carousel{ position:relative }
	  .carousel__viewport{ overflow:hidden }
	  .carousel__track{ display:flex; transition:transform 420ms cubic-bezier(.2,.9,.2,1); will-change:transform }
	  /* Keep images square on small screens; limit height on large screens to avoid overly tall images */
	  .carousel__slide{ min-width:100%; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; max-height:560px; overflow:hidden; border-radius:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0) }
	  .carousel__slide img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:6px; will-change:transform; max-height:560px }
	  /* Ensure the image is centered in its container */
	  .about__image img{ display:block; margin:0 auto; object-position:center; }

	  /* Mobile adjustments */
	  @media (max-width:600px){
		.about__image{ max-width:100%; margin:18px auto; padding:0 12px }
		.carousel__slide{ aspect-ratio:1/1 }
		.carousel__prev, .carousel__next{ width:2.25rem; height:2.25rem; font-size:var(--fs-lead) }
	  }

	  /* CMD section styling */
	  #kiefergelenk-cmd .cmd__grid{ display:grid; grid-template-columns: 1fr 360px; gap:32px; align-items:start }
	  #kiefergelenk-cmd .cmd__content{ line-height:1.6 }
	  #kiefergelenk-cmd .cmd__aside{ display:flex; flex-direction:column; gap:16px }

	  /* Stacked full-width content blocks for CMD section */
	  #kiefergelenk-cmd .cmd__stack{ margin-top:16px; display:block }
	  /* square containers, centered headings & text; hover borderColor */
	  #kiefergelenk-cmd .cmd__block{ background:var(--white); border:1px solid #e5e7eb; padding:22px; margin-bottom:18px; border-radius:0; transition:border-color 180ms ease }
	  #kiefergelenk-cmd .cmd__block:hover{ border-color:var(--blue-primary) }
	  #kiefergelenk-cmd .cmd__block h3{ margin:0 0 12px; font-size:20px; color:#111827; text-align:center }
	  #kiefergelenk-cmd .cmd__text p{ margin:0; line-height:1.6; color:#374151; text-align:center }
	  /* Grid layout for 'Häufige Beschwerden' — centered, constrained grid so outer columns have equal outer spacing */
	  #kiefergelenk-cmd .cmd__text{ text-align:center }
	  #kiefergelenk-cmd .cmd__text ul{
		display:grid;
		/* fixed min/max so columns keep consistent width and grid is centered within max-width */
		grid-template-columns: repeat(4, minmax(140px,220px));
		gap:12px 28px;
		list-style:disc;
		list-style-position:outside;
		padding:0;
		margin:0 auto;
		max-width:920px; /* controls outer spacing */
		justify-content:center;
	  }
	  /* each item left-aligned so bullets are visible at the start of each column */
	  #kiefergelenk-cmd .cmd__text li{ margin-bottom:6px; width:100%; text-align:left; padding-left:6px; break-inside:avoid }
	  /* bring marker closer to text */
	  #kiefergelenk-cmd .cmd__text li::marker{ margin-right:6px }
	  /* keep certain long items from breaking across lines */
	  #kiefergelenk-cmd .cmd__text li.no-wrap{ white-space:nowrap }
	  /* allow wrapping on very narrow screens to avoid overflow */
	  @media (max-width:360px){ #kiefergelenk-cmd .cmd__text li.no-wrap{ white-space:normal } }
	  /* place the last two items centered in the third row */
	  #kiefergelenk-cmd .cmd__text ul li:nth-last-child(2){ grid-column:2 }
	  #kiefergelenk-cmd .cmd__text ul li:nth-last-child(1){ grid-column:3 }
	  #kiefergelenk-cmd .cmd__cta{ text-align:center; margin-top:10px; padding-top:6px }

	  @media (max-width:900px){
		#kiefergelenk-cmd .cmd__text ul{ grid-template-columns: repeat(2, 1fr); max-width:100% }
		/* undo explicit placement so items flow naturally into the 2-column grid */
		#kiefergelenk-cmd .cmd__text ul li:nth-last-child(2), #kiefergelenk-cmd .cmd__text ul li:nth-last-child(1){ grid-column:auto }
	  }

	  @media (max-width:600px){
		#kiefergelenk-cmd .cmd__block{ padding:16px }
		#kiefergelenk-cmd .cmd__text ul{ grid-template-columns:1fr; padding-left:20px }
	  }

	  @media (max-width:900px){
		#kiefergelenk-cmd .cmd__text ul{ grid-template-columns: repeat(2, minmax(0,240px)); max-width:640px }
		/* undo explicit placement so items flow naturally into the 2-column grid */
		#kiefergelenk-cmd .cmd__text ul li:nth-last-child(2), #kiefergelenk-cmd .cmd__text ul li:nth-last-child(1){ grid-column:auto }
	  }

	  @media (max-width:600px){
		#kiefergelenk-cmd .cmd__block{ padding:16px }
		#kiefergelenk-cmd .cmd__text ul{ grid-template-columns:1fr; padding-left:20px }
	  }

	  /* Panels styled like service cards and span the full container */
	  #kiefergelenk-cmd .cmd__panel{ grid-column:1 / -1; width:100%; padding:18px; border-radius:10px; background:var(--white); border:1px solid #e5e7eb; text-align:center; transition:all 160ms ease; display:flex; flex-direction:column; align-items:flex-start }
	  #kiefergelenk-cmd .cmd__panel:hover{ border-color:var(--blue-primary); background:rgba(13,148,136,0.03); }
	  #kiefergelenk-cmd .cmd__panel.cmd__box--inline{ background:var(--light-gray) }
	  #kiefergelenk-cmd .cmd__panel-title{ text-align:center; margin-top:0; color:#111827 }

	  /* center symptoms block but keep list items left-aligned for readability */
	  #kiefergelenk-cmd .cmd__symptoms{ display:flex; justify-content:center; columns:2; column-gap:20px; margin:0; padding-left:0 }
	  #kiefergelenk-cmd .cmd__symptoms li{ break-inside:avoid-column; margin-bottom:6px }

	  @media (max-width:900px){
		#kiefergelenk-cmd .cmd__grid{ grid-template-columns:1fr }
		#kiefergelenk-cmd .cmd__symptoms{ columns:1; display:block; padding-left:18px }
		#kiefergelenk-cmd .cmd__panel{ padding:14px; border-radius:8px }
	  }

	  .carousel__prev, .carousel__next{ position:absolute; top:auto; bottom:-7px; transform:none; background:rgba(255,255,255,0.9); border:1px solid rgba(0,0,0,0.06); width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:var(--fs-lg) }
	  .carousel__prev{ left:12px }
	  .carousel__next{ right:12px }
	  .carousel__prev:focus, .carousel__next:focus{ outline:3px solid rgba(13,148,136,0.14); }

	  /* Mobile: align arrows with dots and slightly smaller */
	  @media (max-width:600px){
		.carousel__prev, .carousel__next{ bottom:-7px; width:38px; height:38px; font-size:var(--fs-lead) }
		.carousel__prev{ left:10px }
		.carousel__next{ right:10px }
	  }

	  .carousel__dots{ display:flex; gap:10px; align-items:center; justify-content:center; margin:18px 0 }

	  @media (max-width:600px){
		.about__image{ max-width:100%; margin:18px auto; padding:22px 12px 12px; }
		.carousel__dots{ margin:14px 0 }
	  }
	  .carousel__dot{ width:10px; height:10px; background:#e5e7eb; border-radius:50%; border:none; cursor:pointer }
	  .carousel__dot.active{ background:rgb(13,148,136) }

	  /* show card text inside about — make service__more visible and static within cards */
	  .about .service__details .service__more{
		position:static;
		background:transparent;
		border:none;
		box-shadow:none;
		padding:0;
		max-height:none;
		opacity:1;
		transform:none;
		pointer-events:auto;
		text-align:center;
	  }

	  /* allow cards in the about section to size with content */
	  .about .service{ height:auto; padding:26px 18px }

	  /* For CMD section: show full text inside cards and allow cards to size with content */
	  #kiefergelenk-cmd .service__details .service__more{
		position:static;
		background:transparent;
		border:none;
		box-shadow:none;
		padding:0;
		max-height:none;
		opacity:1;
		transform:none;
		pointer-events:auto;
		text-align:left;
	  }

	  #kiefergelenk-cmd .service{ height:auto; padding:26px 18px; align-items:flex-start; text-align:left }
	  #kiefergelenk-cmd .service__title{ text-align:left }
	  #kiefergelenk-cmd .service__icon{ justify-content:flex-start }

	  @media (max-width:1024px){
		.about__content{ display:block; }
		.about .services__grid{ grid-template-columns:repeat(2,1fr); }
		.about__image{ order:2 }
		.carousel__prev, .carousel__next{ width:38px; height:38px }
	  }


	  @media (max-width:600px){
		.about .services__grid{ grid-template-columns:1fr }
		.about__lead{ font-size:var(--fs-body) }
	  }

	  /* RESPONSIVE */



	  @media (max-width:1024px){

		.services__grid{grid-template-columns:repeat(2,1fr)}

		.gallery__grid{grid-template-columns:repeat(2,1fr)}

		.contact__wrap{grid-template-columns:1fr}

	  }

	  @media (max-width:600px){

		.hero__title{font-size:2.25rem;white-space:normal;max-width:96vw;display:block;margin-left:auto;margin-right:auto;word-break:break-word;transform:none}

		.services__grid{grid-template-columns:1fr}

		.gallery__grid{grid-template-columns:1fr}

		.container{padding:0 20px}

		.hero{justify-content:center;padding-left:0}

		.hero__content{text-align:center;padding:30px;width:auto;margin-left:0}

		.footer__content{padding:24px 0}

		.footer__grid{grid-template-columns:1fr}

		/* Mobile: center all footer columns and content */
		.footer__col--info, .footer__col--nav, .footer__col--legal{ text-align:center }
		.footer__contact-list{ align-items:center }
		.footer__contact-list div, .footer__contact-list a{ text-align:center }
		.footer__bottom .container{flex-direction:column;align-items:center;gap:6px}
		.footer__links{ order:1 }
		.footer__copy{ order:2 }
		.footer__bottom .footer__bottom-links{ order:2 }
		.footer__bottom .footer__bottom-links a{ margin-left:6px }

		/* Allow the footer description spans to wrap on small screens */
		.footer__desc--nowrap, .footer__desc--line1{ white-space:normal }


		@media (max-width:900px){
		  .footer__grid{grid-template-columns:1fr}
		  .footer__col--nav .footer__nav{align-items:center}
		  .footer__col--legal{ text-align:left }
		  /* center only the legal column header on medium phones for visual balance */
		  .footer__col--legal h4{ text-align:center }
		  .footer__contact-list{ align-items:flex-start }
		  .footer__bottom .container{flex-direction:column;align-items:center;gap:6px}
		  .footer__bottom .footer__bottom-links{ order:2 }
		  .footer__links{ order:1 }
		  /* Entferne den Trennstrich zwischen Impressum und Datenschutz auf Mobilgeräten */
		  .footer__links .sep{ display:none }
		  .footer__copy{ order:2; margin-bottom:6px }
		}

		.footer__bottom .container{flex-direction:column;gap:6px;text-align:center}

		/* Ensure Kontakt column centers on small screens (override earlier rules) */
		@media (max-width:600px){
		  .footer__col--legal{ text-align:center }
		  .footer__contact-list{ align-items:center }
		  .footer__contact-list div, .footer__contact-list a{ text-align:center }
		}

		/* remove forced min-height on small screens so cards can shrink naturally */

		.service{min-height:unset}

		/* Make "Mehr Infos" buttons larger on mobile */
		.service__summary{
		  font-size:var(--fs-xs);
		  padding:10px 14px;
		  min-width:120px;
		  border-radius:8px;
		}

	  }

	  /* Desktop tweaks: make 'Mehr Infos' buttons a bit larger and keep service titles slightly bigger */
	  @media (min-width:1024px){
		.service__summary{
		  font-size:var(--fs-sm); /* slightly larger on desktop */
		  padding:10px 14px;
		  min-width:130px;
		  border-radius:8px;
		}

		/* Keep service titles a bit more prominent on larger screens */
		.service__title{
		  font-size:var(--fs-lead);
		  line-height:1.4;
		}
	  }



	  /* Floating Call Button removed per client request */

	  @media (max-width: 1150px) {
		/* Header CTA auf Mobil ausblenden */
		.header__cta {
		  display: none;
		}
	  }

	  .fade-in{opacity:0;transform:translateY(10px);transition:opacity 640ms cubic-bezier(.2,.9,.2,1),transform 640ms cubic-bezier(.2,.9,.2,1)}

	  .fade-in.in-view{opacity:1;transform:none}



	  /* Timeline styles removed (timeline section disabled) */



	  /* small tweaks */

	  .section.process{background:var(--white)}



	  /* Impressum & Datenschutz */

	  .section.legal {

		  padding: 80px 0;

		  background: var(--light-gray);

	  }

	  /* Extra spacing for legal pages (Impressum, Datenschutz) to separate headings from the fixed header */
	  .legal-section .section__title {
		margin-top: 32px;
		margin-bottom: 20px;
		position: relative;
		display: inline-block;
		padding-bottom: 0; /* no gap between text and underline */
	  }
	  /* Subtle underline (strich) like requested for Impressum / Datenschutz */
	  .legal-section .section__title::after{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: 2px;
		width: 56px;
		background: #eef2f6;
		border-radius: 2px;
	  }



	  .legal-container {

		  /* Always fit inside the viewport on small screens */
		  width: 100%;
		  max-width: 800px;
		  box-sizing: border-box;

		  margin: 40px auto;

		  background: white;

		  padding: 48px;

		  border-radius: 12px;

		  box-shadow: 0 4px 16px rgba(0,0,0,0.06);

		  /* Prevent any internal element from creating horizontal scroll */
		  overflow-x: hidden;

	  }



	  .legal-grid {

		  display: grid;

		  grid-template-columns: 1fr;

		  gap: 24px;

	  }



	  .legal-card {

		  background: white;

		  padding: 24px;

		  border-radius: 8px;

		  box-shadow: 0 2px 8px rgba(0,0,0,0.04);

		  /* Ensure long words or URLs wrap on narrow screens and don't force horizontal scrolling */
		  word-break: break-word;
		  overflow-wrap: anywhere;
		  hyphens: auto;

	  }



	  .legal-card h2 {

		  color: var(--blue-deep);

		  font-size: var(--fs-h4);

		  margin: 0 0 24px;

		  padding-bottom: 16px;

		  border-bottom: 2px solid var(--blue-primary);

	  }



	  .legal-card h3 {

		  color: var(--blue-primary);

		  font-size: var(--fs-lg);

		  margin: 32px 0 16px;

	  }



	  .legal-card p {

		  color: var(--anthracite);

		  line-height: 1.7;

		  margin: 0 0 16px;

	  }



	  .legal-card strong {

		  color: var(--blue-deep);

	  }



	  .legal-card a {

		  color: var(--blue-primary);

		  text-decoration: none;

		  transition: all 0.2s ease;

	  }



	  .legal-card a:hover {

		  color: var(--blue-deep);

		  text-decoration: underline;

	  }



	  @media (max-width: 768px) {

		  .legal-container {

			  padding: 24px;

			  /* add small lateral gutters and make container fit the viewport */
			  margin: 20px 16px;
			  width: calc(100% - 32px);

		  }



		  .legal-card {

			  padding: 20px;

		  }



		  .legal-card h2 {

			  font-size: 1.375rem;

		  }



		  .legal-card h3 {

			  font-size: var(--fs-lead);

			  margin: 24px 0 12px;

		  }

	  }


	@media (min-width:768px) and (max-width:1024px) {
	  .header__inner {
		/* Wir ändern das Grid: Logo links (auto), Nav & Rest rechts (1fr) */
		grid-template-columns: auto 1fr; 
	  }

	  .nav {
		position: static !important;
		transform: none !important;
		/* Schiebt die Nav innerhalb der 1fr Spalte ganz nach rechts */
		justify-self: end !important; 
		margin-left: auto;
		margin-right: 0;
		display: flex;
		gap: 15px; /* Etwas kompakter für iPads */
	  }

	  /* Falls der Header-CTA (Button) noch da ist, 
		 sollte er sich in die Nav einfügen oder daneben stehen */
	  .header__cta {
		justify-self: end;
		margin-left: 10px;
	  }
	}

	  /* Lightbox */

	  .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120}

	  .lightbox[aria-hidden="false"]{display:flex}

	  .lightbox__backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.6)}

	  .lightbox__panel{position:relative;z-index:2;max-width:720px;width:92%;max-height:88%;display:flex;align-items:center;justify-content:center;padding:12px}

	  .lightbox__img{max-width:100%;max-height:560px;width:100%;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 18px 48px rgba(2,6,23,0.6);background:#000}

	  .lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;background:rgba(255,255,255,0.9);border:0;padding:8px 10px;border-radius:6px;cursor:pointer}

	  .lightbox__close{top:12px;right:12px;z-index:3;background:rgba(255,255,255,0.95);border-radius:6px}

	  .lightbox__prev{left:12px;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,0.9);border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}

	  .lightbox__next{right:12px;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,0.9);border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}

	  .lightbox__close:focus,.lightbox__prev:focus,.lightbox__next:focus{outline:3px solid rgba(13,148,136,0.18)}



	  @media (max-width:600px){

		.lightbox__prev{left:8px}

		.lightbox__next{right:8px}

		.lightbox__close{top:8px;right:8px}

	  }

/* iPad Korrektur: Nav ganz rechts & Button ausblenden */
@media (min-width: 768px) and (max-width: 1180px) {
  
  /* 1. Header-Grid auf 2 Spalten: Logo (links) | Nav (rechts) */
  .header__inner {
    display: grid !important;
    grid-template-columns: auto 1fr !important; 
    gap: 0 !important;
  }

  /* 2. Den Button "Termin buchen" komplett ausblenden */
  .header__cta, 
  .header__inner .btn.btn--primary,
  .nav .btn.btn--primary {
    display: none !important;
  }

  /* 3. Die Navigation nach ganz rechts schieben */
  .nav {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    margin-left: auto !important;
    width: auto !important;
    background: transparent !important;
  }

  /* 4. Platzierung der Links optimieren */
  .nav a {
    padding: 8px 12px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  /* 5. Sicherstellen, dass kein Burger-Menü erscheint */
  .nav-toggle {
    display: none !important;
  }
}
@media (max-width:600px) {
    .hero__title {
        /* Reduzierte Größe, damit es einzeilig passt */
        font-size: 9.5vw; /* Nutzt Viewport-Width: skaliert mit der Bildschirmbreite */
        
        /* Verhindert den Umbruch */
        white-space: nowrap; 
        
        /* Falls das Handy extrem schmal ist, wird die Schrift noch kleiner skaliert */
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        transform: none;
        
        /* Optional: Etwas engerer Buchstabenabstand für die Einzeiligkeit */
        letter-spacing: -0.02em;
    }
}