/* GSB reference layout v4 — additive reference stylesheet */
:root {
  --gsb-navy: #003366;
  --gsb-blue: #2ba8e3;
  --gsb-blue-dark: #1f7eb7;
  --gsb-ink: #17212b;
  --gsb-muted: #536273;
  --gsb-line: #d8e2ea;
  --gsb-soft: #f5f9fc;
  --gsb-soft-blue: #eef8fd;
  --gsb-safe: #7f1d1d;
  --gsb-safe-bg: #fff7f7;
  --gsb-success: #1f6f43;
  --gsb-max: 1120px;
}

.gsb-reference-v1 { color: var(--gsb-ink); }
.gsb-reference-v1 * { box-sizing: border-box; }
.gsb-reference-v1 .gsb-ref-wrap,
.gsb-reference-v1 > section.gsb-ref-section,
.gsb-reference-v1 main.gsb-ref-main { max-width: var(--gsb-max); margin-left: auto; margin-right: auto; }

.gsb-reference-v1 .gsb-ref-hero {
  max-width: var(--gsb-max);
  margin: 28px auto 18px;
  padding: clamp(24px, 4vw, 54px);
  background: linear-gradient(145deg, #ffffff 0%, #eef8fd 100%);
  border: 1px solid var(--gsb-line);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(0, 51, 102, .10);
  text-align: left;
}
.gsb-reference-v1 .gsb-ref-hero h1 {
  color: var(--gsb-navy);
  margin: .3rem 0 .9rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.gsb-reference-v1 .gsb-ref-hero .gsb-ref-lede {
  color: #27384a;
  max-width: 760px;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
  margin: 0 0 1.2rem;
}
.gsb-reference-v1 .gsb-ref-kicker {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gsb-blue-dark);
}
.gsb-reference-v1 .gsb-ref-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(230px, .7fr);
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
}
.gsb-reference-v1 .gsb-ref-cover {
  width: min(100%, 300px);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(15, 35, 55, .22);
}
.gsb-reference-v1 .gsb-ref-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.3rem 0 .8rem; }
.gsb-reference-v1 .gsb-ref-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 750;
  line-height: 1.25;
  border: 2px solid transparent;
}
.gsb-reference-v1 .gsb-ref-btn-primary { background: var(--gsb-navy); color: white; }
.gsb-reference-v1 .gsb-ref-btn-primary:hover { background: #00284f; color: white; }
.gsb-reference-v1 .gsb-ref-btn-secondary { background: white; color: var(--gsb-navy); border-color: #b8cfdf; }
.gsb-reference-v1 .gsb-ref-btn-secondary:hover { border-color: var(--gsb-blue); color: var(--gsb-navy); }
.gsb-reference-v1 .gsb-ref-btn:focus-visible,
.gsb-reference-v1 a:focus-visible,
.gsb-reference-v1 button:focus-visible { outline: 3px solid #f6b800; outline-offset: 3px; }

.gsb-reference-v1 .gsb-ref-note {
  font-size: .93rem;
  color: var(--gsb-muted);
  line-height: 1.55;
}
.gsb-reference-v1 .gsb-ref-section {
  padding: clamp(24px, 4vw, 48px);
  margin-top: 18px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--gsb-line);
  border-radius: 18px;
}
.gsb-reference-v1 .gsb-ref-section h2 { color: var(--gsb-navy); margin-top: 0; line-height: 1.2; }
.gsb-reference-v1 .gsb-ref-section h3 { color: #164c73; }
.gsb-reference-v1 .gsb-ref-section p,
.gsb-reference-v1 .gsb-ref-section li { line-height: 1.68; }
.gsb-reference-v1 .gsb-ref-intro { font-size: 1.08rem; max-width: 850px; color: #2d3c4d; }
.gsb-reference-v1 .gsb-ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.gsb-reference-v1 .gsb-ref-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gsb-reference-v1 .gsb-ref-card {
  background: var(--gsb-soft);
  border: 1px solid #dce7ee;
  border-radius: 14px;
  padding: 20px;
}
.gsb-reference-v1 .gsb-ref-card h3 { margin-top: 0; }
.gsb-reference-v1 .gsb-ref-number {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gsb-navy);
  color: white;
  font-weight: 800;
  margin-bottom: 10px;
}
.gsb-reference-v1 .gsb-ref-quote {
  margin: 14px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--gsb-blue);
  background: #f7fbfe;
  font-weight: 650;
}
.gsb-reference-v1 .gsb-ref-caution {
  background: #fff9eb;
  border: 1px solid #e8c66a;
  border-left: 5px solid #c18a00;
  padding: 18px 20px;
  border-radius: 12px;
  margin: 18px 0;
}
.gsb-reference-v1 .gsb-ref-safety {
  background: var(--gsb-safe-bg);
  border: 2px solid #b85c5c;
  border-left: 7px solid var(--gsb-safe);
  padding: 22px;
  border-radius: 14px;
  margin: 18px 0;
}
.gsb-reference-v1 .gsb-ref-safety h2,
.gsb-reference-v1 .gsb-ref-safety h3 { color: var(--gsb-safe); }
.gsb-reference-v1 .gsb-ref-legal {
  background: var(--gsb-soft-blue);
  border: 1px solid #b7dcef;
  border-left: 6px solid var(--gsb-blue-dark);
  padding: 20px;
  border-radius: 14px;
}
.gsb-reference-v1 .gsb-ref-book-card {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  padding: 22px;
  margin-top: 26px;
  border-radius: 16px;
  background: #eef8fd;
  border: 1px solid #bfdeef;
}
.gsb-reference-v1 .gsb-ref-book-card img { width: 100%; height: auto; border-radius: 7px; }
.gsb-reference-v1 .gsb-ref-book-card h3 { margin: 0 0 8px; color: var(--gsb-navy); }
.gsb-reference-v1 .gsb-ref-book-card p { margin: 0 0 12px; }
.gsb-reference-v1 .gsb-ref-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.gsb-reference-v1 .gsb-ref-chip { background: #e6f3fa; color: #123e5d; padding: 7px 11px; border-radius: 999px; font-size: .9rem; font-weight: 650; }
.gsb-reference-v1 .gsb-ref-small-print { font-size: .9rem; color: var(--gsb-muted); }
.gsb-reference-v1 .gsb-ref-list { padding-left: 1.25rem; }
.gsb-reference-v1 .gsb-ref-local-nav { max-width: var(--gsb-max); margin: 0 auto 18px; padding: 0 8px; display:flex; flex-wrap:wrap; gap:8px; }
.gsb-reference-v1 .gsb-ref-local-nav a { padding: 8px 11px; border-radius: 999px; text-decoration:none; background:#f1f6f9; color:#23445d; border:1px solid #d7e3ea; font-size:.92rem; }
.gsb-reference-v1 .gsb-ref-local-nav a:hover { background:#e6f3fa; }

@media (max-width: 760px) {
  .gsb-reference-v1 .gsb-ref-hero { margin: 14px 12px; border-radius: 18px; padding: 24px 18px; }
  .gsb-reference-v1 .gsb-ref-hero-grid { grid-template-columns: 1fr; }
  .gsb-reference-v1 .gsb-ref-cover { max-width: 220px; }
  .gsb-reference-v1 .gsb-ref-section { margin: 12px; padding: 22px 18px; border-radius: 15px; }
  .gsb-reference-v1 .gsb-ref-grid, .gsb-reference-v1 .gsb-ref-grid-2 { grid-template-columns: 1fr; }
  .gsb-reference-v1 .gsb-ref-actions { flex-direction: column; }
  .gsb-reference-v1 .gsb-ref-btn { width: 100%; }
  .gsb-reference-v1 .gsb-ref-book-card { grid-template-columns: 1fr; }
  .gsb-reference-v1 .gsb-ref-book-card img { width: 110px; }
  .gsb-reference-v1 .gsb-ref-local-nav { margin: 0 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .gsb-reference-v1 *, .gsb-reference-v1 *::before, .gsb-reference-v1 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* -----------------------------------------------------------------
   V3 mobile containment + readability guard
   Applies after legacy inline styles and prevents historical page CSS
   from forcing a viewport wider than the device.
   ----------------------------------------------------------------- */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

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

table {
  max-width: 100%;
}

header,
main,
article,
section,
footer,
nav,
.gsb-reference-v1 {
  min-width: 0;
}

header h1,
header h2,
header h3,
header p,
.gsb-reference-v1 h1,
.gsb-reference-v1 h2,
.gsb-reference-v1 h3,
.gsb-reference-v1 p,
.gsb-reference-v1 li {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Existing domestic-violence safety block lives inside the historical header.
   Explicit colors avoid white inherited header text on a near-white panel. */
header #sicherheit-vor-kommunikation {
  color: var(--gsb-ink) !important;
  background: var(--gsb-safe-bg) !important;
  text-align: left !important;
  width: 100% !important;
  max-width: var(--gsb-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

header #sicherheit-vor-kommunikation h2,
header #sicherheit-vor-kommunikation h3 {
  color: var(--gsb-navy) !important;
  text-align: center !important;
}

header #sicherheit-vor-kommunikation p,
header #sicherheit-vor-kommunikation strong {
  color: var(--gsb-ink) !important;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  body {
    min-width: 0 !important;
  }

  header:not(.gsb-ref-hero) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 32px 18px !important;
  }

  header:not(.gsb-ref-hero) h1 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.015em !important;
  }

  header:not(.gsb-ref-hero) p {
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .gsb-reference-v1 .gsb-ref-hero {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin: 14px 12px !important;
    padding: 24px 18px !important;
  }

  .gsb-reference-v1 .gsb-ref-hero h1 {
    font-size: clamp(1.8rem, 8.2vw, 2.35rem) !important;
    line-height: 1.12 !important;
  }

  .gsb-reference-v1 .gsb-ref-section {
    width: auto !important;
    max-width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 22px 18px !important;
  }

  .gsb-reference-v1 .gsb-ref-section h2 {
    font-size: clamp(1.45rem, 6.6vw, 1.9rem) !important;
    line-height: 1.18 !important;
  }

  .gsb-reference-v1 .gsb-ref-section h3 {
    line-height: 1.25 !important;
  }

  header #sicherheit-vor-kommunikation {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 !important;
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  header #sicherheit-vor-kommunikation p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  nav,
  nav .menu,
  nav .nav-links,
  nav ul {
    max-width: 100% !important;
  }
}


/* V4: true-390 refinement for the book model-precision table only. */
.gsb-model-table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .gsb-model-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .gsb-model-table th,
  .gsb-model-table td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 6px !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    vertical-align: top;
  }

  .gsb-model-table th:nth-child(1),
  .gsb-model-table td:nth-child(1) { width: 34% !important; }

  .gsb-model-table th:nth-child(2),
  .gsb-model-table td:nth-child(2) { width: 42% !important; }

  .gsb-model-table th:nth-child(3),
  .gsb-model-table td:nth-child(3) { width: 24% !important; }
}