/* =====================================================================
   Brainworks Heidelberg · style.css
   Eine Datei für alle 22 Seiten (Deutsch im Hauptordner, Englisch in en/).
   Die Reihenfolge ist wichtig. Spätere Abschnitte verfeinern frühere.
   Deshalb Regeln nie nach oben verschieben, sondern unten ergänzen.

   Inhalt
    1. Farben, Schrift und Grundlagen
    2. Leiste oben, Menü und Startseite
    3. Kontakt-Reiter, Kontakt-Fenster und Kontaktleiste am Handy
    4. Unterseiten
    5. Offenes Layout mit wenig Kästen
    6. Abstände unter dem Hero und ruhige Flächen
    7. Verlinkte Karten, Fallberichte und Seitenende
    8. Aufklappmenüs, Sprungmarken und Ergänzende Therapien
    9. SOZO-Farben Orange und Blau mit farbigen Flächen
   10. Schrift Outfit, Verläufe, Formen und Symbole
   11. Bedienung mit Tastatur (Sprunglink und Fokusrahmen)
   12. Gehirn im Hero vollständig zeigen
   13. Cookie-Einwilligung
   14. Ruhige Seite hinter offenen Fenstern und Cookie-Knopf unten links
   15. Alle Bildschirmgrößen (280 Pixel bis 4K, Handy quer)
   16. Fallberichte und Forschung
   17. Überschriften im Footer
   18. Platzhalter für fehlende Bilder
   19. Foto mit Bildunterschrift (Unsere Praxis, SOZO-Konzept)
   20. Logo als Schrift (bis die Originaldatei von SOZO da ist)
   21. Videos (SOZO-Methode, YouTube mit Zwei-Klick und Instagram-Links)
   22. Echte Praxisfotos (Startseite oben und Team)
   23. Cookie-Fenster am Handy (Knöpfe untereinander)
   ===================================================================== */

/* =====================================================================
   1. Farben, Schrift und Grundlagen
   ===================================================================== */
:root {
  --navy: #4a4a4a;
  --navy-2: #6a6a6a;
  --teal: #f57921;
  --teal-dark: #b85810;
  --teal-soft: #fcefe4;
  --sand: #f5f1ea;
  --white: #ffffff;
  --text: #333333;
  --muted: #6b6b6b;
  --line: #ebe5df;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(60, 60, 60, 0.07);
  --max: 1180px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--teal-dark);
}
h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.15rem;
}
p {
  margin: 0 0 1em;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--teal);
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 2px;
}
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 14px;
}
.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 640px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.2s;
}
.btn-light {
  background: #fff;
  color: var(--navy);
}
.more {
  font-weight: 600;
  text-decoration: none;
  color: var(--teal-dark);
}
.more:after {
  content: " →";
}
.section-head {
  max-width: 720px;
}
.ph {
  background: linear-gradient(135deg, #f5f0eb, #ece4dc);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8f8f8f;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 12px;
}

/* =====================================================================
   2. Leiste oben, Menü und Startseite
   ===================================================================== */
/* Leiste oben */
.topbar {
  font-size: 0.85rem;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}
.topbar .info {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.lang a {
  opacity: 0.6;
  margin-left: 10px;
}
.lang a.active {
  opacity: 1;
  font-weight: 700;
}

/* Header: schwebende Menüleiste */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  transition: padding 0.3s;
}
header.site.scrolled {
  padding: 8px 0;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
  padding: 0 10px 0 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(60, 60, 60, 0.1);
  transition:
    height 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}
header.site.scrolled .navbar {
  height: 62px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 34px rgba(60, 60, 60, 0.16);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  z-index: 60;
}
.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fab27a, var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.logo-text strong {
  display: block;
  color: var(--navy);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.logo-text span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
nav.main > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
nav.main > ul > li {
  position: relative;
  z-index: 1;
}
nav.main > ul > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  white-space: nowrap;
  transition: color 0.2s;
}
nav.main > ul > li > a:hover {
  color: var(--teal-dark);
}
.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 40px;
  transform: translateY(-50%);
  background: var(--teal-soft);
  border-radius: 999px;
  opacity: 0;
  transition:
    left 0.35s cubic-bezier(0.3, 0.7, 0.2, 1),
    width 0.35s cubic-bezier(0.3, 0.7, 0.2, 1),
    opacity 0.25s;
  z-index: 0;
  pointer-events: none;
}
.caret {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s;
}
.has-sub:hover .caret,
.has-sub:focus-within .caret {
  transform: rotate(225deg) translateY(-2px);
}
/* Mega-Menü SOZO */
.mega {
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  width: 660px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(60, 60, 60, 0.18);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    visibility 0.25s;
}
.mega:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}
.has-sub:hover .mega,
.has-sub:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mega-item {
  display: block;
  padding: 18px;
  border-radius: 18px;
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transition:
    background 0.2s,
    transform 0.2s;
}
.mega-item:hover {
  background: var(--teal-soft);
  transform: translateY(-2px);
}
.mi-icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  color: var(--teal);
  margin-bottom: 14px;
}
.mi-icon svg {
  width: 22px;
  height: 22px;
}
.mega-item b {
  display: block;
  color: var(--navy);
  margin-bottom: 4px;
}
.mega-item small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.mega-foot {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.mega-foot a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
/* Termin-Button im Menü */
nav.main > ul > li.cta {
  margin-left: 10px;
}
nav.main > ul > li.cta > a {
  background: var(--teal);
  color: #fff;
  padding: 7px 8px 7px 20px;
  border-radius: 999px;
  gap: 12px;
  font-weight: 600;
  transition: background 0.2s;
}
nav.main > ul > li.cta > a:hover {
  background: var(--teal-dark);
  color: #fff;
}
.cta-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
}
.cta a:hover .cta-arrow {
  transform: rotate(-45deg);
}
.mobile-extra {
  display: none;
}
.burger {
  display: none;
  position: relative;
  z-index: 60;
  background: var(--teal-soft);
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s,
    top 0.3s;
}
.burger span:nth-child(1) {
  top: 17px;
}
.burger span:nth-child(2) {
  top: 23px;
}
.burger span:nth-child(3) {
  top: 29px;
}
.burger.open span:nth-child(1) {
  top: 23px;
  transform: rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  top: 23px;
  transform: rotate(-45deg);
}

/* Hero */
.hero,
.page-hero {
  margin-top: -100px;
}
.hero {
  background: linear-gradient(180deg, var(--teal-soft), #fff);
  padding: 172px 0 88px;
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero .actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-visual .ph {
  aspect-ratio: 4/4.4;
}
.hero-visual > svg {
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-visual .ph {
  align-items: flex-start;
  padding-top: 40px;
  border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
  animation: morph 14s ease-in-out infinite;
}
@keyframes morph {
  50% {
    border-radius: 44% 56% 54% 46% / 56% 44% 56% 44%;
  }
}
.hero-visual > svg path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 2.8s ease forwards;
}
.hero-visual > svg path:nth-child(2) {
  animation-delay: 0.4s;
}
.hero-visual > svg path:nth-child(3) {
  animation-delay: 0.8s;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.hero-visual > svg circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 3.2s ease-in-out infinite;
}
.hero-visual > svg circle:nth-child(2n) {
  animation-delay: 1.2s;
}
@keyframes pulse {
  50% {
    transform: scale(1.6);
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .ph,
  .hero-visual > svg path,
  .hero-visual > svg circle {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.hero-badge {
  position: absolute;
  left: -24px;
  bottom: 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 280px;
}
.hero-badge .dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hero-badge p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.hero-badge strong {
  color: var(--navy);
  display: block;
}

/* Trust */
.trust {
  position: relative;
  z-index: 2;
}
.trust .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust .item:last-child {
  border-right: 0;
}
.trust .item strong {
  display: block;
  margin-bottom: 4px;
}
.trust .item span {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
  display: block;
}
.icon {
  width: 36px;
  height: 36px;
  color: var(--teal);
  margin-bottom: 12px;
}

/* Methode */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 28px;
}
.chip {
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
}
.methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.method p {
  margin: 6px 0 0;
  line-height: 1.5;
}

/* Anwendungsgebiete */
.areas {
  background: var(--bg);
  color: var(--text);
}
.areas h2,
.areas h3 {
  color: var(--navy);
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.area {
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
}
.area h3 {
  margin-bottom: 6px;
}
.area p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}
.areas .note {
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Ablauf */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  position: relative;
}
.step:before {
  counter-increment: step;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step:after {
  content: "";
  position: absolute;
  right: -12px;
  height: 2px;
}
.step:last-child:after {
  display: none;
}
.step p {
  color: var(--muted);
  font-size: 0.95rem;
}
.faq {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--teal);
}
details[open] summary:after {
  content: "–";
}
details p {
  margin: 12px 0 0;
  color: var(--muted);
}

/* Team */
.team {
  background: var(--bg);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.doc .ph {
  aspect-ratio: 4/3.6;
}
.doc .role {
  color: var(--teal-dark);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.doc p {
  font-size: 0.94rem;
  color: var(--muted);
  margin: 0;
}

/* Fallberichte */
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.chart-card {
  border-radius: var(--radius);
}
.chart-card .cap {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 10px;
}
.hint {
  background: var(--sand);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.92rem;
  color: #6b5d48;
  margin-top: 20px;
}

/* Ergänzende Therapien */
.extra {
  background: linear-gradient(180deg, #fff, var(--bg));
}
.extra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}
.card.placeholder {
  border-style: dashed;
  background: transparent;
}
.extra .foot {
  margin-top: 28px;
}

/* Anreise */
.travel {
  display: grid;
  align-items: center;
}
.travel .ph {
  aspect-ratio: 16/11;
}
.travel ul {
  padding: 0;
  margin: 20px 0 28px;
  list-style: none;
}
.travel li {
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--muted);
}
.travel li strong {
  color: var(--navy);
}
.travel li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-soft);
  box-shadow:
    inset 0 0 0 5px var(--teal-soft),
    inset 0 0 0 9px var(--teal);
}

/* Kontakt */
.contact {
  color: var(--text);
}

.contact .grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.contact .lines {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}
.contact .lines div {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact .lines strong {
  color: var(--navy);
  display: block;
}
.contact .lines a {
  color: var(--teal-dark);
}
form {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  display: grid;
  gap: 6px;
}
form .full {
  grid-column: 1/-1;
}
input,
textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
textarea {
  min-height: 120px;
  resize: vertical;
}
.check {
  display: flex !important;
  grid-template-columns: none;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
.check input {
  width: auto;
  margin-top: 4px;
}
form .btn {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

/* Footer */
footer {
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  padding: 64px 0 28px;
}
footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
footer h4 {
  color: var(--navy);
  margin: 0 0 14px;
  font-size: 1rem;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
footer a {
  color: var(--muted);
  text-decoration: none;
}
footer a:hover {
  color: var(--teal-dark);
}

footer .bottom {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobil */
@media (max-width: 1180px) {
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.96);
  }
  .burger {
    display: block;
  }
  nav.main {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: linear-gradient(160deg, #fff 30%, var(--teal-soft));
    padding: 120px 28px 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
      opacity 0.3s,
      transform 0.3s,
      visibility 0.3s;
  }
  nav.main.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  nav.main > ul {
    flex-direction: column;
    align-items: stretch;
    counter-reset: nav;
  }
  nav.main > ul > li {
    border-bottom: 1px solid var(--line);
  }
  nav.main > ul > li:not(.cta) > a {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--navy);
    padding: 14px 0;
    gap: 14px;
  }
  nav.main > ul > li:not(.cta) > a:before {
    counter-increment: nav;
    content: counter(nav, decimal-leading-zero);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--teal);
    width: 22px;
  }
  .caret {
    display: none;
  }
  .nav-pill {
    display: none;
  }
  .mega {
    position: static;
    width: auto;
    opacity: 1;
    visibility: inherit;
    transform: none;
    box-shadow: none;
    background: none;
    padding: 0 0 14px 36px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mega:before,
  .mi-icon,
  .mega-item small,
  .mega-foot {
    display: none;
  }
  .mega-item {
    background: none;
    padding: 6px 0;
  }
  .mega-item b {
    font-weight: 500;
    color: var(--muted);
    margin: 0;
  }
  nav.main > ul > li.cta {
    border: 0;
    margin: 24px 0 0;
  }
  nav.main > ul > li.cta > a {
    justify-content: space-between;
    font-size: 1.05rem;
    padding: 10px 10px 10px 24px;
  }
  .mobile-extra {
    display: block;
    margin-top: auto;
    padding-top: 28px;
    color: var(--muted);
    font-size: 0.95rem;
  }
  .mobile-extra a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
  }
  body.menu-open {
    overflow: hidden;
  }
}
@media (max-width: 900px) {
  .hero .wrap,
  .split,
  .case,
  .travel,
  .contact .grid,
  .faq {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-visual {
    max-width: 460px;
  }
  .hero-badge {
    left: 12px;
  }
  .trust {
    margin-top: 0;
    padding-top: 24px;
  }
  .trust .grid,
  .area-grid,
  .extra-grid {
    grid-template-columns: 1fr 1fr;
  }
  .trust .item:nth-child(2) {
    border-right: 0;
  }
  .trust .item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .step:after {
    display: none;
  }
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  footer .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .navbar {
    height: 64px;
    padding: 0 8px 0 10px;
  }
  .logo-mark {
    width: 38px;
    height: 38px;
    font-size: 0.7rem;
  }
  .logo-text strong {
    font-size: 1rem;
  }
  .wrap {
    padding: 0 16px;
  }
  .topbar .info span:not(:first-child) {
    display: none;
  }
  .trust .grid,
  .area-grid,
  .extra-grid,
  .steps,
  .team-grid,
  .methods,
  footer .grid {
    grid-template-columns: 1fr;
  }
  .trust .item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .trust .item:last-child {
    border-bottom: 0;
  }
  form {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .hero {
    padding: 140px 0 56px;
  }
}

/* Markierung liegt hinter den Menüpunkten und nimmt keinen Platz ein */
nav.main > ul > li.nav-pill {
  position: absolute;
  z-index: 0;
}
.mega.two {
  grid-template-columns: repeat(2, 1fr);
  width: 470px;
  left: auto;
  right: -18px;
}

/* =====================================================================
   3. Kontakt-Reiter, Kontakt-Fenster und Kontaktleiste am Handy
   ===================================================================== */
/* Kontakt-Reiter rechts */
.side-contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.sc-btn {
  display: flex;
  align-items: center;
  height: 52px;
  max-width: 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 26px 0 0 26px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.sc-btn:hover,
.sc-btn:focus-visible {
  max-width: 300px;
}
.sc-ic {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}
.sc-ic svg {
  width: 22px;
  height: 22px;
}
.sc-label {
  white-space: nowrap;
  padding-right: 22px;
}
.sc-tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--teal);
  color: #fff;
  border: 0;
  padding: 22px 15px;
  border-radius: 0 18px 18px 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    background 0.2s,
    padding 0.2s;
}
.sc-tab:hover {
  background: var(--teal-dark);
  padding-right: 20px;
}
/* Kontakt-Fenster */
.contact-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  transition: visibility 0s 0.35s;
}
.contact-panel.open {
  visibility: visible;
  transition: none;
}
.cp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(60, 60, 60, 0.28);
  opacity: 0;
  transition: opacity 0.3s;
}
.contact-panel.open .cp-backdrop {
  opacity: 1;
}
.cp-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  background: #fff;
  padding: 34px 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
  box-shadow: -20px 0 60px rgba(60, 60, 60, 0.15);
}
.contact-panel.open .cp-box {
  transform: none;
}
.cp-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--teal-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
}
.cp-team {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 10px 48px 24px 0;
}
.cp-photo {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  font-size: 0.62rem;
  padding: 6px;
}
.cp-team strong {
  display: block;
  color: var(--navy);
  font-size: 1.1rem;
}
.cp-team span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  display: block;
}
.cp-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  background: var(--teal-soft);
  border-radius: 18px;
  padding: 16px 20px;
  transition: background 0.2s;
}
.cp-phone:hover {
  background: #f8dcc4;
}
.cp-phone svg {
  width: 26px;
  height: 26px;
  color: var(--teal);
  flex: none;
}
.cp-hours {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 10px 0 6px;
}
.cp-mail {
  font-size: 0.95rem;
  color: var(--muted);
}
.cp-box h3 {
  margin: 26px 0 10px;
}
form.cp-form {
  grid-template-columns: 1fr;
  padding: 0;
  box-shadow: none;
  gap: 12px;
  background: none;
}
select {
  font: inherit;
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
button.btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.btn-ghost {
  background: transparent;
}
/* Kontakt im Hero */
.hero-call {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.35;
}
.hero-call a {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
}
.hc-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}
.hc-ic svg {
  width: 22px;
  height: 22px;
}
/* Kontaktband auf allen Unterseiten */
.cb-text {
  max-width: 520px;
}
.cb-text .eyebrow {
  margin-bottom: 8px;
}
.cb-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.cb-phone {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--navy);
  font-size: 1.6rem;
  font-weight: 800;
}
.cb-phone svg {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  box-shadow: var(--shadow);
}
.cb-phone small {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nutri {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 48px 0;
}
.nutri .mi-icon {
  flex: none;
  margin: 0;
}
.nutri p {
  margin: 0;
  color: var(--muted);
}
.extra-grid.full + .nutri {
  margin-top: 48px;
}
section .group-title {
  margin-top: 0;
}
/* Kontaktleiste Handy */
.mobile-contact {
  display: none;
}
@media (max-width: 900px) {
  .side-contact {
    display: none;
  }
  .mobile-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 45;
    background: rgba(255, 255, 255, 0.94);
    padding: 8px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(60, 60, 60, 0.2);
  }
  .mobile-contact a,
  .mobile-contact button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    border: 0;
    cursor: pointer;
  }
  .mc-call {
    background: var(--teal-soft);
    color: var(--navy);
  }
  .mc-call svg {
    width: 20px;
    height: 20px;
    color: var(--teal);
  }
  .mc-term {
    background: var(--teal);
    color: #fff;
  }
  body {
    padding-bottom: 84px;
  }
}

/* Aktiver Menüpunkt (gleiche Schriftstärke wie die anderen Punkte, damit das Menü nicht verrutscht) */
nav.main > ul > li.active > a {
  color: var(--teal-dark);
}

/* =====================================================================
   4. Unterseiten
   ===================================================================== */
.page-hero {
  background: linear-gradient(180deg, var(--teal-soft), #fff);
  position: relative;
  overflow: hidden;
}
.page-hero:after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.page-hero .lead {
  margin-top: 8px;
}
.crumbs {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--teal-dark);
}
.crumbs span {
  margin: 0 8px;
  opacity: 0.5;
}
.prose {
  max-width: 760px;
}
.prose h2 {
  margin-top: 8px;
}
.tint {
  background: var(--bg);
}
.cta-band .box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
}
.cta-band p {
  margin: 0;
  color: var(--muted);
}
.info-box {
  background: var(--sand);
  border-radius: 16px;
  padding: 20px 24px;
  color: #6b5d48;
  font-size: 0.95rem;
}
.method-list {
  display: grid;
}
.method-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.method-row .tag {
  font-weight: 800;
}
.method-row h3 {
  margin-bottom: 6px;
}
.method-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.method-row .label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.group-title {
  margin: 0 0 18px;
}
.area-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.area-card {
  display: flex;
  gap: 18px;
}
.area-card .mi-icon {
  flex: none;
  margin: 0;
  background: var(--teal-soft);
}
.area-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filters span {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}
.filters span.on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.case-card .badge {
  display: inline-block;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.case-card dl {
  margin: 16px 0 0;
  font-size: 0.92rem;
}
.case-card dt {
  font-weight: 700;
  color: var(--navy);
}
.case-card dd {
  margin: 2px 0 12px;
  color: var(--muted);
}
.timeline {
  position: relative;
  max-width: 820px;
  margin-left: 8px;
}
.timeline:before {
  content: "";
  position: absolute;
  left: 23px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--line);
}
.tl-item {
  position: relative;
  padding: 0 0 40px 80px;
  counter-increment: tl;
}
.tl-item:before {
  content: counter(tl);
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-item p {
  color: var(--muted);
  margin: 0;
}
.timeline {
  counter-reset: tl;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.checklist li {
  padding-left: 34px;
  position: relative;
  color: var(--muted);
}
.checklist li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-soft);
}
.checklist li:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--teal-dark);
  border-bottom: 2px solid var(--teal-dark);
  transform: rotate(45deg);
}
.faq-full {
  max-width: 860px;
}
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
}
.gallery .ph:first-child {
  grid-row: 1/3;
}
.team-grid.four {
  grid-template-columns: repeat(4, 1fr);
}
.extra-grid.full .card {
  display: flex;
  flex-direction: column;
}
.extra-grid.full .card .mi-icon {
  margin-bottom: 14px;
  background: var(--teal-soft);
}
.hotel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hotel .ph {
  aspect-ratio: 16/10;
}
.hotel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.contact-page {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 12px;
}
.hours td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.hours td:first-child {
  color: var(--navy);
  font-weight: 600;
}
.legal {
  max-width: 760px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .method-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .area-list,
  .case-grid,
  .hotel-list,
  .route-grid,
  .contact-page {
    grid-template-columns: 1fr 1fr;
  }
  .contact-page {
    grid-template-columns: 1fr;
  }
  .team-grid.four {
    grid-template-columns: 1fr 1fr;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 180px;
  }
  .gallery .ph:first-child {
    grid-row: auto;
    grid-column: 1/3;
  }
}
@media (max-width: 600px) {
  .area-list,
  .case-grid,
  .hotel-list,
  .route-grid,
  .team-grid.four {
    grid-template-columns: 1fr;
  }
  .cta-band .box {
    padding: 30px 24px;
  }
  .cta-band {
    padding-bottom: 72px;
  }
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .gallery .ph {
    height: 180px;
  }
  .gallery .ph:first-child {
    grid-column: auto;
  }
}

/* Bilder in den Platzhaltern */
.ph.img {
  padding: 0;
  overflow: hidden;
  background: #f7f2ed;
}
.ph.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-photo.img {
  padding: 0;
}

/* =====================================================================
   5. Offenes Layout mit wenig Kästen
   ===================================================================== */
section {
  padding: 88px 0;
}
.page-hero {
  padding-bottom: 40px;
}
.tint + .cta-band {
  padding-top: 88px;
}
.cta-band {
  padding: 0 0 88px;
}
.section-head {
  margin-bottom: 40px;
}
/* Vertrauensleiste als ruhige Zeile statt Kasten */
.trust {
  margin-top: 0;
  padding: 8px 0 0;
}
.trust .grid {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.trust .item {
  padding: 26px 28px 26px 0;
  border-right: 0;
}
.trust .item + .item {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
/* Verfahren Startseite als Liste mit Linie */
.method {
  border-left: 2px solid var(--teal);
}
/* Anwendungsgebiete Startseite als offene Liste */
.area {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 0 24px;
}
.area:hover {
  box-shadow: none;
  border-color: var(--teal);
}
.area:hover h3 {
  color: var(--teal-dark);
}
/* Karten allgemein offen */
.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0 0;
}
.extra-grid {
  gap: 32px;
}
.extra-grid.full {
  row-gap: 44px;
}
.route-grid {
  gap: 32px;
}
.route-grid .card .mi-icon,
.extra-grid.full .card .mi-icon {
  box-shadow: none;
}
/* Anwendungsgebiete Unterseite */
.area-list {
  gap: 0 40px;
  margin-bottom: 48px;
}
.area-card {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 0;
}
.area-card .mi-icon {
  box-shadow: none;
}
/* Verfahren Unterseite mit Trennlinien */
.method-list {
  gap: 0;
}
.method-row {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 32px 0;
}
.method-row:last-child {
  border-bottom: 1px solid var(--line);
}
/* Team und Hotels ohne Rahmen */
.doc {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.doc .ph {
  border-radius: var(--radius);
}
.doc .body {
  padding: 20px 0 0;
}
.hotel {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hotel .ph {
  border-radius: var(--radius);
}
.hotel .body {
  padding: 18px 0 0;
}
/* Fallberichte */
.case-grid {
  gap: 40px;
}
.case-card {
  background: none;
  border: 0;
  box-shadow: none;
  border-top: 2px solid var(--teal);
  border-radius: 0;
  padding: 24px 0 0;
}
.chart-card {
  border: 0;
  box-shadow: none;
}
/* Footer mit Karte */
.footer-map {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: center;
}
.footer-map h4 {
  margin-bottom: 10px;
}
.footer-map p {
  margin: 0 0 6px;
}
.map-ph {
  position: relative;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #f7f2ed;
}
.map-ph .map-note {
  position: absolute;
  inset: auto 16px 16px 16px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--muted);
}
.map-ph .map-note button {
  flex: none;
  border: 0;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .trust .item + .item {
    padding-left: 0;
    border-left: 0;
  }
  .trust .item {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .trust .grid {
    border-bottom: 0;
    column-gap: 28px;
  }
}
@media (max-width: 900px) {
  section {
    padding: 64px 0;
  }
  .tint + .cta-band {
    padding-top: 64px;
  }
  .cta-band {
    padding-bottom: 72px;
  }
  .footer-map {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .area-list {
    gap: 0;
  }
}
@media (max-width: 640px) {
  .map-ph .map-note {
    flex-direction: column;
    align-items: flex-start;
  }
  .trust .item {
    border-bottom: 1px solid var(--line) !important;
  }
}

/* =====================================================================
   6. Abstände unter dem Hero und ruhige Flächen
   ===================================================================== */
.page-hero {
  padding: 150px 0 24px;
}
.page-hero + section:not(.tint) {
  padding-top: 32px;
}
.hero {
  padding-bottom: 48px;
}
.trust {
  padding-top: 0;
}
.nutri {
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.nutri .mi-icon {
  background: none;
  box-shadow: none;
}
.mi-icon {
  background: none !important;
  box-shadow: none !important;
  width: auto;
  height: auto;
  justify-content: flex-start;
}
.cta-band .box {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chart-card {
  background: none;
  padding: 0;
}
.contact-info h3 {
  margin-bottom: 10px;
}
.contact-info p {
  color: var(--muted);
}
.prose + .prose {
  margin-top: 0;
}
section.intro {
  padding-bottom: 0;
}
.area-card .mi-icon {
  align-self: flex-start;
  align-items: flex-start;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .page-hero {
    padding: 130px 0 20px;
  }
  .page-hero + section:not(.tint) {
    padding-top: 24px;
  }
}

/* =====================================================================
   7. Verlinkte Karten, Fallberichte und Seitenende
   ===================================================================== */
a.method,
a.card,
a.chip {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.chip {
  display: inline-block;
  color: var(--teal-dark);
  transition: background 0.2s;
}
a.chip:hover {
  background: var(--blue-dark);
  color: #fff;
}
/* Farbige Methoden-Karten behalten beim Darüberfahren die weiße Schrift */
a.method:hover b {
  color: #fff;
}
a.card:hover h3 {
  color: var(--teal-dark);
}
a.method b:after,
a.card h3:after {
  content: " \2192";
  opacity: 0;
  transition: opacity 0.2s;
}
a.method:hover b:after,
a.card:hover h3:after {
  opacity: 1;
}
.travel li a {
  color: inherit;
  text-decoration: none;
}
/* Links auf der orangen Anreise-Fläche werden beim Darüberfahren unterstrichen statt dunkler */
.travel li a:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:not(.more),
.group-intro a,
.case-text a,
.lead a,
.contact-info a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-decoration-color: rgba(184, 88, 16, 0.35);
  text-underline-offset: 3px;
}
.group-intro {
  margin: -6px 0 20px;
}
.more.small {
  font-size: 0.88rem;
  margin-top: 8px;
  display: inline-block;
}
.filters button {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: 0.2s;
}
.filters button:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}
.filters button.on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.case-list {
  display: grid;
  gap: 0;
}
.case-item {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.case-item:last-child {
  border-bottom: 1px solid var(--line);
}
.case-side .badge {
  display: inline-block;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.case-side h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
}
.case-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 20px;
}
.case-text h3 {
  font-size: 1.05rem;
  margin: 22px 0 6px;
}
.case-text h3:first-child {
  margin-top: 0;
}
.case-text p {
  color: var(--text);
  margin: 0 0 10px;
}
.case-note {
  color: var(--muted) !important;
  font-size: 0.9rem;
  margin-top: 18px !important;
}
[hidden] {
  display: none !important;
}
.steps-detail {
  padding-top: 0;
}
.steps-detail .split + .split {
  margin-top: 88px;
}
details p a {
  color: var(--teal-dark);
}
.split.reverse > :first-child {
  order: 0;
}
.split.two-prose {
  align-items: start;
}
.steps-detail .ph.img {
  aspect-ratio: 4/3;
}
.page-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding: 28px 0 0;
  margin-bottom: 48px;
}
.page-next a {
  text-decoration: none;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-next small {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.page-next b {
  font-size: 1.15rem;
}
.page-next .pn-prev b:before {
  content: "\2190  ";
}
.page-next .pn-next {
  text-align: right;
  align-items: flex-end;
}
.page-next .pn-next b:after {
  content: "  \2192";
}
.page-next a:hover b {
  color: var(--teal-dark);
}
.pn-only {
  padding: 0 0 88px;
}
[id] {
  scroll-margin-top: 110px;
}
@media (max-width: 900px) {
  .case-item {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 0;
  }
  .steps-detail .split + .split {
    margin-top: 56px;
  }
  .split.reverse > :first-child {
    order: 1;
  }
  .page-next b {
    font-size: 1rem;
  }
}

/* =====================================================================
   8. Aufklappmenüs, Sprungmarken und Ergänzende Therapien
   ===================================================================== */
.has-sub > a[role="button"] {
  cursor: default;
  user-select: none;
}
.has-sub.open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mega-foot {
  justify-content: flex-start;
  gap: 10px;
  background: var(--teal-soft);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 2px;
}
.mega-foot span {
  color: var(--navy);
  font-weight: 600;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.jump a {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: 0.2s;
}
.jump a:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}
.therapy-group {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.therapy-group:last-of-type {
  border-bottom: 1px solid var(--line);
}
.tg-head h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}
.tg-head p {
  color: var(--muted);
  margin: 0;
}
.svc {
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.svc:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.svc h3 {
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.svc p {
  margin: 0;
  color: var(--text);
}
.tg-foot {
  margin-top: 32px;
  color: var(--muted);
}
.tg-foot a {
  color: var(--teal-dark);
}
@media (max-width: 900px) {
  .therapy-group {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
}

/* Logo */
.logo-img {
  height: 46px;
  width: auto;
  display: block;
}
.logo-city {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4a4a;
  border-left: 1.5px solid #ebe5df;
  padding-left: 12px;
}
footer .logo-img {
  height: 56px;
}
@media (max-width: 760px) {
  .logo-img {
    height: 38px;
  }
  .logo-city {
    padding-left: 9px;
  }
}

/* =====================================================================
   9. SOZO-Farben Orange und Blau mit farbigen Flächen
   ===================================================================== */
:root {
  --orange: #f57921;
  --orange-2: #f89a55;
  --orange-dark: #b85810;
  --blue: #08a1e5;
  --blue-2: #3db8ee;
  --blue-dark: #0787c0;
  --blue-soft: #e4f2fb;
  --bg: #eef7fc;
}
h2 {
  color: var(--blue);
}
h3 {
  color: #33393f;
}
.btn-ghost {
  border-color: var(--orange);
}
/* Leiste oben mit Verlauf wie bei SOZO */
.topbar {
  background: linear-gradient(90deg, var(--orange), #b98a5f 45%, var(--blue));
  color: #fff;
}
.topbar a,
.topbar .lang a {
  color: #fff;
}
.topbar .lang a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Hero mit Formen in der Ecke */
.hero,
.page-hero {
  background: linear-gradient(180deg, #fff 0%, #f4fafd 100%);
  position: relative;
}
.hero:before,
.page-hero:before {
  content: "";
  position: absolute;
  left: -70px;
  top: 60px;
  width: 240px;
  height: 260px;
  background: var(--orange);
  border-radius: 0 0 120px 0;
  transform: skewY(-8deg);
  opacity: 0.95;
  pointer-events: none;
}
.hero:after,
.page-hero:after {
  content: "";
  position: absolute;
  left: 110px;
  top: 30px;
  width: 150px;
  height: 150px;
  background: var(--blue);
  border-radius: 0 0 90px 90px / 0 0 70px 70px;
  transform: rotate(-28deg);
  right: auto;
  opacity: 0.9;
  pointer-events: none;
}
.hero .wrap,
.page-hero .wrap {
  position: relative;
  z-index: 1;
}
/* Getönte Abschnitte hellblau mit runder Unterkante */
.tint,
.areas,
.team {
  background: var(--bg);
}
.tint,
.areas {
  border-radius: 0 0 50% 50% / 0 0 70px 70px;
}
/* Verfahren auf der Startseite als orange Flächen */
.methods {
  gap: 18px;
}
.method {
  background:
    var(--orange)
      radial-gradient(
        circle at 105% 105%,
        rgba(255, 255, 255, 0.18) 0 70px,
        transparent 71px
      ),
    var(--orange);
  background: radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.16) 0 64px,
      transparent 65px
    ),
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.12) 0 70px,
      transparent 71px
    ),
    var(--orange);
  border: 0;
  border-radius: 24px;
  padding: 26px 26px 28px;
  color: #fff;
}
.method b {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}
.method p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.98rem;
}
.method:nth-child(2),
.method:nth-child(3) {
  background: radial-gradient(
      circle at 100% 100%,
      rgba(255, 255, 255, 0.16) 0 64px,
      transparent 65px
    ),
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.12) 0 70px,
      transparent 71px
    ),
    var(--blue);
}
a.method:hover {
  transform: translateY(-3px);
}
a.method {
  transition: transform 0.2s;
}
/* Bilder mit farbiger Fläche dahinter */
.split > .ph.img,
.hero .ph.img {
  box-shadow: 18px 18px 0 var(--orange-2);
  border-radius: 24px;
}
section:nth-of-type(even) .split > .ph.img {
  box-shadow: -18px 18px 0 var(--blue-2);
}
/* Anreise: orange Fläche liegt über dem Bild */
.travel {
  gap: 0;
  grid-template-columns: 1.1fr 0.9fr;
}
.travel .ph.img {
  box-shadow: none;
  aspect-ratio: 16/12;
}
.travel-panel {
  background: radial-gradient(
      circle at 100% 0,
      rgba(255, 255, 255, 0.16) 0 90px,
      transparent 91px
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(255, 255, 255, 0.12) 0 110px,
      transparent 111px
    ),
    var(--orange);
  color: #fff;
  border-radius: 28px;
  padding: 44px 44px 40px;
  margin-left: -90px;
  position: relative;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(60, 60, 60, 0.12);
}
.travel-panel h2,
.travel-panel .eyebrow,
.travel-panel li strong,
.travel-panel a {
  color: #fff;
}
.travel-panel .eyebrow:before {
  background: #fff;
}
.travel-panel li {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}
.travel-panel li:before {
  background: #fff;
  box-shadow: none;
  width: 10px;
  height: 10px;
  top: 21px;
  left: 4px;
}
.travel-panel .more {
  display: inline-block;
  background: #fff;
  color: var(--orange-dark);
  padding: 12px 22px;
  border-radius: 999px;
}
/* Hinweise als hellblaue Fläche statt Rand */
.info-box,
.hint {
  background: var(--blue-soft);
  border-left: 0;
  border-radius: 20px;
  padding: 18px 22px;
  color: #3f4a52;
}
/* Chips und Ergänzende Therapien */
.chip,
a.chip {
  background: var(--blue-soft);
  color: var(--blue-dark);
}
.extra-grid .card {
  background: var(--blue-soft);
  border-radius: 22px;
  padding: 24px;
  border: 0;
  box-shadow: none;
}
.extra-grid .card:nth-child(even) {
  background: #fcefe4;
}
.extra-grid .card:nth-child(even) h3 {
  color: var(--orange-dark);
}
.method-row .tag {
  width: 84px;
  height: 84px;
  border-radius: 50% 50% 50% 14px;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.method-row:nth-child(even) .tag {
  background: var(--blue);
}
.extra-grid .card h3 {
  color: var(--blue-dark);
}
/* Kontakt und Abschluss */
.contact {
  background: linear-gradient(160deg, var(--blue-soft), #fff 70%);
}
.cta-band .box {
  background: linear-gradient(110deg, var(--orange), #f7904a 55%, var(--blue));
  color: #fff;
  border: 0;
  border-radius: 28px;
  padding: 40px 44px;
}
.cta-band .box h2,
.cta-band .box p,
.cta-band .box a:not(.btn) {
  color: #fff;
}
.cta-band .box .btn-primary {
  background: #fff;
  color: var(--orange-dark);
}
.cta-band .box .btn-ghost {
  border-color: #fff;
  color: #fff;
}
.cta-band .box .btn-ghost:hover {
  background: #fff;
  color: var(--orange-dark);
}
@media (max-width: 900px) {
  .travel {
    grid-template-columns: 1fr;
  }
  .travel-panel {
    margin: -60px 14px 0;
    padding: 32px 26px;
  }
  .split > .ph.img,
  .hero .ph.img,
  section:nth-of-type(even) .split > .ph.img {
    box-shadow: 10px 10px 0 var(--orange-2);
  }
  .hero:before {
    top: -10px;
    width: 120px;
    height: 130px;
    left: -60px;
  }
  .hero:after {
    top: -30px;
    left: 30px;
    width: 80px;
    height: 80px;
  }
  .page-hero:after {
    left: 20px;
  }
  .method-row .tag {
    width: 64px;
    height: 64px;
    font-size: 1.05rem;
  }
  .cta-band .box {
    padding: 32px 24px;
  }
}

.cta-band .box .eyebrow,
.cta-band .box .cb-phone,
.cta-band .box .cb-phone small,
.cta-band .box .cb-phone span {
  color: #fff;
}
.cta-band .box .eyebrow:before {
  background: #fff;
}

/* =====================================================================
   10. Schrift Outfit, Verläufe, Formen und Symbole
   ===================================================================== */
@font-face {
  font-family: "Outfit";
  src: url(fonts/outfit-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url(fonts/outfit-700.woff2) format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
h1,
h2,
h3,
.method b,
.method-row .tag,
.logo-city,
.btn {
  font-family:
    "Outfit",
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}
h1 {
  color: #141414;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h2 {
  font-weight: 700;
}
h3 {
  font-weight: 600;
}
.prose h2,
.steps-detail h2,
.case-side h2,
.tg-head h2 {
  color: #1f2327;
}
/* Buttons mit Verlauf wie bei SOZO */
.btn-primary {
  background: linear-gradient(90deg, #f57921, #f9a868);
  color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(90deg, #dc6614, #f58a3c);
}
.btn-ghost {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  border: 0;
  color: #fff;
}
.btn-ghost:hover {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  color: #fff;
}
/* Kurze Verlaufslinie unter Einleitungen */
.section-head:after,
.page-hero .lead:after {
  content: "";
  display: block;
  width: 240px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  margin-top: 26px;
}
.page-hero .lead:after {
  margin-top: 24px;
}
/* Startseite: Formen am Bild statt in der Ecke */
.hero:before,
.hero:after {
  display: none;
}
.hero-visual {
  position: relative;
}
.hero-visual:before {
  content: "";
  position: absolute;
  left: -60px;
  top: 22%;
  width: 220px;
  height: 320px;
  background: var(--orange);
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  transform: rotate(18deg);
  z-index: 0;
}
.hero-visual:after {
  content: "";
  position: absolute;
  left: 30px;
  top: -24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--blue);
  z-index: 0;
}
.hero-visual .ph,
.hero-visual > svg,
.hero-visual .hero-badge {
  position: relative;
  z-index: 1;
}
.hero-visual > svg {
  position: absolute;
}
.hero .ph.img {
  box-shadow: none;
}
.hero .wrap > div:first-child {
  position: relative;
  z-index: 2;
}
/* Unterseiten: blauer Kreis links, orange Viertel rechts */
.page-hero:before {
  left: -60px;
  top: 70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--blue);
  transform: none;
  opacity: 0.9;
}
.page-hero:after {
  left: auto;
  right: -40px;
  top: 40px;
  width: 170px;
  height: 170px;
  border-radius: 0 0 0 170px;
  background: var(--orange);
  transform: none;
  opacity: 0.95;
}
/* Bei schmaleren Bildschirmen rückt der blaue Kreis weiter nach links, damit er nicht hinter der Brotkrumen-Navigation liegt */
@media (min-width: 901px) and (max-width: 1520px) {
  .page-hero:before {
    left: -98px;
    width: 120px;
    height: 120px;
  }
}
/* Vorteile mittig mit großen Symbolen */
.trust .grid {
  background: none;
  border: 0;
  box-shadow: none;
}
.trust .item,
.trust .item + .item {
  text-align: center;
  border: 0;
  padding: 24px 18px;
}
.trust .item .icon {
  width: 58px;
  height: 58px;
  color: #4b4f54;
  stroke-width: 1.3;
  margin: 0 auto 14px;
  display: block;
}
.trust .item strong {
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  color: #1f2327;
}
/* Erkrankungen mit Symbolen und grauen Flächen */
.area-grid {
  gap: 20px;
}
.areas .area,
a.area {
  background: #fff;
  border: 0;
  border-radius: 18px;
  padding: 26px 24px 24px;
  display: block;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
a.area:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(8, 161, 229, 0.15);
}
.area-ic {
  display: block;
  width: 56px;
  height: 56px;
  color: #4b4f54;
  margin-bottom: 16px;
}
.area-ic svg {
  width: 100%;
  height: 100%;
}
a.area:hover .area-ic {
  color: var(--orange);
}
.area h3 {
  font-size: 1.2rem;
}
/* Schritte als blaue Pillen */
.step {
  padding-top: 52px;
}
.step:before {
  content: "Schritt " counter(step);
  width: auto;
  height: auto;
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
.step:after {
  left: 118px;
  top: 15px;
  background: linear-gradient(90deg, var(--blue-soft), transparent);
}
html[lang="en"] .step:before {
  content: "Step " counter(step);
}
.tl-item:before {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  border: 0;
  color: #fff;
}
/* Anwendungsgebiete: Einleitung als Pfirsich-Fläche mit schrägem Streifen */
.group-intro {
  background: linear-gradient(
    115deg,
    #f4d6bd 0 64%,
    rgba(255, 255, 255, 0.55) 64% 69%,
    #f9e6d6 69%
  );
  border-radius: 26px;
  padding: 30px 34px;
  color: #2b2b2b;
  max-width: none;
}
.group-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: #141414;
}
@media (max-width: 900px) {
  .hero-visual:before {
    width: 120px;
    height: 190px;
    left: -20px;
  }
  .hero-visual:after {
    width: 80px;
    height: 80px;
    left: 10px;
    top: -14px;
  }
  .page-hero:before {
    width: 90px;
    height: 90px;
    top: -20px;
    left: -40px;
  }
  .page-hero:after {
    width: 90px;
    height: 90px;
    top: -10px;
  }
  .group-intro {
    padding: 24px 22px;
    background: linear-gradient(115deg, #f4d6bd 0 75%, #f9e6d6 75%);
  }
}

/* =====================================================================
   11. Bedienung mit Tastatur (Sprunglink und Fokusrahmen)
   ===================================================================== */

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: #141414;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 12px;
}
main:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1f6fb2;
  outline-offset: 3px;
  border-radius: 6px;
}

/* =====================================================================
   12. Gehirn im Hero vollständig zeigen
   ===================================================================== */
.hero-visual .ph.img {
  aspect-ratio: 600/560;
  padding: 0;
  align-items: stretch;
}
.hero-visual .ph.img img {
  object-fit: contain;
}

/* =====================================================================
   13. Cookie-Einwilligung (Banner, Einstellungen und Cookie-Knopf)
   ===================================================================== */
/* Die Seite wird per Skript gesperrt, ohne den Scrollbalken auszublenden. So blitzt rechts nichts auf. */
html.cc-open body {
  touch-action: none;
}
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(20, 28, 36, 0.55);
  backdrop-filter: blur(2px);
}
.cc-overlay[hidden] {
  display: none;
}
.cc-box {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 120;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #fff;
  color: #1f2327;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(30, 40, 50, 0.3);
  padding: 26px 28px 18px;
  font-size: 15.5px;
  line-height: 1.55;
}
.cc-box.cc-wide {
  width: min(760px, calc(100vw - 32px));
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: calc(100vh - 48px);
}
.cc-box[hidden] {
  display: none;
}
.cc-box h2 {
  font-size: 1.35rem;
  color: #141414;
  margin: 0 0 8px;
}
.cc-text {
  margin: 0 0 16px;
  color: #3f464c;
}
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cc-btn {
  flex: 1 1 180px;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}
.cc-btn:hover {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
}
.cc-btn-light {
  flex-basis: 100%;
  background: #fff;
  color: #1f2327;
  border: 2px solid #cfd6dc;
}
.cc-btn-light:hover {
  background: #f3f6f8;
}
.cc-link {
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  color: var(--orange-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 6px;
}
.cc-legal {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: #5a6168;
}
.cc-legal a {
  color: inherit;
}
.cc-cats {
  display: grid;
  gap: 8px;
  margin: 4px 0 18px;
}
.cc-cat {
  background: #f6f8fa;
  border-radius: 16px;
}
.cc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
}
.cc-more {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
}
.cc-plus {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 1px;
  transition: transform 0.2s;
}
.cc-plus:before,
.cc-plus:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.5px;
  margin: -1.25px 0 0 -6px;
  border-radius: 2px;
  background: #fff;
}
.cc-plus:after {
  transform: rotate(90deg);
  transition: transform 0.2s;
}
.cc-more[aria-expanded="true"] .cc-plus {
  background: var(--blue);
}
.cc-more[aria-expanded="true"] .cc-plus:after {
  transform: rotate(0);
}
.cc-txt {
  flex: 1;
}
.cc-txt b {
  display: block;
}
.cc-txt small {
  display: block;
  color: #5a6168;
  font-size: 0.85rem;
  line-height: 1.45;
}
.cc-always {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue-dark);
  white-space: nowrap;
}
.cc-toggle {
  flex: none;
  position: relative;
  display: inline-flex;
  cursor: pointer;
  padding: 6px 0;
}
.cc-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cc-switch {
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #c9cfd5;
  position: relative;
  transition: background 0.2s;
}
.cc-switch:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.cc-check:checked + .cc-switch {
  background: var(--blue);
}
.cc-check:checked + .cc-switch:after {
  left: 21px;
}
.cc-check:focus-visible + .cc-switch {
  outline: 3px solid #1f6fb2;
  outline-offset: 3px;
}
.cc-details {
  padding: 0 18px 14px 54px;
}
.cc-details[hidden] {
  display: none;
}
.cc-dl {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.cc-dl + .cc-dl {
  margin-top: 8px;
}
.cc-dl dt {
  font-weight: 700;
  color: #1f2327;
}
.cc-dl dd {
  margin: 0;
  color: #3f464c;
  overflow-wrap: anywhere;
}
.cc-links a {
  display: inline-block;
  margin: 0 14px 4px 0;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cc-fab {
  position: fixed;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(30, 40, 50, 0.22);
}
.cc-fab svg {
  width: 26px;
  height: 26px;
}
.cc-fab:hover {
  transform: scale(1.06);
  color: var(--orange);
}
.map-frame {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  display: block;
  border-radius: inherit;
}
.map-ph .map-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 900px) {
  .cc-box {
    bottom: 12px;
    padding: 22px 20px 14px;
    font-size: 15px;
  }
  .cc-box.cc-wide {
    top: 12px;
    bottom: 12px;
    transform: translateX(-50%);
    max-height: none;
  }
  .cc-details {
    padding: 0 10px 12px;
  }
  .cc-dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cc-dl dd {
    margin-bottom: 8px;
  }
}

/* Formulare: Pflichtfelder und Hinweise */
.req {
  color: var(--orange-dark);
  font-weight: 700;
}
.form-req {
  margin: -4px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
form .check a {
  color: var(--blue-dark);
  text-decoration: underline;
}
.form-ok {
  margin: 0;
  background: var(--blue-soft);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 600;
  color: #1f4f75;
}

/* Rechtstexte */
.legal h2 {
  font-size: 1.35rem;
  margin: 36px 0 10px;
  color: #1f2327;
}
.legal p {
  max-width: 760px;
}
.legal-hint {
  background: var(--blue-soft);
  border-radius: 18px;
  padding: 16px 20px;
  color: #2f3a42;
}
mark.todo {
  background: #ffe9a8;
  color: #3b2f00;
  border-radius: 4px;
  padding: 1px 5px;
}

/* =====================================================================
   14. Ruhige Seite hinter offenen Fenstern und Cookie-Knopf unten links
   1. Der Platz der Bildlaufleiste bleibt immer reserviert. So springt
      die Seite nicht zur Seite, wenn ein Fenster das Scrollen sperrt.
   2. Solange Cookie-Banner, Kontakt-Fenster oder Handy-Menü offen
      sind, scrollt nur das Fenster und nicht die Seite.
   3. Der Cookie-Knopf unten links wird im Footer fast durchsichtig
      und erscheint wieder beim Darüberfahren.
   ===================================================================== */
html {
  scrollbar-gutter: stable;
}
html.cp-open,
html.nav-open {
  overflow: hidden;
}
html.cp-open body,
html.nav-open body {
  overflow: hidden;
}
.cp-box,
nav.main,
.cc-box {
  overscroll-behavior: contain;
}
.cc-fab {
  left: 22px;
  bottom: 18px;
}
.cc-fab {
  transition:
    opacity 0.3s,
    transform 0.2s;
}
html.fabs-leise .cc-fab {
  opacity: 0.15;
}
html.fabs-leise .cc-fab:hover,
html.fabs-leise .cc-fab:focus-visible {
  opacity: 1;
}
@media (max-width: 900px) {
  .cc-fab {
    left: 15px;
    bottom: 96px;
    width: 44px;
    height: 44px;
  }
}
@media (hover: none) {
  html.fabs-leise .cc-fab:hover {
    opacity: 0.15;
  }
}

/* Aktiver Menüpunkt Termin & Kontakt bleibt gut lesbar (weiße Schrift auf dunklerem Orange) */
nav.main > ul > li.cta.active > a,
nav.main > ul > li.cta.active > a:hover {
  color: #fff;
  background: var(--orange-dark);
}

/* =====================================================================
   15. Alle Bildschirmgrößen
   1. Lange deutsche Wörter trennen, Spalten dürfen schmaler werden
   2. Sehr schmale Handys und Fold-Außendisplays (bis 360 Pixel)
   3. Handys quer und andere niedrige Fenster
   4. Tablets und kleine Laptops
   5. Große Bildschirme (ab 1920 Pixel)
   6. Notch und Kamera-Aussparung bei iPhones
   ===================================================================== */
/* 1. */
h1,
h2,
h3,
h4,
.page-next b,
.card h3,
.lead {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.btn,
nav.main a,
.topbar a,
.logo-city {
  -webkit-hyphens: manual;
  hyphens: manual;
}
.hero .wrap > *,
.split > *,
.footer-map > *,
.page-next > *,
.trust .grid > *,
.area-grid > *,
.extra-grid > *,
.steps > *,
.team-grid > *,
.case-grid > *,
.hotel-list > *,
.route-grid > *,
.area-list > *,
.methods > *,
footer .grid > * {
  min-width: 0;
}
img,
svg,
video,
iframe {
  max-width: 100%;
}
.topbar a[href^="tel:"] {
  white-space: nowrap;
}
/* 2. */
@media (max-width: 600px) {
  .page-next {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-next .pn-next {
    text-align: left;
    align-items: flex-start;
  }
}
@media (max-width: 760px) {
  .logo-city {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}
@media (max-width: 360px) {
  .wrap {
    padding: 0 14px;
  }
  h1 {
    font-size: 1.85rem;
  }
  h2 {
    font-size: 1.45rem;
  }
  .topbar .info span:first-child {
    font-size: 0;
  }
  .topbar .info span:first-child a {
    font-size: 13px;
  }
  .logo-img {
    height: 32px;
  }
  .logo-city {
    font-size: 11px;
    padding-left: 7px;
    letter-spacing: 0.06em;
  }
  .btn {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mobile-contact .btn,
  .mobile-contact a {
    font-size: 0.9rem;
  }
}
@media (max-width: 300px) {
  .logo-city {
    display: none;
  }
}
/* 3. */
@media (max-height: 520px) and (orientation: landscape) {
  .cc-fab {
    bottom: 14px;
    width: 40px;
    height: 40px;
  }
  .side-contact {
    transform: translateY(-50%) scale(0.85);
    transform-origin: right center;
  }
  .cc-box,
  .cc-box.cc-wide {
    top: 8px;
    bottom: 8px;
    max-height: none;
    transform: translateX(-50%);
  }
  .cc-box:not(.cc-wide) {
    top: auto;
  }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
  .cc-fab {
    bottom: 86px;
    left: 70px;
  }
}
/* 4. */
@media (max-width: 1100px) {
  .extra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .extra-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .extra-grid {
    gap: 20px;
  }
}
/* 5. */
body {
  font-size: var(--base-fs, 17px);
}
@media (max-width: 600px) {
  :root {
    --base-fs: 16px;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 106.25%;
  }
  :root {
    --max: 1320px;
    --base-fs: 18px;
  }
}
@media (min-width: 2560px) {
  html {
    font-size: 118.75%;
  }
  :root {
    --max: 1480px;
    --base-fs: 20px;
  }
}
@media (min-width: 3200px) {
  html {
    font-size: 150%;
  }
  :root {
    --max: 1880px;
    --base-fs: 25px;
  }
}
/* 6. */
@supports (padding: max(0px)) {
  .mobile-contact {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .wrap {
    padding-left: max(var(--wrap-pad, 16px), env(safe-area-inset-left));
    padding-right: max(var(--wrap-pad, 16px), env(safe-area-inset-right));
  }
}
@media (min-width: 901px) {
  :root {
    --wrap-pad: 24px;
  }
}
@media (max-width: 360px) {
  :root {
    --wrap-pad: 14px;
  }
}
/* Telefonnummern nie umbrechen, Bild im Hero auf Tablets mittig */
a[href^="tel:"],
a[href^="tel:"] > span,
.sc-label {
  white-space: nowrap;
}
@media (max-width: 420px) {
  a[href^="tel:"] > span {
    font-size: clamp(1.15rem, 6.4vw, 1.6rem);
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero-visual {
    margin: 0 auto;
    max-width: 540px;
    width: 100%;
  }
}

.navbar .logo {
  flex: none;
}

/* =====================================================================
   16. Fallberichte und Forschung
   ===================================================================== */
/* Startseite 07 Fallberichte · Aufbau eines Berichts statt Grafik */
.report-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: rs;
}
.report-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: start;
  counter-increment: rs;
}
.report-steps li:before {
  content: counter(rs);
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
}
.report-steps li:nth-child(2):before {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-2));
}
.report-steps b {
  display: block;
  color: #1f2327;
}
.report-steps span {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Fallberichte · Titel bleibt beim Lesen neben dem Text stehen */
@media (min-width: 901px) {
  .case-side {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

/* SOZO-Methode 06 Forschung */
.studies {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  counter-reset: st;
}
.studies li {
  position: relative;
  padding: 22px 24px 20px 70px;
  border-radius: 22px;
  background: var(--blue-soft);
  counter-increment: st;
}
.studies li:nth-child(even) {
  background: #fcefe4;
}
.studies li:before {
  content: counter(st);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
}
.studies li:nth-child(even):before {
  background: var(--orange);
}
.studies h3 {
  font-size: 1.08rem;
  margin: 4px 0 8px;
}
.studies p {
  margin: 0 0 8px;
  color: var(--muted);
}
.studies .study-src {
  margin: 0;
  font-size: 0.9rem;
}
.studies .study-src a {
  color: var(--blue-dark);
  font-weight: 600;
}
.studies .study-src a:after {
  content: " \2197";
}
.studies-note {
  margin: 24px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 0.95rem;
}
@media (max-width: 760px) {
  .studies {
    grid-template-columns: 1fr;
  }
  .studies li {
    padding: 20px 20px 18px 62px;
  }
  .studies li:before {
    left: 16px;
  }
}
.studies .study-src a + a {
  margin-left: 14px;
}

/* =====================================================================
   17. Überschriften im Footer
   Die Spaltentitel im Footer sind h2 für die richtige Reihenfolge der Überschriften
   und sehen aus wie zuvor. */
footer h2.foot-title {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--navy);
  margin: 0 0 14px;
}
.footer-map h2.foot-title {
  margin-bottom: 10px;
}

/* =====================================================================
   18. Platzhalter für fehlende Bilder
   Solange eine Grafik noch nicht im Ordner img liegt, bleibt ihre Fläche leer statt ein kaputtes Bild zu zeigen.
   ===================================================================== */
img.bild-fehlt {
  opacity: 0;
}

/* =====================================================================
   19. Foto mit Bildunterschrift (Unsere Praxis, SOZO-Konzept)
   Hochformat-Foto mit farbiger Fläche dahinter und kurzer Bildunterschrift.
   ===================================================================== */
.foto-sozo {
  margin: 0;
  max-width: 420px;
  width: 100%;
  justify-self: center;
}
.foto-sozo .ph.img {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  box-shadow: 18px 18px 0 var(--orange-2);
}
section:nth-of-type(even) .foto-sozo .ph.img {
  box-shadow: -18px 18px 0 var(--blue-2);
}
.foto-sozo .ph.img img {
  object-position: center 40%;
}
.foto-sozo figcaption {
  margin-top: 30px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 900px) {
  .foto-sozo .ph.img,
  section:nth-of-type(even) .foto-sozo .ph.img {
    box-shadow: 10px 10px 0 var(--orange-2);
  }
  .foto-sozo figcaption {
    margin-top: 20px;
  }
}

/* =====================================================================
   20. Logo als Schrift (entfällt seit v49)
   Menü und Footer zeigen wieder das Originallogo img/sozo-logo.svg,
   die Größen stehen im Abschnitt Logo (.logo-img).
   ===================================================================== */

/* =====================================================================
   21. Videos (SOZO-Methode, YouTube mit Zwei-Klick und Instagram-Links)
   YouTube lädt erst nach Zustimmung, vorher steht ein Platzhalter.
   ===================================================================== */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.video-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange) 0%, #f89a55 45%, #3db8ee 100%);
}
.video-play {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--orange);
  display: grid;
  place-items: center;
}
.video-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
}
.video-ph .video-note {
  position: absolute;
  inset: auto 14px 14px 14px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}
.video-ph .video-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.video-ph .video-note button {
  flex: none;
  border: 0;
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.video-ph .video-extern {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: #fff;
  color: var(--teal-dark);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.video-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-ig-intro {
  margin: 36px 0 14px;
}
.video-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.video-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.video-links a svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.video-links a:hover {
  background: var(--orange);
  color: #fff;
}
@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .video-ph {
    aspect-ratio: auto;
    min-height: 300px;
  }
  .video-ph .video-note {
    flex-direction: column;
    align-items: flex-start;
  }
  .video-play {
    top: 26%;
  }
}

/* =====================================================================
   22. Echte Praxisfotos (Startseite oben und Team)
   23. Cookie-Fenster am Handy (Knöpfe untereinander)
   Das Foto oben auf der Startseite füllt die Fläche ganz aus.
   Die Linien der Animation laufen hinter dem Foto.
   ===================================================================== */
.hero-visual .ph.img img[src$=".jpg"] {
  object-fit: cover;
  object-position: center 30%;
}
.hero-visual .ph.img {
  z-index: 2;
}
.doc .ph.img img[src$=".jpg"] {
  object-position: center 25%;
}

/* =====================================================================
   23. Cookie-Fenster am Handy (Knöpfe untereinander)
   Auf schmalen Bildschirmen steht jeder Knopf in einer eigenen Zeile.
   Der Link zu den Einstellungen steht mittig darunter.
   ===================================================================== */
@media (max-width: 480px) {
  .cc-actions .cc-btn {
    flex-basis: 100%;
  }
  .cc-actions .cc-link {
    flex-basis: 100%;
    text-align: center;
    padding: 10px 0 2px;
  }
}

/* =====================================================================
   24. E-Mail statt Telefon im Kontaktband
   Der runde Knopf mit dem Briefsymbol bleibt rund. Am Handy ist die
   Schrift etwas kleiner, damit die E-Mail-Adresse in eine Zeile passt.
   ===================================================================== */
.cb-phone svg {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .cb-phone {
    font-size: 1.2rem;
  }
}

/* =====================================================================
   25. Startseite 06 Unsere Praxis mit Teamfoto (seit v46)
   ===================================================================== */
.foto-team {
  max-width: 1000px;
  margin: 0 auto;
}
.foto-team .ph {
  aspect-ratio: 16 / 9;
}
.foto-team figcaption {
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.team-text {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
}

/* =====================================================================
   26. Startseite Hero, Hinweis "Nach dem SOZO-Konzept" vor dem Foto (seit v47)
   Das Foto hat z-index 2, der Hinweis lag dahinter und war halb verdeckt.
   ===================================================================== */
.hero-visual .hero-badge {
  z-index: 3;
}

/* =====================================================================
   27. Bedienung am Handy (seit v50)
   Das mobile Menü beginnt unter der Kopfzeile (script.js setzt --nav-top),
   damit die Menüpunkte beim Scrollen nicht durch das Logo laufen. Der Cookie-Knopf verschwindet bei
   offenem Menü und fängt im Footer keine Klicks mehr ab.
   ===================================================================== */
@media (max-width: 1180px) {
  html.nav-open nav.main {
    top: var(--nav-top, 0px);
    padding-top: 24px;
  }
}
html.nav-open .cc-fab {
  display: none;
}
html.fabs-leise .cc-fab {
  pointer-events: none;
}

/* =====================================================================
   28. Korrekturen aus der Gesamtprüfung (seit v55)
   Geschlossenes Handy-Menü fängt keine Tipps mehr ab (siehe auch .mega oben),
   englisches Menü passt in die Leiste,
   Kartenhinweis am Handy, Kontaktfenster, Cookie-Knopf, leere Bildflächen,
   Einleitungen auf Anwendungsgebiete offen statt als Kasten, Tippziele.
   ===================================================================== */
@media (max-width: 1180px) {
  nav.main:not(.open) {
    pointer-events: none;
  }
}
html[lang="en"] nav.main > ul > li > a {
  padding-left: 9px;
  padding-right: 9px;
}
html[lang="en"] nav.main > ul > li.cta {
  margin-left: 4px;
}
@media (max-width: 640px) {
  .map-ph {
    height: auto;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    padding: 16px;
  }
  .map-ph .map-note {
    position: static;
  }
}
.cp-phone {
  font-size: clamp(1.05rem, 5vw, 1.55rem);
  overflow-wrap: anywhere;
  min-width: 0;
}
html.cp-open .cc-fab {
  display: none;
}
html.fabs-leise .cc-fab {
  opacity: 0;
  visibility: hidden;
}
.travel .ph.img:has(img.bild-fehlt),
.hotel .ph.img:has(img.bild-fehlt) {
  display: none;
}
.travel:has(img.bild-fehlt) {
  grid-template-columns: 1fr;
}
.group-intro {
  background: none;
  border-radius: 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--orange);
}
@media (max-width: 900px) {
  .group-intro {
    background: none;
    padding: 0 0 0 16px;
  }
  .lang a {
    display: inline-block;
    padding: 12px 8px;
    margin: -12px 0;
  }
  footer ul {
    gap: 14px;
  }
  .crumbs a {
    display: inline-block;
    padding: 8px 0;
  }
}
@media (min-width: 1181px) {
  .mega-item b {
    min-height: 2.6em;
  }
}

/* =====================================================================
   29. Korrekturen aus der Prüfung vor der Vorstellung (seit v56)
   Menü am Handy mit Kopfzeile und Schließen-Knopf, Anreise-Feld ohne Bild,
   Schriftgröße in Formularen, markierte Unterseite im Aufklappmenü
   ===================================================================== */
html.nav-open body,
html.cp-open body,
body.menu-open {
  overflow: visible;
}
@media (max-width: 1180px) {
  .mega.two {
    width: auto;
    left: auto;
    right: auto;
    grid-template-columns: none;
  }
  nav.main > ul > li > a {
    white-space: normal;
  }
  .mega-item {
    padding: 10px 0;
  }
}
.travel:has(img.bild-fehlt) .travel-panel {
  margin: 0;
}
input,
textarea,
select {
  font-size: 1rem;
}
.mega-item[aria-current="page"] b {
  color: var(--orange-dark);
}
@media (max-width: 1180px) {
  html.nav-open header.site {
    background: #fff;
  }
}

/* =====================================================================
   30. Ruhiger Seitenwechsel (seit v56)
   Der Browser blendet beim Wechsel innerhalb der Website weich über.
   Kopfzeile, Kontakt-Reiter, Kontaktleiste und Cookie-Knopf bleiben
   dabei stehen. Bei "Bewegung reduzieren" wird nicht animiert.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  @view-transition {
    navigation: auto;
  }
}
header.site {
  view-transition-name: kopfzeile;
}
html.nav-open header.site,
html.nav-open .side-contact,
html.nav-open .mobile-contact,
html.nav-open .cc-fab {
  view-transition-name: none;
}
.side-contact {
  view-transition-name: kontakt-reiter;
}
.mobile-contact {
  view-transition-name: kontaktleiste;
}
.cc-fab {
  view-transition-name: cookie-knopf;
}
/* Sprungmarken von anderen Seiten sofort anfahren, nur innerhalb der Seite weich scrollen */
html {
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html.weich-scrollen {
    scroll-behavior: smooth;
  }
}
::view-transition-group(*) {
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
}

/* =====================================================================
   31. Kein Aufblitzen beim Laden (seit v58)
   Bis die Seite geladen ist, laufen keine Übergänge. So gleitet nach dem
   Neuladen, etwa nach "Alle ablehnen", das Kontaktfenster nicht kurz rechts
   hinaus und das Handy-Menü blendet nicht kurz ein.
   ===================================================================== */
html:not(.geladen) *,
html:not(.geladen) *::before,
html:not(.geladen) *::after {
  transition: none !important;
}

/* =====================================================================
   32. Footer auf Handy und Tablet (seit v60)
   Reihenfolge: Logo, Adresse und Kontakt mit Karte, Links, Rechtliches.
   Alle Blöcke auf einer linken Kante mit gleichen Abständen. Rechts bleibt
   bei Tablets quer Platz für den Kontakt-Reiter.
   ===================================================================== */
@media (max-width: 1180px) {
  footer .wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 40px;
  }
  footer .grid {
    display: contents;
  }
  footer .grid > :first-child {
    grid-column: 1 / -1;
    order: 1;
  }
  footer .grid > :first-child p {
    margin-bottom: 0;
  }
  footer .footer-map {
    grid-column: 1 / -1;
    order: 2;
    margin-top: 0;
  }
  footer .grid > :not(:first-child) {
    order: 3;
  }
  footer .bottom {
    grid-column: 1 / -1;
    order: 4;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-map h2.foot-title {
    margin-bottom: 14px;
  }
  .footer-map p {
    margin: 0 0 12px;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  footer .wrap {
    padding-right: 72px;
  }
}
@media (max-width: 600px) {
  footer .wrap {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

/* =====================================================================
   33. Kontaktreiter und Kontaktleiste (seit v63)
   Der Kontaktreiter rechts verdeckt zwischen 901 und 1299 px keinen
   Text mehr, weil der Inhalt dort mehr Abstand zum Rand bekommt.
   Die Kontaktleiste am Handy bleibt immer unten. Sie hat keinen
   eigenen Übergang beim Seitenwechsel mehr und verschwindet, solange
   die Tastatur für ein Formularfeld offen ist.
   ===================================================================== */
@media (min-width: 901px) and (max-width: 1299px) {
  main .wrap,
  footer .wrap {
    padding-left: 72px;
    padding-right: 72px;
  }
}
@media (max-width: 900px) {
  .mobile-contact,
  html.nav-open .mobile-contact {
    view-transition-name: none;
  }
  html:has(input:focus, textarea:focus, select:focus) .mobile-contact {
    display: none;
  }
}

/* =====================================================================
   34. Weniger Zahlen (seit v69)
   Menü, Schritte auf der Startseite, Fallberichte, Behandlungsablauf
   und Studienliste kommen ohne Nummern aus. Die Reihenfolge ergibt sich
   aus den Überschriften. Im Behandlungsablauf bleibt ein Punkt auf der
   Linie stehen.
   ===================================================================== */
nav.main > ul > li:not(.cta) > a:before {
  content: none;
}
.step {
  padding-top: 0;
}
.step:before,
.step:after {
  content: none;
}
.report-steps li {
  grid-template-columns: 1fr;
}
.report-steps li:before {
  content: none;
}
.studies li {
  padding-left: 24px;
}
.studies li:before {
  content: none;
}
.tl-item:before {
  content: "";
  width: 18px;
  height: 18px;
  left: 15px;
  top: 6px;
}

/* =====================================================================
   35. Ruhigere Abschnitte (seit v69)
   Die kleine Überschrift in Großbuchstaben steht nur noch oben auf
   jeder Seite und nicht mehr über jedem Abschnitt. Der Hinweis über
   dem Foto oben auf der Startseite fällt weg.
   ===================================================================== */
.eyebrow {
  display: none;
}
.hero .eyebrow,
.page-hero .eyebrow {
  display: inline-block;
}
.hero-badge {
  display: none;
}

/* =====================================================================
   36. Handy und Tablet ohne Seitenübergang (seit v71)
   Auf Geräten mit Touch blendet der Browser beim Seitenwechsel nicht
   mehr weich über. Safari zeichnet dabei feste Elemente wie die
   Kontaktleiste und den Cookie-Knopf sonst kurz mitten im Bildschirm.
   ===================================================================== */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  @view-transition {
    navigation: none;
  }
}

/* =====================================================================
   37. Leiste oben am Handy (seit v71)
   Der obere Bereich jeder Seite liegt am Handy nicht mehr über dem
   unteren Rand der Leiste mit E-Mail und Sprache. Der Text steht so
   wieder mit gleichem Abstand oben und unten.
   ===================================================================== */
.topbar {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   38. Weniger Raster (seit v72)
   Startseite mit Vertrauenssatz statt vier Symbolen, Anwendungsgebiete
   als ruhige Liste neben der Überschrift und ergänzende Therapien als
   Fließtext. Anwendungsgebiete ohne Symbol, Unterkünfte ohne Bild.
   ===================================================================== */
.trust-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--muted);
}
.trust-text strong {
  color: var(--navy);
}
.areas-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: start;
}
.areas-split .section-head {
  margin-bottom: 0;
}
.areas-split .note {
  margin-top: 24px;
}
.area-panel {
  min-width: 0;
}
.area-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  border-top: 1px solid #d9e6ee;
}
.area-more {
  margin: 18px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36em;
}
/* FAQ ist eigene Section: kein Extra-Abstand oben (sonst Anreise→FAQ riesig) */
.faq-section .faq {
  margin-top: 0;
}
.faq-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
.faq-intro {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 640px;
}

.area-row {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #d9e6ee;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s, padding 0.2s;
}
.area-row b {
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.2s;
}
.area-row span {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--muted);
}
.area-row:hover {
  padding-left: 8px;
}
.area-row:hover b {
  color: var(--orange-dark);
}
.extra-text {
  max-width: 780px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.8;
}
.extra-text a {
  color: var(--orange-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.area-card {
  gap: 0;
}
.hotel .body {
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .areas-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .area-index {
    grid-template-columns: 1fr;
  }
  .trust-text {
    font-size: 1.02rem;
    text-align: left;
    padding: 24px 0;
  }
}

/* =====================================================================
   39. Feste Elemente in Safari (seit v73)
   Das weiche Überblenden beim Seitenwechsel gibt es nur noch am
   Computer mit Maus (siehe Abschnitt 30). Das geschlossene
   Kontaktfenster ragt nicht mehr rechts aus dem Bildschirm. So bleiben
   Kontaktleiste und Cookie-Knopf in Safari am unteren Rand.
   ===================================================================== */
.contact-panel {
  overflow: hidden;
}

/* =====================================================================
   40. Ruhigere SOZO-Methode (seit v74)
   Die kleinen Überschriften "So funktioniert es" und "So fühlt es sich
   an" standen bei jedem Verfahren gleich da. Sie sind ausgeblendet,
   die Texte bleiben.
   ===================================================================== */
.method-row .label {
  display: none;
}

/* =====================================================================
   41. Brainworks im Logo (seit v75)
   Neben dem SOZO-Logo steht der Praxisname Brainworks groß über
   Heidelberg, wie im Briefkopf der Praxis. Gilt für Menü und Footer.
   ===================================================================== */
.logo-city {
  line-height: 1.15;
}
.logo-city strong {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #3a3a3a;
}
footer .logo-city strong {
  font-size: 1.3rem;
}
@media (max-width: 760px) {
  .logo-city strong,
  footer .logo-city strong {
    font-size: 0.98rem;
  }
}
@media (max-width: 380px) {
  .logo-city {
    font-size: 0.66rem;
    padding-left: 7px;
  }
  .logo-city strong,
  footer .logo-city strong {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 350px) {
  .logo-img {
    height: 28px;
  }
  .logo-city strong,
  footer .logo-city strong {
    font-size: 0.74rem;
  }
}

/* =====================================================================
   42. Einleitungen ohne Linie (seit v75)
   Die Einleitungen der Gruppen auf Anwendungsgebiete stehen ohne die
   orange Linie links als normaler Text da.
   ===================================================================== */
.group-intro {
  border-left: 0;
  padding: 0;
}

/* =====================================================================
   43. Brainworks oben auf der Startseite (seit v75)
   Über der Hauptüberschrift steht groß der Praxisname und darunter
   "Zentrum für Funktionelle Medizin und Neuromodulation".
   ===================================================================== */
.hero-brand {
  margin: 0 0 18px;
  line-height: 1.25;
}
.hero-brand strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3a3a3a;
}
.hero-brand span {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: #5a5a5a;
}
@media (max-width: 760px) {
  .hero-brand strong {
    font-size: 1.3rem;
  }
  .hero-brand span {
    font-size: 0.92rem;
  }
}

/* =====================================================================
   44. Weniger Vorlage (seit v75)
   Die Verlaufslinie steht nur noch auf der Startseite. Fotos haben
   keinen farbigen Versatz mehr, vor dem Seitenkennzeichen steht kein
   Strich und die Studien sind eine schlichte Liste. Am Handy haben
   alle Abschnitte 64 Pixel Abstand und die Footer-Links größere
   Klickflächen.
   ===================================================================== */
.page-hero .lead:after,
main:has(.page-hero) .section-head:after {
  display: none;
}
.split > .ph.img,
.hero .ph.img,
section:nth-of-type(even) .split > .ph.img,
.foto-sozo .ph.img,
section:nth-of-type(even) .foto-sozo .ph.img {
  box-shadow: none;
}
.eyebrow:before {
  display: none;
}
.studies {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 820px;
}
.studies li,
.studies li:nth-child(even) {
  background: none;
  border-radius: 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.studies li:last-child {
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
  .cta-band,
  .pn-only {
    padding-bottom: 64px;
  }
  footer ul a,
  footer p a,
  footer .bottom a {
    display: inline-block;
    padding: 4px 0;
  }
  footer ul {
    gap: 6px;
  }
}

/* =====================================================================
   45. Brainworks-Logo und Umschalter (seit v77)
   Im Menü und im Footer steht vorne groß das Zeichen der Praxis mit
   dem Namen Brainworks Heidelberg und rechts daneben kleiner das
   SOZO-Logo. Oben in der Leiste wählt man zwischen der Ansicht Modern
   und Schlicht (design.js, Abschnitt 46).
   ===================================================================== */
.logo-img.logo-bw {
  height: 52px;
  width: auto;
}
.navbar .logo-city strong {
  font-size: 1.3rem;
}
.logo-sozo {
  height: 34px;
  width: auto;
  display: block;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1.5px solid #ebe5df;
  box-sizing: content-box;
}
footer .logo-img.logo-bw {
  height: 60px;
}
/* Im Footer steht das SOZO-Logo unter dem Brainworks-Logo, weil die Spalte schmal ist */
footer .logo {
  flex-wrap: wrap;
  row-gap: 14px;
}
footer .logo-sozo {
  flex-basis: 100%;
  height: 40px;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 1339px) and (min-width: 1200px) {
  .navbar .logo-img.logo-bw {
    height: 42px;
  }
  .navbar .logo-city {
    padding-left: 9px;
  }
  .navbar .logo-city strong {
    font-size: 1rem;
  }
  .navbar .logo-sozo {
    height: 26px;
    margin-left: 9px;
    padding-left: 9px;
  }
}
@media (max-width: 760px) {
  .logo-img.logo-bw {
    height: 40px;
  }
  .navbar .logo-city strong {
    font-size: 1.05rem;
  }
  .logo-sozo {
    height: 26px;
    margin-left: 10px;
    padding-left: 10px;
  }
  footer .logo-sozo {
    height: 34px;
  }
}
/* Auf Handy und Tablet steht die E-Mail unten in der Kontaktleiste, oben ist Platz für Umschalter und Sprache */
@media (max-width: 900px) {
  .topbar .info {
    display: none;
  }
  .topbar .lang {
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .logo-img.logo-bw {
    height: 32px;
  }
  .logo-city {
    padding-left: 7px;
  }
  .navbar .logo-city strong,
  footer .logo-city strong {
    font-size: 0.86rem;
    letter-spacing: 0.04em;
  }
  .logo-sozo {
    height: 21px;
    margin-left: 7px;
    padding-left: 7px;
  }
  .navbar .burger {
    flex: none;
  }
}
@media (max-width: 340px) {
  .logo-img.logo-bw {
    height: 26px;
  }
  .navbar .logo-city strong,
  footer .logo-city strong {
    font-size: 0.74rem;
  }
  .logo-sozo {
    height: 17px;
    margin-left: 5px;
    padding-left: 5px;
  }
}

/* =====================================================================
   46. Schlichte Ansicht (seit v77)
   Gilt nur, wenn oben "Schlicht" gewählt ist (Klasse design-schlicht
   am html-Element). Viel Weiß, ruhiges Grau, Orange nur als Akzent für
   Knöpfe und Links, kein Blau, keine Formen und Verläufe.
   ===================================================================== */
html.design-schlicht {
  --blue: #3a3a3a;
  --blue-2: #5a5a5a;
  --blue-dark: #2b2b2b;
  --blue-soft: #f5f5f4;
  --bg: #f7f7f6;
  --orange-2: #f57921;
  --teal-soft: #f7f7f6;
  --sand: #f2f2f1;
  --line: #e6e6e6;
  --radius: 8px;
}
/* Leiste oben und Menü */
.design-schlicht .topbar {
  background: #f5f5f4;
  color: #4a4a4a;
  border-bottom: 1px solid #e6e6e6;
}
.design-schlicht .topbar a,
.design-schlicht .topbar .lang a {
  color: #3a3a3a;
}
/* Kopfleiste weiß über die volle Breite, gilt seit v80 für beide
   Designs (Wunsch der Praxis aus Schlicht übernommen) */
:root header.site {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
:root .navbar,
:root header.site.scrolled .navbar {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: #fff;
  padding-left: 0;
  padding-right: 0;
}
.design-schlicht .nav-pill {
  border-radius: 6px;
}
/* Überschriften und Text */
.design-schlicht h1,
.design-schlicht h2,
.design-schlicht .group-title {
  color: #222;
}
.design-schlicht h3 {
  color: #333;
}
/* Knöpfe ohne Verlauf */
.design-schlicht .btn {
  border-radius: 6px;
}
.design-schlicht .btn-primary,
.design-schlicht nav.main > ul > li.cta > a {
  background: #f57921;
  color: #fff;
  border-radius: 6px;
}
.design-schlicht .btn-primary:hover,
.design-schlicht nav.main > ul > li.cta > a:hover {
  background: #b85810;
  color: #fff;
}
.design-schlicht .btn-ghost {
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #333;
}
.design-schlicht .btn-ghost:hover {
  background: #f5f5f4;
  border-color: #3a3a3a;
  color: #222;
}
/* Hero und Seitenköpfe ohne Formen */
.design-schlicht .hero,
.design-schlicht .page-hero {
  background: #fff;
}
.design-schlicht .hero:before,
.design-schlicht .hero:after,
.design-schlicht .page-hero:before,
.design-schlicht .page-hero:after,
.design-schlicht .hero-visual:before,
.design-schlicht .hero-visual:after,
.design-schlicht .hero-visual > svg {
  display: none;
}
.design-schlicht .ph.img,
.design-schlicht .ph.img img {
  border-radius: 8px;
}
.design-schlicht .split > .ph.img,
.design-schlicht .hero .ph.img,
.design-schlicht section:nth-of-type(even) .split > .ph.img,
.design-schlicht .foto-sozo .ph.img {
  box-shadow: none;
}
.design-schlicht .section-head:after,
.design-schlicht .page-hero .lead:after {
  display: none;
}
/* Abschnitte hellgrau statt hellblau, gerade Kanten */
.design-schlicht .tint,
.design-schlicht .areas,
.design-schlicht .team {
  background: #f7f7f6;
  border-radius: 0;
}
.design-schlicht .contact {
  background: #fff;
  border-top: 1px solid #e6e6e6;
}
/* Verfahren als ruhige Felder */
.design-schlicht .method,
.design-schlicht .method:nth-child(2),
.design-schlicht .method:nth-child(3) {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #333;
}
.design-schlicht .method b {
  color: #b85810;
}
.design-schlicht .method p {
  color: #555;
}
/* Anreise und Abschluss-Bänder ohne Farbfläche */
.design-schlicht .travel-panel {
  background: #f7f7f6;
  color: #333;
  border-radius: 8px;
  box-shadow: none;
}
.design-schlicht .travel-panel h2,
.design-schlicht .travel-panel .eyebrow,
.design-schlicht .travel-panel li strong {
  color: #222;
}
.design-schlicht .travel-panel li {
  color: #555;
  border-color: #e6e6e6;
}
.design-schlicht .travel-panel li:before {
  background: #f57921;
}
.design-schlicht .travel-panel a {
  color: #b85810;
}
.design-schlicht .travel-panel .more {
  background: #f57921;
  color: #fff;
  border-radius: 6px;
}
.design-schlicht .cta-band .box {
  background: #f7f7f6;
  color: #333;
  border-radius: 8px;
}
.design-schlicht .cta-band .box h2,
.design-schlicht .cta-band .box p,
.design-schlicht .cta-band .box .eyebrow,
.design-schlicht .cta-band .box .cb-phone,
.design-schlicht .cta-band .box .cb-phone small,
.design-schlicht .cta-band .box .cb-phone span {
  color: #333;
}
.design-schlicht .cta-band .box a:not(.btn) {
  color: #b85810;
}
.design-schlicht .cta-band .box .btn-primary {
  background: #f57921;
  color: #fff;
}
.design-schlicht .cta-band .box .btn-ghost {
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #333;
}
/* Kleine Elemente */
.design-schlicht .info-box,
.design-schlicht .hint,
.design-schlicht .legal-hint,
.design-schlicht .form-ok,
.design-schlicht .extra-grid .card,
.design-schlicht .extra-grid .card:nth-child(even),
.design-schlicht .group-intro {
  background: #f7f7f6;
  border-radius: 8px;
}
.design-schlicht .extra-grid .card h3,
.design-schlicht .extra-grid .card:nth-child(even) h3 {
  color: #222;
}
.design-schlicht .chip,
.design-schlicht a.chip {
  background: #f2f2f1;
  color: #333;
}
.design-schlicht .method-row .tag,
.design-schlicht .method-row:nth-child(even) .tag {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #b85810;
}
.design-schlicht .step:before {
  background: none;
  color: #b85810;
  padding: 0;
}
.design-schlicht .step:after {
  background: #e6e6e6;
}
.design-schlicht .tl-item:before,
.design-schlicht .report-steps li:before,
.design-schlicht .report-steps li:nth-child(2):before {
  background: #f2f2f1;
  color: #333;
}
.design-schlicht .studies li:before,
.design-schlicht .studies li:nth-child(even):before {
  background: #3a3a3a;
}
.design-schlicht .video-ph {
  background: #3a3a3a;
}
.design-schlicht .cc-btn:not(.cc-btn-light) {
  background: #3a3a3a;
  color: #fff;
}
.design-schlicht .cc-btn:not(.cc-btn-light):hover {
  background: #222;
}
.design-schlicht .cc-btn-light {
  background: #fff;
  color: #1f2327;
  border: 2px solid #cfd6dc;
}
.design-schlicht .cc-btn-light:hover {
  background: #f3f6f8;
  color: #1f2327;
}
.design-schlicht .side-contact .sc-tab,
.design-schlicht .mobile-contact .mc-term {
  background: #f57921;
}

/* Kopfleiste auf Handy und Tablet wie bei Wien, seit v80 in beiden
   Designs. Solange der Menüknopf
   sichtbar ist (bis 1180 Pixel), stehen beide Logos groß in der Mitte
   und der Menüknopf rechts. Beim Scrollen wird die Leiste wieder
   schmaler und die Logos kleiner. */
@media (max-width: 1180px) {
  :root .navbar {
    position: relative;
    justify-content: center;
  }
  :root .navbar .burger {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -22px;
    width: 44px;
    height: 44px;
    background: transparent;
  }
  :root .burger span {
    left: 11px;
    right: 11px;
  }
  :root header.site:not(.scrolled) .navbar {
    height: 104px;
  }
  :root header.site:not(.scrolled) .navbar .logo-img.logo-bw {
    height: 60px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city {
    padding-left: 12px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city strong {
    font-size: 1.45rem;
    letter-spacing: 0.08em;
  }
  :root header.site:not(.scrolled) .navbar .logo-city {
    font-size: 0.85rem;
  }
  :root header.site:not(.scrolled) .navbar .logo-sozo {
    height: 40px;
    margin-left: 14px;
    padding-left: 14px;
  }
}
@media (max-width: 600px) {
  /* Rechts bleibt Platz für den Menüknopf, die Logos stehen mittig im Rest */
  :root .navbar,
  :root header.site.scrolled .navbar {
    padding-right: 46px;
  }
  :root header.site:not(.scrolled) .navbar {
    height: 88px;
  }
  :root header.site:not(.scrolled) .navbar .logo-img.logo-bw {
    height: 40px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city {
    padding-left: 8px;
    font-size: 0.7rem;
  }
  :root header.site:not(.scrolled) .navbar .logo-city strong {
    font-size: 0.98rem;
    letter-spacing: 0.05em;
  }
  :root header.site:not(.scrolled) .navbar .logo-sozo {
    height: 26px;
    margin-left: 9px;
    padding-left: 9px;
  }
}
@media (max-width: 380px) {
  :root header.site:not(.scrolled) .navbar .logo-img.logo-bw {
    height: 34px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city strong {
    font-size: 0.86rem;
  }
  :root header.site:not(.scrolled) .navbar .logo-sozo {
    height: 22px;
    margin-left: 7px;
    padding-left: 7px;
  }
}
@media (max-width: 340px) {
  :root header.site:not(.scrolled) .navbar .logo-img.logo-bw {
    height: 28px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city strong {
    font-size: 0.74rem;
  }
  :root header.site:not(.scrolled) .navbar .logo-sozo {
    height: 18px;
    margin-left: 5px;
    padding-left: 5px;
  }
}
/* Kopfleiste am Computer wie am Handy, seit v80 in beiden Designs.
   Solange die Seite oben steht, stehen beide Logos groß in der Mitte
   und das Menü darunter. Beim Scrollen wird daraus wieder die schmale Leiste mit kleinen Logos. */
@media (min-width: 1181px) {
  :root header.site:not(.scrolled) .navbar {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    padding-top: 20px;
    padding-bottom: 6px;
  }
  :root header.site:not(.scrolled) .navbar .logo {
    flex-basis: 100%;
    justify-content: center;
  }
  :root header.site:not(.scrolled) .navbar .logo-img.logo-bw {
    height: 64px;
  }
  :root header.site:not(.scrolled) .navbar .logo-city {
    padding-left: 12px;
    font-size: 0.9rem;
  }
  :root header.site:not(.scrolled) .navbar .logo-city strong {
    font-size: 1.55rem;
    letter-spacing: 0.08em;
  }
  :root header.site:not(.scrolled) .navbar .logo-sozo {
    height: 42px;
    margin-left: 16px;
    padding-left: 16px;
  }
}
/* Überschriften und Einleitungen ohne Silbentrennung (beide Designs
   seit v80), damit nichts wie "ärztli-cher" zerteilt wird. Sehr lange
   Wörter brechen weiter sicher um (overflow-wrap aus Abschnitt 1). */
:root h1,
:root h2,
:root h3,
:root .lead {
  -webkit-hyphens: manual;
  hyphens: manual;
}
/* Das Foto oben auf der Startseite bewegt sich in Schlicht nicht als
   runde Form, sondern steht ruhig mit kleinen Ecken */
.design-schlicht .hero-visual .ph {
  animation: none;
  border-radius: 8px;
}
/* Sehr schmale Handys (unter 340 Pixel). Die E-Mail-Adresse im
   Kontaktband passt sonst nicht in die Breite. */
@media (max-width: 340px) {
  .cb-phone {
    font-size: 1rem;
  }
}
/* Behandlungsablauf Abschnitt 03 (seit v80, beide Designs). Jede
   Phase steht wie die Schritte oben als Zeitleiste mit Punkten. Links
   Überschrift und Foto, oben bündig und beim Lesen mitlaufend, rechts
   die Teilschritte. Längere Anreise steht als ruhiger Hinweis darunter. */
.phase {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}
.phase:first-child {
  border-top: 0;
  padding-top: 24px;
}
.phase-head {
  position: sticky;
  top: 110px;
}
.phase-head h2 {
  margin: 0 0 28px;
}
.phase-head .ph.img {
  aspect-ratio: 4/3;
}
.phase .timeline {
  margin-top: 6px;
}
.phase .tl-item:last-child {
  padding-bottom: 0;
}
.phase .tl-item h3 {
  margin: 0 0 8px;
}
.phase-note {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  padding: 40px 48px;
  margin-bottom: 24px;
  background: var(--blue-soft);
  border-radius: var(--radius);
}
.phase-note h2 {
  margin: 0;
  font-size: 1.6rem;
}
.phase-note p {
  margin: 0 0 12px;
}
.phase-note p:last-child {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .phase,
  .phase-note {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .phase {
    padding: 48px 0;
  }
  .phase-head {
    position: static;
  }
  .phase-note {
    gap: 16px;
    padding: 28px 24px;
  }
}
/* Zeitleisten auf dem Handy mit weniger Einzug, damit der Text mehr
   Breite hat (Schritte oben und Abschnitt 03, seit v80) */
@media (max-width: 600px) {
  .timeline {
    margin-left: 0;
  }
  .timeline:before {
    left: 8px;
  }
  .tl-item {
    padding-left: 40px;
  }
  .tl-item:before {
    left: 0;
  }
}

/* Kontaktangaben auf der Startseite untereinander, erst die Überschrift
   und darunter die Angabe (seit v83) */
.contact .lines > div > div {
  display: block;
}
.contact .lines strong {
  margin-bottom: 2px;
}
/* Das Kontaktfenster lässt sich nicht mehr seitlich verschieben. Vorher
   rückte es beim Öffnen kurz zur Seite und glitt dann zurück (seit v83) */
.contact-panel {
  overflow: clip;
}
/* Verfahrenskarten auf der Startseite im schlichten Design. Die
   Überschrift bleibt beim Darüberfahren orange. Vorher wurde sie weiß
   und war auf dem weißen Feld nicht mehr lesbar (seit v84) */
.design-schlicht a.method:hover b {
  color: #b85810;
}
/* Behandlungsablauf Schritte. Ein Schritt kann mehrere Absätze haben
   und das Foto vom Erstgespräch steht unter "Bitte bringen Sie mit"
   (seit v85, vorher eigener Abschnitt Erster Termin) */
.tl-item p + p {
  margin-top: 12px;
}
.schritte-foto {
  aspect-ratio: 4/3;
  margin-top: 32px;
}
@media (min-width: 901px) {
  #schritte .split > :last-child {
    position: sticky;
    top: 110px;
  }
}

/* Anwendungsblock: Link zur Vertiefungsseite */
.areas-more-link {
  margin: 18px 0 0;
}
.areas-more-link .more {
  font-size: 0.95rem;
}

/* 4) Listen-Feinschliff Schlicht */
.design-schlicht .area-panel {
  max-width: 560px;
}
.design-schlicht .area-index {
  column-gap: 36px;
  border-top-color: #e6e6e6;
}
.design-schlicht .area-row {
  padding: 11px 0;
  border-bottom-color: #e6e6e6;
}
.design-schlicht .area-row b {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.design-schlicht .area-more {
  margin-top: 20px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5a6168;
}

/* 6) Cookie offen: Platz unter dem Inhalt, Scroll erlaubt (Listenende erreichbar) */
html.cc-open body {
  touch-action: auto;
  padding-bottom: min(360px, 48vh);
}
html.cc-open #anwendungsgebiete,
html.cc-open .area-more,
html.cc-open .area-panel {
  scroll-margin-bottom: min(360px, 48vh);
}
.cc-box:not(.cc-wide) {
  max-height: min(42vh, 340px);
}

/* Anwendungsgebiete-Seite: flache Gliederung, keine Karten */
.indikationen-page .page-hero {
  padding-top: 48px;
  padding-bottom: 24px;
}
.indikationen-page .indik-block {
  padding: 28px 0 8px;
  border-top: 1px solid var(--line, #d9e6ee);
}
.design-schlicht .indikationen-page .indik-block {
  border-top-color: #e6e6e6;
}
.indikationen-page .indik-block:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.indikationen-page .indik-block h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.indikationen-page .indik-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}
.indikationen-page .indik-list li {
  padding: 10px 0;
  border-bottom: 1px solid #d9e6ee;
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  color: var(--navy);
}
.design-schlicht .indikationen-page .indik-list li {
  border-bottom-color: #e6e6e6;
}
.indikationen-page .indik-note {
  margin: 28px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 40em;
}
@media (max-width: 900px) {
  .indikationen-page .indik-list {
    grid-template-columns: 1fr;
  }
}

/* Erkrankungsnamen nicht klickbar (Startseiten-Vorschau) */
.area-row {
  cursor: default;
}
.area-row:hover {
  padding-left: 0;
}
.area-row:hover b {
  color: var(--navy);
}
.design-schlicht .area-row:hover b {
  color: var(--navy);
}

/* Startseite Studien kompakt */
.method {
  cursor: default;
  text-decoration: none;
  color: inherit;
}
a.method:hover,
.method:hover {
  /* keep existing method hover only if it was transform - leave as is */
}

/* =====================================================================
   47. Gleiche Abstände auf der Startseite (seit v99)
   Über und unter der Vertrauensleiste steht derselbe Abstand wie
   zwischen den Abschnitten. Absätze mit Pfeil-Link am Ende eines
   Abschnitts haben unten keinen Rand mehr, damit alle Abschnitte unten
   gleich viel Platz haben. Der Pfeil-Link steht überall gleich weit
   vom Text darüber.
   ===================================================================== */
.hero {
  padding-bottom: 72px;
}
#anwendungsgebiete .areas-split > div > p:last-child,
#ablauf .wrap > p:last-child,
#praxis .wrap > p:last-child,
#therapien .wrap > p:last-child {
  margin-bottom: 0;
}
#ablauf .step > p:last-child {
  margin-bottom: 0;
}
#fallberichte .case a.more {
  display: inline-block;
  margin-top: 15px;
}
@media (max-width: 900px) {
  .hero {
    padding-bottom: 64px;
  }
}

/* =====================================================================
   48. Team auf der Startseite im schlichten Design (seit v101)
   Am Rechner steht die Überschrift mittig wie Foto und Text darunter.
   Am Handy stehen Bildunterschrift, Text und Link linksbündig wie in
   allen anderen Abschnitten.
   ===================================================================== */
.design-schlicht #praxis .section-head {
  text-align: center;
}
@media (max-width: 900px) {
  .design-schlicht #praxis .section-head,
  .design-schlicht #praxis .foto-team figcaption,
  .design-schlicht #praxis .team-text,
  .design-schlicht #praxis .wrap > p:last-child {
    text-align: left !important;
  }
}

/* =====================================================================
   49. Gleiche Abstände auf der Seite SOZO-Methode (seit v5 der Seite)
   Gilt nur für die Seite SOZO-Methode (main.methode-page). Zwischen
   Seitenkopf und erstem Abschnitt steht derselbe Abstand wie zwischen
   allen Abschnitten, 88 px am Rechner und 64 px am Handy. Überschriften
   in Textabschnitten haben oben keinen Extra-Rand, der letzte Absatz
   unten keinen Rand. Zwei Absätze bei einem Verfahren haben denselben
   Abstand wie Absätze im Fließtext. Von der Einleitung bis zum Inhalt
   sind es überall 40 px wie auf der Startseite. Pfeil-Links stehen wie
   auf der Startseite gleich weit vom Text darüber.
   ===================================================================== */
.methode-page .page-hero .lead {
  margin-bottom: 0;
}
.methode-page .page-hero + section:not(.tint) {
  padding-top: 64px;
}
.methode-page .prose h2 {
  margin-top: 0;
}
.methode-page .prose > p:last-child {
  margin-bottom: 0;
}
.methode-page .prose + .studies,
.methode-page .prose + .video-grid {
  margin-top: 40px;
}
.methode-page .more-link {
  margin-top: 28px;
}
.methode-page .method-row p + p {
  margin-top: 1em;
}
@media (max-width: 900px) {
  .methode-page .page-hero + section:not(.tint) {
    padding-top: 44px;
  }
}

/* =====================================================================
   50. Gleiche Abstände auf der Seite Anwendungsgebiete (seit v1 der Seite)
   Gilt nur für die Seite Anwendungsgebiete (main.anwendung-page). Die
   Abstände folgen der Seite SOZO-Methode. Die Einleitungen der Gruppen
   stehen in beiden Designs als normaler Text ohne Fläche. Unter dem Text
   einer Erkrankung steht die Studie als kleine Quellenzeile mit Pfeil,
   darunter folgen die Links zu Fallberichten und Verfahren.
   Seit v3 der Seite sind die Gruppenüberschriften so groß wie alle
   anderen Abschnittsüberschriften. Von der Gruppeneinleitung bis zur
   ersten Erkrankung sind es 40 px wie von jeder Einleitung bis zum
   Inhalt. Zwischen zwei Gruppen steht derselbe Abstand wie zwischen
   zwei Abschnitten, 88 px am Rechner und 64 px am Handy.
   ===================================================================== */
.anwendung-page .page-hero .lead {
  margin-bottom: 0;
}
.anwendung-page .page-hero + section:not(.tint) {
  padding-top: 64px;
}
.anwendung-page .prose h2 {
  margin-top: 0;
}
.anwendung-page .prose > p:last-child {
  margin-bottom: 0;
}
.anwendung-page .more-link {
  margin-top: 28px;
}
.anwendung-page .group-intro,
.design-schlicht .anwendung-page .group-intro {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 18px;
  max-width: 820px;
}
.anwendung-page .group-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 0.5em;
}
.anwendung-page .area-list {
  margin-bottom: 88px;
}
.anwendung-page .area-list:last-child {
  margin-bottom: 0;
}
.anwendung-page .area-src {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.anwendung-page .area-src a {
  color: var(--blue-dark);
  font-weight: 600;
}
.anwendung-page .area-src a:after {
  content: " \2197";
}
@media (max-width: 900px) {
  .anwendung-page .page-hero + section:not(.tint) {
    padding-top: 44px;
  }
  .anwendung-page .area-list {
    margin-bottom: 64px;
  }
  .anwendung-page .area-card .more.small {
    padding: 4px 0;
  }
}

/* =====================================================================
   51. Überschriften im modernen Design auf den Unterseiten
   (seit SOZO-Methode v8 und Anwendungsgebiete v3)
   Im modernen Design stehen die Abschnittsüberschriften auf den Seiten
   SOZO-Methode und Anwendungsgebiete in Blau wie auf der Startseite.
   Die Überschrift im Kontaktkasten unten bleibt weiß. Im schlichten
   Design ändert sich nichts.
   ===================================================================== */
html:not(.design-schlicht) .methode-page section:not(.cta-band) h2,
html:not(.design-schlicht) .anwendung-page section:not(.cta-band) h2 {
  color: var(--blue);
}

/* =====================================================================
   52. Gleiche Abstände auf der Seite Behandlungsablauf (seit v1 der Seite)
   Gilt nur für die Seite Behandlungsablauf (main.ablauf-page). Die
   Abstände folgen den Seiten SOZO-Methode und Anwendungsgebiete. Zwischen
   Seitenkopf und den Schritten, zwischen den Schritten und dem Ablauf
   einer Sitzung, zwischen den Phasen und vor dem Hinweis zur Anreise
   steht derselbe Abstand wie zwischen zwei Abschnitten, 88 px am Rechner
   und 64 px am Handy. Von der Überschrift einer Phase bis zum Foto und
   bis zum ersten Schritt sind es 40 px wie von jeder Einleitung bis zum
   Inhalt. Zwei Absätze in einem Schritt haben denselben Abstand wie
   Absätze im Fließtext. Die Überschrift zur Anreise ist so groß wie alle
   anderen Abschnittsüberschriften. Im modernen Design stehen die
   Überschriften wie auf den anderen Unterseiten in Blau.
   ===================================================================== */
.ablauf-page .page-hero .lead {
  margin-bottom: 0;
}
.ablauf-page .page-hero + section:not(.tint) {
  padding-top: 64px;
}
.ablauf-page #schritte .tl-item:last-child {
  padding-bottom: 0;
}
.ablauf-page .tl-item p + p {
  margin-top: 1em;
}
.ablauf-page .schritte-foto {
  margin-top: 40px;
}
.ablauf-page .phase {
  padding: 44px 0;
}
.ablauf-page .phase:first-child {
  padding-top: 0;
}
.ablauf-page .phase-head h2 {
  margin-bottom: 0;
}
.ablauf-page .phase-head .ph.img {
  margin-top: 40px;
}
.ablauf-page .phase + .phase-note {
  margin-top: 44px;
}
.ablauf-page .phase-note {
  margin-bottom: 0;
}
.ablauf-page .phase-note p {
  margin-bottom: 1em;
}
.ablauf-page .phase-note p:last-child {
  margin-bottom: 0;
}
.ablauf-page .phase-note h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}
html:not(.design-schlicht) .ablauf-page section:not(.cta-band) h2 {
  color: var(--blue);
}
@media (max-width: 900px) {
  .ablauf-page .page-hero + section:not(.tint) {
    padding-top: 44px;
  }
  .ablauf-page .phase {
    padding: 32px 0;
    gap: 40px;
  }
  .ablauf-page .phase:first-child {
    padding-top: 0;
  }
  .ablauf-page .phase .timeline {
    margin-top: 0;
  }
  .ablauf-page .phase + .phase-note {
    margin-top: 32px;
  }
  .ablauf-page .phase-note {
    gap: 13px;
  }
}

/* =====================================================================
   53. Kontakt per E-Mail statt Formular (seit v108 der Startseite)
   Die Praxis möchte kein Kontaktformular. Auf der Startseite steht an
   seiner Stelle eine Karte mit der E-Mail-Adresse, einem Knopf zum
   Schreiben und einem Knopf zum Kopieren der Adresse. Das Kontaktfenster
   zeigt dieselben Knöpfe, den Rückruf fragen Patienten per E-Mail an.
   Der Kopierknopf sieht im modernen Design aus wie die blauen Knöpfe,
   im schlichten Design wie die hellen Knöpfe mit grauem Rand. Im
   Kontaktband der Unterseiten bleibt "Rückruf vereinbaren" ein Knopf
   ohne Fläche, auch wenn er jetzt ein Link ist. Am Handy stehen die
   Knöpfe in voller Breite untereinander.
   ===================================================================== */
.mail-card {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}
.mail-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
}
.mail-ic svg {
  width: 26px;
  height: 26px;
}
.mail-card small {
  display: block;
  margin-top: 22px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mail-adr {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.1rem, 5.4vw, 1.9rem);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mail-adr:hover {
  color: var(--teal-dark);
}
.mail-card p {
  margin: 14px 0 24px;
  color: var(--muted);
}
.mail-btns,
.cp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cp-btns {
  margin-top: 14px;
}
button.btn-kopieren {
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  border: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  color: #fff;
}
button.btn-kopieren:hover {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  color: #fff;
}
.cp-rueckruf {
  margin-top: 4px;
}
.cta-band .box a.btn-ghost {
  background: transparent;
}
.design-schlicht button.btn-kopieren {
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #333;
}
.design-schlicht button.btn-kopieren:hover {
  background: #f5f5f4;
  border-color: #3a3a3a;
  color: #222;
}
@media (max-width: 900px) {
  .mail-card {
    padding: 28px 22px;
  }
}
/* Am Handy stehen die Knöpfe in voller Breite untereinander */
@media (max-width: 520px) {
  .mail-btns .btn,
  .cp-btns .btn,
  .cp-rueckruf {
    flex: 1 1 100%;
    justify-content: center;
  }
  .cp-rueckruf {
    display: flex;
  }
}

/* =====================================================================
   54. Livegang (seit 29.10.2026)
   Ohne Design-Umschalter und Sprachwahl bleibt oben nur die Zeile mit E-Mail und Adresse.
   Auf Handy und Tablet steht beides unten in der Kontaktleiste, die leere Leiste oben entfällt.
   ===================================================================== */
@media (max-width: 900px) {
  .topbar {
    display: none;
  }
}
/* Solange die Fallberichte offline sind, hat das Aufklappmenü SOZO zwei Einträge statt drei */
@media (min-width: 1181px) {
  .has-sub.sozo .mega {
    grid-template-columns: repeat(2, 1fr);
    width: 470px;
  }
}
/* Anreise: zwei Absätze in einer Karte (Auto mit Parken, Flugzeug mit Routen) mit Abstand */
.route-grid .card p + p {
  margin-top: 12px;
}

/* =====================================================================
   55. Gleiche Abstände auf allen Seiten (seit Livegang v5, 29.10.2026)
   Was auf den Seiten SOZO-Methode, Anwendungsgebiete und Behandlungsablauf
   schon gilt, gilt jetzt auf allen Seiten. Vom Seitenkopf bis zum ersten
   Inhalt und zwischen zwei Abschnitten stehen 88 px am Rechner und 64 px
   am Handy. Auf der Startseite stehen Forschung und Häufige Fragen nicht
   mehr mit doppeltem Abstand unter dem weißen Abschnitt davor. Die
   Überschriften in den Listen der Ergänzenden Therapien und bei den
   Verfahren stehen so weit über dem Text wie überall. Lange Wörter in den
   Verfahrenskarten der Startseite ragen auf Tablets nicht mehr über den
   Kartenrand, und auf sehr breiten Bildschirmen passt Siwave in sein Feld.
   Das Cookie-Fenster zeigt am Handy beim ersten Besuch die Knöpfe ohne
   Scrollen. Dazu kommen Anpassungen für Safari auf iPhone und iPad. Das
   Cookie-Fenster passt in die sichtbare Höhe, der Hintergrund dahinter
   wird weich, und die Schrift wird im Querformat nicht vergrößert.
   ===================================================================== */
/* Seitenkopf bis zum ersten Inhalt */
.page-hero .lead {
  margin-bottom: 0;
}
.page-hero + section:not(.tint) {
  padding-top: 64px;
}
.prose > h2:first-of-type,
.page-hero + section .legal > h2:first-child {
  margin-top: 0;
}
/* Kein zusätzlicher Rand unter dem letzten Inhalt eines Abschnitts */
section.intro .prose > p:last-child,
.tg-foot,
.legal > :last-child,
.pn-only .page-next {
  margin-bottom: 0;
}
/* Startseite mit zwei weißen Abschnitten hintereinander, einfacher Abstand */
#methode + #forschung,
#anreise + .faq-section {
  padding-top: 0;
}
/* Überschrift bis Text in den Listen wie überall */
.svc h3,
.method-row h3 {
  margin-bottom: 9px;
}
@media (max-width: 900px) {
  .page-hero + section:not(.tint) {
    padding-top: 44px;
  }
}
/* Lange Wörter in den Verfahrenskarten der Startseite. Auf Tablets und kleinen Laptops sind
   die Karten schmal, dort werden nur lange Wörter getrennt */
.method p {
  overflow-wrap: break-word;
}
@media (min-width: 901px) and (max-width: 1280px) {
  .method p {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
  }
}
/* Sehr breite Bildschirme, das Feld wächst mit der größeren Schrift */
@media (min-width: 3200px) {
  .method-row .tag {
    width: 112px;
    height: 112px;
  }
}
/* Cookie-Fenster beim ersten Besuch so hoch wie nötig, damit am Handy die Knöpfe sichtbar sind */
.cc-box:not(.cc-wide) {
  max-height: calc(100vh - 40px);
}
/* Safari auf iPhone und iPad */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.cc-overlay {
  -webkit-backdrop-filter: blur(2px);
}
@supports (height: 100dvh) {
  .cc-box,
  .cc-box:not(.cc-wide) {
    max-height: calc(100dvh - 40px);
  }
  .cc-box.cc-wide {
    max-height: calc(100dvh - 48px);
  }
}

/* =====================================================================
   56. Ergänzende Therapien als Liste (seit Livegang v5, 29.10.2026)
   Die ergänzenden Therapien werden nur genannt und nicht erklärt, das
   übernimmt Dr. med. Lemke im Gespräch. Je Gruppe stehen die Namen als
   ruhige Liste mit orangem Punkt untereinander. Wozu eine Gruppe dient,
   steht in ihrer Einleitung. Die letzte Gruppe hat unten keine Linie,
   dort folgt die Linie über Zurück und Weiter im Abstand von 88 px.
   ===================================================================== */
.tg-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}
.therapy-group:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
.tg-names li {
  position: relative;
  padding-left: 24px;
  color: #1f2327;
  font-weight: 600;
  line-height: 1.5;
}
.tg-names li:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.75em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f57921;
}
@media (max-width: 640px) {
  .tg-names {
    gap: 12px;
  }
}

/* =====================================================================
   57. Handy und Tablet (seit Livegang v8, 30.10.2026)
   Fotos stehen bis 900 Pixel über dem Text ihres Abschnitts, am Rechner
   bleiben sie daneben. Im Kopf der Startseite endet der Abschnitt damit
   mit der E-Mail-Zeile, die deshalb unten keinen Abstand mehr hat. Im Behandlungsablauf steht das Foto vom
   Erstgespräch über den Schritten, die Liste "Bitte bringen Sie mit"
   bleibt darunter. In der Kontaktleiste kopiert der linke Knopf die
   E-Mail-Adresse und der rechte öffnet die Terminanfrage. Auf sehr
   schmalen Handys entfällt dort das Symbol.
   ===================================================================== */
@media (max-width: 900px) {
  .hero .wrap > .hero-visual,
  .split > .ph.img,
  .split > figure {
    order: -1;
  }
  .hero .hero-call {
    margin-bottom: 0;
  }
  #schritte .split > div:last-child {
    display: contents;
  }
  #schritte .schritte-foto {
    order: -1;
    margin-top: 0;
  }
  .mobile-contact button {
    -webkit-appearance: none;
    appearance: none;
  }
}
@media (max-width: 340px) {
  .mobile-contact .mc-copy svg {
    display: none;
  }
}

/* =====================================================================
   58. Kontakt am Handy (seit Livegang v9, 30.10.2026)
   Safari auf iPhone und iPad setzt Elemente, die am unteren Rand
   festgemacht sind, nach einer Tastatur zu hoch (Fehler seit iOS 26).
   Die Kopfzeile oben steht dagegen immer richtig. Deshalb hängt die
   Kontaktleiste dort an einem unsichtbaren Anker direkt unter der
   Kopfzeile. Er läuft wie die Kopfzeile mit und setzt die Leiste an den
   unteren Rand des sichtbaren Bereichs, der Cookie-Knopf steht darüber.
   Der Anker steht 84 Pixel über der Leiste, so weit wie der Seitenrand
   unten für die Leiste, damit sie auch am Seitenende ganz unten bleibt.
   Andere Browser behalten die bisherige Leiste. In der E-Mail-Karte und
   im Kontaktfenster ist die Adresse reiner Text, geschrieben und kopiert
   wird über die Knöpfe darunter. Das Logo in der Fußzeile liegt nicht
   mehr über der Kontaktleiste.
   ===================================================================== */
@media (max-width: 900px) {
  @supports (-webkit-touch-callout: none) and (height: 100svh) {
    .mc-anker {
      position: sticky;
      top: calc(100svh - 160px);
      height: 0;
      z-index: 45;
    }
    .mc-anker .mobile-contact {
      position: absolute;
      top: 84px;
      bottom: auto;
      left: 12px;
      right: 12px;
    }
    .cc-fab {
      top: calc(100svh - 140px);
      bottom: auto;
    }
  }
  .mobile-contact .copy-label {
    line-height: 1.15;
    text-align: center;
  }
}
footer .logo {
  z-index: auto;
}
span.mail-adr:hover {
  color: var(--navy);
}
span.cp-phone:hover {
  background: var(--teal-soft);
}

/* =====================================================================
   59. E-Mail-Adresse als Text (seit v10, 30.10.2026)
   In der Leiste oben, im Handy-Menü und in der Fußzeile steht die
   Adresse als Text in derselben Schrift wie vorher. Geschrieben und
   kopiert wird über die Knöpfe, im Kontaktband auch über den Knopf
   E-Mail-Adresse kopieren. Am Rechner steht er dort in einer zweiten
   Reihe unter Rückruf vereinbaren und Termin anfragen, damit das
   Kontaktband seine zwei Spalten behält.
   ===================================================================== */
.topbar .mail-text,
.mobile-extra .mail-text {
  color: var(--navy);
  font-weight: 600;
}
.design-schlicht .topbar .mail-text {
  color: #3a3a3a;
}
footer .mail-text {
  color: var(--muted);
}
@media (max-width: 360px) {
  .topbar .info span:first-child .mail-text {
    font-size: 13px;
  }
}
@media (min-width: 901px) {
  .cta-band .cb-btns {
    display: grid;
    grid-template-columns: auto auto;
  }
  .cta-band .cb-btns .btn-kopieren {
    grid-column: 1 / -1;
  }
}

/* =====================================================================
   60. Mehr Bilder (seit v11, 30.10.2026)
   Ergänzende Therapien, Termin & Kontakt und Anwendungsgebiete zeigen
   in der Einleitung rechts ein Foto oder eine Grafik, auf Handy und
   Tablet steht es über dem Text. Bei der Stoßwellentherapie steht am
   Rechner ein Foto unter "So fühlt es sich an" und auf Handy und Tablet
   direkt unter der Überschrift. Im Behandlungsablauf stehen keine
   Ablauf-Fotos mehr. Auf dem Tablet werden quadratische Fotos und Fotos
   im Hochformat höchstens 540 px breit und stehen in der Mitte, wie das
   Foto im Kopf der Startseite. Das gilt auch für die Kombination auf
   SOZO-Methode und das Haus auf Anreise & Unterkunft, die sonst höher
   als der Bildschirm wären.
   Die Grafik der Anwendungsgebiete ist ein Netz aus Punkten und Linien
   in Grau und Orange. Impulse laufen über die Linien und einzelne
   Punkte leuchten nacheinander auf. Wer am Gerät Bewegung reduzieren
   eingestellt hat, sieht das Netz ohne Bewegung.
   ===================================================================== */
.verfahren-foto {
  margin-top: 22px;
  max-width: 340px;
}
.tl-foto {
  margin: 4px 0 18px;
  max-width: 520px;
}
.netz {
  margin: 0;
}
.netz svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.netz-linien path {
  stroke: #d6d3cf;
  stroke-width: 1.6;
}
.netz-impulse path {
  stroke: #f57921;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 26 174;
  stroke-dashoffset: 26;
  opacity: 0;
  animation: netz-impuls 4.8s linear infinite;
}
.netz-impulse path:nth-child(2) { animation-delay: .5s; }
.netz-impulse path:nth-child(3) { animation-delay: 1s; }
.netz-impulse path:nth-child(4) { animation-delay: 1.5s; }
.netz-impulse path:nth-child(5) { animation-delay: 2s; }
.netz-impulse path:nth-child(6) { animation-delay: 2.5s; }
.netz-impulse path:nth-child(7) { animation-delay: 3s; }
.netz-impulse path:nth-child(8) { animation-delay: 3.5s; }
.netz-impulse path:nth-child(9) { animation-delay: 4s; }
.netz-impulse path:nth-child(10) { animation-delay: 4.4s; }
@keyframes netz-impuls {
  0% { stroke-dashoffset: 26; opacity: 1; }
  45% { stroke-dashoffset: -100; opacity: 1; }
  46%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.netz-punkte circle {
  fill: #bdb8b2;
}
.netz-punkte circle.aktiv {
  fill: #f57921;
}
.netz-wellen circle {
  fill: none;
  stroke: #f57921;
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: netz-welle 4.8s ease-out infinite;
}
.netz-wellen circle:nth-child(2) { animation-delay: .6s; }
.netz-wellen circle:nth-child(3) { animation-delay: 1.2s; }
.netz-wellen circle:nth-child(4) { animation-delay: 1.8s; }
.netz-wellen circle:nth-child(5) { animation-delay: 2.4s; }
.netz-wellen circle:nth-child(6) { animation-delay: 3s; }
.netz-wellen circle:nth-child(7) { animation-delay: 3.6s; }
.netz-wellen circle:nth-child(8) { animation-delay: 4.2s; }
@keyframes netz-welle {
  0% { transform: scale(1); opacity: .7; }
  45%, 100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .netz-impulse,
  .netz-wellen {
    display: none;
  }
}
.verfahren-foto.nur-schmal {
  display: none;
}
@media (max-width: 900px) {
  .netz {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  .verfahren-foto.nur-breit {
    display: none;
  }
  .verfahren-foto.nur-schmal {
    display: block;
    max-width: 420px;
    margin: 4px 0 18px;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  #ganzheitlich .split > .ph.img,
  #kombination .split > .ph.img,
  #adresse .split > .ph.img {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }
}

/* =====================================================================
   61. Lebendigeres Netz auf Anwendungsgebiete (seit v12, 30.10.2026)
   Mehr Impulse laufen über die Linien und leuchten leicht, die orangen
   Punkte werden im Wechsel etwas größer, graue Punkte glühen nacheinander
   kurz orange auf und das ganze Netz schwebt langsam auf und ab. Wer am
   Gerät Bewegung reduzieren eingestellt hat, sieht keine Bewegung, nur
   das langsame Aufglühen der Punkte.
   ===================================================================== */
.netz svg {
  transform-origin: 50% 50%;
  animation: netz-schweben 12s ease-in-out infinite;
}
@keyframes netz-schweben {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}
.netz-linien path {
  stroke: #cfcac4;
}
.netz-impulse path {
  stroke-width: 3.6;
  stroke-dasharray: 30 170;
  stroke-dashoffset: 30;
  animation: netz-impuls 4s linear infinite;
}
.netz-impulse path:nth-child(2) { animation-delay: 0.25s; }
.netz-impulse path:nth-child(3) { animation-delay: 0.5s; }
.netz-impulse path:nth-child(4) { animation-delay: 0.75s; }
.netz-impulse path:nth-child(5) { animation-delay: 1s; }
.netz-impulse path:nth-child(6) { animation-delay: 1.25s; }
.netz-impulse path:nth-child(7) { animation-delay: 1.5s; }
.netz-impulse path:nth-child(8) { animation-delay: 1.75s; }
.netz-impulse path:nth-child(9) { animation-delay: 2s; }
.netz-impulse path:nth-child(10) { animation-delay: 2.25s; }
.netz-impulse path:nth-child(11) { animation-delay: 2.5s; }
.netz-impulse path:nth-child(12) { animation-delay: 2.75s; }
.netz-impulse path:nth-child(13) { animation-delay: 3s; }
.netz-impulse path:nth-child(14) { animation-delay: 3.25s; }
.netz-impulse path:nth-child(15) { animation-delay: 3.5s; }
.netz-impulse path:nth-child(16) { animation-delay: 3.75s; }
@keyframes netz-impuls {
  0% { stroke-dashoffset: 30; opacity: 1; }
  48% { stroke-dashoffset: -100; opacity: 1; }
  49%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.netz-punkte circle.aktiv {
  transform-box: fill-box;
  transform-origin: center;
  animation: netz-atmen 4s ease-in-out infinite;
}
.netz-punkte circle.aktiv:nth-child(2) { animation-delay: 0.29s; }
.netz-punkte circle.aktiv:nth-child(3) { animation-delay: 0.57s; }
.netz-punkte circle.aktiv:nth-child(4) { animation-delay: 0.86s; }
.netz-punkte circle.aktiv:nth-child(5) { animation-delay: 1.14s; }
.netz-punkte circle.aktiv:nth-child(6) { animation-delay: 1.43s; }
.netz-punkte circle.aktiv:nth-child(7) { animation-delay: 1.71s; }
.netz-punkte circle.aktiv:nth-child(8) { animation-delay: 2s; }
.netz-punkte circle.aktiv:nth-child(9) { animation-delay: 2.29s; }
.netz-punkte circle.aktiv:nth-child(10) { animation-delay: 2.57s; }
.netz-punkte circle.aktiv:nth-child(11) { animation-delay: 2.86s; }
.netz-punkte circle.aktiv:nth-child(12) { animation-delay: 3.14s; }
.netz-punkte circle.aktiv:nth-child(13) { animation-delay: 3.43s; }
.netz-punkte circle.aktiv:nth-child(14) { animation-delay: 3.71s; }
@keyframes netz-atmen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}
.netz-punkte circle.funke {
  animation: netz-funke 6s ease-in-out infinite;
}
.netz-punkte circle.funke:nth-child(2) { animation-delay: 0.43s; }
.netz-punkte circle.funke:nth-child(3) { animation-delay: 0.86s; }
.netz-punkte circle.funke:nth-child(4) { animation-delay: 1.29s; }
.netz-punkte circle.funke:nth-child(5) { animation-delay: 1.71s; }
.netz-punkte circle.funke:nth-child(6) { animation-delay: 2.14s; }
.netz-punkte circle.funke:nth-child(7) { animation-delay: 2.57s; }
.netz-punkte circle.funke:nth-child(8) { animation-delay: 3s; }
.netz-punkte circle.funke:nth-child(9) { animation-delay: 3.43s; }
.netz-punkte circle.funke:nth-child(10) { animation-delay: 3.86s; }
.netz-punkte circle.funke:nth-child(11) { animation-delay: 4.29s; }
.netz-punkte circle.funke:nth-child(12) { animation-delay: 4.71s; }
.netz-punkte circle.funke:nth-child(13) { animation-delay: 5.14s; }
.netz-punkte circle.funke:nth-child(14) { animation-delay: 5.57s; }
@keyframes netz-funke {
  0%, 70%, 100% { fill: #bdb8b2; }
  80% { fill: #f57921; }
}
.netz-wellen circle {
  stroke-width: 2;
  animation: netz-welle 4s ease-out infinite;
}
@keyframes netz-welle {
  0% { transform: scale(1); opacity: .85; }
  50%, 100% { transform: scale(3.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .netz svg,
  .netz-punkte circle.aktiv {
    animation: none;
  }
}

/* =====================================================================
   62. Fotos im Behandlungsablauf (seit v13, 30.10.2026;
   angepasst 30.10.2026: alle drei Ablauf-Fotos entfernt)
   Keine Einbindung mehr unter Erstgespräch, Untersuchung und Behandlungsplan
   sowie TPS und Stoßwelle. Die Klassen .tl-foto und .ph.img aus Abschnitt 60
   bleiben für andere Seiten. Die Querformat-Zusatzklasse entfällt.
   ===================================================================== */

/* =====================================================================
   63. Weg zur Praxis im Kontaktfenster und in der Leiste oben (seit v14, 30.10.2026)
   Das Kontaktfenster zeigt unter "Rückruf vereinbaren" die Adresse mit
   den Knöpfen "Route planen" und "Anreise und Unterkunft". In der grauen
   Leiste oben steht rechts der Knopf "Route planen". Beide öffnen Google
   Maps erst beim Anklicken in einem neuen Tab.
   ===================================================================== */
.topbar .tb-route {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 3px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  color: #3a3a3a;
  transition: border-color 0.2s, background 0.2s;
}
.topbar .tb-route:hover {
  background: #f5f5f4;
  border-color: #3a3a3a;
}
.tb-route svg {
  width: 15px;
  height: 15px;
  color: #f57921;
  flex: none;
}
.cp-adresse {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #3a3a3a;
}
.cp-adresse svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: #f57921;
  flex: none;
}

/* =====================================================================
   64. Kontakt am Handy in der Kopfzeile (seit v15, 30.10.2026)
   Auf Handy und Tablet hochkant verrutschten Kontaktleiste und
   Cookie-Knopf am unteren Rand in Safari und Chrome auf dem iPhone.
   Deshalb gibt es dort unten keine festen Knöpfe mehr. Links in der
   Kopfzeile steht ein runder E-Mail-Knopf, der das Kontaktfenster
   öffnet, rechts bleibt der Menüknopf. Die Cookie-Einstellungen stehen
   in der Fußzeile jeder Seite. Am Rechner bleibt alles wie bisher.
   ===================================================================== */
.kopf-kontakt {
  display: none;
}
@media (max-width: 900px) {
  :root .navbar .kopf-kontakt {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -22px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #f57921;
    cursor: pointer;
  }
  .kopf-kontakt svg {
    width: 26px;
    height: 26px;
  }
  .kopf-kontakt:hover {
    background: #f5f5f4;
  }
  .mc-anker,
  .mobile-contact,
  .mc-anker .mobile-contact,
  .cc-fab {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}
@media (max-width: 600px) {
  :root .navbar,
  :root header.site.scrolled .navbar {
    padding-left: 46px;
  }
}