:root {
  --mmh-rot: #c04b48;
  --mmh-rot-dunkel: #a63d3a;
  --mmh-nacht: #242129;
  --mmh-text: #3c3a47;
  --mmh-text-hell: #6c6a78;
  --mmh-linie: #e5e1de;
  --mmh-flaeche: #f7f5f3;
  --mmh-weiss: #ffffff;
  --mmh-radius: 12px;
}

body,
button,
input,
optgroup,
select,
textarea,
.popover {
  font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

a {
  color: var(--mmh-rot);
}

a:hover {
  color: var(--mmh-rot-dunkel);
}

.btn-primary,
.floating-action-buttons a.button {
  background-color: var(--mmh-rot);
  border-color: var(--mmh-rot);
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
  background-color: var(--mmh-rot-dunkel);
  border-color: var(--mmh-rot-dunkel);
}

.form-control,
.custom-select,
.btn,
.popover,
.ui-dialog {
  border-radius: 8px;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--mmh-rot);
  box-shadow: 0 0 0 3px rgba(192, 75, 72, 0.14);
}

html:not(.dark-mode) #layout-menu {
  background: var(--mmh-nacht);
}

html:not(.dark-mode) #layout > div > .header {
  color: var(--mmh-text);
  background: #fbfaf9;
  border-color: var(--mmh-linie);
}

html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-content {
  border-color: var(--mmh-linie);
}

html:not(.dark-mode) .listing li,
html:not(.dark-mode) .listing tbody td {
  border-color: #efedeb;
}

html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing tr.selected td {
  color: var(--mmh-rot);
  background: #f9eceb;
}

html:not(.dark-mode) .folderlist li.mailbox .unreadcount {
  color: var(--mmh-weiss);
  background: var(--mmh-rot);
}

html:not(.dark-mode) .messagelist tr.unread {
  background: #fffaf9;
}

html:not(.dark-mode) .messagelist tr:hover td,
html:not(.dark-mode) .listing li:hover {
  background: #faf8f7;
}

html:not(.dark-mode) .message-partheaders,
html:not(.dark-mode) .attachmentslist {
  border: 0;
  border-radius: var(--mmh-radius);
  background: var(--mmh-flaeche);
}

#taskmenu a.selected,
.menu.toolbar a.selected {
  color: #fff;
  background: rgba(192, 75, 72, 0.42);
}

.floating-action-buttons a.button {
  box-shadow: 0 10px 24px rgba(166, 61, 58, 0.28);
}

body.task-login {
  color: var(--mmh-text);
  background:
    radial-gradient(circle at 15% 10%, rgba(192, 75, 72, 0.18), transparent 32rem),
    radial-gradient(circle at 85% 90%, rgba(64, 91, 86, 0.14), transparent 30rem),
    var(--mmh-flaeche);
}

.task-login #layout {
  min-height: 100%;
  overflow: auto;
}

.task-login #layout-content {
  min-height: 100%;
  padding: 4rem 1.25rem 3rem;
  box-sizing: border-box;
}

.task-login .anmeldung-marke {
  margin: 0 auto 1.25rem;
}

.task-login #logo {
  position: static;
  width: 118px;
  height: 118px;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(36, 33, 41, 0.14));
}

.task-login #login-form {
  position: static;
  width: min(100%, 430px);
  max-width: none;
  margin: 0 auto;
  padding: 2rem;
  text-align: left;
  border: 1px solid rgba(229, 225, 222, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 55px rgba(36, 33, 41, 0.12);
}

.anmeldung-kopf {
  margin-bottom: 1.5rem;
  text-align: center;
}

.anmeldung-kopf h2 {
  margin: 0 0 0.45rem;
  color: var(--mmh-nacht);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.anmeldung-kopf p {
  margin: 0;
  color: var(--mmh-text-hell);
  font-size: 0.95rem;
  line-height: 1.55;
}

.task-login #login-form .row {
  margin-bottom: 1rem;
}

.task-login #login-form label {
  margin-bottom: 0.4rem;
  color: var(--mmh-text);
  font-weight: 650;
}

.task-login #login-form .form-control {
  min-height: 48px;
  border: 1px solid #d6d1ce;
  background: var(--mmh-weiss);
}

.task-login #rcmloginsubmit {
  min-height: 48px;
  margin-top: 0.35rem;
  border: 0;
  border-radius: 10px;
  font-weight: 700;
}

.task-login #login-footer {
  display: block;
  margin-top: 1.15rem;
  color: var(--mmh-text-hell);
  text-align: center;
  font-size: 0.82rem;
}

.task-login #login-footer > div {
  margin: 0;
  padding: 0;
  background: transparent;
}

html.dark-mode .btn-primary,
html.dark-mode .floating-action-buttons a.button {
  background: var(--mmh-rot);
}

html.dark-mode #taskmenu a.selected,
html.dark-mode .menu.toolbar a.selected {
  color: #fff;
  background: rgba(192, 75, 72, 0.42);
}

@media screen and (max-width: 520px) {
  .task-login #layout-content {
    padding: 2rem 1rem;
  }

  .task-login #logo {
    width: 96px;
    height: 96px;
  }

  .task-login #login-form {
    padding: 1.5rem 1.2rem;
    border-radius: 14px;
  }
}