/* Blog-Stylesheet - bewusst schlank gehalten (kein Framework, kein
   Build-Schritt) für schnelle Ladezeiten (Core Web Vitals = Ranking-Faktor).

   Farben und Schriften sind bewusst dieselben wie in der App
   (app/static/style.css). Vorher war der Blog optisch eine fremde Insel:
   andere Schrift, andere Farben - und vor allem OHNE Dunkelmodus. Wer die
   App dunkel nutzte und auf "Blog" klickte, bekam unvermittelt eine grell
   weisse Seite. */

:root {
  --blog-ink: #23262B;
  --blog-heading: #1B2A4A;
  --blog-muted: #6B7280;
  --blog-accent: #B9812E;
  --blog-bg: #F6F4EE;
  --blog-surface: #FFFFFF;
  --blog-border: #DDD7C7;
  --blog-chip-bg: #EAEFF8;
  --blog-max-width: 760px;
  --blog-font-display: 'Fraunces', Georgia, serif;
  --blog-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Dunkelmodus: gleiche Logik wie in der App - die System-Einstellung
   greift nur, solange keine ausdrueckliche Wahl getroffen wurde. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blog-ink: #DDDBD0;
    --blog-heading: #F2F0E4;
    --blog-muted: #93927F;
    --blog-accent: #D9A857;
    --blog-bg: #14161C;
    --blog-surface: #1D212B;
    --blog-border: #333748;
    --blog-chip-bg: #1D2436;
  }
}
:root[data-theme="dark"] {
  --blog-ink: #DDDBD0;
  --blog-heading: #F2F0E4;
  --blog-muted: #93927F;
  --blog-accent: #D9A857;
  --blog-bg: #14161C;
  --blog-surface: #1D212B;
  --blog-border: #333748;
  --blog-chip-bg: #1D2436;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--blog-font-body);
  color: var(--blog-ink);
  background: var(--blog-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--blog-font-display); color: var(--blog-heading); }

/* Kopfzeile über die volle Fensterbreite, damit Zurück-Pfeil, Marke und
   Hell-/Dunkel-Umschalter tatsächlich in den Ecken sitzen - so wie auf der
   Anmelde- und Registrierungsseite (dort: fest im Sichtfenster, 16px vom
   Rand). Vorher war die Kopfzeile auf 960px begrenzt und mittig gesetzt;
   auf einem 1280px-Bildschirm begann der Pfeil dadurch erst bei x=184 und
   wirkte im Nichts stehend statt am Rand verankert.
   Der Inhalt darunter bleibt zentriert und begrenzt - für Fließtext ist
   eine kurze Zeilenlänge wichtiger als die Ausnutzung der Breite. */
.blog-site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--blog-border);
}
/* Schiebt alles Weitere (derzeit nur den Hell-/Dunkel-Umschalter) an den
   rechten Rand, während Zurück-Pfeil und Marke links zusammenbleiben. */
.blog-site-header .blog-nav { margin-left: auto; }
.blog-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--blog-ink);
}
/* Ersetzt den frueheren Buchstaben-Kasten .blog-brand-stamp (der ein
   fest einprogrammiertes "E" der alten Marke enthielt) durch das echte
   Logo. Die Regel fehlte zunaechst - das Bild stand dadurch ohne
   Eckenrundung neben dem Schriftzug. */
.blog-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}
.blog-nav a {
  margin-left: 18px;
  color: var(--blog-ink);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.95rem;
}
.blog-nav a:hover { color: var(--blog-accent); }

main { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.blog-post-meta { color: var(--blog-muted); font-size: 0.85rem; margin: 0 0 6px; }

.blog-breadcrumbs { font-size: 0.85rem; color: var(--blog-muted); margin: 24px 0; }
.blog-breadcrumbs a { color: var(--blog-muted); text-decoration: none; }

.blog-article { max-width: var(--blog-max-width); margin: 0 auto; padding-bottom: 64px; }
.blog-article-header h1 { font-size: 2.3rem; margin: 0 0 10px; line-height: 1.2; }
.blog-tags { margin: 10px 0 0; }
.blog-tag {
  display: inline-block;
  background: var(--blog-chip-bg);
  color: var(--blog-accent);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.8rem;
  margin: 0 6px 6px 0;
}
.blog-article-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  margin: 24px 0;
}
.blog-article-body { font-size: 1.08rem; }
.blog-article-body h2 { margin-top: 2em; }
.blog-article-body img { max-width: 100%; border-radius: 8px; }
.blog-article-body a { color: var(--blog-accent); }
.blog-article-body pre { background: var(--blog-chip-bg); padding: 14px; border-radius: 8px; overflow-x: auto; }
.blog-article-body blockquote {
  border-left: 3px solid var(--blog-accent);
  margin: 0; padding-left: 18px; color: var(--blog-muted);
}
.blog-site-footer {
  border-top: 1px solid var(--blog-border);
  color: var(--blog-muted);
  text-align: center;
  font-size: 0.85rem;
  padding: 24px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .blog-site-header { flex-wrap: wrap; gap: 10px; padding: 16px 20px; }
  .blog-nav a:first-child { margin-left: 0; }
  main { padding: 0 20px; }
  .blog-article-header h1 { font-size: 1.7rem; }
}


/* ---------- Ergaenzungen der UX-Ueberarbeitung ---------- */

/* Abschluss unter jedem Artikel: bisher endete der Blog im Nichts -
   Leserinnen und Leser, die gerade ueberzeugt wurden, fanden keinen Weg in
   die Anwendung. */
.blog-cta {
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  margin: 8px 0 48px;
}
.blog-cta h2 { font-size: 1.3rem; margin: 0 0 8px; }
.blog-cta p { color: var(--blog-muted); margin: 0 0 18px; }
.blog-cta-btn {
  display: inline-block;
  background: var(--blog-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
}
.blog-cta-btn:hover { opacity: 0.9; }
.blog-cta-hint { font-size: 0.82rem; margin: 14px 0 0 !important; }

.blog-site-footer a { color: var(--blog-accent); text-decoration: none; }


/* Umschalter Hell/Dunkel in der Blog-Kopfzeile. Sitzt bewusst IN der
   Navigation statt als schwebender Knopf ueber dem Text - im Blog wird
   gelesen, ein Element vor dem Fliesstext waere dort besonders stoerend. */
.blog-theme-toggle {
  margin-left: 18px;
  /* Gleiche Höhe wie der Zurück-Knopf, damit beide exakt auf einer Linie
     stehen - vorher waren es 34 gegen 39px und der Umschalter saß dadurch
     sichtbar tiefer. */
  width: 39px;
  height: 39px;
  border-radius: 50%;
  border: 1px solid var(--blog-border);
  background: var(--blog-surface);
  color: var(--blog-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 0;
}
.blog-theme-toggle:hover { border-color: var(--blog-accent); color: var(--blog-accent); }

/* Im Hellmodus die Sonne zeigen, im Dunkelmodus den Mond - dieselbe
   Zuordnung wie in der App. */
.blog-theme-mond { display: none; }
:root[data-theme="dark"] .blog-theme-sonne { display: none; }
:root[data-theme="dark"] .blog-theme-mond { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blog-theme-sonne { display: none; }
  :root:not([data-theme="light"]) .blog-theme-mond { display: inline; }
}

.blog-site-header nav { display: flex; align-items: center; }


/* ============================================================
   Überarbeitung der Blog-Sektion
   ============================================================ */

/* ---------- Verwandte Artikel ---------- */
.blog-verwandte { margin: 56px 0 8px; }
.blog-verwandte h2 { font-size: 1.25rem; margin: 0 0 18px; }
.blog-verwandte-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.blog-verwandt-karte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  background: var(--blog-surface);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-verwandt-karte:hover { border-color: var(--blog-accent); transform: translateY(-2px); }
.blog-verwandt-zeit { font-size: 0.75rem; color: var(--blog-muted); }
.blog-verwandt-titel { font-family: var(--blog-font-display); font-weight: 600; color: var(--blog-heading); line-height: 1.3; }
.blog-verwandt-anriss {
  font-size: 0.85rem;
  color: var(--blog-muted);
  line-height: 1.5;
  /* Auf drei Zeilen begrenzen, damit die Karten gleich hoch bleiben. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Blättern zwischen Artikeln ---------- */
.blog-blaettern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 32px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--blog-border);
}
.blog-blaettern a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.blog-blaettern a:hover { border-color: var(--blog-accent); }
.blog-blaettern-rechts { text-align: right; }
.blog-blaettern-marke { font-size: 0.76rem; color: var(--blog-accent); font-weight: 600; }
.blog-blaettern-titel { font-weight: 600; color: var(--blog-heading); font-size: 0.92rem; line-height: 1.35; }

@media (max-width: 620px) {
  .blog-blaettern { grid-template-columns: 1fr; }
  .blog-blaettern-rechts { text-align: left; }
}


/* ---------- Rückweg zur Anwendung ----------
   Gleiche Gestaltung wie .auth-back in style.css (Anmelde-/
   Registrierungsseite), damit derselbe Knopf an derselben Stelle überall
   dasselbe bedeutet. Steht hier IM Kopfbereich statt fest im Sichtfenster:
   Blogseiten sind lange Lesestrecken - ein dauerhaft über dem Text
   schwebender Knopf wäre dort störend. */
.blog-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  background: var(--blog-surface);
  color: var(--blog-muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-zurueck svg { width: 17px; height: 17px; transition: transform 0.15s ease; }
.blog-zurueck:hover { color: var(--blog-heading); border-color: var(--blog-muted); }
.blog-zurueck:hover svg { transform: translateX(-2px); }

/* Auf schmalen Displays nur der Pfeil - neben Marke und Umschalter ist
   dort kein Platz für die Beschriftung. */
@media (max-width: 560px) {
  .blog-zurueck { padding: 8px; }
  .blog-zurueck span { display: none; }
  .blog-site-header { gap: 10px; }
  .blog-brand span { font-size: 0.95rem; }
}