/* Gustav-Dashboard. Ein Stylesheet, keine Fremdquellen (Content-Security-Policy: 'self'). */

:root {
  --grund: #f6f4ef;
  --karte: #ffffff;
  --text: #1f2421;
  --leise: #5f6862;
  --linie: #e3dfd6;
  --akzent: #2f5d50;
  --akzent-text: #ffffff;
  --warn: #a4372b;
  --warn-grund: #fbeceb;
  --bald: #8a5a00;
  --bald-grund: #fdf3de;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #151816;
    --karte: #1f2421;
    --text: #eceee9;
    --leise: #a4aca6;
    --linie: #333a36;
    --akzent: #7fb8a4;
    --akzent-text: #0f1512;
    --warn: #f08a7e;
    --warn-grund: #3a2220;
    --bald: #e9b95c;
    --bald-grund: #362c17;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.seite {
  max-width: 960px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px 32px;
}

h1 { font-size: 1.9rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 0 0 10px; }
h3 {
  font-size: 0.78rem; margin: 16px 0 6px; color: var(--leise);
  text-transform: uppercase; letter-spacing: 0.06em;
}

p { margin: 6px 0; }
.leise { color: var(--leise); }
.hinweis { color: var(--warn); }
.stand { color: var(--leise); font-size: 0.85rem; margin-top: 10px; }
.fuss { text-align: center; font-size: 0.85rem; margin-top: 24px; }

/* Kopfzeile */
.kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 18px;
}
.kopf p { margin: 2px 0 0; }
.abmelden { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; }
button.link {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--akzent); cursor: pointer; text-decoration: underline;
}

/* Karten */
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
}
.karte > h3:first-of-type { margin-top: 4px; }
.familie { margin-bottom: 14px; }
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* Termine */
ul { list-style: none; margin: 0; padding: 0; }
.termine li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--linie);
}
.termine li:first-child { border-top: 0; }
.zeit { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 4.2em; font-size: 0.95rem; }
.titel { flex: 1; overflow-wrap: anywhere; }
.wer {
  font-size: 0.75rem; color: var(--leise); border: 1px solid var(--linie);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* Hausaufgaben */
.aufgaben li {
  border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
  border-left: 4px solid transparent;
}
.aufgaben li.verpasst { background: var(--warn-grund); border-left-color: var(--warn); }
.aufgaben li.bald { background: var(--bald-grund); border-left-color: var(--bald); }
.zeile { display: flex; justify-content: space-between; gap: 10px; }
.fach { font-weight: 600; }
.faellig { font-size: 0.85rem; white-space: nowrap; }
li.verpasst .faellig { color: var(--warn); }
li.bald .faellig { color: var(--bald); }
.aufgaben .text { margin: 4px 0 0; font-size: 0.95rem; overflow-wrap: anywhere; }

/* Anmeldung, Hinweise */
.mitte { max-width: 420px; margin: 12vh auto 0; text-align: center; }
.marke { font-size: 2.6rem; color: var(--akzent); }
.adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 8px; padding: 8px; overflow-wrap: anywhere;
}
.knopf {
  display: inline-block; margin-top: 18px; padding: 12px 22px;
  background: var(--akzent); color: var(--akzent-text);
  border-radius: 999px; text-decoration: none; font-weight: 600;
}
.knopf.zweitrangig {
  background: transparent; color: var(--akzent); border: 1px solid var(--akzent);
}