@charset "UTF-8";
/* Public-site stylesheet entry. SCSS: the generator inlines these partials,
   plus every section's/component's sections/<name>/style.scss (or
   components/<name>/style.scss) and blueprint partials,
   and compiles the result into dist/site.css. Design tokens are also emitted as
   dist/tokens.css, which the dashboard shell links instead of this stylesheet;
   the dashboard's own CSS lives in src/dashboard/web/dashboard.css (verbatim). */
@layer base, components;
/* Layout tokens from the mockup. Semantic custom properties consumed by the
   component rules. */
:root {
  --gutter: 24px;
  --sec-y: 22px;
  --page-max: 1440px;
  /* Height of the sticky header when stuck. Used as the scroll-padding offset
   for in-page anchors (styles/base.css) and by other sticky elements
   (sections/was, sections/markdown) so they clear the bar. */
  --header-h: 68px;
  /* Content-grid tracks (see shared.css .content-grid). The content column is
   the old shell width; feature tracks are opt-in per section. */
  --content-width: var(--page-max);
  --feature-width: 0px;
  --feature-max-width: 0px;
  --layout-primary: #fff;
  --layout-light: #f5f7f1;
  --layout-dark: #141414;
  --layout-less-light: #e2e4de;
  --layout-less-dark: #6d7268;
  --action-100: #eaf1dc;
  --action-300: #c3de9a;
  --action-500: #7ab829;
  --action-700: #4c8a22;
  --action-900: #1f5c2e;
  --success: #7ab829;
  --error: #b00020;
  --disabled-light: #e2e4de;
  --disabled-dark: #9aa094;
  --ff: Urbanist, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs: Caveat, "Bradley Hand", "Segoe Script", cursive;
  /* Type scale. Body/chrome sizes (xs..lg) plus the heading and script sizes.
   Editable per tablet/mobile on the Design page (registry/design.rs); the
   media blocks below mirror the registry defaults. */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-h1: 26px;
  --text-h2: 26px;
  --text-h3: 20px;
  --text-h4: 17px;
  --text-script: 50px;
  --text-ads-hero: 56px;
}

@media (max-width: 1024px) {
  :root {
    /* The round 44px tel/burger button sets the stuck bar height at this tier,
   taller than the logo. */
    --header-h: 66px;
  }
}
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --sec-y: 16px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 15px;
    --text-h1: 22px;
    --text-h2: 22px;
    --text-h3: 18px;
    --text-h4: 17px;
    --text-script: 28px;
    --text-ads-hero: 30px;
  }
}
@layer base {
  /* Reset, ported from Tailwind Preflight. Rules here are relied upon:
   headings are unstyled, lists lose their markers, and form controls do not
   inherit the browser's defaults. */
  *,
::after,
::before,
::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--ff);
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    /* In-page anchors (header nav, TOC) must clear the sticky header. */
    scroll-padding-top: var(--header-h);
  }
  /* Honour the OS motion preference: an in-page anchor link jumps instead of
   gliding, matching every other animation on the site. */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  /* Default inline-link look. Component BEM rules live in @layer components,
   so they override this without specificity tricks. */
  a {
    color: var(--action-500);
    text-decoration: underline;
    transition: color 120ms ease;
  }
  a:hover,
a:focus-visible {
    color: var(--action-700);
  }
  b,
strong {
    font-weight: bolder;
  }
  code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
ul,
menu {
    list-style: none;
  }
  img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    vertical-align: middle;
    display: block;
  }
  img,
video {
    max-width: 100%;
    height: auto;
  }
  /* `media_picture()` wraps images in `<picture>`; make the wrapper transparent
   to layout so the inner `<img>` behaves as if it were the direct child. */
  picture {
    display: contents;
  }
  button,
input,
select,
optgroup,
textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
    margin-inline-end: 4px;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
input:where([type=button], [type=reset], [type=submit]),
::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden=until-found])) {
    display: none !important;
  }
  /* Site base. Sections paint their own full-bleed backgrounds over this. */
  body {
    background-color: var(--layout-primary);
    color: var(--layout-dark);
    font-family: var(--ff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--text-lg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* The page content grid grows so the footer is pushed to the viewport foot.
   `align-content: start` keeps the auto rows at their natural height instead
   of stretching them to fill the viewport (a short page otherwise gains a
   large gap above its first section). */
  body > main {
    flex: 1 0 auto;
    align-content: start;
  }
  /* Standalone fixture pages sit on the primary (white) backdrop. */
  .fixture-page {
    background-color: var(--layout-primary);
  }
}
/*
 * Cross-cutting component rules, shared by many components/sections. Built on
 * the semantic tokens in styles/tokens.css; templates stay structural.
 */
@layer components {
  /* Content grid: full-bleed layout primitive. `content` is the centered
   max-width column; `full` spans to the screen edges so a section can paint a
   background edge-to-edge while keeping its children in the content column.
   Children default to the content column; opt into full/feature with a class
   (a section may itself be a `.content-grid` to re-enter the tracks). */
  .content-grid {
    --full: minmax(var(--gutter), 1fr);
    display: grid;
    grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width)) [feature-start] minmax(0, var(--feature-width)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width)) [feature-end] minmax(0, var(--feature-max-width)) [feature-max-end] var(--full) [full-end];
  }
  .content-grid > *,
.content-grid > .prose-contents > * {
    grid-column: content;
    width: 100%;
  }
  .content--feature {
    grid-column: feature;
  }
  .content--feature-max {
    grid-column: feature-max;
  }
  .content--full {
    grid-column: full;
  }
  .content--full-safe {
    grid-column: full;
    padding-inline: var(--gutter);
  }
  :is(.content--feature, .content--feature-max, .content--full, .content--full-safe) {
    width: 100%;
    max-width: 100%;
  }
  .sec {
    padding: var(--sec-y) var(--gutter);
    border-bottom: 1px solid var(--layout-less-light);
  }
  /* Inside a content grid the column already supplies the side inset, so a
   section only keeps its vertical padding. A bare section (fixture gallery,
   dashboard preview) is outside a grid and keeps both. */
  .content-grid > .sec {
    padding-inline: 0;
  }
  .sec:last-child {
    border-bottom: 0;
  }
  .sec--plain {
    border-bottom: 0;
  }
  .sec--dark {
    background: #000;
    border-color: #222;
    color: #fff;
  }
  .sec--muted {
    background: var(--layout-light);
  }
  /* Headings. `styles/base.css` resets every heading to inherit, so the visual
   level is restored here by element: a bare <h2> is the section-heading look
   that used to be applied with the `.h1` class (page <h1> and section <h2>
   share `--text-h2`/`--text-h1` = 26px). `.h1` stays for page titles. */
  h1,
h2 {
    font-size: var(--text-h2);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.005em;
    margin: 0 0 9px;
  }
  h1 {
    font-size: var(--text-h1);
  }
  h3 {
    font-size: var(--text-h3);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 10px;
  }
  h4 {
    font-size: var(--text-h4);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 10px;
  }
  .h1 {
    font-size: var(--text-h1);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.005em;
    margin: 0 0 9px;
  }
  .script {
    font-family: var(--fs);
    font-size: var(--text-script);
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 14px;
  }
  .lead {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--layout-less-dark);
    max-width: 64ch;
  }
  .body {
    margin: 0 0 10px;
    font-size: var(--text-lg);
    line-height: 1.65;
  }
  .body:last-child {
    margin-bottom: 0;
  }
  /* Text sizes offered by the dashboard's rich-text editor (Quill). The size
   dropdown writes a `ql-size-<key>` class; map it back to the design token. */
  .ql-size-xs {
    font-size: var(--text-xs);
  }
  .ql-size-sm {
    font-size: var(--text-sm);
  }
  .ql-size-md {
    font-size: var(--text-md);
  }
  .ql-size-lg {
    font-size: var(--text-lg);
  }
  .ql-size-h1 {
    font-size: var(--text-h1);
  }
  .ql-size-h2 {
    font-size: var(--text-h2);
  }
  .ql-size-h3 {
    font-size: var(--text-h3);
  }
  .ql-size-h4 {
    font-size: var(--text-h4);
  }
  .ql-size-script {
    font-size: var(--text-script);
  }
  .ql-size-ads-hero {
    font-size: var(--text-ads-hero);
  }
  /* Text colours offered by the rich-text editor: the colour design tokens,
   written as `ql-tokencolor-<key>` classes. */
  .ql-tokencolor-layout-primary {
    color: var(--layout-primary);
  }
  .ql-tokencolor-layout-light {
    color: var(--layout-light);
  }
  .ql-tokencolor-layout-dark {
    color: var(--layout-dark);
  }
  .ql-tokencolor-layout-less-light {
    color: var(--layout-less-light);
  }
  .ql-tokencolor-layout-less-dark {
    color: var(--layout-less-dark);
  }
  .ql-tokencolor-action-100 {
    color: var(--action-100);
  }
  .ql-tokencolor-action-300 {
    color: var(--action-300);
  }
  .ql-tokencolor-action-500 {
    color: var(--action-500);
  }
  .ql-tokencolor-action-700 {
    color: var(--action-700);
  }
  .ql-tokencolor-action-900 {
    color: var(--action-900);
  }
  .ql-tokencolor-success {
    color: var(--success);
  }
  .ql-tokencolor-error {
    color: var(--error);
  }
  .ql-tokencolor-disabled-light {
    color: var(--disabled-light);
  }
  .ql-tokencolor-disabled-dark {
    color: var(--disabled-dark);
  }
  /* Quill's snow theme shows `data-label` only for its own pickers; the custom
   colour picker needs the same rule (and a width) to read as a dropdown. */
  .ql-snow .ql-picker.ql-tokencolor {
    width: 150px;
  }
  .ql-snow .ql-picker.ql-tokencolor .ql-picker-label::before,
.ql-snow .ql-picker.ql-tokencolor .ql-picker-item::before {
    content: attr(data-label);
  }
  .tag {
    font-size: var(--text-xs);
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--layout-less-dark);
    margin: 0 0 8px;
  }
  /* Pill variant: used for the cluster label on blogposts and blog cards.
   Overrides the uppercase/muted base with the brand tint. */
  .tag--pill {
    display: inline-block;
    align-self: flex-start;
    background: var(--action-100);
    color: var(--action-900);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: capitalize;
  }
  .mark {
    font-weight: 800;
  }
  .more {
    display: inline-block;
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--action-500);
    text-decoration: none;
  }
  .muted {
    color: var(--layout-less-dark);
  }
  .g2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
  }
  .g3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
  }
  .g4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
  }
  .g2--center {
    align-items: center;
  }
  /* Buttons are a component (`components/button`); `.btns` is the shared
   layout wrapper that stacks a group of them. */
  .btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
  }
  .btns--center {
    margin-left: auto;
    margin-right: auto;
  }
  /* Prose and section-level lists: the base reset (styles/base.css) strips
   markers and padding. Restore both here. The `:where()` set covers every
   container that renders a rich value; class-based lists (nav, footer,
   .trust, .was__list) are out of scope and keep their own styling.
   Keep these defaults at zero specificity: a component that styles lists in
   a rich-text container must always win, whatever selector it uses. */
  :where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) ul,
:where(.sec > div) > ul {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: disc;
  }
  :where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) ol,
:where(.sec > div) > ol {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: decimal;
  }
  /* Rich prose rhythm: the base reset (styles/base.css) strips headings, list
   markers and paragraph spacing. Restore the shared rhythm for every
   container that renders a rich/Markdown value on the public site. */
  .body > :last-child {
    margin-bottom: 0;
  }
  :where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) > p + p,
:where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) > p + ul,
:where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) > p + ol {
    margin-top: 10px;
  }
  :where(.body, .answer, .qa, .faq__a, .warn, .calc__hint, .fnote, .card__text) li {
    margin-bottom: 4px;
  }
  .body h1,
.body h2,
.body h3 {
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
  }
  /* Wider heading scale than the section headings, so an article's structure
   reads clearly: the lead H1 stands out, H2 divides the body, H3 subdivides.
   Section spacing is added top-only when a heading follows other content. */
  .body h1 {
    font-size: calc(var(--text-h1) * 1.25);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
  }
  .body h2 {
    font-size: var(--text-h2);
    letter-spacing: -0.005em;
  }
  .body h3 {
    font-size: var(--text-h3);
  }
  .body > h2:not(:first-child),
.body > h3:not(:first-child) {
    margin-top: 30px;
  }
  .body blockquote {
    border-left: 3px solid var(--action-500);
    padding-left: 12px;
    margin: 0 0 10px;
    color: var(--layout-less-dark);
  }
  .img {
    background: linear-gradient(150deg, #3b3b3b, #141414);
    color: #9a9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    text-align: center;
    border-radius: 6px;
  }
  /* Vertical rhythm primitive: sections stack their heading, content and CTA
   with the shared gutter instead of ad-hoc margins. Declared last in the
   layer so `margin-block: 0` on direct children overrides the per-element
   margins above; pair tighter elements in a nested wrapper. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
  }
  .stack > * {
    margin-block: 0;
  }
  /* Group an eyebrow and its heading so they stay tight inside a `.stack`. */
  .stack-head > :last-child {
    margin-bottom: 0;
  }
  .stack--half {
    gap: calc(var(--gutter) / 2);
  }
  /* AI-generated label overlaid on flagged images. `media_picture(badge=true)`
   emits the span after the `<img>`/`<picture>`; it needs a positioned parent
   (the image containers provide one). Background-image keeps the SVG out of
   the layout and away from generic `img` selectors. `grid-column: unset`
   keeps the badge out of the `content` track `.content-grid > *` would
   otherwise place it in: in hero sections the span is a direct grid child, so
   the content-track placement shifted `left: 10px` to the column edge instead
   of the screen edge. */
  .ai-badge {
    position: absolute;
    grid-column: unset;
    left: 10px;
    bottom: 10px;
    width: clamp(80px, 11vw, 130px);
    aspect-ratio: 1789.84/566.93;
    background: center/contain no-repeat;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    pointer-events: none;
    z-index: 3;
  }
}
/* Modal backdrop. The dialog panels are teleported to the end of <body>
   (outside the content grid) by Alpine. Fixed inset keeps the panel over the
   page instead of dropping it below the footer. z-index 50 sits above the
   mobile header (40) and nav drawer (30). */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.55);
  padding: var(--gutter);
}

/* `position: relative` anchors the absolutely positioned close button, which
   sits over the content so the panel needs no padding of its own. Direct
   child only: the RVG calculator reuses `.panel` for its inner cards, which
   must not inherit the dialog's width/centering. */
.overlay > .panel {
  position: relative;
  background: var(--layout-primary);
  border-radius: 8px;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

/* The panel is padding-free: neutralise the form's border/radius so the form
   paints edge-to-edge. */
.overlay > .panel .form {
  border: 0;
  border-radius: 0;
}

.overlay .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--layout-less-dark);
}

@media (max-width: 1280px) {
  .g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .g3,
.g4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .g2,
.g3,
.g4 {
    grid-template-columns: 1fr;
  }
}
/* sections/answer/style.scss */
@layer components {
  .answer {
    border: 2px solid var(--action-500);
    border-radius: 6px;
    padding: var(--gutter);
    background: var(--layout-light);
  }
  .answer .t {
    font-size: var(--text-xs);
    line-height: 1.4;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--action-900);
    margin-bottom: 7px;
  }
  .answer p {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.6;
  }
}
/* components/blog_feed/style.scss */
@layer components {
  .blog-feed__heading {
    margin: 0;
  }
  .blog-feed__heading--center {
    text-align: center;
  }
  /* `list` layout: the first card spans the full width and reflows into the
   horizontal big card via its own container query; the rest sit in a
   3-column grid that collapses responsively. */
  .blog-feed__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
  }
  .blog-feed__list > :first-child {
    grid-column: 1/-1;
  }
  @media (max-width: 1024px) {
    .blog-feed__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 600px) {
    .blog-feed__list {
      grid-template-columns: 1fr;
    }
  }
}
/* components/blogcard/style.scss */
@layer components {
  /* One blogpost card. Default is the compact vertical card (a small grid
   cell); once the card itself is wide enough it reflows into the horizontal
   "big" card (image left, body right) and reveals the excerpt and reading
   time. The switch is a container query, so the same markup adapts wherever
   it lands — grid cell or full-width row. */
  .blogcard {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--layout-less-light);
    background: var(--layout-light);
    padding: 0;
    border-radius: 6px;
    container-type: inline-size;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .blogcard:hover {
    border-color: var(--action-500);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
  /* The heading link is a card title, not inline prose. */
  .blogcard__link {
    color: inherit;
    text-decoration: none;
  }
  /* Clickable-parent: the heading link stays the single anchor for SEO, while
   its pseudo element stretches over the whole (relative) card. */
  .blogcard__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .blogcard__media {
    position: relative;
    overflow: hidden;
  }
  .blogcard__placeholder {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 0;
  }
  .blogcard__img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 0;
    filter: saturate(0.7) brightness(0.9);
    transition: filter 150ms ease-in-out, transform 150ms ease-in-out;
  }
  .blogcard:hover .blogcard__img {
    filter: saturate(0.9) brightness(1);
    transform: scale(1.03);
  }
  .blogcard__in {
    padding: calc(var(--gutter) / 2);
  }
  .blogcard__tag {
    margin: 0 0 8px;
  }
  /* Excerpt and reading time are wide-card extras: the markup always carries
   them, the container query below reveals them. Width alone decides. */
  .blogcard__excerpt {
    display: none;
  }
  .blogcard__read {
    display: none;
    align-items: center;
    gap: 5px;
    font-weight: 600;
  }
  /* Author meta row (avatar + "Von Name · date"), shared by both sizes. */
  .blogcard__foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
  }
  .blogcard__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .blogcard__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
  }
  /* Wide card: image and body side by side, body vertically centered with the
   meta row pinned to the bottom. 640px is chosen against the card's own
   width, not the viewport (the content column is 1440px, a grid cell ~1/3). */
  @container (min-width: 640px) {
    .blogcard__grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      align-items: stretch;
    }
    /* Pin the image to the row (absolute fill) so its intrinsic aspect ratio
   cannot drive the card height; the row is set by the body or the
   min-height below. */
    .blogcard__media {
      min-height: 320px;
    }
    .blogcard__placeholder,
.blogcard__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .blogcard__in {
      display: flex;
      flex-direction: column;
      padding: var(--gutter);
    }
    .blogcard__title {
      font-size: var(--text-h3);
      margin-bottom: 0;
    }
    .blogcard__excerpt {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin: 8px 0 0;
      font-size: var(--text-md);
      line-height: 1.55;
      color: var(--layout-less-dark);
    }
    .blogcard__foot {
      justify-content: space-between;
      gap: var(--gutter);
      margin-top: auto;
      padding-top: var(--gutter);
    }
    .blogcard__read {
      display: inline-flex;
    }
  }
}
/* components/button/style.scss */
@layer components {
  /* Design-system button. `.button` is the base (outline) look; modifiers such
   as `.button--cta` switch the emphasis. */
  .button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--action-100);
    color: #16210c;
    border: 3px solid var(--action-500);
    font-size: var(--text-md);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease;
  }
  .button:hover {
    transform: scale(1.05);
  }
  .button--cta {
    background: var(--action-900);
    color: var(--layout-light);
    border: 3px solid var(--layout-light);
  }
  @media (prefers-reduced-motion: reduce) {
    .button {
      transition: none;
    }
    .button:hover {
      transform: none;
    }
  }
}
/* sections/calc/style.scss */
@layer components {
  /* Inline trigger: heading, a single Streitwert field and the button that
   opens the RVG calculator dialog. The calculator itself lives in
   sections/calc/template.html.tera (rechner macro) and is styled under
   `.rechner` below, which fills the teleported `.panel--rechner`. */
  .calc {
    border: 1px solid var(--action-500);
    border-radius: 6px;
    padding: 14px;
    background: var(--layout-light);
  }
  .calc b {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.35;
    font-weight: 800;
    margin-bottom: 10px;
  }
  .calc__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-end;
  }
  .calc__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .calc__field label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--layout-less-dark);
    font-weight: 800;
  }
  .calc__sw {
    display: flex;
    align-items: center;
    border: 2px solid var(--action-500);
    border-radius: 7px;
    background: #fff;
  }
  .calc__sw input {
    border: 0;
    background: transparent;
    color: #222;
    font: inherit;
    font-size: var(--text-lg);
    padding: 7px 10px;
    text-align: right;
    width: 9em;
    max-width: 100%;
  }
  .calc__sw input:focus {
    outline: none;
  }
  .calc__sw:focus-within {
    box-shadow: 0 0 0 3px var(--action-100);
  }
  .calc__sw span {
    padding-right: 10px;
    color: var(--layout-less-dark);
  }
  .calc__row .button {
    width: auto;
  }
  .calc__hint {
    margin-top: 8px;
    font-size: var(--text-sm);
    color: var(--layout-less-dark);
    line-height: 1.55;
  }
  .calc__hint p {
    margin: 0;
  }
  /* ---- RVG calculator dialog (ported from the mockup, scoped to .rechner) */
  .rechner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
    font-size: 15px;
    line-height: 1.45;
    color: #222;
  }
  .rechner__head {
    padding-right: 44px;
  }
  .rechner__head h2 {
    font-weight: 800;
    font-size: var(--text-h3);
    margin: 0;
  }
  .rechner__sub {
    margin: 2px 0 0;
    color: var(--layout-less-dark);
    font-size: var(--text-sm);
  }
  .rechner__foot {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    line-height: 1.6;
    max-width: 80ch;
  }
  .rechner .panel {
    background: #fff;
    border: 1px solid var(--layout-less-light);
    border-radius: 10px;
    overflow: hidden;
  }
  .rechner .ph {
    background: var(--layout-light);
    padding: 11px 18px;
    border-bottom: 1px solid var(--layout-less-light);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .rechner .ph h2 {
    font-weight: 800;
    font-size: var(--text-lg);
    margin: 0;
  }
  .rechner .ph .tag {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
  }
  .rechner .body {
    padding: 18px;
  }
  /* Grundangaben */
  .rechner .basics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px 20px;
    align-items: end;
  }
  .rechner .f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }
  .rechner .f > label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--layout-less-dark);
    font-weight: 800;
  }
  .rechner select,
.rechner input.num {
    font: inherit;
    font-size: var(--text-md);
    background: #fff;
    color: #222;
    border: 1px solid var(--layout-less-light);
    border-radius: 6px;
    padding: 6px 8px;
  }
  .rechner input.num {
    text-align: right;
    width: 100%;
  }
  .rechner input.rate {
    width: 4.2em;
  }
  .rechner input.eur {
    width: 7.5em;
  }
  .rechner input.num:disabled {
    opacity: 0.5;
  }
  .rechner .checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    grid-column: 1/-1;
    padding-top: 6px;
    border-top: 1px solid var(--layout-less-light);
  }
  .rechner .chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--text-lg);
  }
  .rechner .chk input {
    width: 17px;
    height: 17px;
    accent-color: var(--action-700);
    margin: 0;
    flex: none;
  }
  .rechner .chk.dis {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .rechner :focus-visible {
    outline: 2px solid var(--action-500);
    outline-offset: 2px;
  }
  /* Tables */
  .rechner .tbl {
    overflow-x: auto;
  }
  .rechner table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
  }
  .rechner #proc table {
    min-width: 560px;
  }
  .rechner th,
.rechner td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--layout-less-light);
    vertical-align: middle;
  }
  .rechner th {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--layout-less-dark);
    font-weight: 800;
    text-align: right;
  }
  .rechner th:first-child {
    text-align: left;
  }
  .rechner td.pos {
    text-align: left;
  }
  .rechner td.pos small {
    display: block;
    color: var(--layout-less-dark);
    font-size: var(--text-xs);
  }
  .rechner td.c {
    text-align: right;
  }
  .rechner .cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .rechner .amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 7.5em;
    text-align: right;
  }
  .rechner .vv {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    white-space: nowrap;
  }
  .rechner .neg .amt {
    color: var(--error);
  }
  .rechner tr.grp td {
    background: var(--layout-light);
    font-weight: 800;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--layout-less-dark);
  }
  .rechner tr.sub td {
    font-weight: 700;
  }
  .rechner tr.sum td {
    font-weight: 700;
    font-size: var(--text-lg);
    background: var(--action-100);
  }
  .rechner tr.sum .amt {
    color: var(--action-900);
  }
  .rechner .muted {
    color: var(--layout-less-dark);
  }
  .rechner .note {
    margin: 0;
    padding: 11px 18px;
    font-size: var(--text-sm);
    background: #fff6e5;
    color: #7a5a10;
  }
  /* Scoped through `.tbl` so it outranks the responsive `td.c` display rule and
   inactive instance columns stay hidden. */
  .rechner .tbl .col-hidden {
    display: none;
  }
  /* Below the laptop tier the per-instance table cannot fit without sideways
   scrolling. Stack each row into a card: the position becomes the card title,
   each value cell a row labelled with its instance via `data-label` (the
   per-instance headers are hidden). */
  @media (max-width: 1024px) {
    .rechner .tbl {
      overflow-x: visible;
    }
    .rechner #proc table {
      min-width: 0;
    }
    .rechner table,
.rechner thead,
.rechner tbody,
.rechner tr,
.rechner th,
.rechner td {
      display: block;
      width: 100%;
    }
    .rechner thead {
      display: none;
    }
    .rechner tr {
      border: 1px solid var(--layout-less-light);
      border-radius: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      background: #fff;
    }
    .rechner td {
      border-bottom: 1px solid var(--layout-less-light);
      padding: 9px 14px;
    }
    .rechner tr td:last-child {
      border-bottom: 0;
    }
    .rechner td.pos {
      font-weight: 700;
      background: var(--layout-light);
    }
    .rechner td.c {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .rechner td.c::before {
      content: attr(data-label);
      flex: 0 0 auto;
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--layout-less-dark);
      font-weight: 800;
      text-align: left;
    }
    .rechner td.c:not([data-label])::before {
      display: none;
    }
    .rechner td.c .cell {
      flex: 1 1 auto;
      flex-wrap: wrap;
      min-width: 0;
    }
    .rechner .amt {
      min-width: 0;
    }
    /* Group headers and the totals read as plain subheadings, not cards. */
    .rechner tr.grp {
      border: 0;
      border-radius: 0;
      background: transparent;
      margin: 12px 0 6px;
      overflow: visible;
    }
    .rechner tr.grp td {
      background: transparent;
      border-bottom: 2px solid var(--layout-less-light);
      padding: 4px 2px;
    }
    .rechner tr.sum {
      border-color: var(--action-300);
    }
    .rechner tr.sum td.pos {
      background: var(--action-100);
    }
  }
}
/* The calculator dialog is wider than the form dialog; the calc section sets
   the panel modifier. Kept outside the layer: the generic `.overlay > .panel`
   rule in shared.css is unlayered, and unlayered styles beat layered ones. */
.overlay > .panel--rechner {
  max-width: 1000px;
}

/* components/card/style.scss */
@layer components {
  /* Generic card surface. Its content slots (title, text, list, stars, by,
   button) are filled by `components/card/template.html.tera`. */
  .card {
    border: 1px solid var(--layout-less-light);
    background: var(--layout-light);
    padding: var(--gutter);
    border-radius: 6px;
  }
  .card__title {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 6px;
  }
  .card__text {
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--layout-less-dark);
  }
  .card__list {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
  }
  .card__list > li {
    line-height: 1.5;
    margin-bottom: 4px;
  }
  /* Box glyph + label per row (the `check` section). */
  .card__check {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }
  .card__check > div {
    display: flex;
    gap: 8px;
    font-size: var(--text-sm);
    line-height: 1.5;
    align-items: flex-start;
  }
  .card__check i {
    flex: 0 0 12px;
    height: 12px;
    border: 1px solid var(--layout-less-light);
    background: #fff;
    margin-top: 3px;
  }
  /* Rating row (the `reviews` section). */
  .card__stars {
    color: #c9a227;
    font-size: var(--text-lg);
    letter-spacing: 2px;
  }
  /* Attributed byline ("Author · Source"). */
  .card__by {
    color: var(--layout-less-dark);
    margin: 8px 0 0;
    font-size: var(--text-sm);
  }
  .card > .card__btn {
    margin-top: 12px;
  }
}
/* sections/checklist/style.scss */
@layer components {
  .checklist__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gutter);
    flex-wrap: wrap;
  }
  .checklist__intro {
    color: var(--layout-less-dark);
    max-width: 76ch;
  }
  .checklist__progress {
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--action-900);
    white-space: nowrap;
  }
  .checklist {
    border: 2px solid var(--action-500);
    background: var(--layout-light);
    border-radius: 6px;
  }
  .checklist li + li {
    border-top: 1px solid var(--layout-less-light);
  }
  .checklist__item {
    display: flex;
    gap: var(--gutter);
    align-items: flex-start;
    padding: var(--gutter);
    cursor: pointer;
  }
  .checklist__item input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border: 2px solid var(--action-500);
    border-radius: 4px;
    background: var(--layout-primary);
    cursor: pointer;
    display: grid;
    place-content: center;
  }
  .checklist__item input::after {
    content: "";
    width: 7px;
    height: 13px;
    border: solid var(--layout-primary);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
  }
  .checklist__item input:checked {
    background: var(--action-500);
  }
  .checklist__item input:checked::after {
    opacity: 1;
  }
  .checklist__item input:focus-visible {
    outline: 3px solid var(--action-900);
    outline-offset: 2px;
  }
  .checklist__title {
    display: block;
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.3;
  }
  .checklist__hint {
    display: block;
    font-size: var(--text-md);
    color: var(--layout-less-dark);
    line-height: 1.5;
  }
  .checklist__item input:checked + .checklist__text .checklist__title {
    color: var(--action-900);
  }
}
/* components/consent/style.scss */
@layer components {
  #rf-consent-root {
    display: contents;
  }
  /* Non-blocking bottom bar: fixed to the viewport bottom, no backdrop, so the
   page above stays scrollable and clickable until the visitor decides. */
  .consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--layout-primary);
    border-top: 1px solid var(--layout-less-light);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }
  /* Right padding reserves the corner for the absolutely positioned close. */
  .consent__panel {
    position: relative;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: calc(var(--gutter) * 0.6) calc(var(--gutter) + 40px) calc(var(--gutter) * 0.6) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--gutter) * 0.75);
  }
  .consent__intro {
    flex: 1 1 320px;
    min-width: 0;
  }
  .consent__title {
    margin: 0 0 4px;
    font-size: var(--text-h4);
  }
  .consent__text {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  .consent__cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gutter) * 0.5) var(--gutter);
    flex: 2 1 420px;
  }
  .consent__cat {
    flex: 1 1 160px;
    min-width: 0;
  }
  .consent__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
  }
  .consent__cat-text {
    margin: 2px 0 0 26px;
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    line-height: 1.4;
  }
  .consent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 auto;
  }
  .consent__btn {
    padding: 10px 16px;
    border-radius: 6px;
    border: 2px solid var(--action-500);
    background: var(--action-100);
    color: #16210c;
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
  }
  .consent__btn--primary {
    background: var(--action-500);
    color: #fff;
  }
  .consent__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--layout-less-dark);
  }
  .linklike {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  @media (max-width: 1024px) {
    .consent__intro,
.consent__cats {
      flex-basis: 100%;
    }
    .consent__actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
/* sections/contact/style.scss */
@layer components {
  /* Contact: map beside the address card. The map is a direct grid child
   (its own `.map` rules live in sections/map/style.scss). */
  .contact {
    align-items: stretch;
    /* Wider map column, as in the mockup. */
    grid-template-columns: 1.3fr 1fr;
    /* Join the map and the panel into one card: no gap, and only the outer
   corners are rounded. */
    gap: 0;
  }
  /* The map sits left of the address card on wide screens; source order stays
   card-first so it stacks card-over-map on mobile. Its dark-green frame on
   the right edge becomes the divider between the two halves. */
  .contact .map {
    order: -1;
  }
  .contact.g2 {
    border: 1px solid var(--layout-less-light);
    overflow: hidden;
    border-radius: 14px;
  }
  .contact__card {
    background: var(--action-100);
    border-radius: 0 14px 14px 0;
    padding: var(--gutter);
    display: flex;
    flex-direction: column;
    color: var(--layout-dark);
  }
  .contact__brand {
    margin-bottom: 26px;
  }
  .contact__wordmark {
    font-size: var(--text-h1);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .contact__subline {
    font-size: var(--text-h3);
    line-height: 1.2;
    font-weight: 800;
    margin-top: 4px;
  }
  .contact__body {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.6;
    font-style: normal;
  }
  .contact__body > p {
    margin: 0 0 20px;
  }
  .contact__body > p:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 1024px) {
  .contact {
    grid-template-columns: 1fr;
  }
  /* Stacked: map on top, card below, still one card (outer corners only). */
  .contact .map {
    border-radius: 14px 14px 0 0;
  }
  .contact__card {
    border-radius: 0 0 14px 14px;
  }
}
@media (max-width: 600px) {
  .contact__card {
    padding: var(--gutter);
  }
}
/* sections/crumb/style.scss */
@layer components {
  .crumb {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    padding: 10px var(--gutter);
    border-bottom: 1px solid var(--layout-less-light);
  }
  .content-grid > .crumb {
    padding-inline: 0;
  }
  .crumb a {
    color: inherit;
    text-decoration: none;
  }
  .band {
    height: 64px;
    border-radius: 0;
  }
}
/* sections/faq/style.scss */
@layer components {
  .faq details {
    border-bottom: 1px solid var(--layout-less-light);
    padding: 10px 0;
  }
  .faq details:last-child {
    border-bottom: 0;
  }
  .faq summary {
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1.45;
    font-weight: 800;
    list-style: none;
  }
  .faq summary::-webkit-details-marker {
    display: none;
  }
  .faq summary::before {
    content: "+ ";
    color: var(--action-500);
  }
  .faq details[open] summary::before {
    content: "− ";
  }
  .faq p,
.faq .faq__a {
    margin: 7px 0 0;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--layout-less-dark);
    padding-left: 1ch;
  }
}
/* components/foot/style.scss */
@layer components {
  .foot {
    background: #000;
    color: #fff;
  }
  /* Footer links are structural, including the slim variant: inherited colour
   and no underline. Their own hover rules stay more specific. */
  .foot a {
    color: inherit;
    text-decoration: none;
  }
  .foot__in {
    padding-block: var(--sec-y);
    padding-bottom: calc(var(--gutter) / 2);
  }
  .foot__top {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: calc(var(--gutter) * 2);
  }
  .foot__brand {
    max-width: 340px;
  }
  .foot__logo {
    display: inline-block;
  }
  .foot__logo img {
    display: block;
    width: 200px;
    height: auto;
  }
  .foot__tagline {
    margin: 18px 0 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    opacity: 0.75;
  }
  .foot__social {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
  }
  .foot__social a {
    display: block;
    color: inherit;
    opacity: 0.85;
    transition: opacity 120ms ease, color 120ms ease;
  }
  .foot__social a:hover {
    opacity: 1;
    color: var(--action-500);
  }
  .foot__social .i {
    width: 20px;
    height: 20px;
  }
  .foot__nav .cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .foot__nav b {
    display: block;
    font-size: var(--text-xs);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--action-500);
  }
  .foot__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .foot__nav .cols a {
    display: block;
    font-size: var(--text-xs);
    opacity: 0.93;
    margin-bottom: 10px;
    color: inherit;
    text-decoration: none;
  }
  .foot__nav .cols a:hover {
    color: var(--action-500);
  }
  .foot__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: var(--sec-y);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .foot__bottom p {
    margin: 0;
    font-size: var(--text-xs);
    opacity: 0.7;
  }
  .foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .foot__legal a {
    font-size: var(--text-xs);
    color: inherit;
    text-decoration: none;
  }
  .foot__legal a:hover {
    color: var(--action-500);
  }
  .foot__legal .linklike {
    font-size: var(--text-xs);
  }
  .foot.slim {
    font-size: var(--text-xs);
    text-align: center;
  }
  .foot.slim .foot__in {
    padding-block: 14px;
  }
  .foot.slim p {
    margin: 0;
  }
  .foot__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .foot__strip .img {
    height: 62px;
    border-radius: 0;
  }
}
@media (max-width: 1024px) {
  .foot__top {
    grid-template-columns: 1fr;
    gap: var(--sec-y);
  }
  .foot__nav .cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .foot__nav .cols {
    grid-template-columns: 1fr 1fr;
  }
  .foot__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .foot__strip {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* sections/form/style.scss */
@layer components {
  .form-sec {
    background: var(--layout-light);
  }
  .form-sec__content {
    align-items: center;
  }
  .form-sec__heading {
    text-align: center;
  }
  .form-sec form {
    margin: 0 var(--sec-y);
    width: calc(100% - var(--sec-y) - var(--sec-y));
  }
  .form {
    border: 1px solid var(--layout-less-light);
    border-radius: 6px;
    background: white;
    padding: var(--gutter);
    /* Fields reflow on the form's own width, not the viewport, so an embedded
   form adapts to whatever column it lands in. */
    container-type: inline-size;
    container-name: form;
  }
  .form--black {
    background: #141414;
    border-color: #2a2a2a;
    color: #fff;
  }
  .form .st {
    font-size: var(--text-xs);
    line-height: 1.4;
    font-weight: 700;
    color: var(--layout-less-dark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 7px;
  }
  .form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  .form legend,
.form .q {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.4;
    font-weight: 800;
    margin-bottom: calc(var(--gutter) / 2);
    padding: 0;
  }
  .form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .form label.opt {
    display: flex;
    font-size: var(--text-md);
    font-weight: 400;
    margin-bottom: 0;
  }
  .opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--layout-less-light);
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: var(--text-lg);
    font-weight: 700 !important;
    color: #222;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
  }
  .opt:hover {
    border-color: var(--disabled-dark);
  }
  .opt:focus-within {
    outline: 2px solid var(--action-500);
    outline-offset: 2px;
  }
  /* The native radio stays focusable but is visually hidden. */
  .opt input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .opt__label {
    flex: 1 1 auto;
    text-align: left;
  }
  /* Highlighted word inside an option label (e.g. the branch name). */
  .opt__label .hl {
    color: var(--action-500);
  }
  .opt:has(input:checked) {
    border-color: var(--action-500);
    background: var(--action-100);
  }
  .form input[type=text],
.form input[type=tel],
.form input[type=email],
.form input[type=number] {
    display: block;
    width: 100%;
    border: 1px solid var(--layout-less-light);
    background: #fff;
    border-radius: 4px;
    padding: 10px 11px;
    font-size: var(--text-md);
    color: #222;
    margin-bottom: 7px;
    font-family: inherit;
  }
  .form input::placeholder {
    color: #999;
  }
  .form label.chk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.5;
    color: var(--layout-less-dark);
    margin: 10px 0;
    cursor: pointer;
  }
  .form label.chk input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 3px 0 0;
    accent-color: var(--action-700);
    cursor: pointer;
  }
  .micro {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    text-align: center;
    margin-top: 7px;
  }
  .fnote {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
    margin-top: 8px;
    line-height: 1.5;
    max-width: 80ch;
    text-align: center;
    margin: auto;
  }
  .fnote p {
    margin: 0;
  }
  .sep {
    border: 0;
    border-top: 1px dashed var(--layout-less-light);
    margin: 13px 0;
  }
  /* Single column by default; the @container rules below add columns once the
   form itself has room. Thresholds are field-specific, not viewport tiers. */
  .formrow {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--gutter) / 2);
  }
  .optrow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .form .button {
    margin-top: 4px;
  }
  .form__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: calc(var(--gutter) / 2);
  }
  .form__nav .button {
    flex: 1 1 auto;
    margin-top: 0;
  }
  /* Honeypot: off-screen and hidden from assistive tech. */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .formmsg {
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 12px;
    font-size: var(--text-md);
    line-height: 1.5;
  }
  .formmsg p {
    margin: 0 0 4px;
  }
  .formmsg ul {
    margin: 6px 0 0;
    padding-left: 18px;
  }
  .formmsg--ok {
    background: var(--action-100);
    border: 1px solid var(--action-500);
    color: var(--action-900);
  }
  .formmsg--error {
    background: #fdecea;
    border: 1px solid var(--error);
    color: #8e1c14;
  }
  .formmsg__h {
    font-weight: 800;
    margin: 0 0 6px;
  }
  .form__result:empty {
    display: none;
  }
  .form__back {
    background: transparent;
    border-color: var(--layout-less-light);
    color: var(--layout-less-dark);
    flex: 0 0 auto;
  }
  .form--black .form__back {
    border-color: #2a2a2a;
    color: #fff;
  }
}
/* Column count follows the form's own width. The form is the query container;
   `.formrow`/`.optrow` are descendants, so these resolve against it. */
@container form (min-width: 480px) {
  .formrow {
    grid-template-columns: repeat(2, 1fr);
  }
  .optrow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container form (min-width: 720px) {
  .optrow {
    grid-template-columns: repeat(3, 1fr);
  }
}
@container form (min-width: 920px) {
  .formrow {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* sections/guide_article/style.scss */
@layer components {
  .guide-article__layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: calc(var(--gutter) * 1.6);
    align-items: start;
  }
  .guide-article__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--gutter));
    align-self: start;
  }
  .guide-article__toc.toc {
    font-size: var(--text-sm);
  }
  .guide-article__toc .toc__link {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .guide-article__num {
    color: var(--action-900);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    min-width: 16px;
  }
  .guide-article__content {
    min-width: 0;
  }
  .guide-article__beitrag {
    padding: 0 0 calc(var(--sec-y) * 0.9);
    margin: 0 0 calc(var(--sec-y) * 0.9);
    border-bottom: 1px solid var(--layout-less-light);
  }
  .guide-article__beitrag h2 {
    scroll-margin-top: calc(var(--header-h) + var(--gutter));
  }
  .guide-article__beitrag:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .guide-article .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 10px;
  }
  .guide-article__beitrag h2 {
    max-width: 28ch;
  }
  .guide-article__answer {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--layout-dark);
    font-weight: 500;
    max-width: 68ch;
    margin: 0 0 calc(var(--gutter) * 0.7);
  }
  .guide-article__answer p {
    margin: 0;
  }
  .guide-article__body {
    max-width: 68ch;
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--layout-less-dark);
  }
  .guide-article__body p {
    margin: 0 0 18px;
  }
  .guide-article__body ul,
.guide-article__body ol {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
  }
  .guide-article__body li {
    border-left: 3px solid var(--action-500);
    padding: 4px 0 4px 18px;
  }
  .guide-article__body li > strong {
    display: block;
    color: var(--layout-dark);
  }
  .guide-article__link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    color: var(--action-900);
    text-decoration: none;
    border-bottom: 2px solid var(--action-500);
    padding-bottom: 2px;
    margin: 4px 0 20px;
  }
  .guide-article__warn {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fcefec;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0 0;
    max-width: 68ch;
    color: #3a1310;
  }
  .guide-article__warn-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 15px;
  }
  .guide-article__warn p {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
  }
  .guide-article__mtoc {
    display: none;
  }
}
@media (max-width: 1024px) {
  .guide-article__layout {
    grid-template-columns: 1fr;
    gap: var(--gutter);
  }
  .guide-article__toc {
    display: none;
  }
  .guide-article__mtoc {
    display: block;
    background: var(--layout-light);
    border: 1px solid var(--layout-less-light);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: var(--gutter);
  }
  .guide-article__mtoc summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--layout-dark);
  }
  .guide-article__mtoc summary::after {
    content: " +";
    color: var(--action-900);
  }
  .guide-article__mtoc[open] summary::after {
    content: " −";
  }
}
/* sections/guide_author/style.scss */
@layer components {
  .guide-author__box {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: calc(var(--gutter) * 1.1);
    align-items: center;
    background: var(--layout-light);
    border-radius: 22px;
    padding: calc(var(--gutter) * 0.9);
    max-width: 900px;
  }
  .guide-author__pic img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--layout-primary);
    box-shadow: 0 0 0 2px var(--action-500);
  }
  .guide-author .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 6px;
  }
  .guide-author h2 {
    margin-bottom: 2px;
  }
  .guide-author__role {
    color: var(--layout-less-dark);
    margin: 0 0 8px;
    font-size: var(--text-md);
  }
  .guide-author__text {
    font-size: var(--text-md);
    line-height: 1.6;
  }
  .guide-author__text p {
    margin: 0;
  }
}
@media (max-width: 600px) {
  .guide-author__box {
    grid-template-columns: 1fr;
  }
}
/* sections/guide_beitrag/style.scss */
@layer components {
  /* One article of the long-form guide. The blueprint's content column supplies
   the surrounding layout; this section owns the article rhythm and typography. */
  .guide-beitrag {
    padding: 0 0 calc(var(--sec-y) * 0.9);
    margin: 0 0 calc(var(--sec-y) * 0.9);
    border-bottom: 1px solid var(--layout-less-light);
    scroll-margin-top: calc(var(--header-h) + var(--gutter));
  }
  .guide-beitrag:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .guide-beitrag .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 10px;
  }
  .guide-beitrag h2 {
    max-width: 28ch;
  }
  .guide-beitrag__answer {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--layout-dark);
    font-weight: 500;
    max-width: 68ch;
    margin: 0 0 calc(var(--gutter) * 0.7);
  }
  .guide-beitrag__answer p {
    margin: 0;
  }
  .guide-beitrag__answer p + p {
    margin-top: 12px;
  }
  .guide-beitrag__body {
    max-width: 68ch;
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--layout-less-dark);
  }
  .guide-beitrag__body p {
    margin: 0 0 18px;
  }
  .guide-beitrag__body > :last-child {
    margin-bottom: 0;
  }
  .guide-beitrag__body ul,
.guide-beitrag__body ol {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
  }
  .guide-beitrag__body li {
    border-left: 3px solid var(--action-500);
    padding: 4px 0 4px 18px;
  }
  .guide-beitrag__body li > strong {
    display: block;
    color: var(--layout-dark);
  }
  .guide-beitrag__list {
    display: grid;
    gap: 16px;
    margin: 10px 0 24px;
    max-width: 68ch;
  }
  .guide-beitrag__list-title {
    font-weight: 800;
    color: var(--layout-dark);
    margin: 0;
  }
  .guide-beitrag__item {
    border-left: 3px solid var(--action-500);
    padding: 4px 0 4px 18px;
  }
  .guide-beitrag__item h3 {
    font-size: var(--text-h4);
    line-height: 1.35;
    color: var(--layout-dark);
    margin: 0 0 4px;
  }
  .guide-beitrag__item-text {
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--layout-less-dark);
  }
  .guide-beitrag__item-text p {
    margin: 0;
  }
  .guide-beitrag__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin: var(--gutter) 0 20px;
  }
  .guide-beitrag__link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    color: var(--action-900);
    text-decoration: none;
    border-bottom: 2px solid var(--action-500);
    padding-bottom: 2px;
    margin: 0;
    transform-origin: left center;
    transition: transform 180ms ease;
  }
  .guide-beitrag__link:hover,
.guide-beitrag__link:focus-visible {
    transform: scale(1.03);
  }
  .guide-beitrag__link-arrow {
    display: inline-block;
    transform-origin: center;
    transition: transform 180ms ease;
  }
  .guide-beitrag__link:hover .guide-beitrag__link-arrow,
.guide-beitrag__link:focus-visible .guide-beitrag__link-arrow {
    transform: rotate(22.5deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .guide-beitrag__link,
.guide-beitrag__link-arrow {
      transition: none;
    }
  }
  .guide-beitrag__warn {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fcefec;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0 0;
    max-width: 68ch;
    color: #3a1310;
  }
  .guide-beitrag__warn-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 15px;
  }
  .guide-beitrag__warn-text p {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
  }
}
/* sections/guide_docs/style.scss */
@layer components {
  .guide-docs__grid {
    grid-column: content;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: calc(var(--gutter) * 1.2);
    align-items: start;
  }
  .guide-docs__panel {
    background: var(--layout-primary);
    border: 1px solid var(--layout-less-light);
    border-radius: 20px;
    padding: calc(var(--gutter) * 0.9);
  }
  .guide-docs .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 10px;
  }
  .guide-docs__lead {
    color: var(--layout-less-dark);
    font-size: var(--text-md);
    margin-bottom: var(--gutter);
  }
  .guide-docs__lead p {
    margin: 0;
  }
  /* Reuse the checklist markup/JS, but let the panel own the frame. */
  .guide-docs .checklist {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .guide-docs .checklist li + li {
    border-top: 1px solid var(--layout-less-light);
  }
  .guide-docs .checklist__item {
    gap: 14px;
    padding: 12px 2px;
  }
  .guide-docs .checklist__title {
    font-size: var(--text-md);
  }
  .guide-docs__progress {
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--action-900);
    margin: 12px 0 0;
  }
  .guide-docs__warn {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    background: #fcefec;
    border-radius: 14px;
    padding: 16px 18px;
  }
  .guide-docs__warn b {
    display: block;
    color: #2a0e0b;
    margin-bottom: 2px;
  }
  .guide-docs__warn div > p {
    margin: 0;
    font-size: var(--text-sm);
    color: #4a1e19;
  }
  .guide-docs__warn-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 15px;
  }
  .guide-docs__form {
    background: #111;
    color: #fff;
    border-radius: 20px;
    padding: calc(var(--gutter) * 0.9);
    position: sticky;
    top: calc(var(--header-h) + var(--gutter));
  }
  .guide-docs__form .kick {
    color: var(--action-500);
  }
  .guide-docs__form h2 {
    color: #fff;
  }
  .guide-docs__form .form {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: inherit;
  }
  .guide-docs__form .form legend,
.guide-docs__form .form .q {
    color: #fff;
  }
  .guide-docs__form .form label {
    color: #fff;
  }
  .guide-docs__form .form input[type=text],
.guide-docs__form .form input[type=tel],
.guide-docs__form .form input[type=email],
.guide-docs__form .form input[type=number],
.guide-docs__form .form input[type=date],
.guide-docs__form .form select,
.guide-docs__form .form textarea {
    background: #1a1a1a;
    border-color: #3a3a3a;
    color: #fff;
  }
  .guide-docs__form .form input::placeholder,
.guide-docs__form .form textarea::placeholder {
    color: #8f948b;
  }
  .guide-docs__form .form .opt {
    background: #1a1a1a;
    border-color: #3a3a3a;
    color: #fff;
  }
  .guide-docs__form .form .opt:has(input:checked) {
    background: #17230f;
    border-color: var(--action-500);
  }
  .guide-docs__form .form label.chk {
    color: #c9cdc4;
  }
  .guide-docs__form .form .micro,
.guide-docs__form .form .fnote {
    color: #c9cdc4;
  }
  .guide-docs__form .form .button--cta {
    background: var(--action-500);
    border-color: var(--action-500);
    color: #000;
  }
  .guide-docs__form .form .form__back {
    border-color: #3a3a3a;
    color: #c9cdc4;
  }
}
@media (max-width: 1024px) {
  .guide-docs__grid {
    grid-template-columns: 1fr;
  }
  .guide-docs__form {
    position: static;
  }
}
/* sections/guide_topics/style.scss */
@layer components {
  .guide-topics .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 10px;
  }
  .guide-topics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: var(--gutter);
  }
  .guide-topics__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    text-decoration: none;
    background: var(--layout-primary);
    border: 1px solid var(--layout-less-light);
    border-radius: 16px;
    padding: 22px;
    transition: border-color 0.18s ease, transform 0.18s ease;
  }
  .guide-topics__card:hover {
    border-color: var(--action-500);
    transform: translateY(-2px);
  }
  .guide-topics__icon {
    grid-row: span 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--action-100);
    color: var(--action-900);
  }
  .guide-topics__card b {
    font-size: var(--text-h3);
    line-height: 1.2;
    color: var(--layout-dark);
  }
  .guide-topics__card span:not(.guide-topics__icon) {
    font-size: var(--text-md);
    color: var(--layout-less-dark);
  }
  .guide-topics__card em {
    font-style: normal;
    font-weight: 700;
    color: var(--action-900);
    font-size: var(--text-md);
  }
}
@media (max-width: 600px) {
  .guide-topics__grid {
    grid-template-columns: 1fr;
  }
}
/* components/head/style.scss */
@layer components {
  /* Sticky chrome. Sits above page content but below the modal overlay (50)
   and the consent banner (60); the mobile scrim (20) / drawer (30) / burger
   (40) live inside this stacking context. `.is-stuck` (toggled by the scroll
   listener in static/site.js) shrinks the bar as soon as it sticks. */
  .head {
    position: sticky;
    top: 0;
    z-index: 25;
    background: #000;
    color: #fff;
    border-bottom: 1px solid #222;
    padding: 10px;
    transition: padding 0.2s ease, box-shadow 0.2s ease;
  }
  /* Chrome links are structural: they keep the bar's inherited colour and no
   underline. BEM rules below add their own colour/hover. */
  .head a {
    color: inherit;
    text-decoration: none;
  }
  .head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    transition: padding 0.2s ease;
  }
  .head.is-stuck {
    padding-block: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .head.is-stuck .head__in {
    padding-block: 6px;
  }
  .head__end {
    display: flex;
    align-items: center;
    gap: var(--gutter);
  }
  .head__logo {
    display: block;
    font-size: var(--text-h3);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
  }
  .head__logo img {
    height: 60px;
    width: auto;
    transition: height 0.2s ease;
  }
  .head.is-stuck .head__logo img {
    height: 36px;
  }
  .head__logo u {
    text-decoration: none;
    color: var(--action-500);
  }
  .head__logo s {
    display: block;
    text-decoration: none;
    font-size: var(--text-xs);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-top: 4px;
    color: #9aa094;
  }
  .head__nav {
    display: flex;
    gap: 22px;
    font-size: var(--text-md);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .head__nav a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    text-decoration: none;
  }
  .head__nav li {
    transition: transform 100ms ease-in-out, color 100ms ease-in-out;
  }
  .head__nav li:hover,
.head__nav li.is-active {
    transform: scale(1.05);
    color: var(--action-500);
  }
  .head__nav a[aria-current=page] {
    border-bottom-color: var(--action-500);
  }
  .head__nav a:focus-visible {
    border-bottom-color: var(--action-500);
  }
  .head__nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .head__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  /* Middle line; the outer two are drawn with the pseudo-elements so the whole
   44×44 box is a hit area. */
  .head__burger::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 2px;
    margin-top: -1px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }
  .head__tel {
    font-size: var(--text-md);
    line-height: 1;
    font-weight: 700;
    border: 1px solid currentColor;
    padding: 8px 12px;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
  }
  .head__tel-icon {
    display: none;
  }
}
@media (max-width: 1024px) {
  .head__burger {
    display: block;
    /* Above the scrim (z 20) and drawer (z 30) so it stays clickable; the logo
   stays below the scrim and dims with the rest of the page. */
    z-index: 40;
  }
  .head__tel {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .head__tel-num {
    display: none;
  }
  .head__tel-icon {
    display: block;
  }
  .head__tel-icon .i {
    width: 20px;
    height: 20px;
  }
  /* Off-canvas drawer: parked off the right edge, slid in by `.head__nav--open`. */
  .head__nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: min(78vw, 320px);
    padding: 72px var(--gutter) var(--gutter);
    background: #000;
    border-left: 1px solid #222;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
    overflow-y: auto;
  }
  .head__nav--open {
    transform: translateX(0);
    visibility: visible;
  }
  .head__nav ul {
    flex-direction: column;
    gap: 18px;
  }
  .head__nav a {
    display: inline-block;
    font-size: var(--text-lg);
  }
  .head__scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
  }
  /* The header shrink and its offsets are cosmetic; honour the OS preference
   like every other animation on the site. */
}
@media (max-width: 1024px) and (max-width: 600px) {
  .head__logo img {
    height: 40px;
  }
  .head.is-stuck .head__logo img {
    height: 30px;
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .head,
.head__in,
.head__logo img {
    transition: none;
  }
}
/* sections/hero/style.scss */
@layer components {
  /* Blogpost hero extras: a cluster chip above the title and a lead image
   below it. Both are optional; plain `hero` pages render text only. The
   chip itself is the shared `.tag--pill`. */
  .hero {
    position: relative;
  }
  .hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    margin-top: var(--gutter);
  }
}
/* sections/hero_ads/style.scss */
@layer components {
  .sec--hero-ads {
    position: relative;
    overflow: hidden;
  }
  /* Full-bleed photo, darkened and desaturated so the white text and the form
   stay readable. The explicit `full` track overrides `.content-grid > *`. */
  .hero-ads__img {
    position: absolute;
    grid-column: full;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.4) saturate(0.8);
    z-index: 0;
  }
  .hero-ads {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--gutter);
    grid-template-areas: "txt form" "trust form";
    align-items: start;
  }
  .hero-ads .a {
    grid-area: txt;
  }
  .hero-ads .a .h1 {
    font-size: var(--text-ads-hero);
    line-height: 1.05;
  }
  .hero-ads .b {
    grid-area: form;
  }
  .hero-ads .c {
    grid-area: trust;
    margin-top: var(--gutter);
  }
  .hero-ads .c ul {
    list-style: disc;
    padding-left: 1.2em;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hero-ads .c li {
    font-size: var(--text-lg);
    color: white;
  }
}
@media (max-width: 1024px) {
  .hero-ads {
    grid-template-columns: 1fr;
    grid-template-areas: "txt" "form" "trust";
    gap: var(--gutter);
  }
  .hero-ads__img {
    filter: brightness(0.2) saturate(0.7);
  }
  .hero-ads .a {
    align-items: center;
  }
  .hero-ads .a > * {
    text-align: center;
  }
  .hero-ads .c {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ads .c ul {
    max-width: 50ch;
  }
}
/* sections/hero_full/style.scss */
@layer components {
  .hero-full {
    position: relative;
    grid-template-rows: auto 1fr auto;
    min-height: clamp(460px, 58vh, 720px);
    color: #fff;
    background: #000;
    overflow: hidden;
    padding-bottom: var(--gutter);
  }
  /* No image: keep the striped placeholder so the block still reads as a hero. */
  .hero-full:not(:has(> img)):not(:has(> picture)) {
    background: repeating-linear-gradient(45deg, #101010 0 8px, #050505 8px 16px);
  }
  /* Full-bleed photo, brightened down so text and buttons stay readable. The
   explicit `full` track is required: `.content-grid > *` would otherwise pin
   the absolutely positioned image to the content column. */
  .hero-full__img {
    position: absolute;
    grid-column: full;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.5);
    z-index: 0;
  }
  /* Breadcrumb lives inside the hero, over the darkened photo. */
  .hero-full__crumb {
    grid-column: content;
    grid-row: 1;
    align-self: start;
    z-index: 2;
  }
  .hero-full__crumb .crumb {
    padding: 12px 0;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: 0;
  }
  .hero-full__crumb .crumb a {
    color: #fff;
  }
  .hero-full__body {
    grid-column: content;
    grid-row: 2;
    align-self: center;
    text-align: left;
    padding-left: calc(44% + var(--gutter));
    z-index: 1;
  }
  .hero-full__body .h1 {
    margin-bottom: 14px;
  }
  .hero-full .bt {
    grid-column: content;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-self: end;
    align-self: end;
    width: min(100%, 380px);
    margin: 18px 0 30px;
    z-index: 1;
  }
  .hero-full .bt--mid {
    justify-self: center;
    width: min(100%, 460px);
  }
  /* Circular scroll cue at the foot of the hero; scrolls to the next section.
   The button is a fixed, invisible hit area so hover never loses the pointer
   as the cue moves; the visible circle bobs inside it. Idle bob mirrors
   mdxperts.eu: a slow, irregular upward nudge. */
  .hero-full .scroll {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 54px;
    height: 54px;
    margin-left: -27px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
  }
  .hero-full .scroll:focus-visible {
    outline: 2px solid var(--action-500);
    outline-offset: 2px;
  }
  .hero-full .scroll__cue {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    border: 2px solid var(--action-500);
    border-radius: 50%;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: scroll-cue 5s ease-in-out infinite;
  }
  /* Pause (not reset) the bob while hovered, then lift via transform: a
   different property than the animation, so the two never fight. */
  .hero-full .scroll:hover .scroll__cue {
    animation-play-state: paused;
    transform: translateY(-12px);
  }
  .hero-full .scroll__cue::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--action-500);
    border-bottom: 2px solid var(--action-500);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .hero-full .lbl {
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.42);
    z-index: 2;
  }
  /* Subtle base bob (~2px) with the reference's irregular double-nudge
   (~10px) scaled from its 3rem base to our 40px. */
  @keyframes scroll-cue {
    0%, 12%, 24%, 36%, 48%, 60%, 70%, 100% {
      bottom: 0;
    }
    6%, 18%, 30%, 42%, 54% {
      bottom: 2px;
    }
    75%, 90% {
      bottom: 10px;
    }
    82% {
      bottom: 4px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-full .scroll__cue {
      animation: none;
    }
  }
}
@media (max-width: 1024px) {
  .hero-full {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--sec-y);
    gap: var(--gutter);
  }
  .script {
    text-align: center;
    font-size: 45px;
  }
  .hero-full__crumb .crumb {
    padding: 0;
  }
  .hero-full__body {
    padding: 24px 0 0;
  }
  .hero-full .bt,
.hero-full .bt--mid {
    width: 100%;
    margin: 18px 0 0;
  }
  /* The stacked layout leaves no free foot for the cue. */
  .hero-full .scroll {
    display: none;
  }
}
/* sections/hero_guide/style.scss */
@layer components {
  .hero-guide {
    color: #fff;
    background: #000;
    padding-block: calc(var(--sec-y) + 10px) calc(var(--sec-y) + 30px);
  }
  .hero-guide__in {
    grid-column: content;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: calc(var(--gutter) * 1.5);
    align-items: start;
  }
  .hero-guide .crumb {
    padding: 0;
    border-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: calc(var(--gutter) * 1.2);
  }
  .hero-guide .crumb a {
    color: #fff;
  }
  .hero-guide__text .h1 {
    color: #fff;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 20ch;
  }
  .hero-guide__text .lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-lg);
    margin: calc(var(--gutter) * 0.6) 0 var(--gutter);
    max-width: 52ch;
  }
  .hero-guide__byline {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-sm);
  }
  .hero-guide__byline-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .hero-guide__byline b {
    color: #fff;
  }
  .hero-guide__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
  }
  .hero-guide__cta {
    width: auto;
    margin-top: calc(var(--gutter) * 0.9);
  }
  .hero-guide__tldr {
    background: var(--layout-primary);
    color: var(--layout-dark);
    border-radius: 16px;
    padding: calc(var(--gutter) * 0.9) var(--gutter);
    border-top: 6px solid var(--action-500);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  }
  .hero-guide .kick {
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--action-900);
    margin: 0 0 12px;
  }
  .hero-guide__body {
    color: var(--layout-less-dark);
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .hero-guide__body ul,
.hero-guide__body ol:has(li[data-list=bullet]) {
    list-style: disc;
    margin: 0 0 calc(var(--gutter) * 0.6);
    padding-left: 1.2em;
  }
  .hero-guide__body ol:not(:has(li[data-list=bullet])) {
    list-style: decimal;
    margin: 0 0 calc(var(--gutter) * 0.6);
    padding-left: 1.2em;
  }
  .hero-guide__body .ql-ui {
    display: none;
  }
  .hero-guide__body li {
    color: var(--layout-dark);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .hero-guide__body li::marker {
    color: var(--action-900);
  }
  .hero-guide__body p {
    margin: 0 0 10px;
  }
  .hero-guide__body p:last-child {
    margin-bottom: 0;
  }
  .hero-guide__body strong {
    color: var(--layout-dark);
  }
}
@media (max-width: 1024px) {
  .hero-guide__in {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .hero-guide__cta {
    width: 100%;
  }
}
/* sections/hero_main/style.scss */
@layer components {
  .hero-main {
    /* Content-column width, so the image can end where the text begins. */
    --content-w: min(var(--content-width), 100% - var(--gutter) * 2);
    position: relative;
    grid-template-rows: 1fr auto;
    min-height: clamp(460px, 58vh, 720px);
    color: #fff;
    background: #000;
    overflow: hidden;
    padding-bottom: var(--gutter);
  }
  /* No image: keep the striped placeholder so the block still reads as a hero. */
  .hero-main:not(:has(> img)):not(:has(> picture)) {
    background: repeating-linear-gradient(45deg, #101010 0 8px, #050505 8px 16px);
  }
  .script.script--main {
    font-size: 55px;
    transform: rotate(-3deg) translateX(-30px);
  }
  .hero-main .button--cta {
    border-color: white;
    background-color: var(--action-900);
  }
  /* Starts at the content column (below the logo) and ends where the hero
   text begins, so the portrait never touches the left screen edge. */
  .hero-main__img {
    position: absolute;
    grid-column: unset;
    left: calc((100% - var(--content-w)) / 2);
    bottom: 0;
    height: 106%;
    width: auto;
    object-fit: contain;
    object-position: center center;
    z-index: 0;
    transform: translateX(-30%);
    filter: saturate(0.7) contrast(1.1);
    max-width: 9999999px;
  }
  .hero-main__body {
    grid-column: content;
    grid-row: 1;
    align-self: center;
    text-align: left;
    padding-left: calc(44% + var(--gutter));
    z-index: 1;
  }
  .hero-main__body .h1 {
    margin-bottom: 14px;
  }
  .hero-main .bt {
    grid-column: content;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-self: end;
    align-self: end;
    width: min(100%, 380px);
    margin: 18px 0 30px;
    z-index: 1;
  }
  .hero-main .bt--mid {
    justify-self: center;
    width: min(100%, 460px);
  }
  /* Circular scroll cue at the foot of the hero; scrolls to the next section.
   The button is a fixed, invisible hit area so hover never loses the pointer
   as the cue moves; the visible circle bobs inside it. Idle bob mirrors
   mdxperts.eu: a slow, irregular upward nudge. */
  .hero-main .scroll {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 54px;
    height: 54px;
    margin-left: -27px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
  }
  .hero-main .scroll:focus-visible {
    outline: 2px solid var(--action-500);
    outline-offset: 2px;
  }
  .hero-main .scroll__cue {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 42px;
    margin-left: -21px;
    border: 2px solid var(--action-500);
    border-radius: 50%;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: scroll-cue 5s ease-in-out infinite;
  }
  /* Pause (not reset) the bob while hovered, then lift via transform: a
   different property than the animation, so the two never fight. */
  .hero-main .scroll:hover .scroll__cue {
    animation-play-state: paused;
    transform: translateY(-12px);
  }
  .hero-main .scroll__cue::before {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--action-500);
    border-bottom: 2px solid var(--action-500);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .hero-main .lbl {
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.42);
    z-index: 2;
  }
  /* Subtle base bob (~2px) with the reference's irregular double-nudge
   (~10px) scaled from its 3rem base to our 40px. */
  @keyframes scroll-cue {
    0%, 12%, 24%, 36%, 48%, 60%, 70%, 100% {
      bottom: 0;
    }
    6%, 18%, 30%, 42%, 54% {
      bottom: 2px;
    }
    75%, 90% {
      bottom: 10px;
    }
    82% {
      bottom: 4px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-main .scroll__cue {
      animation: none;
    }
  }
}
@media (max-width: 1280px) {
  .hero-main__body {
    padding-left: 35%;
  }
  .script.script--main {
    transform: rotate(-3deg);
  }
}
@media (max-width: 1024px) {
  .script.script--main {
    transform: unset;
  }
  .hero-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--sec-y);
    gap: var(--gutter);
  }
  /* Natural aspect instead of a cover crop, so the portrait stays fully
   visible in the stacked layout. */
  .hero-main__img {
    position: static;
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    height: auto;
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: 20px;
    display: none;
  }
  .script {
    text-align: center;
    font-size: 45px;
  }
  .hero-main__body {
    padding: 24px 0 0;
  }
  .hero-main .bt,
.hero-main .bt--mid {
    width: 100%;
    margin: 18px 0 0;
  }
  /* The stacked layout leaves no free foot for the cue. */
  .hero-main .scroll {
    display: none;
  }
}
@media (max-width: 600px) {
  /* Mobile keeps the text-only hero. */
  .hero-main__img {
    display: none;
  }
  .script > span {
    white-space: unset !important;
  }
}
/* sections/hero_split/style.scss */
@layer components {
  .hero-split {
    color: #fff;
    background: #000;
    padding-block: var(--sec-y);
  }
  .hero-split__inner {
    grid-column: content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gutter) * 1.5);
    align-items: center;
  }
  .hero-split__text {
    align-items: flex-start;
  }
  /* Breadcrumb over black: translucent text, white links. */
  .hero-split .crumb {
    padding: 0;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: 0;
  }
  .hero-split .crumb a {
    color: #fff;
  }
  .hero-split__text .h1 {
    margin-bottom: 0;
  }
  .hero-split__loc {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.3;
  }
  .hero-split__pin {
    display: flex;
    color: var(--action-500);
  }
  .hero-split__cta {
    width: auto;
    align-self: flex-start;
    margin-top: 10px;
  }
  .hero-split__media {
    position: relative;
    align-self: stretch;
  }
  .hero-split__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .hero-split__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 438/400;
    object-fit: cover;
    border-radius: 0;
    display: block;
    clip-path: url(#hero-split-clip);
  }
  .hero-split .lbl {
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.42);
  }
}
@media (max-width: 1024px) {
  .hero-split__inner {
    grid-template-columns: 1fr;
    gap: var(--gutter);
  }
  .hero-split__text {
    align-items: center;
  }
  .hero-split__media {
    order: -1;
  }
  .hero-split__img {
    aspect-ratio: 438/400;
    display: none;
  }
  .hero-split__cta {
    margin: auto;
  }
}
@media (max-width: 600px) {
  .hero-split__cta {
    width: 100%;
  }
}
/* components/icon/style.scss */
@layer components {
  /* Inline stroke icon (components/icon/template.html.tera). */
  .i {
    width: 1.35em;
    height: 1.35em;
    flex: 0 0 auto;
    display: block;
  }
}
/* sections/map/style.scss */
@layer components {
  /* Map: a lazy iframe pointing at the standalone map page (`/embeds/karte/`, the
   `karte` blueprint) fills the slot. The dark fallback keeps the slot
   intentional until the frame has loaded. The card look matches the contact
   panel: rounded corners and a thick brand-green frame. */
  .map {
    position: relative;
    /* Own stacking context: Leaflet's panes/controls use z-index up to 1000,
   which would otherwise paint over the sticky header (z-index 25). */
    z-index: 0;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    background: linear-gradient(150deg, #3b3b3b, #141414);
  }
  .map__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .map__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9a9a9a;
    font-size: var(--text-sm);
    text-align: center;
  }
  .map__attr {
    font-size: var(--text-xs);
    color: #6f6f6f;
  }
  .map__attr a {
    color: inherit;
    text-decoration: none;
  }
}
/* sections/markdown/style.scss */
@layer components {
  /* Article + table of contents. The TOC is a sticky aside on wide screens and
   stacks above the article on narrow ones. The section is `.sec`, inside the
   page content grid, so it only owns its internal two-column layout. */
  .article-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
  }
  /* Stacked layout: the TOC sits above the article. */
  .article-grid > .toc {
    order: -1;
  }
  @media (min-width: 1280px) {
    .article-grid {
      grid-template-columns: minmax(0, 65ch) 260px;
      align-items: start;
      justify-content: center;
      gap: calc(2 * var(--gutter));
    }
    /* TOC is the second (right) column and sticks while the article scrolls.
   Reset the mobile order so it stays in the right column. */
    .article-grid > .toc {
      order: initial;
      position: sticky;
      top: calc(var(--header-h) + var(--gutter));
    }
  }
}
/* sections/meta/style.scss */
@layer components {
  /* Blogpost byline: author (avatar + name), dates and a share row. Flexes to
   one row on wide screens and wraps on narrow ones. */
  .meta {
    font-size: var(--text-sm);
    color: var(--layout-less-dark);
    padding: 10px 0;
    border-bottom: 1px solid var(--layout-less-light);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gutter);
  }
  .content-grid > .meta {
    padding-inline: 0;
  }
  .meta__author {
    display: flex;
    align-items: center;
    gap: var(--gutter);
    flex-wrap: wrap;
  }
  .meta__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
  }
  .meta__who,
.meta__when {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .meta__label {
    font-size: var(--text-xs);
    color: var(--layout-less-dark);
  }
  .meta__name,
.meta__when b {
    color: var(--layout-dark);
    font-weight: 700;
  }
  .meta__share {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .meta__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--layout-less-light);
    border-radius: 6px;
    background: var(--layout-primary);
    color: var(--layout-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .meta__share-btn:hover {
    border-color: var(--action-500);
    color: var(--action-500);
  }
  .meta__share-btn .i {
    width: 1em;
    height: 1em;
  }
  @media (max-width: 1024px) {
    .meta__share {
      margin-left: 0;
    }
  }
}
/* sections/mobile_cta/style.scss */
@layer components {
  .mobile-cta {
    display: none;
  }
  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 800;
    font-size: var(--text-sm);
    line-height: 1.2;
    border-radius: 10px;
    padding: 11px 12px;
  }
  .mobile-cta__call {
    color: #fff;
    border: 1.5px solid #fff;
  }
  .mobile-cta__call .i {
    width: 17px;
    height: 17px;
  }
  .mobile-cta__cta {
    background: var(--action-500);
    color: #000;
  }
  /* The Bausteine unit preview is a desktop fixture; show the bar statically
   there instead of leaving the unit blank. */
  .fixture-page .mobile-cta {
    display: grid;
    position: static;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    max-width: 390px;
    margin: 0 auto;
    padding: 10px 12px;
    background: #000;
  }
}
@media (max-width: 600px) {
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.94);
  }
}
/* sections/qa/style.scss */
@layer components {
  .qa {
    border-left: 3px solid var(--action-500);
    padding-left: 14px;
    margin-bottom: 20px;
  }
  .qa:last-child {
    margin-bottom: 0;
  }
  .qa b {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.4;
    font-weight: 800;
    margin-bottom: 6px;
  }
  .qa p {
    margin: 0 0 6px;
    font-size: var(--text-md);
    line-height: 1.6;
  }
  .qa .qa__x {
    color: var(--layout-less-dark);
  }
}
/* sections/quote/style.scss */
@layer components {
  .quote {
    border-top: 1px solid var(--layout-less-light);
    border-bottom: 1px solid var(--layout-less-light);
    padding: 16px 0;
    font-size: var(--text-h3);
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
  }
}
/* sections/reviews/style.scss */
@layer components {
  /* Laptop and above: static three-column grid (the original look). */
  .reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
  }
}
/* Tablet/mobile: the same cards become a swipe-only scroll-snap slider. The
   ~85% card width lets the next card peek so the swipe affordance reads. */
@media (max-width: 1024px) {
  .reviews__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews__grid::-webkit-scrollbar {
    display: none;
  }
  .reviews__grid > * {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}
/* sections/scope/style.scss */
@layer components {
  .card--on {
    border-color: var(--action-500);
    border-width: 2px;
  }
}
/* sections/steps/style.scss */
@layer components {
  .steps__title {
    align-self: center;
    text-align: center;
  }
  .steps__title::after {
    content: "";
    display: block;
    width: 50%;
    min-width: 72px;
    max-width: 340px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: var(--action-500);
  }
  .steps {
    gap: var(--gutter);
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
  }
  .steps__item {
    display: flex;
    gap: var(--gutter);
  }
  .steps__item .n {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--action-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 800;
    transform: scale(1.3);
  }
  .steps__item b {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .steps__item p {
    margin: 0;
    line-height: 1.55;
    color: var(--layout-less-dark);
  }
  .steps__note :where(p) + :where(p) {
    margin-top: 8px;
  }
  @media (max-width: 600px) {
    .steps {
      grid-auto-flow: row;
      grid-template-rows: none;
    }
  }
}
/* components/toc/style.scss */
@layer components {
  .toc {
    font-size: var(--text-sm);
  }
  .toc__title {
    font-weight: 800;
    margin: 0 0 calc(var(--gutter) / 2);
  }
  .toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc__item {
    margin: 0;
    padding: 0;
  }
  .toc__link {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 3px solid var(--layout-less-light);
    color: var(--layout-less-dark);
    text-decoration: none;
    line-height: 1.35;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .toc__link:hover {
    color: var(--action-500);
  }
  .toc__item--h3 .toc__link {
    padding-left: 28px;
    font-size: var(--text-xs);
  }
  /* Active heading, set by the scrollspy in static/site.js. */
  .toc__link.is-active {
    border-left-color: var(--action-500);
    color: var(--layout-dark);
    font-weight: 700;
  }
}
/* sections/trust/style.scss */
@layer components {
  .trust {
    background: var(--action-500);
    padding: var(--gutter) 0;
  }
  .trust__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .trust__list > li {
    position: relative;
    padding: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
  }
  .trust__list > li:nth-child(n+2):before {
    content: "";
    display: block;
    position: absolute;
    left: calc(-0.5 * var(--gutter));
    background: var(--action-300);
    height: 100%;
    width: 1px;
  }
}
@media (max-width: 1024px) {
  .trust__list {
    grid-template-columns: 1fr 1fr;
  }
  .trust__list > li:nth-child(odd):before {
    display: none;
  }
}
/* sections/warn/style.scss */
@layer components {
  .warn {
    border: 1px solid #c98a2a;
    background: #fdf6e8;
    border-radius: 6px;
    padding: var(--gutter);
  }
  .warn b {
    display: block;
    font-size: var(--text-md);
    line-height: 1.35;
    font-weight: 800;
    margin-bottom: 5px;
    color: #8a5d10;
  }
  .warn p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: #6b4a0e;
  }
}
/* sections/was/style.scss */
@layer components {
  .was__reveal {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    min-height: 220px;
  }
  .was__reveal img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .was__reveal .lay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    text-align: center;
    padding: 16px;
  }
  .was__reveal .lay b {
    font-size: var(--text-h3);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .was__reveal .lay span {
    font-size: var(--text-md);
    margin-top: 7px;
    opacity: 0.92;
  }
  .was__list {
    border: 1px solid var(--layout-less-light);
    border-radius: 6px;
    background: var(--layout-light);
    padding: 12px;
    margin-top: 10px;
    list-style: none;
  }
  .was__list a {
    display: block;
    font-size: var(--text-md);
    padding: 8px 9px;
    border-bottom: 1px solid var(--layout-less-light);
    color: var(--layout-dark);
    text-decoration: none;
  }
  .was__list li:last-child a {
    border-bottom: 0;
  }
  .was__list a::before {
    content: "› ";
    color: var(--action-500);
    font-weight: 800;
  }
  /* When the text column is taller than the media column, the media column
   sticks to the top while the text scrolls past. `align-self: start` cancels
   the `.g2--center` vertical centering so the column has room to travel. */
  .was__media {
    position: sticky;
    top: calc(var(--header-h) + var(--gutter));
    align-self: start;
  }
}
/* Mobile: always heading, then media card, then body text — independent of the
   left/right desktop arrangement. `display: contents` promotes the heading and
   the text block to grid items so they can be ordered around the media. */
@media (max-width: 600px) {
  .was .was__text {
    display: contents;
  }
  .was .was__text h2 {
    order: 1;
  }
  .was .was__media {
    order: 2;
    position: static;
  }
  .was .was__text > div {
    order: 3;
  }
}
/* sections/who/style.scss */
@layer components {
  .who {
    background: var(--layout-primary);
  }
  .who .in {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: calc(var(--gutter) * 2);
    align-items: center;
    padding-block: calc(var(--sec-y) * 2.5);
  }
  .who .pf {
    position: relative;
  }
  /* Light-green panel offset to the bottom-right, peeking out behind the
   portrait. Sits under the image (z-index 0), the image paints over it. */
  .who .pf::before {
    content: "";
    position: absolute;
    inset: 36px -18px -18px 36px;
    background: var(--action-100);
    border-radius: 26px;
    z-index: 0;
  }
  .who .pf__img {
    position: relative;
    z-index: 1;
    aspect-ratio: 4/5;
    border-radius: 20px;
    overflow: hidden;
  }
  .who .pf img,
.who .pf .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 0;
  }
  /* White name card overlapping the portrait's bottom-left corner. */
  .who .nm {
    position: absolute;
    left: -18px;
    bottom: 30px;
    z-index: 2;
    background: var(--layout-primary);
    border-radius: 14px;
    padding: 14px 24px 14px 22px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  }
  /* Green accent bar clipped to the card's left edge. */
  .who .nm::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 40px;
    background: var(--action-500);
    border-radius: 3px;
  }
  .who .nm b {
    display: block;
    font-size: var(--text-h4);
    line-height: 1.25;
    font-weight: 800;
  }
  .who .nm span {
    display: block;
    font-size: var(--text-sm);
    color: var(--layout-less-dark);
    margin-top: 3px;
  }
  .who .tx h3 {
    font-size: calc(var(--text-h2) * 1.4);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .who .tx h3 span {
    color: var(--action-500);
  }
  /* Short green rule under the heading. */
  .who .tx h3::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 14px;
    background: var(--action-500);
    border-radius: 2px;
  }
  .who .who__text {
    font-size: var(--text-lg);
    line-height: 1.65;
    max-width: 62ch;
  }
  .who .who__bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
  }
  .who .who__bubble {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border: 1px solid var(--layout-less-light);
    border-radius: 999px;
    background: var(--layout-primary);
    font-size: var(--text-md);
    line-height: 1.2;
    color: var(--layout-dark);
  }
  .who .who__bubble .i {
    width: 1.1em;
    height: 1.1em;
    color: var(--action-700);
  }
  .who .who__cta {
    width: auto;
    max-width: 460px;
    align-self: flex-start;
    padding-inline: 32px;
  }
}
@media (max-width: 1024px) {
  .who .in {
    grid-template-columns: 1fr;
    gap: calc(var(--gutter) * 1.5);
  }
  /* Flatten the text column so the portrait can slot between the copy and the
   tag bubbles: heading, text, portrait, bubbles, CTA. */
  .who .tx,
.who .tx > div {
    display: contents;
  }
  .who .who__h {
    order: 1;
  }
  .who .who__text {
    order: 2;
  }
  .who .pf {
    order: 3;
  }
  .who .who__bubbles {
    order: 4;
    margin-top: 0;
  }
  .who .who__cta {
    order: 5;
    justify-self: center;
  }
  .who .pf::before {
    inset: 24px -12px -12px 24px;
  }
}
@media (max-width: 600px) {
  .who .nm {
    left: -10px;
    bottom: 18px;
    padding: 12px 18px 12px 16px;
  }
  .who .who__cta {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }
}
/* blueprints/adskampagne/style.scss */
@layer components {}
/* blueprints/leistung_detail/style.scss */
@layer components {}
/* blueprints/rechtstext/style.scss */
@layer components {}
/* blueprints/blogpost/style.scss */
@layer components {}
/* blueprints/leistung_hub/style.scss */
@layer components {}
/* blueprints/danke/style.scss */
@layer components {
  .bp-danke main section:nth-of-type(1) {
    padding-bottom: var(--gutter);
  }
  .bp-danke main section:nth-of-type(2) {
    padding-top: 0;
  }
}
/* blueprints/leistung_ratgeber/style.scss */
@layer components {
  /* Reuse the shared FAQ section, but give it the final layout's two-column
   heading/list split. */
  .bp-leistung_ratgeber .faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: calc(var(--gutter) * 1.6);
    align-items: start;
  }
  @media (max-width: 1024px) {
    .bp-leistung_ratgeber .faq {
      grid-template-columns: 1fr;
      gap: var(--gutter);
    }
  }
  /* Keep the footer's last line clear of the fixed mobile CTA bar. The extra
   space sits inside the black footer, so no blank band appears below it. */
  @media (max-width: 600px) {
    .bp-leistung_ratgeber .foot__in {
      padding-bottom: calc(var(--gutter) / 2 + 80px);
    }
  }
}
@layer components {
  /* The page's own blocks live inside the guide's content column, so they are
   not direct children of `.content-grid`. Give them the article rhythm and
   drop the section grid inset. */
  /* Generic blocks in the content slot. Guide articles style themselves. */
  .bp-leistung_ratgeber .guide-article__content > .sec:not(.guide-beitrag) {
    padding: 0 0 calc(var(--sec-y) * 0.9);
    margin: 0 0 calc(var(--sec-y) * 0.9);
    border-bottom: 1px solid var(--layout-less-light);
  }
  .bp-leistung_ratgeber .guide-article__content > .sec:not(.guide-beitrag):last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .bp-leistung_ratgeber .guide-article__content > .sec:not(.guide-beitrag) h2 {
    scroll-margin-top: calc(var(--header-h) + var(--gutter));
  }
  /* The first paragraph of a generic content block reads as the short answer. */
  .bp-leistung_ratgeber .guide-article__content > .sec:not(.guide-beitrag) .body > p:first-child {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--layout-dark);
    font-weight: 500;
    margin: 0 0 calc(var(--gutter) * 0.7);
  }
  /* Match the mock's contents rail: numbered rows separated by a left rule. */
  .bp-leistung_ratgeber .guide-article__toc .toc__title {
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--layout-less-dark);
    margin-bottom: 12px;
  }
  .bp-leistung_ratgeber .guide-article__toc .toc__list {
    list-style: none;
    display: grid;
    gap: 2px;
    margin: 0 0 calc(var(--gutter) * 0.9);
    padding: 0;
    border-left: 2px solid var(--layout-less-light);
  }
  .bp-leistung_ratgeber .guide-article__toc .toc__item {
    margin: 0;
  }
  .bp-leistung_ratgeber .guide-article__toc .toc__link {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 7px 12px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--layout-less-dark);
    font-size: var(--text-md);
    font-weight: 600;
    text-decoration: none;
  }
  .bp-leistung_ratgeber .guide-article__toc .toc__link:hover {
    color: var(--layout-dark);
    border-color: var(--action-500);
  }
  .bp-leistung_ratgeber .guide-article__toc .toc__link.is-active {
    color: var(--layout-dark);
    font-weight: 700;
    border-color: var(--action-500);
  }
  .bp-leistung_ratgeber .guide-article__toc .guide-article__num {
    color: var(--action-900);
    min-width: 16px;
  }
  .bp-leistung_ratgeber .guide-article__toc .button {
    width: 100%;
    justify-content: center;
  }
  .bp-leistung_ratgeber .guide-article__mtoc .toc__list {
    list-style: none;
    display: grid;
    gap: 2px;
    margin: 10px 0 0;
    padding: 0;
  }
  .bp-leistung_ratgeber .guide-article__mtoc .toc__link {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    color: var(--layout-dark);
    font-weight: 600;
    text-decoration: none;
  }
  .bp-leistung_ratgeber .guide-article__mtoc .toc__link.is-active {
    color: var(--action-900);
    font-weight: 700;
  }
  .bp-leistung_ratgeber .guide-article__mtoc .guide-article__num {
    color: var(--action-900);
    min-width: 16px;
  }
}

/* registry/breakpoints.rs */
:root {
  --bp-mobile: 600px;
  --bp-tablet: 1024px;
  --bp-laptop: 1280px;
  --bp-desktop: 1440px;
  --bp-ultrawide: 1920px;
}

/* db/design.yaml */
:root {
  --layout-primary: #ffffff;
  --layout-light: #f5f7f1;
  --layout-dark: #141414;
  --layout-less-light: #e2e4de;
  --layout-less-dark: #6d7268;
  --action-100: #eaf1dc;
  --action-300: #c3de9a;
  --action-500: #7ab829;
  --action-700: #4c8a22;
  --action-900: #1f5c2e;
  --success: #7ab829;
  --error: #b00020;
  --disabled-light: #e2e4de;
  --disabled-dark: #9aa094;
  --gutter: 40px;
  --sec-y: 70px;
  --page-max: 1040px;
  --ff: Urbanist, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs: Caveat, "Bradley Hand", "Segoe Script", cursive;
  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-h1: 26px;
  --text-h2: 26px;
  --text-h3: 20px;
  --text-h4: 17px;
  --text-script: 50px;
  --text-ads-hero: 56px;
}
@media (max-width: 1024px) {
  :root {
    --text-xs: 14px;
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-h1: 26px;
    --text-h2: 26px;
    --text-h3: 20px;
    --text-h4: 17px;
    --text-script: 50px;
    --text-ads-hero: 44px;
  }
}
@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --sec-y: 30px;
    --text-xs: 14px;
    --text-sm: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-h1: 22px;
    --text-h2: 22px;
    --text-h3: 18px;
    --text-h4: 17px;
    --text-script: 28px;
    --text-ads-hero: 30px;
  }
}