/* Die Tafel: Hejmo's kitchen chalkboard. Designed at 1280x800 and scaled
   through the root font size, so every length below is in rem (16px at
   1280x800). */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/patrick-hand-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/patrick-hand-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --board: #22403a;
  --board-edge: #1a322d;
  --chalk: #f3efe4;
  --chalk-dim: rgba(243, 239, 228, .55);
  --accent: #f2d675;
  --hand: "Caveat", cursive;
  --body: "Patrick Hand", sans-serif;
}

html { font-size: min(1.25vw, 2dvh); }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--body); color: var(--chalk); line-height: 1.2; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: .2rem solid var(--accent); outline-offset: .2rem; border-radius: .4rem; }

/* the board itself */

.board {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--board);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .06), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 255, 255, .05), transparent 50%),
    radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, .04), transparent 40%);
  padding: 2.75rem 3.5rem 2.25rem;
}
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tafel {
  display: grid;
  grid-template-columns: 1.3fr 1fr .9fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "head head head"
    "termine aufgaben shop"
    "termine aufgaben shop"
    "leute leute leute"
    "foot foot foot";
  column-gap: 2.75rem;
  row-gap: 1.25rem;
}
.tafel > header { grid-area: head; }
/* Sections clip what does not fit, but the arrow before the next Termin and
   the chalk circle around an urgent one reach out past the row's left edge —
   so the Termine box reaches out as far, with the same amount of padding
   inside, and its content stays where it was. */
.termine { grid-area: termine; padding-left: 2.6rem; margin-left: -2.6rem; }
.aufgaben { grid-area: aufgaben; }
.shop { grid-area: shop; align-self: start; }
.meals { grid-area: meals; align-self: start; }
section { min-height: 0; min-width: 0; overflow: hidden; }

/* which build is on the wall: a row of its own, so nothing has to dodge it */

.version {
  grid-area: foot;
  justify-self: end;
  align-self: end;
  margin-top: -.5rem;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .03em;
  opacity: .3;
  white-space: nowrap;
  pointer-events: none;
}

/* header: date and clock */

header { display: flex; align-items: baseline; }
/* Only two things left up here since the names moved down, and the date
   belongs at the far end of the Tafel's top edge, not next to the clock. */
.tafel > header { justify-content: space-between; }
/* The clock is what the kitchen glances at; the date is read once in the
   morning. So the clock is the big thing up here and the date sits beside
   it in a quieter hand, without the chalk stroke it used to carry — the
   section titles have that now (see `section > h2`). */
h1 {
  font-family: var(--hand);
  font-weight: 500;
  font-size: 2.4rem;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: .01em;
  opacity: .85;
}
.clock { font-family: var(--hand); font-weight: 700; font-size: 5.2rem; line-height: 1; white-space: nowrap; margin-right: 1.5rem; }
.offline {
  font-family: var(--hand);
  font-size: 1.4rem;
  line-height: 1;
  align-self: center;
  margin-right: 1.5rem;
  opacity: .55;
  white-space: nowrap;
}
h2 { font-family: var(--hand); font-weight: 700; font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; }
/* Every section is set apart the same way: a thin chalk line under its
   title, a touch askew, as if drawn by hand. Before this the Einkaufsliste
   had a frame, the Essensplan a dashed line and the rest nothing — three
   ways of saying "this is a section" on one board. */
section > h2 { position: relative; padding-bottom: .4rem; margin-bottom: .7rem; }
section > h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .14rem;
  background: var(--chalk-dim);
  border-radius: .1rem;
  transform: rotate(-.25deg);
}

.people {
  grid-area: leute;
  display: flex;
  gap: .2rem;
  justify-content: center;
  align-self: end;
}
.people button {
  display: flex;
  align-items: baseline;
  font-size: 1.9rem;
  padding: .25rem .8rem;
  border-radius: .5rem;
  white-space: nowrap;
}
.people button::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  margin-right: .6rem;
  background: currentColor;
  align-self: center;
}
.people button.active { outline: .2rem solid var(--chalk-dim); }
.people .points {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--accent);
  margin-left: .6rem;
}

/* Termine */

.events li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  font-size: 1.5rem;
  line-height: 1.15;
  padding: .3rem 0;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
}
/* an imported Kalendertermin is read here and changed where it lives */
.events li.imported { cursor: default; }

.events .when { display: flex; flex-direction: column; }
.events time { font-size: 1.65rem; opacity: .85; }
.events .leave { font-size: 1.15rem; opacity: .7; }
/* `los` still ahead is the one thing on the row that can be acted on, so it
   gets the accent; once it has passed it fades back to a note */
.events .leave.ahead { font-family: var(--hand); font-weight: 700; font-size: 1.5rem; color: var(--accent); opacity: 1; }
/* what is over steps back; the day is not over, but this is */
.events li.past { opacity: .45; }

/* What is running right now is the one row somebody in the kitchen is inside
   of. It does not step back like what is over — it stands brighter than the
   rest of the board, with a pale chalk wash behind it and a chalk dot in the
   gutter where the next Termin has its arrow (a Termin cannot be both). */
.events li.running { color: #fffdf6; }
.events li.running time, .events li.running .who { opacity: 1; }
.events li.running::after {
  content: "";
  position: absolute;
  inset: -.2rem -.6rem;
  border-radius: .5rem;
  background: rgba(243, 239, 228, .09);
  pointer-events: none;
}
.events li.running::before {
  content: "•";
  position: absolute;
  left: -2.3rem;
  top: -.1rem;
  font-family: var(--hand);
  font-size: 2.6rem;
  color: var(--accent);
}
.events .title { overflow: hidden; text-overflow: ellipsis; }
.events .who { display: inline; font-size: 1.25rem; opacity: .8; margin-left: .7rem; }
.events .countdown {
  grid-column: 2 / -1;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
}
.events .detail, .events .bring {
  grid-column: 2 / -1;
  font-size: 1.1rem;
  opacity: .7;
  white-space: normal;
  line-height: 1.1;
}
.events .bring { opacity: .85; }
.events .now::before {
  content: "→";
  position: absolute;
  left: -2.4rem;
  top: .1rem;
  font-family: var(--hand);
  font-size: 2.5rem;
  color: var(--accent);
}

/* The last half hour before `los`: the Termin is circled in chalk, a closed
   stroke with the uneven corners of a hand, and the board inside the circle
   glows and fades, slowly, like breathing. A kitchen tablet is looked at
   sideways while somebody is doing something else, and only movement is
   noticed from there — a colour is not. The glow is a whole patch of the
   board changing, which is visible from the doorway, and slow enough not to
   make the Tafel restless. The arrow of the next Termin nods along. */

.events li.urgent::after {
  content: "";
  position: absolute;
  inset: -.3rem -.7rem;
  border: .18rem solid var(--accent);
  border-radius: .9rem 1.3rem .8rem 1.4rem / 1.4rem .8rem 1.2rem .9rem;
  background: rgba(242, 214, 117, .14);
  pointer-events: none;
}
.events li.urgent .leave { color: var(--accent); opacity: 1; }

@keyframes gluehen {
  0%, 100% { background-color: rgba(242, 214, 117, .04); border-color: rgba(242, 214, 117, .5); box-shadow: 0 0 0 rgba(242, 214, 117, 0); }
  50% { background-color: rgba(242, 214, 117, .24); border-color: var(--accent); box-shadow: 0 0 1.2rem rgba(242, 214, 117, .35); }
}

@keyframes nicken {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(.5rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .events li.urgent::after { animation: gluehen 2.4s ease-in-out infinite; }
  .events li.urgent.now::before { animation: nicken 1.2s ease-in-out infinite; }
}

.morgen { margin-top: .6rem; }
.morgen h2 { font-size: 2.1rem; opacity: .85; }
.morgen li { font-size: 1.4rem; padding: .25rem 0; }
.morgen time { font-size: 1.5rem; }
.morgen .leave { display: none; }
.morgen .who { font-size: 1.2rem; }

/* the rest of the week: a line a day, in the space below Morgen */
.woche { margin-top: .9rem; }
.woche .tag {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  align-items: baseline;
  font-size: 1.25rem;
  line-height: 1.2;
  padding: .12rem 0;
  white-space: nowrap;
  overflow: hidden;
}
.woche .day { opacity: .55; }
.woche .was { overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.woche .eintrag { margin-right: 1.1rem; }
.woche time { opacity: .6; margin-right: .35rem; font-size: 1.1rem; }

/* the Termine and Aufgaben headings carry the button to write a new one */

.termine > h2,
.aufgaben > h2 { display: flex; justify-content: space-between; align-items: baseline; }
.termine > h2 .add,
.aufgaben > h2 .add { font-family: var(--hand); font-weight: 700; font-size: 1.9rem; opacity: .8; white-space: nowrap; }
/* setting up a Kalender happens once; it does not get to look like "+ Termin" */
.termine > h2 .add.quiet { margin-left: auto; margin-right: 1.3rem; font-size: 1.3rem; opacity: .5; }

/* Aufgaben */

.tasks li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .6rem;
  font-size: 1.6rem;
  white-space: nowrap;
  line-height: 1.15;
  padding: .4rem 0 .4rem 2.8rem;
  position: relative;
  cursor: pointer;
}
.tasks li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .8rem;
  width: 1.5rem;
  height: 1.5rem;
  border: .2rem solid var(--chalk);
  border-radius: .3rem;
  transform: rotate(-3deg);
}
.tasks li.done { opacity: .5; }
.tasks li.done::before { background: var(--chalk); }
.tasks li.done::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: 0;
  top: 50%;
  height: .2rem;
  background: var(--chalk);
  transform: rotate(-1.5deg);
}
.tasks .title { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; }
.tasks .who { font-size: 1.2rem; opacity: .85; }
.tasks .reward { font-size: 1.1rem; opacity: .6; }

/* Wer war's? */

.ask {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(26, 50, 45, .8);
}
.ask-sheet {
  background: var(--board);
  border: .2rem solid var(--chalk-dim);
  border-radius: 1rem 1.4rem 1.1rem 1.5rem / 1.5rem 1rem 1.3rem 1.1rem;
  padding: 2rem 3rem 1.6rem;
  text-align: center;
  transform: rotate(-.5deg);
  max-width: 80vw;
}
.ask-sheet h2 { font-size: 3.2rem; margin-bottom: .3rem; }
.ask-task { font-size: 1.7rem; opacity: .85; margin-bottom: 1.4rem; }
.ask-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.ask-people button {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  padding: .6rem 1.4rem .5rem;
  border: .2rem solid currentColor;
  border-radius: .8rem 1rem .7rem 1.1rem / 1rem .7rem 1.1rem .8rem;
}
.ask-cancel { margin-top: 1.4rem; font-size: 1.3rem; opacity: .7; }

/* Einkaufen */

.shop h2 { display: flex; justify-content: space-between; align-items: baseline; }
.shop h2 small { font-size: 1.3rem; font-family: var(--body); font-weight: 400; opacity: .8; white-space: nowrap; margin-left: .75rem; }
.shop li { font-size: 1.6rem; line-height: 1.3; cursor: pointer; }
.shop li.done { opacity: .45; text-decoration: line-through; text-decoration-thickness: .15rem; }
.shop .add { display: block; margin-top: .6rem; font-family: var(--hand); font-size: 2rem; opacity: .8; }

/* Der Zettel: the sheet laid over the board to write something down */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(26, 50, 45, .8);
}
.sheet {
  width: min(92vw, 70rem);
  max-height: 90dvh;
  overflow: auto;
  background: var(--board);
  border: .2rem solid var(--chalk-dim);
  border-radius: 1rem 1.4rem 1.1rem 1.5rem / 1.5rem 1rem 1.3rem 1.1rem;
  padding: 1.6rem 2.4rem 1.8rem;
  transform: rotate(-.4deg);
}
.sheet > h2 { font-size: 3rem; margin-bottom: 1rem; }

.sheet-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6rem; }
.sheet-column { display: flex; flex-direction: column; gap: 1.1rem; }

.sheet > .field { margin-top: 1.4rem; }
.field-label { font-family: var(--hand); font-weight: 700; font-size: 1.8rem; opacity: .8; margin-bottom: .3rem; }

/* a line to write on */

.line {
  font: inherit;
  font-size: 1.7rem;
  color: var(--chalk);
  background: none;
  border: 0;
  border-bottom: .15rem dashed var(--chalk-dim);
  padding: .2rem 0 .3rem;
  width: 100%;
}
.line::placeholder { color: var(--chalk); opacity: .35; }
.line:focus { outline: 0; border-bottom-color: var(--accent); }
.line.title { font-family: var(--hand); font-weight: 700; font-size: 2.4rem; }
.add-line { display: flex; align-items: baseline; gap: .9rem; }
.dazu { font-family: var(--hand); font-weight: 700; font-size: 1.8rem; opacity: .85; white-space: nowrap; }

/* chips: everything that is tapped instead of typed */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-size: 1.35rem;
  line-height: 1;
  padding: .45rem .8rem .5rem;
  opacity: .55;
  border: .15rem solid var(--chalk-dim);
  border-radius: .7rem .9rem .6rem 1rem / .9rem .6rem 1rem .7rem;
  white-space: nowrap;
}
/* chalk does not fill, it circles: a chosen chip is gone over twice */
.chip.active {
  opacity: 1;
  border-color: currentColor;
  box-shadow: inset 0 0 0 .12rem currentColor;
  background: rgba(243, 239, 228, .14);
}
.chips.known { max-height: 24rem; overflow: auto; margin-top: .4rem; }

/* the time steppers */

.time { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.stepper { display: flex; align-items: center; gap: .5rem; }
.step {
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.8rem;
  line-height: 1;
  border: .15rem solid var(--chalk-dim);
  border-radius: 50%;
}
.value { font-family: var(--hand); font-weight: 700; font-size: 2.8rem; line-height: 1; min-width: 3.2rem; text-align: center; }
.colon { font-family: var(--hand); font-weight: 700; font-size: 2.8rem; line-height: 1; margin: 0 .4rem; }
.allday { font-family: var(--hand); font-weight: 700; font-size: 2.2rem; opacity: .8; }

/* what to do with the Zettel */

.sheet-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; margin-top: 1.6rem; }
.sheet-buttons .delete { margin-right: auto; font-size: 1.4rem; opacity: .7; }
.sheet-buttons .cancel { font-size: 1.4rem; opacity: .7; }
.sheet-buttons .save {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
  padding: .5rem 1.4rem .4rem;
  border: .2rem solid currentColor;
  border-radius: .8rem 1rem .7rem 1.1rem / 1rem .7rem 1.1rem .8rem;
}
.sheet-buttons .save:disabled { opacity: .35; cursor: default; }

/* Anmelden */

.auth-hint { font-size: 1.4rem; opacity: .8; }
.auth-error { font-size: 1.4rem; color: var(--accent); }
.auth-hint + .field .line { font-size: 3rem; letter-spacing: .6rem; text-align: center; }

/* Kalender */

.kalender-hinweis { font-size: 1.3rem; opacity: .7; max-width: 46rem; }
.kalender-liste { display: flex; flex-direction: column; gap: .5rem; margin: 1.2rem 0; }
.kalender-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .8rem;
  border-bottom: .1rem dashed var(--chalk-dim);
  padding-bottom: .5rem;
}
.kalender-name { display: grid; gap: .1rem; text-align: left; min-width: 0; }
.kalender-titel { font-family: var(--hand); font-weight: 700; font-size: 1.9rem; }
.kalender-wer { font-size: 1.2rem; opacity: .8; }
.kalender-status { font-size: 1.2rem; opacity: .65; }
.kalender-status.fehler { color: var(--accent); opacity: 1; }
.kalender-host { font-size: 1.05rem; opacity: .45; overflow: hidden; text-overflow: ellipsis; }
.kalender-weg { font-size: 2.2rem; opacity: .5; padding: 0 .6rem; line-height: 1; }
.kalender-form .line { width: 100%; }
.kalender-form input[type="url"] { font-size: 1.3rem; }

/* Essen */

.meals h2 { font-size: 2.1rem; }
.meals > div { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .4rem; align-items: baseline; padding: .15rem 0; }
.meals .day { font-size: 1.3rem; opacity: .7; }
.meals .dish { font-family: var(--hand); font-size: 1.9rem; line-height: 1; }
.meals .wish { grid-column: 2; font-size: 1.1rem; opacity: .8; }
.meals .today .dish { color: var(--accent); }

.dim { opacity: .28; }

/* Stundenplan */

.stundenplan { display: flex; flex-direction: column; gap: 1.5rem; }
.stundenplan header { justify-content: space-between; }
.stundenplan .back { font-family: var(--hand); font-size: 2rem; opacity: .85; }
.stundenplan .leer { font-family: var(--hand); font-size: 2rem; opacity: .5; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; min-height: 0; }
.plan h2 small { font-family: var(--body); font-weight: 400; font-size: 1.3rem; color: var(--chalk); opacity: .8; margin-left: .8rem; }
.plan table { border-collapse: collapse; width: 100%; font-size: 1.35rem; }
.plan th { font-family: var(--hand); font-weight: 700; font-size: 1.7rem; text-align: left; }
.plan th, .plan td { padding: .3rem .5rem; border-bottom: .1rem solid var(--chalk-dim); white-space: nowrap; }
.plan thead th { border-bottom: .2rem solid var(--chalk); }
.plan tbody th { opacity: .6; font-size: 1.3rem; }
.plan .until { opacity: .7; }
.plan .until td { border-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .task, .shop li, .events li { transition: opacity .2s; }
}

/* Hochkant: a phone, not a mounted tablet. Everything above assumes a
   landscape screen that never scrolls, sized entirely off viewport width and
   height together — on a narrow, tall screen that formula shrinks text to
   nothing. Portrait gets its own font-size (width only, there is no shortage
   of height) and the three-column grid becomes one column the page scrolls
   through instead of clipping. */
@media (orientation: portrait) {
  html { font-size: min(4.6vw, 1.3rem); }
  html, body { height: auto; overflow: visible; }
  .board {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 1.75rem 1.5rem 2rem;
  }
  .board::after { position: fixed; }

  .tafel {
    /* `minmax(0, 1fr)`, not bare `1fr`: a bare `fr` track still carries an
       automatic min-content floor from its item, so a long unbroken word or
       nowrap child (a shopping chip, an event row) blows the column past the
       phone's width regardless of how narrow the item's own min-width is. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "termine"
      "aufgaben"
      "shop"
      "leute"
      "foot";
    row-gap: 2.2rem;
  }
  section { overflow: visible; }

  header { flex-wrap: wrap; row-gap: .6rem; }

  /* the date is set at a landscape-kiosk size (3.4rem of a much smaller
     root) and does not wrap — at portrait's larger root that one line is
     wider than the phone itself. `flex-wrap` above only wraps whole flex
     items, not text inside one, so the fix has to be the font itself. */
  h1 { font-size: 1.9rem; white-space: normal; }
  .clock { font-size: 2.6rem; }
  /* same story as `.shop` above: a flex item's automatic minimum width is
     its content's, so four nowrap chips in a row force the header wide
     unless they are both allowed to shrink and free to wrap onto their own
     line. */
  .people { min-width: 0; flex-wrap: wrap; row-gap: .3rem; }

  /* nowrap made sense when every row had to fit a fixed height; here a row
     may simply take a second line */
  .events li, .events .title,
  .tasks li, .tasks .title,
  .shop li { white-space: normal; }
  .events li { grid-template-columns: 4.5rem 1fr; }
  .chips.known { max-height: 16rem; }

  .plans { grid-template-columns: 1fr; gap: 2rem; }
}

/* Hochkant on a tablet: the kitchen's own format (21.9.2026). The tablet on
   the wall stands upright most of the time, so this is not the phone fallback
   above but a fitted board of its own, and no scrolling — a kitchen board is
   looked at, not scrolled. Designed at 800x1280 and scaled through the root
   font size like landscape: 16px there, everything in rem.

   The three landscape columns become a stack of two: the Termine across the
   whole width on top, where the eye lands first, then Aufgaben beside the
   Einkaufsliste and the Essensplan, the names along the bottom edge. Both big
   rows flex and clip rather than push the names off the screen. */
@media (orientation: portrait) and (min-width: 600px) {
  html { font-size: min(2vw, 1.25dvh); }
  html, body { height: 100%; overflow: hidden; }
  .board {
    height: 100dvh;
    overflow: hidden;
    padding: 2rem 2.5rem 1.5rem;
  }
  .board::after { position: absolute; }

  .tafel {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto minmax(0, 1.4fr) auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head head"
      "termine termine"
      "aufgaben shop"
      "aufgaben shop"
      "leute leute"
      "foot foot";
    column-gap: 2.5rem;
    row-gap: 1.4rem;
    height: 100%;
  }
  section { overflow: hidden; }
  .shop, .meals { align-self: start; }

  header { flex-wrap: nowrap; row-gap: 0; }
  h1 { font-size: 2.2rem; white-space: nowrap; }
  .clock { font-size: 5rem; }

  .people { flex-wrap: nowrap; justify-content: center; gap: .6rem; }

  .events li, .events .title,
  .tasks li, .tasks .title,
  .shop li { white-space: nowrap; }
  .events li { grid-template-columns: 6rem 1fr; }
  /* Heute has half the width here; a long title takes a second line rather
     than losing its end */
  .termine > .events .title { white-space: normal; }

  /* the Termine row has the width for it: Heute on the left, Morgen and the
     rest of the week on the right */
  .termine { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto minmax(0, 1fr); column-gap: 2.5rem; }
  .termine > h2 { grid-column: 1 / -1; }
  .termine > .events { grid-column: 1; grid-row: 2; }
  .termine > .morgen { grid-column: 2; grid-row: 2; margin-top: 0; min-height: 0; overflow: hidden; }
  .morgen h2 { font-size: 2.1rem; }
  .morgen li { font-size: 1.35rem; }
  .woche .tag { font-size: 1.2rem; }

  .chips.known { max-height: 20rem; }
  .plans { grid-template-columns: 1fr 1fr; gap: 2rem; }
}