/* ============================================================
   GHP Onboarding — GHP-Design-System v2.0 (Petrol / Lime)
   Kanonische Referenz: SecondBrain/Skills/Shared/GHP-Design/
   design-system/01–07. Marken-Fonts lizenziert, selbst gehostet
   unter app/static/fonts (nie in oeffentliche Repos). Ohne die
   woff2 greifen die Fallback-Stacks (Georgia bzw. Helvetica/Arial).
   Klassennamen sind der stabile Vertrag mit den Templates.
   ============================================================ */

/* --- Webfonts --- */
@font-face { font-family: 'TT Ramillas'; src: url('../fonts/tt_ramillas_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Ramillas'; src: url('../fonts/tt_ramillas_medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('../fonts/metrosans_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('../fonts/metrosans_medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('../fonts/metrosans_semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    /* Basisfarben */
    --color-mittelpetrol: #01545C;
    --color-hellpetrol:   #6A878A;   /* nur Newsletter-Flaeche (hier ungenutzt) */
    --color-lime:         #D9F80A;
    --color-lime-soft:    #F9FED6;
    --color-hellgrau:     #F3F2F1;
    --color-weiss:        #FFFFFF;

    /* Status-Farben: nur UI-Feedback, nie Marken-Akzent */
    --color-success: #2F7D62;  --color-success-soft: #E4F1EB;
    --color-warning: #B7791F;  --color-warning-soft: #FBEFD6;
    --color-error:   #B23A2E;  --color-error-soft:   #F7E2DE;
    --color-info: var(--color-mittelpetrol); --color-info-soft: #E2ECED;

    /* Flaechen */
    --surface-page:             var(--color-weiss);
    --surface-highlight:        var(--color-mittelpetrol);
    --surface-highlight-subtle: var(--color-hellgrau);
    --surface-card:             var(--color-weiss);
    --surface-form-field:       var(--color-hellgrau);
    --surface-footer:           var(--color-mittelpetrol);
    --surface-nav:              var(--color-mittelpetrol);

    /* Text */
    --text-body:            var(--color-mittelpetrol);
    --text-heading:         var(--color-mittelpetrol);
    --text-on-highlight:    var(--color-weiss);
    --text-card:            var(--color-mittelpetrol);
    /* Sekundaer-/Hilfstext: aus Petrol abgeleitet, bleibt im Token-System */
    --text-subtle: color-mix(in srgb, var(--color-mittelpetrol) 72%, #6A878A 28%);
    --text-faint:  color-mix(in srgb, var(--color-mittelpetrol) 55%, #9AA8A5 45%);

    /* Linien/Haarlinien auf hellen Flaechen */
    --hairline:        var(--color-hellgrau);
    --hairline-strong: color-mix(in srgb, var(--color-mittelpetrol) 18%, var(--color-hellgrau) 82%);

    /* Links */
    --link-color:         var(--color-mittelpetrol);
    --link-hover:         var(--color-lime);
    --link-on-dark:       var(--color-lime);
    --link-on-dark-hover: var(--color-weiss);
    --highlight-marker:   var(--color-lime-soft);

    /* Buttons */
    --button-bg:            var(--color-mittelpetrol);
    --button-fg:            var(--color-weiss);
    --button-hover-bg:      var(--color-lime);
    --button-hover-fg:      var(--color-mittelpetrol);
    --button-card-bg:       var(--color-lime);
    --button-card-fg:       var(--color-mittelpetrol);
    --button-card-hover-bg: var(--color-mittelpetrol);
    --button-card-hover-fg: var(--color-weiss);

    /* Navigation */
    --nav-link:        var(--color-weiss);
    --nav-link-active: var(--color-lime);

    /* Typografie */
    --font-display: 'TT Ramillas', Georgia, serif;
    --font-body:    'Metro Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
    --text-h4: 20px; --text-base: 17px; --text-small: 14px;
    --leading-heading: 1.15; --leading-body: 1.65;
    --tracking-caps: 0.12em;

    /* Radien, Schatten, Layout */
    --radius-button: 999px;
    --radius-field: 6px;
    --radius-card: 12px;
    --shadow-card: 0 8px 30px rgba(1, 84, 92, 0.10);
    --shadow-card-hover: 0 12px 40px rgba(1, 84, 92, 0.16);
    --container-max: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--text-base);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--leading-heading);
    color: var(--text-heading);
}

b, strong { font-weight: 600; }

a { color: var(--link-color); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--link-hover); }

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--color-hellgrau);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
}

:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 2px;
}

/* Inline-Line-Icons (macros.html: icon()) an der Textlinie ausrichten */
svg.icon { vertical-align: -0.125em; flex: 0 0 auto; }

/* --- Navbar (Petrol-Flaeche, weisse Bildmarke) --- */
.navbar {
    background: var(--surface-nav);
    color: var(--color-weiss);
    padding: 0 2rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-weiss);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}
.nav-logo:hover { color: var(--nav-link-active); }
.nav-logo img { height: 26px; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.nav-user { font-size: 0.9rem; color: color-mix(in srgb, var(--color-weiss) 80%, transparent); }
.nav-link {
    color: var(--nav-link);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s ease;
}
.nav-link:hover { color: var(--nav-link-active); }

/* --- System-Banner (Betriebsmodus, Mock/Live-Hinweise, base.html) --- */
.system-banner {
    margin: 0.6rem 1.5rem 0;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-field);
    border-left: 4px solid;
    font-size: 0.9rem;
}
.system-banner .icon { vertical-align: -3px; margin-right: 0.3rem; }
.system-banner-error   { background: var(--color-error-soft);   border-color: var(--color-error);   color: var(--color-error); }
.system-banner-warning { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.system-banner-success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.system-banner-info    { background: var(--color-info-soft);    border-color: var(--color-info);    color: var(--color-info); }
.system-banner code { background: color-mix(in srgb, var(--color-mittelpetrol) 8%, transparent); }

/* Alt-Klasse der Mock-Hinweise: gleiche Optik wie system-banner-warning */
.mock-banner {
    margin: 0.6rem 1.5rem 0;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-field);
    border-left: 4px solid var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 0.9rem;
}
.mock-banner strong { margin-right: 0.4rem; }
.mock-banner code { background: color-mix(in srgb, var(--color-mittelpetrol) 8%, transparent); }

/* --- Container --- */
.container {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    flex: 1;
}

/* --- Flash Messages (Status-Farben) --- */
.flash-messages { margin-bottom: 1rem; }
.flash {
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-field);
    border-left: 4px solid;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.flash-erfolg  { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.flash-fehler  { background: var(--color-error-soft);   border-color: var(--color-error);   color: var(--color-error); }
.flash-warnung { background: var(--color-warning-soft); border-color: var(--color-warning); color: var(--color-warning); }
.flash-info    { background: var(--color-info-soft);    border-color: var(--color-info);    color: var(--color-info); }

/* --- Hinweis-Boxen in Karten (Statusfarbe + linke Kante) --- */
.hinweis-box {
    margin: 0.8rem 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-field);
    border-left: 4px solid;
    font-size: 0.92rem;
}
.hinweis-error   { background: var(--color-error-soft);   border-color: var(--color-error); }
.hinweis-error strong   { color: var(--color-error); }
.hinweis-warning { background: var(--color-warning-soft); border-color: var(--color-warning); }
.hinweis-warning strong { color: var(--color-warning); }
.hinweis-success { background: var(--color-success-soft); border-color: var(--color-success); }
.hinweis-success strong { color: var(--color-success); }
.hinweis-info    { background: var(--color-info-soft);    border-color: var(--color-info); }
.hinweis-info strong    { color: var(--color-info); }

/* --- Karten --- */
.card {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.2rem;
    color: var(--text-card);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--hairline);
}
.card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--text-heading);
}
.card h3, .detail-section h3 {
    font-size: 1.15rem;
}

/* Seitenkopf ohne Karte (Dashboard, Archiv, Versand-Log) */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.page-header .card-title { font-size: 1.5rem; }

/* --- Statistik-Karten --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    padding: 1.2rem;
    box-shadow: var(--shadow-card);
    text-align: center;
}
.stat-number {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    color: var(--color-mittelpetrol);
    line-height: 1.2;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--text-subtle);
    margin-top: 0.3rem;
}

/* --- Tabellen --- */
.table-wrapper { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
th {
    background: var(--color-mittelpetrol);
    color: var(--color-weiss);
    padding: 0.7rem 0.8rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}
td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}
tr:nth-child(even) td { background: color-mix(in srgb, var(--color-hellgrau) 55%, var(--color-weiss)); }
tr:hover td { background: var(--highlight-marker); }

/* --- Status-Badges (Statusfarben, Pill-Form) --- */
.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-button);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-angelegt             { background: var(--color-hellgrau);     color: var(--text-subtle); }
.badge-link_versendet       { background: var(--color-info-soft);    color: var(--color-info); }
.badge-formular_ausgefuellt { background: var(--color-info-soft);    color: var(--color-info); }
.badge-register_abgefragt   { background: var(--color-success-soft); color: var(--color-success); }
.badge-risiko_beurteilt     { background: var(--color-success-soft); color: var(--color-success); }
.badge-risiko_freigabe_offen{ background: var(--color-warning-soft); color: var(--color-warning); }
.badge-datev_vorbereitet    { background: var(--color-success-soft); color: var(--color-success); }
.badge-datev_geprueft       { background: var(--color-success-soft); color: var(--color-success); }
.badge-dokumente_versendet  { background: var(--color-info-soft);    color: var(--color-info); }
.badge-unterschrieben       { background: var(--color-success-soft); color: var(--color-success); }
.badge-archiviert           { background: var(--color-mittelpetrol); color: var(--color-weiss); }
.badge-pausiert             { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-abgebrochen          { background: var(--color-error-soft);   color: var(--color-error); }
/* Freigabe-Status (fall_detail: Freigaben-Tabelle) */
.badge-offen        { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-freigegeben  { background: var(--color-success-soft); color: var(--color-success); }
.badge-abgelehnt    { background: var(--color-error-soft);   color: var(--color-error); }
.badge-fehler       { background: var(--color-error-soft);   color: var(--color-error); }

/* Kleine Kennzeichnungen (DEMO-MODUS, VERSANDT, DATEV-Zweig-Status) */
.badge-mini {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-button);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-mini-neutral { background: var(--color-hellgrau);     color: var(--text-subtle); }
.badge-mini-info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge-mini-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-mini-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-mini-error   { background: var(--color-error-soft);   color: var(--color-error); }

/* --- Buttons (Pill, Petrol -> Lime) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--button-bg); color: var(--button-fg); }
.btn-primary:hover { background: var(--button-hover-bg); color: var(--button-hover-fg); }
.btn-secondary {
    background: var(--surface-card);
    color: var(--text-body);
    border-color: var(--hairline-strong);
}
.btn-secondary:hover { background: var(--color-lime-soft); border-color: var(--color-mittelpetrol); color: var(--text-body); }
.btn-success { background: var(--color-success); color: var(--color-weiss); }
.btn-success:hover { background: color-mix(in srgb, var(--color-success) 82%, black); color: var(--color-weiss); }
.btn-danger { background: var(--color-error); color: var(--color-weiss); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-error) 82%, black); color: var(--color-weiss); }
.btn-warning { background: var(--color-warning); color: var(--color-weiss); }
.btn-warning:hover { background: color-mix(in srgb, var(--color-warning) 82%, black); color: var(--color-weiss); }
.btn-sm { padding: 0.3rem 0.9rem; font-size: 0.8rem; }

/* --- Formulare (Hellgrau-Fuellung, Lime-Fokusring) --- */
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: var(--text-small);
    color: var(--text-body);
}
.form-group small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-subtle);
}
.form-control {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: var(--radius-field);
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--surface-form-field);
    color: var(--text-body);
    transition: box-shadow 0.25s ease;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-lime);
}
select.form-control { cursor: pointer; }
textarea.form-control { min-height: 80px; resize: vertical; }
input[type="file"].form-control { background: var(--surface-form-field); }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* --- Fortschrittsbalken --- */
.progress-bar {
    background: var(--color-hellgrau);
    border-radius: var(--radius-button);
    height: 10px;
    overflow: hidden;
    margin: 0.8rem 0;
}
.progress-fill {
    height: 100%;
    background: var(--color-mittelpetrol);
    border-radius: var(--radius-button);
    transition: width 0.5s ease;
}

/* --- Phasen-Stepper (erledigt Petrol, aktiv Lime) --- */
.stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 1rem 0;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    position: relative;
}
.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--hairline-strong);
    background: var(--color-weiss);
    color: var(--text-subtle);
    z-index: 1;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.step.done .step-circle {
    background: var(--color-mittelpetrol);
    border-color: var(--color-mittelpetrol);
    color: var(--color-weiss);
}
.step.done .step-circle[onclick]:hover {
    background: var(--color-lime);
    border-color: var(--color-lime);
    color: var(--color-mittelpetrol);
}
.step.active .step-circle {
    background: var(--color-lime);
    border-color: var(--color-lime);
    color: var(--color-mittelpetrol);
    box-shadow: 0 0 0 3px var(--color-lime-soft);
}
.step-label {
    font-size: 0.7rem;
    text-align: center;
    margin-top: 0.4rem;
    color: var(--text-subtle);
    max-width: 80px;
    line-height: 1.2;
}
.step.done .step-label,
.step.active .step-label { color: var(--text-body); font-weight: 600; }

.step-line {
    flex: 1;
    height: 2px;
    background: var(--hairline-strong);
    min-width: 20px;
    margin-top: -16px;
}
.step-line.done { background: var(--color-mittelpetrol); }

/* --- Detail-Abschnitte --- */
.detail-section { margin-bottom: 1.5rem; }
.detail-section h3 {
    color: var(--text-heading);
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--hairline);
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.6rem;
}
.detail-item {
    display: flex;
    flex-direction: column;
}
.detail-label {
    font-size: 0.72rem;
    color: var(--text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.detail-value {
    font-size: 0.95rem;
    color: var(--text-body);
}

/* --- Audit-Log --- */
.audit-list { list-style: none; }
.audit-item {
    display: flex;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.85rem;
}
.audit-time {
    color: var(--text-subtle);
    white-space: nowrap;
    min-width: 130px;
}
.audit-user { font-weight: 600; min-width: 100px; }

/* --- Login (Petrol-Flaeche, weisse Karte) --- */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--surface-highlight);
}
.login-card {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}
.login-logo {
    display: block;
    height: 44px;
    width: auto;
    margin: 0 auto 1.2rem;
}
.login-title {
    text-align: center;
    color: var(--text-heading);
    margin-bottom: 0.3rem;
    font-size: 1.6rem;
}
.login-subtitle {
    text-align: center;
    color: var(--text-subtle);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* --- Freigabe-Banner (Dashboard) --- */
.freigabe-banner {
    background: var(--color-warning-soft);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-field);
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.freigabe-banner strong { color: var(--color-warning); }

/* --- Modal (Link-Popup, Wizard) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-mittelpetrol) 55%, transparent);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-card {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    padding: 1.6rem 1.8rem;
    width: 100%;
    max-width: 620px;
}
.modal-card h2 {
    margin: 0 0 0.6rem 0;
    font-size: 1.3rem;
}

/* Monospace-Anzeige (Links, Mail-Inhalte) */
.code-box {
    background: var(--color-hellgrau);
    border-radius: var(--radius-field);
    padding: 0.6rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    word-break: break-all;
}

/* --- Responsive (Design-System-Breakpoint 900px) --- */
@media (max-width: 900px) {
    .container { padding: 1rem; }
    .form-row { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .navbar { padding: 0 1rem; }
    .system-banner, .mock-banner { margin: 0.6rem 1rem 0; }
    .stepper { gap: 0; }
    .step { min-width: 70px; }
}

/* --- Footer (Petrol-Flaeche) --- */
.footer {
    background: var(--surface-footer);
    color: var(--color-weiss);
    text-align: center;
    padding: 1.1rem 1rem;
    font-size: 0.8rem;
    margin-top: auto;
}
.footer img { height: 18px; width: auto; vertical-align: -4px; margin-right: 0.5rem; }
.footer p { display: inline; }

/* --- Link als Zeile klickbar --- */
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--highlight-marker); }

/* --- Reduzierte Bewegung: nur Bewegung unterdruecken, Farb-Hover
       bleibt als motion-unabhaengiges Feedback erhalten --- */
@media (prefers-reduced-motion: reduce) {
    .btn:active { transform: none; }
    .progress-fill { transition: none; }
}