/* Puudel – Abstimmungen für die Familie
   Blau als Markenfarbe. Grün/Gelb/Rot bleiben den Stimmwerten vorbehalten,
   weil sie dort Bedeutung tragen und nicht Dekoration sind. */

:root {
  color-scheme: light;

  --grund: #f4f6fb;
  --karte: #ffffff;
  --karte-weich: #f8fafc;
  --text: #101828;
  --ruhig: #5b6577;
  --rand: #e2e7f0;
  --rand-stark: #cbd4e3;

  --akzent: #2563eb;
  --akzent-tief: #1d4ed8;
  --akzent-text: #ffffff;
  --akzent-weich: #eaf1ff;
  --akzent-rand: #b9d0fb;

  --ja: #16794a;
  --ja-hell: #e6f5ec;
  --vielleicht: #96650b;
  --vielleicht-hell: #fdf3dd;
  --nein: #6b7484;
  --nein-hell: #eef1f6;
  --gefahr: #b42318;
  --gefahr-hell: #fdeceb;

  --radius: 14px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --schatten-hoch: 0 4px 12px rgba(16, 24, 40, .08);
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --grund: #0e131d;
    --karte: #161c28;
    --karte-weich: #1b2230;
    --text: #e7ecf5;
    --ruhig: #97a1b3;
    --rand: #263043;
    --rand-stark: #35415a;

    --akzent: #5b9bff;
    --akzent-tief: #7fb2ff;
    --akzent-text: #08152b;
    --akzent-weich: #16233c;
    --akzent-rand: #2c4470;

    --ja: #5fc48c;
    --ja-hell: #14301f;
    --vielleicht: #dcae55;
    --vielleicht-hell: #322813;
    --nein: #8b93a3;
    --nein-hell: #222937;
    --gefahr: #f08579;
    --gefahr-hell: #35191a;

    --schatten: 0 1px 2px rgba(0, 0, 0, .3);
    --schatten-hoch: 0 4px 16px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

.huelle { max-width: 900px; margin: 0 auto; padding: 0 16px; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-tief); }

/* Kopf und Fuss ------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  /* Voller Deckwert als Rückfall -- aeltere Geraete kennen color-mix() nicht
     und haetten sonst eine durchsichtige Kopfzeile. */
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  margin-bottom: 24px;
}
@supports (background: color-mix(in srgb, red 50%, white)) {
  .kopf {
    background: color-mix(in srgb, var(--karte) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
  }
}
.kopf-inhalt {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; justify-content: space-between;
  padding-top: 11px; padding-bottom: 11px;
}
.marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 19px; letter-spacing: -.015em;
  color: var(--text); text-decoration: none;
}
.marke-zeichen { font-size: 22px; line-height: 1; }
.kopf-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kopf-nav a, .kopf-nav .knopf-link {
  padding: 7px 11px; border-radius: 999px;
  color: var(--ruhig); text-decoration: none; font-size: 15px; font-weight: 500;
}
.kopf-nav a:hover, .kopf-nav .knopf-link:hover {
  background: var(--akzent-weich); color: var(--akzent);
}
.kopf-wer { color: var(--ruhig); font-size: 14px; padding: 0 4px; }
.kopf-wer strong { color: var(--text); }

.fuss { margin: 44px auto 32px; color: var(--ruhig); font-size: 14px; }

/* Bausteine ----------------------------------------------------------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 22px;
  margin-bottom: 18px;
}
.karte.schmal { max-width: 420px; margin-left: auto; margin-right: auto; }
.karte.mittig { text-align: center; }

h1 { font-size: clamp(24px, 4.5vw, 30px); margin: 0 0 14px; line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.ruhig { color: var(--ruhig); }
.klein { font-size: 14px; }
.gross { font-size: 17px; }
.beschreibung { white-space: pre-wrap; }

.kopfzeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kopfzeile h1 { margin-bottom: 0; }
.kopfzeile-seite { justify-content: space-between; margin-bottom: 18px; }

.abzeichen {
  display: inline-block; font-size: 12.5px; padding: 4px 11px;
  border-radius: 999px; font-weight: 600; white-space: nowrap; line-height: 1.35;
}
.abzeichen-offen { background: var(--akzent-weich); color: var(--akzent); }
.abzeichen-zu { background: var(--nein-hell); color: var(--ruhig); }
.abzeichen-offen-noch { background: var(--vielleicht-hell); color: var(--vielleicht); }
.abzeichen-admin { background: var(--akzent-weich); color: var(--akzent); margin-left: 6px; }
.abzeichen-verfahren {
  background: transparent; color: var(--ruhig);
  border: 1px solid var(--rand-stark); font-weight: 500; vertical-align: middle;
}
.abzeichen-fertig { background: var(--ja-hell); color: var(--ja); }

.meldungen { margin-bottom: 20px; }
.meldung {
  padding: 13px 16px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand); margin-bottom: 8px; font-size: 15px;
}
.meldung-erfolg { background: var(--ja-hell); border-color: var(--ja); color: var(--ja); }
.meldung-fehler { background: var(--gefahr-hell); border-color: var(--gefahr); color: var(--gefahr); }

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

label { display: block; margin: 15px 0 6px; font-weight: 560; font-size: 15px; }
input[type=text], input[type=password], input[type=date], textarea {
  width: 100%; padding: 11px 13px; font: inherit;
  color: var(--text); background: var(--karte-weich);
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  min-height: var(--tap);
}
textarea { resize: vertical; min-height: 80px; }
input::placeholder, textarea::placeholder { color: var(--ruhig); opacity: .7; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

fieldset {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: 12px 16px 16px; margin: 20px 0;
}
legend { font-weight: 620; font-size: 14px; padding: 0 6px; color: var(--ruhig); }
.schalter label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0; }
.schalter label[hidden] { display: none; }
.schalter input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--akzent); }

.art { display: grid; gap: 10px; }
.art-option {
  display: flex; gap: 11px; align-items: flex-start; margin: 0;
  padding: 13px 15px; border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  font-weight: 400; cursor: pointer; transition: border-color .12s, background .12s;
}
.art-option:hover { border-color: var(--akzent-rand); }
.art-option:has(input:checked) {
  border-color: var(--akzent); background: var(--akzent-weich);
  box-shadow: 0 0 0 1px var(--akzent) inset;
}
.art-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--akzent); flex: none; }

.hilfsleiste[hidden], .erklaerung[hidden] { display: none; }
.hilfsleiste-felder { display: flex; gap: 8px; flex-wrap: wrap; }
.hilfsleiste-felder input { flex: 1 1 150px; width: auto; }

.feldpaar { display: flex; gap: 14px; flex-wrap: wrap; }
.feldpaar > div { flex: 1 1 220px; }
.feldpaar label { margin-top: 0; }
.ankreuz { display: flex; gap: 10px; align-items: center; font-weight: 400; margin-top: 16px; }
.ankreuz input { width: 18px; height: 18px; accent-color: var(--akzent); }

/* Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 18px; padding: 11px 22px; min-height: var(--tap);
  background: var(--akzent); color: var(--akzent-text);
  border: 1px solid transparent; border-radius: var(--radius-klein);
  font: inherit; font-weight: 620; cursor: pointer; text-decoration: none;
  transition: background .12s, transform .06s, box-shadow .12s;
  box-shadow: var(--schatten);
}
.knopf:hover { background: var(--akzent-tief); color: var(--akzent-text); box-shadow: var(--schatten-hoch); }
.knopf:active { transform: translateY(1px); }
.knopf-still { background: transparent; color: var(--text); border-color: var(--rand-stark); box-shadow: none; }
.knopf-still:hover { background: var(--karte-weich); color: var(--text); border-color: var(--akzent-rand); }
.knopf-gefahr { background: transparent; color: var(--gefahr); border-color: var(--gefahr); box-shadow: none; }
.knopf-gefahr:hover { background: var(--gefahr-hell); color: var(--gefahr); }
.knopf-klein {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 13px; min-height: 36px; font-size: 14px; font-weight: 560;
  background: transparent; color: var(--text);
  border: 1px solid var(--rand-stark); border-radius: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf-klein:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 15px;
  color: var(--ruhig); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.knopf-link.gefahr { color: var(--gefahr); font-size: 14px; }
.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.knopfreihe .knopf { margin-top: 0; }
.inline { display: inline; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Startseite ---------------------------------------------------------- */

.hero { text-align: center; padding: 8px 0 4px; }
.hero-zeichen { font-size: 52px; line-height: 1; display: block; margin-bottom: 6px; }
.hero h1 { margin-bottom: 8px; }
.hero-unterzeile { font-size: 17px; color: var(--ruhig); max-width: 34em; margin: 0 auto 4px; }

.arten { display: grid; gap: 12px; margin: 20px 0 4px; }
.art-karte {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; background: var(--karte-weich);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  text-align: left;
}
.art-zeichen { font-size: 22px; line-height: 1.3; flex: none; }
.art-karte h3 { margin: 0 0 3px; font-size: 15.5px; }
.art-karte p { margin: 0; font-size: 14.5px; color: var(--ruhig); }

/* Abstimmen ----------------------------------------------------------- */

.erklaerung {
  background: var(--akzent-weich);
  border: 1px solid var(--akzent-rand);
  border-radius: var(--radius-klein);
  padding: 15px 17px; margin: 16px 0; font-size: 15px;
}
.erklaerung p:last-child { margin-bottom: 0; }
.erklaerung ul { margin: 8px 0; padding-left: 20px; }
.erklaerung li { margin: 4px 0; }

.wahlliste { margin-top: 18px; border-top: 1px solid var(--rand); }
.wahlzeile {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--rand);
}
.wahl-titel { font-weight: 560; }
.opt-neben { color: var(--ruhig); font-weight: 400; }
.wahl-knoepfe { display: flex; gap: 7px; }
.wahl { margin: 0; font-weight: 500; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 8px 17px; font-size: 15px;
  border: 1px solid var(--rand-stark); border-radius: 999px;
  color: var(--ruhig); cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.wahl span:hover { border-color: var(--akzent-rand); }
.wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wahl-ja input:checked + span { background: var(--ja); border-color: var(--ja); color: #fff; }
.wahl-vielleicht input:checked + span { background: var(--vielleicht); border-color: var(--vielleicht); color: #fff; }
.wahl-nein input:checked + span { background: var(--nein); border-color: var(--nein); color: #fff; }

/* Systemisches Konsensieren ------------------------------------------- */

.w0 { --wfarbe: var(--ja);         --wgrund: var(--ja-hell); }
.w1 { --wfarbe: var(--ja);         --wgrund: var(--ja-hell); }
.w2 { --wfarbe: var(--vielleicht); --wgrund: var(--vielleicht-hell); }
.w3 { --wfarbe: var(--gefahr);     --wgrund: var(--gefahr-hell); }
.w4 { --wfarbe: var(--gefahr);     --wgrund: var(--gefahr-hell); }

.wzeile { padding: 16px 0; border-bottom: 1px solid var(--rand); }
.wzeile:first-child { border-top: 1px solid var(--rand); }
.wzeile-passiv {
  background: var(--karte-weich); border: 1px dashed var(--rand-stark);
  border-radius: var(--radius-klein); padding: 14px 15px; margin-top: 10px;
}
.wregler-zeile { display: flex; align-items: center; gap: 14px; margin-top: 10px; }

.wregler {
  flex: 1; min-width: 0; height: 30px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.wregler::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(to right, var(--ja), var(--vielleicht), var(--gefahr));
}
.wregler::-moz-range-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(to right, var(--ja), var(--vielleicht), var(--gefahr));
}
.wregler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: var(--karte); border: 3px solid var(--text);
  box-shadow: var(--schatten-hoch);
}
.wregler::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--karte); border: 3px solid var(--text);
  box-shadow: var(--schatten-hoch);
}
.wregler:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

.wwert {
  flex: none; min-width: 52px; text-align: center;
  font-size: 21px; font-weight: 700; padding: 6px 8px; border-radius: 10px;
  color: var(--wfarbe); background: var(--wgrund);
  font-variant-numeric: tabular-nums; transition: color .1s, background .1s;
}
.wskala {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--ruhig); margin-top: 4px;
}

.diagramm { margin-top: 24px; }
.diagramm h3 { margin-bottom: 2px; }
.balkenzeile {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto;
  gap: 12px; align-items: center; padding: 6px 0;
}
.balken-name { font-size: 15px; }
.balken-spur { background: var(--grund); border-radius: 999px; height: 18px; overflow: hidden; }
.balken { height: 100%; border-radius: 999px; background: var(--wfarbe); min-width: 4px; transition: width .2s; }
.balken-wert { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.balken-beste .balken-name { font-weight: 640; }
.balken-beste .balken-wert { color: var(--akzent); }

/* Ergebnisraster ------------------------------------------------------ */

.raster-huelle { overflow-x: auto; margin: 0 -4px; padding-bottom: 2px; }
.raster { border-collapse: separate; border-spacing: 0; font-size: 15px; }
.raster th, .raster td { border-bottom: 1px solid var(--rand); border-right: 1px solid var(--rand); padding: 9px 11px; }
.raster tr > *:last-child { border-right: 0; }
.raster thead th {
  font-size: 13.5px; text-align: center; vertical-align: bottom;
  background: var(--karte-weich); font-weight: 620;
}
.raster .opt-haupt { display: block; white-space: nowrap; }
.raster .opt-neben { display: block; font-size: 12.5px; font-weight: 400; }
.raster .ecke, .raster .name {
  text-align: left; position: sticky; left: 0; z-index: 1;
  background: var(--karte); white-space: nowrap; font-weight: 560;
}
.raster thead .ecke { background: var(--karte-weich); }
.raster .zelle { text-align: center; font-weight: 700; }
.zelle-ja { background: var(--ja-hell); color: var(--ja); }
.zelle-vielleicht { background: var(--vielleicht-hell); color: var(--vielleicht); }
.zelle-nein { background: var(--nein-hell); color: var(--nein); }
.zelle-w { font-variant-numeric: tabular-nums; color: var(--wfarbe); background: var(--wgrund); }
.raster .beste { background: var(--akzent-weich); box-shadow: inset 0 2px 0 var(--akzent); }
.raster th.passiv { font-style: italic; }
.raster tfoot .summe { text-align: center; white-space: nowrap; background: var(--karte-weich); border-bottom: 0; }
.raster tfoot .name { background: var(--karte-weich); border-bottom: 0; }
.wsumme { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zaehler { display: inline-block; font-size: 13px; font-weight: 660; margin: 0 2px; }
.zaehler-ja { color: var(--ja); }
.zaehler-vielleicht { color: var(--vielleicht); }
.zaehler-hoch { color: var(--gefahr); }
/* Spalte mit den Löschen-Knöpfen in der Verwaltung: rahmenlos angehängt. */
.zelle-aktion, .raster thead .ecke-rechts {
  text-align: center; border: 0 !important; background: transparent;
}

/* Listen -------------------------------------------------------------- */

.liste { width: 100%; border-collapse: collapse; font-size: 15px; }
.liste th, .liste td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.liste thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ruhig); font-weight: 620; }
.liste a { color: var(--text); text-decoration: none; }
.liste a:hover { color: var(--akzent); text-decoration: underline; }
.liste tr:last-child td { border-bottom: 0; }
.liste .rechts { text-align: right; }
.liste .einfarbig { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--ruhig); }
.liste tr.inaktiv td, .liste tr.inaktiv td strong { color: var(--ruhig); }
.aktionen { white-space: nowrap; }
.aktionen form { display: inline-block; margin: 2px 4px 2px 0; }

.linkzeile { display: flex; gap: 8px; flex-wrap: wrap; }
.linkzeile input {
  flex: 1 1 260px; width: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
}

/* Kommentare ---------------------------------------------------------- */

.kommentar { padding: 13px 0; border-bottom: 1px solid var(--rand); }
.kommentar p { margin: 5px 0 0; white-space: pre-wrap; }
.kommentar-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.kommentar-formular { margin-top: 10px; }

/* Mobil --------------------------------------------------------------- */

@media (max-width: 640px) {
  .huelle { padding: 0 13px; }
  .karte { padding: 17px 15px; border-radius: 12px; }
  .kopf { margin-bottom: 18px; }
  .marke { font-size: 17px; }
  .kopf-nav { gap: 2px; }
  .kopf-nav a, .kopf-nav .knopf-link { padding: 7px 9px; font-size: 14.5px; }
  .kopf-wer { width: 100%; order: -1; padding: 0; }

  /* Ja/Vielleicht/Nein füllen die Zeile – große Ziele für den Daumen. */
  .wahlzeile { display: block; padding: 14px 0; }
  .wahl-knoepfe { width: 100%; margin-top: 9px; gap: 6px; }
  .wahl { flex: 1; }
  .wahl span { width: 100%; padding: 10px 4px; }

  .wregler-zeile { gap: 11px; }
  .wwert { min-width: 48px; font-size: 19px; }

  .balkenzeile { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 0; }
  .balken-name { grid-column: 1; }
  .balken-wert { grid-column: 2; grid-row: 1; }
  .balken-spur { grid-column: 1 / -1; grid-row: 2; height: 14px; }

  .knopf { width: 100%; }
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe form { width: 100%; }
  .knopfreihe .knopf { width: 100%; }

  .feldpaar { gap: 0; }
  .liste th, .liste td { padding: 10px 6px; }
  .hero-zeichen { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}