:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero {
  overflow-x: clip;
}
.tint--warm {
  background-color: color-mix(in srgb, var(--neutral-semi-light) 77%, var(--white));
}
.hero__title {
  margin: 0; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
.lede {
  max-inline-size: 60ch; margin: 0; & a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.tint--soft {
  background-color: color-mix(in srgb, var(--neutral-semi-light) 16%, var(--white));
}
.intro__title {
  margin: 0; line-height: 1.1; hyphens: auto; hyphenate-limit-chars: 10 4 4; @media (width <= 767px) { font-size: var(--h1); }
}
.slider--full {
  --slider-height: 50vh; --slider-ratio: auto; @media (width <= 478px) { --slider-height: 800px; }
}
.leistungen-grid {
  list-style: none; margin: 0; padding: var(--space-xxl) var(--space-xl) 0; display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap); inline-size: 100%;
  @media (width <= 991px) { grid-template-columns: var(--grid-2); }
  @media (width <= 767px) { grid-template-columns: var(--grid-1); padding: var(--space-xl) 0 0; }
}
.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tint--team {
  background-color: var(--neutral);
}
.accent-heading {
  margin: 0; font-family: var(--text-font-family); font-size: var(--text-m); line-height: 1.1; text-transform: uppercase; letter-spacing: 2px; text-decoration: underline; text-underline-offset: 10px;
  &.accent-heading--stacked { line-height: 2.2; margin-block-end: 25px; @media (width <= 478px) { line-height: 2.8; font-size: var(--text-xs); margin-block-end: 0; } }
}
.intro {
  display: grid; grid-template-columns: var(--grid-2); column-gap: var(--grid-gap); row-gap: var(--content-gap); align-items: start; inline-size: 100%;
  @media (width <= 767px) { grid-template-columns: var(--grid-1); gap: calc(var(--content-gap) * 0.5); }
}
.intro__main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}
.intro__aside {
  display: flex; flex-direction: column; gap: var(--content-gap); min-inline-size: 0;
}
.hero__inner {
  display: grid; grid-template-columns: var(--grid-1-2); gap: var(--grid-gap); min-block-size: 700px; inline-size: calc(100% + (100vw - 100%) / 2); align-self: flex-start;
  @media (width <= 991px) { grid-template-columns: var(--grid-1); min-block-size: 0; inline-size: 100%; }
}
.hero__content {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: var(--content-gap); max-inline-size: 35ch; animation: fade-in-up 2s both;
  @media (width <= 991px) { max-inline-size: none; }
}
.hero__media {
  display: grid; grid-template-columns: var(--grid-2); grid-template-rows: 1fr 1fr; gap: calc(var(--grid-gap) / 3);
}
.hero__figure {
  margin: 0; min-block-size: 0; animation: fade-in-up 2s var(--delay, 0s) both;
  &:first-child { grid-row: span 2; }
  @media (width <= 478px) { &:first-child { grid-column: span 2; grid-row: span 1; } }
}
.hero__img {
  display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.slider {
  position: relative; display: grid; inline-size: 100%; block-size: var(--slider-height, auto); aspect-ratio: var(--slider-ratio, 4 / 3); overflow: hidden; background-color: #e6e7e8; --duration: calc(var(--interval, 4.2s) * 3);
  &:hover:not(.is-enhanced) { & .slider__slide, & .slider__dot { animation-play-state: paused; } }
  /* JS enhancement: slides switched via .is-active, 400ms fade like Splide */
  &.is-enhanced { & .slider__slide { animation: none; opacity: 0; transition: opacity 0.4s ease; } & .slider__slide.is-active { opacity: 1; } & .slider__dot { animation: none; cursor: pointer; } }
}
.slider__slide {
  grid-area: 1 / 1; margin: 0; opacity: 0; min-block-size: 0; animation: slider-fade var(--duration) linear infinite both;
  &:first-child { opacity: 1; }
  &:nth-child(2) { animation-delay: var(--interval, 4.2s); }
  &:nth-child(3) { animation-delay: calc(var(--interval, 4.2s) * 2); }
}
.slider__img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.slider__dots {
  position: absolute; inset-block-end: 0.25em; inset-inline: 0; display: flex; justify-content: center; gap: 0; z-index: 1;
}
.slider__dot {
  display: grid; place-items: center; inline-size: 24px; block-size: 24px; padding: 0; border: 0; background: none; color: var(--white); --dot: var(--white);
  &::before { content: ''; inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background-color: var(--dot); opacity: 0.9; transition: scale 0.2s ease, background-color 0.2s ease; }
  .slider:not(.is-enhanced) &::before { animation: slider-dot var(--duration) step-end infinite both; }
  .slider:not(.is-enhanced) &:nth-child(2)::before { animation-delay: var(--interval, 4.2s); }
  .slider:not(.is-enhanced) &:nth-child(3)::before { animation-delay: calc(var(--interval, 4.2s) * 2); }
  &[aria-current='true']::before { --dot: var(--accent); scale: 1.4; }
  &:hover::before { scale: 1.4; }
  &:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
}
.leistung-karte {
  position: relative; display: flex; flex-direction: column; align-items: center; margin: 0;
}
.leistung-karte__media {
  position: relative; margin: 0; inline-size: 100%;
  &::before { content: ''; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--secondary-ultra-dark) 50%, transparent); pointer-events: none; }
}
.leistung-karte__img {
  display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.leistung-karte__link {
  color: var(--text-dark);
text-decoration: none;

&:hover { color: var(--text-dark); text-decoration: none; }
}
.leistungsgruppe {
  display: flex; flex-direction: row; column-gap: 70px; row-gap: var(--space-l); inline-size: 100%; align-items: flex-start;
  @media (width <= 767px) { flex-direction: column; }
}
.leistungsgruppe__main {
  flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-s); min-inline-size: 0; inline-size: 100%;
}
.leistungsgruppe__label {
  margin: 0; font-family: 'DM Serif Display', var(--heading-font-family); font-weight: 400; font-size: 32px; line-height: 1.2;
}
.leistungsgruppe__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-m);
}
.leistungsgruppe__aside {
  flex: 1 1 0; min-inline-size: 0; inline-size: 100%;
}
.leistungsgruppe__img {
  display: block; inline-size: 100%; block-size: auto;
}
.gruppe--werden {
  background-color: var(--accent-light);
}
.gruppe--sein {
  background-color: var(--accent-semi-light);
}
.gruppe--bleiben {
  background-color: var(--accent);
}
.akkordeon {
  interpolate-size: allow-keywords;
  &[open] .akkordeon__icon { rotate: 180deg; }
  /* Frames accordion: body height 0 -> auto, 0.3s ease-out (browsers without ::details-content open instantly) */
  &::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease-out, content-visibility 0.3s ease-out allow-discrete; }
  &[open]::details-content { block-size: auto; }
}
.akkordeon__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-block-size: 48px; padding: 0.5em 1em; cursor: pointer; list-style: none; background-color: color-mix(in srgb, var(--neutral-semi-light) 50%, var(--neutral-ultra-light)); scroll-margin-block-start: var(--space-l); transition: background-color 0.3s ease-out;
  &::-webkit-details-marker { display: none; }
  &:target { background-color: var(--neutral-semi-light); }
}
.akkordeon__title {
  margin: 0 0 0 20px; font-family: 'DM Serif Display', var(--heading-font-family); font-weight: 400; font-size: var(--h3); line-height: 1.2; letter-spacing: 1px; color: var(--text-dark);
}
.akkordeon__icon {
  flex: none; inline-size: 2rem; block-size: 2rem; transition: rotate 0.3s ease-out;
}
.akkordeon__body {
  padding: 1em; display: flex; flex-direction: column;
}
.akkordeon__text {
  margin: 0 0.75rem var(--space-m) var(--space-m); display: flex; flex-direction: column; gap: 1em;
  & p, & ul { margin: 0; } & a { text-decoration: underline; text-underline-offset: 0.2em; }
  @media (width <= 478px) { margin-inline-start: 0; }
}
.akkordeon__img {
  display: block; inline-size: calc(100% - var(--space-m)); block-size: auto; margin: 0 0 var(--space-m) var(--space-m);
  @media (width <= 478px) { inline-size: 100%; margin-inline-start: 0; }
}
.vorteile {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap); inline-size: 100%;
  @media (width <= 991px) { grid-template-columns: var(--grid-1); }
}
.vorteil {
  display: flex; flex-direction: row; gap: var(--space-s);
}
.vorteil__icon {
  flex: none; inline-size: 1.5em; block-size: 1.5em; color: var(--secondary); margin-block-start: 0.15em;
}
.vorteil__body {
  display: flex; flex-direction: column; gap: var(--space-s);
}
.vorteil__title {
  margin: 0; font-family: 'DM Serif Display', var(--heading-font-family); font-weight: 400; letter-spacing: 1px; color: var(--secondary);
}
.vorteil__text {
  margin: 0;
}
.team {
  display: flex; flex-direction: column; gap: var(--container-gap); inline-size: 100%;
}
.team__intro {
  display: flex; flex-direction: column; gap: var(--content-gap); align-items: flex-start;
}
.team__grid {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--grid-3); gap: var(--grid-gap);
  @media (width <= 991px) { grid-template-columns: var(--grid-2); }
  @media (width <= 767px) { grid-template-columns: var(--grid-1); }
}
.team-karte {
  display: flex; flex-direction: column; gap: 0;
}
.team-karte__media {
  margin: 0 0 var(--space-xs); order: -1; scroll-margin-block-start: var(--space-l);
}
.team-karte__img {
  display: block; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.team-karte__name {
  margin: 0; font-family: 'DM Serif Display', var(--heading-font-family); font-weight: 400; font-size: 18px; letter-spacing: 1px; color: var(--secondary); & strong { font-weight: 400; }
}
.team-karte__role {
  margin: 0; font-size: 14px;
}
.galerie {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 35px; inline-size: 100%;
  @media (width <= 991px) { gap: 20px; }
  @media (width <= 478px) { gap: 10px; }
}
.galerie__item {
  aspect-ratio: 1; &:nth-child(6n + 1), &:nth-child(6n + 4) { grid-column: span 2; grid-row: span 2; }
}
.galerie__trigger {
  display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.galerie__thumb {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.kontakt-block {
  display: flex; flex-direction: column; align-items: flex-start; margin: 0; & a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
}
.oeffnungszeiten {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-m); margin: 0; & dt, & dd { margin: 0; }
}
.map {
  display: block; inline-size: 100%; block-size: 400px; border: 0; background-color: var(--neutral-ultra-light);
}
.cv {
  display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: var(--grid-gap); align-items: center; inline-size: 100%;
  @media (width <= 767px) { grid-template-columns: var(--grid-1); }
}
.cv__img {
  display: block; inline-size: 100%; block-size: auto;
}
.stack {
  display: flex; flex-direction: column; gap: var(--section-space-s); inline-size: 100%;
}
.legal {
  display: grid; grid-template-columns: var(--grid-2); column-gap: var(--grid-gap); row-gap: var(--content-gap); inline-size: 100%;
  @media (width <= 767px) { grid-template-columns: var(--grid-1); }
}
.legal__col {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1em; min-inline-size: 0;
  & p { margin: 0; } & a { text-decoration: underline; text-underline-offset: 0.2em; }
  & h2, & h3 { font-family: var(--text-font-family); font-size: var(--text-m); font-weight: 700; line-height: 1.5; letter-spacing: normal; margin: 1em 0 0; }
  & .accent-heading { margin-block-end: 0; }
}
.site-header {
  padding-block: var(--space-m); background-color: color-mix(in srgb, var(--neutral-semi-light) 16%, var(--white));
}
.site-header__inner {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-m);
}
.site-header__logo {
  display: block; inline-size: clamp(7.5rem, 14vw, 11.25rem); flex: none;
}
.site-header__logo-img {
  display: block; inline-size: 100%; block-size: auto;
}
.site-nav {
  font-size: 15px; font-weight: 700; letter-spacing: 0.3px; @media (width <= 767px) { display: none; }
}
.site-nav__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--content-gap);
}
.site-nav__link {
  display: block; padding-block: 0.75em; line-height: 1; color: var(--primary); text-decoration: none; &:hover { color: var(--primary); }
}
.site-nav__toggle {
  display: none; padding: 0.5em; border: 0; background: none; color: var(--black); cursor: pointer;
  & svg { display: block; inline-size: 1.75rem; block-size: 1.75rem; }
  @media (width <= 767px) { display: grid; place-items: center; }
}
.mobile-nav {
  inset: 0 auto 0 0;
inline-size: min(400px, 100vw);
block-size: 100dvh;
max-block-size: none;
margin: 0;
padding: var(--space-xl) var(--space-l);
border: 0;
background-color: var(--neutral);
color: var(--black);
font-weight: 700;
letter-spacing: 0.3px;

&:popover-open { display: flex; flex-direction: column; justify-content: flex-start; }
&::backdrop { background-color: color-mix(in srgb, var(--neutral-dark) 16%, transparent); }

@media (width <= 478px) {
  inline-size: 100vw;
  &:popover-open { justify-content: center; }
}
}
.mobile-nav__list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start;
}
.mobile-nav__link {
  display: block; padding-block-start: 10px; line-height: 60px; color: inherit; text-decoration: none; &:hover, &:focus-visible { color: inherit; text-decoration: underline; }
}
.mobile-nav__close {
  position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s); display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  & svg { inline-size: 1.75rem; block-size: 1.75rem; } &:focus-visible { outline: 2px solid currentColor; }
}
.site-footer {
  display: block; padding: 0; /* ACSS pads body > footer like a section */
}
.site-footer__main {
  background-color: var(--accent-hover); padding-block: 45px; padding-inline: var(--gutter);
  @media (width <= 991px) { padding-block: 33px; } @media (width <= 767px) { padding-block: 25px; } @media (width <= 478px) { padding-block: 22px; }
}
.site-footer__grid {
  display: grid; grid-template-columns: var(--grid-2-3); gap: var(--space-xxl); inline-size: 100%; align-items: stretch; @media (width <= 991px) { grid-template-columns: var(--grid-1); }
}
.site-footer__address {
  display: flex; flex-direction: column; font-style: normal; font-size: 14px; & p { margin: 0; } & a { color: var(--text-dark); }
}
.site-footer__name {
  margin: 0 0 var(--content-gap); font-weight: 700;
}
.site-footer__nav {
  display: grid; grid-template-columns: var(--grid-2); gap: var(--space-l); align-items: stretch; @media (width <= 991px) { grid-template-columns: var(--grid-1); }
}
.site-footer__hours {
  margin: 0; font-size: 13px; display: flex; flex-direction: column; & dt { font-weight: 700; } & dd { margin: 0; }
}
.site-footer__links {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; & a { color: var(--text-dark); text-decoration: none; } & a:hover { text-decoration: underline; }
}
.site-subfooter {
  background-color: var(--accent-semi-light); padding-block: var(--space-s); padding-inline: var(--gutter); font-size: 12px; & p { margin: 0; }
}
.karte {
  position: relative; inline-size: 100%; block-size: 400px; background-color: var(--neutral-ultra-light); &.is-loaded .karte__notice { display: none; }
}
.karte__notice {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-s); padding: var(--space-l); text-align: center; background-color: var(--neutral-ultra-light);
}
.karte__text {
  max-inline-size: 36rem; margin: 0; & a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.karte__status {
  margin: 0; min-block-size: 1.5em; font-size: var(--text-s);
}
.karte__canvas {
  position: absolute; inset: 0;
}
.clickable-parent {
  position: static;

&::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

&:focus-visible { outline: none; }

&:focus-visible::after {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
}
.leistung-karte__label {
  position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 0.5em 1em;
font-family: 'DM Serif Display', var(--heading-font-family);
font-size: 20px;
letter-spacing: 0.5px;
background-color: var(--label-bg, var(--accent));
}