/* ==========================================================================
   Amplifon Reparatur- & Serviceablauf – DIN A4
   Markenwerte aus dem öffentlichen amplifon.com-Stylesheet (Stand 10/2026):
   Monza #C5003E · Burgundy #A20033 · Siren #82002D · Schrift "Value"
   ========================================================================== */

@font-face {
  font-family: "Value";
  src: local("Value Regular"), url("assets/fonts/Value-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Value";
  src: local("Value Bold"), url("assets/fonts/Value-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: local("Noto Sans"), url("assets/fonts/NotoSans-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --monza: #c5003e;
  --burgundy: #a20033;
  --siren: #82002d;
  --ink: #2d2d2a;
  --ink-2: #4a4a45;
  --ink-3: #707070;
  --line: #e3d3c9;
  --sand: #f1e9e4;
  --sand-2: #f8f4f2;
  --white: #ffffff;
  --ok: #008540;
  --ok-bg: #e6f3ec;
  --warn: #9a5b00;
  --warn-bg: #fdf1dc;
  --no: #c5003e;
  --no-bg: #fbe6ec;
  --info: #1f6f8a;
  --info-bg: #e3f2f7;
  --open-bg: #fff8d9;
  --open: #7a6400;
  --font: "Value", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --page-w: 210mm;
  --page-h: 297mm;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0;
  background: #d9d3cf;
  color: var(--ink);
  font-family: var(--font);
  font-size: 8.6pt;
  line-height: 1.38;
}

/* ---------- Bildschirm-Werkzeugleiste (nicht im Druck) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px; background: var(--ink); color: #fff;
  font-size: 12px;
}
.toolbar img { height: 22px; display: block; }
.toolbar .sp { flex: 1; }
.toolbar a, .toolbar button {
  font: inherit; color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: 5px 14px; cursor: pointer; text-decoration: none;
}
.toolbar a:hover, .toolbar button:hover { background: var(--monza); border-color: var(--monza); }
.toolbar .nav { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- A4-Seite ---------- */
.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  margin: 14px auto;
  padding: 12mm 13mm 14mm;
  background: var(--white);
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  display: flex; flex-direction: column;
}
.page:last-of-type { page-break-after: auto; break-after: auto; }

@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .toolbar, .screen-only { display: none !important; }
  .page { margin: 0; box-shadow: none; }
}

/* ---------- Seitenkopf / -fuß ---------- */
.pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 2px solid var(--monza);
  padding-bottom: 3mm; margin-bottom: 4mm;
}
.pagehead .t { font-size: 17pt; line-height: 1.1; color: var(--ink); }
.pagehead .t b { color: var(--monza); }
.pagehead .k { font-size: 7.4pt; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.2mm; }
.pagehead img { height: 8.5mm; }

.pagefoot {
  margin-top: auto; padding-top: 2.5mm;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-size: 6.8pt; color: var(--ink-3);
}

/* ---------- Typografie ---------- */
h2 {
  font-size: 10.6pt; margin: 3.6mm 0 1.8mm; color: var(--burgundy);
  display: flex; align-items: center; gap: 2mm; line-height: 1.15;
}
h2 .n {
  display: inline-grid; place-items: center; width: 5.2mm; height: 5.2mm;
  border-radius: 50%; background: var(--monza); color: #fff; font-size: 7.6pt; flex: none;
}
h3 { font-size: 8.8pt; margin: 2.4mm 0 1mm; color: var(--ink); }
p { margin: 0 0 1.6mm; }
ul, ol { margin: 0 0 1.8mm; padding-left: 4.2mm; }
li { margin: 0 0 .7mm; }
b, strong { font-weight: 700; }
.muted { color: var(--ink-3); }
.small { font-size: 7.2pt; }
.tiny { font-size: 6.6pt; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- Hinweisboxen ---------- */
.box {
  border-radius: 2.2mm; padding: 2.4mm 3mm; margin: 0 0 2.6mm;
  border: 1px solid var(--line); background: var(--sand-2);
  break-inside: avoid;
}
.box > :last-child { margin-bottom: 0; }
.box .lbl { font-weight: 700; font-size: 7.4pt; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .8mm; display: block; }
.box.rule { border-left: 1.4mm solid var(--monza); background: var(--sand-2); }
.box.rule .lbl { color: var(--monza); }
.box.info { background: var(--info-bg); border-color: #bfe0ea; }
.box.info .lbl { color: var(--info); }
.box.warn { background: var(--warn-bg); border-color: #efd7a5; }
.box.warn .lbl { color: var(--warn); }
.box.open { background: var(--open-bg); border-color: #ecd96a; border-style: dashed; }
.box.open .lbl { color: var(--open); }

/* ---------- Marker ---------- */
.tag {
  display: inline-block; padding: 0 1.6mm; border-radius: 999px;
  font-size: 6.6pt; line-height: 1.55; font-weight: 700; white-space: nowrap;
  vertical-align: 1px;
}
.tag.fg   { background: var(--sand);    color: var(--siren); }
.tag.her  { background: #2d2d2a;        color: #fff; }
.tag.zub  { background: var(--info-bg); color: var(--info); }
.tag.ok   { background: var(--ok-bg);   color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.no   { background: var(--no-bg);   color: var(--no); }
.tag.open { background: var(--open-bg); color: var(--open); border: 1px dashed #d8c458; }
.q { color: var(--open); font-weight: 700; }           /* ◇ intern festlegen */

/* ---------- Kennzahl-Kacheln ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4mm; margin: 0 0 3mm; }
.kpi {
  background: var(--sand-2); border: 1px solid var(--line); border-radius: 2.2mm;
  padding: 2.2mm 3mm; break-inside: avoid;
}
.kpi .v { font-size: 15pt; color: var(--monza); line-height: 1.05; font-weight: 700; }
.kpi .v small { font-size: 8pt; color: var(--ink-2); font-weight: 400; }
.kpi .l { font-size: 7.4pt; color: var(--ink-2); margin-top: .6mm; }
.kpi .s { font-size: 6.6pt; color: var(--ink-3); margin-top: .4mm; }

/* ---------- Servicekarten ---------- */
.cards { display: grid; grid-template-columns: 56mm repeat(4, 1fr); gap: 0; margin-bottom: 2mm; }
.cards .corner { grid-column: 1; }
.scard {
  height: 15mm; border-radius: 2mm; margin: 0 1.2mm 1.6mm; padding: 1.8mm 2.2mm;
  color: #fff; position: relative; font-size: 8pt; line-height: 1.05;
}
.scard small { display: block; font-size: 5.6pt; letter-spacing: .08em; margin-top: .8mm; opacity: .9; }
.scard .wm { position: absolute; right: 2mm; bottom: 1.4mm; font-size: 7pt; font-weight: 700; letter-spacing: -.02em; }
.scard.total { background: #2b2b2b; }
.scard.plus  { background: #8b8b90; }
.scard.base  { background: var(--monza); }
.sc-tbl { width: 100%; border-collapse: collapse; font-size: 7.4pt; }
.sc-tbl th, .sc-tbl td { border: 1px solid var(--line); padding: 1.1mm 1.8mm; vertical-align: middle; }
.sc-tbl th { background: var(--sand); text-align: center; color: var(--ink); }
.sc-tbl td { text-align: center; }
.sc-tbl td:first-child, .sc-tbl th:first-child { text-align: left; }
.sc-tbl tr.rowhead td { background: var(--sand-2); font-weight: 700; text-align: left; color: var(--burgundy); }
.yes { color: var(--ok); font-weight: 700; }
.nope { color: var(--ink-3); }

/* ---------- Tabellen ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: 7.4pt; }
table.t th, table.t td { border: 1px solid var(--line); padding: 1.2mm 1.8mm; vertical-align: top; text-align: left; }
table.t thead th { background: var(--monza); color: #fff; font-weight: 700; border-color: var(--monza); }
table.t thead th.alt { background: var(--burgundy); border-color: var(--burgundy); }
table.t tbody th { background: var(--sand); color: var(--ink); font-weight: 700; width: 24mm; }
table.t tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 6.4pt; }
table.t tr { break-inside: avoid; }
table.t td p { margin-bottom: .8mm; }
table.t td ul { margin-bottom: 0; padding-left: 3.2mm; }
table.t tbody tr:nth-child(even) td { background: var(--sand-2); }

/* Zellen nach "Wer zahlt?" einfärben */
td.z0 { box-shadow: inset 1.1mm 0 0 var(--ok);  }
td.z1 { box-shadow: inset 1.1mm 0 0 var(--warn); }
td.z2 { box-shadow: inset 1.1mm 0 0 var(--no);  }
td.zq { box-shadow: inset 1.1mm 0 0 #d8c458; }
td.z0, td.z1, td.z2, td.zq { padding-left: 3mm; }
.who { display: block; font-weight: 700; font-size: 7pt; margin-bottom: .5mm; }
.who.z0 { color: var(--ok); } .who.z1 { color: var(--warn); } .who.z2 { color: var(--no); }
.kk { font-size: 6.5pt; color: var(--ink-3); display: block; }

.legend { display: flex; flex-wrap: wrap; gap: 2mm 4mm; font-size: 7pt; color: var(--ink-2); margin: 0 0 2.4mm; align-items: center; }
.legend .sw { display: inline-block; width: 2.6mm; height: 2.6mm; border-radius: .6mm; margin-right: 1.2mm; vertical-align: -.4mm; }

/* ---------- Ablauf-Diagramm ---------- */
.flow { display: grid; gap: 2mm; }
.step {
  display: grid; grid-template-columns: 8mm 1fr; gap: 2.6mm; align-items: start;
  border: 1px solid var(--line); border-radius: 2.2mm; padding: 2mm 2.6mm; background: var(--white);
  break-inside: avoid; position: relative;
}
.step .no {
  width: 7mm; height: 7mm; border-radius: 50%; background: var(--monza); color: #fff;
  display: grid; place-items: center; font-size: 9.5pt; font-weight: 700;
}
.step h4 { margin: 0 0 .6mm; font-size: 8.8pt; color: var(--ink); }
.step p, .step ul { margin: 0; font-size: 7.6pt; color: var(--ink-2); }
.step ul { padding-left: 3.6mm; }
.step + .step::before {
  content: ""; position: absolute; left: 6.4mm; top: -2.2mm; width: 2px; height: 2.2mm; background: var(--monza);
}
.branch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6mm; margin: 1.4mm 0 0; }
.branch > div {
  border-radius: 1.6mm; padding: 1.5mm 2mm; font-size: 7pt; line-height: 1.3;
  border: 1px solid var(--line); background: var(--sand-2);
}
.branch > div b { display: block; font-size: 7.4pt; margin-bottom: .4mm; }
.branch .a b { color: var(--siren); }
.branch .c { background: #2d2d2a; border-color: #2d2d2a; color: #fff; }
.branch .c b { color: #fff; }
.branch .e { background: var(--info-bg); border-color: #bfe0ea; }
.branch .e b { color: var(--info); }

/* ---------- Status-Kette ---------- */
.chain { display: flex; flex-wrap: wrap; gap: 1.2mm; margin: 1.2mm 0 2.4mm; }
.chain .st {
  position: relative; padding: 1.2mm 3.4mm 1.2mm 3.2mm; background: var(--sand);
  font-size: 7pt; color: var(--ink); clip-path: polygon(0 0, calc(100% - 2.2mm) 0, 100% 50%, calc(100% - 2.2mm) 100%, 0 100%, 1.6mm 50%);
}
.chain .st.hl { background: var(--monza); color: #fff; }
.chain .st.hd { background: #2d2d2a; color: #fff; }
.chain .st.gn { background: var(--ok); color: #fff; }

.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.mt0 { margin-top: 0; }

/* ---------- Deckblatt ---------- */
.cover-band {
  margin: -12mm -13mm 5mm; padding: 9mm 13mm 8mm;
  background: linear-gradient(120deg, var(--siren) 0%, var(--monza) 70%);
  color: #fff; position: relative;
}
.cover-band img { height: 10mm; display: block; margin-bottom: 8mm; }
.cover-band h1 { margin: 0; font-size: 25pt; line-height: 1.05; font-weight: 700; }
.cover-band h1 span { font-weight: 400; }
.cover-band .sub { margin-top: 2.6mm; font-size: 10pt; opacity: .95; }
.cover-band .meta { margin-top: 4mm; font-size: 7.6pt; opacity: .85; display: flex; gap: 6mm; flex-wrap: wrap; }

/* ---------- Prüfhelfer (nur Bildschirm) ---------- */
.helper { display: grid; grid-template-columns: 66mm 1fr; gap: 4mm; flex: 1; min-height: 0; }
.helper form { display: grid; gap: 2mm; align-content: start; }
.helper label { display: grid; gap: .6mm; font-size: 7.4pt; color: var(--ink-2); font-weight: 700; }
.helper form, .helper label, .fieldrow { min-width: 0; }
.helper select, .helper input {
  width: 100%; min-width: 0; text-overflow: ellipsis;
  font: inherit; font-size: 8.6pt; padding: 1.6mm 2mm; border: 1px solid #c9b8ad; border-radius: 1.6mm; background: #fff; color: var(--ink);
}
.helper select:focus, .helper input:focus { outline: 2px solid var(--monza); outline-offset: 1px; }
.helper .out { border: 1px solid var(--line); border-radius: 2.4mm; background: var(--sand-2); padding: 3mm; overflow: auto; align-self: start; min-height: 90mm; }
.res-head { display: flex; flex-wrap: wrap; gap: 1.4mm; margin-bottom: 2mm; }
.res-title { font-size: 11pt; font-weight: 700; margin: 0 0 1.4mm; }
.res-title.z0 { color: var(--ok); } .res-title.z1 { color: var(--warn); } .res-title.z2 { color: var(--no); } .res-title.zq { color: var(--open); }
.res-grid { display: grid; grid-template-columns: 24mm 1fr; gap: 1mm 3mm; font-size: 8pt; margin-bottom: 2mm; }
.res-grid dt { color: var(--ink-3); font-weight: 700; }
.res-grid dd { margin: 0; }
.helper .hint { font-size: 7pt; color: var(--ink-3); margin-top: 2mm; }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm; }

/* ---------- Quellen ---------- */
.src { font-size: 7pt; columns: 2; column-gap: 5mm; }
.src li { break-inside: avoid; margin-bottom: 1mm; word-break: break-word; }
.src a { color: var(--burgundy); }

/* ===== kompakte Ausgabe (weniger Seiten) ===== */
body { font-size: 8.2pt; line-height: 1.34; }
.page { padding: 10mm 12mm 9mm; }
.pagehead { padding-bottom: 2mm; margin-bottom: 3mm; }
.pagehead .t { font-size: 14.5pt; }
.pagehead img { height: 7.5mm; }
h2 { font-size: 10pt; margin: 3mm 0 1.5mm; }
table.t { font-size: 7.1pt; }
table.t th, table.t td { padding: 1mm 1.6mm; }
.box { padding: 2mm 2.6mm; margin: 0 0 2mm; }
.kpis { grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-bottom: 2.4mm; }
.kpi { padding: 1.8mm 2.4mm; }
.kpi .v { font-size: 13pt; }
.kpi .l { font-size: 7.2pt; }
.kpi .s { font-size: 6.3pt; }
.cover-band { margin: -10mm -12mm 4mm; padding: 6mm 12mm 5mm; }
.cover-band img { height: 8mm; margin-bottom: 4mm; }
.cover-band h1 { font-size: 21pt; }
.cover-band .sub { font-size: 9pt; margin-top: 1.6mm; }
.cover-band .meta { margin-top: 2.6mm; gap: 2mm 5mm; }
.flow.two { grid-template-columns: 1fr 1fr; gap: 1.6mm 2mm; }
.flow.two .step { grid-template-columns: 6.4mm 1fr; padding: 1.6mm 2mm; gap: 2mm; }
.flow.two .step.wide { grid-column: 1 / -1; }
.flow.two .step + .step::before { display: none; }
.step .no { width: 5.6mm; height: 5.6mm; font-size: 8pt; }
.step h4 { font-size: 8.2pt; }
.step p, .step ul { font-size: 7.1pt; }
.casc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6mm; margin-bottom: 2.4mm; }
.casc > div { border: 1px solid var(--line); border-radius: 2mm; padding: 1.6mm 2mm; background: var(--sand-2); font-size: 7pt; line-height: 1.3; }
.casc b.h { display: block; color: var(--monza); font-size: 7.6pt; margin-bottom: .6mm; }
.scard { height: 11mm; padding: 1.4mm 2mm; font-size: 7.4pt; margin-bottom: 1.2mm; }
.sc-tbl { font-size: 7pt; }
.sc-tbl th, .sc-tbl td { padding: .8mm 1.6mm; }
.pagefoot { padding-top: 2mm; }
.src { font-size: 6.4pt; }

/* ===== visuelle Gestaltung: Icons, Kacheln, Matrix, Prozess ===== */
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.ico { display: inline-grid; place-items: center; width: 7mm; height: 7mm; border-radius: 50%; background: var(--monza); color: #fff; font-size: 10pt; flex: none; }
.ico.sm { width: 5.4mm; height: 5.4mm; font-size: 7.8pt; }
.ico.dk { background: #2d2d2a; } .ico.sd { background: var(--sand); color: var(--siren); }
.ico.ok { background: var(--ok); } .ico.wn { background: var(--warn); } .ico.no { background: var(--no); } .ico.in { background: var(--info); }
.nm { display: flex; gap: 1.6mm; align-items: flex-start; }
.nm > span:last-child { min-width: 0; }

/* Kennzahl-Kacheln mit Icon */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin: 0 0 2.4mm; }
.tile { position: relative; background: var(--sand-2); border: 1px solid var(--line); border-radius: 2.4mm; padding: 2.2mm 2.6mm 2mm; overflow: hidden; }
.tile > .ic { position: absolute; right: 2mm; top: 2mm; width: 6mm; height: 6mm; color: var(--monza); }
.tile .v { font-size: 15pt; font-weight: 700; color: var(--monza); line-height: 1; }
.tile .v small { font-size: 7.6pt; color: var(--ink-2); font-weight: 400; }
.tile .l { font-size: 7.4pt; font-weight: 700; margin-top: .8mm; }
.tile .s { font-size: 6.4pt; color: var(--ink-3); }
.tile.dk { background: #2d2d2a; border-color: #2d2d2a; color: #fff; }
.tile.dk .v { color: #fff; } .tile.dk .v small, .tile.dk .s { color: #d9d3cf; } .tile.dk > .ic { color: #fff; }
.tile.rd { background: var(--monza); border-color: var(--monza); color: #fff; }
.tile.rd .v { color: #fff; } .tile.rd .v small, .tile.rd .s { color: #fbe6ec; } .tile.rd > .ic { color: #fff; }

/* Ablauf als Prozess */
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2mm 5mm; margin: 0 0 2mm; }
.pstep { position: relative; border: 1px solid var(--line); border-radius: 2.4mm; padding: 2mm 2.2mm; background: #fff; }
.pstep .top { display: flex; align-items: center; gap: 1.6mm; margin-bottom: .8mm; }
.pstep h4 { margin: 0; font-size: 8pt; line-height: 1.15; }
.pstep p { margin: 0; font-size: 6.9pt; color: var(--ink-2); line-height: 1.3; }
.pstep .n { position: absolute; right: 2mm; top: .6mm; font-size: 13pt; font-weight: 700; color: var(--line); }
.pstep:not(:nth-child(4n))::after { content: ""; position: absolute; right: -3.6mm; top: 50%; width: 2.4mm; height: 2.4mm; border-top: 2px solid var(--monza); border-right: 2px solid var(--monza); transform: translateY(-50%) rotate(45deg); }

/* Pfeil-Streifen (Prüfkaskade, Entscheidungsfolge) */
.chev { display: flex; gap: 0; margin: 0 0 2.4mm; }
.chev > div { flex: 1; padding: 2mm 5mm 2mm 4.2mm; background: var(--sand); font-size: 6.9pt; line-height: 1.3; clip-path: polygon(0 0, calc(100% - 3.4mm) 0, 100% 50%, calc(100% - 3.4mm) 100%, 0 100%, 3.4mm 50%); margin-left: -1.6mm; }
.chev > div:first-child { margin-left: 0; clip-path: polygon(0 0, calc(100% - 3.4mm) 0, 100% 50%, calc(100% - 3.4mm) 100%, 0 100%); padding-left: 2.6mm; }
.chev > div:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 3.4mm 50%); padding-right: 2.6mm; }
.chev b { display: flex; align-items: center; gap: 1mm; font-size: 7.6pt; color: var(--ink); margin-bottom: .6mm; }
.chev > div:nth-child(1) { background: #fbe6ec; } .chev > div:nth-child(2) { background: #f6d5de; }
.chev > div:nth-child(3) { background: #efc0cd; } .chev > div:nth-child(4) { background: #e5a6b8; }
.chev > div:nth-child(5) { background: #d98aa1; }
.chev.ex > div { background: var(--sand); }
.chev.ex > div:nth-child(n) { background: var(--sand); }
.chev.ex > div:last-child { background: var(--warn-bg); }

/* Kostenträger-Karten */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2mm; margin-bottom: 2.4mm; }
.pcard { border: 1px solid var(--line); border-radius: 2.4mm; overflow: hidden; background: #fff; }
.pcard .hd { display: flex; align-items: center; gap: 1.8mm; padding: 1.8mm 2.2mm; background: var(--sand); }
.pcard .hd b { font-size: 8.2pt; line-height: 1.1; }
.pcard .hd small { display: block; font-size: 6.4pt; color: var(--ink-3); font-weight: 400; }
.pcard .pay { padding: 1mm 2.2mm; font-weight: 700; font-size: 7.8pt; color: #fff; }
.pay.z0 { background: var(--ok); } .pay.z1 { background: var(--warn); } .pay.z2 { background: var(--no); }
.pcard ul { margin: 0; padding: 1.6mm 2.2mm 1.4mm 5mm; font-size: 6.9pt; line-height: 1.3; }

/* Farbmatrix "Wer zahlt wann?" */
.hm { display: grid; grid-template-columns: 25mm repeat(3, 1fr); gap: 1.2mm; margin-bottom: 2.2mm; }
.hm .hh { background: var(--monza); color: #fff; border-radius: 1.6mm; padding: 1.4mm 2mm; font-size: 7.2pt; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 1.2mm; }
.hm .hh small { display: block; font-weight: 400; font-size: 6.2pt; opacity: .9; }
.hm .hh.alt { background: var(--burgundy); }
.hm .rl { background: var(--sand); border-radius: 1.6mm; padding: 1.4mm 2mm; font-size: 7.2pt; font-weight: 700; display: flex; align-items: center; gap: 1.4mm; line-height: 1.2; }
.hm .rl small { display: block; font-weight: 400; color: var(--ink-3); font-size: 6.2pt; }
.hm .c { border-radius: 1.6mm; padding: 1.3mm 2mm 1.3mm 2.4mm; font-size: 6.8pt; line-height: 1.3; border-left: 1.2mm solid; color: var(--ink-2); }
.hm .c .big { display: flex; align-items: center; gap: 1mm; font-weight: 700; font-size: 7.6pt; margin-bottom: .3mm; line-height: 1.15; }
.hm .c.z0 { background: var(--ok-bg); border-color: var(--ok); } .hm .c.z0 .big { color: var(--ok); }
.hm .c.z1 { background: var(--warn-bg); border-color: var(--warn); } .hm .c.z1 .big { color: var(--warn); }
.hm .c.z2 { background: var(--no-bg); border-color: var(--no); } .hm .c.z2 .big { color: var(--no); }
.hm .c.zq { background: var(--open-bg); border-color: #d8c458; } .hm .c.zq .big { color: var(--open); }
.hm.sv { grid-template-columns: 27mm repeat(4, 1fr); }

/* Bauteile-Tabelle mit Icons */
table.t tr.hl td, table.t tr.hl th { background: #fbe6ec !important; }

/* Zeit-Kacheln groß */
.big2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin-bottom: 2.4mm; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6mm; margin-bottom: 2.4mm; }
.steps3 > div { border-radius: 2mm; padding: 1.6mm 2.2mm; font-size: 6.9pt; line-height: 1.3; border: 1px solid var(--line); background: var(--sand-2); }
.steps3 b { display: block; font-size: 7.8pt; margin-bottom: .4mm; }
.steps3 .k1 { border-left: 1.4mm solid var(--ok); } .steps3 .k2 { border-left: 1.4mm solid var(--warn); } .steps3 .k3 { border-left: 1.4mm solid var(--no); }
.hd2 { display: flex; align-items: center; gap: 2mm; margin: 3mm 0 1.6mm; }
.hd2 h2 { margin: 0; }

/* ===== Feinschliff: mehr Lesbarkeit auf den luftigeren Seiten ===== */
#p1 .tile .s { font-size: 6.9pt; }
#p1 .pstep p { font-size: 7.4pt; }
#p1 .pstep h4 { font-size: 8.4pt; }
#p1 .chev > div { font-size: 7.3pt; }
#p1 .branch > div { font-size: 7.3pt; }
#p2 .pcard ul { font-size: 7.8pt; }
#p2 .pcard .hd b { font-size: 8.8pt; }
#p2 .tile .s { font-size: 7.2pt; }
#p2 .box { font-size: 7.9pt; }
#p2 .steps3 > div { font-size: 7.6pt; }
#p3 .hm { grid-template-columns: 30mm repeat(3, 1fr); } #p3 .hm.sv { grid-template-columns: 27mm repeat(4, 1fr); }
#p3 .hm .rl { font-size: 7.8pt; overflow-wrap: anywhere; }
#p3 .hm .hh { font-size: 7.8pt; }
#p3 .hm .c { font-size: 7.5pt; padding: 1.7mm 2.4mm 1.7mm 2.8mm; }
#p3 .hm .c .big { font-size: 8.2pt; }
#p3 .box { font-size: 8pt; }
#p4 table.t { font-size: 7.8pt; }
#p4 table.t th small { font-size: 6.8pt; }
#p4 .chev > div { font-size: 7.6pt; }
#p4 .box { font-size: 8pt; }

/* Seite "Kostenträger – wer zahlt wann?" enthält jetzt Karten und beide Matrizen */
#p3 .pgrid { margin-bottom: 1mm; }
#p3 .pcard ul { font-size: 7.1pt; padding-top: 1.2mm; padding-bottom: 1mm; }
#p3 .hm .c { font-size: 7.1pt; padding: 1.2mm 2.2mm 1.2mm 2.6mm; }
#p3 .hm .c .big { font-size: 7.8pt; }
#p3 .hm .rl { font-size: 7.5pt; }
#p3 .hm { gap: 1mm; margin-bottom: 1.4mm; }
#p3 .hd2 { margin: 2mm 0 1.2mm; }
#p3 .box { font-size: 7.6pt; padding: 1.6mm 2.4mm; margin-bottom: 0; }

/* ===== Seite 1: nur noch zwei Schritte; GOAL-Screenshot ===== */
#p1 .proc { grid-template-columns: repeat(2, 1fr); gap: 2.2mm 6mm; }
#p1 .pstep:nth-child(2n)::after { display: none; }
#p1 .pstep p { font-size: 8.2pt; }
#p1 .pstep h4 { font-size: 9pt; }
.shot { margin: 0 0 2.4mm; border: 1px solid var(--line); border-radius: 2.4mm; padding: 2mm; background: #fff; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 1.4mm; }

/* Fettschrift innerhalb der Schritt-Kacheln läuft im Text, nur die Überschrift steht eigen */
.steps3 b { display: inline; font-size: inherit; margin: 0; }
.steps3 > div > b:first-child { display: block; font-size: 7.8pt; margin-bottom: .4mm; }
#p4 .shot { margin-bottom: 0; }

/* ===== Seite 1 füllen, Seite 2 wieder luftiger ===== */
#p1 .tile { padding: 3mm 3.2mm 2.6mm; }
#p1 .tile .v { font-size: 21pt; }
#p1 .tile .v small { font-size: 9pt; }
#p1 .tile .l { font-size: 8.6pt; margin-top: 1.2mm; }
#p1 .tile .s { font-size: 7.4pt; }
#p1 .tile > .ic { width: 7mm; height: 7mm; right: 2.6mm; top: 2.6mm; }
#p1 .tiles { gap: 2.6mm; margin-bottom: 3.4mm; }
#p1 .box { font-size: 8.8pt; padding: 2.8mm 3.2mm; margin-bottom: 3.4mm; }
#p1 .pstep { padding: 3mm 3mm; }
#p1 .pstep p { font-size: 8.8pt; }
#p1 .pstep h4 { font-size: 9.6pt; }
#p1 .hd2 { margin: 4.4mm 0 2mm; }
#p1 .pgrid { gap: 2.6mm; margin-bottom: 3mm; }
#p1 .pcard ul { font-size: 8pt; padding: 2mm 2.6mm 1.8mm 5.4mm; }
#p1 .pcard .hd b { font-size: 9pt; }
#p1 .pcard .pay { font-size: 8.4pt; padding: 1.3mm 2.6mm; }
#p3 .hm .c { font-size: 7.8pt; padding: 1.9mm 2.6mm 1.9mm 3mm; }
#p3 .hm .c .big { font-size: 8.5pt; }
#p3 .hm .rl { font-size: 8.2pt; }
#p3 .hm .hh { font-size: 8pt; }
#p3 .hm { gap: 1.4mm; margin-bottom: 2.4mm; }
#p3 .hd2 { margin: 4.4mm 0 2mm; }
#p3 .hd2:first-of-type { margin-top: 0; }

/* Feinschliff Seite 1 */
#p1 .tile.rd .v { font-size: 18pt; white-space: nowrap; }
#p1 .tile.rd .v small { font-size: 8pt; }
#p1 .tile { padding: 3.6mm 3.4mm 3.2mm; }
#p1 .pstep { padding: 3.8mm 3.4mm; }
#p1 .pcard ul { font-size: 8.5pt; padding: 2.4mm 2.8mm 2.2mm 5.6mm; }
#p1 .pcard .hd { padding: 2.4mm 2.8mm; }
#p1 .hd2 { margin: 5.4mm 0 2.4mm; }
#p1 .legend { margin-top: 4mm; }

/* Seite 1: nach Textkürzung wieder auf eine Seite */
#p1 .tile { padding: 2.8mm 3.2mm 2.4mm; }
#p1 .pstep { padding: 2.6mm 3.2mm; }
#p1 .pcard ul { font-size: 8.2pt; padding: 1.8mm 2.6mm 1.6mm 5.4mm; }
#p1 .pcard .hd { padding: 2mm 2.6mm; }
#p1 .hd2 { margin: 4mm 0 1.8mm; }
#p1 .legend { margin-top: 3mm; }

/* Seite 2: freien Platz nutzen (größere Schrift, mehr Luft) */
#p3 .hm { gap: 2mm; margin-bottom: 4mm; }
#p3 .hm .hh { font-size: 9pt; padding: 2.4mm 2.6mm; }
#p3 .hm .rl { font-size: 9pt; }
#p3 .hm .c { font-size: 8.8pt; padding: 3mm 3mm 3mm 3.4mm; line-height: 1.35; }
#p3 .hm .c .big { font-size: 9.8pt; margin-bottom: 1mm; }
#p3 > .hm:first-of-type .c { padding-top: 4.5mm; padding-bottom: 4.5mm; }
#p3 .hd2 { margin-top: 5mm; }

/* Seite 2: BG-Zeile und BG-Spalte ergänzt, daher kompakter */
#p3 .hm { gap: 1.4mm; margin-bottom: 2.4mm; }
#p3 .hm .hh { font-size: 8.2pt; padding: 1.6mm 2mm; }
#p3 .hm .rl { font-size: 8pt; padding: 1.2mm 1.8mm; }
#p3 .hm .c { font-size: 7.4pt; padding: 1.5mm 2mm 1.5mm 2.6mm; line-height: 1.3; }
#p3 .hm .c .big { font-size: 8.2pt; margin-bottom: .4mm; }
#p3 > .hm:first-of-type .c { padding-top: 1.8mm; padding-bottom: 1.8mm; }
#p3 .hd2 { margin-top: 3.2mm; }
#p3 .hm.sv .rl { overflow-wrap: normal; hyphens: auto; }
/* Seite 3: BG-Ergänzung, Screenshot etwas kleiner */
#p4 .shot img { width: 78%; margin: 0 auto; }