/* feedback.moritzkreis.de -- eigene Hülle, nicht die der Kommandozentrale.

   Dieselbe Handschrift (dunkler Grund, schmale Linien, ein Akzent), aber ein
   eigenes Blatt: die Seite steht Fremden offen und soll nichts von der
   Kommandozentrale mitschleppen -- weder ihre Datei noch ihren Umfang. Ein
   Formular braucht keine 77 KB CSS.

   Hell und dunkel folgen der Einstellung des Geräts. Wer auf dem Handy hell
   liest, soll nicht von einer schwarzen Seite angesprungen werden. */

:root {
  --bg:        #0b0d11;
  --surface:   #12151b;
  --sunk:      #0e1116;
  --line:      #232833;
  --line-soft: #1a1e26;
  --fg:        #e4e9f1;
  --fg-dim:    #a6b0c0;
  --fg-faint:  #949ead;
  --accent:    #4fb3a4;
  --on-accent: #06110f;
  --bad:       #e0596a;
  --good:      #56a874;
  --warn:      #dfa445;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f3f5f8;
    --surface:   #ffffff;
    --sunk:      #f7f9fc;
    --line:      #d7dce6;
    --line-soft: #e6e9f0;
    --fg:        #121620;
    --fg-dim:    #4a5364;
    --fg-faint:  #6b7484;
    --accent:    #1d7f72;
    --on-accent: #ffffff;
    --bad:       #b8283c;
    --good:      #1c7248;
    --warn:      #8a5a10;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Die Leiste, die iOS unten über die Seite legt, würde sonst den
     Absenden-Knopf halb verdecken. */
  padding: 0 0 env(safe-area-inset-bottom);
}

.huelle {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: grid;
  gap: 16px;
}

.kopf h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.02em;
}
.unterzeile { margin: 4px 0 0; color: var(--fg-dim); font-size: 14px; }

.karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 16px;
}
.karte h2 { margin: 0 0 6px; font-size: 16px; }
.hinweis { margin: 0 0 12px; color: var(--fg-dim); font-size: 13.5px; }

form { display: grid; gap: 10px; }

label {
  font-size: 12.5px;
  color: var(--fg-dim);
  margin-bottom: -4px;
}

input, textarea {
  font: inherit;
  font-size: 15px;
  width: 100%;
  background: var(--sunk);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 12px;
  /* 16px auf dem iPhone verhindert, dass Safari beim Tippen hineinzoomt --
     unter 16px tut es das immer, und danach steht die Seite schief. */
}
@media (max-width: 640px) { input, textarea { font-size: 16px; } }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
::placeholder { color: var(--fg-faint); }

button {
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  min-height: 44px;   /* Fingergröße, nicht Mausgröße. */
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: none;
  color: var(--fg-dim);
}
button:hover { color: var(--fg); border-color: var(--fg-faint); }

.haupt {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  justify-self: start;
}
.haupt:hover { color: var(--on-accent); filter: brightness(1.08); }
.haupt:disabled { opacity: .5; cursor: default; filter: none; }

.leise {
  border: none; min-height: 32px; padding: 4px 8px;
  font-size: 12.5px; color: var(--fg-faint);
}

.wer {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.wer-projekt { flex: 1 1 auto; font-size: 14px; font-weight: 600; }

.wahl { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.wahl button { flex: 1 1 140px; }
.wahl button.an { border-color: var(--accent); color: var(--fg); }

.sterne-zeile { display: grid; gap: 6px; }
.sterne { display: flex; gap: 4px; }
.sterne button {
  min-height: 40px; padding: 4px 8px; border: none;
  font-size: 24px; line-height: 1; color: var(--fg-faint);
}
.sterne button.an { color: var(--warn); }

.melde { margin: 12px 0 0; font-size: 13px; min-height: 1.2em; color: var(--fg-dim); }
.melde.bad { color: var(--bad); }
.melde.ok { color: var(--good); }

.danke { text-align: center; }
.haken {
  margin: 0 0 6px; font-size: 40px; line-height: 1; color: var(--good);
}
.danke .haupt { justify-self: center; margin-top: 12px; }

.fuss { color: var(--fg-faint); font-size: 12px; }
.fuss p { margin: 0; }

[hidden] { display: none !important; }

/* --- Verwaltung (/verwaltung) -------------------------------------------
   Dieselbe Hülle wie die Meldeseite, ein paar Bausteine mehr. Bewusst kein
   eigenes Blatt: es ist dieselbe Seite für denselben Menschen, nur eine Tür
   weiter. */

/* Der Zähler steht neben der Überschrift, wenn Platz ist, und sonst darunter
   — als reines `margin-left` brach „1 offen, 1 widerrufen" auf dem Handy
   mitten im Wortpaar um und ließ „widerrufen" allein in der zweiten Zeile
   stehen. */
.karte h2:has(.zaehler) {
  display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 2px 8px;
}
.zaehler {
  font: 400 12px/1.4 var(--mono);
  color: var(--fg-faint);
  white-space: nowrap;
}

.haken-zeile { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.haken {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--fg-dim);
  margin: 0; min-height: 40px; cursor: pointer;
}
/* Ohne diese Zeile erbt das Ankreuzfeld `input { width: 100% }` von oben und
   wird handtellergroß. */
.haken input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0;
  accent-color: var(--accent);
}

.liste { display: grid; gap: 8px; }

.eintrag {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 10px 12px;
  display: grid; gap: 6px;
}
.eintrag.widerrufen { opacity: .55; }
.eintrag-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eintrag-name {
  font-size: 14px; font-weight: 600;
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
.eintrag-fuss {
  display: flex; flex-wrap: wrap; gap: 3px 12px;
  font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
}

.marke {
  font-family: var(--mono); font-size: 10.5px;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--fg-dim);
}
.marke.schlecht {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
}

.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.knoepfe button { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.knoepfe .gefahr:hover { color: var(--bad); border-color: var(--bad); }
.knoepfe .gefahr.scharf { color: var(--bad); border-color: var(--bad); }

/* Der frisch angelegte Schlüssel. Der Akzentrahmen ist die ganze Betonung:
   der Kasten steht ohnehin allein oben auf der Seite. */
.karte.frisch { border-color: var(--accent); }
.schluessel {
  font-family: var(--mono);
  font-size: 14px;
  margin-bottom: 10px;
}
.hinweis.klein { font-size: 12px; margin: 10px 0 0; }