:root { color-scheme: only light; }   /* siehe basis.html: helle App auch im dunklen Modus des Handys */
/* Große Schrift, kräftige Kontraste, nur Systemschriften (keine fremden Schriften). */
:root {
  /* ZOOM – die eine Stelle für die Größe der ganzen App: Schrift, Knöpfe, Abstände, Logo.
     Alles andere ist in rem angegeben und wächst mit. 1 = 20 px Grundschrift; 0.8 = 16 px (Stand 26.10.2026).
     Muss zur Stufe „normal“ in db.ZOOM_STUFEN passen. */
  --zoom: 0.8;
  --grund: #f6f5f1;
  --karte: #ffffff;
  --text: #1a1a1a;
  --leise: #555;
  --blau: #1f4e8c;          /* Vereinsblau aus dem Logo */
  --blau-hell: #e4ecf6;
  --gruen: #1d5e3a;
  --gruen-hell: #e3f1e8;
  --rot: #9b1c1c;
  --rot-hell: #fbe7e7;
  --rand: #d0cec6;
}
* { box-sizing: border-box; }
html { font-size: calc(20px * var(--zoom));
       /* Handy-Browser (v. a. Chrome/Android) sollen Text nicht eigenmächtig vergrößern */
       -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45;
}
/* Breiten in px/vw, NICHT in rem – sonst schrumpft die Seite mit der Schriftgröße (Zoom) mit */
main { max-width: 760px; margin: 0 auto; padding: 0.8rem 1rem 3rem; }
/* Breite Bildschirme (Computer): fast die ganze Breite nutzen */
@media (min-width: 900px) {
  main, .fuss { max-width: min(94vw, 1800px); }
  .blase { max-width: min(70%, 48rem); }
}
h1 { font-size: 1.5rem; margin: 1rem 0 0.6rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
p { margin: 0.4rem 0; }

.kopf {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--blau); color: #fff; padding: 0.6rem 1rem;
  padding-top: max(0.6rem, env(safe-area-inset-top));
}
.logo-breit { height: 4.4rem; width: auto; display: block; }
.gruppe-name { font-size: 1.1rem; font-weight: 700; color: var(--blau); margin: 0.6rem 0 0; }

.karte {
  background: var(--karte); border: 2px solid var(--rand); border-radius: 0.8rem;
  padding: 1rem; margin: 0.9rem 0;
}
[hidden] { display: none !important; }   /* hidden gilt immer, auch bei .knopf/flex */
.knopf {
  display: inline-block; font: inherit; font-weight: 700; text-decoration: none; text-align: center;
  padding: 0.7rem 1rem; border-radius: 0.6rem; border: 3px solid var(--blau);
  background: var(--karte); color: var(--blau); cursor: pointer; min-height: 3rem;
}
.knopf.gross { width: 100%; font-size: 1.15rem; padding: 0.9rem 1rem; background: var(--blau); color: #fff; }
.knopf.block { display: block; margin: 0.7rem 0; }
.antworten { display: flex; gap: 0.6rem; margin: 0.8rem 0; }
.antworten .knopf { flex: 1; }
.knopf.ja { border-color: var(--gruen); color: var(--gruen); }
.knopf.nein { border-color: var(--rot); color: var(--rot); }
.knopf.ja.gewaehlt { background: var(--gruen); color: #fff; }
.knopf.nein.gewaehlt { background: var(--rot); color: #fff; }

.eingabe {
  display: block; width: 100%; font: inherit; font-size: 1.4rem; letter-spacing: 0.08em;
  padding: 0.7rem; margin: 0.6rem 0 1rem; border: 3px solid var(--rand); border-radius: 0.6rem;
  text-transform: uppercase;
}
.eingabe:focus { border-color: var(--blau); outline: none; }
label { font-weight: 700; }

.datum { font-size: 1.25rem; font-weight: 700; }
.status { font-weight: 700; }
.status.ja { color: var(--gruen); }
.status.nein { color: var(--rot); }
.ausfall { display: inline-block; background: var(--rot); color: #fff; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 0.4rem; }
.termin.abgesagt { background: var(--rot-hell); border-color: var(--rot); }
.info { background: var(--blau-hell); padding: 0.4rem 0.6rem; border-radius: 0.4rem; }

.leute { list-style: none; padding: 0; margin: 0.3rem 0 0; }
.leute li { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }
.kreis {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--blau-hell);
  color: var(--blau); font-weight: 700; font-size: 0.85rem;
}

.schritte { padding-left: 1.4rem; }
.schritte li { margin: 0.5rem 0; }
.symbol { display: inline-block; vertical-align: middle; color: #0a64d8; }
.hinweis, .angemeldet { color: var(--leise); }
.erfolg { background: var(--gruen-hell); padding: 0.6rem; border-radius: 0.5rem; font-weight: 700; }
.fehler { background: var(--rot-hell); color: var(--rot); padding: 0.6rem; border-radius: 0.5rem; font-weight: 700; }
.leise { color: var(--leise); }
.leise-knopf { font: inherit; background: none; border: none; color: var(--leise); text-decoration: underline; padding: 1rem 0; cursor: pointer; }
.eingabe::placeholder { text-transform: none; letter-spacing: normal; }

/* Organisatoren: Formulare */
.formular label { display: block; margin-top: 0.8rem; }
.formular fieldset { border: none; padding: 0; margin: 0; }
.formular legend { font-weight: 700; margin-bottom: 0.3rem; }
.wahl { display: flex; align-items: center; gap: 0.6rem; font-weight: 400; margin: 0.4rem 0; }
.wahl input { width: 1.5rem; height: 1.5rem; }
.eingabe.klein { font-size: 1.1rem; letter-spacing: normal; text-transform: none; margin: 0.3rem 0 0.4rem; }
.ort-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.ort-zeile .eingabe { flex: 1 1 12rem; margin: 0; }
.leise-liste li { color: var(--leise); }
.kreis.grau { background: #ececec; color: var(--leise); }
.abgesagt-titel { margin-top: 0.8rem; color: var(--leise); }

/* Meldungen */
.fuss { max-width: 760px; margin: 2rem auto 1rem; padding: 0 1rem; text-align: center; }
.fuss a { color: var(--leise); }
.status.offen { color: #b35900; }
.meldung-text { white-space: pre-wrap; }
.meldung.erledigt { opacity: 0.75; }
.kleingedruckt { font-size: 0.85rem; }
textarea.eingabe { font: inherit; resize: vertical; }

/* Kopf-Knöpfe, Profil, Einladungen, Terminverwaltung */
/* Knöpfe in der blauen Kopfleiste, im Stil des Logos: hellgrauer runder Rahmen, fette helle Schrift */
/* nebeneinander, so hoch wie das Logo, rechtsbündig (ein einzelner Knopf steht ganz rechts) */
/* „Gruppe wechseln“ gleich neben dem Logo, „Meine Daten“ ganz rechts */
.kopf-knoepfe { margin-left: auto; display: flex; gap: 0.8rem; align-self: stretch; justify-content: flex-end; }
.kopf-knopf {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; padding: 0.2rem 0.45rem; border: 3px solid #e1e3e6; border-radius: 0.7rem;
  background: #2b62a8; color: #e1e3e6; font-weight: 800; font-size: 0.9rem; line-height: 1.2;
  text-decoration: none; hyphens: manual; width: 5.6rem;
}
/* Logo darf schrumpfen, die Knöpfe nicht – so passt alles auch auf schmale Handys */
.kopf-zeile > a { flex: 0 1 auto; min-width: 5.5rem; }
.kopf-zeile .logo-breit { height: auto; max-height: 4.4rem; max-width: 100%; }
.kopf-knoepfe { min-width: max-content; }
@media (max-width: 380px) { .kopf { gap: 0.4rem; } .kopf-knoepfe { gap: 0.5rem; } .kopf-knopf { font-size: 0.8rem; padding: 0.2rem 0.35rem; width: 5rem; } }
.kopf-knopf:active { background: #17396a; }
.kopf-knopf.meine-daten { background: #23867a; }   /* Türkis: persönlich, nicht Gruppe */
.kopf-knopf.meine-daten:active { background: #176358; }
/* „Meine Daten“ als eigenes Bild (oder Anfangsbuchstaben) mit Namen darunter */
.kopf-knopf.meine-daten { flex-direction: column; gap: 0.15rem; padding: 0.25rem 0.3rem; }
.meine-daten .kreis { width: 2.6rem; height: 2.6rem; font-size: 1rem; border: 2px solid #e1e3e6; }
.meine-daten .ich-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.leute .wann { color: var(--leise); font-size: 0.85rem; white-space: nowrap; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0; }
.knopfreihe form { margin: 0; }
.knopfspalte .knopf { width: 100%; }
img.kreis { object-fit: cover; padding: 0; background: var(--blau-hell); }
img.kreis, .logo-gruppe { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* lange drücken = groß */
.bild-zeile { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0; }
.bild-zeile .kreis { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.beschriftung { font-weight: 700; margin-top: 0.8rem; }
.link-text { word-break: break-all; background: var(--blau-hell); padding: 0.5rem; border-radius: 0.4rem; font-size: 0.9rem; }
.qr svg { width: 12rem; height: auto; display: block; margin: 0.5rem auto; }
.code-gross { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; color: var(--blau);
              background: var(--blau-hell); padding: 0.6rem; border-radius: 0.6rem; }
details > summary { list-style: none; cursor: pointer; margin: 0.5rem 0; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: 0.2rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }
.liste { padding-left: 1.2rem; }
select.eingabe { text-transform: none; letter-spacing: normal; }

/* Gruppenname als zweite Zeile in der blauen Kopfleiste */
.kopf { display: block; }
.kopf-zeile { display: flex; align-items: center; gap: 0.6rem; }
.kopf .gruppe-name { flex: 1 1 auto; margin: 0 0 0 1.2rem; line-height: 1.15; color: #e1e3e6; font-size: 1.75rem; font-weight: 800; }
.knopfreihe.unten { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--rand); }
/* Handy: zu schmal für alles in einer Zeile → oben Logo, Chat, Meine Daten;
   darunter (noch im Blau) Gruppenname und „Gruppe wechseln“ */
@media (max-width: 600px) {
  .kopf-zeile { display: grid; grid-template-columns: minmax(4.5rem, 1fr) auto; row-gap: 0.4rem; column-gap: 0.6rem;
                grid-template-areas: "logo daten" "name name"; }
  .kopf-zeile > a { grid-area: logo; }
  .kopf-knoepfe { display: contents; }     /* Knöpfe einzeln ins Raster */
  .meine-daten { grid-area: daten; }
  .kopf .gruppe-name { grid-area: name; font-size: 1.65rem; margin: 0.35rem 0 0.1rem; }
}
.unten-info { margin-top: 1.2rem; text-align: center; }

/* LAMM-Abend: Selbstbewirtung mit Wirt und Helfer */
.termin.lamm:not(.abgesagt) { border-color: #b35900; background: #fff8ef; }
.dienste { margin: 0.6rem 0; padding: 0.5rem 0.7rem; background: #fdf0de; border-radius: 0.5rem; }
.dienst { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.dienst form { margin: 0; }
.dienst-name { font-weight: 700; min-width: 4.2rem; }
.dienst-person { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.klein-knopf { min-height: 2.4rem; padding: 0.35rem 0.8rem; font-size: 0.95rem; }
.leise-knopf.klein { padding: 0.2rem 0; font-size: 0.9rem; }
.lamm-feld { margin-top: 0.8rem !important; padding: 0.5rem 0.7rem !important; background: #fdf0de; border-radius: 0.5rem; }

/* Chat */
.chat-knopf { background: #d9822b; width: 4.4rem; position: relative; font-size: 1rem; }
.chat-knopf:active { background: #a8611c; }
.neu-punkt { position: absolute; top: -0.55rem; right: -0.55rem; background: #c0262d; color: #fff; border: 2px solid #e1e3e6;
             border-radius: 1rem; min-width: 1.5rem; padding: 0 0.3rem; font-size: 0.8rem; line-height: 1.3rem; }
.chat-zeile { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem; margin: 0.5rem 0; background: var(--karte);
              border: 2px solid var(--rand); border-radius: 0.7rem; color: var(--text); text-decoration: none; font-weight: 700; }
.chat-name { flex: 1; }
.neu-zahl { background: #c0262d; color: #fff; border-radius: 1rem; padding: 0.1rem 0.6rem; font-size: 0.85rem; }
.abstand-oben { margin-top: 1.4rem; }
.chat-titel { margin-bottom: 0; }
.nachrichten { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.chat-tag { align-self: center; color: var(--leise); font-size: 0.85rem; margin: 0.6rem 0 0.2rem; }
.blase { max-width: 85%; align-self: flex-start; background: var(--karte); border: 2px solid var(--rand);
         border-radius: 0.9rem; padding: 0.5rem 0.75rem; }
.blase.eigene { align-self: flex-end; background: var(--blau-hell); border-color: #b9cbe3; }
.blase-kopf { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; font-size: 0.95rem; }
.blase-kopf .kreis { width: 1.8rem; height: 1.8rem; font-size: 0.7rem; }
.blase-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.blase-zeit { text-align: right; color: var(--leise); font-size: 0.8rem; margin: 0.15rem 0 0; }
/* Chatraum: Seite genau so hoch wie der Bildschirm, nur die Nachrichten scrollen */
/* Höhe: echte sichtbare Fensterhöhe aus app.js (--fensterhoehe); 100dvh nur als Rückfall –
   manche Handy-Browser zählen sonst die Adressleiste mit und das Eingabefeld rutscht unter den Rand */
body.chat-seite { height: 100vh; height: 100dvh; height: var(--fensterhoehe, 100dvh); display: flex; flex-direction: column; overflow: hidden; }
body.chat-seite .kopf { flex: none; }
body.chat-seite main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
body.chat-seite .fuss { display: none; }
.chat-kopf { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.chat-kopf .chat-titel { font-size: 1.25rem; margin: 0; }
.chat-kopf .hinweis { margin: 0; }
body.chat-seite .nachrichten { flex: 1; min-height: 0; overflow-y: auto; margin: 0.6rem 0 0; padding: 0.3rem 0.2rem;
                               border-top: 2px solid var(--rand); border-bottom: 2px solid var(--rand); overscroll-behavior: contain; }
.chat-eingabe { flex: none; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0;
                padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
.chat-eingabe textarea { width: 100%; margin: 0 !important; min-height: 3.2rem; resize: none; overflow-y: auto; line-height: 1.35; }
.chat-eingabe .knopf.gross { width: auto; flex: none; }
/* unter dem Eingabefeld: links Bild/PDF und Sprechen, rechts Senden */
.chat-knoepfe { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }   /* Foto, PDF, Sprechen, Senden – bei großer Schrift zweizeilig */
.chat-knoepfe .senden { margin-left: auto !important; }
.chat-knoepfe .knopf { width: auto; margin: 0; }
.knopf.sprechen { font-size: 0.9rem; padding: 0.45rem 0.6rem; min-height: 2.6rem; background: var(--blau-hell); }
.knopf:disabled { opacity: 0.4; cursor: not-allowed; }
body.chat-seite .chat-kopf .knopf { flex: none; }

/* Brotkrümel oben auf jeder Unterseite: der erste Teil führt immer zurück */
.krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; margin: 0.2rem 0 0.6rem;
          font-size: 0.95rem; }
.krumen a { color: var(--blau); font-weight: 700; padding: 0.45rem 0.2rem; text-decoration: underline;
            text-underline-offset: 0.2em; }
.krumen a:first-child { padding-left: 0; }
.krumen [aria-current] { color: var(--leise); }
.krumen-trenner { color: var(--leise); }
body.chat-seite .krumen { flex: none; margin-bottom: 0.2rem; }

/* Gruppenübersicht: erste Ebene */
.gruppen-karte { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; margin: 0.8rem 0;
                 background: var(--karte); border: 3px solid var(--blau); border-radius: 0.8rem; color: var(--text);
                 text-decoration: none; }
.gruppen-karte-name { font-size: 1.3rem; font-weight: 800; color: var(--blau); }
.gruppen-karte-info { color: var(--leise); }
.gruppen-karte .neu-zahl { align-self: flex-start; }

/* Zweite Ebene: Reiter „Termine“, „Chat“, „Ablage“ – müssen auch bei größter Schrift nebeneinander aufs
   Handy passen (UI-Prüfung 28.10.2026: „Ablage“ ragte 16 px heraus), daher Schrift höchstens 4,6 % der Breite */
.reiter { display: flex; gap: 0.4rem; margin: 0.3rem 0 1rem; }
.reiter-knopf { flex: 1 1 0; min-width: 0; position: relative; text-align: center; font-weight: 800;
                font-size: min(1.15rem, 4.6vw); overflow-wrap: anywhere;
                padding: 0.75rem 0.3rem; border: 3px solid var(--blau); border-radius: 0.7rem;
                color: var(--blau); background: var(--karte); text-decoration: none; }
.reiter-knopf.aktiv { background: var(--blau); color: #fff; }
.reiter-knopf .neu-punkt { top: -0.6rem; right: -0.4rem; }
.chat-zeile.gross { border-color: var(--blau); font-size: 1.1rem; }

/* Terminliste: Datum einmal je Tag, darunter Sport und Treffen */
.tag-ueberschrift { font-size: 1.3rem; margin: 1.4rem 0 0.4rem; color: var(--text); }
.tag-ueberschrift:first-of-type { margin-top: 0.4rem; }
.termin-titel { font-size: 1.2rem; }
.termin { margin-top: 0.5rem; }

/* Verwaltung: Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; margin: 0.5rem 0 1rem; }
.kachel { display: flex; flex-direction: column; padding: 0.6rem 0.7rem; background: var(--karte); border: 2px solid var(--rand);
          border-radius: 0.7rem; color: var(--text); text-decoration: none; font-size: 0.9rem; line-height: 1.25; }
.kachel-zahl { font-size: 1.7rem; font-weight: 800; color: var(--blau); }
.kachel.gelb { border-color: #b35900; background: #fff8ef; }
.kachel.rot { border-color: var(--rot); background: var(--rot-hell); }
.kachel.rot .kachel-zahl { color: var(--rot); }
.karte.achtung { border-color: #b35900; background: #fff8ef; }
.achtung-liste { padding-left: 1.2rem; margin: 0.3rem 0; }
.achtung-liste li { margin: 0.3rem 0; }
.termin-kurz { list-style: none; padding: 0; margin: 0.2rem 0 0.6rem; font-size: 0.95rem; }
.termin-kurz li { padding: 0.2rem 0; }
.system-tabelle { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.system-tabelle th { text-align: left; padding: 0.3rem 0.6rem 0.3rem 0; color: var(--leise); font-weight: 600; vertical-align: top; width: 40%; }
.system-tabelle td { padding: 0.3rem 0; }
.chat-hinweis { flex: none; margin: -0.3rem 0 0.3rem; font-size: 0.7rem; color: var(--leise); text-align: center; }

/* Meine Daten: Schriftgröße wählen – 8 Stufen als 4 × 2 */
.zoom-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.4rem 0; }
.formular .zoom-feld { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
             gap: 0.2rem; margin: 0; padding: 0.5rem 0.3rem; border: 2px solid var(--rand); border-radius: 0.6rem;
             font-weight: 700; cursor: pointer; text-align: center; }
.zoom-feld input { position: absolute; opacity: 0; }
.zoom-feld:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }

/* Willkommen: Code-Feld zuerst; Tipp-Karte „Startbildschirm“ in der Gruppe */
.code-karte { border-color: var(--blau); }
.code-karte label { display: block; font-size: 1.15rem; }
.tipp-installieren { border-color: var(--gruen); background: var(--gruen-hell); }
.tipp-installieren h2 { margin-bottom: 0.3rem; }
.blase.bearbeiten { align-self: stretch; max-width: none; }
.aendern-form textarea { width: 100%; min-height: 4.5rem; resize: none; margin: 0.2rem 0 !important; line-height: 1.35; }
.aendern-form .knopfreihe { margin: 0.3rem 0 0; }

/* Terminliste: je Tag ein Block, abwechselnd leicht blau hinterlegt („Zebra“) */
.vorbei-link { margin: 0; text-align: center; }
.tag-block { margin: 0.8rem -0.6rem; padding: 0.2rem 0.6rem 0.6rem; border-radius: 0.9rem; }
.tag-block.zebra { background: #e9eff8; }
.tag-block .tag-ueberschrift { margin-top: 0.6rem; }
.geburtstag { margin: 0.3rem 0 0.5rem; padding: 0.5rem 0.7rem; border-radius: 0.6rem; background: #fdf0d5; }

/* Verwaltung: Aktivität und Ereignisse */
.balken { width: 100%; max-width: 34rem; height: auto; display: block; margin: 0.3rem 0 0.8rem; }
.balken rect { fill: #9fb8d9; }
.balken rect.heute { fill: var(--blau); }
.balken .wert { font-size: 9px; fill: var(--text); font-weight: 700; }
.balken .achse { font-size: 8px; fill: var(--leise); }
.ereignisse { list-style: none; padding: 0; margin: 0.3rem 0; max-height: 26rem; overflow-y: auto; }
.ereignis { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.6rem; padding: 0.4rem 0;
            border-bottom: 1px solid var(--rand); font-size: 0.92rem; }
.ereignis-zeit { color: var(--leise); }
.ereignis.anmeldung_fehler strong, .ereignis.gesperrt strong { color: var(--rot); }
.ereignis.anmeldung strong, .ereignis.einladung strong, .ereignis.beitritt strong { color: var(--gruen); }
.ereignis.start strong { color: var(--leise); }

/* Terminkarte: „Bearbeiten“ oben rechts (spart eine Zeile für Organisatoren) */
.termin-kopf { display: flex; align-items: flex-start; gap: 0.6rem; }
.termin-kopf .zeit { flex: 1; margin-top: 0.2rem; }
.bearbeiten-knopf { flex: none; min-height: 0; padding: 0.3rem 0.65rem; font-size: 0.85rem; border-width: 2px; }

/* Verwaltung: Mitglieder als Tabelle mit Filter */
.filter-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-zeile .eingabe { flex: 1 1 12rem; margin: 0; }
.tabelle-rahmen { overflow-x: auto; margin: 0.3rem 0 1rem; border: 2px solid var(--rand); border-radius: 0.7rem; background: var(--karte); }
.mitglieder-tabelle { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.mitglieder-tabelle th { text-align: left; padding: 0.45rem 0.6rem; background: var(--blau-hell); color: var(--blau);
                         white-space: nowrap; position: sticky; top: 0; }
.mitglieder-tabelle td { padding: 0.45rem 0.6rem; border-top: 1px solid var(--rand); vertical-align: top; }
.mitglieder-tabelle td:first-child { min-width: 9rem; }
.mitglieder-tabelle td.aktion { text-align: right; white-space: nowrap; }
.mitglieder-tabelle tr.gesperrt td { background: var(--rot-hell); }
.mitglieder-tabelle form { margin: 0; }
/* Termine aus Regeln, die noch nicht freigegeben sind (sieht nur, wer Termine pflegt) */
.termin.nicht-frei { border-style: dashed; border-color: #b35900; opacity: 0.85; }
.freigabe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: #8a4500; margin: 0.3rem 0; }
.freigabe p { margin: 0; flex: 1 1 12rem; }
.marke { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--blau); background: var(--blau-hell);
         border-radius: 0.3rem; padding: 0 0.35rem; margin-top: 0.15rem; }
.marke.rot { color: var(--rot); background: var(--rot-hell); }
.rot-text { color: var(--rot); }

/* Chat-Anhänge: Foto als Vorschau in der Blase, PDF als Kachel, Foto groß in der Lichtbox */
.anhang-bild { display: block; padding: 0; margin: 0.2rem 0 0.3rem; border: none; background: none; cursor: zoom-in; }
.anhang-bild img { display: block; max-width: min(100%, 340px); max-height: 340px; border-radius: 0.5rem; }
.original-wahl { font-size: 0.95rem; align-items: flex-start; }
.original-hinweis { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--leise); }
.anhang-pdf { display: flex; gap: 0.6rem; align-items: center; margin: 0.2rem 0 0.3rem; padding: 0.6rem 0.7rem;
              border: 2px solid var(--rand); border-radius: 0.5rem; background: var(--karte); color: var(--text);
              text-decoration: none; overflow-wrap: anywhere; }
.anhang-symbol { font-size: 1.8rem; flex: none; }
.anhang-wahl[hidden], .anhang-wahl [hidden] { display: none !important; }
.anhang-wahl { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; padding: 0.5rem 0 0; }
.anhang-wahl img { max-height: 90px; max-width: 140px; border-radius: 0.4rem; }
.anhang-wahl .leise-knopf { padding: 0.3rem 0; }
.anhang-wahl .klein-text { flex-basis: 100%; margin: 0; font-size: 0.85rem; }
.fehler-hinweis { flex: none; margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; border-radius: 0.5rem;
                  background: var(--rot-hell); color: var(--rot); font-weight: 700; }
.lichtbox { position: fixed; inset: 0; z-index: 50; background: #111; display: flex; flex-direction: column; }
.lichtbox[hidden] { display: none; }
.lichtbox-leiste { flex: none; display: flex; justify-content: space-between; gap: 0.6rem;
                   padding: max(0.6rem, env(safe-area-inset-top)) 0.6rem 0.6rem; }
.lichtbox-leiste .knopf { min-height: 2.8rem; }
.lichtbox img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }

/* Sprech-Fenster: liegt über allem, solange aufgenommen/erkannt wird – nur „Fertig“ oder „Abbrechen“ */
.sprech-dialog { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.55);
                 display: flex; align-items: center; justify-content: center; padding: 16px; }
.sprech-dialog[hidden] { display: none; }
.sprech-karte { background: var(--karte); border-radius: 0.8rem; padding: 1.2rem; width: min(100%, 420px); text-align: center; }
.sprech-karte p { margin: 0.3rem 0 0.9rem; font-size: 1.1rem; }
.sprech-karte #sprech-rest { margin-top: -0.6rem; font-size: 0.95rem; }
.sprech-mikro { font-size: 2.6rem !important; margin: 0 !important; }
.sprech-dialog.hoert .sprech-mikro { animation: pulsieren 1.2s ease-in-out infinite; }
@keyframes pulsieren { 50% { transform: scale(1.18); } }
.sprech-karte .knopfreihe { display: flex; gap: 0.6rem; }
.sprech-karte .knopfreihe .knopf { flex: 1; margin: 0; }
#sprech-fertig { background: var(--rot); border-color: var(--rot); color: #fff; }

/* Ablage hinter jedem Chat: Fotos als Kacheln, PDFs als Liste, nach Monat */
.ablage-monat h2 { margin: 1.2rem 0 0.5rem; font-size: 1.15rem; }
.ablage-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 0.6rem; }
.ablage-bild { padding: 0; border: 2px solid var(--rand); border-radius: 0.5rem; background: var(--karte); cursor: zoom-in;
               overflow: hidden; text-align: left; font: inherit; }
.ablage-bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ablage-unterschrift { display: block; padding: 0.25rem 0.4rem; font-size: 0.8rem; color: var(--leise); }
.ablage-hochladen { margin: 0.8rem 0 0.4rem; }
.ablage-hochladen #vorschau { display: block; max-height: 160px; max-width: 100%; border-radius: 0.5rem; margin-bottom: 0.5rem; }
.ablage-hochladen textarea { width: 100%; }
.ablage-hochladen .knopf.gross { width: auto; }

/* Überschrift mit Knopf rechts daneben (Meine Daten → Verwaltung, Verwaltung → Neu laden) */
.titel-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.titel-zeile h1 { margin: 0.3rem 0; }
.titel-zeile .knopf { min-height: 2.6rem; padding: 0.45rem 0.9rem; }
.stand { margin: 0 0 0.6rem; font-size: 0.9rem; }

/* Benachrichtigungen unter „Meine Daten“ */
.push-erklaerung { margin: 0.4rem 0 0.6rem; }
.push-erklaerung summary { cursor: pointer; color: var(--blau); font-weight: 700; padding: 0.3rem 0; }
.push-erklaerung ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.push-erklaerung li { margin: 0.3rem 0; }
.geraete-url { overflow-wrap: anywhere; font-size: 0.9rem; text-align: center; }

/* Testsystem (bst): oranger Kopf, damit man es nie mit Live verwechselt */
body.instanz-test .kopf { background: #b43c0c; }
body.instanz-test .kopf::after { content: "TESTSYSTEM"; display: block; text-align: center; font-weight: 800;
                                 letter-spacing: 0.2em; font-size: 0.75rem; opacity: 0.9; margin-top: 0.2rem; }

/* Gruppenbild: klein vor dem Gruppennamen (Kopf, Gruppenliste), groß auf der Bild-Seite */
.gruppen-karte-name { display: flex; align-items: center; gap: 0.5em; }
.gruppe-bild { width: 1.6em; height: 1.6em; object-fit: contain; border-radius: 0.3em; background: #fff; flex: none; }
.gruppen-karte-name .gruppe-bild { width: 2.4rem; height: 2.4rem; border: 1px solid var(--rand); }
.gruppenbild-gross { max-width: min(100%, 260px); max-height: 260px; border-radius: 0.5rem; border: 1px solid var(--rand); }
.kopf-zeile .logo-gruppe { background: #fff; border-radius: 0.5rem; padding: 0.2rem; max-width: 9rem; object-fit: contain; }
.logo-gruppe { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.lichtbox img.lichtbox-hell { background: #fff; margin: auto; flex: 0 1 auto; max-height: 80%; width: auto; max-width: 94%;
                              border-radius: 0.6rem; padding: 0.6rem; }

/* Gruppenübersicht: Karte = großer Link in die Gruppe, darunter kleine Knöpfe je nach Recht */
.gruppen-karte-haupt { display: flex; flex-direction: column; gap: 0.3rem; color: inherit; text-decoration: none; }
.gruppen-karte-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.6rem;
                         border-top: 1px solid var(--rand); }
.gruppen-karte-knoepfe .knopf { min-height: 2.4rem; padding: 0.35rem 0.75rem; font-size: 0.9rem; }

/* Karte, die sich gerade durch andere geändert hat (Zusage, Termin, Chat) – leuchtet kurz auf */
.frisch { animation: frisch 2.5s ease-out; }
@keyframes frisch { 0%, 30% { box-shadow: 0 0 0 4px #f0b400; background-color: #fff6d6; } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .frisch { animation: none; outline: 4px solid #f0b400; } }

/* Verbindung kurz weg (Aktualisierung, Funkloch) – oben fest, verschwindet von selbst */
.verbindung-weg { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #b35900; color: #fff;
                  font-weight: 700; text-align: center; padding: 0.5rem 1rem; }

/* Familie & Freunde: Hinweise (ohne Zusagen), wer eingetragen hat, Hinweise unter einem Treffen */
.termin.nur-hinweis { background: #fbfaf4; border-style: dashed; }
.marke { display: inline-block; font-size: 0.8rem; background: var(--blau-hell); border-radius: 0.3rem; padding: 0 0.4rem; vertical-align: 0.1em; }
.eintrag-von { display: flex; align-items: center; gap: 0.5rem; color: var(--leise); font-size: 0.9rem; margin: 0.2rem 0; }
.dazu { border-left: 3px solid var(--blau-hell); padding-left: 0.6rem; margin: 0.5rem 0; }
.dazu p { margin: 0.2rem 0; }
.dazu-liste { list-style: none; padding: 0; margin: 0; }
.dazu-liste li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; }
.dazu-liste .wann { color: var(--leise); font-size: 0.85rem; }
.dazu .leise-knopf { display: inline-block; padding: 0.4rem 0; }
.wahl span { flex: 1; }
.wahl input { flex-shrink: 0; }
.eintrag-von .kreis, .dazu-liste .kreis { width: 1.8rem; height: 1.8rem; font-size: 0.7rem; flex-shrink: 0; }

/* Mitgliederübersicht je Gruppe */
.gruppe-knoepfe { margin: 0.6rem 0; }
.mitglieder-liste { list-style: none; padding: 0; margin: 0; }
.mitglied-zeile { margin: 0.5rem 0; }
.mitglied-kopf { display: flex; align-items: center; gap: 0.7rem; }
.mitglied-kopf .kreis { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
.mitglied-text { flex: 1; min-width: 0; }
.funktion { display: inline-block; background: var(--gruen-hell); color: var(--gruen); border-radius: 0.3rem; padding: 0 0.4rem; font-weight: 600; }
.klein-text { font-size: 0.85rem; }
.mitglied-aendern[open] { flex-basis: 100%; }
.mitglied-zeile .knopfreihe { margin-top: 0.5rem; }
.verwalter-schild { background: var(--blau-hell); color: var(--blau); }
.mitglied-zeile.eingeladen { border-style: dashed; background: #fbfaf4; }
.mitglied-zeile.abgelaufen { opacity: 0.7; }

/* Kalender für Terminpfleger: Monatsraster, Tage mit Terminen markiert */
.monat-wahl { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.monat-wahl h2 { margin: 0; text-align: center; flex: 1; }
.monat-wahl .knopf { min-width: 3rem; text-align: center; font-size: 1.4rem; padding: 0.3rem 0.8rem; }
.mitte { text-align: center; }
.kalender { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; margin: 0.6rem 0; }
.kalender th { font-size: 0.85rem; color: var(--leise); font-weight: 700; padding: 0.2rem 0; }
.kalender td { padding: 0; background: var(--karte); border: 2px solid var(--rand); border-radius: 0.5rem; }
.kalender td a { display: flex; flex-direction: column; align-items: center; min-height: 3.2rem; padding: 0.25rem 0;
                 color: var(--text); text-decoration: none; }
.kalender td.fremd { background: transparent; border-color: transparent; }
.kalender td.fremd a { color: #aaa; }
.kalender td.heute { border-color: var(--blau); }
.kalender td.heute .tageszahl { color: var(--blau); font-weight: 700; }
.kalender td.gewaehlt { background: var(--blau-hell); border-color: var(--blau); border-width: 3px; }
.tageszahl { font-size: 1.05rem; }
.punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 0.2rem; }
.punkt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--blau); }
.punkt.offen { background: #fff; border: 2px dashed #b35900; }
.punkt.sonder { background: #2e7d32; }
.punkt.aus { background: #b00020; }
.punkt.info { background: #999; border-radius: 0.15rem; }
.mehr { font-size: 0.75rem; line-height: 0.7rem; font-weight: 700; }
.legende { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.9rem; color: var(--leise); }
.legende .punkt { vertical-align: -0.05rem; }
.kalender-termin { border-left: 5px solid var(--blau); padding: 0.2rem 0 0.2rem 0.6rem; margin: 0.6rem 0; }
.kalender-termin.offen { border-left: 5px dashed #b35900; }
.kalender-termin.sonder { border-left-color: #2e7d32; }
.kalender-termin.aus { border-left-color: #b00020; }
.kalender-termin.aus strong { text-decoration: line-through; }
.kalender-termin.info { border-left-color: #999; }
.kalender-termin p { margin: 0.2rem 0; }

/* „Zurück ohne zu speichern“ weit weg vom Speichern-Knopf (Handy: Tastatur klappt zu, Seite springt) */
.verwerfen-zeile { margin-top: 3rem; text-align: center; }

/* Links an Terminen: gut antippbar, jede in eigener Zeile */
.termin-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin: 0.4rem 0; }
.termin-link { font-weight: 700; word-break: break-word; }
.link-felder .link-zeile { display: grid; grid-template-columns: 1fr; gap: 0.2rem; margin-bottom: 0.6rem; }
.link-felder .link-zeile .eingabe { margin: 0; }
.blase-text a, .info a, .meldung-text a, .dazu-liste a { word-break: break-all; }   /* lange Adressen umbrechen */
.aufnehmen-zeile { display: flex; align-items: center; gap: 0.6rem; }
.aufnehmen-zeile .mitglied-text { flex: 1; }
.schon-dabei summary { display: block; text-align: center; }
.grund-form { display: flex; gap: 0.4rem; align-items: center; margin: 0.2rem 0 0.6rem; }
.grund-form .eingabe { flex: 1; margin: 0; min-width: 0; }