/* Shared styles for the Liese Ratgeber (guide) pages. Same token system and
   dark-mode behaviour as the landing page, tuned for long-form reading. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Cyrillic (uk, ru): Fraunces has no Cyrillic glyphs, so headings use Lora 700
   (warm editorial serif with native Cyrillic). Same family name + unicode-range
   so the browser auto-picks it per codepoint; Latin keeps Fraunces. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/lora-700-cyrillic.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/lora-700-cyrillic-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
:root {
  color-scheme: light;
  --bg: #F5F2EC; --paper: #FFF9EF; --ink: #0E1512; --muted: #6B7670;
  --accent: #00B894; --accent-soft: rgba(0, 184, 148, 0.12);
  --warn: #C05E3A; --warn-soft: #FBEFE8;
  --beta-bg: #14241D; --beta-ink: #FFF9EF;
  --head-bg: rgba(245, 242, 236, 0.88);
  --hairline: rgba(14, 21, 18, 0.12);
  --shadow-soft: rgba(14, 21, 18, 0.10);
  --display: 'Fraunces', Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1512; --paper: #17221C; --ink: #EDE8DC; --muted: #9BA8A0;
    --accent: #2DD4A0; --accent-soft: rgba(45, 212, 160, 0.16);
    --warn: #F0926E; --warn-soft: rgba(240, 146, 110, 0.16);
    --beta-bg: #0A100D; --beta-ink: #F3EEE2;
    --head-bg: rgba(14, 21, 18, 0.82);
    --hairline: rgba(237, 232, 220, 0.14);
    --shadow-soft: rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1512; --paper: #17221C; --ink: #EDE8DC; --muted: #9BA8A0;
  --accent: #2DD4A0; --accent-soft: rgba(45, 212, 160, 0.16);
  --warn: #F0926E; --warn-soft: rgba(240, 146, 110, 0.16);
  --beta-bg: #0A100D; --beta-ink: #F3EEE2;
  --head-bg: rgba(14, 21, 18, 0.82);
  --hairline: rgba(237, 232, 220, 0.14);
  --shadow-soft: rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7; font-size: 17.5px;
  transition: background .3s ease, color .3s ease;
}
.site-head {
  position: sticky; top: 0; z-index: 60; background: var(--head-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
/* Wie auf der Startseite: iOS muss den backdrop-filter einer klebenden Leiste
   waehrend des Scrollens laufend neu ueber den durchscheinenden Hintergrund
   legen, und die Leiste bleibt dabei zurueck. Touch-Geraete bekommen deshalb
   eine deckende Leiste in derselben Farbe. Am Zeiger-Geraet bleibt der Blur. */
@media (hover: none) {
  .site-head {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.head-in { max-width: 760px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 23px; margin: 0; text-decoration: none; color: var(--ink); }
.brand .dot { color: var(--accent); }
.head-tools { display: flex; align-items: center; gap: 8px; }
.head-cta { text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: border-color .25s ease; }
.head-cta:hover { border-color: var(--accent); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; background: var(--paper); color: var(--ink); border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; transition: border-color .25s ease; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}
.wrap { max-width: 760px; margin: 0 auto; padding: 22px 22px 80px; }
.crumbs { font-size: 14px; color: var(--muted); margin: 8px 0 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.eyebrow { color: var(--accent); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; margin: 0 0 10px; }
h1 { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0 0 16px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.2; margin: 40px 0 12px; }
h3 { font-size: 19px; margin: 26px 0 8px; }
p { margin: 0 0 16px; }
.lead { font-size: 20px; color: var(--ink); margin: 0 0 24px; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
.tldr { background: var(--paper); border: 1px solid var(--hairline); border-left: 5px solid var(--accent); border-radius: 14px; padding: 20px 22px; margin: 0 0 28px; }
.tldr b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 8px; }
.tldr ul { margin: 0; }
.callout { border-radius: 14px; padding: 18px 20px; margin: 20px 0; border: 1px solid var(--hairline); }
.callout.warn { background: var(--warn-soft); border-color: var(--warn); }
.callout.tip { background: var(--accent-soft); border-color: var(--accent); }
.callout b { display: block; margin-bottom: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 22px 0; }
.card { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px; transition: transform .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 6px; }
.card span { color: var(--muted); font-size: 15px; }
details { background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 18px; margin-top: 10px; }
details[open] { border-color: var(--accent); }
summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details p { margin: 10px 0 2px; color: var(--muted); }
.cta { background: var(--beta-bg); color: var(--beta-ink); border-radius: 18px; padding: 28px 26px; margin: 36px 0; }
.cta h2 { color: var(--beta-ink); margin-top: 0; }
.cta p { color: rgba(255, 249, 239, 0.85); }
.cta a.btn { display: inline-block; margin-top: 8px; text-decoration: none; font-weight: 800; background: var(--accent); color: #06281F; border-radius: 999px; padding: 13px 24px; }
.sources { font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--hairline); margin-top: 40px; padding-top: 18px; }
.sources h2 { font-size: 17px; margin: 0 0 8px; }
.sources li { margin-bottom: 6px; word-break: break-word; }
.disclaimer { color: var(--muted); font-size: 14.5px; margin-top: 24px; }
footer { max-width: 760px; margin: 0 auto; padding: 0 22px 50px; color: var(--muted); font-size: 14px; text-align: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-bottom: 10px; }
@media (max-width: 560px) { h1 { font-size: 32px; } .lead { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } }