:root {
  /* Basis-Farbpalette, siehe Dokumentation/Farbpalette.md */
  --color-magenta-dark: #B80E7A;
  --color-magenta-mid: #D01678;
  --color-orange: #F39200;
  --color-gray-light: #E0E0E0;
  --color-pink: #E2176E;
  --color-gray-dark: #4C4C4C;
  --color-white: #FFFFFF;

  --gradient: linear-gradient(90deg, #F39200 0%, #FF8200 5%, #E81E76 30%, #B80E7A 50%, #E81E76 70%, #FF8200 95%, #F39200 100%);
  --link: var(--color-magenta-mid);
  /* Bewusste Entscheidung vom 2026-09-15: besuchte Links wieder auf
     --color-orange (2,35:1 auf Weiß, unter WCAG-AA) – Kontrast-Abstriche hier
     akzeptiert, siehe Dokumentation/Farbpalette.md. */
  --link-visited: var(--color-orange);
  --link-hover: var(--color-orange);
  --text: var(--color-gray-dark);
  --muted: #5c5c5c; /* dunkler als urspr. #666666: erst so erreicht der Footer-Text auf --footer-bg WCAG-AA-Kontrast (4,5:1), siehe PageSpeed-Insights-Hinweis vom 2026-09-11 */
  --border: var(--color-gray-light);
  --bg: var(--color-white);
  --menu-text: var(--color-white);
  --menu-hover: var(--color-orange);
  --menu-dropdown-bg: var(--color-magenta-dark);
  --footer-bg: var(--color-gray-light);
  --button-bg: var(--color-gray-light);
}

/* Lokal gehostete Schriften (siehe Dokumentation/Schriftarten.txt) –
   bewusst selbst gehostet statt über fonts.googleapis.com geladen, damit keine
   Nutzer-IP an Google übertragen wird und keine zusätzliche Consent-Kategorie
   dafür nötig ist (vgl. Dokumentation/Cookie-Consent-und-Tracking.md). */
@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 450;
  font-stretch: 90%;
  font-display: swap;
  src: url("/fonts/ubuntu-sans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 90%;
  font-display: swap;
  src: url("/fonts/ubuntu-sans-semibold.woff2") format("woff2");
}

/* Navigation: eigener Schnitt für weight 380 (Google liefert für "Ubuntu Sans"
   + width 90% keine echte Datei zwischen ~301-449, alles wird auf denselben
   Schnitt zurückgesetzt – das hier ist der nächstliegende echte Schnitt,
   weight 400, nur unter 380 deklariert, siehe Dokumentation/Schriftarten.txt). */
@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 380;
  font-stretch: 90%;
  font-display: swap;
  src: url("/fonts/ubuntu-sans-nav.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* Für Screenreader/Crawler vorhanden, optisch aber ausgeblendet (z.B. SEO-H1) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: "Ubuntu Sans", Verdana, Arial, sans-serif;
  font-weight: 450;
  font-stretch: 90%;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

.wrap {
  max-width: 918px;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: var(--link);
  text-decoration: underline;
}
a:hover { color: var(--link-hover); }
a:visited { color: var(--link-visited); }

/* Kontaktleiste (oben & unten auf jeder Seite) */
.contact-bar {
  position: relative;
  overflow: hidden;
}

.contact-bar__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.contact-bar__practice,
.contact-bar__address {
  font-size: 1rem;
  color: var(--text);
  flex: 1 1 220px;
}

.contact-bar__address { text-align: right; }

.contact-bar__practice p,
.contact-bar__address p {
  margin: 0 0 2px;
}

.contact-bar__address a { color: var(--link); }
.contact-bar__address a:hover { color: var(--link-hover); }
.contact-bar__address a:visited { color: var(--link-visited); }

.contact-bar__logo {
  flex: 0 0 auto;
  display: block;
}

.contact-bar__logo img {
  display: block;
  height: 120px;
  width: auto;
}

@media (max-width: 640px) {
  .contact-bar__practice,
  .contact-bar__address {
    text-align: center;
    flex-basis: 100%;
  }
  .contact-bar__inner { justify-content: center; }
  .contact-bar__logo { order: -1; flex-basis: 100%; text-align: center; }
  .contact-bar__logo img { height: 80px; margin: 0 auto; }

  /* Mobile: nur Logo + Praxisbezeichnung, keine Adresse, unten ganz weg */
  .contact-bar__address,
  .contact-bar__practice-name { display: none; }
  .contact-bar--bottom { display: none; }
}

/* Header */
.site-header {
  background: var(--gradient);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

.site-header .wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Hamburger-Button (nur mobil sichtbar, siehe Media Query unten) */
.nav-toggle {
  display: none;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background: var(--menu-text);
  border-radius: 2px;
}

.nav-toggle__bars { top: 16px; }
.nav-toggle__bars::before { content: ""; top: -10px; }
.nav-toggle__bars::after { content: ""; top: 10px; }

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 10;
  padding: 0;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  color: var(--menu-text);
  font-size: 1.25rem;
  font-weight: 380;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

nav a:visited { color: var(--menu-text); }

nav a:hover,
nav a:focus {
  color: var(--menu-hover);
  border-bottom-color: var(--menu-hover);
}

nav a[aria-current="page"] {
  border-bottom-color: var(--menu-text);
}

nav li.has-children {
  position: relative;
}

nav .submenu {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--menu-dropdown-bg);
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
  padding: 6px 0;
  margin: 0;
  z-index: 20;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.15s ease;
}

nav li.has-children:hover > .submenu,
nav li.has-children:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

nav .submenu li { width: 100%; }

nav .submenu a {
  color: var(--menu-text);
  text-shadow: none;
  font-weight: 380;
  display: block;
  padding: 8px 18px;
  border-bottom: none;
}

nav .submenu a:visited { color: var(--menu-text); }

nav .submenu a:hover,
nav .submenu a:focus {
  color: var(--menu-hover);
}

nav .submenu li.has-children > a::after {
  content: "▸";
  float: right;
  margin-left: 12px;
  font-size: 0.75em;
  color: var(--menu-text);
}

nav .submenu .submenu {
  top: 0;
  left: 100%;
  margin: 0;
}

/* Mobile Navigation: Hamburger + Dropdown unter dem Header + Akkordeon-Untermenüs */
@media (max-width: 780px) {
  .nav-toggle { display: block; }

  .site-header .wrap { justify-content: space-between; }

  #main-nav {
    display: none;
    width: calc(100% + 48px);
    order: 3;
    background: var(--color-gray-light);
    margin: 10px -24px 0;
    padding: 0 24px;
  }

  #main-nav.is-open { display: block; }

  nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }

  nav li { width: 100%; }

  nav a {
    display: block;
    padding: 10px 4px;
    color: var(--text);
    text-shadow: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  nav a:visited { color: var(--text); }

  nav a[aria-current="page"] { border-bottom-color: var(--text); }

  nav > ul > li.has-children > a::after {
    content: "▾";
    float: right;
    font-size: 0.8em;
  }

  nav li.has-children.open > a::after { content: "▴"; }

  nav .submenu {
    display: none;
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: rgba(0,0,0,0.05);
    padding: 0;
    min-width: 0;
  }

  nav .submenu a,
  nav .submenu a:visited { color: var(--text); }

  nav .submenu li.has-children > a::after { color: var(--text); }

  nav li.has-children.open > .submenu { display: flex; }

  nav .submenu a { padding-left: 24px; }
}

@media (max-width: 640px) {
  .hero-image,
  .hero-image img { max-height: 220px; }
}

/* Hero image above H1 – Padding entspricht .wrap, damit Bild- und Textkanten fluchten.
   Kein overflow:hidden hier: die Beschneidung übernimmt object-fit:cover am <img>
   selbst (zusammen mit dessen fixem max-height). So kann der Schatten direkt am
   <img> hängen (exakt bildbreit, 870px) statt am gepolsterten 918px-Container –
   sonst wäre der Schatten 24px breiter als das sichtbare Bild. */
.hero-image {
  max-width: 918px;
  margin: 0 auto;
  padding: 0 24px;
  max-height: 360px;
}

.hero-image img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

main { padding-bottom: 60px; }

.hero .wrap { padding-top: 12px; }

/* Startseite: zentrierte Einleitung oberhalb der Schwerpunkt-Kacheln (wie im Original) */
.hero-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-heading {
  text-align: center;
  font-size: 7rem;
  line-height: 1;
  color: var(--text);
  margin: 0;
}

.hero-heading svg {
  height: 0.8em;
  width: auto;
  fill: currentColor;
}

@media (max-width: 640px) {
  .hero-heading { font-size: 4.2rem; }
}

.page .wrap { padding-top: 36px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Ubuntu Sans", Verdana, Arial, sans-serif;
  font-weight: 600;
  scroll-margin-top: var(--header-height, 90px);
}

/* Ziel manuell gesetzter Anker (z.B. {#anfang} in content/stoffwechsel.md).
   --header-height wird von js/nav.js anhand der tatsächlichen, variablen
   Header-Höhe (Menü kann je nach Breite ein- oder zweizeilig sein) gesetzt. */
[id] { scroll-margin-top: var(--header-height, 90px); }

h1 {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom: 4px solid;
  border-image: var(--gradient) 1;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

h2 { font-size: 1.4rem; color: var(--text); margin-top: 1.2em; }
h3 { font-size: 1.1rem; color: var(--text); margin-top: 1em; }

blockquote {
  margin: 1.5em 0;
  padding: 12px 20px;
  border-left: 4px solid var(--color-pink);
  background: #FBF1F6;
  font-style: italic;
  color: var(--text);
}

img { max-width: 100%; height: auto; }

.page img,
.hero .content img {
  border-radius: 6px;
}

/* Verhindert, dass eine ganze Zeile neben einem float komplett nach unten
   rutscht, wenn ein einzelnes (langes, deutsches) Wort in die schmale
   Restbreite neben dem Bild nicht mehr hineinpasst – bricht dann notfalls
   mitten im Wort um, statt die Zeile darunter zu schieben. */
.page { overflow-wrap: break-word; }

.page ul, .page ol { padding-left: 1.3em; }
.page li { margin-bottom: 0; }

/* Bilder neben einzelnen Absätzen/Abschnitten im Fließtext */
.content-image {
  float: right;
  clear: right;
  max-width: 260px;
  margin: 0 0 1.2em 1.5em;
}

.content-image img {
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

.content-image--left {
  float: left;
  clear: left;
  margin: 0 1.5em 1.2em 0;
}

.content-image--left img {
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
} 

.content-image--large {
  float: right;
  clear: right;
  max-width: 440px;
  margin: 0 0 1.2em 1.5em;
}

.content-image--large img {
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
} 

/* Mehrere thematisch zusammengehörige Bilder rechtsbündig gestapelt (wie im Original) */
.content-image-stack {
  float: right;
  clear: right;
  width: 220px;
  margin: 0 0 1em 1.5em;
}

.content-image-stack img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

/* Bleiben auch mobil rechts/links neben dem Text (kein float:none mehr) –
   dafür schmaler, damit neben dem Bild noch lesbar Platz für Text bleibt. */
@media (max-width: 640px) {
  .content-image {
    max-width: 42%;
    margin: 0 0 1em 1em;
  }

  .content-image--left {
    max-width: 42%;
    margin: 0 1em 1em 0;
  }

  .content-image-stack {
    width: 38%;
    margin: 0 0 0.8em 1em;
  }
}

/* Startseite: vier Schwerpunkt-Kacheln nebeneinander (wie im Original) */
.home-teasers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  clear: both;
  margin: 1.8em 0 2.2em;
}

.home-teaser {
  text-align: center;
}

.home-teaser h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.home-teaser__image {
  display: block;
  margin-bottom: 14px;
}

.home-teaser__image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

.home-teaser__text {
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 10px;
}

.home-teaser__text p { margin: 0; }

.home-teaser__more a {
  font-weight: 300;
}

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

@media (max-width: 560px) {
  .home-teasers { grid-template-columns: 1fr; }
}

/* Zentriertes Bild im Fließtext (z.B. Schema-Grafiken) */
.content-image--center {
  display: block;
  clear: both;
  max-width: 480px;
  margin: 1.5em auto;
}

.content-image--center img {
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

/* Zusätzlicher Rahmen für einzelne Bilder (siehe content/gesund-aktiv.md,
   content/mikroimmuntherapie.md) */
.gesund-aktiv-schema-rand img {
  border: 1px solid var(--color-gray-dark);
}

.mikroimmuntherapie-infografik-rand img {
  border: 1px solid var(--color-gray-dark);
}

/* Bild, das die volle Breite seiner Spalte ausfüllt (z.B. Kontakt-Spalte) */
.content-image--block {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin: 1.2em 0;
}

.content-image--block img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

/* E-Mail-Adresse als Bild (Spam-Schutz auf Impressum/Datenschutz) */
.email-line img {
  height: 1.15em;
  vertical-align: middle;
}

/* Rückverlinkung zum Seitenanfang (z.B. Stoffwechsel-Unterthemen) */
.back-to-top {
  display: block;
  text-align: right;
  font-size: 0.85rem;
  margin: 0.4em 0 1.8em;
}

.embed-frame {
  margin: 1.5em 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

.embed-frame iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

.embed-frame--form iframe {
  height: 700px;
}

/* Zweispaltige Bild+Video-Reihe (z.B. gesund + aktiv) */
.media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin: 1.5em 0;
}

.media-row img {
  flex: 1 1 320px;
  border-radius: 6px;
  box-shadow: 0 8px 6px -5px rgba(0,0,0,0.3);
}

.media-row .embed-frame {
  flex: 1 1 320px;
  margin: 0;
}

.embed-frame--video iframe {
  height: 240px;
}

/* Kontaktseite: oben zweispaltig (Text+Bild | Formular) */
.kontakt-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin: 1.5em 0;
}

.kontakt-top__intro::after {
  content: "";
  display: block;
  clear: both;
}

/* Die h2 rechts ("Nachricht schreiben" bzw. "Vielen Dank …") behält den normalen
   h2-Abstand, damit sie auf einer Zeile mit "Kontakt" links steht. */
.kontakt-top .embed-frame--form iframe {
  height: 620px;
}

/* Das JotForm-Formular bringt oben eigenen Innenabstand mit. Der iframe wird innerhalb
   des (clippenden) Rahmens nach oben geschoben, damit das erste Feld (Anrede) auf Höhe
   von "Ich freue mich auf Ihre Kontaktaufnahme!" steht (Höhe +20px gleicht die
   abgeschnittenen 20px aus). Nur zweispaltig, mobil bleibt alles wie gehabt. */
@media (min-width: 781px) {
  .kontakt-top .embed-frame--form {
    margin-top: -10px;
  }
  .kontakt-top .embed-frame--form iframe {
    margin-top: -20px;
    height: 640px;
  }
}

@media (max-width: 780px) {
  .kontakt-top {
    grid-template-columns: 1fr;
  }
}

/* Footer */
.site-footer {
  border-top: 4px solid;
  border-image: var(--gradient) 1;
  background: var(--footer-bg);
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer .wrap {
  padding: 20px 24px;
}

.site-footer__row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.6em;
}

.site-footer p { margin: 0; }

.site-footer__row .copyright {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-footer__row .legal--end {
  margin-left: auto;
}

.site-footer .legal a { color: var(--text); text-decoration: underline; }
.site-footer .legal a:hover { color: var(--link-hover); }

@media (max-width: 640px) {
  h1 { font-size: 1.25rem; }
  .brand img { height: 42px; }

  /* Footer: Umbrüche links/rechts vom Copyright erlauben statt Überlappung */
  .site-footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-height: 0;
  }
  .site-footer__row .copyright {
    position: static;
    transform: none;
  }
  .site-footer__row .legal--end { margin-left: 0; }
}

/* Engel-Flourish: fliegt beim Laden jeder Seite von links ins Bild (wie auf der alten Seite).
   Das Motiv selbst ist ein sehr helles, halbtransparentes Wasserzeichen (siehe Original) –
   es ist nur auf dem farbigen Header-Verlauf sichtbar, nicht auf weißem Grund. */
.angel-flourish {
  position: absolute;
  top: 5px;
  right: 180px;
  width: 220px;
  pointer-events: none;
  z-index: 0;
}

.angel-flourish img {
  display: block;
  width: 100%;
  height: auto;
  animation: angel-fly-in 1.4s ease-out both;
}

@keyframes angel-fly-in {
  from { opacity: 0; transform: translate3d(-140%, -10%, 0) rotate(-120deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@media (max-width: 780px) {
  .angel-flourish { width: 150px; right: 10px; }
}

@media (max-width: 640px) {
  .angel-flourish { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .angel-flourish img { animation: none; opacity: 1; transform: none; }
}