/* ============================================================================
   AIVINOVA DataFusion — Design-System
   Farben, Typografie und Komponenten-Stile übernommen vom Auftritt aivinova.com
   (Montserrat, Teal/Cyan-Palette, 3px-Radius, 2px-Rahmen-Buttons).
   Wird nach Bootstrap geladen und überschreibt dessen Defaults.
   ========================================================================= */

:root {
    /* --- Markenfarben ------------------------------------------------------ */
    --avn-teal-900: #071314; /* tiefstes Teal-Schwarz (Footer)               */
    --avn-teal-800: #112d30; /* dunkle Sektionen, Header                     */
    --avn-teal-700: #163c40;
    --avn-teal-600: #56848d; /* Akzent für Links (Divi-Akzentfarbe)          */
    --avn-teal-500: #51a9b6;
    --avn-cyan-500: #05b3c6; /* helles Akzent-Cyan (Buttons, Hover)          */
    --avn-cyan-400: #4bcfde; /* Logo-Cyan                                    */
    --avn-cyan-300: #82c0c7;
    --avn-cyan-050: #e1f5f8; /* zarter Cyan-Hintergrund                      */

    /* --- Neutrale Töne ---------------------------------------------------- */
    --avn-ink: #1f1f1f;
    --avn-grey-600: #555555;
    --avn-grey-300: #d9d9d9;
    --avn-grey-200: #e2e2e2;
    --avn-grey-100: #f3f3f3;
    --avn-grey-050: #f6f6f6;
    --avn-white: #ffffff;

    /* --- Status ----------------------------------------------------------- */
    --avn-success: #16a08b;
    --avn-warning: #fcb900;
    --avn-danger: #cf2e2e;

    /* --- Maße ------------------------------------------------------------- */
    --avn-max-width: 1460px; /* Container-Breite wie auf aivinova.com        */
    --avn-radius: 3px; /* Divi-Button-Radius                          */
    --avn-radius-lg: 6px;
    --avn-header-height: 5rem;
    --avn-transition: 300ms ease;
    --avn-font: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* --- Bootstrap-Variablen auf die Marke umbiegen ----------------------- */
    --bs-primary: #56848d;
    --bs-primary-rgb: 86, 132, 141;
    --bs-link-color: #56848d;
    --bs-link-color-rgb: 86, 132, 141;
    --bs-link-hover-color: #05b3c6;
    --bs-body-color: #1f1f1f;
    --bs-body-font-family: var(--avn-font);
    --bs-border-radius: var(--avn-radius);
    --bs-border-radius-sm: var(--avn-radius);
    --bs-border-radius-lg: var(--avn-radius-lg);
}

/* ============================================================================
   Basis-Typografie
   ========================================================================= */

html {
    font-size: 16px;
}

html, body {
    font-family: var(--avn-font);
    color: var(--avn-ink);
    background-color: var(--avn-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-weight: 400;
    line-height: 1.7em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--avn-font);
    color: var(--avn-teal-800);
    font-weight: 600;
    line-height: 1.25em;
    margin-bottom: 0.6em;
}

h1, .h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2, .h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

h3, .h3 {
    font-size: 1.35rem;
}

h4, .h4 {
    font-size: 1.1rem;
}

h5, .h5 {
    font-size: 1rem;
    font-weight: 600;
}

h1:focus,
h2:focus {
    outline: none;
}

p {
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.7em;
    color: var(--avn-grey-600);
}

a, .btn-link {
    color: var(--avn-teal-600);
    text-decoration: none;
    transition: color var(--avn-transition);
}

    a:hover, .btn-link:hover {
        color: var(--avn-cyan-500);
        text-decoration: underline;
    }

code {
    font-family: 'Courier New', Courier, monospace;
    color: var(--avn-teal-700);
    background-color: var(--avn-cyan-050);
    padding: 0.1em 0.35em;
    border-radius: var(--avn-radius);
}

.text-secondary {
    color: var(--avn-grey-600) !important;
}

/* Kleines Cyan-Label über einer Überschrift — Eyebrow/Kicker von aivinova.com */
.avn-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--avn-cyan-500);
    margin-bottom: 0.75rem;
}

/* ============================================================================
   Layout-Bausteine
   ========================================================================= */

.avn-container {
    width: 100%;
    max-width: var(--avn-max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (min-width: 981px) {
    .avn-container {
        padding-inline: 2.5rem;
    }
}

/* Sektion mit dunklem Teal-Hintergrund (heller Text) */
.avn-section-dark {
    background-color: var(--avn-teal-800);
    color: var(--avn-white);
}

    .avn-section-dark h1,
    .avn-section-dark h2,
    .avn-section-dark h3,
    .avn-section-dark h4 {
        color: var(--avn-white);
    }

    .avn-section-dark .lead,
    .avn-section-dark .text-secondary {
        color: var(--avn-cyan-300) !important;
    }

/* Sektion mit zartem Cyan-Hintergrund */
.avn-section-tint {
    background-color: var(--avn-cyan-050);
}

.avn-section-muted {
    background-color: var(--avn-grey-100);
}

/* ============================================================================
   Buttons — Divi-Stil: 2px-Rahmen, 3px-Radius, weiche Übergänge
   ========================================================================= */

.btn {
    font-family: var(--avn-font);
    font-weight: 500;
    border-width: 2px;
    border-style: solid;
    border-radius: var(--avn-radius);
    padding: 0.45em 1.3em;
    line-height: 1.7em;
    transition: color var(--avn-transition), background-color var(--avn-transition), border-color var(--avn-transition);
}

.btn-lg {
    font-size: 1.05rem;
    padding: 0.55em 1.8em;
}

.btn-sm {
    font-size: 0.85rem;
    padding: 0.3em 0.9em;
    border-width: 1px;
}

.btn-primary {
    color: var(--avn-white);
    background-color: var(--avn-teal-600);
    border-color: var(--avn-teal-600);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        color: var(--avn-white);
        background-color: var(--avn-cyan-500);
        border-color: var(--avn-cyan-500);
    }

.btn-outline-primary {
    color: var(--avn-teal-600);
    background-color: transparent;
    border-color: var(--avn-teal-600);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        color: var(--avn-white);
        background-color: var(--avn-teal-600);
        border-color: var(--avn-teal-600);
    }

.btn-secondary {
    color: var(--avn-white);
    background-color: var(--avn-teal-800);
    border-color: var(--avn-teal-800);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: var(--avn-white);
        background-color: var(--avn-teal-700);
        border-color: var(--avn-teal-700);
    }

.btn-outline-secondary {
    color: var(--avn-teal-800);
    background-color: transparent;
    border-color: var(--avn-grey-300);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: var(--avn-white);
        background-color: var(--avn-teal-800);
        border-color: var(--avn-teal-800);
    }

/* Heller Button auf dunklem Grund (Hero-CTA) */
.btn-avn-light {
    color: var(--avn-teal-800);
    background-color: var(--avn-white);
    border-color: var(--avn-white);
}

    .btn-avn-light:hover,
    .btn-avn-light:focus {
        color: var(--avn-teal-800);
        background-color: var(--avn-cyan-400);
        border-color: var(--avn-cyan-400);
    }

.btn-avn-ghost {
    color: var(--avn-white);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}

    .btn-avn-ghost:hover,
    .btn-avn-ghost:focus {
        color: var(--avn-teal-800);
        background-color: var(--avn-white);
        border-color: var(--avn-white);
    }

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 179, 198, 0.3);
    outline: none;
}

/* ============================================================================
   Cards
   ========================================================================= */

.card {
    border: 1px solid var(--avn-grey-200);
    border-radius: var(--avn-radius-lg);
    background-color: var(--avn-white);
    box-shadow: 0 1px 2px rgba(7, 19, 20, 0.04);
    transition: box-shadow var(--avn-transition), border-color var(--avn-transition);
}

    .card:hover {
        box-shadow: 0 6px 20px rgba(7, 19, 20, 0.08);
    }

.card-body {
    padding: 1.6rem;
}

.card-title {
    color: var(--avn-teal-800);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Feature-Karte mit Cyan-Kante links — Motiv der Leistungs-Kacheln */
.avn-feature-card {
    border-left: 3px solid var(--avn-cyan-400);
    height: 100%;
}

/* ============================================================================
   Formulare
   ========================================================================= */

.form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--avn-teal-800);
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    font-family: var(--avn-font);
    border: 1px solid var(--avn-grey-300);
    border-radius: var(--avn-radius);
    padding: 0.55rem 0.85rem;
    color: var(--avn-ink);
    transition: border-color var(--avn-transition), box-shadow var(--avn-transition);
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--avn-cyan-500);
    }

.form-text {
    color: var(--avn-grey-600);
    font-size: 0.825rem;
}

.form-check-input:checked {
    background-color: var(--avn-teal-600);
    border-color: var(--avn-teal-600);
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--avn-grey-600);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Blazor-Validierung */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--avn-success);
}

.invalid {
    outline: 1px solid var(--avn-danger);
}

.validation-message {
    color: var(--avn-danger);
    font-size: 0.875rem;
}

.text-danger {
    color: var(--avn-danger) !important;
}

/* ============================================================================
   Tabellen
   ========================================================================= */

.table {
    --bs-table-striped-bg: var(--avn-grey-050);
    border-color: var(--avn-grey-200);
}

    .table > thead > tr > th {
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--avn-teal-600);
        border-bottom: 2px solid var(--avn-grey-200);
        white-space: nowrap;
    }

    .table > tbody > tr > td {
        vertical-align: middle;
    }

/* ============================================================================
   Badges & Alerts
   ========================================================================= */

.badge {
    font-weight: 500;
    letter-spacing: 0.03em;
    border-radius: var(--avn-radius);
    padding: 0.4em 0.7em;
}

.badge.bg-success {
    background-color: var(--avn-success) !important;
}

.badge.bg-secondary {
    background-color: var(--avn-grey-600) !important;
}

.badge.bg-danger {
    background-color: var(--avn-danger) !important;
}

.alert {
    border-radius: var(--avn-radius);
    border: 1px solid transparent;
    border-left-width: 3px;
    padding: 0.9rem 1.1rem;
}

.alert-success {
    color: #0c5f52;
    background-color: #e7f7f4;
    border-color: var(--avn-success);
}

.alert-danger {
    color: #7d1c1c;
    background-color: #fdeeee;
    border-color: var(--avn-danger);
}

.alert-warning {
    color: #6b4d00;
    background-color: #fff8e5;
    border-color: var(--avn-warning);
}

.alert-info {
    color: var(--avn-teal-700);
    background-color: var(--avn-cyan-050);
    border-color: var(--avn-cyan-500);
}

/* ============================================================================
   Blazor-Fehleranzeige
   ========================================================================= */

.blazor-error-boundary {
    background: var(--avn-danger);
    padding: 1rem 1.25rem;
    color: var(--avn-white);
    border-radius: var(--avn-radius);
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten."
    }

/* ============================================================================
   Seiten-Bausteine: Hero, Seitenkopf, Inhaltsbereich
   Nachbau der Sektionsstruktur von aivinova.com (dunkles Band, dann Inhalt).
   Global statt scoped, weil sie von allen Seitenkomponenten genutzt werden.
   ========================================================================= */

/* Großer Einstiegs-Hero (Startseite) */
.avn-hero {
    background-color: var(--avn-teal-800);
    background-image: linear-gradient(120deg, var(--avn-teal-900) 0%, var(--avn-teal-800) 55%, var(--avn-teal-700) 100%);
    color: var(--avn-white);
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}

    /* Weicher Cyan-Schimmer rechts — Aufgreifen der Bildsprache der Website */
    .avn-hero::after {
        content: "";
        position: absolute;
        top: -30%;
        right: -10%;
        width: 45rem;
        height: 45rem;
        background: radial-gradient(circle, rgba(75, 207, 222, 0.18) 0%, rgba(75, 207, 222, 0) 65%);
        pointer-events: none;
    }

.avn-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 46rem;
}

.avn-hero h1 {
    color: var(--avn-white);
    margin-bottom: 1rem;
}

.avn-hero__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 300;
    line-height: 1.7em;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2rem;
}

.avn-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Kompakter Seitenkopf für Unterseiten */
.avn-page-header {
    background-color: var(--avn-teal-800);
    color: var(--avn-white);
    padding-block: 2.5rem;
}

    .avn-page-header h1 {
        color: var(--avn-white);
        margin-bottom: 0.5rem;
        font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    }

.avn-page-header__lead {
    margin: 0;
    max-width: 52rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
}

/* Inhaltsbereich unterhalb von Hero/Seitenkopf */
.avn-content {
    width: 100%;
    max-width: var(--avn-max-width);
    margin-inline: auto;
    padding: 2.5rem 1.5rem 1rem;
}

@media (min-width: 981px) {
    .avn-content {
        padding-inline: 2.5rem;
    }
}

/* Kachelraster für Feature-/Kennzahlen-Karten */
.avn-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Hinweis-Box für noch nicht fertige Funktionsbereiche */
.avn-note {
    border-left: 3px solid var(--avn-cyan-400);
    background-color: var(--avn-cyan-050);
    border-radius: var(--avn-radius);
    padding: 1rem 1.25rem;
    color: var(--avn-teal-700);
}

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

/* Anmeldeseite: zwei Karten nebeneinander (Kundenzugang | Microsoft-SSO) */
.avn-login {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    max-width: 56rem;
}

.avn-login__divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-block: 1.25rem;
    color: var(--avn-grey-600);
    font-size: 0.85rem;
}

    .avn-login__divider::before,
    .avn-login__divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: var(--avn-grey-200);
    }

/* ============================================================================
   Stammdaten-Formulare (Kunden, Benutzer)
   Mehrspaltiges Raster, damit zehn Felder nicht zu einer langen Spalte werden.
   ========================================================================= */

.avn-form-card {
    max-width: 62rem;
}

.avn-form-card fieldset {
    border: 0;
    margin: 0 0 1.25rem;
    padding: 0;
}

.avn-form-legend {
    float: none; /* Bootstrap-Reboot macht legend sonst 100% breit */
    width: auto;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--avn-teal-600);
    padding: 0 0 0.6rem;
    margin: 0;
    border-bottom: 1px solid var(--avn-grey-200);
    margin-bottom: 1rem;
    display: block;
}

.avn-form-grid {
    display: grid;
    gap: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    align-items: start;
}

/* Feld über die volle Rasterbreite (Firmenname, Straße, Notizen) */
.avn-form-field--wide {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    /* PLZ braucht keine 15rem — schmales Feld neben dem Ort */
    .avn-form-field--narrow {
        max-width: 9rem;
    }
}

.avn-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--avn-grey-200);
}

/* Pflichtfeld-Markierung */
.avn-required {
    color: var(--avn-danger);
    font-weight: 600;
}

/* Kennwerte-Zeile in Detailkarten (Benutzerprofil) */
.avn-facts {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
}

.avn-facts dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--avn-teal-600);
    margin-bottom: 0.15rem;
}

.avn-facts dd {
    margin: 0 0 0.75rem;
}

/* ============================================================================
   Kontoeinstellungen (/Account/Manage) und 2FA-Einrichtung
   ========================================================================= */

.avn-manage {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 861px) {
    .avn-manage {
        grid-template-columns: 15rem 1fr;
    }
}

.avn-manage-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.avn-manage-nav a {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: var(--avn-radius);
    border-left: 3px solid transparent;
    color: var(--avn-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

    .avn-manage-nav a:hover {
        background-color: var(--avn-grey-050);
        text-decoration: none;
    }

    .avn-manage-nav a.active {
        background-color: var(--avn-cyan-050);
        border-left-color: var(--avn-cyan-400);
        color: var(--avn-teal-800);
    }

/* --- Schritt-für-Schritt-Anleitung (Authenticator einrichten) ----------- */

.avn-steps {
    list-style: none;
    counter-reset: avn-step;
    margin: 0;
    padding: 0;
}

.avn-steps > li {
    counter-increment: avn-step;
    position: relative;
    padding-left: 3rem;
    padding-bottom: 2rem;
}

    /* Nummernkreis links, verbunden durch eine dünne Linie */
    .avn-steps > li::before {
        content: counter(avn-step);
        position: absolute;
        left: 0;
        top: 0;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--avn-teal-800);
        color: var(--avn-white);
        font-size: 0.85rem;
        font-weight: 600;
    }

    .avn-steps > li:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 1rem;
        top: 2.35rem;
        bottom: 0.35rem;
        width: 1px;
        background-color: var(--avn-grey-200);
    }

/* --- QR-Code + Schlüssel ----------------------------------------------- */

.avn-authenticator {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-block: 1rem;
}

.avn-qr {
    flex: 0 0 auto;
    width: 11rem;
    height: 11rem;
    padding: 0.75rem;
    /* QR-Codes brauchen einen hellen Grund — auch im dunklen Umfeld. */
    background-color: var(--avn-white);
    border: 1px solid var(--avn-grey-200);
    border-radius: var(--avn-radius-lg);
}

    .avn-qr svg {
        display: block;
        width: 100%;
        height: 100%;
    }

.avn-authenticator__key {
    flex: 1 1 14rem;
    min-width: 0;
}

    .avn-authenticator__key code {
        display: inline-block;
        font-size: 1rem;
        letter-spacing: 0.06em;
        word-break: break-all;
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.5rem;
    }

.avn-authenticator__verify {
    max-width: 18rem;
}

/* ============================================================================
   Datentabellen: Werkzeugleiste, Status, Aktionen

   Ein Gerüst für ALLE Übersichten (Kunden, Benutzer, Projekte, API-Zugänge)
   statt je Seite eigener Abstände. Der Aufbau ist überall derselbe: Tabelle als
   Einstieg, darüber links die Überschrift und rechts die Hauptaktion.
   ========================================================================= */

.avn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

    .avn-toolbar__text {
        min-width: 0;
    }

    .avn-toolbar__title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
    }

    .avn-toolbar__hint {
        margin: 0.3rem 0 0;
        color: var(--avn-grey-600);
        font-size: 0.875rem;
    }

    /* Die Hauptaktion steht rechts — auf schmalen Schirmen unter dem Text. */
    .avn-toolbar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-left: auto;
    }

/* Waagerechter Überlauf bleibt in der Tabelle, nicht im Seitenkörper. */
.avn-table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.avn-table {
    margin-bottom: 0;
}

    .avn-table > thead > tr > th,
    .avn-table > tbody > tr > td {
        padding: 0.7rem 0.75rem;
    }

    .avn-table > tbody > tr > td {
        vertical-align: middle;
    }

    /* Die Statusspalte nimmt nur, was sie braucht. */
    .avn-table__status {
        width: 1%;
        white-space: nowrap;
    }

    /* Die Aktionsspalte bekommt eine feste Breite für ZWEI Knöpfe je Reihe.
       Ohne sie schrumpft die Spalte auf die Mindestbreite und jeder Knopf
       landet in einer eigenen Zeile. */
    .avn-table__actions {
        width: 21.5rem;
        text-align: right;
    }

/* Statusmarke: feste Mindestbreite, damit die Spalte über die Zeilen nicht
   zappelt — „Aktiv" und „Gesperrt" sind sonst unterschiedlich breit. */
.avn-status {
    display: inline-block;
    min-width: 7rem;
    text-align: center;
}

/* Aktionsknöpfe einer Zeile. gap wirkt in BEIDE Richtungen: bricht die Reihe
   um, klebt die zweite Zeile nicht an der ersten. Die Mindestbreite macht die
   Knöpfe gleich breit, statt sie am Text hängen zu lassen. */
.avn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

    .avn-actions .btn {
        min-width: 10.5rem;
    }

    /* Ein Hinweis statt eines Knopfes („Sie selbst") soll nicht mitwachsen. */
    .avn-actions__note {
        align-self: center;
        color: var(--avn-grey-600);
        font-size: 0.875rem;
    }

/* Leere Übersicht: kein nackter Satz, sondern eine ruhige Fläche. */
.avn-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--avn-grey-600);
    background: var(--avn-grey-050);
    border: 1px dashed var(--avn-grey-300);
    border-radius: var(--avn-radius-lg);
    margin-bottom: 1.5rem;
}

/* ------------------------------------------------------------------ Ablauf
   Die Stufen einer Prüfung als Kette. Sie sind eine REIHENFOLGE, und jede baut
   auf der vorigen auf — eine Tabelle zeigt sechs gleichrangige Zeilen, die
   Kette zeigt, dass ohne Webprofil keine Prüfungen kommen.

   Sie bricht bei schmalem Fenster von selbst um: die Schritte sind Flex-Kinder
   mit einer Mindestbreite, und die Verbindungslinie liegt als Rahmen am
   Element, nicht als eigene Grafik dazwischen. Damit stimmt sie in jeder
   Zeilenzahl.                                                               */
.avn-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.avn-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1 1 13rem;
    min-width: 12rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--avn-grey-300);
    border-left: 3px solid var(--avn-cyan-500);
    border-radius: var(--avn-radius-lg);
    background: var(--avn-white);
}

    .avn-flow-step.is-skipped {
        border-left-color: var(--avn-grey-300);
        background: var(--avn-grey-050);
        color: var(--avn-grey-600);
    }

.avn-flow-mark {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--avn-white);
    background: var(--avn-success);
}

    .avn-flow-step.is-skipped .avn-flow-mark {
        background: var(--avn-grey-300);
        color: var(--avn-grey-600);
    }

.avn-flow-body {
    min-width: 0;
}

.avn-flow-name {
    font-weight: 600;
    line-height: 1.25;
}

.avn-flow-summary {
    font-size: 0.8rem;
    color: var(--avn-grey-600);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.avn-flow-time {
    font-size: 0.75rem;
    color: var(--avn-grey-600);
    margin-top: 0.2rem;
}

/* Der normalisierte Wert unter dem gelieferten: die mittlere der drei Ebenen,
   klein und zurückhaltend — sie erklärt, sie behauptet nicht.               */
.avn-normalized {
    font-size: 0.78rem;
    color: var(--avn-grey-600);
    margin-top: 0.15rem;
}