/* BFW.FeedbackPlus – Befragungs-Frontend (WCAG 2.1 AAA)
   Tokens live von new.bfw-wuerzburg.de gesampelt, auf 7:1-Kontrast geprüft (siehe DESIGN.md). */

:root {
    --brand-primary: #2c3e74;          /* BFW-Blau, ~9:1 auf Weiß */
    --brand-primary-hover: #1f2c54;
    --color-link: #00467a;             /* abgedunkelt für AAA (~7:1) */
    --color-bg: #ffffff;
    --color-surface: #d7e4f1;          /* BFW-Hellblau */
    --color-text: #21222d;             /* ~15:1 auf Weiß */
    --color-text-muted: #3d3d3d;
    --color-border: #565656;
    --color-focus: #b3001b;
    --color-error: #b3001b;
    --color-success: #1b5e20;
    --radius: 8px;
    --space: 1rem;
    --font-body: "Atkinson Hyperlegible", system-ui, "Segoe UI", Arial, sans-serif;
    --font-heading: "Oxygen", "Atkinson Hyperlegible", sans-serif;
    --max-text-width: 70ch;
}

/* Dark Mode: automatisch nach OS-Voreinstellung … */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-primary: #8fb3ff;
        --color-link: #8fc3ff;
        --color-bg: #0e1116;
        --color-surface: #1a2236;
        --color-text: #f2f4f7;
        --color-text-muted: #c9ced6;
        --color-border: #9aa3af;
        --color-focus: #ff8da1;
    }
}

/* … bzw. manuell erzwungen über den Umschalter. */
:root[data-theme="dark"] {
    --brand-primary: #8fb3ff;
    --color-link: #8fc3ff;
    --color-bg: #0e1116;
    --color-surface: #1a2236;
    --color-text: #f2f4f7;
    --color-text-muted: #c9ced6;
    --color-border: #9aa3af;
    --color-focus: #ff8da1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.125rem;          /* ≥ 18px */
    line-height: 1.6;
}

h1, h2, h3, legend { font-family: var(--font-heading); color: var(--brand-primary); line-height: 1.3; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }

a { color: var(--color-link); }

/* Sichtbarer Fokus überall (≥ 3:1), nie entfernen. */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* Skip-Link */
.fp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand-primary);
    color: #fff;
    padding: .75rem 1rem;
    z-index: 100;
}
.fp-skip:focus { left: 0; }

/* Nur für Screenreader */
.fp-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.fp-shell {
    max-width: var(--max-text-width);
    margin: 0 auto;
    padding: var(--space);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.fp-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space);
    border-bottom: 2px solid var(--color-border);
}
.fp-brand { font-family: var(--font-heading); font-weight: 700; color: var(--brand-primary); }

.fp-main { flex: 1; padding-block: calc(var(--space) * 1.5); }
.fp-footer { border-top: 2px solid var(--color-border); padding-block: var(--space); font-size: .95rem; }

.fp-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: calc(var(--space) * 1.25);
    margin-block: var(--space);
}

/* Theme-Umschalter als Button */
.fp-theme-toggle {
    font: inherit;
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    cursor: pointer;
    min-height: 44px;
}
.fp-theme-toggle:hover { border-color: var(--brand-primary); }

/* Fragen */
.fp-frage, .fp-consent {
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space);
    margin-block: var(--space);
}
.fp-frage legend, .fp-consent legend {
    font-weight: 700;
    padding-inline: .4rem;
}

.fp-radio, .fp-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .4rem;
    min-height: 44px;
    cursor: pointer;
}
.fp-radio input, .fp-check input {
    width: 1.4rem; height: 1.4rem;
    margin-top: .1rem;
    flex: none;
}

.fp-textarea {
    width: 100%;
    font: inherit;
    padding: .6rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

/* Aktionen / Buttons */
.fp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    margin-block: calc(var(--space) * 1.5);
}
.fp-btn {
    font: inherit;
    font-weight: 700;
    border-radius: var(--radius);
    padding: .8rem 1.4rem;
    min-height: 44px;
    cursor: pointer;
    border: 2px solid var(--brand-primary);
}
.fp-btn-primary { background: var(--brand-primary); color: #fff; }
.fp-btn-primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.fp-btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }

/* Fehlerzusammenfassung */
.fp-error-summary {
    border: 3px solid var(--color-error);
    border-radius: var(--radius);
    padding: var(--space);
    margin-block: var(--space);
}
.fp-error-summary h2 { color: var(--color-error); margin-top: 0; }
.fp-error-summary a { color: var(--color-error); font-weight: 700; }

/* Zusammenfassung */
.fp-summary dt { font-weight: 700; margin-top: .8rem; }
.fp-summary dd { margin: .2rem 0 0; }

.fp-details { margin-block: var(--space); }
.fp-details > summary {
    cursor: pointer;
    padding: .6rem;
    font-weight: 700;
    min-height: 44px;
}