:root {
  --hd-bg: #1F1E1D; --hd-surface: #262624; --hd-line: #3E3D3A;
  --hd-text: #F5F4EF; --hd-muted: #A8A59C;
  --hd-accent: #D97757; --hd-accent-h: #C4663F;
}
body.task-login {
  background: var(--hd-bg) !important;
  color: var(--hd-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
body.task-login #layout,
body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content { text-align: center; }
body.task-login #login-form { max-width: 420px; margin: 0 auto; }

#hd-hero {
  display: block; margin: 0 auto .5rem;
  width: min(300px, 70vw); height: auto;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 45%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000 45%, transparent 72%);
}
#hd-hero.hd-eagle {
  width: min(180px, 45vw); margin-bottom: 1.5rem;
  -webkit-mask-image: none; mask-image: none;
}
.hd-title {
  margin: 0 0 .6rem; color: var(--hd-text);
  font-size: clamp(1.9rem, 5.5vw, 3.1rem); font-weight: 700; letter-spacing: .06em;
}
.hd-claim {
  margin: 0 0 2.4rem; color: var(--hd-muted);
  font-size: clamp(.75rem, 2.4vw, .95rem); letter-spacing: .22em; text-transform: uppercase;
}
.hd-claim b { color: var(--hd-accent); font-weight: 400; }

body.task-login #login-form .input-group-text {
  background: var(--hd-surface) !important; border-color: var(--hd-line) !important;
  color: var(--hd-muted) !important;
}
body.task-login #login-form .form-control {
  background: var(--hd-surface) !important; border-color: var(--hd-line) !important;
  color: var(--hd-text) !important;
}
body.task-login #login-form .form-control:focus { border-color: var(--hd-accent) !important; box-shadow: none !important; }
body.task-login #login-form input:-webkit-autofill,
body.task-login #login-form input:autofill {
  box-shadow: 0 0 0 1000px var(--hd-surface) inset !important;
  -webkit-text-fill-color: var(--hd-text) !important;
}
body.task-login #rcmloginsubmit {
  background: var(--hd-accent) !important; border: none !important;
  border-radius: 10px !important; font-weight: 600; letter-spacing: .08em;
}
body.task-login #rcmloginsubmit:hover { background: var(--hd-accent-h) !important; }
body.task-login #login-footer { color: #6E6B64 !important; margin-top: 3rem; }

/* Kopf und Formular gemeinsam zentrieren */
body.task-login #layout-content {
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  min-height: 100vh; padding: 2rem 1.25rem !important;
}
body.task-login #login-form { flex: 0 0 auto !important; margin: 0 auto !important; width: 100%; }
.hd-footer { color: #6E6B64; font-size: .78rem; letter-spacing: .04em; }

/* ===== Kopf, Formular und Fusszeile als Einheit ===== */
body.task-login #login-form { text-align: center; max-width: 420px !important; margin: 0 auto !important; }
body.task-login #login-form table { width: 100%; margin: 0 !important; text-align: left; }
.hd-head { margin-bottom: .5rem; }
.hd-footer { display: block; margin-top: 2.5rem !important; }

/* ===== Block oben verankern, alles auf einen Bildschirm ===== */
body.task-login #layout-content {
  justify-content: flex-start !important;
  padding-top: 5vh !important;
  margin-top: 0 !important;
}
#hd-hero { width: min(260px, 60vw) !important; }
.hd-claim { margin-bottom: 1.8rem !important; }
.hd-footer { margin-top: 2rem !important; }

/* Adler als Siegel ueber Heimdallr */
.hd-seal { display: block; width: 72px; height: auto; margin: 0 auto 1.2rem; opacity: .85; }

/* Adler gross wie zuvor, Heimdallr etwas kompakter */
.hd-seal { width: min(180px, 45vw) !important; margin-bottom: 1.5rem !important; opacity: 1 !important; }
#hd-hero { width: min(230px, 55vw) !important; }

/* Heimdallr freigestellt wie Odin */
#hd-hero {
  width: min(240px, 55vw) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.6));
}

/* ===== Proportionen wie ODIN ===== */
body.task-login #layout-content { justify-content: center !important; padding-top: 2rem !important; }
.hd-head { margin-bottom: 0 !important; }
#hd-hero {
  width: min(260px, 60vw) !important; margin: 0 auto 1.5rem !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%) !important;
}
.hd-claim { margin-bottom: 2.6rem !important; font-size: clamp(.8rem, 2.4vw, 1rem) !important; }
.hd-seal { width: 64px !important; margin: 3rem auto .9rem !important; opacity: .75 !important; }
.hd-footer { margin-top: 0 !important; font-size: .78rem; }

/* ===== Block oben verankern wie gestern ===== */
body.task-login #layout-content { justify-content: flex-start !important; padding-top: 6vh !important; }

/* ===== Elastic-Versatz aufheben, mittig wie ODIN ===== */
body.task-login #login-form { top: 0 !important; }
body.task-login #layout-content { justify-content: center !important; padding-top: 2rem !important; }

/* ===================================================== */
/* ===== INNENBEREICH (nach Login) – Heimdallr-CI  ===== */
/* ===================================================== */

/* --- Hauptmenue links: immer dunkel, Adler bleibt --- */
body:not(.task-login) #layout-menu {
  background: var(--hd-bg) !important;
  border-right: 1px solid var(--hd-line) !important;
}
body:not(.task-login) #layout-menu a { color: var(--hd-muted) !important; }
body:not(.task-login) #layout-menu a:hover {
  color: var(--hd-text) !important;
  background: var(--hd-surface) !important;
}
body:not(.task-login) #layout-menu a.selected {
  color: var(--hd-accent) !important;
  background: var(--hd-surface) !important;
  box-shadow: inset 3px 0 0 var(--hd-accent);
}
body:not(.task-login) #layout-menu a.compose { color: var(--hd-accent) !important; }
body:not(.task-login) #layout-menu a.logout { color: #E5534B !important; }

/* --- "Ueber" ausblenden --- */
#layout-menu a.about { display: none !important; }

/* --- Ordnerleiste / Einstellungsleiste: immer dunkel --- */
body:not(.task-login) #layout-sidebar {
  background: var(--hd-surface) !important;
  border-right: 1px solid var(--hd-line) !important;
  color: var(--hd-text) !important;
}
body:not(.task-login) #layout-sidebar .header {
  background: var(--hd-surface) !important;
  color: var(--hd-text) !important;
  border-bottom: 1px solid var(--hd-line) !important;
}
body:not(.task-login) #layout-sidebar .listing li,
body:not(.task-login) #layout-sidebar .listing li a {
  color: var(--hd-text) !important;
  border-color: var(--hd-line) !important;
  background: transparent;
}
body:not(.task-login) #layout-sidebar .listing li a:hover { background: var(--hd-bg) !important; }
body:not(.task-login) #layout-sidebar .listing li.selected,
body:not(.task-login) #layout-sidebar .listing li.selected > a {
  background: var(--hd-bg) !important;
  color: var(--hd-accent) !important;
}
body:not(.task-login) #layout-sidebar .listing li.selected > a { box-shadow: inset 3px 0 0 var(--hd-accent); }
body:not(.task-login) #layout-sidebar .unreadcount {
  background: var(--hd-accent) !important;
  color: #fff !important;
}

/* --- Akzentfarbe Orange statt Elastic-Blau --- */
body:not(.task-login) .btn-primary,
body:not(.task-login) .btn.btn-primary,
body:not(.task-login) .ui-dialog .btn-primary {
  background: var(--hd-accent) !important;
  border-color: var(--hd-accent) !important;
  color: #fff !important;
}
body:not(.task-login) .btn-primary:hover,
body:not(.task-login) .btn.btn-primary:hover {
  background: var(--hd-accent-h) !important;
  border-color: var(--hd-accent-h) !important;
}
body:not(.task-login) #layout-list .listing li.selected,
body:not(.task-login) #layout-content .listing li.selected,
body:not(.task-login) table.records-table tr.selected td {
  background-color: rgba(217, 119, 87, .18) !important;
}
body:not(.task-login) #layout-list .listing li.selected > a,
body:not(.task-login) #layout-content .listing li.selected > a { color: var(--hd-accent) !important; }

/* --- Dunkelmodus: warmes Anthrazit statt Blaugrau --- */
html.dark-mode body:not(.task-login),
html.dark-mode body:not(.task-login) #layout-list,
html.dark-mode body:not(.task-login) #layout-content {
  background-color: var(--hd-bg) !important;
}
html.dark-mode body:not(.task-login) #layout-list .header,
html.dark-mode body:not(.task-login) #layout-content .header,
html.dark-mode body:not(.task-login) .ui-dialog,
html.dark-mode body:not(.task-login) .ui-dialog-titlebar,
html.dark-mode body:not(.task-login) .ui-dialog-buttonpane {
  background-color: var(--hd-surface) !important;
}
html.dark-mode body:not(.task-login) .listing li,
html.dark-mode body:not(.task-login) table.records-table td,
html.dark-mode body:not(.task-login) .header {
  border-color: var(--hd-line) !important;
}

/* ===== LOGIN: Eingabefelder dunkel halten (auch bei Fokus & Autofill) ===== */
body.task-login input.form-control,
body.task-login .input-group input {
  background: var(--hd-surface) !important;
  color: var(--hd-text) !important;
  border-color: var(--hd-line) !important;
}
body.task-login input.form-control:focus,
body.task-login .input-group input:focus {
  background: var(--hd-surface) !important;
  color: var(--hd-text) !important;
  border-color: var(--hd-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(217, 119, 87, .25) !important;
  outline: none !important;
}
/* Chrome / Edge / Safari: Autofill-Gelb ueberdecken */
body.task-login input:-webkit-autofill,
body.task-login input:-webkit-autofill:hover,
body.task-login input:-webkit-autofill:focus,
body.task-login input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--hd-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--hd-surface) inset !important;
  -webkit-text-fill-color: var(--hd-text) !important;
  caret-color: var(--hd-text);
  transition: background-color 9999s ease-out 0s;
}
body.task-login input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--hd-surface) inset, 0 0 0 .2rem rgba(217, 119, 87, .25) !important;
  box-shadow: 0 0 0 1000px var(--hd-surface) inset, 0 0 0 .2rem rgba(217, 119, 87, .25) !important;
}
/* Firefox: Autofill-Filter abschalten */
body.task-login input:autofill {
  filter: none !important;
  background: var(--hd-surface) !important;
  color: var(--hd-text) !important;
}

/* ===== FEINSCHLIFF INNENBEREICH ===== */
/* Schalter (Toggles) in Orange */
body:not(.task-login) input.custom-switch:checked,
body:not(.task-login) input[type=checkbox].form-check-input:checked,
body:not(.task-login) .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--hd-accent) !important;
  border-color: var(--hd-accent) !important;
}
/* Nebenbuttons mit orangem Rahmen */
body:not(.task-login) .btn-secondary {
  background: transparent !important;
  border-color: var(--hd-accent) !important;
  color: var(--hd-accent) !important;
}
body:not(.task-login) .btn-secondary:hover {
  background: var(--hd-accent) !important;
  color: #fff !important;
}

/* Fokus-Rahmen orange statt blau */
body:not(.task-login) .form-control:focus,
body:not(.task-login) .custom-select:focus,
body:not(.task-login) input:focus,
body:not(.task-login) select:focus,
body:not(.task-login) textarea:focus {
  border-color: var(--hd-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(217, 119, 87, .25) !important;
}
/* Kopfleisten als dunkler Rahmen */
body:not(.task-login) #layout-list > .header,
body:not(.task-login) #layout-content > .header {
  background: var(--hd-surface) !important;
  color: var(--hd-text) !important;
  border-bottom: 1px solid var(--hd-line) !important;
}
body:not(.task-login) #layout-list > .header a,
body:not(.task-login) #layout-content > .header a {
  color: var(--hd-muted) !important;
}
body:not(.task-login) #layout-list > .header a:hover,
body:not(.task-login) #layout-content > .header a:hover {
  color: var(--hd-accent) !important;
}

/* Suchfeld in der dunklen Kopfleiste */
body:not(.task-login) #layout-list > .header .searchbar input {
  background: var(--hd-bg) !important;
  color: var(--hd-text) !important;
  border-color: var(--hd-line) !important;
}
/* Untere Menueknoepfe: gleicher Hintergrund */
body:not(.task-login) #taskmenu,
body:not(.task-login) #taskmenu .special-buttons {
  background: var(--hd-bg) !important;
}
/* Markierungsstrich orange */
body:not(.task-login) .listing li.focused,
body:not(.task-login) .listing li.selected,
body:not(.task-login) table.records-table tr.focused td:first-child,
body:not(.task-login) table.records-table tr.selected td:first-child {
  border-left-color: var(--hd-accent) !important;
}
body:not(.task-login) .listing li.focused > a,
body:not(.task-login) table.records-table tr.focused td {
  outline-color: var(--hd-accent) !important;
}

/* Feld hinter dem Adler im Ton der Kopfleisten */
body:not(.task-login) #layout-menu .popover-header,
body:not(.task-login) #layout-menu > a.logo,
body:not(.task-login) #layout-menu .logo {
  background: var(--hd-surface) !important;
  border-bottom: 1px solid var(--hd-line) !important;
}

/* Fussleiste der Ordnerspalte im Rahmen-Ton */
body:not(.task-login) #layout-sidebar > .footer,
body:not(.task-login) #layout-sidebar .footer {
  background: var(--hd-surface) !important;
  color: var(--hd-muted) !important;
  border-top: 1px solid var(--hd-line) !important;
}
body:not(.task-login) #layout-sidebar .footer a { color: var(--hd-muted) !important; }
body:not(.task-login) #layout-sidebar .footer a:hover { color: var(--hd-accent) !important; }

/* Anhaenge in der dunklen Seitenspalte (Schreiben): Namen hell */
body:not(.task-login) #layout-sidebar .attachmentslist li,
body:not(.task-login) #layout-sidebar .attachmentslist li a.filename,
body:not(.task-login) #layout-sidebar .attachmentslist li .attachment-name {
  color: var(--hd-text) !important;
}
body:not(.task-login) #layout-sidebar .attachmentslist li .attachment-size {
  color: var(--hd-muted) !important;
}
/* Pfeil und Muelleimer bei Anhaengen orange */
body:not(.task-login) .attachmentslist li a.drop,
body:not(.task-login) .attachmentslist li a.delete,
body:not(.task-login) .attachmentslist li a.drop:before,
body:not(.task-login) .attachmentslist li a.delete:before {
  color: var(--hd-accent) !important;
}

/* Anhang-Pfeil (Dropdown) orange - breitere Regel */
body:not(.task-login) .attachmentslist li a:not(.filename),
body:not(.task-login) .attachmentslist li a:not(.filename)::before,
body:not(.task-login) .attachmentslist li a:not(.filename)::after {
  color: var(--hd-accent) !important;
  border-top-color: var(--hd-accent) !important;
}

/* Ausgewaehlte Zeile in Listen (z. B. Einstellungen) orange statt blau */
body:not(.task-login) table.records-table tr.selected td,
html.dark-mode body:not(.task-login) table.records-table tr.selected td {
  background-color: rgba(217, 119, 87, .18) !important;
  color: var(--hd-accent) !important;
}
body:not(.task-login) table.records-table tr.selected td a,
body:not(.task-login) table.records-table tr.selected td a::before,
html.dark-mode body:not(.task-login) table.records-table tr.selected td a,
html.dark-mode body:not(.task-login) table.records-table tr.selected td a::before {
  color: var(--hd-accent) !important;
}
/* Links in Einstellungen und Kontakten orange (nicht in Mails) */
body.iframe.task-settings a:not(.btn),
body.iframe.task-addressbook a:not(.btn) {
  color: var(--hd-accent) !important;
}

/* Ausgewaehlte Zeile in Listen (table.listing) orange */
body:not(.task-login) table.listing tr.selected td,
html.dark-mode body:not(.task-login) table.listing tr.selected td {
  background-color: rgba(217, 119, 87, .18) !important;
}
body:not(.task-login) table.listing tr.selected td,
body:not(.task-login) table.listing tr.selected td a,
body:not(.task-login) table.listing tr.selected td a::before,
html.dark-mode body:not(.task-login) table.listing tr.selected td a,
html.dark-mode body:not(.task-login) table.listing tr.selected td a::before {
  color: var(--hd-accent) !important;
}
/* Links im Einstellungsbereich orange */
body.task-settings .formcontent a:not(.btn),
body.task-settings #mailtoprotohandler,
body.task-addressbook .formcontent a:not(.btn) {
  color: var(--hd-accent) !important;
}

/* Empfaengerfeld (An/CC/BCC) beim Fokus orange statt blau */
body:not(.task-login) .form-control.focus,
body:not(.task-login) .recipient-input.focus,
body:not(.task-login) .recipient-input:focus-within {
  border-color: var(--hd-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(217, 119, 87, .25) !important;
}

/* Mail-Liste: Markierungsstrich und Status-Symbole orange */
body:not(.task-login) table.messagelist tr.focused td,
body:not(.task-login) table.messagelist tr.selected td,
body:not(.task-login) table.listing tr.focused td {
  border-left-color: var(--hd-accent) !important;
}
body:not(.task-login) table.messagelist tr.focused td:first-child,
body:not(.task-login) table.messagelist tr.selected td:first-child {
  box-shadow: inset 2px 0 0 var(--hd-accent) !important;
}
body:not(.task-login) table.messagelist .msgicon.replied,
body:not(.task-login) table.messagelist .msgicon.replied::before,
body:not(.task-login) table.messagelist .msgicon.forwarded,
body:not(.task-login) table.messagelist .msgicon.forwarded::before,
body:not(.task-login) table.messagelist tr.selected .msgicon::before {
  color: var(--hd-accent) !important;
}
/* 15.10.2026: Blau im Mailkopf -> CI-Orange */
#message-header a,
#message-header a:before {
 color:#D97757 !important;
}
#message-header a:hover {
 color:#C4663F !important;
}
/* 15.10.2026: Bildlaufleisten in CI-Farben */
body:not(.task-login),
body:not(.task-login) * {
 scrollbar-color:#D97757 #262624;
}
body:not(.task-login) ::-webkit-scrollbar-thumb {
 background-color:#D97757;
}
body:not(.task-login) ::-webkit-scrollbar-track {
 background-color:#262624;
}
/* 15.10.2026: Rahmen von Eingabefeldern ohne Blau */
body:not(.task-login) .form-control,
body:not(.task-login) .custom-select,
body:not(.task-login) select {
 border-color:#3E3D3A !important;
}
body:not(.task-login) .form-control:focus,
body:not(.task-login) .custom-select:focus,
body:not(.task-login) select:focus {
 border-color:#D97757 !important;
 box-shadow:0 0 0 .2rem rgba(217,119,87,.25) !important;
}
/* 15.10.2026: Schalter ohne Blau */
body:not(.task-login) input[type=checkbox] {
 border-color:#6E6B64 !important;
 box-shadow:none !important;
}
body:not(.task-login) input[type=checkbox]:checked {
 background-color:#D97757 !important;
 border-color:#D97757 !important;
}
html.dark-mode body:not(.task-login) .form-control {
 background-color:#262624 !important;
}
/* 15.10.2026: Fokusring und Systemfarbe ohne Blau */
body:not(.task-login) {
 accent-color:#D97757;
}
body:not(.task-login) input[type=checkbox]:focus {
 outline:2px solid rgba(217,119,87,.5) !important;
 outline-offset:1px;
}
html.dark-mode body:not(.task-login) input[type=checkbox]:not(:checked) {
 background-color:#3E3D3A !important;
}