*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; background: #ffffff; color: #16232C; -webkit-font-smoothing: antialiased; }
a { color: #16537A; text-decoration: none; }
a:hover { color: #0F3A56; text-decoration: underline; }

:root {
  --sda-ink: var(--ink);
  --sda-ink-soft: var(--ink-soft);
  --sda-blue: var(--blue);
  --sda-blue-deep: var(--blue-deep);
  --sda-green: #A8C611;
  --sda-gold: #A67A2A;
  --sda-cream: var(--cream);
  --sda-surface: var(--surface);
  --sda-line: var(--line);
  --sda-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .10);
  --sda-ease: cubic-bezier(.16, 1, .3, 1);
  --sda-container: 1240px;
  /* Gemeinsames Zweispalten-Raster, damit rechte Spalten sektionsübergreifend an derselben Kante beginnen. */
  --sda-split: minmax(280px, .8fr) minmax(0, 1.2fr);
  --sda-split-gap: clamp(56px, 9vw, 120px);
  --label: var(--sda-ink);
  --label-secondary: rgba(16, 39, 51, .72);
  --accent: var(--sda-blue);
  --radius-capsule: 999px;
  --duration-instant: 160ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  background: #fff;
  color: var(--sda-ink);
  overflow-x: clip;
}
::selection { background: rgba(168, 198, 17, .28); color: var(--sda-ink); }
a { text-underline-offset: .18em; }
/* WCAG 2.4.7: sichtbarer Tastaturfokus und direkter Sprung zum Hauptinhalt. */
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%); padding: 12px 18px; border-radius: 999px; background: var(--sda-ink); color: #fff; font-weight: 600; }
.skip-link:focus { transform: translateY(0); }
.site-shell { width: 100%; max-width: var(--sda-container) !important; margin-inline: auto !important; }
.hero-shell { max-width: calc(var(--sda-container) + 48px) !important; }

.btn {
  min-height: 50px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10);
  transition: transform var(--duration-instant) var(--ease-out), filter var(--duration-instant) var(--ease-out), box-shadow var(--duration-instant) var(--ease-out);
}
.btn:hover { transform: translate3d(0, -2px, 0); text-decoration: none; filter: brightness(.97); box-shadow: 0 3px 7px rgba(0,0,0,.10), 0 12px 28px rgba(0,0,0,.14); }
.btn:active { transform: scale(.97); filter: brightness(.96); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.hero {
  /* Der Hero füllt die Sichthöhe unter dem Header. Die nächste Sektion beginnt
     erst nach dem ersten Scrollen, damit sie den CTA nicht bedrängt. */
  --hero-offset: 89px;
  height: calc(100svh - var(--hero-offset));
  min-height: calc(100svh - var(--hero-offset));
  position: relative;
  overflow: hidden;
  background-color: #F8FBFA !important;
  background-image:
    linear-gradient(90deg, rgba(248,251,250,.88) 0%, rgba(248,251,250,.84) 24%, rgba(248,251,250,.68) 42%, rgba(248,251,250,.40) 58%, rgba(248,251,250,.16) 76%, rgba(248,251,250,.04) 100%),
    url("../img/hero-dental-office.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 0 !important;
}
.hero-shell {
  height: 100%;
  min-height: 0;
  display: flex !important;
  align-items: center !important;
  padding: clamp(42px, 7vh, 78px) 24px !important;
}
.hero-copy { width: min(58%, 720px); position: relative; z-index: 1; }
.hero-title {
  max-width: none;
  margin: 0 0 26px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-size: clamp(3.2rem, 5.25vw, 5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.025em;
  font-weight: 700 !important;
  font-optical-sizing: auto;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-lead {
  max-width: 39ch !important;
  margin-bottom: 34px !important;
  font-size: clamp(1.08rem, 1.5vw, 1.25rem) !important;
  line-height: 1.47 !important;
  letter-spacing: 0;
  color: var(--label-secondary) !important;
}
.hero-eyebrow, .alliance-eyebrow { margin: 0 0 20px; font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--sda-blue); animation: hero-lead-enter 680ms var(--sda-ease) both; }
.hero-eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.alliance-intro .alliance-eyebrow { margin-bottom: 20px; color: #EFD9A7; font-size: .9rem; line-height: 1.4; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-primary {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(0,0,0,.16);
}
.hero-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 34px rgba(0,0,0,.20); }
.hero-secondary {
  color: var(--accent) !important;
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(22,83,122,.28) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 24px rgba(0,0,0,.08);
}
.hero-secondary-link {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  color: var(--sda-blue-deep);
  font-size: 1.05rem;
  font-weight: 650;
  border-bottom: 1px solid rgba(13,63,96,.34);
  transition: color 160ms var(--sda-ease), border-color 160ms var(--sda-ease), transform 160ms var(--sda-ease);
}
.hero-secondary-link svg { width: 17px; height: 17px; transition: transform 220ms var(--sda-ease); }
.hero-secondary-link:hover { color: var(--sda-blue); border-color: var(--sda-blue); text-decoration: none; transform: translate3d(2px, 0, 0); }
.hero-secondary-link:hover svg { transform: translate3d(5px, 0, 0); }
.hero-secondary-link:active { transform: scale(.98); }

#main-content h2 { letter-spacing: -.025em; font-size: clamp(2rem, 3.2vw, 3.1rem) !important; }
#main-content h3 { letter-spacing: -.015em; }
.alliance-section {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 10vw, 136px) 24px;
  background: var(--sda-blue-deep);
  color: #fff;
}
.alliance-section::after {
  content: "";
  position: absolute;
  right: -14vw;
  bottom: -32vw;
  width: 58vw;
  height: 58vw;
  border: 1px solid rgba(245,239,227,.12);
  border-radius: 50%;
  pointer-events: none;
}
.alliance-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sda-split);
  gap: var(--sda-split-gap);
  align-items: center;
}
.alliance-intro h2 {
  max-width: 12ch;
  margin: 0 0 26px !important;
  color: #fff !important;
  font-size: clamp(2.55rem, 4.3vw, 4.25rem) !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}
.alliance-intro p {
  max-width: 36ch;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  line-height: 1.55;
}
.journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journey-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px clamp(28px, 4vw, 64px);
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.22);
}
.journey-step:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.journey-step h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.journey-place {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 15ch;
  padding-top: 5px;
  color: #EFD9A7;
  font-size: .95rem;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0;
}
.journey-step > p {
  grid-column: 1;
  max-width: 43ch;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 1.05rem;
  line-height: 1.55;
}

.people-section { padding: clamp(88px, 10vw, 136px) 24px; background: var(--sda-cream); }
.people-layout { display: grid; grid-template-columns: var(--sda-split); gap: var(--sda-split-gap); align-items: start; }
.person-photo { position: sticky; top: 116px; margin: 0; overflow: hidden; aspect-ratio: 4 / 4.35; border-radius: 16px; background: #E7E3DB; }
.person-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.person-copy h2 { max-width: 12ch; margin: 0 0 32px !important; font-size: clamp(2.7rem, 4.7vw, 4.7rem) !important; line-height: 1.05; text-wrap: balance; }
.person-name { margin: 0 0 6px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.person-role { margin: 0 0 28px; color: var(--sda-blue); font-weight: 650; }
.person-copy > p:not(.person-name, .person-role) { max-width: 58ch; margin: 0 0 18px; color: var(--sda-ink-soft); font-size: 1.08rem; line-height: 1.65; text-wrap: pretty; }
.person-facts { margin: 36px 0 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 26px; border-block: 1px solid rgba(16,39,51,.14); }
.person-facts dt { margin-bottom: 6px; color: var(--sda-ink); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.person-facts dd { margin: 0; color: var(--sda-ink-soft); font-size: .95rem; line-height: 1.45; }
.person-copy > a { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(22,83,122,.35); font-weight: 650; transition: gap 180ms var(--sda-ease), border-color 180ms var(--sda-ease); }
.person-copy > a::after { content: "→"; }
.nowrap { white-space: nowrap; }
.person-copy > a:hover { gap: 14px; border-color: var(--sda-blue); text-decoration: none; }

.team-profiles {
  margin-top: clamp(80px, 10vw, 136px);
}
.team-profile {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 8vw, 112px);
  align-items: center;
  padding: clamp(56px, 7vw, 92px) 0;
}
.team-profile:last-child { padding-bottom: 0; }
.team-profile-reverse { grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); }
.team-profile-reverse .team-profile-photo { order: 2; }
.team-profile-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  border-radius: 16px;
  background: #E7E3DB;
}
.team-profile-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.team-profile:first-child .team-profile-photo img { object-position: center 11%; }
.team-profile-copy { max-width: 650px; }
.team-profile-copy h3 {
  max-width: 17ch;
  margin: 0 0 12px !important;
  font-size: clamp(2rem, 3.4vw, 3.5rem) !important;
  line-height: 1.07;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
.team-profile-copy > p:not(.person-role) {
  max-width: 60ch;
  margin: 0 0 18px;
  color: var(--sda-ink-soft);
  font-size: 1.08rem;
  line-height: 1.65;
  text-wrap: pretty;
}
.team-profile-copy > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  border-bottom: 1px solid rgba(22,83,122,.35);
  font-weight: 650;
  transition: gap 180ms var(--sda-ease), border-color 180ms var(--sda-ease);
}
.team-profile-copy > a::after { content: "→"; }
.team-profile-copy > a:hover { gap: 14px; border-color: var(--sda-blue); text-decoration: none; }

.clinic-section { padding: clamp(88px, 10vw, 136px) 24px; background: #fff; }
.clinic-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(56px, 9vw, 120px); align-items: center; }
.clinic-section-biz { background: var(--sda-surface); }
.clinic-layout-biz { grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); }
.clinic-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clinic-gallery figure { margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--sda-surface); }
.clinic-gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.clinic-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; }
.clinic-gallery figure:first-child img { object-position: center 20%; }
.clinic-copy h2 { max-width: 10ch; margin: 0 0 26px !important; font-size: clamp(2.6rem, 4.3vw, 4.4rem) !important; line-height: 1.05; }
.clinic-copy > p { max-width: 39ch; margin: 0 0 30px; color: var(--sda-ink-soft); font-size: 1.12rem; line-height: 1.65; text-wrap: pretty; }
.clinic-copy a { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(22,83,122,.35); font-weight: 650; transition: gap 180ms var(--sda-ease), border-color 180ms var(--sda-ease); }
.clinic-copy a::after { content: "→"; }
.clinic-copy a:hover { gap: 14px; border-color: var(--sda-blue); text-decoration: none; }

.procedures-section { max-width: none !important; padding: clamp(76px, 8vw, 108px) 24px !important; background: #F8FAF9; }
.procedures-heading { max-width: var(--sda-container); margin: 0 auto; padding-bottom: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: var(--sda-split); gap: var(--sda-split-gap); align-items: end; border-bottom: 1px solid var(--sda-line); }
.procedures-heading h2 { max-width: 14ch; margin: 0 !important; font-size: clamp(2.6rem, 4.5vw, 4.5rem) !important; line-height: 1.06; }
.procedures-heading p { max-width: 45ch; margin: 0 0 6px !important; color: var(--sda-ink-soft); font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.58; }
.procedures-list { max-width: var(--sda-container); margin: 0 auto; }
.procedure-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: center;
  padding: clamp(48px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--sda-line);
}
.procedure-item:last-child { padding-bottom: 0; border-bottom: 0; }
.procedure-item:nth-child(even) .procedure-media { order: 2; }
.procedure-media { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 16px; background: var(--sda-surface); }
.procedure-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 700ms var(--sda-ease); }
.procedure-item:hover .procedure-media img { transform: scale(1.025); }
.procedure-copy { max-width: 490px; }
.procedure-item h3 { margin: 0 0 20px !important; font-size: clamp(2rem, 3.7vw, 3.75rem) !important; line-height: 1.06; letter-spacing: -.025em !important; }
.procedure-item h3 + p { margin: 0 0 28px !important; color: var(--sda-ink-soft); font-size: 1.08rem; line-height: 1.62; }
.procedure-link { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; font-weight: 650; }
.procedure-link::after { content: "›"; font-size: 1.35em; line-height: 1; transition: transform 180ms var(--sda-ease); }
.procedure-link:hover { text-decoration: none; }
.procedure-link:hover::after { transform: translateX(3px); }

.process-section { padding: clamp(88px, 10vw, 136px) 24px; background: #EEF4F6; }
.process-layout { display: grid; grid-template-columns: var(--sda-split); gap: var(--sda-split-gap); align-items: start; }
.process-intro { position: sticky; top: 116px; }
.process-intro h2 { max-width: 10ch; margin: 0 0 24px !important; font-size: clamp(2.7rem, 4.5vw, 4.5rem) !important; line-height: 1.05; }
.process-intro p { max-width: 36ch; margin: 0; color: var(--sda-ink-soft); font-size: 1.08rem; line-height: 1.62; }
.process-list { list-style: none; margin: 0; padding: 0; counter-reset: process; }
.process-step { counter-increment: process; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--sda-line); }
.process-step:last-child { border-bottom: 1px solid var(--sda-line); }
.process-step::before { content: counter(process, decimal-leading-zero); padding-top: 4px; color: var(--sda-blue); font-size: .8rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.process-step h3 { margin: 0 0 8px !important; font-size: clamp(1.25rem, 2vw, 1.55rem) !important; }
.process-step p { max-width: 54ch; margin: 0; color: var(--sda-ink-soft); font-size: 1.02rem; line-height: 1.6; }

/* Ruhige, inhaltlich gerichtete Bewegung. Ohne JavaScript bleibt alles sichtbar. */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition: opacity 700ms var(--sda-ease), transform 760ms var(--sda-ease);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-ready .motion-reveal[data-motion="from-left"] { transform: translate3d(-52px, 0, 0); }
.motion-ready .motion-reveal[data-motion="from-right"] { transform: translate3d(52px, 0, 0); }
.motion-ready .motion-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .motion-media {
  clip-path: inset(0 14% 0 0 round 16px);
  opacity: .35;
  transform: scale(1.035);
  transition: clip-path 840ms var(--sda-ease), opacity 620ms var(--sda-ease), transform 840ms var(--sda-ease);
}
.motion-ready .motion-media[data-motion="from-left"] { clip-path: inset(0 0 0 14% round 16px); }
.motion-ready .motion-media.is-visible { clip-path: inset(0 0 0 0 round 16px); opacity: 1; transform: scale(1); }
.hero-title span { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.motion-ready .hero-title span > i {
  display: block;
  font: inherit;
  font-style: normal;
  transform: translate3d(0, 108%, 0);
  transition: transform 720ms var(--sda-ease);
  transition-delay: var(--hero-delay, 0ms);
}
.motion-ready .hero-title.is-visible span > i { transform: translate3d(0, 0, 0); }
@keyframes hero-lead-enter {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero-lead {
  animation: hero-lead-enter 680ms var(--sda-ease) both;
  animation-delay: 280ms;
}
@keyframes hero-action-enter {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.hero-action-inner {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  animation: hero-action-enter 720ms var(--sda-ease) both;
  animation-delay: 390ms;
}
.hero-actions > a:nth-child(2) .hero-action-inner { animation-delay: 500ms; }
.person-photo img, .clinic-gallery img { transition: transform 700ms var(--sda-ease); }
.person-photo:hover img, .clinic-gallery figure:hover img { transform: scale(1.025); }

.home-cta { background: var(--sda-blue-deep); }
.home-cta-inner { max-width: calc(var(--sda-container) + 48px); margin: 0 auto; padding: 76px 24px 80px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.home-cta-inner h2 { margin: 0 0 10px; color: #fff; font-size: 1.875rem; line-height: 1.2; font-weight: 650; }
.home-cta-inner p { margin: 0; color: #F6FAFC; font-size: 1.125rem; line-height: 1.6; }
.home-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.home-cta .btn-light { background: #fff; color: var(--sda-blue); }
.home-cta .btn-outline { border: 1px solid #fff; background: transparent; color: #fff; }
.home-cta .btn { box-shadow: none; }
.home-cta .btn-light:hover { background: #E8EFF3 !important; color: #16537A !important; }
.home-cta .btn-outline:hover { background: #0F3A56 !important; color: #fff !important; }

@media (max-width: 980px) {
  .hero {
    background-image:
      linear-gradient(90deg, rgba(248,251,250,.93) 0%, rgba(248,251,250,.88) 44%, rgba(248,251,250,.64) 72%, rgba(248,251,250,.28) 100%),
      url("../img/hero-dental-office.webp") !important;
    background-position: 58% center !important;
  }
  .hero-copy { width: min(66%, 590px); }
  .alliance-layout { grid-template-columns: 1fr; }
  .alliance-intro h2 { max-width: 15ch; }
  .alliance-intro p { max-width: 48ch; }
  .people-layout, .clinic-layout, .process-layout { grid-template-columns: 1fr; gap: 44px; }
  .person-photo { position: static; max-width: 520px; }
  .team-profile, .team-profile-reverse { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: 44px; }
  .team-profile-reverse .team-profile-photo { order: 2; }
  .process-intro { position: static; }
  .clinic-copy { order: -1; max-width: 680px; }
  .clinic-section-biz .clinic-copy {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    column-gap: clamp(36px, 7vw, 72px);
    row-gap: 18px;
    align-items: start;
  }
  .clinic-section-biz .clinic-copy h2 { grid-row: 1 / span 2; margin-bottom: 0 !important; }
  .clinic-section-biz .clinic-copy > p { grid-column: 2; margin-bottom: 0; }
  .clinic-section-biz .clinic-copy > a { grid-column: 2; justify-self: start; }
  .procedure-item { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .procedure-item:nth-child(even) .procedure-media { order: 0; }
  .procedure-copy { max-width: 650px; }
  .procedures-heading { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .hero {
    /* Mobil ist der Header niedriger, der Hero bleibt dadurch genauso randgenau. */
    --hero-offset: 77px;
    background-image:
      linear-gradient(90deg, rgba(248,251,250,.94) 0%, rgba(248,251,250,.88) 66%, rgba(248,251,250,.60) 100%),
      url("../img/hero-dental-office.webp") !important;
    background-position: 63% center !important;
  }
  .hero-shell { padding: 30px 20px 34px !important; }
  .hero-copy { width: 100%; }
  .hero-title { font-size: clamp(2.35rem, 10.5vw, 2.7rem) !important; line-height: 1.04 !important; }
  .hero-lead { max-width: 31ch !important; font-size: 1.05rem !important; line-height: 1.48 !important; }
  .hero-actions { gap: 10px !important; }
  .hero-actions .btn { min-height: 48px; padding: 13px 20px !important; font-size: 1rem !important; }
  .alliance-section, .procedures-section, .process-section > div { padding-left: 20px !important; padding-right: 20px !important; }
  .journey-step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .journey-place {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    padding-top: 0;
    text-align: left;
  }
  .journey-step > p { grid-column: 1; margin-top: 4px; }
  .people-section, .clinic-section, .process-section { padding-left: 20px; padding-right: 20px; }
  .person-copy h2 { max-width: 13ch; font-size: clamp(2.45rem, 12vw, 3.2rem) !important; }
  .person-facts { grid-template-columns: 1fr; gap: 16px; }
  .person-facts div { display: flex; align-items: baseline; gap: 12px; }
  .person-facts dt { margin: 0; min-width: 5.5ch; }
  .team-profiles { margin-top: 72px; }
  .team-profile, .team-profile-reverse { grid-template-columns: 1fr; gap: 30px; padding: 52px 0; }
  .team-profile-reverse .team-profile-photo { order: 0; }
  .team-profile-photo { max-width: 520px; aspect-ratio: 4 / 4.4; }
  .team-profile-copy h3 { font-size: clamp(2rem, 9vw, 2.65rem) !important; }
  .team-profile-copy > p:not(.person-role) { font-size: 1.04rem; line-height: 1.6; }
  .clinic-layout { gap: 34px; }
  .clinic-copy h2 { max-width: 11ch; margin-bottom: 20px !important; }
  .clinic-copy > p { margin-bottom: 22px; font-size: 1.04rem; line-height: 1.58; }
  .clinic-gallery { gap: 10px; }
  .clinic-section-biz .clinic-copy { grid-template-columns: 1fr; gap: 0; }
  .clinic-section-biz .clinic-copy h2 { grid-row: auto; margin-bottom: 20px !important; }
  .clinic-section-biz .clinic-copy > p {
    grid-column: 1;
    max-width: 31ch;
    margin: 0 0 18px clamp(28px, 9vw, 44px);
  }
  .clinic-section-biz .clinic-copy > a {
    grid-column: 1;
    margin-left: clamp(28px, 9vw, 44px);
  }
  .procedure-item { padding: 44px 0; gap: 28px; }
  .procedure-copy { min-width: 0; }
  .procedure-media { border-radius: 16px; }
  .procedure-item h3 { font-size: clamp(2rem, 10vw, 2.8rem) !important; hyphens: auto; overflow-wrap: break-word; }

  .home-cta-inner { padding: 60px 20px 64px !important; }
  .home-cta-inner { flex-direction: column; align-items: center !important; gap: 28px !important; text-align: center; }
  .home-cta-inner h2 { font-size: 1.75rem !important; text-wrap: balance; }
  .home-cta-inner p { max-width: 34ch; margin-inline: auto !important; text-wrap: pretty; }
  .home-cta-inner > div:last-child { width: 100%; max-width: 340px; flex-direction: column; gap: 10px !important; }
  .home-cta-inner > div:last-child .btn { width: 100%; }
  .hero { background-image: linear-gradient(180deg, rgba(248,251,250,.72) 0%, rgba(248,251,250,.9) 45%, rgba(248,251,250,.9) 75%, rgba(248,251,250,.7) 100%), url("../img/hero-dental-office.webp") !important; }
  .hero-copy { text-align: center; }
  .hero-eyebrow { justify-content: center; margin-bottom: 14px; font-size: .8rem; }
  .hero-eyebrow::before { display: none; }
  .hero-title span { margin-inline: auto; }
  .hero-lead { margin-inline: auto !important; }
  .hero-actions { flex-direction: column; align-items: center; }
}

@media (max-width: 360px) {
  .hero-title { font-size: 2rem !important; }
  .hero-lead { font-size: .98rem !important; }
  .hero-actions .btn { padding-inline: 18px !important; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .hero-shell { padding-top: 18px !important; padding-bottom: 18px !important; }
  .hero-title { margin-bottom: 15px !important; font-size: clamp(2.35rem, 11vh, 2.65rem) !important; line-height: 1.02 !important; }
  .hero-lead { max-width: 46ch !important; margin-bottom: 18px !important; font-size: .96rem !important; line-height: 1.36 !important; }
  .hero-actions .btn { min-height: 44px; padding: 11px 20px !important; font-size: .95rem !important; }
}

/* WCAG 2.3.3: Bewegung auf Nutzerwunsch auf praktisch null reduzieren. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 80ms !important; transition-delay: 0ms !important; }
  .motion-ready .motion-reveal,
  .motion-ready .motion-media,
  .motion-ready .hero-title span > i,
  .motion-ready .hero-lead,
  .motion-ready .hero-actions,
  .motion-ready .hero-actions > a { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}