/* DIWA 2.0 – Grundlagen: Reset, Typografie, Fokus, Hilfsklassen */

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

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

body {
    margin: 0;
    background: var(--c-page);
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
svg {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

a {
    color: var(--c-blue);
    text-decoration: none;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-blue-hover);
    text-decoration: underline;
}

a:focus-visible {
    text-decoration: underline;
}

/* Links im Fließtext immer unterstrichen (nicht nur über die Farbe erkennbar, BITV 1.4.1) */
main :where(p, dd, li, .hint, .field__help, .alert__body, .subtle) a:not([class]):not(:where(nav, .tiles, .tabs, .pagination) a) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

p,
ul,
ol,
dl,
table,
fieldset {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

p {
    max-width: 75ch;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child {
    margin-bottom: 0;
}

ul,
ol {
    padding-left: 1.25em;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--space-5) 0;
}

strong,
b {
    font-weight: var(--fw-bold);
}

small {
    font-size: var(--fs-small);
}

/* Überschriften: klare Skala, Gewicht trägt die Hierarchie (nicht die Farbe) */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-3);
    color: var(--c-heading);
    line-height: var(--lh-heading);
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-base); font-weight: var(--fw-bold); }

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--c-panel);
    color: var(--c-text-strong);
}

/* Oberfläche für Mitarbeitende (Stufe am html-Element, Plan 3.23): Lange Kennungen, Adressen und Schlüssel brechen um,
   statt aus Karte oder Bildschirm zu laufen. Zu lange Platzhalter, Werte und gewählte Optionen enden sichtbar mit „…“
   statt mitten im Buchstaben abgeschnitten. Öffentliche Seiten (ohne Stufe) bleiben unverändert. */
:root[data-dichte] code {
    overflow-wrap: anywhere;
}

:root[data-dichte] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select) {
    text-overflow: ellipsis;
}

pre {
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--c-panel);
    font-size: var(--fs-small);
}

/* Zahlen in Tabellen, Kennzahlen und Zeiten stehen untereinander (tabellarische Ziffern) */
table,
time,
.num,
.kpi__value,
.stat__value {
    font-variant-numeric: tabular-nums;
}

/* Fokus: deutlich sichtbar auf weißen, grauen und farbigen Flächen (WCAG 2.4.7, 2.4.11, 2.4.13) –
   3 px Blau (6,75 : 1 auf Weiß) mit Abstand, auf dunklen und roten Flächen weiß. */
:focus-visible {
    outline: var(--focus-width) solid var(--c-focus);
    outline-offset: var(--focus-offset);
}

::selection {
    background: var(--brand-accent-soft);
    color: var(--c-text-strong);
}

/* ---- Hilfsklassen --------------------------------------------------------- */

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius) 0;
    background: var(--c-blue);
    color: #fff;
    font-weight: var(--fw-medium);
}

.skip-link:focus {
    inset-inline-start: var(--space-2);
    top: var(--space-2);
    color: #fff;
    outline-color: var(--c-heading);
}

.icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
}

.muted,
.text-muted {
    color: var(--c-muted);
}

.subtle,
.text-small {
    color: var(--c-muted);
    font-size: var(--fs-small);
}

.text-strong {
    color: var(--c-text-strong);
    font-weight: var(--fw-medium);
}

.nowrap {
    white-space: nowrap;
}

.align-right {
    text-align: right;
}

.stack > * + * {
    margin-top: var(--space-4);
}

.stack-sm > * + * {
    margin-top: var(--space-2);
}

.stack-lg > * + * {
    margin-top: var(--space-6);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.spread {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

/* Karten in Rastern: Abstand macht das Raster, nicht die Karte */
:is(.grid-2, .grid-3, .start-grid, .dashboard) > :is(.panel, .card) {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@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;
    }
}

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid CanvasText;
    }
}