/* ==========================================================================
   GVZ Portal — shared styles
   1:1 Übernahme des Design-Systems vom ursprünglichen Prototyp
   (gvz-dashboard.m-hunziker.workers.dev), inkl. Original-Klassennamen,
   damit künftige Tools sich einfach am selben System bedienen können.
   ========================================================================== */

/* Echte GVZ-Hausschriften über das GVZ-eigene Adobe-Fonts-Kit (wie auf g-v-z.ch selbst).
   Das Kit ist domain-gebunden — falls die Schrift auf portal.g-v-z.ch nicht lädt, im
   Adobe-Fonts-Projekt zu diesem Kit die Domain "portal.g-v-z.ch" freigeben (oder prüfen,
   ob dort bereits *.g-v-z.ch als Wildcard hinterlegt ist). Fällt automatisch auf die
   Fallback-Schriften unten zurück, falls der Kit nicht lädt. */
@import url('https://use.typekit.net/zkd6uqr.css');

:root {
  --green-900: #024a2f;
  --green-700: #03613d;
  --green-600: #03613d;
  --green-500: #a2bf1a;
  --green-100: color-mix(in srgb, var(--green-700) 10%, white);
  --cream: #f3e8cb;
  --bg-tint-green: #bbd9a5;
  --amber-500: #c98a1c;
  --amber-100: #fbf1de;
  --red-500: #b3432f;
  --red-100: #fbeae6;
  --bg: #f8f8f8;
  --surface: #ffffff;
  --border: #e1e6dd;
  --text: #2a2f28;
  --text-muted: #5c6b5d;
  --radius: 14px;
  --font-heading: museo, Georgia, serif;
  --font-body: museo-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(20,30,20,.04), 0 8px 24px -12px rgba(20,30,20,.15);
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Die Seite füllt immer mindestens die Fensterhöhe, und der Inhaltsbereich nimmt
   den übrigen Platz ein. Dadurch sitzt die Fusszeile auch auf kurzen Seiten wie
   der Startseite unten am Rand statt direkt unter dem Text.
   100dvh berücksichtigt die ein- und ausfahrende Adressleiste auf dem Handy;
   ältere Browser bleiben bei 100vh. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* width:100% ist hier nicht überflüssig: Als Flex-Element mit "margin: 0 auto"
   würde .wrap sonst auf seine Inhaltsbreite zusammenschrumpfen statt bis zur
   Maximalbreite aufzugehen. */
.wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 80px;
  flex: 1 0 auto;
}

header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px calc(-50% + 16px + 50vw);
  margin: 0 calc(50% - 50vw);
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 7px 0; }
/* Das Logo führt zurück aufs Portal, wie der Link daneben. */
.brand:hover .logo-img { opacity: .8; }
.brand:focus-visible { outline: 2px solid var(--green-500); outline-offset: 4px; border-radius: 4px; }
.logo-img { height: 38px; width: auto; display: block; transition: opacity .15s ease; }
.back-link { font-size: 0.82rem; font-weight: 600; color: var(--green-700); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* --- Kopfzeile bei aktivem Mitglieder-Login --- */
.top-actions { display: flex; align-items: center; gap: 18px; }
.userbar { display: inline-flex; align-items: center; gap: 12px; }
.userbar-name {
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) { .userbar-name { display: none; } }

/* --- Login-Seite --- */
.wrap-narrow { max-width: 520px; }
.code-input {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.5rem; letter-spacing: 0.35em; text-align: center;
}

.title-block { padding: 22px 4px 26px; }
.title-block .eyebrow { margin-bottom: 8px; }
.title-block h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--green-700);
  font-size: 1.7rem;
  margin: 0;
  line-height: 1.2;
}
.title-block p { margin: 8px 0 0; color: var(--text-muted); font-size: 0.92rem; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--green-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  display: block;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* --- Landing-page Tool-Karten --- */
.tool-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  transition: border-color .15s, transform .05s;
}
.tool-card:hover { border-color: var(--green-500); }
.tool-card:active { transform: translateY(1px); }
.tool-card .icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.tool-card .icon svg { width: 19px; height: 19px; }
.tool-card .name { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.tool-card .desc { font-size: 0.85rem; color: var(--text-muted); }

.tool-card.disabled {
  cursor: default;
  background: var(--bg);
  box-shadow: none;
  border-style: dashed;
}
.tool-card.disabled:hover { border-color: var(--border); }
.tool-card.disabled .icon,
.tool-card.disabled .name,
.tool-card.disabled .desc { opacity: .55; }
.tool-card .badge.off {
  background: var(--border); color: var(--text-muted); margin-top: 12px;
}

.placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}
.card h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-700);
  font-size: 1.2rem;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.card .sub { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 16px; }

.infobox {
  background: var(--green-100);
  border: 1px solid color-mix(in srgb, var(--green-600) 30%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 18px; /* identisch zum Abstand zwischen zwei .card */
}
.infobox b { color: var(--green-700); }
.infobox a { color: var(--green-700); }

.hintbox {
  background: var(--amber-100);
  border: 1px solid color-mix(in srgb, var(--amber-500) 35%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.86rem;
  color: var(--text);
  margin-top: 4px;
}
.hintbox b { color: var(--amber-500); }
.hintbox a { color: var(--green-700); }

/* --- Formulare --- */
label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin: 0 0 6px; }

input[type=text], input[type=number], input[type=email], input[type=tel], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 20%, transparent);
}
textarea { resize: vertical; min-height: 220px; }

/* --- Zahlenfeld mit sichtbarer Einheit --- */
.input-unit { position: relative; }
/* Platz für die Einheit rechts im Feld — reicht auch für "CHF / ha" in Museo Sans. */
.input-unit input { padding-right: 88px; }
.input-unit::after {
  content: attr(data-unit);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  pointer-events: none;
}
/* Die Pfeilchen des Number-Felds würden sonst unter der Einheit verschwinden. */
.input-unit input::-webkit-outer-spin-button,
.input-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-unit input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }
.check-row, .radio-row { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: var(--text); }
.check-row input, .radio-row input { width: auto; margin-top: 3px; accent-color: var(--green-700); }

/* --- Autocomplete --- */
.autocomplete { position: relative; }
.ac-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 12px rgba(20,30,20,.18), 0 12px 32px -8px rgba(20,30,20,.25);
  max-height: 220px; overflow-y: auto; z-index: 20; display: none;
}
.ac-results.show { display: block; }
.ac-item { padding: 9px 12px; cursor: pointer; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.sel { background: var(--green-100); }
.ac-item small { display: block; color: var(--text-muted); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-size: 0.9rem; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; transition: filter .15s, transform .05s, background .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; border-color: var(--green-700); color: var(--green-700); }
.btn-outline:hover { background: var(--green-100); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.status { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; min-height: 1.2em; }
.status.err { color: var(--red-500); }

/* --- Wetterdaten-Statistikkarten --- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--bg); }
.stat .label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.stat .value { font-size: 1.9rem; font-weight: 700; margin-top: 4px; }
.stat .value span { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.stat .note { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 8px; }
.badge.low { background: var(--red-100); color: var(--red-500); }
.badge.mid { background: var(--amber-100); color: var(--amber-500); }
.badge.high { background: var(--green-100); color: var(--green-700); }

.result-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  white-space: pre-wrap; font-size: 0.88rem; font-family: ui-monospace, Consolas, monospace;
  max-height: 420px; overflow-y: auto;
}

/* --- Kanton-Buttons (Gesuch senden) --- */
.kanton-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.kanton-btn {
  position: relative; flex: 1 1 0; min-width: 160px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--bg); cursor: pointer; font-family: inherit; color: var(--text);
  text-decoration: none; display: block; transition: opacity .15s, border-color .15s, background .15s;
}
.kanton-btn:hover { border-color: var(--green-500); }
.kanton-btn .name { font-weight: 700; font-size: 0.9rem; }
.kanton-btn .mail { font-size: 0.78rem; color: var(--text-muted); }
.kanton-btn.disabled { pointer-events: none; cursor: not-allowed; }
.kanton-btn.disabled .mail { font-style: italic; }
.kanton-btn .tag {
  display: none; position: absolute; top: 10px; right: 12px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: var(--green-700);
  background: var(--green-100); padding: 2px 7px; border-radius: 999px;
}
.kanton-btns.has-active .kanton-btn { opacity: .55; }
.kanton-btns.has-active .kanton-btn.active {
  opacity: 1; border-color: var(--green-500); background: var(--green-100);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-500) 25%, transparent);
}
.kanton-btns.has-active .kanton-btn.active .tag { display: inline-block; }

.divider { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* --- Umfrage-Statuschip (analog .badge, eigene Semantik) --- */
.survey-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
  background: var(--green-100); color: var(--green-700);
  border: 1px solid color-mix(in srgb, var(--green-600) 30%, transparent);
}
.survey-pill.closed { background: var(--red-100); color: var(--red-500); border-color: color-mix(in srgb, var(--red-500) 30%, transparent); }

/* --- Footer / Toast --- */
footer {
  color: var(--cream); font-size: 0.8rem;
  margin: 36px calc(50% - 50vw) 0; padding: 22px 16px; background: var(--green-700);
}
footer a { color: var(--cream); }

/* Aufbau wie die Fusszeile auf g-v-z.ch: links der Copyright-Vermerk und die
   Portal-Adresse, rechts Umsetzung, Impressum und Datenschutzerklärung in einer
   Reihe. Die drei Links sind bewusst gleichwertig gestaltet — auf g-v-z.ch steht
   «Webumsetzung» ebenfalls gleichrangig neben dem Rechtlichen. */
.footer-inner {
  max-width: 880px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: flex-start; justify-content: space-between;
}
.footer-copy { color: #fff; }

/* Portal-Adresse und Umsetzung nebeneinander, beide gedämpft. Als Flex-Zeile,
   damit sie auf schmalen Geräten sauber untereinander rutschen.
   Getrennt durch einen Mittelpunkt statt nur durch Abstand: Reiner Leerraum
   liest sich zwischen zwei mehrwortigen Angaben wie ein breites Leerzeichen,
   die Texte verschwimmen dann ineinander. */
.footer-site {
  color: color-mix(in srgb, var(--cream) 55%, transparent); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 2px 10px;
}
/* Der Trenner ist ein eigenes Element, kein ::before im Link — sonst gehörte er
   zur Klickfläche und würde beim Überfahren mitunterstrichen. */
.footer-trenner { user-select: none; opacity: .7; }

/* color: inherit — sonst würde die Regel «footer a» den gedämpften Ton
   überschreiben und beide so hell wie die Links rechts erscheinen lassen. */
.footer-site a { color: inherit; text-decoration: none; }
.footer-site a:hover { text-decoration: underline; }

.footer-links {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end;
}
.footer-links a { text-decoration: none; white-space: nowrap; }
.footer-links a:hover { text-decoration: underline; }
.footer-note {
  max-width: 880px; margin: 0 auto 16px; padding-bottom: 14px;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
}

@media (max-width: 560px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links { justify-content: flex-start; }
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--green-700); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 0.85rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Admin-Bereich: Kennzahlen, Verteilungen, Tabelle --- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.kpi-value {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
  color: var(--green-700); line-height: 1.2;
}
.kpi-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.kpi-sub { font-size: 0.75rem; }

.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
@media (max-width: 700px) { .dist-grid { grid-template-columns: 1fr; } }
.dist-title {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 1fr 90px 26px; align-items: center; gap: 10px; }
.bar-label { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--green-500); border-radius: 999px; }
.bar-value { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-align: right; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.data-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.data-table th, .data-table td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table th {
  background: var(--bg); font-weight: 700; color: var(--text-muted);
  position: sticky; top: 0;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--green-100); }

@media (max-width: 560px) {
  .wrap { padding: 0 14px 64px; }
  .title-block h1 { font-size: 1.4rem; }
  .logo-img { height: 30px; }
}

/* ==========================================================================
   Konten, Registrierung und Nutzerverwaltung
   ========================================================================== */

/* Aufklappbares Passwortfeld auf der Login-Seite */
.alt-login { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.alt-login summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--green-700);
  list-style: none;
}
.alt-login summary::-webkit-details-marker { display: none; }
.alt-login summary::before { content: "+ "; font-weight: 700; }
.alt-login[open] summary::before { content: "– "; }
.alt-login summary:hover { text-decoration: underline; }
.alt-login .sub { margin: 12px 0 14px; }

/* Statusmarken in der Nutzertabelle */
.pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700; line-height: 1.6;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); color: var(--text-muted);
}
.pill.ok      { background: var(--green-100); color: var(--green-700); }
.pill.warn    { background: var(--amber-100);  color: var(--amber-500); }
.pill.bad     { background: var(--red-100);    color: var(--red-500); }
.pill.neutral { background: var(--bg);         color: var(--text-muted); }

/* Kleine Knöpfe direkt in der Tabellenzeile */
.inline-form { display: inline; margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.btn-mini {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.btn-mini:hover  { border-color: var(--green-500); color: var(--text); }
.btn-mini:active { transform: translateY(1px); }
.btn-mini.ok     { border-color: var(--green-700); color: var(--green-700); }
.btn-mini.ok:hover  { background: var(--green-100); }
.btn-mini.bad    { border-color: var(--red-500); color: var(--red-500); }
.btn-mini.bad:hover { background: var(--red-100); }

.cell-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.data-table tbody tr.is-self td { background: color-mix(in srgb, var(--green-500) 8%, transparent); }

/* Offene Anmeldungen zuoberst im Admin-Bereich */
.pending-row {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.pending-row:last-child { border-bottom: none; padding-bottom: 0; }
.pending-name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.pending-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.pending-note { font-size: 0.82rem; color: var(--text); margin-top: 6px; font-style: italic; }

/* Zähler neben dem Link zur Nutzerverwaltung */
.count-badge {
  display: inline-block; min-width: 18px; text-align: center;
  font-size: 0.7rem; font-weight: 700; line-height: 18px;
  padding: 0 5px; border-radius: 999px; margin-left: 5px;
  background: var(--amber-500); color: #fff;
}

@media (max-width: 560px) {
  .pending-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Umfrageseite: Kopfzeile mit Frist, Fragenlabels, Video
   ========================================================================== */

.survey-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin-bottom: 18px;
}
.survey-deadline { font-size: 0.85rem; color: var(--text-muted); }
.survey-deadline b { color: var(--text); }

/* Fragetitel ausserhalb von <label>, weil Radio- und Checkbox-Gruppen kein
   einzelnes Eingabefeld haben, auf das ein label zeigen könnte. */
.q-label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 8px;
}
.q-help {
  font-size: 0.82rem; color: var(--text-muted); margin: -2px 0 8px; font-style: italic;
}
.radio-row + .radio-row { margin-top: 4px; }

/* Video: bis zum Klick reine Eigenleistung, kein Kontakt zu YouTube. */
.video-card h2 { margin-bottom: 14px; }
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: var(--green-900);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; border: 0; padding: 20px; text-align: center;
  font-family: var(--font-body); color: var(--cream);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--green-500) 26%, transparent), transparent 62%),
    linear-gradient(160deg, var(--green-700), var(--green-900));
}
.video-cover:hover .video-btn { transform: scale(1.06); background: var(--green-500); color: var(--green-900); }
.video-cover:focus-visible { outline: 3px solid var(--green-500); outline-offset: -3px; }
.video-btn {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 92%, transparent); color: var(--green-900);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.video-btn svg { width: 30px; height: 30px; margin-left: 3px; }
.video-label { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.video-note { font-size: 0.76rem; opacity: .75; max-width: 30ch; }

@media (max-width: 560px) {
  .video-btn { width: 52px; height: 52px; }
  .video-btn svg { width: 25px; height: 25px; }
}

/* ==========================================================================
   Bedarf nach Kalenderwochen
   ========================================================================== */

.kw-add {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.kw-add select { min-width: 160px; }
.kw-add .btn { flex: 0 0 auto; }

.kw-list { display: flex; flex-direction: column; gap: 8px; }

/* Feste Spalten: Wochenetikett, Flächenfeld, Entfernen-Knopf. Das Etikett hat
   eine feste Breite, damit die Felder untereinander sauber fluchten. */
.kw-row {
  display: grid; grid-template-columns: 74px 1fr 36px;
  gap: 10px; align-items: center;
}
.kw-label {
  font-weight: 700; font-size: 0.9rem; color: var(--text);
  white-space: nowrap;
}
.kw-row .input-unit { margin: 0; }
.kw-row input { margin: 0; }
.kw-remove {
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 1.15rem; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.kw-remove:hover { border-color: var(--red-500); color: var(--red-500); background: var(--red-100); }
.kw-remove:active { transform: translateY(1px); }

.kw-empty { margin: 0; font-style: italic; }
.kw-empty[hidden] { display: none; }

.kw-summe {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text);
}
.kw-summe[hidden] { display: none; }

@media (max-width: 560px) {
  .kw-add { align-items: stretch; }
  .kw-add .btn { width: 100%; }
  .kw-row { grid-template-columns: 62px 1fr 34px; gap: 8px; }
  /* Auf schmalen Geräten braucht die Einheit weniger Platz, sonst bleibt vom
     Eingabefeld kaum etwas übrig. */
  .kw-row .input-unit input { padding-right: 42px; }
}

/* ==========================================================================
   Umfrage-Baukasten
   ========================================================================== */

.baukasten-kopf {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin: 26px 4px 12px;
}
.baukasten-kopf h2 {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
}

/* Eine Frage im Editor */
.frage-karte {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.frage-kopf {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.frage-nr {
  font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem;
  color: var(--text-muted); min-width: 22px;
}
.frage-typ { flex: 1 1 180px; margin: 0; width: auto; }
.frage-werkzeuge { display: flex; gap: 5px; margin-left: auto; }
.frage-werkzeuge .btn-mini {
  min-width: 34px; min-height: 30px; font-size: 0.9rem; line-height: 1;
}

.feld-optional {
  font-weight: 400; font-size: 0.74rem; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}

/* Überschriften-Frage im ausgefüllten Formular */
.form-info h3 {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  margin: 0 0 6px; color: var(--text);
}

/* Freitextantworten in der Auswertung */
.text-antworten { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.text-antworten li { font-size: 0.88rem; line-height: 1.5; }

/* Der Link zur Umfrage soll sich bequem markieren lassen */
#linkFeld { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.82rem; }

@media (max-width: 560px) {
  .frage-werkzeuge { margin-left: 0; width: 100%; justify-content: flex-end; }
  .frage-typ { flex: 1 1 100%; }
}