/*
 * ZeitRaum – Stylesheet der App (Kalenderseite)
 * Zusammengeführt am 2026-11-03 aus: calendar.html, analytics.css, calendar.css, platform.css, minimal.css, theme.css, theme-switch.css, ui-shell.css, design-system.css, help-center.css, zeitraum-ui.css, auto-planning.css.
 * Die Abschnittskommentare zeigen die Herkunft. Reihenfolge = frühere Ladereihenfolge (die Kaskade hängt davon ab).
 */
/*  ===== Abschnitt aus calendar.html (eingebetteter Style-Block) =====  */
body {
  margin: 0;
  font:
    14px system-ui,
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button {
  border: 1px solid var(--line);
  background: white;
  padding: 10px 15px;
}
.primary {
  border: 0;
}
aside {
  position: fixed;
  inset: 0 auto 0 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.brand {
  font-weight: 700;
  display: flex;
  align-items: center;
}
.logo {
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: white;
  width: 32px;
  height: 35px;
  border-radius: 12px 12px 5px 12px;
  font-size: 23px;
}
.tag {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 12px 0 42px;
}
nav {
  display: grid;
}
nav button {
  text-align: left;
  border: 0;
}
.navicon {
  display: inline-block;
  width: 28px;
}
.side-label {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: #817268;
  margin: 35px 10px 18px;
}
.category {
  margin: 15px 10px;
  color: #786b62;
  font-size: 12px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}
.side-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  color: #786b62;
  font-size: 11px;
  line-height: 1.8;
}
.avatar {
  background: #ffe3cb;
  border-radius: 50%;
  padding: 9px;
  margin-right: 8px;
  color: #9a3c08;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eyebrow {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}
.actions {
  display: flex;
  gap: 9px;
}
.intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 25px;
}
.intro h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 9px;
}
.intro p {
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}
.badge {
  font-size: 11px;
  color: var(--accent);
  border: 1px solid #f1c9a9;
  border-radius: 30px;
  padding: 7px 12px;
  background: #fff0e3;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 27px;
}
.stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 20px 23px;
}
.stat .label {
  font-size: 12px;
  color: var(--muted);
}
.stat strong {
  font-size: 27px;
  font-weight: 550;
  display: block;
  margin-top: 10px;
}
.stat small {
  font-size: 11px;
  color: var(--muted);
}
.layout {
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 22px;
}
.panel {
  overflow: hidden;
}
.calendar-head {
  justify-content: space-between;
}
.calendar-head h3 {
  margin: 0;
}
.calendar-head small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.controls {
  display: flex;
  gap: 5px;
  align-items: center;
}
.controls button {
  padding: 6px 10px;
  font-size: 12px;
}
.calendar-scroll {
  overflow: auto;
}
/* Calendars always fit their container; narrow screens get compact entries instead of scrolling sideways. */
.calendar {
  min-width: 0;
}
.days {
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr);
  border-block: 1px solid var(--line);
}
.day {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}
.day b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-top: 5px;
}
.day.today b {
  background: var(--accent-fill);
  border-radius: 50%;
  width: 30px;
  line-height: 30px;
  color: var(--accent-ink);
  margin: 2px auto -3px;
}
.grid {
  position: relative;
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr);
  height: 560px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--line) 55px, var(--line) 56px);
}
.hours {
  font-size: 9px;
  color: #867970;
}
.hours div {
  height: 56px;
  padding: 6px 8px;
}
.column {
  position: relative;
  border-left: 1px solid #f3eae2;
}
.event {
  position: absolute;
  left: 4px;
  right: 4px;
  border: 0;
  border-left: 3px solid #78946e;
  background: #eaf0e3;
}
.event b {
  display: block;
}
.event.freizeit {
  background: #f9eddf;
  border-color: #d8a16d;
  color: #855e3d;
}
.event.gesundheit {
  background: #eae8f4;
  border-color: #a19ac6;
  color: #68618a;
}
.rail {
  display: grid;
  gap: 18px;
  align-content: start;
}
.rail .panel {
  padding: 22px;
}
.rail h3 {
  font-size: 15px;
  margin: 0 0 7px;
}
.sub {
  font-size: 11px;
  line-height: 1.6;
}
.task {
  display: flex;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid #f3eae2;
}
.task input {
  accent-color: var(--accent);
  margin: 3px 0;
}
.task strong {
  font-weight: 500;
}
.task small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.task.done strong {
  text-decoration: line-through;
  color: #867970;
}
.text-btn {
  border: 0;
  padding: 13px 0 0;
  color: var(--accent);
  font-size: 12px;
  background: none;
}
.goal {
  margin-top: 20px;
}
.goal-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 9px;
}
.bar {
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  background: #d45b13;
  border-radius: 6px;
}
.quote {
  background: #fff0e3 !important;
  border: 0 !important;
}
.quote p {
  font:
    20px/1.45 Georgia,
    serif;
  margin: 7px 0 12px;
}
.footer {
  color: #817268;
  font-size: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
.view {
  display: none;
}
.view.active {
  display: block;
}
.list-panel .task {
  align-items: center;
}
.list-panel .task .task-content {
  flex: 1;
}
.delete {
  font-size: 11px;
  padding: 5px 9px;
}
.empty {
  padding: 30px;
  color: var(--muted);
  text-align: center;
}
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.analysis-card {
  padding: 28px;
}
.analysis-card h3 {
  margin-top: 0;
}
.analysis-card .goal {
  margin: 27px 0;
}
.notice {
  padding: 15px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.7;
}
dialog {
  width: min(460px, calc(100% - 30px));
}
dialog h2 {
  margin-top: 0;
}
label.field {
  display: block;
  font-size: 12px;
  margin: 16px 0;
}
label.field input,
label.field select {
  display: block;
  width: 100%;
  margin-top: 7px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.dialog-actions {
  display: flex;
  justify-content: end;
  gap: 8px;
  margin-top: 24px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 23px;
  background: var(--ink);
  color: white;
  display: none;
  z-index: 10;
}
#eventDelete {
  margin-right: auto;
  color: #a14c41;
}
@media (min-width: 1500px) {
  .grid {
    height: 650px;
    background-size: auto 65px;
  }
  .hours div {
    height: 65px;
  }
}
@media (max-width: 1100px) {
  main {
    padding: 25px;
  }
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    grid-template-columns: 1fr 1fr;
  }
  .quote {
    display: none;
  }
}
/* Same breakpoint as the bottom navigation (section „Navigation“): above 700px the narrow side rail stays. */
@media (max-width: 700px) {
  aside {
    position: static;
    width: auto;
    padding: 17px 20px;
    display: block;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    font-size: 21px;
  }
  .tag,
  .side-label,
  .category,
  .side-bottom {
    display: none;
  }
  nav {
    display: flex;
    margin-top: 17px;
    gap: 4px;
  }
  nav button {
    text-align: center;
    padding: 9px 5px;
    font-size: 12px;
  }
  .navicon {
    width: 20px;
  }
  main {
    margin: 0;
    padding: 23px 16px;
  }
  .top {
    margin-bottom: 30px;
  }
  .top h1 {
    font-size: 22px;
  }
  .top .eyebrow {
    font-size: 9px;
  }
  .actions button {
    padding: 9px 11px;
    font-size: 12px;
  }
  #export {
    display: none;
  }
  .intro h2 {
    font-size: 29px;
  }
  .intro .badge {
    display: none;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    padding: 14px 11px;
  }
  .stat strong {
    font-size: 23px;
  }
  .stat .label {
    font-size: 10px;
  }
  .stat small {
    font-size: 9px;
  }
  .rail,
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  .calendar-head {
    padding: 16px 12px;
  }
  .calendar-head h3 {
    font-size: 13px;
  }
  .footer {
    line-height: 1.6;
  }
  .intro p {
    font-size: 12px;
  }
  .analysis-card {
    padding: 20px;
  }
}

.connection-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 22px;
}
.sync-banner {
  border: 1px solid #f1c9a9;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: #fff0e3;
  font-size: 12px;
  line-height: 1.6;
}
.sync-banner[hidden] {
  display: none;
}
.all-day {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.all-day[hidden] {
  display: none;
}
.all-day button {
  padding: 6px 8px;
  font-size: 10px;
  text-align: left;
}
.all-day-label {
  align-self: center;
  color: var(--muted);
  width: 100%;
}
.event small {
  display: block;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 760px) {
  nav {
    flex-wrap: wrap;
  }
  nav button {
    flex: 1 0 44%;
  }
  .connection-heading h2 {
    font-size: 23px;
  }
  .connection-heading {
    align-items: start;
  }
}
.category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.category-card {
  align-items: center;
  min-width: 0;
}
.category-card h3 {
  overflow-wrap: anywhere;
}
.category-swatch {
  flex-shrink: 0;
}
.category-error {
  font-size: 12px;
  color: #a14c41;
  line-height: 1.6;
}
.sidebar-add {
  font-size: 11px;
  text-align: left;
  padding: 10px;
  margin-bottom: 20px;
}
#sidebarCategories {
  overflow-y: auto;
  max-height: 30vh;
  flex-shrink: 1;
}
.category {
  overflow-wrap: anywhere;
}
input[type='color'] {
  height: 44px;
  padding: 5px;
}
@media (max-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  #sidebarCategories,
  .sidebar-add {
    display: none;
  }
  .category-grid {
    grid-template-columns: 1fr;
  }
}
#goalDialog {
  max-height: 85vh;
  overflow-y: auto;
}
.goal-name {
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1;
}
.goal-line {
  align-items: center;
  gap: 12px;
}
.goal-edit {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 3px 0;
  font-size: 11px;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.goal-edit:hover {
  background: transparent;
  color: #923707;
}
.goal-field input {
  max-width: 170px;
}
.category-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#goalDialog .dialog-actions {
  position: sticky;
  bottom: -28px;
  background: white;
  padding: 14px 0;
  margin-top: 10px;
}
@media (max-width: 760px) {
  #categoriesView .connection-heading {
    flex-wrap: wrap;
  }
  .category-actions {
    width: 100%;
  }
  .category-actions button {
    flex: 1;
  }
} /*  ===== Abschnitt aus analytics.css =====  */
.goal-period {
  font-size: 10px;
  line-height: 1.5;
  margin: -1px 0 9px;
}
.goal-editor-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 15px;
  margin: 18px 0;
}
.goal-editor-row legend {
  padding: 0 6px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.goal-editor-row .field {
  margin: 4px 0 8px;
  font-size: 11px;
}
.goal-editor-row input {
  max-width: none;
}
#goalDialog {
  width: min(560px, calc(100% - 30px));
}
.goal-summary {
  margin-top: 25px;
}
.goal-summary .connection-heading {
  margin-bottom: 12px;
}
.goal-summary h3 {
  margin: 0 0 8px;
}
.analysis-data-status {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 19px;
}
.analysis-note {
  margin-top: 22px;
}
.chart-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.chart-card {
  min-width: 0;
}
.chart-card header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.chart-card h3 {
  font-weight: 400;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
}
.chart-edit {
  padding: 7px 9px;
  white-space: nowrap;
  font-size: 10px;
  background: var(--paper);
}
.chart-toolbar {
  display: flex;
  gap: 10px;
}
.chart-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  flex: 1;
}
.chart-toolbar select {
  width: 100%;
}
.chart-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.chart-caption strong {
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
}
.chart-caption small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.pie-layout {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 220px;
}
.pie-svg {
  width: 45%;
  max-width: 230px;
  flex-shrink: 0;
  overflow: visible;
}
.chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.chart-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 13px 0;
  font-size: 11px;
}
.legend-name {
  overflow-wrap: anywhere;
}
.chart-legend li > span:last-child {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.chart-legend small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.chart-scroll {
  width: 100%;
  overflow-x: auto;
}
.bar-svg {
  width: 100%;
  display: block;
  min-height: 230px;
}
.bar-legend {
  display: flex;
  gap: 10px 17px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
  font-size: 10px;
  color: var(--muted);
}
.bar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}
.bar-legend i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart-empty {
  padding: 35px 15px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chart-empty > span {
  font-size: 35px;
  color: #d45b13;
  margin-bottom: 14px;
}
.chart-empty b {
  font-weight: 500;
  color: var(--ink);
}
.chart-empty p {
  line-height: 1.7;
  max-width: 280px;
}
.chart-dashboard > .chart-empty {
  grid-column: 1/-1;
}
.chart-warning {
  font-size: 11px;
  line-height: 1.6;
  padding: 10px;
  background: #faf0df;
  color: #7e623e;
  border-radius: 7px;
}
#analysisDialog {
  width: min(620px, calc(100% - 30px));
  max-height: 88vh;
  overflow: auto;
}
.analysis-categories {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 20px 0;
  padding: 15px;
}
.analysis-categories legend {
  font-size: 12px;
  padding: 0 5px;
}
.category-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 6px 0;
  overflow-wrap: anywhere;
}
.category-choice input {
  accent-color: var(--accent);
}
.category-choice .dot {
  margin-right: 0;
  flex-shrink: 0;
}
#analysisCategoryChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 8px;
  max-height: 200px;
  overflow: auto;
}
#analysisCategoryChoices.all-selected {
  opacity: 0.6;
}
#groupingField[hidden] {
  display: none;
}
#deleteAnalysis {
  margin-right: auto;
}
#deleteAnalysisDialog {
  line-height: 1.7;
}
#deleteAnalysisDialog p {
  font-size: 13px;
}
#confirmDeleteAnalysis {
  color: #a14c41;
}
#analysisDialog .dialog-actions {
  position: sticky;
  bottom: -28px;
  padding: 14px 0;
  background: white;
}
.analysis-card .sub {
  line-height: 1.7;
}
@media (max-width: 1250px) {
  .chart-dashboard {
    grid-template-columns: 1fr;
  }
  .pie-layout {
    justify-content: space-around;
  }
  .chart-legend {
    max-width: 350px;
  }
}
@media (max-width: 760px) {
  .chart-card h3 {
    font-size: 21px;
  }
  .chart-card header {
    gap: 7px;
  }
  .chart-edit {
    font-size: 9px;
  }
  .pie-layout {
    gap: 14px;
    min-height: 180px;
  }
  .chart-legend li {
    gap: 8px;
    font-size: 10px;
  }
  .chart-legend small {
    font-size: 9px;
  }
  .chart-legend .dot {
    margin-right: 5px;
  }
  .chart-caption {
    font-size: 9px;
  }
  .chart-caption strong {
    font-size: 22px;
  }
  #analysisView > .connection-heading {
    flex-wrap: wrap;
  }
  .goal-summary .connection-heading {
    flex-wrap: wrap;
  }
  #analysisDialog .form-row {
    grid-template-columns: 1fr;
  }
  .goal-editor-row .form-row {
    grid-template-columns: 1fr 1fr;
  }
  #analysisDialog .dialog-actions {
    flex-wrap: wrap;
  }
  #analysisCategoryChoices {
    grid-template-columns: 1fr;
  }
  .analysis-data-status {
    line-height: 1.7;
  }
}
.chart-scroll:focus-visible {
  outline: 2px solid var(--accent);
} /*  ===== Abschnitt aus calendar.css =====  */
.calendar-switch button.active {
  border-color: var(--accent);
}
/* Few days always fit their box; a minimum width here caused a horizontal scrollbar in narrow views. */
:is(#timeCalendar, .zr-calendar).compact-days {
  min-width: 0;
}
.month-calendar {
  min-width: 0;
}
.month-weekdays,
.month-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.month-weekdays {
  border-block: 1px solid var(--line);
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.month-weekdays span {
  padding: 12px;
}
.month-day {
  min-width: 0;
  height: 104px;
  box-sizing: border-box;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 7px 4px;
}
.month-day:nth-child(7n) {
  border-right: 0;
}
.outside-month {
  background: var(--paper);
}
.outside-month .month-date {
  color: var(--muted);
}
.month-date {
  display: grid;
  place-items: center;
  padding: 0;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 12px;
  margin-bottom: 5px;
}
.is-today .month-date {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-radius: 50%;
}
.month-events {
  display: grid;
}
.month-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  color: var(--ink);
  background: var(--surface-raised);
  font-size: 16px;
}
.month-count > span {
  font-size: 10px;
}
.month-mini {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  margin: 0 0 2px;
  padding: 2px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 11px;
  border: 0;
  border-left: 3px solid var(--event-color, var(--accent));
  border-radius: var(--radius-field);
}
.month-summary-dialog {
  width: min(600px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
}
.month-summary-list {
  display: grid;
  gap: 10px;
}
.month-summary-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--event-color, var(--accent));
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  overflow-wrap: anywhere;
}
.month-summary-item p {
  margin: 6px 0 0;
  color: var(--muted);
}
.month-event {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border: 0;
  border-left: 3px solid;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.month-event small {
  font-size: 9px;
}
.month-event b {
  font-size: 10px;
  font-weight: 550;
}
.calendar-head h3::first-letter {
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .month-day {
    min-height: 110px;
  }
}
.event[data-automatic-event] {
  opacity: 0.85;
  border-style: dashed;
}
.event[data-automatic-event^='auto_offen'],
.month-event[data-automatic-event^='auto_offen'] {
  background: #f3f0ec !important;
  color: #655e57 !important;
}
.settings-tabs {
  margin: 0 0 24px;
}
body:has(#settingsView.active) .intro,
body:has(#settingsView.active) .stats {
  display: none;
}
.rhythm-panel {
  max-width: 850px;
  margin-bottom: 22px;
}
.account-details {
  font-size: 12px;
  line-height: 1.8;
}
.account-details dt {
  color: var(--muted);
  margin-top: 14px;
}
.account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
#settingsAccount #cloudAccount {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#settingsAccount #cloudAccount a {
  color: var(--accent);
}
#settingsView .settings-pane {
  display: block;
}
#settingsView .settings-pane[hidden] {
  display: none;
}
.settings-pane .connection-heading h2 {
  font-size: 25px;
}
#settingsView .button-link {
  padding-left: 0;
  font-size: 12px;
  color: var(--accent);
}
.weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 18px 0;
  padding: 16px;
}
.weekday-options label {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
}
.weekday-options input {
  accent-color: var(--accent);
}
#dailyLogDialog {
  width: min(660px, calc(100% - 30px));
  max-height: 88vh;
  overflow: auto;
}
#dailyLogDialog fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 18px 0;
}
#dailyLogDialog legend {
  font-size: 13px;
  padding: 0 6px;
}
#dailyLogDialog small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
}
.event[data-daily-log] {
  height: 26px !important;
  z-index: 3;
  background: #fff9ed !important;
  box-shadow: 0 1px 5px #55443322;
  border-style: solid;
  border-width: 1px 1px 1px 4px;
  display: flex;
  gap: 10px;
  padding: 4px 7px;
}
.event[data-daily-log] small {
  white-space: nowrap;
}
.event[data-daily-log] b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dailyLogDialog .dialog-actions {
  position: sticky;
  bottom: -28px;
  padding: 14px 0;
}
:is(#calendarViewport, .zr-viewport).time-viewport {
  overflow: auto;
  position: relative;
  scroll-behavior: smooth;
}
:is(#timeCalendar, .zr-calendar) .days {
  position: sticky;
  top: 0;
  z-index: 5;
}
.friend-dropdown {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 5px;
}
.friend-dropdown summary {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.friend-dropdown[open] #friendCalendarOverlays {
  gap: 4px;
  top: 100%;
  left: 0;
  z-index: 20;
}
.friend-dropdown label {
  display: flex;
  white-space: normal;
}
/* An invitation shown in the own calendar ("Im Kalender prüfen"): dashed accent frame on a lightly tinted
   surface, readable in light and dark mode. !important beats the category colour set inline (calendar.js). */
.event[data-preview-meeting],
.month-event[data-preview-meeting] {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)) !important;
  border: 2px dashed var(--accent) !important;
  color: var(--ink);
  z-index: 4;
}
.notification-toolbar {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.notification-list {
  display: grid;
  margin-top: 20px;
}
.notification-meta {
  display: flex;
  flex-wrap: wrap;
}
.notification-actions {
  display: flex;
  flex-wrap: wrap;
}
#invitationPreviewBanner {
  line-height: 1.8;
}
#invitationPreviewBanner button {
  margin-left: 10px;
} /*  ===== Abschnitt aus platform.css =====  */
.cloud-panel {
  margin-bottom: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cloud-panel small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
#cloudStatus {
  font-size: 11px;
  line-height: 1.5;
}
#cloudStatus[data-kind='error'] {
  color: #a14c41;
}
#cloudAccount {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 12px;
}
#cloudAccount a {
  font-size: 11px;
  color: var(--accent);
}
#cloudActions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#cloudActions button {
  font-size: 10px;
  padding: 7px 10px;
}
#syncConflict {
  width: 100%;
  background: white;
  padding: 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
}
#syncConflict button {
  margin: 6px 5px 0 0;
  font-size: 11px;
}
#appLoading {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 30px;
  gap: 15px;
}
#appLoading p {
  max-width: 500px;
}
#appLoading a {
  color: var(--accent);
}
.button-link {
  display: inline-block;
  padding: 12px;
}
.meeting-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.meeting-columns h3 {
  font-size: 16px;
}
.meeting-stack {
  display: grid;
  gap: 14px;
}
.meeting-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.meeting-card h3 {
  font-size: 19px;
  font-weight: 550;
  margin: 14px 0 9px;
  overflow-wrap: anywhere;
}
.meeting-card p {
  font-size: 12px;
  line-height: 1.7;
}
.meeting-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.meeting-status {
  font-size: 10px;
  padding: 5px 9px;
  border-radius: 20px;
  background: #fff0e3;
  color: var(--accent);
}
.meeting-status.accepted {
  background: #e6f2e9;
  color: #25603b;
}
.meeting-status.declined {
  background: #fae8e4;
  color: #964636;
}
.meeting-status.tentative,
.meeting-status.proposed {
  background: #f9f0cf;
  color: #79621c;
}
.meeting-empty {
  padding: 35px 22px;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
#meetingComposer,
#meetingDetails {
  max-height: 88vh;
  overflow-y: auto;
}
textarea {
  font: inherit;
  resize: vertical;
  width: 100%;
  margin-top: 7px;
}
.meeting-attendees {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.meeting-attendees li {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.meeting-attendees span,
.meeting-attendees small {
  color: var(--muted);
  font-size: 11px;
}
.rsvp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.meeting-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meeting-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}
#meetingDetails dl {
  font-size: 12px;
  line-height: 1.8;
}
#meetingDetails dd {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
#meetingDetails dt {
  color: var(--muted);
}
.meeting-guide {
  line-height: 1.8;
  max-width: 850px;
}
#meetingComposer .dialog-actions {
  flex-wrap: wrap;
}
#meetingDetails .sub a {
  color: var(--accent);
}
@media (max-width: 900px) {
  .meeting-columns {
    grid-template-columns: 1fr;
  }
  .cloud-panel {
    padding: 14px;
  }
  #cloudAccount {
    width: 100%;
    justify-content: space-between;
  }
  .actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .actions button {
    font-size: 11px;
  }
  #meetingComposer .form-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .cloud-panel {
    margin-top: 15px;
  }
  #cloudAccount small {
    font-size: 10px;
    overflow-wrap: anywhere;
    max-width: 200px;
  }
  .meeting-columns {
    gap: 10px;
  }
}
body:has(#meetingsView.active) .intro,
body:has(#meetingsView.active) .stats {
  display: none;
}
.meeting-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 20px;
  font-size: 10px;
  padding: 0 5px;
}
body:has(#friendsView.active) .intro,
body:has(#friendsView.active) .stats {
  display: none;
}
.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
}
.social-panel h3 {
  margin: 0 0 16px;
  font-weight: 550;
}
.social-panel h3:not(:first-child) {
  margin-top: 25px;
}
.friend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.friend-row > div {
  min-width: 0;
}
.friend-row b {
  overflow-wrap: anywhere;
}
.friend-row small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
  line-height: 1.6;
}
.friend-row button {
  padding: 7px 9px;
  font-size: 10px;
  margin: 3px;
}
.friend-row select {
  display: block;
  width: 100%;
  margin: 6px 0;
}
.friend-pick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 0;
}
.friend-pick input {
  margin-top: 4px;
  flex-shrink: 0;
}
.friend-pick small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
}
.friend-search {
  display: flex;
  gap: 10px;
  align-items: end;
}
.friend-search label {
  flex: 1;
  min-width: 0;
}
.friend-search button {
  margin-bottom: 16px;
}
.friend-calendar-panel {
  margin-bottom: 22px;
}
.meeting-friends {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 15px;
  margin: 20px 0 8px;
}
.meeting-friends legend {
  font-size: 12px;
  padding: 0 6px;
}
#meetingFriendPicker {
  grid-template-columns: 1fr 1fr;
  gap: 0 15px;
}
.meeting-planner {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.meeting-planner h3 {
  margin: 0 0 10px;
}
.availability-track {
  background: #e8eee6;
  border-radius: 5px;
  overflow: hidden;
}
.availability-track > span {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--accent);
  min-width: 2px;
  border-radius: 3px;
}
.availability-track.unknown {
  background: repeating-linear-gradient(135deg, #eee7df 0, #eee7df 5px, #faf7f3 5px, #faf7f3 10px);
}
#plannerResult .notice {
  font-size: 11px;
}
#plannerResult h4 {
  font-weight: 550;
  font-size: 12px;
}
.social-panel .sub {
  line-height: 1.8;
}
@media (max-width: 1000px) {
  .social-grid {
    grid-template-columns: 1fr;
  }
  .social-panel {
    padding: 20px;
  }
}
@media (max-width: 760px) {
  #meetingFriendPicker {
    grid-template-columns: 1fr;
  }
  .planner-controls {
    flex-wrap: wrap;
  }
  .planner-controls button {
    width: 100%;
  }
  .friend-row {
    flex-wrap: wrap;
  }
  .friend-row > div:last-child {
    flex: 1;
  }
  .social-panel .form-row {
    grid-template-columns: 1fr;
  }
  .friend-search {
    flex-wrap: wrap;
  }
  .friend-search label {
    flex-basis: 100%;
  }
  .friend-search button {
    margin: 0 0 15px;
  }
}
.availability-ticks {
  position: relative;
  height: 12px;
}
.availability-ticks span {
  position: absolute;
  top: 0;
}
.availability-ticks span:nth-child(1) {
  left: 0;
}
.availability-ticks span:nth-child(2) {
  left: 33.333%;
  transform: translateX(-50%);
}
.availability-ticks span:nth-child(3) {
  left: 66.666%;
  transform: translateX(-50%);
}
.availability-ticks span:nth-child(4) {
  right: 0;
}
.local-mode-note {
  flex-basis: 100%;
  line-height: 1.7;
  margin: 0;
  padding: 10px;
  background: white;
  border-radius: 7px;
  color: var(--muted);
}
.calendar-overlays {
  border-block: 1px solid #f3dfcf;
}
.calendar-overlays label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 16px 4px 0;
}
.calendar-overlays input {
  accent-color: #b54708;
}
.event[data-friend-event],
.month-event[data-friend-event] {
  background: #d3dfe7 !important;
  color: #233847 !important;
  border-color: #607e93 !important;
  border-style: dashed !important;
}
#friendCalendarOverlays {
  display: inline;
}
#calendarReminders .meeting-card {
  margin-top: 12px;
} /* Shared calendar blocks use a muted slate palette with readable text in both themes. */
:root[data-theme='dark'] .event[data-friend-event],
:root[data-theme='dark'] .month-event[data-friend-event] {
  background: #304454 !important;
  color: #eef3f7 !important;
  border-color: #7798b0 !important;
}
.event[data-friend-event] .event-title,
.month-event[data-friend-event] .event-title {
  color: inherit !important;
} /*  ===== Abschnitt aus minimal.css =====  */
aside {
  width: 208px;
  padding: 28px 16px;
}
.brand {
  font-size: 23px;
  letter-spacing: -0.7px;
  gap: 10px;
  padding: 0 10px;
  margin-bottom: 36px;
}
.brand img {
  display: block;
  flex: none;
}
nav {
  gap: 4px;
}
nav button {
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.meeting-badge {
  margin-left: auto;
}
.nav-status {
  margin-top: auto;
  padding: 22px 12px 0;
  font-size: 11px;
}
.top {
  margin: 0 0 23px;
}
.top h1 {
  margin: 0;
}
.actions button {
  padding: 10px 15px;
}
.primary {
  border-radius: 7px;
}
button {
  border-radius: 7px;
  font-size: 12px;
  box-shadow: none;
}
button:hover {
  background: #faf5f0;
}
.primary:hover {
  color: white;
}
.layout {
  display: block;
}
.calendar-head small {
  display: none;
}
.calendar-overlays {
  padding: 9px 18px;
}
.calendar-overlays label {
  font-size: 11px;
  margin-right: 14px;
}
.calendar-overlays p {
  font-size: 10px;
  margin: 5px 0 0;
}
.friend-dropdown summary {
  font-size: 11px;
  padding: 6px 10px;
}
.day {
  padding: 9px 0;
}
.day b {
  font-size: 17px;
}
.connection-heading {
  margin: 0 0 16px;
  min-height: 0;
  justify-content: flex-end;
}
.connection-heading:empty {
  display: none;
}
.connection-heading h2,
.connection-heading h3 {
  font:
    600 17px/1.4 system-ui,
    sans-serif;
  margin: 0;
}
.social-grid {
  gap: 18px;
  align-items: start;
}
.social-panel {
  padding: 20px;
}
.social-panel h3 {
  font-size: 14px;
  margin-bottom: 15px;
}
.social-panel .sub {
  font-size: 11px;
}
.friend-row {
  padding: 13px 0;
}
.friend-row:last-child {
  border-bottom: 0;
}
.friend-calendar-panel {
  padding: 18px 20px;
}
.mode-help {
  font-size: 10px;
}
.list-panel {
  max-width: none;
  border: 0;
  background: transparent;
  padding: 0;
}
.list-panel .calendar-head {
  padding: 0 0 12px !important;
  justify-content: flex-end;
}
.task {
  padding: 18px 5px;
}
.task strong {
  font-size: 13px;
}
.notification-toolbar {
  align-items: center;
}
.notification-toolbar .field {
  margin: 0;
  font-size: 0;
  min-width: 230px;
}
.notification-list {
  gap: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}
.notification-list .meeting-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.notification-list .meeting-card:last-child {
  border-bottom: 0;
}
.notification-list h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 4px;
}
.notification-list p {
  margin: 4px 0;
  font-size: 12px;
}
.notification-meta {
  font-size: 10px;
  gap: 10px;
}
.notification-meta time {
  margin-left: auto;
}
.notification-actions {
  margin-top: 11px;
  gap: 7px;
}
.notification-actions button {
  padding: 7px 10px;
  font-size: 11px;
}
.notification-list .meeting-empty {
  border: 0;
}
.notification-list .status-open {
  color: #ad450b;
}
.chart-dashboard {
  gap: 18px;
}
.chart-card {
  padding: 20px;
}
.chart-card h3 {
  font:
    600 16px/1.4 system-ui,
    sans-serif;
  letter-spacing: 0;
}
.chart-toolbar {
  margin: 17px 0 13px;
}
.chart-caption strong {
  font-size: 22px;
}
.analysis-note {
  font-size: 10px;
  background: transparent;
  padding: 0;
  color: #858585;
}
.goal-summary {
  padding: 20px;
}
.goal-summary h3 {
  font-size: 15px;
}
.goal-summary .sub {
  display: none;
}
.goal-summary .connection-heading {
  justify-content: space-between;
}
.settings-tabs {
  border-bottom: 1px solid var(--line);
}
.settings-tabs button {
  border-bottom: 2px solid transparent;
}
.settings-pane .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 22px;
}
.settings-pane .rhythm-panel {
  max-width: 780px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.settings-pane .connection-heading {
  justify-content: space-between;
}
.help-details {
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  margin: 14px 0 0;
}
.help-details summary {
  cursor: pointer;
}
.category-grid {
  display: block;
  max-width: 850px;
  border-top: 1px solid var(--line);
}
.category-card {
  display: flex;
  gap: 12px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 16px 0 !important;
}
.category-card h3 {
  font-size: 13px;
  margin: 0 0 4px;
}
.category-card button {
  margin-left: auto;
}
.category-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.cloud-panel {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 20px 0 0;
  border-radius: 0;
}
.cloud-panel #cloudStatus {
  font-size: 11px;
}
.cloud-panel #cloudActions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.local-mode-note {
  font-size: 10px;
}
.sync-issue {
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid #e8b29c;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.sync-issue[hidden] {
  display: none;
}
.sync-issue button {
  white-space: nowrap;
}
.account-details {
  margin: 18px 0;
}
.account-details dt {
  font-size: 11px;
}
.account-details dd {
  font-size: 12px;
}
#friendsView .social-grid {
  grid-template-columns: 1fr;
}
#friendsView > .social-grid:has(#followingList) {
  max-width: 100%;
}
#friendsView .friend-calendar-panel {
  display: none;
}
#notificationHistoryStatus:empty {
  display: none;
}
#notificationHistoryStatus {
  font-size: 10px;
  margin: 10px 0;
}
dialog h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.field {
  font-size: 12px;
}
#toast {
  border-radius: 7px;
  font-size: 12px;
}
#invitationPreviewBanner {
  padding: 11px 14px;
  border-radius: 6px;
  margin: 0 18px 14px;
  font-size: 11px;
}
@media (max-width: 1100px) {
  main {
    padding: 24px;
  }
  .settings-pane .social-grid {
    gap: 24px;
  }
  .chart-dashboard {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  aside {
    position: static;
    width: auto;
    padding: 16px 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    font-size: 21px;
    margin: 0 0 15px;
    padding: 0;
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  .nav-status {
    display: none;
  }
  nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    margin: 0;
  }
  nav button {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    border-radius: 5px 5px 0 0;
  }
  main {
    margin: 0;
  }
  .top {
    margin-bottom: 18px;
  }
  .top h1 {
    font-size: 22px;
  }
  :is(#calendarViewport, .zr-viewport).time-viewport {
    max-height: calc(100dvh - 320px);
    min-height: 270px;
  }
  .calendar-switch {
    padding: 0 12px 12px;
    gap: 4px;
  }
  .calendar-switch button {
    padding: 7px 8px;
    font-size: 10px;
  }
  .calendar-head {
    padding: 14px 12px;
  }
  .calendar-overlays {
    padding: 7px 12px;
  }
  .calendar-overlays label {
    font-size: 10px;
  }
  .friend-dropdown[open] #friendCalendarOverlays {
    left: auto;
    right: 0;
  }
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .settings-tabs button {
    flex: none;
    white-space: nowrap;
    padding: 10px 11px;
    font-size: 11px;
  }
  .settings-pane .social-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .notification-toolbar {
    gap: 10px;
  }
  .notification-toolbar .field {
    min-width: 200px;
    flex: 1;
  }
  .notification-list .meeting-card {
    padding: 14px;
  }
  .notification-meta {
    font-size: 9px;
    gap: 7px;
  }
  .notification-meta time {
    margin-left: 0;
    flex-basis: 100%;
  }
  .notification-actions button {
    font-size: 10px;
  }
  .chart-card {
    padding: 16px;
  }
  .sync-issue {
    flex-wrap: wrap;
  }
  .category-actions {
    width: auto;
  }
  .category-actions button {
    flex: none;
  }
  .category-card {
    flex-wrap: wrap;
  }
  .brand + .tag {
    display: none;
  }
}
.goal-summary > summary {
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.goal-summary[open] > summary {
  margin-bottom: 20px;
}
.goal-summary .connection-heading h3 {
  display: none;
}
.help-details.analysis-note {
  font-size: 10px;
  line-height: 1.8;
}
#friendsView .social-panel:has(#followingList) {
  max-width: none;
}
#settingsView label.field small {
  font-size: 10px;
}
.view > .connection-heading[hidden] {
  display: none;
}
.top .actions:empty {
  display: none;
}
#notificationList .notification-meta {
  font-size: 11px;
}
.event {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.event[data-automatic-event^='auto_offen'] {
  z-index: 0;
}
.event[data-daily-log] {
  flex-direction: row;
  align-items: center;
}
#calendarView .panel {
  isolation: isolate;
}
#friendsView > .mode-help {
  display: none;
}
#settingsAccount #cloudAccount > div {
  display: none;
}
#settingsView .help-details {
  margin-top: 12px;
}
.notification-toolbar {
  justify-content: flex-start;
}
#friendsView .social-panel:has(#blockedList) {
  padding-top: 0;
  border: 0;
  background: transparent;
}
#settingsView #settingsAccountNote {
  font-size: 11px;
}
:is(#calendarViewport, .zr-viewport).time-viewport {
  height: var(--calendar-viewport-height, 70vh);
  max-height: none;
}
:is(#timeCalendar, .zr-calendar) .grid {
  height: calc(var(--hour-height, 48px) * 24);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--hour-height, 48px) - 1px),
    var(--line) calc(var(--hour-height, 48px) - 1px),
    var(--line) var(--hour-height, 48px)
  );
}
:is(#timeCalendar, .zr-calendar) .hours div {
  height: var(--hour-height, 48px);
}
:is(#timeCalendar, .zr-calendar) :is(#allDayEvents, .zr-all-day):not([hidden]) {
  position: sticky;
  top: var(--days-height, 60px);
  z-index: 5;
}
.current-time-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #d64932;
  z-index: 4;
  pointer-events: none;
}
.current-time-line:before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  left: -4px;
  top: -2.5px;
  border-radius: 50%;
  background: #d64932;
}
.current-time-line > span {
  position: absolute;
  right: 3px;
  top: -15px;
  font-size: 10px;
  font-weight: 650;
  color: #bf3b26;
  padding: 0 3px;
  border-radius: 2px;
}
#dailyLogDialog input[type='time'] {
  font-variant-numeric: tabular-nums;
}
.friends-primary {
  margin-bottom: 20px;
}
.friend-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.friend-options {
  position: relative;
}
.friend-options > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 12px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.friend-options[open] {
  z-index: 6;
}
.friend-options[open] > .field,
.friend-options[open] > button {
  display: block;
  margin-top: 10px;
}
.friend-options .field {
  min-width: 200px;
}
.friend-options[open] {
  padding: 0 0 10px;
}
.friend-options button {
  width: 100%;
}
@media (max-width: 600px) {
  .friends-primary .friend-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .friend-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .friend-options .field {
    min-width: 180px;
  }
}
.event-search {
  margin-bottom: 16px;
}
.event-search form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.event-search label {
  font-size: 11px;
  color: var(--muted);
}
.search-input {
  flex: 1;
}
.event-search input[type='search'],
.event-search select {
  display: block;
  width: 100%;
  margin-top: 0;
  font: inherit;
}
.search-category {
  min-width: 160px;
}
.event-search form > button {
  padding: 11px 15px;
}
#eventSearchPanel {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#eventSearchPanel[hidden] {
  display: none;
}
.search-results-heading,
.search-bulk {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.search-results-heading p {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.search-bulk {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.search-bulk label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-bulk select {
  margin: 0;
  width: auto;
  min-width: 160px;
}
.search-result {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.search-result b {
  display: block;
  font-size: 12px;
  color: var(--ink);
}
.search-result small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.search-result-category {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 11px;
}
.search-result-category i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.category-row-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.category-row-actions button {
  margin-left: 0;
}
.field[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  .event-search form {
    flex-wrap: wrap;
  }
  .search-input {
    flex-basis: 100%;
  }
  .search-category {
    flex: 1;
  }
  .search-result {
    flex-wrap: wrap;
  }
  .search-result-category {
    margin-left: 26px;
  }
  .category-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.friend-code-share {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
}
.friend-code-link {
  flex: 1;
  min-width: 0;
}
.friend-qr-block {
  text-align: center;
  flex: 0 0 240px;
}
.friend-qr-block canvas {
  width: 240px;
  height: 240px;
  max-width: 100%;
  image-rendering: pixelated;
  background: white;
}
.friend-qr-block canvas[hidden] {
  display: none;
}
.friend-code-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.friend-code-form > .field {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.friend-code-form button {
  height: 40px;
  white-space: nowrap;
}
.camera-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
}
.friend-code-form input {
  width: 100%;
}
#friendScanDialog {
  width: min(460px, calc(100vw - 32px));
  max-height: 90dvh;
  overflow: auto;
}
#friendScanVideo {
  display: block;
  width: 100%;
  max-height: 50dvh;
  min-height: 180px;
  object-fit: cover;
  background: #161616;
  border-radius: 8px;
}
@media (max-width: 700px) {
  .friend-code-share {
    flex-direction: column;
    align-items: stretch;
  }
  .friend-qr-block {
    flex: auto;
  }
  .friend-code-form {
    flex-wrap: wrap;
  }
  .friend-code-form > .field {
    flex-basis: 100%;
  }
}
.meeting-friend-dropdown summary {
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
}
.meeting-friend-menu {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-top: 5px;
}
.meeting-friend-menu .field {
  margin-bottom: 8px;
}
#meetingFriendPicker {
  display: block;
}
#meetingFriendPicker .friend-pick[hidden],
#friendCalendarOverlays label[hidden] {
  display: none;
}
.friend-overlay-menu {
  display: none;
}
.friend-dropdown[open] .friend-overlay-menu {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  max-width: 80vw;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px #33221122;
  border-radius: 7px;
  z-index: 20;
}
.friend-dropdown[open] #friendCalendarOverlays {
  position: static;
  display: grid;
  max-height: 240px;
  overflow: auto;
  padding: 0;
  box-shadow: none;
  border: 0;
  min-width: 0;
}
.friend-overlay-menu .field {
  font-size: 11px;
  margin-bottom: 8px;
}
.friend-overlay-menu input[type='search'] {
  width: 100%;
}
.friend-overlay-menu small {
  color: var(--muted);
  font-size: 10px;
}
.planner-slot-controls {
  display: flex;
  flex-wrap: wrap;
}
.planner-slot-controls .field {
  margin: 0;
  flex: 1;
}
.planner-slot-controls input {
  width: 100%;
}
#plannerSlotDuration {
  font-size: 11px;
  padding-bottom: 10px;
}
.planner-slot-summary {
  font-weight: 600;
}
.planner-scroll {
  overflow-x: auto;
  padding: 8px 0 0;
}
.planner-chart {
  min-width: 400px;
}
.planner-chart-head {
  display: grid;
  grid-template-columns: 120px 1fr;
  font-size: 10px;
  color: var(--muted);
  padding-bottom: 7px;
}
.planner-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
}
.planner-names > div,
.planner-lane {
  height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid #fff;
}
.planner-names > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
  overflow: hidden;
}
.planner-names b {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planner-names small {
  font-size: 10px;
  color: var(--muted);
}
.planner-names small[data-status='busy'] {
  color: #af450b;
}
.planner-names small[data-status='free'] {
  color: #47744b;
}
.planner-lanes {
  position: relative;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.planner-lane {
  position: relative;
  background: #e5eee3;
}
.planner-lane.unknown {
  background: repeating-linear-gradient(135deg, #eee7df 0, #eee7df 5px, #faf7f3 5px, #faf7f3 10px);
}
.planner-busy {
  position: absolute;
  top: 0;
  height: 100%;
  background: #c46a30;
  min-width: 2px;
}
.planner-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #526ea238;
  border: 2px solid #526ea2;
  min-width: 8px;
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
}
.planner-slot:active {
  cursor: grabbing;
}
.planner-slot:focus-visible,
.planner-slot-handle:focus-visible {
  outline: 3px solid #293d76;
  outline-offset: 2px;
}
.planner-slot-label {
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: 10px;
  white-space: nowrap;
  background: #fffdf3e8;
  padding: 2px 4px;
  pointer-events: none;
  color: #293d76;
  border-radius: 3px;
}
.planner-slot-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.planner-slot-handle:after {
  content: '';
  position: absolute;
  top: 40%;
  height: 20%;
  width: 3px;
  background: #344b7c;
  border-radius: 2px;
  left: 5px;
}
.planner-slot-handle.start {
  left: -7px;
}
.planner-slot-handle.end {
  right: -7px;
}
@media (max-width: 760px) {
  .friend-dropdown[open] .friend-overlay-menu {
    left: auto;
    right: 0;
  }
  .planner-slot-label {
    top: 14px;
  }
  .meeting-planner {
    padding: 12px;
  }
}
#notificationList .notification-open {
  border-left: 4px solid #c66a17;
  padding-left: 16px;
}
#notificationList :is(.notification-done, .notification-waiting) {
  border-left: 4px solid #e8e8e6;
  padding-left: 16px;
}
#notificationList .notification-open .status-open {
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
}
.friend-identity {
  display: flex;
  gap: 12px;
  align-items: center;
}
.profile-photo-editor {
  flex-wrap: wrap;
  margin-bottom: 22px;
}
/* Crop dialog for the profile picture (profile-photo.js): square stage with a round frame, zoom slider below. */
.avatar-crop-dialog {
  width: min(380px, calc(100vw - 32px));
}
.avatar-crop-dialog .avatar-crop-stage {
  display: block;
  width: min(300px, 100%);
  aspect-ratio: 1;
  margin: 14px auto;
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  cursor: grab;
  touch-action: none;
}
.avatar-crop-dialog .avatar-crop-stage:active {
  cursor: grabbing;
}
.avatar-crop-dialog .avatar-crop-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.avatar-crop-dialog .avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(300px, 100%);
  margin: 0 auto 16px;
  color: var(--muted);
  font-size: 18px;
}
.avatar-crop-dialog .avatar-crop-zoom input {
  flex: 1;
  accent-color: var(--accent);
}
.profile-photo-editor .profile-avatar {
  width: 64px;
  height: 64px;
}
.profile-photo-editor .field {
  flex: 1;
}
.profile-photo-editor p {
  flex-basis: 100%;
  margin: 0;
}
.calendar-filter-dropdown {
  display: inline-block;
  position: relative;
  margin: 5px 5px 5px 0;
}
.calendar-filter-dropdown summary {
  cursor: pointer;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 11px;
}
.calendar-filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-height: 300px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  z-index: 25;
  box-shadow: 0 8px 24px #2222;
}
.calendar-filter-menu label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  margin: 0 !important;
}
.calendar-filter-menu small {
  font-size: 9px;
  color: var(--muted);
}
.calendar-filter-menu i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.day-planner-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.day-planner-head {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
}
.day-planner-head > span {
  font-size: 9px;
  padding: 8px 3px;
  color: var(--muted);
}
.day-planner-head > div {
  border-left: 1px solid var(--line);
}
.day-planner-head b {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-planner-head small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.day-planner-head small[data-status='busy'] {
  color: #af450b;
}
.day-planner-head small[data-status='free'] {
  color: #47744b;
}
.day-planner-body {
  display: grid;
}
.day-planner-hours span {
  display: block;
  color: var(--muted);
  box-sizing: border-box;
}
.day-planner-columns {
  display: flex;
  position: relative;
  touch-action: pan-x;
  user-select: none;
  cursor: crosshair;
}
.day-planner-column {
  position: relative;
  flex: 1;
  min-width: 130px;
  border-left: 1px solid var(--line);
  background: transparent;
}
.day-planner-event {
  position: absolute;
  left: 3px;
  right: 3px;
  min-height: 4px;
  background: #c46a3033;
  border-left: 3px solid #c46a30;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.day-planner-event small,
.day-planner-event b {
  display: block;
}
.day-planner-slot {
  position: absolute;
  left: 0;
  right: 0;
  border: 2px solid #526ea2;
  min-height: 10px;
  box-sizing: border-box;
  z-index: 3;
  cursor: grab;
  touch-action: none;
}
.day-slot-label {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 10px;
  padding: 2px 5px;
  pointer-events: none;
}
.day-slot-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  cursor: ns-resize;
  touch-action: none;
  z-index: 4;
}
.day-slot-handle.start {
  top: -6px;
}
.day-slot-handle.end {
  bottom: -6px;
}
.day-slot-handle:after {
  content: '';
  position: absolute;
  left: 45%;
  width: 10%;
  height: 3px;
  top: 4px;
  border-radius: 2px;
}
.day-planner-slot:focus-visible,
.day-slot-handle:focus-visible {
  outline: 2px solid #293d76;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .day-planner-scroll {
    height: 340px;
  }
  .calendar-filter-menu {
    min-width: 210px;
    max-width: 80vw;
  }
  .profile-photo-editor {
    gap: 10px;
  }
}
.duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: -3px 0 16px;
}
.duration-presets > span {
  font-size: 11px;
  color: var(--muted);
  margin-right: 5px;
}
.duration-presets button {
  font-size: 11px;
  padding: 7px 10px;
}
.recurrence-fields {
  margin: 15px 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.recurrence-fields .form-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.recurrence-fields .field {
  flex: 1;
  min-width: 0;
}
/* Rhythm on its own line, "Alle" and "Enddatum" side by side below it (stacked on very small screens). */
.recurrence-fields .form-row:has(#eventRepeat) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.recurrence-fields .form-row:has(#eventRepeat) > .field:first-child {
  grid-column: 1 / -1;
}
@media (max-width: 380px) {
  .recurrence-fields .form-row:has(#eventRepeat) {
    grid-template-columns: minmax(0, 1fr);
  }
}
.recurrence-fields [hidden] {
  display: none !important;
}
.routine-actions {
  margin-bottom: 22px;
}
.routine-list {
  margin-bottom: 22px;
}
.routine-card {
  display: flex;
  gap: 10px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.routine-card > div {
  flex: 1;
  min-width: 0;
}
.routine-card b {
  font-size: 13px;
}
.routine-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 5px;
}
.routine-card button {
  padding: 8px 11px;
}
.routine-planner-panel {
  padding: 20px;
}
.routine-week-controls {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}
.routine-week-controls .field {
  margin: 0;
  flex: 1;
  min-width: 130px;
}
.routine-week-controls {
  margin-bottom: 18px;
}
.routine-week-controls button {
  padding: 11px;
}
/* Einplanen: eine Zeile direkt unter der Routinenauswahl – Tag, Uhrzeit, Knopf.
   Titel und Fortschritt stehen schon in der Auswahl und bleiben nur für Screenreader. */
#routineWizard {
  margin: 0 0 12px;
}
#routineWizard[hidden] {
  display: none;
}
.routine-slot-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.routine-slot-controls .field {
  margin: 0;
  min-width: 0;
}
.routine-slot-controls .field input {
  width: 100%;
  min-width: 0;
}
.routine-slot-controls button {
  white-space: nowrap;
}
.routine-week-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.routine-week-inner {
  min-width: 0;
}
.routine-week-head {
  display: grid;
  grid-template-columns: 48px repeat(7, 1fr);
  position: sticky;
  top: 0;
  z-index: 7;
  border-bottom: 1px solid var(--line);
}
.routine-week-head > div {
  text-align: center;
  border-left: 1px solid var(--line);
}
.routine-week-body {
  display: grid;
}
.routine-week-hours span {
  display: block;
  box-sizing: border-box;
  color: var(--muted);
}
.routine-week-lanes {
  position: relative;
  display: flex;
  touch-action: pan-x;
}
.routine-week-column {
  flex: 1;
  border-left: 1px solid var(--line);
  cursor: crosshair;
}
.routine-calendar-event {
  position: absolute;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  border: 0;
  border-left: 3px solid;
  border-radius: 4px;
  display: block;
  text-align: left;
  z-index: 1;
  color: var(--ink);
  opacity: 0.8;
}
.routine-calendar-event small,
.routine-calendar-event b {
  display: block;
}
.routine-calendar-event:disabled {
  cursor: default;
  opacity: 0.7;
}
.routine-calendar-event.movable {
  cursor: grab;
  touch-action: none;
  opacity: 1;
  z-index: 2;
}
/* Only the dialog body scrolls (no second scrollbar on the dialog itself). */
#routineDialog {
  width: min(600px, calc(100vw - 24px));
  max-height: 90dvh;
  overflow: hidden;
}
@media (max-width: 760px) {
  .routine-planner-panel {
    padding: 12px;
  }
  .routine-card > div {
    flex-basis: 100%;
  }
  .routine-week-scroll {
    height: 360px;
  }
  .recurrence-fields .form-row {
    flex-wrap: wrap;
  }
  .recurrence-fields .field {
    min-width: 100px;
  }
} /*  ===== Abschnitt aus theme.css =====  */
:root {
  color-scheme: light;
  --accent-hover: #ff7b24;
  --danger: #b52d26;
  --shade: 0 8px 30px #3b28121a;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --accent-hover: #ff985d;
  --danger: #ff9089;
  --shade: 0 8px 30px #0005;
}
aside,
.panel,
dialog,
.category-card,
.notification-list,
.meeting-card,
.calendar-filter-menu,
.friend-overlay-menu,
.friend-dropdown[open] #friendCalendarOverlays,
.meeting-friend-menu,
.friend-options[open],
.day-planner-scroll,
.routine-week-scroll,
.routine-planner-panel {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
aside {
  border-color: var(--line);
}
.brand,
nav button,
.top h1,
h2,
h3,
h4,
b,
strong {
  color: var(--ink);
}
.primary,
.dialog-tick {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.primary:hover,
.dialog-tick:hover {
  background: var(--accent-hover);
}
button,
a.button-link {
  color: var(--ink);
}
button:not(.primary):not(.event):not(.month-event):not(.routine-calendar-event):not(.dialog-tick) {
  border-color: var(--line);
}
button:not(.primary):not(.event):not(.month-event):not(.routine-calendar-event):hover {
  background: var(--tint);
}
nav button {
  background: transparent;
  color: var(--muted);
}
nav button.active {
  background: var(--tint);
  color: var(--ink);
  box-shadow: inset 3px 0 var(--accent);
}
.meeting-badge {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
input,
select,
textarea,
.event-search input[type='search'],
.event-search select,
.friend-overlay-menu input[type='search'] {
  accent-color: var(--accent);
}
input[type='checkbox'] {
  accent-color: var(--accent);
}
.sub,
small,
.field,
dt,
.goal-period,
.chart-caption,
.notification-meta,
.notification-time-label,
.nav-status {
  color: var(--muted);
}
a {
  color: var(--accent);
}
.calendar-head,
.calendar-overlays,
:is(#timeCalendar, .zr-calendar) .days,
.day-planner-head,
.routine-week-head,
.month-weekdays {
  background: var(--surface);
  border-color: var(--line);
}
.calendar-switch button,
.friend-dropdown summary,
.calendar-filter-dropdown summary,
.meeting-friend-dropdown summary {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}
.calendar-switch button[aria-pressed='true'],
.duration-presets button[aria-pressed='true'] {
  background: var(--tint);
  color: var(--ink);
  border-color: var(--accent);
}
.column,
.month-day,
.task,
.friend-row,
.routine-card,
.category-card,
.goal-summary,
.settings-tabs {
  border-color: var(--line);
}
.month-day {
  background: var(--surface);
}
.month-day.outside-month {
  background: var(--paper);
}
.month-day.is-today,
.day.today {
  background: var(--tint);
}
#eventSearchPanel,
.notification-list .meeting-empty,
.notice {
  background: var(--surface-raised);
  color: var(--ink);
  border-color: var(--line);
}
.bar {
  background: var(--line);
}
#notificationList .notification-open {
  background: var(--tint);
  border-left-color: var(--accent);
}
#notificationList :is(.notification-done, .notification-waiting) {
  background: var(--surface);
  border-left-color: var(--line);
}
#notificationList .notification-open .status-open {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
/* Own requests in "Gesendet": nothing to do, a calm badge instead of the orange "Offen". */
#notificationList .notification-waiting .status-waiting {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}
.sync-issue,
#invitationPreviewBanner {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--ink);
}
.current-time-line > span {
  background: var(--surface);
}
#dailyLogDialog .dialog-actions {
  background: var(--surface);
}
.avatar-placeholder {
  background: var(--tint);
  color: var(--accent-strong);
}
.target-goal-card {
  padding: 20px;
  margin-bottom: 14px;
}
.goal-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.goal-card-head h3 {
  margin: 0 auto 0 0;
  font-size: 15px;
}
.goal-card-head button {
  padding: 7px 10px;
  font-size: 11px;
}
.target-goal-card > .bar {
  margin: 12px 0;
}
.target-goal-card summary {
  cursor: pointer;
  font-size: 12px;
}
.target-goal-card > strong {
  font-size: 17px;
}
.goal small {
  display: block;
  margin-top: 6px;
}
.share-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.8 system-ui;
  color: var(--ink);
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.share-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.share-actions button,
.share-actions a {
  padding: 10px 12px;
}
#forwardFriendList {
  max-height: 320px;
  overflow: auto;
}
#forwardFriendList label[hidden] {
  display: none;
}
dialog {
  padding: 0 !important;
  overflow: auto;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  background: var(--surface);
}
.dialog-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 10px #00000008;
}
.dialog-topbar h2 {
  margin: 0 !important;
  line-height: 1.35;
  flex: 1;
}
.dialog-topbar-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
.dialog-icon {
  padding: 0;
  cursor: pointer;
  flex: none;
}
.dialog-x {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
}
.dialog-action-status {
  font-size: 10px;
  max-width: 110px;
  color: var(--muted);
}
.dialog-proxy-original {
  display: none !important;
}
.dialog-actions:not(:has(button:not(.dialog-proxy-original):not([hidden]))) {
  display: none !important;
}
.dialog-actions {
  position: static !important;
  background: transparent;
}
.dialog-body > form > h2 {
  display: none;
}
#placeDialog {
  width: min(740px, calc(100vw - 24px));
}
.place-search {
  display: flex;
  gap: 10px;
  align-items: end;
}
.place-search .field {
  flex: 1;
  margin: 0;
}
.place-search button {
  padding: 11px 16px;
}
#placeResults {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  max-height: 170px;
  overflow: auto;
}
#placeResults button {
  padding: 9px;
  text-align: left;
  font-size: 12px;
  background: var(--surface-raised);
}
.place-map-wrap {
  position: relative;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.place-map-wrap #placeMap {
  height: 320px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  background: #ddd8c8;
  cursor: crosshair;
}
.place-map-wrap #placeMap img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.map-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #f46b13;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 6px #0007;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  gap: 4px;
}
.map-zoom button {
  background: var(--surface);
  width: 34px;
  height: 34px;
  font-size: 20px;
  padding: 0;
}
.map-attribution {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fffffff0;
  color: #28231d;
  font-size: 10px;
  padding: 3px 6px;
  text-decoration: none;
}
.event {
  white-space: normal !important;
  min-height: 24px;
  line-height: 1.25;
  scrollbar-width: thin;
  text-align: left;
}
.event b,
.event small {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
.event b {
  font-weight: 650;
}
.event-location {
  display: block;
}
.event.point-event {
  display: flex;
  flex-direction: row;
  min-height: 24px;
  overflow: hidden !important;
}
.month-event {
  white-space: normal;
  overflow: visible;
  text-align: left;
}
.month-event small,
.month-event b {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.month-events {
  gap: 6px;
}
:is(#timeCalendar, .zr-calendar) {
  min-width: 0;
}
.day-planner-scroll,
.routine-week-scroll {
  background: var(--surface);
}
.day-planner-column.unknown {
  background: repeating-linear-gradient(135deg, #99999922 0, #99999922 5px, transparent 5px, transparent 10px);
}
.day-planner-event {
  color: var(--ink);
}
.day-planner-slot {
  background: #f46b1333;
  border-color: var(--accent);
}
.day-slot-label {
  background: var(--surface);
  color: var(--ink);
}
.day-slot-handle:after {
  background: var(--accent);
}
@media (max-width: 760px) {
  .dialog-topbar {
    padding: 11px 12px;
    gap: 8px;
  }
  .dialog-topbar h2 {
    font-size: 17px;
  }
  .dialog-action-status {
    max-width: 70px;
    font-size: 9px;
  }
  .dialog-icon {
    width: 38px;
    height: 38px;
  }
  .place-map-wrap #placeMap {
    height: 270px;
  }
  .goal-card-head h3 {
    flex-basis: 100%;
  }
}
:root[data-theme='dark']
  button:not(.danger-button):not(.primary):not(.event):not(.month-event):not(.routine-calendar-event):not(
    .dialog-tick
  ):not([data-view]):not([data-palette-color]) {
  background-color: var(--surface-raised);
  color: var(--ink);
}
:root[data-theme='dark'] button:disabled {
  opacity: 0.5;
}
:root[data-theme='dark'] #toast {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
:root[data-theme='dark'] button.active:not(.primary):not([data-view]),
:root[data-theme='dark'] button[aria-pressed='true']:not(.primary):not([data-palette-color]) {
  background: var(--tint);
  color: var(--accent);
}
.brand img {
  filter: saturate(1.25);
}
body:has(#calendarView.active) main {
  padding: 20px 24px;
}
#calendarView .calendar-overlays {
  padding: 6px 14px;
}
:is(#timeCalendar, .zr-calendar) .days,
:is(#timeCalendar, .zr-calendar) .grid {
  grid-template-columns: 40px repeat(var(--day-count, 7), minmax(0, 1fr));
}
.search-result-select {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}
.search-result-select > span {
  min-width: 0;
}
.search-result button,
.search-result > a {
  flex: none;
  padding: 8px 10px;
  font-size: 11px;
}
.search-result {
  cursor: default;
}
.search-result-category {
  flex: none;
}
.routine-conversion-hint {
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--tint);
  border-radius: 7px;
  line-height: 1.6;
}
#seriesToRoutine {
  margin: 4px 0 12px;
}
@media (max-width: 760px) {
  .search-result {
    flex-wrap: wrap;
  }
  .search-result-select {
    flex-basis: 65%;
  }
} /* Calendar workspaces: compact tools, twelve-hour overview, full-height planning. */
@media (min-width: 761px) {
  aside {
    width: 184px;
    padding: 22px 12px;
  }
  main,
  body:has(#calendarView.active) main {
    margin-left: 184px;
    padding: 16px 20px;
  }
  .brand {
    font-size: 21px;
    padding: 0 8px;
    margin-bottom: 26px;
  }
  nav button {
    padding: 10px 11px;
    font-size: 12px;
  }
}
.top,
body:has(#calendarView.active) .top {
  margin-bottom: 10px;
  min-height: 32px;
}
.top .actions button {
  padding: 7px 11px;
}
#calendarView .controls button {
  padding: 4px 8px;
  min-height: 27px;
}
#calendarView .event-search {
  margin-bottom: 8px;
}
#eventSearchForm {
  gap: 8px;
  align-items: center;
}
#eventSearchForm .search-input,
#eventSearchForm .search-category {
  font-size: 0;
  margin: 0;
}
#eventSearchForm button {
  padding: 0 16px;
  height: var(--field-h);
}
#eventSearchForm .search-category {
  max-width: 150px;
}
#calendarView .day {
  padding: 5px 0;
  font-size: 9px;
}
#calendarView .day b {
  font-size: 14px;
  margin-top: 2px;
}
:is(#timeCalendar, .zr-calendar) .hours div {
  font-size: 9px;
}
.calendar-switch {
  align-items: center !important;
}
.calendar-switch button {
  flex: 0 0 auto;
  align-self: center;
  height: 28px;
  line-height: 1.25;
}
.calendar-switch .field {
  margin: 0;
  flex: none;
}
.calendar-switch .field {
  font-size: 10px;
}
.calendar-overlays:has(#friendOverlayStatus[hidden]) {
  min-height: 0;
}
.event {
  font-size: 10px;
}
.event b {
  font-size: 10px;
}
.event small {
  font-size: 9px;
}
.event .event-location {
  font-size: 9px;
}
body.routine-planning:has(#routinesView.active) .routine-actions,
body.routine-planning:has(#routinesView.active) #routineList {
  display: none;
}
#routinePlannerPanel .routine-week-controls {
  margin-bottom: 8px;
}
#routinePlannerPanel .routine-week-controls .field {
  flex: 0 1 155px;
  min-width: 120px;
  font-size: 10px;
}
#routinePlannerPanel .routine-week-controls button {
  padding: 5px 9px;
  font-size: 10px;
  min-height: 28px;
}
#routinePlannerPanel .calendar-switch {
  padding: 0;
  margin: 6px 0;
}
#routinePlannerPanel .calendar-switch .field {
  width: 145px;
}
#routineWeekStatus {
  font-size: 10px;
  margin: 6px 0;
}
.routine-week-scroll {
  height: var(--routine-viewport-height, 360px);
  margin: 6px 0 0;
}
.routine-week-head > div {
  font-size: 10px;
  padding: 7px 4px;
}
.routine-week-body {
  grid-template-columns: 40px 1fr;
}
.routine-week-hours,
.routine-week-lanes {
  height: calc(var(--routine-hour-height, 24px) * 24);
}
.routine-week-hours span {
  height: var(--routine-hour-height, 24px);
  font-size: 9px;
  padding: 1px 3px;
}
.routine-week-lanes {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--routine-hour-height, 24px) - 1px),
    var(--line) calc(var(--routine-hour-height, 24px) - 1px),
    var(--line) var(--routine-hour-height, 24px)
  );
}
.routine-calendar-event {
  padding: 1px 3px;
  min-height: 5px;
}
.routine-calendar-event b,
.routine-calendar-event small {
  font-size: 9px;
}
#openRoutineWeekCalendar {
  padding: 5px 7px;
  font-size: 10px;
  margin-top: 5px;
}
.dialog-topbar {
  min-height: 46px;
}
.dialog-body .field {
  margin-bottom: 10px;
  font-size: 11px;
}
.dialog-body input:not([type='checkbox']):not([type='radio']),
.dialog-body select {
  padding: 7px 9px;
  font-size: 12px;
  min-height: 32px;
}
.dialog-body .sub {
  font-size: 10px;
  line-height: 1.5;
}
.dialog-body .recurrence-fields {
  margin: 10px 0;
  padding-top: 10px;
}
.meeting-planner {
  padding: 10px !important;
  margin: 10px 0 !important;
}
.meeting-planner h3 {
  font-size: 13px;
  margin-bottom: 7px;
}
.planner-controls .field {
  width: 160px;
}
.planner-controls button {
  font-size: 11px;
  padding: 7px 10px;
}
.planner-slot-controls {
  margin-top: 8px;
  gap: 8px;
  align-items: center;
}
.planner-slot-controls .field {
  max-width: 140px;
  font-size: 10px;
}
.planner-slot-controls button {
  padding: 6px 9px;
  font-size: 10px;
}
.planner-slot-summary {
  font-size: 11px;
  margin: 7px 0;
}
.day-planner-scroll {
  height: var(--planner-viewport-height, 300px);
  margin-top: 6px;
}
.day-planner-inner {
  min-width: calc(40px + var(--people) * 100px);
}
.day-planner-head {
  grid-template-columns: 40px repeat(var(--people), minmax(0, 1fr));
}
.day-planner-head > div {
  padding: 5px;
  font-size: 10px;
}
.day-planner-body {
  grid-template-columns: 40px 1fr;
}
.day-planner-hours,
.day-planner-columns {
  height: calc(var(--planner-hour-height, 24px) * 24);
}
.day-planner-hours span {
  height: var(--planner-hour-height, 24px);
  font-size: 9px;
  padding: 1px 3px;
}
.day-planner-columns {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--planner-hour-height, 24px) - 1px),
    var(--line) calc(var(--planner-hour-height, 24px) - 1px),
    var(--line) var(--planner-hour-height, 24px)
  );
}
.day-planner-event {
  padding: 1px 3px;
  font-size: 9px;
}
.day-planner-event b,
.day-planner-event small {
  font-size: 9px;
}
#meetingComposer.planner-focus {
  width: min(1080px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
}
#meetingComposer.planner-focus #meetingForm > :not(.meeting-planner) {
  display: none !important;
}
#meetingComposer.planner-focus .meeting-planner {
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
#meetingComposer.planner-focus .meeting-planner > h3,
#meetingComposer.planner-focus #plannerResult > p.sub {
  display: none;
}
#meetingComposer.planner-focus .planner-controls {
  margin-bottom: 4px;
}
@media (max-width: 760px) {
  aside {
    padding-top: 10px;
  }
  .brand {
    margin-bottom: 7px;
  }
  nav button {
    padding: 8px 9px;
  }
  main,
  body:has(#calendarView.active) main {
    padding: 12px 10px;
  }
  .dialog-body {
    padding: 10px 12px;
  }
  #routinePlannerPanel {
    padding: 7px;
  }
  .routine-week-controls {
    flex-wrap: wrap;
  }
  #eventSearchForm .search-category {
    max-width: 120px;
  }
}
#routineWizard:not([hidden]) ~ #routineWeekStatus {
  display: none;
}
:is(#timeCalendar, .zr-calendar) .event {
  min-height: 8px;
}
#meetingForm .form-row {
  align-items: start;
}
#meetingForm .form-row > .field,
.planner-controls > .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dialog-body input:not([type='checkbox']):not([type='radio']):not([type='file']),
.dialog-body select {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  box-sizing: border-box;
  margin-top: 0;
}
.dialog-body .planner-controls > .field {
  margin: 0;
}
.dialog-body button:not(.dialog-icon) {
  min-height: 32px;
  box-sizing: border-box;
}
.dialog-body .planner-controls > button {
  margin: 0;
  padding: 6px 10px;
  align-self: flex-end;
}
#meetingForm .form-row > .field > button {
  align-self: flex-start;
  padding: 6px 10px;
  margin-top: 0;
}
.calendar-movable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.calendar-movable:active {
  cursor: grabbing;
}
.calendar-resize {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  cursor: ns-resize;
  z-index: 8;
  opacity: 0;
  background: var(--accent);
}
.calendar-resize.start {
  top: 0;
}
.calendar-resize.end {
  bottom: 0;
}
.calendar-movable:hover .calendar-resize,
.calendar-movable:focus-visible .calendar-resize {
  opacity: 0.7;
}
.calendar-drag-original {
  opacity: 0.3 !important;
}
.calendar-drag-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 6px;
  box-sizing: border-box;
  z-index: 15;
  background: var(--tint);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 4px;
  pointer-events: none;
  padding: 2px 4px;
  overflow: hidden;
  font-size: 10px;
  box-shadow: 0 3px 12px #0003;
}
.calendar-drag-ghost small,
.calendar-drag-ghost b {
  display: block;
  font-size: 10px;
}
.calendar-is-dragging {
  user-select: none;
  cursor: grabbing;
}
.calendar-is-dragging #grid {
  touch-action: none;
}
#workDurationSummary {
  font-weight: 600;
  color: var(--ink);
}
.calendar-short .calendar-resize {
  height: 2px;
}
:is(#allDayEvents, .zr-all-day).all-day {
  display: grid;
  grid-template-columns: 40px repeat(var(--day-count, 7), minmax(0, 1fr));
  grid-auto-rows: 26px;
  gap: 3px 4px;
  padding: 4px 2px;
  position: sticky;
  top: var(--days-height, 44px);
  z-index: 4;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  max-height: 120px;
  overflow: auto;
}
:is(#allDayEvents, .zr-all-day)[hidden] {
  display: none !important;
}
:is(#allDayEvents, .zr-all-day) .all-day-label {
  padding: 5px 2px;
  font-size: 8px;
  word-break: normal;
  white-space: normal;
  align-self: start;
  color: var(--muted);
}
:is(#allDayEvents, .zr-all-day) .all-day-block {
  min-width: 0;
  height: 25px;
  min-height: 25px;
  text-align: left;
  padding: 3px 6px;
  font-size: 10px;
  line-height: 18px;
  border: 0;
  border-left: 3px solid;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}
:is(#allDayEvents, .zr-all-day) .all-day-block:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.all-day-analysis {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.all-day-analysis legend {
  font-size: 11px;
  padding: 0 5px;
}
.all-day-analysis .friend-pick {
  margin: 2px 0 8px;
  font-size: 12px;
}
.all-day-analysis .field {
  max-width: 220px;
}
.all-day-analysis .sub {
  font-size: 10px;
  line-height: 1.6;
  margin: 5px 0;
}
.all-day-toggle {
  margin: 8px 0 12px;
  font-size: 12px;
}
#allDayDateFields {
  margin-bottom: 8px;
}
#allDayHoursField {
  max-width: 220px;
}
.routine-all-day.all-day-strip {
  display: grid;
  grid-template-columns: 40px repeat(var(--day-count, 7), minmax(0, 1fr));
  grid-auto-rows: 24px;
  gap: 3px;
  padding: 3px 1px;
  background: var(--surface);
  max-height: 90px;
  overflow: auto;
  position: sticky;
  top: 30px;
  z-index: 6;
}
.routine-all-day .all-day-block {
  height: 23px;
  min-width: 0;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid;
  text-align: left;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.routine-all-day .all-day-label {
  font-size: 8px;
  padding: 3px;
  color: var(--muted);
} /* Native selects must have room for the platform text baseline. */
select {
  line-height: normal;
  text-align: left;
}
dialog select,
.dialog-body select {
  line-height: normal;
  box-sizing: border-box;
}
dialog option {
  font-size: 12px;
  line-height: normal;
}
.dialog-body input:not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']) {
  height: var(--field-h);
  min-height: var(--field-h);
  max-height: none;
  padding: 0 10px;
  line-height: normal;
  box-sizing: border-box;
}
.dialog-body button:not(.event):not(.month-event):not(.all-day-block) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  min-height: var(--button-h);
}
.dialog-body .planner-controls > button,
#meetingForm .form-row > .field > button {
  height: 36px;
  min-height: 36px;
}
.dialog-icon {
  width: var(--button-h);
  height: var(--button-h);
  min-height: var(--button-h);
}
.composer-section {
  margin: 0;
}
.composer-section > summary {
  cursor: pointer;
  font-weight: 550;
  color: var(--ink);
}
.composer-section .field {
  margin-bottom: 9px;
}
.composer-section .meeting-friends {
  border: 0;
  padding: 0;
  margin: 3px 0 8px;
}
.composer-section .meeting-planner {
  margin: 8px 0 0 !important;
}
.composer-core-options {
  margin-bottom: 6px;
}
#composerPlace > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#composerMore p.sub {
  margin: 5px 0 10px;
}
#composerMore > label {
  margin: 8px 0;
}
#meetingComposer .dialog-body {
  padding: 12px 18px 16px;
}
#meetingForm > .field {
  margin-bottom: 12px;
}
#meetingForm .duration-presets {
  margin-bottom: 9px;
}
.composer-section .recurrence-fields {
  border: 0;
  margin: 0;
  padding: 0;
}
#meetingComposer.planner-focus #meetingForm > details#composerFriends {
  border: 0;
  padding: 0;
}
#meetingComposer.planner-focus #composerFriends > :not(.meeting-planner) {
  display: none !important;
}
.analysis-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.analysis-values > div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 14px;
  min-width: 0;
}
.analysis-values span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.analysis-values strong {
  display: block;
  font-size: 25px;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
.analysis-values small {
  font-size: 12px;
  font-weight: 400;
}
.chart-toolbar {
  flex-wrap: wrap;
}
.chart-toolbar input[type='date'] {
  box-sizing: border-box;
  font: 12px system-ui;
}
.dialog-topbar h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dialog-topbar-actions {
  flex-shrink: 0;
}
.dialog-body .field {
  min-width: 0;
}
.dialog-body input,
.dialog-body select,
.dialog-body textarea {
  max-width: 100%;
  min-width: 0;
}
.dialog-body .form-row {
  align-items: start;
}
.dialog-body .planner-controls {
  align-items: end;
}
.dialog-body label {
  overflow-wrap: anywhere;
}
.dialog-body button {
  white-space: normal;
  text-align: center;
}
.dialog-body .dialog-actions {
  flex-wrap: wrap;
} /* Keep filters out of the time grid's vertical space. */
.calendar-filters-menu {
  position: relative;
  margin: 0 0 0 4px;
  z-index: 30;
}
.calendar-filters-menu > summary {
  gap: 5px;
  list-style: none;
  cursor: pointer;
  border-radius: 6px;
  color: var(--ink);
  min-height: 30px;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1;
}
.calendar-filters-menu > summary::-webkit-details-marker {
  display: none;
}
.calendar-filters-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.calendar-filters-menu[open] > summary {
  border-color: var(--accent);
  background: var(--tint);
}
.calendar-filters-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: min(480px, 70dvh);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shade);
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: left;
}
#calendarView .calendar-filters-panel .calendar-overlays {
  display: block;
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent;
}
.calendar-filters-panel .calendar-filter-dropdown,
.calendar-filters-panel .friend-dropdown {
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--line);
  position: static;
}
.calendar-filters-panel .calendar-filter-dropdown > summary,
.calendar-filters-panel .friend-dropdown > summary {
  border: 0;
  border-radius: 0;
  padding: 11px 0;
  font-size: 12px;
  background: transparent;
  color: var(--ink);
  line-height: 1.3;
}
.calendar-filters-panel .calendar-filter-menu,
.calendar-filters-panel .friend-dropdown[open] .friend-overlay-menu {
  position: static !important;
  inset: auto !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  max-height: 240px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 8px;
  background: transparent;
}
.calendar-filters-panel .calendar-filter-menu label {
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 0;
  flex-wrap: wrap;
  gap: 6px;
}
.calendar-filters-panel .calendar-filter-menu small {
  margin-left: auto;
  max-width: 120px;
  overflow-wrap: anywhere;
}
.calendar-filters-panel .friend-dropdown[open] #friendCalendarOverlays {
  max-height: 180px;
  background: transparent;
}
.calendar-filters-panel .friend-overlay-menu .field {
  display: block;
  margin: 0 0 9px;
}
.calendar-filters-panel .friend-overlay-menu input[type='search'] {
  margin-top: 5px;
  box-sizing: border-box;
}
:is(#timeCalendar, .zr-calendar) :is(#allDayEvents, .zr-all-day):not([hidden]) {
  background: var(--surface);
}
@media (max-width: 500px) {
  .calendar-filters-panel {
    width: 280px;
  }
}
.top .actions #captureDay {
  margin: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 7px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top .actions #newEvent {
  font-size: 12px;
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 7px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.top .actions #captureDay[hidden],
.top .actions #newEvent[hidden] {
  display: none;
}
#routinePlannerPanel .routine-week-controls {
  align-items: center;
  gap: 7px;
}
#routinePlannerPanel .routine-week-controls > .field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
}
#routinePlannerPanel .routine-week-controls > .field input {
  width: 145px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  line-height: normal;
}
#routinePlannerPanel .routine-week-controls > button {
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  padding: 5px 9px;
  margin: 0;
}
.goal-result {
  font-size: 12px;
  line-height: 1.6;
  margin: 9px 0 0;
  color: var(--muted);
}
.goal-result[data-result='exceeded'] {
  color: var(--danger);
  font-weight: 600;
}
.target-goal-card[data-result='exceeded'] {
  border-color: var(--danger);
}
.goal-progress[data-result='exceeded'] > span {
  background: var(--danger) !important;
}
.goal-progress {
  margin-top: 10px;
}
.goal .goal-result {
  font-size: 10px;
  margin-top: 5px;
}
.goal-type-label {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
#followingList .friend-actions > button,
#followingList .friend-actions > .friend-options > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 84px;
  min-width: 84px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  font:
    500 11px/1.2 system-ui,
    sans-serif;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
}
#followingList .friend-actions > .friend-options > summary {
  list-style: none;
}
#followingList .friend-actions > .friend-options > summary::-webkit-details-marker {
  display: none;
}
#followingList .friend-actions > button:hover,
#followingList .friend-actions > .friend-options > summary:hover {
  background: var(--tint);
}
#followingList .friend-actions > .friend-options > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
} /* Routine planning shares the calendar's compact date / view / navigation header. */
#routinePlannerPanel {
  padding: 0;
  overflow: visible;
}
#routinePlannerPanel #routineWizard {
  margin: 0 10px 12px;
}
#routinePlannerPanel #routineWeekStatus {
  margin: 7px 10px;
  font-size: 10px;
}
.top .actions #stopRoutinePlanning {
  font-size: 12px;
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 7px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.top .actions #stopRoutinePlanning[hidden] {
  display: none;
}
.fixed-category-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 9px;
  box-sizing: border-box;
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: nowrap;
}
#monthGrid .month-day {
  cursor: pointer;
}
#monthGrid .month-day:hover .month-date {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
#monthGrid .month-date:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.category-palette {
  margin: 12px 0;
  border: 0;
  padding: 0;
}
.category-palette legend {
  font-size: 12px;
  color: var(--muted);
  padding: 0;
  margin-bottom: 9px;
}
.category-palette-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
}
.category-palette-grid button {
  height: 34px;
  min-height: 34px;
  min-width: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px #0002;
  cursor: pointer;
  display: grid !important;
  place-items: center;
  color: #171b20;
}
.category-palette-grid button span {
  opacity: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  background: #ffffffaa;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.category-palette-grid button[aria-pressed='true'] {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.category-palette-grid button[aria-pressed='true'] span {
  opacity: 1;
}
.category-manual-color {
  margin: 15px 0;
}
.category-manual-color > summary {
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
  padding: 6px 0;
}
.category-manual-color > label {
  margin-top: 8px;
}
#categoryForm .category-palette,
#categoryForm .category-manual-color {
  grid-column: 1/-1;
  flex-basis: 100%;
  width: 100%;
}
#importExternalEvent {
  margin: 10px 0;
}
.goal-streak {
  font-size: 12px;
  margin: 14px 0;
  color: var(--ink);
}
.goal-streak strong {
  color: var(--accent);
  font-size: 19px;
}
.goal-history {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.goal-history summary {
  cursor: pointer;
  font-size: 12px;
}
.goal-history table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}
.goal-history th,
.goal-history td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.goal-history [data-history-result='met'] {
  color: var(--success, #40815b);
}
.goal-history [data-history-result='missed'] {
  color: var(--danger, #ba483e);
}
.goal-history [data-history-result='unknown'] {
  color: var(--muted);
} /* Full-width page switch: each destination owns half of the available width. */
.routine-card {
  align-items: flex-start;
}
.routine-card-main {
  flex: 1;
  min-width: 0;
}
.routine-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.routine-planning-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 14px;
  font-size: 12px;
}
.routine-planning-status strong {
  color: var(--accent);
}
.routine-planning-status > small {
  flex-basis: 100%;
}
.routine-streak {
  font-size: 12px;
  margin: 12px 0 4px;
}
.routine-streak strong {
  font-size: 18px;
  color: var(--accent);
}
.routine-card-main > small {
  display: block;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .routine-card {
    flex-wrap: wrap;
  }
  .routine-card-main {
    flex-basis: 100%;
  }
  .routine-card-actions {
    width: 100%;
    margin-top: 6px;
  }
  .routine-card-actions button {
    flex: 1;
  }
} /* Destructive actions: red text and outline, tinted on hover. */
:root button.danger-button {
  background: transparent;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
}
:root button.danger-button:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
:root button.danger-button:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 3px;
}
:root button.danger-button:disabled {
  opacity: 0.5;
} /* Compact overview tiles; details remain available inside each tile. */
#routineList .routine-card,
#targetGoalList .target-goal-card {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
#targetGoalList .target-goal-card[data-result='exceeded'] {
  border-color: var(--danger);
}
#routineList .routine-card-head,
#targetGoalList .goal-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#routineList .routine-card-head > b,
#targetGoalList .goal-card-head h3 {
  flex: 1 1 100px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#routineList .routine-card-actions {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  gap: 6px;
}
#routineList .routine-card-actions button,
#targetGoalList .goal-card-head button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.3;
}
#targetGoalList .goal-history {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 12px;
}
#targetGoalList .target-goal-card > .sub {
  font-size: 11px;
  line-height: 1.6;
  margin: 8px 0;
}
#routineList > p,
#targetGoalList > p {
  grid-column: 1/-1;
}
#targetGoalForm #deleteTargetGoal {
  margin-right: auto;
}
.profile-photo-editor {
  display: grid;
  gap: 10px;
}
.profile-photo-editor #myProfilePhoto {
  align-self: end;
}
.profile-photo-editor .field {
  min-width: 0;
  margin: 0;
  font-size: 12px;
}
.profile-photo-editor input[type='file'] {
  width: 100%;
  min-width: 0;
  height: 42px;
  margin: 6px 0 0;
  padding: 5px;
  font-size: 11px;
  line-height: 30px;
  overflow: hidden;
  box-sizing: border-box;
}
.profile-photo-editor input[type='file']::file-selector-button {
  height: 30px;
  margin-right: 7px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.profile-photo-editor #removeProfilePhoto {
  white-space: nowrap;
}
.profile-photo-editor #profilePhotoStatus {
  grid-column: 1/-1;
  margin: 0;
}
.profile-photo-editor #profilePhotoStatus:empty {
  display: none;
}
@media (max-width: 760px) {
  #routineList,
  #targetGoalList {
    gap: 12px;
  }
  #routineList .routine-card,
  #targetGoalList .target-goal-card {
    padding: 16px;
  }
  .profile-photo-editor .profile-avatar {
    width: 56px;
    height: 56px;
  }
  .profile-photo-editor #removeProfilePhoto {
    width: 100%;
  }
}
.cycle-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 3px 1px 10px;
  scroll-snap-type: x proximity;
}
.cycle-card {
  flex: 0 0 134px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  scroll-snap-align: start;
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
}
.cycle-card time {
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
}
.cycle-card strong {
  font-size: 16px;
}
.cycle-card[data-cycle-state='met'] {
  border-top: 3px solid #4f9d69;
}
.cycle-card[data-cycle-state='missed'] {
  border-top: 3px solid var(--danger);
}
.cycle-card[data-cycle-state='unknown'] {
  border-top: 3px solid var(--muted);
}
.cycle-card[data-cycle-state='met'] > span {
  color: var(--ink);
}
.cycle-meter {
  height: 5px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.cycle-meter > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}
.cycle-note {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 0;
}
.routine-current-cycle,
.routine-cycle-history {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}
.routine-current-cycle h4,
.routine-cycle-history h4,
.goal-history h4 {
  font-size: 12px;
  margin: 0 0 10px;
}
.routine-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.routine-task-row > span {
  min-width: 0;
}
.routine-task-row b {
  font-size: 11px !important;
  overflow-wrap: anywhere;
}
.routine-task-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.routine-task-actions button {
  padding: 5px 7px;
  font-size: 10px;
  min-height: 28px;
}
.routine-cycle-history > button,
.goal-history > button {
  font-size: 11px;
  padding: 6px 9px;
  margin-top: 4px;
}
.cycle-outcome {
  font-size: 18px;
  color: #4f9d69;
}
.planner-person-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.planner-person-status span {
  font-size: 10px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.planner-person-status [data-status='busy'] {
  border-color: var(--danger);
}
.planner-person-status [data-status='unknown'] {
  color: var(--muted);
}
.planner-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.planner-controls .field {
  margin: 0;
  flex: 1;
  min-width: 130px;
}
.planner-controls input,
.planner-controls select,
.planner-controls > button {
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
}
.planner-controls > button {
  margin: 0;
}
.cycle-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#eventCoordinates {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
  margin-top: 8px;
  color: var(--ink);
}
#meetingForm .composer-account-choice {
  display: none !important;
}
#meetingForm .composer-core-options {
  grid-template-columns: minmax(0, 1fr);
} /* Analysis cards lead with values and use the space for the chart itself. */
#chartDashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
}
#chartDashboard .chart-card {
  padding: 16px;
  min-width: 0;
}
#chartDashboard .chart-card header {
  display: flex;
  justify-content: space-between;
}
/* Kopf immer in einer Zeile: Der Titel behält seine Breite (höchstens die Hälfte, sonst „…“); bei wenig Platz
   werden Zeitraum und Gruppierung schmaler statt umzubrechen. */
#chartDashboard .chart-title-group {
  min-width: 0;
  flex: 0 0 auto;
  max-width: 50%;
}
#chartDashboard .chart-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    600 18px/1.35 system-ui,
    sans-serif;
}
#chartDashboard .chart-head-summary {
  display: flex;
  flex: none;
}
#chartDashboard .chart-edit {
  flex: none;
}
#chartDashboard .chart-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
#chartDashboard .chart-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  flex: 1 1 115px;
  min-width: 0;
}
#chartDashboard .chart-toolbar select,
#chartDashboard .chart-toolbar input {
  line-height: 1.3;
  box-sizing: border-box;
}
#chartDashboard .chart-caption {
  font-size: 10px;
  gap: 8px;
  line-height: 1.5;
}
#chartDashboard .pie-layout {
  display: grid;
  align-items: center;
  min-height: 0;
}
#chartDashboard .pie-svg {
  width: 100%;
  justify-self: center;
}
#chartDashboard .chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 0 12px;
  max-width: none;
  width: 100%;
}
#chartDashboard .chart-legend li {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
  align-items: center;
}
#chartDashboard .chart-legend li[data-empty='true'] {
  opacity: 0.6;
}
#chartDashboard .chart-legend .dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
  flex: none;
}
/* The category name takes the room the hours leave and ends with "…" instead of breaking into single letters. */
#chartDashboard .chart-legend .legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chartDashboard .chart-legend li > span:last-child {
  font-weight: 600;
}
#chartDashboard .chart-legend small {
  display: inline;
  font-size: 9px;
  font-weight: 400;
  margin-left: 3px;
}
#chartDashboard .chart-scroll {
  margin: 0;
}
#chartDashboard .bar-svg {
  min-height: 200px;
}
#chartDashboard .bar-legend {
  gap: 6px 12px;
}
#chartDashboard .chart-empty {
  min-height: 145px;
  padding: 20px 12px;
}
#chartDashboard .chart-empty p {
  margin: 8px 0 0;
}
#chartDashboard .analysis-values {
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
  margin: 0;
}
#chartDashboard .analysis-values > div {
  padding: 10px;
}
#chartDashboard .analysis-values strong {
  font-size: 22px;
  margin-top: 5px;
}
#analysisDataStatus {
  margin-bottom: 12px;
  font-size: 10px;
}
@media (max-width: 760px) {
  #chartDashboard {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #chartDashboard .chart-card {
    padding: 14px;
  }
  #chartDashboard .pie-layout {
    gap: 10px;
  }
}
#chartDashboard {
  align-items: stretch;
  grid-auto-rows: 480px;
}
#chartDashboard .chart-card {
  height: 480px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
#chartDashboard .chart-card > header,
#chartDashboard .chart-toolbar,
#chartDashboard .chart-caption {
  flex-shrink: 0;
}
#chartDashboard .chart-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-right: 3px;
}
#chartDashboard .chart-content > .pie-layout {
  flex: 1;
}
#chartDashboard .chart-content > .analysis-values {
  align-content: start;
  flex: 1;
}
/* Key figures: change against the period before (analytics.js). Up and down only differ by the sign and a
   quiet colour; more time is not automatically better. */
#chartDashboard .analysis-values .analysis-delta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
#chartDashboard .analysis-values .analysis-delta[data-trend] {
  color: var(--ink);
}
/* Week pattern (type "heatmap"): weekday × hour grid that keeps its proportions, with a small scale below. */
#chartDashboard .chart-content > .heatmap-layout {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 8px;
}
#chartDashboard .heatmap-svg {
  display: block;
  width: 100%;
  height: auto;
}
#chartDashboard .heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}
#chartDashboard .heatmap-legend i {
  width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--accent));
}
#chartDashboard .chart-content > .chart-empty {
  flex: 1;
}
#chartDashboard .chart-content > .chart-scroll {
  overflow-y: hidden;
} /* Tables have their own modal; charts retain their full, stable card area. */
#chartDashboard .pie-layout {
  grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
  gap: 12px;
}
/* Narrow cards (two columns on a small screen, the pane beside the chat): the pie above its legend instead of
   beside it, so the legend keeps the full card width. */
#chartDashboard .chart-card {
  container-type: inline-size;
}
@container (max-width: 380px) {
  #chartDashboard .pie-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  #chartDashboard .pie-layout .pie-svg {
    max-width: 170px;
  }
  #chartDashboard .pie-layout .chart-legend {
    align-self: stretch;
  }
}
#chartDashboard .pie-svg {
  max-width: 260px;
  display: block;
  aspect-ratio: 1;
} /* Availability compares people without overlapping event cards. */
.availability-view-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  width: fit-content;
  margin: 8px 0;
}
.availability-view-switch button {
  font-size: 12px;
  padding: 7px 12px;
  min-height: 32px;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.availability-view-switch button[aria-pressed='true'] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.availability-band {
  position: absolute;
  left: 0;
  right: 0;
  background: rgb(240 109 24 / var(--busy-opacity, 0));
  min-height: 0;
  box-sizing: border-box;
}
.availability-overview-scroll .day-planner-head {
  min-height: 34px;
}
.availability-overview-scroll .day-planner-head > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.availability-overview-scroll .day-planner-column {
  min-width: 0;
  overflow: hidden;
}
.availability-overview-scroll .day-planner-columns {
  touch-action: none;
}
.availability-people-inner {
  min-width: 100%;
}
.availability-time-head {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.availability-name {
  position: sticky;
  left: 0;
  z-index: 8;
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 11px;
  border-right: 1px solid var(--line);
}
.availability-dates {
  display: flex;
  min-width: 0;
}
.availability-dates > div {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.availability-dates b {
  display: block;
  text-align: center;
  font-size: 11px;
  padding: 7px;
  border-bottom: 1px solid var(--line);
}
.availability-hours {
  display: flex;
  height: 28px;
  align-items: center;
}
.availability-hours span {
  width: calc(100% / 24);
  font-size: 9px;
  color: var(--muted);
  padding-left: 2px;
  box-sizing: border-box;
}
.availability-people-body {
  display: grid;
  position: relative;
}
.availability-names {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.availability-names > div {
  height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  overflow-wrap: anywhere;
  overflow: hidden;
}
.availability-tracks {
  position: relative;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
  background: repeating-linear-gradient(to right, transparent 0, transparent 29px, var(--line) 29px, var(--line) 30px);
}
.availability-track {
  position: relative;
  height: 48px;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.availability-track .availability-band {
  height: 100%;
  right: auto;
  top: 0;
}
.availability-tracks .day-planner-slot {
  right: auto;
  min-height: 0;
  min-width: 4px;
}
.availability-tracks .day-slot-handle {
  top: 0;
  bottom: 0;
  width: 12px;
  height: 100%;
  left: auto;
  right: auto;
  cursor: ew-resize;
}
.availability-tracks .day-slot-handle.start {
  left: -6px;
}
.availability-tracks .day-slot-handle.end {
  right: -6px;
}
.availability-tracks .day-slot-handle:after {
  top: 40%;
  left: 4px;
  width: 3px;
  height: 20%;
}
.availability-tracks .day-slot-label {
  top: 3px;
  left: 4px;
  white-space: nowrap;
  font-size: 10px;
}
.availability-people-scroll {
  height: auto;
}
.availability-tracks .availability-track {
  background: transparent;
  border-radius: 0;
}
.availability-view-switch button[data-availability-layout][aria-pressed='true'] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
#chartDashboard .bar-svg[data-fit-period] {
  min-width: 0 !important;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
}
#chartDashboard .chart-content > .chart-scroll:has(> [data-fit-period]) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
#routineList .routine-card {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#routineList .routine-card-main {
  min-height: 0;
  width: 100%;
  scrollbar-width: thin;
}
#routineList .routine-card-head {
  top: 0;
  z-index: 2;
  background: var(--surface);
}
.availability-names > .availability-total-name {
  font-weight: 700;
  border-bottom: 2px solid var(--line);
}
.availability-tracks > .availability-total-track {
  border-bottom: 2px solid var(--line);
}
#friendsView .friends-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-raised);
}
#friendsView .friends-tabs button {
  min-height: 56px;
  width: auto;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 20px;
}
#friendsView [data-friends-pane][hidden] {
  display: none;
}
.friend-group-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.friend-group-toolbar h2 {
  font-size: 18px;
  margin: 0;
}
.friend-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.friend-group-card {
  padding: 18px;
  min-width: 0;
}
.friend-group-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.friend-group-card h3 {
  font-size: 16px;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.friend-group-card header button {
  font-size: 11px;
  padding: 7px 9px;
  flex: none;
}
.friend-group-people {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  max-height: 280px;
  overflow: auto;
}
.friend-group-person,
.friend-group-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.friend-group-person b,
.friend-group-person small,
.friend-group-pick b,
.friend-group-pick small {
  display: block;
  overflow-wrap: anywhere;
}
.friend-group-person b,
.friend-group-pick b {
  font-size: 12px;
}
.friend-group-person small,
.friend-group-pick small {
  font-size: 10px;
  margin-top: 3px;
}
.friend-group-empty {
  grid-column: 1/-1;
  padding: 24px;
}
.friend-group-empty p {
  margin: 0 0 12px;
}
.friend-group-pick {
  padding: 9px 3px;
  cursor: pointer;
}
.friend-group-pick[hidden] {
  display: none;
}
.friend-group-pick input {
  flex: none;
}
.friend-group-members {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  margin: 14px 0;
}
.friend-group-members legend {
  font-size: 12px;
  padding: 0 5px;
}
#friendGroupChoices {
  max-height: 290px;
  overflow: auto;
}
#friendGroupDialog {
  width: min(560px, calc(100vw - 24px));
}
@media (max-width: 760px) {
  .friend-group-grid {
    grid-template-columns: 1fr;
  }
  #friendsView .friends-tabs button {
    min-height: 50px;
    font-size: 16px;
    padding: 10px 14px;
  }
  .friend-group-toolbar {
    flex-wrap: wrap;
  }
}
#settingsView .settings-tabs button.active {
  border-color: var(--accent);
  border-radius: 8px;
} /* Compact routine overview; individual units and cycles have a separate detail page. */
#routineList .routine-card-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 0;
}
#routineList .routine-card-head {
  position: static;
  padding-bottom: 0;
  flex-shrink: 0;
}
#routineList .routine-card-head > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#routineList .routine-streak {
  margin: 8px 0;
}
.routine-overview-progress {
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}
.routine-overview-progress .cycle-meter {
  margin: 6px 0 10px;
}
.routine-open-details {
  width: 100%;
  min-height: 32px;
  font-size: 12px;
  padding: 6px 10px;
}
#routinesView.routine-detail-open > [data-planning-pane] {
  display: none !important;
}
#routineDetailsPage[hidden],
#goalDetailsPage[hidden] {
  display: none;
}
.routine-detail-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.routine-detail-heading > div:first-of-type {
  flex: 1;
  min-width: 180px;
}
.routine-detail-heading h2 {
  font-size: 22px;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.routine-detail-heading p {
  margin: 0;
  line-height: 1.6;
}
.routine-detail-heading > button {
  font-size: 12px;
  padding: 8px 12px;
}
.routine-detail-heading .routine-card-actions button {
  font-size: 12px;
  padding: 8px 12px;
}
.routine-detail-content {
  padding: 20px;
}
.routine-detail-content .routine-current-cycle {
  border: 0;
  padding: 0;
  margin-top: 0;
}
.routine-detail-content .routine-current-cycle h4,
.routine-detail-content .routine-cycle-history h4 {
  font-size: 15px;
}
.routine-detail-content .routine-task-row {
  font-size: 13px;
  padding: 14px 0;
}
.routine-detail-content .routine-task-row b {
  font-size: 13px !important;
}
.routine-detail-content .routine-task-row small {
  display: block;
  margin-top: 4px;
}
.routine-detail-content .routine-task-actions button {
  min-height: 32px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .routine-detail-heading > div:first-of-type {
    flex-basis: 100%;
    order: 1;
  }
  .routine-detail-heading .routine-card-actions {
    width: auto;
    margin: 0 0 0 auto;
  }
  .routine-detail-content {
    padding: 16px;
  }
  .routine-detail-content .routine-task-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .routine-detail-content .routine-task-actions {
    justify-content: flex-start;
  }
}
#targetGoalList .target-goal-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}
#targetGoalList .goal-card-head {
  flex-shrink: 0;
}
#targetGoalList .goal-card-head h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#targetGoalList .goal-overview-rhythm {
  margin-bottom: 8px;
}
#targetGoalList .goal-streak {
  font-size: 11px;
  margin: 6px 0 10px;
}
#targetGoalList .routine-open-details {
  margin-top: auto;
  flex-shrink: 0;
}
#routinesView.goal-detail-open > [data-planning-pane] {
  display: none !important;
}
#goalDetailsPage > .target-goal-card {
  margin: 0;
  max-width: none;
}
.event-group-selector {
  margin: 3px 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.event-group-selector[hidden] {
  display: none;
}
.event-group-selector h4 {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 7px;
}
.event-group-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  max-height: 165px;
  overflow: auto;
}
.event-group-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
  min-width: 0;
}
.event-group-pick[hidden] {
  display: none;
}
.event-group-pick input {
  flex: none;
}
/* Group name and member count on one line, like the single friends below. */
.event-group-pick > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-group-pick small {
  margin-left: 6px;
  font-size: 10px;
  color: var(--muted);
}
.event-group-error {
  font-size: 11px;
  color: var(--danger);
  margin: 5px 0 0;
}
.event-group-error:empty {
  display: none;
}
@media (max-width: 480px) {
  .event-group-choices {
    grid-template-columns: 1fr;
  }
}
.availability-event-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
  color: #21170f;
  padding: 6px 5px;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-height: 100%;
  pointer-events: none;
  user-select: none;
}
.composer-status-row {
  align-items: end;
  gap: 10px;
  margin: 8px 0 10px;
}
.composer-status-row > .field {
  margin: 0 !important;
}
.composer-private-toggle {
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  background: var(--surface-raised);
  font-size: 12px;
  margin: 0 !important;
}
.composer-status-row select {
  width: 100%;
}
.availability-band[data-status='limited'] {
  background-color: rgb(232 174 43 / var(--busy-opacity));
}
.availability-band[data-status='free'] .availability-event-label {
  color: var(--muted);
  font-weight: 400;
}
.availability-band[data-status='free']:has(.availability-event-label) {
  box-shadow: inset 0 0 0 1px var(--line);
}
.planner-person-status [data-status='limited'] {
  border-color: #b98b24;
}
.routine-plan-action .field {
  margin: 0;
  min-width: 145px;
}
.routine-plan-action select,
.routine-plan-action input,
.routine-plan-action button {
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 12px;
}
.routine-plan-action input {
  width: 150px;
}
.routine-plan-action input[hidden] {
  display: none;
}
.routine-week-caption {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.availability-overview-scroll {
  overflow-x: hidden;
}
.availability-overview-scroll .day-planner-inner {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.availability-people-scroll {
  --planner-name-width: 100px;
}
.availability-people-inner {
  width: calc(var(--planner-name-width, 100px) + var(--date-count) * 720px);
}
.availability-time-head,
.availability-people-body {
  grid-template-columns: var(--planner-name-width, 100px) 1fr;
}
.availability-name,
.availability-names > div {
  padding-left: 7px;
  padding-right: 7px;
}
@media (max-width: 760px) {
  .availability-people-scroll {
    --planner-name-width: 80px;
  }
  .availability-names > div {
    font-size: 11px;
  }
} /* Inline availability stays beside appointment times; focus uses the same planner. */
#meetingForm > .composer-inline-planner {
  border-radius: 10px;
  background: var(--paper);
}
.composer-inline-planner > h3 {
  display: none;
}
.composer-inline-planner .planner-controls > button {
  font-size: 11px;
  padding: 0 10px;
}
#meetingComposer:not(.planner-focus) .composer-inline-planner .day-planner-scroll {
  --planner-viewport-height: 220px;
  max-height: 220px;
}
#meetingComposer.planner-focus #meetingForm > details#composerFriends {
  display: none !important;
}
#meetingComposer.planner-focus #availabilityCheck {
  display: none !important;
}
.composer-inline-planner #plannerResult > p.sub {
  display: none;
}
#routineForm .routine-duration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
#routineForm .routine-duration legend {
  font-size: 12px;
  margin-bottom: 5px;
}
#routineForm .routine-duration .field {
  margin: 0;
}
#routineForm .routine-duration input,
#routineForm .routine-duration select {
  width: 100%;
}
#routineForm .routine-duration input,
#routineForm .routine-duration select {
  margin: 0 !important;
}
#routineForm > .form-row:has(.routine-duration) {
  align-items: end;
}
#meetingForm .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 8px !important;
}
#meetingForm .field input,
#meetingForm .field select {
  margin: 0 !important;
}
.composer-main-card > .all-day-toggle {
  padding: 2px 0;
  margin: 2px 0 8px;
}
.composer-main-card > .composer-core-options {
  margin-bottom: 0;
}
#meetingForm > .composer-inline-planner {
  margin: 4px 0 10px !important;
}
.composer-inline-planner .planner-slot-summary {
  margin: 5px 0;
}
#meetingForm .composer-inline-planner .planner-controls > #availabilityCheck {
  min-height: 36px !important;
  margin: 0 !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  #meetingForm .composer-inline-planner .planner-controls > #availabilityCheck {
    width: 100%;
  }
}
#meetingForm .composer-status-row {
  align-items: end;
}
#meetingForm #personalPrivateField.composer-private-toggle {
  box-sizing: border-box;
  line-height: 1;
}
#meetingForm #personalPrivateField input {
  flex: none;
}
#meetingForm #personalPrivateField span {
  line-height: 1.2;
}
#meetingForm .composer-status-row > .field {
  margin: 0 !important;
} /* Header, Gesamt and four participant rows remain visible before vertical scrolling. */
.availability-people-scroll {
  max-height: max(320px, var(--planner-viewport-height, 320px));
  min-height: 0;
}
#meetingComposer:not(.planner-focus) .composer-inline-planner .availability-people-scroll {
  --planner-viewport-height: 320px;
  max-height: 320px;
}
#targetGoalRhythm .form-row {
  align-items: end;
}
#targetGoalRhythm .form-row > .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
}
#targetGoalRhythm .form-row > .field input,
#targetGoalRhythm .form-row > .field select {
  margin: 0 !important;
}
#routinesView .routine-actions {
  align-items: center;
  gap: 10px;
}
#routinesView .routine-actions > #newRoutine,
#routinesView .routine-plan-action button,
#routinesView .routine-plan-action select,
#routinesView .routine-plan-action input {
  box-sizing: border-box;
  height: var(--field-h);
  min-height: var(--field-h);
  margin: 0 !important;
  padding: 0 12px;
  font-size: 12px;
  line-height: normal;
}
#routinesView .routine-plan-action {
  align-items: center;
  gap: 8px;
}
#routinesView .routine-plan-action > .field {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}
#routinesView .routine-week-caption {
  align-self: center;
  margin: 0;
  line-height: 1.4;
} /* Event status patterns apply only to participant events; empty free time stays blank. */
.availability-track:not(.availability-total-track)
  .availability-band[data-status='limited']:has(.availability-event-label) {
  background-color: rgb(232 174 43 / 0.16);
  background-image: repeating-linear-gradient(
    135deg,
    rgb(171 116 15 / 0.42) 0,
    rgb(171 116 15 / 0.42) 2px,
    transparent 2px,
    transparent 8px
  );
  box-shadow: inset 0 0 0 1px rgb(171 116 15 / 0.45);
}
.availability-track:not(.availability-total-track)
  .availability-band[data-status='free']:has(.availability-event-label) {
  background-color: rgb(35 139 103 / 0.08);
  background-image: radial-gradient(circle, rgb(35 139 103 / 0.55) 0.9px, transparent 1px);
  background-size: 6px 6px;
  box-shadow: inset 0 0 0 1px rgb(35 139 103 / 0.45);
}
.availability-track:not(.availability-total-track)
  .availability-band:is([data-status='limited'], [data-status='free'])
  .availability-event-label {
  color: var(--ink);
  text-shadow:
    0 0 3px var(--surface),
    0 0 3px var(--surface);
}
.availability-view-switch[hidden] {
  display: none;
}
.planner-own-calendar .day-planner-column {
  position: relative;
}
.planner-own-event {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 4px;
  min-height: 6px;
  overflow: hidden;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.25;
  pointer-events: none;
}
.planner-own-event b,
.planner-own-event small {
  display: block;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.planner-own-all-day {
  display: grid;
  position: sticky;
  top: 34px;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.planner-own-all-day > small {
  font-size: 8px;
  align-self: center;
}
.planner-own-all-day > div {
  min-width: 0;
  border-left: 1px solid var(--line);
  padding: 2px;
}
.planner-own-all-day span {
  display: block;
  font-size: 9px;
  border: 1px solid;
  border-radius: 3px;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planner-own-month-weekdays,
.planner-own-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}
.planner-own-month-weekdays {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  font-size: 10px;
  text-align: center;
}
.planner-own-month-weekdays span {
  padding: 6px;
}
.planner-own-month-grid > button {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: start !important;
  min-height: 90px;
  text-align: left;
  border-radius: 0;
  padding: 4px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  min-width: 0;
  background: var(--surface);
}
.planner-own-month-grid > button > b {
  font-size: 11px;
  align-self: start;
}
.planner-own-month-grid > button > span {
  font-size: 9px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid;
  padding: 2px;
  margin-top: 2px;
}
.planner-own-month-grid > button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--accent);
}
#meetingComposer.routine-settings-mode #meetingTimeFields,
#meetingComposer.routine-settings-mode #allDayDateFields,
#meetingComposer.routine-settings-mode .composer-inline-planner,
#meetingComposer.routine-settings-mode .duration-presets,
#meetingComposer.routine-settings-mode #routineDoneField,
#meetingComposer.routine-settings-mode #composerRecurrence,
#meetingComposer.routine-settings-mode #deletePersonalEvent,
#meetingComposer.routine-settings-mode #sharePersonalEvent {
  display: none !important;
}
#meetingComposer.routine-occurrence-mode .composer-core-options,
#meetingComposer.routine-occurrence-mode .composer-status-row,
#meetingComposer.routine-occurrence-mode .all-day-toggle,
#meetingComposer.routine-occurrence-mode #composerRecurrence {
  display: none !important;
}
#meetingComposer.routine-settings-mode #eventReminderField {
  display: flex !important;
}
#routineDetailsPage .routine-detail-heading .routine-card-actions {
  flex-wrap: wrap;
}
.goal-duration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 16px 0;
  min-width: 0;
}
.goal-duration[hidden] {
  display: none;
}
.goal-duration legend {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.goal-duration > .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 !important;
}
.goal-duration input,
.goal-duration select {
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
} /* Keep the title first, including in compact time slots. Times remain in the tooltip and accessible name. */
.event {
  padding: 3px 5px;
  gap: 2px;
}
/* A touch-selected entry shows its resize grips outside its own box (section „Touch“ at the end). */
.event:not(.touch-selected) {
  overflow: hidden !important;
}
/* As many title lines as fit the entry (--title-lines from design-consistency.js); the rest ends in "…". */
.event .event-title {
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 3);
  width: 100%;
  margin: 0;
  line-height: 1.2;
}
.event.short-event {
  padding: 1px 4px;
  gap: 0;
}
.event.short-event .event-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines, 2);
  overflow: hidden !important;
  font-size: 10.5px;
  line-height: 11px;
}
.event.short-event .event-location {
  display: none;
}
.month-event .event-title {
  display: block;
}
/* "Offen | Gesendet | Erledigt" (notifications.js); looks like the other segment tabs. */
.notification-toolbar:has(.notification-boxes) {
  display: flex;
  margin: 10px 0 14px;
}
.notification-toolbar .notification-boxes {
  margin: 0;
} /* Separate actual participant appointments while keeping the aggregate heatmap continuous. */
.availability-track:not(.availability-total-track) .availability-event-band {
  top: 2px;
  height: calc(100% - 4px);
  border: 2px solid var(--surface);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgb(181 86 20 / 0.65);
}
.availability-track:not(.availability-total-track) .availability-event-band[data-status='limited'] {
  box-shadow: inset 0 0 0 1px rgb(171 116 15 / 0.7);
}
.availability-track:not(.availability-total-track) .availability-event-band[data-status='free'] {
  box-shadow: inset 0 0 0 1px rgb(35 139 103 / 0.7);
}
.past-event-suggestions {
  margin: -7px 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.past-event-suggestions p {
  margin: 0;
  padding: 8px 11px;
  color: var(--muted);
  font-size: 10px;
}
.past-event-suggestions button {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  padding: 8px 11px;
  min-height: 40px;
}
.past-event-suggestions b,
.past-event-suggestions small {
  display: block;
  overflow-wrap: anywhere;
}
.past-event-suggestions b {
  font-size: 12px;
}
.past-event-suggestions small {
  font-size: 10px;
  margin-top: 3px;
}
.routine-occurrence-mode #pastEventSuggestions,
.routine-settings-mode #pastEventSuggestions {
  display: none;
} /* The plot fills the card instead of scrolling an oversized SVG. */
#chartDashboard .chart-card header {
  align-items: center;
  margin-bottom: 8px;
  min-height: 28px;
}
#chartDashboard .chart-card h3 {
  margin: 0;
  font-size: 17px;
}
#chartDashboard .chart-head-summary {
  flex-direction: row;
  align-items: center;
}
#chartDashboard .chart-toolbar {
  gap: 6px;
  margin-bottom: 5px;
}
#chartDashboard .chart-caption {
  padding: 5px 0;
  margin-bottom: 4px;
}
#chartDashboard .chart-content:has(> .chart-scroll) {
  overflow: hidden;
  padding-right: 0;
}
#chartDashboard .chart-content > .chart-scroll {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
#chartDashboard .chart-scroll > .bar-svg[data-fit-period] {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0;
  max-height: 100%;
  flex: 1;
}
#chartDashboard .bar-legend {
  flex: none;
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.25;
}
@media (max-width: 420px) {
  #chartDashboard .chart-head-summary {
    gap: 6px;
  }
  #chartDashboard .chart-card h3 {
    font-size: 16px;
  }
}
#taskList > .task {
  padding: 16px 18px;
  gap: 12px;
}
#taskList > .task:first-child {
  padding-top: 18px;
}
#taskList > .task:last-child {
  padding-bottom: 18px;
}
@media (max-width: 760px) {
  #taskList > .task {
    padding-inline: 14px;
  }
}
.task-history {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.task-history > summary {
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.task-history[open] > summary {
  border-bottom: 1px solid var(--line);
}
#taskHistoryList > .task {
  padding: 16px 18px;
  gap: 12px;
}
#taskHistoryList > .task:last-child {
  border-bottom: 0;
}
.task-completed-at {
  font-size: 10px !important;
  margin-top: 5px !important;
}
#taskHistoryList .task.done strong {
  color: var(--ink);
  text-decoration: none;
}
@media (max-width: 760px) {
  .task-history > summary,
  #taskHistoryList > .task {
    padding-inline: 14px;
  }
}
.goal-work-break {
  font-size: 12px;
  margin: 8px 0;
  color: var(--muted);
}
.goal-work-break strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.goal-history .cycle-card:has(small + small) {
  min-height: 140px;
} /* Matched profile actions with an accessible native file input overlay. */
.profile-photo-editor {
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.profile-photo-editor .profile-photo-upload,
.profile-photo-editor #removeProfilePhoto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  align-self: center;
}
.profile-photo-editor .profile-photo-upload {
  background: var(--surface);
  color: var(--ink);
}
.profile-photo-editor .profile-photo-upload:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.profile-photo-editor .profile-photo-upload #profilePhotoFile {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  cursor: pointer;
}
#chartDashboard .chart-card header {
  flex-wrap: nowrap;
  gap: 12px;
}
#chartDashboard .chart-head-summary {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
}
/* Kopf einer Auswertung: rechts nur der Bearbeiten-Knopf. Zeitraum und Gruppierung stehen im Bearbeiten-Dialog. */
#chartDashboard .chart-head-summary > button {
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
}
#chartDashboard .chart-caption b {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 760px) {
  .profile-photo-editor {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
  }
  .profile-photo-editor #removeProfilePhoto {
    grid-column: auto;
    white-space: normal;
  }
} /* Availability uses shapes and line patterns; category colors stay intact. */
.event-status-marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 3px;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
  vertical-align: middle;
}
[data-event-status='free'] > .event-status-marker {
  border-radius: 50%;
  color: #237956;
}
[data-event-status='elsewhere'] > .event-status-marker {
  border-style: dotted;
  color: #306ca9;
}
[data-event-status='limited'] > .event-status-marker {
  color: #8c6414;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 3px,
    rgb(181 132 35 / 0.18) 3px,
    rgb(181 132 35 / 0.18) 5px
  );
  border-style: dashed;
}
[data-event-status='away'] > .event-status-marker {
  border: 3px double #85519c;
  color: #85519c;
}
.event-status-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
  max-width: 340px;
}
.event-status-detail {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
:root[data-theme='dark'] [data-event-status='free'] > .event-status-marker {
  color: #7dd6af;
}
:root[data-theme='dark'] [data-event-status='elsewhere'] > .event-status-marker {
  color: #8fc4ff;
}
:root[data-theme='dark'] [data-event-status='limited'] > .event-status-marker {
  color: #f0cc78;
}
:root[data-theme='dark'] [data-event-status='away'] > .event-status-marker {
  color: #d3a2ec;
  border-color: #d3a2ec;
}
#meetingComposer.routine-occurrence-mode [aria-controls='composerRecurrence'],
#meetingComposer.routine-occurrence-mode #routineDoneField {
  display: none !important;
} /*  ===== Abschnitt aus theme-switch.css =====  */
.theme-preference {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 5px 0 16px;
}
.theme-manual {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}
.theme-switch {
  position: relative;
  display: inline-block !important;
  flex: none;
  width: 44px;
  height: 25px;
  min-height: 25px;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}
.theme-switch > input {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.theme-switch-track {
  display: block;
  width: 44px;
  height: 25px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--muted);
  transition: background 0.15s;
}
.theme-switch-track:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
  transition: transform 0.15s;
}
.theme-switch > input:checked + .theme-switch-track {
  background: var(--accent);
  border-color: var(--accent);
}
.theme-switch > input:checked + .theme-switch-track:after {
  transform: translateX(19px);
}
.theme-switch > input:focus-visible + .theme-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.theme-system {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 !important;
  cursor: pointer;
}
.theme-system > input {
  width: 15px;
  margin: 0;
  accent-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch-track,
  .theme-switch-track:after {
    transition: none;
  }
} /*  ===== Abschnitt aus ui-shell.css =====  */ /* Final layout layer for the local application: quiet surfaces, compact controls. */
* {
  box-sizing: border-box;
}
body {
  min-width: 0;
}
.ui-icon {
  display: block;
  flex: none;
  pointer-events: none;
}
.ui-icon-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 8px;
  flex: none;
}
.ui-icon-button[hidden] {
  display: none !important;
}
body > aside {
  width: 76px;
  padding: 23px 10px;
  align-items: center;
  background: var(--surface);
  border-right: 1px solid var(--line);
  z-index: 30;
}
aside .brand {
  width: 44px;
  height: 44px;
  padding: 6px;
  margin: 0 0 29px;
  overflow: hidden;
  font-size: 0;
  gap: 0;
}
aside .brand img {
  width: 32px;
  height: 32px;
}
aside nav {
  width: 100%;
  gap: 9px;
}
aside nav button {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 13px;
  justify-content: center;
  margin: auto;
  border-radius: 12px;
  color: var(--muted);
}
aside nav button.active {
  box-shadow: none;
  background: var(--tint);
  color: var(--accent-strong);
}
aside nav .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
aside nav .meeting-badge {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  min-width: 16px;
  padding: 2px 4px;
  font-size: 9px;
}
aside .nav-status {
  padding: 0;
  font-size: 0;
  margin-top: auto;
}
main {
  margin-left: 76px;
  padding: 24px 28px;
  max-width: none;
  min-width: 0;
}
.top {
  margin-bottom: 18px;
  min-height: 40px;
}
.top h1 {
  font-size: 22px;
  letter-spacing: -0.5px;
  font-weight: 600;
}
.top .actions {
  gap: 7px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.calendar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
}
.calendar-head > div:first-child {
  margin-right: auto;
}
.calendar-head h3 {
  font-size: 16px;
  font-weight: 600;
}
.calendar-head .controls {
  gap: 5px;
}
.calendar-switch {
  padding: 0;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.calendar-switch button {
  padding: 7px 9px;
  border: 0;
  font-size: 11px;
  background: transparent;
  min-height: 34px;
}
.calendar-switch button.active {
  background: var(--tint);
  color: var(--accent);
  border-radius: 7px;
}
.calendar-head .calendar-switch {
  order: 2;
  margin: 0;
}
.controls #today {
  height: 36px;
  font-size: 11px;
  border: 0;
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.calendar-head .controls {
  order: 3;
  margin-left: auto;
}
.calendar-filters-menu > summary {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 0;
  background: transparent !important;
}
.calendar-filters-menu summary::marker {
  content: '';
}
.event-search form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.calendar-viewport {
  max-width: 100%;
}
:is(#calendarViewport, .zr-viewport).time-viewport {
  border-radius: 0 0 12px 12px;
  min-height: 220px;
}
:is(#timeCalendar, .zr-calendar) .days {
  background: var(--surface);
}
.event {
  border-radius: 5px;
  box-shadow: none;
}
.month-day {
  min-height: 100px;
}
.month-weekdays {
  background: var(--surface);
}
.settings-tabs {
  display: flex;
  gap: 8px;
  border: 0;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.settings-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
}
.settings-tabs button .ui-icon {
  width: 17px;
  height: 17px;
}
.settings-tabs button.active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.settings-pane {
  min-width: 0;
}
.settings-pane .social-grid {
  gap: 32px;
}
.settings-pane .panel h3 {
  font-size: 15px;
}
.settings-pane .form-row {
  max-width: 100%;
}
.settings-pane .field {
  max-width: 100%;
}
.notification-list,
.chart-card {
  border-radius: 12px;
}
.notification-list .meeting-card {
  padding: 18px;
}
.task {
  border-color: var(--line);
}
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  max-height: calc(100dvh - 48px);
  box-shadow: 0 24px 80px #0003;
}
dialog::backdrop {
  background: #0c101861;
  backdrop-filter: blur(4px);
}
.dialog-topbar {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.dialog-body {
  padding: 20px;
}
#meetingComposer {
  width: min(1440px, calc(100vw - 48px));
  max-width: none;
}
#meetingForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  gap: 16px 28px;
  align-items: start;
}
#meetingForm > * {
  grid-column: 1;
  min-width: 0;
  margin: 0;
}
#meetingForm > .composer-inline-planner {
  grid-column: 2;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 0 0 22px;
  min-width: 0;
}
#meetingForm > .composer-inline-planner > h3 {
  display: none;
}
.composer-inline-planner .planner-controls {
  display: flex;
  gap: 7px;
}
.composer-inline-planner .planner-controls .field {
  min-width: 100px;
}
.composer-inline-planner #availabilityCheck {
  font-size: 11px;
  padding: 7px;
  width: 100%;
}
.composer-inline-planner .day-planner-scroll {
  height: 360px;
  max-height: 48dvh;
}
.composer-inline-planner .day-planner-inner {
  min-width: 100%;
}
.composer-inline-planner .day-planner-head {
  grid-template-columns: 40px repeat(var(--people), minmax(60px, 1fr));
}
.composer-inline-planner .day-planner-column {
  min-width: 60px;
}
.composer-inline-planner .cycle-note {
  display: none;
}
#meetingForm > .composer-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  position: relative;
}
.composer-toolbar .composer-tool-field {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  margin: 0;
  color: var(--muted);
}
.composer-toolbar .composer-tool-field > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
}
.composer-toolbar .composer-tool-field:focus-within {
  outline: 2px solid var(--accent);
}
.composer-toolbar .composer-status-tool {
  width: 185px;
  justify-content: flex-start;
  gap: 8px;
  color: var(--ink);
}
.composer-toolbar .composer-status-tool > select {
  position: static;
  opacity: 1;
  width: 155px;
  background: transparent;
  border: 0;
  font-size: 12px;
  padding: 5px;
}
.composer-toolbar .ui-icon-button {
  background: transparent;
  border: 0;
  color: var(--muted);
}
.composer-toolbar .ui-icon-button[aria-expanded='true'] {
  background: var(--tint);
  color: var(--accent);
}
.composer-toolbar #eventStatusPreview {
  display: none;
}
.composer-privacy-tool {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  cursor: pointer;
  color: var(--muted);
}
.composer-privacy-tool input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.composer-privacy-tool > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.composer-privacy-tool:focus-within {
  outline: 2px solid var(--accent);
}
.composer-title-field input {
  line-height: 1.4;
  font-weight: 500;
}
.composer-time-row {
  display: flex;
  gap: 12px;
}
.composer-time-row .field {
  flex: 1;
  min-width: 0;
  font-size: 11px;
}
.composer-time-row input {
  min-width: 0;
  width: 100%;
}
.composer-note-field {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.composer-note-field > .ui-icon {
  width: 18px;
  margin-top: 12px;
  color: var(--muted);
}
.composer-note-field textarea {
  resize: vertical;
}
.composer-section {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.composer-section > summary {
  padding: 12px 0 !important;
  font-size: 12px;
}
.composer-section:not([open]) {
  display: none;
}
.composer-section[open] {
  padding-bottom: 12px !important;
}
.composer-core-options:empty,
.composer-status-row:empty {
  display: none !important;
}
.composer-inline-planner .planner-slot-summary {
  font-size: 11px;
}
.composer-toolbar .mobile-planner-toggle {
  display: none;
}
.routine-settings-mode #meetingForm {
  display: block;
}
.routine-settings-mode #meetingForm > * {
  margin-bottom: 16px;
}
.routine-settings-mode .composer-toolbar {
  display: flex !important;
}
@media (min-width: 701px) and (max-width: 1000px) {
  #meetingForm {
    grid-template-columns: minmax(0, 1fr) 285px;
    gap: 14px;
  }
  .calendar-head {
    gap: 8px;
  }
  .calendar-head .calendar-switch {
    order: 4;
    width: 100%;
  }
  main {
    padding: 20px;
  }
  .calendar-head .controls {
    order: 2;
  }
}
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }
  body > aside {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
    display: flex;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    z-index: 70;
  }
  aside .brand,
  aside .nav-status {
    display: none;
  }
  aside nav {
    display: grid !important;
    gap: 0;
    width: 100%;
  }
  aside nav button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 54px;
    min-width: 0;
    padding: 7px 1px;
    border-radius: 8px;
  }
  aside nav button .ui-icon {
    width: 21px;
    height: 21px;
  }
  aside nav .nav-label {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
  }
  aside nav .meeting-badge {
    right: 4px;
    top: 0;
  }
  main {
    margin: 0 !important;
    padding: 18px 12px calc(90px + env(safe-area-inset-bottom));
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .top {
    margin-bottom: 15px;
    gap: 10px;
  }
  .top h1 {
    font-size: 21px;
  }
  .top .actions {
    flex-wrap: nowrap;
  }
  .top .ui-icon-button {
    width: 40px;
    height: 40px;
  }
  .view,
  .layout,
  .panel,
  .social-grid,
  .settings-pane,
  .connection-heading {
    min-width: 0;
    max-width: 100%;
  }
  .calendar-head {
    padding: 12px;
    gap: 10px;
    align-items: center;
  }
  .calendar-head > div:first-child {
    flex: 1;
  }
  .calendar-head h3 {
    font-size: 14px;
  }
  .calendar-head .controls {
    order: 2;
    margin-left: 0;
    gap: 2px;
  }
  .calendar-head .controls .ui-icon-button,
  .calendar-head .controls #calendarFiltersMenu > summary {
    width: 33px;
    min-width: 33px;
    height: 36px;
    padding: 7px;
  }
  .calendar-head #today {
    padding: 6px !important;
  }
  .calendar-head .calendar-switch {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 0 2px;
    gap: 0;
  }
  .calendar-switch button {
    white-space: nowrap;
    flex: 1;
    font-size: 10px;
    padding: 7px 5px;
    min-width: max-content;
  }
  :is(#timeCalendar, .zr-calendar).compact-days {
    min-width: 100%;
  }
  :is(#calendarViewport, .zr-viewport) {
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
  :is(#calendarViewport, .zr-viewport).time-viewport {
    min-height: 210px;
    max-height: calc(100dvh - 245px);
    --calendar-viewport-height: calc(100dvh - 245px);
  }
  .month-weekdays,
  .month-cells {
    min-width: 0;
  }
  .month-day {
    min-width: 0;
    min-height: 83px;
    padding: 3px;
  }
  .month-event {
    font-size: 9px;
    line-height: 1.25;
    padding: 3px !important;
    overflow: hidden;
    max-height: 42px;
    min-height: 21px !important;
  }
  .month-event[data-event-status] {
    padding-right: 4px !important;
  }
  .month-event .event-status-marker {
    display: none;
  }
  .month-event b {
    font-size: 9px;
  }
  .month-date {
    font-size: 11px;
  }
  .calendar-filters-panel {
    position: fixed !important;
    top: 126px;
    left: 12px;
    right: 12px;
    max-width: none;
    width: auto !important;
    min-width: 0;
    max-height: 65dvh !important;
    z-index: 60;
  }
  .settings-tabs {
    flex-wrap: nowrap;
    margin-bottom: 20px;
    padding-bottom: 4px;
  }
  .settings-tabs button {
    white-space: nowrap;
    padding: 10px;
    font-size: 11px;
  }
  .settings-tabs button .ui-icon {
    width: 16px;
    height: 16px;
  }
  .settings-pane .social-grid,
  .social-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }
  .form-row {
    flex-wrap: wrap;
    min-width: 0;
  }
  .field,
  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
  }
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea {
    font-size: 16px;
  }
  .profile-photo-editor {
    grid-template-columns: 52px 1fr 1fr;
  }
  .friend-code-share {
    gap: 16px;
  }
  .notification-toolbar {
    gap: 12px;
  }
  .notification-toolbar .field {
    min-width: 0;
    width: 100%;
  }
  .notification-toolbar select {
    width: 100%;
  }
  .notification-actions {
    flex-wrap: wrap;
  }
  .notification-actions button {
    min-height: 38px;
  }
  .chart-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }
  .chart-card {
    padding: 14px;
  }
  .category-card {
    flex-wrap: wrap;
  }
  .category-card .category-row-actions {
    width: 100%;
  }
  .sync-issue {
    flex-wrap: wrap;
    font-size: 11px;
  }
  dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 !important;
  }
  dialog .dialog-topbar {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    z-index: 15;
  }
  .dialog-topbar h2 {
    font-size: 16px;
  }
  .dialog-body {
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
    overflow-x: clip;
  }
  .dialog-icon {
    width: 42px;
    height: 42px;
  }
  #meetingForm {
    display: flex;
    flex-direction: column;
  }
  #meetingForm > * {
    width: 100%;
  }
  #meetingForm > .composer-toolbar {
    gap: 2px;
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  .composer-toolbar .composer-status-tool {
    width: 162px;
  }
  .composer-toolbar .composer-status-tool > select {
    width: 138px;
    font-size: 12px;
  }
  .composer-toolbar .composer-tool-field:not(.composer-status-tool),
  .composer-toolbar .ui-icon-button,
  .composer-privacy-tool {
    width: 34px;
    min-width: 34px;
    height: 38px;
  }
  .composer-toolbar .ui-icon {
    width: 19px;
    height: 19px;
  }
  .composer-time-row {
    flex-wrap: wrap;
    gap: 14px;
  }
  .composer-time-row .field {
    flex-basis: 100%;
  }
  .composer-time-row input {
    width: auto;
    max-width: 78%;
  }
  .composer-toolbar .composer-tool-field > select {
    font-size: 16px;
  }
  #meetingForm > .composer-inline-planner {
    display: none;
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: 10px;
    order: 20;
  }
  #meetingComposer.show-mobile-planner .composer-inline-planner {
    display: block;
  }
  #meetingComposer.planner-focus .composer-inline-planner {
    display: block;
  }
  #meetingForm > .composer-section {
    margin: 0;
  }
  .composer-inline-planner .day-planner-scroll {
    height: 300px;
    max-height: 52dvh;
  }
  .composer-inline-planner .planner-controls {
    flex-wrap: wrap;
  }
  .composer-inline-planner .planner-controls .field {
    flex: 1;
    min-width: 110px;
  }
  .composer-title-field {
    order: 0;
  }
  #toast {
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    font-size: 12px;
  }
  .routine-week-scroll {
    max-width: 100%;
    overflow: auto;
  }
  .friend-options {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
@media (min-width: 701px) {
  body main,
  body:has(#calendarView.active) main {
    margin-left: 76px;
    padding: 24px 28px;
    width: auto;
  }
}
@media (max-width: 700px) {
  body main,
  body:has(#calendarView.active) main {
    margin: 0;
    padding: 18px 12px calc(90px + env(safe-area-inset-bottom));
    width: 100%;
  }
}
#meetingForm > .composer-core-options:not(:has(label:not([hidden]))) {
  display: none;
}
#meetingForm .composer-tool-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
#meetingForm .composer-tool-field > .ui-icon {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
}
#meetingForm .composer-note-field {
  display: flex !important;
  flex-direction: row !important;
}
#meetingForm > .composer-inline-planner {
  grid-row: 2 / span 12;
}
body:has(dialog[open]) {
  overflow: hidden;
}
@media (min-width: 701px) {
  #meetingComposer {
    height: auto;
    min-height: 580px;
  }
  .composer-toolbar .mobile-planner-toggle {
    display: none !important;
  }
}
@media (max-width: 700px) {
  .composer-toolbar .mobile-planner-toggle {
    display: inline-flex !important;
  }
}
#meetingComposer .dialog-body {
  height: auto;
  overflow: auto;
}
@media (max-width: 700px) {
  #meetingComposer {
    height: 100dvh !important;
    max-height: 100dvh !important;
    inset: 0;
    margin: 0 !important;
  }
  #meetingComposer .dialog-body {
    height: calc(100dvh - 68px);
    max-height: none;
    overflow: auto;
  }
  #meetingForm {
    gap: 14px;
  }
}
@media (max-width: 700px) {
  .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 6px;
  }
  .settings-tabs button {
    justify-content: flex-start;
    min-height: 42px;
  }
  .settings-pane .sub {
    font-size: 12px;
    line-height: 1.65;
  }
  :is(#grid, .zr-grid),
  :is(#grid, .zr-grid) .column,
  :is(#grid, .zr-grid) .calendar-movable {
    touch-action: pan-x pan-y;
  }
  .calendar-resize {
    display: none;
  }
}
@media (max-width: 700px) {
  aside nav {
    overflow: hidden !important;
    padding: 0 !important;
    height: 56px;
  }
  aside nav .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  aside nav button {
    overflow: visible;
  }
  body > aside {
    overflow: hidden;
  }
}
#meetingForm [hidden] {
  display: none !important;
}
#meetingComposer input::placeholder,
#meetingComposer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.top #captureDay {
  background: transparent !important;
  border: 1px solid var(--line);
  color: var(--muted) !important;
} /* All seven days fit the preview; focus expands the same planner across the dialog. */
#meetingComposer #plannerResult .day-planner-inner {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
}
#meetingComposer #plannerResult .day-planner-head {
  grid-template-columns: 36px repeat(var(--people), minmax(0, 1fr));
}
#meetingComposer #plannerResult .day-planner-head > div {
  min-width: 0;
  padding: 5px 1px;
  text-align: center;
}
#meetingComposer #plannerResult .day-planner-head b {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#meetingComposer #plannerResult .planner-day-date {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
#meetingComposer #plannerResult .day-planner-body {
  grid-template-columns: 36px minmax(0, 1fr);
}
#meetingComposer #plannerResult .day-planner-column {
  flex: 1 1 0;
  min-width: 0 !important;
}
#meetingComposer #plannerResult .day-planner-columns {
  min-width: 0;
}
#meetingComposer #plannerResult .planner-own-all-day {
  grid-template-columns: 36px repeat(var(--people), minmax(0, 1fr)) !important;
}
#meetingComposer.planner-focus #meetingForm {
  display: block !important;
  width: 100%;
  height: 100%;
}
#meetingComposer.planner-focus #meetingForm > .composer-inline-planner {
  width: 100%;
  grid-column: auto;
  grid-row: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}
#meetingComposer.planner-focus .dialog-body {
  height: calc(100dvh - 112px);
  max-height: none;
  padding: 16px;
  overflow: hidden;
}
#meetingComposer.planner-focus #plannerResult .day-planner-scroll {
  height: var(--planner-viewport-height, 360px) !important;
  max-height: none !important;
}
#meetingComposer.planner-focus #plannerResult .day-planner-head b {
  font-size: 11px;
}
#meetingComposer.planner-focus #plannerResult .planner-day-date {
  font-size: 12px;
}
#meetingComposer.planner-focus #meetingForm > .composer-inline-planner .planner-controls {
  flex-wrap: nowrap;
  justify-content: flex-end;
}
#meetingComposer.planner-focus .planner-controls .field {
  flex: 0 1 190px;
}
select option,
select optgroup {
  background-color: var(--surface-raised);
  color: var(--ink);
}
#meetingForm > .composer-toolbar > .field {
  margin: 0 !important;
  align-self: center;
}
#meetingForm #personalPrivateField.composer-private-toggle {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0 !important;
}
#meetingForm #personalPrivateField input {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  cursor: pointer;
  margin: 0 !important;
  opacity: 0;
}
#meetingForm .composer-toolbar > .ui-icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  align-self: center;
  margin: 0 !important;
}
#meetingForm #personalPrivateField > .ui-icon {
  margin: 0;
  width: 21px;
  height: 21px;
}
[data-ui-help],
.cycle-note,
.analysis-note,
.mode-help {
  display: none !important;
}
label.field:has(#acceptCalendarTarget) {
  display: none !important;
}
.friends-find-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.friends-find-heading h3 {
  margin: 0 !important;
}
.friends-find-panel .friend-search {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.friends-find-panel .friend-search > .field {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.friends-find-panel .friend-search > button {
  min-height: var(--button-h);
}
.friend-code-entry {
  margin-top: 16px;
}
.friend-code-entry > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.friend-code-entry .friend-code-form {
  margin-top: 12px;
}
#myFriendCodeDialog {
  width: min(480px, calc(100vw - 28px));
  padding: 0;
}
#myFriendCodeDialog .friend-code-share {
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
  margin: 0;
}
/* QR code in a tile like the other cards; link and both actions below it in one block. */
#myFriendCodeDialog .friend-qr-block {
  flex: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
#myFriendCodeDialog .friend-qr-block canvas {
  border-radius: var(--radius-field);
}
#myFriendCodeDialog .friend-code-link {
  width: 100%;
}
#myFriendCodeDialog .friend-code-link .meeting-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
#myFriendCodeDialog .friend-code-link .meeting-buttons > button {
  width: 100%;
  min-height: var(--button-h);
  margin: 0;
}
#myFriendCodeDialog .dialog-body {
  padding: 20px;
}
#myFriendCodeDialog .meeting-buttons {
  display: flex;
  gap: 8px;
}
@media (max-width: 700px) {
  #meetingComposer.planner-focus .dialog-body {
    height: calc(100dvh - 68px);
    padding: 12px;
  }
  #meetingComposer.planner-focus #meetingForm > .composer-inline-planner .planner-controls {
    flex-wrap: wrap;
  }
  .friends-find-panel {
    padding: 16px !important;
  }
  #myFriendCodeDialog {
    height: 100dvh;
    max-height: 100dvh;
  }
  .friends-find-panel .friend-search {
    flex-wrap: wrap;
  }
  .friends-find-panel .friend-search > .field {
    flex-basis: 100%;
  }
  .friends-find-panel .friend-search > button {
    width: 100%;
  }
}
#meetingComposer #plannerResult .day-planner-head > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.friends-find-panel {
  margin-bottom: 18px;
}
#myFriendCodeDialog .dialog-x {
  border: 0;
  background: transparent;
}
#meetingForm > .composer-card[open] {
  display: block;
  min-width: 0;
}
.composer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.composer-card-head h3 {
  font-size: 13px !important;
  margin: 0 !important;
  font-weight: 600;
}
#composerFriends .meeting-friends {
  border: 0;
  padding: 0;
  margin: 0;
}
#composerFriends .meeting-friends > legend {
  display: none;
}
#meetingFriendDropdown .friend-selection-label {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 9px;
}
#meetingFriendDropdown .meeting-friend-menu {
  padding: 0;
  border: 0;
  background: transparent;
}
#meetingFriendPicker {
  max-height: 200px !important;
  overflow: auto;
}
.composer-card .field:last-child {
  margin-bottom: 0 !important;
}
.composer-toolbar [data-configured='true'] {
  position: relative;
  background: var(--tint) !important;
  color: var(--accent) !important;
  border-radius: 7px;
}
.composer-toolbar [data-configured='true']:after {
  content: '';
  position: absolute;
  right: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}
#syncNow.sync-refresh-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 9px;
  background: var(--surface-raised);
  color: var(--ink);
} /* The preview reserves its space for the calendar, with details in the expanded view. */
#meetingForm .composer-inline-planner .planner-controls {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
}
#meetingForm .composer-inline-planner .planner-controls > .field {
  min-width: 0 !important;
  width: 100%;
  margin: 0 !important;
  font-size: 0;
  gap: 0;
}
#meetingForm .composer-inline-planner .planner-controls input,
#meetingForm .composer-inline-planner .planner-controls select {
  min-width: 0;
  width: 100%;
}
#meetingForm .composer-inline-planner .planner-controls > #availabilityCheck {
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  padding: 8px !important;
  font-size: 0;
  align-self: center;
}
#meetingComposer:not(.planner-focus) #plannerResult .planner-slot-summary,
#meetingComposer:not(.planner-focus) #plannerResult .planner-person-status,
#meetingComposer:not(.planner-focus) #plannerResult .availability-view-switch {
  display: none !important;
}
#meetingComposer #plannerResult .planner-person-status {
  display: none !important;
}
#meetingComposer:not(.planner-focus) #plannerResult .day-planner-scroll {
  height: var(--planner-viewport-height, 320px);
  max-height: var(--planner-viewport-height, 320px);
  min-height: 420px;
}
#meetingComposer.planner-focus #meetingForm > .composer-inline-planner {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
#meetingComposer.planner-focus #plannerResult {
  display: block;
}
#meetingComposer.planner-focus #meetingForm > .composer-inline-planner .planner-controls {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr auto;
  width: 100%;
  gap: 5px;
  margin: 0;
}
#meetingComposer.planner-focus #plannerResult .availability-view-switch {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  justify-self: start;
}
#meetingComposer.planner-focus #plannerResult .planner-slot-summary {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 11px;
}
#meetingComposer.planner-focus #plannerResult .availability-view-switch:not([hidden]) ~ .planner-slot-summary {
  grid-column: 2;
}
#meetingComposer.planner-focus #plannerResult .day-planner-scroll {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  width: 100%;
}
#meetingComposer.planner-focus #plannerResult .availability-view-switch button {
  padding: 7px 10px;
  min-height: 32px;
  font-size: 11px;
}
@media (max-width: 700px) {
  #meetingComposer.planner-focus #meetingForm > .composer-inline-planner {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  #meetingComposer.planner-focus #meetingForm > .composer-inline-planner .planner-controls {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }
  #meetingComposer.planner-focus #plannerResult .availability-view-switch {
    grid-row: 3;
  }
  #meetingComposer.planner-focus #plannerResult .planner-slot-summary,
  #meetingComposer.planner-focus #plannerResult .availability-view-switch:not([hidden]) ~ .planner-slot-summary {
    grid-column: 1;
    grid-row: 4;
  }
  #meetingComposer.planner-focus #plannerResult .day-planner-scroll {
    grid-row: 5;
  }
}
#meetingForm .composer-toolbar [data-configured='true'] {
  background: var(--tint) !important;
  color: var(--accent) !important;
}
select:focus {
  outline: none;
}
#meetingForm .composer-tool-field:focus-within {
  outline: none !important;
} /* Nested filter summaries are full-width rows, not toolbar icon buttons. */
#calendarFiltersMenu .calendar-filters-panel .calendar-overlays > details {
  margin: 0;
  padding: 0;
}
#calendarFiltersMenu .calendar-filters-panel .calendar-overlays > details > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 42px;
  padding: 10px 0 !important;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  list-style: none;
}
#calendarFiltersMenu .calendar-filters-panel .calendar-overlays > details > summary::-webkit-details-marker {
  display: none;
}
#calendarFiltersMenu .calendar-filters-panel .calendar-overlays > details > summary:after {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin: 0 3px 3px auto;
}
#calendarFiltersMenu .calendar-filters-panel .calendar-overlays > details[open] > summary:after {
  transform: rotate(225deg);
  margin-bottom: -3px;
}
#friendSearchForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}
#friendSearchForm > .field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0 !important;
}
#friendSearchForm input {
  width: 100%;
  margin: 0 !important;
}
#friendSearchForm > button {
  align-self: end;
  height: var(--button-h);
  min-height: var(--button-h);
  margin: 0 !important;
  padding: 0 16px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 700px) {
  #friendSearchForm {
    grid-template-columns: minmax(0, 1fr);
  }
  #friendSearchForm input,
  #friendSearchForm > button {
    height: var(--field-h);
    min-height: var(--field-h);
  }
  #friendSearchForm > button {
    width: 100%;
  }
}
#socialProfileForm select {
  display: block;
  width: 100%;
  margin: 7px 0 0;
  box-sizing: border-box;
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
}
@media (max-width: 700px) {
} /* Routine and goal editors use the same title, toolbar and underlined fields as appointments. */
#routineDialog.planning-composer-dialog,
#targetGoalDialog.planning-composer-dialog {
  width: min(720px, calc(100vw - 48px));
  max-width: none;
  height: auto;
  min-height: 0;
}
.planning-composer-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.planning-composer-dialog > .dialog-topbar {
  flex: none;
}
.planning-composer-dialog .dialog-body {
  padding: 20px 24px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-gutter: stable;
}
.planning-composer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.planning-composer > .field,
.planning-composer > .form-row,
.planning-composer > fieldset,
.planning-composer > #targetGoalRhythm {
  margin: 0 !important;
  min-width: 0;
}
.planning-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.planning-toolbar .planning-tool-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0 !important;
  flex: none;
  color: var(--muted);
}
.planning-toolbar .planning-tool-field > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.planning-toolbar .planning-tool-wide {
  width: auto;
  max-width: 100%;
  gap: 7px;
}
.planning-toolbar .planning-tool-wide > select {
  position: static;
  opacity: 1;
  width: auto;
  max-width: 220px;
  font-size: 12px;
  border: 0;
  background: transparent;
  margin: 0 !important;
  padding: 0 5px;
}
.planning-toolbar > .ui-icon-button {
  height: 36px;
  width: 36px;
  min-width: 36px;
  padding: 7px;
  border: 0;
  color: var(--muted);
}
.planning-toolbar > [data-configured='true'] {
  color: var(--accent) !important;
  background: var(--tint) !important;
  border-radius: 7px;
}
#routineForm .planning-title-field input,
#targetGoalForm .planning-title-field input {
  font-weight: 500;
  line-height: 1.4;
  margin: 0 !important;
}
.planning-composer .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}
.planning-composer input:not([type='hidden']),
.planning-composer select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#routineForm > .form-row,
#targetGoalRhythm > .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#routineForm > .form-row > .field,
#targetGoalRhythm > .form-row > .field {
  margin: 0 !important;
}
#routineForm .field:not(.planning-tool-field):not(.planning-title-field) > input,
#routineForm .field:not(.planning-tool-field) > select,
#targetGoalForm .field:not(.planning-tool-field):not(.planning-title-field) > input,
#targetGoalForm .field:not(.planning-tool-field) > select {
  height: 38px;
  min-height: 38px;
  max-height: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 3px;
  margin: 0 !important;
  background: transparent;
  font-size: 13px;
}
#routineForm .planning-duration,
#targetGoalForm .planning-duration {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.planning-duration legend {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
}
.planning-duration .field {
  margin: 0 !important;
}
.planning-date-field {
  position: relative;
  padding-left: 30px;
}
.planning-date-field > .ui-icon {
  position: absolute;
  left: 0;
  top: 28px;
  width: 18px;
  height: 18px;
}
.planning-composer #targetGoalRhythm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.planning-composer [hidden] {
  display: none !important;
}
#routineForm > .form-row:not(:has(> :not([hidden]))) {
  display: none;
}
.planning-composer .dialog-actions {
  margin: 0;
}
.planning-composer .category-error:empty {
  display: none;
}
#taskForm > .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
#taskForm > .form-row > .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0 !important;
}
#taskForm > .form-row > .field :is(input, select) {
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  line-height: normal;
}
@media (max-width: 700px) {
  #routineDialog.planning-composer-dialog,
  #targetGoalDialog.planning-composer-dialog {
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw !important;
  }
  .planning-composer-dialog .dialog-body {
    padding: 18px 14px 28px;
  }
  .planning-composer {
    gap: 17px;
  }
  .planning-toolbar .planning-tool-wide > select {
    max-width: 190px;
    font-size: 12px;
  }
  #routineForm > .form-row,
  #targetGoalRhythm > .form-row {
    gap: 12px;
  }
  #routineForm .field:not(.planning-tool-field):not(.planning-title-field) > input,
  #routineForm .field:not(.planning-tool-field) > select,
  #targetGoalForm .field:not(.planning-tool-field):not(.planning-title-field) > input,
  #targetGoalForm .field:not(.planning-tool-field) > select {
    height: 42px;
    min-height: 42px;
    font-size: 16px;
  }
  #taskForm > .form-row {
    gap: 12px;
  }
}
#routineForm .planning-toolbar .field,
#targetGoalForm .planning-toolbar .field {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  height: 36px;
}
#targetGoalForm .planning-toolbar .planning-tool-wide {
  justify-content: flex-start;
  padding: 0 8px;
  background: var(--surface-raised);
  border-radius: 7px;
}
#targetGoalForm .planning-toolbar .planning-tool-wide select {
  min-width: 75px;
  max-width: 135px;
  font-size: 12px;
  height: 36px;
  padding: 0 4px;
}
.planning-frequency-row {
  display: grid;
  grid-template-columns: minmax(65px, 0.75fr) minmax(65px, 0.75fr) minmax(110px, 1.5fr);
  gap: 18px;
}
.planning-frequency-row > .field {
  margin: 0 !important;
}
#routineForm .duration-picker,
#targetGoalForm .duration-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}
.duration-picker legend {
  margin-bottom: 10px;
  font-size: 11px;
}
.duration-quick-choices {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.duration-quick-choices button {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.planning-composer .duration-quick-choices button[aria-pressed='true'] {
  background: var(--tint);
  color: var(--accent);
  border-color: var(--accent);
}
#taskForm .planning-title-field input {
  margin: 0 !important;
  font-weight: 500;
}
@media (max-width: 700px) {
  .planning-frequency-row {
    gap: 12px;
  }
  .duration-quick-choices {
    flex-basis: 100%;
  }
}
/* Period of an analysis (analytics.js): "Vergangene · 3 · Monate" in one row. The words need more room than the
   count; hidden fields leave their room to the others (direction alone for "Freier Zeitraum"). */
#analysisForm .analysis-range-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1.3fr);
  margin: 0 0 4px;
}
#analysisForm .analysis-range-row:has(#analysisCountField[hidden]) {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr);
}
#analysisForm .analysis-range-row:has(#analysisUnitField[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
#analysisForm .analysis-range-row > .field[hidden] {
  display: none;
}
#analysisForm .analysis-range-row :is(select, input) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-inline: 10px;
}
/* The number field gets the same distance to its label as the selects beside it. */
#analysisForm .analysis-range-row input {
  margin-top: 7px;
  text-align: center;
} /* Account settings as a list (account-password.js): one row per setting with label, current value and arrow;
   the row opens its part below. Rows are separated by thin lines, like the settings of a phone. */
.account-row-item {
  margin: 0;
  border-top: 1px solid var(--line);
}
.account-row-item:not(.account-row-item + .account-row-item) {
  margin-top: 16px;
}
.account-row-item:not(:has(+ .account-row-item)) {
  border-bottom: 1px solid var(--line);
}
.account-row-panel {
  padding: 0 2px 14px;
}
#settingsPasswordForm,
#settingsTwoFactorForm,
#settingsEmailForm,
#settingsDeleteForm {
  display: grid;
  gap: 14px;
  max-width: 440px;
  margin-top: 18px;
}
:is(#settingsPasswordForm, #settingsTwoFactorForm, #settingsEmailForm, #settingsDeleteForm)[hidden],
:is(#settingsTwoFactorForm, #settingsEmailForm) .field[hidden] {
  display: none !important;
}
:is(#settingsPasswordForm, #settingsTwoFactorForm, #settingsEmailForm, #settingsDeleteForm) .field {
  display: grid;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
:is(#settingsPasswordForm, #settingsTwoFactorForm, #settingsEmailForm, #settingsDeleteForm) input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
#settingsPasswordStatus,
#settingsTwoFactorStatus,
#settingsEmailStatus,
#settingsDeleteStatus,
#settingsDeleteForm > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Live password rules below a new-password field (password-policy.js). */
.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: -6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--muted);
}
.password-rules li::before {
  content: '○ ';
}
.password-rules li.ok {
  color: var(--ink);
}
.password-rules li.ok::before {
  content: '✓ ';
  color: var(--accent);
}
/* Privacy notice and account deletion below the setting rows. */
.account-legal {
  margin: 22px 0 0;
}
:is(.account-two-factor .two-factor-toggle, .account-email .email-toggle) {
  min-height: var(--button-h);
}
/* "Alle vergessen" for remembered devices: a quiet text link inside the sentence (the id outranks the general
   button colours of the dark theme). */
#settingsView .account-two-factor .two-factor-forget {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
:is(.account-two-factor, .account-email, .account-legal, .settings-legal-card) p {
  margin: 8px 0;
}
.account-delete {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  #settingsPasswordForm,
  #settingsTwoFactorForm,
  #settingsDeleteForm {
    max-width: none;
  }
  .password-actions button {
    flex: 1;
    min-height: 44px;
  }
} /* Start page: a quiet capture field, actionable counters and short lists. */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
aside nav [data-view='meetings'] {
  display: none !important;
}
#homeView {
  max-width: 1280px;
  margin: 0 auto;
}
.home-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 20px;
}
.home-welcome p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
}
.home-welcome h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.home-new-event {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: 12px;
}
.home-capture {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 22px;
}
.home-capture > .ui-icon {
  color: var(--muted);
}
#homeQuickTask input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 9px 0;
  margin: 0 !important;
  height: 40px;
  font-size: 15px;
}
.home-capture button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 9px;
  display: grid;
  place-items: center;
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.home-stats > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
  gap: 5px;
}
.home-stats > button:hover {
  border-color: var(--accent);
}
.home-stats span {
  font-size: 12px;
  color: var(--muted);
}
.home-stats strong {
  font-size: 32px;
  font-weight: 550;
  color: var(--ink);
  line-height: 1.3;
}
.home-stats small {
  font-size: 11px;
  color: var(--muted);
}
.home-load-status {
  font-size: 12px;
  color: var(--muted);
  margin: -8px 0 18px;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.home-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 20px;
  min-width: 0;
}
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.home-card-head h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 600;
}
.home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.home-link:hover {
  color: var(--accent);
}
.home-empty {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 16px 0 4px;
}
.home-card .task {
  padding: 12px 0;
  gap: 9px;
  flex-wrap: wrap;
}
.home-card .task-content {
  min-width: 80px;
  flex: 1;
}
.home-card .task strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.home-card .task small {
  font-size: 10px;
}
.home-card .task .delete {
  font-size: 10px;
  padding: 6px 8px;
  min-height: 30px;
}
/* Einträge der Aufgabenliste (eigene Seite, notifications.js): Text mit Abstand zum Kartenrand. */
.home-notice {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
}
.home-notice:first-child {
  border-top: 0;
}
.home-notice > strong {
  font-size: 12px;
  font-weight: 550;
}
.home-notice > p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin: 5px 0 9px;
}
.home-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-notice-actions button {
  font-size: 10px;
  padding: 6px 9px;
  min-height: 30px;
}
.home-agenda-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 13px 0;
}
.home-agenda-item:first-child {
  border-top: 0;
}
/* Date and time on one line, so each entry stays one line high. */
.home-agenda-date {
  width: 118px;
  flex: none;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.home-agenda-date b {
  display: inline;
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.home-agenda-title {
  flex: 1;
  min-width: 0;
}
/* Titel und Ort je eine Zeile; der volle Text steht im Tooltip des Eintrags (home.js). */
.home-agenda-title strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.home-agenda-title small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.home-event-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  flex: none;
}
.home-progress {
  padding: 11px 0 3px;
}
.home-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.home-progress strong {
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.home-progress span {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}
.home-progress progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
  accent-color: var(--accent);
}
.home-progress progress::-webkit-progress-bar {
  background: var(--line);
}
.home-progress progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 6px;
}
.home-progress[data-tone='success'] progress::-webkit-progress-value {
  background: #77a58b;
}
.home-progress[data-tone='warning'] progress::-webkit-progress-value {
  background: #d48a63;
}
.home-goals-card {
  grid-column: 1 / -1;
}
#homeGoals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
}
.home-goal {
  display: block;
  text-align: left;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
.home-goal:hover strong {
  color: var(--accent);
}
/* Clock-style duration fields keep hours and minutes separately editable. */
.duration-clock {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 180px;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}
.duration-clock label {
  display: block;
  min-width: 0;
  margin: 0;
}
.planning-composer .duration-clock input {
  width: 52px !important;
  height: calc(var(--field-h) - 2px);
  min-height: calc(var(--field-h) - 2px);
  padding: 0 3px;
  margin: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  box-shadow: none;
}
.duration-clock label:first-child input {
  width: 65px !important;
}
.duration-clock .ui-icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--muted);
}
.duration-clock input::-webkit-inner-spin-button {
  appearance: none;
}
.duration-clock input:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: -2px;
}
.routine-actions {
  display: flex;
  align-items: flex-start !important;
  gap: 12px;
  flex-wrap: wrap;
}
.routine-actions > #newRoutine {
  flex: none;
  min-height: var(--button-h);
  white-space: nowrap;
  margin: 0;
}
.routine-plan-action {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}
.routine-plan-action > .field {
  flex: 0 1 170px;
  min-width: 130px;
  display: block;
  margin: 0 !important;
  padding: 0;
}
.routine-plan-action :is(select, input, button) {
  height: var(--field-h);
  min-height: var(--field-h);
  margin: 0 !important;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: normal;
}
.routine-plan-action > input {
  width: 170px;
  min-width: 140px;
  flex: 0 1 170px;
}
.routine-plan-action > button {
  flex: none;
  white-space: nowrap;
}
.routine-plan-action .routine-week-caption {
  flex-basis: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 700px) {
  .home-welcome {
    margin: 0 0 16px;
  }
  .home-welcome h2 {
    font-size: 22px;
  }
  .home-capture {
    padding-left: 12px;
    gap: 8px;
    margin-bottom: 16px;
  }
  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
  }
  .home-stats > button {
    padding: 14px;
  }
  .home-stats strong {
    font-size: 27px;
  }
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .home-card {
    padding: 16px;
  }
  .home-card-head {
    gap: 8px;
  }
  .home-goals-card {
    grid-column: 1;
  }
  #homeGoals {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-progress > div {
    align-items: flex-start;
  }
  .home-progress span {
    max-width: 55%;
  }
  .routine-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .routine-actions > #newRoutine {
    justify-self: start;
    width: auto;
  }
  .routine-plan-action > .field {
    flex: 1 1 145px;
  }
  .routine-plan-action > input {
    flex: 1 1 145px;
  }
  .routine-plan-action :is(select, input, button) {
    height: 42px;
    min-height: 42px;
    font-size: 14px;
  }
  .planning-composer .duration-clock input {
    font-size: 16px;
  }
  .home-link {
    font-size: 10px;
  }
} /* Personal ToDos and incoming requests have separate places and counters. */
/* Bell (requests) and ToDo icon share look and count badge; both only on the start page. */
:is(#openUserRequests, #openTodos) {
  position: relative;
  flex: none;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
}
:is(#openUserRequests, #openTodos) .meeting-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 1px 4px;
  margin: 0;
  border-radius: 12px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 9px;
  line-height: 15px;
  box-shadow: 0 0 0 2px var(--paper);
}
:is(#openUserRequests, #openTodos) .meeting-badge[hidden] {
  display: none !important;
}
body:not(:has(#homeView.active)) :is(#openUserRequests, #openTodos) {
  display: none !important;
}
#homeView .home-new-event {
  background: var(--accent-fill) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
#homeTasksCard .home-capture {
  margin: 0 0 12px;
  border-radius: 9px;
  background: var(--surface-raised);
}
#homeTasksCard .home-capture > .ui-icon {
  width: 18px;
  height: 18px;
}
#homeTasksCard #homeTaskTitle {
  font-size: 13px;
}
#homeTasksCard .task-history {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 12px;
}
#homeTasksCard .task-history > summary {
  color: var(--muted);
  cursor: pointer;
}
#homeTasksCard {
  scroll-margin-top: 18px;
}
#homeTodoToggle {
  margin-top: 12px;
  color: var(--accent);
}
#homeTodoToggle[hidden],
#homeTasksCard .home-link[hidden] {
  display: none !important;
}
#newRoutine.ui-icon-button,
#newTargetGoal.ui-icon-button {
  width: var(--button-h) !important;
  height: var(--button-h);
  min-width: var(--button-h) !important;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  #homeTasksCard #homeTaskTitle {
    font-size: 16px !important;
  }
  #newRoutine.ui-icon-button,
  #newTargetGoal.ui-icon-button {
    width: var(--button-h) !important;
    height: var(--button-h);
    min-width: var(--button-h) !important;
  }
}
body:has(#calendarView.active) #captureDay {
  display: none !important;
}
aside nav [data-view='routines'] {
  display: none !important;
}
#homeTodoCard.has-open-todos {
  border-color: var(--accent);
  box-shadow: inset 3px 0 var(--accent);
  background: linear-gradient(var(--tint), var(--tint)), var(--surface);
}
#homeTodoCard.has-open-todos h2 {
  color: var(--accent);
}
#homeTodoBadge[hidden] {
  display: none !important;
}
#taskHistoryDialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
}
#taskHistoryDialog .dialog-body {
  max-height: 65dvh;
  overflow: auto;
}
#taskHistoryDialog .task {
  padding: 14px 0;
  gap: 10px;
  flex-wrap: wrap;
}
#taskHistoryDialog .task-content {
  flex: 1;
  min-width: 140px;
}
#openTaskHistory {
  margin-left: 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
}
#homeTasksCard .home-card-head .home-link {
  margin-left: auto;
}
@media (max-width: 700px) {
  aside nav {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  #taskHistoryDialog {
    width: 100vw;
    height: 100dvh;
  }
  #taskHistoryDialog .dialog-body {
    max-height: calc(100dvh - 74px);
  }
}
.duration-clock .duration-picker-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 34px;
  padding: 4px;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.duration-clock .duration-picker-toggle .ui-icon {
  margin: 0;
}
.duration-scroll-picker {
  position: fixed;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  box-shadow: var(--shade);
  background: var(--surface-raised);
  color: var(--ink);
}
.duration-scroll-picker[hidden] {
  display: none !important;
}
.duration-scroll-picker > div {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
}
.duration-scroll-picker > div > span {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}
.duration-number-list {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  min-height: 0;
}
.duration-number-list button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  text-align: center;
}
.duration-number-list button[aria-selected='true'] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.duration-number-list button:hover {
  background: var(--tint);
}
#homeNextCountdown {
  font-size: clamp(20px, 2.7vw, 30px);
  white-space: nowrap;
}
#homeTasksCard .home-capture {
  padding: 3px 6px 3px 10px;
  gap: 10px;
}
#homeTasksCard #homeTaskTitle {
  height: 32px;
  min-height: 32px;
  padding: 5px 0 !important;
}
#homeTasksCard .home-capture > button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 6px;
}
#homeTasksCard .home-capture > button .ui-icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 700px) {
  #homeTasksCard #homeTaskTitle {
    height: 36px;
    min-height: 36px;
  }
  #homeTasksCard .home-capture > button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}
#proposalDialog.proposal-planner-dialog {
  width: min(1100px, 96vw);
  max-width: 1100px;
}
#proposalForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#proposalForm > .field {
  margin: 0;
}
#proposalForm > .proposal-planning,
#proposalForm > .category-error,
#proposalForm > .dialog-actions {
  grid-column: 1/-1;
}
/* Datum und Ansicht stehen im gemeinsamen Kalenderkopf des Planers; die Felder bleiben für ihre Verknüpfung erhalten. */
.proposal-planner-controls {
  display: none;
}
#proposalCalendar {
  min-width: 0;
}
#proposalCalendar .day-planner-inner {
  min-width: 100%;
}
#proposalCalendar .day-planner-column {
  min-width: 0;
}
#proposalCalendar .cycle-note {
  display: none;
}
#proposalCalendar .day-planner-scroll {
  --planner-viewport-height: 380px;
  --planner-hour-height: 40px;
}
#proposalCalendar .planner-person-status {
  display: none;
}
@media (max-width: 700px) {
  #proposalDialog.proposal-planner-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
  }
  #proposalForm {
    gap: 10px;
  }
  #proposalCalendar .day-planner-scroll {
    --planner-viewport-height: 350px;
  }
}
#meetingDetails .dialog-topbar h2 {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
#meetingDetails .dialog-topbar-actions {
  flex-shrink: 0;
}
.task .task-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  padding: 7px !important;
  /* Zeilenaktionen bleiben im Hintergrund: ohne Rahmen und Fläche, erst beim Überfahren sichtbar. */
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.task .task-action svg {
  width: 20px;
  height: 20px;
}
aside button.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
aside button.brand:hover {
  background: var(--tint);
}
aside button.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#homeTasksCard #homeTasks > .task {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 36px 36px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}
#homeTasksCard #homeTasks > .task > input[type='checkbox'] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  align-self: center;
  accent-color: var(--accent);
  cursor: pointer;
}
#homeTasksCard #homeTasks .task-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
}
#homeTasksCard #homeTasks .task strong {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
#homeTasksCard #homeTasks .task small {
  font-size: 11px;
  line-height: 1.4;
}
#homeTasksCard #homeTasks .task-action {
  align-self: center;
}
.goal-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 22px;
  padding: 0;
  border: 0;
}
.goal-weekdays[hidden] {
  display: none;
}
.goal-weekdays legend {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.goal-weekdays label {
  position: relative;
  cursor: pointer;
}
.goal-weekdays input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.goal-weekdays span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  font-size: 12px;
}
.goal-weekdays input:checked + span {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.goal-weekdays input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.goal-progress[data-result='reached'] > span {
  background: #459b69 !important;
}
.goal-result[data-result='reached'] {
  color: #459b69 !important;
} /* A consistent dashboard grid keeps cards aligned even when their lists differ. */
#homeView .home-stats {
  gap: 16px;
}
#homeView .home-stats > button {
  height: 132px;
  justify-content: center;
  box-sizing: border-box;
}
#homeView .home-grid {
  gap: 18px;
  align-items: stretch;
  /* Tiles keep one fixed size; long lists scroll inside the tile (wanted, see changelog 05.11.2026). */
  grid-auto-rows: 320px;
}
#homeView .home-grid > .home-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  min-height: 0;
}
#homeView .home-card-head {
  min-height: 36px;
  flex: none;
  margin-bottom: 14px;
  align-items: center;
}
#homeView .home-card-head h2 {
  line-height: 1.4;
}
#homeView .home-goals-card {
  grid-column: auto;
}
/* The lists of the start page scroll on their own; at their end (or when they have nothing to scroll) the wheel
   moves the page on, so the pointer never gets stuck over a card. */
#homeView :is(#homeTasks, #homeNotifications, #homeAgenda, #homeRoutines, #homeGoals) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: auto;
  padding-right: 6px;
}
#homeView #homeGoals {
  display: flex;
  flex-direction: column;
}
#homeView #homeGoals > .home-goal {
  flex: none;
}
#homeView #homeQuickTask {
  flex: none;
  margin-bottom: 10px;
}
#homeView #homeTodoToggle {
  flex: none;
  margin-top: 10px;
}
#homeView .home-empty {
  margin: 8px 0;
  line-height: 1.6;
}
@media (max-width: 700px) {
  #homeView .home-stats {
    gap: 10px;
  }
  #homeView .home-stats > button {
    height: 124px;
    padding: 14px;
  }
  #homeView .home-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 300px;
    gap: 14px;
  }
  #homeView .home-grid > .home-card {
    padding: 16px;
  }
  #homeView .home-card-head {
    margin-bottom: 12px;
  }
}
@media (max-width: 700px) {
  aside button.brand {
    display: none;
  }
} /* Dashboard entries share the same inset and rounded surface. */
#homeView :is(#homeTasks, #homeNotifications, #homeAgenda, #homeRoutines, #homeGoals) {
  padding: 0;
}
#homeView :is(#homeTasks, #homeNotifications, #homeAgenda, #homeRoutines) {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#homeView :is(#homeTasks > .task, .home-notice, .home-agenda-item, .home-routine-item, .home-goal) {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
  flex-shrink: 0;
}
#homeView #homeTasksCard #homeTasks > .task {
  padding: 5px 8px 5px 12px;
}
#homeView :is(.home-goal, .home-routine-item) .home-progress {
  padding: 0;
}
#homeView .home-progress > div {
  margin-bottom: 10px;
}
#homeView :is(.home-routine-item, .home-goal) {
  text-align: left;
}
#homeView .home-routine-item :is(.home-routine-plan, .home-planned) {
  margin: 8px 0 0;
  padding: 0;
  line-height: 1.5;
}
#homeView .home-goal:hover,
#homeView .home-agenda-item:hover {
  border-color: var(--accent);
  background: var(--tint);
}
#homeView :is(.home-goal, .home-agenda-item):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
#homeView #homeGoals {
  gap: 9px;
} /* Keep scrollbar space in the card's outer padding, not in the entry width. */
#homeView :is(#homeTasks, #homeNotifications, #homeAgenda, #homeRoutines, #homeGoals) {
  width: calc(100% + 10px);
  margin-right: -10px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
#allTasksList {
  flex-direction: column;
}
#allTasksList > .task {
  grid-template-columns: 22px minmax(0, 1fr) 36px 36px;
  width: 100%;
}
#allTasksList input[type='checkbox'] {
  min-width: 20px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
#allTasksList .task-content {
  min-width: 0;
  flex: 1;
}
#allTasksList strong {
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#allTasksList small {
  font-size: 11px;
  line-height: 1.4;
}
#allTasksList .task-action {
  margin: 0;
}
@media (max-width: 700px) {
  #allTasksList > .task {
    gap: 8px;
    padding: 12px;
  }
}
#socialStatus:empty {
  display: none;
}
#deletePersonalEvent.event-delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 8px !important;
  border-radius: 8px;
  flex: none;
}
#deletePersonalEvent.event-delete-icon[hidden] {
  display: none !important;
}
#deletePersonalEvent.event-delete-icon svg {
  width: 20px;
  height: 20px;
}
#meetingForm .composer-toolbar #deletePersonalEvent.event-delete-icon {
  margin-left: auto;
}
/* Farben aller Löschen-Knöpfe: gemeinsame Regel „Löschen-Symbolknöpfe“ im Abschnitt ZeitRaum Designsystem. */
.planning-toolbar .planning-delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 8px !important;
  border-radius: 8px;
}
.planning-toolbar .planning-delete-icon[hidden] {
  display: none !important;
}
.planning-toolbar .planning-delete-icon svg {
  width: 20px;
  height: 20px;
}
.planning-composer .planning-number-field {
  display: block;
}
.planning-composer .number-quick-choices {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.number-quick-choices button {
  min-width: 36px;
  padding: 7px 12px;
}
.planning-number-input {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 180px;
}
.planning-composer .planning-number-input input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 7px 8px;
  background: transparent;
}
.planning-number-input input::-webkit-inner-spin-button {
  appearance: none;
}
.number-picker-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.number-picker-toggle svg,
.duration-picker-toggle svg {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
}
.number-scroll-picker {
  grid-template-columns: 1fr;
}
.number-quick-choices button[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}
.planning-composer .planning-number-field[hidden] {
  display: none !important;
}
#targetGoalDialog .dialog-topbar #deleteTargetGoal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  border-radius: 8px;
  padding: 8px !important;
}
#targetGoalDialog .dialog-topbar #deleteTargetGoal[hidden] {
  display: none !important;
}
#targetGoalDialog .dialog-topbar #deleteTargetGoal svg {
  width: 20px;
  height: 20px;
}
#meetingComposer .dialog-topbar #deletePersonalEvent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 8px !important;
  border-radius: 8px;
}
#meetingComposer .dialog-topbar #deletePersonalEvent[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  #meetingComposer .dialog-topbar #deletePersonalEvent {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
}
#targetGoalForm .duration-quick-choices:empty {
  display: none !important;
}
#targetGoalTimeFields .duration-clock {
  margin-left: 0;
}
#targetGoalForm .planning-number-input {
  margin-top: 8px;
}
#routineDialog .dialog-topbar #deleteRoutineFromForm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  padding: 8px !important;
  border-radius: 8px;
}
#routineDialog .dialog-topbar #deleteRoutineFromForm[hidden] {
  display: none !important;
}
#routineDialog .dialog-topbar #deleteRoutineFromForm svg {
  width: 20px;
  height: 20px;
}
#routineForm .duration-quick-choices:empty {
  display: none !important;
}
#routineForm .routine-duration .duration-clock {
  margin-left: 0;
} /* Matching controls for the interval and its unit. */
#targetGoalRhythm > .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#targetGoalRhythm > .form-row > .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
}
#targetGoalRhythm > .form-row .number-quick-choices:empty {
  display: none !important;
}
#targetGoalRhythm > .form-row .planning-number-input {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  gap: 0;
}
#targetGoalRhythm > .form-row .planning-number-input input {
  height: calc(var(--field-h) - 2px);
  min-height: calc(var(--field-h) - 2px);
  margin: 0;
  padding: 0 12px;
  box-shadow: none;
  font-size: 14px;
  line-height: normal;
}
#targetGoalRhythm > .form-row select {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  line-height: normal;
}
#targetGoalRhythm > .form-row .number-picker-toggle {
  height: 32px;
  width: 32px;
  margin: 0;
  background: transparent;
}
@media (max-width: 420px) {
  #targetGoalRhythm > .form-row {
    gap: 12px;
  }
}
#targetGoalForm #targetGoalRhythm > .form-row > .field {
  gap: 8px;
  margin: 0 !important;
  line-height: 18px;
}
#targetGoalForm #targetGoalRhythm > .form-row .planning-number-input,
#targetGoalForm #targetGoalRhythm > .form-row select[name='unit'] {
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}
#targetGoalForm #targetGoalRhythm > .form-row select[name='unit'] {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239da5b0' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
}
#targetGoalForm #targetGoalRhythm .planning-number-input input {
  height: calc(var(--field-h) - 2px);
  min-height: calc(var(--field-h) - 2px);
  max-height: calc(var(--field-h) - 2px);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  padding: 0 12px;
}
#targetGoalForm #targetGoalRhythm .number-picker-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 11px;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--muted);
}
#planningBackHome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
}
#planningBackHome[hidden] {
  display: none !important;
}
#planningBackHome svg {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}
.top:has(#planningBackHome:not([hidden])) {
  gap: 12px;
}
.top:has(#planningBackHome:not([hidden])) #pageTitle {
  margin-right: auto;
} /* Routine frequency uses the same controls as goal frequency. */
:is(#routineForm, #targetGoalForm) .planning-frequency-row > .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  font-size: 12px;
  line-height: 18px;
  min-width: 0;
}
:is(#routineForm, #targetGoalForm) .planning-frequency-row .duration-quick-choices:empty {
  display: none !important;
}
:is(#routineForm, #targetGoalForm) .planning-frequency-row .planning-number-input,
:is(#routineForm, #targetGoalForm) .planning-frequency-row select[name='unit'] {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  box-sizing: border-box;
}
:is(#routineForm, #targetGoalForm) .planning-frequency-row .planning-number-input {
  gap: 0;
}
:is(#routineForm, #targetGoalForm) .planning-frequency-row .planning-number-input input {
  height: calc(var(--field-h) - 2px);
  min-height: calc(var(--field-h) - 2px);
  max-height: calc(var(--field-h) - 2px);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  padding: 0 12px;
}
:is(#routineForm, #targetGoalForm) .planning-frequency-row .number-picker-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 11px;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: var(--muted);
} /* Consistent, comfortably sized actions across the home dashboard. */
#homeView .home-card-head .home-link,
#homeView #openTaskHistory {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 8px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  box-sizing: border-box;
}
#homeView .home-card-head .home-link svg,
#homeView #openTaskHistory svg {
  width: 20px;
  height: 20px;
}
#homeView .home-card-head .home-link:hover,
#homeView #openTaskHistory:hover {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--accent);
}
#homeView .home-card-head {
  justify-content: flex-start;
  gap: 8px;
}
#homeView .home-card-head h2 {
  flex: 1;
  min-width: 0;
}
#homeView .home-notice-actions {
  gap: 8px;
  margin-top: 10px;
}
#homeView .home-notice-actions button,
#homeView #homeTodoToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  box-sizing: border-box;
}
#homeView #homeTodoToggle {
  align-self: flex-start;
}
#homeView :is(.home-card-head .home-link, #openTaskHistory, .home-routine-plan, #homeTodoToggle):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  #homeView .home-card-head .home-link,
  #homeView #openTaskHistory {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  #homeView .home-notice-actions button,
  #homeView #homeTodoToggle {
    min-height: 40px;
  }
} /* Invitation details use the same compact cards and controls as the editors. */
#meetingDetails {
  width: min(900px, calc(100vw - 40px));
  max-width: 900px;
  max-height: 90dvh;
  padding: 0;
}
#meetingDetails[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#meetingDetails > .dialog-topbar {
  flex: none;
}
#meetingDetails > .dialog-topbar .dialog-tick {
  display: none;
}
#meetingDetails > .dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}
.meeting-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 20px;
  align-items: start;
}
.meeting-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meeting-detail-time,
.meeting-detail-info,
.meeting-detail-note,
.meeting-detail-responses {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  min-width: 0;
}
.meeting-detail-time {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}
.meeting-detail-eyebrow {
  font-size: 11px;
  color: var(--muted);
}
.meeting-detail-time > strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.meeting-detail-end {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
#meetingDetails .event-status-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin: 8px 0 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
}
#meetingDetails .event-status-detail .event-status-marker {
  position: static;
  width: 14px;
  height: 14px;
  margin: 0;
}
.meeting-detail-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#meetingDetails .meeting-detail-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 36px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}
.meeting-detail-tools .ui-icon,
.meeting-detail-line > .ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.meeting-detail-tools span {
  font-size: 12px;
}
.meeting-detail-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meeting-detail-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.meeting-detail-line > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meeting-detail-line span,
.meeting-detail-line small {
  font-size: 11px;
  color: var(--muted);
}
.meeting-detail-line strong {
  font-size: 13px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.meeting-route-links {
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#meetingDetails :is(.meeting-detail-note, .meeting-detail-responses) > h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}
/* Organizer with a proposed time: "Bisher" on the left, the proposal with "Übernehmen" on the right
   (proposalCompareHTML in public/invitations.js). */
#meetingDetails .meeting-detail-time.meeting-proposal-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
#meetingDetails .meeting-proposal-new {
  display: grid;
  gap: 16px;
}
#meetingDetails .meeting-proposal-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
#meetingDetails .meeting-proposal-new .meeting-proposal-side {
  padding-left: 12px;
  border-left: 3px solid var(--info);
}
#meetingDetails .meeting-proposal-side strong {
  font-size: 16px;
}
#meetingDetails .meeting-proposal-side :is(strong, .meeting-detail-end, .meeting-detail-eyebrow) {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#meetingDetails .meeting-proposal-side button {
  max-width: 100%;
  margin-top: 4px;
}
/* Too narrow for two columns: "Bisher" on top, the proposal below, separated by a horizontal line. */
#meetingDetails .meeting-detail-main {
  container-type: inline-size;
}
@container (max-width: 330px) {
  #meetingDetails .meeting-detail-time.meeting-proposal-compare {
    grid-template-columns: minmax(0, 1fr);
  }
  #meetingDetails .meeting-proposal-new .meeting-proposal-side {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 3px solid var(--info);
  }
}
/* "Weitere Teilnehmer" below the own answer (public/invitations.js). */
#meetingDetails .meeting-detail-responses > .meeting-attendees + h3 {
  margin-top: 18px;
}
.meeting-detail-note p {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}
.meeting-detail-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#meetingDetails .meeting-detail-settings .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}
#meetingDetails .meeting-detail-settings select {
  width: 100%;
}
#meetingDetails .all-day-analysis {
  grid-column: 1/-1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
  background: var(--surface-raised);
}
#meetingDetails .all-day-analysis legend {
  font-size: 11px;
  color: var(--muted);
}
#meetingDetails .all-day-analysis > .sub {
  display: none;
}
#meetingDetails .all-day-analysis .friend-pick {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
#meetingDetails .all-day-analysis [data-day-hours-field] {
  margin-top: 10px;
}
#meetingDetails .meeting-attendees {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#meetingDetails .meeting-attendees li {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.meeting-attendee-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.meeting-attendee-heading b {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.meeting-attendee-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: none;
  background: var(--tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
#meetingDetails .meeting-response-badge {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
#meetingDetails .meeting-response-badge[data-response='accepted'] {
  color: var(--success);
}
#meetingDetails .meeting-response-badge[data-response='declined'] {
  color: var(--danger);
}
#meetingDetails .meeting-response-badge:is([data-response='tentative'], [data-response='proposed']) {
  color: var(--warning);
}
#meetingDetails .meeting-attendees small {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* Antwortknöpfe als Fuß des Fensters unter dem scrollenden Inhalt (invitations.js hängt sie dorthin). */
#meetingDetails .meeting-response-actions {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
/* All four answers look alike (design system buttons); "Ablehnen" is a danger-button (red). */
#meetingDetails .meeting-response-actions button {
  min-height: var(--button-h);
  white-space: normal;
}
#meetingOwnerActions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
#meetingOwnerActions[hidden] {
  display: none !important;
}
.meeting-cancelled-state {
  padding: 10px 12px;
  border: 1px solid #e5635a55;
  border-radius: 8px;
  background: #e5635a18;
  color: #e5635a;
  font-size: 12px;
  margin: 0;
}
@media (max-width: 700px) {
  #meetingDetails {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  #meetingDetails > .dialog-body {
    padding: 16px;
  }
  .meeting-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .meeting-detail-time > strong {
    font-size: 19px;
  }
  .meeting-detail-responses {
    padding: 14px;
  }
  #meetingDetails .meeting-response-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .meeting-detail-settings {
    gap: 10px;
  }
}
#meetingDetails .meeting-detail-responses {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  float: none;
  margin: 0;
  z-index: auto;
}
#invitationCalendarDialog {
  width: min(1100px, calc(100vw - 40px));
  max-width: 1100px;
  max-height: 92dvh;
  padding: 0;
}
#invitationCalendarDialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#invitationCalendarDialog > .dialog-topbar {
  flex: none;
  gap: 10px;
}
#invitationCalendarDialog .dialog-topbar h2 {
  flex: 1;
  margin: 0;
}
#invitationCalendarDialog > .dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 20px;
}
#invitationCalendarTitle {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
/* Datum und Ansicht stehen im gemeinsamen Kalenderkopf des Planers; die Felder bleiben für ihre Verknüpfung erhalten. */
.invitation-calendar-controls {
  display: none;
}
#invitationCalendarGrid .day-planner-scroll {
  --planner-viewport-height: 440px;
  --planner-hour-height: 44px;
}
#invitationCalendarGrid .day-planner-inner {
  min-width: 100%;
}
#invitationCalendarGrid .day-planner-column {
  min-width: 0;
}
#invitationCalendarGrid :is(.planner-slot-summary, .planner-person-status, .cycle-note) {
  display: none;
}
#invitationCalendarGrid .day-planner-columns {
  cursor: default;
  touch-action: auto;
}
#invitationCalendarGrid .planner-own-event {
  cursor: default;
}
@media (max-width: 700px) {
  #invitationCalendarDialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  #invitationCalendarDialog > .dialog-body {
    padding: 14px;
  }
  #invitationCalendarGrid .day-planner-scroll {
    --planner-viewport-height: calc(100dvh - 260px);
  }
} /* Settings share the dashboard's card surfaces and compact controls. */
#settingsView {
  max-width: 1200px;
  margin: 0 auto;
}
#settingsView:has(#categoriesView:not([hidden])) {
  max-width: none;
  width: 100%;
}
#settingsView .settings-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px;
  margin: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
#settingsView .settings-tabs button {
  flex: 1;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
#settingsView .settings-tabs button.active {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
#settingsView .settings-pane .social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#settingsView .settings-pane .panel {
  padding: 20px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
}
#settingsView .settings-pane .panel > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 20px;
}
#settingsView .settings-pane .panel > h3 > .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex: none;
}
#settingsView .settings-pane .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.4;
}
#settingsView .settings-pane .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#settingsView .settings-pane input:not([type='checkbox']):not([type='radio']):not([type='file']),
#settingsView .settings-pane select {
  height: 40px;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
}
#settingsView .settings-pane .account-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 16px 0;
  font-size: 12px;
}
#settingsView .account-details dt {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
#settingsView .account-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
  text-align: right;
}
/* A setting row of the account list (see .account-row-item); the id outranks the general button colours. */
#settingsView .account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#settingsView .account-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#settingsView .account-row-label {
  flex: 1;
  font-weight: 550;
}
#settingsView .account-row-value {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  text-align: right;
}
#settingsView .account-row-arrow {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s;
}
#settingsView .account-row[aria-expanded='true'] .account-row-arrow {
  transform: rotate(90deg);
}
#settingsView .settings-pane .cloud-panel {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#settingsView #cloudStatus {
  font-size: 12px;
  color: var(--muted);
}
#settingsView .settings-pane .profile-photo-editor {
  gap: 10px;
  margin-bottom: 20px;
}
#settingsView .profile-photo-editor .profile-photo-upload,
#settingsView #removeProfilePhoto {
  font-size: 11px;
  padding: 10px;
  min-height: var(--button-h);
  border-radius: 8px;
}
#settingsView .theme-preference {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
}
#settingsView .settings-rhythm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#settingsView .settings-rhythm-grid[hidden] {
  display: none !important;
}
#settingsView .settings-pane .friend-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 20px;
}
#settingsView .settings-pane input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--accent);
}
#settingsView .settings-pane :is(button.primary, #export) {
  min-height: 38px;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: 8px;
}
#settingsView .weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
}
#settingsView .weekday-options legend {
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--muted);
}
#settingsView .weekday-options label {
  position: relative;
  margin: 0;
  cursor: pointer;
}
#settingsView .weekday-options input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#settingsView .weekday-options span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  font-size: 12px;
}
#settingsView .weekday-options input:checked + span {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-color: var(--accent);
}
#settingsView .weekday-options input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
#settingsView #categoryCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  max-width: none;
  width: 100%;
  gap: 12px;
  border: 0;
}
/* Kategorie-Kachel in einer Zeile: Farbe, Name mit Art, rechts Bearbeiten/Löschen bzw. „Fest“. */
#settingsView #categoryCards > .category-card {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  background: var(--surface);
}
#settingsView .category-card h3 {
  overflow: hidden;
  font-size: 14px;
  margin: 0 0 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#settingsView .category-card span.sub,
#settingsView .category-card > div > span {
  font-size: 11px;
  color: var(--muted);
}
#settingsView .category-swatch {
  width: 14px;
  height: 14px;
  border-radius: 5px;
}
#settingsView .category-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}
#settingsView .settings-category-action {
  display: grid;
  place-items: center;
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
}
#settingsView .settings-category-action svg {
  width: 16px;
  height: 16px;
}
#settingsView .fixed-category-label {
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  color: var(--muted);
  white-space: nowrap;
}
#settingsView .settings-new-category {
  display: grid;
  place-items: center;
  width: var(--button-h);
  height: var(--button-h);
  padding: 7px;
}
#settingsView #categoriesView > .connection-heading {
  margin: 0 0 14px;
}
@media (max-width: 800px) {
  #settingsView .settings-pane .social-grid,
  #settingsView .settings-rhythm-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
@media (max-width: 500px) {
  #settingsView .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #settingsView .settings-tabs button {
    justify-content: flex-start;
    font-size: 11px;
    padding: 9px;
  }
  #settingsView .settings-pane .panel {
    padding: 16px;
  }
  #settingsView .account-details {
    gap: 10px;
  }
  #settingsView .settings-pane .field {
    font-size: 12px;
  }
  #settingsView .settings-pane .form-row {
    gap: 10px;
  }
  #settingsView .profile-photo-editor {
    flex-wrap: wrap;
  }
}
/* Konto & Profil: left column profile and account; right column look, features and privacy notes. Kalender & Daten:
   right column time zone and export (settings-layout.js). */
#settingsView :is(.settings-account-stack, .settings-profile-stack) {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
#settingsView #categoryCards > .category-card {
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}
#settingsView .settings-rhythm-grid [name='breakMinutes'] + small {
  display: none;
}
@media (max-width: 800px) {
  #settingsView :is(.settings-account-stack, .settings-profile-stack) {
    display: contents;
  }
  #settingsView .settings-profile-card {
    order: 0;
  }
  #settingsView .settings-account-card {
    order: 1;
  }
  #settingsView :is(.settings-appearance-card, .settings-install-card) {
    order: 2;
  }
  #settingsView .settings-features-card {
    order: 3;
  }
  #settingsView .settings-legal-card {
    order: 4;
  }
}
#meetingDetails [hidden] {
  display: none !important;
}
#targetGoalForm #targetGoalRhythm > .planning-frequency-row {
  grid-template-columns: minmax(65px, 0.75fr) minmax(65px, 0.75fr) minmax(110px, 1.5fr);
}
#targetGoalForm #targetGoalRhythm > .planning-frequency-row:has(> #targetGoalAmountField[hidden]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#targetGoalForm #targetGoalRhythm > .planning-frequency-row .duration-quick-choices:empty {
  display: none !important;
} /*  ===== Abschnitt aus design-system.css =====  */ /* Shared visual language for every served page, dialog and dynamic view. */
:root {
  --paper: #f6f7f9;
  --surface: #fff;
  --surface-raised: #f0f2f5;
  --ink: #252a32;
  --muted: #737b87;
  --line: #dfe3e9;
  --accent: #f46b13;
  --accent-ink: #28150b;
  --tint: #fff1e8;
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
:root[data-theme='dark'] {
  --paper: #181a1e;
  --surface: #22252a;
  --surface-raised: #292c32;
  --ink: #eceef3;
  --muted: #a2a8b3;
  --line: #353940;
  --accent: #ff843d;
  --accent-ink: #24150e;
  --tint: #3c2c23;
}
body {
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink);
}
button,
input,
select,
textarea,
summary {
  font-family: var(--ui-font);
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
h4 {
  font-family: var(--ui-font);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
#pageTitle {
  font-size: 24px;
  font-weight: 650;
}
.dialog-topbar h2 {
  font-size: 18px;
  font-weight: 650;
}
.home-card-head h3,
.settings-pane h3 {
  font-size: 16px;
  font-weight: 600;
}
button:not(.event):not(.home-stat),
select,
input,
textarea {
  line-height: 1.4;
}
button:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
}
.ui-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}
.ui-icon-button,
.dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 14px;
}
button.primary {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 550;
}
button.primary:hover {
  filter: brightness(1.06);
}
:is(.field > select, .field > input:not([type='checkbox']):not([type='radio'])) {
  box-sizing: border-box;
  font-size: 14px;
}
select option {
  background: var(--surface-raised);
  color: var(--ink);
} /* Date and view use the exact same field geometry, including native control margins. */
.meeting-response-actions button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* Authentication shares the application's surfaces, type and control sizes. */
.auth-callback {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  margin: 0;
}
@media (max-width: 700px) {
  .ui-icon-button,
  .dialog-icon {
    min-width: 40px;
    min-height: 40px;
  }
} /* One toolbar for task-level actions; row actions share its size. */
#homeTasksCard .home-task-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}
#homeTasksCard .home-task-tools > button,
#homeTasksCard #homeTasks .task-action {
  box-sizing: border-box;
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: var(--button-h);
  margin: 0;
  padding: 7px;
  border-radius: 8px;
}
#homeTasksCard .home-task-tools .ui-icon {
  width: 20px;
  height: 20px;
}
#homeTasksCard #homeQuickTask {
  display: flex;
  gap: 10px;
}
@media (max-width: 700px) {
  #homeTasksCard .home-task-tools {
    gap: 6px;
  }
  #homeTasksCard .home-task-tools > button,
  #homeTasksCard #homeTasks .task-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  #homeTasksCard #homeTasks > .task {
    grid-template-columns: 22px minmax(0, 1fr) 40px 40px;
  }
}
#homeTodoBadge {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  padding: 0 !important;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  background: var(--accent-fill);
}
#homeTasksCard #homeQuickTask > button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--button-h);
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: 36px;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
}
#homeTasksCard #homeQuickTask > input {
  flex: 1;
  min-width: 0;
  margin: 0;
}
#homeTasksCard #homeQuickTask {
  padding: 2px 3px 2px 12px;
  align-items: center;
}
@media (max-width: 700px) {
  #homeTasksCard #homeQuickTask > button {
    flex-basis: var(--button-h);
    width: var(--button-h);
    height: var(--button-h);
    min-width: var(--button-h);
    min-height: var(--button-h);
  }
}
#homeTasksCard .home-card-head {
  padding-right: 0;
}
#friendsView #blockedAccountsCard {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  padding: 20px !important;
  /* Abstand zu „Kontakte“ kommt allein von deren margin-bottom (20 px), sonst addierte er sich auf 40 px. */
  margin-top: 0;
}
#blockedAccountsCard h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
#blockedAccountsCard .friend-row {
  margin: 0;
  align-items: center;
}
#blockedAccountsCard .friend-row:last-child {
  border-bottom: 0;
}
#blockedAccountsCard .friend-actions button {
  min-height: 36px;
  font: 14px var(--ui-font);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 8px 12px;
}
@media (max-width: 600px) {
  #blockedAccountsCard .friend-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  #blockedAccountsCard .friend-actions {
    margin-left: auto;
  }
} /* Added event options become quiet, permanent form sections for this draft. */
/* Option cards and the main block are tiles instead of blocks separated by lines. */
#meetingForm > .composer-card[open],
#meetingForm > .composer-main-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  background: var(--surface-raised) !important;
  margin: 0 !important;
}
#meetingForm > .composer-main-card {
  display: grid;
  gap: 12px;
}
#meetingForm > .composer-main-card > * {
  min-width: 0;
  margin: 0;
}
#meetingForm > .composer-card .composer-card-head {
  margin-bottom: 14px;
  min-height: 24px;
}
#meetingForm > .composer-card .composer-section-heading {
  font-size: 14px !important;
  color: var(--ink);
}
#composerFriends #meetingFriendDropdown .friend-selection-label {
  display: none;
}
#composerFriends #meetingFriendSearchField {
  margin: 0 0 12px !important;
  font-size: 0;
  gap: 0;
}
#composerFriends #meetingFriendSearch {
  font-size: 14px !important;
  height: 40px;
  margin: 0 !important;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#composerFriends #meetingFriendPicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 250px !important;
  padding: 2px 6px 2px 0;
}
/* Compact rows: small avatar, name and @handle on one line. */
#composerFriends #meetingFriendPicker .friend-pick {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-raised);
  cursor: pointer;
}
#composerFriends .friend-pick > input {
  grid-column: 3;
  grid-row: 1;
  width: 18px;
  margin: 0;
  accent-color: var(--accent);
}
#composerFriends .friend-pick-avatar {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  background: var(--tint);
  color: var(--accent);
}
#composerFriends .friend-pick-name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#composerFriends .friend-pick-name b {
  display: inline;
  font-size: 13px;
}
#composerFriends .friend-pick-name small {
  display: inline;
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}
#composerFriends .friend-pick:focus-within {
  outline: 2px solid var(--muted);
  outline-offset: 1px;
}
#composerFriends #meetingFriendPicker > p {
  grid-column: 1/-1;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#removeProfilePhoto.profile-delete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--button-h);
  width: var(--button-h) !important;
  min-width: var(--button-h);
  max-width: var(--button-h);
  height: var(--button-h);
  padding: 7px !important;
  border-radius: 8px;
}
#removeProfilePhoto.profile-delete-icon:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (max-width: 500px) {
  #composerFriends #meetingFriendPicker {
    grid-template-columns: minmax(0, 1fr);
    max-height: 280px !important;
  }
}
.composer-toolbar button[data-added='true'] {
  background: var(--tint);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
} /* Status: same height, corners, border and background as the icon buttons next to it; only as wide as needed. */
#meetingForm .composer-toolbar .composer-status-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--button-h);
  min-height: var(--button-h);
  width: auto;
  max-width: 100%;
  padding: 0 4px 0 10px !important;
  margin: 0;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-field) !important;
  background: var(--surface) !important;
}
#meetingForm .composer-toolbar .composer-status-tool > select {
  appearance: auto;
  flex: none;
  min-width: 0;
  width: auto;
  height: calc(var(--button-h) - 2px);
  min-height: 0;
  margin: 0 !important;
  padding: 0 3px;
  font: 14px var(--ui-font) !important;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}
#meetingForm .composer-toolbar .composer-status-tool:focus-within {
  outline: 2px solid var(--muted) !important;
  outline-offset: 2px;
}
#meetingForm .composer-toolbar .composer-status-tool > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.dialog-topbar-actions > .dialog-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--button-h);
  width: var(--button-h) !important;
  height: var(--button-h);
  min-width: var(--button-h) !important;
  min-height: var(--button-h);
  padding: 8px;
  border-radius: 8px;
}
.dialog-topbar-actions > .dialog-icon svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 700px) {
  .dialog-topbar-actions > .dialog-icon {
    flex-basis: 40px;
    width: 40px !important;
    height: 40px;
    min-width: 40px !important;
    min-height: 40px;
  }
} /* The calendar owns its scroll area; the surrounding page stays fixed. */
html:has(#calendarView.active),
body:has(#calendarView.active) {
  height: 100%;
  overflow: hidden !important;
}
body:has(#calendarView.active) > main {
  box-sizing: border-box;
  height: 100dvh;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden auto !important;
}
body:has(#calendarView.active) > main > .top {
  flex: none;
}
#calendarView.active {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: auto !important;
}
#calendarView.active > .layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: auto !important;
}
#calendarView.active > .layout > .panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: auto !important;
  height: 100%;
  margin-bottom: 0;
}
#calendarView .calendar-head,
#calendarView #invitationPreviewBanner {
  flex: none;
}
/* Never smaller than a useful overview (CALENDAR_MIN_HEIGHT in calendar.js); the page scrolls instead. */
#calendarView #calendarViewport {
  flex: 1;
  min-height: 420px !important;
  height: auto !important;
  max-height: none !important;
  /* The hours inside must not stretch the page; only the 420px minimum counts. */
  contain: size;
  overflow: auto;
  /* At the calendar's edge the page continues scrolling (it has no scrollbar of its own). */
  overscroll-behavior: auto;
}
.event.is-too-small > :not(.calendar-resize) {
  visibility: hidden !important;
}
.event.is-too-small {
  font-size: 0 !important;
}
.event.is-too-small:not(.touch-selected) {
  overflow: hidden !important;
}
/* Narrow entries: title only, tight padding; long words are hyphenated. */
html:root :is(#grid, .zr-grid) .event.is-narrow {
  padding: 2px 3px;
}
html:root :is(#grid, .zr-grid) .event.is-narrow > :is(.event-status-marker, .event-location, small) {
  display: none;
}
@media (max-width: 700px) {
  html:root #monthGrid .month-event {
    padding-inline: 3px;
    overflow: hidden;
  }
  html:root #monthGrid .month-event :is(.event-title, b, strong),
  html:root #monthGrid .month-event {
    font-size: 9.5px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
}
html:root :is(#grid, .zr-grid) .event.is-narrow .event-title {
  font-size: 9.5px;
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  overflow: hidden;
}
#calendarEventPreview {
  width: min(560px, calc(100vw - 24px));
  padding: 0;
  max-height: 90dvh;
  overflow: auto;
}
#calendarEventPreview .dialog-body {
  padding: 20px;
}
#calendarEventPreviewInfo h3 {
  font-size: 18px;
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}
#calendarEventPreviewInfo p {
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0;
}
#calendarEventPreview [data-preview-open] {
  min-height: 44px;
  margin-top: 18px;
}
@media (pointer: coarse) {
  .ui-icon-button,
  .dialog-icon,
  .dialog-topbar-actions > .dialog-icon,
  .task-action {
    /* Same square as every other button on touch devices (--button-h is 40px on phones). */
    min-width: var(--button-h) !important;
    min-height: var(--button-h);
    width: var(--button-h) !important;
    height: var(--button-h);
    flex-shrink: 0;
  }
  .dialog-topbar-actions > .dialog-icon {
    flex-basis: var(--button-h);
  }
  #homeTasksCard #homeTasks > .task {
    grid-template-columns: 22px minmax(0, 1fr) var(--button-h) var(--button-h);
  }
  .calendar-switch button,
  .duration-presets button,
  .weekday-options label,
  .goal-weekdays button,
  .planner-nav button {
    min-height: var(--button-h);
  }
  #meetingForm .composer-toolbar .composer-status-tool {
    height: var(--button-h);
    min-height: var(--button-h);
  }
  input:not([type='checkbox']):not([type='radio']),
  select {
    min-height: 44px;
  }
  :is(#calendarViewport, .zr-viewport) {
    touch-action: pan-x pan-y;
  }
  .calendar-movable {
    touch-action: pan-x pan-y !important;
  }
} /* Quiet, compact progress cards with a consistent action strip. */
#targetGoalList,
#routineList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
#routinesView :is(.goal-card-head, .routine-card-head) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
#routinesView :is(.goal-card-head h3, .routine-card-head > b) {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 17px !important;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#routinesView .routine-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
#routinesView button[data-planning-action] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
  flex: none;
}
#routinesView button[data-planning-action]:hover {
  color: var(--ink);
  border-color: var(--muted);
}
#routinesView .routine-open-details {
  width: var(--button-h) !important;
  margin: 0 !important;
}
#targetGoalList .goal-overview-rhythm,
#routineList .routine-card-main > small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 18px;
}
#targetGoalList .target-goal-card > strong {
  display: block;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
#targetGoalList .goal-result {
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0 16px;
}
#routinesView .goal-progress,
#routinesView .cycle-meter {
  height: 7px;
  border-radius: 5px;
}
#routinesView .routine-streak {
  font-size: 12px !important;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 16px 0 0;
}
#routinesView .routine-streak strong {
  font-size: 16px !important;
  color: var(--ink);
  margin-right: 4px;
}
#routineList .routine-overview-progress {
  margin-top: 16px;
}
#routineList .routine-overview-progress > span {
  display: block;
  font-size: 12px;
  margin-bottom: 7px;
  color: var(--muted);
}
.routine-detail-heading > [data-goal-back],
.routine-detail-heading > [data-routine-back],
#goalDetailsPage > .routine-detail-heading {
  display: none !important;
}
#goalDetailsPage > .target-goal-card {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.planning-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 18px;
}
.planning-detail-metric {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
}
.planning-detail-metric > strong {
  display: block;
  font-size: 30px;
  letter-spacing: -0.03em;
  margin: 20px 0 12px;
}
.planning-detail-metric > .sub {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.planning-detail-layout > .goal-history {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#routineDetailsPage > .routine-detail-heading {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 16px;
}
#routineDetailsPage .routine-detail-content {
  padding: 20px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
@media (max-width: 760px) {
  #targetGoalList,
  #routineList,
  .planning-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #routinesView button[data-planning-action] {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  #routinesView .routine-open-details {
    width: 40px !important;
  }
  .planning-detail-layout {
    gap: 14px;
  }
  #goalDetailsPage > .target-goal-card {
    padding: 16px;
  }
}
.number-scroll-picker {
  padding: 8px !important;
  border-radius: 10px !important;
  gap: 4px;
}
.number-scroll-picker .duration-number-list button {
  font-size: 16px;
  min-height: 36px;
  padding: 6px;
}
.number-scroll-picker .duration-number-list {
  scrollbar-width: thin;
}
.streak-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin: 18px 0 24px !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--muted);
}
.streak-flame {
  display: grid;
  place-items: center;
  flex: none;
  width: 76px;
  height: 92px;
  color: var(--muted);
}
.streak-flame svg {
  width: 68px;
  height: 78px;
  stroke-width: 1.3;
}
.streak-hero.is-active .streak-flame {
  color: var(--accent);
  filter: drop-shadow(0 0 14px #ff843d30);
}
.streak-copy > span {
  font-size: 12px;
  color: var(--muted);
}
.streak-copy > strong {
  display: block;
  line-height: 1.1;
  color: var(--ink);
}
.streak-copy > p {
  font-size: 13px;
  margin: 5px 0 0;
  color: var(--muted);
}
.streak-milestones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.streak-milestones span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  color: var(--muted);
}
.streak-milestones .is-earned {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent);
}
#goalDetailsPage .goal-history,
#routineDetailsPage .routine-cycle-history {
  border: 0;
  margin: 0;
  padding: 0;
}
.history-only .cycle-strip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  overflow: visible;
  max-height: none;
}
.history-only .cycle-card {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) minmax(100px, 1fr) minmax(120px, 1fr);
  align-items: center;
  gap: 8px 18px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  background: var(--surface-raised);
  min-height: 0;
}
.history-only .cycle-card time {
  font-size: 13px;
  color: var(--ink);
}
.history-only .cycle-card > strong {
  font-size: 18px;
}
.history-only .cycle-card > span {
  font-size: 12px;
  justify-self: start;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface);
}
.history-only .cycle-card > small {
  font-size: 12px;
  color: var(--muted);
}
.history-only .cycle-card .cycle-meter {
  grid-column: 1/-1;
}
.history-only .cycle-card[data-cycle-state='met'] {
  border-left-color: #459b69;
}
.history-only .cycle-card[data-cycle-state='met'] > span {
  color: #459b69;
}
.history-only .cycle-card[data-cycle-state='met'] .cycle-meter > span {
  background: #459b69;
}
.history-only .cycle-card[data-cycle-state='missed'] {
  border-left-color: #d44d45;
}
.history-only .cycle-card[data-cycle-state='unknown'] {
  border-left-style: dashed;
}
#targetGoalList .streak-hero {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 12px 0 0 !important;
  gap: 10px;
  margin: 14px 0 0 !important;
}
#targetGoalList .streak-flame {
  width: 26px;
  height: 32px;
}
#targetGoalList .streak-flame svg {
  width: 24px;
  height: 28px;
}
#targetGoalList .streak-copy > strong {
  font-size: 20px !important;
  display: inline;
  margin-right: 6px !important;
}
#targetGoalList .streak-copy > span,
#targetGoalList .streak-milestones {
  display: none;
}
#targetGoalList .streak-copy > p {
  display: inline;
  font-size: 11px;
}
@media (max-width: 650px) {
  .streak-hero {
    gap: 12px;
    padding: 18px;
    flex-wrap: wrap;
  }
  .streak-milestones {
    margin-left: 0;
    width: 100%;
  }
  .streak-flame {
    width: 52px;
    height: 64px;
  }
  .streak-flame svg {
    width: 48px;
    height: 60px;
  }
  .history-only .cycle-card {
    grid-template-columns: 1fr 1fr;
  }
  .history-only .cycle-card time {
    grid-column: 1/-1;
  }
  .history-only .cycle-card > small {
    grid-column: 1/-1;
  }
}
.snooze-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.snooze-choices button {
  text-align: left;
  min-height: 64px;
  padding: 12px;
}
.snooze-choices small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
}
#routineSnoozeDialog {
  width: min(480px, calc(100vw - 24px));
}
#routineSnoozeDialog .home-notice {
  margin-bottom: 10px;
}
#meetingComposer.routine-occurrence-mode .composer-title-field {
  display: flex !important;
}
#routineSnoozeDialog .snooze-choices button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  min-height: 76px;
  padding: 12px;
  text-align: left;
}
#routineSnoozeDialog .snooze-choices small {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
:is(#grid, .zr-grid) .calendar-short .calendar-resize.end {
  height: 6px;
  visibility: visible !important;
  pointer-events: auto;
}
:is(#grid, .zr-grid) .calendar-short:hover .calendar-resize.end {
  opacity: 0.7;
} /*  ===== Abschnitt aus help-center.css =====  */
#settingsView .help-pane {
  min-width: 0;
}
#settingsView .help-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
#settingsView .help-intro > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#settingsView .help-intro > div > .ui-icon {
  flex: none;
  color: var(--accent);
  width: 28px;
  height: 28px;
}
#settingsView .help-intro h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
#settingsView .help-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
#restartTutorial {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 42px;
}
.help-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
}
.help-search input {
  width: 100%;
  box-sizing: border-box;
}
/* Übersicht: Kapitel als Kacheln (help-center.js, renderOverview). */
.help-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.help-chapter-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.help-chapter-card:hover,
.help-chapter-card:focus-visible {
  border-color: var(--accent);
}
.help-chapter-card > .ui-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.help-chapter-card > .ui-icon:last-child {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--muted);
}
.help-chapter-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.help-chapter-text strong {
  font-size: 15px;
  font-weight: 650;
}
.help-chapter-text span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.help-chapter-text small {
  color: var(--muted);
  font-size: 12px;
}
/* Suchtreffer als Liste. */
.help-results {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.help-result {
  display: grid;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.help-result:hover,
.help-result:focus-visible {
  border-color: var(--accent);
}
.help-result small {
  color: var(--accent);
  font-size: 12px;
}
.help-result span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.help-empty {
  color: var(--muted);
}
/* Kapitelseite: Zurück, Kopf, Sprungleiste, Abschnitte mit Themenkarten. */
.help-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0 12px 0 8px;
  min-height: var(--button-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.help-back > .ui-icon {
  width: 18px;
  height: 18px;
}
.help-page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
}
.help-page-head > .ui-icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--accent);
}
.help-page-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
}
.help-page-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.help-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.help-jump button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.help-jump button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.help-section {
  margin: 0 0 28px;
  scroll-margin-top: 16px;
}
.help-section > h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 650;
}
.help-section-intro {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}
.help-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 12px;
  margin-top: 12px;
}
.help-entry {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-margin-top: 80px;
}
.help-entry.help-entry-found {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.help-entry h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 650;
}
.help-entry p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
}
.help-entry p:last-child {
  margin-bottom: 0;
}
.help-points {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
}
.help-points li::marker {
  color: var(--accent);
}
#tutorialWelcome {
  width: min(380px, calc(100vw - 32px));
}
#tutorialWelcome h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
#tutorialWelcome p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.tutorial-welcome-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.tutorial-guide {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: 20px;
  width: min(300px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shade-lg);
  color: var(--ink);
  max-height: calc(100dvh - 40px);
  overflow: auto;
}
.tutorial-guide[hidden] {
  display: none;
}
.tutorial-guide > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: -4px -6px 4px 0;
}
.tutorial-guide h2 {
  font-size: 15px;
  margin: 8px 0 0;
}
.tutorial-guide #tutorialStepLabel {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}
.tutorial-guide p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.tutorial-guide footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.tutorial-guide footer button {
  min-height: var(--button-h);
}
.tutorial-guide .ui-icon {
  width: 16px;
  height: 16px;
}
.help-symbol-entry h4 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.help-symbol-entry h4 > .ui-icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--accent);
}
.tutorial-highlight {
  outline: 2px solid var(--accent) !important;
  outline-offset: 4px;
  border-radius: 10px;
  scroll-margin-top: 20px;
}
/* Inside the calendar frame (overflow: hidden) an outer outline is cut off: draw it inside instead. */
.zr-calendar-host .tutorial-highlight {
  outline-offset: -2px;
}
.tutorial-active main {
  padding-bottom: calc(var(--tutorial-guide-h, 140px) + 40px);
}
.composer-existing-participants {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  grid-column: 1/-1;
}
.composer-existing-participants span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  #settingsView .help-intro {
    align-items: stretch;
    flex-direction: column;
  }
  #restartTutorial {
    justify-content: center;
  }
  .tutorial-guide {
    right: 12px;
    left: 12px;
    width: auto;
    padding: 10px 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: 40dvh;
  }
  .tutorial-guide footer {
    margin-top: 8px;
  }
  .tutorial-active main {
    padding-bottom: calc(var(--tutorial-guide-h, 160px) + 100px);
  }
  /* The short welcome opens as a sheet at the bottom instead of filling the screen like other dialogs. */
  #tutorialWelcome {
    height: fit-content;
    margin: auto 0 0;
    border-top: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .help-chapter-card,
  .help-entry {
    padding: 14px 16px;
  }
}
/* Nummerierte Schritte in Hilfethemen und Anleitungen (help-center.js, external-calendars.js). */
.help-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
}
.help-steps li::marker {
  color: var(--accent);
  font-weight: 600;
}
.home-stats-source {
  display: none !important;
}
.home-overview-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-overview-tools > #editHomeOverview {
  flex: none;
  width: 40px;
  height: 40px;
}
.home-overview-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-overview-field {
  padding: 16px !important;
  min-width: 0;
}
.home-overview-field h3 {
  font-size: 15px;
  margin: 0 0 14px;
}
.home-overview-field .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.home-overview-field :is(input, select) {
  width: 100%;
  box-sizing: border-box;
}
#homeOverviewDialog {
  width: min(760px, calc(100vw - 24px));
}
#homeOverviewForm #resetHomeOverview {
  margin-top: 16px;
}
.home-custom-stats small {
  overflow-wrap: anywhere;
}
.tasks-full-page .list-panel {
  padding: 20px;
}
.tasks-full-page .calendar-head {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}
#allTasksList {
  display: grid;
  gap: 10px;
}
#allTasksList > .task {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-sizing: border-box;
  margin: 0;
}
#allTasksList > .task > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
#allTasksList input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex: none;
}
#allTasksList .task-action {
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  display: grid;
  place-items: center;
  padding: 7px !important;
}
#allTasksList .task-action svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 600px) {
  .home-overview-fields {
    grid-template-columns: 1fr;
  }
  .home-overview-tools {
    gap: 6px;
  }
  .tasks-full-page .list-panel {
    padding: 14px;
  }
  #allTasksList > .task {
    padding: 10px;
    gap: 8px;
  }
  #allTasksList .task-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}
#analysisDialog .analysis-delete-icon[hidden] {
  display: none !important;
}
.analysis-weekdays {
  border: 0;
  padding: 0;
  margin: 24px 0;
}
.analysis-weekday-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.analysis-weekday-choices label {
  position: relative;
}
.analysis-weekday-choices input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.analysis-weekday-choices span {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.analysis-weekday-choices input:checked + span {
  background: var(--accent);
  color: #151719;
}
.analysis-weekday-choices input:focus-visible + span {
  outline: 2px solid var(--muted);
  outline-offset: 3px;
}
#allTasksList [data-plan] {
  background: var(--surface-raised) !important;
  color: var(--ink) !important;
}
#settingsView #restartTutorial .ui-icon {
  color: inherit;
  width: 20px;
  height: 20px;
  flex: none;
}
#routinePlannerPanel .routine-queue-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 14px;
}
#routinePlannerPanel .routine-queue-bar[hidden] {
  display: none;
}
#routinePlannerPanel .routine-queue-bar > .field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
#routineJobChoice {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}
#routinePlannerPanel .routine-queue-bar > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  flex: none;
}
#routinePlannerPanel .routine-queue-bar > button[hidden] {
  display: none;
}
#snoozePlanningRoutine .ui-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}
@media (max-width: 600px) {
  #routinePlannerPanel .routine-queue-bar {
    flex-wrap: wrap;
  }
  #routinePlannerPanel .routine-queue-bar > .field {
    flex-basis: 100%;
  }
  #routinePlannerPanel .routine-queue-bar > button {
    flex: 1;
  }
}
#homeView .home-card-head .home-create {
  margin-left: auto;
  flex: none;
  /* Same square as every icon button; the icon is centred by the grid (padding pushed it off-centre). */
  width: var(--button-h);
  height: var(--button-h);
  padding: 0 !important;
}
#homeView .home-card-head .home-create + .home-link {
  margin-left: 0;
}
#homeView button.home-routine-item {
  display: block;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
#homeView button.home-routine-item:hover {
  border-color: var(--accent);
}
#homeView button.home-routine-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#allTasksQuickTask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 12px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-raised);
  box-sizing: border-box;
}
#allTasksQuickTask > .ui-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}
#allTasksQuickTask input {
  width: 100%;
  min-width: 0;
  flex: 1;
  box-sizing: border-box;
  font: inherit;
}
#allTasksQuickTask button {
  flex: none;
}
#toast button {
  margin-left: 14px;
  min-height: 44px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
#toast {
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}
#toast:has(button) {
  gap: 8px;
  align-items: center;
} /*  ===== Abschnitt aus zeitraum-ui.css =====  */ /*
 * ZeitRaum UI foundation – loaded last on every app page.
 *
 * The older sheets (minimal, theme, ui-shell, design-system, platform, calendar) still provide
 * the layouts. This file is the single place for the shared look: type scale, radii, segmented
 * controls, quiet destructive actions and readable calendar entries. Selectors are prefixed with
 * `html:root` so they win over the earlier, often ID-based rules without !important.
 */
:root {
  --radius-sm: 8px;
  --radius: 12px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text: 14px;
  --segment-bg: var(--surface-raised, var(--paper));
  --segment-active: var(--surface, #fff);
  --segment-shadow: 0 1px 2px #0000001f, 0 0 0 1px #0000000a;
}
:root[data-theme='dark'] {
  --segment-active: #3a3f48;
  --segment-shadow: 0 1px 2px #00000066;
} /* ---------- Segmented controls: view switches and section tabs share one look ---------- */
html:root .calendar-switch,
html:root .friends-tabs,
html:root .notification-boxes,
html:root #settingsView .settings-tabs,
html:root .settings-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  margin: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--segment-bg);
  box-shadow: none;
}
html:root .calendar-switch::-webkit-scrollbar,
html:root .friends-tabs::-webkit-scrollbar,
html:root .settings-tabs::-webkit-scrollbar {
  display: none;
}
html:root
  :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes)
  > button:not(#captureDay):not(.daily-shortcut),
html:root #settingsView .settings-tabs > button {
  flex: 1 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}
html:root
  :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes)
  > button:not(#captureDay):not(.daily-shortcut):hover {
  color: var(--ink);
}
html:root
  :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes)
  > button:is([aria-pressed='true'], .active, .primary):not(#captureDay):not(.daily-shortcut),
html:root #settingsView .settings-tabs > button.active {
  background: var(--segment-active);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--segment-shadow);
}
html:root #settingsView .settings-tabs > button .ui-icon {
  width: 15px;
  height: 15px;
} /* Phones: the segments share the full width; icons in tabs give way to the labels. */
@media (max-width: 700px) {
  html:root .settings-tabs,
  html:root #settingsView .settings-tabs {
    width: 100%;
  }
  html:root
    :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes)
    > button:not(#captureDay):not(.daily-shortcut),
  html:root #settingsView .settings-tabs > button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
  }
  html:root #settingsView .settings-tabs > button .ui-icon {
    display: none;
  }
} /* ---------- Readable minimum text sizes outside the dense calendar grid ---------- */
html:root main :is(small, .sub, .home-agenda-date):not(.event *):not(.month-event *) {
  font-size: max(var(--text-sm), 1em * 0.85);
}
html:root #weekNumber {
  font-size: var(--text-xs);
}
html:root #analysisView :is(small, label, span):not(.ui-icon) {
  font-size: max(var(--text-xs), 1em);
} /* ---------- Destructive actions are quiet until hovered (task rows: Abschnitt design-system) ---------- */
html:root .danger-button {
  background: transparent;
  color: var(--danger, #b52d26);
  border: 1px solid color-mix(in srgb, var(--danger, #b52d26) 40%, var(--line));
  box-shadow: none;
}
html:root .danger-button:hover {
  background: color-mix(in srgb, var(--danger, #b52d26) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger, #b52d26) 45%, transparent);
}
html:root .danger-button:not(.ui-icon-button) {
  font-size: 13px;
} /* ---------- Calendar entries: wrap at spaces, hyphenate long words (lang="de") instead of clipping them ---------- */
html:root :is(.event, .month-event) :is(.event-title, b, strong) {
  font-size: max(11px, 1em);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  overflow: hidden;
}
html:root :is(.event, .month-event) :is(small, .event-location) {
  font-size: 10px;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* ---------- Friend options open as a small menu below the button, aligned right ---------- */
html:root .friend-options {
  position: relative;
}
/* The options menu opens below its button; for the last friend it reaches past the card, which must not cut it off
   (cards clip their content by default, see .panel). */
html:root .panel.friends-primary {
  overflow: visible;
}
html:root .friend-options[open] {
  padding: 0;
  z-index: 20;
}
html:root .friend-options > .friend-options-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 8px;
  /* wide enough for the longest share choice "Kalender teilen · Alle Termindetails" */
  width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shade, 0 8px 30px #0002);
}
html:root .friend-options .friend-options-menu :is(.field, button) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}
html:root .friend-options .friend-options-menu select {
  width: 100%;
} /* ---------- Small consistency details ---------- */
html:root main .panel,
html:root main .social-panel {
  border-radius: var(--radius);
} /* "Abmelden" is an action, so it looks like a quiet button rather than a text link. */
html:root #cloudAccount > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
html:root #cloudAccount > a:hover {
  background: var(--surface-raised);
} /*  ===== Abschnitt aus auto-planning.css =====  */ /* Automatic planning: two-step dialog (choose → review) with a fixed action bar. */
#autoPlanningDialog {
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;
  max-height: 90dvh;
  padding: 0;
  color: var(--ink);
  background: var(--surface, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shade-lg);
  overflow: hidden;
}
#autoPlanningDialog[open] {
  display: flex;
  flex-direction: column;
}
#autoPlanningDialog .dialog-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 20px 22px 24px;
}
#autoPlanningDialog .auto-lead {
  margin: 12px 0 4px;
  color: var(--muted);
  line-height: 1.5;
}
#autoPlanningDialog .auto-heading {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 600;
}
#autoPlanningDialog h4 {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
} /* Scope cards */
#autoPlanningDialog .auto-scopes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#autoPlanningDialog .auto-scope {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
#autoPlanningDialog .auto-scope:has(input:checked) {
  border-color: var(--accent);
  background: var(--tint);
}
#autoPlanningDialog .auto-scope > .ui-icon {
  color: var(--muted);
}
#autoPlanningDialog .auto-scope:has(input:checked) > .ui-icon {
  color: var(--accent);
}
#autoPlanningDialog .auto-scope input {
  width: auto;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--accent);
}
#autoPlanningDialog .auto-scope > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#autoPlanningDialog .auto-scope strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
#autoPlanningDialog .auto-scope em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-raised, var(--paper));
}
#autoPlanningDialog .auto-scope small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
} /* Period: segmented control plus start date */
#autoPlanningDialog .auto-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
#autoPlanningDialog .auto-segments {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised, var(--paper));
}
#autoPlanningDialog .auto-segments label {
  position: relative;
  cursor: pointer;
}
#autoPlanningDialog .auto-segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#autoPlanningDialog .auto-segments span {
  display: block;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--muted);
}
#autoPlanningDialog .auto-segments input:checked + span {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px #0002;
}
#autoPlanningDialog .auto-segments input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
#autoPlanningDialog .auto-from {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
#autoPlanningDialog .auto-from input {
  width: 160px;
  margin: 0;
} /* Folded rules */
#autoPlanningDialog details,
.auto-task-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  margin: 20px 0 0;
}
#autoPlanningDialog details[open],
.auto-task-details[open] {
  padding-bottom: 14px;
}
#autoPlanningDialog summary,
.auto-task-details summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
#autoPlanningDialog summary::-webkit-details-marker,
.auto-task-details summary::-webkit-details-marker {
  display: none;
}
#autoPlanningDialog summary::before,
.auto-task-details summary::before {
  content: '›';
  display: inline-block;
  width: 10px;
  color: var(--muted);
  transition: transform 0.15s;
}
#autoPlanningDialog details[open] > summary::before,
.auto-task-details[open] > summary::before {
  transform: rotate(90deg);
}
#autoPlanningDialog summary small {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
#autoPlanningDialog .auto-holidays {
  margin: 0;
}
#autoPlanningDialog .auto-zone-note {
  margin: 12px 0 0;
}
/* First view: what "Planung starten" plans (auto-planning.js renderSummary); everything else under "Einstellungen". */
#autoPlanningDialog .auto-summary {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-field);
  background: var(--tint);
}
#autoPlanningDialog .auto-summary .auto-heading {
  margin: 0 0 10px;
}
#autoPlanningDialog .auto-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#autoPlanningDialog .auto-summary-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--surface-raised, var(--paper));
  font-size: 13px;
}
#autoPlanningDialog .auto-summary-list em {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
}
#autoPlanningDialog .auto-summary-empty {
  margin: 0;
  color: var(--muted);
}
#autoPlanningDialog details.auto-settings > summary {
  align-items: center;
}
#autoPlanningDialog details.auto-settings > summary .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
#autoPlanningDialog details.auto-settings > .auto-heading:first-of-type {
  margin-top: 8px;
}
#autoPlanningDialog fieldset {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  margin: 12px 0;
}
#autoPlanningDialog legend {
  font-size: 12px;
  color: var(--muted);
}
.auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0;
}
.auto-grid-3 {
  grid-template-columns: 2fr 1fr 1fr;
}
.auto-grid .field {
  min-width: 0;
  margin: 0;
}
.auto-grid input,
.auto-grid select {
  min-width: 0;
  width: 100%;
} /* Weekday chips */
.auto-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.auto-days label {
  position: relative;
  cursor: pointer;
}
.auto-days input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auto-days label {
  min-width: 40px;
  padding: 6px 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.auto-days label:has(input:checked) {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--ink);
  font-weight: 600;
}
.auto-days label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.auto-friend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
}
.auto-friend input {
  width: auto;
  flex: none;
} /* Results */
#autoPlanningDialog .auto-result-summary {
  margin: 14px 0 6px;
  line-height: 1.5;
  color: var(--muted);
}
#autoPlanningDialog .auto-result-summary strong {
  color: var(--ink);
}
#autoPlanningDialog .auto-day {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
/* Vorschlag und „Andere Zeiten“ als eine Karte (auto-planning.js, renderResults). */
.auto-suggestion-group {
  margin: 6px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.auto-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 0;
  margin: 0;
  cursor: pointer;
}
.auto-suggestion > input {
  width: auto;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}
.auto-suggestion .auto-time {
  flex: none;
  min-width: 92px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.auto-suggestion .auto-what {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.auto-suggestion small,
.auto-task-summary {
  color: var(--muted);
}
.auto-unplanned {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--tint, var(--paper));
  line-height: 1.45;
}
/* Other good times of a suggestion (swap by click) */
/* „Andere Zeiten“: kleine Zeit-Chips direkt unter dem Vorschlag, Beschriftung in eigener Zeile. */
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0 4px;
}
/* Inside the suggestion card: separated by a fine line, aligned with the time. */
html:is(:root, #zr):is(:root, #zr) #autoPlanResults .auto-suggestion-group > .auto-alternatives {
  margin: 0;
  padding: 8px 12px 10px 42px;
  border-top: 1px dashed var(--line);
  background: var(--surface-raised);
}
/* Ersatzzeiten: den bisherigen Termin stattdessen löschen (auto-planning.js, deleteOriginal). */
html:is(:root, #zr):is(:root, #zr) #autoPlanResults .auto-suggestion-group > .auto-delete-original {
  padding: 8px 12px 10px 42px;
  border-top: 1px dashed var(--line);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) #autoPlanResults .auto-unplanned > .auto-delete-original {
  display: block;
  margin-top: 8px;
}
html:is(:root, #zr):is(:root, #zr) #autoPlanResults .auto-delete-original > button {
  width: auto;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) #autoPlanResults .auto-suggestion-group:has(input:not(:checked)) {
  opacity: 0.55;
}
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives button {
  width: auto;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives button:hover,
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
/* Overlap with an appointment of a connected calendar that was not taken over: a hint, no block */
html:is(:root, #zr):is(:root, #zr) :is(#autoPlanResults, #autoPlanCalendar) .auto-alternatives button[data-conflict] {
  border-style: dashed;
  border-color: var(--warning, var(--line));
}
.auto-external-conflict {
  margin: 2px 0 0;
  padding: 4px 8px;
  border-left: 3px solid var(--warning, var(--accent));
  border-radius: 0 var(--radius-xs, 8px) var(--radius-xs, 8px) 0;
  background: var(--warning-tint, var(--surface));
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.auto-suggestion small.auto-external-conflict {
  color: var(--ink);
} /* Status and fixed footer */
#autoPlanStatus:empty,
#autoPlanError:empty,
#autoPendingInvitations:empty {
  display: none;
}
#autoPlanStatus {
  margin: 14px 0 0;
  color: var(--muted);
}
#autoPlanError {
  margin: 14px 0 0;
  color: var(--danger, var(--accent));
  white-space: pre-line;
}
#autoPendingInvitations {
  font-size: 12px;
}
#autoPlanningDialog .auto-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface, var(--paper));
}
#autoPlanningDialog .auto-footer #autoPlanBack {
  margin-right: auto;
}
#autoPlanningDialog button {
  min-height: 40px;
}
#autoPlanningDialog [hidden],
.auto-friend[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  #autoPlanningDialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  #autoPlanningDialog .dialog-body {
    padding: 16px 16px 24px;
  }
  #autoPlanningDialog .auto-scopes,
  .auto-grid,
  .auto-grid-3 {
    grid-template-columns: 1fr;
  }
  #autoPlanningDialog .auto-segments {
    width: 100%;
  }
  #autoPlanningDialog .auto-segments label {
    flex: 1;
    text-align: center;
  }
  #autoPlanningDialog .auto-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  #autoPlanningDialog .auto-footer .primary {
    flex: 1;
  }
  #openAutoPlanning {
    font-size: 11px;
    padding: 8px;
  }
}

/* =====================================================================================
 * ZeitRaum Designsystem (November 2026)
 *
 * Letzte Schicht der App: Farben, Formen und Bausteine an einer Stelle. Neue Gestaltung
 * gehört hierher, nicht in die älteren Abschnitte oben.
 *
 * Spezifität: Viele ältere Regeln arbeiten mit IDs. Das Präfix `html:is(:root, #zr):is(:root, #zr)` hebt
 * eine Regel um zwei ID-Stufen an (die ID #zr existiert nicht; :is() zählt aber die
 * höchste Spezifität seiner Argumente). So setzen sich die Bausteine ohne !important durch.
 * ===================================================================================== */

/* ---------- 1. Farben und Formen ---------- */
:root {
  color-scheme: light;
  --paper: #f6f4f1;
  --surface: #ffffff;
  --surface-raised: #f2efeb;
  --field-bg: #ffffff;
  --line: #e7e2dc;
  --line-strong: #d7d0c8;
  --ink: #1d1b19;
  --muted: #6c665f;
  --accent: #ea6a14;
  /* Filled buttons carry white text: #c2500a keeps it readable (4.7:1, WCAG AA); #e2620e reached only 3.3:1. */
  --accent-fill: #c2500a;
  --accent-hover: #a94505;
  --accent-strong: #b34a08;
  --accent-ink: #ffffff;
  --tint: #fdf1e7;
  --tint-strong: #fbe0c9;
  --success: #2f8a58;
  --success-tint: #e7f4ec;
  --warning: #b97d05;
  --warning-tint: #fbf3df;
  --danger: #c63b2f;
  --danger-tint: #fcebe9;
  /* Calm marker colour, e.g. the edge of a request card with a proposed time (notifications.js). */
  --info: #4f7fbf;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --shade: 0 1px 2px rgb(29 27 25 / 4%), 0 6px 20px rgb(29 27 25 / 5%);
  --shade-lg: 0 24px 64px rgb(29 27 25 / 18%);
  /* Karten liegen flach auf dem Hintergrund; Schatten nur für Menüs und Dialoge (--shade, --shade-lg). */
  --shade-card: 0 1px 2px rgb(29 27 25 / 4%);
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-field: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  /* Compact controls on desktop; phones get touch-friendly 40px in section 9. */
  --field-h: 32px;
  --button-h: 32px;
  /* Schriftgröße der Eingabefelder; kompakte Felder setzen die Variable am Element kleiner. */
  --field-font: 15px;
  --segment-bg: var(--surface-raised);
  --segment-active: var(--surface);
  --segment-shadow: 0 1px 2px rgb(29 27 25 / 12%);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #121110;
  --surface: #1b1a18;
  --surface-raised: #252321;
  --field-bg: #201e1c;
  --line: #322e2a;
  --line-strong: #47423c;
  --ink: #f3f0ec;
  --muted: #a8a19a;
  --accent: #ff8a3d;
  --accent-fill: #ff8a3d;
  --accent-hover: #ff9d5c;
  --accent-strong: #ffa364;
  --accent-ink: #1f1207;
  --tint: #33231a;
  --tint-strong: #4a2f1d;
  --success: #57c48f;
  --success-tint: #17302a;
  --warning: #e5b53f;
  --warning-tint: #332a12;
  --danger: #f2786d;
  --danger-tint: #3a1e1b;
  --info: #7ea3d6;
  --shade: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  --shade-lg: 0 24px 64px rgb(0 0 0 / 55%);
  --shade-card: none;
  --segment-active: #36322e;
  --segment-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}
html:is(:root, #zr):is(:root, #zr) body {
  background: var(--paper);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI Variable Text',
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
html:is(:root, #zr):is(:root, #zr) ::selection {
  background: var(--tint-strong);
}

/* ---------- 2. Eingabefelder: ein Aussehen für Text, Auswahl, Datum, Uhrzeit, Zahl, Dauer ---------- */
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card)
  :is(
    input:not(
      [type='checkbox'],
      [type='radio'],
      [type='range'],
      [type='color'],
      [type='file'],
      [type='hidden'],
      [type='button'],
      [type='submit']
    ),
    select,
    textarea
  ):not(
    #homeQuickTask input,
    .duration-clock input,
    .planning-number-input input,
    .planning-tool-field select,
    .composer-tool-field select,
    [role='switch']
  ),
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-number-input, .duration-clock) {
  box-sizing: border-box;
  min-height: var(--field-h);
  height: auto;
  /* The right padding comes from --field-pad-end: the select rule below sets it, because that rule is weaker
     than this one (the #id in :not) and its padding-right alone would lose – the arrow then covered the text. */
  padding: 0 var(--field-pad-end, 14px) 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background-color: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--field-font);
  line-height: 1.3;
  box-shadow: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) textarea {
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) select {
  --field-pad-end: 38px;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a837b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(input, select, textarea):hover:not(:focus, :disabled),
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog)
  :is(.planning-number-input, .duration-clock):hover:not(:focus-within) {
  border-color: color-mix(in srgb, var(--ink) 28%, var(--line-strong));
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(input, select, textarea):focus-visible,
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-number-input, .duration-clock):focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
html:is(:root, #zr):is(:root, #zr) :is(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}
/* Datum und Uhrzeit: gleiches Feld, dezentes Kalender-/Uhrsymbol in Akzentfarbe beim Überfahren. */
html:is(:root, #zr):is(:root, #zr)
  :is(input[type='date'], input[type='time'], input[type='datetime-local'], input[type='month']) {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr)
  :is(input[type='date'], input[type='time'], input[type='datetime-local'])::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
}
html:is(:root, #zr):is(:root, #zr)
  :is(input[type='date'], input[type='time'], input[type='datetime-local'])::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--tint);
}
:root[data-theme='dark']
  :is(input[type='date'], input[type='time'], input[type='datetime-local'])::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
html:is(:root, #zr):is(:root, #zr) input[type='number'] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
html:is(:root, #zr):is(:root, #zr) input[type='number']::-webkit-inner-spin-button,
html:is(:root, #zr):is(:root, #zr) input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Zusammengesetzte Felder (Anzahl mit Auswahl, Dauer Std:Min) sehen aus wie ein einzelnes Feld. */
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-number-input, .duration-clock) {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 14px;
  width: 100%;
  max-width: 100%;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-number-input, .duration-clock) input {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--field-h) - 2px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .duration-clock input {
  flex: 0 0 2.4ch;
  text-align: center;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .duration-clock > span[aria-hidden] {
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .duration-clock label {
  display: contents;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.number-picker-toggle, .duration-picker-toggle) {
  flex: none;
  width: calc(var(--field-h) - 4px);
  height: calc(var(--field-h) - 4px);
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.number-picker-toggle, .duration-picker-toggle):hover {
  background: var(--tint);
  color: var(--accent-strong);
}
/* Zahlen- und Dauerauswahl verwenden dieselbe kompakte Menügestaltung. */
html:is(:root, #zr):is(:root, #zr) dialog .duration-scroll-picker {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  box-shadow: var(--shade);
}
html:is(:root, #zr):is(:root, #zr) dialog .duration-number-list button {
  display: block;
  width: 100%;
  min-height: var(--button-h);
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) dialog .duration-number-list button:hover {
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) dialog .duration-number-list button[aria-selected='true'] {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
/* Beschriftungen: klein, ruhig, immer über dem Feld mit gleichem Abstand. */
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) label.field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) fieldset > legend {
  padding: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
/* Das Datumsfeld hat schon ein eigenes Kalendersymbol; das zusätzliche Symbol davor entfällt. */
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .planning-date-field {
  padding-left: 0;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .planning-date-field > svg {
  display: none;
}
/* Werkzeugleisten (Kategorie, Erinnerung, Status …): Symbolknöpfe mit unsichtbarer Auswahl darüber. */
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog)
  label.field:is(.planning-tool-field:not(.planning-tool-wide), .composer-tool-field:not(.composer-status-tool)) {
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 0;
  width: var(--button-h);
  min-width: var(--button-h);
  height: var(--button-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-tool-field, .composer-tool-field):hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog)
  .composer-tool-field[data-configured='true']:not(.composer-status-tool) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Terminstatus: sichtbare Auswahl mit Symbol als ein Feld in Knopfhöhe, Rand und Fläche wie die Symbolknöpfe. */
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) label.field:is(.composer-status-tool, .planning-tool-wide) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--button-h);
  margin: 0;
  padding: 0 0 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.composer-status-tool, .planning-tool-wide) select {
  height: calc(var(--button-h) - 2px);
  min-height: 0;
  padding: 0 34px 0 4px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 14px;
}
/* Titel: wie jedes Feld, nur größer und kräftiger. */
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-title-field, .composer-title-field) input {
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
}
/* Beginn | Ende nebeneinander, Beschriftung darüber. */
html:is(:root, #zr):is(:root, #zr) #meetingForm #meetingTimeFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm #meetingTimeFields .field {
  display: grid;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm #meetingTimeFields input {
  width: 100%;
  max-width: none;
}
/* Kontrollkästchen und Optionsfelder in Akzentfarbe, etwas größer. */
html:is(:root, #zr):is(:root, #zr) :is(input[type='checkbox']:not([role='switch']), input[type='radio']) {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-fill);
  cursor: pointer;
}

/* ---------- 3. Schnellwahl-Chips (Dauer, Anzahl, Zeiträume) ---------- */
html:is(:root, #zr):is(:root, #zr) #meetingForm .duration-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .duration-presets > span {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .duration-presets > button {
  width: 100%;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
/* With the smaller buttons all four durations fit in one row down to 340px. */
@media (max-width: 340px) {
  html:is(:root, #zr):is(:root, #zr) #meetingForm .duration-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
html:is(:root, #zr):is(:root, #zr) :is(.duration-quick-choices, .number-quick-choices) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) :is(.duration-quick-choices, .number-quick-choices) button,
html:is(:root, #zr):is(:root, #zr) #meetingForm .duration-presets button {
  min-height: var(--button-h);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.duration-quick-choices, .number-quick-choices)
  button:is([aria-pressed='true'], .active, .selected) {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent-strong);
  font-weight: 600;
}

/* ---------- 4. Knöpfe ---------- */
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card)
  :is(button:not([class]), button.primary, button.secondary, .button-link, button.danger-button):not(
    :is(
        .calendar-switch,
        .friends-tabs,
        .settings-tabs,
        .planning-tabs,
        .notification-boxes,
        .auto-segments,
        .home-stats,
        .routine-picker-menu,
        .category-palette-grid
      )
      > *,
    .ui-icon-button,
    .dialog-icon
  ),
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog)
  :is(
    .dialog-actions,
    .routine-actions,
    .routine-plan-action,
    .meeting-buttons,
    .meeting-response-actions,
    .friend-actions
  )
  button:not(.ui-icon-button):not(.dialog-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--button-h);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card)
  :is(button:not([class]), button.secondary, .button-link):hover:not(:disabled):not(
    :is(
        .calendar-switch,
        .friends-tabs,
        .settings-tabs,
        .planning-tabs,
        .notification-boxes,
        .auto-segments,
        .home-stats,
        .routine-picker-menu,
        .category-palette-grid
      )
      > *
  ) {
  background: var(--surface-raised);
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line-strong));
}
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card, header)
  button.primary:not(.ui-icon-button):not(.dialog-icon),
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .dialog-tick {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog, .auth-card, header) button.primary:hover:not(:disabled),
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .dialog-tick:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  filter: none;
}
/* Destructive actions (delete account, end friendship …): red text and outline, tinted on hover.
   :not(.dialog-icon) gives them the same weight as the button-group rule above, so they stay red there too. */
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card)
  button.danger-button:not(.ui-icon-button):not(.dialog-icon) {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line-strong));
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, .auth-card)
  button.danger-button:not(.ui-icon-button):hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
html:is(:root, #zr):is(:root, #zr) :is(button, .button-link):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Symbolknöpfe: quadratisch, gleich groß, ruhig. */
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, header)
  :is(.ui-icon-button, .dialog-icon, .home-link[aria-label]) {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: var(--button-h);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr)
  :is(main, dialog, header)
  :is(.ui-icon-button, .dialog-icon, .home-link[aria-label]):hover:not(:disabled) {
  background: var(--surface-raised);
  color: var(--ink);
}
/* Symbole im Kartenkopf (z. B. „Alle anzeigen“) ohne eigenen Rahmen, damit Karten nicht voller Kästchen wirken. */
html:is(:root, #zr):is(:root, #zr) main .home-card-head .home-link[aria-label] {
  border-color: transparent;
  background: transparent;
}
html:is(:root, #zr):is(:root, #zr) main .home-card-head .home-link[aria-label]:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog, header) :is(.ui-icon-button, .dialog-icon).primary,
html:is(:root, #zr):is(:root, #zr) :is(main, dialog) .dialog-icon.dialog-tick {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr) :is(main, dialog, header) :is(.ui-icon-button, .dialog-icon) .ui-icon,
html:is(:root, #zr):is(:root, #zr) :is(main, dialog, header) :is(.ui-icon-button, .dialog-icon) > svg {
  width: 19px;
  height: 19px;
}
/* Der native Filter-Auslöser verwendet denselben Symbolknopf wie die Kalenderaktionen. */
html:is(:root, #zr):is(:root, #zr) main #calendarFiltersMenu {
  flex: 0 0 var(--button-h);
  width: var(--button-h);
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main #calendarFiltersMenu > summary {
  margin: 0;
  list-style: none;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) main #calendarFiltersMenu > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Kopfzeile der Seiten: Haupt- und Nebenaktion in gleicher Höhe. Reicht der Platz neben dem Titel
   nicht, stehen die Aktionen rechtsbündig in einer eigenen Zeile – Beschriftungen brechen nie um. */
html:is(:root, #zr):is(:root, #zr) main > header.top {
  flex-wrap: wrap;
  row-gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) header.top .actions {
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) header.top .actions > button:not(.ui-icon-button) {
  min-height: var(--button-h);
  padding: 0 16px;
  border-radius: var(--radius-field);
  font-size: 14px;
  white-space: nowrap;
}
/* Löschen-Symbolknöpfe (Mülleimer): überall leicht rot – rote Tönung, rotes Symbol, rötlicher Rand; beim
   Überfahren etwas kräftiger. Größe und Lage regeln die jeweiligen Bereiche, die Farben nur diese Regel. */
html:is(:root, #zr):is(:root, #zr)
  button:is(
    #removeProfilePhoto,
    #deleteTargetGoal,
    #deleteAnalysis,
    #deleteRoutineFromForm,
    #deletePersonalEvent,
    .external-remove,
    .settings-remove-action,
    .task-remove
  ) {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: var(--danger-tint);
  color: var(--danger);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr)
  button:is(
    #removeProfilePhoto,
    #deleteTargetGoal,
    #deleteAnalysis,
    #deleteRoutineFromForm,
    #deletePersonalEvent,
    .external-remove,
    .settings-remove-action,
    .task-remove
  ):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: color-mix(in srgb, var(--danger) 20%, transparent);
}
/* „Kalenderfilter zurücksetzen“ erscheint nur, wenn ein Filter vom Standard abweicht – dann in Akzentfarbe. */
html:is(:root, #zr):is(:root, #zr) #resetCalendarFilters {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--tint);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) #resetCalendarFilters:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ---------- 5. Karten und Flächen ---------- */
html:is(:root, #zr):is(:root, #zr)
  main
  :is(
    .panel,
    .social-panel,
    .home-card,
    .chart-card,
    .routine-card,
    .target-goal-card,
    .category-card,
    .meeting-card,
    .friend-group-card
  ) {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shade-card);
}
html:is(:root, #zr):is(:root, #zr) main :is(.home-card, .social-panel, .chart-card, .target-goal-card) {
  padding: 20px;
}
html:is(:root, #zr):is(:root, #zr) main :is(.home-card, .social-panel, .chart-card) :is(h2, h3) {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
/* Anfragen als eigenständige Karten mit einem gemeinsamen Aktionsbereich. */
/* Requests and tasks: as many cards side by side as the window allows (one column on a phone); a single card
   keeps its size instead of filling the whole width. Same grid for the tasks (section "ToDo-Seite"). */
html:is(:root, #zr):is(:root, #zr) main #notificationList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) > .meeting-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
/* One card design for every tab of "Anfragen" and the task list (card() in public/notifications.js, home.js):
   line "who / what · when" with the badge in the top right corner, title, one short line, buttons.
   Left edge: orange = you need to answer, blue = a proposal for your appointment, neutral otherwise. */
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) > .meeting-card {
  position: relative;
  border-left: 4px solid var(--line-strong);
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) > .notification-open {
  border-left-color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  > .notification-open[data-request='proposal'] {
  border-left-color: var(--info);
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-kind {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-meta time {
  flex: none;
  width: auto;
  margin-left: 0;
  white-space: nowrap;
}
/* The dot gets the same 6px on both sides as the gap before it ("Routine · 07.11."). */
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-meta time::before {
  content: '·';
  margin-right: 6px;
}
/* Every card has the same height: title, short line and button labels stay on one line each and end with
   "…" when too long (the full text is the tooltip, card() in notifications.js). */
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) h3 {
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The short line: what to do (is-task, bold) or the state, coloured by its tone:
   red = cancelled / declined, green = accepted, yellow = tentative or a new time proposed. */
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-line {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  .notification-line:is(.is-task, [data-tone]) {
  color: var(--ink);
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  .notification-line[data-tone='danger'] {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  .notification-line[data-tone='success'] {
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  .notification-line[data-tone='warning'] {
  color: var(--warning);
}
/* Buttons in one row: text buttons share the width, the calendar button stays square. */
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 2px;
  padding-top: 0;
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-actions button {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--button-h);
  min-height: var(--button-h);
  margin: 0;
  padding: 4px 8px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(#notificationList, #homeNotifications)
  .notification-actions
  .notification-icon-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--button-h);
  padding: 0;
}
html:is(:root, #zr):is(:root, #zr) main :is(#notificationList, #homeNotifications) .notification-icon-button .ui-icon {
  width: 18px;
  height: 18px;
}
html:is(:root, #zr):is(:root, #zr) main #notificationList .notification-actions:empty {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main #notificationList > .meeting-empty {
  grid-column: 1 / -1;
}
/* Listeneinträge innerhalb von Karten: eine Ebene heller statt eigener Rahmen. */
html:is(:root, #zr):is(:root, #zr) main :is(#homeTasks .task, .home-agenda-item, .home-notice, .home-routine-item) {
  border-color: transparent;
  border-radius: var(--radius-field);
  background: var(--surface-raised);
}
/* Aktionen in Listenzeilen (Aufgabe einplanen, löschen): ohne Rahmen und Fläche, damit nicht jede Zeile
   zwei Kästchen trägt. Rot erscheint erst beim Überfahren des Löschknopfs. */
html:is(:root, #zr):is(:root, #zr) main .task .task-action {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) main .task .task-action:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
/* Termine: Kategoriefarbe als Balken am linken Rand. */
html:is(:root, #zr):is(:root, #zr) main .home-agenda-item {
  box-shadow: inset 4px 0 0 var(--event-color, var(--muted));
  padding: 8px 12px 8px 16px;
}
html:is(:root, #zr):is(:root, #zr) main #homeQuickTask {
  min-height: var(--field-h);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--field-bg);
}
html:is(:root, #zr):is(:root, #zr) main #homeQuickTask:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
html:is(:root, #zr):is(:root, #zr) main #homeQuickTask input {
  font-size: 15px;
}
/* Tagesüberblick: zwei getrennte Kacheln, schmal „Nächster Termin“, daneben das Banner mit wechselnden Anstößen. */
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shade-card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button > strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button > small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button > .home-next-event-name {
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt {
  align-content: center;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt > .home-prompt-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.25s ease;
}
html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt.is-changing > .home-prompt-text {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt > .home-prompt-text {
    transition: none;
  }
}
@media (max-width: 700px) {
  html:is(:root, #zr):is(:root, #zr) main .home-custom-stats {
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  }
  html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > .home-prompt > .home-prompt-text {
    font-size: 13px;
    -webkit-line-clamp: 4;
  }
  html:is(:root, #zr):is(:root, #zr) main .home-custom-stats {
    gap: 8px;
  }
  html:is(:root, #zr):is(:root, #zr) main .home-custom-stats > button {
    padding: 12px 14px;
  }
}
/* Die offene To-do-Karte fällt durch einen Akzentstreifen auf statt durch eine farbige Fläche. */
/* No marker on the whole card: each open task card has its own orange edge (card() in notifications.js). */
html:is(:root, #zr):is(:root, #zr) main #homeTodoCard.has-open-todos {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
/* The page title already says "Aufgaben": the card heading is hidden there; its head stays only for the
   "Pausierte Aufgaben" button. */
html:is(:root, #zr):is(:root, #zr) main #todosView #homeTodoCard > .home-card-head h2 {
  display: none;
}
html:is(:root, #zr):is(:root, #zr)
  main
  #todosView
  #homeTodoCard
  > .home-card-head:not(:has(#homePausedTodos:not([hidden]))) {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main #homeTodoCard.has-open-todos :is(h2, h3) {
  color: var(--ink);
}

/* ---------- 6. Dialoge ---------- */
html:is(:root, #zr):is(:root, #zr) dialog[open]:not(#autoPlanningDialog) {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shade-lg);
}
html:is(:root, #zr):is(:root, #zr) dialog::backdrop {
  background: rgb(20 16 12 / 45%);
  backdrop-filter: blur(2px);
}
@media (min-width: 701px) {
  /* No overflow: hidden here: tall dialogs scroll themselves and must stay scrollable. */
  html:is(:root, #zr):is(:root, #zr) dialog[open] {
    border-radius: var(--radius-lg);
  }
}
html:is(:root, #zr):is(:root, #zr) dialog .dialog-topbar {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 12px 16px 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) dialog .dialog-topbar h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
html:is(:root, #zr):is(:root, #zr) dialog .dialog-body {
  padding: 20px 22px 24px;
}
html:is(:root, #zr):is(:root, #zr)
  dialog
  :is(form, .dialog-body)
  > *
  + :is(.field, fieldset, .form-row, .planning-frequency-row) {
  margin-top: 16px;
}
html:is(:root, #zr):is(:root, #zr) dialog :is(.form-row, .planning-frequency-row, .auto-grid) {
  gap: 12px;
}

/* ---------- 7. Umschalter (Segmente) inkl. Routinen | Ziele ---------- */
html:is(:root, #zr):is(:root, #zr)
  :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes) {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--segment-bg);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.calendar-switch, .friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes)
  > button:not(#captureDay):not(.daily-shortcut) {
  min-height: 34px;
  border-radius: 10px;
}
html:is(:root, #zr):is(:root, #zr) .planning-tabs {
  margin: 0 0 20px;
}
html:is(:root, #zr):is(:root, #zr) .planning-tabs > button {
  flex: 1 0 auto;
  padding: 6px 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) .planning-tabs > button[aria-pressed='true'] {
  background: var(--segment-active);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--segment-shadow);
}
#routinesView:is(.routine-detail-open, .goal-detail-open) > .planning-tabs {
  display: none;
}

/* ---------- 8. Routinen und Ziele ---------- */
html:is(:root, #zr):is(:root, #zr) #routineList,
html:is(:root, #zr):is(:root, #zr) #targetGoalList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: stretch;
}
html:is(:root, #zr):is(:root, #zr) #routineList {
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card, .target-goal-card) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  margin: 0;
}
/* Routinen sind eine Arbeitsliste: kompakte Karten, damit viele auf einen Blick passen. */
html:is(:root, #zr):is(:root, #zr) main .routine-card {
  gap: 0;
  padding: 12px 14px 14px 18px;
}
html:is(:root, #zr):is(:root, #zr) main .routine-card-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card-head, .goal-card-head) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card-head > b, .goal-card-head > h3) {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
html:is(:root, #zr):is(:root, #zr) main .routine-card-actions {
  display: flex;
  gap: 4px;
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card-actions, .goal-card-head) .ui-icon-button {
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: var(--button-h);
  border-color: transparent;
  background: transparent;
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card-actions, .goal-card-head) .ui-icon-button:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) main :is(.routine-card-main > small, .goal-overview-rhythm) {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
/* Planungsstand: eine Zeile mit Statuspunkt (grün = vollständig, orange = offen). Das Datum steht
   schon oben bei der Wochenwahl und entfällt hier. */
/* Two lines at every width: dot and "1 von 2 eingeplant", below it "1 offen · 0 durchgeführt" aligned with the
   text (as a wrapping row the second line started with a stray "·" on narrow cards). */
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* The 3px ring (box-shadow) lies outside the dot; the margin keeps it inside the card, which clips its content. */
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status[data-complete='true']::before {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status > span {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) main .routine-planning-status > small {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .routine-streak {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) main .routine-streak strong {
  color: var(--ink);
}
/* „x von y durchgeführt“ steht bereits in der Statuszeile; die Übersicht verzichtet auf die Wiederholung. */
html:is(:root, #zr):is(:root, #zr) #routineList .routine-overview-progress {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .routine-overview-progress {
  display: grid;
  gap: 6px;
  margin-top: auto;
  color: var(--muted);
  font-size: 13px;
}
/* Fortschrittsbalken überall gleich: dünn, rund, Akzentfarbe. */
html:is(:root, #zr):is(:root, #zr)
  main
  :is(.cycle-meter, .bar.goal-progress, .home-routine-item .bar, .routine-progress-bar) {
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
html:is(:root, #zr):is(:root, #zr)
  main
  :is(.cycle-meter, .bar.goal-progress, .home-routine-item .bar, .routine-progress-bar)
  > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) main .bar.goal-progress[data-result='met'] > span {
  background: var(--success) !important;
}
html:is(:root, #zr):is(:root, #zr) main .bar.goal-progress[data-result='missed'] > span,
html:is(:root, #zr):is(:root, #zr) main .bar.goal-progress[data-result='over'] > span {
  background: var(--danger) !important;
}
/* Ziel-Karte kompakt: Wert, Balken, Ergebnis und Serie mit gleichmäßigem, kleinem Abstand. */
html:is(:root, #zr):is(:root, #zr) #targetGoalList .target-goal-card {
  gap: 8px;
  padding: 14px 14px 14px 18px;
}
html:is(:root, #zr):is(:root, #zr) #targetGoalList .target-goal-card > :is(.bar, .goal-result, .goal-streak, strong) {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main .target-goal-card > strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) main .goal-result {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) main .target-goal-card .goal-streak {
  margin-top: auto;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--surface-raised);
}
/* Kopfbereich der Routinen-Seite: Neu-Knopf, Wochenwahl und Planen-Knopf auf einer Linie. */
html:is(:root, #zr):is(:root, #zr) #routinesView .routine-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
html:is(:root, #zr):is(:root, #zr) #routinesView .routine-plan-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) #routinesView .routine-plan-action .field {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) #routinesView .routine-week-caption {
  color: var(--muted);
  font-size: 13px;
}

/* ---------- 9. Handy ---------- */
@media (max-width: 700px) {
  :root {
    --field-h: 36px;
    --button-h: 36px;
  }
  /* 16 px verhindert das automatische Hineinzoomen von iOS beim Antippen eines Feldes. */
  html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(input, select, textarea),
  html:is(:root, #zr):is(:root, #zr) :is(main, dialog) :is(.planning-number-input, .duration-clock) input {
    font-size: 16px;
  }
  html:is(:root, #zr):is(:root, #zr) main :is(.home-card, .social-panel, .chart-card, .target-goal-card) {
    padding: 16px;
  }
  html:is(:root, #zr):is(:root, #zr) dialog .dialog-body {
    padding: 16px 16px 24px;
  }
  html:is(:root, #zr):is(:root, #zr) dialog .dialog-topbar {
    padding: 10px 12px 10px 16px;
  }
  html:is(:root, #zr):is(:root, #zr) #routineList,
  html:is(:root, #zr):is(:root, #zr) #targetGoalList {
    grid-template-columns: 1fr;
  }
  html:is(:root, #zr):is(:root, #zr) .planning-tabs {
    width: 100%;
  }
}

/* ---------- 10. Anordnung der Startseite und ruhige Scrollleisten ---------- */
/* Vom Dringenden zum Langfristigen: Als Nächstes, ToDos, Aufgaben, Routinen, Ziele. */
html:is(:root, #zr):is(:root, #zr) #homeView .home-grid > :has(#homeAgenda) {
  order: 1;
}
html:is(:root, #zr):is(:root, #zr) #homeView .home-grid > #homeTodoCard {
  order: 2;
}
html:is(:root, #zr):is(:root, #zr) #homeView .home-grid > #homeTasksCard {
  order: 3;
}
html:is(:root, #zr):is(:root, #zr) #homeView .home-grid > :has(#homeRoutines) {
  order: 4;
}
html:is(:root, #zr):is(:root, #zr) #homeView .home-grid > .home-goals-card {
  order: 5;
}
html:is(:root, #zr):is(:root, #zr) * {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
html:is(:root, #zr):is(:root, #zr) ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html:is(:root, #zr):is(:root, #zr) ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--line-strong) padding-box;
}
html:is(:root, #zr):is(:root, #zr) ::-webkit-scrollbar-track {
  background: transparent;
}
/* Never two scrollbars side by side: where a scroll area sits inside another one, the outer or the
   embedded one scrolls without a visible bar (it still scrolls by wheel and touch).
   - Calendar tab: in very low windows the page moves a little; the calendar keeps its bar.
   - Appointment dialog: the dialog body keeps its bar; the embedded day calendar scrolls without one. */
html:is(:root, #zr):is(:root, #zr) body:has(#calendarView.active) > main,
html:is(:root, #zr):is(:root, #zr) #meetingComposer .time-viewport {
  scrollbar-width: none;
}
/* Handy: Karten der Startseite wachsen mit ihrem Inhalt statt eigener Scrollbereiche (kein Scrollen in Scrollen).
   Die Listen sind ohnehin kurz (Termine 5, Routinen und Ziele 4, home.js); Aufgaben zeigen die neuesten 5 und darunter
   „Alle n Aufgaben anzeigen“ (#homeTasksMore). */
#homeTasksMore {
  display: none;
}
@media (max-width: 700px) {
  html:is(:root, #zr):is(:root, #zr) #homeView .home-grid {
    grid-auto-rows: auto;
  }
  html:is(:root, #zr):is(:root, #zr) #homeView :is(#homeTasks, #homeAgenda, #homeRoutines, #homeGoals) {
    flex: none;
    width: 100%;
    margin-right: 0;
    overflow: visible;
    scrollbar-gutter: auto;
  }
  html:is(:root, #zr):is(:root, #zr) #homeView #homeTasks > .task:nth-child(n + 6) {
    display: none;
  }
  html:is(:root, #zr):is(:root, #zr) #homeView #homeTasksMore:not([hidden]) {
    display: block;
    margin: 10px auto 0;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 14px;
    font-weight: 550;
  }
}
/* Textvariante von .home-link (z. B. „Alle ToDos anzeigen“) als ruhiger Textknopf. */
html:is(:root, #zr):is(:root, #zr) main .home-link:not([aria-label]) {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
}
html:is(:root, #zr):is(:root, #zr) main .home-link:not([aria-label]):hover {
  background: var(--surface-raised);
}
/* ---------- 11. Wochentags-Auswahl: überall dieselben runden Chips ---------- */
html:is(:root, #zr):is(:root, #zr) :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}
/* In den Einstellungen (Arbeitszeiten) folgen direkt Felder: Luft unter den Kreisen. */
html:is(:root, #zr):is(:root, #zr) #settingsView .weekday-options {
  margin-bottom: 20px;
}
html:is(:root, #zr):is(:root, #zr) :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days) label {
  position: relative;
  /* Echte Kreise: gleiche Breite und Höhe, nicht schrumpfbar (sonst oval oder gequetscht). */
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--field-bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days)
  label
  > span {
  display: contents;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days)
  label
  input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days)
  label:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong));
  color: var(--ink);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days)
  label:has(input:checked) {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.weekday-options, .goal-weekdays, .analysis-weekday-choices, .auto-days)
  label:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
/* ---------- 12. Freundesliste: Aktionen in gleicher Größe ---------- */
html:is(:root, #zr):is(:root, #zr) main .friend-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) main .friend-options > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-h);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
}
html:is(:root, #zr):is(:root, #zr) main .friend-options > summary:hover,
html:is(:root, #zr):is(:root, #zr) main .friend-options[open] > summary {
  background: var(--surface-raised);
}

/* Gleiche Aktionsspalten unabhängig von Namenslänge und geöffneten Optionen. */
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-actions {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--button-h) * 2.5));
  align-items: start;
  justify-self: end;
  width: auto;
  margin-left: auto;
}
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-actions > button,
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-options > summary {
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: var(--button-h);
  min-height: var(--button-h);
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
}
/* Schmale Displays: Aktionen bleiben neben dem Namen (eine Zeile je Person), dafür schmaler und ruhiger. */
@media (max-width: 420px) {
  html:is(:root, #zr):is(:root, #zr) main #followingList .friend-row {
    gap: 8px;
  }
  html:is(:root, #zr):is(:root, #zr) main #followingList .friend-actions {
    grid-template-columns: repeat(2, auto);
    gap: 6px;
  }
  html:is(:root, #zr):is(:root, #zr) main #followingList .friend-actions > button,
  html:is(:root, #zr):is(:root, #zr) main #followingList .friend-options > summary {
    padding: 0 10px;
    border-color: var(--line);
    font-size: 13px;
  }
}
/* Long names and @usernames end with "…" instead of running under the buttons; the full text is in the tooltip
   (title in social.js). min-width: 0 lets the name column shrink next to the buttons. */
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-identity,
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-identity > div {
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) main #followingList .friend-identity > div :is(b, small) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kalender, Kategorien und Freunde direkt in der Kalenderleiste. */
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter {
  position: static;
  flex: 0 0 auto;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-h);
  height: var(--button-h);
  min-height: var(--button-h);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter > summary::-webkit-details-marker {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter > summary::after {
  content: none;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter > summary > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter[data-modified='true'] > summary {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter[open] :is(.friend-overlay-menu, .calendar-filter-menu) {
  display: block;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: 320px;
  max-width: calc(100vw - 48px);
  max-height: 55dvh;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shade);
  color: var(--ink);
  text-align: left;
  z-index: 30;
}
html:is(:root, #zr):is(:root, #zr) main #calendarFriendsMenu #friendCalendarOverlays label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  min-height: var(--button-h);
  padding: 8px 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) main #calendarFriendsMenu #friendCalendarOverlays label[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main #calendarFriendsMenu #friendCalendarOverlays small {
  grid-column: 2;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter .calendar-filter-menu label {
  min-height: var(--button-h);
  padding: 8px 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) main .calendar-direct-filter > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* ---------- 13. Teilnehmer: Gruppen und einzelne Freunde im gleichen Kartenstil ---------- */
html:is(:root, #zr):is(:root, #zr) .event-group-selector {
  margin: 4px 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .event-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
html:is(:root, #zr):is(:root, #zr) .event-group-selector h4,
html:is(:root, #zr):is(:root, #zr) #composerFriends #meetingFriendPicker::before {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) #composerFriends #meetingFriendPicker:has(.friend-pick)::before {
  content: 'Einzelne Freunde';
  grid-column: 1 / -1;
  margin-bottom: 2px;
}
html:is(:root, #zr):is(:root, #zr) .event-group-empty {
  margin: 0;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .event-group-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick > input {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick b {
  color: var(--ink);
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick small {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .event-group-pick:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
html:is(:root, #zr):is(:root, #zr) :is(.event-group-pick, #composerFriends .friend-pick):has(input:checked) {
  border-color: var(--accent);
  background: var(--tint);
}
@media (max-width: 480px) {
  html:is(:root, #zr):is(:root, #zr) .event-group-choices {
    grid-template-columns: 1fr;
  }
}

/* ---------- 14. Vergangene Zeiträume: kompakte Liste statt großer Karten ---------- */
html:is(:root, #zr):is(:root, #zr) main .goal-history h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: none;
  overflow: visible;
  padding: 0;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) main #routineDetailsPage .cycle-card {
  box-sizing: border-box;
  min-height: var(--field-h);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='met'] {
  border-left-color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='missed'] {
  border-left-color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card > time {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card > strong {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card > small {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card > span {
  grid-column: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='met'] > span {
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='missed'] > span {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card .cycle-meter {
  grid-column: 1 / -1;
  height: 4px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='met'] .cycle-meter > span {
  background: var(--success);
}
html:is(:root, #zr):is(:root, #zr) main .cycle-strip .cycle-card[data-cycle-state='missed'] .cycle-meter > span {
  background: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) main .goal-history .cycle-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
/* ---------- 15. Erfolgsserie: eine kompakte Zeile statt großer Box ---------- */
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-field);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-flame {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero.is-active .streak-flame {
  background: var(--tint);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-flame svg {
  width: 18px;
  height: 18px;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-copy > span {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-copy > strong {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-milestones {
  display: flex;
  gap: 4px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-milestones > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-milestones > span.is-earned {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent-strong);
}
@media (max-width: 420px) {
  html:is(:root, #zr):is(:root, #zr) main .goal-streak.streak-hero .streak-milestones {
    grid-column: 2 / -1;
  }
}

/* ---------- 16. Woche planen: Auswahlfeld der offenen Routinen (mit Pausiert-Hinweis und Zielstand) ---------- */
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker {
  position: relative;
  margin: 0 0 10px;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--field-h);
  padding: 4px 40px 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  cursor: pointer;
  list-style: none;
  position: relative;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker > summary::-webkit-details-marker {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker > summary::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker[open] > summary {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker[open] > summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: min(360px, 60vh);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  box-shadow: var(--shade-lg);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu > button:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu > button[aria-selected='true'] {
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu .routine-picker-title {
  font-size: 14px;
  font-weight: 550;
}
html:is(:root, #zr):is(:root, #zr) .routine-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .routine-badge.is-open {
  background: var(--tint);
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .routine-badge.is-done {
  background: var(--success-tint);
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) .routine-badge.is-snoozed {
  background: var(--warning-tint);
  color: var(--warning);
}
/* Beim Einplanen zählt nur der Planer: Wochenwahl-Leiste und Routinen-Auswahl treten zurück. */
html:is(:root, #zr):is(:root, #zr) body.routine-planning #routinesView :is(.routine-actions, #routineList) {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-section {
  margin: 6px 12px 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-section:not(:first-child) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-goal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 12px;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-goal .routine-picker-title {
  font-size: 14px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-goal > small {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .routine-badge.is-over {
  background: var(--danger-tint);
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) #routinePlannerPanel .routine-queue-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
html:is(:root, #zr):is(:root, #zr) #routinePlannerPanel .routine-plan-picker {
  flex: 1 1 100%;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker.is-locked .routine-picker > summary {
  pointer-events: none;
  opacity: 0.7;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-menu > button > small {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .routine-plan-picker .routine-picker-empty {
  margin: 4px 12px 8px;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) #routinePlannerPanel #routineWeekCalendar {
  margin-bottom: 12px;
}

/* ---------- 18. Terminstatus als Muster in der Kategoriefarbe statt als Symbol (Legende über dem Kalender) ---------- */
html:is(:root, #zr):is(:root, #zr)
  :is(.event, .month-event, .all-day-block, .status-swatch, .availability-event-band)[data-event-status] {
  --status-ink: color-mix(in srgb, var(--event-color, var(--muted)) 38%, transparent);
}
html:is(:root, #zr):is(:root, #zr) :is(.event, .month-event, .all-day-block) > .event-status-marker {
  display: none;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.event, .month-event, .all-day-block, .status-swatch, .availability-event-band)[data-event-status='free'] {
  outline: 1px dashed var(--event-color, var(--muted));
  outline-offset: -1px;
  border-left-style: dashed;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.event, .month-event, .all-day-block, .status-swatch, .availability-event-band)[data-event-status='elsewhere'] {
  background-image: radial-gradient(var(--status-ink) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.event, .month-event, .all-day-block, .status-swatch, .availability-event-band)[data-event-status='limited'] {
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--status-ink) 5px 7px);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.event, .month-event, .all-day-block, .status-swatch, .availability-event-band)[data-event-status='away'] {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 4px, var(--status-ink) 4px 5.5px),
    repeating-linear-gradient(135deg, transparent 0 4px, var(--status-ink) 4px 5.5px);
}
html:is(:root, #zr):is(:root, #zr) .event-status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 14px 8px;
  color: var(--muted);
  font-size: 11px;
}
html:is(:root, #zr):is(:root, #zr) .event-status-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .status-swatch {
  --event-color: var(--accent);
  flex: none;
  width: 18px;
  height: 11px;
  border-left: 3px solid var(--event-color);
  border-radius: 3px;
  background-color: color-mix(in srgb, var(--event-color) 14%, transparent);
}
/* Teilnehmeransicht: die Bänder sind kräftig orange, das Muster liegt deshalb in der Seitenfarbe darüber. */
html:is(:root, #zr):is(:root, #zr) .availability-event-band[data-event-status] {
  --event-color: var(--accent);
  --status-ink: color-mix(in srgb, var(--paper) 55%, transparent);
}
/* Legende (i) am Ende des Umschalters „Wochenübersicht | Teilnehmer“. */
html:is(:root, #zr):is(:root, #zr) .availability-view-switch > .legend-toggle {
  margin-left: 2px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .availability-view-switch > .legend-toggle:is(:hover, [aria-expanded='true']) {
  background: var(--surface-raised);
  color: var(--ink);
}
html:is(:root, #zr):is(:root, #zr) .availability-view-switch + .event-status-legend {
  margin: 8px 2px;
}
/* Status jeder Person zur gewählten Zeit unter dem Namen; in „Gesamt“ die Anzahl je Farbe. */
html:is(:root, #zr):is(:root, #zr) .availability-names > div {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
html:is(:root, #zr):is(:root, #zr) .availability-person-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .availability-person-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}
html:is(:root, #zr):is(:root, #zr) .availability-person-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
html:is(:root, #zr):is(:root, #zr) .availability-total-status {
  display: inline-flex;
  gap: 3px;
}
html:is(:root, #zr):is(:root, #zr) .availability-total-status > span {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: currentColor;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.availability-person-status, .availability-total-status > span)[data-tone='free'] {
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.availability-person-status, .availability-total-status > span)[data-tone='busy'] {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr)
  :is(.availability-person-status, .availability-total-status > span)[data-tone='limited'] {
  color: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .availability-total-status > span[data-tone='free'] {
  background: var(--success-tint);
}
html:is(:root, #zr):is(:root, #zr) .availability-total-status > span[data-tone='busy'] {
  background: var(--danger-tint);
}
html:is(:root, #zr):is(:root, #zr) .availability-total-status > span[data-tone='limited'] {
  background: var(--warning-tint);
}
/* Shrunk title where the longest word would not fit otherwise (design-consistency.js). */
html:is(:root, #zr):is(:root, #zr) :is(#grid, .zr-grid) .event[style*='--title-size'] .event-title {
  font-size: var(--title-size);
}
/* ---------- 19. Pufferzeit vor/nach einem Termin ---------- */
html:is(:root, #zr):is(:root, #zr) :is(#grid, .zr-grid) .event-buffer {
  position: absolute;
  z-index: 0;
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--event-color, var(--muted)) 55%, transparent);
  border-radius: 6px;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    color-mix(in srgb, var(--event-color, var(--muted)) 22%, transparent) 4px 5.5px
  );
  pointer-events: none;
}
html:is(:root, #zr):is(:root, #zr) :is(#grid, .zr-grid) .event-buffer.before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
html:is(:root, #zr):is(:root, #zr) :is(#grid, .zr-grid) .event-buffer.after {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
html:is(:root, #zr):is(:root, #zr) .status-swatch.buffer-swatch {
  border: 1px dashed var(--event-color);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    color-mix(in srgb, var(--event-color) 30%, transparent) 4px 5.5px
  );
}
html:is(:root, #zr):is(:root, #zr) #composerBuffer .composer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) #composerBuffer .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) #composerBuffer .buffer-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) #composerBuffer .buffer-field small {
  font-size: 11px;
}
html:is(:root, #zr):is(:root, #zr) #composerBuffer .sub {
  margin: 8px 0 0;
}

/* ---------- 20. Routinen-Dialog: Terminoptionen wie bei einem einzelnen Termin ---------- */
html:is(:root, #zr):is(:root, #zr) #routineForm .planning-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding-bottom: 0;
}
html:is(:root, #zr):is(:root, #zr) #routineForm .routine-schedule-settings {
  gap: 20px;
}
html:is(:root, #zr):is(:root, #zr)
  #routineForm
  .routine-schedule-settings
  > :is(.planning-frequency-row, .routine-duration, .planning-date-field) {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) :is(#routineForm, #meetingForm) .composer-privacy-tool:has(input:checked) {
  border-color: var(--accent);
  background: var(--tint);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-head h4 {
  margin: 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card .sub {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card .buffer-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card .buffer-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card .buffer-field small {
  font-size: 11px;
}
html:is(:root, #zr):is(:root, #zr) .routine-friend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .routine-option-card .check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

/* ---------- 21. Serientermin speichern: Abfrage des Geltungsbereichs ---------- */
html:is(:root, #zr):is(:root, #zr) .series-scope-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
}
html:is(:root, #zr):is(:root, #zr) .series-scope-dialog .dialog-body {
  display: grid;
  gap: 12px;
  padding: 20px;
}
html:is(:root, #zr):is(:root, #zr) .series-scope-dialog h3 {
  margin: 0;
  font-size: 17px;
}
html:is(:root, #zr):is(:root, #zr) .series-scope-dialog .sub {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .series-scope-choices {
  display: grid;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .series-scope-choices > button,
html:is(:root, #zr):is(:root, #zr) .series-scope-cancel {
  width: 100%;
  min-height: var(--button-h);
}
html:is(:root, #zr):is(:root, #zr) .series-scope-cancel {
  border: 0;
  background: transparent;
  color: var(--muted);
}

/* ---------- 22. Serientermin: Geltungsbereich direkt unter der Symbolleiste ---------- */
html:is(:root, #zr):is(:root, #zr) #meetingForm .series-scope-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
  color: var(--ink);
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .series-scope-banner[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .series-scope-banner > .ui-icon {
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .series-scope-banner > select {
  grid-column: 1 / -1;
}

/* ---------- 23. Termindialog mobil: Status und Symbole in einer Zeile; nur sehr schmal Status in eigener Zeile ---------- */
@media (max-width: 700px) {
  html:is(:root, #zr):is(:root, #zr) :is(#meetingForm, #routineForm) > .composer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
  }
  html:is(:root, #zr):is(:root, #zr) :is(#meetingForm, #routineForm) > .composer-toolbar > .composer-status-tool {
    flex: none;
    width: auto;
  }
  html:is(:root, #zr):is(:root, #zr)
    :is(#meetingForm, #routineForm)
    > .composer-toolbar
    > :is(.composer-tool-field:not(.composer-status-tool), .ui-icon-button, .composer-privacy-tool) {
    flex: none;
    width: var(--button-h);
    min-width: var(--button-h);
    height: var(--button-h);
    margin: 0;
    padding: 0;
    justify-content: center;
  }
}
/* Phones: status and all symbols do not fit in one row (one symbol wrapped alone), so the status takes the
   whole first row and the symbols sit together below it. */
@media (max-width: 440px) {
  html:is(:root, #zr):is(:root, #zr) :is(#meetingForm, #routineForm) > .composer-toolbar > .composer-status-tool {
    flex: 1 0 100%;
  }
  html:is(:root, #zr):is(:root, #zr)
    :is(#meetingForm, #routineForm)
    > .composer-toolbar
    > .composer-status-tool
    > select {
    flex: 1 1 auto;
  }
}

/* ---------- 24. Legende nur auf Abruf über den i-Knopf ---------- */
html:is(:root, #zr):is(:root, #zr) .event-status-legend {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .event-status-legend[hidden] {
  display: none;
}

/* ---------- 25. Eingebettete Kalender (CalendarView) sehen aus wie der Kalenderreiter ---------- */
/* Die Planungsansicht im Termindialog und in Einladungen: der Kalender scrollt selbst, der Rahmen nicht. */
html:is(:root, #zr):is(:root, #zr) .day-planner-scroll.planner-calendar-view {
  overflow: hidden;
  padding: 0;
}
/* Gemeinsamer Zeitslot (CalendarView.slot) in Woche planen, Aufgabe einplanen, Planung prüfen und Zeit finden:
   gestrichelter Rahmen in der Akzentfarbe auf getönter Fläche, in seiner Tagesspalte über den Terminen. */
html:is(:root, #zr):is(:root, #zr) .zr-slot {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 6;
  box-sizing: border-box;
  padding: 2px 4px;
  overflow: hidden;
  border: 2px dashed var(--accent);
  border-radius: 4px;
  background: var(--tint);
  color: var(--ink);
  cursor: grab;
  touch-action: none;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot > :is(small, b) {
  display: block;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot.is-dragging {
  border-style: solid;
  box-shadow: var(--shade);
  cursor: grabbing;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot.is-excluded {
  opacity: 0.5;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* Ränder zum Ändern der Dauer: ein kurzer Griff oben und unten. */
html:is(:root, #zr):is(:root, #zr) .zr-slot-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot-handle.start {
  top: -4px;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot-handle.end {
  bottom: -4px;
}
html:is(:root, #zr):is(:root, #zr) .zr-slot-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 3px;
  width: 24px;
  height: 3px;
  margin-left: -12px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- 26. Kalender-Kopfzeile: gemeinsamer Kalenderkopf aller Kalender, siehe „Gemeinsamer Kalenderkopf (CalendarView.head)“ ---------- */

/* ---------- 27. Kompakte Kopfzeilen auf schmalen Displays ---------- */
/* „Automatisch planen“: Symbol und Text; auf schmalen Displays nur das Symbol. */
html:is(:root, #zr):is(:root, #zr) .auto-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .auto-plan-button > .ui-icon {
  width: 18px;
  height: 18px;
  flex: none;
}
/* Legende (i) steht rechts neben Zeitraum und Kalenderwoche (gemeinsamer Kalenderkopf). */
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block:has(> .legend-toggle) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block > :not(.legend-toggle) {
  grid-column: 1;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block > .legend-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block > .legend-toggle:hover,
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block > .legend-toggle[aria-expanded='true'] {
  background: var(--surface-raised);
  color: var(--ink);
}
/* Die Hauptaktion „+“ steht immer ganz rechts. */
html:is(:root, #zr):is(:root, #zr) header.top .actions > #newEvent {
  order: 1;
}
/* Filter zurücksetzen erscheint nur, wenn ein Filter abweicht. */
html:is(:root, #zr):is(:root, #zr) header.top .actions > #resetCalendarFilters:disabled {
  display: none;
}
@media (max-width: 700px) {
  html:is(:root, #zr):is(:root, #zr) main > header.top {
    flex-wrap: nowrap;
  }
  html:is(:root, #zr):is(:root, #zr) main > header.top > #pageTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html:is(:root, #zr):is(:root, #zr) header.top .actions {
    flex-wrap: nowrap;
    flex: none;
  }
  html:is(:root, #zr):is(:root, #zr) header.top .actions > .auto-plan-button {
    width: var(--button-h);
    min-width: var(--button-h);
    padding: 0;
  }
  html:is(:root, #zr):is(:root, #zr) header.top .actions > .auto-plan-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Sehr schmale Geräte (unter 360 px): schmalerer Seitenrand im Kalender. */
@media (max-width: 359px) {
  html:is(:root, #zr):is(:root, #zr) body:has(#calendarView.active) > main {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Kalenderprüfung automatischer Vorschläge verwendet dieselben Zeitraster und Auswahlkarten. */
body.planning-workspace-open main > header.top {
  display: none;
}
.planning-page-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.planning-page-topbar h2 {
  flex: 1;
  margin: 0;
}
.planning-queue {
  padding: 8px;
}
.planning-slot-fields {
  display: grid;
  /* The calendar supplies date and duration; the gear opens the appointment settings. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.planning-slot-fields .field {
  margin: 0;
  min-width: 0;
}
.planning-slot-fields.suggestion-slot-fields {
  grid-template-columns: minmax(0, 1fr);
}
html:root #autoPlanCalendar .planning-slot-fields .field {
  gap: 4px;
  margin: 0;
  font-size: 12px;
}
html:root #autoPlanCalendar .planning-slot-fields input,
html:root #autoPlanCalendar .routine-picker > summary {
  height: var(--button-h);
  min-height: var(--button-h);
}
/* Gemeinsamer Kalenderkopf (CalendarView.head): Woche planen, Planung prüfen, Aufgabe einplanen, Zeit finden,
   Gegenvorschlag und Einladungsprüfung sehen aus wie der Kopf des Kalenderreiters. Ob er einklappt, entscheidet
   die Breite des umgebenden Bereichs (Container), nicht die Fensterbreite – so klappt auch der schmale Planer
   im Termindialog richtig ein. */
.zr-calendar-host {
  container-type: inline-size;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-title-block {
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head h3 {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: var(--muted);
}
/* Ein Klick auf den Zeitraum öffnet die Datumsauswahl; das Datumsfeld liegt unsichtbar darüber. */
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-date-pick {
  position: relative;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-date-pick:hover h3 {
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head .calendar-head-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
/* The views always fit their row: buttons shrink instead of the row getting a scrollbar. */
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-switch {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-switch > button {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: clamp(4px, 2.2cqi, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > :not([data-head-nav], [data-head-today]) {
  order: 2;
}
/* Trennstrich zwischen Navigation und Werkzeugen wie im Kalenderreiter – nur wenn es Werkzeuge gibt. */
html:is(:root, #zr):is(:root, #zr)
  .zr-calendar-head
  > .controls:has(> :not([data-head-nav], [data-head-today]))::after {
  content: '';
  order: 1;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--line);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > .ui-icon-button:not([data-head-nav]),
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > details > summary {
  width: var(--button-h);
  height: var(--button-h);
  min-width: var(--button-h);
  min-height: var(--button-h);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  box-shadow: none;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > .ui-icon-button:not([data-head-nav]):hover,
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > details > summary:hover,
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > details[open] > summary {
  background: var(--surface-raised);
  color: var(--ink);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > details[data-modified='true'] > summary {
  background: var(--tint);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls > details {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-options-toggle.ui-icon-button {
  display: none;
}
@container (max-width: 860px) {
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-switch {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
/* Schmal: Zeitraum, angeheftete Werkzeuge (z. B. Vergrößern) und der Regler bleiben sichtbar;
   Navigation, Filter und Ansichten klappt der Regler auf. */
@container (max-width: 560px) {
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls {
    grid-column: 2;
    grid-row: 1;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .calendar-options-toggle.ui-icon-button {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head:not(.is-open) > .calendar-switch,
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head:not(.is-open) > .controls > :not(.calendar-head-pinned) {
    display: none;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head:not(.is-open) > .controls::after {
    display: none;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head.is-open > .controls {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head.is-open > .calendar-switch {
    grid-row: 3;
    width: 100%;
  }
}
/* Navigation und drei Filter passen ab 360 px in eine Zeile (Touchziele bleiben 44 px); darunter ohne Trennstrich. */
@container (max-width: 460px) {
  html:is(:root, #zr):is(:root, #zr) .zr-calendar-head > .controls {
    gap: 6px 2px;
  }
  html:is(:root, #zr):is(:root, #zr)
    .zr-calendar-head
    > .controls:has(> :not([data-head-nav], [data-head-today]))::after {
    margin: 0 3px;
  }
}
@container (max-width: 340px) {
  html:is(:root, #zr):is(:root, #zr)
    .zr-calendar-head
    > .controls:has(> :not([data-head-nav], [data-head-today]))::after {
    display: none;
  }
}
@media (max-width: 700px) {
  /* Planning actions stay compact on small displays as well. */
  .planning-slot-fields {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .planning-slot-fields.suggestion-slot-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.auto-preview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.auto-preview-head .routine-picker {
  flex: 1 1 240px;
  min-width: 0;
}
.auto-preview-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.auto-preview-comparison section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
}
.auto-preview-comparison section > span {
  grid-column: 1;
}
.auto-preview-comparison section > strong {
  grid-column: 1;
}
.auto-preview-comparison section > button {
  grid-column: 2;
  grid-row: 1 / 3;
}
/* „Stattdessen löschen“ als eigene Zeile unter Bisher / Vorgeschlagen; zweiter Druck bestätigt. */
.auto-preview-comparison > .auto-preview-delete {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) :is(.auto-preview-delete, .auto-delete-original > button).is-armed {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--accent-ink);
}
/* Kurzes Aufleuchten nach „Im Kalender zeigen“. */
html:root #autoPlanCalendar :is(.auto-preview-event, .zr-slot).auto-preview-flash {
  box-shadow: 0 0 0 4px var(--accent);
}
.auto-preview-comparison strong {
  flex: 1;
  font-size: 13px;
}
.auto-preview-comparison span,
.auto-preview-legend {
  color: var(--muted);
  font-size: 12px;
}
.auto-preview-legend {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.auto-preview-calendar {
  min-width: 0;
}
html:root #autoPreviewCalendar > .zr-viewport.time-viewport {
  min-height: 420px;
  max-height: none;
}
#autoPlanCalendar .auto-preview-legend {
  margin: 0;
  padding: 0 16px 8px;
}
html:root #autoPlanCalendar .auto-preview-event[data-auto-preview-role='old'] {
  border: 2px dashed var(--muted);
  opacity: 0.65;
}
html:root #autoPlanCalendar .auto-preview-event[data-auto-preview-role='new'] {
  border: 2px solid var(--accent);
}
html:root #autoPlanCalendar .auto-preview-event.auto-preview-selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
html:root #autoPlanCalendar .auto-preview-event.auto-preview-excluded {
  opacity: 0.4;
}
.auto-preview-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auto-preview-open .ui-icon {
  width: 20px;
  height: 20px;
}
/* ---------- 28. Kalenderwerkzeuge: kompakte Auslöser, ausklappbare Ansichten ---------- */
html:has(dialog[open]) {
  overflow: hidden;
}
html:root #meetingComposer[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
html:root #meetingComposer > .dialog-topbar {
  flex: none;
}
html:root #meetingComposer > .dialog-body {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  box-sizing: border-box;
  overflow: auto;
}
html:root #meetingComposer.planner-focus > .dialog-body {
  overflow: hidden;
}
#meetingForm .composer-inline-planner {
  container-type: inline-size;
}
/* Datum, Ansicht und Vergrößern stehen im gemeinsamen Kalenderkopf des Planers (CalendarView.head);
   die ursprünglichen Felder bleiben unsichtbar für ihre Verknüpfungen. */
html:is(:root, #zr):is(:root, #zr) #meetingComposer #meetingForm .composer-inline-planner > .planner-controls {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) #plannerResult > .zr-calendar-head {
  padding: 0 0 8px;
}
html:is(:root, #zr):is(:root, #zr) #meetingComposer.planner-focus .planner-expand.ui-icon-button {
  display: none;
}
html:root #meetingComposer #plannerResult .zr-calendar .day {
  padding: 3px 0;
  font-size: 9px;
}
html:root #meetingComposer #plannerResult .zr-calendar .day b {
  margin: 1px auto 0;
  font-size: 13px;
  line-height: 22px;
}
html:root #meetingComposer #plannerResult .zr-calendar .day.today b {
  width: 22px;
  height: 22px;
}
#meetingComposer.planner-focus #plannerResult .planner-slot-summary {
  display: none;
}
@container (max-width: 560px) {
  html:root #meetingComposer #plannerResult:not(:has(> .zr-calendar-head.is-open)) > .availability-view-switch {
    display: none;
  }
}
/* Der große Planer: der Kopf steht über dem Kalender wie im Kalenderreiter. */
html:root #meetingComposer.planner-focus #meetingForm > .composer-inline-planner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* ---------- 28. Monatsansicht: Termintitel statt Anzahl, dezente Tageszahl ---------- */
/* Gilt für den Kalenderreiter und den Kalender im Termindialog (gemeinsam über MonthOverview in calendar.js). */
html:is(:root, #zr):is(:root, #zr) .month-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
}
/* Tageszahl: klein, ohne Fläche und Rahmen, damit sie sich klar von den Terminen abhebt. */
html:is(:root, #zr):is(:root, #zr) .month-day .month-date {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .month-day.is-today .month-date {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr) .month-day .month-date[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .month-day .month-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}
/* Ein Termin pro Zeile in Kategoriefarbe; lange Titel werden gekürzt. */
html:is(:root, #zr):is(:root, #zr) .month-day .month-mini {
  display: block;
  flex: none;
  width: 100%;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-left: 3px solid var(--event-color, var(--accent));
  border-radius: 4px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .month-day .month-more {
  flex: none;
  width: 100%;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:is(:root, #zr):is(:root, #zr) .month-day :is(.month-mini, .month-more):hover {
  filter: brightness(1.15);
  color: var(--ink);
}
/* Nur in sehr schmalen Zellen: kompakte Anzahl als kleine Marke. */
html:is(:root, #zr):is(:root, #zr) .month-day .month-count {
  flex-direction: row;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .month-day .month-count > span {
  display: none;
}

/* ---------- 29. Terminvorschläge im Termindialog (social.js, SlotSuggestions) ---------- */
html:is(:root, #zr):is(:root, #zr) .slot-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) .slot-suggestions[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .slot-suggestions-label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: calc(var(--button-h) + 8px);
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--slot-tone, var(--success));
  border-radius: var(--radius-field);
  background: var(--field-bg);
  color: var(--ink);
  text-align: left;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button > b {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button > small {
  color: var(--slot-tone, var(--success));
  font-size: 11px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button[data-tone='limited'] {
  --slot-tone: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button[data-tone='busy'] {
  --slot-tone: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button:hover {
  border-color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .slot-suggestions > .sub {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
}
/* Overlap with a not taken-over appointment of a connected calendar: only a hint, the time counts as free */
html:is(:root, #zr):is(:root, #zr) #meetingForm .slot-suggestions > button[data-external-conflict] {
  border-style: dashed;
  border-left-style: solid;
}
html:is(:root, #zr):is(:root, #zr) .planner-slot-note:not([hidden]) {
  margin: 4px 0 6px;
  padding: 4px 8px;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--warning-tint);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
html:is(:root, #zr):is(:root, #zr) .slot-suggestions > .slot-external-conflict {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 8px;
  border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--warning-tint);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- 30. Termindialog: kurze Werkzeugleiste mit „⋯“ (ui-shell.js) ---------- */
/* Wiederholung, Ort, Weitere Optionen, Puffer und Privat erscheinen erst über „⋯“ – oder sobald sie genutzt werden. */
html:is(:root, #zr):is(:root, #zr)
  #meetingForm
  > .composer-toolbar:not(.show-more)
  > :is(
    [aria-controls='composerRecurrence'],
    [aria-controls='composerPlace'],
    [aria-controls='composerMore'],
    [aria-controls='composerBuffer']
  ):not([data-configured='true'], [data-added='true'], [aria-pressed='true']),
html:is(:root, #zr):is(:root, #zr)
  #meetingForm
  > .composer-toolbar:not(.show-more)
  > .composer-privacy-tool:not(:has(input:checked)) {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) #meetingForm > .composer-toolbar > .composer-more-tools {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr)
  #meetingForm
  > .composer-toolbar
  > .composer-more-tools:is(:hover, [aria-expanded='true']) {
  background: var(--surface-raised);
  color: var(--ink);
}

/* ---------- 31. Symbole in Knöpfen immer mittig ---------- */
/* Einheitliche Symbolgröße; ältere Regeln mit Innenabstand verschoben größere Symbole nach unten. */
html:is(:root, #zr):is(:root, #zr) :is(.ui-icon-button, .dialog-icon, .task-action, .home-link[aria-label]) {
  display: inline-grid;
  place-items: center;
  padding: 0;
}
html:is(:root, #zr):is(:root, #zr) :is(.ui-icon-button, .dialog-icon, .task-action, .home-link[aria-label]) > svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* ---------- 32. Reiterleisten auf schmalen Displays ---------- */
/* Texte werden nie übereinander gezeichnet: zu schmale Reiter kürzen ihren Text. */
html:is(:root, #zr):is(:root, #zr) :is(.friends-tabs, .settings-tabs, .planning-tabs, .notification-boxes) > button {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Einstellungen (sechs Reiter): bis 820 px drei, unter 400 px zwei Reiter je Zeile, damit die Namen vollständig lesbar
   bleiben. */
@media (max-width: 820px) {
  html:is(:root, #zr):is(:root, #zr) #settingsView .settings-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  html:is(:root, #zr):is(:root, #zr) #settingsView .settings-tabs > button {
    justify-content: center;
  }
}
@media (max-width: 400px) {
  html:is(:root, #zr):is(:root, #zr) #settingsView .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 33. Weitere Kalender (external-calendars.js): Verbindungen in den Einstellungen, schreibgeschützte Termine ---------- */
html:is(:root, #zr):is(:root, #zr) .settings-external-card {
  display: grid;
  gap: 12px;
  align-content: start;
}
html:is(:root, #zr):is(:root, #zr) .settings-external-card > :is(h3, p) {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .external-accounts {
  display: grid;
  gap: 8px;
}
/* Karte je Verbindung: Anfangsbuchstabe, Name und Herkunft, unten Status und „Termine übernehmen …“ als Hauptknopf. */
html:is(:root, #zr):is(:root, #zr) .external-account {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .external-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-head > div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .external-account-head b {
  font-size: 15px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-head > .external-remove {
  flex: none;
}
html:is(:root, #zr):is(:root, #zr) .external-account-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Rechts: „Zurücksetzen …“ (nur nach einer Übernahme, ruhig) und „Termine übernehmen …“ (Hauptaktion). */
html:is(:root, #zr):is(:root, #zr) .external-account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-foot :is(.external-takeover-button, .external-reset-button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--button-h);
}
html:is(:root, #zr):is(:root, #zr) .external-account-foot .external-reset-button {
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) .external-account-foot .external-reset-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr)
  .external-account-foot
  :is(.external-takeover-button, .external-reset-button)
  > .ui-icon {
  width: 18px;
  height: 18px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-foot .external-reset-button > .ui-icon {
  color: var(--accent);
}
@media (max-width: 520px) {
  html:is(:root, #zr):is(:root, #zr) .external-account-actions {
    flex: 1 1 100%;
  }
  html:is(:root, #zr):is(:root, #zr) .external-account-foot :is(.external-takeover-button, .external-reset-button) {
    flex: 1 1 auto;
    justify-content: center;
  }
}
/* Dialog „Übernahme zurücksetzen“ (calendar-takeover-ui.js). */
html:is(:root, #zr):is(:root, #zr) .takeover-reset-dialog {
  width: min(520px, calc(100vw - 32px));
}
html:is(:root, #zr):is(:root, #zr) .takeover-reset-dialog .dialog-body > p {
  margin: 0 0 10px;
}
html:is(:root, #zr):is(:root, #zr) .external-account-head :is(b, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .external-account-head small,
html:is(:root, #zr):is(:root, #zr) .external-status {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .external-status {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .external-status.is-error {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .external-calendar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
html:is(:root, #zr):is(:root, #zr) .external-calendar-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .external-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .external-switch {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--segment-bg);
}
html:is(:root, #zr):is(:root, #zr) .external-switch > button {
  min-height: var(--button-h);
  padding: 4px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
html:is(:root, #zr):is(:root, #zr) .external-switch > button[aria-pressed='true'] {
  background: var(--segment-active);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--segment-shadow);
}
html:is(:root, #zr):is(:root, #zr) .external-form {
  display: grid;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) .external-form[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .external-form > .primary {
  justify-self: start;
}
html:is(:root, #zr):is(:root, #zr) .external-form .sub,
html:is(:root, #zr):is(:root, #zr) .external-more p {
  margin: 0;
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .external-more {
  display: grid;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .external-more summary {
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .external-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .external-error[hidden] {
  display: none;
}
/* Anleitung je Anbieter unter der E-Mail-Adresse (T-Online, GMX, iCloud …). */
html:is(:root, #zr):is(:root, #zr) .external-provider-hint {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .external-provider-hint[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .external-provider-hint ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
} /* Schreibgeschützte Termine aus anderen Kalendern: gestrichelte Kante, kein Verschieben. */
html:is(:root, #zr):is(:root, #zr) :is(.event, .month-event, .all-day-block)[data-external] {
  border-style: dashed;
  cursor: default;
}
html:is(:root, #zr):is(:root, #zr) .external-event-dialog .dialog-body p {
  margin: 0 0 6px;
  white-space: pre-line;
}
/* „Anleitung“ und „Übernommene Termine prüfen“ stehen als kleine Links unter der Überschrift. */
/* „Anleitung“ und „Übernommene Termine prüfen“: zwei ruhige, gleich breite Knöpfe; schmal untereinander. */
html:is(:root, #zr):is(:root, #zr) .external-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .external-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: var(--button-h);
  padding: 0 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .external-help-link > .ui-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .external-help-link:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--tint);
}

/* ---------- 33. Abschaltbare Funktionen (features.js) und ToDo-Seite ---------- */
html:is(:root, #zr):is(:root, #zr) .settings-features-card .feature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .settings-features-card .feature-toggle > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .settings-features-card .feature-toggle small {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .settings-features-card .feature-toggle > input {
  flex: none;
}
/* Routinen aus: Startseiten-Kachel, „Als Routine anlegen“ bei Serien, Routinen in Automatisch planen und Routinen-Bereich. */
html:is(:root, #zr):is(:root, #zr)
  body.feature-off-routines
  :is(
    #homeView .home-grid > .home-card:has(#homeRoutines),
    #seriesToRoutine,
    #autoPlanForm .auto-scope:has(input[name='routines']),
    [data-planning-pane='routines']
  ) {
  display: none;
}
/* Ziele aus: Startseiten-Kachel, Zeitziele in Automatisch planen und Ziel-Bereich. */
html:is(:root, #zr):is(:root, #zr)
  body.feature-off-goals
  :is(
    #homeView .home-grid > .home-goals-card,
    #autoPlanForm .auto-scope:has(input[name='goals']),
    [data-planning-pane='goals']
  ) {
  display: none;
}
/* Gruppen aus: Umschalter Freunde/Gruppen, Gruppenbereich und Gruppenauswahl beim Einladen und Weiterleiten. */
html:is(:root, #zr):is(:root, #zr)
  body.feature-off-groups
  :is(#friendsView .friends-tabs, #friendsView [data-friends-pane='groups'], .event-group-selector) {
  display: none;
}
/* ToDo-Seite: die Aufgaben-Kacheln liegen direkt auf der Seite wie bei „Anfragen“ (ohne Hülle) und stehen
   nebeneinander, so viele wie die Breite erlaubt (auf dem Handy eine Spalte). */
html:is(:root, #zr):is(:root, #zr) #todosView > #homeTodoCard {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) #todosView > #homeTodoCard #homeNotifications {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) #todosView > #homeTodoCard #homeNotifications > :not(.meeting-card) {
  grid-column: 1 / -1;
}
html:is(:root, #zr):is(:root, #zr) #openTodos {
  position: relative;
}
@media (any-pointer: coarse) {
  html:is(:root, #zr):is(:root, #zr) .zr-slot {
    touch-action: pan-y;
  }
  html:is(:root, #zr):is(:root, #zr) :is(.zr-slot-handle, .calendar-resize) {
    visibility: hidden;
    pointer-events: none;
  }
  html:is(:root, #zr):is(:root, #zr) .touch-selected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    z-index: 30;
    overflow: visible;
  }
  html:is(:root, #zr):is(:root, #zr) .touch-selected :is(.zr-slot-handle, .calendar-resize) {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    left: auto;
    right: -10px;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 50%;
    touch-action: none;
  }
  html:is(:root, #zr):is(:root, #zr) .touch-selected :is(.zr-slot-handle, .calendar-resize).start {
    top: -48px;
  }
  html:is(:root, #zr):is(:root, #zr) .touch-selected :is(.zr-slot-handle, .calendar-resize).end {
    bottom: -48px;
  }
  html:is(:root, #zr):is(:root, #zr) .touch-selected :is(.zr-slot-handle, .calendar-resize)::after {
    content: '↕';
    background: transparent;
    color: var(--ink);
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    display: grid;
    place-items: center;
    font-size: 20px;
  }
}
html:is(:root, #zr):is(:root, #zr) .feature-off-auto-planning .auto-plan-button {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) #autoPlanCalendar #calendarFriendsMenu {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue .auto-preview-head {
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue .routine-picker {
  width: 100%;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue .routine-picker > summary {
  min-height: var(--button-h);
  padding: 10px 12px;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue .planning-slot-fields {
  grid-template-columns: auto auto;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) .task-planning-queue .category-error {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 380px) {
  html:is(:root, #zr):is(:root, #zr) .task-planning-queue {
    grid-template-columns: minmax(0, 1fr);
  }
  html:is(:root, #zr):is(:root, #zr) .task-planning-queue .planning-slot-fields {
    justify-content: end;
  }
}

/* Search results use the same compact individual cards as the home agenda. */
html:is(:root, #zr):is(:root, #zr) #eventSearchResults {
  display: grid;
  gap: 10px;
  padding-block: 12px;
}
html:is(:root, #zr):is(:root, #zr) .search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .search-result-select {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .search-result b {
  font-size: 15px;
  overflow-wrap: anywhere;
}
html:is(:root, #zr):is(:root, #zr) .search-result small {
  font-size: 12px;
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .search-result-category {
  grid-column: 1;
  grid-row: 2;
  margin: 0 0 0 32px;
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .search-result > :is(button, a) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
html:is(:root, #zr):is(:root, #zr) .search-bulk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
}
html:is(:root, #zr):is(:root, #zr) .search-bulk label:first-child {
  grid-column: 1 / -1;
}
html:is(:root, #zr):is(:root, #zr) .search-bulk label:has(select) {
  display: block;
  min-width: 0;
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .search-bulk select {
  width: 100%;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .search-bulk > button {
  align-self: end;
  max-width: 170px;
  white-space: normal;
}

/* ---------- 34. Neuer Termin als Entwurf im Kalender (calendar-drag.js): verschieben, Dauer ändern, dann antippen ---------- */
html:is(:root, #zr):is(:root, #zr) .calendar-draft {
  z-index: 16;
  padding-right: 26px;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .calendar-draft > .calendar-draft-hint {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html:is(:root, #zr):is(:root, #zr) .calendar-draft > .calendar-draft-close {
  position: absolute;
  top: 1px;
  right: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  min-width: 0;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
html:is(:root, #zr):is(:root, #zr) .calendar-draft > .calendar-draft-close:hover {
  background: var(--tint-strong);
  color: var(--ink);
}
html:is(:root, #zr):is(:root, #zr) .calendar-draft > .calendar-draft-close .ui-icon {
  width: 14px;
  height: 14px;
}
@media (any-pointer: coarse) {
  html:is(:root, #zr):is(:root, #zr) .calendar-draft {
    padding-right: 34px;
  }
  html:is(:root, #zr):is(:root, #zr) .calendar-draft > .calendar-draft-close {
    width: 32px;
    height: 32px;
  }
}

/* ---------- 35. Kalender auf Touchgeräten: kein Markieren von Text ---------- */
/* Langes Drücken auf Uhrzeiten oder Termintitel markierte bisher Text, und Chrome bot „Zum Suchen tippen“ (Google-Suche) an.
   Im Kalender wird nie Text markiert; Halten bleibt allein dem Verschieben und Anlegen vorbehalten. */
@media (any-pointer: coarse) {
  html:is(:root, #zr):is(:root, #zr) :is(#calendarViewport, #allDayEvents, #monthGrid, .zr-viewport, .zr-all-day) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ---------- 36. Betriebsübersicht /admin (admin.html, admin.js) ---------- */
/* Aufbau wie die App: großer Seitentitel, darunter Reiter als Umschalter (Übersicht, Nachrichten, Konten, Server,
   Protokoll, Sicherungen), je Reiter ein Bereich .admin-panel aus ruhigen Karten ohne Verlauf. Zustände als
   Ampelpunkt (.admin-dot-state), Listen als gleich aussehende Zeilen (.admin-row), Auslastung als Balken.
   Keine inneren Scrollbalken außer Unterhaltungsliste und Chatverlauf; die Kontentabelle wird schmal zu Karten. */
html:is(:root, #zr):is(:root, #zr) body.admin-page {
  min-height: 100vh;
  margin: 0;
  overflow: auto;
}
html:is(:root, #zr):is(:root, #zr) .admin-main {
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  padding: 16px 16px 48px;
}
html:is(:root, #zr):is(:root, #zr) .admin-main [hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) #adminContent {
  display: grid;
  gap: 16px;
}
html:is(:root, #zr):is(:root, #zr) #adminContent[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 8px 0 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-title {
  display: grid;
  flex: 1 1 0;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-title h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}
html:is(:root, #zr):is(:root, #zr) .admin-title p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-brand {
  color: var(--muted);
  text-decoration: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-brand:hover {
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-head-actions {
  display: flex;
  align-self: flex-start;
  gap: 8px;
  margin-left: auto;
}
html:is(:root, #zr):is(:root, #zr) .admin-icon-button {
  display: grid;
  place-items: center;
  width: var(--button-h);
  height: var(--button-h);
  padding: 0;
  font-size: 18px;
}
html:is(:root, #zr):is(:root, #zr) .admin-muted {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
html:is(:root, #zr):is(:root, #zr) .admin-block {
  display: block;
}
html:is(:root, #zr):is(:root, #zr) .admin-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
html:is(:root, #zr):is(:root, #zr) .admin-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .admin-card h2 {
  margin: 0;
  font-size: 16px;
}
html:is(:root, #zr):is(:root, #zr) .admin-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
}
html:is(:root, #zr):is(:root, #zr) .admin-subhead {
  margin: 20px 0 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .admin-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--danger-tint);
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  border-color: var(--accent);
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-invite[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-invite :is(h2, p) {
  flex: 1 0 100%;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-invite code {
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-size: 13px;
  word-break: break-all;
}

/* Gesamtzustand: eine ruhige Karte, nur Symbol und Überschrift tragen die Ampelfarbe. */
html:is(:root, #zr):is(:root, #zr) .admin-state {
  --hero: var(--success);
  --hero-tint: var(--success-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-state.is-warning {
  --hero: var(--warning);
  --hero-tint: var(--warning-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-state.is-danger {
  --hero: var(--danger);
  --hero-tint: var(--danger-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-status {
  display: flex;
  align-items: center;
  gap: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-status-icon {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hero-tint);
  color: var(--hero);
  font-size: 22px;
  font-weight: 800;
}
html:is(:root, #zr):is(:root, #zr) .admin-status h2 {
  color: var(--hero);
  font-size: 19px;
}
html:is(:root, #zr):is(:root, #zr) .admin-status p {
  margin: 2px 0 0;
}

/* Ampelpunkt und Zeilenlisten (Zu erledigen, Hinweise, Grenzwerte) */
html:is(:root, #zr):is(:root, #zr) .admin-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-row {
  --tone: var(--success);
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
html:is(:root, #zr):is(:root, #zr) .admin-row.is-warning {
  --tone: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-row.is-danger {
  --tone: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-row:is(.is-info, .is-unknown) {
  --tone: var(--line-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-dot-state {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--tone);
}
html:is(:root, #zr):is(:root, #zr) .admin-row-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-row-text strong {
  font-size: 14px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .admin-row-value {
  max-width: 260px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) .admin-row.is-warning .admin-row-value {
  color: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-row.is-danger .admin-row-value {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-fix summary,
html:is(:root, #zr):is(:root, #zr) .admin-more summary {
  width: fit-content;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .admin-fix p {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .admin-more {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-more[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-more[open] summary {
  margin-bottom: 4px;
}

/* Auslastung als Balken */
html:is(:root, #zr):is(:root, #zr) .admin-meters {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-meter {
  --tone: var(--success);
  display: grid;
  gap: 4px;
}
html:is(:root, #zr):is(:root, #zr) .admin-meter.is-warning {
  --tone: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-meter.is-danger {
  --tone: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-meter-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-meter-line strong {
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) .admin-meter-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-meter-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone);
}

/* Kennzahlen: eine Karte, Werte im Raster */
html:is(:root, #zr):is(:root, #zr) .admin-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-link {
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-link:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi-label {
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi strong {
  font-size: 22px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-live .admin-kpi-label::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--success);
  vertical-align: 1px;
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-attention {
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-attention strong {
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-warning strong {
  color: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-kpi.is-danger strong {
  color: var(--danger);
}

/* Zweispaltige Bereiche */
html:is(:root, #zr):is(:root, #zr) .admin-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Warnungen */
html:is(:root, #zr):is(:root, #zr) .admin-warnings {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-warning {
  --tone: var(--muted);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .admin-warning.is-danger {
  --tone: var(--danger);
  background: var(--danger-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-warning.is-warning {
  --tone: var(--warning);
  background: var(--warning-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-warning.is-ok {
  --tone: var(--success);
  background: var(--success-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-warning p {
  margin: 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-warning-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-chip {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .admin-chip.is-danger {
  background: var(--danger);
  color: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .admin-chip.is-warning {
  background: var(--warning);
  color: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .admin-hint {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink);
}

/* Aktivität und größte Konten */
html:is(:root, #zr):is(:root, #zr) .admin-stack {
  display: flex;
  gap: 3px;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-stack > span {
  flex-basis: 0;
  min-width: 6px;
}
html:is(:root, #zr):is(:root, #zr) :is(.admin-stack > span, .admin-dot).is-day {
  background: var(--success);
}
html:is(:root, #zr):is(:root, #zr) :is(.admin-stack > span, .admin-dot).is-week {
  background: color-mix(in srgb, var(--success) 55%, var(--surface));
}
html:is(:root, #zr):is(:root, #zr) :is(.admin-stack > span, .admin-dot).is-month {
  background: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) :is(.admin-stack > span, .admin-dot).is-older {
  background: var(--line-strong);
}
html:is(:root, #zr):is(:root, #zr) :is(.admin-stack > span, .admin-dot).is-never {
  background: var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-dot.is-accent {
  background: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .admin-dot.is-error {
  background: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .admin-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}
html:is(:root, #zr):is(:root, #zr) .admin-top {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-top li {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .admin-top-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .admin-top-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-top-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .admin-top-value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Diagramme */
html:is(:root, #zr):is(:root, #zr) .admin-chart svg {
  display: block;
  width: 100%;
  height: 120px;
}
html:is(:root, #zr):is(:root, #zr) .admin-chart-axis {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .admin-grid-line {
  stroke: var(--line);
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
html:is(:root, #zr):is(:root, #zr) .admin-bar {
  fill: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .admin-bar.is-empty {
  fill: var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-bar.is-error {
  fill: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
html:is(:root, #zr):is(:root, #zr) .admin-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-stat strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
html:is(:root, #zr):is(:root, #zr) .admin-stat span {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .admin-stat.is-warning {
  background: var(--warning-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-stat.is-warning strong {
  color: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-stat.is-danger {
  background: var(--danger-tint);
}
html:is(:root, #zr):is(:root, #zr) .admin-stat.is-danger strong {
  color: var(--danger);
}

/* Konten */
html:is(:root, #zr):is(:root, #zr) .admin-accounts .admin-card-tools {
  flex: 1 1 320px;
  justify-content: flex-end;
}
html:is(:root, #zr):is(:root, #zr) .admin-accounts .admin-card-head input {
  flex: 1 1 160px;
  width: auto;
  max-width: 320px;
}
/* Kontenliste: eine kompakte Zeile je Konto (Kürzel, Name und Adressen, Zahlenzeile, Status und Knöpfe). */
html:is(:root, #zr):is(:root, #zr) .admin-account-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-account {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-account:first-child {
  border-top: 0;
  padding-top: 4px;
}
html:is(:root, #zr):is(:root, #zr) .admin-account.is-disabled {
  opacity: 0.7;
}
html:is(:root, #zr):is(:root, #zr) .admin-account .admin-avatar {
  width: 36px;
  height: 36px;
}
html:is(:root, #zr):is(:root, #zr) .admin-account-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-account-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-account-name > * {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .admin-account-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .admin-row-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .admin-row-button:hover {
  border-color: var(--line-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-account-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-account-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
html:is(:root, #zr):is(:root, #zr) .admin-sort select {
  min-height: var(--field-h);
}
html:is(:root, #zr):is(:root, #zr) .admin-avatar {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .admin-badge.is-ok {
  background: var(--success-tint);
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) .admin-badge.is-danger {
  background: var(--danger-tint);
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-badge.is-warning {
  background: var(--warning-tint);
  color: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-badge.is-accent {
  background: var(--tint);
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .admin-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* Schlüssel-Wert-Listen (Server, Speicher, Einstellungen, E-Mail) */
html:is(:root, #zr):is(:root, #zr) .admin-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-list dt {
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .admin-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* Nachrichten: Posteingang mit Unterhaltung, Mitteilungen an alle */
html:is(:root, #zr):is(:root, #zr) .admin-filter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-field);
  background: var(--segment-bg);
}
html:is(:root, #zr):is(:root, #zr) .admin-filter button {
  min-height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .admin-filter button.active {
  background: var(--segment-active);
  color: var(--ink);
  box-shadow: var(--segment-shadow);
}
html:is(:root, #zr):is(:root, #zr) .admin-inbox-body {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
html:is(:root, #zr):is(:root, #zr) .admin-inbox-body.is-empty {
  grid-template-columns: 1fr;
  min-height: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-inbox-body.is-empty .admin-thread {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-inbox-body.is-empty .admin-threads {
  border: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-threads {
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-item:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-item.is-active {
  background: var(--tint);
  box-shadow: inset 3px 0 0 var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-item > .admin-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-item:not(.is-unread) strong {
  font-weight: 550;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-unread {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-empty {
  padding: 24px 16px;
  text-align: center;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread {
  display: grid;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) #adminThreadView {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}
html:is(:root, #zr):is(:root, #zr) #adminThreadView[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-bubbles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  padding: 16px;
  overflow: auto;
  background: var(--paper);
}
html:is(:root, #zr):is(:root, #zr) .admin-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shade);
}
html:is(:root, #zr):is(:root, #zr) .admin-bubble.is-other {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
html:is(:root, #zr):is(:root, #zr) .admin-bubble.is-own {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr) .admin-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html:is(:root, #zr):is(:root, #zr) .admin-bubble-meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.75;
}
html:is(:root, #zr):is(:root, #zr) .admin-reply {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-main textarea {
  min-height: 72px;
}
html:is(:root, #zr):is(:root, #zr) .admin-reply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-reply-actions > .admin-muted {
  margin-right: auto;
}
html:is(:root, #zr):is(:root, #zr) .admin-announce-form {
  display: grid;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) .admin-announce-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
html:is(:root, #zr):is(:root, #zr) .admin-announcements {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-announcements > li:not(.admin-muted) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
html:is(:root, #zr):is(:root, #zr) .admin-announcements p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-announce-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px) {
  html:is(:root, #zr):is(:root, #zr) :is(.admin-split, .admin-inbox-body) {
    grid-template-columns: 1fr;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-threads {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 640px) {
  html:is(:root, #zr):is(:root, #zr) .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html:is(:root, #zr):is(:root, #zr) .admin-kpi strong {
    font-size: 19px;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-list {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-list dd {
    margin-bottom: 8px;
  }
}

/* Reiter: Umschalter wie in der App, brechen um statt seitlich zu scrollen oder zu überlappen. */
html:is(:root, #zr):is(:root, #zr) .admin-tabs {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-field);
  background: var(--segment-bg);
}
html:is(:root, #zr):is(:root, #zr) .admin-tabs[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-tabs .admin-tab {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  box-shadow: none;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .admin-tabs .admin-tab:hover {
  color: var(--ink);
}
html:is(:root, #zr):is(:root, #zr) .admin-tabs .admin-tab[aria-selected='true'] {
  background: var(--segment-active);
  color: var(--ink);
  box-shadow: var(--segment-shadow);
}
html:is(:root, #zr):is(:root, #zr) .admin-tab-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .admin-tab-badge.is-danger {
  background: var(--danger);
  color: var(--surface);
}
html:is(:root, #zr):is(:root, #zr) .admin-tab-badge[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-panel[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--success-tint);
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) .admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
html:is(:root, #zr):is(:root, #zr) .admin-card-actions > .admin-muted {
  margin-right: auto;
}
html:is(:root, #zr):is(:root, #zr) .admin-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .admin-card-tools > button {
  min-height: 32px;
}
html:is(:root, #zr):is(:root, #zr) .admin-foot {
  margin: 12px 0 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-card > p {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-danger-text {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-list-wide {
  grid-template-columns: minmax(180px, auto) 1fr;
}

/* Protokoll */
html:is(:root, #zr):is(:root, #zr) .admin-log {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-log-entry {
  --tone: var(--line-strong);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-sm);
}
html:is(:root, #zr):is(:root, #zr) .admin-log-entry.is-error {
  --tone: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .admin-log-entry.is-warning {
  --tone: var(--warning);
}
html:is(:root, #zr):is(:root, #zr) .admin-log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
html:is(:root, #zr):is(:root, #zr) .admin-log-entry p {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
html:is(:root, #zr):is(:root, #zr) .admin-log-detail {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Sicherungen */
html:is(:root, #zr):is(:root, #zr) .admin-backups > p {
  margin-bottom: 14px;
}
html:is(:root, #zr):is(:root, #zr) .admin-backup-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .admin-backup-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .admin-backup-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .admin-backup-list button {
  min-height: 32px;
}

@media (max-width: 640px) {
  /* Die Reiter stehen kompakt in drei gleich breiten Spalten. */
  html:is(:root, #zr):is(:root, #zr) .admin-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html:is(:root, #zr):is(:root, #zr) .admin-tabs .admin-tab {
    gap: 4px;
    padding: 0 4px;
    font-size: 13px;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-title h1 {
    font-size: 24px;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-card {
    padding: 16px;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-card-actions > button {
    flex: 1 1 auto;
  }
  /* Status und Knöpfe eines Kontos unter Name und Zahlen. */
  html:is(:root, #zr):is(:root, #zr) .admin-account {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-account-side {
    grid-column: 2;
    justify-content: flex-start;
  }
  /* Werte stehen unter dem Namen statt daneben. */
  html:is(:root, #zr):is(:root, #zr) .admin-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }
  html:is(:root, #zr):is(:root, #zr) .admin-row-value {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-list-wide {
    grid-template-columns: 1fr;
  }
  /* Konten: Suche, darunter Filter und Sortierung nebeneinander, darunter der Knopf, jeweils volle Breite. */
  html:is(:root, #zr):is(:root, #zr) .admin-accounts .admin-card-tools {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html:is(:root, #zr):is(:root, #zr) .admin-accounts .admin-card-tools > :is(input, button) {
    grid-column: 1 / -1;
    max-width: none;
  }
  html:is(:root, #zr):is(:root, #zr) .admin-accounts .admin-sort select {
    width: 100%;
  }
}

/* Sehr schmal (z. B. geteilte Ansicht): Reiter in zwei Spalten, damit Name und Zähler nebeneinander passen. */
@media (max-width: 380px) {
  html:is(:root, #zr):is(:root, #zr) .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 37. Termine aus Google & Co. übernehmen (calendar-takeover-ui.js) ---------- */
/* Kopf (Titel, Fortschritt mit Zurück/Weiter) und Knopfleiste bleiben stehen; nur der Inhalt scrollt. */
html:is(:root, #zr):is(:root, #zr) .takeover-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: 90dvh;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog > :not(.dialog-body) {
  flex: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .dialog-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}
/* Spalten nie breiter als der Dialog: lange Titel kürzen sich, statt seitlich zu scrollen. */
html:is(:root, #zr):is(:root, #zr)
  .takeover-dialog
  :is(.takeover-summary, .takeover-categories, .takeover-category-rows) {
  grid-template-columns: minmax(0, 1fr);
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .takeover-category {
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .dialog-body > p {
  margin: 0;
}
/* Art des Kalenders (Privat / Arbeit) oben im ersten Schritt. */
html:is(:root, #zr):is(:root, #zr) .takeover-purpose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-purpose[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-purpose > span {
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .takeover-purpose > .sub {
  flex: 1 1 100%;
  margin: 0;
}
/* Der Zeitraum wird automatisch bestimmt; vergangene Termine lassen sich zuschalten. */
html:is(:root, #zr):is(:root, #zr) .takeover-past {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--tint);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview > .takeover-status {
  font-size: 15px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .takeover-past[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-groups {
  display: grid;
  gap: 10px;
}
/* Ein Schritt je Gruppe, ohne eigenen Kasten: Hinweis und „Alle“ oben, darunter Einstellungen und Zeilen. */
html:is(:root, #zr):is(:root, #zr) .takeover-group {
  display: grid;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-group[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-group-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-group-head > p {
  flex: 1;
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-group-head > .takeover-all {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-settings label {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 180px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-rows {
  display: grid;
  gap: 2px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .takeover-row > span {
  display: grid;
  flex: 1;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-row :is(b, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .takeover-row small {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-row > select {
  flex: 0 0 auto;
  width: auto;
  padding-right: 34px;
}
/* Assistent: Fortschritt oben, je Schritt eine Gruppe, am Ende die Zusammenfassung. */
html:is(:root, #zr):is(:root, #zr) .takeover-progress {
  display: grid;
  gap: 6px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
}
/* Links Schrittname und „Schritt x von y“, rechts Zurück und Weiter – oben, damit man nicht scrollen muss. */
html:is(:root, #zr):is(:root, #zr) .takeover-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-progress-head > div:first-child {
  display: grid;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-progress-head small {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-nav {
  display: flex;
  flex: none;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-nav > button {
  min-height: 0;
  height: 34px;
  padding: 0 14px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .takeover-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease;
}
html:is(:root, #zr):is(:root, #zr) :is(.takeover-auto, .takeover-overview, .takeover-summary) {
  display: grid;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr)
  :is(.takeover-auto, .takeover-overview, .takeover-summary, .takeover-progress)[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) :is(.takeover-auto, .takeover-overview, .takeover-summary) p {
  margin: 0;
}
/* Standard-Übernahme: eine Kopfzeile und höchstens drei Statuszeilen mit Symbol, wie bei einer Installation. */
html:is(:root, #zr):is(:root, #zr) .takeover-auto .takeover-status {
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .takeover-auto-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-auto-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  line-height: 1.45;
}
html:is(:root, #zr):is(:root, #zr) .takeover-auto-list > li > .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .takeover-auto-list .takeover-error {
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview-list > li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview-list > li > .ui-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview-list > li > b {
  margin-left: auto;
}
html:is(:root, #zr):is(:root, #zr) .takeover-overview-list small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-summary ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-summary .takeover-error {
  color: var(--danger);
}
/* Letzter Schritt: je Kategorie ein Aufklapper mit den Terminen; je Titel eine Auswahl. */
html:is(:root, #zr):is(:root, #zr) .takeover-categories-head {
  margin: 8px 0 0;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-categories {
  display: grid;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category {
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) .takeover-category > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category > summary::-webkit-details-marker {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category > summary > b {
  margin-left: auto;
}
/* Geratene Zuordnungen stehen oben, aufgeklappt und hervorgehoben. */
html:is(:root, #zr):is(:root, #zr) .takeover-category-unsure {
  border: 1px solid var(--accent);
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-unsure > summary > .ui-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-unsure .takeover-category-rows > p {
  margin: 0 0 6px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-rows {
  display: grid;
  gap: 2px;
  padding: 0 10px 10px;
}
/* Eine Zeile je Titel: Titel links (lange Titel enden mit „…“, ganz im Tooltip), Auswahl rechts in fester Breite. */
html:is(:root, #zr):is(:root, #zr) .takeover-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-row > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-row small {
  color: var(--muted);
}
/* „Termine prüfen“: unter dem Titel bisherige Kategorie und Vorschlag (hervorgehoben). */
html:is(:root, #zr):is(:root, #zr) .takeover-category-row small.takeover-review-hint {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-review-hint b {
  color: var(--accent);
  font-weight: 600;
}
/* Neuer Termin: Hinweis unter dem Titel, welche Werte von früheren Terminen übernommen wurden (usage-learning.js). */
html:is(:root, #zr):is(:root, #zr) #meetingForm .learned-hint {
  margin: -4px 0 8px;
  color: var(--accent);
  font-size: 12px;
}
/* „Alles geprüft – nichts gefunden“ / „Alles übernommen“ (calendar-takeover-ui.js, cleanNotice): Häkchen im
   getönten Kreis, Titel, eine Zeile Text – mittig statt einer leeren Liste. */
html:is(:root, #zr):is(:root, #zr) .review-clean {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}
html:is(:root, #zr):is(:root, #zr) .review-clean-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
}
html:is(:root, #zr):is(:root, #zr) .review-clean-icon > .ui-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}
html:is(:root, #zr):is(:root, #zr) .review-clean > b {
  font-size: 16px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .review-clean > p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-auto-list > .review-clean-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
/* Ja / Nein zu einem Vorschlag: zwei kleine Knöpfe; die gewählte Antwort ist gefüllt (Ja Akzent, Nein neutral). */
html:is(:root, #zr):is(:root, #zr) .review-vote {
  display: flex;
  flex: none;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .review-vote button {
  min-width: 58px;
  min-height: var(--button-h);
  padding: 0 12px;
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .review-vote button[data-review-vote='yes'][aria-pressed='true'] {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr) .takeover-dialog .review-vote button[data-review-vote='no'][aria-pressed='true'] {
  border-color: var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
html:is(:root, #zr):is(:root, #zr) .takeover-category-row select {
  flex: none;
  width: 200px;
  max-width: 50%;
  min-height: 0;
  margin: 0;
  font-size: 13px;
}
/* Knopfleiste mit Abstand zum Rand, auch wenn der Dialog auf dem Handy die volle Breite hat. */
html:is(:root, #zr):is(:root, #zr) .takeover-dialog > .takeover-actions {
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
/* Zeile mit Auswahlhaken und optionalem Ziel-Vorschlag darunter. */
html:is(:root, #zr):is(:root, #zr) .takeover-row:has(> .takeover-take) {
  flex-wrap: wrap;
}
html:is(:root, #zr):is(:root, #zr) .takeover-take {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-take > span {
  display: grid;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-goal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 28px;
  color: var(--muted);
  font-size: 12px;
}
/* Gleichnamige Termine als eine Zeile; die einzelnen Daten klappen darunter auf. */
html:is(:root, #zr):is(:root, #zr) .takeover-bundle {
  flex-wrap: wrap;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bundle > span {
  flex: 1 1 200px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dates {
  flex: 1 1 100%;
  margin-left: 28px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-dates > summary {
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bundle-items {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bundle-items > label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bundle-items > label > span {
  flex: 1;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-bundle-items select {
  width: auto;
}
@media (max-width: 480px) {
  html:is(:root, #zr):is(:root, #zr) .takeover-row:has(> select) {
    flex-wrap: wrap;
  }
  html:is(:root, #zr):is(:root, #zr) .takeover-row > select {
    flex: 1 1 100%;
  }
}
/* Hinweise auf Änderungen in Google, auch in „Automatisch planen“. */
html:is(:root, #zr):is(:root, #zr) .takeover-notices {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .takeover-notices[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .takeover-notices > p {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-notice > span:first-child {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .takeover-notice small {
  color: var(--muted);
  font-size: 12px;
}
html:is(:root, #zr):is(:root, #zr) .takeover-notice-actions {
  display: flex;
  gap: 6px;
}

/* ---------- 38. Support (messages.js): Einstellungen → Support mit Chatverlauf; Mitteilungen stehen unter Benachrichtigungen ---------- */
html:is(:root, #zr):is(:root, #zr) main .msg-card {
  max-width: 760px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shade);
}
/* "Datenschutz & Hinweise" sits below the contact card in the Support tab (messages.js), just as wide. */
html:is(:root, #zr):is(:root, #zr) main .support-pane > .settings-legal-card {
  max-width: 760px;
  margin-top: 16px;
}
html:is(:root, #zr):is(:root, #zr) .msg-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .msg-card-head h2 {
  margin: 0;
  font-size: 17px;
}
html:is(:root, #zr):is(:root, #zr) .msg-muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .msg-subhead {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .msg-threads {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:is(:root, #zr):is(:root, #zr) .msg-empty {
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .msg-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
html:is(:root, #zr):is(:root, #zr) .msg-pill {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
}
html:is(:root, #zr):is(:root, #zr) .msg-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .msg-kinds[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .msg-kind {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 4px;
  height: auto;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) main .msg-kind:hover {
  border-color: var(--accent);
  background: var(--tint);
}
html:is(:root, #zr):is(:root, #zr) .msg-kind-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .msg-kind-icon .ui-icon {
  width: 20px;
  height: 20px;
}
html:is(:root, #zr):is(:root, #zr) .msg-form {
  display: grid;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) .msg-form[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .msg-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .msg-error:empty {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) main .msg-thread {
  display: grid;
  justify-items: start;
  gap: 4px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) main .msg-thread:hover {
  background: var(--surface-raised);
}
html:is(:root, #zr):is(:root, #zr) main .msg-thread.is-unread {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
html:is(:root, #zr):is(:root, #zr) :is(.msg-tag, .msg-status) {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .msg-tag.is-bug {
  background: var(--danger-tint);
  color: var(--danger);
}
html:is(:root, #zr):is(:root, #zr) .msg-tag.is-idea {
  background: var(--tint);
  color: var(--accent-strong);
}
html:is(:root, #zr):is(:root, #zr) .msg-tag.is-support,
html:is(:root, #zr):is(:root, #zr) .msg-status.is-closed {
  background: var(--success-tint);
  color: var(--success);
}
html:is(:root, #zr):is(:root, #zr) .msg-dialog {
  width: min(560px, calc(100vw - 32px));
}
html:is(:root, #zr):is(:root, #zr) .msg-bubbles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(50vh, 420px);
  margin: 10px 0;
  padding: 12px;
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--paper);
}
html:is(:root, #zr):is(:root, #zr) .msg-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shade);
}
html:is(:root, #zr):is(:root, #zr) .msg-bubble.is-other {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
html:is(:root, #zr):is(:root, #zr) .msg-bubble.is-own {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--accent-fill);
  color: var(--accent-ink);
}
html:is(:root, #zr):is(:root, #zr) .msg-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
html:is(:root, #zr):is(:root, #zr) .msg-bubble-meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.75;
}
html:is(:root, #zr):is(:root, #zr) .msg-reply {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) dialog .msg-reply textarea {
  flex: 1;
  min-height: 44px;
}
html:is(:root, #zr):is(:root, #zr) dialog .msg-reply button.primary {
  width: 44px;
  min-height: 44px;
  padding: 0;
}
html:is(:root, #zr):is(:root, #zr) .msg-reply .ui-icon {
  width: 18px;
  height: 18px;
}

/* ---------- 39. Export (client/calendar-export.js): Auswahl, Prüfung des Zielkalenders, Hinweise ---------- */
html:is(:root, #zr):is(:root, #zr) .export-dialog {
  width: min(600px, calc(100vw - 24px));
}
html:is(:root, #zr):is(:root, #zr) .export-dialog form {
  display: grid;
  gap: 12px;
}
html:is(:root, #zr):is(:root, #zr) .export-dialog form > p {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .export-options {
  display: grid;
  gap: 10px;
}
html:is(:root, #zr):is(:root, #zr) .export-options[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .export-block {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
html:is(:root, #zr):is(:root, #zr) .export-block > legend {
  padding: 0 4px;
  font-weight: 600;
}
html:is(:root, #zr):is(:root, #zr) .export-block .sub,
html:is(:root, #zr):is(:root, #zr) .export-block .field {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .export-block .form-row[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .export-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
html:is(:root, #zr):is(:root, #zr) .export-choice small,
html:is(:root, #zr):is(:root, #zr) .export-chip small {
  color: var(--muted);
}
html:is(:root, #zr):is(:root, #zr) .export-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html:is(:root, #zr):is(:root, #zr) .export-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .export-chip > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
html:is(:root, #zr):is(:root, #zr) .export-summary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 13px;
}
html:is(:root, #zr):is(:root, #zr) .export-summary:empty {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .export-summary p {
  margin: 0;
}
html:is(:root, #zr):is(:root, #zr) .export-details[hidden] {
  display: none;
}
html:is(:root, #zr):is(:root, #zr) .export-details > summary {
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .export-skipped {
  display: grid;
  max-height: 260px;
  overflow: auto;
}
html:is(:root, #zr):is(:root, #zr) .export-skip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .export-skip-row > span {
  display: grid;
  min-width: 0;
}
html:is(:root, #zr):is(:root, #zr) .export-skip-row small {
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 40. Einstellungen neu geordnet (settings-layout.js): Konto & Profil, eigener Reiter „Kalender & Daten“ ---------- */
html:is(:root, #zr):is(:root, #zr) .settings-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
html:is(:root, #zr):is(:root, #zr) .settings-legal-card > h3 {
  margin-top: 0;
}
html:is(:root, #zr):is(:root, #zr) .settings-calendars-grid {
  align-items: start;
}
/* Verbindungsformulare: zugeklappt, sobald ein Kalender verbunden ist (external-calendars.js). */
html:is(:root, #zr):is(:root, #zr) .external-connect {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
html:is(:root, #zr):is(:root, #zr) .external-connect > summary {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
html:is(:root, #zr):is(:root, #zr) .external-connect[open] > summary {
  margin-bottom: 4px;
}
/* Export, Import & Speicherung: Knöpfe nebeneinander, beim Umbrechen mit gleichem Abstand untereinander. */
html:is(:root, #zr):is(:root, #zr) .settings-data-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
html:is(:root, #zr):is(:root, #zr) .settings-data-card > :is(h3, .cloud-panel) {
  flex: 1 0 100%;
}

/* ---------- Installierte App ohne Titelleiste (manifest: window-controls-overlay) ----------
   Die App reicht bis an den oberen Fensterrand; nur Minimieren/Maximieren/Schließen schweben oben rechts.
   Der Streifen dahinter bleibt zum Verschieben des Fensters greifbar, Inhalt und Seitenleiste beginnen darunter. */
@media (display-mode: window-controls-overlay) {
  html:is(:root, #zr):is(:root, #zr) body::before {
    content: '';
    position: fixed;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 0);
    z-index: 90;
    app-region: drag;
    -webkit-app-region: drag;
  }
  html:is(:root, #zr):is(:root, #zr) body > aside {
    padding-top: calc(23px + env(titlebar-area-height, 0px));
  }
  html:is(:root, #zr):is(:root, #zr) body > main {
    padding-top: calc(24px + env(titlebar-area-height, 0px));
  }
}