/* ==========================================================================
   Messerbrief Kundenportal – Basis-Stile
   Alles Weitere kommt aus css/tailwind.css (Quelle: app/tailwind.css).
   ========================================================================== */

/* ---------- Schriften ---------- */
/*
 * Futura Std bringt eine unsymmetrische Metrik mit: gemessen bei 100px sitzt
 * die Oberkante der Versalien 0,24em unter der Zeilenoberkante, unter der
 * Grundlinie stehen aber 0,29em. Text wirkt dadurch nach oben verschoben und
 * unten bleibt Luft (sichtbar z.B. bei Zahlen in Tabellenzellen).
 * descent-override gleicht das aus: Abstand über Versalhöhe == Abstand unter
 * Grundlinie. line-gap-override:0% verhindert zusätzliche Zeilenluft.
 */
@font-face {
    font-family: 'Futura Std Book';
    src: url('/fonts/FuturaStdBook/FuturaStdBook.woff2') format('woff2'),
    url('/fonts/FuturaStdBook/FuturaStdBook.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 101%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Futura Std Heavy';
    src: url('/fonts/FuturaStdHeavy/FuturaStdHeavy.woff2') format('woff2'),
    url('/fonts/FuturaStdHeavy/FuturaStdHeavy.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: 100%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ---------- Grundgröße ----------
   Alle Tailwind-Abstände, Schriftgrößen und Breiten rechnen in rem, daher
   skaliert diese eine Zeile das komplette Layout mit. Media Queries bleiben
   davon unberührt (sie rechnen mit der Browser-Grundgröße), die Breakpoints
   verschieben sich also nicht. */
html {
    font-size: 112.5%; /* 18px statt 16px */
}

/* ---------- Lade-Overlay ---------- */
.loader {
    width: 3rem;
    height: 3rem;
    border: 4px solid #d8ece9;
    border-top-color: #28a745;
    border-radius: 50%;
    animation: loader-spin .8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loader {
        animation-duration: 2.4s;
    }
}

.field[readonly] {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.modal-actions {
    position: sticky;
    bottom: -1.5rem;
    margin: 0 -1.5rem -1.5rem;
    padding: 0.75rem 1.5rem 1.5rem;
    background-color: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -10px 14px -10px rgba(15, 23, 42, 0.14);
}

.modal-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 639px) {
    .modal-actions-row {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}