/* css/display.css — Öffentliche Infowand */

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff;
  padding:.8rem 1.2rem; z-index:200; border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid #1f3a2c; outline-offset:3px; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  padding:1rem 1.4rem;
  background:rgba(239,233,222,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--color-border);
}
.brand{ display:flex; align-items:center; gap:.8rem; min-width:0; }
.brand-mark{
  display:grid; place-items:center;
  width:48px; height:48px; flex:none;
  background:var(--color-primary); color:#f4efe3;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  border-radius:var(--radius-s);
  transform:rotate(-3deg);
}
.eyebrow{
  margin:0 0 .1rem; font-family:var(--font-mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--color-ink-soft);
}
.brand h1{ font-size:1.4rem; font-weight:600; white-space:nowrap; }

.topbar-controls{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }

.mode-toggle{
  display:flex; border:1px solid var(--color-border); border-radius:999px;
  overflow:hidden; background:var(--color-surface);
}
.mode-toggle span, .mode-toggle a{
  border:0; background:transparent; padding:.6rem .9rem; min-height:var(--touch-min);
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-ink-soft);
  display:flex; align-items:center; gap:.4rem;
  text-decoration:none;
  border-right:1px solid var(--color-border);
}
.mode-toggle span:last-child, .mode-toggle a:last-child{ border-right:0; }
.mode-toggle a:hover{ background:var(--color-aktivitaeten-light); color:var(--color-aktivitaeten); }
.mode-toggle .active{ background:var(--color-aktivitaeten); color:#fff; }

.fontsize-control{
  display:flex; border:1px solid var(--color-border); border-radius:999px;
  overflow:hidden; background:var(--color-surface);
}
.fontsize-control button{
  border:0; background:transparent; padding:.6rem .9rem; min-height:var(--touch-min);
  font-family:var(--font-mono); font-size:.9rem; color:var(--color-ink-soft);
  border-right:1px solid var(--color-border);
}
.fontsize-control button:last-child{ border-right:0; }
.fontsize-control button[aria-pressed="true"]{ background:var(--color-primary); color:#fff; }

.datetime{ text-align:right; line-height:1.25; }
.datetime .weekday{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem;
  color:var(--color-ink);
}
.datetime .fulldate{
  font-family:var(--font-mono); font-size:.78rem; color:var(--color-ink-soft);
}
.datetime .clock{
  font-family:var(--font-mono); font-size:.78rem; color:var(--color-ink-soft);
}

main{ max-width:1100px; margin:0 auto; padding:1.6rem 1.4rem 4rem; }

/* ---------- Bekanntmachung banner ---------- */
.banner{
  display:none;
  align-items:flex-start; gap:1rem;
  background:var(--color-primary); color:#f4efe3;
  border-radius:var(--radius-l); box-shadow:var(--shadow-2);
  padding:1.3rem 1.5rem; margin-bottom:1.6rem;
}
.banner.visible{ display:flex; }
.banner.urgent{ background:var(--color-urgent); }
.banner-icon{ font-size:1.8rem; line-height:1; flex:none; }
.banner-body .eyebrow{ color:#f4efe3; opacity:.75; }
.banner-body p{ margin:.2rem 0 0; font-size:1.15rem; font-weight:500; line-height:1.5; white-space:pre-wrap; }
.banner-meta{ margin-top:.5rem; font-family:var(--font-mono); font-size:.75rem; opacity:.8; }

/* ---------- Cards ---------- */
.board{
  display:grid; gap:1.4rem; grid-template-columns:1fr;
}
@media(min-width:800px){ .board{ grid-template-columns:1fr 1fr; } }

.card{
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-l); box-shadow:var(--shadow-1);
  padding:1.5rem 1.6rem 1.8rem;
}
.card-head{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.card-icon{
  width:48px; height:48px; border-radius:var(--radius-s); display:grid; place-items:center;
  font-size:1.5rem; flex:none;
}
.card--speiseplan .card-icon{ background:var(--color-speiseplan-light); color:var(--color-speiseplan); }
.card--aktivitaeten .card-icon{ background:var(--color-aktivitaeten-light); color:var(--color-aktivitaeten); }
.card-head h2{ font-size:1.3rem; font-weight:600; }
.card-head .eyebrow{ margin:0; }

.empty-hint{ color:var(--color-ink-soft); font-size:1rem; font-style:italic; margin:0; }

/* Speiseplan */
.meal-block + .meal-block{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px dashed var(--color-border); }
.meal-heading{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  display:flex; align-items:center; gap:.5rem; margin:0 0 .7rem;
}
.menu-item{ margin-bottom:.9rem; }
.menu-item:last-child{ margin-bottom:0; }
.menu-item .menu-label{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--color-speiseplan); font-weight:700;
}
.menu-item .menu-name{ font-size:1.08rem; font-weight:600; margin:.15rem 0 0; }
.menu-item .menu-beilage{ font-size:.95rem; color:var(--color-ink-soft); margin:.1rem 0 0; }
.allergen-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.allergen-tags span{
  font-family:var(--font-mono); font-size:.72rem; padding:.25rem .6rem;
  border-radius:999px; background:var(--color-speiseplan-light); color:var(--color-speiseplan);
}

/* Aktivitäten */
.aktivitaeten-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.aktivitaeten-liste li{
  display:flex; align-items:center; gap:1rem; padding:.85rem 1rem;
  background:var(--color-aktivitaeten-light); border-radius:var(--radius-s);
}
.aktivitaeten-liste time{ font-family:var(--font-mono); font-weight:700; font-size:1.05rem; color:var(--color-aktivitaeten); flex:none; }
.aktivitaeten-liste .titel{ font-weight:600; flex:1; min-width:0; font-size:1.02rem; }
.aktivitaeten-liste .ort{ color:var(--color-ink-soft); font-size:.9rem; }