/* =========================================================================
   Base — Modern Reset, Typografie, Buttons, Listen, Utilities
   -------------------------------------------------------------------------
   Wird NACH tokens.css geladen. Setzt Defaults so, dass Komponenten ohne
   weitere Wrapper sinnvoll aussehen.
   ========================================================================= */


/* =========================================================================
   1) Modern Reset (kompakt, an Andy Bell angelehnt)
   ========================================================================= */

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    color: var(--text-default);
    background-color: var(--surface-default);
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    font-weight: var(--fw-light);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* Smooth Scroll nur außerhalb prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    font-style: italic; /* sichtbarer Alt-Text bei Ladefehler */
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

/* Tabellen sauber */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================================================================
   2) Fokus — sichtbar für Tastaturnutzer, unauffällig für Mausnutzer
   ========================================================================= */

:focus {
    outline: none;
}

:focus-visible {
    outline: var(--focus-ring-width) solid var(--border-focus);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}


/* =========================================================================
   3) Skip-Link
   ========================================================================= */

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: var(--space-3);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background-color: var(--brand-blue);
    color: var(--text-on-brand);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--duration-2) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}


/* =========================================================================
   4) Typografie — Headings & Paragraphen
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    text-rendering: optimizeLegibility;
    text-wrap: balance;
}

/* Kurze Strukturelemente: ausgewogener Zeilenumbruch */
legend,
caption,
summary,
figcaption,
dt {
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-38);
    line-height: var(--lh-tight);
    font-weight: var(--fw-black);
    letter-spacing: var(--tracking-tight);
    margin-block-end: var(--space-5);
}

h2 {
    font-size: var(--fs-30);
    line-height: var(--lh-tight);
    margin-block-end: var(--space-5);
}

h3 {
    font-size: var(--fs-24);
    line-height: var(--lh-snug);
    margin-block-end: var(--space-4);
}

h4 {
    font-size: var(--fs-18);
    line-height: var(--lh-snug);
    margin-block-end: var(--space-3);
}

h5 {
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    margin-block-end: var(--space-2);
}

h6 {
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-block-end: var(--space-2);
}

p {
    margin: 0 0 var(--space-4);
    line-height: var(--lh-normal);
    text-wrap: pretty;
}

/* Langtext-Elemente: keine Waisenkinder am Zeilenende */
li,
dd,
blockquote,
q,
.lp-dialog .modal-body,
.accordion__body {
    text-wrap: pretty;
}

p.lead {
    font-size: var(--fs-18);
    line-height: var(--lh-relaxed);
    color: var(--text-strong);
    font-weight: var(--fw-light);
    text-wrap: balance;
}

p.tagline {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    margin-block-end: var(--space-3);
    text-transform: none;
    text-wrap: balance;
}

small,
p.small {
    font-size: var(--fs-14);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

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

em, i {
    font-style: italic;
}


/* =========================================================================
   5) Links
   ========================================================================= */

a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-thickness: max(1px, 0.05em);
    text-underline-offset: 0.2em;
    transition: color var(--duration-1) var(--ease-out);
}

a:hover,
a:focus-visible {
    color: var(--text-link-hover);
}


/* =========================================================================
   6) Buttons
   -------------------------------------------------------------------------
   - Modernes BEM-light: .btn + .btn--primary/secondary/ghost/inverse/danger
   - Größen: .btn--sm / .btn--md (default) / .btn--lg
   - Modifier: .btn--block (volle Breite)
   - Backward-Compat-Aliase: .btn.primary, .btn.secondary-outline,
     .btn.white-outline werden weiter unterstützt (siehe Ende des Blöcks).
   ========================================================================= */

.btn {
    --btn-bg:            transparent;
    --btn-fg:            var(--text-strong);
    --btn-border:        transparent;
    --btn-bg-hover:      transparent;
    --btn-fg-hover:      var(--text-strong);
    --btn-border-hover:  transparent;
    --btn-padding-y:     var(--space-3);
    --btn-padding-x:     var(--space-5);
    --btn-font-size:     var(--fs-16);
    --btn-min-h:         var(--min-touch);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: var(--btn-min-h);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-sans);
    font-size: var(--btn-font-size);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;

    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border: 2px solid var(--btn-border);
    border-radius: var(--radius-md);
    cursor: pointer;

    transition: background-color var(--duration-1) var(--ease-out),
                color var(--duration-1) var(--ease-out),
                border-color var(--duration-1) var(--ease-out),
                transform var(--duration-1) var(--ease-out),
                box-shadow var(--duration-1) var(--ease-out);
}

.btn:hover {
    background-color: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
    border-color: var(--btn-border-hover);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Größen */
.btn--sm {
    --btn-padding-y: var(--space-2);
    --btn-padding-x: var(--space-4);
    --btn-font-size: var(--fs-14);
    --btn-min-h:     2.25rem;
}

.btn--lg {
    --btn-padding-y: var(--space-4);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--fs-18);
    --btn-min-h:     3.25rem;
}

/* Block / Fullwidth */
.btn--block,
.btn.fullwidth {
    display: flex;
    width: 100%;
}

/* Varianten */
.btn--primary,
.btn.primary {
    --btn-bg:           var(--brand-blue);
    --btn-fg:           var(--text-on-brand);
    --btn-border:       var(--brand-blue);
    --btn-bg-hover:     var(--brand-blue-strong);
    --btn-fg-hover:     var(--text-on-brand);
    --btn-border-hover: var(--brand-blue-strong);
}

.btn--secondary,
.btn.secondary-outline {
    --btn-bg:           transparent;
    --btn-fg:           var(--brand-blue);
    --btn-border:       var(--brand-blue);
    --btn-bg-hover:     var(--brand-blue);
    --btn-fg-hover:     var(--text-on-brand);
    --btn-border-hover: var(--brand-blue);
}

.btn--ghost {
    --btn-bg:           transparent;
    --btn-fg:           var(--text-strong);
    --btn-border:       transparent;
    --btn-bg-hover:     var(--surface-sunken);
    --btn-fg-hover:     var(--text-strong);
    --btn-border-hover: transparent;
}

.btn--inverse,
.btn.white-outline {
    --btn-bg:           transparent;
    --btn-fg:           var(--text-on-brand);
    --btn-border:       var(--text-on-brand);
    --btn-bg-hover:     var(--text-on-brand);
    --btn-fg-hover:     var(--brand-blue);
    --btn-border-hover: var(--text-on-brand);
}

.btn--danger {
    --btn-bg:           var(--state-danger-fg);
    --btn-fg:           var(--text-on-brand);
    --btn-border:       var(--state-danger-fg);
    --btn-bg-hover:     #6E1414;
    --btn-fg-hover:     var(--text-on-brand);
    --btn-border-hover: #6E1414;
}

/* Inline spinner — neben dem Text statt ersetzt */
.btn .spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.btn:not(.is-loading) .spinner {
    display: none;
}

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


/* =========================================================================
   7) Listen — Checklist & Steplist
   -------------------------------------------------------------------------
   - Icon-Marker per CSS-Mask aus externer SVG-Datei. Farbe wird über
     currentColor / mask-Technik aufgenommen — Skaliert mit em.
   - Steplist hat Light- und Inverse-Variante (war vorher unsichtbar auf
     weiß).
   ========================================================================= */

ul.checklist {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding-inline-start: 0;
    display: grid;
    gap: var(--space-3);
}

ul.checklist li {
    position: relative;
    padding-inline-start: 1.85em;
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    text-wrap: pretty;
}

ul.checklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.18em;
    width: 1.15em;
    height: 1.15em;
    background-color: var(--brand-blue);
    -webkit-mask: var(--icon-check) center / contain no-repeat;
            mask: var(--icon-check) center / contain no-repeat;
}

ul.checklist.white li::before,
ul.checklist--inverse li::before {
    background-color: var(--text-on-brand);
}


ol.steplist {
    list-style: none;
    counter-reset: step;
    margin: var(--space-2) 0 var(--space-6);
    padding-inline-start: 0;
    display: grid;
    gap: var(--space-3);
}

ol.steplist li {
    counter-increment: step;
    position: relative;
    padding-inline-start: 3rem;
    min-height: 2rem;
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    font-weight: var(--fw-bold);
    color: var(--text-default);
    text-wrap: pretty;
    display: flex;
    align-items: center;
}

ol.steplist li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 2rem;
    height: 2rem;
    background-color: var(--brand-blue);
    color: var(--text-on-brand);
    border-radius: var(--radius-pill);
    font-weight: var(--fw-bold);
    font-size: var(--fs-14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

ol.steplist--inverse li {
    color: var(--text-on-brand);
}

ol.steplist--inverse li::before {
    background-color: var(--text-on-brand);
    color: var(--brand-blue);
}


/* =========================================================================
   8) Utilities
   ========================================================================= */

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

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

.fullwidth {
    display: block;
    width: 100%;
}

/* sr-only / .visually-hidden — modernes Pattern via clip-path */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Honeypot — visuell + für SR versteckt, aber nicht display:none
   (sonst senden Browser den Wert nicht). */
.hp-field {
    position: absolute !important;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

/* Required-Marker via data-required (CLAUDE-konform: kein span im HTML) */
.form-group[data-required] > label::after,
.form-group[data-required] > legend::after {
    content: " *";
    color: var(--color-required);
    font-weight: var(--fw-bold);
}

/* Legacy: span.mandatory_mark wird weiter unterstützt */
.mandatory_mark,
.mandatory-mark {
    color: var(--color-required);
    font-weight: var(--fw-bold);
}

/* Hidden-Attribut korrekt erzwingen (manche UA-Stylesheets sind schwach) */
[hidden] {
    display: none !important;
}