/* ============================================================
   Zahnarztpraxis – Website
   Ruhig, warm, modern, zeitlos
   ============================================================ */

:root {
  --color-bg: #FAF6F0;
  --color-bg-soft: #F1EBE0;
  --color-primary: #E06A1E;      /* Praxis-Orange (aus Logo) */
  --color-primary-dark: #B14F12;
  --color-accent: #656262;       /* Praxis-Grau (aus Logo) */
  --color-dark: var(--color-primary-dark);
  --color-icon-bg: var(--color-bg-soft);
  --color-sand: var(--color-bg-soft);
  --color-text: #2E2B27;
  --color-text-soft: #605A52;
  --color-white: #FFFFFF;
  --color-border: #E4DCCB;
  --header-bg: rgba(250, 246, 240, 0.92);
  --shadow-soft: none;
  --footer-blob-1: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --footer-blob-2: color-mix(in srgb, var(--color-accent) 8%, transparent);

  /* Lora/Noto Sans: Fallback für Kyrillisch (Fraunces/Work Sans/Cairo ohne kyrillische Glyphen) */
  --font-heading: 'Fraunces', 'Cairo', 'Lora', Georgia, serif;
  --font-body: 'Work Sans', 'Cairo', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-heading);
  --weight-heading: 500;
  --weight-h1: 400;
  --size-h1: clamp(2.1rem, 4vw, 3.2rem);

  --max-width: 1140px;
  --radius: 14px;
  --transition: 0.25s ease;
}

/* ---------- Öffentliche Website: "Warmes Modern-Coral" ----------
   Neue Tokens gelten NUR auf der öffentlichen Seite (body.public-site),
   damit Admin-Bereich und Aufnahmebogen (gleiche style.css, aber ohne
   diese Klasse) unverändert im bisherigen Look bleiben. */
body.public-site {
  --color-bg: #FFFDFB;
  --color-bg-soft: #FBF1EA;
  --color-primary: #FF5A3C;
  --color-primary-dark: #E64526;
  --color-accent: #8C7A6B;
  --color-sand: #FFD08A;
  --color-dark: #1C1917;
  --color-icon-bg: var(--color-bg-soft);
  --color-text: #241F1B;
  --color-text-soft: #6B5F56;
  --color-border: #F1E1CE;
  --header-bg: rgba(255, 253, 251, 0.92);
  --shadow-soft: none;

  --font-heading: 'Instrument Serif', 'Cairo', 'Lora', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Cairo', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-heading);
  --weight-heading: 400;
  --weight-h1: 400;
  --size-h1: clamp(2.8rem, 6vw, 5rem);

  --radius: 0;
  --radius-sm: 0;

  --max-width: 1320px;
  --space-gutter: clamp(1.5rem, 5vw, 4rem);
  --space-section: clamp(3rem, 6vw, 5.5rem);
}

/* Instrument Serif hat keinen eigenen Schnitt für AR/Kyrillisch – dort greift automatisch
   Cairo bzw. Lora aus der Fallback-Kette (siehe --font-heading oben). */
body.public-site h1 { line-height: 0.98; letter-spacing: -0.02em; }
body.public-site h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
body.public-site h3 { font-size: 1.5rem; line-height: 1.2; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 0.6em;
}

h1 { font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--weight-h1); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--color-text-soft); }

a { color: var(--color-primary-dark); text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }
body.public-site section { padding: var(--space-section) 0; }
body.public-site .container { padding-inline: var(--space-gutter); }

.section-tight { padding: 56px 0; }

.section-soft { background: var(--color-bg-soft); }
.section-dark {
  background: var(--color-dark);
  --color-text: var(--color-bg);
  --color-text-soft: color-mix(in srgb, var(--color-bg) 72%, transparent);
  --color-border: color-mix(in srgb, var(--color-bg) 22%, transparent);
}

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 0.9em;
}

.lead {
  font-size: 1.15rem;
  max-width: 60ch;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition), border-color var(--transition);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Längsform statt Shorthand: .container setzt bereits padding-left/right;
     eine Shorthand hier würde das horizontale Padding auf 0 zurücksetzen. */
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-text);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
}
.logo span { color: var(--color-primary); }
.logo img { height: 40px; width: auto; }

.footer-logo img { height: 40px; width: auto; display: block; margin-bottom: 14px; }

.nav-links {
  display: flex;
  gap: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
}
.nav-links a:hover,
.nav-links a.active { border-color: var(--color-accent); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn-primary { padding: 12px 22px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-text);
}

@media (max-width: 820px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 16px 24px; width: 100%; }
  .nav-toggle { display: block; }
  .nav-cta .btn-primary { display: none; }
}

@media (max-width: 480px) {
  .nav-cta { gap: 6px; }
  .logo img { height: 32px; }
  .reviews-badge-toggle,
  .lang-switcher-toggle {
    padding: 6px 9px;
    font-size: 0.76rem;
  }
  .reviews-badge-count { display: none; }
}

/* ---------- Sprachumschalter ---------- */
.lang-switcher {
  position: relative;
}
.lang-switcher-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
  cursor: pointer;
}
.lang-switcher-menu {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20,16,12,0.14);
  list-style: none;
  padding: 6px;
  min-width: 140px;
  display: none;
  z-index: 60;
}
.lang-switcher:hover .lang-switcher-menu,
.lang-switcher:focus-within .lang-switcher-menu {
  display: block;
}
.lang-switcher-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.lang-switcher-menu a:hover { background: var(--color-bg-soft); }
.lang-switcher-menu a.active { color: var(--color-primary-dark); font-weight: 700; }

@media (max-width: 820px) {
  .lang-switcher { order: -1; }
}

/* ---------- Bewertungs-Badge ---------- */
.reviews-badge { position: relative; }
.reviews-badge-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.reviews-badge-star { color: var(--color-primary); font-size: 0.95rem; }
.reviews-badge-count { color: var(--color-text-soft); font-weight: 500; }

.reviews-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(20,16,12,0.16);
  padding: 18px;
  width: 300px;
  display: none;
  z-index: 60;
}
html[dir="rtl"] .reviews-dropdown { transform: translateX(50%); }
.reviews-badge:hover .reviews-dropdown,
.reviews-badge:focus-within .reviews-dropdown {
  display: block;
}
.reviews-dropdown-heading {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--color-text);
}
.reviews-dropdown-list { list-style: none; margin: 0; padding: 0; }
.reviews-dropdown-list li {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.reviews-dropdown-list li:first-child { border-top: none; padding-top: 0; }
.reviews-dropdown-stars { color: var(--color-primary); font-size: 0.85rem; margin-bottom: 4px; }
.reviews-dropdown-text { font-size: 0.88rem; color: var(--color-text); margin: 0 0 4px; line-height: 1.5; }
.reviews-dropdown-author { font-size: 0.8rem; color: var(--color-text-soft); }
.reviews-dropdown-viewall {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.reviews-dropdown-viewall:hover { color: var(--color-primary); }

@media (max-width: 480px) {
  /* Dropdown zentriert unter dem Badge würde auf sehr schmalen Displays über den Rand hinausragen */
  .reviews-dropdown {
    inset-inline-start: auto;
    inset-inline-end: -24px;
    transform: none;
    width: min(300px, 90vw);
  }
  html[dir="rtl"] .reviews-dropdown { transform: none; }
}

/* ---------- Rezensionen-Seite ---------- */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 4px;
}
.reviews-summary-star { color: var(--color-primary); }

.testimonial-card { display: flex; flex-direction: column; }
.testimonial-stars { color: var(--color-primary); font-size: 0.95rem; margin-bottom: 14px; }
.testimonial-card blockquote {
  margin: 0 0 16px;
  font-style: italic;
  color: var(--color-text);
  flex-grow: 1;
}
.testimonial-author { font-weight: 600; font-size: 0.88rem; color: var(--color-text-soft); }

/* ---------- RTL (Arabisch) ---------- */
html[dir="rtl"] .eyebrow {
  letter-spacing: normal;
  text-transform: none;
}
html[dir="rtl"] .tag {
  letter-spacing: normal;
}
/* Italic-Akzent funktioniert nicht mit Cairo/Arabisch – stattdessen Farbakzent */
html[dir="rtl"] .hero-cinema-title-copy em,
html[dir="rtl"] .our-goal-statement em,
html[dir="rtl"] .quote-block blockquote em,
html[dir="rtl"] .cta-band h2 em {
  font-style: normal;
  color: var(--color-primary);
}

/* ---------- Hero ---------- */
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ---------- Hero-Bild (hartes Rechteck) ---------- */
.blob-photo {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.blob-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Hero Modern (randloser Split: Text / Bild bis zum Viewport-Rand) ---------- */
body.public-site .hero-modern {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero-modern-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: clamp(420px, 50vw, 600px);
}
.hero-modern-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 72px;
  padding-inline-start: var(--space-gutter);
  padding-inline-end: clamp(24px, 4vw, 56px);
}
@media (max-width: 900px) {
  .hero-modern-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-modern-media { order: -1; }
  .hero-modern-text { padding-inline-end: var(--space-gutter); }
}
.hero-modern-media { position: relative; min-width: 0; height: 100%; }
.hero-modern-media .blob-photo {
  width: 100%;
  height: 100%;
  box-shadow: var(--shadow-soft);
}
.blob-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blob-photo:hover img { transform: scale(1.06); }
.hero-modern-deco {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.hero-modern-deco--1 {
  width: 320px;
  height: 320px;
  top: -70px;
  inset-inline-end: -60px;
  background: color-mix(in srgb, var(--color-sand) 45%, transparent);
}
.hero-modern-deco--2 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  inset-inline-start: 8%;
  background: color-mix(in srgb, var(--color-sand) 60%, transparent);
}
.hero-modern .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.hero-modern .hero-actions { margin-top: 32px; }

/* ---------- Über uns: kompakter Hero (Text + "Wer ich bin" links, Porträt rechts) ----------
   Bewusst ohne Deko-Kreise und mit begrenzter Porträtgröße; Team als einheitliche Karten. */
body.public-site .about-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px); }
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.about-hero-text .lead { max-width: 52ch; }
.about-hero-personal { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.about-hero-personal-heading { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 6px; }
.about-hero-personal-text { color: var(--color-text-soft); margin-bottom: 18px; }
.about-hero-portrait { margin: 0; }
.about-hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 800px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-portrait { order: -1; max-width: 300px; }
}

/* Zeitleiste ohne runde Punkte: kleine Quadrate als Marker */
.fact-list.about-timeline li::before { width: 10px; height: 10px; inset-inline-start: -6px; top: 6px; border-radius: 0; border: none; }

/* Haltung: Nummer statt Icon im Kreis */
.about-value { border-top: 1px solid var(--color-border); padding-top: 24px; }
.about-value-number { display: block; font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-primary); margin-bottom: 12px; }

/* Team: gleich große, rechteckige Fotos; Platzhalter in exakt derselben Größe */
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
}
.about-team-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.about-team-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg); margin-bottom: 16px; }
.about-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.about-team-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 0.9rem; color: var(--color-text-soft); }
.about-team-card h3 { margin-bottom: 2px; }
.about-team-card .team-role { margin-bottom: 8px; }
.about-team-card p { font-size: 0.95rem; color: var(--color-text-soft); margin-bottom: 10px; }
.about-team-card .card-more { margin-top: auto; }
.about-team-card:hover .about-team-photo img,
.about-team-card:focus-visible .about-team-photo img { transform: scale(1.04); }
.about-team-card:hover h3,
.about-team-card:focus-visible h3 { color: var(--color-primary-dark); }
.about-team-card:hover .card-more { text-decoration: underline; }

/* ---------- Kontakt: Anruf-Buttons im Kopf, Standortkarten mit Karte und Zeiten-Tabelle,
   Formular in eigener Karte ---------- */
.kontakt-quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.kontakt-quick-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.kontakt-quick-call svg { color: var(--color-primary); flex-shrink: 0; }
.kontakt-quick-call span { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; font-size: 0.95rem; text-align: start; }
.kontakt-quick-call small { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-soft); }
.kontakt-quick-call:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

body.public-site .kontakt-locations { padding-top: 0; }
.kontakt-location-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); }
.kontakt-location {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
}
.kontakt-location-map { aspect-ratio: 16 / 9; background: var(--color-bg-soft); }
.kontakt-location-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.85); }
.kontakt-location-body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 3vw, 32px); }
.kontakt-location-body h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 4px 0 12px; }
.kontakt-location-address { display: flex; gap: 8px; align-items: flex-start; color: var(--color-text-soft); margin-bottom: 20px; }
.kontakt-location-address svg { color: var(--color-primary); margin-top: 4px; flex-shrink: 0; }
.kontakt-hours { padding: 16px 0 4px; border-top: 1px solid var(--color-border); margin-bottom: 20px; }
body.public-site .kontakt-hours h3 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-soft); margin-bottom: 10px; }
.kontakt-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.kontakt-hours dt { font-weight: 600; color: var(--color-text); }
.kontakt-hours dd { margin: 0; color: var(--color-text-soft); }
.kontakt-hours .kontakt-hours-full { grid-column: 1 / -1; }
.kontakt-location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; }
.kontakt-route { font-weight: 600; color: var(--color-primary-dark); }
.kontakt-route:hover { text-decoration: underline; }

.kontakt-form-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.kontakt-form-intro p { color: var(--color-text-soft); max-width: 42ch; }
.kontakt-form-call { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.kontakt-form-call a { font-weight: 600; color: var(--color-primary-dark); }
.kontakt-form-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; padding: clamp(22px, 3.5vw, 40px); }
form.contact-form.kontakt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; align-items: end; /* Felder bündig, auch wenn eine Beschriftung umbricht */ }
.kontakt-form-full { grid-column: 1 / -1; }
.kontakt-form .btn { width: 100%; justify-content: center; }
.kontakt-form-success { margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--color-primary) 10%, white); color: var(--color-primary-dark); font-weight: 600; }

@media (max-width: 860px) {
  .kontakt-location-grid, .kontakt-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  form.contact-form.kontakt-form { grid-template-columns: 1fr; }
}

/* ---------- Rezensionen: Bewertungsformular als Karte mit Sterne-Auswahl ---------- */
.review-form-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-white);
}
.review-form-card h2 { margin-bottom: 8px; }
.review-form-intro { color: var(--color-text-soft); margin-bottom: 24px; }
.review-form .btn { width: 100%; }
.review-form .checkbox-row { display: flex; align-items: flex-start; gap: 12px; }
.review-form .checkbox-row input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; padding: 0; accent-color: var(--color-primary); }
.review-form .checkbox-row label { font-size: 0.88rem; font-weight: 400; color: var(--color-text-soft); margin: 0; }
.review-rating { border: 0; margin: 0; padding: 0; text-align: center; }
.review-rating legend { font-size: 0.88rem; font-weight: 600; margin: 0 auto 6px; }
/* Reihenfolge im HTML: 5..1, per row-reverse visuell 1..5 – so füllt "~" alle Sterne bis zum gewählten */
.review-form .review-rating-stars { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.review-form .review-rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.review-form .review-rating-stars label { font-size: 2.2rem; line-height: 1; color: var(--color-border); cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; margin: 0; }
.review-form .review-rating-stars label:hover,
.review-form .review-rating-stars label:hover ~ label,
.review-form .review-rating-stars input:checked ~ label { color: var(--color-primary); }
.review-form .review-rating-stars label:hover { transform: scale(1.12); }
.review-form .review-rating-stars input:focus-visible + label { outline: 2px solid var(--color-primary-dark); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Karriere: kompakter Kopf, Vorteile in einer Reihe, Stellen + Bewerbung nebeneinander ---------- */
.career-intro .script-tagline { margin-top: 14px; }
.parallax-photo.career-photo { min-height: clamp(220px, 30vw, 340px); }
.career-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.career-benefit { padding: 24px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); }
.career-benefit h3 { margin-bottom: 8px; }
.career-benefit p { font-size: 0.95rem; color: var(--color-text-soft); margin: 0; }
.career-quote { max-width: 760px; margin: clamp(36px, 5vw, 56px) auto 0; text-align: center; }
.career-quote blockquote { margin: 0 0 10px; font-family: var(--font-heading); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.5; color: var(--color-text); }
.career-quote figcaption { color: var(--color-text-soft); font-size: 0.92rem; }

.career-apply-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.career-jobs { display: grid; gap: 18px; }
.career-job { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); }
body.public-site .career-job h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 6px 0 10px; }
.career-job p { color: var(--color-text-soft); margin: 0; }
.career-job--empty { background: var(--color-bg-soft); border-color: transparent; }
.career-job-apply { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--color-primary-dark); }
body.public-site .career-form-heading { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 8px; }
.career-form-intro { color: var(--color-text-soft); margin-bottom: 32px; }

@media (max-width: 1000px) { .career-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .career-apply-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .career-benefits { grid-template-columns: 1fr; } }

/* ---------- Page Intro: kompakter, bildloser Seiten-Header (Karriere/Kontakt/Leistungen) ---------- */
body.public-site .page-intro {
  position: relative;
  padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 44px);
}
.page-intro-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.page-intro-inner .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.page-intro-inner h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0.5em 0 0;
}
.page-intro-inner .lead { margin-top: 16px; }


/* ---------- Hero Cinema (Startseite, Video wächst beim Scrollen bis fast Vollbild) ---------- */
body.public-site .hero-cinema { position: relative; padding: 0; margin-top: -87px; }
.hero-cinema-pin {
  position: relative;
  min-height: calc(100vh + 87px);
  overflow: hidden;
  isolation: isolate;
}
.hero-cinema-bg,
.hero-cinema-bg-dark {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-cinema-bg {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--color-sand) 55%, transparent), transparent 60%),
    var(--color-bg);
}
.hero-cinema-bg-dark {
  background: var(--color-dark);
  opacity: 0;
}

/* Linke Hälfte: Standorte, unten ausgerichtet */
.hero-cinema-left {
  position: absolute;
  inset: 0;
  width: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px clamp(24px, 5vw, 64px) 52px clamp(24px, 6vw, 96px);
}
.hero-cinema-locations-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: 12px;
}
.hero-cinema-locations-list { display: flex; flex-direction: column; gap: 4px; }
.hero-cinema-locations-list a {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color var(--transition);
}
.hero-cinema-locations-list a:hover { color: var(--color-primary); }

/* Titel: eine Textkopie dunkel (Basis) + eine weiße Kopie, die per clip-path exakt
   an der wachsenden Videokante freigegeben wird – beide Kopien sind identisch
   aufgebaut/positioniert, können sich also nie sichtbar gegeneinander verschieben. */
.hero-cinema-titles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-cinema-title-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: translateY(-8%);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-h1);
  font-size: clamp(2.4rem, 5.8vw, 4.7rem);
  line-height: 1.05;
}
.hero-cinema-title-copy p { margin: 0; color: inherit; }
.hero-cinema-title-copy em { font-style: italic; }
.hero-cinema-title-base {
  color: var(--color-text);
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.hero-cinema-title-white {
  color: var(--color-white);
  clip-path: inset(0 0 0 50%);
  will-change: clip-path;
}

/* Rechte Hälfte: Video, wächst beim Scrollen */
.hero-cinema-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  overflow: hidden;
  will-change: width;
}
.hero-cinema-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cinema-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--color-dark) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-dark) 68%, transparent) 45%,
    color-mix(in srgb, var(--color-dark) 48%, transparent) 68%,
    color-mix(in srgb, var(--color-dark) 15%, transparent) 100%);
}
.hero-cinema-quote {
  position: absolute;
  left: 6%;
  right: 44%;
  bottom: 132px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  line-height: 1.35;
}
.hero-cinema-caption {
  position: absolute;
  right: 6%;
  bottom: 132px;
  max-width: 230px;
  margin: 0;
  text-align: right;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  line-height: 1.5;
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-hero-fade] {
  animation: hero-fade-up 0.9s ease-out both;
}
@keyframes hero-title-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-cinema-title-copy { animation: hero-title-fade-up 0.9s ease-out both; animation-delay: 0.05s; }
@media (min-width: 901px) {
  .hero-cinema-title-copy { animation-name: hero-title-fade-up-desktop; }
}
@keyframes hero-title-fade-up-desktop {
  from { opacity: 0; transform: translateY(calc(-8% + 20px)); }
  to { opacity: 1; transform: translateY(-8%); }
}
.hero-cinema-locations { animation-delay: 0.2s; }
.hero-cinema-quote { animation-delay: 0.35s; }
.hero-cinema-caption { animation-delay: 0.45s; }

@media (max-width: 900px) {
  .hero-cinema { margin-top: 0; }
  .hero-cinema-pin {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: 116px;
  }
  .hero-cinema-bg-dark { display: none; }

  .hero-cinema-titles { position: relative; inset: auto; order: 1; padding: 0 20px; }
  .hero-cinema-title-white { display: none; }
  .hero-cinema-title-base { position: relative; inset: auto; width: 100%; transform: none; clip-path: none; }

  .hero-cinema-left { position: relative; inset: auto; width: 100%; order: 2; padding: 20px 20px 0; }

  .hero-cinema-video {
    position: relative;
    inset: auto;
    width: calc(100% - 40px);
    order: 3;
    margin: 28px auto 48px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-bg-dark { opacity: 0 !important; }
  [data-hero-fade] { animation: none; opacity: 1; transform: none; }
  .hero-cinema-title-copy { animation: none; opacity: 1; }
}

/* ---------- Header: transparent über dem Hero, solide sobald darüber hinaus gescrollt ---------- */
body.public-site .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
}
body.public-site.header-solid .site-header {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--color-border);
}

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- data-fx: deklarative Scroll-Effekte (Vanilla JS, kein GSAP/Lenis) ----------
   <p data-fx="fade-up" data-fx-delay="0.2">…</p>
   Werte: fade, fade-up, fade-down, fade-left, fade-right, zoom, lines, chars, fill
   Feinjustierung per data-fx-delay / -duration / -distance (Sekunden/Pixel). */
[data-fx] {
  --fx-duration: 0.7s;
  --fx-delay: 0s;
  --fx-distance: 24px;
  --fx-ease: cubic-bezier(.22,.61,.36,1);
}
[data-fx="fade"],
[data-fx="fade-up"],
[data-fx="fade-down"],
[data-fx="fade-left"],
[data-fx="fade-right"],
[data-fx="zoom"] {
  opacity: 0;
  transition: opacity var(--fx-duration) var(--fx-ease) var(--fx-delay),
              transform var(--fx-duration) var(--fx-ease) var(--fx-delay);
}
[data-fx="fade-up"]    { transform: translateY(var(--fx-distance)); }
[data-fx="fade-down"]  { transform: translateY(calc(-1 * var(--fx-distance))); }
[data-fx="fade-left"]  { transform: translateX(var(--fx-distance)); }
[data-fx="fade-right"] { transform: translateX(calc(-1 * var(--fx-distance))); }
[data-fx="zoom"]       { transform: scale(0.94); }
[data-fx].fx-in        { opacity: 1; transform: none; }
html[dir="rtl"] [data-fx="fade-left"]  { transform: translateX(calc(-1 * var(--fx-distance))); }
html[dir="rtl"] [data-fx="fade-right"] { transform: translateX(var(--fx-distance)); }

[data-fx="lines"] .fx-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
[data-fx="lines"] .fx-line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--fx-duration) var(--fx-ease) var(--fx-delay);
}
[data-fx="lines"].fx-in .fx-line-inner { transform: none; }

.fx-word { display: inline-block; }
.fx-char { display: inline-block; }
[data-fx="chars"] .fx-char {
  opacity: 0;
  transform: translateY(calc(var(--fx-distance) * 0.4));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
[data-fx="chars"].fx-in .fx-char { opacity: 1; transform: none; }

[data-fx="fill"] .fx-char {
  color: color-mix(in srgb, var(--color-text) 18%, transparent);
  transition: color 0.15s linear;
}
[data-fx="fill"] .fx-char.is-filled { color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  [data-fx] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-fx="lines"] .fx-line-inner { transform: none !important; }
  [data-fx="chars"] .fx-char { opacity: 1 !important; transform: none !important; }
  [data-fx="fill"] .fx-char { color: var(--color-text) !important; transition: none !important; }
}

/* ---------- Anfahrtskarte (Kontakt) ---------- */
.map-list { display: flex; flex-direction: column; gap: 24px; }
.map-embed { border: 1px solid var(--color-border); overflow: hidden; }
.map-embed iframe { display: block; }
.map-embed-label {
  display: block;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-soft);
}

/* ---------- Image placeholder ---------- */
.img-placeholder {
  background: linear-gradient(135deg, var(--color-bg-soft), #E7DCC6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  padding: 24px;
  min-height: 220px;
}

.img-placeholder .ph-icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 8px;
}


/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  padding: 32px 0 0;
  transition: border-color var(--transition);
}

.card h3 { margin-bottom: 0.5em; }
.card p { margin-bottom: 0; }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-icon-bg);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

body.public-site .card:hover {
  border-top-color: var(--color-primary);
}

/* ---------- Service-Karte mit Bild (Leistungen: Highlights nebeneinander) ---------- */
.service-card { border-top: none; padding-top: 0; }
.service-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-bg-soft);
}
.service-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.service-card:hover .service-card-media img { transform: scale(1.05); }
.service-card .tag { margin-bottom: 14px; }

/* ---------- Leistungskachel (Seite "Leistungen") ----------
   Normal: Bild mit leichtem Verlauf, Etikett oben, Titel unten. Hover/Fokus: Bild unscharf und
   dunkler, Inhalt wandert in die Mitte (Spacer-flex-grow wird animiert), Text + Link blenden ein. */
.service-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px; /* bewusst rund, abweichend vom eckigen --radius der Seite */
  overflow: hidden;
  isolation: isolate;
  background: var(--color-text);
  color: var(--color-white);
  text-decoration: none;
}
.service-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: filter 0.5s ease, transform 0.6s ease;
}
.service-tile-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 18, 16, 0.7) 0%, rgba(20, 18, 16, 0.25) 45%, rgba(20, 18, 16, 0.35) 100%);
  transition: background-color 0.5s ease;
}
.service-tile-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 30px);
}
.service-tile-spacer { flex: 0 0 0; transition: flex-grow 0.5s ease; }
.service-tile-spacer--mid { flex-grow: 1; }
.service-tile-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.service-tile-title { color: var(--color-white); margin: 0 0 8px; font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.service-tile-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 0.3s ease;
}
.service-tile-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s ease, opacity 0.4s ease; }
.service-tile-reveal-inner { overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.service-tile-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-tile-more {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-primary) 70%, white);
}
.service-tile-arrow { display: inline-block; margin-inline-start: 6px; transition: transform var(--transition); }
html[dir="rtl"] .service-tile-arrow { transform: scaleX(-1); }

.service-tile:hover .service-tile-img,
.service-tile:focus-visible .service-tile-img { filter: blur(10px) brightness(0.7); transform: scale(1.08); }
.service-tile:hover .service-tile-shade,
.service-tile:focus-visible .service-tile-shade { background-color: rgba(20, 18, 16, 0.45); }
.service-tile:hover .service-tile-spacer--top,
.service-tile:hover .service-tile-spacer--bottom,
.service-tile:focus-visible .service-tile-spacer--top,
.service-tile:focus-visible .service-tile-spacer--bottom { flex-grow: 1; }
.service-tile:hover .service-tile-spacer--mid,
.service-tile:focus-visible .service-tile-spacer--mid { flex-grow: 0; flex-basis: 14px; }
.service-tile:hover .service-tile-hint,
.service-tile:focus-visible .service-tile-hint { opacity: 0; height: 0; overflow: hidden; }
.service-tile:hover .service-tile-reveal,
.service-tile:focus-visible .service-tile-reveal { grid-template-rows: 1fr; opacity: 1; }
.service-tile:hover .service-tile-arrow { transform: translateX(4px); }
.service-tile:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .service-tile *, .service-tile-img { transition: none !important; }
}

/* Komplett klickbare Karte (Team, Leistungen) mit "Mehr erfahren"-Zeile */
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover h3,
.card-link:focus-visible h3 { color: var(--color-primary-dark); }
.card-more { display: inline-block; margin-top: 4px; font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.card-link:hover .card-more { text-decoration: underline; }

/* Leistungen-Slider der Startseite: ganze Zeile verlinkt, Pfeil am Titel */
a.tech-showcase-item { color: inherit; text-decoration: none; }
.tech-showcase-arrow { display: inline-block; margin-inline-start: 8px; color: var(--color-primary); transition: transform var(--transition); }
a.tech-showcase-item:hover .tech-showcase-arrow { transform: translateX(4px); }
html[dir="rtl"] .tech-showcase-arrow { transform: scaleX(-1); }

/* ---------- Detailseite einer Leistung ---------- */
.service-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.service-detail--no-media { grid-template-columns: minmax(0, 720px); justify-content: center; }
.service-detail-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.service-detail-text { white-space: pre-line; font-size: 1.05rem; }
.service-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.service-detail-back { display: inline-block; margin-bottom: 28px; font-weight: 600; color: var(--color-primary-dark); }
@media (max-width: 800px) {
  .service-detail { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Team ---------- */
.team-card { text-align: center; }
.team-card .img-placeholder {
  min-height: 240px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  margin: 0 auto 18px;
}
.team-card h3 { margin-bottom: 0.2em; }

/* ---------- Profilseite eines Teammitglieds ---------- */
.team-profile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: start; }
.team-profile-photo img,
.team-profile-photo .img-placeholder { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); }
.team-profile-photo { position: sticky; top: 120px; }
.team-profile-role { color: var(--color-primary); font-weight: 600; margin-bottom: 18px; }
.team-profile-teaser { font-size: 1.15rem; margin-bottom: 24px; }
/* Zeilenumbrüche aus dem Admin-Textfeld (Absätze, Aufzählungen) beibehalten */
.team-profile-bio { white-space: pre-line; }
.team-profile-back { display: inline-block; margin-bottom: 28px; font-weight: 600; color: var(--color-primary-dark); }
@media (max-width: 800px) {
  .team-profile { grid-template-columns: 1fr; gap: 28px; }
  .team-profile-photo { position: static; max-width: 360px; }
}
.team-role { color: var(--color-primary); font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; }

/* ---------- Quote ---------- */
.quote-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 16px;
}
.quote-block blockquote em { font-style: italic; }

/* ---------- Karriere: Bewerbungsformular (minimal, elegant) ---------- */
.application-form { display: flex; flex-direction: column; gap: 34px; }
.application-form .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
}
@media (max-width: 640px) {
  .application-form .form-grid-2 { grid-template-columns: 1fr; gap: 34px; }
}
.application-form label {
  font-size: 0.95rem;
  color: var(--color-text-soft);
  display: block;
  margin-bottom: 12px;
}
.application-form input[type="text"],
.application-form input[type="email"],
.application-form input[type="tel"],
.application-form select,
.application-form textarea {
  width: 100%;
  padding: 4px 2px 12px;
  border: none;
  border-bottom: 1.5px solid var(--color-text);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  background: transparent;
  color: var(--color-text);
  transition: border-color 0.2s ease;
}
.application-form textarea { resize: vertical; min-height: 70px; }
.application-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23656262' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
  cursor: pointer;
}
html[dir="rtl"] .application-form select {
  background-position: left 4px center;
  padding-right: 2px;
  padding-left: 26px;
}
.application-form input:focus,
.application-form select:focus,
.application-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.upload-field { position: relative; }
.upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}
.upload-btn:hover { background: var(--color-text); }
.upload-btn-icon { font-size: 1.05rem; line-height: 1; }
.upload-row .form-note { margin: 0; }
.file-drop-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.application-form .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.application-form .checkbox-row input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--color-text);
  border: 1.5px solid var(--color-text);
  flex-shrink: 0;
}
.application-form .checkbox-row label {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0;
}
.application-form-submit {
  align-self: flex-start;
  border-radius: 999px;
  padding: 15px 40px;
  font-size: 1rem;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .application-form-submit { align-self: stretch; }
}

/* ---------- Karriere: fixiertes Foto (Parallax) ---------- */
.parallax-photo {
  min-height: clamp(320px, 52vw, 480px);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 820px) {
  /* iOS Safari unterstützt background-attachment:fixed nicht zuverlässig */
  .parallax-photo { background-attachment: scroll; }
}

.script-tagline {
  font-family: 'Caveat', var(--font-heading);
  font-size: 2.1rem;
  color: var(--color-primary-dark);
  text-align: center;
  margin: 22px 0 0;
}
html[dir="rtl"] .script-tagline {
  font-family: var(--font-heading);
  font-style: italic;
}

/* ---------- Unser Ziel (Philosophie + Team-Vorschau), gepinnt beim Scrollen ---------- */
body.public-site .our-goal {
  position: relative;
  padding: 0;
  background: var(--color-bg-soft);
  min-height: calc(100vh + 95vh);
}
.our-goal-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 88px 0;
}
.our-goal-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  width: 100%;
}
.our-goal-right { position: relative; }
.our-goal-label {
  margin: 40px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  transition: opacity 0.2s linear;
}
.our-goal-portrait {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 2;
  transform-origin: center top;
  will-change: transform;
}
.our-goal-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platzhalter, solange kein eigenes Porträt hochgeladen ist (Startseite "Unser Ziel", Über uns) */
.portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: 0.9rem;
}
.about-hero-portrait .portrait-placeholder { aspect-ratio: 4 / 5; }
.our-goal-intro { max-width: 60ch; font-size: 1.05rem; transition: opacity 0.2s linear; }

.our-goal-statement {
  font-family: var(--font-display);
  font-weight: var(--weight-h1);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.35;
  max-width: 760px;
  margin: 0 0 32px;
  transition: opacity 0.2s linear;
}
.our-goal-statement em { font-style: italic; }

.our-goal-about {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
  transition: opacity 0.2s linear;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .our-goal-about {
    position: static;
    display: block;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
  }
}
.our-goal-about .eyebrow { margin-bottom: 0.6em; }
.our-goal-about h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.our-goal-about .lead { font-size: 1rem; margin-bottom: 24px; }

.btn-about {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 4px;
}
.btn-about-icon { transition: transform var(--transition); }
.btn-about:hover .btn-about-icon { transform: translateX(4px); }
html[dir="rtl"] .btn-about-icon { transform: scaleX(-1); }
html[dir="rtl"] .btn-about:hover .btn-about-icon { transform: scaleX(-1) translateX(4px); }

@media (max-width: 900px) {
  .our-goal { min-height: auto; }
  .our-goal-pin { position: relative; top: auto; min-height: auto; }
}

@media (max-width: 760px) {
  .our-goal-grid { grid-template-columns: 1fr; }
  .our-goal-label { margin-bottom: 8px; }
}

/* ---------- Leistungen: Sticky Bild + Scroll-aktive Liste (Bildspalte randlos) ---------- */
.tech-showcase-grid {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  align-items: start;
}
.tech-showcase-media {
  position: relative;
  height: clamp(420px, 46vw, 600px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
}
@media (min-width: 861px) {
  .tech-showcase-grid.is-pinned .tech-showcase-media {
    position: sticky;
    top: 110px;
  }
}
.tech-showcase-counter {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-white);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.tech-counter-current { font-family: var(--font-display); font-size: 1.6rem; }
.tech-counter-total { font-size: 0.85rem; opacity: 0.8; }
.tech-showcase-images { position: relative; width: 100%; height: 100%; }
.tech-showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.tech-showcase-img.active { opacity: 1; transform: translateY(0); }
/* Verlässt aktiv den Rahmen nach oben, statt einfach zurück in die Ruheposition (unten)
   zu springen – dadurch bewegen sich altes und neues Bild konsistent von unten nach oben. */
.tech-showcase-img.leaving { opacity: 0; transform: translateY(-100%); }
.tech-showcase-label {
  position: absolute;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

.tech-showcase-list {
  display: flex;
  flex-direction: column;
  padding-inline: clamp(24px, 5vw, 64px) var(--space-gutter);
}
.tech-showcase-item {
  padding: 48px 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 0.4s ease;
  box-sizing: border-box;
}
.tech-showcase-item:last-child { border-bottom: 1px solid var(--color-border); }
.tech-showcase-item.active { opacity: 1; }
.tech-showcase-item h3 { margin-bottom: 12px; }
.tech-showcase-item p { max-width: 60ch; }
.tech-showcase-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  border-bottom: 1px solid currentColor;
}

@media (max-width: 860px) {
  .tech-showcase-grid { grid-template-columns: 1fr; }
  .tech-showcase-media { position: relative; top: auto; height: 320px; margin-bottom: 8px; }
  .tech-showcase-list { padding-inline: var(--space-gutter); }
}

/* ---------- Team (Startseite): versetzte Galerie-Wand ("Atelier") ----------
   Drei schmale Spalten mit viel Luft, die mittlere nach unten versetzt (per margin, nicht
   transform – transform gehört der Einblend-Animation), Bildhöhen im Wechsel. Einblenden:
   Kachel schwebt von unten herein und wird aufgedeckt, das Foto zoomt dabei auf 1 zurück;
   --i (Spaltenindex) staffelt die Verzögerung innerhalb einer Reihe. Name und Funktion
   blenden bei Hover/Fokus ein, auf Touch-Geräten (kein Hover) sind sie immer sichtbar. */
.team-atelier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 72px) clamp(28px, 4.5vw, 64px);
  align-items: start;
  max-width: 860px;
  margin: 0 auto;
}
.team-atelier-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-soft);
  color: var(--color-white);
  text-decoration: none;
}
.team-atelier-item:nth-child(even) { aspect-ratio: 3 / 4; }
.team-atelier-item:nth-child(3n + 2) { margin-top: 80px; }
.team-atelier-img,
.team-atelier-item .img-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; border: none; border-radius: 0; }

/* Einblenden (überschreibt die Standardwerte von .reveal nur für diese Kacheln) */
.team-atelier-item.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  clip-path: inset(18% 0 0 0);
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 0.15s);
}
.team-atelier-item.reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.team-atelier-item.reveal .team-atelier-img {
  transform: scale(1.18);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  transition-delay: calc(var(--i, 0) * 0.15s);
}
.team-atelier-item.reveal.is-visible .team-atelier-img { transform: scale(1); }

.team-atelier-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(20, 18, 16, 0.75), rgba(20, 18, 16, 0));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.team-atelier-caption strong { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.team-atelier-caption span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.team-atelier-item.is-visible:hover .team-atelier-img,
.team-atelier-item.is-visible:focus-visible .team-atelier-img { transform: scale(1.05); filter: brightness(0.92); transition-delay: 0s; }
.team-atelier-item:hover .team-atelier-caption,
.team-atelier-item:focus-visible .team-atelier-caption { opacity: 1; transform: none; }
.team-atelier-item:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (hover: none) {
  .team-atelier-caption { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .team-atelier-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; max-width: 520px; }
  .team-atelier-item:nth-child(3n + 2) { margin-top: 0; }
  .team-atelier-item:nth-child(even) { margin-top: 48px; }
  .team-atelier-item.reveal { transition-delay: calc(var(--i, 0) * 0.08s); }
  .team-atelier-caption { padding: 28px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-atelier-item.reveal,
  .team-atelier-item.reveal .team-atelier-img { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---------- Leistungen (Startseite): kompletter Block friert beim Scrollen ein
   (Ueberschrift + Bild + Liste + Button bleiben fix stehen), die Optik (Crossfade-Bild,
   gedimmte Liste) bleibt exakt wie beim regulaeren .tech-showcase-grid - nur die Umschalt-
   Mechanik ist anders (Scroll-Fortschritt statt physischem Durchscrollen der Liste). ---------- */
body.public-site .services-showcase {
  position: relative;
  padding: 0;
  background: var(--color-bg);
  min-height: calc(100vh + (var(--services-count, 1) - 1) * 30vh);
}
.services-showcase-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 40px 0;
}
.tech-showcase-grid.frozen-grid { align-items: center; }
.tech-showcase-grid.frozen-grid .tech-showcase-media { position: relative !important; top: auto; height: clamp(280px, 27vw, 380px); }
.tech-showcase-grid.frozen-grid .tech-showcase-item { min-height: 0; padding: 8px 0; }
.tech-showcase-grid.frozen-grid .tech-showcase-item h3 { margin-bottom: 4px; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .services-showcase { min-height: auto; }
  .services-showcase-pin { position: relative; top: auto; min-height: auto; overflow: visible; padding: 0; }
}

/* Ausstattung als kompakter Anhang direkt unter dem Leistungen-Block der Startseite */
body.public-site .services-equipment { background: var(--color-bg); padding: 8px 0 72px; }
.services-equipment-heading { text-align: center; margin-bottom: 24px; }
.services-equipment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.services-equipment-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-white);
}
.services-equipment-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 600px) {
  .services-equipment-img { aspect-ratio: 16 / 9; }
}
.services-equipment-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.services-equipment-body p { font-size: 0.92rem; line-height: 1.55; color: var(--color-text-soft); margin: 0; }
.services-equipment-devices {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* ---------- Carousel: wiederverwendbarer Prev/Next-Slider ---------- */
.carousel {
  position: relative;
  padding-inline: var(--space-gutter);
}
.carousel-viewport {
  overflow: hidden;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.carousel-slide .card { padding-inline: 4px; }
.carousel-slide .card img {
  width: 100%;
  height: clamp(240px, 30vw, 380px);
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.carousel-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.carousel-arrow--prev { inset-inline-start: -4px; }
.carousel-arrow--next { inset-inline-end: -4px; }
html[dir="rtl"] .carousel-arrow--prev,
html[dir="rtl"] .carousel-arrow--next { transform: translateY(-50%) scaleX(-1); }

@media (max-width: 640px) {
  .carousel { padding-inline: 44px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.1rem; }
  .carousel-arrow--prev { inset-inline-start: 0; }
  .carousel-arrow--next { inset-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}

.tag {
  display: inline-block;
  background: var(--color-sand);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
}

/* ---------- Über mich: Fakten & Werdegang ---------- */
.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact-list li {
  position: relative;
  padding-block-end: 22px;
  padding-inline-start: 30px;
  margin-bottom: 22px;
  border-inline-start: 2px solid var(--color-border);
}
.fact-list li:last-child { margin-bottom: 0; padding-bottom: 0; }
.fact-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
}
.fact-list strong {
  display: block;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.fact-list span { color: var(--color-text-soft); font-size: 0.95rem; }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pill-list a { color: inherit; text-decoration: none; }
.pill-list a:hover { color: var(--color-primary-dark); }
.pill-list li {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.94rem;
  font-weight: 500;
}

/* ---------- Kontakt: Standorte ---------- */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 700px) { .locations-grid { grid-template-columns: 1fr; } }

.location-card h3 { margin-bottom: 4px; }
.location-card .tag { margin-bottom: 14px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.info-list { list-style: none; padding: 0; margin: 0 0 24px; }
.info-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.info-list li:last-child { border-bottom: none; }
.info-list strong { display: block; color: var(--color-text); }

form.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  background: var(--color-white);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.form-note { font-size: 0.85rem; color: var(--color-text-soft); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 em { font-style: italic; }
.cta-band .btn-outline { border-color: var(--color-white); color: var(--color-white); }
.cta-band .btn-outline:hover { background: var(--color-white); color: var(--color-dark); }

/* Telefonnummern immer links-nach-rechts darstellen (sonst werden sie auf Arabisch gespiegelt) */
a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* ---------- Footer ----------
   Heller Abschnitt "Besuchen Sie uns" + Terminanfrage über dem dunklen Footer. Der dunkle
   Footer: Verlaufslinie in Praxis-Orange, drei Spalten (Marke/Adressen, Kontakt, Navigation)
   und eine schmale Leiste mit Copyright, Rechtlichem und Credit. */
.footer-visit {
  background: var(--color-bg-soft);
  padding: var(--space-section) 0;
}
.footer-contact-block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.footer-contact-block .location-card {
  background: var(--color-white);
  border: none;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 44px -28px rgba(28, 25, 23, 0.25);
}
.footer-contact-block .contact-form input,
.footer-contact-block .contact-form select,
.footer-contact-block .contact-form textarea {
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(28, 25, 23, 0.06);
}
.footer-contact-block .contact-form input:focus,
.footer-contact-block .contact-form select:focus,
.footer-contact-block .contact-form textarea:focus {
  box-shadow: 0 0 0 2px var(--color-primary);
}

.site-footer {
  /* Warmes Espresso-Braun aus der Familie des Praxis-Orange statt Schwarz, Texte in Creme */
  --footer-bg: #2B211C;
  --footer-text: rgba(250, 246, 240, 0.72);
  --footer-text-strong: #FAF6F0;
  --footer-muted: rgba(250, 246, 240, 0.45);
  --footer-border: rgba(250, 246, 240, 0.12);
  /* Durchgehender Verlauf über den ganzen Footer: unten links dunkel (#2B211C) → oben rechts hell
     (#FBF1EA). Bis ~30 % bleibt es dunkel, damit Standorte/Kontakt/Navigation in Creme lesbar sind;
     rechts (Logo, Leitsatz, Credit) ist es hell, dort stehen die Texte dunkel. "in oklch" hält den
     Übergang warm und gleichmäßig (Fallback ohne für ältere Browser). */
  background: linear-gradient(70deg, var(--footer-bg) 0%, var(--footer-bg) 42%, #FBF1EA 100%);
  background: linear-gradient(in oklch 70deg, var(--footer-bg) 0%, var(--footer-bg) 42%, #FBF1EA 100%);
  color: var(--footer-text);
  padding: clamp(48px, 6vw, 72px) 0 0;
}
/* Ohne hellen Abschnitt davor (Kontaktseite) braucht der Footer selbst Abstand zum Inhalt */
.footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 80%, transparent) 50%, transparent);
  margin-bottom: clamp(48px, 6vw, 72px);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.footer-brand { text-align: end; justify-self: end; }
/* RTL: Spalten sind gespiegelt, das Logo steht links – das Helle des Verlaufs wandert mit */
html[dir="rtl"] .site-footer {
  background: linear-gradient(-70deg, var(--footer-bg) 0%, var(--footer-bg) 42%, #FBF1EA 100%);
  background: linear-gradient(in oklch -70deg, var(--footer-bg) 0%, var(--footer-bg) 42%, #FBF1EA 100%);
}
.footer-logo { display: inline-block; }
.footer-logo img { height: 52px; width: auto; display: block; margin-bottom: 18px; }
.footer-tagline { max-width: 34ch; margin-inline-start: auto; line-height: 1.7; color: var(--color-text); }
body.public-site .footer-heading--follow { margin-top: 28px; margin-bottom: 14px; }
.footer-addresses { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.footer-addresses li { display: flex; gap: 12px; line-height: 1.6; }
.footer-addresses svg { color: var(--color-primary); flex-shrink: 0; margin-top: 4px; }
.footer-addresses strong { display: block; font-weight: 600; color: var(--footer-text-strong); }
.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--footer-border);
  border-radius: 10px;
  color: var(--footer-text);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: border-color var(--transition), color var(--transition);
}
.footer-instagram:hover { border-color: var(--color-primary); color: var(--footer-text-strong); }

body.public-site .footer-heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 26px;
}
.footer-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.footer-contact-list li { display: flex; align-items: center; gap: 14px; }
.footer-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(250, 246, 240, 0.08);
  color: color-mix(in srgb, var(--color-primary) 75%, white);
}
.footer-contact-list span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
.footer-contact-list small { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--footer-muted); }
.footer-contact-list a { color: var(--footer-text-strong); font-size: 1rem; }
.footer-contact-list a:hover { color: var(--color-primary); }

.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-nav a { display: inline-flex; align-items: center; gap: 10px; color: var(--footer-text); transition: color var(--transition); }
.footer-nav a::before { content: "→"; font-size: 0.8rem; color: var(--footer-muted); transition: transform var(--transition), color var(--transition); }
html[dir="rtl"] .footer-nav a::before { content: "←"; }
.footer-nav a:hover { color: var(--footer-text-strong); }
.footer-nav a:hover::before { color: var(--color-primary); transform: translateX(3px); }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--footer-border);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--footer-muted);
}
.footer-legal-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.footer-legal-links a { color: var(--footer-muted); text-transform: uppercase; letter-spacing: 0.14em; }
.footer-legal-links a:hover { color: var(--footer-text-strong); }
.footer-credit { justify-self: end; color: var(--color-text-soft); } /* liegt im hellen Bereich */
.footer-credit a { color: var(--color-primary-dark); font-weight: 600; }

@media (max-width: 900px) {
  /* Schmale Screens: Marke zuerst oben im hellen Band, darunter alles im dunklen Bereich */
  .site-footer {
    background: linear-gradient(195deg, #FBF1EA 0, #EBD6C8 190px, var(--footer-bg) 380px, var(--footer-bg) 100%);
    background: linear-gradient(in oklch 195deg, #FBF1EA 0, #EBD6C8 190px, var(--footer-bg) 380px, var(--footer-bg) 100%);
  }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; order: -1; justify-self: start; text-align: start; margin-bottom: 64px; }
  .footer-tagline { margin-inline-start: 0; }
}
@media (max-width: 600px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-credit { justify-self: center; }
}

/* ---------- Legal pages ---------- */
.legal-content h2 { margin-top: 1.6em; }
.legal-content { max-width: 760px; }
.legal-content mark {
  background: #F3E3C8;
  padding: 0 4px;
  border-radius: 3px;
}

/* ---------- Aufnahmebogen (Patienten-Fragebogen) ---------- */
.wizard-body { background: var(--color-bg); margin: 0; }
.wizard-header {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
}
.wizard-header-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.wizard-logo img { height: 36px; width: auto; }
.wizard-header-title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-text); }

.wizard-main { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }

.wizard-breadcrumb {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-bottom: 20px;
}
.wizard-breadcrumb a { color: var(--color-primary-dark); }
.wizard-breadcrumb span { margin: 0 6px; }

.wizard-card-wrap { display: flex; justify-content: center; }
.wizard-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 700px;
}
.wizard-card h1 { margin-bottom: 24px; }
.wizard-card--center { text-align: center; padding: 56px 40px; }

.wizard-subheading { font-size: 1.05rem; margin: 28px 0 12px; }
.wizard-hint { font-weight: 600; font-size: 0.92rem; color: var(--color-text); margin: 20px 0 10px; }

.wizard-field { margin-bottom: 20px; }
.wizard-field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.wizard-field input[type="text"],
.wizard-field input[type="date"],
.wizard-field input[type="tel"],
.wizard-field input[type="email"],
.wizard-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-soft);
  font-family: var(--font-body);
  font-size: 0.98rem;
}
.wizard-field textarea { resize: vertical; }
.wizard-error { color: #b3261e; font-size: 0.85rem; margin-top: 4px; }

.wizard-checkbox-field { margin-bottom: 18px; }
.wizard-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.wizard-checkbox input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.wizard-checkbox-field input[type="tel"],
.wizard-checkbox-field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-soft);
  font-family: var(--font-body);
  font-size: 0.98rem;
}

.wizard-plain-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  margin-bottom: 12px;
}
.wizard-plain-checkbox input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.wizard-radio-group { display: flex; gap: 24px; }

.wizard-conditions { display: flex; flex-direction: column; }
.wizard-condition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.wizard-condition-label { font-size: 0.98rem; }
.wizard-condition-hint { font-size: 0.85rem; color: var(--color-text-soft); margin-top: 4px; }
.wizard-followup {
  padding: 4px 0 12px 16px;
  border-left: 3px solid var(--color-primary);
  margin: 12px 0 8px;
}
.wizard-followup .wizard-hint { margin-top: 4px; }
.wizard-followup .wizard-field { margin: 12px 0 0; }
[data-show-if][hidden] { display: none; }
.wizard-field input[type="file"] { font-family: var(--font-body); font-size: 0.92rem; }
.wizard-upload-current { font-size: 0.92rem; margin: 0 0 10px; }

.jn-toggle { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.jn-option { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; color: var(--color-text-soft); }
.jn-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jn-box {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  transition: all 0.15s ease;
}
.jn-option input:checked + .jn-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.jn-option input:focus-visible + .jn-box { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }

.wizard-details-label { display: block; font-weight: 600; font-size: 0.9rem; margin: 20px 0 8px; }
.wizard-conditions textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-soft);
  font-family: var(--font-body);
  font-size: 0.98rem;
  resize: vertical;
}

.wizard-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.6;
}
.wizard-consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; }

.wizard-summary-section { margin-bottom: 24px; }
.wizard-summary-section h3 {
  font-size: 1rem;
  background: var(--color-bg-soft);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.wizard-summary-list { margin: 0; }
.wizard-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.wizard-summary-row dt { color: var(--color-text-soft); }
.wizard-summary-row dd { margin: 0; font-weight: 600; text-align: right; }

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.wizard-progress { flex: 1; min-width: 180px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wizard-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.wizard-progress-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.2s ease; }
.wizard-progress-label { font-size: 0.78rem; color: var(--color-text-soft); }

.wizard-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-primary-dark);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

@media (max-width: 640px) {
  .wizard-card { padding: 24px; }
  .wizard-nav { flex-direction: column; }
  .wizard-progress { order: 3; width: 100%; }
  .wizard-back, .wizard-forward { width: 100%; text-align: center; }
}

/* ---------- Schwebender Button: Aufnahmebogen ---------- */
.intake-fab {
  position: fixed;
  bottom: 56px;
  inset-inline-end: 24px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
}
.intake-fab:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.intake-fab svg { flex-shrink: 0; }

@media (max-width: 640px) {
  .intake-fab {
    bottom: 32px;
    inset-inline-end: 16px;
    padding: 13px;
  }
  .intake-fab span { display: none; }
}