/* ==========================================================================
   main.css — alle sichtbaren Bausteine der Website

   Aufbau dieser Datei:
    1. Layout-Grundgeruest        8. Evidence-Bewertung
    2. Typografie-Bausteine       9. Behandlungs-Datenblatt
    3. Schaltflaechen            10. Guides / E-Books
    4. Kopfbereich + Menue       11. Ueber den Arzt
    5. Hero                      12. Newsletter + Social
    6. Kategorien                13. Fussbereich
    7. Artikelkarten             14. Artikeltext, Formulare, Cookie-Leiste
   ========================================================================== */


/* ==========================================================================
   1. Layout-Grundgeruest
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--w-wide); }
.container--mid    { max-width: var(--w-mid); }
.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--alt   { background: var(--c-alt); }
.section--sand  { background: var(--c-sand); }
.section--dark  { background: var(--c-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-on-dark); }
.section--dark .eyebrow { color: var(--c-on-dark-m); }

/* Kopfzeile eines Abschnitts: Haarlinie, Nummer, Titel, optional ein Link */
.sechead {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  margin-bottom: var(--s-8);
}
.section--dark .sechead { border-color: var(--c-dark-line); }

@media (min-width: 800px) {
  .sechead {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-6);
  }
  .sechead__link { justify-self: end; }
}

.sechead__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  max-width: 22ch;
}
.sechead__intro {
  margin-top: var(--s-3);
  max-width: 56ch;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.section--dark .sechead__intro { color: var(--c-on-dark-m); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   2. Typografie-Bausteine
   ========================================================================== */

.eyebrow {
  display: block;
  margin: 0 0 var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.eyebrow--accent { color: var(--c-accent); }

.display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}

.h-page {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  max-width: 20ch;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--c-ink-soft);
  max-width: 60ch;
}
.section--dark .lead { color: var(--c-on-dark); }

.muted { color: var(--c-muted); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }

/* Textlink mit dezent mitwachsendem Unterstrich */
.link {
  position: relative;
  color: var(--c-ink);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-f) var(--ease), color var(--dur-f) var(--ease);
}
.link:hover { background-size: 0% 1px; color: var(--c-accent); }

.link--arrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  background: none;
  padding: 0;
}
.link--arrow::after {
  content: '';
  width: 1.6em; height: 1px;
  background: currentColor;
  transition: width var(--dur-f) var(--ease);
}
.link--arrow:hover::after { width: 2.4em; }
.section--dark .link--arrow { color: var(--c-on-dark); }

.dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  margin-inline: .65em;
  vertical-align: middle;
}

.badge {
  display: inline-block;
  padding: .18em .6em;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-muted);
}
.badge--premium { border-color: var(--c-accent); color: var(--c-accent); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Springt beim Tabben auf — Pflichtelement fuer Barrierefreiheit */
.skiplink {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  transition: top var(--dur-f) var(--ease);
}
.skiplink:focus { top: var(--s-4); }


/* ==========================================================================
   3. Schaltflaechen
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .95em 1.9em;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-f) var(--ease),
              color var(--dur-f) var(--ease),
              border-color var(--dur-f) var(--ease),
              transform var(--dur-f) var(--ease);
}
.btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.btn:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }

.btn--light { background: var(--c-on-dark); border-color: var(--c-on-dark); color: var(--c-dark); }
.btn--light:hover { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark); }

.btn--onDarkGhost { background: transparent; color: var(--c-on-dark); border-color: rgba(242,239,233,.4); }
.btn--onDarkGhost:hover { background: var(--c-on-dark); color: var(--c-dark); border-color: var(--c-on-dark); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}


/* ==========================================================================
   4. Kopfbereich: schmale Leiste + Hauptnavigation
   ========================================================================== */

.utilbar {
  background: var(--c-alt);
  border-bottom: 1px solid var(--c-line-soft);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.utilbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 38px;
}
.utilbar__claim {
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .68rem;
}
.utilbar__right {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
}
.utilbar__nav { display: none; }
@media (min-width: 720px) { .utilbar__nav { display: flex; gap: var(--s-5); } }

.utilbar__link {
  letter-spacing: .05em;
  transition: color var(--dur-f) var(--ease);
}
.utilbar__link:hover, .utilbar__link[aria-current] { color: var(--c-ink); }

/* Sprachumschalter — oben rechts, immer sichtbar */
.langsw {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  overflow: hidden;
}
.langsw__link {
  position: relative;
  padding: .34em .68em;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-muted);
  border-right: 1px solid var(--c-line);
  transition: background var(--dur-f) var(--ease), color var(--dur-f) var(--ease);
}
/* Trefferflaeche fuer den Daumen auf 44 px Hoehe bringen, ohne dass der
   Knopf optisch groesser wird. Bewusst nur nach oben und unten — seitlich
   wuerden sich die drei Sprachen ueberlappen und man traefe die falsche. */
.langsw__link::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -9px; bottom: -9px;
}
.langsw__link:last-child { border-right: 0; }
.langsw__link:hover { background: var(--c-sand); color: var(--c-ink); }
.langsw__link.is-active { background: var(--c-ink); color: var(--c-bg); }

/* --------------------------------------------------------------------------
   Umschalter Hell/Dunkel

   Zeigt immer das ZIEL, nicht den Zustand: Im hellen Modus steht der Mond
   (klicken macht dunkel), im dunklen die Sonne. Das ist die gelaeufigere
   Lesart und erspart eine Beschriftung.
   -------------------------------------------------------------------------- */
.themesw {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-muted);
  transition: background var(--dur-f) var(--ease), color var(--dur-f) var(--ease),
              border-color var(--dur-f) var(--ease);
}
/* Trefferflaeche auf 44 px, Optik bleibt bei 28 px */
.themesw::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.themesw:hover { background: var(--c-sand); color: var(--c-ink); border-color: var(--c-muted); }
.themesw svg { width: 14px; height: 14px; fill: currentColor; }

/* Standard: Mond sichtbar (heller Modus) */
.themesw__sun { display: none; }

/* Dunkler Modus per Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themesw__moon { display: none; }
  :root:not([data-theme="light"]) .themesw__sun  { display: block; }
}
/* Dunkler Modus ausdruecklich gewaehlt */
:root[data-theme="dark"] .themesw__moon { display: none; }
:root[data-theme="dark"] .themesw__sun  { display: block; }
/* Hell ausdruecklich gewaehlt gewinnt auch bei dunklem System */
:root[data-theme="light"] .themesw__moon { display: block; }
:root[data-theme="light"] .themesw__sun  { display: none; }

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--c-header-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-f) var(--ease), box-shadow var(--dur-f) var(--ease);
}
@supports (backdrop-filter: blur(12px)) {
  .header { backdrop-filter: blur(12px) saturate(1.4); }
}
.header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: var(--shadow-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 74px;
}

/* --------------------------------------------------------------------------
   Wortmarke — rein typografisch, damit ein Namenswechsel kein Redesign ist

       ZADA        Serifenschrift, gross, weit gesperrt
       AESTHETIC   serifenlos, klein, noch weiter gesperrt

   Die Sperrungen sind so abgestimmt, dass beide Zeilen etwa gleich breit
   laufen. Das haelt die Marke ruhig — und funktioniert auch bei anderen
   Namen aehnlicher Laenge, ohne dass etwas nachjustiert werden muss.
   -------------------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: .34em;
  color: var(--c-ink);
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

.wordmark__name {
  font-family: var(--ff-display);
  font-size: 1.44rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  /* Die Sperrung haengt hinter dem letzten Buchstaben — hier ausgeglichen,
     damit die Marke optisch buendig links steht. */
  padding-right: .32em;
}

.wordmark__sub {
  font-family: var(--ff-body);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .49em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding-right: .49em;
}
.wordmark__sub:empty { display: none; }

/* Auf sehr schmalen Geraeten etwas kompakter */
@media (max-width: 380px) {
  .wordmark__name { font-size: 1.24rem; letter-spacing: .26em; padding-right: .26em; }
  .wordmark__sub  { font-size: .5rem; letter-spacing: .42em; padding-right: .42em; }
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 1.9rem); }
.nav__link {
  position: relative;
  font-size: .845rem;
  letter-spacing: .035em;
  color: var(--c-ink-soft);
  padding-block: .4em;
  white-space: nowrap;
  transition: color var(--dur-f) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-ink);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--c-ink); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* Menue-Knopf fuer Smartphone und Tablet */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  margin-right: -10px;
  padding: 0 10px;
}
.burger__bar {
  display: block;
  width: 26px; height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--dur-f) var(--ease), opacity var(--dur-f) var(--ease);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Vollbild-Menue */
.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--c-bg);
  padding: 96px var(--gutter) var(--s-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mobilenav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobilenav__list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.mobilenav__list .nav__item,
.mobilenav__list .utilbar__item { border-bottom: 1px solid var(--c-line); }
.mobilenav__list a:not(.wordmark) {
  display: block;
  padding: var(--s-4) 0;
  font-family: var(--ff-display);
  font-size: 1.55rem;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.mobilenav__list a::after { display: none; }
.mobilenav__foot {
  margin-top: var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
body.nav-open { overflow: hidden; }


/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; }
}

.hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
/* Die drei Worte einzeln, damit sie gestaffelt einblenden koennen */
.hero__word {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn 900ms var(--ease) forwards;
}
.hero__word:nth-child(1) { animation-delay: 60ms; }
.hero__word:nth-child(2) { animation-delay: 200ms; }
.hero__word:nth-child(3) { animation-delay: 340ms; font-style: italic; color: var(--c-accent); }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__word { opacity: 1; transform: none; animation: none; }
}

.hero__lead {
  margin-top: var(--s-6);
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-sand);
  border-radius: var(--r);
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Dekorative Grafiken

   Sie stehen direkt in der Seite (nicht als <img>), damit sie die Farben des
   Designs lesen und beim Wechsel zwischen hell und dunkel mitgehen. Der
   Zuschnitt uebernimmt preserveAspectRatio="slice" in der Grafik selbst —
   das entspricht object-fit: cover.
   -------------------------------------------------------------------------- */
svg.art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Laufband unter dem Hero mit den Leitbegriffen */
.hero__strip {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-alt);
}
.hero__stripInner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  justify-content: center;
  padding-block: var(--s-4);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}


/* ==========================================================================
   6. Kategorien
   ========================================================================== */

.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.cat:hover {
  border-color: var(--c-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.cat__media {
  aspect-ratio: 16 / 11;
  background: var(--c-sand);
  overflow: hidden;
}
.cat__media img,
.cat__media svg.art {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.cat:hover .cat__media img,
.cat:hover .cat__media svg.art { transform: scale(1.035); }

.cat__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.cat__num {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.cat__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--s-2);
}
.cat__title a::after {
  content: '';
  position: absolute;
  inset: 0;               /* macht die ganze Karte klickbar */
}
.cat__text { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-4); }
.cat__more { margin-top: auto; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }


/* ==========================================================================
   7. Artikelkarten
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--c-sand);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.card__media img,
.card__media svg.art {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.card:hover .card__media img,
.card:hover .card__media svg.art { transform: scale(1.035); }

.card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.card__cat {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}
.card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin-bottom: var(--s-3);
}
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__title a:hover { color: var(--c-accent); }
.card__excerpt {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.card__meta {
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .03em;
}

/* Hervorgehobene erste Karte in einer Liste */
.card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .card--wide {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
  }
  .card--wide .card__media { aspect-ratio: 16 / 10; margin-bottom: 0; }
  .card--wide .card__title { font-size: clamp(1.7rem, 2.9vw, 2.4rem); }
  .card--wide .card__excerpt { font-size: var(--fs-body); }
}

.empty {
  padding: var(--s-7);
  border: 1px dashed var(--c-line);
  border-radius: var(--r);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}


/* ==========================================================================
   8. Evidence-Bewertung — das Erkennungsmerkmal der Plattform
   ========================================================================== */

.verdict {
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: var(--c-bg);
  overflow: hidden;
}
.verdict__head {
  padding: var(--s-5) var(--s-6);
  background: var(--c-alt);
  border-bottom: 1px solid var(--c-line);
}
.verdict__claim {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-style: italic;
}
.verdict__body { display: grid; }
@media (min-width: 780px) { .verdict__body { grid-template-columns: repeat(2, 1fr); } }

.verdict__block {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-line-soft);
}
@media (min-width: 780px) {
  .verdict__block:nth-child(odd) { border-right: 1px solid var(--c-line-soft); }
}
.verdict__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.verdict__block p, .verdict__block li { font-size: var(--fs-sm); }
.verdict__block ul { display: grid; gap: var(--s-2); }
.verdict__block li { padding-left: 1.1em; position: relative; }
.verdict__block li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--c-accent);
}

.verdict__foot {
  padding: var(--s-6);
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.verdict__foot .verdict__label { color: var(--c-on-dark-m); }
.verdict__result {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  color: var(--c-on-dark);
  margin-bottom: var(--s-4);
}

/* --------------------------------------------------------------------------
   Vierstufige Evidenzanzeige

   Im HTML genuegt eine einzige Zeile:
     <p class="ev ev--strong">Evidenzlage: Stark</p>

   Stufen: ev--strong | ev--moderate | ev--limited | ev--insufficient
   Auf dunklem Grund zusaetzlich:  ev--on-dark
   -------------------------------------------------------------------------- */
.ev {
  --ev-c: var(--c-line);
  --ev-w: 0%;
  --ev-track: var(--c-line);
  display: block;
  margin: var(--s-3) 0 0;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ev::before {
  content: '';
  display: block;
  height: 4px;
  margin-bottom: .7em;
  /* obere Ebene: gefuellter Anteil, darunter die neutrale Spur */
  background-image:
    linear-gradient(90deg, var(--ev-c) 0 var(--ev-w), transparent var(--ev-w) 100%),
    linear-gradient(90deg, var(--ev-track) 0 100%);
  /* die Maske zerlegt den Balken in vier Segmente mit Luecken */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%);
}
.ev--strong       { --ev-c: var(--c-ev-strong); --ev-w: 100%; }
.ev--moderate     { --ev-c: var(--c-ev-mod);    --ev-w: 75%; }
.ev--limited      { --ev-c: var(--c-ev-lim);    --ev-w: 50%; }
.ev--insufficient { --ev-c: var(--c-ev-none);   --ev-w: 25%; }

.ev--on-dark { --ev-track: var(--c-dark-line); color: var(--c-on-dark-m); }
.section--dark .ev { --ev-track: var(--c-dark-line); color: var(--c-on-dark-m); }


/* ==========================================================================
   9. Behandlungs-Datenblatt (Injectables / Procedures)
   ========================================================================== */

.spec {
  border-top: 1px solid var(--c-ink);
}
.spec__row {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 760px) {
  .spec__row { grid-template-columns: 15.5rem 1fr; gap: var(--s-6); }
}
.spec__key {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  padding-top: .25em;
}
.spec__val { font-size: var(--fs-sm); }
.spec__val ul { display: grid; gap: var(--s-2); }
.spec__val li { position: relative; padding-left: 1.1em; }
.spec__val li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--c-accent);
}

/* Kurzuebersicht einer Behandlung als anklickbare Zeile */
.treat {
  display: grid;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  transition: background var(--dur-f) var(--ease);
}
.treat:hover { background: var(--c-alt); }
@media (min-width: 860px) {
  .treat { grid-template-columns: 1fr 1.35fr auto; align-items: center; gap: var(--s-6); }
}
.treat__name { font-family: var(--ff-display); font-size: var(--fs-h3); }
.treat__desc { font-size: var(--fs-sm); color: var(--c-muted); }
.treat__ev { min-width: 9rem; }


/* ==========================================================================
   10. Guides / E-Books
   ========================================================================== */

.guide {
  display: grid;
  gap: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: var(--s-5);
  background: var(--c-bg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.guide:hover { border-color: var(--c-accent); box-shadow: var(--shadow-soft); }

.guide__cover {
  aspect-ratio: 3 / 4;
  background: var(--c-sand);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.guide__cover img { width: 100%; height: 100%; object-fit: cover; }
.guide__title { font-family: var(--ff-display); font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.guide__desc { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--s-4); }
.guide__toc { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.guide__toc li {
  font-size: var(--fs-sm);
  padding-left: 1.4em;
  position: relative;
  color: var(--c-ink-soft);
}
.guide__toc li::before {
  content: '';
  position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--c-accent);
}
.guide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  margin-top: auto;
}
.guide__price { font-family: var(--ff-display); font-size: 1.5rem; color: var(--c-ink); }
.guide__body { display: flex; flex-direction: column; }

@media (min-width: 760px) {
  .guide--feature { grid-template-columns: 300px 1fr; gap: var(--s-8); align-items: start; padding: var(--s-7); }
}


/* ==========================================================================
   11. Ueber den Arzt
   ========================================================================== */

.doctor { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) { .doctor { grid-template-columns: .8fr 1.2fr; } }

.doctor__portrait {
  aspect-ratio: 4 / 5;
  background: var(--c-sand);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 420px;
}
.doctor__portrait img { width: 100%; height: 100%; object-fit: cover; }
.doctor__quote {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-style: italic;
  line-height: 1.34;
  margin-bottom: var(--s-5);
}
.doctor__name { font-size: var(--fs-sm); letter-spacing: .05em; }
.doctor__role { font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .1em; text-transform: uppercase; }


/* ==========================================================================
   12. Newsletter + Social
   ========================================================================== */

.newsletter { text-align: center; }
.newsletter__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--s-4);
}
.newsletter__text { max-width: 46ch; margin-inline: auto; color: var(--c-on-dark-m); font-size: var(--fs-sm); }

.subscribe {
  display: grid;
  gap: var(--s-3);
  max-width: 30rem;
  margin: var(--s-7) auto 0;
}
@media (min-width: 560px) {
  .subscribe__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); }
}
.subscribe input[type="email"] {
  width: 100%;
  padding: .95em 1.1em;
  background: transparent;
  border: 1px solid rgba(242,239,233,.32);
  border-radius: var(--r-sm);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
}
.subscribe input::placeholder { color: var(--c-on-dark-m); }
.subscribe input:focus { border-color: var(--c-on-dark); outline: none; }
.subscribe__note { font-size: var(--fs-xs); color: var(--c-on-dark-m); text-align: center; }
.subscribe__note a { text-decoration: underline; text-underline-offset: 3px; }

.social { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.social__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em 1.1em;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  transition: background var(--dur-f) var(--ease), color var(--dur-f) var(--ease), border-color var(--dur-f) var(--ease);
}
.social__link:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bg); }
.social__link svg { width: 15px; height: 15px; fill: currentColor; }

/* Plattform in config.json noch ohne Adresse — sichtbar, aber nicht klickbar */
.social__link--soon {
  opacity: .42;
  cursor: default;
  border-style: dashed;
}
.social__link--soon:hover { background: none; color: var(--c-ink-soft); border-color: var(--c-line); }
.section--dark .social__link--soon:hover { background: none; color: var(--c-on-dark); border-color: rgba(242,239,233,.3); }

.section--dark .social__link { border-color: rgba(242,239,233,.3); color: var(--c-on-dark); }
.section--dark .social__link:hover { background: var(--c-on-dark); color: var(--c-dark); border-color: var(--c-on-dark); }


/* ==========================================================================
   13. Fussbereich
   ========================================================================== */

.footer {
  background: var(--c-dark);
  color: var(--c-on-dark-m);
  font-size: var(--fs-sm);
  padding-block: var(--s-9) var(--s-6);
}
.footer a { color: var(--c-on-dark-m); transition: color var(--dur-f) var(--ease); }
.footer a:hover { color: var(--c-on-dark); }

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(242,239,233,.14);
}
@media (min-width: 800px)  { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand .wordmark { color: var(--c-on-dark); }
.footer__brand .wordmark__name { font-size: 1.3rem; }
.footer__brand .wordmark__sub  { color: var(--c-accent); }
.footer__tagline { margin-top: var(--s-4); max-width: 34ch; font-size: var(--fs-sm); }

.footer__colTitle {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: var(--s-4);
}
.footer__list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }

.footer__legal {
  padding-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
.footer__legalNav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-xs);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: rgba(168,161,150,.8);
}

/* Medizinischer Hinweis — auf jeder medizinischen Seite */
.medinfo {
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-alt);
  padding: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.medinfo__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.footer .medinfo {
  background: rgba(242,239,233,.05);
  border-color: rgba(242,239,233,.16);
  border-left-color: var(--c-accent);
  color: var(--c-on-dark-m);
}
.footer .medinfo__label { color: var(--c-on-dark); }

/* Auffaelliger Warnkasten (z.B. verschreibungspflichtige Medikamente) */
.notice {
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-ev-none);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  padding: var(--s-5);
  font-size: var(--fs-sm);
}
.notice__label {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ev-none);
  margin-bottom: var(--s-2);
}


/* ==========================================================================
   14a. Artikeltext
   ========================================================================== */

.artHead { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--s-7); }
.artHead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: var(--s-5);
}
.artHead__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  max-width: 20ch;
}
.artHead__lead { margin-top: var(--s-5); max-width: 56ch; font-size: var(--fs-lead); }

.artCover {
  aspect-ratio: 16 / 9;
  background: var(--c-sand);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.artCover img,
.artCover svg.art { width: 100%; height: 100%; object-fit: cover; }

/* Inhaltsverzeichnis */
.toc {
  border-top: 1px solid var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-5);
  margin-bottom: var(--s-8);
}
.toc__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-4);
}
.toc__list { display: grid; gap: var(--s-2); }
.toc__list a { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.toc__list a:hover { color: var(--c-accent); }

/* Der eigentliche Fliesstext */
.prose { max-width: var(--w-narrow); }
.prose > * + * { margin-top: 1.15em; }

.prose h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  margin-top: 2.1em;
  margin-bottom: .5em;
  padding-top: .7em;
  border-top: 1px solid var(--c-line);
}
.prose h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin-top: 1.8em;
  margin-bottom: .35em;
}
.prose h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  font-family: var(--ff-body);
  margin-top: 1.5em;
  margin-bottom: .3em;
  color: var(--c-ink);
}
.prose p { line-height: var(--lh-body); }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose a {
  color: var(--c-ink);
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: color var(--dur-f) var(--ease);
}
.prose a:hover { color: var(--c-accent); }

.prose ul, .prose ol { display: grid; gap: .55em; margin-block: 1.15em; padding-left: 0; }
.prose li { position: relative; padding-left: 1.5em; }
.prose ul > li::before {
  content: '';
  position: absolute; left: 0; top: .82em;
  width: 8px; height: 1px; background: var(--c-accent);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
  content: counter(li) '.';
  position: absolute; left: 0; top: 0;
  color: var(--c-accent);
  font-size: var(--fs-sm);
}

.prose blockquote {
  margin-block: 1.8em;
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-accent);
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.42;
  color: var(--c-ink);
}

.prose figure { margin-block: 2em; }
.prose figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.prose img { border-radius: var(--r); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-block: 1.8em;
}
.prose th, .prose td {
  text-align: left;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.prose th { color: var(--c-ink); font-weight: 600; border-bottom-color: var(--c-ink); }

/* Tabellen duerfen auf dem Handy seitlich scrollen, die Seite selbst nie */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Quellenverzeichnis */
.sources { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--c-ink); }
.sources__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-5);
}
.sources__list { display: grid; gap: var(--s-4); counter-reset: src; }
.sources__list li {
  counter-increment: src;
  position: relative;
  padding-left: 2.4em;
  font-size: var(--fs-xs);
  line-height: 1.62;
  color: var(--c-muted);
}
.sources__list li::before {
  content: '[' counter(src) ']';
  position: absolute; left: 0; top: 0;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.sources__list a { color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 2px; }

.todo {
  display: inline-block;
  padding: .1em .5em;
  background: var(--c-sand);
  border-radius: var(--r-sm);
  font-size: .8em;
  color: var(--c-accent);
}

/* Teilen */
.share { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-7); }
.share__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink-soft);
  transition: background var(--dur-f) var(--ease), color var(--dur-f) var(--ease), border-color var(--dur-f) var(--ease);
}
.share__link:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.share__link svg { width: 15px; height: 15px; fill: currentColor; }


/* ==========================================================================
   14b. Formulare
   ========================================================================== */

.form { display: grid; gap: var(--s-5); max-width: 34rem; }
.form__row { display: grid; gap: var(--s-2); }
.form__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.form__input, .form__textarea, .form__select {
  width: 100%;
  padding: .85em 1em;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  transition: border-color var(--dur-f) var(--ease);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  border-color: var(--c-ink);
  outline: none;
}
.form__textarea { min-height: 11rem; resize: vertical; }

.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.6;
}
.form__check input { margin-top: .28em; width: 15px; height: 15px; accent-color: var(--c-ink); }
.form__check a { text-decoration: underline; text-underline-offset: 2px; }

/* Honigtopf gegen automatische Spam-Eintraege — fuer Menschen unsichtbar */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-alt);
  font-size: var(--fs-sm);
}
.form__status[hidden] { display: none; }


/* ==========================================================================
   14c. Cookie-Einstellungen
   ========================================================================== */

.cookiebar {
  position: fixed;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  z-index: 120;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  transform: translateY(120%);
  transition: transform var(--dur) var(--ease);
}
.cookiebar.is-open { transform: none; }
.cookiebar__title { font-family: var(--ff-display); font-size: 1.25rem; margin-bottom: var(--s-2); }
.cookiebar__text { color: var(--c-muted); font-size: var(--fs-xs); margin-bottom: var(--s-4); }
.cookiebar__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cookiebar .btn { padding: .7em 1.4em; font-size: var(--fs-xs); }


/* ==========================================================================
   14d. Sanftes Einblenden beim Scrollen
   ========================================================================== */

/* Sicherheitsprinzip: Inhalt ist standardmaessig SICHTBAR.
   Erst wenn das Skript nachweislich laeuft, setzt es die Klasse js-reveal auf
   das html-Element und blendet die Elemente vorher aus. Bricht das JavaScript
   ab oder ist es abgeschaltet, bleibt der Text lesbar — bei einer
   Wissensplattform darf Inhalt niemals an einer Animation haengen. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   Hilfsklassen
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.center { text-align: center; }
.flow > * + * { margin-top: var(--s-5); }
.divider { border-top: 1px solid var(--c-line); }


/* ==========================================================================
   Druckansicht — Artikel sollen sauber auf Papier landen
   ========================================================================== */

@media print {
  .utilbar, .header, .mobilenav, .cookiebar, .share, .newsletter,
  .footer__top, .burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; }
  .prose a::after { content: ' (' attr(href) ')'; font-size: .85em; color: #555; }
  .reveal { opacity: 1; transform: none; }
}