:root {
  --bg: #f4f2ee;
  --karte: #ffffff;
  --text: #1d1d1b;
  --leise: #6b6862;
  --linie: #e2ded6;
  --akzent: #2f5d8a;
  --warn: #b3261e;
  --heute: #9a6700;
  --jasmin: #b4475f;
  --rand: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --karte: #1c1c1c;
    --text: #ececec;
    --leise: #9a9a9a;
    --linie: #2c2c2c;
    --akzent: #7fb0e0;
    --warn: #ff8a80;
    --heute: #e8b44a;
    --jasmin: #f08aa0;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
}
button {
  font: inherit;
  color: var(--akzent);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

/* --- Anmeldung --------------------------------------------------------- */
body.anmelden { display: grid; place-items: center; min-height: 100vh; padding: var(--rand); }
.login-box {
  width: 100%; max-width: 360px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 14px; padding: 28px;
}
.login-box h1 { margin: 0 0 20px; font-size: 1.5rem; }
.login-box label { display: block; margin-bottom: 14px; color: var(--leise); font-size: .9rem; }
.login-box input {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit;
  color: var(--text); background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
}
.login-box button[type=submit] { width: 100%; padding: 10px; background: var(--akzent); color: var(--karte); border: 0; }
.meldung { color: var(--warn); font-size: .9rem; }

/* --- Gemeinsame Teile --------------------------------------------------- */
.kopf {
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--rand); border-bottom: 1px solid var(--linie);
}
.uhr { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.datum { color: var(--leise); font-size: .9rem; }
.wetter-kurz { margin-left: auto; font-size: 1.2rem; }
.inhalt { padding: var(--rand); display: grid; gap: 14px; }
.fuss { padding: 8px var(--rand) 20px; color: var(--leise); font-size: .85rem; display: flex; gap: 12px; align-items: center; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.karte h2 { margin: 0 0 10px; font-size: 1rem; letter-spacing: .02em; }
.karte h3 { margin: 12px 0 6px; font-size: .9rem; color: var(--leise); }
.karte.jasmin h2, h3.jasmin { color: var(--jasmin); }
.leer { color: var(--leise); margin: 0; }
.fehler { color: var(--warn); font-size: .85rem; }
details summary { cursor: pointer; color: var(--akzent); }

ul.termine, ul.merkliste { list-style: none; margin: 0; padding: 0; }
.termine li { display: grid; grid-template-columns: 7.5em 1fr; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--linie); }
.termine li:first-child { border-top: 0; }
.termine .zeit { color: var(--leise); font-variant-numeric: tabular-nums; }
.termine .ort { grid-column: 2; color: var(--leise); font-size: .85rem; }
.marke { font-size: .75rem; color: var(--jasmin); border: 1px solid currentColor; border-radius: 6px; padding: 0 5px; }

.merkliste li { display: grid; grid-template-columns: 3.6em 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--linie); }
.merkliste li:first-child { border-top: 0; }
.merkliste .faellig { color: var(--leise); font-variant-numeric: tabular-nums; }
.merkliste .bereich { grid-column: 2; font-size: .75rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; }
.merkliste .punkt { grid-column: 2; }
.merkliste .id { grid-column: 3; grid-row: 1; color: var(--leise); font-size: .8rem; }
.merkliste li.ueberfaellig .faellig { color: var(--warn); font-weight: 600; }
.merkliste li.heute .faellig { color: var(--heute); font-weight: 600; }

.wetter-jetzt { display: flex; align-items: center; gap: 12px; }
.wetter-jetzt .sym { font-size: 2rem; }
.wetter-jetzt .temp { font-size: 2rem; font-weight: 600; }
.wetter-jetzt small { color: var(--leise); }
.wetter-tage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.wetter-tage .tag { display: grid; justify-items: center; font-size: .85rem; gap: 2px; }
.wetter-tage .sym { font-size: 1.4rem; }
.wetter-tage .regen { color: var(--leise); }

.bericht { font-size: .92rem; overflow-wrap: anywhere; }
.bericht h3, .bericht h4 { margin: 14px 0 4px; color: var(--text); font-size: .95rem; }
.bericht p { margin: 4px 0; }
.bericht ul { margin: 2px 0; padding-left: 20px; }
.bericht code { font-size: .85em; background: var(--bg); padding: 0 3px; border-radius: 4px; }

/* --- Handy: eine Spalte ------------------------------------------------- */
.ansicht-handy .inhalt { max-width: 640px; margin: 0 auto; }

/* --- Laptop: mehrere Spalten --------------------------------------------- */
.ansicht-laptop .inhalt { grid-template-columns: 1fr; }
.ansicht-laptop .spalte { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 900px) {
  .ansicht-laptop .inhalt { grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); }
  .ansicht-laptop .spalte.breit { grid-column: 1 / -1; }
}
@media (min-width: 1400px) {
  .ansicht-laptop .inhalt { grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.2fr) minmax(420px, 1.4fr); }
  .ansicht-laptop .spalte.breit { grid-column: auto; }
}

/* --- Spiegel: Hochformat, schwarz, groß, keine Bedienelemente ------------- */
.ansicht-spiegel {
  --bg: #000; --karte: #000; --text: #f2f2f2; --leise: #8c8c8c; --linie: #222;
  --warn: #ff8a80; --heute: #f0c060; --jasmin: #f4a3b5;
  font-size: clamp(18px, 2.6vw, 30px);
  cursor: none;
}
.ansicht-spiegel .kopf { align-items: flex-start; border: 0; padding: 4vh 6vw 3vh; }
.ansicht-spiegel .uhr { font-size: 4.5em; font-weight: 300; line-height: 1; }
.ansicht-spiegel .datum { font-size: 1.1em; }
.ansicht-spiegel .abmelden, .ansicht-spiegel #neu-laden { display: none; }
/* Wetter oben rechts: jetzt groß, darunter die nächsten Tage als Zeilen */
.ansicht-spiegel .wetter-kurz { font-size: 1em; text-align: right; }
.sp-jetzt { display: flex; justify-content: flex-end; align-items: center; gap: .2em; line-height: 1; }
.sp-jetzt .sym { font-size: 2.6em; }
.sp-jetzt .temp { font-size: 3em; font-weight: 300; }
.sp-text { color: var(--leise); font-size: .8em; margin-top: .3em; }
.sp-tage { list-style: none; margin: .7em 0 0; padding: 0; font-size: .85em; display: grid; gap: .25em; }
.sp-tage li { display: grid; grid-template-columns: 4.5em 1.6em 5.2em 3em; gap: .5em; justify-content: end; align-items: center; }
.sp-tage .tagname { text-align: left; }
.sp-tage .regen { color: var(--leise); }
.ansicht-spiegel .inhalt { padding: 0 6vw 6vh; gap: 3vh; }
.ansicht-spiegel .karte { border: 0; padding: 0; }
.ansicht-spiegel .karte h2 { font-size: .8em; text-transform: uppercase; letter-spacing: .12em; color: var(--leise); font-weight: 500; }
.ansicht-spiegel .wetter-jetzt .sym, .ansicht-spiegel .wetter-jetzt .temp { font-size: 2.6em; font-weight: 300; }
.ansicht-spiegel .termine li { grid-template-columns: 7em 1fr; }
.ansicht-spiegel .merkliste li { grid-template-columns: 3.6em 1fr; }
.ansicht-spiegel .fuss { position: fixed; bottom: 0; right: 0; font-size: .5em; opacity: .4; }
.ansicht-spiegel .uhr .sek { font-size: .35em; color: var(--leise); margin-left: .15em; vertical-align: .9em; }
/* Drei Kästchen unten: Biergartenschein, Landjugend, ETG */
.bereiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1vh; }
.bereiche .kasten { border: 1px solid #333; border-radius: 14px; padding: .7em .8em; font-size: .72em; min-width: 0; }
.bereiche h3 { margin: 0; font-size: 1.15em; font-weight: 500; }
.bereiche .zweck { margin: .15em 0 .6em; color: var(--leise); font-size: .85em; }
.bereiche .anzahl { margin: 0 0 .35em; color: var(--heute); font-size: .9em; }
.bereiche .anzahl.ruhig { color: #3fb950; }
.bereiche ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.ansicht-spiegel { overflow: hidden; }
/* Tobi heute | Jasmin heute: Zeit klein über dem Titel, damit es in die halbe Breite passt */
.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.nebeneinander .termine li { grid-template-columns: 1fr; gap: 0; }
.nebeneinander .termine .zeit { font-size: .8em; }
.bereiche li { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.bereiche .wann { color: var(--leise); margin-right: .35em; }
.bereiche .wann.ueber { color: var(--warn); }
.bereiche .wann.heute { color: var(--heute); }
.pi-temp { position: fixed; bottom: 1.2vh; left: 6vw; margin: 0; font-size: .7em; color: var(--leise); display: flex; align-items: center; gap: .5em; }
.pi-temp .ampel { width: .8em; height: .8em; border-radius: 50%; background: #3fb950; }
.pi-temp.gelb .ampel { background: #d29922; }
.pi-temp.rot .ampel { background: #f85149; }
.pi-temp.rot { color: #f85149; }

/* --- Jarvis-Anruf ------------------------------------------------------- */
.jarvis-knopf {
  display: block; text-align: center; text-decoration: none; font-weight: 600;
  background: #1e7d4f; color: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.anruf {
  max-width: 480px; margin: 0 auto; padding: 24px var(--rand) 40px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.anruf .zurueck { align-self: flex-start; color: var(--akzent); text-decoration: none; }
.kreis {
  width: 180px; height: 180px; border-radius: 50%; margin-top: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600; color: #fff; background: #555; transition: background .3s;
}
.kreis.verbinde { background: #9a6700; animation: puls 1.2s infinite; }
.kreis.verbunden { background: #1e7d4f; animation: puls 2.4s infinite; }
.kreis.fehler { background: var(--warn); }
@keyframes puls { 50% { transform: scale(1.05); opacity: .85; } }
.anruf-status { font-size: 1.1rem; margin: 0; }
.anruf-dauer { color: var(--leise); margin: 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.anruf-knopf { width: 100%; max-width: 320px; padding: 18px; font-size: 1.2rem; font-weight: 600; border: 0; color: #fff; border-radius: 14px; }
.anruf-knopf.gruen { background: #1e7d4f; }
.anruf-knopf.rot { background: #b3261e; }
.anruf-hinweis { color: var(--leise); font-size: .9rem; }