/*
  Gemeinsames Stylesheet für alle statischen Blogbeiträge unter /posts/.

  Schrift selbst gehostet (woff2-Dateien aus @fontsource/raleway, derselbe
  Font wie in der App - siehe src/index.css) statt über Google Fonts
  geladen. Ein <link> auf fonts.googleapis.com/fonts.gstatic.com überträgt
  beim Laden die IP-Adresse der Besucherin an Google, bevor irgendeine
  Einwilligung eingeholt wurde - das LG München I hat genau das 2022 als
  DSGVO-Verstoß gewertet (Az. 3 O 17493/20), weil Selbst-Hosten technisch
  ohne Weiteres möglich ist. Mit @font-face + lokalen Dateien bleibt jede
  Anfrage auf easy-einkauf.de, keine Drittanbieter-Übertragung, keine
  Einwilligung nötig.

  Farben: dieselbe Markenpalette wie die App (src/index.css) - hier von
  Hand kopiert, weil diese Seiten als eigenständige statische Dateien
  ausgeliefert werden und nicht durch den Vite-Build laufen. Nur hier
  ändern, wenn sie sich auch in index.css ändern.
*/

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/raleway/raleway-400.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/raleway/raleway-500.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/raleway/raleway-600.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/raleway/raleway-700.woff2") format("woff2");
}

:root {
  --color-primary: #164E63;
  --color-background: #F2F5F6;
  --color-surface: #FBFCFC;
  --color-surface-2: #EDF2F3;
  --color-border: #D3DFE2;
  --color-text: #0E2830;
  --color-text-muted: #56727B;
  --color-accent: #D4402F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4FA8C6;
    --color-background: #0A1519;
    --color-surface: #0F2028;
    --color-surface-2: #152C36;
    --color-border: #23414D;
    --color-text: #E6EEF0;
    --color-text-muted: #93AAB2;
    --color-accent: #F0705B;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.65;
  font-size: 16px;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
header.site {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 800px; margin: 0 auto; padding: 20px 16px;
}
header.site .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
header.site .brand img { width: 32px; height: 32px; border-radius: 9px; }
header.site a.cta {
  background: var(--color-primary); color: #fff; padding: 9px 16px;
  border-radius: 10px; font-weight: 600; font-size: 0.9rem;
}
header.site a.cta:hover { text-decoration: none; opacity: 0.92; }
.blog-post {
  max-width: 720px; margin: 0 auto 3rem; padding: 2.25rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px;
}
.blog-post header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.blog-post .meta { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.75rem; }
.blog-post figure { margin: 0 0 2rem; }
.blog-post figure img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.blog-post figure figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.6rem; }
.blog-post p { margin-bottom: 1.1rem; }
.blog-post h2 { font-size: 1.4rem; margin: 2.25rem 0 1rem; color: var(--color-primary); letter-spacing: -0.01em; }
.blog-post ul, .blog-post ol { margin: 0 0 1.1rem 1.3rem; }
.blog-post li { margin-bottom: 0.5rem; }
.blog-post dl { margin: 1rem 0; }
.blog-post dt { font-weight: 600; margin-top: 1rem; }
.blog-post dd { margin: 0.3rem 0 0.5rem; color: var(--color-text-muted); }
.cta-box {
  margin-top: 2.5rem; padding: 1.5rem; border-radius: 16px;
  background: var(--color-surface-2); text-align: center;
}
.cta-box a.cta {
  display: inline-block; margin-top: 0.75rem; background: var(--color-primary);
  color: #fff; padding: 11px 22px; border-radius: 12px; font-weight: 600;
}
.cta-box a.cta:hover { text-decoration: none; opacity: 0.92; }
.related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.related h2 { margin-top: 0; }
.related ul { margin-left: 1.1rem; }
footer.site {
  max-width: 800px; margin: 0 auto; padding: 0 16px 3rem;
  font-size: 0.85rem; color: var(--color-text-muted); text-align: center;
}
footer.site a { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .blog-post { padding: 1.5rem; border-radius: 16px; }
  .blog-post header h1 { font-size: 1.6rem; }
}