/* ==========================================================================
   GDS Corporate Design Styleguide – Stylesheet
   Aufbau:
   1. Schriften          5. Kapitel-Bänder        9. Anwendungsbeispiele
   2. Design-Token       6. Inhaltsbereich        10. Fußbereich / Rückseite
   3. Grundlagen         7. Komponenten           11. Mobil
   4. Kopf / Navigation  8. Logo-Grafiken          12. Druck (PDF)
   ========================================================================== */

/* 1. Schriften – lokal eingebunden, keine Verbindung zu Google ------------- */
@font-face { font-family: "Titillium Web"; font-weight: 300; font-style: normal;  src: url("../fonts/TitilliumWeb-Light.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 300; font-style: italic;  src: url("../fonts/TitilliumWeb-LightItalic.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: normal;  src: url("../fonts/TitilliumWeb-Regular.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: italic;  src: url("../fonts/TitilliumWeb-Italic.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal;  src: url("../fonts/TitilliumWeb-SemiBold.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: italic;  src: url("../fonts/TitilliumWeb-SemiBoldItalic.woff") format("woff"); }
@font-face { font-family: "Titillium Web"; font-weight: 700; font-style: normal;  src: url("../fonts/TitilliumWeb-Bold.woff") format("woff"); }

/* 2. Design-Token ---------------------------------------------------------- */
:root {
  /* Primärfarben */
  --gds-rot: #C20430;          /* Pantone 200 C  */
  --gds-anthrazit: #4A4F55;    /* Pantone 7540 C */
  /* Ergänzungsfarben */
  --gds-weiss: #FFFFFF;
  --gds-hellgrau: #F2F2F3;
  --gds-schwarz: #000000;
  /* Abstufungen */
  --gds-rot-10: #F9E6EA;
  --gds-rot-20: #F3CDD6;
  --gds-anthrazit-70: #77797F;
  --gds-anthrazit-60: #929599;
  --gds-anthrazit-20: #DBDCDD;
  --gds-linie: #D5D6D8;

  --gds-font: "Titillium Web", Arial, Helvetica, sans-serif;

  /* Druckformat; für die Druckversion mit Beschnitt überschreibt html.bleed diese Werte */
  --page-w: 210mm;
  --page-h: 297mm;
  --b: 0mm;
}
html.bleed { --page-w: 216mm; --page-h: 303mm; --b: 3mm; }

/* 3. Grundlagen ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 400 17px/1.6 var(--gds-font);
  color: var(--gds-anthrazit);
  background: var(--gds-weiss);
  font-kerning: normal;
}
img, svg { max-width: 100%; }
a { color: var(--gds-rot); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gds-rot); outline-offset: 3px; border-radius: 2px; }
strong, b { font-weight: 600; }
p { margin: 0 0 0.9em; max-width: 72ch; }
.print-only, .print-inline { display: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: #fff; padding: 8px 14px; }

/* 4. Kopf (Deckblatt) und Navigation --------------------------------------- */
.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 7vw, 112px);
  background: var(--gds-weiss) url("../img/waves/deckblatt.svg") no-repeat;
  background-size: max(78vw, 820px) auto;
  background-position: right -6vw top 22%;
  overflow: hidden;
}
.cover__logo { width: clamp(170px, 18vw, 250px); height: auto; display: block; }
.cover__text { margin-top: auto; margin-bottom: auto; padding: 8vh 0; max-width: 760px; }
.cover__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.cover__title span { display: block; }
.cover__sub { margin: 22px 0 0; font-weight: 300; font-size: clamp(20px, 2.2vw, 28px); color: var(--gds-rot); }
.cover__meta { margin: 0; font-size: 15px; color: var(--gds-anthrazit-70); }
.cover__meta strong { color: var(--gds-anthrazit); }
.cover__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 24px;
  border-radius: 999px;
  font: 600 16px/1.2 var(--gds-font);
  text-decoration: none;
  border: 2px solid var(--gds-rot);
  transition: background-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--gds-rot); color: #fff; }
.btn--primary:hover { background: #A5032A; border-color: #A5032A; }
.btn--secondary { background: #fff; color: var(--gds-rot); }
.btn--secondary:hover { background: var(--gds-rot-10); }
.btn small { font-weight: 400; opacity: .85; }

.layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.nav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 36px 22px 36px 28px;
  border-right: 1px solid var(--gds-linie);
  font-size: 15px;
}
.nav__logo { width: 110px; display: block; margin-bottom: 30px; }
.nav ol { list-style: none; margin: 0; padding: 0; }
.nav > ol > li { margin-bottom: 14px; }
.nav a { color: var(--gds-anthrazit); text-decoration: none; display: block; padding: 3px 0 3px 12px; border-left: 3px solid transparent; }
.nav a:hover { color: var(--gds-rot); }
.nav a.is-active { color: var(--gds-rot); border-left-color: var(--gds-rot); }
.nav a.is-current-chapter { color: var(--gds-rot); }
.chapter-body h2[id] { scroll-margin-top: 28px; }
.nav__chapter { font-weight: 600; }
.nav__chapter b { color: var(--gds-rot); margin-right: 6px; }
.nav ol ol a { font-size: 14px; color: var(--gds-anthrazit-70); padding-left: 30px; }
.nav__downloads { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gds-linie); display: grid; gap: 8px; }
.nav__downloads a { padding-left: 0; border: 0; font-weight: 600; color: var(--gds-rot); }
.nav-toggle { display: none; }

/* 5. Kapitel-Bänder (am Bildschirm Band, im Druck ganze Kapitelseite) ------- */
.chapter-band {
  position: relative;
  min-height: 440px;
  padding: 96px clamp(20px, 5vw, 72px) 64px;
  color: #fff;
  background-color: var(--gds-rot);
  background-image: var(--wave);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 78%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.chapter-band__num { margin: 0; font-weight: 700; font-size: clamp(88px, 12vw, 150px); line-height: .85; letter-spacing: -0.02em; }
.chapter-band h1 { margin: 18px 0 10px; font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
.chapter-band__intro { margin: 0; font-weight: 300; font-size: 21px; line-height: 1.45; max-width: 34em; }
.chapter-band__logo { display: none; }
.band-1 { --wave: url("../img/waves/kapitel-1.svg"); }
.band-2 { --wave: url("../img/waves/kapitel-2.svg"); }
.band-3 { --wave: url("../img/waves/kapitel-3.svg"); }
.band-4 { --wave: url("../img/waves/kapitel-4.svg"); }
.band-5 { --wave: url("../img/waves/kapitel-5.svg"); }
.band-6 { --wave: url("../img/waves/kapitel-6.svg"); }
html.bleed .band-1 { --wave: url("../img/waves-bleed/kapitel-1.svg"); }
html.bleed .band-2 { --wave: url("../img/waves-bleed/kapitel-2.svg"); }
html.bleed .band-3 { --wave: url("../img/waves-bleed/kapitel-3.svg"); }
html.bleed .band-4 { --wave: url("../img/waves-bleed/kapitel-4.svg"); }
html.bleed .band-5 { --wave: url("../img/waves-bleed/kapitel-5.svg"); }
html.bleed .band-6 { --wave: url("../img/waves-bleed/kapitel-6.svg"); }

/* 6. Inhaltsbereich -------------------------------------------------------- */
.chapter-body { max-width: 900px; padding: 56px clamp(20px, 5vw, 72px) 96px; }
.chapter-body > :first-child { margin-top: 0; }
h2 {
  margin: 72px 0 22px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--gds-rot);
  font-weight: 700; font-size: 30px; line-height: 1.2;
  color: var(--gds-rot);
}
h3 { margin: 34px 0 10px; font-weight: 600; font-size: 21px; line-height: 1.3; }
.lead { font-weight: 300; font-size: 21px; line-height: 1.5; margin-bottom: 1.1em; }
.small { font-size: 13.5px; color: var(--gds-anthrazit-70); }
ul.list { list-style: none; margin: 0 0 1.1em; padding: 0; max-width: 72ch; }
ul.list li { position: relative; padding-left: 22px; margin-bottom: 6px; }
ul.list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--gds-rot); }
figure { margin: 30px 0; }
figcaption { margin-top: 10px; font-size: 13.5px; color: var(--gds-anthrazit-70); }
code, pre { font-family: Consolas, "DejaVu Sans Mono", monospace; }
pre { background: var(--gds-hellgrau); padding: 18px 22px; font-size: 14px; line-height: 1.55; overflow-x: auto; border-left: 4px solid var(--gds-anthrazit); }

/* 7. Komponenten ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 18px 0 26px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
table.data th { background: var(--gds-anthrazit); color: #fff; font-weight: 600; text-align: left; padding: 9px 14px; }
table.data td { padding: 9px 14px; vertical-align: top; border-bottom: 1px solid var(--gds-linie); }
table.data tbody tr:nth-child(even) td { background: var(--gds-hellgrau); }
table.data td:first-child { font-weight: 600; }
table.data.plain td:first-child { font-weight: 400; }

.note { background: var(--gds-hellgrau); border-left: 4px solid var(--gds-rot); padding: 16px 22px; margin: 22px 0; }
.note p { margin: 0; }
.note p + p { margin-top: .6em; }
.note__title { font-weight: 600; color: var(--gds-rot); }

.status {
  display: flex; gap: 18px; align-items: flex-start;
  border: 1.5px solid var(--gds-rot); padding: 18px 22px; margin: 0 0 30px;
}
.status svg { width: 30px; height: 30px; flex: none; color: var(--gds-rot); }
.status p { margin: 0; }
.status p + p { margin-top: .5em; }
.tag {
  display: inline-block; vertical-align: middle;
  margin-left: 10px; padding: 2px 11px 3px;
  border-radius: 999px; background: var(--gds-rot-10); color: var(--gds-rot);
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
}

/* Farbfelder */
.swatch { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; margin: 18px 0; }
.swatch__chip { color: #fff; padding: 22px; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; }
.swatch__chip strong { font-size: 24px; font-weight: 700; line-height: 1.15; }
.swatch__chip span { font-size: 14px; }
.swatch dl { margin: 0; background: var(--gds-hellgrau); padding: 18px 24px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; align-content: center; font-size: 15px; }
.swatch dt { font-weight: 600; }
.swatch dd { margin: 0; font-variant-numeric: tabular-nums; }

.tints { display: grid; grid-template-columns: repeat(6, 1fr); margin: 8px 0 22px; }
.tints div { aspect-ratio: 5 / 3; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.tints span { display: block; text-align: center; font-size: 12.5px; padding-top: 6px; color: var(--gds-anthrazit-70); font-variant-numeric: tabular-nums; }
.tints-label { font-weight: 600; margin: 22px 0 6px; }

.ratio { display: flex; height: 44px; margin: 18px 0 14px; }
.ratio div { height: 100%; }

.chip-inline { display: inline-block; width: 30px; height: 20px; vertical-align: middle; border: 1px solid var(--gds-linie); }

/* 8. Logo-Grafiken --------------------------------------------------------- */
.logo-hero { display: flex; justify-content: center; padding: 34px 0; }
.logo-hero img { width: min(420px, 80%); }
.diagram { display: block; width: 100%; height: auto; font-family: var(--gds-font); }
.diagram--einheit { max-width: 620px; margin: 0 auto; }

.logo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.logo-pair figure { margin: 0; }
.logo-pair .logo-tile img { width: 66%; }
.diagram-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; }
.logo-grid--wm .logo-tile img { width: 56%; }
.wm-fake { width: 70%; display: flex; flex-direction: column; align-items: center; gap: 4%; }
.wm-fake img { width: 80%; }
.wm-fake span { font-size: 13px; font-weight: 300; letter-spacing: .02em; }
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.logo-grid figure { margin: 0; }
.logo-tile { aspect-ratio: 14 / 9; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.logo-tile img { width: 62%; height: auto; }
.logo-tile--line { outline: 1px solid var(--gds-linie); outline-offset: -1px; }
.logo-tile--photo {
  background:
    radial-gradient(circle at 25% 30%, rgba(88, 110, 140, .55), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(120, 60, 70, .5), transparent 50%),
    linear-gradient(135deg, #1c1f24, #2e333a);
}
.logo-tile--busy {
  background-color: #e8b04a;
  background-image:
    repeating-linear-gradient(45deg, rgba(40,120,200,.85) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(-45deg, rgba(60,170,90,.8) 0 14px, transparent 14px 28px);
}
.logo-grid figcaption { margin-top: 8px; }
.x-badge { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; }

.min-size { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin: 22px 0; }
.min-size figure { margin: 0; }
.min-size .min-print { width: 132px; }   /* 35 mm bei 96 dpi */
.min-size .min-screen { width: 180px; }
.min-size .min-wm-print { width: 57px; }   /* 15 mm bei 96 dpi */
.min-size .min-wm-screen { width: 80px; }

.specimen { border-top: 1px solid var(--gds-linie); padding: 18px 0 8px; }
.specimen__label { font-size: 13px; font-weight: 600; color: var(--gds-rot); margin: 0 0 8px; }
.specimen__label span { font-weight: 400; color: var(--gds-anthrazit-70); }
.ex-h1 { font-weight: 700; font-size: 44px; line-height: 1.1; margin: 0; }
.ex-h2 { font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--gds-rot); border-bottom: 1.5px solid var(--gds-rot); padding-bottom: 6px; margin: 0; }
.ex-h3 { font-weight: 600; font-size: 21px; margin: 0; }
.ex-quote { font-weight: 300; font-style: italic; font-size: 21px; line-height: 1.45; border-left: 3px solid var(--gds-rot); padding-left: 18px; margin: 0; max-width: 40em; }
.ex-weights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 8px; }
.ex-weights div { background: var(--gds-hellgrau); padding: 16px 18px; }
.ex-weights b { display: block; font-size: 40px; line-height: 1.1; }
.ex-weights span { font-size: 14px; color: var(--gds-anthrazit-70); }
.ex-alphabet { font-size: 26px; line-height: 1.35; letter-spacing: .01em; margin: 6px 0 0; word-break: break-word; }

/* 9. Anwendungsbeispiele --------------------------------------------------- */
.app-grid { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 32px; align-items: start; margin: 22px 0; }
.app-grid dl { margin: 0; }
.app-grid dt { font-weight: 600; }
.app-grid dd { margin: 0 0 12px; }
.letter { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px var(--gds-linie); }

.cards { display: flex; flex-wrap: wrap; gap: 20px; margin: 22px 0; }
.card {
  width: 340px; aspect-ratio: 85 / 55; padding: 20px 22px;
  box-shadow: 0 0 0 1px var(--gds-linie);
  display: flex; flex-direction: column;
}
.card__logo { width: 120px; margin-bottom: auto; }
.card__name { font-weight: 600; font-size: 16px; line-height: 1.2; margin: 14px 0 0; }
.card__role { font-weight: 300; font-size: 13px; color: var(--gds-rot); margin: 0 0 8px; }
.card__txt { font-size: 11.5px; line-height: 1.45; margin: 0; }
.card--back { background: var(--gds-rot); box-shadow: none; align-items: center; justify-content: center; }
.card--back img { width: 150px; }

.web-band { background: var(--gds-rot); color: #fff; text-align: center; padding: 40px 24px; margin: 22px 0 8px; }
.web-band p { max-width: none; }
.web-band__h { font-weight: 700; font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
.web-band__t { margin: 0 0 20px; }
.web-band__btn { display: inline-block; background: #fff; color: var(--gds-rot); font-weight: 600; padding: 9px 24px; border-radius: 999px; }

.signature { font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45; color: #4A4F55; border: 1px solid var(--gds-linie); padding: 22px 26px; margin: 22px 0 8px; }
.signature p { margin: 0; }
.signature .sig-name { font-weight: 700; margin-top: 14px; }
.signature .sig-role { color: var(--gds-rot); font-size: 13px; }
.signature img { width: 200px; display: block; margin: 16px 0 10px; }
.signature .sig-small { font-size: 12px; }
.signature .sig-legal { font-size: 11px; color: var(--gds-anthrazit-60); margin-top: 6px; }

/* 10. Fußbereich (Bildschirm) / Rückseite (Druck) --------------------------- */
.closing { background: var(--gds-anthrazit); color: #fff; padding: 56px clamp(20px, 7vw, 112px); display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: center; }
.closing img { width: 160px; }
.closing p { margin: 0; line-height: 1.6; }
.closing a { color: #fff; }
.closing__logo-print { display: none; }

/* 11. Mobil ---------------------------------------------------------------- */
@media (max-width: 960px) {
  .layout { display: block; }
  .nav {
    position: sticky; top: 0; z-index: 10; height: auto; max-height: 100vh;
    padding: 0; border-right: 0; border-bottom: 1px solid var(--gds-linie); background: #fff;
  }
  .nav__logo { display: none; }
  .chapter-body h2[id], section[id] { scroll-margin-top: 64px; }
  .nav-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 14px 20px; background: #fff; border: 0; font: 600 16px var(--gds-font); color: var(--gds-anthrazit); cursor: pointer;
  }
  .nav-toggle span { color: var(--gds-rot); }
  .nav__panel { display: none; padding: 6px 20px 22px; }
  .nav.is-open .nav__panel { display: block; }
  .nav.is-open { overflow-y: auto; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .cover { background-size: 760px auto; background-position: right -300px bottom -330px; }
  .chapter-band { min-height: 360px; padding-top: 64px; }
  h2 { font-size: 25px; margin-top: 56px; }
  .lead, .chapter-band__intro { font-size: 19px; }
  .swatch { grid-template-columns: 1fr; }
  .diagram-pair { grid-template-columns: 1fr; }
  .swatch__chip { min-height: 110px; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .tints { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .ex-weights { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: 1fr; }
  .card { width: 100%; }
}

/* 12. Druck (PDF) ===========================================================
   Seitenaufbau: Deckblatt, Inhaltsverzeichnis, je Kapitel eine rote
   Kapitelseite, Inhaltsseiten, Rückseite. Die Wellen der Inhaltsseiten
   werden beim Erzeugen der PDFs als eigene Ebene untergelegt.
   ========================================================================== */
@page {
  size: A4;
  margin: 20mm 22mm 20mm 22mm;
  @bottom-left  { content: "GDS Corporate Design Styleguide, Teil 1"; font: 400 7pt "Titillium Web"; color: #929599; vertical-align: middle; }
  @bottom-right { content: counter(page); font: 600 8pt "Titillium Web"; color: #C20430; vertical-align: middle; }
}
@page cover   { margin: 0; @bottom-left { content: none; } @bottom-right { content: none; } }
@page chapter { margin: 0; background: #C20430; @bottom-left { content: none; } @bottom-right { content: none; } }
@page back    { margin: 0; @bottom-left { content: none; } @bottom-right { content: none; } }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { scroll-behavior: auto; }
  html, body { background: transparent; }
  body { font-size: 9.5pt; line-height: 1.5; }
  .print-only { display: block; }
  .print-inline { display: inline; }
  .screen-only, .nav, .cover__actions, .skip { display: none !important; }
  .layout { display: block; }
  p { orphans: 3; widows: 3; hyphens: auto; }

  /* Deckblatt */
  .cover {
    page: cover; break-after: page;
    width: var(--page-w); height: var(--page-h); min-height: 0;
    padding: 0; display: block;
    background-image: url("../img/waves/deckblatt.svg");
    background-size: 100% 100%; background-position: 0 0;
  }
  html.bleed .cover { background-image: url("../img/waves-bleed/deckblatt.svg"); }
  .cover__logo { position: absolute; top: calc(24mm + var(--b)); left: calc(22mm + var(--b)); width: 66mm; }
  .cover__text { position: absolute; top: calc(92mm + var(--b)); left: calc(22mm + var(--b)); right: calc(22mm + var(--b)); margin: 0; padding: 0; }
  .cover__title { font-size: 42pt; line-height: 1; }
  .cover__sub { font-size: 16pt; margin-top: 7mm; }
  .cover__meta { position: absolute; left: calc(22mm + var(--b)); bottom: calc(16mm + var(--b)); font-size: 8.5pt; }

  /* Inhaltsverzeichnis */
  .toc { break-after: page; }
  .toc h2 { border: 0; color: var(--gds-anthrazit); font-size: 26pt; margin: 0 0 10mm; padding: 0; }
  .toc ol { list-style: none; margin: 0; padding: 0; }
  .toc > ol > li { margin-bottom: 4.2mm; }
  .toc a { display: flex; align-items: baseline; gap: 2mm; color: var(--gds-anthrazit); text-decoration: none; }
  .toc a::after { content: ""; order: 2; flex: 1; border-bottom: 0.5pt dotted var(--gds-anthrazit-60); transform: translateY(-0.8mm); }
  .toc .pn { order: 3; min-width: 7mm; text-align: right; font-variant-numeric: tabular-nums; }
  .toc .toc__chapter { font-weight: 600; font-size: 12pt; }
  .toc .toc__chapter b { color: var(--gds-rot); width: 9mm; display: inline-block; }
  .toc ol ol { margin-top: 1.2mm; }
  .toc ol ol a { font-size: 9.5pt; color: var(--gds-anthrazit-70); padding-left: 11mm; line-height: 1.75; }

  /* Kapitelseiten */
  .chapter-band {
    page: chapter; break-before: page; break-after: page;
    width: var(--page-w); height: var(--page-h); min-height: 0;
    display: block;
    padding: calc(78mm + var(--b)) calc(40mm + var(--b)) 0 calc(22mm + var(--b));
    background-size: 100% 100%; background-position: 0 0;
  }
  .chapter-band__num { font-size: 104pt; }
  .chapter-band h1 { font-size: 32pt; margin: 4mm 0 4mm; }
  .chapter-band__intro { font-size: 13pt; }
  .chapter-band__logo { display: block; position: absolute; left: calc(22mm + var(--b)); bottom: calc(16mm + var(--b)); width: 30mm; }

  /* Inhaltsseiten */
  .chapter-body { max-width: none; padding: 0; }
  h2 { font-size: 15pt; margin: 9mm 0 4mm; padding-bottom: 1.5mm; border-bottom-width: 0.75pt; break-after: avoid; }
  .chapter-body > h2:first-child { margin-top: 0; }
  h3 { font-size: 11.5pt; margin: 6mm 0 2mm; break-after: avoid; }
  .lead { font-size: 12.5pt; }
  .small, figcaption { font-size: 7.5pt; }
  figure, .table-wrap, .note, .status, .swatch, .tints, .logo-grid, .app-grid, .cards, .web-band, .signature, .specimen, pre, .min-size, .ex-weights { break-inside: avoid; }
  .tints-label, .specimen__label { break-after: avoid; }
  .table-wrap { overflow: visible; margin: 3mm 0 5mm; }
  table.data { font-size: 8.5pt; }
  table.data th, table.data td { padding: 1.6mm 2.6mm; }
  table.data tr { break-inside: avoid; }
  thead { display: table-header-group; }
  ul.list li::before { width: 1.6mm; height: 1.6mm; }
  pre { font-size: 7.5pt; padding: 3mm 4mm; white-space: pre-wrap; }
  .note, .status { padding: 3mm 4.5mm; margin: 4mm 0; }
  .status svg { width: 6mm; height: 6mm; }
  .tag { font-size: 7pt; padding: 0.3mm 2.4mm 0.5mm; }

  .swatch__chip { min-height: 30mm; padding: 4mm; }
  .swatch__chip strong { font-size: 14pt; }
  .swatch__chip span, .swatch dl { font-size: 8.5pt; }
  .swatch dl { padding: 3.5mm 5mm; }
  .tints div { font-size: 8pt; }
  .tints span { font-size: 7pt; }
  .ratio { height: 9mm; }

  .logo-hero { padding: 4mm 0; }
  .logo-hero img { width: 75mm; }
  .diagram--einheit { width: 120mm; }
  .logo-grid { gap: 3.5mm; }
  .x-badge { width: 5.5mm; height: 5.5mm; top: 1.5mm; right: 1.5mm; }
  .min-size .min-print { width: 35mm; }  /* Originalgröße */
  .min-size .min-screen { width: 47.6mm; } /* 180 px bei 96 dpi */
  .min-size .min-wm-print { width: 15mm; }  /* Originalgröße */
  .min-size .min-wm-screen { width: 21.2mm; } /* 80 px bei 96 dpi */
  .min-size { gap: 9mm; }
  .logo-pair, .diagram-pair { break-inside: avoid; }
  .logo-pair { gap: 3.5mm; }
  .diagram-pair { gap: 6mm; }
  .wm-fake span { font-size: 6pt; }

  .ex-h1 { font-size: 26pt; }
  .ex-h2 { font-size: 15pt; }
  .ex-h3 { font-size: 11.5pt; }
  .ex-quote { font-size: 12pt; }
  .ex-weights b { font-size: 20pt; }
  .ex-weights span { font-size: 7.5pt; }
  .ex-weights div { padding: 3mm 4mm; }
  .ex-alphabet { font-size: 13pt; }
  .specimen { padding: 3mm 0 1mm; }
  .specimen__label { font-size: 7.5pt; }

  .app-grid { grid-template-columns: 72mm 1fr; gap: 7mm; }
  .letter { width: 72mm; }
  .cards { gap: 5mm; flex-direction: column; }
  .card, .keep { break-inside: avoid; }
  .card { width: 85mm; height: 55mm; aspect-ratio: auto; padding: 5mm 5.5mm; }   /* Originalgröße */
  .card__logo { width: 34mm; }
  .card__name { font-size: 9.5pt; margin-top: 3mm; }
  .card__role { font-size: 7.5pt; }
  .card__txt { font-size: 6.5pt; }
  .card--back img { width: 42mm; }
  .web-band { padding: 8mm 6mm; }
  .web-band__h { font-size: 16pt; }
  .web-band__btn { padding: 1.8mm 6mm; font-size: 9pt; }
  .signature { font-size: 9pt; padding: 5mm 6mm; }
  .signature img { width: 52.9mm; }  /* 200 px */
  .signature .sig-role { font-size: 8.5pt; }
  .signature .sig-small { font-size: 7.5pt; }
  .signature .sig-legal { font-size: 7pt; }

  /* Rückseite */
  .closing {
    page: back; break-before: page;
    width: var(--page-w); height: var(--page-h);
    padding: 0; display: block; position: relative;
    background: #fff url("../img/waves/rueckseite.svg") 0 0 / 100% 100% no-repeat;
    color: var(--gds-anthrazit); text-align: center;
  }
  html.bleed .closing { background-image: url("../img/waves-bleed/rueckseite.svg"); }
  .closing__logo-screen { display: none; }
  .closing__logo-print { display: block; position: absolute; top: calc(150mm + var(--b)); left: 50%; transform: translateX(-50%); width: 72mm; }
  .closing__text { position: absolute; left: 0; right: 0; top: calc(222mm + var(--b)); font-size: 9.5pt; }
  .closing__text p { max-width: none; }
  .closing a { color: var(--gds-anthrazit); text-decoration: none; }
}