/* Medienzeit – Wochenkonto
   Farben aus der Papiervorlage: Beere für Aufgaben, Himmelblau für Belohnung. */

:root {
  --ink: #141a2e;
  --ink-soft: #5d6485;
  --paper: #eef1f8;
  --card: #ffffff;
  --line: #dde2ef;
  --berry: #66743a;
  --berry-soft: #eef1e5;
  --sky: #2f6fd0;
  --sky-soft: #e4edfb;
  --leaf: #12915f;
  --leaf-soft: #e0f3ea;
  --sun: #e08b1a;
  --sun-soft: #fdf0dc;
  --coral: #d96b5f;
  --teal: #168c8c;
  --indigo: #5967c9;
  --slate: #6f7785;
  --lime: #79a93b;
  --radius: 14px;
  --shadow: 0 1px 0 var(--line), 0 10px 24px -20px rgba(20, 26, 46, .55);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  padding: 0 0 max(28px, env(safe-area-inset-bottom));
}

h1, h2 { margin: 0; letter-spacing: -.015em; }

button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Anmeldung */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(360px, 100%);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  text-align: center;
}

.login-card h1 { font-size: 30px; font-weight: 800; }
.login-card p { color: var(--ink-soft); margin: 6px 0 20px; }

.login-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  text-align: center;
  letter-spacing: .4em;
  margin-bottom: 12px;
}

.login-error { color: var(--berry); margin: 12px 0 0; }

/* ------------------------------------------------------------------ Gerüst */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 10px;
  max-width: 980px;
  margin: 0 auto;
}

.wordmark { font-size: 20px; font-weight: 800; }

.weeknav { display: flex; align-items: center; gap: 4px; }

.weeknav-btn, .weeknav-label {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  cursor: pointer;
  padding: 6px 12px;
  line-height: 1.2;
}

.weeknav-btn { width: 34px; padding: 6px 0; font-size: 18px; }
.weeknav-label { font-weight: 600; font-size: 14px; }

.kidbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 16px 12px;
  max-width: 980px;
  margin: 0 auto;
}

.kidbar::-webkit-scrollbar { display: none; }

.kidtab {
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.kidtab small {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
}

.kidtab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.kidtab[aria-selected="true"] small { color: #b9c3e4; }

.stack {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.stack > * { min-width: 0; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.card-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.hint { color: var(--ink-soft); font-size: 13px; margin: 12px 0 0; }

/* -------------------------------------------------------------------- Hero */

.hero {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  border-top: 5px solid var(--berry);
}

.hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14px;
}

.hero-chip {
  background: var(--sun-soft);
  color: #8a5310;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.hero-number {
  margin: 2px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero-number > span:first-child {
  font-size: clamp(56px, 18vw, 76px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.hero-unit { font-size: 15px; font-weight: 600; color: var(--ink-soft); }

.meter {
  display: flex;
  height: 12px;
  border-radius: 999px;
  background: var(--leaf-soft);
  overflow: hidden;
}

.meter-used { background: var(--berry); }
.meter-savings { background: var(--sun); }
.meter-used, .meter-savings { transition: width .25s ease; }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 0;
}

.hero-facts div { border-left: 2px solid var(--line); padding-left: 10px; }
.hero-facts dt { font-size: 12px; color: var(--ink-soft); }
.hero-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hero-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.hero-actions-label { font-size: 13px; color: var(--ink-soft); }

.chipset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.chip {
  border: 1.5px solid var(--line);
  background: #fbfcfe;
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-width: 56px;
}

.chip:hover { border-color: var(--berry); }
.chip-undo { color: var(--ink-soft); }

/* --------------------------------------------------------------- Aufgaben */

.tasklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.task {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--line);
  background: #fbfcfe;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.task:disabled { opacity: .55; cursor: not-allowed; }

.task-box {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  color: transparent;
  font-weight: 800;
}

.task-name { font-weight: 600; }
.task-detail { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 400; }

.task-minutes {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--sky-soft);
  color: var(--sky);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
}

.task[aria-pressed="true"] {
  border-color: var(--leaf);
  background: var(--leaf-soft);
}

.task[aria-pressed="true"] .task-box {
  border-color: var(--leaf);
  background: var(--leaf);
  color: #fff;
}

.task[aria-pressed="true"] .task-minutes { background: #fff; color: var(--leaf); }

/* ---------------------------------------------------------------- Tabelle */

.table-scroll { overflow-x: auto; margin: 0 -4px; }

.week { border-collapse: collapse; width: 100%; min-width: 640px; }

.week th, .week td {
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.week thead th {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
  padding-bottom: 10px;
}

.week thead th span { display: block; font-size: 16px; }

.week th:first-child, .week td:first-child { text-align: left; padding-left: 4px; }

.week .daycell { font-weight: 600; white-space: nowrap; }
.week .daycell small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12px; }

.week tr.is-today td { background: var(--berry-soft); }
.week tr.is-future { color: var(--ink-soft); }

.week tfoot td {
  font-weight: 800;
  border-bottom: none;
  border-top: 2px solid var(--line);
  padding-top: 12px;
}

.tickbox {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: transparent;
  font-weight: 800;
  line-height: 1;
}

.tickbox[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.tickbox:disabled { cursor: not-allowed; opacity: .5; }

.usedinput {
  width: 62px;
  padding: 6px 4px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  font-variant-numeric: tabular-nums;
}

.usedinput:disabled { opacity: .5; }

.balance { font-weight: 700; }
.balance-zero { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Verlauf */

.history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.history-summary { margin: 0 0 12px; color: var(--ink-soft); font-size: 13px; }

.chart { width: 100%; height: 210px; display: block; overflow: visible; touch-action: manipulation; }
.chart .bar { cursor: pointer; }
.chart .bar:hover rect { opacity: .82; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--ink-soft); font-size: 11px; font-family: var(--sans); }
.chart .tick { fill: var(--ink-soft); font-size: 11px; font-family: var(--sans); }
.chart .tick-active { fill: var(--ink); font-weight: 700; }
.chart .marker { fill: var(--berry); font-size: 11px; font-family: var(--sans); font-weight: 700; }

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.legend li { display: flex; align-items: center; gap: 6px; }

.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dot-used { background: var(--berry); }
.dot-expired { background: var(--sun); }
.dot-open { background: var(--leaf); }

.chart-empty { color: var(--ink-soft); font-size: 14px; margin: 6px 0 0; }

/* ----------------------------------------------------------------- Regeln */

.rules ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rules li { color: var(--ink-soft); }

/* ----------------------------------------------------------- Fuß & Dialoge */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 6px 0 4px;
}

.linkbtn {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: 14px;
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary { background: var(--berry); color: #fff; width: 100%; }
.btn-ghost { background: var(--paper); color: var(--ink); width: 100%; margin-top: 14px; }

dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 60px -24px rgba(20, 26, 46, .6);
}

dialog::backdrop { background: rgba(20, 26, 46, .45); }

.dialog-card { padding: 22px; }
.dialog-card h2 { font-size: 18px; margin-bottom: 14px; }

.kidlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }

.kidlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

.kidlist input {
  flex: 1;
  border: none;
  background: none;
  font-weight: 600;
  min-width: 0;
}

.kidlist button {
  border: none;
  background: none;
  color: var(--berry);
  cursor: pointer;
  font-size: 13px;
}

.dialog-row { display: flex; gap: 8px; }

.dialog-row input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}

.dialog-row .btn { width: auto; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  box-shadow: 0 12px 30px -12px rgba(20, 26, 46, .8);
  z-index: 10;
}

.toast[data-kind="error"] { background: var(--berry); }

/* ------------------------------------------------------------- Breit/Print */

@media (min-width: 760px) {
  .stack { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .hero, .card-wide, .footer { grid-column: 1 / -1; }
  .hero { grid-row: 1; }
  .card-tasks { grid-column: 1; grid-row: 2; }
  .rules { grid-column: 2; grid-row: 2; }
  .card-wide { grid-row: 3; }
  .card-history { grid-column: 1 / -1; grid-row: 4; }
  .footer { grid-row: 5; }
  .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px 28px; align-items: start; }
  .hero-head, .hero-facts { grid-column: 2; }
  .hero-head { align-self: start; }
  .hero-number, .meter { grid-column: 1; }
  .hero-actions { grid-column: 1 / -1; }
  .week { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  body { background: #fff; }
  .topbar, .kidbar, .hero-actions, .footer, .toast, .tasklist, .hint { display: none !important; }
  .card, .hero { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .stack { display: block; }
  .card { margin-bottom: 12px; }
}

/* ================================================================ Familien-Dashboard V1 */
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.family-topbar { max-width: 1240px; padding-top: 24px; }
.family-topbar .wordmark { font-size: clamp(24px, 3vw, 34px); }
.datebox { display: grid; text-align: right; gap: 2px; color: var(--ink-soft); font-size: 13px; }
.datebox strong { color: var(--ink); font-size: 16px; }
.mainnav { max-width: 1240px; margin: 0 auto; padding: 2px 16px 16px; display: flex; gap: 8px; }
.mainnav-btn { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.mainnav-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.dashboard-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px 36px; }
.welcome-card { background: var(--ink); color: #fff; border-radius: 18px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.welcome-card .eyebrow, .welcome-card p { color: #b9c3e4; }
.welcome-card h2 { font-size: clamp(25px, 3vw, 38px); margin: 3px 0 4px; }
.welcome-card p { margin: 0; }
.family-status { white-space: nowrap; font-size: 13px; color: #d8def0; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4fd08a; box-shadow: 0 0 0 4px rgba(79,208,138,.15); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-height: 260px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-card-head h2 { font-size: 18px; }
.dash-badge { font-size: 11px; font-weight: 800; color: var(--ink-soft); background: var(--paper); border-radius: 999px; padding: 4px 9px; }
.event-list { display: grid; gap: 9px; }
.event-item { display: grid; grid-template-columns: 36px 58px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.event-item:last-child { border-bottom: 0; }
.event-icon { font-size: 22px; text-align: center; }
.event-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.event-title { font-weight: 700; }
.event-person { color: var(--ink-soft); font-size: 12px; }
.card-footnote { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; color: var(--ink-soft); font-size: 11px; }
.shopping-list, .notes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.shopping-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 9px; }
.shopping-list li::before { content: '☐'; font-size: 18px; color: var(--ink-soft); }
.timetable-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.timetable-kid { border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.timetable-kid-name { font-weight: 800; margin-bottom: 8px; }
.lesson { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.lesson-no { width: 22px; color: var(--ink-soft); font-size: 12px; }
.notes-list li { padding: 10px 12px; background: var(--sun-soft); border-radius: 9px; font-size: 14px; }
.weather-card { min-height: 360px; }
.weather-frame-wrap { height: 265px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f7f9fc; }
.weather-frame { width: 100%; height: 100%; border: 0; }
#weather-frame { width: 100%; height: 100%; border: 0; display: block; }
.weather-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.quick-card { min-height: 105px; border: 0; text-align: left; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-content: center; }
.quick-card > span { grid-row: span 2; font-size: 25px; }
.quick-card strong { font-size: 15px; }
.quick-card small { color: var(--ink-soft); font-size: 12px; }
.quick-card.coming { cursor: default; opacity: .7; }
.media-wrap { max-width: 1240px; margin: 0 auto; padding-bottom: 36px; }
.media-header { max-width: 980px; margin: 0 auto; padding: 0 16px 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.back-dashboard { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 13px; font-weight: 700; cursor: pointer; }
.media-wrap .stack { max-width: 980px; }
@media (max-width: 760px) {
  .welcome-card { align-items: flex-start; flex-direction: column; }
  .family-status { white-space: normal; }
  .dashboard-grid, .quick-row { grid-template-columns: 1fr; }
  .dash-card { min-height: 0; }
  .event-item { grid-template-columns: 30px 52px 1fr; }
  .media-header { align-items: flex-start; flex-direction: column; }
}
@media (min-width: 1000px) {
  .calendar-card { min-height: 310px; }
  .shopping-card { min-height: 310px; }
}
@media print {
  .mainnav, .dashboard-wrap, .media-header, .kidbar, .footer, .hero-actions { display: none !important; }
  .media-wrap { display: block !important; }
}

/* ------------------------------ Familien-Dashboard V2 / Kalender */
.calendar-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.small-link{border:0;background:none;padding:2px 0;color:var(--berry);font:inherit;font-weight:700;cursor:pointer}
.small-link:hover{text-decoration:underline}
.calendar-dot-berry,.dot-berry{background:var(--berry)!important}
.calendar-dot-sky,.dot-sky{background:var(--sky)!important}
.calendar-dot-leaf,.dot-leaf{background:var(--leaf)!important}
.calendar-dot-sun,.dot-sun{background:var(--sun)!important}
.calendar-dot-plum,.dot-plum{background:var(--plum)!important}
.calendar-dot-berry,.calendar-dot-sky,.calendar-dot-leaf,.calendar-dot-sun,.calendar-dot-plum{border-radius:50%}
.calendar-dialog{max-width:760px}
.dialog-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.dialog-title-row h2{margin-bottom:4px}
.icon-close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:var(--ink-soft)}
.calendar-sources{display:grid;gap:8px;margin:18px 0}
.calendar-source-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.source-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.source-main{min-width:0;display:grid;gap:2px;flex:1}.source-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-main small{color:var(--ink-soft)}
.source-ok{color:var(--leaf)}.source-error{color:#a34a4a;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-actions{display:flex;align-items:center;gap:12px}
.calendar-add-box{border-top:1px solid var(--line);padding-top:18px}.calendar-add-box h3{margin:0 0 12px}
.calendar-add-box .dialog-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-bottom:10px}.calendar-add-box .dialog-row:last-of-type{grid-template-columns:180px 1fr}
.calendar-add-box input,.calendar-add-box select{width:100%;min-width:0}
.dialog-actions{display:flex;justify-content:flex-end;margin-top:18px}
@media (max-width:620px){.calendar-add-box .dialog-row,.calendar-add-box .dialog-row:last-of-type{grid-template-columns:1fr}.source-actions{gap:8px}.calendar-dialog{padding:18px}.calendar-source-row{align-items:flex-start}}

/* Stundenplan V4 */
.timetable-dialog{max-width:980px;width:min(96vw,980px)}
.timetable-editor-head{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}
.timetable-editor-head select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:white}
.tt-entries{display:grid;gap:8px}
.tt-row{display:grid;grid-template-columns:80px 1.3fr 1fr .65fr auto auto;gap:8px;align-items:center}
.tt-row input{min-width:0;padding:9px;border:1px solid var(--line);border-radius:9px;background:white}
@media(max-width:760px){.tt-row{grid-template-columns:65px 1fr 1fr;}.tt-row .tt-room{grid-column:2}.tt-row .tt-save,.tt-row .tt-delete{grid-column:auto}.timetable-editor-head{grid-template-columns:1fr}}

.caldav-results{margin-top:12px;border-top:1px solid var(--border,#ddd);padding-top:10px}.caldav-choice{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border:1px solid #ddd;border-radius:10px;margin:7px 0;cursor:pointer}.caldav-choice input{margin-top:3px}.caldav-choice span{display:flex;flex-direction:column;gap:2px}.caldav-choice small{opacity:.7}.source-main small{display:block}.source-actions{display:flex;gap:8px;align-items:center}

/* V5.1 Stundenplan: großzügiger Editor ohne Raumfeld */
.timetable-dialog{width:min(94vw,1100px);max-width:1100px;max-height:90vh;overflow:auto;padding:clamp(20px,3vw,36px)}
.tt-row{grid-template-columns:90px minmax(180px,1.4fr) minmax(160px,1fr) auto auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tt-row input{font-size:16px;min-height:46px}
@media(max-width:760px){.tt-row{grid-template-columns:70px minmax(0,1fr);}.tt-row .tt-subject,.tt-row .tt-teacher{grid-column:2}.tt-row .tt-save,.tt-row .tt-delete{grid-column:auto;min-height:44px}.timetable-dialog{width:96vw;max-height:92vh}}

/* V5.2: Diagnose dauerhaft sichtbar und Stundenplanfenster groß */
.caldav-diagnostic-box{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.caldav-diagnostic-box h4{margin:0 0 8px}.caldav-diagnostic-box pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.45 monospace;margin:0;user-select:text}
.timetable-dialog{box-sizing:border-box;width:min(96vw,1120px);max-width:1120px;max-height:94vh;overflow-y:auto}
.lesson-teacher{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px}
.footer #btn-logout{color:inherit;font-weight:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 14px}

/* V5.3: breite Stundenplan-Eingabe ohne horizontales Scrollen; Abmelden auch auf Übersicht */
#timetable-manage{padding:0;max-width:none}
#timetable-manage .timetable-dialog{width:min(98vw,1380px);max-width:1380px;min-width:0;box-sizing:border-box;overflow-x:hidden}
#timetable-manage .tt-entries{width:100%;min-width:0}
#timetable-manage .tt-row{grid-template-columns:76px minmax(0,1.4fr) minmax(0,1fr) auto auto;min-width:0}
.dashboard-account-actions{display:flex;justify-content:flex-end;margin:0 0 12px}
.dashboard-account-actions #btn-logout-dashboard{border:1px solid var(--line);border-radius:8px;padding:8px 14px}
@media(max-width:760px){#timetable-manage .tt-row{grid-template-columns:1fr;gap:8px}#timetable-manage .tt-row>*{width:100%;box-sizing:border-box}#timetable-manage .timetable-dialog{width:98vw;padding:16px}}

/* V5.4: Stundenplan-Dialog definitiv breit darstellen */
#timetable-manage {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#timetable-manage > .timetable-dialog {
  display: block;
  width: min(1200px, calc(100vw - 32px)) !important;
  max-width: min(1200px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-height: calc(100vh - 32px) !important;
  margin: 16px auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#timetable-manage .tt-row {
  display: grid !important;
  grid-template-columns: 90px minmax(260px, 1.6fr) minmax(220px, 1fr) 100px 90px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#timetable-manage .tt-row input {
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 760px) {
  #timetable-manage > .timetable-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    padding: 18px !important;
  }
  #timetable-manage .tt-row {
    grid-template-columns: 1fr !important;
  }
  #timetable-manage .tt-row > * {
    grid-column: auto !important;
  }
}

/* V5.5: Stundenplan-Dialog mit deckendem Hintergrund */
#timetable-manage > .timetable-dialog {
  background: #fff !important;
  color: var(--ink, #1f2937) !important;
  border: 1px solid var(--line, #d9dee7) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}
#timetable-manage::backdrop {
  background: rgba(20, 26, 46, .62) !important;
}
#timetable-manage .timetable-editor-head select,
#timetable-manage .tt-row input {
  background: #fff !important;
  color: var(--ink, #1f2937) !important;
}


/* ------------------------------------------------------------- Bring! V6 */
.bring-card { min-height: 260px; }
.bring-panel { display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.bring-logo { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid var(--line); font-size:25px; }
.bring-copy { min-width:0; }
.bring-copy strong { display:block; margin-bottom:5px; }
.bring-copy p { margin:0; color:var(--ink-soft); line-height:1.45; }
.bring-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.bring-status { margin-top:10px; }
.bring-info-content p { margin:0 0 12px; }
@media (max-width:640px) {
  .bring-panel { flex-direction:column; }
  .bring-actions .btn { width:100%; }
}

/* Familiennotizen V6.2 – Dialog wie der bewährte Stundenplan-Dialog */
.notes-card { min-height: 260px; }
.notes-list { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.family-note { display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.family-note-body { min-width:0; flex:1; }
.family-note-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.family-note-meta { margin-top:7px; color:var(--ink-soft); font-size:12px; }
.family-note-actions { display:flex; gap:10px; flex:0 0 auto; align-items:center; }
.family-note-actions button:disabled { opacity:.6; cursor:default; }

/* V6.2.1: Familiennotiz-Dialog wie V5.5 deckend, zentriert und ohne transparentes Standard-Dialog-Layout */
#note-manage {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#note-manage > .note-dialog {
  display: block;
  width: min(720px, calc(100vw - 32px)) !important;
  max-width: min(720px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-height: calc(100vh - 32px) !important;
  margin: 16px auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  color: var(--ink, #1f2937) !important;
  border: 1px solid var(--line, #d9dee7) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}
#note-manage::backdrop {
  background: rgba(20, 26, 46, .62) !important;
}
#note-text {
  width:100%;
  min-height:160px;
  box-sizing:border-box;
  resize:vertical;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  line-height:1.45;
}
@media(max-width:760px){
  #note-manage > .note-dialog {
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 16px) !important;
    margin:8px auto !important;
    padding:18px !important;
  }
}
@media(max-width:640px){ .family-note{flex-direction:column}.family-note-actions{width:100%;justify-content:flex-end} }

/* ------------------------------------------------------------- Müllkalender V6.3 */
#trash-manage {
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#trash-manage > .trash-dialog {
  display: block;
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: min(760px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  margin: 16px auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  color: var(--ink, #1f2937) !important;
  border: 1px solid var(--line, #d9dee7) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}
#trash-manage::backdrop { background: rgba(20, 26, 46, .62) !important; }
.trash-list { display:grid; gap:9px; margin-top:16px; }
.trash-item { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.trash-date { display:flex; flex-direction:column; gap:3px; }
.trash-date strong { font-size:14px; }
.trash-date span { display:inline-block; width:max-content; padding:2px 7px; border-radius:999px; background:var(--berry); color:#fff; font-size:11px; font-weight:700; }
.trash-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.trash-main strong { overflow-wrap:anywhere; }
.trash-main small { color:var(--ink-soft); }
@media(max-width:760px){
  #trash-manage > .trash-dialog { width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important; max-height:calc(100vh - 16px) !important; margin:8px auto !important; padding:18px !important; }
  .trash-item { grid-template-columns:1fr; gap:7px; }
}

/* ------------------------------------------------------------- Familienaufgaben V6.5 */
.family-tasks-dialog,
.family-task-edit-dialog { background:#fff; }
#family-tasks-manage {
  width:100vw !important; max-width:100vw !important; padding:0 !important; border:0 !important; background:transparent !important;
}
#family-tasks-manage > .family-tasks-dialog {
  display:block; width:min(1050px,calc(100vw - 32px)) !important; max-width:min(1050px,calc(100vw - 32px)) !important;
  max-height:calc(100vh - 32px) !important; margin:16px auto !important; padding:28px !important; box-sizing:border-box;
  overflow-x:hidden; overflow-y:auto; color:var(--ink); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
#family-tasks-manage::backdrop,#family-task-edit::backdrop { background:rgba(20,26,46,.62) !important; }
.family-task-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:8px 0 16px; }
.family-task-filters { display:flex; flex-wrap:wrap; gap:6px; }
.task-filter { border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:999px; padding:7px 12px; cursor:pointer; font:inherit; }
.task-filter.is-active { background:var(--berry); color:#fff; border-color:var(--berry); }
.task-add-btn { width:auto !important; margin:0 !important; }
.family-task-list { display:grid; gap:9px; }
.family-task-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:12px; align-items:start; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfe; }
.family-task-item.status-done { opacity:.68; }
.task-check { width:28px; height:28px; border:2px solid var(--line); border-radius:8px; background:#fff; color:#fff; cursor:pointer; font-weight:800; font-size:16px; }
.status-done .task-check { background:var(--berry); border-color:var(--berry); }
.family-task-main { min-width:0; }
.family-task-title { font-weight:750; overflow-wrap:anywhere; }
.status-done .family-task-title { text-decoration:line-through; }
.family-task-description { margin-top:5px; color:var(--ink-soft); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.4; }
.family-task-meta { display:flex; flex-wrap:wrap; gap:7px 11px; margin-top:8px; color:var(--ink-soft); font-size:12px; align-items:center; }
.task-pill { display:inline-flex; padding:3px 8px; border-radius:999px; background:#eef1f8; }
.priority-high .priority-pill { font-weight:700; }
.task-overdue { font-weight:700; }
.family-task-actions { display:flex; gap:10px; align-items:center; }
#family-task-edit { width:100vw !important; max-width:100vw !important; padding:0 !important; border:0 !important; background:transparent !important; }
#family-task-edit > .family-task-edit-dialog { display:block; width:min(760px,calc(100vw - 32px)) !important; max-width:min(760px,calc(100vw - 32px)) !important; max-height:calc(100vh - 32px) !important; margin:16px auto !important; padding:28px !important; box-sizing:border-box; overflow:auto; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.task-field { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.task-field > span { font-weight:700; font-size:13px; }
.task-field input,.task-field textarea,.task-field select { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:11px 12px; font:inherit; }
.task-field textarea { resize:vertical; min-height:90px; }
.task-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
@media(max-width:760px){
  #family-tasks-manage > .family-tasks-dialog,#family-task-edit > .family-task-edit-dialog { width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important; max-height:calc(100vh - 16px) !important; margin:8px auto !important; padding:18px !important; }
  .family-task-toolbar { align-items:stretch; flex-direction:column; }
  .task-add-btn { width:100% !important; }
  .family-task-item { grid-template-columns:34px minmax(0,1fr); }
  .family-task-actions { grid-column:2; justify-content:flex-end; }
  .task-form-grid { grid-template-columns:1fr; }
}

/* V6.6 – Familienaufgaben auf der Übersicht */
.family-tasks-overview-card { min-height: 260px; }
.family-task-overview-list { display:grid; gap:7px; }
.family-task-overview-item { width:100%; display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center; text-align:left; border:1px solid var(--line); border-radius:10px; background:#fbfcfe; padding:10px 11px; color:var(--ink); cursor:pointer; font:inherit; }
.family-task-overview-item:hover { border-color:var(--berry); }
.family-task-overview-check { width:24px; height:24px; display:grid; place-items:center; border:2px solid var(--line); border-radius:7px; background:#fff; font-weight:800; }
.family-task-overview-main { min-width:0; }
.family-task-overview-main strong { display:block; overflow-wrap:anywhere; }
.family-task-overview-main small { display:block; margin-top:3px; color:var(--ink-soft); font-size:12px; }
.family-task-overview-more { margin-top:2px; justify-self:start; }
.quick-card-link { text-decoration:none; color:inherit; }

/* V6.8 – Punkte & Belohnungen */
.points-balances,.points-manage-balances{display:grid;gap:8px}.points-balance{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}.points-balance span{font-weight:800}.points-switch{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin:12px 0 18px;font-weight:750}.points-switch input{width:20px;height:20px}.points-dialog{background:#fff}.points-inline{display:grid;grid-template-columns:1.1fr .8fr 1.8fr auto;gap:8px;align-items:center;margin-bottom:18px}.points-inline input,.points-inline select,.reward-item select{min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font:inherit;background:#fff;color:var(--ink)}.rewards-list,.points-history{display:grid;gap:8px;margin-bottom:18px}.reward-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:9px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}.reward-item small{display:block;color:var(--ink-soft);margin-top:3px}.points-history-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid var(--line)}.points-history-row .plus{font-weight:800}.points-history-row .minus{font-weight:800}.task-field small{color:var(--ink-soft);font-size:12px}#points-manage{width:100vw!important;max-width:100vw!important;padding:0!important;border:0!important;background:transparent!important}#points-manage>.points-dialog{display:block;width:min(900px,calc(100vw - 32px))!important;max-width:min(900px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px)!important;margin:16px auto!important;padding:28px!important;box-sizing:border-box;overflow:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22)}#points-manage::backdrop{background:rgba(20,26,46,.62)!important}@media(max-width:760px){#points-manage>.points-dialog{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;margin:8px auto!important;padding:18px!important}.points-inline,.reward-item{grid-template-columns:1fr}.reward-item b{justify-self:start}}

/* V6.8.1 – eigene Seite Punkte & Belohnungen */
.points-page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0}.points-page-head h2{margin:3px 0 5px}.points-page-head p{margin:0;color:var(--ink-soft)}.points-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.points-page-history{grid-column:1/-1}.points-page-reward{grid-template-columns:minmax(0,1fr) auto}.points-page .hint{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}@media(max-width:760px){.points-page-head{align-items:stretch;flex-direction:column}.points-page-grid{grid-template-columns:1fr}.points-page-history{grid-column:auto}.points-page-reward{grid-template-columns:1fr}}


/* ------------------------------------------------ Familien-Wochenplan V6.9 */
.family-week-page{padding-bottom:32px}
.family-week-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.family-week-head h2{margin:3px 0 5px;font-size:clamp(1.45rem,3vw,2rem)}
.family-week-head p{margin:0;color:var(--muted)}
.family-week-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.family-week-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.family-week-toolbar>strong{font-size:1.05rem}
.family-week-filters{display:flex;gap:7px;flex-wrap:wrap}
.family-week-filter{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.family-week-filter.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.family-week-scroll{overflow-x:auto;padding-bottom:8px}
.family-week-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;min-width:1080px}
.family-week-day{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px;min-height:300px}
.family-week-day.is-today{border:2px solid var(--navy);padding:10px}
.family-week-day-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:2px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:9px}
.family-week-day-head strong{font-size:.98rem}
.family-week-day-head span{font-size:.8rem;color:var(--muted)}
.family-week-day-head em{grid-column:1/-1;font-size:.72rem;font-style:normal;color:var(--navy);font-weight:700}
.family-week-items{display:grid;gap:7px}
.family-week-item{display:block;width:100%;text-align:left;border:1px solid var(--line);border-left-width:4px;background:var(--soft);border-radius:10px;padding:8px;color:var(--ink);font:inherit}
button.family-week-item{cursor:pointer}
.family-week-item strong{display:block;font-size:.84rem;line-height:1.25;margin-top:3px}
.family-week-item small{display:block;color:var(--muted);font-size:.72rem;line-height:1.25;margin-top:3px;overflow-wrap:anywhere}
.family-week-item-top{display:flex;align-items:center;gap:5px;font-size:.72rem}
.family-week-time{font-weight:700}
.family-week-points{margin-left:auto;white-space:nowrap}
.week-kind-event{border-left-color:#6f7fb8}
.week-kind-task{border-left-color:#a77a4d}
.week-kind-school{border-left-color:#6c927d}
.week-kind-trash{border-left-color:#7b8b65}
.family-week-empty{font-size:.76rem;color:var(--muted);margin:8px 2px}
.family-week-hint{margin-top:10px}
@media(max-width:720px){
  .family-week-head{align-items:flex-start;flex-direction:column}
  .family-week-grid{display:block;min-width:0}
  .family-week-scroll{overflow:visible}
  .family-week-day{min-height:0;margin-bottom:10px}
  .family-week-day:not(.is-today){padding:10px}
  .family-week-day-head{grid-template-columns:auto 1fr auto}
  .family-week-day-head em{grid-column:auto}
  .family-week-filters{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}
  .family-week-filter{white-space:nowrap}
}

/* V6.10 Essen & Einkauf */
.food-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px}.food-head h2{margin:3px 0 5px}.food-head p{margin:0;color:var(--muted)}.food-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:16px}.recipes-card{grid-column:1/-1}.food-week-nav{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.food-meals{display:grid;gap:7px}.food-day{display:grid;grid-template-columns:105px 1fr auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:9px 0}.food-day:first-child{border-top:0}.food-day>div:first-child strong,.food-day>div:first-child small{display:block}.food-day>div:first-child small,.food-unplanned{color:var(--muted);font-size:.78rem}.food-day.is-today>div:first-child strong{color:var(--navy)}.food-day-meals{display:flex;gap:6px;flex-wrap:wrap}.food-meal{border:1px solid var(--line);background:var(--soft);border-radius:9px;padding:7px 9px;text-align:left;color:var(--ink);font:inherit;cursor:pointer}.food-meal strong,.food-meal small{display:block}.food-meal small{color:var(--muted);font-size:.72rem}.shopping-add{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}.shopping-add input{min-width:0}.shopping-list{display:grid;gap:4px}.shopping-item{display:flex;align-items:center;gap:8px;padding:6px 3px;border-bottom:1px solid var(--line)}.shopping-check{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer;padding:3px 0}.shopping-check input{width:20px;height:20px;flex:0 0 auto}.shopping-check span{overflow-wrap:anywhere}.shopping-item.is-done .shopping-check span{text-decoration:line-through;color:var(--muted)}.shopping-delete{border:0;background:transparent;color:var(--muted);font-size:1.35rem;line-height:1;min-width:36px;min-height:36px;border-radius:8px;cursor:pointer}.shopping-delete:hover{background:var(--soft);color:var(--ink)}.recipe-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}.recipe-card{border:1px solid var(--line);border-radius:12px;padding:11px;display:flex;justify-content:space-between;gap:10px;align-items:center}.recipe-card strong,.recipe-card small{display:block}.recipe-card small{color:var(--muted);margin-top:3px}.recipe-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.week-kind-meal{border-left-color:#b07b6b}@media(max-width:760px){.food-head{align-items:flex-start;flex-direction:column}.food-grid{grid-template-columns:1fr}.recipes-card{grid-column:auto}.food-day{grid-template-columns:80px 1fr}.food-day-add{grid-column:2}.recipe-card{align-items:flex-start;flex-direction:column}.recipe-actions{justify-content:flex-start}}

.food-today-list{display:grid;gap:7px}.food-today-item{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:10px;padding:9px 10px;text-align:left;font:inherit;cursor:pointer}.food-today-item>span:first-child{font-size:1.25rem}.food-today-item strong,.food-today-item small{display:block}.food-today-item small{color:var(--muted);font-size:.76rem;margin-top:2px}.food-delete-btn:not([hidden]){color:#9a3f3f}


/* ------------------------------------------------ Übersicht V6.10.1 */
.dashboard-grid-ordered{align-items:start}
.shopping-overview-list{display:grid;gap:7px}
.shopping-overview-item{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--soft);cursor:pointer}
.shopping-overview-item input{width:18px;height:18px;flex:0 0 auto}
.shopping-overview-item span{font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
.shopping-overview-more{justify-self:start;margin:2px 0 0}
.shopping-overview-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.shopping-overview-add input{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:10px 12px;font:inherit}
.shopping-overview-add .btn{white-space:nowrap}
.weather-card-full{margin-top:16px}
@media(max-width:720px){
  .shopping-overview-add{grid-template-columns:1fr}
  .shopping-overview-add .btn{width:100%}
}


/* ------------------------------------------------ Übersicht V6.10.2 */
.dashboard-bottom-grid{margin-top:16px;align-items:stretch}
.dashboard-bottom-grid .dash-card{min-width:0}
.trash-overview-list{display:grid;gap:7px}
.trash-overview-item{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.trash-overview-date{display:grid;line-height:1.1}
.trash-overview-date strong{font-size:.88rem}
.trash-overview-date small{font-size:.72rem;color:var(--muted);text-transform:capitalize}
.trash-overview-main{display:flex;align-items:center;gap:7px;min-width:0}
.trash-overview-main strong{font-size:.88rem;overflow-wrap:anywhere}
.trash-overview-main span{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--navy);white-space:nowrap}
.weather-card-full{margin-top:0}
@media(max-width:720px){
  .dashboard-bottom-grid{grid-template-columns:1fr}
}


/* ------------------------------------------------ V6.11.5 Einkaufsliste */
.shopping-add-details{grid-template-columns:minmax(120px,2fr) 72px 92px minmax(120px,1.25fr) auto}
.shopping-add-details input,.shopping-add-details select{min-width:0}
.shopping-check span{min-width:0}
.shopping-check span strong,.shopping-check span small{display:block}
.shopping-check span small{font-size:.72rem;color:var(--muted);margin-top:2px}
.shopping-item.is-done .shopping-check span strong{text-decoration:line-through;color:var(--muted)}
.shopping-edit-btn{border:0;background:transparent;color:var(--muted);font-size:1.05rem;min-width:36px;min-height:36px;border-radius:8px;cursor:pointer}
.shopping-edit-btn:hover{background:var(--soft);color:var(--ink)}
.shopping-overview-item span strong,.shopping-overview-item span small{display:block}
.shopping-overview-item span small{font-size:.72rem;color:var(--muted);margin-top:2px}
@media(max-width:900px){.shopping-add-details{grid-template-columns:1fr 80px 100px}.shopping-add-details select#shopping-category{grid-column:1/3}.shopping-add-details .btn{grid-column:3}}
@media(max-width:620px){.shopping-add-details{grid-template-columns:1fr 1fr}.shopping-add-details #shopping-new{grid-column:1/-1}.shopping-add-details select#shopping-category{grid-column:1/-1}.shopping-add-details .btn{grid-column:1/-1;width:100%}}


/* ------------------------------------------------ Datensicherung V6.12 */
.backup-dialog{max-width:720px}
.backup-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.backup-status-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.backup-status-grid span{font-size:.78rem;color:var(--muted)}
.backup-status-grid strong{font-size:.92rem;overflow-wrap:anywhere}
.backup-section{margin-top:14px}.backup-section h3{margin:0 0 6px}
#backup-cron-url{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink);font:inherit;font-size:.83rem}
@media(max-width:650px){.backup-status-grid{grid-template-columns:1fr}}


/* ------------------------------------------------ Einkauf & Dashboard V6.13 */
.shopping-favorites-wrap{margin:12px 0 14px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.shopping-favorites-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.shopping-favorites-head strong{font-size:.86rem}.shopping-favorites-head small{font-size:.72rem;color:var(--muted)}
.shopping-favorites{display:flex;flex-wrap:wrap;gap:7px}
.shopping-favorite-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 10px;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px}
.shopping-favorite-chip strong{font-size:.78rem}.shopping-favorite-chip small{font-size:.7rem;color:var(--muted)}
.shopping-category-group{margin-top:12px}
.shopping-category-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.shopping-category-head strong{font-size:.82rem}.shopping-category-head span{font-size:.7rem;color:var(--muted);background:var(--soft);padding:2px 7px;border-radius:999px}
.shopping-category-items{display:grid;gap:6px}
.shopping-done-group{opacity:.78;margin-top:18px}
.shopping-overview-item small{display:block;color:var(--muted);font-size:.7rem;margin-top:2px}
@media(max-width:650px){
  .shopping-favorites{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}
  .shopping-favorite-chip{flex:0 0 auto}
}


/* ------------------------------------------------ Stundenplan / Einkauf & Essen V6.13.1 */
.lesson-time{width:92px;flex:0 0 92px;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums}
#timetable-manage .tt-row{display:grid;grid-template-columns:105px 105px minmax(150px,1.35fr) minmax(135px,1fr) 90px auto;gap:10px;align-items:center;min-width:0;padding:8px 0;border-bottom:1px solid var(--line)}
#timetable-manage .tt-row-head{padding:0 0 6px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.75rem;font-weight:700}
#timetable-manage .tt-row input{width:100%;min-width:0;box-sizing:border-box;padding:9px;border:1px solid var(--line);border-radius:9px;background:white;font-size:16px;min-height:44px}
#timetable-manage .tt-delete{min-height:44px}
.food-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.food-grid>.shopping-card,.food-grid>.food-meals-card{min-width:0}
@media(max-width:760px){
  #timetable-manage .tt-row-head{display:none}
  #timetable-manage .tt-row{grid-template-columns:1fr 1fr;gap:8px;padding:12px 0}
  #timetable-manage .tt-subject,#timetable-manage .tt-teacher{grid-column:1/-1}
  #timetable-manage .tt-room{grid-column:1}
  #timetable-manage .tt-delete{grid-column:2;justify-self:stretch}
  .food-grid{grid-template-columns:1fr}
}


/* ------------------------------------------------ Feinschliff V6.13.2 */
#timetable-manage > .timetable-dialog{
  width:min(94vw,980px);
  max-width:980px;
}
#timetable-manage .tt-row{
  grid-template-columns:92px 92px minmax(150px,1.35fr) minmax(130px,1fr) 80px auto;
}
.shopping-add-details{
  grid-template-columns:minmax(140px,1fr) 80px 105px 145px auto;
}
.shopping-add-details .btn{
  white-space:nowrap;
  padding-left:14px;
  padding-right:14px;
}
@media(max-width:900px){
  .shopping-add-details{
    grid-template-columns:1fr 80px 100px;
  }
  .shopping-add-details #shopping-category{
    grid-column:1/3;
  }
  .shopping-add-details .btn{
    grid-column:3;
    grid-row:2;
  }
}
@media(max-width:650px){
  #timetable-manage > .timetable-dialog{
    width:96vw;
    max-width:96vw;
  }
  .shopping-add-details{
    grid-template-columns:1fr;
  }
  .shopping-add-details #shopping-category,
  .shopping-add-details .btn{
    grid-column:auto;
    grid-row:auto;
    width:100%;
  }
}


/* ------------------------------------------------ Einkaufseingabe V6.13.3 */
.shopping-card .shopping-add-details{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(70px,.65fr) minmax(95px,.85fr) minmax(125px,1.2fr);
  gap:8px;
  align-items:stretch;
  width:100%;
}
.shopping-card .shopping-add-details > *{
  min-width:0;
  box-sizing:border-box;
}
.shopping-card .shopping-add-details .btn{
  grid-column:1 / -1;
  width:100%;
  margin-top:2px;
  white-space:nowrap;
}
@media(max-width:760px){
  .shopping-card .shopping-add-details{
    grid-template-columns:1fr;
  }
  .shopping-card .shopping-add-details .btn{
    grid-column:1;
    width:100%;
  }
}


/* ------------------------------------------------ Kalender bearbeiten V6.13.4 */
.calendar-source-row{display:block}
.calendar-source-summary{display:flex;align-items:center;gap:12px}
.calendar-source-summary .source-main{flex:1;min-width:0}
.calendar-source-editor{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(120px,.8fr) auto auto auto;gap:8px;align-items:end}
.calendar-source-editor[hidden]{display:none}
.calendar-source-editor label{display:grid;gap:5px}
.calendar-source-editor label>span{font-size:.72rem;color:var(--muted);font-weight:700}
.calendar-source-editor input,.calendar-source-editor select{width:100%;min-width:0;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font:inherit}
.calendar-editor-preview{min-height:42px;display:flex;align-items:center;gap:7px;padding:0 5px;color:var(--muted);font-size:.78rem}
@media(max-width:620px){
  .calendar-source-summary{align-items:flex-start;flex-wrap:wrap}
  .calendar-source-summary .source-main{flex:1 1 calc(100% - 28px)}
  .calendar-source-summary .source-actions{width:100%;padding-left:28px;justify-content:flex-start;flex-wrap:wrap}
  .calendar-source-editor{grid-template-columns:1fr 1fr}
  .calendar-source-editor label:first-child{grid-column:1/-1}
  .calendar-editor-preview{grid-column:1}
  .calendar-source-editor .save-calendar-edit{grid-column:1/-1}
  .calendar-source-editor .cancel-calendar-edit{grid-column:1/-1}
}


/* ------------------------------------------------ Kalenderdialog & Wochenplan V6.13.5 */
#calendar-manage > .calendar-dialog{
  width:min(96vw,980px);
  max-width:980px;
  box-sizing:border-box;
}
#calendar-manage .calendar-source-editor{
  grid-template-columns:minmax(240px,1.7fr) 150px 105px auto auto;
  gap:10px;
}
#calendar-manage .calendar-source-editor .btn{white-space:nowrap}
.family-week-calendar-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.week-calendar-berry{border-left-color:var(--berry)!important}
.week-calendar-sky{border-left-color:var(--sky)!important}
.week-calendar-leaf{border-left-color:var(--leaf)!important}
.week-calendar-sun{border-left-color:var(--sun)!important}
.week-calendar-plum{border-left-color:var(--plum)!important}
@media(max-width:760px){
  #calendar-manage > .calendar-dialog{width:96vw;max-width:96vw}
  #calendar-manage .calendar-source-editor{grid-template-columns:1fr 1fr}
  #calendar-manage .calendar-source-editor label:first-child{grid-column:1/-1}
  #calendar-manage .calendar-editor-preview{grid-column:1/-1}
  #calendar-manage .calendar-source-editor .save-calendar-edit,
  #calendar-manage .calendar-source-editor .cancel-calendar-edit{grid-column:1/-1;width:100%}
}


/* ------------------------------------------------ Kalenderdialog & Wochenplan V6.13.6 */
#calendar-manage > .calendar-dialog{
  width:min(96vw,1080px) !important;
  max-width:1080px !important;
  min-width:0;
  box-sizing:border-box;
}

#calendar-manage .calendar-source-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

#calendar-manage .calendar-source-editor{
  display:grid;
  grid-template-columns:minmax(260px,1.8fr) 160px 120px auto auto;
  gap:10px;
  align-items:end;
  width:100%;
  box-sizing:border-box;
}

#calendar-manage .calendar-source-editor[hidden]{
  display:none;
}

#calendar-manage .calendar-source-editor label{
  min-width:0;
}

#calendar-manage .calendar-source-editor input,
#calendar-manage .calendar-source-editor select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

#calendar-manage .calendar-source-editor .save-calendar-edit,
#calendar-manage .calendar-source-editor .cancel-calendar-edit{
  white-space:nowrap;
}

.family-week-calendar-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 9px;
}

@media(max-width:760px){
  #calendar-manage > .calendar-dialog{
    width:96vw !important;
    max-width:96vw !important;
  }

  #calendar-manage .calendar-source-summary{
    grid-template-columns:auto minmax(0,1fr);
  }

  #calendar-manage .calendar-source-summary .source-actions{
    grid-column:1/-1;
    padding-left:0;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  #calendar-manage .calendar-source-editor{
    grid-template-columns:1fr;
  }

  #calendar-manage .calendar-source-editor label,
  #calendar-manage .calendar-editor-preview,
  #calendar-manage .calendar-source-editor .save-calendar-edit,
  #calendar-manage .calendar-source-editor .cancel-calendar-edit{
    grid-column:1;
    width:100%;
  }
}


/* ------------------------------------------------ iCloud-Dialogfenster V6.13.7 */
/* Wichtig: Breite muss auf dem <dialog>-Element selbst liegen, nicht nur auf dem Formular darin. */
dialog#calendar-manage{
  width:min(96vw,1080px) !important;
  max-width:1080px !important;
  min-width:min(760px,96vw) !important;
  box-sizing:border-box !important;
  padding:0 !important;
  overflow-x:hidden !important;
}

dialog#calendar-manage > .calendar-dialog{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  overflow-x:hidden !important;
}

dialog#calendar-manage .calendar-sources,
dialog#calendar-manage .calendar-source-row,
dialog#calendar-manage .calendar-source-summary,
dialog#calendar-manage .calendar-source-editor,
dialog#calendar-manage .calendar-add-box{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

dialog#calendar-manage .calendar-source-editor{
  grid-template-columns:minmax(260px,1.8fr) 150px 110px auto auto !important;
}

@media(max-width:800px){
  dialog#calendar-manage{
    width:96vw !important;
    max-width:96vw !important;
    min-width:0 !important;
  }

  dialog#calendar-manage .calendar-source-editor{
    grid-template-columns:1fr 1fr !important;
  }

  dialog#calendar-manage .calendar-source-editor label:first-child,
  dialog#calendar-manage .calendar-editor-preview,
  dialog#calendar-manage .calendar-source-editor .save-calendar-edit,
  dialog#calendar-manage .calendar-source-editor .cancel-calendar-edit{
    grid-column:1 / -1 !important;
    width:100%;
  }
}

@media(max-width:560px){
  dialog#calendar-manage .calendar-source-editor{
    grid-template-columns:1fr !important;
  }
}


/* ------------------------------------------------ ICS-Kalender V6.13.8 */
#calendar-manage .ics-add-box{
  margin-top:18px;
}
#calendar-manage .ics-subscribe-grid{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(300px,2fr) 130px auto;
  gap:10px;
  align-items:stretch;
}
#calendar-manage .ics-subscribe-grid > *{
  min-width:0;
  box-sizing:border-box;
}
#calendar-manage .ics-subscribe-grid input,
#calendar-manage .ics-subscribe-grid select{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  color:var(--ink);
  font:inherit;
}
#calendar-manage .ics-subscribe-grid .btn{
  white-space:nowrap;
}
@media(max-width:900px){
  #calendar-manage .ics-subscribe-grid{
    grid-template-columns:1fr 1fr;
  }
  #calendar-manage .ics-subscribe-grid #ics-url{
    grid-column:1/-1;
    grid-row:1;
  }
}
@media(max-width:620px){
  #calendar-manage .ics-subscribe-grid{
    grid-template-columns:1fr;
  }
  #calendar-manage .ics-subscribe-grid #ics-url{
    grid-column:auto;
    grid-row:auto;
  }
  #calendar-manage .ics-subscribe-grid .btn{
    width:100%;
  }
}


/* ------------------------------------------------ Familienverwaltung V6.14 */
.dot-coral,.calendar-dot-coral{background:var(--coral)!important}
.dot-teal,.calendar-dot-teal{background:var(--teal)!important}
.dot-indigo,.calendar-dot-indigo{background:var(--indigo)!important}
.dot-slate,.calendar-dot-slate{background:var(--slate)!important}
.dot-lime,.calendar-dot-lime{background:var(--lime)!important}

dialog#manage{
  width:min(94vw,900px);
  max-width:900px;
  box-sizing:border-box;
  padding:0;
}
dialog#manage > .family-manage-dialog{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
}
.family-manage-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.family-manage-section:first-of-type{
  border-top:0;
  padding-top:0;
}
.family-manage-section h3{margin:0 0 6px}
.family-manage-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:10px;
}
.family-manage-head h3{margin:0}
.family-manage-head p{margin:4px 0 0}
.family-member-list{display:grid;gap:8px}
.family-member-row{
  display:grid;
  grid-template-columns:minmax(160px,1.3fr) 160px minmax(150px,.9fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
}
.family-member-row input[type="text"],
.family-member-row select,
.family-special-colors select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  color:var(--ink);
  font:inherit;
}
.family-media-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
}
.family-media-toggle input{width:18px;height:18px}
.family-special-colors{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.family-special-colors label{display:grid;gap:5px}
.family-special-colors label>span{
  font-size:.78rem;
  font-weight:700;
  color:var(--muted);
}
@media(max-width:720px){
  dialog#manage{width:96vw;max-width:96vw}
  .family-manage-head{align-items:stretch;flex-direction:column}
  .family-member-row{grid-template-columns:1fr}
  .family-special-colors{grid-template-columns:1fr}
}


/* ------------------------------------------------ Familienfarben V6.14.1 */
.family-color-control{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-width:0;
}
.family-color-preview{
  width:12px;
  height:12px;
  border-radius:50%;
  display:block;
  box-shadow:0 0 0 2px rgba(20,28,35,.08);
}
.family-color-control select{
  min-width:0;
}

/* Das frühere Beere/Pink dient intern weiter als "berry"-Schlüssel,
   wird visuell aber als ruhiges Oliv geführt. */


/* ------------------------------------------------ Medienzeit-Verwaltung V6.15 */
.media-header{
  gap:12px;
  flex-wrap:wrap;
}
.media-manage-btn{
  width:auto;
  margin-left:auto;
  white-space:nowrap;
}
dialog#media-settings-manage{
  width:min(96vw,1050px);
  max-width:1050px;
  box-sizing:border-box;
  padding:0;
}
.media-settings-dialog{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
}
.media-settings-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.media-settings-section:first-of-type{
  margin-top:4px;
  padding-top:0;
  border-top:0;
}
.media-settings-section h3{
  margin:0 0 8px;
}
.media-limit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.media-limit-grid>label{
  display:grid;
  gap:6px;
}
.media-limit-grid>label>span{
  font-size:.8rem;
  font-weight:700;
  color:var(--muted);
}
.media-limit-grid>label>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.media-limit-grid input,
.media-task-editor-row input,
#media-rules-editor{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
  background:white;
  color:var(--ink);
  font:inherit;
  padding:9px 10px;
}
.media-limit-grid em{
  font-style:normal;
  color:var(--muted);
  font-size:.82rem;
}
.media-settings-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.media-settings-head h3{margin:0}
.media-settings-head p{margin:4px 0 0}
.media-task-editor-head,
.media-task-editor-row{
  display:grid;
  grid-template-columns:70px minmax(130px,1fr) 80px minmax(220px,2fr) auto;
  gap:8px;
  align-items:center;
}
.media-task-editor-head{
  padding:0 4px 5px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}
.media-task-editor{
  display:grid;
  gap:7px;
}
.media-task-editor-row{
  padding:8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--paper);
}
.media-task-editor-row .media-task-icon{
  text-align:center;
  font-size:1.1rem;
}
.media-task-editor-row .media-task-minutes{
  text-align:center;
}
#media-rules-editor{
  min-height:150px;
  resize:vertical;
  line-height:1.5;
}
@media(max-width:760px){
  dialog#media-settings-manage{width:96vw;max-width:96vw}
  .media-manage-btn{width:100%;margin-left:0}
  .media-limit-grid{grid-template-columns:1fr}
  .media-settings-head{align-items:stretch;flex-direction:column}
  .media-task-editor-head{display:none}
  .media-task-editor-row{
    grid-template-columns:70px minmax(0,1fr) 80px;
  }
  .media-task-editor-row .media-task-detail{
    grid-column:1/-1;
  }
  .media-task-editor-row .media-task-remove{
    grid-column:1/-1;
    justify-self:end;
  }
}


/* ------------------------------------------------ Müllkalender-Upload V6.15.1 */
#calendar-manage .trash-upload-box{
  margin-top:18px;
}
#calendar-manage .trash-upload-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
#calendar-manage .trash-upload-grid input[type="file"]{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  color:var(--ink);
  font:inherit;
}
#calendar-manage .trash-upload-grid .btn{
  width:auto;
  white-space:nowrap;
}
.trash-upload-status{
  display:grid;
  gap:3px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--soft);
}
.trash-upload-status strong{
  font-size:.84rem;
}
.trash-upload-status span{
  color:var(--muted);
  font-size:.74rem;
}
.trash-upload-status.is-empty{
  opacity:.82;
}
@media(max-width:680px){
  #calendar-manage .trash-upload-grid{
    grid-template-columns:1fr;
  }
  #calendar-manage .trash-upload-grid .btn{
    width:100%;
  }
}


/* ------------------------------------------------ Rezeptimport V6.16 */
.recipe-head-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.recipe-actions{
  flex-wrap:wrap;
}
.recipe-source-link{
  text-decoration:none;
}
.recipe-edit-dialog{
  width:min(94vw,760px);
  max-width:760px;
}
.recipe-meta-grid{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:10px;
}
dialog#recipe-import{
  width:min(96vw,1050px);
  max-width:1050px;
  box-sizing:border-box;
  padding:0;
}
.recipe-import-dialog{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
}
.recipe-import-url-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:stretch;
}
.recipe-import-url-row input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  background:white;
  color:var(--ink);
  font:inherit;
}
.recipe-import-url-row .btn{
  width:auto;
  white-space:nowrap;
}
.recipe-import-preview{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
}
.recipe-import-preview-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.recipe-import-preview-head h3{
  margin:2px 0 2px;
  font-size:1.15rem;
}
.recipe-import-preview-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:18px;
}
.recipe-import-preview-grid h4{
  margin:0 0 7px;
}
.recipe-import-text{
  max-height:300px;
  overflow:auto;
  white-space:pre-wrap;
  line-height:1.48;
  padding:11px 12px;
  border-radius:10px;
  background:var(--soft);
  font-size:.84rem;
}
@media(max-width:720px){
  .recipe-meta-grid,
  .recipe-import-url-row,
  .recipe-import-preview-grid{
    grid-template-columns:1fr;
  }
  .recipe-import-url-row .btn{
    width:100%;
  }
}


/* ------------------------------------------------ Rezeptdialog V6.16.1 */
/* Breite muss auf dem äußeren <dialog> liegen, nicht nur auf dem Inhalt. */
dialog#recipe-edit{
  width:min(96vw,1050px) !important;
  max-width:1050px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:0 !important;
  overflow-x:hidden !important;
}
dialog#recipe-edit > .recipe-edit-dialog{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  overflow-x:hidden !important;
}
dialog#recipe-edit .recipe-meta-grid,
dialog#recipe-edit .task-field,
dialog#recipe-edit input,
dialog#recipe-edit textarea{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Gewünschte freie Zeile zwischen Erklärung und URL-Feld. */
dialog#recipe-import .recipe-import-url-row{
  margin-top:20px;
}

@media(max-width:720px){
  dialog#recipe-edit{
    width:96vw !important;
    max-width:96vw !important;
  }
}