/* /css/whitepaper.css
   =========================================================
   GFC – Whitepaper Styles (Desktop + Mobile)
   Ziel: Seriosität, Lesbarkeit, Vertrauen
   - Keine Layout-Hacks (keine Shifts/Transforms für Rails)  [Ausnahme: deine bestehende Mobile-Feinjustierung Socials bleibt]
   - Keine globalen Overrides (Focus/Skip-Link bleiben global)
   - Robust auf Mobile (Tables & Code: scrollable)
   =========================================================

   Überarbeitung (No-Regression-Intent):
   - Desktop bleibt unverändert
   - iPhone 14 Pro Max (≈430px) bleibt unverändert
   - Fix: vermeidet 641–700px Zwischenzustände bei "fixed" UI (Language Switch)
   - Add: Micro-Breakpoint <=390px für sehr kleine Phones (320–390px)

   Safety-Mode:
   - px -> rem 1:1 (16px basis) where used
   - Breakpoints converted to rem equivalents

   Update (Logo-Fix):
   - Logo nicht mehr "magisch" per fixed left-Wert (356px), sondern
     an die linke Kante des zentrierten Containers gebunden.
   - Safe-Area (Notch) berücksichtigt.
   - Mobile Overrides überschreiben nur top/size/scale – nicht left.
*/

/* --------- Base --------- */

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(75rem 37.5rem at 70% -10%, var(--surface-2), transparent)
    no-repeat,
    var(--bg);
  line-height: 1.6;
  letter-spacing: 0.2px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

p { margin: 0 0 var(--space-3); }
.small { font-size: 0.925rem; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }

/* --------- Language Switch --------- */

.wp-lang-switch {
  margin-bottom: 0.5rem; /* 8px */
  text-align: right;
  font-size: 0.9rem;
}
.wp-lang-switch .lang-link {
  display: inline-block;
  padding: 0.1875rem 0.5625rem; /* 3px 9px */
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  opacity: 0.85;
  line-height: 1.2;
}
.wp-lang-switch .lang-link.is-active {
  font-weight: 600;
  opacity: 1;
  border-color: rgba(148, 163, 184, 0.65);
}
.wp-lang-switch .lang-link:focus-visible {
  outline: 0.125rem solid currentColor; /* 2px */
  outline-offset: 0.125rem;            /* 2px */
}
.wp-lang-switch .lang-sep {
  margin: 0 0.125rem; /* 2px */
  opacity: 0.6;
}

/* --------- Layout --------- */

.wp-wrap {
  max-width: var(--container-maxw);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  box-sizing: border-box;
}

/* Header Wrap: centered masthead above the first card */
.wp-header-wrap {
  display: grid;
  justify-items: center; /* centers masthead + card */
  row-gap: 0.875rem; /* 14px */
  margin-bottom: 2rem; /* 32px */
}

/* Right column wrapper (kept for compatibility) */
.wp-header-col {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
  align-items: center; /* center masthead block */
}

/* Document title block (centered) */
.wp-doc-title {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Dedicated H1 for masthead (does not touch global h1 rules) */
.wp-doc-h1 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: 0.2px;
  font-size: clamp(1.9rem, 2.7vw, 2.8rem);
  font-weight: 700;
}

/* Meta line under masthead title (centered) */
.wp-doc-meta {
  margin-top: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  justify-content: center; /* centers badge + status */
  gap: 0.625rem; /* 10px */
  flex-wrap: wrap;
  min-width: 0;
  text-align: center;
}

/* Badge/Status */
.wp-badge {
  background: var(--brand);
  color: #fff;
  padding: 0.375rem 0.625rem; /* 6px 10px */
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.wp-status {
  color: var(--ink-muted);
  font-weight: 600;
}

/* Header-Card */
.wp-header {
  width: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), transparent);
  border-radius: 1.25rem; /* 20px */
  box-shadow: var(--shadow);
  margin-top: 0;
}

.wp-header-top {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.wp-title { margin-top: var(--space-2); }
.wp-sub {
  font-size: var(--lead);
  color: var(--ink);
  margin-top: var(--space-2);
}
.wp-meta { margin-top: var(--space-2); }

/* Main layout with sticky TOC */
.wp-layout {
  display: grid;
  grid-template-columns: minmax(15rem, 18.75rem) minmax(0, 1fr); /* 240–300px */
  gap: var(--gap);
  margin-top: var(--space-5);
}

.wp-aside {
  position: sticky;
  top: 1.5rem; /* 24px */
  height: max-content;
}

.wp-main { min-width: 0; }

/* --------- TOC --------- */

.wp-toc.wp-card { padding: var(--space-4); }
.toc-title {
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
.toc-list {
  list-style: decimal;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.625rem; /* 10px */
}
.toc-list a {
  display: inline-block;
  padding: 0.25rem 0; /* 4px 0 */
}

/* TOC: active item (set aria-current="true" via JS) */
.wp-toc a[aria-current="true"] {
  font-weight: 700;
  text-decoration: underline;
}

/* --------- Sections / Cards / Grid --------- */

.wp-section {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.wp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.wp-grid {
  display: grid;
  gap: var(--gap);
}
.wp-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.wp-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* --------- Tables --------- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.75rem; /* 12px */
  border: 1px solid var(--border);
  background: var(--surface);
}

.wp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 40rem; /* 640px */
}

.wp-table th,
.wp-table td {
  text-align: left;
  padding: 0.875rem 1rem; /* 14px 16px */
  vertical-align: top;
}

.wp-table thead th {
  background: var(--surface-2);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}

.wp-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.wp-table tbody tr:hover td {
  background: rgba(15, 23, 42, 0.32);
}

.wp-table caption {
  font-weight: 600;
  padding: 0.5rem 0.75rem; /* 8px 12px */
  text-align: left;
  color: var(--ink-muted);
}

.pill {
  display: inline-block;
  padding: 0.375rem 0.625rem; /* 6px 10px */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
}

/* --------- Lists --------- */

.checklist {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}
.checklist li {
  position: relative;
  padding-left: 1.75rem; /* 28px */
  margin-bottom: 0.5rem; /* 8px */
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem; /* 8px */
  width: 1rem; /* 16px */
  height: 1rem; /* 16px */
  border-radius: 0.25rem; /* 4px */
  border: 0.125rem solid var(--ok); /* 2px */
}

.bullets { padding-left: 1.2rem; }

.compact-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-3);
}
.compact-list li { margin: 0.25rem 0; } /* 4px */

.ordered { padding-left: 1.2rem; }

/* --------- Key Facts / Notes / Alerts --------- */

.kp {
  background: linear-gradient(180deg, var(--surface), transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}

.warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid color-mix(in oklab, var(--warn) 60%, var(--border));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

.risk {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid color-mix(in oklab, var(--danger) 60%, var(--border));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}

.subheading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink);
}

/* --------- Code --------- */

.codeblock {
  background: #0b1220;
  color: #e5edf7;
  border-radius: 0.75rem; /* 12px */
  padding: 1rem; /* 16px */
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.15);
}

/* --------- Footer --------- */

.wp-footer {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.to-top {
  display: inline-block;
  padding: 0.5rem 0.75rem; /* 8px 12px */
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

/* --------- Responsive --------- */

@media (max-width: 61.25rem) { /* 980px */
  .wp-layout { grid-template-columns: 1fr; }
  .wp-aside { position: static; }
  .wp-table { min-width: 40rem; } /* keep scrollable */
}

@media (max-width: 56.25rem) { /* 900px */
  .wp-wrap { padding: 1.5rem var(--gutter); } /* 24px */
  .wp-header { padding: 1.5rem 1rem; } /* 24px 16px */
  .wp-header-wrap { margin-bottom: 1.5rem; } /* 24px */
  .wp-section { padding: 1.5rem 1rem; margin-bottom: 1.5rem; } /* 24px 16px / 24px */
  .wp-card { padding: 1rem; } /* 16px */
  .wp-table th, .wp-table td { padding: 0.75rem 0.75rem; } /* 12px */

  .wp-grid.cols-2,
  .wp-grid.cols-3 { grid-template-columns: 1fr; }
}

@media (max-width: 43.75rem) { /* 700px */
  .wp-header-wrap {
    justify-items: center;
    row-gap: 0.875rem; /* 14px */
    margin-bottom: 1.375rem; /* 22px */
  }

  .wp-header-col{
    width: 100%;
    gap: 0.875rem; /* 14px */
    align-items: center;
  }

  .wp-doc-title{
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .wp-doc-meta{
    justify-content: center;
  }
}

@media (max-width: 28.75rem) { /* 460px */
  .codeblock {
    padding: 0.75rem; /* 12px */
    font-size: 0.9rem;
  }
  .wp-table th, .wp-table td { padding: 0.625rem 0.625rem; } /* 10px */
}

/* --------- Print --------- */

@media print {
  :root {
    --bg:#fff;
    --surface:#fff;
    --surface-2:#fff;
    --border:#ddd;
    --ink:#000;
    --ink-muted:#444;
    --shadow:none;
  }
  body { background: #fff; }
  .wp-wrap { padding: 0; }
  .wp-header,
  .wp-section,
  .wp-footer,
  .wp-card {
    break-inside: avoid;
    box-shadow: none;
  }
  .wp-layout { display: block; }
  .wp-aside { display: none; }
  a { color: #000; text-decoration: underline; }
}

/* --------- Reduced motion --------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------- Whitepaper: Social & Reference Links (scoped) --------- */

.wp-header .hero-socials.hero-socials-top {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  margin-top: -2.4375rem; /* -39px */
}

.wp-header .hero-socials.hero-socials-top .social-list {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  flex-wrap: nowrap;          /* desktop: 1 row */
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.wp-header .hero-socials .social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem; /* 7px */
  padding: 0.4375rem 0.75rem; /* 7px 12px */
  border-radius: 999px;

  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;

  color: var(--ink-muted);
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);

  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.15s ease;
}

.wp-header .hero-socials .social-list a:hover,
.wp-header .hero-socials .social-list a:focus-visible {
  color: var(--ink);
  border-color: rgba(92,200,255,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,0.26); /* 10px 22px */
}

.wp-header .hero-socials .social-list a:focus-visible {
  outline: 0.1875rem solid rgba(92,200,255,0.45); /* 3px */
  outline-offset: 0.125rem; /* 2px */
}

@media (max-width: 56.25rem) { /* 900px */
  .wp-header .hero-socials.hero-socials-top {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .wp-header .hero-socials.hero-socials-top .social-list {
    flex-wrap: wrap;
    gap: 0.625rem 0.75rem; /* 10px 12px */
  }
}

@media (max-width: 40rem) { /* 640px */
  .wp-header .hero-socials.hero-socials-top .social-list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 0.625rem 0.75rem; /* 10px 12px */
  }
}

/* Spacing between Socials and "Wie du dieses Whitepaper lesen kannst" */
.wp-header .info-callout {
  margin-top: 3.125rem; /* 50px */
}

/* =========================================================
   Viewport Logo (outside layout / cards)
   - absolute (as in your current implementation)
   - easy to move/resize via CSS variables
   - avoids interfering with skip-link and content
   ========================================================= */

/* Defaults: adjust here anytime */
:root {
  /* Original values kept where possible */
  --gfc-logo-top: 0.375rem;   /* 6px */
  --gfc-logo-size: 2.875rem;  /* 46px */
  --gfc-logo-scale: 2.9;      /* scale multiplier */
  --gfc-logo-z: 50;           /* above content, below modals if any */

  /* Optional micro-tuning (kept neutral by default) */
  --gfc-logo-offset-x: 0rem;
  --gfc-logo-offset-y: 0rem;

  /*
    FIX: Container-anchored left position
    - ties logo to the left edge of the centered whitepaper container
    - respects --gutter as a minimum viewport margin
  */
  --gfc-logo-left: max(
    var(--gutter),
    calc((100vw - var(--container-maxw)) / 2 + var(--gfc-logo-offset-x))
  );

  /* Safe-area (notch) aware top */
  --gfc-logo-top-safe: calc(env(safe-area-inset-top, 0px) + var(--gfc-logo-top) + var(--gfc-logo-offset-y));
}

/* Anchor wrapper */
.gfc-viewport-logo {
  position: absolute;
  top: var(--gfc-logo-top-safe);
  left: var(--gfc-logo-left);
  z-index: var(--gfc-logo-z);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--gfc-logo-size) * var(--gfc-logo-scale));
  height: calc(var(--gfc-logo-size) * var(--gfc-logo-scale));
  border-radius: 0.75rem; /* 12px */

  text-decoration: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,0.22); /* 10px 22px */

  pointer-events: auto;
}

/* Image: always fits wrapper */
.gfc-viewport-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  opacity: 0.95;
  filter: drop-shadow(0 0.5rem 1.125rem rgba(0,0,0,0.25)); /* 8px 18px */
}

/* Hover/Focus: calm but clear */
.gfc-viewport-logo:hover,
.gfc-viewport-logo:focus-visible {
  border-color: rgba(92,200,255,0.38);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.28); /* 14px 28px */
  text-decoration: none;
}

.gfc-viewport-logo:focus-visible {
  outline: 0.1875rem solid rgba(92,200,255,0.45); /* 3px */
  outline-offset: 0.1875rem; /* 3px */
}

/* Print: remove the floating logo to keep document clean */
@media print {
  .gfc-viewport-logo { display: none !important; }
}

/* Reader Guide heading refinement */
.wp-header .info-callout > h2.small {
  margin-bottom: calc(var(--space-3) * 1.2);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.15px;
}

/* =========================================================
   Viewport Logo – Mobile fine tuning ONLY
   (Desktop bleibt unverändert)
   NOTE: scoped to <=640px to avoid 641–700px in-between behavior
   ========================================================= */

/* Mobile Controls (edit only these values) */
@media (max-width: 40rem) { /* 640px */
  :root {
    --gfc-logo-top: 3.75rem; /* 60px */

    --gfc-logo-size: 2.5rem; /* 40px */
    --gfc-logo-scale: 2.2;

    /* IMPORTANT: do NOT override --gfc-logo-left anymore */
  }
}

/* Optional: sehr kleine Geräte separat feinjustieren */
@media (max-width: 26.25rem) { /* 420px */
  :root {
    --gfc-logo-top: 0.625rem; /* 10px */
    --gfc-logo-size: 2.375rem; /* 38px */
    --gfc-logo-scale: 2.0;

    /* IMPORTANT: do NOT override --gfc-logo-left anymore */
  }
}

/* Very small phones: micro-tightening (320–390px) */
@media (max-width: 24.375rem) { /* 390px */
  :root {
    --gfc-logo-top: 0.5rem; /* 8px */
    --gfc-logo-size: 2.25rem; /* 36px */
    --gfc-logo-scale: 1.9;

    /* IMPORTANT: do NOT override --gfc-logo-left anymore */
  }
}

/* =========================================================
   Whitepaper: Language Switch – Mobile fine tuning ONLY
   Desktop bleibt unverändert
   NOTE: scoped to <=640px to avoid 641–700px in-between behavior
   ========================================================= */

@media (max-width: 40rem) { /* 640px */
  :root {
    --wp-lang-top: 0.1875rem; /* 3px */
    --wp-lang-right: 0.75rem; /* 12px */

    --wp-lang-font: 0.85rem;
    --wp-lang-pad-y: 0.1875rem; /* 3px */
    --wp-lang-pad-x: 0.5rem;    /* 8px */
  }

  .wp-lang-switch {
    position: fixed;
    top: var(--wp-lang-top);
    right: var(--wp-lang-right);
    z-index: var(--wp-lang-z, 49);

    margin: 0;
    text-align: right;
    font-size: var(--wp-lang-font);
  }

  .wp-lang-switch .lang-link {
    padding: var(--wp-lang-pad-y) var(--wp-lang-pad-x);
  }
}

@media (max-width: 26.25rem) { /* 420px */
  :root {
    --wp-lang-top: 0.5rem; /* 8px */
    --wp-lang-right: 0.625rem; /* 10px */
    --wp-lang-font: 0.82rem;
    --wp-lang-pad-y: 0.125rem; /* 2px */
    --wp-lang-pad-x: 0.4375rem; /* 7px */
  }
}

@media print {
  .wp-lang-switch { display: none !important; }
}

/* =========================================================
   Whitepaper: Social Links – Mobile fine tuning ONLY
   Desktop bleibt unverändert
   ========================================================= */

@media (max-width: 56.25rem) { /* 900px */
  :root {
    --wp-social-top: 1.25rem; /* 20px */
    --wp-social-left: 0rem;   /* 0px */

    --wp-social-gap-x: 0.75rem; /* 12px */
    --wp-social-gap-y: 0.625rem; /* 10px */
    --wp-social-font: 0.9rem;
    --wp-social-pad-y: 0.4375rem; /* 7px */
    --wp-social-pad-x: 0.75rem;   /* 12px */

    --wp-social-cols: 3;
  }

  .wp-header .hero-socials.hero-socials-top {
    transform: translate(var(--wp-social-left), var(--wp-social-top));
    margin-top: -2.4375rem; /* -39px */
  }

  .wp-header .hero-socials.hero-socials-top .social-list {
    gap: var(--wp-social-gap-y) var(--wp-social-gap-x);
  }

  .wp-header .hero-socials .social-list a {
    font-size: var(--wp-social-font);
    padding: var(--wp-social-pad-y) var(--wp-social-pad-x);
  }
}

@media (max-width: 40rem) { /* 640px */
  .wp-header .hero-socials.hero-socials-top .social-list {
    grid-template-columns: repeat(var(--wp-social-cols, 3), max-content);
  }
}

@media (max-width: 26.25rem) { /* 420px */
  :root {
    --wp-social-gap-x: 0.625rem; /* 10px */
    --wp-social-gap-y: 0.5625rem; /* 9px */
    --wp-social-font: 0.86rem;
    --wp-social-pad-y: 0.375rem; /* 6px */
    --wp-social-pad-x: 0.625rem; /* 10px */
    --wp-social-cols: 2;
  }
}

/* Very small phones: force 2 cols for socials to avoid overflow */
@media (max-width: 24.375rem) { /* 390px */
  :root {
    --wp-social-cols: 2;
    --wp-social-font: 0.85rem;
    --wp-social-pad-y: 0.375rem; /* 6px */
    --wp-social-pad-x: 0.5625rem; /* 9px */
  }
}

@media print {
  .wp-header .hero-socials.hero-socials-top { display: none !important; }
}