/* Aufgabenklang - bewusst große Schrift und große Knöpfe */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --hintergrund: #f4f6f8;
  --karte: #ffffff;
  --text: #1c2733;
  --grau: #6b7a89;
  --linie: #d8dfe6;
  --blau: #1565c0;
}
html { font-size: 17px; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  min-height: 100vh;
}
.versteckt { display: none !important; }

/* Anmeldung */
#login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-karte {
  background: var(--karte); border-radius: 16px; padding: 2rem;
  max-width: 420px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,.10);
  display: flex; flex-direction: column; gap: 1rem; text-align: center;
}
.login-karte input {
  font-size: 1.2rem; padding: .8rem; border: 2px solid var(--blau);
  border-radius: 10px; background: #fdfdfd;
}

/* Kopfzeile */
header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--blau); color: #fff; padding: .8rem 1rem;
}
header h1 { font-size: 1.25rem; }
.leitspruch { font-size: .95rem; font-weight: 600; font-style: italic; color: #ffe082; margin-top: .2rem; }
@media (min-width: 600px) {
  .leitspruch { font-size: 1.2rem; }
}

/* Navigation: Start (Heute+Morgen) <-> Aufgaben planen / Ideen */
.nav-reihe { display: flex; gap: .7rem; margin-bottom: 1rem; }
.nav-knopf {
  flex: 1; font-size: 1.05rem; font-weight: 600; padding: .9rem .6rem;
  border: none; border-radius: 12px; background: var(--karte); color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); cursor: pointer;
}
.zurueck-reihe { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.zurueck-reihe .nav-knopf { flex: none; padding: .7rem 1rem; }
.ansicht-titel { font-weight: 700; font-size: 1.15rem; }
#menue-knopf {
  font-size: 1.4rem; background: rgba(255,255,255,.15); color: #fff;
  border: none; border-radius: 10px; padding: .35rem .6rem; cursor: pointer;
}

/* Projektlisten */
#listen { padding: 1rem; max-width: 720px; margin: 0 auto; padding-bottom: 6rem; }
.projekt { background: var(--karte); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.projekt-kopf {
  color: #fff; padding: .7rem 1rem; font-weight: 600; font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
}
.projekt-kopf .zaehler { font-weight: 400; font-size: .9rem; opacity: .9; }
.aufgabe {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem 1rem; border-top: 1px solid var(--linie); cursor: pointer;
}
.aufgabe:active { background: #eef3f8; }
.haken {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  border: 2.5px solid var(--grau); background: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: #fff;
}
.aufgabe.fertig .haken { background: #2e7d32; border-color: #2e7d32; }
.aufgabe .inhalt { flex: 1; min-width: 0; }
.aufgabe.fertig .inhalt .text { text-decoration: line-through; color: var(--grau); }
.aufgabe .plan { font-size: .85rem; color: var(--grau); margin-top: .15rem; }
.leer { padding: .9rem 1rem; color: var(--grau); border-top: 1px solid var(--linie); font-style: italic; }

/* Schwebender Neu-Knopf */
.schwebend {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 6;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--blau); color: #fff; font-size: 2.2rem; border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer;
}

/* Überlagerungen (Formular, Menü) */
.ueberlagerung {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(20,30,40,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.ueberlagerung .karte {
  background: var(--karte); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; padding: 1.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  max-height: 92vh; overflow-y: auto;
}
@media (min-width: 600px) {
  .ueberlagerung { align-items: center; }
  .ueberlagerung .karte { border-radius: 18px; }
}
label { font-weight: 600; font-size: .95rem; margin-top: .3rem; }
textarea, input[type="time"] {
  font-size: 1.1rem; padding: .7rem; border: 2px solid var(--blau);
  border-radius: 10px; width: 100%; background: #fdfdfd; font-family: inherit;
}

/* Auswahl-Knöpfe (Projekt, Wiederholung, Wochentage) */
.auswahl-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.auswahl {
  font-size: 1rem; padding: .55rem .9rem; border-radius: 999px;
  border: 2px solid var(--linie); background: #fff; cursor: pointer; color: var(--text);
}
.auswahl.gewaehlt { border-color: var(--blau); background: var(--blau); color: #fff; font-weight: 600; }
.auswahl.tag { padding: .55rem .7rem; }

/* Knöpfe */
.knopf-reihe { display: flex; gap: .7rem; margin-top: .5rem; }
.knopf-reihe > * { flex: 1; }
.knopf-gross {
  font-size: 1.15rem; font-weight: 600; padding: .85rem 1rem;
  background: var(--blau); color: #fff; border: none; border-radius: 12px; cursor: pointer;
}
.knopf-hell {
  font-size: 1.05rem; padding: .8rem 1rem;
  background: #e8edf2; color: var(--text); border: none; border-radius: 12px; cursor: pointer;
}
.knopf-rot {
  font-size: .95rem; padding: .6rem 1rem; margin-top: .4rem;
  background: #fff; color: #b71c1c; border: 2px solid #b71c1c; border-radius: 12px; cursor: pointer;
}
.fehler { color: #b71c1c; font-weight: 600; min-height: 1.2em; }

/* Tagesplan */
.aufgabe.ueberfaellig .plan { color: #b71c1c; font-weight: 600; }

/* Kleine Zusatz-Knöpfe in der Aufgabenzeile (aufklappen, Tagesplan, herausnehmen) */
.klein-knopf {
  flex: none; font-size: 1.05rem; padding: .35rem .5rem;
  background: #eef2f6; border: 1px solid var(--linie); border-radius: 8px;
  cursor: pointer; color: var(--text);
}

/* Teilaufgaben in der Liste */
.teilzeile {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 1rem .5rem 3.2rem; border-top: 1px dashed var(--linie);
  background: #fafcfe;
}
.teilzeile.fertig span { text-decoration: line-through; color: var(--grau); }
.haken.klein { width: 1.5rem; height: 1.5rem; font-size: .9rem; border-width: 2px; }
.haken:disabled { opacity: .45; cursor: default; }
.knopf-gross:disabled, .knopf-hell:disabled { opacity: .5; cursor: default; }
.teilzeile.fertig .haken { background: #2e7d32; border-color: #2e7d32; }

/* Teilaufgaben im Formular */
.teil-bearbeiten { display: flex; gap: .5rem; margin-bottom: .4rem; }
.teil-bearbeiten input {
  flex: 1; font-size: 1rem; padding: .55rem; border: 2px solid var(--linie);
  border-radius: 8px; background: #fdfdfd;
}
.teil-bearbeiten button {
  flex: none; border: none; background: #eef2f6; border-radius: 8px;
  padding: .3rem .6rem; cursor: pointer; font-size: 1rem;
}
.teil-neu { display: flex; gap: .5rem; }
.teil-neu input {
  flex: 1; font-size: 1rem; padding: .6rem; border: 2px solid var(--blau);
  border-radius: 8px; background: #fdfdfd;
}
.teil-neu button {
  flex: none; width: 2.8rem; font-size: 1.3rem; background: var(--blau);
  color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.hinweis { font-size: .85rem; color: var(--grau); }

/* Jetzt fällig */
.faellig-kasten { border: 3px solid #b71c1c; }
.faellig-zeile { padding: .8rem 1rem; border-top: 1px solid var(--linie); }
.faellig-zeile .plan { font-size: .85rem; color: #b71c1c; font-weight: 600; margin-top: .15rem; }
.faellig-knoepfe { display: flex; gap: .5rem; margin-top: .6rem; }
.faellig-knoepfe > * { flex: 1; }
.knopf-gruen {
  font-size: 1.05rem; font-weight: 600; padding: .8rem 1rem;
  background: #2e7d32; color: #fff; border: none; border-radius: 12px; cursor: pointer;
}

/* Mikrofon + Klang-Auswahl */
.mikro-knopf {
  align-self: flex-start; font-size: .95rem; padding: .5rem .9rem;
  background: #e8edf2; border: none; border-radius: 999px; cursor: pointer; color: var(--text);
}
.mikro-knopf.aktiv { background: #b71c1c; color: #fff; }
.klang-reihe { display: flex; gap: .5rem; }
.klang-reihe select {
  flex: 1; font-size: 1.05rem; padding: .6rem; border: 2px solid var(--blau);
  border-radius: 10px; background: #fdfdfd;
}
.klang-reihe .knopf-hell { flex: none; }
#push-meldung { font-weight: 600; min-height: 1.2em; }

/* Ideen & Erkenntnisse + Notizen */
.idee-eingabe { padding: .8rem 1rem; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: .5rem; }
.idee-eingabe textarea { font-size: 1rem; }
.idee-zeile {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem 1rem; border-top: 1px solid var(--linie);
}
.idee-zeile .inhalt { flex: 1; min-width: 0; }
.idee-zeile .plan { font-size: .8rem; color: var(--grau); margin-top: .15rem; }
#n-liste { max-height: 40vh; overflow-y: auto; }

/* Eigener Abstand: alle N Tage/Wochen/... */
.intervall-reihe { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.intervall-reihe input {
  width: 4.5rem; font-size: 1.1rem; padding: .55rem; text-align: center;
  border: 2px solid var(--blau); border-radius: 8px;
}
.intervall-reihe select {
  font-size: 1.1rem; padding: .55rem; border: 2px solid var(--blau);
  border-radius: 8px; background: #fdfdfd;
}

/* Projekt-Formular: Farbauswahl */
.farbfeld {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
}
.farbfeld.gewaehlt { border-color: var(--text); transform: scale(1.12); }
#p-name, #p-emoji {
  font-size: 1.1rem; padding: .7rem; border: 2px solid var(--blau);
  border-radius: 10px; width: 100%; background: #fdfdfd;
}
hr { border: none; border-top: 1px solid var(--linie); margin: .4rem 0; }
#menue-meldung { color: #2e7d32; font-weight: 600; min-height: 1.2em; }