/* 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.9 = 18 px (Stand 26.10.2026). */
  --zoom: 0.9;
  --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)); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45;
}
main { max-width: 40rem; 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, 90rem); }
  .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;
}
.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: 40rem; 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; }
.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); }
.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; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0;
                padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }
.chat-eingabe textarea { flex: 1; margin: 0 !important; min-height: 3.2rem; resize: none; overflow-y: auto; line-height: 1.35; }
.chat-eingabe .knopf.gross { width: auto; flex: none; }
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“ und „Chat“ */
.reiter { display: flex; gap: 0.5rem; margin: 0.3rem 0 1rem; }
.reiter-knopf { flex: 1; position: relative; text-align: center; font-weight: 800; font-size: 1.15rem;
                padding: 0.75rem 0.5rem; 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 – fest 2 × 2, passt bei jeder Schriftgröße */
.zoom-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; 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; }
.aendern-form textarea { min-width: 14rem; margin: 0.2rem 0 !important; }
.aendern-form .knopfreihe { margin: 0.3rem 0 0; }