/* =============================================================
   Dental Aesthetics · Dr. medic Moldovan
   Shared Design System für alle Unterseiten
   ============================================================= */

:root {
  --anthrazit: #1a2332;
  --anthrazit-dark: #0d1521;
  --anthrazit-soft: #2c3a52;
  --gold: #b89968;
  --gold-dark: #86693d;
  --gold-soft: #d4bd95;
  --gold-pale: #f0e8d8;
  --cream: #faf8f5;
  --cream-dark: #f0ebe0;
  --white: #ffffff;
  --text: #1a2332;
  --text-soft: #4a5468;
  --muted: #8a8474;
  --border: #e2dcd1;
  --success: #5b8a5b;
  --shadow-sm: 0 2px 8px rgba(26, 35, 50, 0.06);
  --shadow-md: 0 8px 28px rgba(26, 35, 50, 0.10);
  --shadow-lg: 0 20px 60px rgba(26, 35, 50, 0.18);
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* --- TYPOGRAFIE --- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.005em; line-height: 1.2; color: var(--anthrazit); }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; }
p { color: var(--text-soft); margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25rem; color: var(--text-soft); margin-bottom: 1rem; }
li { margin-bottom: 0.4rem; }
strong { color: var(--anthrazit); font-weight: 600; }
em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
  display: inline-block;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 30px; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 12px;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }

.section-head { text-align: center; margin-bottom: 4rem; }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { max-width: 640px; margin: 0 auto; color: var(--text-soft); font-size: 1.05rem; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: var(--anthrazit); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-dark { background: var(--anthrazit); color: var(--white); border-color: var(--anthrazit); }
.btn-dark:hover { background: var(--anthrazit-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { color: var(--anthrazit); border-color: var(--anthrazit); }
.btn-ghost:hover { background: var(--anthrazit); color: var(--white); }

/* --- HEADER — einheitlich auf allen Seiten ---
   Vorlage ist der Header der Startseite (index.html, dort inline).
   Derselbe Block steht inline in impressum.html und datenschutz.html,
   die styles.css nicht laden. Änderungen an allen vier Stellen nachziehen.
   Oben liegt der Header durchsichtig auf dem dunklen Seitenkopf
   (.hero-visible), nach dem Scrollen wird er hell (.scrolled). */
#siteHeader {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  padding: 20px 0;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#siteHeader.scrolled {
  background: rgba(250, 248, 245, 0.97);
  border-bottom-color: var(--border);
  padding: 12px 0;
  box-shadow: 0 2px 12px rgba(26,35,50,0.05);
}
#siteHeader.hero-visible {
  background: transparent;
  border-bottom: none;
  padding: 26px 0;
}
/* Zeilenhöhe wie auf der Startseite (body dort 1.65), damit die Höhen exakt gleich sind */
#siteHeader { line-height: 1.65; }
#siteHeader a { text-decoration: none; }
#siteHeader .header-inner {
  max-width: 1600px; margin: 0 auto; padding: 0 clamp(1.5rem, 3vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
#siteHeader .logo { display: flex; align-items: center; gap: 16px; color: inherit; }
#siteHeader .logo-mark { width: 46px; height: auto; flex-shrink: 0; display: block; }
#siteHeader .logo-text { white-space: nowrap; }
#siteHeader .logo-text .name {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--anthrazit);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#siteHeader .logo-text .name strong { font-weight: 600; color: inherit; }
#siteHeader .logo-text .sub {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 6px;
  opacity: 1;
}
#siteHeader.hero-visible .logo-text .name,
#siteHeader.hero-visible nav.primary a {
  color: var(--white, #ffffff);
  text-shadow: 0 1px 12px rgba(13,21,33,0.55), 0 1px 3px rgba(13,21,33,0.4);
}
#siteHeader.hero-visible .logo-text .sub {
  color: var(--gold-soft);
  text-shadow: 0 1px 10px rgba(13,21,33,0.6), 0 1px 3px rgba(13,21,33,0.5);
}

#siteHeader nav.primary { display: flex; align-items: center; gap: 0.3rem; }
#siteHeader nav.primary a {
  color: var(--anthrazit);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 9px 8px;
  border-radius: 2px;
}
#siteHeader nav.primary a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(-50%);
}
#siteHeader nav.primary a:hover,
#siteHeader nav.primary a:focus-visible {
  color: var(--gold-dark);
  background: rgba(184,153,104,0.12);
}
#siteHeader nav.primary a.active { color: var(--gold-dark); }
#siteHeader nav.primary a:hover::after,
#siteHeader nav.primary a:focus-visible::after,
#siteHeader nav.primary a.active::after { width: calc(100% - 16px); }
#siteHeader nav.primary a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#siteHeader.hero-visible nav.primary a:hover,
#siteHeader.hero-visible nav.primary a:focus-visible {
  color: var(--gold-soft);
  background: rgba(255,255,255,0.14);
}
#siteHeader.hero-visible nav.primary a.active { color: var(--gold-soft); }
#siteHeader.hero-visible nav.primary a::after { background: var(--gold-soft); }

#siteHeader .header-cta { display: flex; align-items: center; gap: 14px; }
#siteHeader .header-cta .btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  border-radius: 0; border: 1px solid var(--anthrazit);
  background: transparent; color: var(--anthrazit);
  white-space: nowrap; position: relative; overflow: hidden;
  transform: none; box-shadow: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#siteHeader .header-cta .btn:hover { background: var(--anthrazit); color: var(--white, #ffffff); }
#siteHeader .header-cta .btn::after {
  content: "→";
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#siteHeader .header-cta .btn:hover::after { transform: translateX(4px); }
/* Termin-Button über dem dunklen Seitenkopf: heller Outline statt Anthrazit */
#siteHeader.hero-visible .header-cta .btn {
  color: var(--white, #ffffff);
  border-color: rgba(255,255,255,0.65);
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.06);
}
#siteHeader.hero-visible .header-cta .btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--anthrazit);
}
#siteHeader .mobile-toggle {
  display: none; width: 44px; height: 44px;
  color: var(--anthrazit); font-size: 1.6rem; font-family: inherit;
  align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
}
#siteHeader.hero-visible .mobile-toggle { color: var(--white, #ffffff); }

/* Alle 8 Menüpunkte passen ab 1381 px, darunter Burger-Menü. Der Termin-Knopf
   bleibt bis 981 px sichtbar; darunter übernimmt die Kontaktleiste. */
@media (max-width: 1380px) {
  #siteHeader nav.primary { display: none; }
  #siteHeader .mobile-toggle { display: flex; }
  #siteHeader nav.primary.open {
    display: flex; flex-direction: column;
    position: fixed; top: 68px; left: 0; right: 0;
    background: var(--cream);
    padding: 2rem; gap: 1.5rem;
    box-shadow: 0 12px 40px rgba(26,35,50,0.10);
    border-bottom: 1px solid var(--border);
  }
  #siteHeader.hero-visible nav.primary.open a { color: var(--anthrazit); }
  #siteHeader nav.primary.open a { font-size: 0.95rem; letter-spacing: 0.1em; }
}
@media (max-width: 980px) {
  #siteHeader .header-cta .btn { display: none; }
}
@media (max-width: 600px) {
  /* Der Schriftzug im Header ist bei 375px sonst allein 314px breit. */
  #siteHeader .header-inner { gap: 0.85rem; }
  #siteHeader .logo { gap: 11px; min-width: 0; }
  #siteHeader .logo-text { white-space: normal; min-width: 0; }
  #siteHeader .logo-text .name { font-size: 0.88rem; letter-spacing: 0.17em; }
  #siteHeader .logo-text .sub { letter-spacing: 0.1em; }
}
/* Namenszusatz auf schmalen Displays einzeilig halten */
@media (max-width: 440px) {
  #siteHeader .logo-text .sub { letter-spacing: 0.02em; font-size: 0.6875rem; white-space: nowrap; }
}

/* Logo-Grundstil – gilt für den Footer; der Header überschreibt ihn oben */
.logo { display: flex; align-items: center; gap: 14px; color: var(--white); }
.logo-mark { width: 50px; height: 34px; flex-shrink: 0; color: var(--white); }
.footer-brand .logo-mark { width: 46px; height: auto; display: block; } /* Monogramm-PNG wie auf der Startseite */
.logo-text { white-space: nowrap; }
.logo-text .name { font-family: var(--sans); font-size: 1.1rem; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }
.logo-text .name strong { font-weight: 600; color: var(--gold-soft); }
.logo-text .sub { font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); margin-top: 5px; opacity: 0.85; }

/* --- HERO (Unterseiten) --- */
.hero-page {
  position: relative;
  background: linear-gradient(135deg, var(--anthrazit) 0%, var(--anthrazit-dark) 100%);
  color: var(--white);
  padding: 12rem 0 5rem;
  overflow: hidden;
}
.hero-page::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  opacity: 0.12;
}
.hero-page::after {
  content: "";
  position: absolute;
  bottom: -200px; left: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 70%);
  opacity: 0.06;
}
.hero-page .container { position: relative; z-index: 2; }
.hero-page .eyebrow { color: var(--gold-soft); }
.hero-page .eyebrow::before { background: var(--gold-soft); }
.hero-page h1 { color: var(--white); margin-bottom: 1.25rem; max-width: 800px; }
.hero-page h1 em { font-style: italic; color: var(--gold-soft); font-weight: 400; }
.hero-page .lead { color: rgba(255,255,255,0.82); font-size: 1.1rem; max-width: 640px; line-height: 1.7; }
/* Hinweis zur laufenden Schliesszeit (assets/oeffnungszeiten.js, nur waehrend der Schliesszeit) */
.ferien-hinweis {
  position: relative; max-width: 640px; margin-top: 1.5rem; padding: 0.9rem 1.15rem;
  border: 1px solid rgba(212,189,149,0.55); border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--white); font-size: 0.92rem; line-height: 1.55;
}
.ferien-hinweis strong {
  display: block; margin-bottom: 0.3rem; color: var(--gold-soft);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
/* Termin-Knoepfe im Seitenkopf der Unterseiten; waehrend des Ferienhinweises
   uebernimmt dieser die Rueckruf-Zeile */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2rem; }
.hero-cta-hinweis { margin-top: 0.9rem; color: rgba(255,255,255,0.7); font-size: 0.88rem; }
.hero-page .container:has(> #ferienHinweis:not([hidden])) .hero-cta-hinweis { display: none; }
@media (max-width: 980px) {
  .hero-cta-tel { display: none; }
}
@media (max-width: 600px) {
  .hero-cta .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
}

/* --- BREADCRUMB --- */
.breadcrumb { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 1.75rem; }
.breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span { color: var(--gold-soft); margin: 0 8px; opacity: 0.5; }

/* --- ARTICLE CONTENT --- */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { margin: 3rem 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gold); display: inline-block; }
.article-body h3 { margin: 2rem 0 0.75rem; color: var(--anthrazit); }
.article-body p { font-size: 1.02rem; line-height: 1.75; }
.article-body ul li::marker { color: var(--gold); }

/* --- INFO BOX / USP --- */
.info-box {
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-sm);
}
.info-box.dark { background: var(--anthrazit); color: var(--white); }
.info-box.dark p { color: rgba(255,255,255,0.85); }
.info-box.dark strong { color: var(--gold-soft); }
.info-box h4 { color: var(--gold-dark); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; }
.info-box.dark h4 { color: var(--gold-soft); }

/* --- TIMELINE / PROZESS --- */
.timeline { display: grid; gap: 0; counter-reset: step; margin: 2.5rem 0; }
.timeline-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.timeline-step:last-child { border-bottom: none; }
.timeline-step .num {
  counter-increment: step;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  border: 1px solid var(--gold);
}
.timeline-step .num::before { content: counter(step, decimal-leading-zero); }
.timeline-step h3 { margin-bottom: 0.5rem; }
.timeline-step p { margin: 0; }

/* --- CARD GRID --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card {
  background: var(--white);
  padding: 2rem;
  border-radius: 4px;
  border-top: 3px solid transparent;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.card:hover { border-top-color: var(--gold); transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card .icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold-pale);
  color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
  transition: var(--transition);
}
.card:hover .icon-wrap { background: var(--gold); color: var(--white); }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.95rem; }
.card-link { color: var(--gold-dark); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: 1rem; display: inline-block; }
.card-link::after { content: " →"; transition: transform 0.2s; display: inline-block; }
.card:hover .card-link::after { transform: translateX(4px); }

/* --- FAQ ACCORDION --- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.faq-item.open { box-shadow: var(--shadow-md); }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--anthrazit);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--gold-dark); }
.faq-question .plus { color: var(--gold); font-size: 1.5rem; font-weight: 300; transition: transform var(--transition); flex-shrink: 0; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); padding: 0 1.5rem; }
.faq-item.open .faq-answer { max-height: 1000px; padding: 0 1.5rem 1.5rem; }
.faq-answer p { color: var(--text-soft); }

/* --- COMPARISON TABLE --- */
.comparison-wrap { overflow-x: auto; margin: 2rem 0; }
.comparison-table { width: 100%; border-collapse: collapse; background: var(--white); box-shadow: var(--shadow-sm); }
.comparison-table th, .comparison-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.comparison-table th { background: var(--anthrazit); color: var(--white); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.comparison-table th.featured { background: var(--gold); color: var(--anthrazit); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .yes { color: var(--success); font-weight: 600; }
.comparison-table .no { color: #b54033; }
.comparison-table .partial { color: var(--gold-dark); }

/* --- JOB CARDS --- */
.job-card {
  background: var(--white);
  border-radius: 4px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--gold);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  transition: var(--transition);
  margin-bottom: 1.25rem;
}
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.job-card .job-title { font-family: var(--serif); font-size: 1.4rem; color: var(--anthrazit); margin-bottom: 0.5rem; }
.job-card .job-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; }
.job-meta .tag { background: var(--gold-pale); color: var(--gold-dark); padding: 3px 10px; border-radius: 2px; font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }
.job-card .job-cta { align-self: center; }

/* --- BENEFITS GRID --- */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.benefit {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 4px;
  border-top: 2px solid var(--gold);
  text-align: left;
  transition: var(--transition);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit .icon { font-size: 1.6rem; color: var(--gold); margin-bottom: 0.75rem; display: block; }
.benefit h4 { color: var(--anthrazit); margin-bottom: 0.4rem; font-size: 1rem; }
.benefit p { font-size: 0.88rem; line-height: 1.55; margin: 0; }

/* --- CTA BAND (Footer-CTA) --- */
.cta-band {
  background: var(--anthrazit);
  color: var(--white);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--gold);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(184,153,104,0.15) 0%, transparent 60%);
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 2rem; }
.cta-band .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- FOOTER --- */
footer.site-footer { background: var(--anthrazit-dark); color: rgba(255,255,255,0.6); padding: 4rem 0 1.5rem; font-size: 0.88rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-grid h4 { color: var(--gold-soft); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem; font-weight: 500; font-family: var(--sans); }
.footer-grid a { color: rgba(255,255,255,0.6); transition: color 0.2s; display: block; margin-bottom: 0.5rem; }
.footer-grid a:hover { color: var(--gold-soft); }
.footer-brand .logo-text .name { color: var(--white); font-size: 1rem; }
.footer-brand p { margin-top: 1rem; line-height: 1.7; color: rgba(255,255,255,0.5); }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.footer-bottom a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--gold-soft); }

/* --- FAB --- */
.fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; }
.fab-main {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gold); color: var(--white);
  font-size: 1.6rem;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  position: relative;
}
.fab-main:hover { background: var(--gold-dark); transform: scale(1.05); }
.fab.open .fab-main { transform: rotate(135deg); background: var(--anthrazit); }
.fab-item {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--white); color: var(--anthrazit);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  font-size: 1.2rem;
  opacity: 0; pointer-events: none;
  transform: translateY(20px) scale(0.7);
  transition: var(--transition);
  position: relative;
}
.fab-item:hover { background: var(--anthrazit); color: var(--white); }
.fab.open .fab-item { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.fab.open .fab-item:nth-child(2) { transition-delay: 0.05s; }
.fab.open .fab-item:nth-child(3) { transition-delay: 0.1s; }
.fab.open .fab-item:nth-child(4) { transition-delay: 0.15s; }
.fab-item .tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--anthrazit); color: var(--white); padding: 6px 12px; border-radius: 2px; font-size: 0.75rem; white-space: nowrap; letter-spacing: 0.05em; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.fab-item:hover .tooltip { opacity: 1; }

/* --- REVEAL ANIMATIONS --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.42s ease-out, transform 0.42s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 0.36s ease-out, transform 0.36s ease-out; }
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.10s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.14s; }
.reveal-stagger.visible > *:nth-child(n+5) { transition-delay: 0.18s; }

@media (hover: none) and (pointer: coarse) {
  .reveal { transform: none; transition: opacity 0.28s ease-out; }
  .reveal-stagger > * { transform: none; transition: opacity 0.24s ease-out; }
  .reveal-stagger.visible > * { transition-delay: 0s !important; }
}

/* --- TWO-COLUMN LAYOUTS --- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split-img {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--gold-pale) 0%, var(--cream-dark) 100%);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.split-img.dark { background: linear-gradient(135deg, var(--anthrazit-soft) 0%, var(--anthrazit) 100%); border: 1px solid var(--gold); }

/* --- CHECKLIST --- */
.checklist { list-style: none; padding: 0; }
.checklist li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: 0.75rem;
  color: var(--text-soft);
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* --- MOBILE --- */
@media (max-width: 980px) {
  .split-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .hero-page { padding: 8rem 0 4rem; }
  .timeline-step { grid-template-columns: 60px 1fr; gap: 1rem; }
  .timeline-step .num { width: 44px; height: 44px; font-size: 1.2rem; }
  .job-card { grid-template-columns: 1fr; }
  .job-card .job-cta { align-self: stretch; }
  .job-card .job-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .header-inner { gap: 1rem; }
  .logo { gap: 10px; }
  .logo-mark { width: 42px; height: 29px; }
  .logo-text .name { font-size: 0.9rem; letter-spacing: 0.14em; }
  .logo-text .sub { letter-spacing: 0.22em; }
  .btn { white-space: normal; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .actions .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- DOWNLOADS --- */
.downloads { background: var(--cream); }
.doc-howto { list-style: none; counter-reset: how; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 3.5rem; }
.doc-howto li { counter-increment: how; display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: baseline; padding: 1.1rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: 4px; }
.doc-howto li::before { content: counter(how); grid-row: span 2; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gold); }
.doc-howto strong { color: var(--anthrazit); font-weight: 600; }
.doc-howto span { font-size: 0.9rem; color: var(--text-soft); }
.doc-group { margin-bottom: 3rem; }
.doc-group h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--anthrazit); margin-bottom: 0.5rem; }
.doc-intro { color: var(--text-soft); margin-bottom: 1.25rem; max-width: 65ch; }
.doc-list { list-style: none; display: grid; gap: 0.75rem; margin-top: 1rem; }
.doc { display: grid; grid-template-columns: 56px 1fr auto; gap: 1.25rem; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 1.25rem 1.5rem; scroll-margin-top: 110px; }
.doc:target { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.doc-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 4px; background: var(--gold-pale); color: var(--gold-dark); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; }
.doc-body h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--anthrazit); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.doc-body p { color: var(--text-soft); font-size: 0.95rem; line-height: 1.6; margin-top: 0.25rem; max-width: 62ch; }
.doc-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dark); background: var(--gold-pale); padding: 3px 9px; border-radius: 999px; }
.doc-btn { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.doc-size { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; font-weight: 400; }
.doc-help { margin-top: 1rem; line-height: 1.7; color: var(--text-soft); }
.doc-help strong { display: block; color: var(--anthrazit); margin-bottom: 0.25rem; }
@media (max-width: 760px) {
  .doc-howto { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 44px 1fr; }
  .doc-icon { width: 44px; height: 44px; }
  .doc-btn { grid-column: 1 / -1; width: 100%; }
}

/* --- ZAHNTECHNIKER-KARTE (Labor) --- */
.tech-card { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; align-items: center; margin: 2.5rem 0; padding: 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: 4px; }
.tech-card img { width: 150px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.tech-card .label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dark); }
.tech-card strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--anthrazit); margin: 0.2rem 0 0.4rem; }
.tech-card p { margin: 0; color: var(--text-soft); line-height: 1.7; }
@media (max-width: 560px) { .tech-card { grid-template-columns: 1fr; } .tech-card img { width: 100%; max-width: 260px; } }

/* Prophylaxe-Team (prophylaxe.html): zwei Porträts nebeneinander, im Stil der tech-card */
.team-duo { margin: 2.5rem 0; padding: 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: 4px; }
.team-duo > .label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dark); }
.team-duo > p { margin: 0.4rem 0 1.25rem; color: var(--text-soft); line-height: 1.7; }
.team-duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
/* Drei Personen: nebeneinander, auf dem Handy zwei Spalten */
.team-duo-grid.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .team-duo-grid.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Leistungen: Behandlungsteam steht oben, vor den Schwerpunkten */
#behandlungsteam { max-width: 820px; margin: 0 auto clamp(3.5rem, 7vw, 5.5rem); }
.team-duo figure { margin: 0; }
.team-duo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.team-duo figcaption { margin-top: 0.75rem; }
.team-duo figcaption strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--anthrazit); }
.team-duo figcaption span { font-size: 0.85rem; color: var(--text-soft); }
@media (max-width: 380px) { .team-duo-grid { gap: 0.75rem; } .team-duo figcaption strong { font-size: 1.15rem; } }

/* =============================================================
   PRAXISBILDER (Fototermin 01.10.2026)
   ============================================================= */

/* Rundgang (zahnarztangst.html): vier Stationen vom Eingang bis zur Behandlung,
   im weissen Kasten wie .team-duo und .tech-card. Gestrichelte Goldlinie verbindet
   die Nummern. Kleine quadratische Bilder; unter 640 px zwei Spalten. */
.rundgang-weg {
  list-style: none; margin: 1.75rem 0 2.5rem; padding: 1.25rem;
  background: var(--white); border: 1px solid var(--border); border-radius: 4px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1rem; counter-reset: station;
}
.rundgang-weg li { position: relative; counter-increment: station; min-width: 0; }
.rundgang-weg li::before {
  content: counter(station, decimal-leading-zero);
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 0.75rem;
  border-radius: 50%; border: 1px solid var(--gold);
  background: var(--gold-pale); color: var(--gold-dark);
  font-family: var(--serif); font-size: 0.95rem; font-weight: 500;
}
.rundgang-weg li:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: 38px; right: -0.6rem;
  border-top: 1px dashed var(--gold-soft);
}
.rundgang-weg figure { margin: 0; }
.rundgang-weg img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0; border-radius: 3px; }
.rundgang-weg figcaption { margin-top: 0.7rem; font-size: 0.82rem; line-height: 1.55; color: var(--text-soft); }
.rundgang-weg figcaption strong { display: block; hyphens: manual; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--anthrazit); margin-bottom: 0.25rem; }
@media (max-width: 640px) {
  .rundgang-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rundgang-weg li:nth-child(2n)::after { display: none; }
}

/* Einzelbild mit Unterschrift (prophylaxe.html, termin-danke.html) */
.praxis-bild { margin: 2.5rem 0; }
.praxis-bild img { display: block; width: 100%; height: auto; border-radius: 4px; }
.praxis-bild figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.85rem; font-size: 0.88rem; color: var(--text-soft); }
.praxis-bild figcaption::before { content: ""; flex: 0 0 28px; border-top: 1px solid var(--gold); }

/* Collage „Dein Arbeitsplatz“ (karriere.html): ein großes Bild, zwei kleine */
.arbeitsplatz { margin-top: clamp(3rem, 6vw, 4.5rem); }
.arbeitsplatz-kopf { max-width: 640px; margin-bottom: 1.5rem; }
.arbeitsplatz-kopf .eyebrow { display: block; margin-bottom: 0.5rem; }
.arbeitsplatz-kopf p { margin: 0; color: var(--text-soft); }
.arbeitsplatz-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem); height: clamp(340px, 44vw, 560px);
}
.arbeitsplatz-grid figure { margin: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: 4px; }
.arbeitsplatz-grid figure:first-child { grid-row: 1 / 3; }
.arbeitsplatz-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.arbeitsplatz-grid figure:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
  .arbeitsplatz-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .arbeitsplatz-grid figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .arbeitsplatz-grid figure:not(:first-child) { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .arbeitsplatz-grid img { transition: none; } .arbeitsplatz-grid figure:hover img { transform: none; } }

/* =============================================================
   PATIENTENSTIMMEN — echte Google-Bewertungen
   Bewusst mehr Weissraum als bei normalen Leistungssektionen.
   ============================================================= */
.reviews-section { background: var(--white); }
.reviews-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.reviews-head h2 { margin-bottom: 1rem; }
.reviews-head p { color: var(--text-soft); font-size: 1.05rem; }

.review-rating {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: fit-content;
  margin: 0 auto 3.5rem;
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 1.1rem 1.75rem;
  border-radius: 4px;
  transition: var(--transition);
}
.review-rating:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.review-rating .rr-score { font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--anthrazit); }
.review-rating .rr-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.review-rating .rr-count {
  display: block; margin-top: 3px;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b6559; font-weight: 500;
}
.review-rating .rr-text {
  display: block; margin-top: 4px; max-width: 34ch;
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.35; color: var(--anthrazit);
}
.review-rating .rr-go {
  padding-left: 1.25rem; border-left: 1px solid var(--border);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 600; white-space: nowrap;
}
.review-rating:hover .rr-go { color: var(--anthrazit); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.75rem;
}
.review-card {
  background: var(--cream);
  padding: 2.25rem 2rem 1.75rem;
  border-radius: 4px;
  border-top: 2px solid var(--gold);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.review-card .rc-badge {
  position: absolute; top: 1rem; right: 1.25rem;
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6b6559; font-weight: 600;
}
.review-card .rc-stars { color: var(--gold); letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 1rem; }
.review-card blockquote {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--anthrazit);
  font-style: italic;
  margin: 0 0 1.5rem;
  flex: 1;
}
/* Uebersetzte Google-Bewertungen (EN/RO): Kennzeichnung, Original aufklappbar */
.rv-uebersetzt {
  font-family: var(--sans); font-style: normal; font-size: 0.78rem; line-height: 1.5;
  color: #6b6559; margin: -0.75rem 0 0.5rem;
}
.rv-original { margin: 0 0 1.25rem; }
.rv-original summary {
  cursor: pointer; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 600;
}
.rv-original summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.review-card .rv-original blockquote { font-size: 0.95rem; margin: 0.75rem 0 0; flex: none; }
.review-card .rc-foot {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.review-card .rc-name {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--anthrazit); font-weight: 600;
}
.review-card .rc-date { font-size: 0.72rem; color: #6b6559; margin-top: 2px; }
.review-card .rc-link {
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold-dark);
  font-weight: 600; white-space: nowrap;
}
.review-card .rc-link:hover { color: var(--anthrazit); }
.reviews-disclaimer {
  text-align: center; max-width: 720px; margin: 2.5rem auto 0;
  font-size: 0.8rem; line-height: 1.7; color: #6b6559;
}

@media (max-width: 720px) {
  .review-rating { flex-wrap: wrap; justify-content: center; text-align: center; gap: 0.9rem; padding: 1rem 1.25rem; }
  .review-rating .rr-go { padding-left: 0; border-left: none; }
  .review-card { padding: 2rem 1.5rem 1.5rem; }
  .review-card blockquote { font-size: 1rem; }
}


/* --- Sehr schmale Geraete (<= 400px): lange deutsche Komposita und der
   Logo-Schriftzug muessen umbrechen duerfen, sonst laeuft die Seite ueber. --- */
@media (max-width: 400px) {
  .overline, .eyebrow { overflow-wrap: anywhere; max-width: 100%; }
  .btn { overflow-wrap: anywhere; hyphens: auto; max-width: 100%; white-space: normal; text-align: center; }
  .header-inner { gap: 0.75rem; }
  .logo { gap: 10px; min-width: 0; }
  .logo-text { white-space: normal; min-width: 0; }
  .logo-text .name { font-size: 0.86rem; letter-spacing: 0.16em; }
  .logo-text .sub { letter-spacing: 0.09em; }
}
@media (max-width: 400px) {
  /* anywhere statt break-word: zaehlt auch fuer die Mindestbreite (inline-block-H2),
     falls der Browser kein Silbentrennungs-Woerterbuch hat */
  h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }
  .doc, .doc * { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .logo-mark { width: 34px; }
  .logo-text .name { font-size: 0.78rem; letter-spacing: 0.1em; }
  .logo-text .sub { font-size: 0.6875rem; letter-spacing: 0.06em; }
}

/* --- MOBILE KONTAKTLEISTE --- */
/* Unter 980 px blendet das Layout den Termin-Knopf im Kopfbereich aus. Damit der
   Weg zur Praxis trotzdem jederzeit sichtbar bleibt, tritt dort diese feste
   Leiste an seine Stelle. */
.kontaktleiste { display: none; }
@media (max-width: 980px) {
  .kontaktleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 24px rgba(26,35,50,0.16);
  }
  .kontaktleiste a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 58px; padding: 0 10px;
    font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  }
  .kontaktleiste .kl-tel  { background: var(--gold); color: var(--anthrazit); }
  .kontaktleiste .kl-mail { background: var(--anthrazit); color: var(--white); }
  .kontaktleiste a:active { filter: brightness(0.92); }
  .kontaktleiste svg { width: 17px; height: 17px; flex: none; }
  body { padding-bottom: calc(58px + var(--notdienst-h, 0px) + env(safe-area-inset-bottom, 0px)); }
  .fab { display: none; }
}

/* --- ZURUECK NACH OBEN --- */
/* Faehrt beim Scrollen mit und erscheint erst ab 600 px Scrolltiefe. Steht
   ueber dem FAB; auf Mobilgeraeten ist der FAB ausgeblendet, dort steht der
   Knopf ueber der Kontaktleiste. Der Sprung nutzt window.scrollTo(0, 0) und
   folgt damit dem CSS-scroll-behavior — bei prefers-reduced-motion also ohne
   Animation. */
.nach-oben {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + 82px); z-index: 95;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--anthrazit);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.nach-oben:hover { background: var(--anthrazit); color: var(--white); border-color: var(--anthrazit); }
.nach-oben svg { width: 20px; height: 20px; }
/* Der geoeffnete FAB faehrt seine Eintraege genau dorthin aus, wo dieser Knopf
   steht — dann tritt er zurueck. */
#fab.open ~ .nach-oben.sichtbar { opacity: 0; visibility: hidden; transform: translateY(8px); }
@media (max-width: 980px) {
  .nach-oben { bottom: calc(58px + var(--notdienst-h, 0px) + env(safe-area-inset-bottom, 0px) + 22px); right: 1rem; }
}

/* --- NOTDIENST-STREIFEN --- */
/* Erscheint nur ausserhalb der Sprechzeiten, fest am unteren Bildschirmrand —
   auf dem Desktop ganz unten, unter 980 px ueber der Kontaktleiste. Die Hoehe
   meldet das Skript als --notdienst-h; Kontaktleiste, FAB und
   Nach-oben-Knopf ruecken entsprechend nach oben. Die Praxisnummer wird nie
   ersetzt — der Notdienst kommt hinzu, nicht an ihre Stelle. */
.notdienst-streifen {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 209; display: block;
  background: var(--anthrazit-dark); color: var(--white);
  padding: 9px 16px; text-align: center;
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.45;
  border-top: 2px solid var(--gold);
}
.notdienst-streifen[hidden] { display: none; }
.notdienst-streifen .nd-grund {
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-soft);
}
.notdienst-streifen a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.notdienst-streifen .nd-preis { font-size: 0.75rem; opacity: 0.85; }
@media (min-width: 981px) {
  .notdienst-streifen .nd-preis::before { content: "· "; }
  body { padding-bottom: var(--notdienst-h, 0px); }
  .fab { bottom: calc(1.5rem + var(--notdienst-h, 0px)); }
  .nach-oben { bottom: calc(1.5rem + 82px + var(--notdienst-h, 0px)); }
}
@media (max-width: 980px) {
  .notdienst-streifen { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); font-size: 0.74rem; }
  .notdienst-streifen .nd-preis { display: block; font-size: 0.72rem; }
}

/* --- SPRACHAUSWAHL (Deutsch · English · Română) ---
   Flaggen-Knopf im Header, klappt eine Liste der drei Sprachen auf.
   <details> funktioniert ohne JavaScript; das Skript schliesst die Liste
   nur zusaetzlich bei Klick daneben und bei Escape. Jeder Eintrag fuehrt
   auf dieselbe Seite in der anderen Sprache. */
#siteHeader .lang-switch { position: relative; flex-shrink: 0; }
#siteHeader .lang-switch summary {
  list-style: none; display: flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 8px; cursor: pointer; border-radius: 2px;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--anthrazit);
  transition: color 0.3s ease, background 0.3s ease;
}
#siteHeader .lang-switch summary::-webkit-details-marker { display: none; }
#siteHeader .lang-switch summary::after {
  content: ""; width: 5px; height: 5px; margin-left: 1px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease;
}
#siteHeader .lang-switch[open] summary::after { transform: translateY(1px) rotate(-135deg); }
#siteHeader .lang-switch summary:hover,
#siteHeader .lang-switch summary:focus-visible { color: var(--gold-dark); background: rgba(184,153,104,0.12); }
#siteHeader .lang-switch summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#siteHeader.hero-visible .lang-switch summary {
  color: var(--white, #ffffff);
  text-shadow: 0 1px 12px rgba(13,21,33,0.55), 0 1px 3px rgba(13,21,33,0.4);
}
#siteHeader.hero-visible .lang-switch summary:hover,
#siteHeader.hero-visible .lang-switch summary:focus-visible { color: var(--gold-soft); background: rgba(255,255,255,0.14); }
#siteHeader .lang-flag {
  display: block; flex: none; width: 21px; height: 14px; object-fit: cover;
  border-radius: 1px; box-shadow: 0 0 0 1px rgba(26,35,50,0.2);
}
#siteHeader .lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  min-width: 176px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--cream); border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(26,35,50,0.12);
}
#siteHeader .lang-menu li { margin: 0; padding: 0; }
#siteHeader .lang-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; min-height: 44px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 400;
  letter-spacing: 0.02em; text-transform: none; text-shadow: none;
  color: var(--anthrazit); text-decoration: none;
}
#siteHeader .lang-menu a:hover,
#siteHeader .lang-menu a:focus-visible { background: rgba(184,153,104,0.12); color: var(--gold-dark); }
#siteHeader .lang-menu a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
#siteHeader .lang-menu a[aria-current="page"] { font-weight: 600; }
#siteHeader .lang-menu a[aria-current="page"]::after { content: "\2713"; margin-left: auto; color: var(--gold-dark); }
/* Desktop mit ausgeklapptem Menue: Die Flagge allein genuegt, und der Header
   ruckt etwas zusammen, damit alle 8 Menuepunkte, die Sprachauswahl und der
   Termin-Knopf auch in der laengsten Sprache (Rumaenisch) ab 1381 px passen. */
@media (min-width: 1381px) {
  #siteHeader .lang-switch .lang-code { display: none; }
  #siteHeader .lang-switch summary { gap: 5px; padding: 0 6px; }
  #siteHeader .header-inner { gap: 1rem; }
  #siteHeader nav.primary a { padding: 9px 6px; }
  #siteHeader .header-cta { gap: 8px; }
}
@media (min-width: 1381px) and (max-width: 1480px) {
  #siteHeader nav.primary a { letter-spacing: 0.12em; }
  #siteHeader .logo-text .name { letter-spacing: 0.24em; }
}
/* Smartphone: nur die Flagge, damit Logo, Flagge und Menue-Knopf in eine Zeile passen */
@media (max-width: 600px) {
  #siteHeader .lang-switch summary { gap: 0; padding: 0 6px; }
  #siteHeader .lang-switch .lang-code,
  #siteHeader .lang-switch summary::after { display: none; }
  #siteHeader .header-cta { gap: 2px; }
}

/* =============================================================
   TERMINANFRAGE (termin.html, termin-danke.html)
   Karte im Stil des Selbsttests: dunkler Kopf mit Goldkante,
   cremefarbene Auswahlfelder. Schrift in Feldern mind. 16 px,
   sonst zoomt iOS beim Antippen.
   ============================================================= */
.termin-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* hidden muss gewinnen, auch gegen display: grid/flex der Bausteine */
.termin-section [hidden] { display: none !important; }
.termin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.tf-card { background: var(--white); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; }
.tf-head {
  background: linear-gradient(135deg, var(--anthrazit) 0%, var(--anthrazit-soft) 100%);
  border-bottom: 3px solid var(--gold);
  padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
}
.tf-head .label { display: block; color: var(--gold-soft); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.4rem; }
.tf-head h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0; }
.tf-body { padding: clamp(1.5rem, 4vw, 2.5rem); }

.tf-group { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.tf-legend { font-family: var(--serif); font-size: 1.35rem; color: var(--anthrazit); margin-bottom: 0.9rem; padding: 0; }
.tf-legend .tf-step { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-soft); display: block; margin-bottom: 0.2rem; }
.tf-sub { font-size: 0.9rem; font-weight: 600; color: var(--anthrazit); margin: 1.25rem 0 0.6rem; }
.tf-opt { font-weight: 400; color: var(--text-soft); font-size: 0.85em; }

.tf-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.6rem; }
/* Kurze Auswahl (Wochentage, Tageszeit): Breite folgt dem Text, damit nichts
   ueber den Rand laeuft; freier Platz wird gleichmaessig verteilt. */
.tf-choices.tf-inline { display: flex; flex-wrap: wrap; }
.tf-choices.tf-inline .tf-choice { flex: 1 1 auto; white-space: nowrap; gap: 0.5rem; padding: 0.7rem 0.8rem; font-size: 0.95rem; }
.tf-choice {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 48px; padding: 0.75rem 1rem;
  background: var(--cream); border: 2px solid transparent; border-radius: 4px;
  font-size: 0.97rem; line-height: 1.35; color: var(--text); cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.tf-choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--anthrazit); }
.tf-choice:hover { border-color: var(--gold-soft); background: var(--gold-pale); }
.tf-choice:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); }
.tf-choice:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }

.tf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.tf-field-wide { grid-column: 1 / -1; }
.tf-field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--anthrazit); margin-bottom: 0.35rem; }
.tf-field input,
.tf-field select,
.tf-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: 0.8rem 0.9rem; background: var(--white);
  border: 1px solid #c9c1b3; border-radius: 3px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tf-field textarea { min-height: 7rem; resize: vertical; }
.tf-field input:focus,
.tf-field select:focus,
.tf-field textarea:focus { outline: none; border-color: var(--anthrazit); box-shadow: 0 0 0 3px rgba(184,153,104,0.35); }
.tf-field input:user-invalid { border-color: #b54033; }
.tf-hint { font-size: 0.82rem; color: var(--text-soft); margin: 0.4rem 0 0; }
.tf-counter { float: right; font-variant-numeric: tabular-nums; }

.tf-consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; color: var(--text-soft); cursor: pointer; }
.tf-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--anthrazit); }
.tf-consent a { color: var(--anthrazit); text-decoration: underline; text-underline-offset: 2px; }

.tf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.tf-actions p { font-size: 0.88rem; margin: 0; flex: 1 1 16rem; }

/* Fuer Menschen unsichtbar, fuer Spam-Bots ein Koeder (Honeypot) */
.tf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.tf-alert { margin: 0 0 1.75rem; padding: 1.1rem 1.25rem; border-radius: 4px; background: #f7e4e1; border: 1px solid #e3b7b0; color: #7a2a20; font-size: 0.95rem; }
.tf-alert strong { color: #7a2a20; }
.tf-alert p { color: inherit; margin: 0 0 0.5rem; }
.tf-alert p:last-child { margin-bottom: 0; }
.tf-alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Weiche bei akuten Schmerzen: statt Formular der Anruf */
.tf-pain { background: var(--anthrazit); color: var(--white); border-radius: 4px; padding: 1.5rem 1.5rem 1.6rem; margin-bottom: 2rem; }
.tf-pain h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 0.5rem; }
.tf-pain p { color: rgba(255,255,255,0.86); }
/* Dunkle Schrift auf Gold wie der Anrufen-Knopf der Kontaktleiste: weiss auf Gold
   erreicht nur 2,7:1, dieser Knopf muss aber sofort lesbar sein. */
.tf-pain .btn { margin-top: 0.5rem; background: var(--gold); border-color: var(--gold); color: var(--anthrazit); font-weight: 600; }
.tf-pain .btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--anthrazit); }
.tf-pain .tf-nd { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.9rem; }
.tf-pain .tf-nd a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.tf-pain .tf-nd small { display: block; opacity: 0.75; margin-top: 0.2rem; }
.info-box.dark .tf-nd { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.9rem; }
.info-box.dark .tf-nd a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.info-box.dark .tf-nd small { display: block; opacity: 0.75; margin-top: 0.2rem; }

.tf-aside { display: grid; gap: 1.25rem; }
.tf-box { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 1.4rem 1.5rem; }
.tf-box h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.tf-box p { font-size: 0.93rem; }
.tf-phone { display: inline-block; font-family: var(--serif); font-size: 1.9rem; color: var(--anthrazit); line-height: 1.1; margin: 0.2rem 0 0.8rem; }
.tf-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; font-size: 0.9rem; color: var(--text-soft); margin: 0; }
.tf-hours dt { font-weight: 600; color: var(--anthrazit); }
.tf-hours dd { margin: 0; }
.tf-next { list-style: none; padding: 0; margin: 0; counter-reset: tfn; display: grid; gap: 0.7rem; }
.tf-next li { counter-increment: tfn; display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.6rem; font-size: 0.93rem; margin: 0; }
.tf-next li::before { content: counter(tfn); font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--gold-dark); }
a.tf-link { color: var(--anthrazit); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

.danke-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

@media (max-width: 980px) {
  .termin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tf-fields { grid-template-columns: 1fr; }
  .tf-actions .btn { width: 100%; justify-content: center; }
  .tf-pain .btn { width: 100%; justify-content: center; white-space: normal; }
}

/* Kontaktleiste: Knopf zur Terminanfrage (loest den E-Mail-Knopf ab) */
@media (max-width: 980px) {
  .kontaktleiste .kl-termin { background: var(--anthrazit); color: var(--white); }
}

/* =============================================================
   LABOR-FILM (labor.html): Video mit Kapiteln, startet beim Aufruf
   ============================================================= */
.labor-film-sec { padding-bottom: 0; }
.labor-film {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.lf-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--anthrazit); border-radius: 4px; box-shadow: var(--shadow-md, 0 18px 40px rgba(0,0,0,.18)); }
.lf-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lf-caption {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 3rem 1.25rem 1.1rem; color: #fff;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2;
  background: linear-gradient(to top, rgba(20,22,26,.72), rgba(20,22,26,0));
}
.lf-text h2 { margin: 0.6rem 0 1rem; }
.lf-text > p { color: var(--text-soft); line-height: 1.75; margin-bottom: 1.5rem; }
.lf-steps { list-style: none; margin: 0; padding: 0; counter-reset: lf; border-left: 1px solid var(--border); }
.lf-steps li { counter-increment: lf; }
.lf-steps button {
  display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.4rem; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 0.6rem 0 0.6rem 1.1rem; margin-left: -1px; border-left: 2px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.lf-steps button::before {
  content: counter(lf, decimal-leading-zero); grid-row: 1 / 3;
  font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold-dark); padding-top: 0.3rem;
}
.lf-steps strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--anthrazit); }
.lf-steps span { font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; }
.lf-steps button:hover strong { color: var(--gold-dark); }
.lf-steps button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lf-steps .ist-aktiv button { border-left-color: var(--gold); background: rgba(176, 141, 87, 0.07); }
@media (max-width: 860px) {
  .labor-film { grid-template-columns: 1fr; }
  .lf-media { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .lf-steps button { transition: none; } }