/* css/components.css: alle Bausteine der App, nach Themen in der Reihenfolge der Reiter.
   Neue Regeln kommen in den Abschnitt ihres Reiters; Regeln für eine bestimmte Breite in den Block am Ende des Abschnitts.
   Tippflächen mindestens 44 px. Farben nur über die Variablen in css/base.css. */

/* ==== 1. Grundbausteine: Knöpfe, Karten, Felder, Formulare, Listen, Tabellen, Aufklapper, Fenster, Detail, Meldungen, Foto ==== */

.knopf {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--gruppe);
  color: var(--gruppe-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf-hell {
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--gruppe);
}
.knopf-gefahr {
  background: var(--flaeche);
  color: var(--fehler);
  border: 1px solid var(--rand);
}
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: var(--abstand);
  margin-bottom: 12px;
}
.feld {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font: inherit;
  background: var(--flaeche);
}
textarea.feld { min-height: 96px; resize: vertical; }
.leise { color: var(--text-leise); }
.fehler { color: var(--fehler); min-height: 1.4em; }
.listenlink {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--text);
  text-decoration: none;
}
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abdunkeln);
  z-index: 2000;
}
.modal-box {
  width: 90%;
  max-width: 420px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--flaeche);
  position: relative;
}

/* Knopfreihen unter Fenstern und Formularen */
.modal-knoepfe, .form-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.toast {
  position: fixed;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-width: 90%;
  padding: 18px 26px;
  border-radius: var(--radius);
  background: var(--balken);
  color: var(--balken-text);
  z-index: 3000;
  top: 50%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 24px var(--schatten-gross);
  pointer-events: none;
  animation: toast-ein 0.2s ease-out;
}
.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--abstand);
}
.kopfzeile h1 { margin: 0; }
.filterzeile {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.tabelle-wrap { display: none; }
.tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--flaeche);
  border: 1px solid var(--rand);
}
.tabelle th, .tabelle td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rand);
}
.tabelle th {
  background: var(--gruppe);
  color: var(--gruppe-text);
  font-size: 14px;
  font-weight: 600;
}
.tabelle .zahl { text-align: right; }
.tabelle tbody tr:hover { background: var(--gruen-hell); }
.klickbar { cursor: pointer; }
.listenkarte { margin-bottom: 10px; }
.listenkarte p { margin: 4px 0 0; }
.detail-kopf { margin-bottom: 12px; }
.detail-knoepfe {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.detail-foto-box { margin-bottom: 12px; }
.detail-foto {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--gruen-hell);
}
.detail-liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 12px 0;
}
.detail-liste dt { color: var(--text-leise); }
.detail-liste dd { margin: 0; }
.notiz { white-space: pre-wrap; }
.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li { padding: 8px 0; border-bottom: 1px solid var(--rand); }
.formular { display: grid; gap: 14px; }
.formfeld { display: grid; gap: 4px; }
.formlabel { font-weight: 600; font-size: 14px; }
.formfeld-bool {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.formfeld-bool input { width: 22px; height: 22px; }
a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.auswahl-leiste {
  position: sticky;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 2px solid var(--gruppe);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--schatten);
}
.auswahl-leiste[hidden] { display: none; }
.auswahl-box {
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.tabelle .auswahl-spalte { width: 52px; text-align: center; }
.karte.mit-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.mit-box .auswahl-box { margin-top: 2px; flex: none; }
.karten-text { flex: 1; min-width: 0; }
.gesperrt { opacity: 0.45; cursor: default; }

/* Sprung-Link „Zum Inhalt springen“, nur sichtbar mit Fokus */
.sprung-link {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 3000;
  padding: 10px 14px;
  border: 2px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
}
.sprung-link:focus { top: 8px; }

/* Überschriften und Hauptbereich, die den Fokus nur zum Vorlesen bekommen: ohne Rahmen */
.fokus-still:focus { outline: none; }
.nur-leser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.modal-gross {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}
.foto-upload {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: -6px;
}
.foto-upload p { margin: 0; font-size: 14px; }
/* Meldungen mittig im Bildschirm */
@keyframes toast-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Foto im Detail anklickbar */
.foto-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.foto-knopf:focus-visible { outline: 3px solid var(--gruppe); border-radius: var(--radius); }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--lightbox-grund);
  cursor: zoom-out;
}
.lightbox-bild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-fehler { color: var(--auf-farbe); font-size: 18px; }
.lightbox-zu {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}

/* Erledigte ToDos: grau und durchgestrichen, aber weiter sichtbar */
.tabelle tr.erledigt td {
  color: var(--text-leise);
  text-decoration: line-through;
  background: var(--flaeche-leise);
}
.karte.erledigt { background: var(--flaeche-leise); }
.karte.erledigt .karten-text, .karte.erledigt .karten-text p {
  color: var(--text-leise);
  text-decoration: line-through;
}
p.notiz.erledigt {
  color: var(--text-leise);
  text-decoration: line-through;
}
.filterzeile.filter-todos { grid-template-columns: 1fr; }
.filter-todos .suche-feld { grid-column: 1 / -1; }

/* Überfällig = rot, heute fällig = orange (zusätzlich steht es im Text) */
.tabelle tr.ueberfaellig td { color: var(--fehler); font-weight: 600; }
.tabelle tr.ueberfaellig td:first-child { box-shadow: inset 6px 0 0 var(--fehler); }
.tabelle tr.heute td:first-child { box-shadow: inset 6px 0 0 var(--warnung); }
.tabelle tr.heute td { background: var(--warn-flaeche); }
.karte.ueberfaellig { border-left: 6px solid var(--fehler); }
.karte.heute { border-left: 6px solid var(--warnung); background: var(--warn-flaeche); }

/* Abgehakte Kästchen in Grau */
.tabelle tr.erledigt .auswahl-box,
.karte.erledigt .auswahl-box,
.dash-zeile.erledigt .auswahl-box {
  accent-color: var(--grau-marke);
}
.kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Eigene Tabelle "Erledigt": graue Kopfzeile */
.liste-titel { margin: 28px 0 8px; font-size: 18px; color: var(--text-leise); }
.liste-erledigt .tabelle th { background: var(--tabellenkopf-grau); color: var(--auf-farbe); }

/* Filter */
.filterzeile.filter-projekte { grid-template-columns: 1fr; }

/* Pfeil zum Aufklappen */
.projekt-pfeil, .teil-pfeil {
  display: inline-block;
  color: var(--text-leise);
  transition: transform 0.15s ease;
}
.teil-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.teil-titel-klein {
  margin: 16px 0 4px;
  font-size: 16px;
  color: var(--text-leise);
}

/* Löschen-Knopf unten im Bearbeiten-Fenster */
.fenster-loeschen {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rand);
}
.teil-pfeil.auf { transform: rotate(90deg); }

/* Häkchenliste der Meilenstein-Vorlage im Formular */
.vorlage-liste {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.vorlage-liste p { margin: 0 0 6px; font-size: 14px; }
.vorlage-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  cursor: default;
}
.vorlage-zeile .auswahl-box { flex: none; margin-top: 2px; }
.vorlage-text { display: grid; gap: 2px; }
.vorlage-text .vorlage-datum { max-width: 200px; }

/* Kleine Knöpfe */
.knopf-klein, .detail .detail-knoepfe .knopf {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
}

/* Farbfeld im Formular */
.farbfeld {
  width: 72px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  cursor: pointer;
}
.farb-zusatz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -6px;
}
.formfeld-bool[hidden] { display: none; }

/* ✕ oben rechts in jedem Fenster */
.modal-box h2 { padding-right: 44px; }
.fenster-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fenster-x:hover { background: var(--gruen-hell); }
.fenster-x:focus-visible { outline: 3px solid var(--gruppe); }
.vorlage-text .leise { font-size: 13px; }
.vorlage-liste > .knopf-klein { justify-self: start; margin-top: 6px; }

/* Knopfreihen, eng (6 px Abstand) */
.mobi-vorschau-felder,
.kal-mobi-knoepfe,
.pk-marken-leiste,
.pk-vorschlag-reihe,
.team-schnell,
.team-rollen-wahl,
.darstellung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Aufklapper: Kopfzeile mindestens 44 px hoch */
.team-pausiert > summary,
.team-rollen-teil > summary,
.team-berg-zahlen > summary,
.wiki-thema > summary,
.wiki-formathilfe > summary,
.wiki-mehr > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

/* Kleine Links zum Weiterlesen */
.team-hilfe-link a,
.wiki-zurueck a,
.wiki-andere a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 359px) {
  /* Sehr schmal (kleines Handy oder Zoom): Knöpfe rutschen unter die Überschrift statt über den Rand */
  .kopfzeile { flex-wrap: wrap; }
}

@media (min-width: 600px) {
  .filterzeile { grid-template-columns: 2fr 1fr 1fr; }
  .filterzeile.filter-todos { grid-template-columns: repeat(2, 1fr); }
  .filterzeile.filter-projekte { grid-template-columns: 2fr 1fr; }
  .filterzeile.filter-material { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .tabelle-wrap { display: block; }
  .karten-liste { display: none; }
  .auswahl-leiste { bottom: 16px; }
  .filterzeile.filter-todos { grid-template-columns: repeat(4, 1fr); }
  .filterzeile.filter-material { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ==== 2. Kommentare (in mehreren Reitern) ==== */

.kommentare h3 { margin: 12px 0 6px; }
.kommentar-liste { list-style: none; padding: 0; margin: 8px 0; }
.kommentar {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--rand);
}
.kommentar-form {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin: 8px 0;
}
.kommentar-form .feld { min-height: 64px; }

/* Kommentare im Detail und im Fenster: mit Trennstrich und Farbe abgesetzt */
.detail .kommentare, .modal-box .kommentare {
  margin-top: 24px;
  padding: 4px 12px 12px;
  border-top: 4px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--gruen-hell);
}

/* Angeheftete Kommentare in der Pinnwand */
.kommentar.angeheftet {
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--gruen-hell);
}

/* Pinnwand: Veranstaltung als Kasten in der Veranstaltungsfarbe */
.kommentar.kommentar-ver {
  margin: 6px 0;
  padding: 8px 10px;
  border-bottom: 0;
  border-radius: var(--radius);
}
.kommentar-ver .leise { color: inherit; opacity: 0.85; }

/* ==== 3. Öffentliche Seiten: Balken oben, Gruppenwahl, Antrag neue Gruppe, öffentliche Termine, Anmeldung, Info ==== */

.login-form { display: grid; gap: 12px; }
.start-seite {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--abstand);
  padding-top: 24px;
}
.gruppen-raster {
  display: grid;
  gap: 12px;
}
.gruppen-kachel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  border-bottom: 6px solid var(--gruen);
}
.gruppen-kachel:hover { background: var(--gruen-hell); }
.gruppen-logo {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}
.kachel-name { font-weight: 700; }
/* Kachel „+ Eigene Gruppe eröffnen“: gestrichelt, damit sie sich von den Gruppen abhebt */
.gruppen-kachel.kachel-neu {
  background: transparent;
  border-style: dashed;
  border-bottom-width: 1px;
  color: var(--text-leise);
}
.kachel-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
/* Seite #/neue-gruppe */
.antrag-form { max-width: 560px; }
.antrag-hinweis { font-size: 14px; }
.antrag-frage { margin: 0; font-weight: 600; }
.antrag-antwort { max-width: 160px; }
/* Feld nur für Roboter: für Menschen und Bildschirmleser unsichtbar */
.antrag-falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.platzhalter-kachel {
  min-height: 64px;
  border-radius: var(--radius);
  background: var(--spur);
  animation: platzhalter-puls 1.4s ease-in-out infinite;
}
@keyframes platzhalter-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.app-balken {
  background: var(--balken);
  color: var(--balken-text);
  /* Balken über die ganze Breite, auch wenn die App schmaler ist */
  box-shadow: 0 0 0 100vmax var(--balken);
  clip-path: inset(0 -100vmax);
}
.app-balken-innen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px var(--abstand);
  color: var(--balken-text);
  text-decoration: none;
}
.balken-logo {
  display: flex;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border-radius: 0;
  background: none;
}
.balken-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.balken-titel {
  font-size: 20px;
  font-weight: 700;
}
.start-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 16px;
}
.info-karte { margin-bottom: 16px; }
.login-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--abstand);
}
.login-kopf h1 { margin: 0; }
.login-kopf .gruppen-logo {
  width: 56px;
  height: 56px;
}
.pin-wrap { position: relative; }
.pin-wrap .feld { padding-right: 52px; }
.pin-auge {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-leise);
  cursor: pointer;
}
.pin-auge:focus-visible { outline: 2px solid var(--gruppe); }
.oeff-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
  margin-top: 8px;
  font-size: 14px;
}
.oeff-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-leise);
}

/* Gruppenwahl: Gruppen links, Termine rechts (Handy: darunter) */
.start-seite.start-breit { max-width: 1200px; }
.start-haupt { min-width: 0; order: 1; }
.start-termine[hidden] { display: none; }
.start-termine h2 { margin: 0 0 10px; font-size: 18px; }

/* Termin-Kästen */
.oeff-liste { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.oeff-termin {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius);
}
.oeff-datum { font-size: 13px; font-weight: 600; opacity: 0.9; }
.oeff-info { font-size: 14px; opacity: 0.9; }
.oeff-termin p { margin: 6px 0 0; }
.oeff-termin a { color: inherit; font-weight: 600; }
.oeff-url { display: block; margin-bottom: 8px; font-size: 13px; word-break: break-all; }

/* Gruppenwahl: Termine links in eigener Leiste, Gruppen daneben */
.start-zwei { display: flex; flex-direction: column; gap: 24px; }

/* Feste Kacheln auf der Termine-Seite */
.oeff-kachel {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oeff-kachel > * {
  display: block;
  min-height: 1.45em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oeff-kachel:hover { filter: brightness(0.95); }
.oeff-kachel:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.oeff-links-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.oeff-links-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Strich der Terminleiste: AktionsDeck-Dunkelgrau wie der Balken oben */
.start-termine {
  order: 2;
  margin-top: 0;
  padding: 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  border-top: 5px solid var(--balken);
}

/* Aktionskalender: Kachel mit Anheften-Knopf */
.oeff-kachel-box {
  display: grid;
  border-radius: var(--radius);
}
.oeff-kachel-box .oeff-kachel { background: none; color: inherit; }
.oeff-kachel-box:hover { filter: brightness(0.96); }
.oeff-heften { justify-self: start; margin: 0 12px 10px; }
.info-gruppen h2 { margin: 20px 0 8px; font-size: 20px; }
.info-gruppe { padding: 8px 0; border-top: 1px solid var(--rand); }
.info-gruppe h3 { margin: 0 0 4px; font-size: 17px; }
.info-gruppe-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.info-gruppe-links a { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; }
.info-version { margin-top: 16px; }
.info-wiki { margin: 16px 0 0; }
.abo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.abo-knoepfe .knopf { min-height: 44px; }
.info-symbol { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.oeff-auswahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.oeff-auswahl .feld { flex: 1 1 180px; width: auto; }
.abo-knoepfe + .leise, .karte > select.feld { margin-bottom: 8px; }

@media screen {
  /* Gruppen-Logos auf einer hellen runden Fläche, damit dunkle Logos sichtbar bleiben */
  .dunkel .gruppen-logo,
  .dunkel .dash-logo,
  .dunkel .seiten-logo {
    padding: 4px;
    border-radius: 50%;
    background: var(--logo-grund);
  }
}

@media (min-width: 600px) {
  .oeff-liste.oeff-gross { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .gruppen-raster {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .gruppen-kachel {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-height: 220px;
    padding: 28px 16px 22px;
    text-align: center;
  }
  .gruppen-logo { width: 96px; height: 96px; }
  .kachel-plus { width: 96px; height: 96px; font-size: 56px; }
  .platzhalter-kachel { min-height: 220px; }
  .app-balken-innen { padding: 18px var(--abstand); gap: 18px; }
  .balken-logo { width: 56px; height: 56px; }
  .balken-titel { font-size: 28px; }
  .start-seite { padding-top: 40px; }
  .start-zwei { flex-direction: row; align-items: flex-start; }
  .start-termine {
    order: 0;
    flex: none;
    width: 320px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .start-haupt { flex: 1; }

  /* Mit Terminen: zwei Gruppen pro Reihe */
  .start-zwei.mit-termine .gruppen-raster { grid-template-columns: repeat(2, 1fr); }
  .oeff-liste.oeff-gross { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .platzhalter-kachel { animation: none; }
}

/* ==== 4. Gerüst-Zusätze: Seitenleiste, „Mehr“, Hell/Dunkel, Konto und Cloud, Signal, Hinweis „Neue Version“ ==== */

.mehr-knoepfe { display: grid; gap: 12px; margin-top: 16px; }
.seiten-kopf {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.seiten-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* Logo links, Kurzname rechts daneben */
.seiten-kopf span { font-size: 20px; }
.konto-teil { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rand); }
.konto-zeile { margin: 0 0 8px; }
.cloud-knopf { margin-top: 12px; font-size: 18px; padding: 0 28px; }

/* Schalter „Wie das Gerät | Hell | Dunkel“ (Mehr am Handy, Seitenleiste am PC) */
.darstellung { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.darstellung-knopf {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.darstellung-knopf[aria-pressed="true"] { background: var(--gruppe); color: var(--gruppe-text); border-color: var(--gruppe); font-weight: 600; }

/* Am PC in der schmalen Seitenleiste: alle drei Knöpfe in einer Reihe */
.seiten-fuss .darstellung-knoepfe { flex-wrap: nowrap; gap: 4px; }
.seiten-fuss .darstellung-knopf { flex: 1 1 auto; padding: 0 6px; font-size: 13px; white-space: nowrap; }

/* Schalter: „Gerät“ als Wort, Hell und Dunkel als Punkt mit Rahmen */
.darstellung-punkt { width: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.darstellung-punkt span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--grau-marke); }
.darstellung-punkt .punkt-hell { background: #ffffff; }
.darstellung-punkt .punkt-dunkel { background: #000000; }
.darstellung-punkt[aria-pressed="true"] { background: var(--flaeche); border: 3px solid var(--gruppe); }
.seiten-fuss .darstellung-punkt { flex: 0 0 44px; padding: 0; }
.signal-knopf { margin: 4px 0; }
.signal-form .signal-frage { font-size: 1.2em; font-weight: 600; margin: 12px 0 8px; }
.signal-form .feld { max-width: 160px; }
.signal-form .knopf { margin-top: 4px; }
.signal-form a.knopf { display: inline-flex; align-items: center; text-decoration: none; margin-top: 4px; }
.neue-version {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  /* Über der unteren Leiste */
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius);
  background: var(--balken);
  color: var(--balken-text);
  box-shadow: 0 6px 24px var(--schatten-gross);
  z-index: 2900;
}
.neue-version .knopf { margin: 0; white-space: nowrap; }

@media (min-width: 960px) {
  /* Name ändern und Abmelden nebeneinander, öffentliche Links in einer Zeile.
   Ist der Bildschirm trotzdem zu niedrig, lässt sich die Leiste scrollen. */
  /* Knöpfe so breit wie ihr Text, bei großer Schrift untereinander statt abgeschnitten */
  .seiten-fuss-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
  .seiten-fuss-knoepfe .knopf { flex: 1 1 auto; padding: 0 6px; font-size: 14px; white-space: nowrap; }
  .seitenleiste .oeff-links { gap: 0 8px; margin-top: 0; font-size: 12px; }
  .seitenleiste .oeff-links a { min-height: 32px; }
  .neue-version { bottom: 16px; }
}

@media (min-width: 960px) and (max-height: 760px) {
  .seitenleiste .nav-link { min-height: 40px; }
  .seiten-kopf { padding-bottom: 10px; margin-bottom: 4px; }
}

/* ==== 5. Start: Kopf, Für dich, Kacheln, Umfragen, Schwarzes Brett, Glocke ==== */

.dash-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--abstand);
  flex-wrap: wrap;
}
.dash-kopf h1 { margin: 0; }
.dash-logo {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: contain;
}
.dash-raster {
  display: grid;
  gap: 12px;
}
.dash-kachel {
  min-height: 100px;
  margin-bottom: 0;
  border-top: 5px solid var(--gruppe);
}
.dash-kachel h2 { margin: 0 0 6px; font-size: 18px; }
.dash-kachel p { margin: 0; }
.dash-todos { grid-column: auto; }
.dash-zahlen { font-weight: 600; margin: 0 0 8px; }
.dash-todo-liste { list-style: none; padding: 0; margin: 8px 0; }
.dash-todo {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 0 8px 10px;
  border-bottom: 1px solid var(--rand);
  border-left: 6px solid transparent;
  color: var(--text);
  text-decoration: none;
}
.dash-todo:hover { background: var(--gruen-hell); }
.dash-todo.ueberfaellig { border-left-color: var(--fehler); }
.dash-todo.heute { border-left-color: var(--warnung); background: var(--warn-flaeche); }
.dash-todo.erledigt, .dash-todo.erledigt span {
  color: var(--text-leise);
  text-decoration: line-through;
  background: var(--flaeche-leise);
}

/* Start-Kachel ToDos: halbe Breite am PC, Kopfzeile mit Link und Schalter */
.dash-kachel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
}
.dash-kachel-titel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.dash-kachel-kopf h2 { margin: 0; }
.dash-kachel-titel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.dash-kachel-kopf .formfeld-bool { font-size: 14px; }

/* ToDo-Zeile mit Kästchen */
.dash-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--rand);
}
.dash-zeile .auswahl-box { flex: none; margin: 0 0 0 2px; }
.dash-zeile .dash-todo { flex: 1; min-width: 0; border-bottom: 0; }

/* Start-Kachel Projekte */
.dash-projekt-liste { display: grid; margin-top: 8px; }
.dash-projekt {
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--rand);
  color: var(--text);
  text-decoration: none;
}
.dash-projekt:last-of-type { border-bottom: 0; }
.dash-projekt:hover { background: var(--gruen-hell); }
.dash-projekt:focus-visible { outline: 2px solid var(--gruppe); }

/* Start-Kachel Projekte: Schalter "ToDos (n offen)" */
.dash-projekt-knopf { margin: 8px 0 4px; }
.dash-projekt-block { border-bottom: 1px solid var(--rand); }
.dash-projekt-block:last-of-type { border-bottom: 0; }
.dash-projekt-block .dash-projekt { border-bottom: 0; }

/* Start-Kachel: Titel mit Marke, Schalter mit Pfeil */
.dash-projekt-titel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.dash-schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dash-schalter:hover { background: var(--gruen-hell); }
.dash-schalter:focus-visible { outline: 2px solid var(--gruppe); }
.dash-zeile.mit-hut { flex-wrap: nowrap; }
.dash-zeile.mit-hut .hut-knoepfe {
  margin-bottom: 0;
  padding: 0 8px 0 0;
  flex: none;
  flex-basis: auto;
  margin: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.dash-projekt-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 8px;
}

/* Überfällige ToDos: Infozeile (mit "Fällig … (überfällig)") rot */
.dash-todo.ueberfaellig .leise {
  color: var(--fehler);
  font-weight: 600;
}

/* Start: Umfragen und Schwarzes Brett */
.start-extra { margin-bottom: 12px; }
.start-extra .dash-kachel { margin-bottom: 0; }
.umfrage {
  padding: 12px 0;
  border-bottom: 1px solid var(--rand);
}
.umfrage:last-child { border-bottom: 0; }
.umfrage-titel {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 180px;
}
.umfrage-option { display: grid; gap: 2px; padding: 4px 0; }
.umfrage-option-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.mitteilung {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
}
.mitteilung.angeheftet { background: var(--gruen-hell); }
.mitteilung-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.mitteilung p { margin: 6px 0 0; }

/* Kommentare und Pinnwand */
.start-pinnwand { margin-top: 12px; border-top: 5px solid var(--gruppe); }
.start-pinnwand .kommentare h3 { margin-top: 0; font-size: 18px; }

/* Start: Knöpfe in der Zeile mit "Hallo ..." (Handy: darunter, links) */
.dash-kopf .kopf-knoepfe { margin-left: auto; }

/* Umfragen: Frist wie bei ToDos (heute = orange, vorbei = rot) */
.umfrage-frist.ueberfaellig { color: var(--fehler); font-weight: 600; }
.umfrage-frist.heute { color: var(--warnung); font-weight: 600; }
.umfrage-frage { margin: 0 0 8px; }

/* Umfrage-Zeile: leicht grün, heute = orange, überfällig = rot (ganzer Kasten) */
.umfrage-zeile {
  margin: 8px 0;
  padding: 4px 8px 4px 0;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--gruen-hell);
}
.umfrage-zeile.heute {
  background: var(--warn-flaeche);
  border-color: var(--warn-rand);
  border-left-color: var(--warnung);
}
.umfrage-zeile.ueberfaellig {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-rand);
  border-left-color: var(--fehler);
}
.umfrage-zeile .dash-todo { background: none; }

/* Ergebnis einer beendeten Umfrage: schlichter Text */
.umfrage-option strong { font-weight: 600; }
.glocke { padding: 0 12px; font-size: 18px; }
.glocke-zahl {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 0;
  color: var(--fehler);
}
.neu-titel { margin: 18px 0 4px; font-size: 16px; }
.neu-titel a { color: var(--text); }
.archiv-zwei { display: grid; gap: 0 16px; align-items: start; }
.archiv-zwei > * { min-width: 0; }

/* Seiten-Knöpfe direkt neben der Seitenangabe */
/* Start: drei Schalter (ToDos, Hüte, Mobi) */
.dash-projekt-spalten.mit-mobi { grid-template-columns: repeat(3, 1fr); }

/* Start: rechte Spalte mit ToDos und TOPs */
.dash-rechts { display: grid; gap: 12px; align-content: start; }
.dash-aufklapper { align-self: center; flex: none; margin-top: 4px; }
.dash-tops .top-sammlung { margin-top: 8px; }

/* Start: Umschalter unten in der Kachel */
.dash-rechts > .dash-kachel { display: flex; flex-direction: column; }
.start-team-weg {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--text-leise);
}
.dash-tops-titel > .knopf:last-child { margin-left: auto; }
.fuer-dich { margin-bottom: 16px; border-left: 4px solid var(--gruppe); }
.fuer-dich .dash-kachel-titel { margin-bottom: 4px; }
.fuer-dich-zeile a.dash-todo { color: inherit; text-decoration: none; }
.fuer-dich-zeile a.dash-todo:hover strong { text-decoration: underline; }
.karte.fuer-dich { background: var(--fuer-dich-flaeche); border-color: var(--fuer-dich-rand); border-top-color: var(--fuer-dich-akzent); border-left-color: var(--fuer-dich-akzent); }
.fuer-dich .dash-zeile { border-bottom-color: var(--fuer-dich-linie); }
.fuer-dich .leise { color: var(--fuer-dich-text); }

@media (max-width: 599px) {
  /* Handy: Knöpfe der Projekte unter dem Titel, linksbündig */
  .dash-kopf .kopf-knoepfe { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px; }   /* Umbruch nur bei Platzmangel */
  .dash-kopf .kopf-knoepfe .knopf {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    font-size: 14px;
    white-space: nowrap;
  }
  .dash-kopf .kopf-knoepfe .knopf.glocke { flex: none; padding: 0 10px; font-size: 18px; }
}

@media (max-width: 959px) {
  .dash-tops-titel { flex-wrap: wrap; gap: 8px; }   /* Bricht nur um, wenn der Platz nicht reicht */
  .dash-tops-titel h2 { flex: none; }
  .dash-tops-titel .knopf { padding: 0 10px; font-size: 13px; white-space: nowrap; }
}

@media (min-width: 600px) {
  .dash-raster { grid-template-columns: repeat(2, 1fr); }

  /* Höhe kommt von der Kachel Projekte (gleiche Zeile im Raster), mindestens 340 px */
  .dash-projekte { min-height: 480px; }
  .dash-rechts { display: flex; flex-direction: column; height: 0; min-height: 100%; }

  /* Eine Kachel ganz gezeigt: Spalte wächst mit, die andere bleibt kurz */
  .dash-rechts.dash-rechts-offen { height: auto; }
  .dash-rechts > .dash-kachel { flex: 1 1 0; min-height: 0; }
  .dash-kachel-inhalt { flex: 1 1 0; min-height: 0; overflow: hidden; }
  .dash-rechts > .dash-kachel.dash-offen { flex: none; }
  .dash-offen > .dash-kachel-inhalt { flex: none; overflow: visible; }
  .dash-rechts-offen > .dash-kachel:not(.dash-offen) { flex: none; }
  .dash-rechts-offen > .dash-kachel:not(.dash-offen) > .dash-kachel-inhalt { flex: none; max-height: 180px; }
}

@media (min-width: 960px) {
  .dash-raster { grid-template-columns: repeat(2, 1fr); }

  /* Am PC steht das Logo schon in der Seitenleiste */
  .dash-logo { display: none; }
  .archiv-zwei { grid-template-columns: 1fr 1fr; }
}

/* ==== 6. Projekte: Block, Teile, Meilensteine, Vorlagen, Jahresübersicht ==== */

/* Fortschrittsbalken */
.fortschritt { display: grid; gap: 4px; }
.fortschritt-spur {
  height: 12px;
  border-radius: 6px;
  background: var(--spur);
  overflow: hidden;
}
.fortschritt-fuell {
  height: 100%;
  border-radius: 6px;
  background: var(--gruppe);
  transition: width 0.3s ease;
}
.fortschritt-text { font-size: 14px; }

/* Übersicht oben */
.projekt-uebersicht { padding-bottom: 4px; }
.projekt-uebersicht h2 { margin: 0 0 8px; font-size: 18px; }
.uebersicht-zeile {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--rand);
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.uebersicht-zeile:last-child { border-bottom: 0; }
.uebersicht-zeile:hover { background: var(--gruen-hell); }
.uebersicht-zeile:focus-visible { outline: 2px solid var(--gruppe); }
.uebersicht-kopf {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
}

/* Projektblock (aufklappbar) */
.projekt-block {
  padding: 0;
  border-top: 5px solid var(--gruppe);
  scroll-margin-top: 12px;
}
.projekt-block > summary {
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 14px var(--abstand);
  list-style: none;
  cursor: pointer;
}
.projekt-block > summary::-webkit-details-marker { display: none; }
.projekt-block > summary:focus-visible { outline: 2px solid var(--gruppe); }
.projekt-titel-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.projekt-titel { font-size: 18px; font-weight: 700; }
.projekt-block[open] .projekt-pfeil { transform: rotate(90deg); }
.projekt-body {
  padding: 12px var(--abstand) var(--abstand);
  border-top: 1px solid var(--rand);
}
.status-marke {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--spur);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.status-aktiv { background: var(--gruen-hell); box-shadow: inset 0 0 0 1px var(--gruen); }
.status-erledigt, .status-archiviert {
  background: var(--flaeche-grau);
  color: var(--text-leise);
}

/* Teil (aufklappbar) im Projektblock */
.projekt-teil {
  margin: 12px 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.projekt-teil > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 44px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
}
.projekt-teil > summary::-webkit-details-marker { display: none; }
.projekt-teil > summary:focus-visible { outline: 2px solid var(--gruppe); }
.projekt-teil[open] > summary .teil-pfeil { transform: rotate(90deg); }
.projekt-teil-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--rand);
}

/* Meilenstein */
.meilenstein {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
}
.meilenstein.erreicht { background: var(--flaeche-leise); border-left-color: var(--grau-marke); }
.meilenstein.ueberfaellig { border-left-color: var(--fehler); }
.meilenstein.heute { border-left-color: var(--warnung); }
.meilenstein-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 6px;
}
.meilenstein-titel {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 160px;
}
.meilenstein .auswahl-box { flex: none; }
.meilenstein.erreicht .meilenstein-titel strong { color: var(--text-leise); }
.meilenstein.ueberfaellig .meilenstein-titel .leise { color: var(--fehler); font-weight: 600; }

/* ToDo-Zeile im Projekt: Text ist ein Knopf (öffnet das Bearbeiten-Fenster) */
.pt-todo {
  width: auto;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pt-todo:focus-visible { outline: 2px solid var(--gruppe); }

/* Aktiv / In Planung getrennt */
.projekt-gruppe-titel { margin: 16px 0 8px; font-size: 18px; }
.projekt-uebersicht .projekt-gruppe-titel {
  margin: 14px 0 4px;
  font-size: 15px;
  color: var(--text-leise);
}
.projekt-gruppe-planung {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 3px dashed var(--rand);
}
.status-planung { background: var(--warn-flaeche); box-shadow: inset 0 0 0 1px var(--warnung); }

/* Oben im aufgeklappten Teil (nicht mehr in der Kopfzeile), am PC rechts */
.projekt-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 10px;
}
.projekt-teil.projekt-gruppe-planung {
  margin-top: 40px;
  border: 2px dashed var(--warnung);
  background: var(--warn-flaeche);
}
.projekt-gruppe-planung > summary strong { color: var(--planung-text); }
.projekt-gruppe-planung > .projekt-teil-body { background: var(--warn-flaeche); border-top-color: var(--warnung); }
.projekt-gruppe-planung .projekt-block { border-top-color: var(--warnung); }

/* Projekte: Übersicht und Learnings nebeneinander (Handy: untereinander) */
.projekt-zwei {
  display: grid;
  gap: 12px;
  align-items: start;
}
.projekt-zwei > * { min-width: 0; }

/* Projektname klein unter dem Learning */
.lern-projekt { font-size: 13px; }

/* Projekt: Daten links, Learnings und Ideen zur Aktionsart rechts (Handy: darunter) */
.projekt-info-zwei {
  display: grid;
  gap: 0 16px;
}
.projekt-info-zwei > * { min-width: 0; }
.jahr-knopf { display: flex; width: 100%; margin: 0 0 12px; }
.jahr-karte { margin-bottom: 12px; }
.jahr-karte > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.jahr-karte > summary::-webkit-details-marker { display: none; }
.jahr-karte[open] > summary .teil-pfeil { transform: rotate(90deg); }
.jahr-inhalt { margin-top: 8px; }
.jahr-abschnitt { padding: 10px 0; border-top: 1px solid var(--rand); }
.jahr-abschnitt h3 { margin: 0 0 4px; font-size: 17px; }
.jahr-abschnitt .dash-zahlen { margin: 0; }
.jahr-liste { margin: 6px 0 0; padding-left: 20px; }
.jahr-liste li { margin: 2px 0; }

/* Zeitplan (Gantt-Diagramm): Name links, Bahn rechts; Achse, Striche und Linien wie im Mobi-Zeitstrahl (mz-…) */
.zeitplan { display: grid; gap: 2px; margin-top: 4px; }
.zp-zeile { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 8px; min-height: 30px; }
.zp-name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
}
.zp-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.zp-name-fett { font-weight: 700; }
.zp-name-todo { padding-left: 22px; color: var(--text-leise); }
.zp-name-knopf {
  min-height: 44px;
  margin: -7px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.zp-name-knopf:focus-visible { outline: 2px solid var(--gruppe); outline-offset: 2px; }
.zp-pfeil-auf { transform: rotate(90deg); }
.zp-bahn .mz-linie { z-index: 1; pointer-events: none; }
.zp-frist { border-left: 2px solid var(--frist-rosa); }
.zp-frist-text { color: var(--frist-rosa); font-weight: 600; }
.zp-balken {
  position: absolute;
  top: 7px;
  height: 16px;
  min-width: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--gruppe);
  overflow: hidden;
  cursor: pointer;
}

/* Unsichtbar größere Tippfläche (44 px hoch) um den schmalen Balken */
.zp-balken::after { content: ''; position: absolute; inset: -14px 0; }
.zp-balken:focus-visible, .zp-raute:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.zp-ms { background: var(--gruen-hell); box-shadow: inset 0 0 0 1px var(--gruen); }
.zp-ms.zp-erreicht { background: var(--grau-hell); box-shadow: none; }
.zp-ms.zp-ueber { box-shadow: inset 0 0 0 2px var(--fehler); }
.zp-fuell { position: absolute; top: 0; bottom: 0; left: 0; background: var(--gruen); }
.zp-raute {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--flaeche);
  background: var(--gruen);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 1px var(--schatten-ring);
  cursor: pointer;
}
.zp-raute::after { content: ''; position: absolute; inset: -13px; }
.zp-raute.zp-erreicht { background: var(--grau-hell); }
.zp-raute.zp-ueber { border-color: var(--fehler); }
.zp-bahn .mz-punkt { z-index: 2; }
.mz-punkt.zp-offen { background: var(--gruppe); }
.mz-punkt.zp-mobi { background: var(--pink); }
.zp-knoepfe { margin-top: 12px; }

@media (max-width: 599px) {
  .projekt-aktionen { justify-content: flex-start; flex-wrap: wrap; }

  /* Zeitplan am Handy: Name über der Bahn */
  .zp-zeile { grid-template-columns: 1fr; gap: 0; }
  .zp-kopf .zp-name { display: none; }
  .zp-name-todo { padding-left: 14px; }
}

@media (min-width: 960px) {
  .projekt-zwei { grid-template-columns: 1fr 1fr; gap: 16px; }
  .projekt-info-zwei { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt-fuell { transition: none; }
}

/* ==== 7. ToDos und Hüte ==== */

/* Hut (Zuständigkeit) mit Personen */
.hut {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
}
.hut.frei { border-left-color: var(--warnung); background: var(--warn-flaeche); }
.hut-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hut-toggler { margin: 12px 0; background: var(--fehler-flaeche); border-color: var(--fehler-rand); border-left: 6px solid var(--fehler); }
.hut-toggler > summary strong { color: var(--fehler); }
.hut-toggler .projekt-teil-body { background: var(--fehler-flaeche); border-top-color: var(--fehler-rand); }
.hut-toggler .dash-zeile { border-bottom-color: var(--fehler-rand); }

/* ==== 8. Material: Sammel-Ausleihe, Buchen ==== */

.aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.buch-kopf {
  display: grid;
  gap: 14px;
}
.buch-liste {
  display: grid;
  border-top: 1px solid var(--rand);
}
.buch-zeile {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rand);
}
.buch-text { display: grid; gap: 2px; }
.buch-felder { display: flex; flex-wrap: wrap; gap: 12px; }
.buch-feld { display: grid; gap: 2px; font-size: 14px; }
.mengen-feld { width: 110px; }

/* Logo im Balken ohne weißen Rahmen */
.gebucht-hinweis {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 6px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--gruen-hell);
  font-weight: 600;
}

@media (min-width: 600px) {
  .buch-kopf { grid-template-columns: 1fr 2fr; }
  .buch-zeile {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
  }
}

/* ==== 9. Mobi: Liste, Kanban, Kacheln, Zeitstrahl, Vorlagen ==== */

.mobi-punkt { width: 14px; height: 14px; flex: none; margin-left: 4px; border-radius: 50%; }
.mobi-zaehler { font-size: 13px; }
.mobi-zaehler.ueber { color: var(--fehler); font-weight: 600; }
.mobi-analyse dd { white-space: pre-wrap; }
.mobi-ansicht { display: flex; gap: 8px; margin-bottom: 12px; }
.tabelle .mobi-punkt { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
.kanban {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.kanban-spalte {
  flex: 0 0 270px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--gruen-hell);
  scroll-snap-align: start;
}
.kanban-kopf { margin: 0 0 8px; font-size: 15px; }
.kanban-karten { display: grid; gap: 8px; }
.kanban-karte {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  border-left: 6px solid var(--gruppe);
}
.kanban-titel {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kanban-titel:focus-visible { outline: 2px solid var(--gruppe); }
.kanban-karte .ueberfaellig { color: var(--fehler); font-weight: 600; }
.kanban-karte .heute { color: var(--warnung); font-weight: 600; }
.kanban-knoepfe { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.mobi-kanaele { margin: 4px 0 8px; font-size: 14px; line-height: 1.8; }
.mobi-kanal-zahl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.mobi-kanaele .mobi-punkt, .mobi-kachel-kanal .mobi-punkt { width: 10px; height: 10px; margin-left: 0; }
.mobi-titel-ueberfaellig, .tabelle td.mobi-titel-ueberfaellig {
  color: var(--fehler);
  font-weight: 700;
}
.mobi-titel-heute, .tabelle td.mobi-titel-heute {
  color: var(--warnung);
  font-weight: 700;
}
.mobi-spalten { display: grid; gap: 16px; }
.mobi-spalte-kopf { margin: 0 0 8px; font-size: 15px; }
.mobi-spalte.leer { display: none; }
.mobi-kacheln { display: grid; gap: 8px; }
.mobi-kachel {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  border-left: 6px solid var(--gruppe);
}
.mobi-kachel-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}
.mobi-kachel-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px 8px 6px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mobi-kachel-text:focus-visible { outline: 2px solid var(--gruppe); }
.mobi-kachel-kanal { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mobi-kachel .mobi-datum-ueberfaellig { color: var(--fehler); font-weight: 600; }
.mobi-kachel .mobi-datum-heute { color: var(--warnung); font-weight: 600; }
.mobi-kachel.erledigt .mobi-kachel-text, .mobi-kachel.erledigt .mobi-kachel-text span {
  color: var(--text-leise);
}
.mobi-kacheln-flaeche { margin-top: 8px; }
.kanban-entwurf { justify-self: start; }
.mobi-sammlung .vorlage-liste { margin-bottom: 8px; }
.mobi-hinweis {
  padding: 8px 10px;
  border-left: 4px solid var(--warnung);
  border-radius: var(--radius);
  background: var(--warn-flaeche);
}
.mobi-vorschau .vorlage-text { flex: 1; min-width: 0; }
.mobi-vorschau-felder .feld { width: auto; min-width: 0; flex: 1 1 130px; }
.mobi-vorschau-felder .mobi-vorschau-titel { flex: 3 1 220px; }
.mobi-vorschau.gibt-es .vorlage-text { opacity: 0.6; }
.kanban-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.kanban-nav[hidden], .kanban-leiste[hidden] { display: none; }
.kanban-nav .knopf { min-width: 44px; }

/* Leiste zum Verschieben direkt über den Spalten (läuft mit dem Kanban mit) */
.kanban-leiste { display: none; overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; scrollbar-width: auto; scrollbar-color: var(--grau-marke) var(--gruen-hell); }
.kanban-leiste-innen { height: 1px; }
.kanban-leiste::-webkit-scrollbar { height: 12px; }
.kanban-leiste::-webkit-scrollbar-track { border-radius: 6px; background: var(--gruen-hell); }
.kanban-leiste::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--grau-marke); }

/* Sammel-ToDo: Platz statt Kästchen, mit Kanal-Punkt */
.mobi-sammel-platz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
}
.mobi-sammel-platz .mobi-punkt { margin: 0; }
.mobi-warnungen { margin: 0 0 12px; }
.mobi-warnungen[hidden] { display: none; }
.mobi-warnung {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 4px solid var(--warnung);
  border-radius: var(--radius);
  background: var(--warn-flaeche);
  font-size: 14px;
}
.mobi-warnung-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.mobi-zs-box { margin: 8px 0 12px; display: grid; gap: 6px; justify-items: start; }
.mobi-zeitstrahl { display: grid; gap: 2px; margin-top: 6px; }
.mz-zeile { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; min-height: 30px; }
.mz-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mz-name .mobi-punkt { width: 10px; height: 10px; margin: 0; }
.mz-bahn { position: relative; height: 30px; margin: 0 12px; border-bottom: 1px solid var(--rand); }
.mz-achse { height: 30px; border-bottom: 0; font-size: 12px; color: var(--text-leise); }
.mz-aktion-text { transform: translateX(-50%); color: var(--gruen); font-weight: 600; }
.mz-linie, .mzb-linie { position: absolute; top: 0; bottom: 0; width: 0; }
.mz-aktion { border-left: 2px solid var(--gruen); }
.mz-heute { border-left: 2px dashed var(--grau-marke); }
.mz-punkt {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--flaeche);
  border-radius: 50%;
  background: var(--grau-hell);
  color: var(--auf-farbe);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--schatten-ring);
}

/* Unsichtbar größere Tippfläche (44 px) um den kleinen Punkt */
.mz-punkt::after { content: ''; position: absolute; inset: -13px; }
.mz-punkt.mz-ueber { border-color: var(--fehler); }
.mz-punkt.mz-fertig { background: var(--grau-hell); }
.mz-punkt:focus-visible { outline: 2px solid var(--gruppe); outline-offset: 2px; }
.mz-legende { margin: 4px 0 0; font-size: 12px; }
.mz-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mz-datum { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); font-size: 12px; }
.mz-heute-text { color: var(--text-leise); font-weight: 600; }
.mz-strich { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--grau-hell); }
.mz-strich-mo { height: 10px; background: var(--grau-marke); }
.mz-woche { border-left: 1px solid var(--linie-zart); }
.mobi-zeit-gruppe { margin-bottom: 20px; }
.mobi-zeit-gruppe .teil-titel-klein { margin-bottom: 4px; }
.mobi-zeitbalken { width: 100%; padding: 0 14px; box-sizing: border-box; }
.mzb-balken {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: var(--spur-zart);
  overflow: hidden;
}
.mzb-abschnitt { position: absolute; top: 0; bottom: 0; min-width: 4px; background: var(--grau-hell); }
.mzb-abschnitt.mzb-fertig { background: var(--grau-hell); }
.mzb-aktion { border-left: 3px solid var(--gruen); }
.mzb-heute { border-left: 2px dashed var(--text); }
.mzb-achse { position: relative; height: 18px; margin-top: 2px; color: var(--text-leise); }
.mz-mo-text { color: var(--text-leise); }

@media (max-width: 599px) {
  .mz-zeile { grid-template-columns: 76px 1fr; }
  .mz-mo-text { display: none; }
}

@media (max-width: 959px) {
  .mobi-kopf { flex-wrap: wrap; }
  .mobi-kopf .kopf-knoepfe { width: 100%; justify-content: flex-end; gap: 6px; }
  .mobi-ansicht { flex-wrap: nowrap; gap: 6px; }
  .mobi-kopf .kopf-knoepfe .knopf { padding: 0 10px; font-size: 14px; white-space: nowrap; }
  .mobi-ansicht .knopf { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 14px; }
}

@media (min-width: 960px) {
  .kanban-spalte { flex: 1 0 220px; }
  .mobi-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .mobi-spalte.leer { display: block; }
  .mobi-kacheln-flaeche { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Alle Spalten sind sichtbar: Sie brechen bei Bedarf in eine zweite Reihe um, statt seitwärts zu scrollen */
  .kanban {
    scrollbar-width: none;
  }

  /* Wieder eine Reihe; die untere Leiste ist ausgeblendet, die obere bleibt */
  .kanban::-webkit-scrollbar { display: none; }
  .kanban-leiste:not([hidden]) { display: block; }
}

/* ==== 10. Kalender: Liste, Woche, Monat, Kacheln ==== */

.kal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 8px 0 12px;
}
.kal-filter .formfeld-bool { font-size: 14px; }
.kal-zeile { border-left: 6px solid var(--gruppe); padding-right: 8px; flex-wrap: wrap; }
.kal-zeile .dash-todo { border-left: 0; flex: 1 1 200px; }
.kal-marke { font-size: 13px; }
.kal-link {
  flex: none;
  font-size: 14px;
  font-weight: 600;
}
.kal-ansicht { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.kal-raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}
.kal-wt {
  padding: 4px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-leise);
}
.kal-tag:hover { background: var(--gruen-hell); }
.kal-tag:focus-visible { outline: 2px solid var(--gruppe); }
.kal-fremd { opacity: 0.5; }
.kal-nr { font-size: 13px; font-weight: 600; }
.kal-punkte { display: flex; flex-wrap: wrap; gap: 3px; }
.kal-punkt { width: 8px; height: 8px; border-radius: 50%; }
.kal-chips { display: none; }
.kal-streifen {
  display: block;
  border-top: 5px solid var(--gruppe);
  font-size: 0;
  line-height: 1.2;
  color: var(--text-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 -4px;
  padding: 0 4px;
}
.kal-chip {
  display: block;
  padding: 1px 4px;
  border-left: 4px solid var(--gruppe);
  border-radius: 3px;
  background: var(--gruen-hell);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kal-chip.ueber { color: var(--fehler); font-weight: 600; }
.kal-chip-mehr { font-size: 12px; }
.kal-tagesliste { margin-top: 16px; }
.kal-tagesliste h3 { margin: 0 0 6px; }
.kal-hinweis { margin-top: 12px; }
.kal-filter input[type="checkbox"], .kal-kachel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin: 0;
  border: 2px solid var(--gruppe);
  border-radius: 7px;
  background: var(--flaeche);
  cursor: pointer;
}
.kal-filter input[type="checkbox"]::after, .kal-kachel input[type="checkbox"]::after {
  content: '';
  width: 6px;
  height: 12px;
  border: solid var(--gruppe);
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
}
.kal-filter input[type="checkbox"]:checked::after,
.kal-kachel input[type="checkbox"]:checked::after {
  opacity: 1;
}
.kal-filter input[type="checkbox"]:focus-visible,
.kal-kachel input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--gruppe);
  outline-offset: 2px;
}
.kal-kachel input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }

/* Kacheln für externe Veranstaltungen */
.kal-kacheln { margin: 0 0 12px; }
.kal-kacheln p { margin: 0 0 6px; font-size: 14px; }
.kal-kacheln-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.kal-kachel {
  display: grid;
  gap: 4px;
  min-width: 150px;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: var(--radius);
}
.kal-kachel-titel {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.kal-kachel-titel:focus-visible { outline: 2px solid currentColor; }
.kal-kachel-datum { font-size: 13px; }
.kal-kachel label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 14px;
  cursor: pointer;
}

/* Veranstaltungen und Aktionen: ganzer Kasten in der Farbe */
.kal-voll { margin: 6px 0; border-radius: var(--radius); border-bottom: 0; }
.kal-voll .dash-todo, .kal-voll .kal-link {
  color: inherit;
}
.kal-voll .leise, .kal-voll .kal-marke {
  color: inherit;
  opacity: 0.85;
}
.kal-voll .dash-todo:hover { background: var(--hover-dunkel); }

/* Deadlines: Pastell, dicker Rand, fett */
.kal-frist {
  margin: 6px 0;
  border-radius: var(--radius);
  border-bottom: 0;
  border-left-width: 10px;
}
.kal-frist strong { font-weight: 800; }
.kal-frist .dash-todo:hover { background: var(--hover-hell); }

/* Vorbei oder abgeschlossenes Projekt: grau */
.kal-grau { margin: 6px 0; border-radius: var(--radius); border-bottom: 0; background: var(--flaeche-grau); }
.kal-grau .dash-todo { background: none; }
.kal-grau strong, .kal-grau .leise {
  color: var(--text-leise);
}

/* Raster ohne Lücken, damit sich die Projektbalken berühren */
.kal-tag {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-height: 60px;
  padding: 4px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--rand);
}
.kal-heute { box-shadow: inset 0 0 0 2px var(--gruppe); }
.kal-gewaehlt { background: var(--gruen-hell); box-shadow: inset 0 0 0 2px var(--gruppe); }

/* Balken laufen über die ganze Breite des Tages */
.kal-leer { border-top-color: transparent; }

/* Deadline-Tag: pink */
.kal-frist-tag {
  background: var(--frist-flaeche);
  color: var(--frist-text);
  font-weight: 700;
}

/* Veranstaltungen im Tag: Farbe als Hintergrund */
.kal-chip-voll { border-left-color: transparent; font-weight: 600; }

/* Vorbei oder abgeschlossenes Projekt: grau */
.kal-chip-grau {
  border-left-color: var(--grau-marke);
  background: var(--flaeche-grau);
  color: var(--text-leise);
}

/* Großes Tagesfenster */
.kal-gross .dash-todo-liste { margin: 0; }
.kal-heften { flex: none; margin: 0 4px; }

/* Kalender: Suche mit Filter-Symbol */
.kal-suchzeile { display: flex; align-items: center; gap: 8px; }
.kal-suchzeile .feld { flex: 1; min-width: 0; }
.kal-filterknopf { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; }
.kal-filter[hidden] { display: none; }

/* Monat am Handy: Veranstaltungen als Streifen über die ganze Tagesbreite */
.kal-punkt-voll {
  flex: none;
  width: calc(100% + 8px);
  height: 8px;
  margin: 0 -4px;
  border-radius: 0;
}

/* Kopf der Monatsansicht: Monat mit Pfeilen, darunter Heute und Datumswahl */
.kal-monatsnav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.kal-monatsnav h2 { margin: 0; min-width: 0; font-size: 16px; text-align: center; }   /* Umbruch, wenn der Platz nicht reicht */
.kal-taste {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gruppe);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.kal-taste:focus-visible { outline: 3px solid var(--gruppe); outline-offset: 2px; }
.kal-kopf-rechts { display: contents; align-items: center; justify-content: flex-end; gap: 8px; }
.kal-datumknopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0;
  overflow: hidden;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
}
.kal-datumknopf input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
}

/* Kalender: Liste, Monat, Aktionskalender links. Archiv, Vorlagen, + Veranstaltung rechts */
.kal-ansicht-gruppe { display: flex; gap: 4px; min-width: 0; }
.kal-ansicht-rechts { margin-left: auto; }

/* Kalender: Liste, Monat, Aktionskalender links, Vorlagen und + Veranstaltung rechts, eine Zeile */
.kal-ansicht .knopf {
  flex: 0 1 auto;
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Monatskopf am Handy: ‹ Monat › und Heute links, Datumswahl rechts, alles in einer Zeile */
.kal-kopf {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.kal-kopf .knopf { padding: 0 10px; }

/* Mobi-Beitrag nach der Aktion (außer Danke/Rückblick): pink */
.kal-zeile.kal-mobi-nach { background: var(--rosa-flaeche); }
.kal-chip-pink { background: var(--rosa-flaeche); }

/* Wochenansicht: Handy untereinander, PC 7 Spalten */
.kal-woche { display: grid; gap: 8px; }
.kal-wtag {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.kal-wtag.kal-heute { border-color: var(--gruppe); box-shadow: inset 0 3px 0 var(--gruppe); }
.kal-wtag-kopf { margin: 0 0 2px; font-size: 14px; }
.kal-wleer { margin: 0; }
.kal-wchip {
  display: grid;
  gap: 1px;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-left: 4px solid var(--gruppe);
  border-radius: 3px;
  background: var(--gruen-hell);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.kal-wchip .leise { font-size: 12px; }
.kal-wchip.ueber strong { color: var(--fehler); }
.kal-wchip.kal-chip-pink { background: var(--rosa-flaeche); }
.kal-wchip.kal-chip-grau { background: var(--flaeche-grau); color: var(--text-leise); }
.kal-wchip:focus-visible { outline: 2px solid var(--gruppe); }
.kal-wneu { justify-self: start; }
.kal-mobi-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 4px solid var(--pink);
  border-radius: var(--radius);
  background: var(--pink-flaeche);
}
.kal-mobi-leiste[hidden] { display: none; }
.kal-mobi-knoepfe a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.kal-arten-gruppe { display: flex; gap: 6px; }
.kal-arten { margin: 0 0 8px; }

@media (max-width: 599px) {
  /* Kalender-Kopf am Handy: sechs Knöpfe passen nicht in eine Zeile.
   Liste, Monat, Woche, Aktionskalender oben, Vorlagen und + Veranstaltung darunter (rechtsbündig). */
  .kal-ansicht { flex-wrap: wrap; row-gap: 6px; }
  .kal-ansicht .knopf { flex: none; overflow: visible; }
}

@media (max-width: 959px) {
  .kal-arten .kal-arten-gruppe { width: 100%; }
  .kal-arten .knopf { flex: 1 1 0; }
}

@media (min-width: 600px) {
  .kal-tag { min-height: 104px; }
  .kal-punkte { display: none; }
  .kal-chips { display: flex; flex-direction: column; gap: 2px; }
  .kal-streifen { font-size: 11px; }

  /* Am PC bleiben die Häkchen immer sichtbar */
  .kal-filterknopf { display: none; }
  .kal-filter[hidden] { display: flex; }
  .kal-ansicht { gap: 6px; }

  /* Kalender: Knopfreihe (Liste, Monat, Archiv, Vorlagen, Veranstaltung) */
  .kal-ansicht .knopf { padding: 0 16px; font-size: 15px; }

  /* Monatskopf: Monat mit Pfeilen mittig, Heute und Datumswahl rechtsbündig */
  /* PC: Monat mittig, Heute und Datumswahl rechtsbündig */
  .kal-kopf {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }
  .kal-monatsnav { grid-column: 2; gap: 4px; }
  .kal-monatsnav h2 { min-width: 11ch; font-size: 18px; }
  .kal-kopf-rechts { grid-column: 3; display: flex; }
  .kal-datumknopf { margin-left: 0; }
  .kal-taste { width: 44px; }
}

@media (min-width: 960px) {
  .kal-woche { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .kal-wtag { min-height: 160px; }
}

/* ==== 11. Dokumentation: Protokolle, TOPs, Vorschläge, Reden ==== */

.protokoll-jahr { margin-top: 20px; }
.protokoll-zeile {
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border-top: 0;
  border-right: 0;
  cursor: pointer;
}
.protokoll-marke {
  justify-self: start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.protokoll-ok { background: var(--gruen-hell); color: var(--gruen-text); }
.protokoll-warn { background: var(--hinweis-flaeche); color: var(--hinweis-text); }
.protokoll-text {
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-zart);
  overflow-wrap: anywhere;
  tab-size: 4;
}
.protokoll-knoepfe { flex-wrap: wrap; margin-top: 12px; }
.protokoll-knoepfe a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.protokoll-form .pk-zwei { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pk-gruppe { min-width: 0; margin: 4px 0; padding: 8px 12px 12px; border: 1px solid var(--rand); border-radius: var(--radius); }
.protokoll-form .feld { min-width: 0; }   /* Lange Projektnamen in der Auswahl sprengen das Formular nicht */
.pk-gruppe legend { padding: 0 6px; color: var(--text-leise); font-weight: 600; }
.pk-rollen { display: grid; gap: 8px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
.pk-chip {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.pk-chip-an { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 600; }
.pk-text-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.protokoll-feld { min-height: 280px; font-family: inherit; line-height: 1.45; tab-size: 4; }
.pk-zaehler { display: block; text-align: right; font-size: 13px; }
.pk-zaehler.fehler { font-weight: 600; }
.pk-hinweis { font-size: 13px; margin: 0; }
.pk-entwurf { display: grid; gap: 6px; justify-items: start; }
.protokoll-form.karte { margin: 16px 0; border-top: 5px solid var(--gruppe); }
.inhalt .protokoll-form.karte { max-width: 1100px; margin-inline: auto; }   /* Breiter Bildschirm: mittig */
.protokoll-form h2 { margin: 0; }
.pk-entwurf-frage { margin: 16px 0; }
.top-karte h2 { margin: 0 0 8px; font-size: 18px; }
.top-sammlung { display: grid; gap: 8px; }
.top-eingabe { display: flex; flex-wrap: wrap; gap: 8px; }
.top-eingabe .feld { flex: 1 1 200px; min-width: 0; }
.pk-ruecken-knoepfe { display: flex; gap: 6px; }
.pk-ruecken { min-width: 44px; padding: 0 10px; font-size: 18px; }
.detail .protokoll-knoepfe .knopf { flex: 1 1 auto; }

/* Mehr Abstand zwischen Hinweistext und TOPs (die Chips lagen leicht über dem Text) */
.pk-gruppe .pk-chips, .top-sammlung .pk-chips {
  margin: 6px 0 4px;
}
.doku-kopf { display: grid; gap: 12px; margin-bottom: 12px; align-items: start; }
.doku-links { display: grid; gap: 10px; }
.doku-umschalter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.doku-kopf .top-karte { margin: 0; padding: 12px; }
.doku-kopf .top-karte h2 { font-size: 16px; }
.protokoll-entwurf { background: var(--blau-flaeche); color: var(--blau-text); }

/* Protokolltext wie im Dokument */
.pk-ansicht { white-space: normal; }
.pk-ansicht-top { margin: 14px 0 4px; font-size: 17px; font-weight: 700; color: var(--gruppe); }
.pk-ansicht-top:first-child { margin-top: 0; }
.pk-ansicht-absatz { margin: 4px 0; }
.pk-ansicht-liste { margin: 2px 0 6px; padding-left: 22px; }
.pk-ansicht-liste .pk-ansicht-liste { margin: 2px 0; }
.pk-marke-knopf { padding: 0 12px; font-size: 14px; }
.pk-marke-panel { margin: 0; padding: 12px; border-left: 4px solid var(--gruppe); }
.pk-marke-form { display: grid; gap: 10px; }
.pk-marke-form h3 { margin: 0; }
.pk-einfuegen-listen { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.pk-marken-uebersicht { display: grid; gap: 2px; font-size: 13px; }
.pk-marken-fehler { font-size: 13px; }
.pk-ansicht-beschluss { font-weight: 700; }
.pk-vorschlaege { margin: 16px 0; border-top: 5px solid var(--gruppe); display: grid; gap: 8px; }
.pk-vorschlaege h2 { margin: 0; }
.pk-vorschlag-teil { display: grid; gap: 6px; }
.pk-vorschlag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.pk-vorschlag .auswahl-box { width: 22px; height: 22px; margin-top: 10px; flex: none; }
.pk-vorschlag-felder { display: grid; gap: 6px; flex: 1; min-width: 0; }
.pk-vorschlag-reihe .feld { flex: 1 1 140px; min-width: 0; }
.pk-vorschlag-quelle { font-size: 12px; overflow-wrap: anywhere; }
.pk-vorschlag-aus .pk-vorschlag-felder { opacity: 0.55; }
.pk-vorschlag-art { margin: 8px 0 0; font-size: 15px; color: var(--gruppe); }
.pk-vorschlag-fehler { margin: 0; font-size: 13px; }
.reden-filter { grid-template-columns: 1fr; }
.rede-marke {
  justify-self: start;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--flaeche-grau);
  color: var(--text-leise);
}
.rede-probelesen { background: var(--hinweis-flaeche); color: var(--hinweis-text); }
.rede-fertig { background: var(--gruen-hell); color: var(--gruen-text); }
.rede-gehalten { background: var(--blau-flaeche-kraeftig); color: var(--blau-text); }
.rede-text { display: grid; gap: 0.75rem; }
.rede-reihe { display: grid; gap: 0.5rem; }
.rede-absatz-feld { resize: vertical; overflow: hidden; min-height: 48px; }
.rede-kommentar-spalte {
  border-left: 3px solid var(--rand);
  padding-left: 0.75rem;
  display: grid;
  gap: 0.25rem;
  align-content: start;
}
.rede-reihe-mit .rede-kommentar-spalte { border-left-color: var(--kommentar-rand); }
.rede-reihe-mit .rede-absatz-feld { border-color: var(--kommentar-rand); }
.rede-kommentar-spalte .kommentar-liste { margin: 0; }
.rede-absatz-knopf { min-height: 44px; justify-self: start; }
.rede-schreibplatz:empty { display: none; }
.rede-schreibplatz { display: grid; gap: 0.25rem; }
.rede-zitat { font-style: italic; }
.rede-verschoben { margin: 0.5rem 0 0.25rem; }

@media (min-width: 600px) {
  .pk-rollen { grid-template-columns: repeat(3, 1fr); }
  .reden-filter { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 960px) {
  .doku-kopf { grid-template-columns: 1fr 1fr; }
  .pk-einfuegen-listen { grid-template-columns: 1fr 1fr; }

  /* PC: Absatz links, Kommentare rechts daneben */
  .rede-text-mit .rede-reihe { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* ==== 12. Team: Karten, Rollen, Kapazität, Berg ==== */

.team-filter { grid-template-columns: 1fr; }
.team-raster { display: grid; gap: 12px; grid-template-columns: 1fr; }
.team-karte {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}
.team-karte:hover { border-color: var(--gruppe); }
.team-karte:focus-visible { outline: 3px solid var(--gruppe); }
.team-karte.aktiv { border-color: var(--gruppe); box-shadow: 0 0 0 1px var(--gruppe); }
.team-karte-ich { border-left: 6px solid var(--gruppe); }
.team-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.team-marke {
  display: inline-block;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flaeche-grau);
  color: var(--text-leise);
}
.team-marke-du { background: var(--gruppe); color: var(--gruppe-text); }
.team-rollen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.team-rolle {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--gruen-hell);
  border: 1px solid var(--rand);
}
.team-rolle-gewaehlt { border-color: var(--gruppe); font-weight: 600; }
.team-kapazitaet { display: grid; gap: 4px; }
.team-balken { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 240px; }
.team-kaestchen { height: 12px; border-radius: 3px; background: var(--kaestchen); }
.team-kaestchen.voll { background: var(--gruppe); }
.team-balken-grau .team-kaestchen.voll { background: var(--kaestchen-voll); }
.team-kap-text { font-size: 14px; }
.team-notiz { font-size: 14px; }
.team-hinweis, .leer-karte { border-style: dashed; }
.team-pausiert { margin-top: 12px; }
.team-detail h3 { margin: 1rem 0 0.4rem; font-size: 16px; }
.team-rollen-liste, .team-verlauf { margin: 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.team-rollen-liste .team-marke { margin-left: 6px; }
.team-verlauf-notiz { display: block; font-size: 14px; }
.team-verlauf-abgelaufen, .team-verlauf-ueberholt { color: var(--text-leise); }
.team-verlauf-gilt strong { color: var(--gruppe); }
.team-rollen-teil { margin-top: 16px; }
.team-rollen-inhalt { display: grid; gap: 8px; margin-top: 8px; }
.team-rollen-verwalten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.team-rollen-verwalten li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
}
.team-rolle-info { display: grid; gap: 2px; min-width: 0; }
.team-rollen-verwalten .knopf-klein { min-height: 44px; flex-shrink: 0; }
.team-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.team-vorschlaege .knopf-klein { min-height: 44px; }
.team-eintrag { display: grid; gap: 8px; }
.team-abschnitt { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
.team-abschnitt:last-child { border-bottom: 0; }
.team-werte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.team-wert { min-height: 44px; min-width: 0; padding: 0; font-weight: 700; }
.team-wert[aria-pressed="true"] { background: var(--gruppe); color: var(--gruppe-text); border-color: var(--gruppe); }
.team-wert-satz { margin: 0; }
.team-datum-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.team-abschnitt > *,
.team-datum-zeile > *,
.team-datum-zeile input { min-width: 0; }
.team-schnell .knopf-klein { min-height: 44px; }
.team-rolle-knopf {
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  font: inherit;
  font-size: 14px;
  color: inherit;
  cursor: pointer;
}
.team-rolle-knopf.an { background: var(--gruen-hell); border-color: var(--gruppe); font-weight: 600; }
.team-rolle-knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.team-neue-rolle { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.team-verlauf-bearbeiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-verlauf-bearbeiten li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-verlauf-bearbeiten .knopf-klein { min-height: 44px; flex-shrink: 0; }
.team-fuer-andere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.team-fuer-andere .knopf-klein { min-height: 44px; }
.team-huete-zahl { font-size: 14px; }
.team-frei h2 { margin: 0 0 4px; font-size: 18px; }
.team-frei { display: grid; gap: 8px; }
.team-frei > .knopf { justify-self: start; }
.team-hut-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-hut-liste li { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid var(--rand); }
.team-hut-liste li:first-child { border-top: 0; }
.team-hut { display: grid; gap: 2px; color: inherit; text-decoration: none; min-height: 44px; align-content: center; }
.team-hut:hover .team-hut-titel { text-decoration: underline; }
.team-hut.ueberfaellig .team-hut-titel { color: var(--fehler); font-weight: 700; }
.team-hut.heute .team-hut-titel { color: var(--warnung); font-weight: 700; }
.team-ohne { margin-top: 12px; }
.team-detail > .team-name { margin: 0 0 12px; }
.team-detail-knoepfe { margin: 0 0 16px; }
.team-detail-knoepfe .knopf { padding: 10px 18px; line-height: 1.3; text-align: center; white-space: normal; }
.team-detail h3:first-of-type { margin-top: 4px; }
.team-frei > .dash-schalter { padding-left: 0; }
.team-berg-karte h2 { margin: 0 0 4px; font-size: 18px; }
.team-berg { display: grid; gap: 8px; }
.team-berg-bild { width: 100%; }
.team-berg-svg { display: block; width: 100%; max-width: 1100px; height: auto; touch-action: manipulation; }
.berg-gitter { stroke: var(--kaestchen); stroke-width: 1; }
.berg-achse { stroke: var(--kaestchen-voll); stroke-width: 1; }
.berg-skala { font-size: 11px; fill: var(--text-leise); }
.berg-titel { font-size: 12px; font-weight: 600; fill: var(--text); }
.berg-schicht { stroke: var(--flaeche); stroke-width: 2; stroke-linejoin: round; }
.berg-hut { fill: var(--berg-hut); }
.berg-hut.berg-eng { fill: var(--warnung); }
.berg-aktion { stroke: var(--gruen-aktion); stroke-width: 2; }
.berg-heute { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.berg-wahl { fill: var(--gruen-hell); opacity: 0.7; }
.berg-treffer { fill: transparent; cursor: pointer; }
.team-berg-info { margin: 0; font-size: 14px; min-height: 2.6em; }
.team-berg-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.berg-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.berg-punkt { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.berg-strich-aktion { width: 3px; height: 14px; background: var(--gruen-aktion); display: inline-block; }
.berg-strich-heute { width: 0; height: 14px; border-left: 2px dashed var(--text); display: inline-block; }
.team-berg-tabelle-wrap { overflow-x: auto; }
.team-berg-tabelle { font-size: 13px; }
.team-berg-tabelle td, .team-berg-tabelle th { padding: 4px 8px; text-align: left; vertical-align: top; }
.berg-zeile-heute td { font-weight: 600; }
.berg-punkt-eng { background: var(--warnung); }
.berg-hut, .berg-frei { stroke: var(--flaeche); stroke-width: 2; }

/* Farben geprüft (Farbsehschwächen, Kontrast): Grau mit Verantwortlichen, Blau offen, Orange eng */
.berg-frei { fill: var(--berg-frei); }
.berg-punkt-hut { background: var(--berg-hut); }
.berg-punkt-frei { background: var(--berg-frei); }
.team-hilfe-link { margin-top: 16px; }
.team-marke-offen { background: var(--hinweis-flaeche); color: var(--hinweis-text); }
.team-rollen-wer .team-rollen-wahl { margin-top: 4px; }

@media (min-width: 600px) {
  .team-filter { grid-template-columns: 2fr 1fr; }

  /* Höchstens 4 Spalten: Bei mehr Platz werden die Karten breiter */
  .team-raster { grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 36px) / 4)), 1fr)); }
}

@media (min-width: 960px) {
  .team-frei .team-hut-liste li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ==== 13. Wiki ==== */

.wiki-text { max-width: 70ch; line-height: 1.55; overflow-wrap: anywhere; }
.wiki-text h2 { margin: 20px 0 8px; font-size: 20px; }
.wiki-text h3 { margin: 16px 0 6px; font-size: 17px; }
.wiki-text > :first-child { margin-top: 0; }
.wiki-text p { margin: 0 0 10px; }
.wiki-text ul, .wiki-text ol { margin: 0 0 10px; padding-left: 1.4rem; }
.wiki-text li { margin: 2px 0; }
.wiki-hinweis { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--rand); border-radius: var(--radius); background: var(--hintergrund); }
.wiki-fehlt { color: var(--text-leise); }
.wiki-bild { margin: 0 0 12px; }
.wiki-bild img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.wiki-bild figcaption { margin-top: 4px; font-size: 14px; color: var(--text-leise); }
.wiki-iv { margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--radius); }
.wiki-iv-titel { margin: 0 0 4px; font-weight: 600; }
.wiki-iv ul { list-style: none; margin: 0; padding: 0; }
.wiki-iv-unter { padding-left: 16px; }
.wiki-iv-knopf {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wiki-iv-knopf:hover { text-decoration: underline; }
.wiki-bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.wiki-bereich {
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1.2;
}
.wiki-bereich-skillshare { background: var(--gruen-hell); }
.wiki-bereich-anleitung { background: var(--wiki-anleitung); }
.wiki-bereich-entwicklung { background: var(--wiki-entwicklung); }
.wiki-bereich.aktiv { border: 2px solid var(--text); }
.wiki-bereich:focus-visible { outline: 2px solid var(--gruppe); outline-offset: 2px; }
.wiki-filter { grid-template-columns: 1fr; }
.wiki-thema { margin: 0 0 8px; }
.wiki-thema-liste { display: grid; gap: 8px; margin: 0 0 8px; }
.wiki-eintrag { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.wiki-eintrag-titel { font-weight: 600; }
.wiki-eintrag-zusatz { font-size: 14px; }
.wiki-eigene h2 { margin: 20px 0 8px; font-size: 18px; }
.wiki-zurueck { margin: 0 0 8px; }
.wiki-artikel { max-width: 800px; }
.inhalt .wiki-artikel { margin-inline: auto; }   /* Lesetext mittig in der App */
.wiki-titel { margin: 0 0 4px; font-size: 24px; }
.wiki-stand { margin: 0 0 16px; font-size: 14px; }
.wiki-filter.mit-knopf { grid-template-columns: 1fr auto; align-items: center; }
.wiki-filter.mit-knopf .knopf { white-space: nowrap; }
.wiki-seiten-knoepfe { margin-top: 16px; }
.wiki-form-karte { max-width: none; }
.inhalt .wiki-form-karte { max-width: 1100px; }   /* Breiter Bildschirm: mittig wie die Wiki-Seite */
.wiki-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.wiki-werkzeuge .knopf { min-width: 44px; min-height: 44px; }
.wiki-textfeld { width: 100%; min-height: 320px; font-family: inherit; line-height: 1.5; resize: vertical; }
.wiki-zaehler { margin: 4px 0 8px; font-size: 14px; text-align: right; }
.wiki-vorschau { min-height: 120px; overflow-wrap: anywhere; }
.wiki-vorschau-titel { margin: 0 0 6px; font-size: 14px; }
.wiki-warnung { margin: 0; padding: 8px 12px; border-radius: var(--radius); background: var(--hinweis-flaeche); color: var(--warnung-text); }
.wiki-konflikt, .wiki-entwurf { padding: 10px 12px; border-radius: var(--radius); background: var(--hinweis-flaeche); border: 1px solid var(--hinweis-rand); }
.wiki-konflikt p, .wiki-entwurf p { margin: 0 0 8px; }
.wiki-formathilfe ul { margin: 0 0 8px; padding-left: 1.2rem; font-size: 14px; }
.wiki-umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wiki-umschalter-knopf {
  min-height: 44px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  font: inherit;
  cursor: pointer;
}
.wiki-umschalter-knopf.aktiv { border: 2px solid var(--text); font-weight: 600; }
.wiki-schreiben .wiki-vorschauteil { display: none; }
.wiki-schreiben.zeigt-vorschau .wiki-schreibteil { display: none; }
.wiki-schreiben.zeigt-vorschau .wiki-vorschauteil { display: block; }
.wiki-formathilfe > summary::before,
.wiki-mehr > summary::before,
.wiki-thema > summary::before {
  content: '▸';
  display: inline-block;
  width: 1.2em;
}
.wiki-formathilfe[open] > summary::before,
.wiki-mehr[open] > summary::before,
.wiki-thema[open] > summary::before { content: '▾'; }
.wiki-kommentare { margin-top: 16px; }
.wiki-kommentare h3 { margin-top: 0; }
.wiki-code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
.wiki-oeffentlich { display: grid; gap: 12px; }
.wiki-oeffentlich > h1 { margin: 0; }
.wiki-oeffentlich .wiki-artikel { max-width: none; }
.wiki-gruppe h2 { margin: 0 0 4px; }
.wiki-oeff-thema { margin: 12px 0 6px; font-size: 16px; }
.wiki-form-knoepfe-loeschen { margin-left: auto; }
.wiki-bild-knopf { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.wiki-bild-knopf img { width: 100%; }

/* Links: hell etwas dunkleres Grün (besser lesbar), dunkel wie bisher */
a,
.wiki-text a,
.wiki-iv-knopf,
.info-gruppe-links a { color: var(--link); }

@media (max-width: 420px) {
  .wiki-bereich { font-size: 14px; padding: 6px 4px; }
}

@media (min-width: 600px) {
  .wiki-bild { max-width: 50%; }
}

@media (min-width: 960px) {
  .wiki-umschalter { display: none; }
  .wiki-schreiben { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .wiki-schreiben .wiki-vorschauteil, .wiki-schreiben.zeigt-vorschau .wiki-schreibteil { display: block; }
  .wiki-vorschau { max-height: 70vh; overflow-y: auto; }
}

/* ==== 14. Druck ==== */

/* Druckblatt (js/ui/druck.js): am Bildschirm unsichtbar, beim Drucken das Einzige auf dem Blatt. */
.druckblatt { display: none; }

@media print {
  html, body { background: #fff !important; color: #000 !important; }

  /* Alle Seiten: Leisten, Knöpfe, Meldungen und Fenster fallen weg */
  .seitenleiste,
  .untenleiste,
  .detail,
  .toast,
  .modal,
  .knopf,
  .kopf-knoepfe,
  .teil-aktionen { display: none !important; }
  .huelle, .inhalt { display: block !important; margin: 0 !important; padding: 0 !important; }
  .karte { background: #fff !important; border-color: #999 !important; box-shadow: none !important; }
  a { color: #000 !important; }

  /* Druckblatt */
  body.druckt > *:not(.druckblatt) { display: none !important; }
  body.druckt .druckblatt { display: block !important; font-size: 12pt; line-height: 1.35; }
  .druckblatt h1 { font-size: 18pt; margin: 0 0 4pt; }
  .druckblatt h2 { font-size: 13pt; margin: 14pt 0 4pt; border-bottom: 1px solid #000; }
  .druck-unter { margin: 0 0 10pt; }
  .druck-liste { list-style: none; margin: 0; padding: 0; }
  .druck-liste li { display: flex; gap: 8pt; padding: 4pt 0; border-bottom: 1px solid #ccc; break-inside: avoid; }
  .druck-box { font-size: 16pt; line-height: 1; }
  .druck-text { display: flex; flex-direction: column; }
  .druck-info { font-size: 10pt; }
  .druck-liste li.fertig strong { text-decoration: line-through; }
  .druck-fuss { margin-top: 16pt; font-size: 9pt; }

  /* Zeitplan (Gantt) quer und mit Farben; eine Zeile bricht nicht über zwei Seiten */
  @page quer { size: A4 landscape; margin: 12mm; }
  body.druckt .druckblatt.quer { page: quer; }
  .druckblatt .zeitplan { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10pt; }
  .druckblatt .zp-zeile { break-inside: avoid; }
}