/* =====================================================================
   naegler.hamburg – reveal.js Theme
   ---------------------------------------------------------------------
   A full, standalone reveal.js theme (NOT a layer on top of a stock
   theme). Selected via the page record's theme field (value
   "naeglerhamburg", label "naegler.hamburg") and resolved to this file
   by Neoblack\TemplateNaeglerhamburg\DataProcessing\PresentationThemeProcessor.

   Design system — "Designsystem Frank Nägler" (Runde 2, Variante 1a),
   the same board the website is built to, applied to the slide canvas.
     · Paper canvas (#F7F4EF), generous whitespace, flat design.
     · NO shadows, NO gradients — a hairline and a change of plane separate.
     · Tinte 900 (#16202B) for headings and dark chapter slides, Petrol
       (#2C7A75) as the accent, used sparingly. One accent per plane.
     · Archivo headings, Instrument Sans body, IBM Plex Mono code.
     · 4px spacing base, radii 0 bands / 4 controls / 6 cards.
   All values come from the design tokens on :root below; every rule
   consumes a token rather than a hard-coded literal, so the system stays
   consistent, skalierbar and wartbar.

   A reveal.js theme = the `--r-*` custom properties on :root PLUS the
   rules that consume them. reveal.css only ships layout; without the
   consuming rules text would inherit the viewport default. The consuming
   block below is the canonical reveal.js theme rule set — palette/type
   come from the tokens (mapped from the brand tokens).

   Loaded as `<f:asset.css identifier="revealjs-theme">` AFTER reveal.css
   and BEFORE Layouts.css, so rules that must beat Layouts.css use a higher
   specificity (e.g. `.reveal .reveal-cover .cover-wordmark`).
   ===================================================================== */

/* ---------- Fonts (self-hosted, GDPR-friendly) ---------- */
@font-face {
    font-family: "Archivo";
    font-style: normal; font-weight: 400 700; font-display: optional;
    src: url("../../Fonts/archivo-var.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Instrument Sans";
    font-style: normal; font-weight: 400 700; font-display: optional;
    src: url("../../Fonts/instrument-sans-var.woff2") format("woff2-variations");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal; font-weight: 400; font-display: optional;
    src: url("../../Fonts/ibm-plex-mono-400.woff2") format("woff2");
}

/* =====================================================================
   Design tokens
   ===================================================================== */
:root {
    /* ---- Tinte: text, structure, dark chapter planes ---- */
    --nh-navy:          #16202B;   /* Tinte 900 – headings, dark planes, primary */
    --nh-navy-hover:    #2C3846;   /* Tinte 700 */

    /* ---- Petrol: the accent, one per plane ---- */
    --nh-teal:          #2C7A75;   /* Akzent – lines, links, markers */
    --nh-teal-strong:   #226460;   /* Petrol tief – link hover on paper */
    --nh-teal-soft:     #4FA9A2;   /* Petrol lifted – accents on ink slides */
    --nh-teal-tint:     #DEEBE9;   /* Petrol leise – chips, soft fills */
    --nh-teal-line:     #2C7A75;

    /* ---- Papier: planes & lines ---- */
    --nh-bg:            #F7F4EF;   /* Papier – the slide canvas */
    --nh-surface:       #FFFFFF;   /* Weiß – cards, code, tables, set-off areas */
    --nh-surface-2:     #EDE8E0;   /* Papier tief – quiet bands */
    --nh-border:        #DFD9D0;   /* Linie */

    /* ---- Text (Tinte scale) ---- */
    --nh-text:          #16202B;   /* Tinte 900 – primary, projector-safe */
    --nh-text-2:        #5C6570;   /* Tinte 500 – secondary */
    /* Tinte 400 (#8A9099) is on the board but fails AA on paper at 2.9:1,
       so captions take the darkest tone that still reads as a third voice. */
    --nh-text-3:        #5C6570;

    /* ---- Status (board values) ---- */
    --nh-success:       #2C7A75;
    --nh-warning:       #A07A1E;
    --nh-error:         #A33A32;

    /* ---- Typography ---- */
    --nh-font-head: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --nh-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --nh-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---- Spacing (board scale, 4px base) ---- */
    --sp-1:  8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;
    --sp-6: 64px;
    --sp-7: 96px;

    /* ---- Radii: 0 bands · 4 controls · 6 cards ---- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   6px;
    --radius-pill: 999px;

    /* ---- Border widths: a hairline does the structural work ---- */
    --line: 1px;
    --line-marker: 3px;

    /* Legacy alias from the extension's Layouts.css (.cover-wordmark,
       .reveal-author reference `--cmp-accent`) → point it at brand teal. */
    --cmp-accent: var(--nh-teal);

    /* ================= reveal.js tokens (mapped from brand tokens) ========= */
    --r-background:              var(--nh-bg);
    --r-background-color:        var(--nh-bg);

    /* Body type — comfortably readable on the slide canvas, left-aligned. */
    --r-main-font:               var(--nh-font-body);
    --r-main-font-size:          28px;
    --r-main-color:              var(--nh-text);
    --r-block-margin:            16px;

    /* Headings */
    --r-heading-margin:          0 0 var(--sp-2) 0;
    --r-heading-font:            var(--nh-font-head);
    --r-heading-color:           var(--nh-navy);
    --r-heading-line-height:     1.1;
    --r-heading-letter-spacing:  -0.025em;
    --r-heading-text-transform:  none;
    --r-heading-text-shadow:     none;
    --r-heading-font-weight:     600;
    --r-heading1-text-shadow:    none;
    --r-heading1-size:           2.4em;
    --r-heading2-size:           1.6em;
    --r-heading3-size:           1.2em;
    --r-heading4-size:           0.95em;

    /* Code */
    --r-code-font: var(--nh-font-mono);

    /* Links (brand teal) */
    --r-link-color:              var(--nh-teal);
    --r-link-color-dark:         var(--nh-teal-strong);
    --r-link-color-hover:        var(--nh-teal-strong);

    /* Text selection */
    --r-selection-background-color: var(--nh-teal);
    --r-selection-color:            #ffffff;

    /* Overlay chrome (controls, progress, slide numbers) — ink on paper */
    --r-overlay-element-bg-color:   22, 32, 43;
    --r-overlay-element-fg-color:   255, 255, 255;
}

/* ---------- Canvas: flat white, no gradient (briefing: no gradients) ---------- */
.reveal-viewport {
    background: var(--r-background);
    background-color: var(--r-background-color);
}

/* =====================================================================
   Canonical reveal.js theme rules (consume the tokens above)
   Flat: no text-shadows, no box-shadows.
   ===================================================================== */
.reveal {
    font-family: var(--r-main-font);
    font-size: var(--r-main-font-size);
    color: var(--r-main-color);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.reveal ::selection { color: var(--r-selection-color); background: var(--r-selection-background-color); text-shadow: none; }

.reveal .slides section,
.reveal .slides section > section { line-height: 1.5; font-weight: inherit; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
    margin: var(--r-heading-margin);
    color: var(--r-heading-color);
    font-family: var(--r-heading-font);
    font-weight: var(--r-heading-font-weight);
    line-height: var(--r-heading-line-height);
    letter-spacing: var(--r-heading-letter-spacing);
    text-transform: var(--r-heading-text-transform);
    text-shadow: none;
    word-wrap: break-word;
}
.reveal h1 { font-size: var(--r-heading1-size); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); font-weight: 600; }
.reveal h4 { font-size: var(--r-heading4-size); font-weight: 600; }
.reveal h1:last-child, .reveal h2:last-child, .reveal h3:last-child,
.reveal h4:last-child, .reveal h5:last-child, .reveal h6:last-child { margin-bottom: 0; }

.reveal p { margin: var(--r-block-margin) 0; line-height: 1.5; }

.reveal img, .reveal video, .reveal iframe { max-width: 95%; max-height: 95%; }
.reveal img { margin: var(--r-block-margin) 0; }

.reveal strong, .reveal b { font-weight: 600; }
.reveal em { font-style: italic; }

.reveal ol, .reveal dl, .reveal ul { text-align: left; margin: 0 0 0 1em; display: inline-block; }
.reveal ol { list-style-type: decimal; }
.reveal ul { list-style-type: disc; }
.reveal ul ul { list-style-type: square; }
.reveal ul ul ul { list-style-type: circle; }
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { margin-left: 40px; display: block; }
.reveal li { margin: .4em 0; }
.reveal li::marker { color: var(--nh-teal); }
.reveal dt { font-weight: 600; }
.reveal dd { margin-left: 40px; }

/* Pull quote — flat, teal hairline, no shadow, no background box. */
.reveal blockquote {
    width: auto; max-width: 42em; margin: var(--r-block-margin) 0;
    padding: .1em 0 .1em var(--sp-3);
    border-left: var(--line) solid var(--nh-teal);
    background: none; box-shadow: none;
    font-family: var(--nh-font-head); font-weight: 500; font-style: normal;
    color: var(--nh-navy); line-height: 1.3;
    display: block; position: relative;
}
.reveal blockquote p:first-child, .reveal blockquote p:last-child { display: inline-block; }
.reveal q { font-style: italic; }

/* Code blocks — light surface, JetBrains Mono, hairline border, no shadow. */
.reveal pre {
    width: 90%; margin: var(--r-block-margin) auto; text-align: left;
    font-size: .55em; font-family: var(--r-code-font); word-wrap: break-word;
    line-height: 1.35; display: block; position: relative;
    background: var(--nh-surface); border: 1px solid var(--nh-border);
    border-radius: var(--radius-md); box-shadow: none;
}
.reveal code { font-family: var(--r-code-font); text-transform: none; tab-size: 2; }
.reveal pre code { word-wrap: normal; max-height: 400px; padding: .8em 1em; display: block; overflow: auto; background: none; color: var(--nh-text); }
.reveal .code-wrapper { white-space: normal; }
.reveal .code-wrapper code { white-space: pre; }
/* Inline code — override Layouts.css's dark chip with a light-surface token. */
.reveal :not(pre) > code {
    display: inline; padding: .1em .4em;
    background: var(--nh-surface); color: var(--nh-teal-strong);
    border: 1px solid var(--nh-border); border-radius: var(--radius-sm);
    font-size: .8em; white-space: nowrap;
}

/* Tables — navy header / white text, zebra rows, fine grey lines. */
.reveal table { border-collapse: collapse; border-spacing: 0; margin: auto; }
.reveal table th, .reveal table td { text-align: left; padding: .45em .75em; }
.reveal table th {
    font-family: var(--nh-font-head); font-weight: 600;
    background: var(--nh-navy); color: #fff; border-bottom: none;
}
.reveal table td { border-bottom: 1px solid var(--nh-border); }
.reveal table tbody tr:nth-child(even) td { background: var(--nh-surface); }
.reveal table th[align=center], .reveal table td[align=center] { text-align: center; }
.reveal table th[align=right], .reveal table td[align=right] { text-align: right; }
.reveal table tbody tr:last-child td { border-bottom: none; }

.reveal sup { vertical-align: super; font-size: smaller; }
.reveal sub { vertical-align: sub; font-size: smaller; }
.reveal small { vertical-align: top; font-size: .6em; line-height: 1.2em; display: inline-block; }
.reveal small * { vertical-align: top; }

.reveal a { color: var(--r-link-color); text-decoration: none; transition: color .15s; }
.reveal a:hover { color: var(--r-link-color-hover); text-shadow: none; border: none; }
.reveal .roll span:after { color: #fff; background: var(--r-link-color-dark); }

/* Framed media — 2px teal border, no shadow. */
.reveal .r-frame { border: var(--line) solid var(--nh-border); box-shadow: none; }
.reveal a .r-frame { transition: all .15s linear; }
.reveal a:hover .r-frame { border-color: var(--nh-teal); box-shadow: none; }

.reveal .controls { color: var(--nh-navy); }
.reveal .progress { color: var(--nh-teal); background: var(--nh-border); }

@media print { .backgrounds { background-color: var(--r-background-color); } }

/* =====================================================================
   Slide surface variants
   ---------------------------------------------------------------------
   Default slide = navy text on white. Chapter / "Danke" slides use a navy
   background (set via reveal `data-background-color`, which stamps
   `.has-dark-background`, or the explicit `.nh-invert` helper) → white
   text, teal-soft accents, and the large cropped dialog mark on the right.
   `.light` / `.has-light-background` are the (default) light case, kept
   explicit so decks that set them stay correct.
   ===================================================================== */

/* Classic left alignment by default; opt into centering with `.nh-center`. */
.reveal .slides section { text-align: left; }
.reveal .slides section.nh-center { text-align: center; }
.reveal .reveal-cover { text-align: left; padding-top: var(--sp-6); }
.reveal .slides section.nh-center .reveal-cover { text-align: center; }

/* Light slides (default look) — navy text, teal links. */
.reveal .slides section.light,
.reveal .slides section.has-light-background { color: var(--nh-text); }
.reveal .slides section.light h1, .reveal .slides section.light h2,
.reveal .slides section.light h3, .reveal .slides section.light h4,
.reveal .slides section.has-light-background h1, .reveal .slides section.has-light-background h2,
.reveal .slides section.has-light-background h3, .reveal .slides section.has-light-background h4 { color: var(--nh-navy); }
.reveal .slides section.light a, .reveal .slides section.has-light-background a { color: var(--nh-teal-strong); }

/* Dark / chapter slides — white text on navy. */
.reveal .slides section.nh-invert,
.reveal .slides section.dark,
.reveal .slides section.has-dark-background { color: #F7F4EF; }
.reveal .slides section.nh-invert h1, .reveal .slides section.nh-invert h2,
.reveal .slides section.nh-invert h3, .reveal .slides section.nh-invert h4,
.reveal .slides section.dark h1, .reveal .slides section.dark h2,
.reveal .slides section.dark h3, .reveal .slides section.dark h4,
.reveal .slides section.has-dark-background h1, .reveal .slides section.has-dark-background h2,
.reveal .slides section.has-dark-background h3, .reveal .slides section.has-dark-background h4 { color: #ffffff; }
.reveal .slides section.nh-invert a,
.reveal .slides section.dark a,
.reveal .slides section.has-dark-background a { color: var(--nh-teal-soft); }
.reveal .slides section.nh-invert li::marker,
.reveal .slides section.dark li::marker,
.reveal .slides section.has-dark-background li::marker { color: var(--nh-teal-soft); }

/* =====================================================================
   Decorative dialog mark (briefing: large, transparent, cropped, right).
   Painted via `mask` so the colour comes from `background`. Shown on
   chapter / title / "Danke" slides, or on any slide tagged `.nh-dialog`.
   ===================================================================== */
.reveal .slides section.nh-invert::after,
.reveal .slides section.nh-title::after,
.reveal .slides section.nh-dialog::after {
    content: ""; position: absolute; top: 50%; right: -6vw;
    transform: translateY(-50%);
    width: 62vh; height: 62vh; pointer-events: none; z-index: 0;
    -webkit-mask: url("../../Images/dialog.svg") no-repeat center / contain;
            mask: url("../../Images/dialog.svg") no-repeat center / contain;
    background: var(--nh-navy);   /* on light slides */
    opacity: .05;
}
/* On dark slides the mark is white. */
.reveal .slides section.nh-invert::after,
.reveal .slides section.dark.nh-dialog::after,
.reveal .slides section.has-dark-background.nh-dialog::after { background: #ffffff; opacity: .06; }
/* Keep real content above the decoration. */
.reveal .slides section.nh-invert > *,
.reveal .slides section.nh-title > *,
.reveal .slides section.nh-dialog > * { position: relative; z-index: 1; }

/* =====================================================================
   Cover slide (Container/Cover.html) — overrides Layouts.css.
   Logo top-left, big headline, subtitle, fine teal line, dialog mark right.
   ===================================================================== */
.reveal .reveal-cover .cover-wordmark {
    font-family: var(--nh-font-head);
    font-weight: 600;
    font-size: 3.2em;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--nh-navy);
    text-transform: none;
    position: relative;
    padding-bottom: var(--sp-3);
}
/* Fine teal line under the headline. */
.reveal .reveal-cover .cover-wordmark::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 3.2em; height: var(--line); background: var(--nh-teal);
}
.reveal .slides section.nh-center .reveal-cover .cover-wordmark::after { left: 50%; transform: translateX(-50%); }
.reveal .reveal-cover h3 { color: var(--nh-text-2); font-family: var(--nh-font-head); font-weight: 500; font-size: 1.3em; margin: 0 0 var(--sp-3); }
.reveal .reveal-cover-body { color: var(--nh-text-2); }
.reveal .reveal-cover-image img { max-width: 24%; }

/* Cover on a dark background. */
.reveal .slides section.nh-invert .reveal-cover .cover-wordmark,
.reveal .slides section.has-dark-background .reveal-cover .cover-wordmark { color: #ffffff; }
.reveal .slides section.nh-invert .reveal-cover h3,
.reveal .slides section.has-dark-background .reveal-cover h3 { color: var(--nh-teal-soft); }

/* Author credit (lower-left, .reveal-author from Layouts.css). */
.reveal .reveal-author { color: var(--nh-text-3); }

/* =====================================================================
   Logo (.reveal-logo, fixed, from Layouts.css) — top-left, no chrome.
   The default deck logo is logo.svg (dark). A full-width white bar sits
   behind it (the logo's ::before, fixed to the viewport) so the dark logo
   always rests on a light surface — seamless on light slides, a clean white
   header band on dark/navy slides. Its height stays within the slides' top
   safe-area (--sp-6 on .cb-slide / .reveal-cover) so it never covers content.
   ===================================================================== */
.reveal .reveal-logo {
    top: var(--sp-3); left: var(--sp-3); right: auto;
    width: auto; height: 3.4vh;
    padding: 0; background: none; border: 0; border-radius: 0;
}
.reveal .reveal-logo::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 8.5vh;
    background: var(--nh-bg); z-index: -1; pointer-events: none;
}
.reveal .reveal-logo img { height: 3.4vh; width: auto; max-width: none; margin: 0; }

/* =====================================================================
   nh-* structural components (personas, escalation staircase, iceberg,
   numbered process, pull quote) — used by the "Bevor es brennt" deck.
   Re-skinned flat/light; opt-in via nh-* classes on the slide/bodytext.
   ===================================================================== */

/* ---------- Personas (Jana / Basti) ---------- */
.nh-personas { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-2); }
.nh-persona { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--nh-font-head); font-weight: 600; color: var(--nh-navy); }
.nh-avatar { width: 1.8em; height: 1.8em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nh-navy); color: #fff; font-weight: 600; }
.nh-avatar.b { background: var(--nh-teal); }

/* ---------- Escalation staircase (Content Block neoblack/staircase) ---------- */
.cb-staircase .cb-staircase__intro { margin-bottom: var(--sp-1); }
.nh-stair { display: flex; align-items: flex-end; gap: 1.4%; margin: .3em 0 0; }
.nh-stair-group { display: flex; flex-direction: column; min-width: 0; }
.nh-stair-bars { display: flex; align-items: flex-end; gap: 7%; height: 190px; }
.nh-stair-bars .step {
    flex: 1; min-width: 0;
    display: flex; align-items: flex-start; justify-content: center; padding-top: .3em;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-family: var(--nh-font-head); font-weight: 600; font-size: .6em; color: #fff;
    background: var(--grp, var(--grp-default, var(--nh-navy)));
    transition: opacity .45s ease;
}
/* Reduced, on-brand palette: navy → teal → warning → error (no rainbow). */
.nh-stair-group:nth-child(1) { --grp-default: var(--nh-navy); }
.nh-stair-group:nth-child(2) { --grp-default: var(--nh-teal); }
.nh-stair-group:nth-child(3) { --grp-default: var(--nh-warning); }
.nh-stair-group:nth-child(n+4) { --grp-default: var(--nh-error); }
.nh-stair-group.dim { opacity: .18; }
.nh-stair-title {
    margin-top: var(--sp-1); text-align: left;
    font-family: var(--nh-font-head); font-weight: 600; font-size: .6em;
    color: var(--grp, var(--grp-default, var(--nh-navy)));
}

/* ---------- Iceberg / four sides of a message (Schulz von Thun) ---------- */
.nh-iceberg { max-width: 78%; }
.nh-iceberg .tip { font-family: var(--nh-font-head); font-weight: 600; font-size: 1.1em; padding: .35em .7em; background: var(--nh-navy); color: #fff; border-radius: var(--radius-sm); display: inline-block; }
.nh-iceberg .below { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: var(--line) dashed var(--nh-border); }
.nh-iceberg .below li { list-style: none; }

/* ---------- Numbered process ---------- */
.nh-steps { display: flex; gap: var(--sp-3); margin-top: var(--sp-1); }
.nh-step { flex: 1; }
.nh-step .num { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--nh-navy); color: #fff; font-family: var(--nh-font-head); font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: .45em; }
.nh-step .t { font-family: var(--nh-font-head); font-weight: 600; color: var(--nh-navy); }
.nh-step .d { color: var(--nh-text-2); font-size: .82em; }

/* ---------- Pull quote ---------- */
.nh-quote { font-family: var(--nh-font-head); font-weight: 500; font-size: 1.15em; line-height: 1.3; border-left: var(--line) solid var(--nh-teal); padding-left: var(--sp-2); margin: .2em 0 var(--sp-2); color: var(--nh-navy); }

/* ---------- Text + image slide (Content Block neoblack/textimage) ---------- */
.cb-sti__headline { margin: 0 0 var(--sp-1); }
.cb-sti__subline { margin: -.35em 0 var(--sp-2); font-size: .7em; color: var(--nh-text-3); }
.cb-sti__grid { display: flex; align-items: center; gap: var(--sp-4); }
.cb-sti__body { flex: 1; min-width: 0; text-align: left; }
.cb-sti__media { flex: 0 0 42%; min-width: 0; }
.cb-sti__media img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: none; }
/* DOM order is media, then body → media sits right by default; flip for "left" */
.cb-sti--right .cb-sti__media { order: 2; }
.cb-sti--left .cb-sti__media { order: 0; }
@media (max-width: 40rem) { .cb-sti__grid { flex-direction: column; } }

/* =====================================================================
   Slide content-block shell (design-system base for every slide block)
   ---------------------------------------------------------------------
   `.cb-slide` fills the canvas so the vertical-alignment option
   (top / center / bottom) is meaningful; `.cb-slide__inner` constrains
   the content width. Both classes + modifiers are set from the tt_content
   columns tx_naeglerhamburg_slide_valign / _cwidth by every slide
   template, so a new slide type only renders the shell to inherit them.
   ===================================================================== */
/* Top padding reserves a safe area for the fixed top-left logo so left-aligned
   headlines don't collide with it. */
.reveal .slides section .cb-slide { display: flex; flex-direction: column; width: 100%; min-height: 560px; padding-top: var(--sp-6); }
.cb-slide--v-top    { justify-content: flex-start; }
.cb-slide--v-center { justify-content: center; }
.cb-slide--v-bottom { justify-content: flex-end; }

.cb-slide__inner { width: 100%; min-width: 0; margin-inline: auto; }
.cb-slide--w-narrow { max-width: 42rem; }
.cb-slide--w-normal { max-width: 60rem; }
.cb-slide--w-wide   { max-width: 100%; }
.cb-slide--w-full   { max-width: none; }

/* Fill slides (title with background, big image) go edge-to-edge over the full
   reveal canvas. reveal wraps each slide's content in a `.reveal-fit-wrapper`
   (auto height) and its fit script scales the wrapper down when content is
   "taller" than 700px — a fragile height chain. Instead we make the fill slide
   `position: absolute; inset: 0`: it fills the section directly (the section is
   reveal's positioned ancestor), it is OUT of flow so the fit script measures ~0
   and never scales it, and the wrapper's height no longer matters. The section
   still needs an explicit height for `inset: 0` to resolve against. */
.reveal .slides > section:has(.cb-slide--fill) { height: 100%; }
.reveal .slides section .cb-slide--fill { position: absolute; inset: 0; min-height: 0; padding: 0; border-radius: 0; }

.cb-slide__headline { margin: 0 0 var(--sp-3); }
.cb-slide__headline:has(+ .cb-slide__subline) { margin-bottom: var(--sp-1); }
.cb-slide__subline { margin: 0 0 var(--sp-2); font-size: .8em; color: var(--nh-text-3); }

/* ---------- Title slide (neoblack/title) ---------- */
.cb-title { text-align: center; }
.cb-title__content { position: relative; z-index: 1; }
.cb-title__headline { font-size: var(--r-heading1-size); margin: 0 0 var(--sp-2); }
.cb-title__headline::after { content: ""; display: block; width: 3em; height: var(--line); background: var(--nh-teal); margin: var(--sp-2) auto 0; }
.cb-title__subtitle { font-size: 1.1em; color: var(--nh-text-2); margin: 0; font-family: var(--nh-font-head); font-weight: 500; }
.cb-title__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 0; z-index: 0; }
.cb-title__bg img { width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; max-height: none; }
/* Flat scrim (single solid tint, no gradient) for text legibility over a photo. */
.cb-title__scrim { position: absolute; inset: 0; background: rgba(11, 29, 52, .62); }
.cb-title--has-bg .cb-title__headline, .cb-title--has-bg .cb-title__subtitle { color: #fff; }
.cb-title--has-bg .cb-title__subtitle { color: #F7F4EF; }

/* ---------- Text-only slide (neoblack/textonly) ---------- */
.cb-textonly__headline { margin: 0 0 var(--sp-2); }
.cb-textonly__body { text-align: left; max-width: 34em; }

/* ---------- Two columns (neoblack/twocol) ---------- */
.cb-twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.cb-twocol__col { min-width: 0; text-align: left; }
.cb-twocol__col ul, .cb-twocol__col ol { display: block; margin-left: 1.1em; }
.cb-twocol__headline { margin: 0 0 var(--sp-1); font-size: var(--r-heading3-size); color: var(--nh-navy); }
@media (max-width: 48rem) { .cb-twocol__grid { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---------- Three columns (neoblack/threecol) ---------- */
.cb-threecol__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--sp-3); align-items: start; }
.cb-threecol__col { min-width: 0; text-align: left; }
.cb-threecol__icon { display: inline-flex; width: 2.2em; height: 2.2em; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--nh-teal-tint); color: var(--nh-teal); margin-bottom: var(--sp-1); }
.cb-threecol__icon svg { width: 1.3em; height: 1.3em; }
.cb-threecol__heading { margin: 0 0 .3em; font-size: var(--r-heading3-size); }
.cb-threecol__body { font-size: .8em; color: var(--nh-text-2); }
.cb-threecol__body ul, .cb-threecol__body ol { display: block; margin-left: 1.1em; }
@media (max-width: 48rem) { .cb-threecol__grid { grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ---------- Bullet list (neoblack/bullets) ---------- */
.cb-bullets__headline { margin: 0 0 var(--sp-2); }
.cb-bullets__body { text-align: left; }
.cb-bullets__body ul, .cb-bullets__body ol { display: block; margin: 0 0 0 1.2em; }
.cb-bullets__body li { margin: .5em 0; line-height: 1.4; }
.cb-bullets__body li::marker { color: var(--nh-teal); }

/* ---------- Big image (neoblack/image) ---------- */
.cb-image { overflow: hidden; border-radius: 0; }
.cb-image__img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none; max-height: none; }
.cb-image--contain .cb-image__img { object-fit: contain; }
.cb-image--cover .cb-image__img { object-fit: cover; }
.cb-image__headline { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); background: rgba(22, 32, 43, .72); }
.cb-image__headline h2 { margin: 0; color: #fff; }
.cb-image__caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: var(--sp-1) var(--sp-3); font-size: .7em; color: #fff; text-align: center; background: rgba(22, 32, 43, .72); }

/* ---------- Table (neoblack/table) ---------- */
.cb-table__headline { margin: 0 0 var(--sp-2); }
.cb-table__scroll { overflow-x: auto; }
.cb-table__t { width: 100%; border-collapse: collapse; margin: 0; font-size: .8em; }
.cb-table__t th, .cb-table__t td { text-align: left; padding: .5em .8em; }
.cb-table__t th { font-family: var(--nh-font-head); font-weight: 600; background: var(--nh-navy); color: #fff; }
.cb-table__t td { border-bottom: 1px solid var(--nh-border); }
.cb-table__t tbody tr:nth-child(even) td { background: var(--nh-surface); }
.cb-table__t tr.is-highlight td, .cb-table__t tr.is-highlight th { background: var(--nh-teal-tint); }

/* ---------- Quote (neoblack/reveal-quote) ---------- */
.cb-quote__inner { text-align: center; }
.cb-quote__figure { margin: 0; }
/* `.reveal` prefix beats the generic `.reveal blockquote` prose rule (teal
   left border + left padding), which must not apply to the centered quote. */
.reveal .cb-quote__text { font-family: var(--nh-font-head); font-weight: 500; font-size: 1.5em; line-height: 1.25; color: var(--nh-navy); margin: 0 0 var(--sp-2); padding: 0; border: 0; width: auto; background: none; box-shadow: none; font-style: normal; }
.cb-quote__text::before { content: "\201C"; color: var(--nh-teal); }
.cb-quote__text::after { content: "\201D"; color: var(--nh-teal); }
.cb-quote__cite { font-size: .8em; }
.cb-quote__author { font-family: var(--nh-font-head); font-weight: 600; color: var(--nh-navy); }
.cb-quote__role { color: var(--nh-text-3); }
.cb-quote__role::before { content: " · "; color: var(--nh-text-3); }
.cb-quote__portrait img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto 1em; max-width: none; max-height: none; box-shadow: none; border: var(--line) solid var(--nh-border); }
.cb-quote--has-portrait .cb-quote__inner { display: flex; align-items: center; gap: var(--sp-4); text-align: left; }
.cb-quote--has-portrait .cb-quote__portrait { flex: 0 0 auto; }
.cb-quote--has-portrait .cb-quote__portrait img { margin: 0; }
@media (max-width: 48rem) { .cb-quote--has-portrait .cb-quote__inner { flex-direction: column; text-align: center; } }

/* ---------- QR code (neoblack/qrcode) — contact slide ---------- */
.cb-qr__inner { text-align: center; }
.cb-qr__headline { margin: 0 0 var(--sp-2); }
.cb-qr__code { display: inline-block; padding: var(--sp-2); background: #fff; border: 1px solid var(--nh-border); border-radius: var(--radius-md); box-shadow: none; }
.cb-qr__code svg { display: block; width: 300px; height: 300px; }
.cb-qr__url { font-family: var(--nh-font-mono); font-size: .7em; color: var(--nh-teal-strong); word-break: break-all; margin: var(--sp-1) 0 0; }
.cb-qr__desc { max-width: 30em; margin: var(--sp-1) auto 0; font-size: .85em; color: var(--nh-text-2); }

/* ---------- KPI / Kennzahlen (neoblack/kpi) ---------- */
.cb-kpi__intro { text-align: center; color: var(--nh-text-2); margin: 0 0 var(--sp-3); }
.cb-kpi__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--sp-3); align-items: stretch; }
.cb-kpi__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25em; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--nh-border); border-radius: var(--radius-md); background: var(--nh-surface); transition: border-color .15s; }
.cb-kpi__item:hover { border-color: var(--nh-navy); }
.cb-kpi__icon { display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; color: var(--nh-teal); }
.cb-kpi__icon svg { width: 1.5em; height: 1.5em; }
.cb-kpi__value { display: flex; align-items: baseline; justify-content: center; gap: .12em; }
.cb-kpi__number { font-family: var(--nh-font-head); font-weight: 600; font-size: 2.4em; line-height: 1; color: var(--nh-navy); }
.cb-kpi__unit { font-size: 1em; color: var(--nh-teal); }
.cb-kpi__title { font-family: var(--nh-font-head); font-weight: 600; font-size: .9em; color: var(--nh-navy); }
.cb-kpi__desc { font-size: .68em; color: var(--nh-text-3); line-height: 1.3; }
@media (max-width: 48rem) { .cb-kpi__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Process (neoblack/reveal-process) ---------- */
/* `.reveal` prefix beats the generic `.reveal ol` prose rules (which would
   otherwise force list-style/inline-block onto this layout list). */
.reveal .cb-process__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-3); --num: 2.1em; }
.reveal .cb-process__list > li { margin: 0; }
.cb-process--vertical .cb-process__list { flex-direction: column; }
.cb-process--horizontal .cb-process__list { flex-direction: row; align-items: stretch; }
.cb-process__step { flex: 1 1 0; min-width: 0; display: flex; gap: var(--sp-1); align-items: flex-start; text-align: left; position: relative; }
.cb-process--horizontal .cb-process__step { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.cb-process__num { flex: 0 0 auto; display: inline-flex; width: var(--num); height: var(--num); align-items: center; justify-content: center; border-radius: 50%; font-family: var(--nh-font-head); font-weight: 600; color: #fff; background: var(--nh-navy); }
.cb-process__body { min-width: 0; }
.cb-process__title { margin: .1em 0 .2em; font-size: var(--r-heading3-size); display: flex; align-items: center; gap: .35em; }
/* Horizontal steps are narrow columns: stack the icon above a smaller title so
   text stays inside its column and doesn't collide with neighbours. */
.cb-process--horizontal .cb-process__title { flex-direction: column; justify-content: center; gap: .25em; font-size: 1em; margin: 0 0 .2em; }
.cb-process--horizontal .cb-process__icon { width: 1.4em; height: 1.4em; }
.cb-process__icon { width: 1em; height: 1em; color: var(--nh-teal); flex: 0 0 auto; }
.cb-process__desc { font-size: .78em; color: var(--nh-text-2); }
/* Connectors — 2px teal hairline. */
/* Connector runs from this circle's edge to the next circle's edge. The
   center-to-center distance is one step (100%) plus the flex gap; subtract the
   circle diameter (--num) so the line touches both circles without a gap. */
.cb-process--horizontal .cb-process__step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--num) / 2); left: calc(50% + var(--num) / 2); width: calc(100% + var(--sp-3) - var(--num)); height: var(--line); background: var(--nh-teal-line); transform: translateY(-50%); }
.cb-process--vertical .cb-process__step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--num) / 2); top: var(--num); width: var(--line); height: calc(100% + var(--sp-3) - var(--num)); background: var(--nh-teal-line); transform: translateX(-50%); }
@media (max-width: 48rem) { .cb-process--horizontal .cb-process__list { flex-direction: column; } .cb-process--horizontal .cb-process__step { flex-direction: row; align-items: flex-start; text-align: left; } .cb-process--horizontal .cb-process__step::after { display: none; } }

/* ---------- Timeline (neoblack/reveal-timeline) ---------- */
.reveal .cb-timeline__list { list-style: none; margin: 0; padding: 0; --dot: 1.5em; }
.reveal .cb-timeline__list > li { margin: 0; }
.cb-timeline--vertical .cb-timeline__list { display: flex; flex-direction: column; }
.cb-timeline--vertical .cb-timeline__event { position: relative; padding: 0 0 var(--sp-3) 2.6em; text-align: left; }
.cb-timeline--vertical .cb-timeline__event:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--dot) / 2); top: calc(var(--dot) + .15em); bottom: 0; width: var(--line); background: var(--nh-teal-line); transform: translateX(-50%); }
.cb-timeline__dot { position: absolute; left: 0; top: .1em; display: inline-flex; width: 1.5em; height: 1.5em; align-items: center; justify-content: center; border-radius: 50%; background: var(--nh-teal-tint); color: var(--nh-teal); border: var(--line) solid var(--nh-teal); }
.cb-timeline__dot svg { width: .85em; height: .85em; }
.cb-timeline__event.is-current .cb-timeline__dot { background: var(--nh-navy); color: #fff; border-color: var(--nh-navy); }
.cb-timeline__date { display: block; font-family: var(--nh-font-head); font-weight: 600; font-size: .72em; color: var(--nh-teal-strong); letter-spacing: .02em; }
.cb-timeline__title { margin: .05em 0 .15em; font-size: var(--r-heading3-size); }
.cb-timeline__desc { font-size: .78em; color: var(--nh-text-2); }
.cb-timeline__event.is-current .cb-timeline__title { color: var(--nh-navy); }
/* Horizontal variant */
.cb-timeline--horizontal .cb-timeline__list { display: flex; flex-direction: row; gap: var(--sp-2); }
.cb-timeline--horizontal .cb-timeline__event { flex: 1 1 0; min-width: 0; position: relative; padding: 2.4em 0 0; text-align: center; }
.cb-timeline--horizontal .cb-timeline__dot { left: 50%; top: 0; transform: translateX(-50%); }
.cb-timeline--horizontal .cb-timeline__event:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--dot) / 2); left: calc(50% + var(--dot) / 2); width: calc(100% + var(--sp-2) - var(--dot)); height: var(--line); background: var(--nh-teal-line); transform: translateY(-50%); }
@media (max-width: 48rem) { .cb-timeline--horizontal .cb-timeline__list { flex-direction: column; } .cb-timeline--horizontal .cb-timeline__event { padding: 0 0 var(--sp-3) 2.6em; text-align: left; } .cb-timeline--horizontal .cb-timeline__dot { left: 0; transform: none; } .cb-timeline--horizontal .cb-timeline__event:not(:last-child)::before { top: calc(var(--dot) + .15em); left: calc(var(--dot) / 2); bottom: 0; width: var(--line); height: auto; transform: translateX(-50%); } }

/* ---------- Callout / Hinweis (neoblack/callout) — flat, left 2px accent ---------- */
.cb-callout__box { display: flex; gap: var(--sp-2); align-items: flex-start; text-align: left; padding: var(--sp-3); border: 1px solid var(--nh-border); border-left: var(--line) solid var(--cb-callout-accent, var(--nh-teal)); border-radius: var(--radius-md); background: var(--cb-callout-bg, var(--nh-surface)); }
.cb-callout__icon { flex: 0 0 auto; display: inline-flex; width: 2em; height: 2em; align-items: center; justify-content: center; color: var(--cb-callout-accent, var(--nh-teal)); }
.cb-callout__icon svg { width: 1.6em; height: 1.6em; }
.cb-callout__content { min-width: 0; }
.cb-callout__title { margin: 0 0 .25em; font-size: var(--r-heading3-size); color: var(--nh-navy); }
.cb-callout__content p:last-child { margin-bottom: 0; }
.cb-callout--info    { --cb-callout-accent: var(--nh-teal);    --cb-callout-bg: var(--nh-teal-tint); }
.cb-callout--success { --cb-callout-accent: var(--nh-success); --cb-callout-bg: rgba(43, 174, 102, .08); }
.cb-callout--warning { --cb-callout-accent: var(--nh-warning); --cb-callout-bg: rgba(244, 161, 0, .08); }
.cb-callout--danger  { --cb-callout-accent: var(--nh-error);   --cb-callout-bg: rgba(209, 67, 67, .08); }
.cb-callout--neutral { --cb-callout-accent: var(--nh-text-3);  --cb-callout-bg: var(--nh-surface); }

/* ---------- Icon cards (neoblack/iconcards) ---------- */
.cb-iconcards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-3); align-items: stretch; }
/* Fixed cards-per-row (field "Karten pro Reihe"); empty value keeps auto-fit above. */
.cb-iconcards__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cb-iconcards__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-iconcards__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cb-iconcards__grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cb-iconcards__grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cb-iconcards__card { display: flex; flex-direction: column; gap: .4em; text-align: left; padding: var(--sp-3); border: 1px solid var(--nh-border); border-radius: var(--radius-md); background: var(--nh-surface); transition: border-color .15s; }
.cb-iconcards__card:hover { border-color: var(--nh-navy); }
.cb-iconcards__icon { display: inline-flex; width: 2.4em; height: 2.4em; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--nh-teal-tint); color: var(--nh-teal); }
.cb-iconcards__icon svg { width: 1.4em; height: 1.4em; }
.cb-iconcards__title { margin: 0; font-size: 1.05em; }
/* Long German compounds (e.g. "Katastrophenschutz") must hyphenate cleanly
   inside narrow card/column titles instead of breaking mid-word. Page is
   lang="de-DE", so the browser uses German hyphenation. */
.cb-iconcards__title, .cb-threecol__heading, .cb-kpi__title, .cb-team__name { hyphens: auto; overflow-wrap: break-word; }
.cb-iconcards__desc { font-size: .78em; color: var(--nh-text-2); }

/* ---------- Comparison / Vergleich (neoblack/comparison) ---------- */
.cb-comparison__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: stretch; }
.cb-comparison__side { position: relative; text-align: left; padding: var(--sp-3); border: var(--line) solid var(--nh-border); border-radius: var(--radius-md); background: var(--nh-surface); transition: border-color .3s ease, background-color .3s ease; }
/* Winner look — applied immediately (--winner) or, in "reveal on click" mode,
   once the fragment flag inside the winning side becomes .visible. */
.cb-comparison__side--winner,
.cb-comparison__side:has(> .cb-comparison__flag.visible) { border-color: var(--nh-teal); background: var(--nh-teal-tint); }
.cb-comparison__side--winner::after,
.cb-comparison__side:has(> .cb-comparison__flag.visible)::after { content: "✓"; position: absolute; top: -.7em; right: -.6em; width: 1.6em; height: 1.6em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nh-success); color: #fff; font-weight: 600; font-size: .8em; }
/* Empty state carrier — invisible; only its .visible class (toggled by reveal on
   click) drives the winner styling above. */
.cb-comparison__flag { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.cb-comparison__title { margin: 0 0 var(--sp-1); font-size: var(--r-heading3-size); color: var(--nh-navy); }
.cb-comparison__body { font-size: .82em; }
.cb-comparison__body ul, .cb-comparison__body ol { display: block; margin-left: 1.1em; }
@media (max-width: 48rem) { .cb-comparison__grid { grid-template-columns: 1fr; } }

/* ---------- Code (neoblack/reveal-code) — light surface, flat ---------- */
.cb-code__wrap { position: relative; text-align: left; }
/* No max-height: let all lines show and rely on reveal's fit-wrapper to scale
   the slide down if the listing is tall (scrolling isn't usable in a deck). */
.cb-code__pre { margin: 0; border-radius: var(--radius-md); border: 1px solid var(--nh-border); background: var(--nh-surface); box-shadow: none; font-size: .62em; }
.cb-code__pre code { font-family: var(--nh-font-mono); border-radius: var(--radius-md); color: var(--nh-text); background: none; }
.cb-code__code { display: block; }
.cb-code__line { display: block; padding: 0 1em; }
.cb-code--numbered .cb-code__line { counter-increment: cbline; }
.cb-code--numbered .cb-code__line::before { content: counter(cbline); display: inline-block; width: 2.5em; margin-left: -1em; margin-right: 1em; padding-right: .6em; text-align: right; color: var(--nh-text-3); border-right: 1px solid var(--nh-border); }
.cb-code--numbered .cb-code__code { counter-reset: cbline; }
.cb-code__line.is-hl { background: var(--nh-teal-tint); box-shadow: inset 3px 0 0 var(--nh-teal); }
.cb-code__copy { position: absolute; top: .5em; right: .5em; z-index: 2; padding: .3em .8em; font-size: .55em; font-family: var(--nh-font-body); color: var(--nh-navy); background: #fff; border: 1px solid var(--nh-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, color .15s; }
.cb-code__copy:hover { color: var(--nh-navy); border-color: var(--nh-navy); }
.cb-code__copy.is-copied { color: #fff; background: var(--nh-success); border-color: var(--nh-success); }

/* ---------- Mermaid (neoblack/mermaid) ---------- */
.cb-mermaid__graph { display: flex; justify-content: center; }
.cb-mermaid__graph svg { max-width: 100%; height: auto; }
.cb-mermaid__error { text-align: left; padding: var(--sp-2); border-radius: var(--radius-md); border: 1px solid var(--nh-border); border-left: var(--line) solid var(--nh-error); background: rgba(209, 67, 67, .08); font-size: .7em; }
.cb-mermaid__error pre { margin: .5em 0 0; font-family: var(--nh-font-mono); font-size: 1em; white-space: pre-wrap; background: none; border: 0; }

/* ---------- Video (neoblack/video) ---------- */
.cb-video__figure { margin: 0; }
.cb-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--nh-navy); border-radius: var(--radius-md); overflow: hidden; box-shadow: none; }
.cb-video__player, .cb-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; max-width: none; }
.cb-video__player { object-fit: contain; }
.cb-video__caption { margin: var(--sp-1) 0 0; font-size: .72em; color: var(--nh-text-3); text-align: center; }
.cb-video__error { color: var(--nh-error); font-size: .8em; text-align: center; }

/* ---------- Team / Speaker (neoblack/team) ---------- */
.cb-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); align-items: stretch; justify-content: center; }
.cb-team__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3em; margin: 0; padding: var(--sp-3); border: 1px solid var(--nh-border); border-radius: var(--radius-md); background: var(--nh-surface); transition: border-color .15s; }
.cb-team__card:hover { border-color: var(--nh-navy); }
.cb-team__portrait { display: block; width: 8em; height: 8em; overflow: hidden; margin-bottom: .3em; }
.cb-team__img { width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; max-height: none; }
.cb-team--circle .cb-team__portrait { border-radius: 50%; }
.cb-team--rounded .cb-team__portrait { border-radius: var(--radius-md); }
.cb-team__name { margin: 0; font-size: var(--r-heading3-size); }
.cb-team__role { margin: 0; font-size: .78em; color: var(--nh-teal-strong); }
.cb-team__desc { margin: .2em 0 0; font-size: .72em; color: var(--nh-text-2); }
.reveal .cb-team__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .8em; margin: var(--sp-1) 0 0; padding: 0; font-size: .68em; }
.reveal .cb-team__links > li { margin: 0; }
.cb-team__links a { color: var(--nh-teal); }
.cb-team__links a:hover { color: var(--nh-teal-strong); }