/* ===========================================================================
 * Selbstauskunft Web – Custom-Layer über Tailwind CDN
 * Mobile-first, Safe-Area-aware, prefers-reduced-motion-respect.
 * =========================================================================== */

:root {
    --sa-color-primary: #0f172a;
    --sa-color-accent: #0b3d91;
    --sa-radius-md: 0.75rem;
    --sa-radius-lg: 1rem;
}

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
}

/* Safe-Area-Insets für Geräte mit Notch / Dynamic Island */
header.sticky {
    padding-top: env(safe-area-inset-top);
}

footer {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* iOS-Touch-Scrolling und kontrollierte Tap-Highlights */
* {
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.05);
}

button,
[role="button"],
input,
select,
textarea {
    font: inherit;
}

/* Touch-Mindestziel ≥ 44 × 44 px (V2.0 §9) */
.btn,
button[type="submit"],
.touch-target {
    min-height: 44px;
}

/* ---------------------------------------------------------------------------
 * Klick-Feedback ("Press"-Gefühl) für interaktive Elemente.
 * Dezentes Einsinken beim Drücken, damit jeder Tap/Klick spürbar quittiert wird.
 * Respektiert prefers-reduced-motion (siehe weiter unten).
 * ------------------------------------------------------------------------- */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
.btn,
.sa-btn-press,
a.btn,
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled) {
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.btn:active,
.sa-btn-press:active,
a.btn:active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
    transform: scale(0.92) translateY(1px) !important;
    filter: brightness(0.9);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25) inset;
}

/* Tastatur-Bedienung: deutlich sichtbarer Fokusrahmen (Barrierefreiheit) */
.sa-btn-press:focus-visible {
    outline: 2px solid var(--sa-color-accent);
    outline-offset: 2px;
}

/* Tabellen mit horizontaler Sicherheitsroll-Indikation */
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}
.overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 3px;
}

/* Print-Layout: bessere PDF-Druckansicht aus Browser */
@media print {
    header,
    footer,
    nav,
    .no-print {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* prefers-reduced-motion respektieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark-Mode-Vorbereitung (optional, automatisch aktiv falls OS dark) */
@media (prefers-color-scheme: dark) {
    /* Aktuell bewusst leer, damit das hellgrundige Tailwind-Theme stabil bleibt.
       Wird in einem späteren Release dediziert behandelt. */
}

/* Foldables: Compact (geschlossen) ↔ Expanded (entfaltet) */
@media (spanning: single-fold-vertical) {
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Optisch konsistente Form-Validierungs-Highlights */
.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2;
}

/* Prose-Verbesserungen für Legal-Seiten (Tailwind Typography wäre Plugin – hier
   bewusst minimal, ohne Plugin-Abhängigkeit) */
.prose-slate h1,
.prose-slate h2,
.prose-slate h3 {
    color: #0f172a;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose-slate h1 { font-size: 1.5rem; }
.prose-slate h2 { font-size: 1.25rem; }
.prose-slate h3 { font-size: 1.125rem; }
.prose-slate p,
.prose-slate ul,
.prose-slate ol {
    color: #334155;
    line-height: 1.65;
    margin-bottom: 0.85rem;
}
.prose-slate ul {
    list-style: disc;
    padding-left: 1.25rem;
}
.prose-slate a {
    color: #0b3d91;
    text-decoration: underline;
}
.prose-slate code {
    background: #f1f5f9;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

@media (min-width: 640px) {
    .prose-slate h1 { font-size: 1.75rem; }
    .prose-slate h2 { font-size: 1.375rem; }
}