*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gruen:      #2d6a2d;
    --gruen-hell: #4a9e4a;
    --gruen-bg:   #f0f7f0;
    --text:       #1a1a1a;
    --text-leise: #666;
    --rand:       #dde8dd;
    --weiss:      #ffffff;
    --radius:     10px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gruen-bg);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-size: 15px;
}

/* ── Header ── */
header {
    background: var(--gruen);
    color: var(--weiss);
    text-align: center;
    padding: calc(env(safe-area-inset-top, 0px) + .9rem) 1rem .8rem;
}
header h1   { font-size: 1.3rem; font-weight: 700; }
.schule     { font-size: .8rem; opacity: .75; margin-top: .15rem; }

/* ── Main ── */
main {
    flex: 1;
    padding: 1rem;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* ── Wochen-Block ── */
.woche-block h2 {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gruen);
    margin-bottom: .5rem;
    padding-left: .2rem;
}

/* ── Tabelle ── */
.plan-tabelle {
    background: var(--weiss);
    border-radius: var(--radius);
    border: 1px solid var(--rand);
    overflow: hidden;
}

.plan-zeile {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    border-bottom: 1px solid var(--rand);
    min-height: 2.8rem;
}
.plan-zeile:last-child { border-bottom: none; }
.plan-zeile.heute { background: #edf6ed; }

.tag-zelle {
    padding: .55rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gruen);
    border-right: 1px solid var(--rand);
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.heute-dot {
    width: 6px; height: 6px;
    background: var(--gruen);
    border-radius: 50%;
    flex-shrink: 0;
}

.gericht-zelle {
    padding: .55rem .75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
}
.gericht-name {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
}
.gericht-beilage {
    font-size: .75rem;
    color: var(--text-leise);
}
.geschlossen {
    font-size: .82rem;
    color: #999;
    font-style: italic;
}
.gericht-buffet {
    font-size: .72rem;
    color: var(--gruen-hell);
    margin-top: .1rem;
}
.gericht-buffet--leer {
    color: #bbb;
}

/* ── Lade / Leer ── */
.lade-anzeige {
    text-align: center;
    color: var(--text-leise);
    padding: 3rem 0;
}

/* ── Footer ── */
footer {
    text-align: center;
    padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}
.btn-refresh {
    background: none;
    border: 1px solid var(--rand);
    border-radius: 8px;
    color: var(--text-leise);
    font-size: .75rem;
    padding: .3rem .9rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.btn-refresh:hover    { color: var(--gruen); border-color: var(--gruen); }
.btn-refresh:disabled { opacity: .4; cursor: not-allowed; }
.refresh-status { font-size: .72rem; color: var(--text-leise); min-height: .9rem; }
.refresh-status.ok     { color: var(--gruen); }
.refresh-status.fehler { color: #c0392b; }
.quelle { font-size: .7rem; color: #aaa; }
.quelle a { color: #aaa; text-decoration: none; }