/* =========================================================
   Affolter Dental — Basis-Styles & Komponenten
   ---------------------------------------------------------
   Nutzt ausschliesslich Tokens aus tokens.css.
   Komponenten: .btn, .eyebrow, .rule-gold, .card,
   .service-card, .site-header, .notice-bar, .hero,
   .section, .split, .info-grid, .site-footer
   ========================================================= */

/* ---------- Basis ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; }

/* Guard gegen horizontales Scrollen/Auszoomen auf Mobilgeräten:
   clip statt hidden, damit der Sticky-Header funktioniert. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); }

/* height: auto sorgt dafür, dass width/height-Attribute nur das
   Seitenverhältnis vorgeben (gegen Layout-Shift) und keine feste
   Pixelhöhe erzwingen. */
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-30), 5.5vw, var(--fs-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-24), 4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
}

p { margin: 0 0 1em; }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--duration-fast) ease;
}
a:hover { color: var(--fg-link-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Layout-Container ---------- */

.container         { max-width: var(--container-default); margin-inline: auto; }
.container--wide   { max-width: var(--container-wide); }
.container--content { max-width: var(--container-content); }

/* ---------- Eyebrow (Micro-Label) ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* ---------- Goldene Signatur-Linie ---------- */

.rule-gold {
  display: block;
  width: var(--rule-width);
  height: 1px;
  background: var(--divider-gold);
  border: 0;
  margin: var(--space-4) 0;
}
.rule-gold--center { margin-inline: auto; }
.rule-gold--sm     { width: var(--rule-width-sm); }
.rule-gold--wide   { width: var(--rule-width-wide); }

/* Micro-Label — kleines Gold-Label über Werten (Karten, Footer, Info-Raster) */
.micro-label {
  font-family: var(--font-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ad-sand-500);
  margin-bottom: var(--space-2);
}
.micro-label--deep { color: var(--ad-sand-700); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition:
    transform var(--duration-base) var(--ease-brand),
    box-shadow var(--duration-base) var(--ease-brand),
    filter var(--duration-base) ease,
    background var(--duration-base) ease,
    color var(--duration-base) ease,
    border-color var(--duration-base) ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
  filter: brightness(1.08);
}
.btn:active { transform: translateY(0); }

.btn--sm {
  font-size: var(--fs-13);
  padding: var(--space-2) var(--space-5);
}

.btn--primary {
  background: var(--ad-blue-700);
  color: var(--fg-on-brand);
  border-color: var(--ad-blue-700);
}
.btn--primary:hover { background: var(--ad-blue-600); border-color: var(--ad-blue-600); color: var(--fg-on-brand); }

.btn--secondary {
  background: transparent;
  color: var(--ad-blue-700);
  border-color: var(--ad-blue-700);
}
.btn--secondary:hover { background: var(--ad-blue-100); color: var(--ad-blue-700); }

.btn--gold {
  background: var(--ad-sand-500);
  color: var(--ad-blue-900);
  border-color: var(--ad-sand-500);
}
.btn--gold:hover { background: var(--ad-sand-400); border-color: var(--ad-sand-400); color: var(--ad-blue-900); }

.btn--ghost-on-dark {
  background: transparent;
  color: var(--fg-on-dark-1);
  border-color: var(--border-ghost);
}
.btn--ghost-on-dark:hover { border-color: var(--ad-sand-500); color: var(--ad-sand-500); }

/* Button-Zeile — zentrierte CTA-Buttons nebeneinander */
.btn-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* Pill-Links — Anker-Chips im Seitenkopf (Ratgeber) */
.pill-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-7);
}
.pill-link {
  border-bottom: none;
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-on-dark-1);
  border: 1px solid var(--border-ghost);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.pill-link:hover { border-color: var(--ad-sand-500); color: var(--ad-sand-500); }

/* ---------- Karten ---------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    transform var(--duration-slow) var(--ease-brand),
    box-shadow var(--duration-slow) var(--ease-brand),
    border-color var(--duration-slow) ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--ad-sand-500);
}
.service-card__icon {
  width: var(--space-11);
  height: var(--space-11);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ad-blue-700);
  color: var(--ad-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ad-blue-800);
  margin-top: var(--space-2);
  overflow-wrap: break-word;
  hyphens: auto;
}
.service-card__desc {
  font-size: var(--fs-14);
  color: var(--fg-2);
  line-height: var(--lh-body);
}

/* Horizontale Leistungs-Karte (Leistungen-Übersicht) */
.service-card--row {
  flex-direction: row;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6) var(--space-7);
}
.service-card--row .service-card__title { margin-top: 0; margin-bottom: var(--space-2); }

/* Grosszügige Karte (Vergleichs-Karten im Ratgeber) */
.card--pad-lg { padding: var(--space-8); }
.card__kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13);
  color: var(--ad-sand-600);
  margin: var(--space-2) 0 var(--space-4);
}

/* Punkt-Liste mit Sand-Aufzählungszeichen */
.dot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.dot-list > div { display: flex; gap: var(--space-3); }
.dot-list > div::before { content: "·"; color: var(--ad-sand-600); }

/* Team-Karte */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.team-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.team-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
/* Foto-Rahmen: baut den Sand-Hintergrund der Comic-Porträts in CSS nach
   (Creme-Fläche, Sand-Band unten, Halo-Kreis, Zahn-Logo oben links);
   das freigestellte Personenfoto (WebP/PNG mit Alpha) liegt darüber. */
.team-card__figure {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 36% 29% at 50% 43%, var(--halo-sand) 0 99%, transparent 100%),
    linear-gradient(to top, var(--ad-sand-200) 0 22%, transparent 22%),
    var(--ad-sand-100);
}
.team-card__figure .team-card__img { position: relative; }
.team-card__tooth {
  position: absolute;
  top: 6%;
  left: 7.5%;
  width: 9%;
  height: auto;
  z-index: 1; /* Logo bleibt auch über vollflächigen Fotos sichtbar */
}
.team-card__body { padding: var(--space-5) var(--space-5) var(--space-6); }
.team-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ad-blue-800);
  overflow-wrap: break-word;
  hyphens: auto;
}
.team-card__body .rule-gold { margin: var(--space-2) 0 var(--space-3); }
.team-card__role {
  font-size: var(--fs-13);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ad-sand-700);
  margin-bottom: var(--space-2);
}
.team-card__bio {
  font-size: var(--fs-14);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ad-white);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 var(--space-8);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-header__logo { border-bottom: none; display: flex; align-items: center; }
.site-header__logo img { height: var(--space-11); width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.site-nav__link {
  border-bottom: none;
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ad-grey-700);
}
.site-nav__link:hover { color: var(--ad-blue-600); }
.site-nav__link--active {
  font-weight: var(--fw-bold);
  color: var(--ad-blue-700);
  border-bottom: var(--rule-gold-thick);
  padding-bottom: var(--space-1);
}

.nav-toggle { display: none; }
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--tap-target);
  height: var(--tap-target);
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.nav-burger span {
  display: block;
  width: var(--space-6);
  height: 2.5px;
  background: var(--ad-blue-700);
  border-radius: var(--radius-sm);
}

/* ---------- Notfall-Hinweisleiste ---------- */

.notice-bar {
  background: var(--ad-sand-100);
  border-bottom: 1px solid var(--ad-sand-200);
  text-align: center;
  padding: var(--space-2) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  color: var(--ad-blue-800);
}
.notice-bar a {
  font-weight: var(--fw-bold);
  color: var(--ad-blue-700);
}

/* ---------- Sektionen ---------- */

.section { padding: var(--space-24) var(--space-8); }
.section--page  { background: var(--surface-page); }
.section--white { background: var(--ad-white); }
.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--fg-on-dark-1);
}
.section--md      { padding-block: var(--space-20); }        /* Unterseiten-Sektionen */
.section--article { padding-block: var(--space-22); }        /* Ratgeber-Artikel */
.section--cta     { padding-block: var(--space-18); text-align: center; }
.section--cta h2  { margin-top: var(--space-2); color: var(--ad-blue-800); }
.section--cta.section--dark h2 { color: var(--fg-on-dark-1); }
.section--cta .rule-gold { margin: var(--space-4) auto; }
.section--cta__note { color: var(--fg-on-dark-body); margin: var(--space-2) 0 0; }
.section--bordered { border-top: 1px solid var(--border-subtle); }
.section--no-top  { padding-top: 0; }

/* Seitenkopf — dunkler, linksbündiger Kopf der Unterseiten */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--fg-on-dark-1);
  padding: var(--space-20) var(--space-8);
}
.page-head__inner {
  position: relative;
  max-width: var(--container-content);
  margin-inline: auto;
}
.page-head h1 {
  margin-top: var(--space-3);
  color: var(--fg-on-dark-1);
}
.page-head .rule-gold { margin-block: var(--space-4); }
.page-head__lede {
  font-size: var(--fs-18);
  color: var(--fg-on-dark-body);
  max-width: var(--measure-page-lede);
  margin: var(--space-2) 0 0;
}

.section-head { text-align: center; margin-bottom: var(--space-12); }
.section-head h2 { margin-top: var(--space-3); color: var(--ad-blue-800); }
.section--dark .section-head h2 { color: var(--fg-on-dark-1); }
.section-head .rule-gold { margin-block: var(--space-4); }
.section-head__intro {
  max-width: var(--measure-intro);
  margin: var(--space-2) auto 0;
  color: var(--fg-2);
}

/* Dekorativer Zahn im Hintergrund dunkler Sektionen —
   bewusst übergross und von den Sektionen (overflow: hidden)
   beschnitten; max-width: none hält ihn auf Mobil zentriert. */
.tooth-deco {
  position: absolute;
  pointer-events: none;
  max-width: none;
}
.tooth-deco--hero {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  filter: blur(10px);
  opacity: 0.14;
}
.tooth-deco--corner {
  right: -80px;
  bottom: -100px;
  width: 460px;
  filter: blur(9px);
  opacity: 0.10;
}
.tooth-deco--side {
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  filter: blur(9px);
  opacity: 0.12;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  background: var(--surface-dark);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-38) var(--space-8);
  color: var(--fg-on-dark-1);
  text-align: center;
}
.hero__inner h1 {
  margin: var(--space-4) auto 0;
  color: var(--fg-on-dark-1);
  max-width: var(--measure-heading);
}
.hero__inner .rule-gold { margin: var(--space-7) auto; }
.hero__lede {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-on-dark-lede);
  max-width: var(--measure-lede);
  margin: 0 auto var(--space-7);
}
.hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Leistungen-Raster ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.services-grid--two { grid-template-columns: repeat(2, 1fr); }
.section__cta { text-align: center; margin-top: var(--space-10); }

/* ---------- Artikel (Ratgeber, Rechtliches) ---------- */

.article { max-width: var(--container-article); margin-inline: auto; }
.article--wide   { max-width: var(--container-article-wide); }
.article--narrow { max-width: var(--container-prose); }
.article h1 {
  margin-top: var(--space-3);
  color: var(--ad-blue-800);
  font-size: clamp(var(--fs-30), 7vw, var(--fs-48));
}
.article h2 { margin-top: var(--space-3); color: var(--ad-blue-800); }
.article .rule-gold { margin: var(--space-4) 0 var(--space-6); }
.article__text {
  font-size: var(--fs-16);
  line-height: var(--lh-open);
  color: var(--fg-2);
}
p.article__text { margin-bottom: var(--space-6); }
.article__text--intro { margin-bottom: var(--space-9); }
.article__text--after { margin: var(--space-6) 0 0; }

/* Fliesstext-Blöcke (Impressum, Datenschutz) */
.prose {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.prose h5 { margin: 0 0 var(--space-2); color: var(--ad-blue-800); }
.prose p:first-child { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }
.prose__date { font-size: var(--fs-14); color: var(--fg-3); }

/* Medien-Karte — gerahmtes Bild/Diagramm im Artikel */
.media-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ad-white);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-10);
}
.media-card img { width: 100%; display: block; }

/* ---------- Schritt-Liste (Implantat-Ablauf) ---------- */

.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--space-6); }
.step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.step__badge {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--ad-blue-700);
  color: var(--fg-on-brand);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__line {
  width: 1px;
  flex: 1;
  background: var(--divider-gold);
  margin: var(--space-2) 0;
}
.step__body { padding-bottom: var(--space-9); }
.step__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ad-blue-800);
  padding-top: var(--space-3);
}
.step__text {
  font-size: var(--fs-15);
  line-height: var(--lh-open);
  color: var(--fg-2);
  margin-top: var(--space-2);
  max-width: var(--measure-article);
}

/* ---------- Hinweis-Box (Sand-Creme) ---------- */

.note-box {
  background: var(--ad-sand-100);
  border: 1px solid var(--ad-sand-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.note-box__icon { flex-shrink: 0; margin-top: var(--space-1); color: var(--ad-sand-700); }
.note-box__text {
  font-size: var(--fs-14);
  line-height: var(--lh-open);
  color: var(--fg-1);
}

/* ---------- Vergleichs-Raster (2 Karten) ---------- */

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.compare-grid .service-card__icon {
  width: var(--space-12);
  height: var(--space-12);
  margin-bottom: var(--space-4);
}

/* ---------- Formel-Band (Taxpunktwert) ---------- */

.formula-band {
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-block: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  text-align: center;
}
.formula-band__term {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--fg-on-dark-1);
}
.formula-band__term--gold { color: var(--ad-sand-500); }
.formula-band__sub {
  font-size: var(--fs-12);
  color: var(--fg-on-dark-2);
  margin-top: var(--space-1);
}
.formula-band__op {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  color: var(--ad-sand-500);
}

/* ---------- FAQ (native details/summary, ohne JS) ---------- */

.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq { overflow: hidden; padding: 0; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  transition: background var(--duration-fast) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface-page); }
.faq__q {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  letter-spacing: var(--tracking-wide);
  color: var(--ad-blue-800);
}
.faq__mark {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  color: var(--ad-sand-600);
  flex-shrink: 0;
  width: var(--space-5);
  text-align: center;
}
.faq__mark::before { content: "+"; }
.faq[open] .faq__mark::before { content: "–"; }
.faq__a {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--fs-15);
  line-height: var(--lh-open);
  color: var(--fg-2);
  max-width: var(--measure-answer);
}

/* ---------- Formular (Meldeformular, Netlify Forms) ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.form-grid__full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ad-blue-800);
}
.field {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: var(--space-3) var(--space-4);
  background: var(--ad-white);
  color: var(--fg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.field:focus {
  outline: none;
  border-color: var(--ad-blue-700);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
textarea.field { resize: vertical; min-height: var(--space-32); }
.field-hint {
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  color: var(--fg-3);
  margin: 0;
}
.consent-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--ad-blue-700);
}
.form-hp { display: none; }

/* ---------- Kontakt-Seite ---------- */

.contact-grid {
  max-width: var(--container-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  align-items: start;
}
.contact-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.card--contact { padding: var(--space-7); }
.card--contact .micro-label { margin-bottom: var(--space-3); }
.card__value { font-size: var(--fs-16); line-height: var(--lh-open); color: var(--fg-1); overflow-wrap: break-word; }
.card__value--links { line-height: var(--lh-loose); }
.card__value a { color: var(--ad-blue-700); }
.card__value a.strong { font-weight: var(--fw-semibold); }
.hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-6);
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.map-frame {
  width: 100%;
  height: var(--map-height);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: block;
}
.caption-text { font-size: var(--fs-13); color: var(--fg-3); margin: var(--space-3) 0 0; }

/* Breites Bild (Teamfoto) */
.img-wide {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
.img-wide + .caption-text { text-align: center; }

/* ---------- Zweispaltige Split-Sektionen ---------- */

.split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--container-default);
  margin-inline: auto;
}
.split--besuch { grid-template-columns: 1fr 1.1fr; }
.split h2 { margin-top: var(--space-3); }
.split figure { margin: 0; }
.split__img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}
.split__img--portrait  { aspect-ratio: 4 / 5; }
.split__img--landscape { aspect-ratio: 5 / 4; }
.split__body {
  font-size: var(--fs-17);
  line-height: var(--lh-open);
  margin: var(--space-6) 0 0;
}
.section--dark .split__body { color: var(--fg-on-dark-body); }
.section--white .split__body { color: var(--fg-2); margin-top: var(--space-4); }
.split__cta { margin-top: var(--space-7); }

/* ---------- Info-Raster (Adresse, Zeiten, Kontakt) ---------- */

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.info-grid__label {
  font-family: var(--font-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ad-sand-500);
  margin-bottom: var(--space-2);
}
.info-grid__value {
  font-size: var(--fs-15);
  line-height: var(--lh-open);
  color: var(--fg-1);
}
.info-grid__value a { color: var(--ad-blue-700); }

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

.site-footer {
  background: var(--surface-darker);
  color: var(--fg-on-dark-2);
  padding: var(--space-16) var(--space-8) var(--space-8);
}
.site-footer__grid {
  max-width: var(--container-default);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-12);
}
.site-footer__logo { height: var(--space-10); width: auto; display: block; margin-bottom: var(--space-4); }
.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-17);
  color: var(--ad-sand-500);
}
.site-footer__note {
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  color: var(--fg-on-dark-2);
  margin-top: var(--space-6);
}
.site-footer__label {
  font-family: var(--font-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ad-sand-500);
  margin-bottom: var(--space-3);
}
.site-footer__text { font-size: var(--fs-14); line-height: var(--lh-loose); }
.site-footer__text a {
  color: var(--fg-on-dark-1);
  border-bottom-color: var(--border-link-on-dark);
}
.site-footer__text a:hover { color: var(--ad-sand-500); }
.site-footer__bottom {
  max-width: var(--container-default);
  margin: var(--space-12) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-12);
  color: var(--fg-on-dark-3);
}
.site-footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__links a { color: var(--fg-on-dark-3); border-bottom: none; }
.site-footer__links a:hover { color: var(--fg-on-dark-1); }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    row-gap: var(--space-2);
  }
  .site-nav { flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
}

@media (max-width: 767px) {
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .nav-toggle:checked ~ .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-1);
    padding: var(--space-1) 0 var(--space-4);
  }
  .nav-toggle:checked ~ .site-nav .site-nav__link {
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
    border-bottom: none;
  }
  .site-header__logo img { height: var(--space-8); }

  .section { padding: var(--space-12) var(--space-5); }
  .hero__inner { padding: var(--space-20) var(--space-5); }
  .hero { min-height: 0; }
  .hero__lede { font-size: var(--fs-16); }

  .form-grid,
  .services-grid,
  .services-grid--two,
  .split,
  .split--besuch,
  .team-grid,
  .compare-grid,
  .contact-grid,
  .site-footer__grid { grid-template-columns: 1fr; }
  .split { gap: var(--space-8); }
  .site-footer { padding: var(--space-12) var(--space-5) var(--space-6); }

  .page-head { padding: var(--space-12) var(--space-5); }
  .map-frame { height: var(--map-height-sm); }
  .img-wide { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
  .section { padding: var(--space-11) var(--space-4); }
  .hero__inner { padding: var(--space-14) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .service-card { transition: none; }
  .btn:hover, .service-card:hover { transform: none; }
}