/* components.css - alle Komponenten (Mobile First) */

@layer components {
  /* ---------- Header und Navigation ---------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block-end: var(--hairline);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: 64px;
  }
  @media (min-width: 64rem) {
    .site-header__inner { min-block-size: 72px; max-block-size: 72px; }
  }

  .site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-weight: 650;
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
  }
  .site-logo svg { inline-size: 1.5em; block-size: 1.5em; color: var(--accent); }

  .site-nav { margin-inline-start: auto; }
  .nav-list {
    display: none;
    list-style: none;
    padding: 0;
  }
  @media (min-width: 64rem) {
    .nav-list { display: flex; align-items: center; gap: var(--space-1); }
  }
  .nav-list a,
  .nav-dropdown__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 550;
    text-decoration: none;
    border-radius: var(--radius);
  }
  .nav-list a:hover,
  .nav-dropdown__button:hover { background: var(--surface-sunken); }
  .nav-list a[aria-current="page"] {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
  }

  .nav-dropdown { position: relative; }
  .nav-dropdown__button .icon { inline-size: 1em; block-size: 1em; }
  .nav-sub {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-inline-size: 16rem;
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    background: var(--surface-raised);
    border: var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-sub.is-open { display: grid; gap: var(--space-1); }
  .nav-sub a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .site-header .button--primary { display: none; }
  @media (min-width: 64rem) {
    .site-header .button--primary { display: inline-flex; }
  }
  /* Theme-Umschalter und Burger: 44px Ziele */
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius);
    color: var(--text);
  }
  .icon-button:hover { background: var(--surface-sunken); }
  .theme-toggle .icon-moon,
  .theme-toggle[aria-pressed="true"] .icon-sun { display: none; }
  .theme-toggle[aria-pressed="true"] .icon-moon { display: block; }

  .nav-burger { display: inline-flex; }
  @media (min-width: 64rem) {
    .nav-burger { display: none; }
  }

  /* Mobiler Vollbild-Dialog */
  .nav-dialog {
    border: 0;
    padding: 0;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 100dvh;
    max-block-size: 100dvh;
    background: var(--surface);
    color: var(--text);
  }
  .nav-dialog::backdrop { background: color-mix(in srgb, var(--text) 40%, transparent); }
  .nav-dialog__inner {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    padding: var(--space-4) var(--container-pad) var(--space-10);
    min-block-size: 100%;
    overflow-y: auto;
  }
  .nav-dialog__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 64px;
  }
  .nav-dialog nav ul { list-style: none; padding: 0; }
  .nav-dialog .nav-group { padding-block: var(--space-4); border-block-start: var(--hairline); }
  .nav-dialog .nav-group > span {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: var(--space-2);
  }
  .nav-dialog nav a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 48px;
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
  }
  .nav-dialog .nav-group ul a { font-size: var(--text-lg); font-weight: 500; padding-inline-start: var(--space-4); }
  .nav-dialog nav a[aria-current="page"] { color: var(--accent); }
  .nav-dialog .button { inline-size: 100%; }

  /* Ohne JS: Navigation als sichtbare, aufgeklappte Liste */
  html:not(.js) .nav-burger,
  html:not(.js) .nav-dropdown__button,
  html:not(.js) .theme-toggle,
  html:not(.js) .nav-dialog { display: none; }
  html:not(.js) .site-header { position: static; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-2); max-block-size: none; }
  html:not(.js) .site-header__actions { margin-inline-start: auto; }
  html:not(.js) .site-nav { order: 3; margin-inline-start: 0; inline-size: 100%; }
  html:not(.js) .nav-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  html:not(.js) .nav-dropdown { display: contents; }
  html:not(.js) .nav-sub {
    position: static;
    display: contents;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    min-inline-size: 0;
  }
  html:not(.js) .nav-sub li { display: inline-flex; }
  html:not(.js) .nav-sub a { min-block-size: 44px; }

  /* ---------- Buttons ---------- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--text-base);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .button--primary {
    background: var(--accent);
    color: var(--accent-contrast);
  }
  .button--primary:hover { box-shadow: var(--shadow-md); }
  .button--secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
  }
  .button--secondary:hover { background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
  .button--inverse {
    background: var(--surface-raised);
    color: var(--text);
    border-color: transparent;
  }

  /* ---------- Badge ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.1em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
  }
  .badge--dev {
    background-image: var(--hatch);
    background-color: var(--surface);
    color: var(--text);
  }

  /* ---------- Karten ---------- */
  .card {
    background: var(--surface-raised);
    border: var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .card > h3 { font-size: var(--text-lg); }
  .card > p { color: var(--text-muted); font-size: var(--text-sm); }
  a.card { color: var(--text); text-decoration: none; }
  a.card .card__more {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* ---------- Bento ---------- */
  .bento {
    display: grid;
    gap: var(--space-4);
    grid-template-areas:
      "bf" "seo" "ki" "sec";
  }
  @media (min-width: 48rem) {
    .bento {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-areas:
        "bf bf seo"
        "bf bf ki"
        "sec sec sec";
    }
  }
  .bento__tile {
    position: relative;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--text);
    text-decoration: none;
  }
  .bento__tile--bf { grid-area: bf; gap: var(--space-5); padding: var(--space-8); }
  .bento__tile--seo { grid-area: seo; }
  .bento__tile--ki { grid-area: ki; }
  .bento__tile--sec {
    grid-area: sec;
    background-image: var(--hatch);
    background-color: var(--surface);
    border-style: dashed;
  }
  .bento__tile > h3 { font-size: var(--text-lg); }
  .bento__tile--bf > h3 { font-size: var(--text-2xl); }
  .bento__tile > p { color: var(--text-muted); }
  .bento__tile .icon { color: var(--accent); inline-size: 1.5em; block-size: 1.5em; }
  .bento__tile--sec .icon { color: var(--text-muted); }
  .bento__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    color: var(--text-muted);
  }
  .bento__list li {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    padding-block-start: var(--space-2);
    border-block-start: var(--hairline);
  }
  .bento__list .icon { inline-size: 1em; block-size: 1em; align-self: center; }
  .bento__more {
    margin-block-start: auto;
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .bento__tile--sec .bento__more { color: var(--text); }

  /* ---------- Kontrast-Pruefer (Messgeraet) ---------- */
  .contrast-tool {
    background: var(--surface-raised);
    border: var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-5);
  }
  .contrast-tool__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: var(--hairline);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .contrast-tool__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }
  @media (min-width: 30rem) {
    .contrast-tool__fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  }
  .contrast-field { display: grid; gap: var(--space-2); min-inline-size: 0; }
  .contrast-field input { min-inline-size: 0; }
  .contrast-field > label {
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .contrast-field__row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--space-2);
    align-items: center;
  }
  .contrast-field input[type="color"] {
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
  }
  .contrast-field input[type="text"] {
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .contrast-field input[aria-invalid="true"] { border-color: var(--status-err); }
  .contrast-field__error {
    font-size: var(--text-sm);
    color: var(--status-err);
    min-block-size: 1.4em;
  }
  .contrast-tool__swap {
    align-self: center;
    margin-block-start: var(--space-5);
  }
  .contrast-tool__preview {
    border: var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-1);
    min-block-size: 6rem;
    align-content: center;
  }
  .contrast-tool__preview strong { font-size: var(--text-lg); font-weight: 650; }
  .contrast-tool__result {
    display: grid;
    gap: var(--space-3);
    border-block-start: var(--hairline);
    padding-block-start: var(--space-4);
  }
  .contrast-tool__ratio {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .contrast-tool__ratio output {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .contrast-tool__ratio span { font-size: var(--text-sm); color: var(--text-muted); }
  .contrast-tool__grades {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .contrast-tool__grades li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: var(--hairline);
    border-radius: var(--radius);
    font-size: var(--text-sm);
  }
  .contrast-tool__grades .grade__name { font-weight: 600; }
  .contrast-tool__grades .grade__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  .contrast-tool__grades li[data-pass="true"] .grade__state { color: var(--status-ok); }
  .contrast-tool__grades li[data-pass="false"] .grade__state { color: var(--status-err); }
  .contrast-tool__grades li[data-pass="true"] .grade__state::before { content: "\2713\0020"; }
  .contrast-tool__grades li[data-pass="false"] .grade__state::before { content: "\2717\0020"; }

  /* ---------- Stepper ---------- */
  .stepper { display: grid; gap: var(--space-4); }
  .stepper__controls {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  html.js .stepper__controls { display: flex; }
  .stepper__status {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  .stepper__track {
    display: grid;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
  }
  html.js .stepper__track {
    grid-auto-flow: column;
    grid-auto-columns: min(82%, 24rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  html.js .stepper__step { scroll-snap-align: start; }
  .stepper__step {
    counter-increment: step;
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    background: var(--surface-raised);
    border: var(--hairline);
    border-radius: var(--radius);
  }
  .stepper__step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    border-block-end: var(--hairline);
    padding-block-end: var(--space-2);
  }
  .stepper__step > h3 { font-size: var(--text-lg); }
  .stepper__step > p { color: var(--text-muted); font-size: var(--text-sm); }
  .stepper__step[aria-current="step"] { border-color: var(--accent); }

  /* ---------- Tabs (APG) ---------- */
  .tabs [role="tablist"] {
    display: none;
    gap: var(--space-1);
    flex-wrap: wrap;
    border-block-end: var(--hairline);
    margin-block-end: var(--space-8);
  }
  html.js .tabs [role="tablist"] { display: flex; }
  .tabs [role="tab"] {
    min-block-size: 44px;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-muted);
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
  }
  .tabs [role="tab"]:hover { color: var(--text); }
  .tabs [role="tab"][aria-selected="true"] {
    color: var(--accent);
    border-block-end-color: var(--accent);
  }
  html.js .tabs [role="tabpanel"][hidden] { display: none; }
  .tabs__panel {
    display: grid;
    gap: var(--space-6);
  }
  @media (min-width: 64rem) {
    .tabs__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  }
  .tabs__panel-text { display: grid; gap: var(--space-4); align-content: start; }
  .tabs__panel-text ul { color: var(--text-muted); }

  /* ---------- Trennungs-Visualisierung ---------- */
  .assessment { display: grid; gap: var(--space-4); }
  .assessment__bar {
    display: grid;
    grid-template-columns: 5fr 3fr 2fr;
    gap: var(--space-1);
    block-size: clamp(2.5rem, 6vw, 4rem);
  }
  .assessment__seg { border-radius: var(--radius); }
  .assessment__seg--auto { background: var(--accent); }
  .assessment__seg--manual {
    background-image: var(--hatch);
    background-color: var(--surface);
    border: 1px solid var(--border);
  }
  .assessment__seg--na { background: var(--surface-sunken); border: 1px solid var(--border); }
  .assessment__legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
  }
  @media (min-width: 48rem) {
    .assessment__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .assessment__legend li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--space-2) var(--space-3);
    align-items: start;
    font-size: var(--text-sm);
  }
  .assessment__legend .swatch {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius);
    grid-row: span 2;
  }
  .assessment__legend .swatch--auto { background: var(--accent); }
  .assessment__legend .swatch--manual {
    background-image: var(--hatch);
    background-color: var(--surface);
    border: 1px solid var(--border);
  }
  .assessment__legend .swatch--na { background: var(--surface-sunken); border: 1px solid var(--border); }
  .assessment__legend strong { font-weight: 600; }
  .assessment__legend p { color: var(--text-muted); }

  /* ---------- Timeline ---------- */
  .timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-6);
  }
  @media (min-width: 48rem) {
    .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  }
  .timeline__item {
    position: relative;
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-block-start: var(--space-5);
  }
  .timeline__item::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    border-block-start: var(--hairline);
  }
  .timeline__item::after {
    content: "";
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: 0;
    inline-size: 9px;
    block-size: 9px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 2px solid var(--text-muted);
  }
  .timeline__item--now::after { border-color: var(--accent); background: var(--accent); }
  .timeline__stage {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .timeline__item--now .timeline__stage { color: var(--accent); }
  .timeline__item > h3 { font-size: var(--text-lg); }
  .timeline__item > p { color: var(--text-muted); font-size: var(--text-sm); }

  /* ---------- Pricing ---------- */
  .pricing {
    display: grid;
    gap: var(--space-4);
  }
  @media (min-width: 64rem) {
    .pricing {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
    }
    .pricing__tier--featured { margin-block-start: calc(-1 * var(--space-4)); }
  }
  .pricing__tier {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding: var(--space-6);
    background: var(--surface-raised);
    border: var(--hairline);
    border-radius: var(--radius);
  }
  .pricing__tier--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
  }
  .pricing__tier > h3 { font-size: var(--text-xl); }
  .pricing__tier > p { color: var(--text-muted); font-size: var(--text-sm); }
  .pricing__tier ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .pricing__tier ul li {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }
  .pricing__tier ul .icon { color: var(--status-ok); inline-size: 1em; block-size: 1em; align-self: center; }

  /* ---------- CTA-Band ---------- */
  .band {
    background: var(--accent);
    color: var(--accent-contrast);
    padding-block: var(--space-16);
  }
  .band__inner {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
  }
  .band h2 { color: var(--accent-contrast); max-inline-size: 20ch; }
  .band p { color: color-mix(in srgb, var(--accent-contrast) 85%, transparent); }

  /* ---------- Tabelle ---------- */
  .table-wrap { overflow-x: auto; padding: var(--space-1); }
  .table {
    inline-size: 100%;
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    font-size: var(--text-sm);
  }
  .table caption {
    text-align: start;
    font-weight: 600;
    font-size: var(--text-base);
    padding-block-end: var(--space-3);
  }
  .table th, .table td {
    text-align: start;
    padding: var(--space-3) var(--space-4);
    border-block-start: var(--hairline);
    vertical-align: top;
  }
  .table thead th {
    border-block-start: 0;
    border-block-end: 2px solid var(--border);
    font-weight: 600;
  }

  /* ---------- Formular ---------- */
  .form { display: grid; gap: var(--space-5); max-inline-size: 40rem; }
  .form__field { display: grid; gap: var(--space-2); }
  .form__field > label { font-weight: 600; font-size: var(--text-sm); }
  .form__field .form__hint { font-size: var(--text-sm); color: var(--text-muted); }
  .form__field input,
  .form__field textarea,
  .form__field select {
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    border: var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-raised);
    font-size: var(--text-base);
  }
  .form__field textarea { min-block-size: 8rem; }
  .form__field input[aria-invalid="true"],
  .form__field textarea[aria-invalid="true"] { border-color: var(--status-err); }
  .form__error { font-size: var(--text-sm); color: var(--status-err); }
  .form [role="alert"] {
    border: 1px solid var(--status-err);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  /* ---------- Details-Accordion ---------- */
  .accordion { border-block-start: var(--hairline); }
  .accordion details { border-block-end: var(--hairline); }
  .accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-block-size: 44px;
    padding: var(--space-4) var(--space-1);
    font-weight: 600;
    font-size: var(--text-lg);
    cursor: pointer;
    list-style: none;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary .icon { transition: none; }
  .accordion details[open] summary .icon { rotate: 45deg; }
  .accordion details > div {
    padding: 0 var(--space-1) var(--space-5);
    color: var(--text-muted);
  }

  /* ---------- Filter-Bar und Feature-Grid ---------- */
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block-end: var(--space-4);
    border-block-end: var(--hairline);
    margin-block-end: var(--space-6);
  }
  .filter-chip {
    min-block-size: 44px;
    padding: var(--space-2) var(--space-4);
    border: var(--hairline);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-raised);
  }
  .filter-chip[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
  }
  .feature-grid {
    display: grid;
    gap: var(--space-4);
  }
  @media (min-width: 48rem) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 80rem) {
    .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .feature-grid[hidden] { display: none; }

  /* ---------- Bild-Slot ---------- */
  .image-slot {
    aspect-ratio: var(--ratio, 16 / 10);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--text) 5%, var(--surface));
    border: 1px dashed var(--border);
    border-radius: var(--radius);
  }
  .image-slot > span {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
  }

  /* ---------- Betreiber-Platzhalter ---------- */
  .placeholder-note {
    border: 1px dashed var(--status-warn);
    background: color-mix(in srgb, var(--status-warn) 7%, var(--surface));
    border-radius: var(--radius);
    padding: var(--space-4);
    font-size: var(--text-sm);
  }
  .placeholder-note > strong { display: block; margin-block-end: var(--space-1); }

  /* ---------- Footer ---------- */
  .site-footer {
    border-block-start: var(--hairline);
    background: var(--surface-raised);
    padding-block: var(--space-12) var(--space-6);
  }
  .site-footer__grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 48rem) {
    .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .site-footer__col > h2 {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: var(--space-3);
  }
  .site-footer__col ul { list-style: none; padding: 0; margin: 0; }
  .site-footer__col a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 36px;
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-sm);
  }
  .site-footer__col a:hover { color: var(--accent); text-decoration: underline; }
  .site-footer__meta {
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-5);
    border-block-start: var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    align-items: baseline;
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
  .site-footer__meta a { color: var(--text); }

  /* ---------- Hero ---------- */
  .hero { padding-block: var(--space-16) var(--space-20); }
  .hero__text {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
    align-content: center;
  }
  .hero__text > p {
    font-size: var(--text-xl);
    color: var(--text-muted);
    max-inline-size: 34ch;
  }
  /* Messfeld: einziger Farbverlauf der Website hinter dem Instrumenten-Panel */
  .hero__panel {
    background: var(--wash);
    border-radius: var(--radius);
    padding: var(--space-4);
  }

  /* ---------- Aussage in voller Breite ---------- */
  .statement { max-inline-size: 26ch; }
  .statement__sub {
    margin-block-start: var(--space-6);
    font-size: var(--text-xl);
    color: var(--text-muted);
    max-inline-size: 56ch;
  }

  /* ---------- Punktliste (Sticky-Stack) ---------- */
  .point-list { list-style: none; padding: 0; margin: 0; }
  .point-list > li {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-5);
    border-block-start: var(--hairline);
  }
  .point-list h3 { font-size: var(--text-lg); }
  .point-list h3 .badge { margin-inline-start: var(--space-2); vertical-align: middle; }
  .point-list p { color: var(--text-muted); }

  /* ---------- noscript-Hinweis ---------- */
  .noscript-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    border-block-start: var(--hairline);
    padding-block-start: var(--space-3);
  }
}