:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --text: #1d1d1f;
  --text-muted: #6e6e73;
  --accent: #6cbf4b;
  --accent-dark: #4f9c33;
  --border: #d2d2d7;
  --radius: 18px;
  --max-width: 1100px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

/* height:auto ist Pflicht, seit die Bilder feste width/height-Attribute
   tragen (gegen Layoutspruenge) – sonst werden sie schmal gequetscht. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

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

/* Header */
header.site {
  position: sticky;
  top: 0;
  /* ueber dem Podcast-Hinweis (z-index 100): sonst verdeckt dieser das
     geoeffnete Sprachmenue und die Navigation. */
  z-index: 120;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

/* width:auto ist noetig, seit die Bilder feste width-Attribute tragen –
   sonst zieht das Attribut das Logo in die Breite. */
.nav-row .logo img { height: 46px; width: auto; }

nav.primary { display: flex; gap: 18px; }
nav.primary a {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent-dark);
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
nav.primary a:hover { opacity: 1; transform: translateY(-1px); }
nav.primary a.active {
  opacity: 1;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.nav-right { display: flex; align-items: center; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-outline { border-color: var(--border); background: transparent; }
.btn-outline:hover { border-color: var(--text-muted); }

/* Language switcher */
.lang-switch { position: relative; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 980px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}
.lang-btn .globe { font-size: 16px; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  min-width: 220px;
  padding: 8px;
  max-height: min(78vh, 620px);   /* alle 11 Sprachen muessen sichtbar sein */
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.lang-menu.open { display: flex; }
.lang-menu button,
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.lang-menu button:hover,
.lang-menu a:hover { background: var(--bg-soft); }
.lang-menu a.current {
  font-weight: 600;
  color: var(--accent-dark);
  cursor: default;
  background: rgba(108,191,75,0.1);
  border-radius: 8px;
}
.lang-sep {
  border-top: 1px solid var(--border);
  margin: 6px 10px;
}

/* RTL-Feinschliff (Arabisch/Persisch) */
/* Header-Bedienelemente bleiben in JEDER Sprache physisch rechts:
   die Zeile selbst laeuft LTR, nur die Beschriftungen rendern bidirektional. */
[dir="rtl"] .nav-row { direction: ltr; }
[dir="rtl"] .lang-menu button,
[dir="rtl"] .lang-menu a { text-align: right; }
[dir="rtl"] .split .steps li:hover { padding-left: 0; padding-right: 10px; }
.lang-menu .flag { font-size: 18px; }
.lang-menu .native { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.lang-note {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Hero */
.hero {
  padding: 64px 0 72px;
  text-align: center;
}
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 52px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  flex-wrap: wrap;
}
.trust-bar .stars {
  color: #f5a623;
  letter-spacing: 3px;
  font-size: 30px;
}
.trust-bar .trust-badge { height: 76px; width: auto; }
.trust-bar .trust-divider { color: var(--border); }

.greeting-rotator {
  font-size: 38px;
  color: var(--accent-dark);
  height: 50px;
  margin-bottom: 18px;
  font-weight: 700;
}
.greeting-rotator.pop { animation: greeting-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes greeting-pop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  line-height: 1.05;
}
.hero p.lead {
  font-size: 21px;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 36px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-bottom: 56px; }
.hero-image {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}
.hero-image img { width: 100%; }

.testimonial {
  max-width: 560px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  font-style: italic;
  padding: 0;
}
.testimonial p::before,
.testimonial p::after { content: none; }

/* Sections */
section { padding: 88px 0; }
section.soft { background: var(--bg-soft); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 600;
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.section-head p { color: var(--text-muted); font-size: 17px; margin: 0; }

/* Card grid */
.grid {
  display: grid;
  /* min() verhindert, dass die Spalte breiter wird als der Platz –
     sonst schiebt ein Bild mit fester Groesse die Seite auseinander. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}
.card {
  --wave: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transform: translateY(calc(var(--wave) * -7px)) scale(calc(1 + var(--wave) * 0.018));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.10);
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffffff 0%, rgba(108,191,75,0.08) 100%);
}
.contact-form.card:hover { transform: none; box-shadow: none; }

/* Scroll-Reveal: Bloecke animieren beim Einscrollen */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-group .reveal:nth-child(7) { transition-delay: 0.48s; }

.split .steps li {
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-radius: 8px;
}
.split .steps li:hover {
  background: var(--bg-soft);
  padding-left: 10px;
}

.approach {
  transition: box-shadow 0.4s ease;
}
.approach:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.card h3 { font-size: 20px; margin: 0 0 10px; }
.device-tagline {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: -4px 0 10px;
}
.section-head .tagline {
  display: inline-block;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: 4px;
}
.card p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.card .price {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(108,191,75,0.12);
  padding: 4px 10px;
  border-radius: 8px;
}

/* Leistungs-Karten mit gerätespezifischem Effekt */
.device-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.device-photo {
  /* Randloses Bild ueber negative Raender statt calc(100% + x):
     die Prozentrechnung blaeht sonst die Rasterspalte auf kleinen
     Geraeten auf und schiebt die Seite seitlich heraus. */
  width: auto;
  margin: -32px -32px 20px;
  height: 140px;
  overflow: hidden;
}
.device-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.device-card:hover .device-photo img { transform: scale(1.06); }

.device-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  transition: transform 0.3s ease;
}
.device-card:hover .device-icon { transform: scale(1.12) rotate(-4deg); }

/* Sonderleistung Post-OP-Nachsorge (V9.2): dezenter Rosé-Akzent */
.device-postop .device-icon { background: rgba(199,91,146,0.12); color: #a8437a; }
.device-postop:hover { border-color: #c75b92; }

.device-shock .device-icon { background: rgba(245,166,35,0.14); color: #d98c00; }
.device-shock:hover { border-color: #f5a623; }
.device-shock:hover .device-icon { animation: shock-ripple 0.9s ease-out infinite; }
@keyframes shock-ripple {
  0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.45); }
  100% { box-shadow: 0 0 0 14px rgba(245,166,35,0); }
}

.device-laser .device-icon { background: rgba(220,60,60,0.12); color: #c62828; }
.device-laser:hover { border-color: #e05353; }
.device-laser:hover .device-icon { animation: laser-pulse 1s ease-in-out infinite; }
@keyframes laser-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,40,40,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(198,40,40,0); }
}

.device-magnet .device-icon { background: rgba(93,95,239,0.12); color: #4b4de0; }
.device-magnet:hover { border-color: #7274ef; }
.device-magnet:hover .device-icon { animation: magnet-field 1.6s ease-out infinite; }
@keyframes magnet-field {
  0% { box-shadow: 0 0 0 0 rgba(75,77,224,0.35), 0 0 0 0 rgba(75,77,224,0.2); }
  60% { box-shadow: 0 0 0 8px rgba(75,77,224,0), 0 0 0 16px rgba(75,77,224,0); }
  100% { box-shadow: 0 0 0 8px rgba(75,77,224,0), 0 0 0 16px rgba(75,77,224,0); }
}

.device-electro .device-icon { background: rgba(240,196,25,0.16); color: #b8890a; }
.device-electro:hover { border-color: #f0c419; }
.device-electro:hover .device-icon { animation: electro-flicker 0.6s steps(2, jump-none) infinite; }
@keyframes electro-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
  75% { opacity: 0.7; transform: scale(0.98); }
}

.device-cold {
  position: relative;
  isolation: isolate;
}
.device-cold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(255,255,255,0.7), transparent 40%),
    linear-gradient(160deg, rgba(143,214,247,0.35), rgba(47,143,194,0.25));
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.device-cold:hover::before { opacity: 1; transform: scale(1); }
.device-cold:hover { border-color: #6ec3ea; }
.device-cold .device-icon,
.device-cold h3,
.device-cold p,
.device-cold .price,
.device-cold .device-link {
  position: relative;
  z-index: 1;
}
.device-cold .device-icon {
  background: rgba(90,180,230,0.14);
  color: #2f8fc2;
  transition: color 0.5s ease, background 0.5s ease, transform 0.5s ease;
}
.device-cold:hover .device-icon {
  color: #ffffff;
  background: linear-gradient(180deg, #bfeaff, #2f8fc2);
  transform: scale(1.05);
  animation: frost-shimmer 1.8s ease-in-out infinite;
}
@keyframes frost-shimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143,214,247,0.5); }
  50% { box-shadow: 0 0 12px 4px rgba(143,214,247,0.35); }
}

.device-heat .device-icon { background: rgba(224,90,60,0.14); color: #c94a24; }
.device-heat:hover { border-color: #e85a34; }
.device-heat:hover .device-icon { animation: heat-glow 1.2s ease-in-out infinite; }
@keyframes heat-glow {
  0%, 100% { background: rgba(224,90,60,0.18); box-shadow: 0 0 0 0 rgba(224,90,60,0.3); }
  50% { background: rgba(224,90,60,0.35); box-shadow: 0 0 16px 4px rgba(224,90,60,0.25); }
}

.device-zrt .device-icon { background: rgba(155,120,220,0.14); color: #7a4fd0; }
.device-zrt:hover { border-color: #a37fe0; }
.device-zrt:hover .device-icon { animation: zrt-vibrate 0.35s linear infinite; }
@keyframes zrt-vibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1.5px, -1px); }
  50% { transform: translate(-1px, 1.5px); }
  75% { transform: translate(1px, 1px); }
}

.device-alterg .device-icon { background: rgba(80,170,220,0.14); color: #2d84b8; }
.device-alterg:hover { border-color: #63b2dd; }
.device-alterg:hover .device-icon { animation: alterg-float 2s ease-in-out infinite; }
@keyframes alterg-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 10px rgba(45,132,184,0.25); }
  50% { transform: translateY(-9px); box-shadow: 0 16px 20px rgba(45,132,184,0.12); }
}

.device-beckenboden .device-icon { background: rgba(108,191,75,0.14); color: var(--accent-dark); }
.device-beckenboden:hover { border-color: var(--accent); }
.device-beckenboden:hover .device-icon { animation: balance-breathe 2.2s ease-in-out infinite; }
@keyframes balance-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

.device-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.device-link .arrow { transition: transform 0.2s ease; }
.device-card:hover .device-link .arrow { transform: translateX(4px); }

/* Diagnostik split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.split > * { min-width: 0; }
.split img { border-radius: var(--radius); width: 100%; max-width: 100%; height: auto; }
.split .steps { list-style: none; margin: 24px 0 0; padding: 0; }
.split .steps li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-muted);
}
.split .steps li:first-child { border-top: none; }
.split .steps b { color: var(--text); }
.step-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--accent-dark);
}

/* Approach quote block */
.approach {
  background: var(--text);
  color: #fff;
  border-radius: 28px;
  padding: 64px;
  text-align: center;
}
.approach .eyebrow { color: #a1a1a6; }
.approach h2 { color: #fff; }
.approach p { color: #d2d2d7; max-width: 720px; margin: 0 auto 16px; font-size: 17px; }

.owner-photo-slot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.owner-photo-note { color: var(--text-muted); font-size: 14px; padding: 0 24px; }

/* Kontakt */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: start;
  max-width: 780px;
  margin: 0 auto;
}
.contact-cards { grid-template-columns: 1fr; text-align: left; }
.contact-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.hp-field {
  /* Spamschutz-Feld: fuer Menschen unsichtbar, fuer Bots ausfuellbar.
     WICHTIG: kein "left: -9999px" – das erzeugt in RTL-Sprachen
     (Arabisch, Persisch) eine 10.000 px breite Seite. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-error {
  background: rgba(220,60,60,0.1);
  border: 1px solid rgba(220,60,60,0.4);
  color: #b3261e;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

.cancel-note {
  max-width: 780px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Blog-Rubriken: Forschung (sanft blau-violett) vs. Praxis (gruen) */
.forschung-band {
  background: linear-gradient(180deg, rgba(122,143,225,0.07), rgba(122,143,225,0.14));
  border-top: 1px solid rgba(122,143,225,0.2);
  border-bottom: 1px solid rgba(122,143,225,0.2);
}
.rubrik-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 980px;
  margin-bottom: 14px;
}
.rubrik-forschung {
  background: rgba(122,143,225,0.16);
  color: #4a5fc4;
}
.rubrik-praxis {
  background: rgba(108,191,75,0.14);
  color: var(--accent-dark);
}
.forschung-card {
  border-color: rgba(122,143,225,0.4);
  background: #fff;
  text-align: center;
}
.badge-soon {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #7a8fe1;
  padding: 4px 12px;
  border-radius: 980px;
  margin-bottom: 12px;
}
.cat-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 980px;
  margin-bottom: 10px;
}
.cat-praxis { background: rgba(108,191,75,0.14); color: var(--accent-dark); }
.cat-forschung { background: rgba(122,143,225,0.16); color: #4a5fc4; }

/* Blog-Artikel */
.article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}
.article-body h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}
.article-body h3 {
  font-size: 21px;
  font-weight: 600;
  margin: 36px 0 12px;
}
.article-body h4 { font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.article-body p { margin: 0 0 18px; color: var(--text-muted); }
.article-body li { color: var(--text-muted); margin-bottom: 8px; }
.article-body ul, .article-body ol { padding-left: 24px; margin: 0 0 18px; }
.article-body strong { color: var(--text); }
.article-body a { color: var(--accent-dark); text-decoration: underline; }
.article-body img {
  border-radius: var(--radius);
  margin: 28px auto;
  display: block;
}
.article-body figure { margin: 28px 0; }
.article-body figcaption {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}
.article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-style: italic;
}
.article-body table { border-collapse: collapse; width: 100%; margin: 24px 0; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.article-body th { background: var(--bg-soft); }

/* Rechtstexte */
.legal-text { max-width: 720px; }
.legal-text h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { color: var(--text-muted); font-size: 15px; margin: 0 0 14px; }
.legal-text a { color: var(--accent-dark); }

/* Fussabdruck-Spur hinter dem Mauszeiger */
.footprint {
  position: fixed;
  width: 15px;
  height: 15px;
  color: var(--accent-dark);
  pointer-events: none;
  z-index: 60;
  animation: footprint-fade 1.6s ease-out forwards;
}
.footprint svg { width: 100%; height: 100%; display: block; }
@keyframes footprint-fade {
  0% { opacity: 0.32; }
  60% { opacity: 0.18; }
  100% { opacity: 0; }
}

/* Podcast-Popup */
.podcast-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.podcast-popup.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.podcast-popup img { width: 100%; max-height: 170px; object-fit: cover; object-position: top; display: block; }
.podcast-popup-body { padding: 16px 18px 18px; }
.podcast-popup-body strong { display: block; font-size: 15px; margin-bottom: 6px; }
.podcast-popup-body p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.podcast-popup-links { display: flex; gap: 8px; flex-wrap: wrap; }
.podcast-popup-links a {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 980px;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.podcast-popup-links a:hover { border-color: var(--accent); background: var(--bg-soft); }
.podcast-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

/* Footer */
footer.site {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }

@media (max-width: 760px) {
  nav.primary { display: none; }
  .split { grid-template-columns: 1fr; }
  .approach { padding: 40px 24px; }
  .contact-layout { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 48px; }
  section { padding: 56px 0; }
  .trust-bar { font-size: 15px; gap: 10px; margin-bottom: 36px; }
  .trust-bar .stars { font-size: 22px; }
  .trust-bar .trust-badge { height: 52px; }
  .greeting-rotator { font-size: 28px; height: 40px; }
  .nav-row .btn-primary { white-space: nowrap; padding: 9px 14px; font-size: 13px; }
  .lang-btn span:not(.globe) { display: none; }
  .lang-btn { padding: 9px 12px; }
  .nav-right { gap: 8px; }
}

/* Praxisleitung-Portraits */
.owner-portraits {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
}
.owner-portraits figure { margin: 0; text-align: center; }
.owner-portraits img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transition: transform 0.3s ease;
}
.owner-portraits figure:hover img { transform: scale(1.05); }
.owner-portraits figcaption { margin-top: 14px; font-size: 15px; }
.owner-portraits figcaption span { color: var(--text-muted); font-size: 13px; }

.device-cmd .device-icon { background: rgba(240,120,90,0.14); color: #d0573a; }
.device-cmd:hover { border-color: #e88a6e; }
.device-cmd:hover .device-icon { animation: cmd-chew 0.8s ease-in-out infinite; }
@keyframes cmd-chew {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.82); }
}

.owner-caption {
  text-align: center;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 20px 0 0;
}

.owner-amp {
  position: relative;
  align-self: center;
  font-size: 44px;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 36px;
}
.owner-portraits figcaption { font-size: 18px; }

/* Habib & Habib kleiner */
.owner-portraits figcaption { font-size: 13px; }
.owner-portraits figcaption b { font-weight: 600; }
.owner-amp { font-size: 24px; margin-bottom: 30px; }


/* Kleine Symbol-Chips (Benefits etc.) */
.benefit-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: rgba(108,191,75,0.13);
  margin-bottom: 14px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.card:hover .benefit-icon {
  transform: scale(1.15) rotate(-5deg);
  background: rgba(108,191,75,0.22);
}

/* WhatsApp-Button */
.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border: none;
}
.btn-whatsapp:hover { background: #1eb855; }

/* Rubrik-Umschaltung im Blog */
.rubrik-tabs {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
.rubrik-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 34px;
  min-width: 280px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.rubrik-tab:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.rubrik-tab-icon { font-size: 30px; }
.rubrik-tab b { font-size: 18px; letter-spacing: -0.01em; }
.rubrik-tab span:last-child { font-size: 13px; color: var(--text-muted); }
.rubrik-tab-praxis.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fff, rgba(108,191,75,0.10));
}
.rubrik-tab-forschung.active {
  border-color: #7a8fe1;
  background: linear-gradient(180deg, #fff, rgba(122,143,225,0.12));
}
.rubrik-view { display: none; }
.rubrik-view.active { display: block; }


/* Seitentitel-Eyebrow auf Unterseiten: groesser, gruener, mehr Luft */
.hero .section-head .eyebrow {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-dark);
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Split-Hero (wie Original novum2.de): Text links, Bild rechts */
.hero-split { padding: 56px 0 72px; text-align: left; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-left .greeting-rotator { text-align: left; }
.hero-split h1 { font-size: clamp(36px, 4.6vw, 58px); }
.hero-split p.lead { margin: 0 0 32px; max-width: none; }
.hero-split .hero-actions { justify-content: flex-start; margin-bottom: 36px; }

.hero-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.hero-avatars { height: 44px; width: auto; }
.hero-rating-text { display: flex; flex-direction: column; font-size: 14px; color: var(--text-muted); }
.hero-rating-text .stars { color: #f5a623; font-size: 18px; letter-spacing: 2px; }

.gbadge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: none;
  border-radius: 16px;
  background: var(--bg-soft);
  box-shadow: none;
}
.gbadge-icon { height: 34px; width: 34px; }
.gbadge-line { font-size: 15px; }
.stars-small { color: #f5a623; letter-spacing: 1px; }
.gbadge-sub { font-size: 12px; color: var(--text-muted); }
.gbadge-family {
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 600;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}

.hero-image { position: relative; }   /* Bezugsrahmen fuer das Zitat, in allen Breiten */
.testimonial-overlay {
  position: absolute;
  right: -18px;
  bottom: 22px;
  max-width: 320px;
  margin: 0;
  background: var(--text);
  color: #d2d2d7;
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}
.testimonial-overlay p { margin: 0; }

.jameda-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-split { text-align: center; }
  .hero-left .greeting-rotator { text-align: center; }
  .hero-split .hero-actions { justify-content: center; }
  .hero-rating { justify-content: center; }
  .gbadge-family { display: none; }
  .gbadge { margin: 0 auto; }
  /* Das Zitat bleibt auch auf schmalen Schirmen eine Ueberlagerung.
     Auf "static" gesetzt rutschte es in den gerundeten, beschnittenen
     Bildrahmen und hinterliess dort eine weisse Flaeche. */
  .testimonial-overlay {
    position: absolute;
    right: 14px;
    left: 14px;
    bottom: 14px;
    max-width: none;
    margin: 0;
    font-size: 12.5px;
    padding: 14px 16px;
  }
}

/* Jameda kompakt in der linken Spalte (wie Original), verlinkt */
.jameda-row {
  justify-content: flex-start;
  margin-top: 18px;
  gap: 12px;
}
.jameda-row img { height: 54px; width: auto; transition: transform 0.2s ease; }
.jameda-row a:hover img { transform: scale(1.06); }
.jameda-label { font-size: 13px; color: var(--text-muted); }
.jameda-label strong { color: var(--text); letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .jameda-row { justify-content: center; flex-wrap: wrap; }
}

[dir="rtl"] .testimonial-overlay { right: auto; left: -18px; }
[dir="rtl"] .hero-split { text-align: right; }
[dir="rtl"] .hero-split .hero-actions,
[dir="rtl"] .hero-rating,
[dir="rtl"] .jameda-row { justify-content: flex-start; }

/* Dropdown-Navigation */
.nav-drop { position: relative; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 4px; }
.drop-caret { font-size: 11px; opacity: 0.7; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  padding: 10px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 60;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.nav-drop-menu a:hover { background: rgba(108,191,75,0.10); color: var(--accent-dark); transform: none; }

/* CTA-Banner: Ihre Gesundheit wartet nicht (graeulich auslaufend) */
.cta-banner-sec { padding: 48px 0 88px; }
.cta-banner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
  border-radius: 28px;
  padding: 48px 56px 0 56px;
  background: radial-gradient(120% 140% at 15% 20%, #ffffff 0%, var(--bg-soft) 55%, #e8e8ec 100%);
  overflow: hidden;
}
.cta-banner-text h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
.cta-banner-text p { color: var(--text-muted); font-size: 16px; margin: 0 0 24px; }
.cta-banner-text { padding-bottom: 48px; }
.cta-banner-img { width: 100%; max-width: 380px; justify-self: end; align-self: end; }
@media (max-width: 760px) {
  .cta-banner { grid-template-columns: 1fr; text-align: center; padding: 36px 24px 0; }
  .cta-banner-img { justify-self: center; }
}

.benefit-icon img { width: 24px; height: 24px; }

/* Lexikon A-Z */
.lex-group {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.lex-letter {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-dark);
}
.lex-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.lex-link {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 980px;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.lex-link:hover {
  border-color: var(--accent);
  background: rgba(108,191,75,0.08);
  transform: translateY(-2px);
}

/* ===================== Hamburger-Menü (mobil) ===================== */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
header.site.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
header.site.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
header.site.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-burger { display: flex; order: 99; margin-left: 2px; }
  nav.primary {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(180%) blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 22px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px rgba(0,0,0,0.10);
  }
  header.site.nav-open nav.primary { display: flex; }
  nav.primary > a,
  .nav-drop-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 4px;
    font-size: 18px;
    border-bottom: 1px solid var(--bg-soft);
  }
  .nav-drop { position: static; }
  .nav-drop-menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 8px 18px;
    min-width: 0;
    display: none;
  }
  .nav-drop.open .nav-drop-menu { display: flex; }
  .nav-drop.open .drop-caret { display: inline-block; transform: rotate(180deg); }
  .drop-caret { transition: transform 0.25s ease; }
  .nav-row .logo img { height: 38px; width: auto; }
  .nav-row { height: 64px; }
  .nav-right { gap: 8px; }
}

.h1-2 { color: var(--accent); }

/* Logo-Schriftzug in der Headline (CI: #6F7374 / #8AC640) */
.h1-logo {
  height: 1.05em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0.08em 0;
}

/* Header-Feinschliff: Sprache unter Termin-Button, Logo mittig */
@media (min-width: 1081px) {
  .nav-row { height: 88px; }
  .nav-right {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .nav-right .btn-primary { order: -1; padding: 8px 18px; }
  .lang-btn {
    padding: 4px 12px;
    font-size: 12.5px;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
  }
  .lang-btn:hover { border-color: var(--border); background: #fff; }
  .lang-btn .globe { font-size: 14px; }
  nav.primary { margin-right: 18px; }
}
.nav-row .logo { display: flex; align-items: center; }
.nav-row .logo img { transform: translateY(3px); }

.price-rezept {
  color: #2f6fa8;
  background: rgba(60,130,190,0.12);
}

/* ============ V2-Feedback: Karten einheitlich, Buttons unten buendig ============ */
.grid > .card,
.grid > a.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card .device-link,
.card > .btn:last-child {
  margin-top: auto;
  align-self: flex-start;
}
.card .device-link { padding-top: 14px; }
.card .price { align-self: flex-start; }

/* Icons: einheitlich groesser und praesenter */
.device-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 27px;
}
.benefit-icon { width: 46px; height: 46px; }
.benefit-icon img { width: 28px; height: 28px; }
.device-icon svg { width: 32px; height: 32px; }

/* Wissen aus der Praxis: hellgruener Rubrik-Hintergrund (Pendant zum Forschungs-Blau) */
.praxis-band {
  background: linear-gradient(180deg, rgba(108,191,75,0.06), rgba(108,191,75,0.13));
  border-top: 1px solid rgba(108,191,75,0.25);
  border-bottom: 1px solid rgba(108,191,75,0.25);
}

/* Diagnostik: Ganzkoerper-EMG deutlicher */
.emg-heading {
  font-size: clamp(30px, 4vw, 44px) !important;
}

/* "So arbeiten wir" als echte Hauptueberschrift */
.section-head .head-xl {
  font-size: clamp(34px, 5vw, 52px);
  margin-top: 6px;
}

/* ============ Teilen-Komponente ============ */
.share-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: max(12px, calc((100vw - 1100px) / 2 - 76px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
}
@media (max-width: 1279px) { .share-rail { display: none; } }
.share-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(108,191,75,0.45);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  color: var(--accent-dark);
}
.share-btn:hover, .share-btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: rgba(108,191,75,0.1);
}
.share-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.share-btn svg { width: 24px; height: 24px; }
.share-rail .share-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
  text-align: center;
}

.share-bottom {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.share-bottom h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 16px;
}
.share-bottom .share-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.share-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 22px;
  border-radius: 980px;
  font-size: 14px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.share-toast.show { opacity: 1; }

/* ============ Podcast-Seite (V4): Suche, Empfehlungen, Staffeln, Player ============ */
.ep-filter { max-width: 640px; margin: 0 auto 18px; }
.ep-filter input {
  width: 100%;
  padding: 16px 22px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 980px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ep-filter input:focus {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(108,191,75,0.18);
}
.themen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.themen-chips button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 980px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.themen-chips button:hover,
.themen-chips button.aktiv {
  border-color: var(--accent);
  background: rgba(108,191,75,0.12);
  color: var(--accent-dark);
}
.ep-card { text-align: left; }
.ep-card h3 { font-size: 19px; margin: 4px 0 6px; }
.ep-meta { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.ep-hinweis { font-size: 13px; color: var(--accent-dark); font-weight: 600; }
.ep-artikel-link { font-size: 14px; margin: 0 0 8px; }
.ep-artikel-link a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.ep-artikel-link a:hover { text-decoration: underline; }
.ep-highlight { border-color: rgba(108,191,75,0.4); }
.ep-card .btn { margin-top: auto; align-self: flex-start; }
.ep-share {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ep-share .share-btn { width: 42px; height: 42px; box-shadow: none; }
.ep-share .share-btn svg { width: 19px; height: 19px; }
.staffel-block { margin-bottom: 40px; }
.staffel-titel {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(108,191,75,0.35);
}
.ep-list { list-style: none; margin: 0; padding: 0; }
.ep-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ep-row:last-child { border-bottom: none; }
.ep-nr {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(108,191,75,0.12);
  color: var(--accent-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-row-main { flex: 1 1 280px; min-width: 0; }
.ep-row-titel {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.ep-row-titel:hover, .ep-row-titel:focus-visible {
  color: var(--accent-dark);
  text-shadow: 0 0 14px rgba(108,191,75,0.55);
}
.ep-row .btn { flex: 0 0 auto; padding: 9px 18px; font-size: 14px; }
.ep-row .ep-share { margin-top: 0; align-self: center; }

/* Natives Abspielfeld: schlank, passt immer komplett hinein */
.player-slot audio {
  display: block;
  width: 100%;
  margin: 10px 0;
  border-radius: 980px;
}

/* Podigee-Player (Fallback): volle Hoehe, damit nichts intern gescrollt werden muss */
.player-slot iframe.podigee-frame {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 12px;
  margin: 10px 0;
}
@media (max-width: 560px) {
  .player-slot iframe.podigee-frame { height: 470px; }
}

/* "Hier abspielen" leuchtet sanft auf und lenkt den Blick */
.js-play {
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.js-play:hover, .js-play:focus-visible {
  box-shadow: 0 0 0 4px rgba(108,191,75,0.22), 0 10px 26px rgba(108,191,75,0.38);
}

/* 5. Staffel: dezenter Farbunterschied (neuer Gast, neues Thema) */
#staffel-5 .staffel-titel { border-bottom-color: rgba(122,143,225,0.55); }
#staffel-5 .ep-nr { background: rgba(122,143,225,0.16); color: #4a5fc4; }
#staffel-5 .ep-row-titel:hover, #staffel-5 .ep-row-titel:focus-visible {
  color: #4a5fc4;
  text-shadow: 0 0 14px rgba(122,143,225,0.6);
}
#staffel-5 .js-play:hover, #staffel-5 .js-play:focus-visible {
  border-color: #7a8fe1;
  color: #4a5fc4;
  background: rgba(122,143,225,0.1);
  box-shadow: 0 0 0 4px rgba(122,143,225,0.22), 0 10px 26px rgba(122,143,225,0.38);
}
.themen-chips button[data-staffel="staffel-5"]:hover,
.themen-chips button[data-staffel="staffel-5"].aktiv {
  border-color: #7a8fe1;
  background: rgba(122,143,225,0.14);
  color: #4a5fc4;
}

/* Direkt angesteuerte Folge blinkt kurz auf */
.ep-row.angesteuert { animation: folgeBlitz 2.4s ease; }
@keyframes folgeBlitz {
  0%, 100% { background: transparent; }
  20%, 60% { background: rgba(108,191,75,0.14); }
}
#staffel-5 .ep-row.angesteuert,
#staffel-5.angesteuert-blau .ep-row.angesteuert { animation-name: folgeBlitzBlau; }
@keyframes folgeBlitzBlau {
  0%, 100% { background: transparent; }
  20%, 60% { background: rgba(122,143,225,0.16); }
}

/* Untertitel des Podcasts im Seitenkopf */
.podcast-claim {
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  margin: 0 0 12px;
}

@media (max-width: 600px) {
  .ep-row { gap: 10px; }
  .ep-row .ep-share { width: 100%; }
}

/* Zahlen-Band (25+ Jahre, 1.000+ Patienten, 4,8/5) */
.zahlen-band {
  background: linear-gradient(180deg, rgba(108,191,75,0.06), rgba(108,191,75,0.12));
  border-top: 1px solid rgba(108,191,75,0.18);
  border-bottom: 1px solid rgba(108,191,75,0.18);
  padding: 48px 0;
}
.zahlen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: center;
}
.zahl-gross {
  display: block;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
}
.zahl-text {
  display: block;
  max-width: 250px;
  margin: 6px auto 0;
  font-size: 15px;
  color: var(--text-muted);
}
@media (max-width: 700px) {
  .zahlen-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Therapiedauer-Zeile in Methoden-Karten */
.method-dauer {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Bruttozeit-Hinweis (vorbereitet, Freischaltung ueber BRUTTOZEIT=1) */
.bruttozeit-hinweis {
  max-width: 860px;
  margin: 34px auto 0;
  padding: 20px 26px;
  border: 1px solid rgba(108,191,75,0.35);
  border-radius: 16px;
  background: rgba(108,191,75,0.06);
  font-size: 15px;
  line-height: 1.6;
}
.bruttozeit-hinweis strong { color: var(--accent-dark); }

/* Podcast-Tipp-Box unter passenden Blogartikeln */
.podcast-tipp {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 22px 26px;
  border: 1px solid rgba(108,191,75,0.4);
  border-radius: 16px;
  background: rgba(108,191,75,0.06);
}
.podcast-tipp p { margin: 8px 0 14px; }

/* Hinweis unter dem Kontaktformular der Sprachversionen */
.form-translate-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent-dark);
  background: rgba(108,191,75,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
}

/* Bild-Platzhalter fuer fehlende Geraetefotos */
.device-photo.platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-soft), #e9ede6);
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* Rueckweg-Hinweis auf nur-deutschen Seiten (erscheint nur, wenn zuvor
   eine andere Sprache gewaehlt wurde) */
.lang-hinweis {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.lang-hinweis-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  flex-wrap: wrap;
}
.lang-hinweis span { color: var(--text-muted); }
.lang-hinweis a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.lang-hinweis a:hover { text-decoration: underline; }
.lang-hinweis-zu {
  margin-inline-start: auto;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.lang-hinweis-zu:hover { color: var(--text); }

/* Standort-Landingpage: Merkmalslisten und Fragenbereich */
.check-list { list-style: none; padding: 0; margin: 0 0 28px; }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.faq-liste { margin: 0 0 32px; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 12px 0 0; color: var(--text-muted); line-height: 1.65; }

/* Breite Tabellen: nur die Tabelle scrollt, nicht die ganze Seite */
.tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
  /* dezenter Hinweis, dass rechts noch etwas kommt */
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabelle-scroll table { margin-bottom: 0; }
@media (max-width: 700px) {
  .tabelle-scroll table { min-width: 460px; }
  .tabelle-scroll th,
  .tabelle-scroll td { white-space: normal; }
}

/* Lange deutsche Komposita ("Behandlungsmöglichkeiten") sprengen auf
   schmalen Schirmen sonst das Layout. Silbentrennung nutzt das lang-
   Attribut der Seite und funktioniert daher in jeder Sprachversion. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  /* Keine automatischen Trennstriche in Ueberschriften (Apple-Stil:
     das ganze Wort wandert in die naechste Zeile) ... */
  hyphens: manual;
}
@media (max-width: 480px) {
  /* ... AUSSER auf sehr schmalen Handys: lange deutsche Komposita
     ("Achillessehnenbeschwerden") passen dort in keine Zeile und wuerden
     sonst OHNE Strich mitten im Wort zerhackt (138 gemessene Faelle). */
  h1, h2, h3, h4 { hyphens: auto; }
}
p, li, td, th, dd, dt, figcaption, summary {
  overflow-wrap: break-word;
}
/* Sehr lange Links/Adressen im Fliesstext umbrechen lassen */
.article-body a { overflow-wrap: anywhere; }

/* Sehr schmale Geraete (iPhone SE, kleine Android-Modelle, 320 px):
   Abstaende reduzieren, damit nichts seitlich herausragt. */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .card { padding: 22px; }
  /* Vollbreite Kartenbilder an das kleinere Innenmass anpassen */
  .device-photo {
    width: auto;
    margin: -22px -22px 18px;
  }
  /* Kopfzeile: In manchen Sprachen ist der Termin-Button sehr lang
     (z. B. "Prenota un appuntamento"). Schrift und Innenabstand werden
     hier kleiner, damit Logo, Sprachwahl und CTA nebeneinander passen. */
  /* Auf schmalen Geraeten nur das Globus-Symbol: der Sprachname
     braucht zu viel Platz neben dem Termin-Button. Die aktuelle
     Sprache steht weiterhin im geoeffneten Menue markiert. */
  .lang-btn { font-size: 13px; padding: 8px 11px; }
  /* Nur optisch ausblenden – Screenreader lesen die Sprache weiter vor. */
  .lang-btn .lang-name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-right { gap: 6px; min-width: 0; }
  /* Der Haupt-CTA wird NIE abgeschnitten – er darf nur kleiner werden.
     In manchen Sprachen ist er lang ("Prenota un appuntamento"), deshalb
     schrumpfen hier auch Logo und Abstaende mit. */
  .nav-right .btn {
    font-size: 12px;
    padding: 9px 11px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .nav-row .logo img { height: 32px; width: auto; }
  /* Termin-Button verlaesst die enge Kopfzeile und steht dafuer
     als erster Eintrag im Menue – dort ganzflaechig und gut treffbar. */
  .nav-right .btn { display: none; }
  .nav-row { gap: 6px; }
  .nav-burger { flex: 0 0 auto; }
}

/* Rasterfelder duerfen schrumpfen. Ohne min-width:0 vergroessert ein
   randloses Kartenbild (negative Margins) die Mindestbreite der Spalte
   und schiebt die Seite auf kleinen Geraeten auseinander. */
.grid > *,
.reveal-group > * { min-width: 0; }
.device-card { overflow: hidden; }

/* Sicherheitsnetz nur fuer sehr schmale Geraete (unter 400 px):
   verhindert seitliches Verschieben, falls ein einzelnes Element doch
   ein paar Pixel zu breit geraet. "clip" statt "hidden", damit
   position:sticky weiter funktioniert. */
@media (max-width: 400px) {
  body { overflow-x: clip; }
}
@supports not (overflow: clip) {
  @media (max-width: 400px) {
    body { overflow-x: hidden; }
  }
}

/* Fingerfreundliche Tippziele auf Beruehrgeraeten: Links in Fusszeile und
   Sprachmenue bekommen genug Hoehe (Empfehlung: rund 44 px).
   Fliesstext-Links bleiben unveraendert, damit der Textfluss stimmt. */
@media (hover: none) and (pointer: coarse) {
  .footer-links a,
  .lang-menu a,
  .nav-drop-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-links { gap: 2px 18px; }
}

/* ===== Barrierefreiheit (BFSG) ===== */

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung – erscheint nur bei
   Tastatur-Navigation, nicht beim Mausklick. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprunglink: erste Tabulator-Station, sonst unsichtbar */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--text);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-weight: 500;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .footprint { display: none !important; }
}



/* Termin-Button im aufgeklappten Mobilmenue */
.nav-cta-mobil { display: none; }
@media (max-width: 400px) {
  nav.primary .nav-cta-mobil {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
  }
}


/* Ankersprünge: Die Kopfzeile ist fixiert und wuerde das Sprungziel sonst
   verdecken. scroll-padding haelt den Abschnittstitel frei sichtbar –
   gilt fuer die Navigation ebenso wie fuer den Sprachwechsel. */
html {
  scroll-padding-top: 96px;
}
@media (max-width: 1080px) {
  html { scroll-padding-top: 80px; }
}

/* Sprachmenue: sanftes Scrollen, falls das Fenster sehr niedrig ist. */
.lang-menu {
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* ============ V7: Formular-Hinweise, Sicherheitsfrage, Maps, med. Hinweis ============ */
.form-gesundheit {
  font-size: 13px;
  line-height: 1.55;
  color: #7a5b1e;
  background: rgba(224, 178, 82, 0.12);
  border: 1px solid rgba(224, 178, 82, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 4px 0 10px;
}
.form-datenschutz {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 4px;
}
.form-datenschutz a { color: var(--accent-dark); font-weight: 600; }
.form-noscript {
  font-size: 13px;
  color: #8a2f2f;
  background: rgba(200, 60, 60, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
}
.captcha-feld {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0 8px;
  background: var(--bg-soft);
}
.captcha-feld label { margin: 0; }
.captcha-frage { font-weight: 600; color: var(--text); }
.captcha-feld input {
  max-width: 130px;
  margin-top: 6px;
}
.captcha-neu {
  font-family: inherit;
  font-size: 12px;
  color: var(--accent-dark);
  background: none;
  border: none;
  padding: 4px 0 0;
  cursor: pointer;
  text-decoration: underline;
}

/* Google Maps: Zwei-Klick-Einbindung */
.maps-consent { margin-top: 28px; }
.maps-platzhalter {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-soft), #e9ede6);
  padding: 26px 22px;
  text-align: center;
}
.maps-platzhalter h3 { margin: 0 0 8px; }
.maps-adresse { margin: 0 0 6px; }
.maps-anfahrt { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; }
.maps-dsgvo {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 14px;
}
.maps-dsgvo a { color: var(--accent-dark); }
.maps-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.maps-rahmen iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 16px;
}
.maps-aus {
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 8px 0 0;
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 560px) { .maps-rahmen iframe { height: 300px; } }

/* Allgemeiner medizinischer Hinweis (dezent, vor dem Footer) */
.med-hinweis {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

/* jameda-Stichtag neben dem Siegel-Label */
.jameda-stand { font-weight: 400; font-size: 12px; color: var(--text-muted); }


/* ============ V7.1: Layout-Reparaturen (echtes Querscroll-Problem) ============ */
@media (max-width: 760px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .owner-portraits { gap: 10px; flex-wrap: nowrap; }
  .owner-portraits img { width: 120px; height: 120px; }
  .owner-amp { font-size: 20px; margin-bottom: 24px; }
}

/* Kurz-Datenschutzinfo am fremdsprachigen Formular */
.form-dsinfo { margin: 6px 0 4px; font-size: 12.5px; color: var(--text-muted); }
.form-dsinfo summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; }
.form-dsinfo p { margin: 8px 0 0; line-height: 1.55; }

/* ============ V8.1: Podcast mobil, Touchflaechen, Menue-Kontrast ============ */
/* P0.2: Player fuellt den Container, nichts wird gequetscht */
.player-slot { width: 100%; min-width: 0; }
.player-slot audio { width: 100%; max-width: 100%; min-width: 0; }
.player-slot, .ep-row, .ep-card { scroll-margin-top: 110px; }

/* P0.2: unter 360 px stapeln die Hero-Buttons untereinander */
@media (max-width: 360px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;      /* langer Folgentitel darf umbrechen */
  }
}

/* P0.2: Touchflaechen mindestens 44 px auf Beruehrgeraeten */
@media (pointer: coarse) {
  .themen-chips button { min-height: 44px; }
  .ep-share .share-btn { width: 44px; height: 44px; }
  .ep-row .btn, .js-play { min-height: 44px; }
  .captcha-neu, .maps-aus { min-height: 44px; display: inline-flex; align-items: center; }
  .lang-btn { min-height: 44px; }
}

/* P0.3: Termin-Button im Mobilmenue – lesbarer Kontrast (weiss auf
   dunklerem CI-Gruen, 5,2:1). nav.primary a wuerde sonst die
   Schriftfarbe auf gruen-auf-gruen ueberschreiben. */
nav.primary a.nav-cta-mobil {
  color: #fff;
  opacity: 1;
  background: #3d7a27;
}
nav.primary a.nav-cta-mobil:hover { background: #356a22; }


/* ============ V9.1 ============ */
/* Termin-Button in der Kopfzeile bleibt immer einzeilig (der italienische
   CTA brach zweizeilig um; unter 400 px uebernimmt ohnehin der Menue-CTA) */
.nav-right .btn { white-space: nowrap; }


/* ============ V9.1: Sprachwahl-Weltkugel glueht gruen auf ============ */
.lang-btn .globe { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .lang-btn .globe {
    animation: globus-gluehen 3.6s ease-in-out 0.8s 1 both;
  }
}
@keyframes globus-gluehen {
  0%, 100% { filter: none; transform: scale(1); }
  15%, 55% {
    filter: hue-rotate(-85deg) saturate(1.7) brightness(1.15)
            drop-shadow(0 0 6px rgba(108,191,75,0.95))
            drop-shadow(0 0 16px rgba(108,191,75,0.65));
    transform: scale(1.25);
  }
  35%, 75% {
    filter: hue-rotate(-85deg) saturate(1.2)
            drop-shadow(0 0 3px rgba(108,191,75,0.45));
    transform: scale(1.06);
  }
}
.lang-btn:hover .globe,
.lang-btn:focus-visible .globe {
  filter: hue-rotate(-85deg) saturate(1.5)
          drop-shadow(0 0 5px rgba(108,191,75,0.8));
}

/* V9.3: transparente Sprachbruecke fuer noch nicht fachlich gegengelesene Volluebersetzungen */
.translation-status {
  padding: 24px 0;
  background: #f5f8f3;
  border-bottom: 1px solid rgba(29, 29, 31, .10);
}
.translation-status-inner {
  max-width: 920px;
}
.translation-status h2 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
}
.translation-status p {
  max-width: 78ch;
  margin: 0 0 8px;
}
.translation-status .translation-source {
  font-size: .92rem;
  opacity: .78;
}

/* ============ V9.4: saubere Zeilenumbrueche in allen Sprachen ============ */
/* Moderne Browser verteilen Ueberschriften dadurch ausgeglichener; der Fallback
   bleibt der normale Wortumbruch. Einzelne kurze Schlusswoerter werden vermieden. */
h1, h2, h3, h4, .balanced-heading {
  text-wrap: balance;
}
p, li, blockquote, .lead {
  text-wrap: pretty;
}
.keep-together { white-space: nowrap; }

/* Transparenter Sprachzugang und freundlicher Korrekturhinweis */
.translation-status h1 {
  margin: 6px 0 12px;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.source-content {
  min-width: 0;
}
.source-original-heading {
  text-wrap: balance;
}
.translation-note {
  margin: 48px 0 0;
  padding: 0 0 48px;
}
.translation-note-inner {
  max-width: 920px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.translation-note h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.translation-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
.translation-note a { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .translation-status h1 { font-size: clamp(27px, 8.3vw, 34px); }
}

/* V9.4.1: gemischtsprachige Sprachzugangs-Titel sauber trennen.
   Das vermeidet BiDi-Ueberlaeufe in Arabisch/Persisch und sorgt auf kleinen
   Displays fuer kontrollierte, gut lesbare Zeilen. */
.translation-access-heading,
.translation-topic-title {
  display: block;
}
.translation-topic-title {
  margin-top: 8px;
  font-size: .78em;
  line-height: 1.22;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
@media (max-width: 480px) {
  .translation-topic-title { font-size: .72em; }
}

/* V9.4.2: Grid-Kinder duerfen auf 320-px-Geraeten wirklich schrumpfen.
   Das verhindert Ueberbreite bei laengeren tuerkischen Zeilen. */
.hero-left,
.hero-right {
  min-width: 0;
  max-width: 100%;
}
/* Tabellen bleiben in ihrem eigenen Scrollrahmen; Quelltexte vergroessern
   dadurch nicht die Dokumentbreite in RTL-Sprachzugangsseiten. */
.source-content {
  max-width: 100%;
  overflow-x: clip;
}

/* V9.4.3: Der tuerkische Hero besitzt sehr lange Woerter. Auf 320 px wird
   die Schrift minimal reduziert, damit kein Wort mitten im Stamm getrennt
   wird und die Zeilen trotzdem innerhalb des Viewports bleiben. */
@media (max-width: 360px) {
  html[lang="tr"] .hero-split h1 {
    font-size: 34px;
    hyphens: manual;
    overflow-wrap: normal;
  }
}