/* ============================================================
   Alltagspost — alltagspost.de
   styles.css · CORE design system + shared page chrome
   Look: classic newspaper × modern lifestyle magazine
   (Vorbild: NYT / ZEIT Online). Paper-warm, ink-black,
   one editorial red accent used sparingly.
   ------------------------------------------------------------
   Shared by ALL pages. Front page also loads index.css;
   article/Ratgeber pages also load advertorial.css.
   Never redefine :root elsewhere — inherit these tokens.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --paper:      #FCFBF8;   /* page background — paper white / cream */
  --paper-2:    #F6F3EC;   /* alternating section background */
  --beige:      #F2ECDD;   /* info-box / tip background */
  --beige-line: #E6DCC6;   /* info-box border */
  --white:      #FFFFFF;

  /* ---- Ink & text ---- */
  --ink:        #1A1A1A;   /* headlines, primary */
  --ink-soft:   #2C2A27;   /* body copy */
  --muted:      #6B6862;   /* meta lines, captions */
  --faint:      #9C988F;   /* disclaimers, faint labels */

  /* ---- Accent (use sparingly!) ---- */
  --accent:     #B5402E;   /* editorial red — links, eyebrows, CTA */
  --accent-dk:  #8E3122;   /* hover / pressed */
  --accent-50:  #FBF0ED;   /* faint red wash */

  /* ---- Lines ---- */
  --line:       #E4DFD4;   /* hairline rules, borders */
  --line-soft:  #EEEAE0;   /* very soft dividers */
  --rule-ink:   #1A1A1A;   /* heavy nameplate rule */

  /* ---- Type ---- */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;  /* headlines, masthead */
  --serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;     /* body & subheads */
  --sans:    'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;   /* meta, eyebrows, UI */
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;         /* placeholder labels */

  /* ---- Layout ---- */
  --wrap: 720px;    /* article reading column */
  --wide: 1180px;   /* full-width sections / front page */

  /* ---- Shadows (subtle — print feel) ---- */
  --shadow-sm: 0 1px 3px rgba(26,26,26,.06);
  --shadow-md: 0 14px 40px rgba(26,26,26,.09);
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 2px; }

strong, b { font-weight: 600; color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; }

::selection { background: rgba(181,64,46,.16); }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; }

/* ============================ TOPBAR ============================ */
/* Slim utility bar: logo-left + one discreet CTA slot right. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,251,248,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--wide); margin-inline: auto;
  padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.topbar-logo { height: 26px; width: auto; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-link {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--muted);
}
.topbar-link:hover { color: var(--ink); text-decoration: none; }

/* The single discreet CTA — reads as editorial action, not a shop button */
.topbar-cta {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px;
  padding: 7px 14px; transition: background .15s, color .15s;
}
.topbar-cta:hover { background: var(--accent); color: #fff; text-decoration: none; }

@media (max-width: 560px) {
  .topbar-link { display: none; }
  .topbar-inner { padding: 10px 18px; }
}

/* ============================ EYEBROW / KICKER ============================ */
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}

/* Section header used inside articles */
.h2 {
  font-family: var(--display); font-size: clamp(26px, 4vw, 34px);
  font-weight: 700; line-height: 1.16; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 18px; text-wrap: balance;
}

/* ============================ SECTIONS ============================ */
.section { padding: 40px 0; }
.section--paper { background: var(--paper-2); border-block: 1px solid var(--line); }

/* Thin centred section rule with label (newspaper divider) */
.section-rule {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 16px; margin: 8px 0 26px;
}
.section-rule::before { content: ""; flex: 0 0 28px; height: 2px; background: var(--accent); }
.section-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================ IMAGE PLACEHOLDER ============================ */
/* All imagery uses .ph with a German data-label until real photos arrive. */
.ph {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(26,26,26,.035) 11px 12px),
    var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--faint); text-align: center; text-transform: none;
  max-width: 80%; line-height: 1.5; padding: 8px 12px;
}

/* ============================ INFO / TIP BOX ============================ */
.info-box {
  background: var(--beige); border: 1px solid var(--beige-line);
  border-radius: 3px; padding: 22px 24px; margin: 28px 0;
}
.info-box .ib-h {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk);
  margin-bottom: 9px; display: flex; align-items: center; gap: 8px;
}
.info-box p { margin: 0; font-size: 17px; line-height: 1.68; color: var(--ink-soft); }
.info-box p + p { margin-top: 12px; }

/* ============================ COMPARISON TABLE ============================ */
/* Clean newspaper table — no shop styling. */
.table-wrap { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 15px; color: var(--ink-soft);
}
table.cmp caption {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding-bottom: 12px;
}
table.cmp th, table.cmp td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.cmp thead th {
  font-weight: 700; color: var(--ink); font-size: 13px;
  letter-spacing: .03em; border-bottom: 2px solid var(--ink);
  background: transparent;
}
table.cmp tbody tr:nth-child(even) { background: rgba(26,26,26,.018); }
table.cmp td:first-child, table.cmp th:first-child { font-weight: 600; color: var(--ink); }
table.cmp .good { color: #2f7d4f; font-weight: 700; }
table.cmp .bad  { color: var(--accent-dk); font-weight: 600; }
.cmp-hint { font-family: var(--sans); font-size: 12px; color: var(--faint); margin-top: 8px; }

/* ============================ FAQ ============================ */
.faq { margin: 14px 0 6px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 2px; position: relative;
  font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--accent);
  transition: transform .2s;
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-a { padding: 0 2px 20px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.faq .faq-a p { margin: 0 0 12px; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ============================ FOOTER ============================ */
.footer { background: var(--ink); color: #C9C6BF; margin-top: 8px; }
.footer-inner { padding: 46px 0 40px; }
.footer-logo {
  font-family: var(--display); font-size: 26px; font-weight: 700;
  color: #FCFBF8; letter-spacing: -.01em; margin-bottom: 6px;
}
.footer-tag { font-family: var(--sans); font-size: 13px; color: #8E8B84; letter-spacing: .02em; margin-bottom: 26px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 26px; }
.footer-nav a { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .03em; color: #C9C6BF; }
.footer-nav a:hover { color: #fff; text-decoration: none; }
.footer-disc {
  font-family: var(--sans); font-size: 12px; line-height: 1.7; color: #7E7B74;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; max-width: 78ch;
}
.footer-disc strong { color: #B5ADA3; font-weight: 700; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.footer-legal a { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #C9C6BF; }
.footer-legal a:hover { color: #fff; text-decoration: none; }

/* ============================ MOBILE PASS (shared) ============================ */
@media (max-width: 600px) {
  /* Tighter gutters reclaim ~8px each side for reading width */
  .wrap, .wide { padding-inline: 18px; }
  .section { padding: 30px 0; }

  /* Section divider: shrink the label so it never wraps awkwardly */
  .section-rule { font-size: 11px; letter-spacing: .12em; gap: 12px; margin-bottom: 22px; }

  /* Tables: denser cells + clear "swipe" affordance */
  table.cmp { font-size: 13.5px; }
  table.cmp th, table.cmp td { padding: 10px 12px; }
  table.cmp thead th { font-size: 12px; }
  .table-wrap { position: relative; }

  /* Info / tip box */
  .info-box { padding: 18px 18px; margin: 24px 0; }
  .info-box p { font-size: 16px; }

  /* FAQ: comfortable tap rows */
  .faq summary { font-size: 17px; padding: 16px 36px 16px 2px; }
  .faq summary::after { font-size: 22px; }

  /* Footer mobile: nur Legal-Links, mehr Innenabstand, nichts klebt an der Kante */
  .footer .wide { padding-inline: 28px; }
  .footer-inner { padding: 38px 0 32px; text-align: center; }
  .footer-nav { display: none; }
  .footer-logo { font-size: 23px; }
  .footer-tag { margin-bottom: 20px; }
  .footer-disc { font-size: 11.5px; text-align: left; }
  .footer-legal { justify-content: center; gap: 18px; }
}

/* Bigger tap targets for the one CTA on small screens (≥44px tall) */
@media (max-width: 560px) {
  .topbar-inner { padding: 9px 16px; }
  .topbar-logo { height: 23px; }
  .topbar-cta { padding: 10px 14px; font-size: 12px; }
}

/* ============================ PRINT ============================ */
@media print {
  .topbar, .soft-cta, .topbar-cta { display: none !important; }
  body { background: #fff; }
}

/* ── Legal-Seiten-Kompatibilität (content/de/legal/*.md nutzt lead-p + --green-900) ── */
:root { --green-900: var(--ink); }
.lead-p { max-width: 70ch; margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }