/* Mission:Chaos – warmer Rot-Akzent und echter Garten-Login. Nur visuelle Overrides. */
:root {
  --accent:#ad474a;
  --home-accent:#ad474a;
  --home-accent-soft:#f8ede8;
  --lav:#f9eee8;
}
/* Bei sichtbarer Anmeldung keine alten Desktop-Paddings oder Zwischenflächen. */
body:has(#welcome.mission-login-screen:not(.hidden)) {
  padding:0!important;
  margin:0!important;
  background:#f6ece2!important;
}
#welcome.mission-login-screen {
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  background:#e8ecdf!important;
}
#welcome.mission-login-screen.hidden {display:none!important}
/* Reines Bild, nie ein zweiter Login- oder Logo-Screenshot als Overlay. */
#welcome .mission-login-art {
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  overflow:hidden!important;
  background:#e9e9d7 url('../img/login-garden-desktop.webp') center center / cover no-repeat!important;
}
#welcome .mission-login-art::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:none!important;
}
#welcome .mission-login-image {display:none!important}
#welcome .mission-login-logo {
  display:block;
  width:clamp(230px,30vw,355px);
  max-width:86vw;
  height:auto;
  position:relative;
  z-index:2;
  margin:0 auto -8px;
  object-fit:contain;
  filter:none!important;
}
#welcome .mission-login-card {
  position:relative!important;
  z-index:1!important;
  box-sizing:border-box!important;
  flex:none!important;
  width:min(100%,440px)!important;
  max-width:440px!important;
  margin:0 auto!important;
  padding:25px clamp(20px,5vw,30px) 25px!important;
  background:rgba(255,250,246,.97)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  border-radius:25px!important;
  box-shadow:none!important;
}
#welcome .mission-login-card .eyebrow {color:#a44543!important}
#welcome .mission-login-card .mission-login-title {color:#263148!important}
#welcome .mission-login-card .primary,
#welcome .mission-login-card button.primary {
  background:linear-gradient(180deg,#bd5556,#9c363b)!important;
  border:0!important;
  color:#fff!important;
  box-shadow:0 4px 13px rgba(179,12,21,.2)!important;
}
#welcome .mission-login-card a,
#welcome .mission-login-card .login-utility {color:#96393d!important}
#welcome .mission-login-card input:focus {
  outline:2px solid rgba(198,30,37,.35)!important;
  border-color:#ad474a!important;
}
/* Nur Akzentfarben auch im eingeloggten Teil aktualisieren. */
#shell nav a.active, #shell .section-head>a {color:var(--home-accent)!important}
#shell .primary {background:var(--home-accent)!important;color:white!important}
@media(max-width:700px) {
  #welcome .mission-login-art {
    background-image:url('../img/mission-chaos-garten-neu.webp'),url('../img/login-garden-mobile.webp')!important;
    background-position:center center!important;
  }
  #welcome .mission-login-logo {width:min(72vw,290px);margin-bottom:-7px}
  #welcome .mission-login-card {padding:18px 20px 20px!important}
}
@media(max-height:690px) {
  #welcome.mission-login-screen {justify-content:flex-start!important}
  #welcome .mission-login-logo {width:min(60vw,245px)}
  #welcome .mission-login-card {margin:0 auto!important}
}
@media(prefers-reduced-motion:reduce){#welcome .mission-login-card{transition:none!important}}


/* Mission:Chaos – warme rote Akzente im eingeloggten Bereich (2026-11). */
#shell {
  --accent:#ad474a;
  --home-accent:#ad474a;
  --home-accent-soft:#f8ede8;
  --lav:#f9eee8;
}
#shell .primary,
#shell button.primary,
#shell .taskaction.primary,
#shell .btn-primary,
#shell button[type="submit"].primary {background:#ad474a!important;color:#fff!important;border-color:#ad474a!important}
#shell nav a.active,
#shell nav a.active *,
#shell .section-head>a,
#shell .active-tab,
#shell .tab.active,
#shell .text-accent {color:#96393d!important}
#shell button[aria-selected="true"],
#shell .segmented-control .active,
#shell .filter-chip.active {background:#f8ede8!important;color:#96393d!important;border-color:#e7bab6!important}
#shell input:focus-visible,
#shell textarea:focus-visible,
#shell select:focus-visible {outline-color:#ad474a!important;accent-color:#ad474a}
#shell input[type="checkbox"],
#shell input[type="radio"],
#shell input[type="range"] {accent-color:#ad474a}

/* 2026-11-09: Rot als durchgängige Marken-Akzentfarbe, ohne Statusfarben zu ändern. */
html,body,#shell,#modal {
  --accent:#ad474a;
  --home-accent:#ad474a;
  --home-accent-soft:#f8ede8;
  --lav:#f9eee8;
  --primary:#ad474a;
  --primary-color:#ad474a;
  --accent-color:#ad474a;
  --purple:#ad474a;
  --violet:#ad474a;
}
#shell :is(button.primary,.primary,.btn-primary,.action-primary,.button-primary),
#modal :is(button.primary,.primary,.btn-primary,.action-primary,.button-primary) {
  background:#ad474a!important;
  border-color:#ad474a!important;
  color:white!important;
}
#shell :is(.tab.active,.tabs .active,.nav-item.active,.active-tab,.filter-chip.active,.segmented-control .active),
#modal :is(.tab.active,.tabs .active,.active-tab) {
  border-color:#dbaca8!important;
}
#shell :is(a.active,nav a.active,.tab.active,.active-tab,.section-head>a),
#modal :is(a.active,.tab.active,.active-tab) {
  color:#96393d!important;
}
#shell :is(input,textarea,select):focus-visible,
#modal :is(input,textarea,select):focus-visible {
  outline-color:#ad474a!important;
  border-color:#ad474a!important;
}
#shell :is(input[type=checkbox],input[type=radio],input[type=range]),
#modal :is(input[type=checkbox],input[type=radio],input[type=range]) {accent-color:#ad474a}

/* Finales, ruhiges Creme-Korallrot-Design: keine lila/blauen Flaechen. */
:root,html,body,#shell,#modal,.shell,.sheet {
  --bg:#fcf8f3;--home-bg:#fcf8f3;--home-card:#fffdfb;
  --accent:#ad474a;--home-accent:#ad474a;--home-accent-soft:#f8ede8;
  --ui-purple:#ad474a;--ui-purple-soft:#f8ede8;
  --lav:#f8ede8;--primary:#ad474a;--primary-color:#ad474a;
  --accent-color:#ad474a;--purple:#ad474a;--violet:#ad474a;
}
body:not(:has(#welcome.mission-login-screen:not(.hidden))) {
  background:#fcf8f3!important;
}
#shell .hero,#shell .home-hero {
  background:linear-gradient(135deg,#fffdfa,#fbefe8)!important;
}
#shell :is(.card,.panel,.stats article),#modal .sheet {
  background-color:#fffdfb!important;
}
#shell :is(.primary,.btn-primary,button.primary,.button-primary,.action-primary),
#modal :is(.primary,.btn-primary,button.primary,.button-primary) {
  background:#ad474a!important;border-color:#ad474a!important;color:#fff!important;
  box-shadow:none!important;
}
#shell :is(nav a.active,nav a:hover,.filter-chip.active,.tab.active,.segmented-control .active),
#modal :is(.tab.active,.filter-chip.active) {
  background-color:#f8ede8!important;
  border-color:#eed8d2!important;
  color:#96393d!important;
}
#shell .taskaction.check:not(:disabled) {background:#f8ede8!important;color:#ad474a!important}
#shell .task-v052.done .taskaction.check {background:#e8f6ea!important;color:#327342!important}
#welcome .mission-login-art::before,#welcome .mission-login-art::after {
  background:none!important;box-shadow:none!important;filter:none!important;
}
#welcome .mission-login-art {background-image:url('../img/mission-chaos-garten-neu.webp'),url('../img/login-garden-desktop.webp')!important;
 background-size:cover!important;background-position:center center!important;}
#welcome .mission-login-logo {filter:none!important}
@media(max-width:700px){
 #welcome .mission-login-art {background-image:url('../img/mission-chaos-garten-neu.webp'),url('../img/login-garden-desktop.webp')!important;
 background-position:64% center!important}
}


/* 2026-11-09: Echte Dialog-Komponenten, statt nur globale Akzent-Variablen.
   Ruhige neutrals; Rot nur fuer aktive Auswahl und Primaeraktionen. */
#modal .sheet {
  --ui-purple:#a74c4f!important;
  --ui-purple-soft:#f8efeb!important;
  --accent:#ad474a!important;
  background:#fffdfb!important;
  color:#302d31!important;
}
#modal .sheet h2,#modal .sheet h3 {color:#332d32!important}
#modal .sheet .eyebrow {color:#a65d5d!important}
#modal .sheet .profile-menu > button.secondary,
#modal .sheet .secondary,
#modal .sheet .task-create-form button.secondary {
  background:#f5f1ee!important;
  color:#534a49!important;
  border:1px solid #e9e0dc!important;
  box-shadow:none!important;
}
#modal .sheet .secondary:hover {
  background:#f4eae5!important;
  color:#7f3c3e!important;
}
#modal .sheet .setting-tile {
  background:#faf8f5!important;
  border:1px solid #eee8e3!important;
  box-shadow:none!important;
}
#modal .sheet .setting-tile select {
  background:#fffdfb!important;
  color:#332d32!important;
  border-color:#e7ddda!important;
}
#modal .sheet .setting-tile input[type=checkbox]:checked {
  background:#b96d6e!important;
}
#modal .sheet .task-create-clean .create-extra {
  background:#fcfaf8!important;
  border-color:#e9e1dc!important;
}
#modal .sheet .task-create-clean .create-options label>span,
#modal .sheet .task-create-clean .create-mode label>span,
#modal .sheet .task-create-clean .task-time-options label>span,
#modal .sheet .task-create-clean .weekday-picker label>span,
#modal .sheet .task-create-clean .create-people label>span {
  background:#f7f4f1!important;
  color:#514946!important;
  border-color:#e9e0dc!important;
  box-shadow:none!important;
}
#modal .sheet .task-create-clean .create-options input:checked+span,
#modal .sheet .task-create-clean .create-mode input:checked+span,
#modal .sheet .task-create-clean .task-time-options input:checked+span,
#modal .sheet .task-create-clean .weekday-picker input:checked+span,
#modal .sheet .task-create-clean .create-people input:checked+span {
  background:#f8e9e7!important;
  border-color:#ba7376!important;
  color:#923e42!important;
  box-shadow:inset 0 0 0 1px #ba7376!important;
}
#modal .sheet .task-create-clean input:not([type=checkbox]):not([type=radio]):focus-visible {
  border-color:#b96d6e!important;
  outline-color:#dfb1af!important;
}
#modal .sheet #taskTemplateLibrary summary {color:#443b3d!important}
#modal .sheet .profile-menu button.danger {color:#8e4144!important}

/* Login – warmes Creme statt blauer Browser-Autofill-Hintergruende. */
#welcome .mission-login-card .mission-login-actions .secondary,
#welcome .mission-login-card .login-child-qr .secondary {
 background:#f5f0eb!important;color:#6d4b4a!important;border:1px solid #eaded7!important;box-shadow:none!important;
}
#welcome .mission-login-card input,
#welcome .mission-login-card input:focus {
 background:#fffdfb!important;color:#302d31!important;transition:background-color 0s!important;
}
#welcome .mission-login-card input:-webkit-autofill,
#welcome .mission-login-card input:-webkit-autofill:hover,
#welcome .mission-login-card input:-webkit-autofill:focus {
 -webkit-box-shadow:0 0 0 1000px #fffdfb inset!important;
 -webkit-text-fill-color:#302d31!important;
 caret-color:#302d31!important;
 transition:background-color 99999s ease-out 0s!important;
}
#welcome .mission-login-card input:disabled {background:#f9f5f1!important}
/* Kalender: NUR Liste/Monat und Ansichts-Umschalter; Woche unveraendert. */
#shell.shell #dashboardGrid #eventsUpcoming .calendar-view-switch {
 background:#f5efea!important;border:1px solid #eee1d9!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-view-switch button {
 color:#725c59!important;background:transparent!important;box-shadow:none!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-view-switch button.is-active {
 background:#fff9f5!important;color:#9a4445!important;
 border:1px solid #e3c3ba!important;box-shadow:0 1px 3px #513c3014!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-period-nav button,
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list-pager button {
 background:#fff9f5!important;border-color:#eadfd8!important;color:#8c4d4b!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-period-nav span,
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list-pager {color:#695d58!important}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list .upcoming-event {
 background:#f5eee8!important;color:#493e39!important;border:1px solid #e9ded6!important;
 border-radius:10px!important;box-shadow:none!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list .upcoming-event .event-date {
 background:#fbf1e9!important;color:#845047!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-month-cell {
 background:#fffdfb!important;border-color:#eee5dd!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-month-cell.is-today {
 background:#fff6e9!important;border-color:#e5bc84!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-month-weekday {color:#74655e!important}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-month-date {color:#4f403b!important}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-mini-event {
 background:#f7e9e3!important;color:#744541!important;border-left-color:var(--mc-event-color,#c78d7d)!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-mini-event:focus-visible {
 outline-color:#b96d6e!important;
}


/* Login: deliberate separation between logo and form on all screens. */
#welcome.mission-login-screen {gap:clamp(14px,2.7vh,26px)!important}
#welcome .mission-login-logo {
  margin:0 auto!important;
  flex:0 0 auto!important;
  max-height:min(32svh,275px)!important;
  object-fit:contain!important;
}
#welcome .mission-login-card {margin:0 auto!important}
@media(max-width:700px) {
 #welcome.mission-login-screen {gap:16px!important}
 #welcome .mission-login-logo {margin:0 auto!important;max-height:23svh!important}
}
@media(max-height:680px) {
 #welcome.mission-login-screen {gap:8px!important}
 #welcome .mission-login-logo {max-height:18svh!important}
}


/* Login 2026-11-09: keep large 3D logo, place clearly ABOVE the card. */
#welcome.mission-login-screen {gap:0!important}
#welcome .mission-login-logo {
  width:min(94vw,525px)!important;
  max-width:none!important;
  max-height:none!important;
  height:auto!important;
  margin:0 auto 8px!important;
  position:relative!important;
  z-index:3!important;
  object-fit:contain!important;
}
#welcome .mission-login-card {position:relative!important;z-index:2!important}
@media(max-width:700px) {
  #welcome .mission-login-logo {width:min(96vw,405px)!important;margin:0 auto 6px!important;max-height:none!important}
}
@media(max-height:760px) {
  #welcome .mission-login-logo {width:min(86vw,385px)!important;margin-bottom:4px!important}
}
@media(max-height:620px) {
  #welcome .mission-login-logo {width:min(72vw,285px)!important;margin-bottom:2px!important}
}


/* Calendar: personal events are visibly, but subtly, distinct from family events. */
#shell.shell #dashboardGrid #eventsUpcoming .calendar-week .calendar-event-compact.is-personal {
  background:#f3e2dc!important;border-color:#dcaeab!important;
  box-shadow:inset 3px 0 0 #bd7778!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-week .calendar-event-compact.is-family {
  background:#f5efe8!important;border-color:#e6dacf!important;
  box-shadow:none!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list .upcoming-event.is-personal {
  background:#f5e4e1!important;border-color:#e6c5c1!important;
  box-shadow:inset 3px 0 0 #bd7778!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-list .upcoming-event.is-family {
  background:#f8f2ec!important;border-color:#e9ded6!important;
  box-shadow:none!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-mini-event.is-personal {
  background:#f3dddb!important;color:#7c4145!important;
  border-left:3px solid #bd7778!important;
}
#shell.shell #dashboardGrid #eventsUpcoming .calendar-month .calendar-mini-event.is-family {
  background:#f7eee7!important;color:#5d4a40!important;
}