/* ============================================================
   SripEx – Basis-Stylesheet
   Enthält Reset, Typografie-Skala und Layout-Primitive, die von
   allen Bereichen (Login, Admin, Sitemap) gemeinsam genutzt werden.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --font-display: 'Manrope', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-display);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

::selection {
    background: color-mix(in srgb, var(--color-accent, #29E7CD) 35%, transparent);
}

/* Sichtbarer Fokus-Ring für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent, #29E7CD);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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

/* Scrollbar – dezent, passt sich der jeweiligen Akzentfarbe an */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary, #1B2A4A) 40%, transparent);
    border-radius: 10px;
}