:root { --petrol: #0b5d7a; }
body { background: #f4f6f8; padding-bottom: 5.5rem; }
.kopf { background: var(--petrol); color: #fff; padding: .6rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.kopf a, .kopf button { color: #fff; text-decoration: none; }
main { max-width: 720px; margin: 0 auto; padding: 1rem; }
.nav-unten { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #dde2e6; display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 10; }
.nav-unten a { flex: 1; text-align: center; padding: .55rem 0 .45rem; color: #6c757d; text-decoration: none; font-size: .72rem; }
.nav-unten a i { display: block; font-size: 1.35rem; }
.nav-unten a.aktiv { color: var(--petrol); font-weight: 600; }
.woche-nav { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: .6rem; padding: .5rem 1rem; margin-bottom: .75rem; }
.woche-nav a { color: var(--petrol); font-size: 1.3rem; text-decoration: none; padding: 0 .5rem; }
.tag { background: #fff; border-radius: .6rem; margin-bottom: .6rem; padding: .6rem .8rem; }
.tag.heute { box-shadow: inset 0 0 0 2px var(--petrol); }
.tag-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.tag-kopf .plus { color: #3b82f6; font-size: 1.7rem; line-height: 1; text-decoration: none; padding: 0 .4rem; }
.mahlzeit { display: flex; justify-content: space-between; align-items: center; border: 1px solid #e3e7ea; border-left: 5px solid #ccc; border-radius: .4rem; padding: .4rem .7rem; margin-top: .5rem; }
.mahlzeit small { display: block; font-size: .75rem; }
.mahlzeit a { color: inherit; text-decoration: none; }
.art-fruehstueck { border-left-color: #4dabf7; } .art-fruehstueck small { color: #4dabf7; }
.art-mittag { border-left-color: #ffd166; } .art-mittag small { color: #e0a800; }
.art-abend { border-left-color: #8bc34a; } .art-abend small { color: #6aa329; }
.x { background: none; border: 0; color: #adb5bd; font-size: 1.4rem; line-height: 1; padding: 0 .3rem; }
.karte { background: #fff; border-radius: .6rem; padding: .7rem .9rem; margin-bottom: .6rem; display: block; color: inherit; text-decoration: none; }
.eintrag { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem; border-bottom: 1px solid #eef0f2; }
.eintrag input[type=checkbox] { width: 1.4rem; height: 1.4rem; flex: none; }
.eintrag .text { flex: 1; }
.eintrag.erledigt .text { text-decoration: line-through; color: #9aa3ab; }
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.posten-inaktiv { opacity: .5; }