/* ==========================================================================
   FirmenID – Designsystem
   --------------------------------------------------------------------------
   Sachliche, ruhige Gestaltung in der Anmutung eines öffentlichen
   Informationsdienstes: viel Weißraum, klare typografische Hierarchie,
   ruhige Flächen, ein einziger Akzent.

   Alle Farben, Abstände, Radien und Schriftgrößen sind hier als
   CSS Custom Properties definiert. In Templates werden keine Farbwerte
   hart kodiert.

   Wird nach bootstrap.min.css geladen und überschreibt dessen Variablen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */

:root {
    /* --------------------------------------------------------------------
       Die FirmenID-Farben
       --------------------------------------------------------------------
       Zwei Rollen, und sie sind streng getrennt:

         --fwk-navy       #17233C  Vertrauensbasis: Kopfzeile, Fußzeile,
                                   Überschriften, Navigation. 15,7:1 auf
                                   Weiß – trägt jede Schriftgröße.
         --fwk-accent     #D2275A  Akzent: Verweise, Buttonflächen, aktive
                                   Elemente, Akzentstreifen. 5,0:1 auf
                                   Weiß und 4,7:1 auf der
                                   Hintergrundfläche – erfüllt AA auch in
                                   kleiner Schrift, und zwar in beide
                                   Richtungen (weißer Text auf der Fläche
                                   ebenso).

       Das ist der Unterschied zum bisherigen Rotkonzept: Dort musste
       zwischen Signalfarbe (4,4:1, nur Großtext) und Textfarbe (5,8:1)
       unterschieden werden, und eine Verwechslung baute ein
       Kontrastproblem ein, das man auf einem guten Bildschirm nicht sieht.
       Hier trägt der Akzent überall.

       Nachgerechnet (WCAG 2.1, Kontrastverhältnis):

         Navy auf Weiß              15,65:1   AAA
         Navy auf Hintergrund       14,47:1   AAA
         Akzent auf Weiß             5,03:1   AA
         Akzent auf Hintergrund      4,65:1   AA
         Weiß auf Akzent             5,03:1   AA
         Akzent dunkel auf Weiß      6,68:1   AA
         Haupttext auf Weiß         14,63:1   AAA
         Sekundärtext auf Weiß       4,97:1   AA
         Sekundärtext auf Hintergr.  4,60:1   AA

       Der Akzent bleibt sparsam: Er markiert, was anklickbar oder aktiv
       ist. Eine Fläche wird davon nicht bunt.
       -------------------------------------------------------------------- */
    --fwk-navy: #17233C;
    --fwk-navy-dark: #0F1829;
    --fwk-navy-light: #2C3B5E;
    --fwk-navy-rgb: 23, 35, 60;

    --fwk-accent: #D2275A;
    --fwk-accent-rgb: 210, 39, 90;
    --fwk-accent-dark: #B01F4B;
    --fwk-accent-darker: #8E1A3D;
    --fwk-accent-soft: #FDF2F6;
    --fwk-accent-line: #F2C6D6;

    /* Flächen */
    --fwk-bg: #F5F6F8;
    --fwk-surface: #FFFFFF;
    --fwk-surface-muted: #FAFBFC;
    --fwk-surface-inset: #EFF1F4;

    /* Text */
    --fwk-ink: #202938;
    --fwk-ink-muted: #667085;
    --fwk-ink-subtle: #7D8798;
    --fwk-ink-invert: #FFFFFF;

    /* Linien */
    --fwk-line: #D9DEE5;
    --fwk-line-strong: #BCC4CE;

    /* Status – bewusst gedeckt, keine bunte Dashboard-Optik */
    --fwk-success: #1e6b3a;
    --fwk-success-soft: #f0f6f1;
    --fwk-success-line: #c3dcc9;
    --fwk-warning: #8a5600;
    --fwk-warning-soft: #fcf5ea;
    --fwk-warning-line: #e6d4b2;
    --fwk-danger: var(--fwk-accent);
    --fwk-danger-soft: var(--fwk-accent-soft);
    --fwk-danger-line: var(--fwk-accent-line);

    /* Abstände */
    --fwk-space-1: 0.25rem;
    --fwk-space-2: 0.5rem;
    --fwk-space-3: 0.75rem;
    --fwk-space-4: 1rem;
    --fwk-space-5: 1.5rem;
    --fwk-space-6: 2rem;
    --fwk-space-7: 3rem;
    --fwk-space-8: 4rem;

    /* Form */
    --fwk-radius: 3px;
    --fwk-radius-lg: 4px;
    --fwk-border-width: 1px;
    --fwk-shadow: 0 1px 2px rgba(23, 35, 60, 0.05);
    --fwk-shadow-raised: 0 2px 6px rgba(23, 35, 60, 0.08);
    --fwk-focus-ring: 0 0 0 3px rgba(var(--fwk-accent-rgb), 0.28);
    --fwk-accent-bar: 2px;

    /* Typografie */
    --fwk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    --fwk-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    --fwk-text-sm: 0.875rem;
    --fwk-text-xs: 0.8125rem;
    --fwk-leading: 1.6;
    --fwk-measure: 68ch;
}

/* --------------------------------------------------------------------------
   2. Bootstrap-Variablen auf die FirmenID-Tokens umstellen
   -------------------------------------------------------------------------- */

:root {
    --bs-primary: var(--fwk-accent);
    --bs-primary-rgb: var(--fwk-accent-rgb);
    --bs-primary-text-emphasis: var(--fwk-accent-darker);
    --bs-primary-bg-subtle: var(--fwk-accent-soft);
    --bs-primary-border-subtle: var(--fwk-accent-line);

    --bs-link-color: var(--fwk-accent-dark);
    --bs-link-color-rgb: var(--fwk-accent-rgb);
    --bs-link-hover-color: var(--fwk-accent-darker);
    --bs-link-hover-color-rgb: var(--fwk-accent-rgb);

    --bs-body-color: var(--fwk-ink);
    --bs-body-color-rgb: 31, 41, 55;
    --bs-body-bg: var(--fwk-bg);
    --bs-emphasis-color: var(--fwk-ink);
    --bs-secondary-color: var(--fwk-ink-muted);
    --bs-tertiary-color: var(--fwk-ink-subtle);
    --bs-tertiary-bg: var(--fwk-surface-muted);

    --bs-border-color: var(--fwk-line);
    --bs-border-radius: var(--fwk-radius);
    --bs-border-radius-sm: var(--fwk-radius);
    --bs-border-radius-lg: var(--fwk-radius-lg);
    --bs-border-radius-xl: var(--fwk-radius-lg);

    --bs-font-sans-serif: var(--fwk-font-sans);
    --bs-font-monospace: var(--fwk-font-mono);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: var(--fwk-leading);

    --bs-focus-ring-color: rgba(var(--fwk-accent-rgb), 0.28);
    --bs-focus-ring-width: 3px;
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--fwk-bg);
    color: var(--fwk-ink);
    font-family: var(--fwk-font-sans);
    line-height: var(--fwk-leading);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fwk-ink);
}

h1, .h1 { font-size: 1.875rem; line-height: 1.25; }
h2, .h2 { font-size: 1.5rem; line-height: 1.3; }
h3, .h3 { font-size: 1.25rem; line-height: 1.35; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.4; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9375rem; }

p { margin-bottom: var(--fwk-space-4); }

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

a:hover { color: var(--fwk-accent-darker); }

:focus-visible {
    outline: 2px solid var(--fwk-accent);
    outline-offset: 2px;
    box-shadow: none;
}

code, pre, kbd, samp {
    font-family: var(--fwk-font-mono);
    font-size: 0.875em;
}

code {
    background: var(--fwk-surface-inset);
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    padding: 0.05em 0.35em;
    color: var(--fwk-ink);
}

pre {
    background: var(--fwk-surface-inset);
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    padding: var(--fwk-space-4);
    color: var(--fwk-ink);
}

pre code {
    background: none;
    border: 0;
    padding: 0;
}

hr {
    border-top: var(--fwk-border-width) solid var(--fwk-line);
    opacity: 1;
    margin: var(--fwk-space-5) 0;
}

.fwk-measure { max-width: var(--fwk-measure); }
.fwk-muted { color: var(--fwk-ink-muted); }
.fwk-subtle { color: var(--fwk-ink-subtle); }
.fwk-text-sm { font-size: var(--fwk-text-sm); }
.fwk-text-xs { font-size: var(--fwk-text-xs); }

/* --------------------------------------------------------------------------
   4. Seitengerüst
   -------------------------------------------------------------------------- */

.fwk-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.fwk-main { flex: 1 0 auto; }

/* Schmaler roter Streifen ganz oben – Markenakzent, kein Behördenwappen */
.fwk-accentline {
    height: var(--fwk-accent-bar);
    background: var(--fwk-accent);
}

/* Kopfzeile */
.fwk-header {
    background: var(--fwk-surface);
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
}

.fwk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fwk-space-4);
    min-height: 3.5rem;
    flex-wrap: wrap;
}

.fwk-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-3);
    text-decoration: none;
    color: var(--fwk-ink);
    padding: var(--fwk-space-2) 0;
}

.fwk-brand:hover { color: var(--fwk-ink); }

.fwk-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    background: var(--fwk-navy);
    color: var(--fwk-ink-invert);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-radius: var(--fwk-radius);
    flex: none;
}

.fwk-brand__name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.fwk-brand__sub {
    display: block;
    font-size: var(--fwk-text-xs);
    font-weight: 400;
    color: var(--fwk-ink-muted);
    letter-spacing: 0;
}

/* Hauptnavigation */
.fwk-nav {
    display: flex;
    align-items: center;
    gap: var(--fwk-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.fwk-nav__link {
    display: inline-block;
    padding: var(--fwk-space-2) 0;
    color: var(--fwk-ink-muted);
    text-decoration: none;
    font-size: var(--fwk-text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.fwk-nav__link:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: var(--fwk-accent-line);
}

.fwk-nav__link.is-active {
    color: var(--fwk-accent-dark);
    border-bottom-color: var(--fwk-accent);
}

.fwk-header__actions {
    display: flex;
    align-items: center;
    gap: var(--fwk-space-3);
    flex-wrap: wrap;
}

.fwk-header__user {
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
}

/* Seitenkopf mit Titel */
.fwk-pagehead {
    background: var(--fwk-surface);
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
    padding: var(--fwk-space-6) 0;
}

.fwk-pagehead__title {
    margin: 0 0 var(--fwk-space-2);
}

.fwk-pagehead__lead {
    margin: 0;
    color: var(--fwk-ink-muted);
    max-width: var(--fwk-measure);
}

.fwk-eyebrow {
    display: block;
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fwk-accent-dark);
    margin-bottom: var(--fwk-space-2);
}

/* Fußzeile */
.fwk-footer {
    background: var(--fwk-surface);
    border-top: var(--fwk-border-width) solid var(--fwk-line);
    padding: var(--fwk-space-5) 0;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
}

.fwk-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--fwk-space-4);
    flex-wrap: wrap;
}

.fwk-footer a { color: var(--fwk-ink-muted); }
.fwk-footer a:hover { color: var(--fwk-accent-dark); }

/* --------------------------------------------------------------------------
   5. Flächen und Karten
   -------------------------------------------------------------------------- */

.fwk-panel,
.card {
    background: var(--fwk-surface);
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    box-shadow: none;
}

.card { --bs-card-border-color: var(--fwk-line); }

.fwk-panel__header {
    padding: var(--fwk-space-4) var(--fwk-space-5);
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
    background: var(--fwk-surface-muted);
}

.fwk-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.fwk-panel__body { padding: var(--fwk-space-5); }

.fwk-panel__footer {
    padding: var(--fwk-space-4) var(--fwk-space-5);
    border-top: var(--fwk-border-width) solid var(--fwk-line);
    background: var(--fwk-surface-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--fwk-space-4);
    flex-wrap: wrap;
}

/* Kennzahlfläche – nüchtern, nicht bunt */
.fwk-stat {
    background: var(--fwk-surface);
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-left: var(--fwk-accent-bar) solid var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    padding: var(--fwk-space-4) var(--fwk-space-5);
    height: 100%;
}

.fwk-stat--accent { border-left-color: var(--fwk-accent); }

.fwk-stat__label {
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fwk-ink-muted);
    margin: 0 0 var(--fwk-space-1);
}

.fwk-stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.fwk-stat__value--muted { color: var(--fwk-ink-subtle); }

.fwk-stat__note {
    margin: var(--fwk-space-1) 0 0;
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius: var(--fwk-radius);
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-focus-box-shadow: var(--fwk-focus-ring);
    box-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--fwk-accent);
    --bs-btn-border-color: var(--fwk-accent);
    --bs-btn-color: var(--fwk-ink-invert);
    --bs-btn-hover-bg: var(--fwk-accent-dark);
    --bs-btn-hover-border-color: var(--fwk-accent-dark);
    --bs-btn-hover-color: var(--fwk-ink-invert);
    --bs-btn-active-bg: var(--fwk-accent-darker);
    --bs-btn-active-border-color: var(--fwk-accent-darker);
    --bs-btn-active-color: var(--fwk-ink-invert);
    --bs-btn-disabled-bg: var(--fwk-accent);
    --bs-btn-disabled-border-color: var(--fwk-accent);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: var(--fwk-surface);
    --bs-btn-border-color: var(--fwk-line-strong);
    --bs-btn-color: var(--fwk-ink);
    --bs-btn-hover-bg: var(--fwk-surface-inset);
    --bs-btn-hover-border-color: var(--fwk-line-strong);
    --bs-btn-hover-color: var(--fwk-ink);
    --bs-btn-active-bg: var(--fwk-surface-inset);
    --bs-btn-active-border-color: var(--fwk-line-strong);
    --bs-btn-active-color: var(--fwk-ink);
}

.btn-link {
    --bs-btn-color: var(--fwk-accent-dark);
    --bs-btn-hover-color: var(--fwk-accent-darker);
}

.btn-quiet {
    background: none;
    border: 0;
    padding: 0;
    color: var(--fwk-accent-dark);
    font-size: var(--fwk-text-sm);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.btn-quiet:hover { color: var(--fwk-accent-darker); }

/* --------------------------------------------------------------------------
   7. Formulare
   -------------------------------------------------------------------------- */

.form-label {
    font-size: var(--fwk-text-sm);
    font-weight: 600;
    color: var(--fwk-ink);
    margin-bottom: var(--fwk-space-1);
}

.form-control,
.form-select {
    border: var(--fwk-border-width) solid var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--fwk-ink);
    background-color: var(--fwk-surface);
    box-shadow: none;
}

.form-control::placeholder { color: var(--fwk-ink-subtle); }

.form-control:focus,
.form-select:focus {
    border-color: var(--fwk-accent);
    box-shadow: var(--fwk-focus-ring);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--fwk-accent);
    background-image: none;
    padding-right: 0.75rem;
}

.form-control.is-invalid:focus { box-shadow: var(--fwk-focus-ring); }

.form-text {
    color: var(--fwk-ink-muted);
    font-size: var(--fwk-text-xs);
    margin-top: var(--fwk-space-1);
}

.form-check-input:checked {
    background-color: var(--fwk-accent);
    border-color: var(--fwk-accent);
}

.form-check-input:focus {
    border-color: var(--fwk-accent);
    box-shadow: var(--fwk-focus-ring);
}

fieldset { border: 0; padding: 0; margin: 0; }

.fwk-fieldset + .fwk-fieldset {
    margin-top: var(--fwk-space-5);
    padding-top: var(--fwk-space-5);
    border-top: var(--fwk-border-width) solid var(--fwk-line);
}

.fwk-fieldset__legend {
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fwk-ink-muted);
    margin-bottom: var(--fwk-space-3);
}

/* --------------------------------------------------------------------------
   8. Tabellen
   -------------------------------------------------------------------------- */

.fwk-table,
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--fwk-line);
    width: 100%;
    margin-bottom: 0;
    color: var(--fwk-ink);
}

.fwk-table th,
.table > :not(caption) > * > * {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    box-shadow: none;
}

.fwk-table thead th,
.table thead th {
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fwk-ink-muted);
    background: var(--fwk-surface-muted);
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
    white-space: nowrap;
}

.fwk-table tbody td,
.table tbody td {
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
}

.fwk-table tbody tr:last-child td,
.table tbody tr:last-child td { border-bottom: 0; }

.fwk-table--framed {
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.fwk-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.fwk-table__right { text-align: right; }

/* --------------------------------------------------------------------------
   9. Statusanzeigen
   -------------------------------------------------------------------------- */

.fwk-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.15rem 0.5rem;
    border-radius: var(--fwk-radius);
    border: var(--fwk-border-width) solid transparent;
    white-space: nowrap;
}

.fwk-status::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.fwk-status--ok {
    color: var(--fwk-success);
    background: var(--fwk-success-soft);
    border-color: var(--fwk-success-line);
}

.fwk-status--warn {
    color: var(--fwk-warning);
    background: var(--fwk-warning-soft);
    border-color: var(--fwk-warning-line);
}

.fwk-status--error {
    color: var(--fwk-accent-dark);
    background: var(--fwk-danger-soft);
    border-color: var(--fwk-danger-line);
}

.fwk-status--neutral {
    color: var(--fwk-ink-muted);
    background: var(--fwk-surface-inset);
    border-color: var(--fwk-line);
}

/* Die Stände eines Hintergrundauftrags – dieselben vier Farben wie oben,
   nur unter den Namen, die die Datenbank verwendet. */
.fwk-status--wartet {
    color: var(--fwk-ink-muted);
    background: var(--fwk-surface-inset);
    border-color: var(--fwk-line);
}

.fwk-status--laeuft {
    color: var(--fwk-warning);
    background: var(--fwk-warning-soft);
    border-color: var(--fwk-warning-line);
}

.fwk-status--abgeschlossen {
    color: var(--fwk-success);
    background: var(--fwk-success-soft);
    border-color: var(--fwk-success-line);
}

.fwk-status--fehlgeschlagen,
.fwk-status--abgebrochen {
    color: var(--fwk-accent-dark);
    background: var(--fwk-danger-soft);
    border-color: var(--fwk-danger-line);
}

/* Die Fortschrittszahlen eines laufenden Auftrags. */
.fwk-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: var(--fwk-space-3);
}

.fwk-metric {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--fwk-space-3);
    background: var(--fwk-surface-inset);
    border-radius: var(--fwk-radius);
}

.fwk-metric__value {
    font-size: 1.25rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.fwk-metric__label {
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-muted);
}

.fwk-tag {
    display: inline-block;
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--fwk-radius);
    background: var(--fwk-accent-soft);
    color: var(--fwk-accent-dark);
    border: var(--fwk-border-width) solid var(--fwk-accent-line);
}

/* --------------------------------------------------------------------------
   10. Hinweise und Meldungen
   -------------------------------------------------------------------------- */

.fwk-note {
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-left: var(--fwk-accent-bar) solid var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    background: var(--fwk-surface);
    padding: var(--fwk-space-4) var(--fwk-space-5);
    margin-bottom: var(--fwk-space-4);
}

.fwk-note__title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0 0 var(--fwk-space-1);
}

.fwk-note p:last-child,
.fwk-note ul:last-child { margin-bottom: 0; }

.fwk-note--ok {
    border-left-color: var(--fwk-success);
    background: var(--fwk-success-soft);
    border-color: var(--fwk-success-line);
    border-left-color: var(--fwk-success);
}

.fwk-note--warn {
    background: var(--fwk-warning-soft);
    border-color: var(--fwk-warning-line);
    border-left-color: var(--fwk-warning);
}

.fwk-note--error {
    background: var(--fwk-danger-soft);
    border-color: var(--fwk-danger-line);
    border-left-color: var(--fwk-accent);
}

.fwk-note--info {
    background: var(--fwk-surface-muted);
    border-left-color: var(--fwk-line-strong);
}

.fwk-note__list {
    margin: var(--fwk-space-2) 0 0;
    padding-left: 1.1rem;
}

.fwk-note__list li + li { margin-top: var(--fwk-space-1); }

.fwk-note__pre {
    margin: var(--fwk-space-3) 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--fwk-text-xs);
    background: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   11. Installationsschritte
   -------------------------------------------------------------------------- */

.fwk-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 var(--fwk-space-5);
    padding: 0;
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    background: var(--fwk-surface);
    overflow: hidden;
}

.fwk-steps__item {
    flex: 1 1 10rem;
    display: flex;
    align-items: center;
    gap: var(--fwk-space-2);
    padding: var(--fwk-space-3) var(--fwk-space-4);
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-subtle);
    border-right: var(--fwk-border-width) solid var(--fwk-line);
    border-bottom: var(--fwk-accent-bar) solid transparent;
}

.fwk-steps__item:last-child { border-right: 0; }

.fwk-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--fwk-radius);
    background: var(--fwk-surface-inset);
    color: var(--fwk-ink-muted);
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    flex: none;
}

.fwk-steps__item.is-done {
    color: var(--fwk-ink-muted);
}

.fwk-steps__item.is-done .fwk-steps__num {
    background: var(--fwk-success-soft);
    color: var(--fwk-success);
}

.fwk-steps__item.is-current {
    color: var(--fwk-ink);
    font-weight: 600;
    border-bottom-color: var(--fwk-accent);
    background: var(--fwk-surface);
}

.fwk-steps__item.is-current .fwk-steps__num {
    background: var(--fwk-accent);
    color: var(--fwk-ink-invert);
}

/* --------------------------------------------------------------------------
   12. Zentrierte Schmalseiten (Installer, Login, Fehlerseiten)
   -------------------------------------------------------------------------- */

.fwk-shell {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--fwk-space-6) var(--fwk-space-4) var(--fwk-space-8);
}

.fwk-shell--narrow { max-width: 26rem; }
.fwk-shell--medium { max-width: 44rem; }

.fwk-definition {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--fwk-space-2) var(--fwk-space-4);
    margin: 0;
}

.fwk-definition dt {
    font-size: var(--fwk-text-sm);
    font-weight: 600;
    color: var(--fwk-ink-muted);
}

.fwk-definition dd { margin: 0; }

.fwk-details summary {
    cursor: pointer;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
}

.fwk-details summary:hover { color: var(--fwk-accent-dark); }

.fwk-details pre {
    margin-top: var(--fwk-space-2);
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    font-size: var(--fwk-text-xs);
}

.fwk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fwk-space-4);
    flex-wrap: wrap;
    margin-top: var(--fwk-space-5);
}

.fwk-actions--end { justify-content: flex-end; }

.fwk-section + .fwk-section { margin-top: var(--fwk-space-6); }

.fwk-section__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--fwk-space-3);
    padding-bottom: var(--fwk-space-2);
    border-bottom: var(--fwk-border-width) solid var(--fwk-line);
}

/* --------------------------------------------------------------------------
   13. Mobil
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    :root { --fwk-space-7: 2rem; --fwk-space-8: 2.5rem; }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }

    .fwk-header__inner {
        align-items: flex-start;
        padding-bottom: var(--fwk-space-2);
    }

    .fwk-steps__item {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: var(--fwk-border-width) solid var(--fwk-line);
    }

    .fwk-steps__item.is-current {
        border-bottom: var(--fwk-accent-bar) solid var(--fwk-accent);
    }

    .fwk-steps__item:last-child { border-bottom: 0; }

    .fwk-definition { grid-template-columns: 1fr; gap: 0; }
    .fwk-definition dd { margin-bottom: var(--fwk-space-3); }

    .fwk-actions { flex-direction: column-reverse; align-items: stretch; }
    .fwk-actions .btn { width: 100%; }

    .fwk-panel__body { padding: var(--fwk-space-4); }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   14. Druck
   -------------------------------------------------------------------------- */

@media print {
    .fwk-accentline, .fwk-header__actions, .fwk-nav { display: none; }
    body { background: #fff; }
    .fwk-panel, .card { border-color: #999; }
}

/* --------------------------------------------------------------------------
   14b. Adminbereich – Ergänzungen
   -------------------------------------------------------------------------- */

/* Ein abgeschalteter Firmenstandort bleibt in der Adminliste sichtbar – er ist
   gespeichert, nur nicht öffentlich. Er soll aber auf einen Blick von den
   aktiven zu unterscheiden sein. */
.fwk-row--muted > td {
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   15. Öffentliche Ebene – das Designsystem der Website
   --------------------------------------------------------------------------
   Startseite, Suche, Struktur-, Regions- und Firmenseiten.

   Bootstrap liefert hier ausschließlich Raster, Breakpoints und ein paar
   Utilities. Die Optik kommt vollständig von hier: Kopfzeile, Navigation,
   Hero, Suche, Karten, Chips, Listen, Formulare, Blätterung, Brotkrümel und
   Fußzeile sind ein System mit einem Satz Abstände, einer Typografieleiter und
   einem Verhalten für Hover und Fokus.

   Drei Regeln, die alles zusammenhalten:

   1. Farbwerte stehen nur in den Tokens (Abschnitt 1). Hier wird keine Farbe
      hart geschrieben.
   2. Interaktive Flächen bekommen sichtbaren Fokus – dieselbe Ringform
      überall, damit Tastaturbedienung nicht Glückssache ist.
   3. Nichts hat eine feste Breite. Jede Fläche darf schmaler werden; jedes
      Formular bricht um, statt seinen Button abzuschneiden. Geprüft wird bei
      320, 375, 768, 1024 und darüber.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15.1 Gerüst
   -------------------------------------------------------------------------- */

.fwk-shell {
    width: 100%;
    max-width: 82rem;
    margin: 0 auto;
    padding: 0 var(--fwk-space-4);
}

/* Ab dem Tabletbereich mehr Luft an den Rändern. Ohne das wirkt die
   Desktopfassung wie eine hochgezogene Mobilfassung: Der Inhalt klebt am
   Rand, obwohl rundherum Platz ist. */
@media (min-width: 48rem) {
    .fwk-shell {
        padding: 0 var(--fwk-space-6);
    }
}

@media (min-width: 75rem) {
    .fwk-shell {
        padding: 0 var(--fwk-space-7);
    }
}

/* Auf ganz schmalen Geräten bleibt ein Rand, aber ein kleinerer – sonst
   verliert die Liste zu viel Platz. */
@media (max-width: 22.5rem) {
    .fwk-shell {
        padding: 0 var(--fwk-space-3);
    }
}

.fwk-main {
    padding-bottom: var(--fwk-space-8);
}

/* Kein horizontales Scrollen, egal was eine Tabelle oder ein langes Wort
   vorhat. Das ist der häufigste Mobilfehler und hier ein für alle Mal
   abgestellt. */
html,
body.fwk-page {
    overflow-x: hidden;
    max-width: 100%;
}

.fwk-page * {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   15.2 Kopfzeile und Navigation
   --------------------------------------------------------------------------
   Eine Zeile: Marke links, Navigation rechts. Ab dem Tabletbereich in einer
   Reihe, darunter umgebrochen – ohne Klappmenü, weil vier Einstiege in zwei
   Zeilen passen und ein Menü, das man erst öffnen muss, einen Klick kostet.
   -------------------------------------------------------------------------- */

.fwk-accentline {
    height: var(--fwk-accent-bar);
    background: var(--fwk-accent);
}

.fwk-header {
    background: var(--fwk-surface);
    border-bottom: 1px solid var(--fwk-line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.fwk-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwk-space-3) var(--fwk-space-5);
    padding: var(--fwk-space-3) 0;
}

.fwk-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-3);
    text-decoration: none;
    color: var(--fwk-ink);
    margin-right: auto;
}

.fwk-brand:hover,
.fwk-brand:focus-visible {
    color: var(--fwk-ink);
    text-decoration: none;
}

.fwk-brand__mark {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 auto;
    background: var(--fwk-navy);
    color: var(--fwk-ink-invert);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-radius: var(--fwk-radius);
}

.fwk-brand__name {
    display: flex;
    flex-direction: column;
    font-weight: 650;
    font-size: 1.0625rem;
    line-height: 1.2;
}

.fwk-brand__sub {
    font-weight: 400;
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
    letter-spacing: 0.01em;
}

.fwk-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwk-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.fwk-nav__link {
    display: inline-block;
    padding: var(--fwk-space-2) var(--fwk-space-3);
    border-radius: var(--fwk-radius);
    color: var(--fwk-ink-muted);
    text-decoration: none;
    font-size: var(--fwk-text-sm);
    font-weight: 550;
    white-space: nowrap;
}

.fwk-nav__link:hover {
    background: var(--fwk-surface-inset);
    color: var(--fwk-ink);
    text-decoration: none;
}

.fwk-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
    color: var(--fwk-ink);
}

/* Die aktive Seite trägt einen roten Balken, keine Farbfläche: Der Balken
   sagt „hier bin ich", ohne die Zeile zu einem Button zu machen. */
.fwk-nav__link.is-active {
    color: var(--fwk-ink);
    box-shadow: inset 0 -2px 0 var(--fwk-accent);
    border-radius: var(--fwk-radius) var(--fwk-radius) 0 0;
}

.fwk-header__actions {
    display: flex;
    align-items: center;
    gap: var(--fwk-space-2);
}

.fwk-header__actions .fwk-nav__link {
    border: 1px solid var(--fwk-line);
}

@media (max-width: 47.9375rem) {
    .fwk-header {
        position: static;
    }

    .fwk-header__inner {
        gap: var(--fwk-space-2);
        padding: var(--fwk-space-2) 0;
    }

    /* Enger, aber nicht enger als ein Finger breit: Die Ziele bleiben
       mindestens 40 px hoch. */
    .fwk-nav__link {
        padding: var(--fwk-space-2) var(--fwk-space-2);
    }

    .fwk-brand__mark {
        width: 2rem;
        height: 2rem;
    }

    .fwk-brand__name {
        font-size: 1rem;
    }

    /* Zwei Zeilen, nicht drei: Marke und „Anmelden" oben, die Navigation
       darunter über die volle Breite. Lässt man „Anmelden" mit der Navigation
       umbrechen, entsteht auf schmalen Geräten eine dritte, fast leere Zeile. */
    .fwk-brand {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
    }

    /* Der Untertitel ist Schmuck. Auf einem schmalen Gerät kostet er die
       Zeile, in der „Anmelden" noch neben der Marke Platz hätte. */
    .fwk-brand__sub {
        display: none;
    }

    .fwk-header__actions {
        order: 2;
        flex: 0 0 auto;
    }

    /* Die Reihenfolge gilt dem <nav>, nicht der Liste darin: Flex ordnet
       seine direkten Kinder. Eine Angabe an der Liste bliebe wirkungslos –
       und die Navigation stünde über der Marke. */
    .fwk-header__nav {
        order: 3;
        width: 100%;
    }

    .fwk-nav {
        gap: 0 var(--fwk-space-1);
        margin-left: calc(var(--fwk-space-3) * -1);
    }
}

/* --------------------------------------------------------------------------
   15.3 Brotkrümel – genau eine Leiste je Seite
   --------------------------------------------------------------------------
   Es gibt EINE Brotkrümelnavigation, und sie ist dieselbe Struktur, aus der
   die BreadcrumbList für Suchmaschinen entsteht. Eine zweite Pfadzeile
   darunter wäre derselbe Weg ein zweites Mal – für Menschen verwirrend, für
   Suchmaschinen ein Widerspruch.

   Sie scrollt waagrecht, wenn der Pfad lang wird, statt umzubrechen oder
   abgeschnitten zu werden.
   -------------------------------------------------------------------------- */

.fwk-crumbs {
    padding: var(--fwk-space-4) 0 0;
    margin-bottom: var(--fwk-space-4);
    font-size: var(--fwk-text-sm);
}

.fwk-crumbs ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--fwk-space-2);
    list-style: none;
    margin: 0;
    padding: 0 0 var(--fwk-space-1);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.fwk-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-2);
    white-space: nowrap;

    /* Nicht schrumpfen. Ohne das quetscht Flexbox die Krümel auf einem
       schmalen Gerät zusammen, bis ihre Texte übereinanderliegen – die Leiste
       scrollt ja, sie muss nicht passen. */
    flex: 0 0 auto;
}

.fwk-crumbs li + li::before {
    content: "›";
    color: var(--fwk-line-strong);
    font-size: 1rem;
    line-height: 1;
}

.fwk-crumbs a {
    color: var(--fwk-ink-muted);
    text-decoration: none;
}

.fwk-crumbs a:hover {
    color: var(--fwk-accent-dark);
    text-decoration: underline;
}

.fwk-crumbs a:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
    border-radius: 2px;
}

.fwk-crumbs [aria-current="page"] {
    color: var(--fwk-ink);
    font-weight: 550;
}

/* --------------------------------------------------------------------------
   15.4 Seitenkopf
   -------------------------------------------------------------------------- */

/* Der Seitenkopf der öffentlichen Seiten.
   --------------------------------------------------------------------------
   Eine eigene weiße Fläche, wie die Kachelbänder: Sie trennt den Titel von den
   Verfeinerungen darunter, ohne dafür eine Linie und eine zweite Überschrift
   zu brauchen.

   Die Angabe ist hier vollständig, weil dieselbe Klasse weiter oben für den
   Adminbereich definiert ist. Nur einzelne Eigenschaften zu überschreiben hieße,
   dass ein Hintergrund von dort durchschlägt – genau das ist vorher
   unbeabsichtigt passiert. */
.fwk-pagehead {
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: var(--fwk-radius-lg);
    padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
    margin-bottom: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

.fwk-pagehead__title,
.fwk-pagehead h1 {
    font-size: clamp(1.625rem, 1.1rem + 2.4vw, 2.75rem);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 var(--fwk-space-3);
    color: var(--fwk-ink);
}

.fwk-pagehead__lead,
.fwk-pagehead__meta {
    color: var(--fwk-ink-muted);
    font-size: var(--fwk-text-sm);
    margin: 0;
}

.fwk-pagehead__meta + .fwk-pagehead__lead,
.fwk-pagehead__lead + .fwk-pagehead__meta {
    margin-top: var(--fwk-space-2);
}

/* Die Zeile über der Überschrift: Branche, Sparte, Region – wo die Seite
   im Verzeichnis steht. */
.fwk-eyebrow {
    display: inline-block;
    font-size: var(--fwk-text-xs);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fwk-accent-dark);
    margin-bottom: var(--fwk-space-2);
}

.fwk-measure {
    max-width: var(--fwk-measure);
}

/* Kennzahl im Seitenkopf: Anzahl der Betriebe, Hinweis auf noindex. */
.fwk-countline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fwk-space-2) var(--fwk-space-4);
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
    margin: 0;
}

.fwk-countline__value {
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--fwk-ink);
}

/* --------------------------------------------------------------------------
   15.5 Hero mit der Zweifeldsuche
   --------------------------------------------------------------------------
   Zwei Felder, weil die zwei Fragen verschieden sind: *was* und *wo*. Ein
   einziges Feld zwingt beides in eine Zeile und findet dann weniger.

   Desktop: nebeneinander, Button rechts. Mobil: untereinander, Button über die
   ganze Breite. Kein Feld hat eine feste Breite, und der Button wird nie
   abgeschnitten – er ist ein eigenes Rasterfeld, kein Anhängsel.
   -------------------------------------------------------------------------- */

.fwk-hero {
    background:
        linear-gradient(180deg, var(--fwk-surface) 0%, var(--fwk-surface) 60%, var(--fwk-bg) 100%);
    border-bottom: 1px solid var(--fwk-line);
    padding: clamp(2rem, 1rem + 5vw, 3.5rem) 0 clamp(1.75rem, 1rem + 3vw, 2.75rem);
    margin-bottom: var(--fwk-space-6);
}

.fwk-hero__title {
    font-size: clamp(1.875rem, 1.2rem + 3.2vw, 3.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--fwk-space-3);
    max-width: 20ch;
}

@media (min-width: 48rem) {
    .fwk-hero__title {
        max-width: 26ch;
    }
}

.fwk-hero__lead {
    color: var(--fwk-ink-muted);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    max-width: 62ch;
    margin: 0 0 var(--fwk-space-5);
}

.fwk-searchform {
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: var(--fwk-radius-lg);
    box-shadow: var(--fwk-shadow-raised);
    padding: var(--fwk-space-3);
    max-width: 58rem;
}

.fwk-searchform__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fwk-space-3);
    align-items: end;
}

@media (min-width: 48rem) {
    .fwk-searchform__grid {
        /* Zwei Felder und ein Button. `minmax(0, …)` ist das Entscheidende:
           ohne es bestimmt der Inhalt die Mindestbreite, und der Button rutscht
           aus dem Kasten. */
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
    }
}

.fwk-searchform__field {
    display: flex;
    flex-direction: column;
    gap: var(--fwk-space-1);
    min-width: 0;
}

.fwk-searchform__label {
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    color: var(--fwk-ink-muted);
}

.fwk-searchform input[type="search"],
.fwk-searchform input[type="text"],
.fwk-searchform select {
    width: 100%;
    min-width: 0;
    height: 2.875rem;
    padding: 0 var(--fwk-space-3);
    font-size: 1rem;
    color: var(--fwk-ink);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    appearance: none;
}

.fwk-searchform select {
    /* Platz für das eigene Dreieck – ein Select ohne Luft rechts schneidet
       auf iOS den Text ab. */
    padding-right: var(--fwk-space-6);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--fwk-ink-subtle) 50%),
        linear-gradient(135deg, var(--fwk-ink-subtle) 50%, transparent 50%);
    background-position:
        calc(100% - 1.1rem) calc(50% - 2px),
        calc(100% - 0.75rem) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.fwk-searchform input:focus,
.fwk-searchform select:focus {
    outline: none;
    border-color: var(--fwk-accent-dark);
    box-shadow: var(--fwk-focus-ring);
}

.fwk-searchform input::placeholder {
    color: var(--fwk-ink-subtle);
}

.fwk-searchform__submit {
    height: 2.875rem;
    padding: 0 var(--fwk-space-5);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fwk-ink-invert);
    background: var(--fwk-accent-dark);
    border: 1px solid var(--fwk-accent-dark);
    border-radius: var(--fwk-radius);
    cursor: pointer;
    width: 100%;
}

@media (min-width: 48rem) {
    .fwk-searchform__submit {
        width: auto;
    }
}

.fwk-searchform__submit:hover {
    background: var(--fwk-accent-darker);
    border-color: var(--fwk-accent-darker);
    color: var(--fwk-ink-invert);
}

.fwk-searchform__submit:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
}

.fwk-searchform__hint {
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
    margin: var(--fwk-space-3) 0 0;
}

/* Die Suche auf der Ergebnisseite: dieselbe Form, aber als Filterleiste über
   der Trefferliste und mit zwei weiteren Feldern. */
.fwk-searchform--filter {
    box-shadow: var(--fwk-shadow);
    max-width: none;
    margin-bottom: var(--fwk-space-5);
}

@media (min-width: 62rem) {
    .fwk-searchform--filter .fwk-searchform__grid {
        grid-template-columns:
            minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) auto;
    }
}

/* --------------------------------------------------------------------------
   15.6 Abschnitte
   -------------------------------------------------------------------------- */

.fwk-block {
    margin-bottom: clamp(2.25rem, 1.5rem + 2.2vw, 4rem);
}

.fwk-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fwk-space-2) var(--fwk-space-4);
    padding-bottom: var(--fwk-space-3);
    margin-bottom: var(--fwk-space-4);
    border-bottom: 1px solid var(--fwk-line);
}

.fwk-block__title {
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
    font-weight: 650;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--fwk-ink);
}

.fwk-block__hint {
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-subtle);
    margin: 0;
}

.fwk-block__more {
    font-size: var(--fwk-text-sm);
    margin: var(--fwk-space-4) 0 0;
}

.fwk-block__more a {
    color: var(--fwk-accent-dark);
    font-weight: 550;
    text-decoration: none;
}

.fwk-block__more a:hover {
    text-decoration: underline;
}

/* Ein Abschnitt auf eigener Fläche.
   --------------------------------------------------------------------------
   Auf der Startseite stehen sechs Abschnitte untereinander, und vorher sahen
   sie alle gleich aus: Überschrift, Linie, Inhalt. Drei Darstellungsarten
   trennen sie jetzt sichtbar –

     Kacheln       Wirtschaftsbereiche, Bundesländer   auf weißem Band
     Chips         Branchen, Bezirke, Orte             offen auf der Fläche
     Firmenkarten  Unternehmen                         einzelne Karten

   Das Band ist der Unterschied, den man ohne Lesen sieht. */
.fwk-block--band {
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: var(--fwk-radius-lg);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.fwk-block--band .fwk-block__head {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: var(--fwk-space-4);
}

/* Auf dem Band liegen die Kacheln auf der hellen Fläche, nicht auf Weiß auf
   Weiß – sonst wäre die Kachelkante die einzige Trennung. */
.fwk-block--band .fwk-tile {
    background: var(--fwk-surface-muted);
}

.fwk-block--band .fwk-tile:hover {
    background: var(--fwk-surface);
}

/* --------------------------------------------------------------------------
   15.7 Kacheln – Sparten, Branchen, Regionen
   -------------------------------------------------------------------------- */

.fwk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--fwk-space-3);
}

.fwk-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.fwk-tile {
    display: flex;
    flex-direction: column;
    gap: var(--fwk-space-1);
    padding: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-left: 3px solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    text-decoration: none;
    color: var(--fwk-ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.fwk-tile:hover {
    border-color: var(--fwk-line-strong);
    border-left-color: var(--fwk-accent);
    box-shadow: var(--fwk-shadow-raised);
    color: var(--fwk-ink);
    text-decoration: none;
}

.fwk-tile:focus-visible {
    outline: none;
    border-left-color: var(--fwk-accent);
    box-shadow: var(--fwk-focus-ring);
}

.fwk-tile__name {
    font-weight: 650;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.3;
}

.fwk-tile__meta {
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
}

.fwk-tile__count {
    margin-top: auto;
    padding-top: var(--fwk-space-3);
    font-size: var(--fwk-text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fwk-ink);
}

/* Eine Kachel für eine Struktur, die es gibt, in der aber noch kein Betrieb
   erfasst ist. Sie ist kein Verweis – es gibt dort nichts zu sehen. */
.fwk-tile--empty {
    border-left-color: var(--fwk-line);
    background: var(--fwk-surface-muted);
    color: var(--fwk-ink-muted);
    cursor: default;
}

/* --------------------------------------------------------------------------
   15.8 Chips – Verfeinerungen mit Anzahl
   -------------------------------------------------------------------------- */

.fwk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.fwk-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-2);
    max-width: 100%;
    padding: var(--fwk-space-2) var(--fwk-space-3);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: 999px;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink);
    text-decoration: none;
    line-height: 1.3;
}

.fwk-chip > span:first-child {
    overflow-wrap: anywhere;
}

.fwk-chip:hover {
    border-color: var(--fwk-accent-line);
    background: var(--fwk-accent-soft);
    color: var(--fwk-accent-darker);
    text-decoration: none;
}

.fwk-chip:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
}

.fwk-chip__count {
    flex: 0 0 auto;
    padding: 0 var(--fwk-space-2);
    background: var(--fwk-surface-inset);
    border-radius: 999px;
    font-size: var(--fwk-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--fwk-ink-muted);
}

.fwk-chip:hover .fwk-chip__count {
    background: var(--fwk-surface);
}

/* --------------------------------------------------------------------------
   15.9 Firmenkarten
   --------------------------------------------------------------------------
   Eine Karte trägt: Name, Branche und Standort – und wenn keine Branche
   zugeordnet ist, den Tätigkeitswortlaut der Quelle. Der Wortlaut ist das
   echte Datum; ihn weglassen, weil die Zuordnung noch offen ist, wäre eine
   leere Karte, wo es etwas zu sagen gibt.
   -------------------------------------------------------------------------- */

.fwk-companies {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fwk-space-3);
}

.fwk-companies--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

/* Auch die Listenseiten nutzen die Breite. Eine Karte über 1200 px ist
   größtenteils leere Fläche, und die Liste wird unnötig lang. */
@media (min-width: 75rem) {
    .fwk-companies {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    }
}

.fwk-company {
    position: relative;
    padding: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.fwk-company:hover {
    border-color: var(--fwk-line-strong);
    box-shadow: var(--fwk-shadow-raised);
}

.fwk-company__name {
    font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--fwk-space-2);
}

.fwk-company__name a {
    color: var(--fwk-ink);
    text-decoration: none;
}

.fwk-company__name a:hover {
    color: var(--fwk-accent-dark);
    text-decoration: underline;
}

.fwk-company__name a:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
    border-radius: 2px;
}

.fwk-company__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwk-space-2) var(--fwk-space-3);
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
    margin: 0;
}

.fwk-company__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-2);
}

/* Branche und Ort sind Verweise, aber sie sind nicht die Botschaft der Karte.
   Deshalb tragen sie die Textfarbe und zeigen ihre Verweisnatur über die
   Unterlinie, nicht über die Akzentfarbe. Auf einer Listenseite stehen
   zwanzig solcher Zeilen untereinander – in Akzentfarbe wäre die Seite ein
   Farbfeld, und der Akzent verlöre genau dort seine Bedeutung, wo er zählt:
   beim Suchknopf. Die Farbe kommt beim Überfahren. */
.fwk-company__branche {
    color: var(--fwk-ink);
    text-decoration: none;
    font-weight: 550;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-company__branche:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}

.fwk-company__branche:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
    border-radius: 2px;
}

/* Der Tätigkeitswortlaut der Quelle – unverändert, als Zitat erkennbar. */
.fwk-company__activity {
    display: block;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
    margin: var(--fwk-space-2) 0 0;
    padding-left: var(--fwk-space-3);
    border-left: 2px solid var(--fwk-line);
    overflow-wrap: anywhere;
}

.fwk-company__dot {
    color: var(--fwk-line-strong);
}

.fwk-empty {
    padding: var(--fwk-space-5);
    background: var(--fwk-surface);
    border: 1px dashed var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    color: var(--fwk-ink-muted);
    font-size: var(--fwk-text-sm);
    margin: 0;
}

/* --------------------------------------------------------------------------
   15.10 Blätterung
   -------------------------------------------------------------------------- */

.fwk-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fwk-space-3);
    margin-top: var(--fwk-space-5);
    padding-top: var(--fwk-space-4);
    border-top: 1px solid var(--fwk-line);
}

.fwk-pager__info {
    flex: 1 1 14rem;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.fwk-pager__link {
    display: inline-flex;
    align-items: center;
    gap: var(--fwk-space-2);
    padding: var(--fwk-space-2) var(--fwk-space-4);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    font-size: var(--fwk-text-sm);
    font-weight: 550;
    color: var(--fwk-ink);
    text-decoration: none;
    white-space: nowrap;
}

.fwk-pager__link:hover {
    border-color: var(--fwk-accent-dark);
    color: var(--fwk-accent-dark);
    text-decoration: none;
}

.fwk-pager__link:focus-visible {
    outline: none;
    box-shadow: var(--fwk-focus-ring);
}

/* --------------------------------------------------------------------------
   15.11 Firmenprofil
   -------------------------------------------------------------------------- */

.fwk-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fwk-space-5);
    align-items: start;
}

@media (min-width: 62rem) {
    /* Hauptspalte und Seitenspalte, nicht zwei gleichwertige Hälften.
       Die Seitenspalte trägt die Einzelangaben und ist deshalb fest und
       schmal; dass sie unterschiedlich lang enden, ist dann sichtbar
       gewollt und nicht der Eindruck, dass links etwas fehlt. */
    .fwk-profile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: var(--fwk-space-5) clamp(1.5rem, 1rem + 2vw, 3rem);
    }
}

.fwk-card {
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-radius: var(--fwk-radius);
}

.fwk-card + .fwk-card {
    margin-top: var(--fwk-space-4);
}

.fwk-card__head {
    padding: var(--fwk-space-3) var(--fwk-space-4);
    border-bottom: 1px solid var(--fwk-line);
    background: var(--fwk-surface-muted);
    border-radius: var(--fwk-radius) var(--fwk-radius) 0 0;
}

.fwk-card__title {
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.fwk-card__body {
    padding: var(--fwk-space-4);
}

/* Datenzeilen: auf schmalen Geräten untereinander, sonst zweispaltig. Eine
   echte Tabelle mit fixen Spalten würde hier überlaufen. */
.fwk-facts {
    display: grid;
    gap: var(--fwk-space-3);
    margin: 0;
}

.fwk-facts > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fwk-space-1);
    padding-bottom: var(--fwk-space-3);
    border-bottom: 1px solid var(--fwk-line);
}

.fwk-facts > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (min-width: 30rem) {
    .fwk-facts > div {
        grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
        gap: var(--fwk-space-4);
        align-items: baseline;
    }
}

.fwk-facts dt {
    font-size: var(--fwk-text-sm);
    font-weight: 550;
    color: var(--fwk-ink-subtle);
}

.fwk-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.fwk-facts dd a {
    color: var(--fwk-accent-dark);
}

/* Tätigkeiten der Quelle */
.fwk-activities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fwk-space-2);
}

.fwk-activities li {
    padding-left: var(--fwk-space-4);
    position: relative;
    font-size: var(--fwk-text-sm);
    overflow-wrap: anywhere;
}

.fwk-activities li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--fwk-accent);
    border-radius: 1px;
}

/* Standortliste am Profil */
.fwk-locations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fwk-space-3);
}

.fwk-location {
    padding: var(--fwk-space-3);
    border: 1px solid var(--fwk-line);
    border-left: 3px solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    background: var(--fwk-surface);
}

.fwk-location--primary {
    border-left-color: var(--fwk-accent);
}

.fwk-location__address {
    font-weight: 550;
    margin: 0 0 var(--fwk-space-2);
    overflow-wrap: anywhere;
}

.fwk-location__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2);
    margin: 0;
}

/* --------------------------------------------------------------------------
   15.12 Kleinteile
   -------------------------------------------------------------------------- */

.fwk-tag {
    display: inline-block;
    padding: 0.1rem var(--fwk-space-2);
    background: var(--fwk-surface-inset);
    border-radius: var(--fwk-radius);
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    color: var(--fwk-ink-muted);
    white-space: nowrap;
}

.fwk-tag--accent {
    background: var(--fwk-accent-soft);
    color: var(--fwk-accent-darker);
}

.fwk-note {
    padding: var(--fwk-space-4);
    background: var(--fwk-surface);
    border: 1px solid var(--fwk-line);
    border-left: 3px solid var(--fwk-accent);
    border-radius: var(--fwk-radius);
    margin-bottom: var(--fwk-space-5);
}

.fwk-note__title {
    font-weight: 650;
    margin: 0 0 var(--fwk-space-2);
}

.fwk-note p:last-child {
    margin-bottom: 0;
}

.fwk-permalink {
    padding: var(--fwk-space-3) var(--fwk-space-4);
    background: var(--fwk-accent-soft);
    border: 1px solid var(--fwk-accent-line);
    border-radius: var(--fwk-radius);
    font-size: var(--fwk-text-sm);
    margin-bottom: var(--fwk-space-5);
}

.fwk-permalink a {
    color: var(--fwk-accent-darker);
}

.fwk-muted {
    color: var(--fwk-ink-muted);
}

.fwk-subtle {
    color: var(--fwk-ink-subtle);
}

.fwk-text-sm {
    font-size: var(--fwk-text-sm);
}

.fwk-text-xs {
    font-size: var(--fwk-text-xs);
}

/* --------------------------------------------------------------------------
   15.13 Fußzeile
   -------------------------------------------------------------------------- */

.fwk-footer {
    margin-top: var(--fwk-space-8);
    padding: var(--fwk-space-6) 0;
    background: var(--fwk-surface);
    border-top: 1px solid var(--fwk-line);
}

.fwk-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fwk-space-5);
}

.fwk-footer__brand {
    font-weight: 650;
    margin: 0 0 var(--fwk-space-2);
}

.fwk-footer__text {
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
    margin: 0;
    max-width: 44ch;
}

.fwk-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2) var(--fwk-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fwk-text-sm);
}

.fwk-footer__links a {
    color: var(--fwk-ink-muted);
    text-decoration: none;
}

.fwk-footer__links a:hover {
    color: var(--fwk-accent-dark);
    text-decoration: underline;
}

.fwk-footer__meta {
    width: 100%;
    padding-top: var(--fwk-space-4);
    margin-top: var(--fwk-space-4);
    border-top: 1px solid var(--fwk-line);
    font-size: var(--fwk-text-xs);
    color: var(--fwk-ink-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2) var(--fwk-space-4);
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   15.14 Bewegung nur, wenn erwünscht
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fwk-tile,
    .fwk-company {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   16. Die FirmenID am Profil
   --------------------------------------------------------------------------
   Dezent, aber auffindbar. Sie ist kein Schmuck: Wer sie kennt, findet den
   Eintrag über die Suche direkt wieder, und sie ist der Teil der Adresse, der
   sich nie ändert.

   Monospace für den Wert: Eine Kennung wird abgetippt und verglichen, und dafür
   ist eine Schrift mit gleichen Zeichenbreiten die richtige.
   -------------------------------------------------------------------------- */

.fwk-pagehead__fid {
    display: inline-flex;
    align-items: baseline;
    gap: var(--fwk-space-2);
    margin: var(--fwk-space-3) 0 0;
    font-size: var(--fwk-text-xs);
    line-height: 1.4;
}

.fwk-pagehead__fid-label {
    color: var(--fwk-ink-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.fwk-pagehead__fid-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fwk-navy);
    background: var(--fwk-surface-inset);
    border: var(--fwk-border-width) solid var(--fwk-line);
    border-radius: var(--fwk-radius);
    padding: 0.0625rem 0.375rem;
}

/* Die Tätigkeit ist ein Verweis wie jeder andere – erkennbar, aber nicht
   lauter als der Firmenname darüber. */
.fwk-company__activity a,
.fwk-activities a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-company__activity a:hover,
.fwk-company__activity a:focus-visible,
.fwk-activities a:hover,
.fwk-activities a:focus-visible {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}

/* Die Kennung in der Adminliste: schmal, monospace, klar von der externen
   Quellenkennung getrennt. */
.fwk-fid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fwk-navy);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. Schritt 23: Gewichtung statt Gleichförmigkeit
   --------------------------------------------------------------------------

   Vorher sah auf der Startseite jeder Abschnitt gleich aus: Kachel, Kachel,
   Chips, Kachel, Chips, Chips. Sechs gleichwertige Blöcke untereinander sind
   keine Informationsarchitektur, sondern eine Liste – der Leser bekommt
   keinen Hinweis, was wichtig ist und was Beiwerk.

   Deshalb bekommt jede Art von Ziel eine eigene Form:

     Unternehmen        Karten            (schon vorhanden)
     Branchen           Chips             (schon vorhanden)
     Wirtschaftsbereich große Fläche      .fwk-tile--major
     Bundesland         Regionskachel     .fwk-tile--region
     Bezirk, Ort        kompakte Zeile    .fwk-linkrow
   -------------------------------------------------------------------------- */

/* Der Wirtschaftsbereich ist die oberste Ebene der Struktur. Er darf
   entsprechend Platz haben: mehr Innenabstand, kräftigerer Name, sichtbare
   Kante in Markenfarbe. */
.fwk-tile--major {
    border-left-width: 4px;
    border-left-color: var(--fwk-navy);
    padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
    gap: var(--fwk-space-2);
}

.fwk-tile--major .fwk-tile__name {
    font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
}

.fwk-tile--major .fwk-tile__count {
    color: var(--fwk-navy);
}

/* Bundesländer sind viele gleichrangige Ziele. Sie brauchen keine Fläche,
   sondern Ordnung: schmaler, ruhiger, ohne Akzentkante. */
.fwk-grid--regions {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--fwk-space-2);
}

.fwk-tile--region {
    border-left-width: 1px;
    padding: var(--fwk-space-3) var(--fwk-space-4);
    gap: 0;
}

.fwk-tile--region .fwk-tile__name {
    font-size: 1rem;
    font-weight: 600;
}

.fwk-tile--region .fwk-tile__count {
    padding-top: var(--fwk-space-1);
    font-size: var(--fwk-text-xs);
    font-weight: 500;
    color: var(--fwk-ink-muted);
}

/* Bezirke und Orte: die feinste Ebene, und die zahlreichste. Als Chips mit
   Zähler wären das zwei weitere Blöcke im Kachelgewicht. Als Textzeile mit
   Trennpunkten sind sie das, was sie sind – Verweise am Rand. */
.fwk-linkrows {
    margin-top: var(--fwk-space-4);
    padding-top: var(--fwk-space-4);
    border-top: 1px solid var(--fwk-line);
    display: grid;
    gap: var(--fwk-space-2);
}

.fwk-linkrow {
    margin: 0;
    font-size: var(--fwk-text-sm);
    line-height: 1.9;
    color: var(--fwk-ink-muted);
}

.fwk-linkrow__label {
    display: inline-block;
    min-width: 5rem;
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fwk-ink-subtle);
}

.fwk-linkrow a {
    color: var(--fwk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-linkrow a:not(:last-child)::after {
    content: "";
}

.fwk-linkrow a + a {
    margin-left: var(--fwk-space-3);
}

.fwk-linkrow a:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}

.fwk-linkrow__more {
    margin: 0;
    font-size: var(--fwk-text-sm);
}

/* Der Profilkopf. Ein Unternehmensprofil beginnt mit dem Namen, nicht mit
   einer Datentabelle – also mehr Luft, größerer Name, und die Kennung als
   eigene, ruhige Zeile darunter. */
.fwk-pagehead--profile {
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
}

.fwk-pagehead--profile .fwk-pagehead__title {
    margin-bottom: var(--fwk-space-4);
}

.fwk-pagehead--profile .fwk-pagehead__lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

/* Die Einordnungskette am Profil: Feinbranche › Branche › Wirtschaftsbereich.
   Eine Zeile, drei echte Zuordnungen, kein erfundener Zusammenhang. */
.fwk-chain {
    font-size: var(--fwk-text-sm);
    line-height: 1.8;
}

.fwk-chain a {
    color: var(--fwk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-chain a:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}

.fwk-chain__sep {
    margin: 0 var(--fwk-space-2);
    color: var(--fwk-ink-subtle);
}

/* Die Verweisblöcke unter dem Profil brauchen eine Überschrift mit Gewicht –
   .fwk-section__title ist die leise Variante für Formularabschnitte. */
.fwk-profile + .fwk-section .fwk-section__title,
.fwk-shell > .fwk-section > .fwk-section__title {
    font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
    font-weight: 650;
    letter-spacing: -0.005em;
    padding-bottom: var(--fwk-space-3);
    margin-bottom: var(--fwk-space-4);
}

@media (max-width: 575.98px) {
    .fwk-linkrow__label {
        display: block;
        min-width: 0;
        margin-bottom: var(--fwk-space-1);
    }
}

/* --------------------------------------------------------------------------
   18. Adminbereich: Normalbetrieb zuerst
   -------------------------------------------------------------------------- */

/* Die Liste „zu erledigen". Sie steht nur da, wenn sie Einträge hat – eine
   dauerhaft sichtbare, dauerhaft leere Aufgabenliste erzieht zum Wegsehen. */
.fwk-todo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--fwk-space-3);
}

.fwk-todo li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fwk-space-2) var(--fwk-space-3);
}

.fwk-todo a {
    font-weight: 600;
    color: var(--fwk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-todo a:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}

.fwk-todo__count {
    display: inline-block;
    min-width: 1.75rem;
    padding: 0 0.375rem;
    margin-right: var(--fwk-space-2);
    text-align: center;
    background: var(--fwk-accent);
    color: #FFFFFF;
    border-radius: var(--fwk-radius-sm, 4px);
    font-variant-numeric: tabular-nums;
}

/* Eine Angabenliste in Zeilenform, für Statuswerte im Adminbereich. */
.fwk-facts--compact {
    display: grid;
    gap: var(--fwk-space-2);
    margin: 0;
}

.fwk-facts--compact > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2) var(--fwk-space-3);
    padding: 0;
    border: 0;
}

.fwk-facts--compact dt {
    min-width: 9rem;
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fwk-ink-subtle);
}

.fwk-facts--compact dd {
    margin: 0;
    font-size: var(--fwk-text-sm);
    font-variant-numeric: tabular-nums;
}

/* Ein sachlicher Hinweis – keine Warnung, keine Fehlermeldung. Für Zustände,
   die richtig eingestellt sein können und trotzdem genannt gehören. */
.fwk-hint {
    padding: var(--fwk-space-3) var(--fwk-space-4);
    background: var(--fwk-surface-inset, #F5F6F8);
    border-left: 3px solid var(--fwk-navy);
    border-radius: 0 var(--fwk-radius) var(--fwk-radius) 0;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink);
}

/* Erweiterte Wartung: vorhanden, erreichbar, aber nicht im Weg.
   <details>/<summary> braucht dafür kein Skript. */
.fwk-advanced {
    margin-top: var(--fwk-space-6);
    border: 1px dashed var(--fwk-line-strong);
    border-radius: var(--fwk-radius);
    background: var(--fwk-surface);
}

.fwk-advanced > summary {
    cursor: pointer;
    padding: var(--fwk-space-4);
    font-weight: 650;
    color: var(--fwk-ink);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--fwk-space-3);
}

.fwk-advanced > summary::-webkit-details-marker { display: none; }

.fwk-advanced > summary::before {
    content: "▸";
    color: var(--fwk-ink-subtle);
}

.fwk-advanced[open] > summary::before { content: "▾"; }

.fwk-advanced > summary:hover { color: var(--fwk-accent-dark); }

.fwk-advanced__hint {
    font-weight: 400;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
}

.fwk-advanced__body {
    padding: 0 var(--fwk-space-4) var(--fwk-space-4);
    border-top: 1px solid var(--fwk-line);
}

.fwk-advanced__body > .fwk-panel:first-child { margin-top: var(--fwk-space-4); }

/* Eine Regel, die feststeht: angezeigt, nicht angeboten. */
.fwk-rule {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fwk-space-2) var(--fwk-space-3);
    align-items: baseline;
    padding: var(--fwk-space-3) 0;
    border-bottom: 1px solid var(--fwk-line);
    font-size: var(--fwk-text-sm);
}

.fwk-rule:last-child { border-bottom: 0; }

.fwk-rule__label {
    min-width: 11rem;
    font-weight: 600;
    color: var(--fwk-ink);
}

.fwk-rule__value {
    font-variant-numeric: tabular-nums;
}

.fwk-rule__note {
    color: var(--fwk-ink-muted);
    font-size: var(--fwk-text-xs);
}

/* Die Bezirkszeile eines Standorts. Sie steht bei ihrem Standort, weil sie
   nur für ihn gilt – nicht für die Firma. */
.fwk-location__districts {
    margin: var(--fwk-space-2) 0 0;
    font-size: var(--fwk-text-sm);
    color: var(--fwk-ink-muted);
}

.fwk-location__label {
    display: inline-block;
    margin-right: var(--fwk-space-2);
    font-size: var(--fwk-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fwk-ink-subtle);
}

.fwk-location__districts a {
    color: var(--fwk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--fwk-line-strong);
}

.fwk-location__districts a:hover {
    color: var(--fwk-accent-dark);
    border-bottom-color: currentColor;
}