/* Kochplan – Gestaltung nach den Vorlagen von Kochen am KGB e.V. (designs/):
   Taubenblau als Grundfarbe, Pink und Grün als Akzente, Türkis als ruhige Linie, viel Weiß. */

@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --today: #fff6cc;
  --navy: #536990;
  --navy-dark: #435677;
  --ink: #2f3d58;
  --muted: #6b7794;
  --pink: #e47ea8;
  --pink-ink: #b8487a;
  --pink-soft: #fcebf2;
  /* Kiosk: gedämpftes Ocker-Orange (Rosa wirkte zu sehr wie eine Fehlermeldung) */
  --kiosk: #d98b4a;
  --kiosk-ink: #a35a1f;
  --kiosk-soft: #fbefe3;
  --kiosk-light: #f0c9a4;
  --green: #8bc048;
  --green-ink: #4f7d1d;
  --green-soft: #eef6e3;
  --teal: #9fd5dc;
  --teal-soft: #e9f6f7;
  --bg: #f3f5f9;
  --card: #ffffff;
  --line: #e2e7ef;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(47 61 88 / 6%), 0 4px 16px rgb(47 61 88 / 6%);
  --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--navy); line-height: 1.2; }
h2 { font-size: 1.5rem; margin: 0 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom));
}
/* Verwaltung: auf breiten Bildschirmen mehr Platz für drei Spalten */
main.wide { max-width: 1440px; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ---------- Kopfleiste ---------- */

.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.6rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.brand-logo { height: 40px; width: auto; }
.brand-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; }

#userbox:not([hidden]) { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.user-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
#username { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
#username .roles { font-weight: 400; opacity: .8; font-size: .85rem; }
#usergroup { font-size: .85rem; color: #d9f0c0; }

@media (max-width: 560px) {
  .brand-title { font-size: 1.2rem; }
  #username .roles { display: none; }
  .user-text { font-size: .9rem; }
}
@media (max-width: 440px) {
  .brand-title { display: none; }   /* Logo reicht, Platz für Name und Gruppe */
  .user-text { line-height: 1.25; }
}

/* ---------- Reiter ---------- */

.tabs:not([hidden]) {
  display: flex;
  justify-content: center;
  gap: .25rem;
  background: var(--navy);
  padding: 0 1rem .75rem;
}
.tabs button {
  font: 600 .95rem var(--font-head);
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
  opacity: .85;
}
.tabs button:hover { opacity: 1; background: rgb(255 255 255 / 10%); }
.tabs button.active { background: #fff; color: var(--navy); opacity: 1; }

/* ---------- Karten, Meldungen ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.msg {
  border-radius: 12px;
  padding: .7rem 1rem;
  background: var(--green-soft);
  color: var(--green-ink);
  margin: 0 0 1rem;
}
.msg.error { background: var(--pink-soft); color: var(--pink-ink); }
.msg.preview-hint { background: var(--teal-soft); color: #2f7680; }
.update-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: var(--teal-soft); color: #2f7680; }

/* ---------- Knöpfe & Formulare ---------- */

.btn {
  font: 600 .95rem var(--font-head);
  border-radius: 999px;
  border: 2px solid transparent;
  padding: .5rem 1.1rem;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--navy-dark); }
.btn-accent { background: var(--pink); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--pink-ink); }
.btn-kiosk { background: var(--kiosk-ink); color: #fff; }
.btn-kiosk:hover:not(:disabled) { background: #874816; }
.btn-green { background: var(--green); color: #fff; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #962d22; }
.btn-green:hover:not(:disabled) { background: var(--green-ink); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--navy); }
.btn-on-dark { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }
.btn-on-dark:hover { border-color: #fff; }
.btn-small { font-size: .85rem; padding: .35rem .8rem; }
.btn-block { width: 100%; }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-round {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.3rem;
}

input[type=text], input[type=email], input[type=password], input[type=date], select {
  font: inherit;
  font-size: 16px; /* verhindert Zoom auf iOS */
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: .55rem .75rem;
  min-width: 0;
}
input:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
input[type=file] { font: inherit; max-width: 100%; }

label { font-weight: 700; font-size: .9rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field input, .field select { width: 100%; }
.stack { display: flex; flex-direction: column; gap: .85rem; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row > input[type=text] { flex: 1 1 10rem; }

/* ---------- Login ---------- */

.auth-card { max-width: 420px; margin: 1.5rem auto; }
.auth-card h2 { text-align: center; }
.auth-card #reset { align-self: center; font-weight: 600; }
.auth-switch { text-align: center; margin: 0; }
.divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); margin: 1rem 0; font-size: .9rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- Installations-Hinweis ---------- */

.install-card:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-left: 6px solid var(--pink);
}
.install-icon { border-radius: 12px; flex: none; }
.install-text { flex: 1 1 12rem; display: flex; flex-direction: column; gap: .15rem; }
.install-text strong { font-family: var(--font-head); color: var(--navy); font-size: 1.1rem; }
.install-text span { color: var(--muted); font-size: .9rem; }
.install-ios { margin: .5rem 0 0; font-size: .95rem; }
.install-actions { display: flex; align-items: center; gap: .9rem; }

/* ---------- Monatsnavigation & Status ---------- */

.monthnav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .25rem 0 1rem; }
.monthnav h2 { margin: 0; text-align: center; font-size: 1.6rem; }

.status {
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.status strong { font-family: var(--font-head); font-size: 1.05rem; }
.status.open { background: var(--green-soft); color: var(--green-ink); }
.status.waiting { background: var(--kiosk-soft); color: var(--kiosk-ink); }
.status .row { color: var(--ink); }

/* Kochgruppen-Übersicht */
.groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.groups li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: var(--bg);
}
.groups .name { font-weight: 800; }
.groups .btn { margin-left: auto; }

.pill {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}
.pill.green { background: var(--green-soft); color: var(--green-ink); }
.pill.pink { background: var(--pink-soft); color: var(--pink-ink); }
.pill.kiosk { background: var(--kiosk-soft); color: var(--kiosk-ink); }
.pill.teal { background: var(--teal-soft); color: #2f7680; }
.pill.grey { background: #e9edf3; color: var(--muted); }

/* ---------- Tage im Plan ---------- */

.week {
  font: 600 1.05rem var(--font-head);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.5rem 0 .5rem;
}

.day {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: .9rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .85rem 1rem .85rem .85rem;
  margin-bottom: .6rem;
  border-left: 6px solid var(--line);
}
.day-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 12px;
  height: 3.4rem;
  font-family: var(--font-head);
  color: var(--navy);
}
.day-date .wd { font-size: .8rem; font-weight: 500; }
.day-date .dn { font-size: 1.35rem; font-weight: 600; line-height: 1; }
.day-body { min-width: 0; display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
.day-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.day-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.day-meta { color: var(--muted); font-size: .9rem; }
.day-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .2rem; }
.day-actions form { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
.day-actions form input[type=text] { flex: 1 1 11rem; }
.day-actions form select { flex: 0 1 12rem; }

.people { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .9rem; }
.people b { color: var(--muted); font-weight: 700; }
.my-task { color: var(--green-ink); font-weight: 700; }
.kiosk-missing { font-size: .85rem; color: var(--kiosk-ink); margin-top: .25rem; }
.x { border: 0; background: none; color: var(--kiosk-ink); cursor: pointer; padding: 0 .2rem; font-size: 1rem; }

.day.dish { border-left-color: var(--green); }
.day.broetchen { border-left-color: var(--teal); }
.day.kiosk { border-left-color: var(--kiosk); }
.day.kiosk .day-title { color: var(--kiosk-ink); }
.day.kiosk-open { border-left-color: var(--kiosk-light); }
.day.open { border-left-color: var(--line); }
.day.open .day-title { color: var(--muted); font-weight: 500; }
.day.holiday, .day.broetchen.cancelled { background: transparent; box-shadow: none; border: 2px dashed var(--line); border-left-width: 6px; }
.day.holiday .day-title, .day.broetchen.cancelled .day-title { color: var(--muted); font-weight: 500; }
.day.holiday .day-date, .day.broetchen.cancelled .day-date { background: #e9edf3; color: var(--muted); }

/* ---------- Profilbilder ---------- */

.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgb(255 255 255 / 70%); }
.avatar.big { width: 96px; height: 96px; border: 3px solid var(--teal-soft); }
.avatar.medium { width: 40px; height: 40px; border: 0; }
.avatar-empty { display: inline-block; background: #d5dbe3; }

/* ---------- Verwaltung ---------- */

/* Drei Spalten ab 1100 px, darunter alles untereinander */
.admin-grid { display: grid; gap: 0 1rem; }
.admin-col { min-width: 0; }
@media (min-width: 1100px) {
  .admin-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}

/* Benutzer als Akkordeon: zugeklappt nur Bild, Name und Rollen */
.admin-user { border-top: 3px solid var(--line); padding: .75rem 0; }
.admin-user:last-of-type { border-bottom: 3px solid var(--line); }
.admin-user summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; }
.admin-user summary::-webkit-details-marker { display: none; }
.admin-user summary::after { content: '▾'; margin-left: auto; font-size: 1.2rem; color: var(--muted); transition: transform .2s; }
.admin-user:not([open]) summary::after { transform: rotate(-90deg); }
.admin-user-summary { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.admin-user-summary .pill { margin-top: .3rem; white-space: normal; }
.admin-user-form { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; }
.admin-user-form input[name=displayName] { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--teal-soft); }

.list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.past-holidays { margin: -.5rem 0 1rem; }
.past-holidays summary { cursor: pointer; margin-bottom: .5rem; }
.list form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; }
.list form input[type=text] { flex: 1 1 10rem; }

.reset-link { width: 100%; margin-top: .5rem; }

/* Aufklappbare Kochgruppen-Übersicht */
.group-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font: 600 1.15rem var(--font-head);
  color: var(--navy);
}
.group-card summary::-webkit-details-marker { display: none; }
.group-card summary::after { content: '▾'; color: var(--muted); transition: transform .2s; }
.group-card:not([open]) summary::after { transform: rotate(-90deg); }
.group-card summary > span:first-child { flex: 1; }
.group-card .groups { margin-top: .9rem; }

/* Name und Gruppe in der Kopfleiste einzeilig halten */
#userbox:not([hidden]) { flex: 1; justify-content: flex-end; }
.user-text { overflow: hidden; }
#username > span, #usergroup { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 440px) {
  .topbar { gap: .6rem; }
  .brand-logo { height: 34px; }
  #usergroup { font-size: .78rem; }
  #logout { font-size: .78rem; padding: .3rem .6rem; }
}

/* Eigene Kochgruppe hervorheben */
.groups li.is-mine { background: var(--green-soft); }
.group-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.groups .group-actions .btn { margin-left: 0; }

/* Vorschläge beim Eintragen */
.suggest { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; width: 100%; }
.suggest:empty { display: none; }
.suggest-label { font-size: .8rem; color: var(--muted); font-weight: 700; margin-right: .15rem; }
.suggest-chip {
  font: 700 .85rem var(--font-body);
  color: var(--green-ink);
  background: var(--green-soft);
  border: 1.5px solid #cfe5b3;
  border-radius: 999px;
  padding: .25rem .7rem;
  cursor: pointer;
}
.suggest-chip:hover { border-color: var(--green); }

/* Kurzes Aufleuchten nach "Jetzt eintragen" */
.day.flash { animation: day-flash 1.8s ease-out; }
@keyframes day-flash {
  0%, 50% { box-shadow: 0 0 0 4px var(--green), var(--shadow); }
  100% { box-shadow: var(--shadow); }
}

/* ---------- Anmelde-Icon & Zurück-Link ---------- */
.icon-btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  border: 2px solid rgb(255 255 255 / 45%);
}
.icon-btn:hover { border-color: #fff; background: rgb(255 255 255 / 10%); }
.back-link { display: inline-block; margin-bottom: .75rem; color: var(--navy); font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ---------- Öffentlicher Plan: nur Tag und Gericht ---------- */
.pub-plan { padding: .4rem 0; overflow: hidden; }
.pub-head, .pub-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr; /* längstes Datum "Mo 30.11." ist 78 px breit */
  gap: .75rem;
  padding: .65rem 1.1rem;
  align-items: baseline;
}
.pub-head {
  font: 600 .8rem var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}
.pub-week {
  padding: .9rem 1.1rem .3rem;
  font: 600 .72rem var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.pub-row { border-top: 1px solid var(--line); min-height: 2.6rem; position: relative; }
/* Platz für "mag ich" nur in der letzten Zeile des Gerichts: unsichtbarer Platzhalter am Ende des Textes.
   Obere Zeilen laufen bis ganz rechts; passt er nicht mehr in die letzte Zeile, rutscht er in eine eigene. */
.pub-row.has-like .pub-text::after { content: ''; display: inline-block; width: 110px; }
.pub-week + .pub-row { border-top: 0; }
/* Wochen voneinander abtrennen: 10 px Streifen in der Seitenfarbe unter der letzten Zeile jeder Woche
   (nicht nur am Freitag – der kann Ferientag sein, und am Monatsende endet die Woche früher) */
.pub-row:has(+ .pub-week) { border-bottom: 10px solid var(--bg); }
.pub-date { font-family: var(--font-head); color: var(--navy); white-space: nowrap; font-size: 18px; }
.pub-date b { display: inline-block; width: 1.9rem; font-weight: 600; }
.pub-text { font-weight: 700; overflow-wrap: anywhere; font-size: 18px; }
/* "mag ich": rechts unten in der Zeile, unten bündig mit der letzten Zeile des Gerichts */
.like-btn {
  position: absolute;
  right: .6rem;
  bottom: calc(.65rem + 1px);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font: 600 14px var(--font-body);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: .15rem .5rem;
  cursor: pointer;
}
.like-btn:hover { background: var(--bg); }
.like-btn.liked { color: var(--green-ink); }
.like-btn.liked svg { fill: currentColor; }
.like-count { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; }
.pub-row.holiday, .pub-row.cancelled { background: var(--bg); }
.pub-row.holiday .pub-text, .pub-row.cancelled .pub-text { color: var(--muted); font-weight: 500; font-style: italic; }
.pub-row.broetchen .pub-text { color: #2f7680; }
.pub-row.kiosk .pub-text { color: var(--kiosk-ink); }
@media (max-width: 440px) {
  .pub-head, .pub-row { padding-inline: .9rem; }
}

/* Aufzählungen in Status- und Termin-Boxen */
.status-list { margin: .1rem 0 0; padding-left: 1.3rem; }
.status-list li { margin: .1rem 0; }
.status-list li::marker { color: currentColor; }

/* Freie Termine der eigenen Gruppe */
.free-dates { border-left: 6px solid var(--green); }
.free-dates-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.free-dates h3 { margin: 0; }
.free-dates p { margin: .3rem 0 .5rem; }
.free-dates .status-list li::marker { color: var(--green); }

/* ---------- Bestätigungsdialog ---------- */

dialog.confirm {
  max-width: min(32rem, calc(100vw - 2rem));
  border: 0;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
}
dialog.confirm::backdrop { background: rgb(20 30 50 / 45%); }
dialog.confirm h2 { margin: 0 0 .75rem; }
dialog.confirm ul { padding-left: 1.2rem; margin: 0 0 .75rem; }
dialog.confirm li { margin-bottom: .5rem; }
.confirm-actions { justify-content: flex-end; margin-top: 1rem; }

/* ---------- Heute und eigene Termine ---------- */

/* Heute: hellgelb hinterlegt */
.day.today, .pub-row.today { background: var(--today); }
.my-dates h3 { margin-top: 0; }
.my-dates p { margin: 0 0 .5rem; }
.my-dates .status-list { margin: 0 0 .5rem; }
.my-dates h4 { margin: .9rem 0 .35rem; }

/* Offline-Hinweis oben in der Leiste */
.offline-badge:not([hidden]) {
  margin-left: auto;
  background: rgb(255 255 255 / 18%);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .2rem .7rem;
}

/* Ladeanzeige */
.loading { display: flex; align-items: center; gap: .6rem; color: var(--muted); padding: 1rem .25rem; }
.loading-hint { display: flex; align-items: center; gap: .6rem; }
.spinner {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Kiosk-Stand und Kochgruppen unter den Tagen (nur Brötchen-Rollen) */
.plan-extras { margin-top: 1.5rem; }

/* Verwaltung: Meine Benachrichtigungen */
.admin-notify li { justify-content: space-between; }
.notify-label { display: flex; flex-direction: column; flex: 1 1 12rem; }

/* „Wer bist du?“ gesendet */
.intro-sent { color: var(--green-ink); font-weight: 600; }
#intro-form { margin-bottom: 1rem; }

/* Begrüßung im ersten Monat des neuen Kochplans */
.start-banner { background: var(--green-soft); border: 2px solid var(--green); text-align: center; }
.start-banner h2 { margin: 0 0 .4rem; color: var(--green-ink); }
.start-banner p { margin: .2rem 0; }
.start-banner .sign { font-weight: 700; color: var(--green-ink); margin-top: .6rem; }
.btn-round:disabled { opacity: .35; cursor: default; }

/* Abgesagter Brötchenfreitag (Kartenrahmen wie Ferien, siehe .day.holiday) */
.broetchen-cancelled { font-size: .9rem; color: var(--muted); font-style: italic; }
.broetchen-cancel-form { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; padding: .7rem; border-radius: 12px; background: var(--bg); }
.broetchen-cancel-form p { margin: 0; width: 100%; }
.broetchen-cancel-form input[type=text] { flex: 1 1 14rem; }