/* Case study (Fallstudie): the same world of frames, snaps and points as the KI page (css/ki.css),
   with the material of one real case laid out like documents on a desk. The plan excerpts are
   shown in grey, so the page keeps its paper and ink; the annotations are drawn in rust points,
   like a red pen on a plan (js/fallstudie.js places the points). One rust accent per frame:
   point type, the decided points of a figure, or the pen. */

.fs { --pen: var(--acc); --fs-quote: clamp(20px, .9vw + 1.6svh, 32px); }

/* ---------- small type used across the frames ---------- */
.eyebrow, .kick { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .04em; color: var(--fg-3); }
.eyebrow { margin-bottom: clamp(14px, 2.6svh, 28px); }
.fs .fine { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-3); max-width: 62ch; }
.credit { margin-top: 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .01em; color: var(--fg-3); }

/* ---------- the way back to the KI page ---------- */
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 15px/1.2 var(--sans); color: var(--fg-2); text-decoration: none; }
.back:hover { color: var(--fg); }
.back:hover span { text-decoration: underline; text-underline-offset: 4px; }
.back .arr { transition: transform .35s var(--ease); }
.back:hover .arr { transform: translateX(-3px); }
.fs-hero .back { margin: -8px 0 clamp(6px, 1.6svh, 18px) -2px; }
.back-end { margin-top: 14px; }

/* ---------- a) entry ---------- */
.fs-hero .col-text { grid-column: 1 / span 7; }
.steck { margin: clamp(28px, 5svh, 56px) 0 0; max-width: 46rem; border-bottom: 1px solid var(--hair); }
.steck > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: var(--gap); padding: clamp(8px, 1.4svh, 14px) 0; border-top: 1px solid var(--hair); }
.steck dt { font: 500 var(--fs-label)/1.9 var(--mono); letter-spacing: .03em; color: var(--fg-3); }
.steck dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--fg); }

/* ---------- b) the task ---------- */
.fs-frage .wrap.grid { align-items: start; }
.fs-frage .h2 { grid-column: 1 / span 4; }
.frage { grid-column: 5 / span 8; margin: 0; }
.frage blockquote { margin: 0; }
.frage blockquote p { font: 560 var(--fs-quote)/1.36 var(--sans); letter-spacing: -.018em; color: var(--fg); max-width: 40ch; }
.frage blockquote p + p { margin-top: .8em; }
.frage blockquote .pt { font-weight: 700; }
.frage .fine { margin-top: clamp(18px, 3svh, 32px); }

/* ---------- plan excerpts ---------- */
.plan { margin: 0; position: relative; }
.plan .clip { position: relative; aspect-ratio: var(--arn); overflow: hidden; background: #fff; }
.plan .clip > img, .plan .zoom > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the plan in grey, printed onto the paper of the page (the pen inside keeps its rust) */
.plan .clip { mix-blend-mode: multiply; }
.plan .clip img { filter: grayscale(1) brightness(1.16) contrast(.9); }
@media (prefers-color-scheme: dark) {
  /* at night the excerpt lies on the dark ground like a sheet of paper */
  .plan .clip { mix-blend-mode: normal; border-radius: var(--radius); }
  .plan .clip img { filter: grayscale(1) contrast(1.04) brightness(.9); }
}
/* the pen: an overlay in the coordinates of the source (PDF points); the marks themselves are only
   geometry, js/fallstudie.js sets rust points along them */
.pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pen .mark { fill: none; stroke: none; }
.pen .dot { fill: var(--pen); opacity: 0; }
.on .pen .dot { opacity: 1; transition: opacity .12s linear var(--d, 0s); }

/* ---------- c) reading ---------- */
.fs-lesen .wrap.grid { align-items: center; }
.lesen-text { grid-column: 1 / span 5; }
.plan-lesen { grid-column: 6 / span 7; }
.vtab { width: 100%; margin-top: clamp(22px, 4svh, 44px); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vtab thead th { padding: 0 6px 10px 0; text-align: left; font: 500 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--fg-3); white-space: nowrap; }
.vtab tbody th, .vtab td { padding: clamp(7px, 1.3svh, 12px) 6px clamp(7px, 1.3svh, 12px) 0; border-top: 1px solid var(--hair); text-align: left; font: 600 calc(var(--fs-small) * 1.02)/1.2 var(--mono); color: var(--fg); white-space: nowrap; }
.vtab tbody tr:last-child > * { border-bottom: 1px solid var(--hair); }
.vtab .v { display: inline-block; }
.fs-js .vtab .v { opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.fs-js .vtab .v.in { opacity: 1; transform: none; }
/* a value on its way from the plan into the table */
.fly { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; font: 600 calc(var(--fs-small) * 1.02)/1.2 var(--mono); color: var(--fg); background: var(--ground); padding: 1px 3px; border-radius: 1px; white-space: nowrap; will-change: transform; }

.plan-lesen-m { display: none; }

/* ---------- d) checking ---------- */
.fs-pruefen .wrap.grid { align-items: center; }
.pruef-text { grid-column: 1 / span 6; }
.tally { grid-column: 8 / span 5; display: flex; flex-direction: column; }
.field-tally { display: block; height: clamp(150px, 30svh, 330px); }
.tally-n { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 28px; font: 600 var(--fs-h3)/1.2 var(--sans); letter-spacing: -.02em; color: var(--fg-2); }
.tally-n b { font: 700 calc(var(--fs-h2) * .8)/1 var(--sans); letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; margin-right: .12em; }
.checks { list-style: none; margin: clamp(22px, 4svh, 44px) 0 0; padding: 0; border-bottom: 1px solid var(--hair); }
.checks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: clamp(10px, 1.9svh, 18px) 0; border-top: 1px solid var(--hair); }
.tick { width: 24px; height: 24px; margin-top: .1em; }
.tick path { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fs-js .tick path { stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease); }
.fs-js .on .tick path { stroke-dashoffset: 0; }
.fs-js .on .checks li:nth-child(2) .tick path { transition-delay: .35s; }
.fs-js .on .checks li:nth-child(3) .tick path { transition-delay: .7s; }
.ck { font: 600 calc(var(--fs-h3) * .86)/1.3 var(--sans); letter-spacing: -.015em; color: var(--fg); }
.tag { margin-top: 4px; font: 500 var(--fs-label)/1.4 var(--mono); color: var(--fg-3); }

/* ---------- d2) two questions ---------- */
.fs-rueck .h2 { max-width: none; }
.rq-list { margin-top: clamp(20px, 4svh, 44px); }
.rq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: clamp(14px, 2.8svh, 30px) 0; border-top: 1px solid var(--hair); }
.rq:last-child { border-bottom: 1px solid var(--hair); }
.rq .plan { grid-column: 1 / span 5; justify-self: end; --h: clamp(120px, 27svh, 300px); width: min(100%, calc(var(--h) * var(--arn))); }
.rq-text { grid-column: 6 / span 7; }
.rq h3 { margin-top: 8px; font: 650 var(--fs-h3)/1.2 var(--sans); letter-spacing: -.022em; color: var(--fg); text-wrap: balance; }
.rq h3 .pt { font-weight: 700; }
.rq-text > p:last-child { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); max-width: 58ch; }

/* ---------- e) the person checks ---------- */
.fs-mensch .wrap.grid { align-items: center; }
.mensch-text { grid-column: 1 / span 5; }
.plan-baum { grid-column: 6 / span 7; }
.mensch-text .kick { margin-top: clamp(20px, 3.6svh, 40px); }
.claim { margin: 8px 0 0; padding-left: 16px; border-left: 2px solid var(--hair); }
.claim p { font-size: var(--fs-small); line-height: 1.5; color: var(--fg); max-width: 52ch; }
.mensch-text .claim + .p { margin-top: clamp(16px, 2.8svh, 28px); }
.mensch-text .p { font-size: var(--fs-small); }
.mensch-text .p + .p { color: var(--fg); font-weight: 500; }
.plan-baum .clip { cursor: zoom-in; }
.plan-baum.zoomed .clip { cursor: zoom-out; }
.zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 2.2s var(--ease-io); }
.plan .zoom > img.detail { left: 40.625%; top: 43.125%; inset: auto; width: 25%; height: 25%; opacity: 0; transition: opacity .7s var(--ease) 0s; }
.zoomed .zoom { transform: scale(4) translate(-40.625%, -43.125%); }
.zoomed .zoom > img.detail { opacity: 1; transition-delay: 1.3s; }
.zoom-label { position: absolute; left: 12px; bottom: 12px; padding: 3px 7px; font: 500 12px/1.3 var(--mono); color: var(--fg); background: var(--ground); opacity: 0; transition: opacity .5s var(--ease); }
.zoomed.ringed .zoom-label { opacity: 1; transition-delay: .6s; }
.pen-ring .dot { opacity: 0; }
.zoomed.ringed .pen-ring .dot { opacity: 1; transition: opacity .12s linear var(--d, 0s); }
.plan-baum:not(.zoomed) .pen-ring .dot { transition: none; }

/* ---------- f) the result ---------- */
.fs-ergebnis .wrap.grid { align-items: center; }
.erg-text { grid-column: 1 / span 5; }
.vol { grid-column: 6 / span 7; margin: 0 calc(-1 * var(--content-r) + 8px) 0 0; position: relative; height: clamp(300px, 64svh, 680px); }
.vol-c { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.vol-c:active { cursor: grabbing; }
.vol-labels { position: absolute; inset: 0; pointer-events: none; }
.vol-lab { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); padding: 2px 6px; font: 500 12px/1.3 var(--mono); color: var(--fg); background: color-mix(in srgb, var(--ground) 86%, transparent); white-space: nowrap; opacity: 0; transition: opacity .5s var(--ease); }
.vol-lab small { color: var(--fg-3); font-size: 11px; margin-right: 6px; }
.vol.risen .vol-lab { opacity: 1; }
.vol-hint { position: absolute; right: calc(var(--content-r) - 8px); bottom: 6px; font: 500 11px/1.3 var(--mono); color: var(--fg-3); }
.kz { margin: clamp(22px, 4svh, 44px) 0 0; border-bottom: 1px solid var(--hair); }
.kz > div { padding: clamp(10px, 1.8svh, 18px) 0; border-top: 1px solid var(--hair); }
.kz dt { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .02em; color: var(--fg-3); }
.kz dd { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.kz-n { font: 700 calc(var(--fs-h3) * 1.35)/1.1 var(--sans); letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kz-f { font-size: 14px; line-height: 1.4; color: var(--fg-3); }
.dl { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; margin-top: clamp(14px, 2.6svh, 26px); font: 600 15px/1.35 var(--sans); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); max-width: 52ch; }
.dl:hover { text-decoration-color: currentColor; }
.dl .arr { margin-top: 1px; }
.dl small { display: block; margin-top: 2px; font: 400 13px/1.45 var(--sans); color: var(--fg-3); text-decoration: none; }

/* ---------- g) the takeaway ---------- */
.fs-fazit .wrap.grid { align-items: start; }
.fs-fazit .eyebrow { grid-column: 1 / -1; }
.fazit-h { grid-column: 1 / span 10; max-width: 24ch; font-size: calc(var(--fs-h2) * 1.08); }
.fazit-h .pt { font-weight: 700; }
.fazit-text { grid-column: 1 / span 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--gap)); margin-top: clamp(32px, 6svh, 72px); padding-top: clamp(20px, 3svh, 32px); border-top: 1px solid var(--hair); }
.fazit-text .p { max-width: 46ch; }
.fazit-text .p + .p { margin-top: 0; }

/* ---------- h) close ---------- */
.fazit { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); max-width: 50ch; margin-bottom: clamp(24px, 4.4svh, 48px); }
.fs-final .gonote { color: var(--fg-3); }
.source { margin-top: clamp(20px, 3.6svh, 36px); font-size: 12.5px; line-height: 1.5; color: var(--fg-3); max-width: 64ch; }

/* ---------- laptops ---------- */
@media (max-height: 800px) and (min-width: 761px) {
  .steck dd { font-size: 15px; }
  .frage blockquote p { max-width: 44ch; }
  .fs-ergebnis .h2 { font-size: calc(var(--fs-h2) * .8); }
  .kz-n { font-size: calc(var(--fs-h3) * 1.15); }
  .kz > div { padding: 8px 0; }
  .fs-ergebnis .fine { font-size: 13px; }
  .vol { height: clamp(300px, 58svh, 640px); }
}

/* ---------- tablets ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .vtab tbody th, .vtab td { font-size: 14px; }
  .vtab thead th { font-size: 10px; }
}

/* ---------- phones: one flowing column (no frames, no snapping, css/ki.css) ---------- */
/* Every section keeps heading, material and text together; the plan excerpts take the full
   width and are cut close enough that their values can be read. */
@media (max-width: 760px) {
  .fs { --fs-quote: 20px; }
  .eyebrow { margin-bottom: 12px; }
  .credit { margin-top: 10px; font-size: 12px; }
  .fs .fine { font-size: 14px; }
  /* a) entry */
  .fs-hero .col-text { display: block; }
  .fs-hero.hero .wrap.grid > .field { height: clamp(170px, 48vw, 220px); }
  .steck { margin-top: 28px; }
  .steck > div { grid-template-columns: 6.8em minmax(0, 1fr); column-gap: 12px; padding: 11px 0; }
  .steck dt { font-size: 12px; line-height: 2.1; }
  .steck dd { font-size: 16px; line-height: 1.5; }
  /* b) the task */
  .frage { margin-top: 28px; }
  .frage blockquote p { line-height: 1.45; }
  .frage .fine { margin-top: 20px; }
  /* c) reading: the four templates close up, two by two */
  .lesen-text .p, .pruef-text .p { font-size: 17px; }
  .plan-lesen { display: none; }
  .plan-lesen-m { display: block; margin-top: 24px; }
  .schab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vtab { margin-top: 24px; }
  /* on the narrowest phones the long column names break by syllable instead of leaving the screen */
  .vtab thead th { font-size: 12px; padding: 0 4px 10px 0; letter-spacing: 0; white-space: normal; -webkit-hyphens: auto; hyphens: auto; vertical-align: bottom; }
  .vtab tbody th, .vtab td { font-size: 16px; padding: 8px 4px 8px 0; }
  .vtab tbody th { padding-right: 8px; }
  /* d) checking */
  .checks { margin-top: 28px; }
  .checks li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; }
  .ck { font-size: 18px; }
  .tag { font-size: 12px; }
  .tally { margin-top: 40px; }
  .field-tally { height: clamp(150px, 44vw, 200px); }
  .tally-n { font-size: 19px; }
  .tally-n b { font-size: 38px; }
  /* d2) two questions: each excerpt in full width above its question */
  .rq-list { margin-top: 28px; }
  .rq { display: block; padding: 28px 0; }
  .rq .plan { margin: 0; width: 100%; justify-self: start; }
  .rq-text { margin-top: 16px; }
  .kick { font-size: 12px; }
  .rq h3 { font-size: 21px; }
  .rq-text > p:last-child { font-size: 17px; }
  /* the excerpt of the Satzung is cut to the four lines around the marked sentence; image and pen
     move together, so the mark stays on its words */
  .plan-gs .clip { aspect-ratio: 5.5; }
  .plan-gs .clip > img, .plan-gs .pen { right: auto; bottom: auto; left: -1.2987%; top: -10%; width: 129.87%; height: 185.71%; }
  /* e) the person checks */
  .mensch-text .kick { margin-top: 24px; }
  .claim p, .mensch-text .p { font-size: 17px; line-height: 1.55; }
  .plan-baum { margin-top: 32px; }
  .zoom-label { font-size: 12px; }
  /* f) the result: the figures, then the volume across the full width */
  .kz { margin-top: 28px; }
  .kz > div { padding: 14px 0; }
  .kz dt { font-size: 12px; }
  .kz-n { font-size: 28px; }
  .kz-f { font-size: 15px; color: var(--fg-2); }
  .dl { font-size: 16px; }
  .dl small { font-size: 14px; }
  .vol { margin: 32px calc(-1 * var(--gutter)) 0; height: clamp(300px, 96vw, 420px); }
  .vol-hint { right: var(--gutter); font-size: 12px; }
  .vol-lab, .vol-lab small { font-size: 12px; }
  /* g) the takeaway */
  .fazit-h { font-size: 32px; }
  .fazit-text { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: .9em; margin-top: 28px; padding-top: 22px; }
  .fazit-text .p { font-size: 17px; }
  /* h) close */
  .fazit { font-size: 17px; margin-bottom: 24px; }
  .source { font-size: 13px; }
}

/* ---------- phones held sideways ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .fs { --fs-quote: 16px; }
  .fs-hero .col-text { grid-column: 1 / span 8; }
  .eyebrow { margin-bottom: 6px; }
  .fs-hero .back { min-height: 30px; margin: -6px 0 2px; font-size: 13px; }
  .back-end { min-height: 30px; margin-top: 6px; font-size: 13px; }
  .steck { margin-top: 12px; }
  .steck > div { padding: 3px 0; grid-template-columns: 7em minmax(0, 1fr); }
  .steck dt { font-size: 10.5px; }
  .steck dd { font-size: 13px; line-height: 1.35; }
  .frage blockquote p { max-width: 60ch; }
  .lesen-text .p, .pruef-text .p { font-size: 13.5px; line-height: 1.45; }
  .h2 + .p { margin-top: 10px; }
  .vtab { margin-top: 10px; }
  .vtab thead th { font-size: 9.5px; padding-bottom: 4px; }
  .vtab tbody th, .vtab td { font-size: 12.5px; padding: 4px 4px 4px 0; }
  .checks { margin-top: 10px; }
  .checks li { padding: 4px 0; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; }
  .tick { width: 16px; height: 16px; }
  .tag { display: none; }
  .pruef-text { grid-column: 1 / span 7; }
  .tally { grid-column: 8 / span 5; }
  .fs-pruefen .h2, .fs-mensch .h2, .fs-ergebnis .h2, .fs-lesen .h2 { font-size: 23px; }
  .mensch-text { grid-column: 1 / span 6; }
  .plan-baum { grid-column: 7 / span 6; }
  .claim { padding-left: 10px; }
  .erg-text { grid-column: 1 / span 6; }
  .vol { grid-column: 7 / span 6; }
  .fs-final .huge { font-size: 30px; }
  .fazit-h { font-size: 26px; grid-column: 1 / span 12; max-width: 40ch; }
  .fazit-text { grid-column: 1 / span 12; margin-top: 12px; padding-top: 10px; }
  .fazit-text .p { font-size: 13px; line-height: 1.45; }
  .fazit-text .p + .p { margin-top: 0; }
  .fs-final .cta-final { margin-top: 10px; }
  .dl small { display: none; }
  .dl { min-height: 0; }
  .kz dd { margin-top: 0; }
  .kz > div { padding: 3px 0; }
  .ck { font-size: 14.5px; }
  .tag { font-size: 10.5px; margin-top: 0; }
  .field-tally { height: min(130px, 30svh); }
  .tally-n { margin-top: 6px; font-size: 15px; }
  .tally-n b { font-size: 28px; }
  .fs .fine { font-size: 12px; margin-top: 6px; }
  .rq-list { margin-top: 10px; }
  .rq { padding: 8px 0; }
  .rq .plan { --h: 30svh; }
  .rq h3 { font-size: 16px; margin-top: 2px; }
  .rq-text > p:last-child { font-size: 13px; margin-top: 4px; }
  .mensch-text .kick { margin-top: 10px; }
  .claim p, .mensch-text .p { font-size: 12.5px; line-height: 1.4; }
  .mensch-text .claim + .p { margin-top: 8px; }
  .vol { height: calc(100svh - var(--bar-h) - 28px); }
  .kz { margin-top: 10px; }
  .kz > div { padding: 5px 0; }
  .kz-n { font-size: 20px; }
  .kz-f { font-size: 12px; }
  .dl { margin-top: 6px; font-size: 13px; }
  .dl small { font-size: 11.5px; }
  .fazit { font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
  .source { margin-top: 6px; font-size: 10.5px; line-height: 1.4; }
  .fs .gonote { margin-top: 6px; }
  .fs-ergebnis .fine { font-size: 11px; line-height: 1.4; }
}

/* ---------- phones held sideways: the page flows (css/ki.css), so the type stays readable ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .fs { --fs-quote: 18px; }
  .credit, .vol-hint, .vol-lab, .vol-lab small, .zoom-label { font-size: 12px; }
  .fs .fine { font-size: 14px; margin-top: 10px; }
  .fs-hero .back, .back-end { min-height: 44px; font-size: 15px; }
  .steck > div { padding: 7px 0; }
  .steck dt { font-size: 12px; }
  .steck dd { font-size: 16px; line-height: 1.45; }
  .lesen-text { grid-column: 1 / -1; }
  .lesen-text .p, .pruef-text .p { font-size: 16px; line-height: 1.55; }
  .h2 + .p { margin-top: 16px; }
  .plan-lesen { display: none; }
  .plan-lesen-m { display: block; grid-column: 1 / -1; margin-top: 28px; }
  .schab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .vtab { margin-top: 20px; }
  .vtab thead th { font-size: 12px; }
  .vtab tbody th, .vtab td { font-size: 16px; padding: 8px 6px 8px 0; }
  .checks li { padding: 10px 0; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
  .tick { width: 22px; height: 22px; }
  .ck { font-size: 17px; }
  .tag { display: block; font-size: 12px; margin-top: 2px; }
  .tally-n { font-size: 17px; }
  .tally-n b { font-size: 32px; }
  .rq { padding: 20px 0; }
  .rq h3 { font-size: 19px; }
  .rq-text > p:last-child { font-size: 16px; margin-top: 8px; }
  .kick { font-size: 12px; }
  .claim p, .mensch-text .p { font-size: 16px; line-height: 1.5; }
  .mensch-text .claim + .p { margin-top: 14px; }
  .vol { height: min(380px, 100svh - var(--bar-h) - 24px); }
  .kz > div { padding: 8px 0; }
  .kz-n { font-size: 22px; }
  .kz-f { font-size: 14px; }
  .dl { min-height: 44px; font-size: 15px; }
  .dl small { display: block; font-size: 13px; }
  .fazit-text .p { font-size: 16px; line-height: 1.55; }
  .fazit { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
  .source { margin-top: 16px; font-size: 13px; }
  .fs-ergebnis .fine { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .zoom, .zoom .detail, .vol-lab, .zoom-label { transition: none !important; }
  .on .pen .dot, .zoomed.ringed .pen-ring .dot { transition: none !important; }
}
.fs .nobr { white-space: nowrap; }