:root { --bordeaux:#6e1f30; --dunkel:#4f1522; --gold:#b8924a; --goldhell:#e8d9b8; --creme:#f8f3ea; --papier:#fffdf8;
  --tinte:#2b2224; --grau:#7a6f6c; --linie:#e6dccb; --rot:#b3261e; --rothell:#fbe9e7; --gelb:#c58b00; --gelbhell:#fdf4dc;
  --gruen:#2e7d4f; --gruenhell:#e6f3eb; }
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: anywhere; background: var(--creme); color: var(--tinte); font-family: Lato, "Segoe UI", sans-serif; line-height: 1.5; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; color: var(--bordeaux); margin: .2em 0 .3em; line-height: 1.15; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.35rem; }
a { color: var(--bordeaux); }
.leiste { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  background: var(--bordeaux); border-bottom: 3px solid var(--gold); padding: .7rem 16px; padding-top: max(.7rem, env(safe-area-inset-top)); }
.marke { color: var(--creme); text-decoration: none; font-family: "Cormorant Garamond", serif; font-size: 1.4rem; font-weight: 700; }
.marke span { color: var(--gold); }
.abmelden { background: none; border: 1px solid var(--goldhell); color: var(--goldhell); border-radius: 999px; padding: .3em .9em; font: inherit; font-size: .85rem; }
main { padding: 16px; max-width: 640px; margin: 0 auto; padding-bottom: 3rem; }
.karte { display: block; background: var(--papier); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(60,30,20,.06), 0 6px 18px rgba(60,30,20,.06); color: inherit; text-decoration: none; border-top: 6px solid transparent; }
.lage-rot { border-top-color: var(--rot); } .lage-gelb { border-top-color: var(--gelb); } .lage-gruen { border-top-color: var(--gruen); }
.heute { background: var(--bordeaux); color: var(--creme); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.heute h2 { color: var(--goldhell); }
.punkt { display: flex; gap: .7rem; align-items: flex-start; color: var(--creme); text-decoration: none; padding: .55rem 0; border-top: 1px solid rgba(232,217,184,.2); }
.punkt:first-of-type { border-top: none; }
.ampel { flex: none; display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-top: .4rem; margin-right: .4rem; background: var(--grau); }
.ampel.rot { background: var(--rot); } .ampel.gelb { background: var(--gelb); } .ampel.gruen { background: var(--gruen); }
.heute .ampel.rot { background: #ff8a80; }
.leer { color: var(--grau); font-style: italic; } .heute .leer { color: var(--goldhell); }
.leise { color: var(--grau); font-size: .88rem; }
.stand { color: var(--grau); font-size: .8rem; text-align: center; }
.pille { display: inline-block; padding: .1em .7em; border-radius: 999px; font-size: .8rem; background: #efebe6; }
.pille.status { background: var(--goldhell); color: var(--dunkel); }
.pille.rot { background: var(--rothell); color: var(--rot); } .pille.gelb { background: var(--gelbhell); color: #8a6100; } .pille.gruen { background: var(--gruenhell); color: var(--gruen); }
.dossier ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
li.rot { color: var(--rot); } li.gelb { color: #8a6100; }
.suche input { width: 100%; padding: .7em 1em; border-radius: 999px; border: 1px solid var(--linie); font: inherit; margin-bottom: 1rem; background: #fff; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .8rem 0 0; }
dt { color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .2em; } dd { margin: 0; }
.liste { list-style: none; margin: 0; padding: 0; } .liste li { padding: .45rem 0; border-top: 1px solid var(--linie); } .liste li:first-child { border-top: none; }
.eintrag { display: flex; flex-direction: column; gap: .5rem; padding: .7rem 0; border-top: 1px solid var(--linie); }
.eintrag:first-of-type { border-top: none; }
.zahlform { display: flex; gap: .5rem; flex-wrap: wrap; }
.zahlform input { flex: 1; min-width: 9em; }
input { font: inherit; padding: .6em .8em; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
label { display: block; color: var(--grau); font-size: .85rem; margin: .6rem 0 .3rem; }
.knopf { border: none; background: var(--bordeaux); color: #fff; border-radius: 999px; padding: .7em 1.2em; font: inherit; font-weight: 700; min-height: 44px; }
.knopf.voll { width: 100%; margin-top: 1rem; }
.login input { width: 100%; font-size: 1.1rem; }
.lp { font-size: .75rem; padding: .05em .5em; border-radius: 4px; background: #efebe6; }
.lp.bestätigt { background: var(--gruenhell); color: var(--gruen); } .lp.angefragt { background: var(--gelbhell); color: #8a6100; } .lp.offen { background: var(--rothell); color: var(--rot); }
.entwurf { border-top: 1px solid var(--linie); padding: .6rem 0; } .entwurf summary { cursor: pointer; }
.entwurf pre { white-space: pre-wrap; font-family: inherit; font-size: .92rem; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: .7rem; }
.ereignis { padding: .6rem 0; border-top: 1px solid var(--linie); } .ereignis:first-of-type { border-top: none; }
.ereignis .inhalt { white-space: pre-wrap; font-size: .9rem; max-height: 8em; overflow: hidden; }
.meldung { background: var(--gelbhell); border-left: 4px solid var(--gelb); padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }