/* ---------------------------------------------------------------------------
   Wahl-O-Mat Wedemark – Stylesheet
   Setzt die Tokens aus tokens.css um. Kein Framework, keine externen Ressourcen.
--------------------------------------------------------------------------- */

/* --- Schrift (lokal gehostet, kein CDN) ---------------------------------- */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Basis ---------------------------------------------------------------- */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--zw-text);
    background: var(--zw-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-4);
    color: var(--zw-ink);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--zw-green-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

a:hover { color: var(--zw-magenta); }

ul, ol { padding-left: 1.4rem; }

hr {
    border: 0;
    border-top: 1px solid var(--zw-gray-200);
    margin: var(--space-6) 0;
}

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

code, kbd, samp {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9em;
}

/* Sichtbarer Fokus – nie entfernen, das ist die Tastaturnavigation. */
:focus-visible {
    outline: 3px solid var(--zw-magenta);
    outline-offset: 2px;
    border-radius: 3px;
}

.visually-hidden {
    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;
    left: var(--space-4);
    top: -100px;
    z-index: 200;
    padding: var(--space-3) var(--space-5);
    background: var(--zw-ink);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus { top: var(--space-4); color: #fff; }

/* --- Layout --------------------------------------------------------------- */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1 0 auto; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }

.section--tinted { background: var(--zw-gray-200); }
.section--soft { background: var(--zw-gray-50); }

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

.grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }

/* --- Kopfzeile ------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(150%) blur(6px);
    border-bottom: 1px solid var(--zw-gray-200);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 800;
    font-size: var(--fs-lg);
    color: var(--zw-ink);
    text-decoration: none;
    letter-spacing: -.01em;
}

.brand:hover { color: var(--zw-ink); }

.brand__mark {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-sm);
    background: var(--zw-green);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

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

.site-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--zw-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.site-nav a:hover { background: var(--zw-gray-200); color: var(--zw-ink); }

.site-nav a.active {
    color: var(--zw-green-dark);
    box-shadow: inset 0 -2px 0 var(--zw-green);
}

/* --- Fusszeile ------------------------------------------------------------ */

.site-footer {
    margin-top: var(--space-8);
    padding-block: var(--space-6);
    background: var(--zw-gray-200);
    font-size: var(--fs-sm);
}

.site-footer a { color: var(--zw-text); }
.site-footer a:hover { color: var(--zw-magenta); }

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
    padding-block: var(--space-8);
    background:
        radial-gradient(1100px 380px at 12% -12%, rgba(68, 153, 17, .13), transparent 62%),
        radial-gradient(900px 340px at 92% 0%, rgba(153, 0, 136, .09), transparent 60%),
        var(--zw-white);
    border-bottom: 1px solid var(--zw-gray-200);
}

.hero h1 {
    font-size: clamp(2rem, 5vw, var(--fs-4xl));
    letter-spacing: -.02em;
}

.hero__lead {
    font-size: var(--fs-lg);
    max-width: 46rem;
    color: var(--zw-text);
}

/* --- Karten --------------------------------------------------------------- */

.card {
    background: var(--zw-white);
    border: 1px solid var(--zw-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.card--flat { box-shadow: none; }
.card--accent { border-left: 5px solid var(--zw-green); }
.card--warn { border-left: 5px solid var(--zw-yellow); background: #FFFDF2; }
.card--info { border-left: 5px solid var(--zw-info); background: #F4F9FC; }
.card--danger { border-left: 5px solid var(--zw-danger); background: #FDF5F2; }

.card__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
}

.card__meta {
    color: var(--zw-text-muted);
    font-size: var(--fs-sm);
    margin: 0;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .65rem 1.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 700;
    font-size: var(--fs-sm);
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--zw-green-dark);
    color: #fff;
}

.btn--primary:hover:not(:disabled) { background: #2C660B; color: #fff; }

.btn--secondary {
    background: transparent;
    border-color: var(--zw-green-dark);
    color: var(--zw-green-dark);
}

.btn--secondary:hover:not(:disabled) { background: rgba(68, 153, 17, .10); color: var(--zw-green-dark); }

.btn--accent {
    background: var(--zw-magenta);
    color: #fff;
}

.btn--accent:hover:not(:disabled) { background: var(--zw-magenta-dark); color: #fff; }

.btn--ghost {
    background: transparent;
    border-color: var(--zw-gray-300);
    color: var(--zw-text);
}

.btn--ghost:hover:not(:disabled) { background: var(--zw-gray-100); color: var(--zw-ink); }

.btn--danger {
    background: var(--zw-danger-dark);
    color: #fff;
}

.btn--danger:hover:not(:disabled) { background: #8A2200; color: #fff; }

.btn--lg { padding: .9rem 1.9rem; font-size: var(--fs-base); }
.btn--sm { padding: .35rem .8rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* --- Formulare ------------------------------------------------------------ */

label { font-weight: 600; display: inline-block; margin-bottom: var(--space-1); }

.field { margin-bottom: var(--space-4); }

.input,
.textarea,
.select {
    width: 100%;
    padding: .6rem .8rem;
    font: inherit;
    color: var(--zw-ink);
    background: var(--zw-white);
    border: 1px solid var(--zw-gray-300);
    border-radius: var(--radius-sm);
}

.input:focus,
.textarea:focus,
.select:focus { border-color: var(--zw-green-dark); }

.textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

.input[readonly], .textarea[readonly] { background: var(--zw-gray-100); }

.hint { font-size: var(--fs-sm); color: var(--zw-text-muted); }

.error { color: var(--zw-danger-dark); font-size: var(--fs-sm); font-weight: 600; }

.char-count { font-size: var(--fs-sm); color: var(--zw-text-muted); font-variant-numeric: tabular-nums; }
.char-count--warn { color: #8A5A00; font-weight: 600; }
.char-count--over { color: var(--zw-danger-dark); font-weight: 700; }

/* --- Antwortauswahl ------------------------------------------------------- */

.answers {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.answers legend { padding: 0; margin-bottom: var(--space-3); font-weight: 700; }

.answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--zw-gray-300);
    border-radius: var(--radius-lg);
    background: var(--zw-white);
    cursor: pointer;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color .12s ease, background-color .12s ease;
}

.answer:hover { border-color: var(--zw-gray-400); background: var(--zw-gray-50); }

.answer input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--zw-green-dark);
    margin: 0;
}

.answer:has(input:checked) {
    border-color: var(--zw-green-dark);
    background: rgba(68, 153, 17, .09);
    color: var(--zw-ink);
}

.answer:has(input:focus-visible) {
    outline: 3px solid var(--zw-magenta);
    outline-offset: 2px;
}

.answer--readonly { cursor: default; }

/* Farbcodierung der Positionen (zusaetzlich zur Beschriftung, nie als einziges Merkmal) */
.pos {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
}

.pos--agree { background: var(--answer-agree); }
.pos--disagree { background: var(--answer-disagree); }
.pos--neutral { background: var(--answer-neutral); }
.pos--none { background: var(--answer-none); }
.pos--skipped { background: var(--zw-gray-400); }

/* --- Fortschritt ---------------------------------------------------------- */

.progress {
    height: 10px;
    background: var(--zw-gray-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    background: var(--zw-green);
    border-radius: var(--radius-pill);
    transition: width .25s ease;
}

.progress-label {
    font-size: var(--fs-sm);
    color: var(--zw-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Ergebnisbalken ------------------------------------------------------- */

.match-list { list-style: none; padding: 0; margin: 0; }

.match {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--zw-gray-200);
}

.match__name { font-weight: 700; color: var(--zw-ink); }

.match__track {
    background: var(--zw-gray-200);
    border-radius: var(--radius-pill);
    height: 22px;
    overflow: hidden;
}

.match__bar {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--zw-green);
    min-width: 3px;
}

.match__value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--zw-ink);
    min-width: 4.5rem;
    text-align: right;
}

.match--top .match__value { font-size: var(--fs-xl); }

@media (max-width: 640px) {
    .match { grid-template-columns: 1fr auto; }
    .match__track { grid-column: 1 / -1; }
}

/* --- Tabellen / Heatmap --------------------------------------------------- */

.table-scroll { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.table th,
.table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--zw-gray-200);
    vertical-align: top;
}

.table th { font-weight: 700; color: var(--zw-ink); background: var(--zw-gray-100); }
.table tbody tr:hover { background: var(--zw-gray-50); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.heat {
    display: inline-block;
    min-width: 3.2rem;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Statusanzeigen ------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--zw-gray-200);
    color: var(--zw-ink);
}

.badge--ok { background: #E4F2DC; color: #2A5E0A; }
.badge--pending { background: #FFF3CC; color: #6B5200; }
.badge--off { background: var(--zw-gray-200); color: var(--zw-text-muted); }
.badge--danger { background: #FBE3DC; color: #8A2200; }

.notice {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border-left: 5px solid var(--zw-info);
    background: #F4F9FC;
}

.notice--ok { border-left-color: var(--zw-green); background: #F3F9EE; }
.notice--warn { border-left-color: var(--zw-yellow); background: #FFFDF2; }
.notice--danger { border-left-color: var(--zw-danger); background: #FDF5F2; }

/* --- Aufklappbare Thesen -------------------------------------------------- */

.disclosure {
    border: 1px solid var(--zw-gray-200);
    border-radius: var(--radius-lg);
    background: var(--zw-white);
    overflow: hidden;
}

.disclosure + .disclosure { margin-top: var(--space-3); }

.disclosure > summary {
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-weight: 700;
    color: var(--zw-ink);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
}

.disclosure > summary:hover { background: var(--zw-gray-50); }
.disclosure[open] > summary { border-bottom: 1px solid var(--zw-gray-200); }
.disclosure__body { padding: var(--space-5); }

.statement {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--zw-gray-300);
    color: var(--zw-text);
    font-size: var(--fs-sm);
}

/* --- Admin ---------------------------------------------------------------- */

.admin-shell {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: var(--space-6);
    align-items: start;
}

.admin-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.admin-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--zw-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.admin-nav a:hover { background: var(--zw-gray-200); color: var(--zw-ink); }

.admin-nav a.active {
    background: var(--zw-green-dark);
    color: #fff;
}

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

.token-box {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.token-box input {
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--fs-sm);
}

/* --- Blazor-Standards ----------------------------------------------------- */

/* Wiederverbindungs-Hinweis. blazor.web.js setzt die Klassen
   components-reconnect-show / -hide / -failed / -rejected selbst. */
.reconnect { display: none; }

.reconnect.components-reconnect-show,
.reconnect.components-reconnect-failed,
.reconnect.components-reconnect-rejected {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(31, 42, 46, .55);
}

.reconnect__box {
    background: var(--zw-white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 26rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.reconnect__text { margin: 0; }
.reconnect__text--failed { display: none; }

.reconnect.components-reconnect-failed .reconnect__text--retry,
.reconnect.components-reconnect-rejected .reconnect__text--retry { display: none; }

.reconnect.components-reconnect-failed .reconnect__text--failed,
.reconnect.components-reconnect-rejected .reconnect__text--failed { display: block; }


.blazor-error-boundary {
    background: var(--zw-danger-dark);
    padding: var(--space-4) var(--space-5);
    color: #fff;
    border-radius: var(--radius-sm);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: var(--space-4) var(--space-5);
    background: var(--zw-yellow);
    color: var(--zw-ink);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-size: 1.3rem;
    line-height: 1;
}

/* --- Bewegungsreduktion und Druck ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .site-header, .site-footer, .skip-link, .btn { display: none !important; }
    body { color: #000; }
    .card, .disclosure { break-inside: avoid; border-color: #999; box-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}