/* Copy of design-system/bundle.css without the Google Fonts import (see fonts.css). */
/* AuPair.click components: reads the CSS variables compiled from tokens.json (tokens.css). */

.ap-root { font-family: var(--font-sans); color: var(--text); background: var(--page); }
/* Teil der Seite in einem anderen Design (data-theme, z. B. helle Vorschau im dunklen Design): die geerbte
   Schriftfarbe stammt noch aus dem anderen Design, also neu setzen. Ohne Spezifität, Bausteine gehen vor. */
:where([data-theme]:not(:root)) { color: var(--text); }
.ap-display, .ap-h1, .ap-h2, .ap-h3 { font-family: var(--font-display); color: var(--text); margin: 0; }
.ap-overline { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* Nur für Screenreader sichtbar (Zustandswort, Icon-Beschriftung) */
.ap-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Container & Raster: ein Seitenrand für Navbar, Hero, Sektionen, CTA und Footer */
.ap-container { box-sizing: border-box; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ap-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }

/* ───────────── Buttons: Höhe über Innenabstand, Label bricht nie um ───────────── */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); box-sizing: border-box;
  border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--card); color: var(--text);
  font: 600 15px/1 var(--font-sans); padding: 12.5px 25px; white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: var(--elevation-1);
  transition: background-position var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.ap-btn svg { width: 16px; height: 16px; flex: none; margin-block: -4px; } /* Icons verändern die Höhe nie */
.ap-btn--sm { font-size: 14px; padding: 11px 19px; }
.ap-btn--lg { font-size: 16px; padding: 16px 23px; }
.ap-btn--primary { color: var(--on-color); border-color: var(--coral-light);
  background-image: linear-gradient(180deg, var(--button-top) 0%, var(--button-mid) 25%, var(--button-bottom) 50%, var(--coral-deep) 100%);
  background-size: 100% 200%; background-position: 0 0; }
.ap-btn--outline { background: transparent; border-color: var(--border-medium); }
.ap-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.ap-btn--navy { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.ap-btn--danger { background: var(--error-fill); border-color: var(--error-fill); color: var(--on-color); }
.ap-btn--danger-outline { background: var(--card); border-color: var(--error); color: var(--error); }
/* Laden: <span class="ap-btn__spinner" aria-hidden="true"> vor dem Label + aria-busy="true" */
.ap-btn__spinner { width: 16px; height: 16px; flex: none; margin-block: -4px; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: ap-spin .8s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
.ap-btn[aria-busy="true"] { pointer-events: none; cursor: progress; }
@media (hover: hover) {
  .ap-btn:hover { background-color: var(--control-fill); border-color: var(--border-strong); }
  .ap-btn--outline:hover { background-color: var(--card); border-color: var(--accent); color: var(--accent); }
  .ap-btn--ghost:hover { background-color: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
  .ap-btn--primary:hover { background-position: 0 100%; }
  .ap-btn--navy:hover { background-color: var(--inverse-strong); border-color: var(--inverse-strong); }
  .ap-btn--danger:hover { background-color: var(--error-strong); border-color: var(--error-strong); }
  .ap-btn--danger-outline:hover { background-color: var(--error-fill); color: var(--on-color); }
}
.ap-btn--primary:active { background-position: 0 100%; }
.ap-btn:not(.ap-btn--primary):not(.ap-btn--navy):not(.ap-btn--danger):not(.ap-btn--danger-outline):active { background-color: var(--control-fill); border-color: var(--border-strong); }
.ap-btn--outline:active { background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.ap-btn--ghost:active { background-color: var(--accent-soft-border); border-color: transparent; color: var(--accent-strong); }
.ap-btn--navy:active { background-color: var(--inverse-strong); border-color: var(--inverse-strong); }
.ap-btn--danger:active { background-color: var(--error-strong); border-color: var(--error-strong); }
.ap-btn--danger-outline:active { background-color: var(--error-fill); color: var(--on-color); }
/* Deaktiviert: steht nach allen Hover-Regeln */
.ap-btn[disabled], .ap-btn[aria-disabled="true"] { background: var(--border-subtle); border-color: var(--border-subtle); color: var(--border-strong); box-shadow: none; cursor: not-allowed; }
a.ap-btn[aria-disabled="true"] { pointer-events: none; }

/* ───────────── Formulare ───────────── */
.ap-form { display: flex; flex-direction: column; gap: var(--space-6); }
.ap-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.ap-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ap-label { font: 500 14px/1.3 var(--font-sans); color: var(--text); }
.ap-label__opt { font-weight: 400; color: var(--text-muted); } /* „(optional)“ */
.ap-input { box-sizing: border-box; width: 100%; min-height: 42px; padding: var(--space-2-5) var(--space-3-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--card); color: var(--text); font: 400 15px/20px var(--font-sans); box-shadow: var(--elevation-1);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ap-input::placeholder, .ap-textarea::placeholder { color: var(--text-muted); opacity: 1; }
.ap-help { font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); }
.ap-help:has(> svg) { display: flex; align-items: flex-start; gap: var(--space-1); }
.ap-help > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.ap-help--error { color: var(--error); font-weight: 500; }
.ap-help--success { color: var(--success); font-weight: 500; }

/* Select & Textarea */
.ap-select { appearance: none; box-sizing: border-box; width: 100%; min-height: 42px; padding: var(--space-2-5) var(--space-10) var(--space-2-5) var(--space-3-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background-color: var(--card);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 20px center, right 15px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  color: var(--text); font: 400 15px/20px var(--font-sans); box-shadow: var(--elevation-1);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ap-select[multiple], .ap-select[size]:not([size="1"]) { padding: var(--space-1); background-image: none; }
.ap-select[multiple] option, .ap-select[size]:not([size="1"]) option { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.ap-select[multiple] option:checked { background: var(--accent-soft); color: var(--accent-strong); }
.ap-textarea { box-sizing: border-box; min-height: 120px; padding: var(--space-3-5) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background: var(--card); color: var(--text); font: 400 15px/1.5 var(--font-sans); box-shadow: var(--elevation-1); resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }

/* Feld-Zustände (gelten für Input, Select, Textarea) */
@media (hover: hover) { .ap-input:hover, .ap-select:hover, .ap-textarea:hover { border-color: var(--text-muted); } }
.ap-input:focus, .ap-select:focus, .ap-textarea:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--accent); box-shadow: var(--focus-field); }
.ap-input[readonly], .ap-textarea[readonly] { background: var(--control-fill); border-color: var(--border-strong); box-shadow: none; }
.ap-input:disabled, .ap-select:disabled, .ap-textarea:disabled { background: var(--control-fill); border-color: var(--border-medium); color: var(--fg-disabled); box-shadow: none; cursor: not-allowed; }
.ap-input[aria-invalid="true"], .ap-select[aria-invalid="true"], .ap-textarea[aria-invalid="true"] { border-color: var(--error); box-shadow: var(--focus-field-error); }
.ap-input[aria-invalid="true"]:focus, .ap-select[aria-invalid="true"]:focus, .ap-textarea[aria-invalid="true"]:focus {
  border-color: var(--error); box-shadow: 0 0 0 1px var(--error), 0 0 0 5px var(--focus-halo); } /* Rand wird 2 px: Fokus bleibt sichtbar */
.ap-input[data-valid="true"], .ap-select[data-valid="true"], .ap-textarea[data-valid="true"] { border-color: var(--success); }

/* Größen: gleiche Stufe wie die Buttons daneben */
.ap-input--sm, .ap-select--sm { min-height: 38px; padding-block: 9px; font-size: 14px; line-height: 18px; }
.ap-input--lg, .ap-select--lg { min-height: 50px; padding-block: 13px; font-size: 16px; line-height: 22px; }

/* Icon im Feld (Suche, Kalender, Passwort-Knopf) */
.ap-input-wrap { position: relative; display: flex; align-items: center; }
.ap-input-wrap > svg { position: absolute; inset-inline-start: var(--space-3); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.ap-input-wrap > svg ~ .ap-input { padding-inline-start: calc(var(--space-8) + var(--space-1)); }
.ap-input-wrap__action { position: absolute; inset-inline-end: var(--space-1); display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.ap-input-wrap__action svg { width: 16px; height: 16px; }
@media (hover: hover) { .ap-input-wrap__action:hover { background: var(--control-fill); color: var(--text); } }
.ap-input-wrap__action ~ .ap-input, .ap-input-wrap .ap-input:has(~ .ap-input-wrap__action) { padding-inline-end: calc(var(--space-8) + var(--space-2)); }

/* Verbundene Gruppe: Vorwahl/Präfix/Einheit + Feld = ein Steuerelement */
.ap-input-group { display: flex; align-items: stretch; width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--card); box-shadow: var(--elevation-1); overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
@media (hover: hover) { .ap-input-group:hover { border-color: var(--text-muted); } }
.ap-input-group:focus-within { border-color: var(--accent); box-shadow: var(--focus-field); }
.ap-input-group:has([aria-invalid="true"]) { border-color: var(--error); }
.ap-input-group .ap-input, .ap-input-group .ap-select { flex: 1 1 auto; width: auto; min-width: 0; min-height: 40px; border: 0; border-radius: 0; box-shadow: none; }
.ap-input-group .ap-input:focus, .ap-input-group .ap-select:focus,
.ap-input-group [aria-invalid="true"], .ap-input-group [aria-invalid="true"]:focus { box-shadow: none; } /* Gruppe trägt Rand und Fokus */
.ap-input-group__addon { display: flex; align-items: center; padding: 0 var(--space-3); background: var(--control-fill); color: var(--text-body);
  font: 500 15px/20px var(--font-sans); white-space: nowrap; border-inline-end: 1px solid var(--border-strong); }
.ap-input-group__addon--end { border-inline-end: 0; border-inline-start: 1px solid var(--border-strong); }
.ap-input-group .ap-input-group__select { flex: 0 0 auto; width: auto; max-width: 45%; background-color: var(--control-fill); border-inline-end: 1px solid var(--border-strong); }
.ap-input-group .ap-input-group__select:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); } /* zeigt das fokussierte Segment */

/* Zeichenzähler unter Textarea */
.ap-field__meta { display: flex; align-items: flex-start; gap: var(--space-3); }
.ap-counter { margin-inline-start: auto; font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-counter--over { color: var(--error); font-weight: 500; }

/* Gruppen */
.ap-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ap-fieldset--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.ap-legend { padding: 0; margin-bottom: var(--space-3); font: 500 14px/1.3 var(--font-sans); color: var(--text); }

/* Datei-Upload: natives Feld */
.ap-input[type="file"] { padding: var(--space-1) var(--space-3-5) var(--space-1) var(--space-1); cursor: pointer; }
.ap-input[type="file"]::file-selector-button { margin-inline-end: var(--space-3); padding: 0 var(--space-4); height: 32px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: var(--control-fill); color: var(--text); font: 600 14px/1 var(--font-sans); cursor: pointer; }
.ap-input[type="file"]:hover::file-selector-button { background: var(--border-subtle); }

/* Dropzone: <input class="ap-sr-only ap-dropzone__input" type="file"> direkt vor <label class="ap-dropzone"> */
.ap-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box;
  width: 100%; min-height: 256px; padding: var(--space-6) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: var(--card-soft); color: var(--text); text-align: center; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.ap-dropzone--compact { min-height: 128px; }
@media (hover: hover) { .ap-dropzone:hover { background: var(--control-fill); } }
.ap-dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.ap-dropzone__input[aria-invalid="true"] + .ap-dropzone { border-color: var(--error); }
.ap-dropzone__input:disabled + .ap-dropzone { border-color: var(--border-medium); background: var(--control-fill); color: var(--fg-disabled); cursor: not-allowed; }
.ap-dropzone__icon { width: 32px; height: 32px; color: var(--accent); }
.ap-dropzone__title { font: 400 15px/1.4 var(--font-sans); }
.ap-dropzone__title strong { font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ap-dropzone__hint { font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); }

/* Liste hochgeladener Dateien */
.ap-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ap-file-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--card); font: 400 14px/1.4 var(--font-sans); color: var(--text); }
.ap-file-item > svg { flex: none; width: 16px; height: 16px; color: var(--text-muted); }
.ap-file-item__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ap-file-item__meta { color: var(--text-muted); white-space: nowrap; }
.ap-file-item--error { border-color: var(--error-border-strong); background: var(--error-soft); color: var(--error); }
.ap-file-item--error > svg, .ap-file-item--error .ap-file-item__meta { color: var(--error); }

/* Datum & Uhrzeit: native Felder auf der ap-input-Hülle */
.ap-input[type="date"], .ap-input[type="time"], .ap-input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.ap-input::-webkit-date-and-time-value { text-align: start; min-height: 20px; } /* iOS: leeres Feld fällt sonst zusammen */
.ap-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; border-radius: var(--radius-xs); }
.ap-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Zeitraum: Von „bis“ Bis */
.ap-range-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-3); }
.ap-range-fields__sep { padding-bottom: 11px; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
/* Termin-Slots (Radio-Gruppe als Pillen) */
.ap-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ap-slot { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-4); box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--card); color: var(--text);
  font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: var(--elevation-1);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ap-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
@media (hover: hover) { .ap-slot:hover { background: var(--control-fill); } }
.ap-slot:has(input:checked) { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); } /* wie ap-segmented */
.ap-slot:has(input:disabled) { background: var(--control-fill); border-color: var(--border-medium); color: var(--fg-disabled);
  text-decoration: line-through; box-shadow: none; cursor: not-allowed; }

/* ───────────── Badges & Chips ───────────── */
.ap-badge { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 1px 7px; border-radius: var(--radius-sm);
  font: 600 12px/1.3 var(--font-sans); border: 1px solid; }
.ap-badge svg { width: 12px; height: 12px; flex: none; }
.ap-badge__dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: currentColor; }
.ap-badge--brand { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-strong); }
.ap-badge--info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.ap-badge--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.ap-badge--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.ap-badge--error { background: var(--error-soft); border-color: var(--error-border); color: var(--error); }
.ap-badge--neutral { background: var(--control-fill); border-color: var(--border); color: var(--text-muted); }
.ap-badge--outline { background: var(--card); border-color: var(--border-medium); color: var(--text-muted); }
/* Groß + Filter-Chip mit Entfernen-Knopf (Ziel 24 × 24 px, WCAG 2.5.8) */
.ap-badge--lg { padding: 3px 7px; font-size: 14px; }
.ap-badge__remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
  margin: -4px -6px -4px -2px; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent;
  color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.ap-badge__remove svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .ap-badge__remove:hover { background: var(--border); }
  .ap-badge--brand .ap-badge__remove:hover { background: var(--accent-soft-border); }
}
.ap-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* ───────────── Alerts ───────────── */
.ap-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid; font: 400 14px/1.5 var(--font-sans); transition: opacity var(--duration-slow) var(--ease-entrance); }
.ap-alert--info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.ap-alert--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.ap-alert--warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.ap-alert--error { background: var(--error-soft); border-color: var(--error-border); color: var(--error); }
.ap-alert--neutral { background: var(--control-fill); border-color: var(--border); color: var(--text); }
.ap-alert + .ap-alert { margin-top: var(--space-4); }
.ap-alert__icon { flex: none; width: 16px; height: 16px; margin-top: 2.5px; } /* mittig zur ersten Zeile */
.ap-alert__content { flex: 1; min-width: 0; }
.ap-alert__title { font-weight: 600; }
.ap-alert__content > p { margin: 0; }
.ap-alert ul { margin: var(--space-2) 0 0; padding-left: 18px; }
.ap-alert li + li { margin-top: var(--space-1); }
.ap-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.ap-alert__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin: -2px -4px -2px auto; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.ap-alert__close svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .ap-alert--info .ap-alert__close:hover { background: var(--info-border); }
  .ap-alert--success .ap-alert__close:hover { background: var(--success-border); }
  .ap-alert--warning .ap-alert__close:hover { background: var(--warning-border); }
  .ap-alert--error .ap-alert__close:hover { background: var(--error-border); }
  .ap-alert--neutral .ap-alert__close:hover { background: var(--border); }
}
.ap-alert.is-leaving { opacity: 0; }
/* Links in Meldungen: Textfarbe der Meldung, unterstrichen (schlägt die Fließtext-Linkfarbe), auch mit ap-link:
   Coral auf den getönten Flächen erreicht nicht überall 4,5 : 1 (auf info-soft 4,43 : 1), die Textfarbe schon */
.ap-alert a:not([class]), .ap-root .ap-alert p a:not([class]), .ap-alert .ap-link,
.ap-alert a:not([class]):hover, .ap-root .ap-alert p a:not([class]):hover, .ap-alert .ap-link:hover { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ───────────── Cards (ruhen flach) ───────────── */
.ap-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--card-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-6); }
.ap-card__title { font: 600 20px/1.2 var(--font-sans); color: var(--text); margin: 0; }
.ap-card__body { font: 400 16px/1.5 var(--font-sans); color: var(--text-body); margin: 0; }
.ap-card__meta { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.ap-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: auto; padding-top: var(--space-3); } /* 12 + 12 = 24 px */
.ap-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-1); aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; background: var(--control-fill); }
.ap-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-card--on-page { background: var(--card); border-color: var(--border); }
.ap-card--highlight { border-color: var(--coral); }
/* Ganze Karte klickbar: genau ein Link (Titel), Fokus-Ring auf der Karte */
.ap-card--link { position: relative; }
.ap-card__link { color: inherit; text-decoration: none; }
.ap-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.ap-card--link .ap-btn, .ap-card--link .ap-icon-btn { position: relative; z-index: 1; }
.ap-icon-tile { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-soft-border);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }

/* ───────────── Tabs ───────────── */
.ap-tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); max-width: 100%; box-sizing: border-box; border-radius: var(--radius-full); background: var(--control-fill); }
.ap-tab { flex: none; border: none; background: transparent; border-radius: var(--radius-full); padding: 11px 18px; font: 600 14px/1 var(--font-sans); color: var(--text-body);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ap-tab[aria-selected="true"] { background: var(--card); color: var(--accent); box-shadow: var(--elevation-1-strong); }
@media (hover: hover) { .ap-tab:hover:not([aria-selected="true"]):not([aria-current="page"]):not([aria-disabled="true"]) { color: var(--text); background: var(--card-soft); } }
.ap-tab[aria-disabled="true"] { color: var(--fg-disabled); cursor: not-allowed; }
.ap-tabpanel { padding-top: var(--space-4); }
.ap-tabpanel[hidden] { display: none; }
/* Unterstrich-Tabs (Inhaltsbereiche) */
.ap-tabs--underline { display: flex; gap: var(--space-2); padding: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--border); }
.ap-tabs--underline .ap-tab { border-radius: 0; padding: var(--space-4) var(--space-2); margin-bottom: -1px; border-bottom: 2px solid transparent; box-shadow: none; }
@media (hover: hover) { .ap-tabs--underline .ap-tab:hover:not([aria-selected="true"]):not([aria-current="page"]):not([aria-disabled="true"]) { background: none; color: var(--accent); border-bottom-color: var(--coral-300); } }
.ap-tabs--underline .ap-tab[aria-selected="true"] { background: none; color: var(--accent); border-bottom-color: var(--accent); box-shadow: none; }
/* Pill-Tabs: aktiv Coral-Deep-Fläche (5,2 : 1), nie Button-Verlauf, nie Hauptnavigation */
.ap-tabs--pill { background: none; padding: 0; }
.ap-tabs--pill .ap-tab[aria-selected="true"] { background: var(--coral-deep); color: var(--on-color); box-shadow: var(--elevation-1-strong); }

/* ───────────── Toggle (Schalter) ───────────── */
.ap-toggle { display: inline-flex; align-items: center; gap: var(--space-3); padding: 0; border: 0; background: none; text-align: start;
  font: 400 14px/1.4 var(--font-sans); color: var(--text); cursor: pointer; }
.ap-toggle__track { box-sizing: border-box; width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--border-strong);
  position: relative; flex: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.ap-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--on-color); box-shadow: var(--elevation-1-strong); transition: transform var(--duration-base) var(--ease-standard); }
.ap-toggle[aria-checked="true"] .ap-toggle__track { background: var(--button-mid); }
.ap-toggle[aria-checked="true"] .ap-toggle__track::after { transform: translateX(16px); } /* 40 − 18 − 2 × 3 */
[dir="rtl"] .ap-toggle__track::after { left: auto; right: 3px; }
[dir="rtl"] .ap-toggle[aria-checked="true"] .ap-toggle__track::after { transform: translateX(-16px); }
.ap-toggle:disabled { color: var(--fg-disabled); cursor: not-allowed; }
.ap-toggle:disabled .ap-toggle__track { background: var(--border-medium); }
.ap-toggle[aria-checked="true"]:disabled .ap-toggle__track { background: var(--accent-muted); }

/* ───────────── Checkbox & Radio: native Inputs, Akzent über Token ───────────── */
.ap-check { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); font: 400 15px/1.4 var(--font-sans); color: var(--text); cursor: pointer; }
.ap-check input { appearance: none; margin: 1px 0 0; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--border-strong);
  background: var(--card); border-radius: var(--radius-xs); display: grid; place-content: center; cursor: pointer; box-shadow: var(--elevation-1); }
.ap-check input[type="radio"] { border-radius: var(--radius-full); }
@media (hover: hover) { .ap-check:hover input:not(:checked):not(:disabled) { border-color: var(--text-muted); } }
.ap-check input:checked { background: var(--button-mid); border-color: var(--button-mid); }
.ap-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--on-color); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.ap-check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-color); }
.ap-check input[type="checkbox"]:indeterminate { background: var(--button-mid); border-color: var(--button-mid); }
.ap-check input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; border: 0; border-radius: 1px; background: var(--on-color); transform: none; }
.ap-check input:disabled { background: var(--border-subtle); border-color: var(--border-medium); cursor: not-allowed; }
.ap-check input:checked:disabled, .ap-check input:indeterminate:disabled { background: var(--fg-disabled); border-color: var(--fg-disabled); } /* Haken bleibt sichtbar */
.ap-check:has(input:disabled) { color: var(--fg-disabled); cursor: not-allowed; }
.ap-check input[aria-invalid="true"]:not(:checked) { border-color: var(--error); }
.ap-check__hint { display: block; font-size: 14px; color: var(--text-muted); }
.ap-check__title { display: block; font-weight: 600; color: var(--text); }
/* Auswahl als Karte (Checkbox oder Radio) */
.ap-check--card { display: flex; width: 100%; box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--card);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) { .ap-check--card:hover { border-color: var(--border-strong); } }
.ap-check--card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ap-check--card:has(input:disabled) { background: var(--control-fill); border-color: var(--border-subtle); }

/* ───────────── Segmented control ───────────── */
.ap-segmented { display: inline-flex; padding: var(--space-1); gap: var(--space-1); border-radius: var(--radius-full); background: var(--control-fill); border: 1px solid var(--border-subtle); }
.ap-segmented button { border: none; background: transparent; border-radius: var(--radius-full); padding: 9px var(--space-4); font: 600 14px/1 var(--font-sans); color: var(--text-body); cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ap-segmented button[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); }
@media (hover: hover) { .ap-segmented button:not([aria-pressed="true"]):not([disabled]):not([aria-disabled="true"]):hover { background: var(--card); color: var(--text); } }
.ap-segmented button[disabled], .ap-segmented button[aria-disabled="true"] { color: var(--fg-disabled); cursor: not-allowed; }
/* Icon-Umschalter (Liste/Raster): jedes Segment mit aria-label */
.ap-segmented--icon button { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 0; min-height: 32px; }
.ap-segmented--icon button svg { width: 20px; height: 20px; }

/* ───────────── Icon button & Avatar ───────────── */
.ap-icon-btn { width: 44px; height: 44px; flex: none; box-sizing: border-box; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--card); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--elevation-1); cursor: pointer; position: relative;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.ap-icon-btn svg { width: 20px; height: 20px; flex: none; }
.ap-icon-btn--sm { width: 38px; height: 38px; }
.ap-icon-btn--sm svg { width: 16px; height: 16px; }
.ap-icon-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; }
@media (hover: hover) { .ap-icon-btn:hover { background: var(--control-fill); } }
.ap-icon-btn:active { background: var(--control-fill); }
/* Umschalt-Zustand (Merken/Favorit) */
.ap-icon-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent); }
.ap-icon-btn[disabled], .ap-icon-btn[aria-disabled="true"] { background: var(--border-subtle); border-color: var(--border-subtle); color: var(--fg-disabled); box-shadow: none; cursor: not-allowed; }
.ap-dot { position: absolute; top: var(--space-2); inset-inline-end: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: var(--ring-card); }
.ap-avatar { width: 40px; height: 40px; flex: none; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong);
  display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--font-sans); overflow: hidden; border: 2px solid var(--card); }
.ap-avatar--navy { background: var(--info-soft); color: var(--info); }
.ap-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ap-avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-avatar-group { display: inline-flex; }
.ap-avatar-group .ap-avatar + .ap-avatar { margin-inline-start: calc(-1 * var(--space-2-5)); }

/* ───────────── Navbar ───────────── */
.ap-navbar { display: flex; align-items: center; gap: var(--space-6); height: 72px; padding: 0 var(--gutter); box-sizing: border-box; background: var(--card); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); }
.ap-navbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
/* Inhalt im Seitenraster (Website): Logo, Links und Aktionen fluchten mit Hero, Sektionen und Footer (max. container) */
.ap-navbar--contained { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
html:has(.ap-navbar--sticky) { scroll-padding-top: calc(72px + var(--space-4)); } /* Fokus nie unter der Navbar (WCAG 2.4.11) */
.ap-navbar__brand { display: inline-flex; align-items: center; gap: var(--space-2-5); font: 800 20px/1 var(--font-display); color: var(--text); text-decoration: none; }
.ap-navbar__links { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.ap-navbar__links a { display: block; white-space: nowrap; padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-full); font: 500 15px/1 var(--font-sans); color: var(--text-body); text-decoration: none; }
.ap-navbar__links a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }
.ap-navbar__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Breadcrumb */
.ap-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1-5); row-gap: var(--space-2-5); margin: 0; padding: 0; list-style: none; font: 500 14px/1.4 var(--font-sans); color: var(--text-body); }
.ap-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
/* Trenner: Chevron aus CSS-Rändern (kein Text, wird nicht vorgelesen); bei RTL gespiegelt */
.ap-breadcrumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 4px 0 1px; border: solid var(--text-muted); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); flex: none; }
[dir="rtl"] .ap-breadcrumb li + li::before { transform: rotate(-135deg); }
.ap-breadcrumb a { color: var(--text-body); text-decoration: none; border-radius: var(--radius-xs); }
.ap-breadcrumb a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ap-breadcrumb [aria-current="page"] { color: var(--text-muted); }
.ap-breadcrumb__home { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.ap-breadcrumb--solid { display: inline-flex; padding: var(--space-3); background: var(--control-fill); border-radius: var(--radius-sm); }
.ap-breadcrumb__toggle { border: none; background: none; padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-xs); font: inherit; color: var(--text-body); cursor: pointer; }
.ap-breadcrumb__toggle:hover { background: var(--card); color: var(--link); }

/* Pagination */
.ap-pagination { display: flex; align-items: center; gap: var(--space-1-5); font-family: var(--font-sans); }
.ap-pagination a, .ap-pagination span { min-width: 38px; height: 38px; padding: 0 var(--space-2-5); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); font: 600 14px/1 var(--font-sans); color: var(--text-body); text-decoration: none; font-variant-numeric: tabular-nums; }
.ap-pagination a[aria-current="page"] { background: var(--inverse); color: var(--on-inverse); }
.ap-pagination .ap-pagination__edge { border: 1px solid var(--border); background: var(--card); box-shadow: var(--elevation-1); gap: var(--space-1-5); padding: 0 var(--space-3-5); }
.ap-pagination [aria-disabled="true"] { color: var(--fg-disabled); background: var(--control-fill); border-color: var(--border-subtle); box-shadow: none; cursor: not-allowed; pointer-events: none; }
.ap-pagination .ap-pagination__edge[aria-disabled="true"] { background: var(--control-fill); border-color: var(--border-subtle); box-shadow: none; }
.ap-pagination .ap-pagination__status { display: none; min-width: 0; padding: 0 var(--space-2); font-weight: 500; color: var(--text-body); }

/* Stepper */
.ap-stepper { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); }
.ap-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; text-align: center; font: 500 14px/1.3 var(--font-sans); color: var(--text-muted); }
.ap-step::before { content: ""; position: absolute; top: 15px; inset-inline-start: calc(-50% + 22px); inset-inline-end: calc(50% + 22px); height: 2px; background: var(--border); }
.ap-step:first-child::before { display: none; }
.ap-step__dot { width: 32px; height: 32px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-sans);
  background: var(--card); border: 2px solid var(--border-medium); color: var(--text-muted); box-sizing: border-box; }
.ap-step--done .ap-step__dot { background: var(--success-fill); border-color: var(--success-fill); color: var(--on-color); }
.ap-step--done::before, .ap-step--current::before, .ap-step[aria-current="step"]::before { background: var(--success); }
.ap-step--current, .ap-step[aria-current="step"] { color: var(--text); font-weight: 600; }
.ap-step--current .ap-step__dot, .ap-step[aria-current="step"] .ap-step__dot { background: var(--button-mid); border-color: var(--button-mid); color: var(--on-color); box-shadow: var(--ring-current); }
/* Kompakt (viele Schritte): unter 720 px nur die Punkte, darunter eine Zeile mit dem aktuellen Schritt */
.ap-stepper__summary { display: none; margin: var(--space-3) 0 0; text-align: center; font: 600 14px/1.4 var(--font-sans); color: var(--text); }
@media (max-width: 719px) {
  .ap-stepper--compact .ap-step__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ap-stepper--compact + .ap-stepper__summary { display: block; }
}

/* Progress */
.ap-progress { height: 8px; border-radius: var(--radius-full); background: var(--control-fill); overflow: hidden; }
.ap-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--button-top), var(--button-bottom)); }

/* Sidebar (App) */
.ap-sidebar { width: 264px; box-sizing: border-box; padding: var(--space-5) var(--space-3-5); background: var(--card); border-inline-end: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans); }
.ap-sidebar__label { font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: var(--space-4) var(--space-3) var(--space-1-5); }
.ap-sidebar__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--space-11); box-sizing: border-box; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-sm); font: 500 15px/1.2 var(--font-sans); color: var(--text-body); text-decoration: none; }
.ap-sidebar__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.ap-sidebar__count { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--coral-deep); color: var(--on-color); font: 700 12px/22px var(--font-sans); text-align: center; }
/* Sidebar schmal (ap-sidebar--collapsed, 72 px): nur Symbole. Die Leiste gleitet auf die neue Breite; Symbole
   bleiben dabei an ihrem Platz, Texte blenden aus und werden vom Rand abgeschnitten (nichts bricht um oder
   springt). Die Beschriftung bleibt im Link für Screenreader und erscheint schmal als Tooltip (data-tooltip).
   Kopf: Logo links, rechts der dezente Knopf ap-sidebar__toggle. Schmal zeigt der Knopf das Herz (Signet);
   bei Hover oder Tastaturfokus wird daraus das Symbol zum Ausklappen. */
.ap-sidebar { overflow-x: clip; transition: width var(--duration-slow) var(--ease-standard); }
.ap-sidebar__head { position: relative; flex: none; height: var(--space-11); margin: var(--space-1) 0 var(--space-5); }
.ap-sidebar__brand { position: absolute; inset-inline-start: var(--space-3); top: 0; display: flex; align-items: center; height: 100%; border-radius: var(--radius-sm);
  transition: opacity var(--duration-base) var(--ease-standard), visibility 0s; }
.ap-sidebar__toggle { position: absolute; inset-inline-end: 0; top: 0; display: grid; place-items: center; width: var(--space-11); height: var(--space-11); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ap-sidebar__toggle > * { grid-area: 1 / 1; display: flex; transition: opacity var(--duration-fast) var(--ease-standard); }
.ap-sidebar__toggle svg { width: 20px; height: 20px; }
.ap-sidebar__toggle img { width: 32px; height: 32px; }
@media (hover: hover) { .ap-sidebar__toggle:hover { background: var(--control-fill); color: var(--text); } }
.ap-sidebar__signet, .ap-sidebar__icon-open { opacity: 0; }
.ap-sidebar__item, .ap-sidebar__label { overflow: hidden; white-space: nowrap; }
.ap-sidebar__item { flex: none; }
.ap-sidebar__item svg { flex: none; }
.ap-sidebar__text { transition: opacity var(--duration-base) var(--ease-standard); }
.ap-sidebar__label { position: relative; flex: none; }
.ap-sidebar__label::before { content: ""; position: absolute; inset-inline: var(--space-2); top: 50%; border-top: 1px solid var(--border-subtle); opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.ap-sidebar--collapsed { width: calc(var(--space-11) + 2 * var(--space-3-5) + 1px); } /* + Rand rechts */
.ap-sidebar--collapsed .ap-sidebar__brand { opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-standard), visibility 0s var(--duration-fast); }
.ap-sidebar--collapsed .ap-sidebar__text { opacity: 0; }
.ap-sidebar--collapsed .ap-sidebar__label::before { opacity: 1; }
.ap-sidebar--collapsed .ap-sidebar__icon-close, .ap-sidebar--collapsed .ap-sidebar__icon-open { opacity: 0; }
.ap-sidebar--collapsed .ap-sidebar__signet { opacity: 1; }
.ap-sidebar--collapsed .ap-sidebar__toggle:focus-visible .ap-sidebar__signet { opacity: 0; }
.ap-sidebar--collapsed .ap-sidebar__toggle:focus-visible .ap-sidebar__icon-open { opacity: 1; }
@media (hover: hover) {
  .ap-sidebar--collapsed .ap-sidebar__toggle:hover .ap-sidebar__signet { opacity: 0; }
  .ap-sidebar--collapsed .ap-sidebar__toggle:hover .ap-sidebar__icon-open { opacity: 1; }
}
.ap-sidebar--collapsed .ap-sidebar__item { position: relative; }
.ap-sidebar--collapsed .ap-sidebar__count { position: absolute; top: 0; inset-inline-end: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .ap-sidebar, .ap-sidebar__brand, .ap-sidebar__text, .ap-sidebar__label::before, .ap-sidebar__toggle, .ap-sidebar__toggle > * { transition: none; }
}

/* ───────────── Dropdown / Menü ───────────── */
.ap-menu { min-width: 144px; width: max-content; max-width: min(320px, calc(100vw - 2 * var(--gutter-mobile))); box-sizing: border-box; padding: var(--space-2); margin: 0; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--elevation-2); font-family: var(--font-sans); }
.ap-menu--floating { position: fixed; z-index: var(--z-dropdown); animation: ap-menu-in var(--duration-fast) var(--ease-entrance); }
@keyframes ap-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.ap-menu__label { padding: var(--space-2) var(--space-3); font: 600 12px/1.4 var(--font-sans); color: var(--text-muted); }
.ap-menu__item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; padding: var(--space-2-5) var(--space-3); box-sizing: border-box; border: none; background: transparent; border-radius: var(--radius-sm); font: 500 14px/1.2 var(--font-sans); color: var(--text); text-align: start; cursor: pointer; text-decoration: none; }
.ap-menu__item[data-active] { background: var(--control-fill); }
.ap-menu__item[aria-checked="true"] { color: var(--accent-strong); background: var(--accent-soft); }
.ap-menu__item--danger { color: var(--error); }
.ap-menu__sep { height: 1px; background: var(--border); margin: var(--space-2) var(--space-1); }
.ap-menu__meta { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); }

/* Navigationsflächen: Hover nur mit Maus, Antippen zeigt :active */
.ap-navbar__links a, .ap-sidebar__item, .ap-menu__item, .ap-mobile-menu a:not(.ap-btn), .ap-pagination a, .ap-footer a, .ap-link {
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) {
  .ap-navbar__links a:hover, .ap-sidebar__item:hover, .ap-mobile-menu a:not(.ap-btn):hover { background: var(--control-fill); color: var(--text); }
  .ap-menu__item:hover, .ap-pagination a:hover { background: var(--control-fill); }
  .ap-menu__item--danger:hover { background: var(--error-soft); }
}
.ap-navbar__links a:active, .ap-sidebar__item:active, .ap-menu__item:active, .ap-mobile-menu a:not(.ap-btn):active { background: var(--control-fill); }
.ap-navbar__links a[aria-current="page"]:hover { color: var(--accent-strong); background: var(--accent-soft); }
.ap-pagination a[aria-current="page"]:hover { background: var(--inverse); }
.ap-menu__item[aria-disabled="true"], .ap-menu__item[aria-disabled="true"]:hover { color: var(--fg-disabled); background: none; cursor: not-allowed; }

/* ───────────── Tooltip: ohne Schatten, bleibt mit der Maus erreichbar (WCAG 1.4.13) ───────────── */
.ap-tooltip { display: inline-block; max-width: 240px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--inverse); color: var(--on-inverse);
  font: 500 14px/1.3 var(--font-sans); box-shadow: none; z-index: var(--z-tooltip); transition: opacity var(--duration-slow) var(--ease-entrance); }
.ap-tooltip--arrow { position: relative; }
.ap-tooltip--arrow::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: inherit; transform: translate(-50%, -50%) rotate(45deg); }
.ap-tooltip--light { background: var(--card); color: var(--text); }
/* Schwebender Tooltip an Symbolknöpfen mit data-tooltip (Verhalten im Portal: static/app/ui.js): fest über
   der Seite, unter dem Auslöser oder darüber, eingeblendet in duration-slow. */
.ap-tooltip--floating { position: fixed; top: 0; left: 0; z-index: var(--z-tooltip); width: max-content; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
.ap-tooltip--floating[hidden] { display: none; }
.ap-tooltip--floating.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ap-tooltip--floating { transition: none; } }

/* ───────────── Modal / Dialog: auf Navy-Abdunklung, kein Schatten ───────────── */
.ap-overlay { background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-6); box-sizing: border-box;
  animation: ap-fade-in var(--duration-slow) var(--ease-entrance); }
.ap-overlay--fixed { position: fixed; inset: 0; z-index: var(--z-overlay); }
@keyframes ap-fade-in { from { opacity: 0; } }
.ap-modal { width: 100%; max-width: 512px; max-height: calc(100dvh - 2 * var(--space-6)); box-sizing: border-box; background: var(--card); border-radius: var(--radius-xl);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); overflow-x: hidden; font-family: var(--font-sans); }
.ap-modal--sm { max-width: 448px; }
.ap-modal--lg { max-width: 896px; }
.ap-modal__title { margin: 0; font: 700 24px/1.2 var(--font-display); color: var(--text); }
.ap-modal__body { margin: 0; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ap-modal__header .ap-icon-btn { margin: -7px -7px 0 0; } /* Kreuz fluchtet mit der Titelzeile */
/* Lese-Ansicht: Symbol-Knöpfe im Kopf direkt vor dem Schließen-Kreuz */
.ap-modal__tools { display: flex; align-items: center; gap: var(--space-1); flex: none; margin: -7px -7px 0 0; }
.ap-modal__header .ap-modal__tools .ap-icon-btn { margin: 0; }
.ap-modal__tools-sep { width: 1px; height: 20px; margin-inline: var(--space-1); background: var(--border-subtle); }
.ap-modal__footer:empty { display: none; }
.ap-modal__content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--space-4); }
.ap-modal__actions, .ap-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-4); }
.ap-modal__actions { padding-top: var(--space-2); }
.ap-modal--scroll .ap-modal__header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.ap-modal--scroll .ap-modal__footer { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
/* Nichts ragt über Dialog oder Drawer hinaus */
.ap-modal :where(input, select, textarea, .ap-input, .ap-select, .ap-textarea),
.ap-drawer :where(input, select, textarea, .ap-input, .ap-select, .ap-textarea) { min-width: 0; max-width: 100%; }
.ap-modal :where(div, fieldset, label), .ap-drawer :where(div, fieldset, label) { min-width: 0; }

/* ───────────── Drawer (Seitenpanel) ───────────── */
.ap-drawer-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; justify-content: flex-end; background: var(--overlay);
  animation: ap-fade-in var(--duration-slow) var(--ease-entrance); }
.ap-drawer-overlay[hidden] { display: none; }
.ap-drawer-overlay--start { justify-content: flex-start; }
.ap-drawer { display: flex; flex-direction: column; width: 384px; min-width: min(280px, 100%); max-width: 100%; height: 100%; box-sizing: border-box; background: var(--card); border-radius: var(--radius-none);
  font-family: var(--font-sans); color: var(--text-body); animation: ap-drawer-in var(--duration-slow) var(--ease-entrance); }
.ap-drawer--sm { width: 320px; }
.ap-drawer-overlay--start .ap-drawer { animation-name: ap-drawer-in-start; }
.ap-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.ap-drawer__header .ap-icon-btn { margin: -7px -7px 0 0; }
.ap-drawer__title { margin: 0; font: 700 20px/1.2 var(--font-display); color: var(--text); }
.ap-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.ap-drawer__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); }
/* nicht-modal: keine Abdunklung, Liste bleibt bedienbar */
.ap-drawer-overlay--clear { background: transparent; pointer-events: none; animation: none; }
.ap-drawer-overlay--clear .ap-drawer { pointer-events: auto; border-inline-start: 1px solid var(--border); }
/* Bottom-Sheet */
.ap-drawer-overlay--bottom { align-items: flex-end; justify-content: stretch; }
.ap-drawer-overlay--bottom .ap-drawer { width: 100%; height: auto; max-height: 90dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation-name: ap-drawer-in-bottom; }
@keyframes ap-drawer-in { from { transform: translateX(100%); } }
@keyframes ap-drawer-in-start { from { transform: translateX(-100%); } }
@keyframes ap-drawer-in-bottom { from { transform: translateY(100%); } }

/* ───────────── Toast ───────────── */
.ap-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 360px; box-sizing: border-box; padding: var(--space-3-5) var(--space-4); background: var(--card); border: 1px solid var(--border-subtle);
  border-inline-start: 4px solid var(--success); border-radius: var(--radius-md); box-shadow: var(--elevation-3); font: 400 14px/1.5 var(--font-sans); color: var(--text-body); }
.ap-toast strong { display: block; color: var(--text); font-weight: 600; font-size: 15px; }
.ap-toast--info { border-inline-start-color: var(--info); }
.ap-toast--warning { border-inline-start-color: var(--honey); }
.ap-toast--error { border-inline-start-color: var(--error); }
.ap-toast--dark { background: var(--navy); border-color: var(--navy); border-inline-start-color: var(--coral-light); color: var(--on-navy-muted); }
.ap-toast--dark strong { color: var(--on-color); }
/* Im dunklen Design ist navy die Kartenfläche (1 : 1): ein Rand in border-strong (4,8 : 1 auf card) hebt den Toast ab */
[data-theme="dark"] .ap-toast--dark { border-color: var(--border-strong); border-inline-start-color: var(--coral-light); }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .ap-toast--dark { border-color: var(--border-strong); border-inline-start-color: var(--coral-light); }
}
/* Stapel unten rechts, neueste oben, über Dialogen */
.ap-toast-stack { position: fixed; inset-block-end: var(--space-6); inset-inline-end: var(--space-6); z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; gap: var(--space-3); max-width: calc(100vw - 2 * var(--space-6)); }

/* ───────────── Table ───────────── */
/* Rahmen scrollt waagrecht statt abzuschneiden; Randschatten als Hinweis (role="region", aria-label, tabindex="0") */
.ap-table-wrap { position: relative; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow-x: auto; overscroll-behavior-x: contain;
  background: linear-gradient(to right, var(--card) 30%, transparent) left / 40px 100% no-repeat local,
              linear-gradient(to left, var(--card) 30%, transparent) right / 40px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, var(--border-medium), transparent) left / 12px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, var(--border-medium), transparent) right / 12px 100% no-repeat scroll,
              var(--card); }
.ap-table { width: 100%; border-collapse: collapse; background: transparent; font: 400 14px/1.4 var(--font-sans); color: var(--text-body); }
.ap-table th { text-align: start; }
.ap-table thead th { padding: var(--space-3) var(--space-6); background: var(--card-soft); font: 500 14px/1.3 var(--font-sans);
  letter-spacing: 0; text-transform: none; color: var(--text-body); border-bottom: 1px solid var(--divider); white-space: nowrap; }
.ap-table tbody th { padding: var(--space-4) var(--space-6); font: 600 14px/1.4 var(--font-sans); color: var(--text); border-bottom: 1px solid var(--border-subtle); }
.ap-table td { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.ap-table tr:last-child td, .ap-table tbody tr:last-child th { border-bottom: none; }
.ap-table tbody tr:hover > * { background: var(--shell); }
.ap-table td.ap-num, .ap-table th.ap-num { text-align: end; font-variant-numeric: tabular-nums; }
.ap-table__primary { color: var(--text); font-weight: 600; }
.ap-table--compact thead th, .ap-table--compact tbody th, .ap-table--compact td { padding: var(--space-2) var(--space-4); }
.ap-table--narrow thead th, .ap-table--narrow tbody th, .ap-table--narrow td { padding-inline: var(--space-4); }
.ap-table caption { caption-side: top; text-align: start; padding: var(--space-4) var(--space-6); font: 600 20px/1.2 var(--font-sans); color: var(--text); }
.ap-table caption p { margin: var(--space-1) 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.ap-table td a:not([class]) { color: var(--link); font-weight: 500; text-decoration: none; }
.ap-table td a:not([class]):hover { color: var(--link-hover); text-decoration: underline; }
.ap-table svg { max-width: 16px; max-height: 16px; }
/* Sortieren: <th aria-sort><button class="ap-table__sort"> */
.ap-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-xs); }
.ap-table__sort svg { width: 16px; height: 16px; }
.ap-table thead th[aria-sort="ascending"], .ap-table thead th[aria-sort="descending"] { color: var(--text); }
.ap-table thead th[aria-sort="descending"] .ap-table__sort svg { transform: rotate(180deg); }
/* Auswahl */
.ap-table .ap-table__select { width: 1%; padding-inline-end: 0; }
.ap-table__select .ap-check { vertical-align: middle; }
.ap-table tbody tr.ap-table__row--selected > * { background: var(--accent-soft); }
/* Werkzeugleiste, Massenaktionen, Fußzeile */
.ap-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.ap-table-toolbar .ap-input, .ap-table-toolbar .ap-input-wrap { width: 320px; max-width: 100%; min-width: 0; }
.ap-table-toolbar--bulk { background: var(--accent-soft); color: var(--text); font: 600 14px/1.4 var(--font-sans); }
.ap-table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border-subtle); font: 400 14px/1.4 var(--font-sans); color: var(--text-body); }
.ap-table-footer strong { color: var(--text); font-weight: 600; }
/* Weitere anzeigen unter Listen ohne Tabelle (LoadMore): dieselbe Zeile wie ap-table-footer, ohne seitlichen Innenabstand */
.ap-list-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle); font: 400 14px/1.4 var(--font-sans); color: var(--text-body); }
.ap-list-more strong { color: var(--text); font-weight: 600; }
.ap-table__empty td { padding: var(--space-12) var(--space-6); text-align: center; color: var(--text-muted); }

/* ───────────── Accordion / FAQ ───────────── */
.ap-accordion { border-top: 1px solid var(--divider); font-family: var(--font-sans); }
.ap-accordion details { border-bottom: 1px solid var(--divider); }
.ap-accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-1); cursor: pointer;
  font: 600 18px/1.3 var(--font-sans); color: var(--text); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-standard); }
.ap-accordion summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .ap-accordion summary:hover { color: var(--accent); } }
/* Chevron 20 px coral-deep, dreht beim Öffnen. Farbe aus Token, SVG nur als Form */
.ap-accordion summary::after { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform var(--duration-base) var(--ease-standard); }
.ap-accordion details[open] summary::after { transform: rotate(180deg); }
.ap-accordion details > div { padding-block: 0 var(--space-5); padding-inline: var(--space-1) 36px; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-accordion details::details-content { height: 0; overflow: clip; interpolate-size: allow-keywords;
  transition: content-visibility var(--duration-base) allow-discrete, height var(--duration-base) var(--ease-standard); }
.ap-accordion details[open]::details-content { height: auto; }

/* Empty state */
.ap-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-10) var(--space-6); border: 1px dashed var(--border-medium); border-radius: var(--radius-xl); background: var(--card-soft); font-family: var(--font-sans); }
.ap-empty__title { margin: 0; font: 600 18px/1.3 var(--font-sans); color: var(--text); }
.ap-empty__text { margin: 0; max-width: 360px; font: 400 16px/1.5 var(--font-sans); color: var(--text-muted); }

/* ───────────── Muster (Sektionen) ───────────── */
.ap-section { padding: var(--space-28) var(--gutter); font-family: var(--font-sans); }
.ap-section__head { max-width: var(--section-header-max); margin: 0 auto var(--space-16); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); }
.ap-section__head > :is(h1, h2, h3, .ap-h1, .ap-h2, .ap-h3) { margin-bottom: var(--space-3); } /* Überschrift → Absatz 24 px */
.ap-lead { margin: 0; font: 400 20px/1.5 var(--font-sans); color: var(--text-body); }

.ap-hero { position: relative; overflow: hidden; background: var(--shell); padding: 88px max(var(--gutter), calc((100% - var(--container)) / 2)); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; font-family: var(--font-sans); }
.ap-hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.ap-hero__title { margin: 0; font: 800 64px/1 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.ap-hero__title em { font-style: normal; color: var(--accent); }
.ap-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ap-hero__media { aspect-ratio: 4/5; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--peach), var(--coral)); position: relative; overflow: hidden; }
/* Hero-Muster: genau ein Dekor pro Hero, statisch, nach unten ausgeblendet, aria-hidden */
.ap-hero__pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--hero-pattern);
  -webkit-mask-image: linear-gradient(180deg, var(--navy) 55%, transparent 100%); mask-image: linear-gradient(180deg, var(--navy) 55%, transparent 100%); }
.ap-hero__pattern svg { width: 100%; height: 100%; }
.ap-hero > :not(.ap-hero__pattern) { position: relative; z-index: 1; }

.ap-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ap-feature { display: flex; flex-direction: column; gap: var(--space-3); }

.ap-testimonial-grid, .ap-price-grid { display: grid; gap: var(--space-6); align-items: start; }
.ap-testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ap-testimonial { margin: 0; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); font-family: var(--font-sans); }
.ap-testimonial blockquote { margin: 0; font: 600 20px/1.5 var(--font-display); color: var(--text); }
.ap-stars { color: var(--honey); letter-spacing: 2px; font-size: 16px; }
/* Sterne als SVG, anteilig gefüllt (4,8 von 5): graue Sterne, darüber Honey bis zum Wert */
.ap-stars--svg { display: inline-block; width: 5.5em; height: 1.1em; vertical-align: -.15em; flex: none; }
.ap-stars__empty { fill: var(--border-strong); }
.ap-stars__fill { fill: var(--honey); }

.ap-price { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-7); display: flex; flex-direction: column; gap: 18px; font-family: var(--font-sans); }
.ap-price--featured { background: var(--navy); border-color: var(--navy); color: var(--on-navy-muted); box-shadow: var(--elevation-brand); }
.ap-price__amount { font: 800 44px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-price--featured .ap-price__amount, .ap-price--featured .ap-card__title { color: var(--on-color); }
.ap-price ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5); font-size: 16px; }
.ap-price li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; }
/* Haken als Icon-Form (wird nicht vorgelesen), Farbe aus Token */
.ap-price li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: currentColor; color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ap-price--featured li::before { color: var(--coral-light); }

/* CTA-Band: Coral Deep, damit weiße Schrift jeder Größe 5,2 : 1 erreicht */
.ap-cta { background: var(--coral-deep); color: var(--on-color); border-radius: var(--radius-xl); padding: var(--space-12) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); font-family: var(--font-sans); }
.ap-cta__title { margin: 0; font: 800 36px/1.2 var(--font-display); color: var(--on-color); }
.ap-cta__text { margin: 0; font: 400 18px/1.5 var(--font-sans); color: var(--on-color); }
.ap-cta .ap-btn { color: var(--coral-700); border-color: var(--card); }

.ap-footer { background: var(--navy); color: var(--on-navy-muted); padding: var(--space-24) max(var(--gutter), calc((100% - var(--container)) / 2)) var(--space-12); font: 400 16px/1.5 var(--font-sans); }
.ap-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-10); }
.ap-footer h4 { margin: 0 0 var(--space-3); font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-light); }
.ap-footer a { color: var(--on-navy-muted); text-decoration: none; display: block; padding: 3px 0; }
.ap-footer a:hover { color: var(--on-color); }
.ap-footer__bottom { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--divider-on-dark); display: flex; justify-content: space-between; font-size: 14px; }

.ap-auth { width: 420px; max-width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; gap: 18px; font-family: var(--font-sans); }
.ap-auth__divider { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--text-muted); }
.ap-auth__divider::before, .ap-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* ───────────── Textlinks (nur Fließtext): Absätze und Bereiche mit .ap-prose. Navigation, Menüs und Footer-Spalten bleiben ohne Unterstreichung. ───────────── */
.ap-link, .ap-root p a:not([class]), .ap-prose a:not([class]), .ap-help a:not([class]) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ap-link:hover, .ap-root p a:not([class]):hover, .ap-prose a:not([class]):hover, .ap-help a:not([class]):hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.ap-link { border-radius: var(--radius-xs); }
.ap-link--on-dark, .ap-footer p a:not([class]) { color: var(--link-on-dark); }
.ap-link--on-dark:hover { color: var(--on-color); }

/* Skip-Link: erstes Element im <body>, unsichtbar bis zum Tastatur-Fokus */
.ap-skip-link { position: absolute; inset-inline-start: var(--space-4); top: var(--space-4); z-index: var(--z-skip); transform: translateY(-200%);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--inverse); color: var(--on-inverse);
  font: 600 15px/1 var(--font-sans); text-decoration: none; box-shadow: var(--elevation-3); }
.ap-skip-link:focus, .ap-skip-link:focus-visible { transform: none; }

/* Menü-Knopf in der Navbar, nur mobil sichtbar */
.ap-navbar__toggle { display: none; }

/* Mobil-Menü: Panel unter der Navbar */
.ap-mobile-menu { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--card);
  border-bottom: 1px solid var(--border-subtle); box-shadow: var(--elevation-3); font-family: var(--font-sans); }
.ap-mobile-menu[hidden] { display: none; }
/* Nur die Menüzeilen; Buttons (Anfrage, Sprache) behalten ihr Aussehen, der Primär-Button seine weiße Schrift */
.ap-mobile-menu a:not(.ap-btn) { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font: 500 16px/1.2 var(--font-sans); color: var(--text); text-decoration: none; }
.ap-mobile-menu a[aria-current="page"], .ap-mobile-menu a[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.ap-mobile-menu__actions { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.ap-mobile-menu__actions .ap-btn { width: 100%; }

/* ───────────── Fokus (v5): Coral Deep mit weißem Abstand und Lichthof, kurz animiert ───────────── */
/* Gilt in .ap-root für alle Bedienelemente und überall für ap-Komponenten (z. B. an <body> gehängte Menüs und Dialoge).
   Der transparente outline wird im Windows-Kontrastmodus sichtbar. Ziele mit tabindex="-1" (Skip-Link-Ziel <main>) bekommen keinen Ring. */
@keyframes ap-focus-in { from { box-shadow: 0 0 0 2px var(--card), 0 0 0 2px var(--accent), 0 0 0 2px transparent; } }
.ap-root :where(a, button, summary, [tabindex]:not([tabindex="-1"]), [role="switch"]):focus-visible,
.ap-btn:focus-visible, .ap-icon-btn:focus-visible, .ap-check input:focus-visible, .ap-link:focus-visible, .ap-skip-link:focus-visible,
.ap-tab:focus-visible, .ap-segmented button:focus-visible, .ap-segmented a:focus-visible, .ap-pagination a:focus-visible, .ap-menu__item:focus-visible,
.ap-accordion summary:focus-visible, .ap-table__sort:focus-visible, .ap-navbar__links a:focus-visible, .ap-sidebar__item:focus-visible, .ap-sidebar__toggle:focus-visible,
.ap-mobile-menu a:focus-visible, .ap-breadcrumb a:focus-visible, .ap-breadcrumb__toggle:focus-visible, .ap-footer a:focus-visible,
.ap-badge__remove:focus-visible, .ap-alert__close:focus-visible, .ap-input-wrap__action:focus-visible, .ap-table-wrap:focus-visible,
.ap-tabs--underline .ap-tab:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); animation: ap-focus-in var(--duration-focus) var(--ease-entrance); }
.ap-root [tabindex="-1"]:not(a, button, input, select, textarea, summary):focus, main[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* Schalter: Ring auf der Spur */
.ap-toggle:focus-visible, .ap-root .ap-toggle:focus-visible { outline: 2px solid transparent; box-shadow: none; animation: none; }
.ap-toggle:focus-visible .ap-toggle__track { box-shadow: var(--focus-ring); animation: ap-focus-in var(--duration-focus) var(--ease-entrance); }
/* Klickbare Karte: Ring auf der Karte */
.ap-card--link .ap-card__link:focus-visible, .ap-root .ap-card--link .ap-card__link:focus-visible { outline: none; box-shadow: none; animation: none; }
.ap-card--link:has(.ap-card__link:focus-visible) { box-shadow: var(--focus-ring); animation: ap-focus-in var(--duration-focus) var(--ease-entrance); }
/* Slots und Dropzone: versteckter Input, Ring auf der sichtbaren Fläche */
.ap-slot:has(input:focus-visible), .ap-dropzone__input:focus-visible + .ap-dropzone { box-shadow: var(--focus-ring); animation: ap-focus-in var(--duration-focus) var(--ease-entrance); }
.ap-dropzone__input:focus-visible + .ap-dropzone { border-color: var(--accent); }

/* ───────────── Mobil (< 960 px) ───────────── */
@media (max-width: 959px) {
  /* Typografie */
  .ap-display, .ap-hero__title { font-size: 40px; line-height: 1.2; }
  .ap-h1 { font-size: 32px; }
  .ap-h2 { font-size: 26px; }
  .ap-h3, .ap-modal__title { font-size: 20px; }
  .ap-lead { font-size: 18px; }
  .ap-cta__title { font-size: 26px; }
  .ap-price__amount { font-size: 36px; }
  /* Navigation */
  .ap-navbar { height: 64px; padding: 0 var(--gutter-mobile); gap: var(--space-3); }
  html:has(.ap-navbar--sticky) { scroll-padding-top: calc(64px + var(--space-4)); }
  .ap-navbar__links { display: none; }
  .ap-navbar__actions .ap-btn, .ap-navbar__actions .ap-theme-toggle { display: none; } /* ThemeToggle mobil im Menü als Schalter */
  .ap-navbar__toggle { display: inline-flex; margin-inline-start: auto; }
  .ap-sidebar { display: none; } /* Plattform-Navigation mobil über ap-navbar__toggle + ap-mobile-menu */
  .ap-tabs { overflow-x: auto; scrollbar-width: none; }
  .ap-pagination { justify-content: space-between; }
  .ap-pagination > a:not(.ap-pagination__edge), .ap-pagination > span:not(.ap-pagination__status):not(.ap-pagination__edge) { display: none; }
  .ap-pagination .ap-pagination__status { display: inline-flex; }
  /* Touch-Ziele mindestens 44 px, Menüzeilen 48 px */
  .ap-btn { min-height: var(--space-11); }
  .ap-btn--lg { font-size: 15px; padding: 12.5px 25px; } /* L wird mobil zu M */
  .ap-icon-btn--sm { width: var(--space-11); height: var(--space-11); }
  .ap-segmented button, .ap-tab, .ap-slot { min-height: var(--space-11); }
  .ap-pagination a, .ap-pagination span { min-width: var(--space-11); height: var(--space-11); }
  .ap-menu__item { min-height: 48px; }
  .ap-footer a { padding-block: var(--space-2-5); }
  /* Formulare: 16 px gegen iOS-Zoom, Felder so hoch wie Buttons */
  .ap-input, .ap-select, .ap-textarea { font-size: 16px; }
  .ap-input, .ap-select { min-height: var(--space-11); }
  .ap-input-group .ap-input, .ap-input-group .ap-select { min-height: 42px; }
  .ap-form__row { grid-template-columns: 1fr; }
  .ap-range-fields { grid-template-columns: 1fr; }
  .ap-range-fields__sep { display: none; }
  /* Abstände und Raster */
  .ap-container { padding-inline: var(--gutter-mobile); }
  .ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .ap-section { padding: var(--space-16) var(--gutter-mobile); }
  .ap-section__head { margin-bottom: var(--space-12); }
  .ap-hero { grid-template-columns: 1fr; padding: var(--space-12) var(--gutter-mobile); gap: var(--space-8); }
  .ap-hero__media { aspect-ratio: 16/10; }
  .ap-feature-grid, .ap-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-footer__grid > :first-child { grid-column: 1 / -1; }
  .ap-footer { padding: var(--space-16) var(--gutter-mobile) var(--space-8); }
  .ap-footer__bottom { flex-direction: column; gap: var(--space-2); }
  .ap-cta { flex-direction: column; align-items: flex-start; padding: var(--space-8) var(--space-6); }
  .ap-auth { padding: var(--space-6); }
  .ap-toast { width: 100%; }
  .ap-toast-stack { inset-inline: var(--gutter-mobile); inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); max-width: none; }
  /* Dialog als Bottom-Sheet */
  .ap-overlay { align-items: flex-end; padding: 0; }
  .ap-modal, .ap-modal--sm, .ap-modal--lg { max-width: none; max-height: 90dvh; padding: var(--space-6) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .ap-modal__footer, .ap-modal__actions { flex-direction: column-reverse; gap: var(--space-3); }
  .ap-modal__footer .ap-btn, .ap-modal__actions .ap-btn { width: 100%; }
  /* Drawer volle Breite */
  .ap-drawer, .ap-drawer--sm { width: 100%; }
  .ap-drawer__header { padding: var(--space-4); }
  .ap-drawer__body { padding: var(--space-4); }
  .ap-drawer__footer { padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .ap-drawer__footer .ap-btn { flex: 1; }
  /* Tabelle: scrollen; optional als Karten (ap-table--stack, data-label an jeder Zelle) */
  .ap-table thead th, .ap-table tbody th, .ap-table td { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ap-table caption, .ap-table-toolbar, .ap-table-footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ap-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ap-table--stack, .ap-table--stack tbody, .ap-table--stack tr, .ap-table--stack td, .ap-table--stack tbody th { display: block; }
  .ap-table--stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
  .ap-table--stack tbody tr:last-child { border-bottom: 0; }
  .ap-table--stack td, .ap-table--stack tbody th { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-4); border: 0; text-align: end; }
  .ap-table--stack td::before { content: attr(data-label); color: var(--text-muted); font-weight: 500; text-align: start; }
  .ap-table--stack td.ap-table__select { width: auto; }
}

/* Zwischen 960 und 1099 px: Navbar verdichten statt überlaufen */
@media (min-width: 960px) and (max-width: 1099px) {
  .ap-navbar { padding-inline: var(--space-4); gap: var(--space-4); }
  .ap-navbar__links a { padding-inline: var(--space-2-5); }
}

@media (max-width: 479px) {
  /* Schmale Handys: Raster einspaltig, Stepper kompakter */
  .ap-feature-grid, .ap-price-grid, .ap-testimonial-grid, .ap-footer__grid { grid-template-columns: 1fr; }
  .ap-step { font-size: 12px; gap: var(--space-1-5); }
  .ap-step__dot { width: 28px; height: 28px; font-size: 13px; }
  .ap-step::before { top: 13px; inset-inline-start: calc(-50% + 18px); inset-inline-end: calc(50% + 18px); }
}

@media (min-width: 960px) {
  /* Mobil-Menü auf breiten Fenstern immer ausblenden, auch wenn es vorher geöffnet war */
  .ap-mobile-menu, .ap-mobile-menu:not([hidden]) { display: none; }
}

/* ───────────── Bewegung reduzieren: alle Dauern 0, ein echter Lade-Spinner dreht langsamer ───────────── */
@media (prefers-reduced-motion: reduce) {
  html:root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-focus: 0ms; }
  .ap-btn__spinner { animation-duration: 1.6s; }
  .ap-accordion details::details-content { transition: none; }
}

/* ───────────── Windows-Kontrastmodus: Zustände nie nur über Hintergrund oder Schatten ───────────── */
@media (forced-colors: active) {
  .ap-root :focus-visible, [class*="ap-"]:focus-visible, .ap-input:focus, .ap-select:focus, .ap-textarea:focus { outline-color: Highlight; }
  .ap-input-group:focus-within, .ap-toggle:focus-visible .ap-toggle__track, .ap-slot:has(input:focus-visible),
  .ap-dropzone__input:focus-visible + .ap-dropzone, .ap-card--link:has(.ap-card__link:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
  .ap-tab[aria-selected="true"], .ap-segmented button[aria-pressed="true"], .ap-pagination a[aria-current="page"],
  .ap-navbar__links a[aria-current="page"], .ap-sidebar__item[aria-current="page"], .ap-mobile-menu a[aria-current="page"],
  .ap-menu__item[aria-checked="true"], .ap-icon-btn[aria-pressed="true"], .ap-table__row--selected { outline: 2px solid CanvasText; outline-offset: -2px; }
  .ap-check input:checked, .ap-check input:indeterminate { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .ap-check input[type="checkbox"]:checked::after { border-color: HighlightText; }
  .ap-check input[type="radio"]:checked::after, .ap-check input:indeterminate::after { background: HighlightText; }
  .ap-toggle__track { border: 1px solid CanvasText; }
  .ap-toggle__track::after { forced-color-adjust: none; background: CanvasText; }
  .ap-toggle[aria-checked="true"] .ap-toggle__track { forced-color-adjust: none; background: Highlight; }
  .ap-toggle[aria-checked="true"] .ap-toggle__track::after { background: HighlightText; }
  .ap-slot:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .ap-progress { border: 1px solid CanvasText; }
  .ap-progress > span { forced-color-adjust: none; background: Highlight; }
  .ap-step--current .ap-step__dot, .ap-step[aria-current="step"] .ap-step__dot, .ap-step--done .ap-step__dot { border-color: Highlight; }
  .ap-accordion summary::after, .ap-price li::before { forced-color-adjust: none; background: CanvasText; }
}

/* ───────────── v6: Aufklappen mit Höhe (Collapse), Split-Button, Einmal-Code, Druck ───────────── */

/* Aufklappen: Inhalt wächst weich in der Höhe und schiebt den Rest nach unten (wie ein Akkordeon).
   Markup: <div class="ap-collapse" id="x"><div class="ap-collapse__inner">…</div></div>; Auslöser setzt .is-open und aria-expanded. */
.ap-collapse { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow); }
.ap-collapse.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-slow) var(--ease-standard), visibility 0s linear 0s; }
.ap-collapse__inner { min-height: 0; overflow: hidden; }
.ap-collapse > .ap-collapse__inner > * { opacity: 0; transition: opacity var(--duration-base) var(--ease-standard); }
.ap-collapse.is-open > .ap-collapse__inner > * { opacity: 1; }
/* Mobil-Menü im Collapse: Rahmen und Schatten sitzen innen */
.ap-collapse .ap-mobile-menu { box-shadow: none; }
/* Das Mobil-Menü schwebt über der Seite (Entscheidung 2. November 2026): direkt unter der Navbar, wächst weich in der
   Höhe, schiebt nichts. Darunter dunkelt overlay die Seite ab; ein Klick dorthin schließt das Menü (ui.js).
   Navbar und Menü stehen gemeinsam im Rahmen ap-navbar-frame, an dessen Unterkante das Menü hängt (auch in
   Flex-Layouts); bei fixer Navbar trägt der Rahmen zusätzlich ap-navbar--sticky. */
.ap-navbar-frame { position: relative; z-index: var(--z-sticky); }
.ap-navbar-frame.ap-navbar--sticky { position: sticky; top: 0; } /* fixe Navbar: der Rahmen haftet oben (sonst gewinnt position: relative) */
.ap-collapse.ap-collapse--menu { position: absolute; inset-inline: 0; top: 100%; z-index: var(--z-dropdown);
  border-bottom: 1px solid var(--border-subtle); box-shadow: var(--elevation-3); background: var(--card); }
.ap-collapse.ap-collapse--menu:not(.is-open) { box-shadow: none; border-bottom-color: transparent; }
.ap-collapse.ap-collapse--menu > .ap-collapse__inner,
.ap-collapse.ap-collapse--menu.is-settled > .ap-collapse__inner { max-height: calc(100dvh - 64px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
/* Geschlossen hat die Abdunklung keine Höhe, sonst verlängert sie kurze Seiten unter den Footer; die Höhe
   fällt erst nach dem Ausblenden weg. */
.ap-collapse--menu::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 0; background: var(--overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard), height 0s linear var(--duration-slow); }
.ap-collapse--menu.is-open::after { height: 100dvh; opacity: 1; pointer-events: auto; cursor: pointer;
  transition: opacity var(--duration-slow) var(--ease-standard), height 0s; }
@media (min-width: 960px) { .ap-collapse--menu { display: none; } }
/* Akkordeon mit Button statt details: animiert in allen Browsern */
.ap-accordion__item { border-bottom: 1px solid var(--divider); }
.ap-accordion__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 20px 4px;
  border: 0; background: none; cursor: pointer; text-align: start; font: 600 18px/1.35 var(--font-sans); color: var(--text); }
.ap-accordion__trigger::after { content: ""; flex: none; width: 8px; height: 8px; margin-inline-end: 6px; border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--duration-slow) var(--ease-standard); }
.ap-accordion__trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ap-accordion__panel { padding: 0 52px 20px 4px; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }

/* Split-Button: Hauptaktion + Pfeil für weitere Aktionen (öffnet ap-menu) */
.ap-split { display: inline-flex; align-items: stretch; border-radius: var(--radius-full); box-shadow: var(--elevation-1); }
.ap-split > .ap-btn { box-shadow: none; }
.ap-split > .ap-btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: var(--space-4); }
.ap-split > .ap-split__toggle { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: 12px 14px; margin-inline-start: -1px; }
.ap-split > .ap-btn--primary.ap-split__toggle { border-inline-start-color: var(--coral-700); }
.ap-split > .ap-btn:focus-visible { position: relative; z-index: 1; }
.ap-split__toggle svg { transition: transform var(--duration-base) var(--ease-standard); }
.ap-split__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Einmal-Code (Zwei-Faktor, E-Mail-Bestätigung) */
.ap-otp { display: inline-flex; gap: var(--space-2); }
.ap-otp__digit { box-sizing: border-box; width: 48px; height: 56px; padding: 0; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--card); color: var(--text); font: 600 22px/1 var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: var(--elevation-1);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ap-otp__digit:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-field); }
.ap-otp__digit[aria-invalid="true"] { border-color: var(--error); }
.ap-otp__sep { align-self: center; width: 10px; height: 2px; background: var(--border-medium); border-radius: var(--radius-full); }
/* Alternative: ein einziges Feld, bevorzugt für Screenreader und Passwortmanager */
.ap-input--code { max-width: 220px; text-align: center; font: 600 22px/1 var(--font-sans); letter-spacing: .4em; font-variant-numeric: tabular-nums; min-height: 56px; }
@media (max-width: 479px) { .ap-otp { gap: 6px; } .ap-otp__digit { width: 42px; height: 52px; } }

/* Druck: Verträge, Profile, Rechnungen, Checklisten */
.ap-print-only { display: none; }
@media print {
  @page { margin: 18mm 16mm; }
  .ap-root, body { background: var(--card); color: var(--text); }
  .ap-skip-link, .ap-navbar, .ap-sidebar, .ap-mobile-menu, .ap-collapse--menu, .ap-toast, .ap-toast-stack, .ap-overlay, .ap-drawer-overlay,
  .ap-pagination, .ap-tooltip, .ap-btn, .ap-icon-btn, .ap-split, .ap-no-print { display: none !important; }
  .ap-print-only { display: block; }
  *, *::before, *::after { box-shadow: none !important; animation: none !important; transition: none !important; }
  .ap-card, .ap-alert, .ap-table tr, .ap-testimonial, .ap-price, figure { break-inside: avoid; }
  h1, h2, h3, .ap-h1, .ap-h2, .ap-h3 { break-after: avoid; }
  .ap-table-wrap { overflow: visible; border-color: var(--border-medium); }
  .ap-table thead { display: table-header-group; }
  .ap-collapse, .ap-accordion details::details-content { visibility: visible; grid-template-rows: 1fr; height: auto; }
  .ap-collapse > .ap-collapse__inner > * { opacity: 1; }
  .ap-root p a[href^="http"]:not([class])::after, .ap-prose a[href^="http"]:not([class])::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--text-muted); word-break: break-all; }
  .ap-hero, .ap-cta { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border-medium); }
  .ap-cta__title, .ap-cta__text { color: var(--text) !important; }
}

/* ───────────── Feld-Fokus als Glow: Lichthof blendet beim Anwählen weich auf und beim Verlassen wieder aus, ohne Überschwingen ───────────── */
.ap-input, .ap-select, .ap-textarea, .ap-input-group, .ap-otp__digit {
  box-shadow: var(--elevation-1), 0 0 0 0 transparent, 0 0 0 0 transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-entrance); }
.ap-input:focus, .ap-select:focus, .ap-textarea:focus, .ap-input-group:focus-within, .ap-otp__digit:focus {
  box-shadow: var(--elevation-1), var(--focus-field), 0 0 14px 2px var(--focus-halo); }
.ap-input[aria-invalid="true"], .ap-select[aria-invalid="true"], .ap-textarea[aria-invalid="true"], .ap-otp__digit[aria-invalid="true"] {
  box-shadow: var(--elevation-1), var(--focus-field-error), 0 0 0 0 transparent; }
.ap-input[aria-invalid="true"]:focus, .ap-select[aria-invalid="true"]:focus, .ap-textarea[aria-invalid="true"]:focus, .ap-otp__digit[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--error), 0 0 0 5px var(--focus-halo), 0 0 14px 2px var(--focus-halo); }
.ap-input-group .ap-input, .ap-input-group .ap-select, .ap-input-group .ap-input:focus, .ap-input-group .ap-select:focus { box-shadow: none; animation: none; }
.ap-input[readonly], .ap-textarea[readonly], .ap-input:disabled, .ap-select:disabled, .ap-textarea:disabled { box-shadow: none; animation: none; }

/* ───────────── v9: Bausteine aus dem Portal (Stand 1. November 2026) ───────────── */

/* Versteckte Auslöser, Menüs und Icons: [hidden] schlägt die display-Regel der Komponente (z. B. Knopf erst sichtbar, wenn das Skript läuft) */
.ap-btn[hidden], .ap-icon-btn[hidden], .ap-menu[hidden], .ap-navbar__toggle svg[hidden] { display: none; }
/* Auswahlmenü: Platzhalter in der Breite des Hakens, damit alle Einträge fluchten */
.ap-menu__spacer { width: 16px; flex: none; }
/* Aufklappen: nach der Animation (Skript setzt .is-settled) darf der Fokus-Lichthof über den Rand ragen */
.ap-collapse.is-settled > .ap-collapse__inner { overflow: visible; }

/* Mehrfachauswahl im Filter: geschlossen wie ap-select, geöffnet ein schwebendes ap-menu mit einer Checkbox je Wert */
.ap-multiselect { position: relative; }
.ap-multiselect__summary { display: flex; align-items: center; list-style: none; cursor: pointer; user-select: none; }
.ap-multiselect__summary::-webkit-details-marker { display: none; }
.ap-multiselect__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-multiselect__menu { position: absolute; top: calc(100% + var(--space-1)); inset-inline-start: 0; z-index: var(--z-dropdown); min-width: 100%;
  max-height: min(60vh, 420px); overflow-y: auto; animation: ap-menu-in var(--duration-fast) var(--ease-entrance); }
.ap-multiselect__option { cursor: pointer; }
.ap-multiselect__option:has(input:checked) { color: var(--accent-strong); background: var(--accent-soft); }

/* Abhängiges Feld: der Abstand nach oben liegt innen, ein geschlossenes Feld hinterlässt keine Lücke */
.ap-conditional { padding-top: var(--space-4); }

/* Fragebogen-Seiten: schmale Spalte, Karten mit Fragen, Antworten in Zeile, Raster oder Scroll-Liste */
.ap-form-page { width: 100%; max-width: 46rem; margin: 0 auto; }
.ap-form-card { gap: var(--space-6); }
.ap-form-card p { margin: 0; }
.ap-question { display: flex; flex-direction: column; gap: var(--space-2); }
fieldset.ap-question { border: 0; margin: 0; padding: 0; min-width: 0; }
.ap-question > legend { padding: 0; margin-bottom: var(--space-2); }
/* Matrix: jede Zeile mit Trennlinie darüber, Zeilentitel fett (Stand des Portals) */
.ap-matrix-row { border: 0; border-top: 1px solid var(--divider); margin: 0; padding: var(--space-3) 0; min-width: 0; }
.ap-matrix-row > legend { padding: 0 0 var(--space-2); font-weight: 600; color: var(--text); }
.ap-required-mark { color: var(--accent); }
.ap-choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.ap-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-2) var(--space-4); }
.ap-choice-scroll { display: flex; flex-direction: column; gap: var(--space-2); max-height: 16rem; overflow-y: auto; padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.ap-choice-scroll [hidden] { display: none; }
.ap-repeat-item { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ap-repeat-item__title { margin: 0; font: 600 15px/1.4 var(--font-sans); color: var(--text); }

/* Toast: Schließen-Knopf und weiches Ausblenden (.is-leaving, danach entfernen) */
.ap-toast { transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.ap-toast > svg { flex: none; }
.ap-toast__text { flex: 1 1 auto; min-width: 0; }
.ap-toast__close { flex: none; margin-block: calc(-1 * var(--space-2)); margin-inline: 0 calc(-1 * var(--space-2)); }
.ap-toast.is-leaving { opacity: 0; transform: translateY(var(--space-2)); }

/* Schwebender Knopf (Feedback): klein, unten rechts, hält den sicheren Bereich frei; Toasts weichen nach oben aus */
.ap-fab { position: fixed; right: max(var(--space-6), env(safe-area-inset-right, 0px)); bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky); gap: var(--space-2); box-shadow: var(--elevation-2); }
body:has(.ap-fab) .ap-toast-stack { inset-block-end: calc(var(--space-6) + var(--space-14)); }

/* Dokument-Voransicht im Modal (L): volle Höhe, PDF im Betrachter des Browsers, Bild auf Breite, Prüfformular darunter */
.ap-modal--viewer { height: calc(100dvh - 2 * var(--space-6)); }
.ap-doc-viewer-stack { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.ap-doc-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ap-doc-viewer--image { flex: none; } /* das Bild behält seine Höhe, der Inhalt des Dialogs scrollt */
.ap-doc-viewer__frame { flex: 1; width: 100%; min-height: 60vh; border: 0; border-radius: var(--radius-md); background: var(--control-fill); }
.ap-doc-viewer__image { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); }
.ap-doc-verify { flex: none; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.ap-doc-verify .ap-overline { margin: 0; }

/* Dokumentzeile: Vorschaubild | Titel mit Datum und Quelle, Status darunter | Download | Prüfen.
   Die Liste legt die Spalten fest, jede Zeile übernimmt sie (subgrid): Knöpfe und Badges fluchten von Zeile zu Zeile. */
.ap-doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; column-gap: var(--space-4); }
.ap-doc-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: var(--space-1);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--divider); }
.ap-doc-item:last-child { border-bottom: 0; }
.ap-doc-item__thumb { display: flex; grid-column: 1; grid-row: 1 / 3; }
.ap-doc-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; grid-column: 2; grid-row: 1; align-self: end; }
.ap-doc-item__status { display: flex; grid-column: 2; grid-row: 2; align-self: start; }
.ap-doc-item__title { font-weight: 600; color: var(--text); overflow-wrap: break-word; hyphens: auto; }
.ap-doc-item__meta { color: var(--text-muted); font: 500 14px/1.5 var(--font-sans); }
.ap-doc-item__download, .ap-doc-item__verify { display: flex; justify-content: flex-end; grid-row: 1 / 3; }
.ap-doc-item__download { grid-column: 3; }
.ap-doc-item__verify { grid-column: 4; }
.ap-doc-thumb { display: block; width: 64px; height: 64px; box-sizing: border-box; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.ap-doc-thumb--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--control-fill); color: var(--text-muted); }
.ap-doc-thumb--empty svg { width: 24px; height: 24px; }
.ap-doc-thumb-link { display: inline-flex; flex: none; border-radius: var(--radius-sm); }
.ap-doc-open { color: var(--text); font-weight: 600; text-decoration: none; border-radius: var(--radius-xs); }
.ap-doc-open:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
/* Noch nicht erzeugt (ap-doc-item--pending): Dokument, das das System erst erzeugt. Ausgegraut, aber lesbar: Titel in
   text-muted (Kontrast wie Meta-Text), Platzhalter gestrichelt; der Status-Badge sagt es in Worten, „Erzeugen“ steht
   an der Stelle von „Prüfen“. Mehrere Knöpfe in der Download-Spalte (Löschen, Download) mit kleinem Abstand. */
.ap-doc-item--pending .ap-doc-item__title { color: var(--text-muted); font-weight: 500; }
.ap-doc-item--pending .ap-doc-thumb--empty { border-style: dashed; border-color: var(--border); background: transparent; }
.ap-doc-item__download { gap: var(--space-1); }
.ap-doc-item__download form, .ap-doc-item__verify form { display: contents; }
/* Ablage unter der Zeile (ap-doc-item__upload): Upload-Seiten von Familie und Au pair. Die Ablagefläche des einen
   Dokuments liegt über die volle Breite unter seiner Zeile und öffnet mit „Hochladen“ in der Aktionsspalte
   (aria-expanded, ap-collapse); ohne JavaScript ist sie offen. */
.ap-doc-item__upload { grid-column: 1 / -1; grid-row: 3; }
.ap-doc-item__upload form { padding-top: var(--space-3); }
@media (max-width: 599px) {
  .ap-doc-list { grid-template-columns: 48px minmax(0, 1fr) auto auto; column-gap: var(--space-3); }
  .ap-doc-item { row-gap: var(--space-2); padding: var(--space-3) 0; }
  .ap-doc-item__thumb { align-self: start; }
  .ap-doc-item .ap-doc-thumb { width: 48px; height: 48px; }
  .ap-doc-item__body { grid-column: 2 / -1; }
  .ap-doc-item__status, .ap-doc-item__download, .ap-doc-item__verify { grid-row: 2; align-self: center; }
}

/* Textvergleich: eingefügt unterstrichen auf success-soft, entfernt durchgestrichen auf error-soft; Text bleibt Navy (14 : 1), Farbe ist nie das einzige Signal */
.ap-diff { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-diff__legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; font: 500 14px/1.5 var(--font-sans); }
.ap-diff__ins, .ap-diff__del { color: var(--text); border-radius: var(--radius-xs); padding: 0 var(--space-0-5); }
.ap-diff__ins { background: var(--success-soft); text-decoration: underline; text-decoration-color: var(--success); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ap-diff__del { background: var(--error-soft); text-decoration: line-through; text-decoration-color: var(--error); text-decoration-thickness: 2px; }

/* Kennzahl-Kacheln: Beschriftung, große Zahl (numeral), Veränderung mit Pfeil und Text, optional Verlaufslinie; ganze Kachel ist ein Link */
.ap-stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ap-stat { position: relative; padding: var(--space-4) var(--space-5); gap: var(--space-1); }
.ap-stat__link { display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; border-radius: var(--radius-md); }
a.ap-stat__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); } /* Klickfläche = ganze Kachel */
.ap-stat__label { color: var(--text-muted); font: 500 14px/1.5 var(--font-sans); }
.ap-stat__value { color: var(--text); font: 800 44px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ap-stat__delta { color: var(--text-body); font: 400 14px/1.5 var(--font-sans); }
.ap-stat__delta svg { width: 14px; height: 14px; margin-inline-end: var(--space-1); vertical-align: -2px; }
.ap-stat__delta--up { color: var(--success); }
.ap-stat__delta--down { color: var(--error); }
.ap-stat__spark { width: 120px; height: 32px; margin-top: var(--space-2); }
.ap-stat__link:focus-visible, .ap-root .ap-stat__link:focus-visible { outline: 2px solid transparent; box-shadow: none; animation: none; }
.ap-stat:has(.ap-stat__link:focus-visible) { box-shadow: var(--focus-ring); animation: ap-focus-in var(--duration-focus) var(--ease-entrance); }

/* Reiter als Links (Unterseiten): aktiv aria-current="page", Aussehen wie aria-selected */
.ap-tab[aria-current="page"] { background: var(--card); color: var(--accent); box-shadow: var(--elevation-1-strong); }
.ap-tabs--underline .ap-tab[aria-current="page"] { background: none; color: var(--accent); border-bottom-color: var(--accent); box-shadow: none; }
.ap-tabs--pill .ap-tab[aria-current="page"] { background: var(--coral-deep); color: var(--on-color); box-shadow: var(--elevation-1-strong); }

/* Segmente als Links (Zeitraum, Jahr, Ansicht ohne Skript): aktiv aria-current="true"; Größe S für Diagrammkarten */
.ap-segmented a { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 9px var(--space-4); font: 600 14px/1 var(--font-sans);
  color: var(--text-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.ap-segmented a[aria-current="true"] { background: var(--inverse); color: var(--on-inverse); }
@media (hover: hover) { .ap-segmented a:not([aria-current="true"]):hover { background: var(--card); color: var(--text); } }
.ap-segmented--sm button, .ap-segmented--sm a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--space-3); font-size: 13px; }

/* Diagrammkarte (Auswertung): Kopf mit Titel und Zeitraum, darunter die Schalter in eigener Zeile, Kurzaussage, Inline-SVG, Tabelle und CSV rechts unten.
   Die Schalter stehen immer in der zweiten Zeile, auch wenn sie neben den Titel passen würden: so verschiebt ein langer Titel nichts (Agentur, 1. November 2026). */
.ap-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); align-items: start; }
.ap-chart-grid--maps { grid-template-columns: 1fr; }
.ap-chart__head { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.ap-chart__heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ap-chart__controls { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); max-width: 100%; }
.ap-chart__controls .ap-segmented { max-width: 100%; overflow-x: auto; }
.ap-chart__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-2) var(--space-4); }
.ap-chart__foot .ap-chart__table { flex: 1 1 auto; min-width: 0; }
.ap-chart__download { margin-inline-start: auto; align-self: flex-end; }
.ap-chart__svg { width: 100%; height: auto; display: block; }
.ap-chart__summary { color: var(--text-body); }
.ap-chart__table summary { cursor: pointer; }
.ap-chart__series-1 { fill: var(--chart-1); stroke: var(--chart-1); }
.ap-chart__series-2 { fill: var(--chart-2); stroke: var(--chart-2); }
.ap-chart__series-3 { fill: var(--chart-3); stroke: var(--chart-3); }
.ap-chart__series-4 { fill: var(--chart-4); stroke: var(--chart-4); }
.ap-chart__series-5 { fill: var(--chart-5); stroke: var(--chart-5); }
.ap-chart__series-6 { fill: var(--chart-6); stroke: var(--chart-6); }
.ap-chart__seq-1 { fill: var(--chart-seq-1); stroke: var(--chart-seq-1); }
.ap-chart__seq-2 { fill: var(--chart-seq-2); stroke: var(--chart-seq-2); }
.ap-chart__seq-3 { fill: var(--chart-seq-3); stroke: var(--chart-seq-3); }
.ap-chart__seq-4 { fill: var(--chart-seq-4); stroke: var(--chart-seq-4); }
.ap-chart__seq-5 { fill: var(--chart-seq-5); stroke: var(--chart-seq-5); }
.ap-chart__seq-6 { fill: var(--chart-seq-6); stroke: var(--chart-seq-6); }
.ap-chart__context { fill: var(--chart-context); stroke: var(--chart-context); }
.ap-chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.ap-chart__baseline { stroke: var(--border-strong); stroke-width: 1; }
/* Tacho (Charts): Spur chart-grid, Wert chart-1, Zielmarke navy; Status immer als Wort im SVG */
.ap-chart__gauge-track { fill: none; stroke: var(--chart-grid); stroke-width: 16; stroke-linecap: butt; }
.ap-chart__gauge-value { fill: none; stroke: var(--chart-1); stroke-width: 16; stroke-linecap: butt; }
.ap-chart__target { stroke: var(--navy); stroke-width: 2; }
.ap-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-chart__dot { stroke: var(--card); stroke-width: 2; }
.ap-chart__hit { fill: transparent; stroke: none; }
.ap-chart__svg--map { background: var(--card); }
.ap-chart__area { stroke: var(--chart-grid); stroke-width: 0.6; stroke-linejoin: round; }
.ap-chart__svg--austria .ap-chart__area { stroke-width: 1; } /* Karte mit wenigen großen Flächen: kräftigere Grenzen */
.ap-chart__svg--austria_states .ap-chart__area { stroke-width: 1.5; } /* Bundesländer: noch weniger, noch größere Flächen */
.ap-chart__map-empty { fill: var(--chart-empty); }
.ap-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: 400 14px/1.5 var(--font-sans); color: var(--text-body); }
.ap-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.ap-chart__swatch { width: 14px; height: 14px; box-sizing: border-box; border-radius: var(--radius-xs); border: 1px solid var(--chart-grid); }
.ap-chart__swatch.ap-chart__seq-1 { background: var(--chart-seq-1); }
.ap-chart__swatch.ap-chart__seq-2 { background: var(--chart-seq-2); }
.ap-chart__swatch.ap-chart__seq-3 { background: var(--chart-seq-3); }
.ap-chart__swatch.ap-chart__seq-4 { background: var(--chart-seq-4); }
.ap-chart__swatch.ap-chart__seq-5 { background: var(--chart-seq-5); }
.ap-chart__swatch.ap-chart__seq-6 { background: var(--chart-seq-6); }
.ap-chart__swatch.ap-chart__map-empty { background: var(--chart-empty); }
/* Legende für kategoriale Reihen und Kontext (Säulen, Linien mit mehreren Reihen) */
.ap-chart__swatch.ap-chart__series-1 { background: var(--chart-1); }
.ap-chart__swatch.ap-chart__series-2 { background: var(--chart-2); }
.ap-chart__swatch.ap-chart__series-3 { background: var(--chart-3); }
.ap-chart__swatch.ap-chart__series-4 { background: var(--chart-4); }
.ap-chart__swatch.ap-chart__series-5 { background: var(--chart-5); }
.ap-chart__swatch.ap-chart__series-6 { background: var(--chart-6); }
.ap-chart__swatch.ap-chart__context { background: var(--chart-context); }
.ap-chart__axis, .ap-chart__label, .ap-chart__value { font: 500 12px/1 var(--font-sans); fill: var(--text-muted); }
.ap-chart__label { fill: var(--text-body); }
.ap-chart__value { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Diagramme in Artikeln (Website, Blog-Vorschau): beim Bauen gezeichnet, Daten zusätzlich als Tabelle; Farben aus chart-1 bis chart-6 */
.ap-post-chart { margin: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ap-post-chart svg { width: 100%; max-width: 26rem; height: auto; }
.ap-post-chart__label { font: 500 13px/1 var(--font-sans); fill: var(--text-body); }
.ap-post-chart__fill-1 { fill: var(--chart-1); background: var(--chart-1); }
.ap-post-chart__fill-2 { fill: var(--chart-2); background: var(--chart-2); }
.ap-post-chart__fill-3 { fill: var(--chart-3); background: var(--chart-3); }
.ap-post-chart__fill-4 { fill: var(--chart-4); background: var(--chart-4); }
.ap-post-chart__fill-5 { fill: var(--chart-5); background: var(--chart-5); }
.ap-post-chart__fill-6 { fill: var(--chart-6); background: var(--chart-6); }
.ap-post-chart path, .ap-post-chart circle { stroke: var(--card); stroke-width: 2; } /* 2 px Fuge zwischen Segmenten */
.ap-post-chart__table { border-collapse: collapse; margin-top: var(--space-2); font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-post-chart__table th, .ap-post-chart__table td { text-align: start; padding: var(--space-1) var(--space-4) var(--space-1) 0; font-weight: 400; }
.ap-post-chart__key { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-xs); margin-inline-end: var(--space-2); vertical-align: middle; }
.ap-post-chart__source { display: block; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }

/* Website: Bänder, Spalten, Lesebreite, Listen */
.ap-section--shell { background: var(--shell); }
.ap-section--tight { padding-block: var(--space-8); }
.ap-section__inner { max-width: var(--container); margin-inline: auto; }
.ap-measure { max-width: 46rem; }
.ap-columns { display: grid; gap: var(--space-6); }
.ap-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-list { margin: 0; padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.ap-placeholder { color: var(--text-muted); }
.ap-footnote { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.ap-price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ablauf in nummerierten Schritten: die Ziffer zeigt die echte Reihenfolge (ol), Kreis Blush/coral-700 */
.ap-steps { counter-reset: ap-step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.ap-steps > li { counter-increment: ap-step; display: flex; flex-direction: column; gap: var(--space-2); }
.ap-steps > li::before { content: counter(ap-step); content: counter(ap-step) / ""; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong); font: 700 16px/1 var(--font-sans); }
.ap-steps h3, .ap-steps p { margin: 0; }

/* Personen (Team): rundes Foto 120 px oder Platzhalter, Name, kurzer Text */
.ap-person { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.ap-person__photo { width: 120px; height: 120px; border-radius: var(--radius-full); object-fit: cover; }
.ap-person__placeholder { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; box-sizing: border-box; padding: var(--space-3);
  border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; text-align: center; }
.ap-person__name { margin: 0; font: 700 18px/1.3 var(--font-sans); color: var(--text); }
.ap-person p { margin: 0; }

/* Blog: Kopfzeile mit Link zu allen Beiträgen, Karten mit Bild 16 : 9, Artikelbild und Meta */
.ap-blog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ap-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ap-blog-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; overflow: hidden; }
.ap-blog-card img, .ap-blog-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ap-blog-card__text { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.ap-blog-card__text p { margin: 0; }
.ap-blog-card a { color: var(--text); text-decoration: none; }
.ap-blog-card a:hover, .ap-blog-card a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ap-post-image { width: 100%; height: auto; border-radius: var(--radius-lg); }
.ap-post-meta { margin: 0; font-size: 15px; color: var(--text-muted); }
.ap-infobox p { margin: var(--space-2) 0 0; }

/* Kontaktliste: Bezeichnung links in text-muted, Wert rechts */
.ap-contact-list { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.ap-contact-list dt { color: var(--text-muted); hyphens: auto; overflow-wrap: break-word; } /* lange Bezeichnungen (Unternehmensgegenstand) brechen statt zu überlappen */
.ap-contact-list dd { margin: 0; color: var(--text); }

/* Footer der Website: Markenspalte, Spaltentitel ohne h4, Rechtliches als Zeile */
.ap-footer__bottom { flex-wrap: wrap; gap: var(--space-3); }
.ap-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 18rem; }
.ap-footer__brand p { margin: 0; }
.ap-footer__title { margin: 0 0 var(--space-3); font: 700 12px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-light); }
.ap-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ap-footer__legal a { display: inline; padding: 0; }

/* Akkordeon mit details, vom Skript weich geöffnet (Inhalt in ap-collapse gepackt) */
.ap-accordion details > .ap-collapse { padding: 0; }
.ap-accordion details > .ap-collapse > .ap-collapse__inner > div { padding-block: 0 var(--space-5); padding-inline: var(--space-1) 36px; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }

/* Wischen zum Erledigen (SwipeAction): Zeile nach links wischen (Finger oder Stift), von rechts wächst eine grüne
   Fläche mit Haken und Text; ab der Schwelle erledigt das Loslassen die Zeile. Das Skript setzt --swipe-x (≤ 0)
   und --swipe-reveal (= Betrag), bei breiten Tabellen --swipe-end (rechts verdeckter Teil), und fügt
   ap-swipe__action in die letzte Zelle ein. Der Knopf in der Zeile bleibt. */
.ap-swipe { --swipe-x: 0px; --swipe-reveal: 0px; --swipe-end: 0px; position: relative; touch-action: pan-y; }
.ap-swipe > td, .ap-swipe > th { touch-action: pan-y; } /* touch-action wirkt nicht auf Tabellenzeilen, nur auf ihre Zellen */
.ap-swipe > :last-child { position: relative; }
li.ap-swipe > :last-child { position: static; } /* in Listen ist die Zeile selbst der Bezug */
.ap-swipe.is-swiping { overflow: clip; user-select: none; -webkit-user-select: none; }
.ap-swipe.is-swiping > :not(:last-child), .ap-swipe.is-swiping > :last-child > :not(.ap-swipe__action) { transform: translateX(var(--swipe-x, 0px)); }
.ap-swipe__action { position: absolute; inset-block: 0; inset-inline-end: var(--swipe-end, 0px); width: var(--swipe-reveal, 0px); display: flex; align-items: center;
  justify-content: flex-end; gap: var(--space-2); box-sizing: border-box; overflow: hidden; white-space: nowrap; pointer-events: none;
  background: var(--success-fill); color: var(--on-color); font: 600 14px/1 var(--font-sans); }
.ap-swipe__label { display: inline-flex; align-items: center; gap: var(--space-2); padding-inline-end: var(--space-4); }
.ap-swipe__label > span { display: none; }
/* hinter der Schwelle: der Text erscheint, der Haken wird größer */
.ap-swipe.is-armed .ap-swipe__label > span, .ap-swipe.is-done .ap-swipe__label > span { display: inline; }
/* Wartezeit vor dem Speichern: links Haken und „Erledigt“, rechts „Rückgängig“ (Button S, weiß auf Grün) */
.ap-swipe__undo { display: none; }
.ap-swipe.is-pending .ap-swipe__action { justify-content: space-between; padding-inline-start: var(--space-4); pointer-events: auto; }
.ap-swipe.is-pending .ap-swipe__label { padding-inline-end: 0; }
.ap-swipe.is-pending .ap-swipe__undo { display: inline-flex; flex: none; margin-inline-end: var(--space-4); }
.ap-swipe__action svg { width: 20px; height: 20px; flex: none; transition: transform var(--duration-fast) var(--ease-standard); }
.ap-swipe.is-armed .ap-swipe__action svg { transform: scale(1.2); }
.ap-swipe.is-settling > :not(:last-child), .ap-swipe.is-settling > :last-child > :not(.ap-swipe__action),
.ap-swipe.is-settling .ap-swipe__action { transition: transform var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .ap-swipe.is-settling > :not(:last-child), .ap-swipe.is-settling > :last-child > :not(.ap-swipe__action),
  .ap-swipe.is-settling .ap-swipe__action, .ap-swipe__action svg { transition: none; }
}
@media (forced-colors: active) { .ap-swipe__action { border-inline-start: 2px solid CanvasText; } }

/* v9 mobil: Touch-Ziele 44 px, Raster nach der Regel 4 → 2 → 1 und 3 → 2 → 1 */
@media (max-width: 959px) {
  .ap-modal--viewer { height: 90dvh; }
  /* Schwebender Knopf am Handy nur als Symbol (Entscheidung der Agentur, 29. Oktober 2026); der Text bleibt für Screenreader */
  .ap-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ap-fab { padding: 11px; }
  .ap-segmented a, .ap-segmented--sm button, .ap-segmented--sm a { min-height: var(--space-11); }
  .ap-stat__value { font-size: 36px; }
  .ap-columns--2 { grid-template-columns: 1fr; }
  .ap-columns--3, .ap-steps, .ap-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-footer__legal a { padding-block: var(--space-2-5); }
}
@media (max-width: 479px) {
  .ap-columns--3, .ap-steps, .ap-blog-grid, .ap-price-grid--2 { grid-template-columns: 1fr; }
  .ap-segmented--sm button, .ap-segmented--sm a { padding: 0 var(--space-2); font-size: 12px; }
}

/* v9 Druck: Schalter, Download und schwebender Knopf entfallen, Diagrammtabellen sind ausgeklappt */
@media print {
  .ap-chart__controls, .ap-chart__download, .ap-fab, .ap-multiselect__menu { display: none !important; }
  .ap-chart__table { display: block; }
  .ap-chart__table > summary { display: none; }
  .ap-chart__table::details-content { content-visibility: visible; height: auto; }
}

/* v9 Kontrastmodus: Auswahl und Fokus nicht nur über Fläche */
@media (forced-colors: active) {
  .ap-tab[aria-current="page"], .ap-segmented a[aria-current="true"], .ap-multiselect__option:has(input:checked) { outline: 2px solid CanvasText; outline-offset: -2px; }
  .ap-stat:has(.ap-stat__link:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ThemeToggle: zwischen hellem und dunklem Design umschalten (components/ThemeToggle). Das Symbol zeigt
   das Design, das gerade gilt (Mond hell, Sonne dunkel), auch bei data-theme="auto" nach dem Gerät.
   Zustand in aria-pressed (Symbolknopf) bzw. aria-checked (Schalter im Mobil-Menü). Gedrückt bleibt
   der Knopf neutral, denn das Symbol zeigt den Zustand schon. */
.ap-theme-toggle { display: inline-flex; margin: 0; }
.ap-theme-toggle__moon, .ap-theme-toggle__sun { display: inline-flex; }
.ap-theme-toggle__sun, [data-theme="dark"] .ap-theme-toggle__moon { display: none; }
[data-theme="dark"] .ap-theme-toggle__sun { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .ap-theme-toggle__moon { display: none; }
  [data-theme="auto"] .ap-theme-toggle__sun { display: inline-flex; }
}
.ap-theme-toggle .ap-icon-btn[aria-pressed="true"] { background: var(--card); border-color: var(--border); color: var(--text); }
.ap-theme-toggle .ap-icon-btn--ghost[aria-pressed="true"] { background: transparent; border-color: transparent; }
@media (hover: hover) { .ap-theme-toggle .ap-icon-btn[aria-pressed="true"]:hover { background: var(--control-fill); } }
.ap-theme-toggle .ap-icon-btn[aria-pressed="true"]:active { background: var(--control-fill); }

/* CodeBlock: kopierbarer Text in fester Breite, z. B. eine Regeldatei (components/CodeBlock). Bricht nicht um,
   scrollt waagrecht; Fläche control-fill, Schrift text-body in font-mono 13 px. */
.ap-code { margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--control-fill); color: var(--text-body); font: 13px/1.5 var(--font-mono); white-space: pre; overflow-x: auto; }

/* FlowDiagram: Ablaufdiagramm (Status als Kästen, Wechsel als Pfeile), Inline-SVG vom Server */
.ap-flow-wrap { overflow-x: auto; max-width: 100%; }
.ap-flow { display: block; max-width: none; height: auto; }
.ap-flow__node { fill: var(--card); stroke: var(--border-strong); stroke-width: 1; }
.ap-flow__node--main { fill: var(--accent-soft); stroke: var(--accent-soft-border); }
.ap-flow__node--side { stroke-dasharray: 4 3; }
.ap-flow__node--terminal { stroke-width: 2; }
.ap-flow__label { font: 500 12px/1 var(--font-sans); fill: var(--text-body); text-anchor: middle; }
.ap-flow__edge { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.ap-flow__edge--next { stroke: var(--text-muted); }
.ap-flow__edge--back { stroke: var(--chart-1); stroke-dasharray: 5 3; }
.ap-flow__edge--skip { stroke: var(--chart-1); }
.ap-flow__edge--side { stroke: var(--chart-context); }
.ap-flow__tip--next { fill: var(--text-muted); }
.ap-flow__tip--back, .ap-flow__tip--skip { fill: var(--chart-1); }
.ap-flow__tip--side { fill: var(--chart-context); }
.ap-flow__legend { margin: var(--space-2) 0 0; font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); }

/* Calendar: Aufgaben oder Termine in Woche, Monat und Jahr (components/Calendar, seit 5. November 2026).
   Kopf mit Titel, Blättern (Icon-Buttons + „Heute“) und Zeitraum (SegmentedControl S als Links).
   Woche und Monat als Tabelle Montag bis Sonntag; unter 720 px als Agenda nur der Tage mit Einträgen.
   Jahr als zwölf kleine Monate; Tage mit Einträgen sind Links (fett, unterstrichen, Fläche accent-soft).
   Kritisch und überfällig stehen immer auch als Wort da (Farbe nie einziges Signal). */
.ap-calendar { display: grid; gap: var(--space-4); }
.ap-calendar__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.ap-calendar__title { margin: 0 auto 0 0; font: var(--type-h4-weight) var(--type-h4-size) / var(--type-h4-line) var(--type-h4-family); color: var(--text); }
.ap-calendar__count { font: 400 14px/1.4 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ap-calendar__nav { display: flex; align-items: center; gap: var(--space-2); }
.ap-calendar__grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.ap-calendar__grid th { padding: var(--space-2); border-bottom: 1px solid var(--border); background: var(--card-soft); font: 600 13px/1.2 var(--font-sans); color: var(--text-muted); text-align: start; }
.ap-calendar__grid abbr, .ap-calendar__mini abbr { text-decoration: none; }
.ap-calendar__day { height: 112px; padding: var(--space-1-5); vertical-align: top; border-top: 1px solid var(--border-subtle); border-inline-start: 1px solid var(--border-subtle); }
.ap-calendar__day:first-child { border-inline-start: 0; }
.ap-calendar__grid tbody tr:first-child .ap-calendar__day { border-top: 0; }
.ap-calendar--week .ap-calendar__day { height: 240px; }
.ap-calendar__day--outside { background: var(--card-soft); }
.ap-calendar__day--outside .ap-calendar__date { color: var(--text-muted); }
.ap-calendar__date { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-1); font: 500 13px/1.2 var(--font-sans); color: var(--text-body); font-variant-numeric: tabular-nums; }
.ap-calendar__date-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 var(--space-1); border-radius: var(--radius-full); }
.ap-calendar__day--today .ap-calendar__date-num { background: var(--inverse); color: var(--on-inverse); font-weight: 600; }
.ap-calendar__date-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ap-calendar__today { font: 600 12px/1 var(--font-sans); color: var(--text); }
.ap-calendar__events { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ap-calendar__event { padding: var(--space-1) var(--space-1-5); border: 1px solid var(--info-border); border-inline-start: 3px solid var(--info); border-radius: var(--radius-sm); background: var(--info-soft); font: 400 12px/1.35 var(--font-sans); color: var(--text-body); overflow-wrap: anywhere; }
.ap-calendar__event--overdue { border-inline-start-color: var(--error); }
.ap-calendar__event--critical { background: var(--error-soft); border-color: var(--error-border); border-inline-start-color: var(--error); }
.ap-calendar__event-link { color: inherit; text-decoration: none; }
a.ap-calendar__event-link:hover { text-decoration: underline; }
.ap-calendar__event-record { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ap-calendar__flag { font-weight: 600; color: var(--error); white-space: nowrap; }
.ap-calendar__party { display: block; font-weight: 500; color: var(--text-muted); }
.ap-calendar__more { display: inline-block; margin-top: var(--space-1); font: 500 12px/1.3 var(--font-sans); color: var(--link); }
.ap-calendar__empty { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.ap-calendar__year { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.ap-calendar__month { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.ap-calendar__month-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--space-2); font: 600 15px/1.3 var(--font-sans); }
.ap-calendar__mini { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.ap-calendar__mini th { padding-bottom: var(--space-1); font-weight: 600; color: var(--text-muted); text-align: center; }
.ap-calendar__mini td { padding: 1px; text-align: center; }
.ap-calendar__mini-day { display: grid; place-items: center; height: 26px; border-radius: var(--radius-sm); color: var(--text-body); }
.ap-calendar__mini-day--busy { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ap-calendar__mini-day--today { box-shadow: inset 0 0 0 2px var(--inverse); }
@media (hover: hover) { a.ap-calendar__mini-day:hover { background: var(--accent-soft-border); } }
@media (max-width: 719px) {
  .ap-calendar__grid, .ap-calendar__grid tbody, .ap-calendar__grid tr, .ap-calendar__day { display: block; width: auto; height: auto; }
  .ap-calendar__grid thead, .ap-calendar__day--empty { display: none; }
  .ap-calendar--week .ap-calendar__day { height: auto; }
  .ap-calendar__day { padding: var(--space-3); border-inline-start: 0; border-top: 1px solid var(--border-subtle); }
  .ap-calendar__grid tbody tr:first-child .ap-calendar__day { border-top: 1px solid var(--border-subtle); }
  .ap-calendar__grid { border-top: 0; }
  .ap-calendar__date-long { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-weight: 600; }
  .ap-calendar__date-num { display: none; }
  .ap-calendar__event { font-size: 14px; padding: var(--space-2); }
  .ap-calendar__nav .ap-icon-btn, .ap-calendar__nav .ap-btn { min-height: 44px; min-width: 44px; }
}
@media print { .ap-calendar__nav, .ap-calendar__head .ap-segmented { display: none !important; } }

/* ───────────── v10: Startseite der Website (2. November 2026) ───────────── */

/* Hero mit Ansprechperson (components/Hero): Sunrise-Fläche mit angeschnittenem Signet als einzigem Dekor,
   darauf die Personenkarte. Text steht nur auf der Karte, nie auf dem Verlauf. */
.ap-hero__media--person { aspect-ratio: auto; min-height: 30rem; box-sizing: border-box; padding: var(--space-6);
  display: flex; align-items: flex-end; }
.ap-hero__signet { position: absolute; inset-inline-end: -72px; top: -48px; width: 380px; height: auto; opacity: .2; pointer-events: none; }
/* Mit echtem Foto statt Verlauf und Signet: Bild füllt die Fläche, Gesicht oben (object-position), Karte unten darauf */
.ap-hero__media--photo { min-height: 40rem; background: var(--shell); }
.ap-hero__photo, .ap-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ap-hero__photo img { object-fit: cover; object-position: 50% 15%; display: block; }
.ap-hero__media--person > .ap-card { position: relative; width: 100%; max-width: 26rem; box-sizing: border-box; background: var(--card); border-color: var(--card); box-shadow: var(--elevation-2); }
.ap-hero__trust { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 500 15px/1.4 var(--font-sans); color: var(--text-body); }
.ap-hero__trust > * { display: inline-flex; align-items: center; gap: var(--space-2); }
.ap-hero__trust svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.ap-hero__trust .ap-stars--svg { width: 5.5em; height: 1.1em; } /* Sterne nicht auf Icon-Größe stauchen */

/* Kontaktkarte: Avatar und Name nebeneinander, darunter Kontaktzeilen mit Icon und die Aktion */
.ap-contact-card { display: flex; flex-direction: column; gap: var(--space-4); }
.ap-contact-card__head { display: flex; align-items: center; gap: var(--space-4); }
.ap-contact-card__head p { margin: 0; }
.ap-contact-card__lines { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-contact-card__lines li { display: flex; align-items: center; gap: var(--space-3); }
.ap-contact-card__lines svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Kennzahlen-Leiste (Stat, Variante panel): eine Karte, Kennzahlen nebeneinander mit Trennlinien;
   mobil zweispaltig ohne Linien. Zahl oben, Beschriftung darunter. */
.ap-stat-list--panel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8) 0; }
.ap-stat-list--panel > .ap-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-1) var(--space-8); }
.ap-stat-list--panel > .ap-stat + .ap-stat { border-inline-start: 1px solid var(--border-subtle); }
.ap-stat-list--panel .ap-stat__label { font-size: 15px; color: var(--text-body); }

/* Liste mit Haken (CheckList): Vorteile in Karten und Abschnitten, Haken als Icon-Form (nicht vorgelesen) */
.ap-check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); font: 400 16px/1.5 var(--font-sans); color: var(--text-body); }
.ap-check-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.ap-check-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: currentColor; color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* Zielgruppen-Karten (Card, Variante audience): zwei Wege nebeneinander, Aktion unten bündig */
.ap-card--audience { gap: var(--space-5); padding: var(--space-10); }
.ap-card--audience > .ap-btn, .ap-card--audience > .row { margin-top: auto; }
.ap-card--audience-navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy-muted); }
.ap-card--audience-navy .ap-card__title, .ap-card--audience-navy .ap-h3 { color: var(--on-color); }
.ap-card--audience-navy .ap-overline { color: var(--coral-light); }
.ap-card--audience-navy .ap-card__body, .ap-card--audience-navy .ap-check-list { color: var(--on-navy-muted); }
.ap-card--audience-navy .ap-check-list li::before { color: var(--coral-light); }

/* Abschnitt mit Kopf links und Inhalt rechts (z. B. häufige Fragen) */
.ap-split-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.ap-split-section__head { display: flex; flex-direction: column; gap: var(--space-3); }
.ap-split-section__head > :is(h2, .ap-h2) { margin-bottom: var(--space-3); }
.ap-split-section__head p { margin: 0; }

/* Bewertung als Zusammenfassung: große Zahl, Sterne (role="img"), Quelle */
.ap-rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ap-rating__value { font: 800 44px/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.ap-rating .ap-stars { font-size: 20px; }

/* Preise (Pricing): Einheit nach dem Betrag, Fußnote auf der Navy-Karte, gleich hohe Karten mit Knopf unten */
.ap-price__unit { font: 500 16px/1.4 var(--font-sans); color: var(--text-muted); }
.ap-price--featured .ap-price__unit, .ap-price--featured .ap-footnote { color: var(--on-navy-muted); }
.ap-price-grid--equal { align-items: stretch; margin: 0; padding: 0; list-style: none; }
.ap-price-grid--equal > .ap-price > .ap-btn:last-child { margin-top: auto; align-self: flex-start; }

/* Seitenkopf der Unterseiten (Hero, Variante page): kompakter als der Hero der Startseite, Text im Seitenraster
   links (höchstens 46 rem), optional ein Aside rechts (Kontaktkarte, Bewertung). Überschrift im Typo-Stil h1. */
.ap-hero--page { padding-block: var(--space-16); grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.ap-hero--page:has(> .ap-hero__aside) { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.ap-hero--page .ap-hero__copy { max-width: 46rem; gap: var(--space-4); }
.ap-hero--page .ap-hero__copy > .ap-h1 { font-size: 48px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ap-hero--page .ap-hero__actions { margin-top: var(--space-2); }
.ap-hero__aside { min-width: 0; }
/* Lesebreite am Raster-Container (ap-section__inner ap-measure): der Bereich bleibt so breit wie das Raster, nur
   seine Kinder sind höchstens 46 rem breit. So beginnt Lesetext an derselben Kante wie Seitenkopf und Navbar. */
.ap-section__inner.ap-measure { max-width: var(--container); }
.ap-section__inner.ap-measure > * { max-width: 46rem; }
/* Abschnittsköpfe der Website im Typo-Stil h2 (36 px / 700) */
.ap-section__head > .ap-h2, .ap-split-section__head > .ap-h2 { font-size: 36px; font-weight: 700; line-height: 1.2; }

/* Externer Link (Link): öffnet in neuem Tab, kleines Pfeil-Symbol nach dem Text (aria-hidden) und Hinweis für Screenreader */
.ap-link__external { display: inline-block; width: .8em; height: .8em; margin-inline-start: .25em; vertical-align: -.05em; flex: none; }

/* Footer der Website: Anschrift und Kontakt in der Markenspalte, Profile als Textlinks in einer Zeile */
.ap-footer__address { font-style: normal; }
.ap-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }

@media (max-width: 959px) {
  .ap-hero__media--person { aspect-ratio: auto; min-height: 0; padding: var(--space-28) var(--space-4) var(--space-4); }
  .ap-hero__signet { width: 260px; inset-inline-end: -48px; top: -36px; }
  .ap-hero__media--photo { padding-top: min(24rem, 90vw); }
  .ap-stat-list--panel { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); padding: var(--space-6) 0; }
  .ap-stat-list--panel > .ap-stat { padding-inline: var(--space-6); }
  .ap-stat-list--panel > .ap-stat + .ap-stat { border-inline-start: 0; }
  .ap-stat-list--panel > .ap-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* ungerade Zahl: letzte Kennzahl über beide Spalten */
  .ap-card--audience { padding: var(--space-6); }
  .ap-split-section { grid-template-columns: 1fr; gap: var(--space-8); }
  .ap-rating__value { font-size: 36px; }
}
@media (max-width: 359px) {
  .ap-stat-list--panel { grid-template-columns: 1fr; }
}
@media (max-width: 959px) {
  .ap-hero--page, .ap-hero--page:has(> .ap-hero__aside) { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-10); gap: var(--space-8); }
  .ap-hero--page .ap-hero__copy > .ap-h1 { font-size: 32px; }
  .ap-section__head > .ap-h2, .ap-split-section__head > .ap-h2 { font-size: 26px; }
}
@media (max-width: 479px) {
  /* Kontaktliste auf schmalen Handys: Bezeichnung über dem Wert */
  .ap-contact-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ap-contact-list dd + dt { margin-top: var(--space-3); }
}
@media (forced-colors: active) {
  .ap-check-list li::before { forced-color-adjust: none; background: CanvasText; }
  .ap-stat-list--panel > .ap-stat + .ap-stat { border-inline-start-color: CanvasText; }
}

/* ───────────── v11: Media, Foto- und Videorahmen mit Platzhalter (9. November 2026) ───────────── */

/* Rahmen für Fotos und Videos (components/Media): festes Seitenverhältnis, radius-xl, der Inhalt füllt den Rahmen.
   Nur echte Fotos und Videos (Bildsprache: README, Fotos und Videos); kein Text auf dem Bild. */
.ap-media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-xl); background: var(--control-fill); }
.ap-media > img, .ap-media > video, .ap-media > picture, .ap-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Seitenverhältnisse; sie gelten auch für ap-card__media (Bild oben in der Karte) */
.ap-media--3x2 { aspect-ratio: 3 / 2; }
.ap-media--4x3 { aspect-ratio: 4 / 3; }
.ap-media--4x5 { aspect-ratio: 4 / 5; }
.ap-media--16x9 { aspect-ratio: 16 / 9; }
.ap-media--wide { aspect-ratio: 21 / 9; } /* Bildband über die ganze Breite; mobil 3 : 2 */
/* Platzhalter, solange Foto oder Video fehlen: Shell-Fläche, gestrichelter Rand, Icon in accent, Motiv in eckigen Klammern */
.ap-media__placeholder { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; height: 100%; padding: var(--space-6); border: 1px dashed var(--border-strong); border-radius: inherit; background: var(--shell);
  color: var(--text-muted); font: 400 14px/1.5 var(--font-sans); text-align: center; }
.ap-media__placeholder > svg { width: 32px; height: 32px; flex: none; color: var(--accent); }
.ap-media__placeholder > p { max-width: 30rem; margin: 0; }
/* Foto oder Video mit Unterschrift (Name, Ort) */
.ap-figure { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.ap-figure__caption { font: 400 14px/1.5 var(--font-sans); color: var(--text-muted); }
.ap-figure__caption strong { font-weight: 600; color: var(--text); }
/* Knopf „Video ansehen“: weiße Pille mit Play-Kreis (coral-deep, weißes Dreieck, 5,2 : 1); öffnet das Video im Modal (L).
   Ohne JavaScript bleibt er verborgen (hidden). Der transparente Rand wird im Kontrastmodus sichtbar. */
.ap-video-button { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; box-sizing: border-box;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--card); color: var(--text); font: 600 15px/1.2 var(--font-sans); box-shadow: var(--elevation-2); cursor: pointer; }
.ap-video-button[hidden] { display: none; }
.ap-video-button__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-full); background: var(--coral-deep); color: var(--on-color); transition: background var(--duration-fast) var(--ease-standard); }
.ap-video-button__icon svg { width: 16px; height: 16px; margin-inline-start: 2px; } /* Dreieck optisch mittig */
.ap-video-button:hover .ap-video-button__icon { background: var(--coral-700); }
/* Im Modal kleinerer Radius (verschachtelt) */
.ap-modal .ap-media { border-radius: var(--radius-md); }

/* Einsatz in anderen Bausteinen */
.ap-card--audience > .ap-card__media { margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-10)) 0; } /* Zielgruppen-Karte: Bild randlos oben */
.ap-steps > li > .ap-media { order: -1; margin-bottom: var(--space-2); } /* Steps: Bild über Ziffer und Titel */
.ap-hero__media > .ap-video-button { position: absolute; top: var(--space-6); inset-inline-start: var(--space-6); z-index: 1; } /* Hero: oben links auf dem Porträt */

@media (max-width: 959px) {
  .ap-media--wide { aspect-ratio: 3 / 2; }
  .ap-card--audience > .ap-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
  .ap-hero__media > .ap-video-button { top: var(--space-4); inset-inline-start: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-video-button__icon { transition: none; }
}
@media print {
  .ap-video-button { display: none; }
}