/* projektwerkstatt -- design "Warm und erdig" (harness/05-ui-und-betrieb.md).
 *
 * The ONE stylesheet of the app. Templates use these classes and never
 * colours or inline styles: the CSP has `style-src 'self'` (no `style=""`,
 * no `<style>`). Bars and progress use the native `<progress>`/`<meter>`
 * elements, so no width ever has to be set inline.
 *
 * No web fonts: headings use the system's serif stack, text the system's
 * sans-serif stack (harness/04, performance).
 *
 * Contrast (WCAG AA, computed 2026-11-05):
 *   text #2C2C2A on cream #FAF8F4 13.2:1, on white 14.0:1
 *   muted #5F5E5A on white 6.5:1
 *   terracotta #D85A30 on white 3.9:1 -> borders, focus, progress only
 *     (non-text UI needs 3:1); buttons and links use the darker
 *     #A8441D (white on it 6.0:1, on cream 5.6:1)
 *   control border #8C857A on white 3.7:1
 *   dark: text #EDE8E1 on #27241F 12.7:1, accent #EE7A4C 5.5:1,
 *     button text #1C1A18 on #EE7A4C 6.2:1, border #8F877B 4.4:1
 */

:root {
    color-scheme: light dark;

    --color-bg: #FAF8F4;
    --color-surface: #FFFFFF;
    --color-text: #2C2C2A;
    --color-muted: #5F5E5A;
    --color-accent: #D85A30;
    --color-accent-strong: #A8441D;
    --color-accent-strong-hover: #8E3816;
    --color-on-accent: #FFFFFF;
    --color-accent-tint: #FBEAE2;
    --color-border: #E3DED4;
    --color-control-border: #8C857A;
    --color-success: #3B6D11;
    --color-success-tint: #EAF2E0;
    --color-error: #B3261E;
    --color-error-tint: #FBE9E7;
    --color-warning: #8A5200;
    --color-warning-tint: #FDF1DD;

    --font-heading: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --radius: 12px;
    --radius-small: 8px;
    --shadow: 0 1px 3px rgb(44 44 42 / 0.08), 0 1px 2px rgb(44 44 42 / 0.06);
    --touch: 44px;
    --measure: 42rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1C1A18;
        --color-surface: #27241F;
        --color-text: #EDE8E1;
        --color-muted: #B5AEA4;
        --color-accent: #EE7A4C;
        --color-accent-strong: #EE7A4C;
        --color-accent-strong-hover: #F4936B;
        --color-on-accent: #1C1A18;
        --color-accent-tint: #3A2A22;
        --color-border: #3A3631;
        --color-control-border: #8F877B;
        --color-success: #9CCB6B;
        --color-success-tint: #26301C;
        --color-error: #FF8A80;
        --color-error-tint: #3B2220;
        --color-warning: #F2B661;
        --color-warning-tint: #382C1A;
        --shadow: 0 1px 3px rgb(0 0 0 / 0.4);
    }
}

/* ---------- base ---------- */

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

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

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

a { color: var(--color-accent-strong); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-strong-hover); }

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

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

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

/* ---------- layout ---------- */

.container {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.container.wide { max-width: 64rem; }

main.container { padding-top: var(--space-5); padding-bottom: var(--space-6); }

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 3.5rem;
}
.brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-text);
    text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav a, .nav button {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border-radius: var(--radius-small);
    color: var(--color-text);
    text-decoration: none;
}
.nav a[aria-current="page"] { color: var(--color-accent-strong); font-weight: 600; }
.nav form { margin: 0; }

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -3rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-small);
    z-index: 10;
}
.skip-link:focus { top: var(--space-2); }

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

/* ---------- text ---------- */

.lead { font-size: 1.15rem; }
.muted { color: var(--color-muted); }
.small { font-size: 0.9rem; }

.prose { overflow-wrap: anywhere; }
.prose h1 { font-size: 1.5rem; }
.prose h2 { font-size: 1.25rem; margin-top: var(--space-5); }
.prose h3 { font-size: 1.1rem; margin-top: var(--space-4); }
.prose blockquote {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-left: 4px solid var(--color-accent);
    background: var(--color-accent-tint);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}
.prose code, .prose pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
}
.prose pre { overflow-x: auto; padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-small); }
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border: 1px solid var(--color-border); padding: var(--space-2); text-align: left; }

/* ---------- surfaces ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-4);
}
.card + .card { margin-top: var(--space-4); }
.card > :last-child { margin-bottom: 0; }

.notice {
    border-radius: var(--radius-small);
    border-left: 4px solid var(--color-accent);
    background: var(--color-accent-tint);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
}
.notice > :last-child { margin-bottom: 0; }
.notice.success { border-left-color: var(--color-success); background: var(--color-success-tint); }
.notice.error { border-left-color: var(--color-error); background: var(--color-error-tint); }
.notice.warning { border-left-color: var(--color-warning); background: var(--color-warning-tint); }

.badge {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--color-control-border);
    color: var(--color-text);
    background: var(--color-surface);
}
.badge.draft { border-color: var(--color-warning); color: var(--color-warning); }
.badge.open { border-color: var(--color-success); color: var(--color-success); }
.badge.closed, .badge.archived { color: var(--color-muted); }

/* ---------- buttons ---------- */

.button, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: 0 var(--space-4);
    border-radius: var(--radius-small);
    border: 2px solid var(--color-accent-strong);
    background: var(--color-accent-strong);
    color: var(--color-on-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.button:hover, button:hover {
    background: var(--color-accent-strong-hover);
    border-color: var(--color-accent-strong-hover);
    color: var(--color-on-accent);
}
.button.secondary, button.secondary {
    background: transparent;
    color: var(--color-accent-strong);
}
.button.secondary:hover, button.secondary:hover { background: var(--color-accent-tint); color: var(--color-accent-strong); }
.button.danger, button.danger {
    background: transparent;
    border-color: var(--color-error);
    color: var(--color-error);
}
.button.danger:hover, button.danger:hover { background: var(--color-error-tint); color: var(--color-error); }
button.link {
    min-height: var(--touch);
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-accent-strong);
    font-weight: 400;
    text-decoration: underline;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    margin-top: var(--space-5);
}

form.inline { display: inline; margin: 0; }

/* ---------- forms ---------- */

.field { margin: 0 0 var(--space-4); }
.field > label, .field-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.hint { display: block; color: var(--color-muted); font-size: 0.92rem; margin: 0 0 var(--space-2); }
.error-text { display: block; color: var(--color-error); font-weight: 600; margin: var(--space-1) 0; }

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="email"], input[type="search"], input[type="file"], select, textarea {
    width: 100%;
    min-height: var(--touch);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; min-height: 20rem; }
input.short { max-width: 12rem; }
.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] {
    border: 2px solid var(--color-error);
}
.unit-field { display: flex; align-items: center; gap: var(--space-2); }
.unit-field input { max-width: 12rem; }

/* A question: <fieldset class="question"><legend>…</legend>…</fieldset> */
fieldset.question {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    min-width: 0;
}
fieldset.question > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: 1.05rem;
}
fieldset.question > legend + * { clear: both; }
fieldset.question.has-error { border: 2px solid var(--color-error); }
.required-mark { color: var(--color-error); }

/* Answer cards: <label class="choice"><input type="radio|checkbox"><span>Text</span></label>
   White card, the chosen one framed in terracotta. */
.choices { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    cursor: pointer;
}
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--color-accent-strong); }
.choice:has(input:checked) {
    border: 2px solid var(--color-accent);
    background: var(--color-accent-tint);
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}
.choice input:checked + span { font-weight: 600; }
.choice:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.choice-other { margin-top: var(--space-2); }

/* Scale: a row of answer cards with the end labels under it. */
.scale .choices { grid-template-columns: repeat(auto-fit, minmax(3.25rem, 1fr)); }
.scale .choice { justify-content: center; flex-direction: column; gap: var(--space-1); text-align: center; }
.scale-labels { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-muted); font-size: 0.9rem; margin-top: var(--space-1); }

/* Ranking without JavaScript: one <select> "Platz 1…n" per option. */
.ranking { display: grid; gap: var(--space-2); }
.ranking-row {
    display: grid;
    grid-template-columns: 1fr minmax(7.5rem, auto);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}
.ranking-row select { width: auto; }

/* ---------- progress and summary bars ---------- */

.progress-wrap { margin: 0 0 var(--space-5); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--color-muted); margin-bottom: var(--space-1); }
progress, meter {
    display: block;
    width: 100%;
    height: 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}
progress::-webkit-progress-bar { background: var(--color-border); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--color-accent); border-radius: 999px; }
meter::-webkit-meter-bar { background: var(--color-border); border-radius: 999px; border: 0; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value { background: var(--color-accent); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--color-accent); border-radius: 999px; }

.summary-row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr auto; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }

/* ---------- tables and lists ---------- */

.table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.table th { font-weight: 600; white-space: nowrap; }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { border-top: 1px solid var(--color-border); }
.link-list a { display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--touch); align-items: center; padding: var(--space-2) 0; text-decoration: none; }

.secret {
    display: block;
    padding: var(--space-3);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
dl.facts dt { font-weight: 600; }
dl.facts dd { margin: 0; }

/* ---------- invitations print sheet (QR codes) ---------- */

.invite-sheet { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.invite-card { break-inside: avoid; page-break-inside: avoid; text-align: center; }
.invite-card svg { width: 12rem; height: 12rem; }

@media print {
    .site-header, .no-print, .skip-link { display: none !important; }
    body { background: #FFFFFF; color: #000000; }
    .card, .invite-card { box-shadow: none; border: 1px solid #999999; }
}

/* ---------- larger screens ---------- */

@media (min-width: 48rem) {
    body { font-size: 1.0625rem; }
    h1 { font-size: 2.1rem; }
    .card { padding: var(--space-5); }
    .choices.columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- admin (module admin): inline forms in tables ----------
 * A field with its button in one table cell (rename a household, or the
 * delete confirmation); the message at the field takes its own line.
 * Existing tokens only. */

.rename-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.rename-form input[type="text"] { flex: 1 1 12rem; width: auto; }
.rename-form .error-text { flex-basis: 100%; }

/* ---------- participation: privacy notice, review (package C) ----------
 * The privacy notice is a native <details> (works without JavaScript);
 * the review lists question and answer below each other, so long labels
 * fit at 360 px. Answer lines keep the line breaks of long texts. */

details.privacy {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}
/* No `display` change on <summary>: it would hide the disclosure triangle. */
details.privacy > summary {
    min-height: var(--touch);
    padding: var(--space-2) 0;
    font-weight: 600;
    cursor: pointer;
}
details.privacy[open] > summary { margin-bottom: var(--space-2); }

.survey-list { margin-bottom: var(--space-5); }

dl.answers { margin: 0 0 var(--space-4); }
dl.answers dt { font-weight: 600; margin-top: var(--space-3); }
dl.answers dt:first-child { margin-top: 0; }
dl.answers dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.answer-line { display: block; white-space: pre-line; }

/* Links in running text that are actions ("Ändern", the error list):
 * a full touch target without looking like a button. */
a.touch-link { display: inline-flex; align-items: center; min-height: var(--touch); }

/* ---------- surveys (module surveys): origin badge, deadline field ----------
 * "KI-Entwurf" (a survey the AI drafted through the API) in the accent
 * colour, so it stands out from the status badge next to it; the text
 * says it, the colour only helps. The deadline's datetime-local field
 * looks like the other fields. Existing tokens only. */

.badge.ai { border-color: var(--color-accent); color: var(--color-accent-strong); }
input[type="datetime-local"] {
    width: 100%;
    max-width: 18rem;
    min-height: var(--touch);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.has-error input[type="datetime-local"] { border: 2px solid var(--color-error); }