/*
 * Der Blog.
 *
 * Dieselben Farben und Schriften wie die Startseite, Wert fuer Wert aus
 * apps/mobile/src/theme/index.ts. Die Uebersicht ist ein Raster aus Karten mit Bild,
 * der Beitrag selbst ist eine Lesespalte. Beides dunkel, weil es nur eine Farbwelt gibt.
 */

:root {
  --puder: #150A22;
  --puder-rose: #1A0C24;
  --schleier: #2A1940;
  --kante: #3A2555;
  --flaeche: #1F1230;

  --tinte: #F4EAFC;
  --tinte-weich: #B9A3D2;

  --iris: #C79BFF;
  --iris-tief: #DDC2FF;
  --lavendel: #C79BFF;
  --lavendel-weich: #33204D;
  --rose: #E97FE9;
  --rose-weich: #3C1E3A;
  --auf-iris: #1B0730;
  --lotus: #F49080;
  --rubin: #E24A78;
  --salbei: #6FC6AF;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --schatten: 0 18px 44px -26px rgba(0, 0, 0, 0.8);
  --glas: rgba(60, 36, 90, 0.55);
  --glas-kante: rgba(199, 155, 255, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background:
    radial-gradient(120% 70% at 8% -8%, var(--rose-weich) 0%, transparent 55%),
    radial-gradient(100% 60% at 94% 2%, var(--lavendel-weich) 0%, transparent 52%),
    linear-gradient(170deg, var(--puder-rose) 0%, var(--puder) 42%, var(--puder) 100%);
  background-attachment: fixed;
  color: var(--tinte);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tinte-weich);
}
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--tinte-weich); max-width: 60ch; }
.huelle { width: min(1140px, 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; }

/* Kopfzeile, wie auf der Startseite ------------------------------------ */
.kopfzeile {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  background: var(--glas);
  border-bottom: 1px solid var(--kante);
}
.kopfzeile .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marke img { width: 38px; height: 38px; display: block; }
.marke b { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -0.01em; }
.navi { display: flex; gap: 26px; align-items: center; }
.navi a { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--tinte-weich); }
.navi a:hover, .navi a[aria-current] { color: var(--tinte); }
/* Das Menue auf dem Telefon --------------------------------------
   Unter 860 Punkten ist fuer die Reihe der Abschnitte kein Platz. Statt sie
   wegzulassen, oeffnet ein Knopf mit drei Strichen die Liste unter der Kopfzeile,
   im selben Glas. Der Knopf traegt aria-expanded, die Liste bleibt dieselbe nav
   wie am grossen Bildschirm, nur untereinander. */
.menue {
  display: none; width: 44px; height: 44px; padding: 0; margin-right: -6px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; border-radius: var(--r-pill); cursor: pointer;
}
.menue i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--tinte); transition: transform 220ms ease, opacity 160ms ease; }
.menue:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
@media (max-width: 720px) {
  .navi { display: none; }
  .menue { display: inline-flex; }
  .kopfzeile.offen .menue i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kopfzeile.offen .menue i:nth-child(2) { opacity: 0; }
  .kopfzeile.offen .menue i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Die Liste selbst: eine Glaskarte, die unter der Kopfzeile schwebt. Sie steht
   bewusst NEBEN der Kopfzeile im Dokument und nicht darin: Ein Element mit
   backdrop-filter wird fuer alles in ihm zur Grenze, und eine Liste darin saehe
   nur die Kopfzeile hinter sich, nicht die Seite. Dann wird nichts weich. */
.menue-liste {
  position: fixed; left: 12px; right: 12px; top: var(--menue-oben, 76px); z-index: 19;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glas-kante);
  background:
    linear-gradient(180deg, var(--glas-glanz), transparent 38%),
    var(--glas);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  /* Zu: unsichtbar, ein Stueck hoeher und etwas kleiner. Auf: an seinem Platz. Der
     Weg dazwischen ist die Bewegung. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px) scale(0.97); transform-origin: top center;
  transition: opacity 200ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 280ms;
}
.menue-liste.offen {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.menue-liste a {
  display: block; padding: 14px 18px; border-radius: 16px;
  font-size: 17px; font-weight: 600; color: var(--tinte); text-decoration: none;
  transition: background-color 160ms ease;
}
.menue-liste a:hover, .menue-liste a:active { background: rgba(255, 255, 255, 0.07); }
.menue-liste a[aria-current] { color: var(--iris); }
@media (min-width: 721px) { .menue-liste { display: none; } }
@media (prefers-reduced-motion: reduce) { .menue-liste, .menue-liste.offen { transition: opacity 120ms ease, visibility 0s; transform: none; } }
/* Schmale Telefone, wie auf der Startseite: enger, kleinerer Knopf, unter 360 Punkten
   nur das Zeichen ohne Schriftzug. */
@media (max-width: 440px) {
  .kopfzeile .huelle { gap: 12px; }
  .kopfzeile .knopf { padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 359px) { .kopfzeile .marke b { display: none; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--kante); background: var(--flaeche);
  color: var(--tinte); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}
.knopf:hover { transform: translateY(-1px); border-color: var(--iris); }
.knopf.voll { background: var(--iris); color: var(--auf-iris); border-color: transparent; }

/* Uebersicht ------------------------------------------------------------- */
.blog-kopf { padding-block: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 40px); }
.blog-kopf h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin: 10px 0 16px; }

.suche {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-block: 28px 10px;
}
.suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.suche input {
  flex: 1 1 260px; min-width: 0;
  padding: 12px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--kante); background: var(--flaeche); color: var(--tinte);
  font: inherit; font-size: 16px; outline: none;
}
.suche input::placeholder { color: var(--tinte-weich); opacity: 0.8; }
.suche input:focus { border-color: var(--iris); box-shadow: 0 0 0 3px rgba(199, 155, 255, 0.18); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vw, 40px); }
.filter button {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--kante); background: transparent; color: var(--tinte-weich);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.filter button:hover { color: var(--tinte); border-color: var(--iris); }
.filter button[aria-pressed="true"] { background: var(--iris); color: var(--auf-iris); border-color: transparent; }

.themen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -8px 0 clamp(24px, 4vw, 40px); font-size: 14px; }
.themen .eyebrow { margin-right: 4px; }
.themen a { color: var(--iris); text-decoration: none; text-underline-offset: 3px; }
.themen a:hover { text-decoration: underline; }

.krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--tinte-weich); margin-bottom: 14px; }
.krumen a { color: inherit; text-decoration: none; }
.krumen a:hover { color: var(--tinte); }
.krumen i { font-style: normal; opacity: 0.6; }
.krumen span { color: var(--tinte); max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rechts { display: flex; align-items: center; gap: 10px; }
.sprache {
  text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--tinte-weich); padding: 8px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--kante);
}
.sprache:hover { color: var(--tinte); border-color: var(--iris); }
.sprachen-wahl select {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--tinte-weich); background: var(--flaeche);
  border: 1px solid var(--kante); border-radius: var(--r-pill); padding: 8px 14px;
}
.sprachen-wahl select:hover, .sprachen-wahl select:focus { color: var(--tinte); border-color: var(--iris); outline: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.fragen.breit { max-width: 720px; margin: clamp(24px, 4vw, 40px) 0 clamp(56px, 9vw, 104px); }
.thema-link { margin-top: 28px; font-size: 15px; }
.thema-link a { color: var(--iris); text-underline-offset: 3px; }

.raster {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  padding-bottom: clamp(56px, 9vw, 104px);
}
.karte {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--kante); background: var(--flaeche);
  text-decoration: none; box-shadow: var(--schatten);
  transition: transform 180ms ease, border-color 180ms ease;
}
.karte:hover { transform: translateY(-3px); border-color: var(--iris); }
.karte[hidden] { display: none; }
/* Das Bild sitzt in einem Rahmen mit festem Verhaeltnis. Ein Bild direkt als Flex-Kind
   behaelt sonst seine eigene Hoehe, egal was aspect-ratio sagt. */
.bild { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--schleier); flex: none; }
.bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.karte .text { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.karte h2 { font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.karte p { color: var(--tinte-weich); font-size: 15px; }
.karte .meta { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--tinte-weich); }

.marker {
  display: inline-block; align-self: flex-start;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--lavendel-weich); color: var(--iris-tief);
}
.marker.zyklus { background: var(--rose-weich); color: var(--rose); }
.marker.schwangerschaft { background: var(--lavendel-weich); color: var(--iris-tief); }
.marker.baby { background: rgba(111, 198, 175, 0.16); color: var(--salbei); }
.marker.app { background: rgba(244, 144, 128, 0.16); color: var(--lotus); }

.leer { padding: 48px 0 96px; color: var(--tinte-weich); }
.leer[hidden] { display: none; }

/* Beitrag ---------------------------------------------------------------- */
.beitrag { width: min(720px, 100% - clamp(32px, 8vw, 80px)); margin-inline: auto; padding-block: clamp(40px, 7vw, 80px) clamp(56px, 9vw, 104px); }
.beitrag .eyebrow a { text-decoration: none; }
.beitrag h1 { font-size: clamp(34px, 6vw, 54px); line-height: 1.05; letter-spacing: -0.03em; margin: 12px 0 14px; }
.beitrag .meta { font-size: 14px; color: var(--tinte-weich); margin-bottom: 22px; }
.beitrag .lede { margin-bottom: 30px; }
.beitrag figure { margin: 0 0 36px; }
.beitrag figure .bild { border-radius: var(--r-lg); border: 1px solid var(--kante); }
.beitrag figcaption { margin-top: 8px; font-size: 12px; color: var(--tinte-weich); opacity: 0.8; }
.beitrag figcaption a { color: inherit; }

.inhalt h2 { font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: -0.01em; margin: 44px 0 12px; }
.inhalt h3 { font-size: 19px; font-weight: 400; margin: 30px 0 8px; }
.inhalt p, .inhalt ul, .inhalt ol { margin: 0 0 16px; font-size: 17px; }
.inhalt ul, .inhalt ol { padding-left: 24px; }
.inhalt li { margin-bottom: 8px; }
.inhalt a { color: var(--iris); text-underline-offset: 3px; }
.inhalt strong { color: var(--tinte); }
.inhalt blockquote {
  margin: 0 0 18px; padding: 16px 22px;
  border-left: 3px solid var(--iris); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--flaeche); color: var(--tinte-weich);
}
.inhalt blockquote p:last-child { margin-bottom: 0; }
.inhalt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--flaeche); padding: 1px 6px; border-radius: 6px; }
.inhalt .tabelle { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--kante); border-radius: var(--r-md); }
.inhalt table { border-collapse: collapse; width: 100%; font-size: 15px; }
.inhalt th, .inhalt td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--kante); vertical-align: top; }
.inhalt th { font-weight: 700; color: var(--tinte-weich); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.inhalt tr:last-child td { border-bottom: 0; }

.fragen { margin-top: 44px; }
.fragen h2 { font-weight: 400; font-size: 26px; margin-bottom: 12px; }
.fragen details { border-top: 1px solid var(--kante); padding: 4px 0; }
.fragen details:last-of-type { border-bottom: 1px solid var(--kante); }
.fragen summary { cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; color: var(--iris); font-weight: 400; font-size: 22px; line-height: 1; }
.fragen details[open] summary::after { content: '\2212'; }
.fragen details p { padding: 0 0 16px; color: var(--tinte-weich); font-size: 16px; }

.hinweis {
  margin: 44px 0 0; padding: 22px 24px;
  border-radius: var(--r-lg); border: 1px solid var(--kante); background: var(--flaeche);
  display: flex; flex-direction: column; gap: 10px;
}
.hinweis .eyebrow { color: var(--iris); }
.hinweis h2 { font-size: 22px; font-weight: 400; }
.hinweis p { color: var(--tinte-weich); }
.hinweis .knopf { align-self: flex-start; margin-top: 6px; }

.hebamme { margin-top: 28px; font-size: 14px; color: var(--tinte-weich); }

.weiter { margin-top: 56px; }
.weiter h2 { font-weight: 400; font-size: 22px; margin-bottom: 16px; }
.weiter .raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; padding-bottom: 0; }
.weiter .karte h2 { font-size: 17px; margin: 0; }
.weiter .karte .text { padding: 14px 16px 16px; gap: 6px; }

/* Fusszeile -------------------------------------------------------------- */
footer { border-top: 1px solid var(--kante); padding-block: 28px 40px; font-size: 14px; }
footer .huelle { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--tinte-weich); }
footer .marke b { font-size: 18px; }
footer .herkunft {
  width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kante);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tinte-weich); opacity: 0.7;
}
footer .herkunft i { width: 3px; height: 3px; border-radius: 999px; background: currentColor; flex: none; }