/* ==========================================================================
   Wittchow Osteopathie — Design-System-Prototyp
   ========================================================================== */

/* Lokal gehostete Schrift statt Google-Fonts-CDN — bei jedem Seitenaufruf
   über den CDN-Link würde sonst ohne Einwilligung die Besucher-IP an Google
   übertragen (DSGVO-Verstoß, LG München 2022). Montserrat ist bei Google ein
   Variable Font; ein Ausschnitt pro Schriftschnitt deckt via font-weight-Bereich
   alle im Design genutzten Stärken (300–800) ab. Nur der "latin"-Ausschnitt
   ist eingebunden (deckt Deutsch inkl. äöüß und ® vollständig ab) — die
   zusätzlichen Google-Ausschnitte für Kyrillisch/Griechisch/Vietnamesisch/
   Latin-Ext werden hier nicht gebraucht. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/montserrat-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('fonts/montserrat-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette in the spirit of Moritz' Original-XD-Entwurf (blau/gold/creme,
     wie dort verwendet) — die reinen Pastellwerte direkt aus der Datei
     wirkten in der Fläche zu blass/milchig, darum hier bewusst kräftiger:
     Grundton bleibt exakt sein Blau/Gold, nur satter gemischt. */
  --color-navy: #4b54a7;
  --color-navy-dark: #2d3264;
  --color-navy-vivid: #3c47b5;
  --color-cream: #fff5ce;
  --color-cream-soft: #fffdf5;
  --color-gold: #e7ca74;
  --color-gold-soft: #f4dc86;
  --color-ink: #363b6e;
  --color-ink-soft: #6a6f7d;
  --font-serif: "Montserrat", sans-serif;
  --font-sans: "Montserrat", sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --max-width: 1180px;
}

* { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-ink);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  /* Kein Bindestrich in Überschriften, nirgendwo — auf ausdrücklichen Wunsch.
     Lange Wörter brechen stattdessen ganz ohne Trennzeichen um (overflow-wrap
     greift erst, wenn ein Wort gar nicht mehr passt). */
  hyphens: none;
}

p, a, span, li { overflow-wrap: break-word; }

h1 { font-size: clamp(2.2rem, 4.3vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600; }

/* Akademische Titel (D.O.® M.R.O.®) hinter dem Namen kleiner als der Name selbst. */
.title-suffix { font-size: 0.7em; font-weight: 500; }

p { margin: 0 0 1.2em; color: var(--color-ink-soft); font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--color-navy);
  font-weight: 600;
  margin-bottom: 0.9em;
  display: inline-block;
}

/* Gold only reads on dark/blue grounds (as in Moritz' original) — on light
   cream/white sections the eyebrow stays navy for legible contrast. */
.hero .eyebrow, .hero-page .eyebrow, .hero-home .eyebrow,
.philosophy .eyebrow, .site-footer .eyebrow {
  color: var(--color-gold);
}

.lead {
  font-size: 1.2rem;
  color: var(--color-ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-navy-dark);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,234,149,0.35); }

.btn-ghost {
  border-color: rgba(255,245,206,0.55);
  color: var(--color-cream);
}
.btn-ghost:hover { background: rgba(255,245,206,0.12); }

.btn-outline-navy {
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn-outline-navy:hover { background: var(--color-navy); color: var(--color-cream); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(75,84,167,0.1);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo img { height: 78px; width: auto; }

@media (max-width: 760px) {
  .logo img { height: 58px; }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-navy);
  margin: 5px 0;
  transition: 0.3s;
}

.main-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  color: var(--color-ink);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-navy);
  transition: right 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--color-navy); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: var(--color-cream);
  padding: 110px 0 130px;
  /* Organische, weich geschwungene Unterkante statt harter Rechteckkante —
     wie im puristischen Blob-Schnitt von Moritz' Original-Entwurf. Beide
     unteren Ecken bleiben exakt bei 100% Höhe verankert, damit an den
     Rändern keine Lücke zum Hintergrund entsteht — nur die Mitte schwingt. */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 78% 94%, 46% 99%, 20% 96%, 0% 100%);
}

/* Die Wellenkante schneidet an den Einbuchtungen bis zu 6% der Hero-Höhe
   weg — ohne Ausgleich schimmert dort kurz der weiße Seitenhintergrund
   durch, bevor die nächste Sektion beginnt. Die folgende Sektion wird
   daher unter den Hero gezogen (füllt die Einbuchtung mit ihrer eigenen
   Farbe) und um denselben Betrag zusätzlich gepolstert, damit sich an der
   sichtbaren Textposition nichts ändert. */
.hero + section {
  position: relative;
  z-index: 1;
  margin-top: -70px;
  padding-top: 160px;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  pointer-events: none;
}
.hero::before {
  width: 480px; height: 480px;
  background: var(--color-gold);
  top: -180px; right: -120px;
}
.hero::after {
  width: 360px; height: 360px;
  background: var(--color-navy-vivid);
  bottom: -160px; left: -100px;
}

.hero .wrap { position: relative; z-index: 2; }

.hero-inner { max-width: 720px; }

.hero h1 { color: var(--color-cream); }
.hero h1 em {
  font-style: italic;
  color: var(--color-gold-soft);
}

.hero-cta { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.hero-bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(94,100,150,0.92) 10%, rgba(61,65,98,0.85) 100%);
}

.page-hero {
  padding: 84px 0 90px;
}
.page-hero .hero-inner { max-width: 640px; }

/* ---------- Eyebrow mark (recurring brand device) ---------- */
.eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow-mark img { height: 22px; width: auto; opacity: 0.9; }

/* ---------- Section divider mark ---------- */
.divider-mark {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.divider-mark img { height: 26px; width: auto; opacity: 0.5; }

/* ---------- Hero: Home (split, portrait, emotional) ---------- */
.hero-home {
  background: #ffffff;
  color: var(--color-cream);
  padding: 78px 0 76px;
  overflow: hidden;
  position: relative;
}
.hero-home .wrap { position: relative; z-index: 2; }
.hero-home-head { max-width: 920px; margin-bottom: 36px; }
.hero-home-body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: end;
}
.hero-home .hero-text { padding-bottom: 64px; }
.hero-home h1 { color: var(--color-cream); }
.hero-home .hero-portrait { position: relative; align-self: end; }
.hero-home .hero-portrait img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  filter: saturate(0.94);
}
.hero-home .hero-portrait .caption {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-size: 0.75rem;
  color: rgba(255,245,206,0.75);
  background: rgba(61,65,98,0.55);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  border-radius: 8px;
}

/* ---------- Hero: inner pages (minimal, no clinical photo) ---------- */
.hero-page {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: var(--color-cream);
  padding: 96px 0 92px;
  overflow: hidden;
  position: relative;
}
.hero-page::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--color-gold);
  filter: blur(85px);
  opacity: 0.14;
  bottom: -220px; left: -120px;
}
.hero-page .wrap { position: relative; z-index: 2; }
.hero-page .hero-inner { max-width: 620px; }
.hero-page h1 { color: var(--color-cream); }

@media (max-width: 900px) {
  .hero-home-body { grid-template-columns: 1fr; }
  .hero-home .hero-text { padding-bottom: 30px; }
  .hero-home .hero-portrait { max-width: 340px; margin: 0 auto; }
}

/* ---------- Section basics ---------- */
section { padding: 90px 0; position: relative; }
section.tight { padding: 60px 0; }

.section-alt { background: linear-gradient(155deg, var(--color-cream-soft) 0%, #fff 100%); }

.section-head { max-width: 660px; margin-bottom: 50px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Philosophie / dark quote block ---------- */
.philosophy {
  background: radial-gradient(circle at 20% 20%, #7e83ab 0%, var(--color-navy-dark) 65%);
  color: var(--color-cream);
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 200px 0 140px;
  margin-top: -70px;
  /* Organische Wellenkante an Ober- und Unterkante. Die Ecken bleiben
     verankert (0%/100%), nur zwischen ihnen schwingt die Kante — dadurch
     entstehen an Ober- und Unterkante Einbuchtungen, an denen sonst der
     helle Seitenhintergrund durchschimmert. Analog zu .hero + section wird
     dieser Block daher selbst 70px in die vorherige Sektion hochgezogen
     (deren Farbe füllt die Einbuchtung an der Oberkante) und um denselben
     Betrag zusätzlich gepolstert, damit der Zitat-Text an seiner
     ursprünglichen Position bleibt. Die Unterkante übernimmt dasselbe
     Prinzip via .philosophy + section weiter unten. */
  clip-path: polygon(0% 0%, 20% 4%, 50% 1%, 80% 4%, 100% 0%, 100% 100%, 80% 96%, 50% 99%, 20% 96%, 0% 100%);
}

.philosophy + section {
  position: relative;
  z-index: 1;
  margin-top: -70px;
  padding-top: 160px;
}
.philosophy::before {
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0.12;
  filter: blur(90px);
  top: -220px; left: 50%;
  transform: translateX(-50%);
}
.philosophy .wrap { position: relative; z-index: 1; }
.philosophy blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--color-gold-soft);
  margin: 0 auto 28px;
  max-width: 780px;
  line-height: 1.35;
  /* WordPress/Kadence hängen an jedes <blockquote> serienmäßig einen
     4px-Rand links dran (im reinen Prototyp ohne WordPress unsichtbar,
     da dort keine fremden Stylesheets mitlaufen) — hier bewusst entfernt. */
  border: none;
  padding-left: 0;
}
.philosophy .sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255,245,206,0.82);
  font-size: 1.05rem;
}

/* ---------- Cards / Tiles ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.card {
  background: var(--color-cream-soft);
  border: 1px solid rgba(94,100,150,0.08);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Karten in einer Grid-Reihe sind gleich hoch (Grid-Standard), aber bei
     unterschiedlich langem Text stand der Button je nach Karte unterschiedlich
     hoch — jetzt per Flex-Spalte immer bündig am unteren Rand verankert. */
  display: flex;
  flex-direction: column;
}
.card .btn { margin-top: auto; align-self: flex-start; }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(94,100,150,0.10); }
.card .icon-dot {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-gold-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card .icon-dot svg { width: 25px; height: 25px; }
.read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-navy);
  text-decoration: none;
}
.read-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s ease; }
.read-link:hover svg { transform: translateX(3px); }

/* ---------- Split layout (image + text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* Zwei Text-Spalten nebeneinander (z. B. Erstattung: "Abrechnung" /
   "Gesetzliche Krankenkassen") — die Überschrift bekommt Platz für zwei
   Zeilen reserviert, damit der Absatztext darunter in beiden Spalten auf
   gleicher Höhe startet, auch wenn eine Überschrift kürzer ist/nur eine
   Zeile braucht. */
.split:has(> .content + .content) {
  align-items: start;
}
.split:has(> .content + .content) > .content h2 {
  min-height: calc(1.15em * 2);
}
.split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}
.split.reverse .media { order: 2; }
.split.reverse .content { order: 1; }
.split.no-media { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }

/* ---------- Karte (Kontaktseite): Klick-zum-Laden statt Auto-Embed, damit
   ohne Klick keine Verbindung zu Google-Servern aufgebaut wird. ---------- */
.map-embed {
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: #eaebf1;
  position: relative;
}
.map-embed-preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 28px;
}
.map-embed-address {
  font-family: var(--font-serif);
  color: var(--color-navy);
  font-size: 1.15rem;
  margin: 0;
}
.map-embed-hint {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  max-width: 280px;
  margin: 0;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.split .media { position: relative; }
.split .media::after {
  content: "";
  position: absolute;
  bottom: -22px; right: -22px;
  width: 60%; height: 60%;
  border: 2px solid var(--color-navy);
  z-index: -1;
}

/* ---------- Timeline (Vita) ---------- */
.timeline {
  border-left: 2px solid rgba(94,100,150,0.15);
  margin-left: 6px;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -39px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid var(--color-cream);
  box-shadow: 0 0 0 2px rgba(94,100,150,0.15);
}
.timeline-year {
  font-family: var(--font-serif);
  color: var(--color-navy);
  font-size: 1.2rem;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
}

/* ---------- Info list (Kontakt/Erstattung) ---------- */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(94,100,150,0.1);
}
.info-list .label { color: var(--color-navy); font-weight: 600; min-width: 130px; }

/* ---------- Posts (Aktuelles) ---------- */
.post-list { display: flex; flex-direction: column; gap: 26px; }
.post-card {
  background: var(--color-cream-soft);
  border-radius: var(--radius);
  padding: 30px 32px;
  border: 1px solid rgba(94,100,150,0.08);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 26px;
  align-items: start;
}
.post-date {
  font-family: var(--font-serif);
  color: var(--color-navy);
  font-size: 1.5rem;
  font-weight: 600;
  border-right: 1px solid rgba(94,100,150,0.12);
  padding-right: 20px;
}
.post-date small { display: block; color: var(--color-ink-soft); font-family: var(--font-sans); font-size: 0.75rem; margin-top: 4px; }
.post-card.placeholder { opacity: 0.7; border-style: dashed; }
.post-card .excerpt { margin-bottom: 14px; }

/* ---------- Article (single Aktuelles post) ---------- */
.article-body {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.08rem;
}
.article-body p { color: var(--color-ink); }
/* Generische Regeln, damit auch Bilder aus dem normalen WordPress-Editor
   (nicht nur handgeschriebenes HTML) automatisch im Artikel-Stil erscheinen. */
.article-body figure { margin: 32px 0; }
.article-body img { width: 100%; border-radius: var(--radius); display: block; }
.article-body figcaption { font-size: 0.82rem; color: var(--color-ink-soft); margin-top: 10px; }
.article-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 6px;
  color: rgba(255,245,206,0.75);
  font-size: 0.9rem;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-navy);
  font-weight: 600;
  margin-bottom: 30px;
}
.back-link svg { width: 15px; height: 15px; transform: rotate(180deg); }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,234,149,0.15);
  color: var(--color-navy);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255,245,206,0.75);
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.site-footer h4 { color: var(--color-cream); font-family: var(--font-sans); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; }
.site-footer a { text-decoration: none; color: rgba(255,245,206,0.75); }
.site-footer a:hover { color: var(--color-gold-soft); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,245,206,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-logo { height: 52px; margin-bottom: 16px; }
.footer-vod { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.footer-vod img { width: 40px; height: 40px; }

/* ---------- Prototype banner ---------- */
.proto-banner {
  background: var(--color-gold);
  color: var(--color-navy-dark);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 16px;
}
.proto-banner a { text-decoration: underline; }

/* ---------- Logo intro (homepage only) ---------- */
html.intro-lock,
html.intro-lock body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
.logo-intro {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  pointer-events: none;
  width: 800px;
  aspect-ratio: 800 / 229;
  transform: translate(-50%, -50%) scale(0.8);
}
.logo-intro img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  display: block;
}
.logo-intro .mark-b { opacity: 0; }

.site-header .logo img.intro-controlled { opacity: 0; }

.intro-target {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(26px);
}

@media (prefers-reduced-motion: reduce) {
  .logo-intro { display: none; }
  .site-header .logo img { opacity: 1; }
  .intro-target { opacity: 1; filter: none; transform: none; }
  .hero-home {
    background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  }
  .hero-home .scroll-cue { display: none; }
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-navy);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.scroll-cue svg { animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Nav switches to the hamburger menu earlier than the main mobile breakpoint
   (960px, not 760px) — below ~950px the 7-item nav no longer fits on one
   line and flex-shrink combined with the global overflow-wrap:break-word
   rule was breaking labels mid-word ("Osteopa/thie"). */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    height: 100vh;
    background: var(--color-navy-dark);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    padding: 100px 30px 30px;
    z-index: 90;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 22px; }
  .main-nav a { color: var(--color-cream); font-size: 1.1rem; }
}

@media (max-width: 760px) {
  .split, .grid-3, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .split.reverse .media, .split.reverse .content { order: initial; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .post-card { grid-template-columns: 1fr; }
  .post-date { border-right: none; border-bottom: 1px solid rgba(94,100,150,0.12); padding-right: 0; padding-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
  .hero { padding: 80px 0 90px; }
  section { padding: 60px 0; }
  .hero + section { padding-top: 130px; }
  .philosophy { padding-top: 170px; }
  .philosophy + section { padding-top: 130px; }
  /* Unter ~760px verkürzt sich die Kantenbreite stärker als die Höhe der
     Einbuchtung, wodurch dieselbe Wellenkante spitz statt organisch wirkt.
     Amplitude hier daher halbieren — Ankerpunkte bleiben gleich. */
  .hero { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 78% 97%, 46% 99.5%, 20% 98%, 0% 100%); }
  .philosophy { clip-path: polygon(0% 0%, 20% 2%, 50% 0.5%, 80% 2%, 100% 0%, 100% 100%, 80% 98%, 50% 99.5%, 20% 98%, 0% 100%); }
}

/* ==========================================================================
   Kadence-Neutralisierung — unser eigenes .wrap-System (max-width:1180px)
   übernimmt die Breitensteuerung komplett. Kadence-Header/-Footer/-Titelzeile
   werden serverseitig im Plugin abgehängt (nicht per CSS versteckt), nur der
   Content-Container muss hier neutralisiert werden, da Kadence "#inner-wrap"
   selbst die Klasse "wrap" trägt und sonst mit unserem eigenen .wrap kollidiert.
   ========================================================================== */
#inner-wrap.wrap,
.content-container.site-container,
.content-wrap,
#primary.content-area,
#main.site-main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}