/* ==========================================================================
   neurochirurgie.nrw — Designsystem
   Aus dem Logo abgeleitet: Markenblau, Navy, das Profil. Mobile zuerst, logische
   Eigenschaften für RTL, keine Fremdbibliotheken. Alles, was theme.json nicht kann.
   ========================================================================== */

:root{
  --nc-rand: clamp(1.25rem, 4vw, 3rem);
  --nc-breit: 1200px;
  --nc-lese: 680px;
  --nc-eng: 560px;
  --nc-kopf: 4.5rem;
  --nc-ease: cubic-bezier(.16, 1, .3, 1);
  --nc-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --nc-kurz: 200ms;
  --nc-mittel: 600ms;
  --nc-lang: 1200ms;
  --nc-radius: 14px;
  --nc-radius-klein: 8px;
  --nc-linie: var(--wp--preset--color--linie);
  --nc-marke: var(--wp--preset--color--marke);
  --nc-navy: var(--wp--preset--color--navy);
  --nc-nacht: var(--wp--preset--color--nacht);
}
@media (max-width: 767px){ :root{ --nc-kopf: 4rem; } }

/* Metrisch angepasste Ersatzschrift: Bis Plus Jakarta Sans geladen ist, zeigt der Browser Arial
   in denselben Laufweiten. Dadurch springt beim Schriftwechsel nichts (CLS). */
@font-face{
  font-family: "PJS Ersatz"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106%; ascent-override: 99%; descent-override: 25%; line-gap-override: 0%;
}

/* ---------- Grundlagen ---------- */
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nc-kopf) + 1rem); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{ text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; }
:where(p, li, dd){ text-wrap: pretty; }
:where(h1, h2, h3, h4){ text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* lange Komposita werden mit Trennstrich getrennt (lang="de"), nicht irgendwo gebrochen */
img, svg, video{ max-width: 100%; height: auto; }
::selection{ background: var(--wp--preset--color--marke-hell); color: var(--nc-navy); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--nc-marke); outline-offset: 3px; border-radius: 3px;
}
.nc-sr{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nc-sprung{
  position: absolute; inset-inline-start: var(--nc-rand); top: 0; transform: translateY(-120%);
  background: var(--nc-navy); color: #fff; padding: .75rem 1.1rem; border-radius: 0 0 var(--nc-radius-klein) var(--nc-radius-klein);
  font-weight: 600; z-index: 200; transition: transform var(--nc-kurz) var(--nc-ease);
}
.nc-sprung:focus{ transform: translateY(0); }

/* ---------- Raster ---------- */
.nc-rahmen{ width: min(100% - 2 * var(--nc-rand), var(--nc-breit)); margin-inline: auto; }
.nc-lese{ width: min(100% - 2 * var(--nc-rand), var(--nc-lese)); margin-inline: auto; }
.nc-abschnitt{ padding-block: var(--wp--preset--spacing--9); }
.nc-abschnitt--knapp{ padding-block: var(--wp--preset--spacing--8); }
.nc-abschnitt--flaeche{ background: var(--wp--preset--color--flaeche); }
.nc-abschnitt--nacht{ background: var(--nc-nacht); color: #D6DEE8; }
.nc-abschnitt--nacht :where(h1, h2, h3, h4){ color: #fff; }
.nc-abschnitt--nacht a{ color: #fff; }
.nc-abschnitt + .nc-abschnitt:not(.nc-abschnitt--flaeche):not(.nc-abschnitt--nacht){ padding-top: 0; }

.nc-vorzeile{
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--wp--preset--font-size--meta); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--marke-tief); margin: 0 0 1rem;
}
.nc-vorzeile::before{ content: ""; width: 1.5rem; height: 3px; border-radius: 2px; background: var(--nc-marke); }
.nc-abschnitt--nacht .nc-vorzeile,
/* Der Hero steht auf derselben dunklen Fläche, trägt aber nicht die Klasse --nacht:
   ohne diese Zeile blieb die Vorzeile im tiefen Markenblau bei 2,33:1. */
.nc-hero .nc-vorzeile{ color: var(--nc-marke); }
.nc-abschnitt__kopf{ max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.nc-abschnitt__kopf p{ font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--nebel); max-width: 38rem; }
.nc-abschnitt--nacht .nc-abschnitt__kopf p{ color: #B9C3D1; }

/* ---------- Schaltflächen ---------- */
.nc-knopf{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: var(--wp--preset--font-size--klein); line-height: 1.2; text-decoration: none;
  transition: background var(--nc-kurz) var(--nc-ease), color var(--nc-kurz) var(--nc-ease), border-color var(--nc-kurz) var(--nc-ease), transform var(--nc-kurz) var(--nc-ease);
  cursor: pointer; white-space: nowrap;
}
.nc-knopf--primaer{ background: var(--nc-navy); color: #fff; }
.nc-knopf--primaer:hover{ background: var(--wp--preset--color--marke-tief); color: #fff; }
.nc-knopf--sekundaer{ background: transparent; color: var(--nc-navy); border-color: var(--nc-linie); }
.nc-knopf--sekundaer:hover{ border-color: var(--nc-navy); color: var(--nc-navy); }
.nc-knopf--marke{ background: var(--nc-marke); color: var(--nc-nacht); }
.nc-knopf--marke:hover{ background: #5FBCE8; color: var(--nc-nacht); }
.nc-knopf--hell{ background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.nc-knopf--hell:hover{ border-color: #fff; color: #fff; }
.nc-knopf--klein{ min-height: 2.5rem; padding: .55rem 1.1rem; font-size: var(--wp--preset--font-size--meta); }
.nc-knopf:active{ transform: translateY(1px); }
.nc-knopf__pfeil{ display: inline-block; transition: transform var(--nc-kurz) var(--nc-ease); }
.nc-knopf:hover .nc-knopf__pfeil{ transform: translateX(3px); }
/* Lateinische Daten in arabischer Umgebung dürfen nicht umsortiert werden.
   Rufnummern bestehen nur aus Ziffern und Trennern, Adressen aus Ziffern und
   lateinischer Schrift — beides ist für den Bidi-Algorithmus „richtungsneutral" und
   wurde in einem RTL-Absatz gespiegelt: aus „02065 / 67 64 580" wurde sichtbar
   „580 64 67 / 02065". Wer das ablas, wählte die falsche Nummer.
   plaintext bestimmt die Richtung je Absatz aus dem ersten starken Zeichen:
   lateinisch → LTR, arabisch → RTL. Gemischte Sprechzeiten bleiben damit korrekt. */
/* Rufnummern, Adressen und E-Mail ausdrücklich LTR: plaintext genügt hier nicht,
   weil eine Rufnummer aus Ziffern und Trennern besteht und damit gar kein
   richtungsstarkes Zeichen enthält, an dem sich die Heuristik orientieren könnte. */
[dir="rtl"] address,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"]{ direction: ltr; unicode-bidi: isolate; text-align: start; }
/* Gemischte Angaben richten sich je Absatz nach dem ersten starken Zeichen aus:
   arabische Sprechzeiten bleiben RTL, lateinische Angaben (Adresse, Copyright,
   die bewusst deutschen Seitennamen im Fußbereich) werden LTR gesetzt.
   Nicht pauschal auf alle Absätze anwenden: ein arabischer Satz, der mit dem
   lateinischen Namen „Eyad Al-Kahlout" beginnt, würde sonst fälschlich LTR. */
[dir="rtl"] .nc-standort__zeiten li,
[dir="rtl"] .nc-standort__zeile > span,
[dir="rtl"] time{ unicode-bidi: plaintext; }
/* Im Fußbereich zusätzlich die Ausrichtung festhalten: plaintext richtet jeden Absatz
   nach seiner eigenen Richtung aus, wodurch die lateinischen Blöcke linksbündig wurden
   und die Spalte neben den arabischen Zeilen zerfranst wirkte. Die Reihenfolge bleibt
   lateinisch, die Kante bleibt rechts — innerhalb von [dir="rtl"] ist rechts die
   Anfangskante. */
[dir="rtl"] .nc-fuss__standort > span,
[dir="rtl"] .nc-fuss__standort > strong,
[dir="rtl"] .nc-fuss__standort > a,
[dir="rtl"] .nc-fuss__unten > span,
[dir="rtl"] .nc-fuss__unten li a{ unicode-bidi: plaintext; text-align: right; }

[dir="rtl"] .nc-knopf__pfeil{ display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .nc-knopf:hover .nc-knopf__pfeil{ transform: scaleX(-1) translateX(3px); }
.nc-aktionen{ display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.nc-icon{ width: 1.25em; height: 1.25em; flex: 0 0 auto; }

/* ---------- Kopfbereich ---------- */
.nc-kopf{
  position: sticky; top: 0; z-index: 100; height: var(--nc-kopf);
  background: color-mix(in srgb, var(--wp--preset--color--papier) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(10px); -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--nc-linie) 70%, transparent);
  transition: background var(--nc-mittel) var(--nc-ease), border-color var(--nc-mittel) var(--nc-ease);
}
.nc-kopf__inner{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nc-marke{ display: block; line-height: 0; flex: 0 0 auto; }
.nc-marke__bild{ display: block; width: 216px; height: auto; }
@media (max-width: 767px){ .nc-marke__bild{ width: 156px; } }
@media (max-width: 359px){ .nc-marke__bild{ width: 136px; } }
.nc-nav{ display: none; }
.nc-nav__liste{ display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nc-nav__liste a{
  display: inline-block; padding: .55rem .8rem; border-radius: 999px; text-decoration: none; color: var(--nc-navy);
  font-weight: 600; font-size: var(--wp--preset--font-size--klein); transition: background var(--nc-kurz) var(--nc-ease);
}
.nc-nav__liste a:hover, .nc-nav__liste a[aria-current="page"]{ background: var(--wp--preset--color--flaeche); color: var(--nc-navy); }
.nc-kopf__aktionen{ display: flex; align-items: center; gap: .5rem; }
.nc-kopf__tel{ display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--nc-navy); border: 1.5px solid var(--nc-linie); }
.nc-kopf__termin{ display: none; }
@media (min-width: 560px){ .nc-kopf__termin{ display: inline-flex; } .nc-kopf__tel{ display: none; } }
@media (min-width: 1100px){ .nc-nav{ display: block; } }
.nc-menue-knopf{
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1.5px solid var(--nc-linie); background: transparent; color: var(--nc-navy); cursor: pointer;
}
@media (min-width: 1100px){ .nc-menue-knopf{ display: none; } }
/* Sehr schmale Geräte (320–379 px): Marke, Sprache, Telefon und Menü müssen nebeneinander passen. */
@media (max-width: 379px){
  .nc-kopf__inner{ gap: .75rem; }
  .nc-kopf__aktionen{ gap: .375rem; }
  .nc-kopf__tel, .nc-menue-knopf, .nc-sprache__knopf{ width: 2.5rem; min-width: 2.5rem; height: 2.5rem; padding: 0; }
  .nc-marke__bild{ width: 124px; }
}

/* Sprachwechsler */
.nc-sprache{ position: relative; }
.nc-sprache__knopf{
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .7rem; border-radius: 999px;
  border: 1.5px solid var(--nc-linie); background: transparent; color: var(--nc-navy); font-weight: 700; font-size: var(--wp--preset--font-size--meta); letter-spacing: .08em; cursor: pointer;
}
.nc-sprache__liste{
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); min-width: 10rem; margin: 0; padding: .4rem; list-style: none;
  background: #fff; border: 1px solid var(--nc-linie); border-radius: var(--nc-radius-klein); box-shadow: var(--wp--preset--shadow--karte); z-index: 120;
}
.nc-sprache__liste a{ display: block; padding: .55rem .8rem; border-radius: 6px; text-decoration: none; color: var(--nc-navy); font-weight: 600; font-size: var(--wp--preset--font-size--klein); }
.nc-sprache__liste a:hover{ background: var(--wp--preset--color--flaeche); }

/* Mobiles Menü: Vollbild in Navy, ruhig, mit allen Wegen */
.nc-menue{
  position: fixed; inset: 0; z-index: 150; background: var(--nc-nacht); color: #fff;
  padding: calc(var(--nc-kopf) + 1rem) var(--nc-rand) 2rem; overflow: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--nc-mittel) var(--nc-ease), visibility 0s linear var(--nc-mittel);
}
.nc-menue.ist-offen{ opacity: 1; visibility: visible; transition-delay: 0s; }
.nc-menue__schliessen{ position: absolute; top: calc((var(--nc-kopf) - 2.75rem) / 2); inset-inline-end: var(--nc-rand); width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nc-menue__liste{ list-style: none; margin: 0; padding: 0; }
.nc-menue__liste a{
  display: block; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none;
  font-size: var(--wp--preset--font-size--zwischentitel); font-weight: 700; letter-spacing: -.01em;
  transform: translateY(12px); opacity: 0; transition: transform var(--nc-mittel) var(--nc-ease), opacity var(--nc-mittel) var(--nc-ease);
}
.nc-menue.ist-offen .nc-menue__liste a{ transform: none; opacity: 1; transition-delay: calc(60ms * var(--i, 0)); }
.nc-menue__fuss{ margin-top: 2rem; display: grid; gap: 1rem; }
.nc-menue__standorte{ display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; color: #B9C3D1; font-size: var(--wp--preset--font-size--klein); }
.nc-menue__standorte strong{ color: #fff; display: block; }
.nc-menue__standorte a{ color: #fff; }
body.nc-menue-offen{ overflow: hidden; }

/* ---------- Aufmacher ---------- */
.nc-hero{
  position: relative; overflow: hidden; background: var(--nc-nacht); color: #D6DEE8;
  padding-block: clamp(4rem, 12vw, 8.5rem) clamp(3rem, 8vw, 6rem);
}
.nc-hero__inner{ position: relative; z-index: 2; display: grid; gap: 2rem; }
.nc-hero__titel{ color: #fff; font-size: var(--wp--preset--font-size--display); line-height: .98; letter-spacing: -.035em; max-width: 12ch; margin: 0 0 1.25rem; }
.nc-hero__titel em{ font-style: normal; color: var(--nc-marke); }
.nc-hero__text{ font-size: var(--wp--preset--font-size--lead); max-width: 34rem; color: #B9C3D1; margin: 0 0 2rem; }
.nc-hero__aktionen{ margin-bottom: 2.5rem; }
.nc-hero__standorte{ display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--klein); color: #B9C3D1; }
.nc-hero__standorte li{ display: inline-flex; align-items: center; gap: .5rem; }
.nc-hero__standorte li + li::before{ content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--nc-marke); }
.nc-hero__standorte a{ color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.nc-hero__standorte a:hover{ border-color: var(--nc-marke); }
.nc-hero__profil{
  position: absolute; inset-inline-end: -8%; top: 50%; transform: translateY(-50%); height: 118%; width: auto; z-index: 1; opacity: .9; pointer-events: none;
}
.nc-linie__aussen{ stroke: var(--nc-marke); stroke-width: 5; }
.nc-linie__innen{ stroke: var(--wp--preset--color--zweitform); stroke-width: 5; opacity: .55; }
@media (max-width: 899px){
  .nc-hero__profil{ inset-inline-end: -40%; height: 110%; opacity: .35; }
  .nc-hero__titel{ max-width: 14ch; }
}
@media (min-width: 900px){
  .nc-hero__inner{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .nc-hero__profil{ inset-inline-end: 4%; height: 128%; }
}

/* ---------- Einstiege in Ich-Form ---------- */
.nc-einstiege{ display: grid; gap: 1rem; }
@media (min-width: 640px){ .nc-einstiege{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nc-einstieg{
  position: relative; display: grid; gap: .5rem; border-radius: var(--nc-radius);
  /* Logisch statt physisch: der Balken sitzt auf inset-inline-start, der Abstand muss
     mitwandern — mit padding-left stand er in RTL auf der falschen Seite.
     Am Ende Platz für den Pfeil, sonst liegt er auf dem Text. */
  padding-block: 1.5rem; padding-inline: 1.75rem calc(1.25rem + 2.25rem + .75rem);
  background: #fff; border: 1px solid var(--nc-linie); text-decoration: none; color: inherit;
  transition: transform var(--nc-mittel) var(--nc-ease), box-shadow var(--nc-mittel) var(--nc-ease), border-color var(--nc-mittel) var(--nc-ease);
}
.nc-einstieg::before{ content: ""; position: absolute; inset-block: 1.5rem; inset-inline-start: 0; width: 4px; border-radius: 0 3px 3px 0; background: var(--nc-marke); transition: inset-block var(--nc-mittel) var(--nc-ease); }
[dir="rtl"] .nc-einstieg::before{ border-radius: 3px 0 0 3px; }
.nc-einstieg:hover{ transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--karte); border-color: transparent; }
.nc-einstieg:hover::before{ inset-block: 1rem; }
.nc-einstieg__titel{ font-size: var(--wp--preset--font-size--zwischentitel); font-weight: 800; letter-spacing: -.02em; color: var(--nc-navy); margin: 0; }
.nc-einstieg__text{ margin: 0; color: var(--wp--preset--color--nebel); font-size: var(--wp--preset--font-size--klein); }
.nc-einstieg__pfeil{ position: absolute; inset-inline-end: 1.25rem; top: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--wp--preset--color--flaeche); color: var(--nc-navy); transition: background var(--nc-kurz) var(--nc-ease), color var(--nc-kurz) var(--nc-ease); }
.nc-einstieg:hover .nc-einstieg__pfeil{ background: var(--nc-navy); color: #fff; }
[dir="rtl"] .nc-einstieg__pfeil .nc-icon{ transform: scaleX(-1); }

/* ---------- Interaktive Wirbelsäule ---------- */
.nc-ws{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.nc-ws > *{ min-width: 0; }
@media (min-width: 900px){ .nc-ws{ grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } }
.nc-ws__bild{ display: flex; justify-content: center; min-width: 0; }
.ws-zeichnung{ width: 100%; max-width: 230px; height: auto; }
@media (min-width: 900px){ .ws-zeichnung{ width: 100%; max-width: 280px; } }
.ws-zeichnung .koerper, .ws-zeichnung .bogen, .ws-zeichnung .dorn{ fill: #fff; stroke: var(--nc-navy); stroke-width: .95; stroke-linejoin: round; transition: fill var(--nc-mittel) var(--nc-ease), stroke var(--nc-mittel) var(--nc-ease); }
.ws-zeichnung .scheibe{ fill: var(--nc-marke); opacity: .28; transition: opacity var(--nc-mittel) var(--nc-ease); }
.ws-zeichnung .fuge{ fill: none; stroke: var(--wp--preset--color--nebel); stroke-width: .55; stroke-linecap: round; }
.ws-zeichnung .fuehrung{ fill: none; stroke: var(--nc-linie); stroke-width: .8; }
.ws-zeichnung .beschriftung{ font: 700 7px/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; fill: var(--wp--preset--color--nebel); }
.ws-region{ cursor: pointer; }
.ws-region:hover .koerper, .ws-region:hover .bogen, .ws-region:hover .dorn{ stroke: var(--wp--preset--color--marke-tief); }
.nc-ws.hat-auswahl .ws-region:not(.ist-aktiv) .koerper,
.nc-ws.hat-auswahl .ws-region:not(.ist-aktiv) .bogen,
.nc-ws.hat-auswahl .ws-region:not(.ist-aktiv) .dorn{ stroke: var(--nc-linie); }
.nc-ws.hat-auswahl .ws-region:not(.ist-aktiv) .scheibe{ opacity: .08; }
.ws-region.ist-aktiv .koerper{ fill: var(--wp--preset--color--marke-hell); }
.ws-region.ist-aktiv .scheibe{ opacity: .6; }
.ws-region.ist-aktiv .koerper, .ws-region.ist-aktiv .bogen, .ws-region.ist-aktiv .dorn{ stroke: var(--wp--preset--color--marke-tief); stroke-width: 1.2; }
.ws-marke{ pointer-events: none; }
/* Die Reiter dürfen umbrechen statt seitlich wegzulaufen. Mit overflow:auto passten
   Deutsch und Türkisch genau, Englisch lief 34 px über und auf Arabisch stand der
   vierte Reiter fast vollständig außerhalb — scrollbar zwar, aber ohne jeden Hinweis
   darauf, dass es eine vierte Region überhaupt gibt. */
.nc-ws__reiter{ display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; border-radius: var(--nc-radius); background: var(--wp--preset--color--flaeche); margin-bottom: 1.5rem; }
@media (min-width: 560px){ .nc-ws__reiter{ flex-wrap: nowrap; border-radius: 999px; } }
.nc-ws__reiter button{
  flex: 1 0 auto; min-height: 2.6rem; padding: .5rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--nc-navy); font: 700 var(--wp--preset--font-size--klein)/1 var(--wp--preset--font-family--sans); cursor: pointer;
  transition: background var(--nc-kurz) var(--nc-ease), color var(--nc-kurz) var(--nc-ease);
}
.nc-ws__reiter button[aria-selected="true"]{ background: var(--nc-navy); color: #fff; }
.nc-ws__tafel{ display: none; }
.nc-ws__tafel.ist-aktiv{ display: block; animation: nc-einblenden var(--nc-mittel) var(--nc-ease); }
.nc-ws__tafel h3{ margin: 0 0 .5rem; }
.nc-ws__tafel > p{ color: var(--wp--preset--color--nebel); margin: 0 0 1.5rem; max-width: 36rem; }
.nc-ws__spalten{ display: grid; gap: 1.5rem; }
@media (min-width: 640px){ .nc-ws__spalten{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nc-ws__spalten h4{ margin: 0 0 .6rem; padding-bottom: .5rem; border-bottom: 2px solid var(--nc-marke); font-size: var(--wp--preset--font-size--meta); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--marke-tief); }
.nc-ws__spalten ul{ list-style: none; margin: 0; padding: 0; }
.nc-ws__spalten li + li{ margin-top: .15rem; }
.nc-ws__spalten a{ display: block; padding: .5rem .6rem; margin-inline: -.6rem; border-radius: 6px; text-decoration: none; color: var(--nc-navy); font-weight: 600; font-size: var(--wp--preset--font-size--klein); }
.nc-ws__spalten a:hover{ background: var(--wp--preset--color--flaeche); }
.nc-ws__hinweis{ margin-top: 1.5rem; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); }
@keyframes nc-einblenden{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* ---------- Standorte ---------- */
.nc-standorte{ display: grid; gap: 1rem; }
@media (min-width: 800px){ .nc-standorte{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nc-standort{
  position: relative; display: grid; gap: 1rem; align-content: start; padding: 1.75rem; border-radius: var(--nc-radius);
  background: #fff; border: 1px solid var(--nc-linie);
}
.nc-standort--haupt{ border-color: var(--nc-marke); }
/* Die Auszeichnung lag absolut über der Karte und verdeckte lange Ortsnamen
   („Duisburg-Rheinhausen"). Neben dem Namen hat sie in keiner Kartenbreite Platz —
   sie trägt ja nur der Hauptstandort, und genau dessen Name ist der längste.
   Deshalb steht sie als Vorzeile darüber, wie auf der Standort-Detailseite auch. */
.nc-standort__kopf{ display: grid; gap: .4rem; justify-items: start; }
.nc-standort__tag{ white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--marke-tief); background: var(--wp--preset--color--marke-hell); padding: .3rem .6rem; border-radius: 999px; }
.nc-standort__name{ font-size: var(--wp--preset--font-size--zwischentitel); font-weight: 800; letter-spacing: -.02em; margin: 0; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.nc-standort__name a{ text-decoration: none; color: var(--nc-navy); }
.nc-standort__name a:hover{ color: var(--wp--preset--color--marke-tief); }
.nc-standort address{ font-style: normal; line-height: 1.5; }
.nc-standort__zeile{ display: flex; gap: .7rem; align-items: flex-start; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--text); }
.nc-standort__zeile .nc-icon{ color: var(--wp--preset--color--marke-tief); margin-top: .15em; }
.nc-standort__zeile a{ color: inherit; text-decoration: none; }
.nc-standort__zeile a:hover{ color: var(--wp--preset--color--marke-tief); }
.nc-standort__zeiten{ margin: 0; padding: 0; list-style: none; }
.nc-standort__aktionen{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

/* ---------- Arzt ---------- */
.nc-arzt{ display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px){ .nc-arzt{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); } }
.nc-arzt__bild{ position: relative; aspect-ratio: 4 / 5; border-radius: var(--nc-radius); overflow: hidden; background: var(--wp--preset--color--flaeche); display: grid; place-items: center; }
.nc-arzt__bild img{ width: 100%; height: 100%; object-fit: cover; }
.nc-arzt__bild .nc-linie{ width: 70%; height: auto; }
.nc-arzt__name{ font-size: var(--wp--preset--font-size--kapitel); margin: 0 0 .35rem; }
.nc-arzt__beruf{ display: grid; gap: .1rem; margin: 0 0 1.5rem; color: var(--wp--preset--color--nebel); font-weight: 500; }
.nc-arzt__zitat{ font-size: var(--wp--preset--font-size--lead); font-weight: 500; color: var(--nc-navy); border-inline-start: 3px solid var(--nc-marke); padding-inline-start: 1.25rem; margin: 0 0 1.5rem; }

/* ---------- Grundsätze / Karten ---------- */
.nc-karten{ display: grid; gap: 1rem; }
@media (min-width: 640px){ .nc-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .nc-karten--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nc-karte{ display: grid; gap: .6rem; align-content: start; padding: 1.5rem; border-radius: var(--nc-radius); background: #fff; border: 1px solid var(--nc-linie); text-decoration: none; color: inherit; transition: transform var(--nc-mittel) var(--nc-ease), box-shadow var(--nc-mittel) var(--nc-ease); }
a.nc-karte:hover{ transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--karte); }
.nc-karte__zahl{ font-size: var(--wp--preset--font-size--kapitel); font-weight: 800; letter-spacing: -.03em; color: var(--nc-marke); line-height: 1; }
.nc-karte h3{ margin: 0; font-size: var(--wp--preset--font-size--text); font-weight: 700; }
.nc-karte p{ margin: 0; color: var(--wp--preset--color--nebel); font-size: var(--wp--preset--font-size--klein); }
.nc-abschnitt--nacht .nc-karte{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.nc-abschnitt--nacht .nc-karte p{ color: #B9C3D1; }

/* ---------- Warnzeichen ---------- */
.nc-notfall{
  display: grid; gap: .75rem; padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-radius: var(--nc-radius);
  background: var(--wp--preset--color--notfall-flaeche); border-inline-start: 4px solid var(--wp--preset--color--notfall); color: #4A2A26;
}
.nc-notfall__titel{ display: flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--wp--preset--font-size--text); font-weight: 800; color: var(--wp--preset--color--notfall); }
.nc-notfall ul{ margin: 0; padding-inline-start: 1.2rem; }
.nc-notfall p{ margin: 0; }
.nc-notfall a{ color: var(--wp--preset--color--notfall); font-weight: 700; }

/* ---------- Terminband ---------- */
.nc-termin{ display: grid; gap: 1.5rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: calc(var(--nc-radius) + 6px); background: var(--nc-navy); color: #D6DEE8; position: relative; overflow: hidden; }
.nc-termin h2{ color: #fff; margin: 0 0 .5rem; max-width: 18ch; }
.nc-termin p{ margin: 0; max-width: 36rem; color: #B9C3D1; }
.nc-termin__profil{ position: absolute; inset-inline-end: -6%; top: -10%; height: 130%; opacity: .25; pointer-events: none; }
.nc-termin > *{ position: relative; }
@media (min-width: 900px){ .nc-termin{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- Brotkrumen ---------- */
.nc-brotkrumen ol{ display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); }
.nc-brotkrumen li + li::before{ content: "/"; margin-inline-end: .35rem; color: var(--nc-linie); }
.nc-brotkrumen a{ color: inherit; text-decoration: none; }
.nc-brotkrumen a:hover{ color: var(--wp--preset--color--marke-tief); }
.nc-brotkrumen [aria-current]{ color: var(--nc-navy); font-weight: 600; }

/* ---------- Artikel (Erkrankung, Behandlung, Beschwerde, Frage, Seite) ---------- */
.nc-artikel__kopf{ padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.nc-artikel__kopf h1{ max-width: 20ch; margin: 0 0 1rem; }
.nc-artikel__kurz{ font-size: var(--wp--preset--font-size--lead); color: var(--wp--preset--color--text); max-width: 40rem; margin: 0; font-weight: 500; }
.nc-artikel__synonyme{ margin: 1rem 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--nebel); }
.nc-artikel__meta{ display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); }
.nc-artikel__raster{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-bottom: var(--wp--preset--spacing--9); }
.nc-artikel__raster > *{ min-width: 0; }
@media (max-width: 379px){ .nc-knopf{ white-space: normal; text-align: center; } }
@media (min-width: 1100px){ .nc-artikel__raster{ grid-template-columns: minmax(0, var(--nc-lese)) 300px; justify-content: space-between; } }
.nc-seitenleiste{ display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 1100px){ .nc-seitenleiste{ position: sticky; top: calc(var(--nc-kopf) + 1.5rem); } }
.nc-inhaltsverzeichnis{ padding: 1.25rem 1.5rem; border-radius: var(--nc-radius); background: var(--wp--preset--color--flaeche); }
.nc-inhaltsverzeichnis h2{ font-size: var(--wp--preset--font-size--meta); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--nebel); margin: 0 0 .75rem; font-weight: 700; }
.nc-inhaltsverzeichnis ol{ margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.nc-inhaltsverzeichnis a{ display: block; padding: .35rem 0; text-decoration: none; color: var(--nc-navy); font-size: var(--wp--preset--font-size--klein); font-weight: 500; border-inline-start: 2px solid transparent; padding-inline-start: .75rem; margin-inline-start: -.75rem; }
.nc-inhaltsverzeichnis a:hover, .nc-inhaltsverzeichnis a.ist-aktiv{ border-color: var(--nc-marke); color: var(--wp--preset--color--marke-tief); }
.nc-terminkarte{ display: grid; gap: .75rem; padding: 1.5rem; border-radius: var(--nc-radius); background: var(--nc-navy); color: #D6DEE8; }
.nc-terminkarte h2{ color: #fff; font-size: var(--wp--preset--font-size--zwischentitel); margin: 0; }
.nc-terminkarte p{ margin: 0; font-size: var(--wp--preset--font-size--klein); color: #B9C3D1; }
.nc-terminkarte .nc-knopf{ justify-self: start; }

.nc-inhalt > *{ margin-block: 0 var(--wp--preset--spacing--5); }
.nc-inhalt > h2{ margin-top: var(--wp--preset--spacing--8); scroll-margin-top: calc(var(--nc-kopf) + 1rem); }
.nc-inhalt > h3{ margin-top: var(--wp--preset--spacing--6); scroll-margin-top: calc(var(--nc-kopf) + 1rem); }
.nc-inhalt > h2:first-child{ margin-top: 0; }
.nc-inhalt ul, .nc-inhalt ol{ padding-inline-start: 1.25rem; }
.nc-inhalt li + li{ margin-top: .4rem; }
.nc-inhalt strong{ color: var(--nc-navy); font-weight: 700; }
.nc-inhalt figure{ margin-block: var(--wp--preset--spacing--6); }
.nc-inhalt img{ border-radius: var(--nc-radius); }
.nc-inhalt table{ width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--klein); }
.nc-inhalt th, .nc-inhalt td{ text-align: start; padding: .7rem .6rem; border-bottom: 1px solid var(--nc-linie); vertical-align: top; }
.nc-inhalt th{ font-weight: 700; color: var(--nc-navy); }
.nc-merksatz{ font-size: var(--wp--preset--font-size--lead); font-weight: 600; color: var(--nc-navy); padding: 1.25rem 1.5rem; border-radius: var(--nc-radius); background: var(--wp--preset--color--marke-hell); border-inline-start: 4px solid var(--nc-marke); }
.nc-schritte{ list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 1rem; }
.nc-schritte li{ position: relative; padding-inline-start: 3.25rem; }
.nc-schritte li::before{ counter-increment: schritt; content: counter(schritt); position: absolute; inset-inline-start: 0; top: -.1rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--nc-navy); color: #fff; font-weight: 800; font-size: var(--wp--preset--font-size--klein); }
.nc-schritte strong{ display: block; color: var(--nc-navy); margin-bottom: .15rem; }
.nc-randnotiz{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--nebel); border-inline-start: 2px solid var(--nc-linie); padding-inline-start: 1rem; }
.nc-quellen{ margin-top: var(--wp--preset--spacing--8); padding-top: var(--wp--preset--spacing--5); border-top: 1px solid var(--nc-linie); }
.nc-quellen h2{ font-size: var(--wp--preset--font-size--meta); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--nebel); font-weight: 700; margin: 0 0 .75rem; }
.nc-quellen ol{ margin: 0; padding-inline-start: 1.25rem; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); display: grid; gap: .4rem; }
.nc-pruefung{ margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: #E8F5EE; color: var(--wp--preset--color--erfolg); font-size: var(--wp--preset--font-size--meta); font-weight: 600; }
.nc-verwandt{ margin-top: var(--wp--preset--spacing--8); }
.nc-verwandt h2{ font-size: var(--wp--preset--font-size--zwischentitel); margin: 0 0 1rem; }
.nc-verwandt ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.nc-verwandt a{ display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border-radius: var(--nc-radius-klein); border: 1px solid var(--nc-linie); text-decoration: none; color: var(--nc-navy); font-weight: 600; transition: border-color var(--nc-kurz) var(--nc-ease), background var(--nc-kurz) var(--nc-ease); }
.nc-verwandt a:hover{ border-color: var(--nc-marke); background: #fff; }
.nc-verwandt small{ display: block; font-weight: 400; color: var(--wp--preset--color--nebel); font-size: var(--wp--preset--font-size--meta); }

/* ---------- Formular (Rückrufwunsch) ---------- */
.nc-formular{ display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--nc-radius); background: #fff; border: 1px solid var(--nc-linie); max-width: 36rem; }
.nc-formular__zeile{ display: grid; gap: .4rem; }
.nc-formular label, .nc-formular legend{ font-weight: 700; font-size: var(--wp--preset--font-size--klein); color: var(--nc-navy); }
.nc-formular input[type="text"], .nc-formular input[type="tel"], .nc-formular select{
  box-sizing: border-box; width: 100%; min-height: 3rem; padding: .7rem .9rem; line-height: 1.4; border: 1.5px solid var(--nc-linie); border-radius: var(--nc-radius-klein); background: #fff;
  font: inherit; color: var(--wp--preset--color--text); transition: border-color var(--nc-kurz) var(--nc-ease), box-shadow var(--nc-kurz) var(--nc-ease);
}
.nc-formular input:focus, .nc-formular select:focus{ outline: none; border-color: var(--wp--preset--color--marke-tief); box-shadow: 0 0 0 3px var(--wp--preset--color--marke-hell); }
.nc-formular [aria-invalid="true"]{ border-color: var(--wp--preset--color--notfall); }
.nc-formular__fehler{ margin: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--notfall); font-weight: 600; }
.nc-formular__hinweis{ padding: .9rem 1.1rem; border-radius: var(--nc-radius-klein); background: var(--wp--preset--color--notfall-flaeche); color: var(--wp--preset--color--notfall); font-weight: 600; }
.nc-formular__hinweis p{ margin: 0; }
.nc-formular__gruppe{ border: 0; padding: 0; margin: 0; }
.nc-formular__gruppe legend{ margin-bottom: .5rem; }
.nc-formular__wahl{ display: flex; align-items: flex-start; gap: .6rem; font-weight: 500 !important; color: var(--wp--preset--color--text) !important; padding: .35rem 0; cursor: pointer; }
.nc-formular__wahl input{ width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--nc-navy); flex: 0 0 auto; }
.nc-formular__zustimmung .nc-formular__wahl{ font-size: var(--wp--preset--font-size--klein); line-height: 1.5; }
.nc-formular__datenschutz{ margin: 0; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); }
.nc-formular__hp{ position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* kein Off-Screen-Versatz: in RTL würde er zu horizontalem Scrollen führen */
.nc-formular__erfolg{ padding: 1.5rem; border-radius: var(--nc-radius); background: #E8F5EE; border: 1px solid #BFE3CF; max-width: 36rem; }
.nc-formular__erfolg-titel{ margin: 0 0 .5rem; font-weight: 800; color: var(--wp--preset--color--erfolg); font-size: var(--wp--preset--font-size--zwischentitel); }
.nc-formular__erfolg p:last-child{ margin: 0; }

/* ---------- Übersichten ---------- */
.nc-liste{ display: grid; gap: 1rem; }
@media (min-width: 640px){ .nc-liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .nc-liste{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nc-listenkarte{ display: grid; gap: .5rem; align-content: start; padding: 1.5rem; border-radius: var(--nc-radius); background: #fff; border: 1px solid var(--nc-linie); text-decoration: none; color: inherit; transition: transform var(--nc-mittel) var(--nc-ease), box-shadow var(--nc-mittel) var(--nc-ease); }
.nc-listenkarte:hover{ transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--karte); }
.nc-listenkarte h2{ margin: 0; font-size: var(--wp--preset--font-size--zwischentitel); }
.nc-listenkarte p{ margin: 0; color: var(--wp--preset--color--nebel); font-size: var(--wp--preset--font-size--klein); }
.nc-listenkarte__region{ font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--marke-tief); }

/* ---------- Fußbereich ---------- */
.nc-fuss{ background: var(--nc-nacht); color: #B9C3D1; padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.nc-fuss a{ color: #fff; text-decoration: none; }
.nc-fuss a:hover{ color: var(--nc-marke); }
.nc-fuss__raster{ display: grid; gap: 2.5rem; }
@media (min-width: 700px){ .nc-fuss__raster{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px){ .nc-fuss__raster{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.nc-fuss h2{ color: #fff; font-size: var(--wp--preset--font-size--meta); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; }
.nc-fuss ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--wp--preset--font-size--klein); }
.nc-fuss__standort{ display: grid; gap: .2rem; font-size: var(--wp--preset--font-size--klein); line-height: 1.5; }
.nc-fuss__standort strong{ color: #fff; font-size: var(--wp--preset--font-size--text); }
.nc-fuss__marke{ display: grid; gap: 1rem; }
.nc-fuss__marke img{ width: 220px; }
.nc-fuss__marke p{ margin: 0; max-width: 28rem; font-size: var(--wp--preset--font-size--klein); }
.nc-fuss__unten{ margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: var(--wp--preset--font-size--meta); }
.nc-fuss__unten ul{ display: flex; flex-wrap: wrap; gap: 1.25rem; }
.nc-fuss__notruf{ color: #fff; }
.nc-fuss__notruf strong{ color: var(--nc-marke); }

/* ---------- Bewegung ---------- */
/* Ohne Skript und bei reduzierter Bewegung ist alles sofort sichtbar. Die Klasse nc-bewegt setzt das Skript. */
@media (prefers-reduced-motion: no-preference){
  /* Versteckt heißt unsichtbar (visibility), nicht nur transparent: so prüfen Hilfstechnik und
     Kontrastprüfer keine Elemente, die gerade nicht da sind. */
  .nc-bewegt .nc-auftritt{ visibility: hidden; transform: translateY(22px); clip-path: inset(0 0 12% 0); }
  .nc-bewegt .nc-auftritt.ist-da{ visibility: visible; transform: none; clip-path: inset(0); transition: transform var(--nc-mittel) var(--nc-ease), clip-path var(--nc-mittel) var(--nc-ease); transition-delay: calc(70ms * var(--i, 0)); }
  .nc-bewegt .nc-auftritt--maske{ clip-path: inset(0 0 100% 0); transform: none; opacity: 1; }
  .nc-bewegt .nc-auftritt--maske.ist-da{ clip-path: inset(0 0 0 0); transition: clip-path var(--nc-lang) var(--nc-ease); }
  .nc-bewegt .nc-linie path{ stroke-dasharray: 4200; stroke-dashoffset: 4200; }
  .nc-bewegt .nc-linie.ist-da path{ stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--nc-ease-inout); }
  .nc-bewegt .nc-linie.ist-da .nc-linie__innen{ transition-delay: .35s; }
  .nc-bewegt .nc-hero__titel .nc-wort{ display: inline-block; opacity: 0; transform: translateY(.35em); }
  .nc-bewegt .nc-hero.ist-da .nc-wort{ opacity: 1; transform: none; transition: opacity var(--nc-mittel) var(--nc-ease), transform var(--nc-mittel) var(--nc-ease); transition-delay: calc(45ms * var(--i, 0) + 200ms); }
}
.nc-wort{ display: inline-block; }

/* ---------- Druck ---------- */
@media print{
  .nc-kopf, .nc-fuss, .nc-menue, .nc-knopf, .nc-terminkarte, .nc-termin, .nc-hero__profil{ display: none !important; }
  .nc-artikel__raster{ display: block; }
  body{ background: #fff; color: #000; }
}

/* Rückruf-Verweis im Terminaufruf */
.nc-termin__rueckruf{ flex-basis: 100%; color: #B9C3D1; font-size: var(--wp--preset--font-size--klein); text-decoration: underline; text-underline-offset: .25em; }
.nc-termin__rueckruf:hover{ color: #fff; }

/* ---------- Patientenwerkzeuge: Terminart-Weiche, Checkliste ---------- */
.nc-weiche{ display: grid; gap: .5rem; margin: 1.5rem 0 2rem; }
.nc-weiche__frage{ margin: 0 0 .25rem; font-weight: 700; color: var(--nc-navy); }
.nc-weiche__fall{ border: 1.5px solid var(--nc-linie); border-radius: var(--nc-radius-klein); background: #fff; }
.nc-weiche__fall summary{ list-style: none; cursor: pointer; padding: .9rem 3rem .9rem 1.1rem; font-weight: 700; color: var(--nc-navy); position: relative; }
.nc-weiche__fall summary::-webkit-details-marker{ display: none; }
/* Ein allein stehender Textlink in der Terminweiche erreichte nur 22 px Höhe und
   stand dem Telefon-Knopf zu nah (WCAG 2.2, 2.5.8: 24 px Zielgröße oder Abstand). */
.nc-weiche__inhalt p > a:only-child{ display: inline-block; padding-block: .35rem; }
.nc-weiche__fall summary::after{ content: ""; position: absolute; inset-inline-end: 1.1rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--nc-marke); border-bottom: 2px solid var(--nc-marke); /* physisch, damit der Winkel auch in RTL nach unten zeigt */ transform: translateY(-70%) rotate(45deg); transition: transform var(--nc-kurz) var(--nc-ease); }
.nc-weiche__fall[open] summary::after{ transform: translateY(-30%) rotate(225deg); }
.nc-weiche__fall[open]{ border-color: var(--nc-marke); }
.nc-weiche__inhalt{ padding: 0 1.1rem 1.1rem; }
.nc-weiche__inhalt p{ margin: 0 0 .75rem; }
.nc-weiche__notfall{ padding: .8rem 1rem; border-radius: var(--nc-radius-klein); background: var(--wp--preset--color--notfall-flaeche); color: var(--wp--preset--color--notfall); font-weight: 600; }
.nc-weiche__standorte{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.nc-weiche__standorte li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .5rem 0; border-top: 1px solid var(--nc-linie); }
.nc-weiche__ort{ font-weight: 600; }
.nc-weiche__wege{ display: flex; flex-wrap: wrap; gap: .5rem; }
[dir="rtl"] .nc-weiche__fall summary{ padding: .9rem 1.1rem .9rem 3rem; }

.nc-checkliste{ list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .35rem; }
.nc-checkliste__punkt{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: .6rem .75rem; border-radius: var(--nc-radius-klein); background: var(--wp--preset--color--flaeche); }
.nc-checkliste__box{ width: 1.35rem; height: 1.35rem; margin: .2rem 0 0; accent-color: var(--nc-navy); }
.nc-checkliste__punkt label{ cursor: pointer; }
.nc-checkliste__punkt:has(.nc-checkliste__box:checked) label{ color: var(--wp--preset--color--nebel); text-decoration: line-through; text-decoration-color: var(--nc-linie); }
.nc-checkliste__aktionen{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.nc-checkliste__hinweis{ font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--nebel); }
html:not(.nc-js) .nc-nur-js{ display: none; }
@media print{
  .nc-weiche, .nc-checkliste__aktionen, .nc-artikel__seitenleiste, .nc-brotkrumen{ display: none !important; }
  .nc-checkliste__punkt{ background: none; border: 1px solid #000; }
}
.nc-ws__leer{ margin: 1rem 0 0; color: var(--wp--preset--color--nebel); font-size: var(--wp--preset--font-size--klein); }

/* ---------- Suche ---------- */
.nc-suche{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; max-width: 34rem; }
.nc-suche input[type="search"]{ flex: 1 1 14rem; box-sizing: border-box; min-height: 3rem; padding: .7rem .9rem; line-height: 1.4; border: 1.5px solid var(--nc-linie); border-radius: var(--nc-radius-klein); background: #fff; font: inherit; color: var(--wp--preset--color--text); }
.nc-suche input[type="search"]:focus{ outline: none; border-color: var(--wp--preset--color--marke-tief); box-shadow: 0 0 0 3px var(--wp--preset--color--marke-hell); }
.nc-blaettern{ margin-top: 2rem; }
.nc-blaettern .nav-links{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nc-blaettern a, .nc-blaettern .current{ display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--nc-radius-klein); border: 1.5px solid var(--nc-linie); text-decoration: none; color: var(--nc-navy); font-weight: 600; }
.nc-blaettern .current{ background: var(--nc-navy); border-color: var(--nc-navy); color: #fff; }
.nc-blaettern a:hover{ border-color: var(--nc-marke); }
.nc-suche--menue{ margin: 0 0 2rem; max-width: 30rem; }
.nc-suche--menue input[type="search"]{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.nc-suche--menue input[type="search"]::placeholder{ color: #B9C3D1; }
.nc-suche--menue input[type="search"]:focus{ border-color: var(--nc-marke); box-shadow: 0 0 0 3px rgba(54,169,224,.35); }

/* ---------- Seitenwechsel: View Transitions ---------- */
/* Beim Navigieren bleiben Kopf und Marke stehen, der Inhalt wird gewechselt statt geschnitten.
   Reine CSS-Lösung des Browsers, keine Bibliothek, kein Skript. Browser ohne Unterstützung
   navigieren wie bisher — es gibt nichts zu reparieren. Bei reduzierter Bewegung abgeschaltet. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }

  ::view-transition-old(root), ::view-transition-new(root){
    animation-duration: 260ms; animation-timing-function: var(--nc-ease);
  }
  /* Der Kopfbereich wechselt nicht mit: Marke, Navigation und Terminknopf bleiben ruhig stehen. */
  .nc-kopf{ view-transition-name: nc-kopf; }
  ::view-transition-group(nc-kopf){ animation-duration: 0s; }

  /* Der Aufmacher einer Artikelseite trägt den Blick weiter: Überschrift wandert mit. */
  .nc-artikel__kopf h1{ view-transition-name: nc-seitentitel; }
}

/* ---------- brainLight: eigener Ruhemoment innerhalb der Praxismarke ----------
   Eine Sub-Art-Direction, keine zweite Website. Grundlage bleibt Navy und Markenblau;
   dazu ein einziger warmer Ton, der aus dem echten Raumfoto stammt (Dünen-Fototapete,
   cremefarbenes Leder). Er kommt nur hier vor und nur an wenigen Stellen. */
.nc-bl{
  --bl-sand: #D9A76C;
  --bl-sand-hell: #F2E3D0;
  --bl-tief: #101736;
}

/* Hero: das Foto IST der Hero. Vorher schwebte es als Kärtchen in einer leeren
   dunklen Fläche, auf 1200 px Container begrenzt, und der Sessel war im Bild
   angeschnitten — die Fototapete wirkte wie das Produkt. Jetzt liegt die
   Panoramaaufnahme vollflächig darunter, ein Schleier trägt die Schrift. */
.nc-bl-hero{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bl-tief); color: #D3DCE9;
  /* Unten bewusst viel Luft: dort liegt auf Mobil der freie Blick auf den Sessel. */
  padding-block: clamp(2.5rem, 7vw, 5rem) 7rem;
  min-height: min(76vh, 40rem);
  display: grid; align-items: center;
}
.nc-bl-hero__buehne{ position: absolute; inset: 0; z-index: 0; }
.nc-bl-hero__panorama{
  width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%;
  display: block;
}
/* Auf Desktop die volle Breite zeigen: der Sessel steht im linken Drittel der
   Aufnahme und soll frei bleiben. Deshalb wandert der Text nach rechts —
   Produkt links, Angebot rechts. Mit Text links lag die Schrift auf dem Sessel,
   und sichtbar blieben Tapete, Lampe und Beistelltisch. */
@media (min-width: 900px){ .nc-bl-hero__panorama{ object-position: 50% 50%; } }
/* Der Schleier ist senkrecht auf Mobil (Schrift oben, Sessel bleibt unten sichtbar)
   und waagerecht auf Desktop (Schrift links, Raum bleibt rechts sichtbar). */
.nc-bl-hero__schleier{
  position: absolute; inset: 0; display: block;
  /* Oben deckend genug für die Schrift, unten so klar, dass der Sessel wirklich
     zu sehen ist — nicht nur zu ahnen. */
  background: linear-gradient(180deg, rgba(16,23,54,.95) 0%, rgba(16,23,54,.92) 52%, rgba(16,23,54,.62) 78%, rgba(16,23,54,.12) 100%);
}
@media (min-width: 900px){
  .nc-bl-hero__schleier{
    background:
      linear-gradient(270deg, rgba(16,23,54,.95) 0%, rgba(16,23,54,.88) 34%, rgba(16,23,54,.52) 60%, rgba(16,23,54,.30) 100%),
      radial-gradient(48% 58% at 22% 28%, rgba(217,167,108,.20), transparent 68%);
  }
}
.nc-bl-hero__inner{ position: relative; z-index: 1; }
/* Der Sessel steht links im Bild und soll in beiden Leserichtungen frei bleiben.
   Im Deutschen heißt das: Text nach rechts, also entgegen der Leserichtung (end).
   Im Arabischen beginnt der Text ohnehin rechts — dort ist start die natürliche
   und zugleich richtige Position. Der Verlauf bleibt in beiden Fällen derselbe.
   (Erster Versuch: Verlauf für RTL spiegeln. Das verdunkelte genau den Sessel.) */
@media (min-width: 900px){
  [dir="rtl"] .nc-bl-hero__inner{ justify-items: start; }
}

@media (min-width: 900px){
  .nc-bl-hero{ padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 7vw, 4.5rem); }
  .nc-bl-hero__inner{ display: grid; justify-items: end; }
  .nc-bl-hero__inner > *{ max-width: 32rem; width: 100%; }
  .nc-bl-hero h1, .nc-bl-hero__kurz{ max-width: none; }
}

/* Auf der dunklen Fläche lag die Brotkrume bei 1,37:1 und war praktisch unlesbar.
   Zwei Regeln mussten überschrieben werden: .nc-brotkrumen ol setzt die Farbe direkt
   am Element (Vererbung greift dort nicht), und [aria-current] färbt die aktuelle
   Seite in Navy — auf einer Navy-Fläche. */
.nc-bl-hero .nc-brotkrumen ol{ color: #B9C5D8; margin-bottom: 1rem; }
.nc-bl-hero .nc-brotkrumen li + li::before{ color: #6B7A97; }
.nc-bl-hero .nc-brotkrumen a{ color: #B9C5D8; }
.nc-bl-hero .nc-brotkrumen a:hover{ color: #fff; }
.nc-bl-hero .nc-brotkrumen [aria-current]{ color: #EAF0F8; }

.nc-bl-hero .nc-vorzeile{ color: #E8B97E; }
.nc-bl-hero .nc-vorzeile::before{ background: #E8B97E; }
.nc-bl-hero h1{
  color: #fff; margin: 0 0 .75rem; max-width: 12ch;
  font-size: var(--wp--preset--font-size--display); line-height: .96; letter-spacing: -.035em;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.nc-bl-hero__kurz{
  font-size: var(--wp--preset--font-size--lead); color: #D3DCE9; max-width: 30rem; margin: 0 0 1.75rem;
  text-shadow: 0 1px 20px rgba(0,0,0,.35);
}
.nc-bl-hero__hinweis{ margin: 1.25rem 0 0; font-size: var(--wp--preset--font-size--klein); color: #C4CFDF; max-width: 32rem; }

/* Das Angebot: die beiden Preise SIND die Schaltflächen. Ein Klick, ein Termin —
   vorher standen Preis und Knopf getrennt untereinander und kosteten zwei Zeilen
   Aufmerksamkeit für dieselbe Information. */
.nc-bl-angebot{ display: grid; gap: .6rem; }
.nc-bl-angebot__marke{
  margin: 0; justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #F0DCC2; background: rgba(232,185,126,.16); border: 1px solid rgba(232,185,126,.38);
  padding: .3rem .7rem; border-radius: 999px;
}
.nc-bl-preise{ display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.nc-bl-preise{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px){ .nc-bl-preise{ gap: .75rem; } }
.nc-bl-preis{
  display: grid; gap: .1rem; text-decoration: none; position: relative;
  padding: 1rem 1.15rem; border-radius: var(--nc-radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); color: #fff;
  transition: background var(--nc-kurz) var(--nc-ease), border-color var(--nc-kurz) var(--nc-ease), transform var(--nc-kurz) var(--nc-ease);
}
.nc-bl-preise li:first-child .nc-bl-preis{ background: var(--nc-marke); border-color: var(--nc-marke); color: #06203A; }
.nc-bl-preis:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: #fff; }
.nc-bl-preise li:first-child .nc-bl-preis:hover{ background: #56BCEC; border-color: #56BCEC; }
.nc-bl-preis__dauer{ font-size: var(--wp--preset--font-size--klein); font-weight: 600; opacity: .85; }
.nc-bl-preis__zahl{
  font-size: clamp(2.25rem, 7vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.nc-bl-preis__cta{ display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: var(--wp--preset--font-size--klein); font-weight: 700; }
.nc-bl-preis__pfeil{ transition: transform var(--nc-kurz) var(--nc-ease); }
.nc-bl-preis:hover .nc-bl-preis__pfeil{ transform: translateX(3px); }
[dir="rtl"] .nc-bl-preis__pfeil{ display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .nc-bl-preis:hover .nc-bl-preis__pfeil{ transform: scaleX(-1) translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .nc-bl-preis, .nc-bl-preis:hover, .nc-bl-preis__pfeil{ transition: none; transform: none; }
}

/* Motion: genau zwei Bewegungen, beide einmalig beim Laden.
   Das Bild kommt minimal aus der Tiefe und kommt zur Ruhe — wie ein Atemzug,
   nicht wie ein Effekt. Die beiden Preiskacheln folgen versetzt.
   Kein Fade-up auf jedem Element: das ist der Unterschied zwischen
   Inszenierung und Animations-Tapete. */
@media (prefers-reduced-motion: no-preference){
  .nc-bl-hero__panorama{
    animation: nc-bl-ruhe 2600ms var(--nc-ease) both;
    will-change: transform;
  }
  .nc-bl-preise li{
    animation: nc-bl-auf 700ms var(--nc-ease) both;
    animation-delay: calc(360ms + var(--i, 0) * 110ms);
  }
  .nc-bl-preise li:nth-child(2){ --i: 1; }
}
@keyframes nc-bl-ruhe{
  from{ transform: scale(1.055); }
  to{ transform: scale(1); }
}
@keyframes nc-bl-auf{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

/* Buchungskarten: das Herz der Seite. Große Zahl, ein Satz, ein Knopf. */
.nc-bl-karten{ display: grid; gap: 1rem; }
@media (min-width: 720px){ .nc-bl-karten{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.nc-bl-karte{
  display: grid; gap: .5rem; align-content: start;
  padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: calc(var(--nc-radius) + 4px);
  background: #fff; border: 1px solid var(--nc-linie);
  transition: border-color var(--nc-mittel) var(--nc-ease), box-shadow var(--nc-mittel) var(--nc-ease), transform var(--nc-mittel) var(--nc-ease);
}
.nc-bl-karte:hover{ border-color: var(--nc-marke); box-shadow: var(--wp--preset--shadow--karte); transform: translateY(-3px); }
.nc-bl-karte--lang{ border-color: var(--bl-sand); background: linear-gradient(180deg, #FDF8F2, #fff 60%); }
.nc-bl-karte__marke{
  margin: 0; justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--marke-tief); background: var(--wp--preset--color--marke-hell);
  padding: .3rem .6rem; border-radius: 999px;
}
.nc-bl-karte--lang .nc-bl-karte__marke{ color: #7A4E18; background: var(--bl-sand-hell); }
.nc-bl-karte__dauer{ margin: .5rem 0 0; font-size: var(--wp--preset--font-size--lead); font-weight: 700; color: var(--nc-navy); }
.nc-bl-karte__preis{
  margin: 0; color: var(--nc-navy); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.5rem, 8vw, 3.5rem); font-variant-numeric: tabular-nums;
}
.nc-bl-karte__preis span{ font-size: 1em; }
.nc-bl-karte__text{ margin: .5rem 0 1.25rem; color: var(--wp--preset--color--text); }
.nc-bl-karte .nc-knopf{ justify-self: start; }
.nc-bl-fussnote{ margin: 1.5rem 0 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--nebel); }

/* Ablauf und Ausstattung */
.nc-bl-schritte{ max-width: 46rem; }
.nc-bl-raum__raster{ display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px){ .nc-bl-raum__raster{ grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.nc-bl-raum__foto{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nc-radius); }
.nc-bl-merkmale{ display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
@media (min-width: 560px){ .nc-bl-merkmale{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } }
.nc-bl-merkmale li{ display: flex; gap: .75rem; align-items: flex-start; }
.nc-bl-merkmale .nc-icon{ color: var(--wp--preset--color--marke-tief); flex: 0 0 auto; margin-top: .1em; }
.nc-bl-merkmale span{ display: grid; gap: .15rem; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--nebel); }
.nc-bl-merkmale strong{ color: var(--nc-navy); font-size: 1rem; }

/* Anwendungshinweise: sachlich, auffindbar, aber nicht bedrohlich. */
.nc-bl-hinweise{ padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--nc-radius); background: var(--wp--preset--color--flaeche); border: 1px solid var(--nc-linie); }
.nc-bl-hinweise h2{ display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--zwischentitel); }
.nc-bl-hinweise h2 .nc-icon{ color: var(--wp--preset--color--marke-tief); flex: 0 0 auto; }
.nc-bl-hinweise__raster{ display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 640px){ .nc-bl-hinweise__raster{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
.nc-bl-hinweise h3{ margin: 0 0 .35rem; font-size: 1rem; color: var(--nc-navy); }
.nc-bl-hinweise p{ margin: 0; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--text); }
.nc-bl-hinweise__quelle{ margin-top: 1.5rem !important; color: var(--wp--preset--color--nebel) !important; }

/* FAQ */
.nc-bl-faq{ display: grid; gap: .5rem; }
.nc-bl-frage{ border: 1px solid var(--nc-linie); border-radius: var(--nc-radius); background: #fff; overflow: hidden; }
.nc-bl-frage summary{
  cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.25rem; position: relative;
  font-weight: 700; color: var(--nc-navy);
}
.nc-bl-frage summary::-webkit-details-marker{ display: none; }
.nc-bl-frage summary::after{
  content: ""; position: absolute; inset-inline-end: 1.25rem; top: 50%; width: .55rem; height: .55rem;
  border-right: 2px solid var(--nc-marke); border-bottom: 2px solid var(--nc-marke);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--nc-kurz) var(--nc-ease);
}
.nc-bl-frage[open] summary::after{ transform: translateY(-30%) rotate(-135deg); }
.nc-bl-frage__antwort{ padding: 0 1.25rem 1.25rem; }
.nc-bl-frage__antwort p{ margin: 0; color: var(--wp--preset--color--text); }

/* Abschluss: derselbe Lichtmoment wie im Hero, damit die Seite sich schließt. */
.nc-bl-schluss{ position: relative; overflow: hidden; isolation: isolate; background: var(--bl-tief); color: #C8D2E0; }
.nc-bl-schluss__licht{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, rgba(217,167,108,.26), transparent 65%);
}
.nc-bl-schluss__inner{ position: relative; z-index: 1; text-align: center; }
.nc-bl-schluss .nc-vorzeile{ color: var(--bl-sand); justify-content: center; }
.nc-bl-schluss .nc-vorzeile::before{ background: var(--bl-sand); }
.nc-bl-schluss h2{ color: #fff; margin: 0 0 .75rem; }
.nc-bl-schluss__text{ color: #C8D2E0; margin: 0 auto 2rem; max-width: 34rem; }
.nc-bl-schluss__wahl{ display: grid; gap: 1rem; justify-content: center; }
@media (min-width: 560px){ .nc-bl-schluss__wahl{ grid-auto-flow: column; gap: 1.5rem; } }
.nc-bl-schluss__option{ display: grid; gap: .6rem; justify-items: center; }
.nc-bl-schluss__preis{ margin: 0; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.nc-bl-schluss__hilfe{ margin: 2rem 0 0; font-size: var(--wp--preset--font-size--klein); color: #93A0B8; }
.nc-bl-schluss__hilfe a{ color: #fff; }

/* Mobile Buchungsleiste: beide Wege direkt, ohne Zwischenschritt. */
.nc-bl-leiste{ display: none; }
@media (max-width: 719px){
  /* Erst sichtbar, wenn der Hero aus dem Bild ist (Klasse kommt aus theme.js). */
  .nc-bl-leiste.ist-da{
    display: grid; grid-auto-flow: column; gap: .5rem;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bl-tief) 92%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.12);
  }
  .nc-bl-leiste__knopf{
    display: grid; gap: .1rem; justify-items: center; padding: .6rem .5rem; border-radius: 999px;
    text-decoration: none; background: var(--nc-marke); color: #08203A; font-weight: 800; min-height: 2.75rem;
  }
  .nc-bl-leiste__knopf:last-child{ background: #fff; color: var(--nc-navy); }
  .nc-bl-leiste__dauer{ font-size: var(--wp--preset--font-size--meta); font-weight: 700; }
  .nc-bl-leiste__preis{ font-size: 1rem; font-variant-numeric: tabular-nums; }
  /* Platz, damit die Leiste nichts verdeckt. */
  .nc-bl{ padding-bottom: 4.75rem; }
}

@media (prefers-reduced-motion: reduce){
  .nc-bl-karte, .nc-bl-karte:hover{ transition: none; transform: none; }
}

/* Kompakter brainLight-Hinweis auf Startseite und Standortseite Duisburg.
   Bewusst eine Zeile, keine zweite Heldensektion: die Kernleistung bleibt die Neurochirurgie. */
.nc-bl-hinweis{
  display: grid; gap: 1rem; align-items: center; text-decoration: none; color: inherit;
  padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.25rem, 3.5vw, 2rem);
  border-radius: var(--nc-radius); border: 1px solid var(--nc-linie);
  background: linear-gradient(110deg, #FDF8F2, var(--wp--preset--color--papier) 62%);
  transition: border-color var(--nc-mittel) var(--nc-ease), box-shadow var(--nc-mittel) var(--nc-ease), transform var(--nc-mittel) var(--nc-ease);
}
@media (min-width: 760px){ .nc-bl-hinweis{ grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 1.75rem; } }
/* Kleines Produktbild: macht das Angebot greifbar, ohne die Standortseite zu übernehmen. */
.nc-bl-hinweis__bild{ display: none; }
@media (min-width: 760px){
  .nc-bl-hinweis__bild{ display: block; width: 5.5rem; height: 5.5rem; border-radius: var(--nc-radius-klein); overflow: hidden; flex: 0 0 auto; }
  .nc-bl-hinweis__bild img{ width: 100%; height: 100%; object-fit: cover; object-position: 18% 55%; display: block; }
}
.nc-bl-hinweis:hover{ border-color: #D9A76C; box-shadow: var(--wp--preset--shadow--karte); transform: translateY(-2px); }
.nc-bl-hinweis__text{ display: grid; gap: .3rem; min-width: 0; }
.nc-bl-hinweis .nc-vorzeile{ color: #8A5A20; margin: 0; }
.nc-bl-hinweis .nc-vorzeile::before{ background: #D9A76C; }
.nc-bl-hinweis__titel{ font-size: var(--wp--preset--font-size--zwischentitel); font-weight: 800; color: var(--nc-navy); letter-spacing: -.02em; }
.nc-bl-hinweis__kurz{ font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--nebel); max-width: 44ch; }
.nc-bl-hinweis__preise{ display: flex; gap: .5rem; flex-wrap: wrap; }
.nc-bl-hinweis__preise span{
  font-size: var(--wp--preset--font-size--klein); font-weight: 700; color: var(--nc-navy);
  background: #fff; border: 1px solid var(--nc-linie); border-radius: 999px; padding: .35rem .75rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nc-bl-hinweis__pfeil{
  justify-self: start; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--nc-navy); color: #fff; transition: background var(--nc-kurz) var(--nc-ease);
}
[dir="rtl"] .nc-bl-hinweis__pfeil .nc-icon{ transform: scaleX(-1); }
.nc-bl-hinweis:hover .nc-bl-hinweis__pfeil{ background: #8A5A20; }
@media (prefers-reduced-motion: reduce){ .nc-bl-hinweis, .nc-bl-hinweis:hover{ transition: none; transform: none; } }