/* ============================================================
   Termine: Startseitenliste, Terminkarten, Einzelansicht
   ============================================================
   Teil der nach Funktion aufgeteilten Gestaltung (29.08.2026).

   Vorher lag alles in einer seite.css mit 1.940 Zeilen, und jede neue
   Funktion wurde hinten drangehaengt. Max am 29.08.2026: "dass nicht
   alles in App.js reinkommt und in CSS, sondern dass das nach Funktion
   getrennt wird." Beim JavaScript war das laengst so, beim CSS nicht.

   Neue Regeln gehoeren in die Datei ihrer Funktion, nicht ans Ende der
   naechstbesten. Die Einbindereihenfolge in den HTML-Dateien entspricht
   der Reihenfolge, in der die Bloecke vorher in seite.css standen -
   daran haengt die Kaskade. tests/frontend-architecture.test.js prueft
   beides.
   ============================================================ */

/* ---------- Termine ---------- */

.termine { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.termin { display: flex; gap: 13px; padding: 13px 16px; border-bottom: 1px solid #f3f4f6; align-items: flex-start; }
.termin:last-child { border-bottom: 0; }
.termin-datum {
  flex: none; width: 46px; text-align: center;
  background: var(--marke-lighter); border-radius: 9px; padding: 6px 0;
}
.termin-datum .tag { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1; }
.termin-datum .monat {
  display: block; font-size: .61rem; text-transform: uppercase;
  color: var(--muted); letter-spacing: .05em; margin-top: 2px;
}
.termin-was { font-size: .86rem; font-weight: 600; }
.termin-wo { font-size: .76rem; color: var(--muted); margin-top: 2px; }

/* Die Terminzeilen der Startseite sind seit dem 29.08.2026 Verweise auf
   den einzelnen Termin - vorher waren sie reine Textzeilen. Ein <a>
   bringt Unterstreichung und Linkfarbe mit, beides waere hier falsch:
   die Zeile soll aussehen wie vorher und sich nur anfassen lassen. */
a.termin { text-decoration: none; color: inherit; }
a.termin:hover { background: var(--marke-lighter); }
.termin .wortmarke { margin-top: 6px; }

/* Zweiter Weg zur Terminseite, unter der Liste. Auf dem Handy ist der
   Weg vom letzten Termin zurueck zum Kartenkopf weit. */
.termine-alle {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--marke-hell);
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.termine-alle:hover { border-color: var(--marke-hell); color: var(--text); }

/* ============================================================
   Termine (29.08.2026)
   ============================================================
   Bewusst Listen statt Kalenderraster. Max: "Kalender finde ich sehr
   unnuetzig dafuer. Wir haben zu wenig Termine, die da drinstehen."
   Bei vier bis acht Terminen im Jahr waeren elf von zwoelf Monatszellen
   leer - eine Liste zeigt auf gleicher Flaeche mehr und braucht auf dem
   Handy kein Gewische.
   Markup und Verhalten: src/website/termine.js, termine-seite.js */

/* ---------- Wortmarken ----------
   Woerter statt Icons, dieselbe Hausregel wie bei .sym-wort
   (Max, 21.08.2026). */
.wortmarke {
  display: inline-flex; align-items: center;
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--marke-lighter); color: var(--marke-hell);
  white-space: nowrap;
}
.wortmarke.gruen { background: var(--green-light); color: var(--green-dark); }
.wortmarke.rot   { background: var(--red-hell); color: #991b1b; }
.wortmarke.gelb  { background: var(--karte-gelb-hell); color: #713f12; }
.wortmarke.offen { background: #fff; border: 1px dashed var(--border); color: var(--muted); }
.wortmarke.hell  { background: rgba(255, 255, 255, .16); color: #e5e7eb; }

/* ---------- Terminkarte ---------- */

.terminkarte {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  /* Der Farbstreifen links traegt den eigenen Stand: neutral, gruen bei
     Zusage, rot bei Absage. Dieselbe Sprache wie beim Hinweisbalken und
     bei .lz - die Seite arbeitet durchgehend mit weissen Karten plus
     Farbakzent statt mit flaechiger Faerbung. */
  border-left: 4px solid var(--marke);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
a.terminkarte:hover { border-color: var(--marke-hell); border-left-color: var(--green); }
.terminkarte.zugesagt { border-left-color: var(--green); }
.terminkarte.abgesagt { border-left-color: var(--red); }
.terminkarte.vergangen { opacity: .62; border-left-color: var(--border); }

.tk-oben { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tk-wann {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.tk-marken { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tk-titel {
  display: block; font-family: var(--font-titel); font-weight: 700;
  font-size: 1rem; line-height: 1.25; margin-bottom: 5px;
}
.tk-angaben { display: flex; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: .78rem; }
.tk-angaben b { color: var(--marke-hell); font-weight: 700; }
.tk-punkt { color: var(--border); }
.tk-stand { display: block; margin-top: 8px; }

/* ---------- Monatsgruppen ---------- */

.terminmonat { margin-bottom: 22px; }
.terminmonat-titel {
  font-family: var(--font-titel); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  margin: 0 0 10px; display: flex; align-items: center; gap: 10px;
}
.terminmonat-titel::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Vergangenes bleibt erreichbar, aber eingeklappt - sonst muesste man
   beim Oeffnen erst nach unten scrollen, um das Naechste zu finden. */
.termin-vergangen { margin-top: 26px; }
.termin-vergangen > summary {
  cursor: pointer; list-style: none;
  padding: 12px 15px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
  font-size: .82rem; font-weight: 600;
}
.termin-vergangen > summary::-webkit-details-marker { display: none; }
.termin-vergangen > summary:hover { border-color: var(--marke-hell); color: var(--text); }
.termin-vergangen[open] > summary { margin-bottom: 18px; }

/* ---------- Einzelansicht ---------- */

.termindetail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.td-kopf { background: var(--marke-dunkel); color: #fff; padding: 20px 22px; }
.td-wann {
  margin: 0; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: #9ca3af;
}
.td-kopf h1 { font-family: var(--font-titel); font-size: 1.35rem; margin: 6px 0 0; line-height: 1.25; }
.td-marken { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.td-body { padding: 18px 22px 22px; }

.td-zeile { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f3f4f6; font-size: .88rem; }
.td-zeile:last-of-type { border-bottom: 0; }
.td-l {
  flex: none; width: 92px; padding-top: 2px;
  color: var(--muted); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere;
}
.td-v { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.td-neben { font-weight: 400; color: var(--muted); font-size: .82rem; }

.td-frage { font-family: var(--font-titel); font-weight: 700; font-size: .98rem; margin: 20px 0 12px; }

/* Eigener Knopf statt ".knopf .knopf-primaer": die beiden sind unter
   ".admin-seite" definiert und greifen auf den oeffentlichen Seiten gar
   nicht. Im ersten Anlauf am 29.08.2026 stand hier deshalb ein
   unformatierter Browserknopf - im Screenshot gesehen, nicht beim Lesen. */
.td-senden {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  border: 0; border-radius: 999px;
  background: var(--marke); color: #fff;
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.td-senden:hover { background: var(--marke-dunkel); }

.td-kalender {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin: 4px 0 18px; padding: 9px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--marke);
  font: 700 .9rem var(--font-text); cursor: pointer;
}
.td-kalender:hover { background: var(--marke-lighter); border-color: var(--marke); }
.td-kalender span { font-size: 1.15rem; line-height: 1; }

.td-knopfpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-knopf {
  min-height: 52px; padding: 13px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--marke-dunkel);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.td-knopf.ja:hover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.td-knopf.nein:hover { border-color: var(--red); background: var(--red-hell); color: #991b1b; }
/* Der gewaehlte Zustand ist gefuellt, nicht nur umrandet - man soll auf
   dem Handy im Vorbeigehen sehen, was man geantwortet hat. */
.td-knopf.ja.an { background: var(--green); border-color: var(--green); color: #fff; }
.td-knopf.nein.an { background: var(--red); border-color: var(--red); color: #fff; }

.td-grundbox {
  margin-top: 14px; padding: 15px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fafbfc;
}
.td-grundbox[hidden] { display: none; }
.td-grundtitel {
  margin: 0 0 10px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
/* Gruende zum Antippen statt eines leeren Textfelds. Ein freies Feld
   fuehrt zu "keine Zeit" - damit laesst sich nichts auswerten. Sechs
   feste Gruende ergeben eine Uebersicht und sind in einer Sekunde
   getippt (Max' Entscheidung, 29.08.2026). */
.td-gruende { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.td-grund {
  min-height: 40px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--marke-hell);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.td-grund:hover { border-color: var(--marke-hell); }
.td-grund.an { background: var(--marke); border-color: var(--marke); color: #fff; }

.td-kommentar { display: block; margin-bottom: 13px; }
.td-kommentar > span {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 700; color: var(--muted);
}
.td-kommentar textarea {
  box-sizing: border-box; width: 100%;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: .85rem; background: #fff; resize: vertical;
}
.td-kommentar textarea:focus { outline: none; border-color: var(--marke-hell); }

.td-meldung { margin: 12px 0 0; padding: 10px 13px; border-radius: 9px; font-size: .83rem; }
.td-meldung[data-art="erfolg"] { background: var(--green-light); color: var(--green-dark); }
.td-meldung[data-art="fehler"] { background: var(--red-hell); color: #991b1b; }
.td-meldung[data-art="info"] { background: var(--marke-lighter); color: var(--marke-hell); }

.td-abgelaufen {
  margin: 20px 0 0; padding: 13px 15px;
  background: var(--marke-lighter); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .85rem;
}

.td-teilnehmer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.td-teilnehmer-titel {
  margin: 0 0 9px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.td-namen { display: flex; flex-wrap: wrap; gap: 6px; }
.td-name {
  font-size: .78rem; font-weight: 600;
  background: var(--marke-lighter); color: var(--marke-hell);
  border-radius: 999px; padding: 5px 11px;
}

/* Knopf, der wie ein Verweis aussieht - fuer "Melde dich an" mitten im
   Fliesstext. Ein <a href="#"> waere hier gelogen: es fuehrt nirgendwo
   hin, es oeffnet ein Fenster. */
.verweis-knopf {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 700; color: inherit;
  text-decoration: underline; cursor: pointer;
}

@media (max-width: 560px) {
  .td-kopf { padding: 17px 17px; }
  .td-body { padding: 16px 17px 20px; }
  .td-kopf h1 { font-size: 1.15rem; }
  /* Untereinander statt nebeneinander: zwei 52-px-Knoepfe nebeneinander
     werden auf 320 px so schmal, dass die Beschriftung umbricht. */
  .td-knopfpaar { grid-template-columns: 1fr; }
  .td-zeile { gap: 10px; }
  .td-l { width: 78px; }
}

/* ---------- Terminsuche unter mehreren Vorschlaegen (29.08.2026) ----------
   Max' zweiter Umfrage-Fall: "Termin unter drei Wochenenden finden."
   Steht ueber der Terminliste, weil hier noch etwas zu entscheiden ist -
   bei den Terminen darunter nur noch zur Kenntnis zu nehmen. */

.terminfindung {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.terminfindung.entschieden { border-left-color: var(--green); }

.tf-kopf { padding: 14px 15px 12px; border-bottom: 1px solid var(--border); }
.tf-kopf h3 { font-family: var(--font-titel); font-size: 1rem; margin: 8px 0 0; line-height: 1.25; }
.tf-text { margin: 6px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.tf-frist { margin: 8px 0 0; color: var(--muted); font-size: .74rem; font-weight: 600; }

.tf-liste { padding: 4px 15px 14px; }
.tf-vorschlag { padding: 13px 0; border-bottom: 1px solid #f3f4f6; }
.tf-vorschlag:last-child { border-bottom: 0; }
/* Der gewaehlte Vorschlag bekommt eine ruhige Flaeche statt eines
   weiteren Rahmens - die Karte hat schon einen. */
.tf-vorschlag.gewaehlt {
  background: var(--green-light);
  margin: 0 -15px; padding: 13px 15px; border-bottom: 0;
}

.tf-kopfzeile { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.tf-datum { font-family: var(--font-titel); font-weight: 700; font-size: .88rem; }
.tf-angaben { color: var(--muted); font-size: .78rem; }

/* Drei gleich breite Knoepfe. Auf dem Handy sind sie damit sicher zu
   treffen, ohne dass "Vielleicht" optisch zur Nebensache wird - es ist
   bei der Terminsuche die wichtigste der drei Antworten. */
.tf-stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tf-stimme {
  min-height: 44px; padding: 10px 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--marke-hell);
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.tf-stimme:hover { border-color: var(--marke-hell); }
.tf-stimme.ja.an         { background: var(--green); border-color: var(--green); color: #fff; }
.tf-stimme.vielleicht.an { background: var(--karte-gelb); border-color: var(--karte-gelb); color: #713f12; }
.tf-stimme.nein.an       { background: var(--red); border-color: var(--red); color: #fff; }

.tf-stand { margin: 8px 0 0; color: var(--muted); font-size: .74rem; }

.tf-meldung { margin: 0; padding: 10px 15px; font-size: .8rem; }
.tf-meldung[data-art="erfolg"] { background: var(--green-light); color: var(--green-dark); }
.tf-meldung[data-art="fehler"] { background: var(--red-hell); color: #991b1b; }

.termin-aktionen,.termin-protokoll,.eigene-vorschlaege{margin:20px 0;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.termin-aktionen{display:flex;align-items:center;justify-content:space-between;gap:18px}.termin-aktionen h2,.termin-protokoll h2{margin:0 0 4px}.termin-aktionen p{margin:0;color:var(--muted)}
.eigene-vorschlaege summary{cursor:pointer;font-weight:700}.vorschlag-zeile{display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:14px 0;border-bottom:1px solid var(--border)}.vorschlag-zeile:last-child{border:0}.vorschlag-zeile small{display:block;color:var(--muted);margin-top:3px}.vorschlag-zeile p{grid-column:1/-1;margin:3px 0;color:var(--muted)}
.termin-dialog{box-sizing:border-box;width:min(560px,calc(100% - 28px));max-height:calc(100dvh - max(28px,env(safe-area-inset-top)) - max(14px,env(safe-area-inset-bottom)));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;border:0;border-radius:20px;padding:0;background:var(--card);color:var(--text);box-shadow:0 24px 80px #0008}.termin-dialog::backdrop{background:#0009}.termin-vorschlag-form{box-sizing:border-box;min-width:0;display:grid;gap:15px;padding:22px}.dialog-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dialog-kopf h2{margin:5px 0 0}.dialog-schliessen{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;font-size:1.9rem;line-height:1;background:var(--surface);color:inherit;cursor:pointer}.dialog-hilfe{margin:0;color:var(--muted)}.termin-vorschlag-form label{min-width:0;display:grid;gap:6px;font-weight:650}.termin-vorschlag-form input,.termin-vorschlag-form textarea{box-sizing:border-box;width:100%;max-width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;font:inherit}.formular-reihe{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.termin-protokoll{border-left:4px solid var(--blue)}.protokoll-text{line-height:1.6}
@media(max-width:600px){.termin-aktionen{align-items:stretch;flex-direction:column}.formular-reihe{grid-template-columns:1fr}}