/*
 * HD Raumwerk Mail – vertrauter Posteingangs-Aufbau über dem Elastic-Skin von Roundcube.
 * Suchleiste oben, „Schreiben“ und Ordner links, einzeilige Liste, Mail öffnet sich anstelle der Liste.
 * Wird nur auf mail.hd-raumwerk.de geladen. Claude für jagubjan.de, 12.11.2026.
 */

html.hd {
  --hd-bg: #f3f6f9;
  --hd-karte: #fff;
  --hd-text: #1f1f1f;
  --hd-grau: #444746;
  --hd-hell: #5f6368;
  --hd-linie: #e6eaee;
  --hd-suche: #e7edf3;
  --hd-akzent: #0b7476;
  --hd-akzent-dunkel: #085a5c;
  --hd-schreiben: #bfe7e8;
  --hd-aktiv: #d3eeee;
  --hd-gelesen: #f3f6f9;
  --hd-gewaehlt: #cfeaeb;
  --hd-stern: #f0a800;
  --hd-schatten: 0 1px 2px rgba(60, 64, 67, .28), 0 2px 6px 2px rgba(60, 64, 67, .14);
}

html.hd body { color: var(--hd-text); }
html.hd:not(.iframe) body { background: var(--hd-bg); }
html.hd a { color: var(--hd-akzent); }
html.hd .hd-nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.hd .btn-primary, html.hd button.btn-primary, html.hd a.btn-primary {
  background: var(--hd-akzent); border-color: var(--hd-akzent); color: #fff; border-radius: 20px; padding-left: 1.4em; padding-right: 1.4em;
}
html.hd .btn-primary:hover, html.hd .btn-primary:focus, html.hd .btn-primary:active { background: var(--hd-akzent-dunkel) !important; border-color: var(--hd-akzent-dunkel) !important; }
html.hd .btn-secondary { border-radius: 20px; }
html.hd #taskmenu a.theme, html.hd #taskmenu a.about { display: none !important; }

/* ================= Anmeldeseite ================= */
html.hd body.task-login, html.hd body.task-logout { background: var(--hd-bg); }
html.hd body.task-login #layout, html.hd body.task-logout #layout { background: none; }
html.hd body.task-login #layout-content, html.hd body.task-logout #layout-content {
  background: var(--hd-karte); max-width: 430px; width: calc(100% - 32px); height: auto; min-height: 0; flex: 0 0 auto;
  margin: 9vh auto auto; padding: 44px 40px 34px; border-radius: 28px; box-shadow: 0 1px 3px rgba(29, 42, 50, .12), 0 12px 40px -18px rgba(29, 42, 50, .35);
  display: block; overflow: visible;
}
html.hd body.task-login #logo, html.hd body.task-logout #logo { position: static; top: 0; width: 230px; max-width: 80%; height: auto; max-height: none; margin: 0 auto 6px; display: block; }
html.hd body.task-login #login-form { position: static; top: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
html.hd body.task-login #login-form td.input { display: flex; width: 100%; }
html.hd body.task-login #login-form .formbuttons { margin: 0; }
html.hd body.task-login #login-footer:empty { display: none; }
html.hd body.task-login #login-form::before {
  content: "Anmelden"; display: block; text-align: center; font-size: 24px; line-height: 1.3; margin: 18px 0 4px; color: var(--hd-text);
}
html.hd body.task-login #login-form::after { content: none; }
html.hd body.task-login #login-form table { width: 100%; margin-top: 22px; }
html.hd body.task-login #login-form tr { display: block; margin: 0 0 14px; }
html.hd body.task-login #login-form td { padding: 0; }
html.hd body.task-login #login-form .input-group-text { background: none; border: 1px solid #c4c9ce; border-right: 0; border-radius: 10px 0 0 10px; color: var(--hd-hell); height: 52px; padding: 0 0 0 16px; }
html.hd body.task-login #login-form input.form-control {
  height: 52px; border: 1px solid #c4c9ce; border-left: 0; border-radius: 0 10px 10px 0; font-size: 16px; padding-left: 12px; box-shadow: none;
}
html.hd body.task-login #login-form .input-group:focus-within .input-group-text,
html.hd body.task-login #login-form .input-group:focus-within input.form-control { border-color: var(--hd-akzent); }
html.hd body.task-login #login-form .input-group:focus-within { box-shadow: 0 0 0 1px var(--hd-akzent); border-radius: 10px; }
html.hd body.task-login #rcmloginsubmit { text-transform: none !important;
  height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: none; margin-top: 6px;
}
html.hd body.task-login #login-footer { margin-top: 18px; color: var(--hd-hell); font-size: 13px; text-align: center; }

/* ================= Kopfzeile (ab Tablet-Breite) ================= */
#hd-kopf { display: none; }

@media (min-width: 769px) {
  html.hd:not(.iframe):not(.hd-anmeldung) body { display: flex; flex-direction: column; }
  html.hd #hd-kopf {
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 64px; height: 64px; padding: 0 14px 0 18px; position: relative; z-index: 30;
  }
  html.hd #hd-kopf ~ #layout { flex: 1 1 auto; height: auto; min-height: 0; }
  html.hd #hd-kopf ~ #layout > #layout-menu { display: none !important; }
  html.hd #hd-logo { display: flex; align-items: center; gap: 10px; height: 44px; text-decoration: none; color: var(--hd-hell); font-size: 20px; }
  html.hd #hd-logo img { height: 38px; width: auto; display: block; }
  html.hd #hd-logo span { padding-top: 2px; }
  html.hd #hd-rechts { display: flex; align-items: center; gap: 4px; }
  html.hd .hd-rund {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--hd-grau); text-decoration: none;
  }
  html.hd .hd-rund::before { font-family: Icons; font-weight: 900; font-size: 19px; line-height: 1; }
  html.hd .hd-rund:hover, html.hd .hd-rund:focus-visible { background: rgba(60, 64, 67, .1); color: var(--hd-text); }
  html.hd .hd-rund.aktiv { color: var(--hd-akzent); }
  html.hd #hd-k-mail::before { content: "\f0e0"; }
  html.hd #hd-k-kontakte::before { content: "\f0c0"; }
  html.hd #hd-k-einst::before { content: "\f013"; }
  html.hd #hd-konto {
    width: 38px; height: 38px; margin-left: 8px; border: 0; border-radius: 50%; background: var(--hd-akzent); color: #fff; font-size: 17px; font-weight: 500; cursor: pointer; line-height: 38px; padding: 0;
  }
  html.hd #hd-konto:hover, html.hd #hd-konto:focus-visible { box-shadow: 0 0 0 4px rgba(60, 64, 67, .14); outline: 0; }
  html.hd #hd-konto-menue {
    position: absolute; top: 60px; right: 14px; width: 320px; padding: 22px 20px 18px; background: #eaf0f4; border-radius: 26px; box-shadow: var(--hd-schatten); text-align: center;
  }
  html.hd #hd-konto-menue[hidden] { display: none; }
  html.hd .hd-konto-bild { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--hd-akzent); color: #fff; font-size: 30px; line-height: 64px; }
  html.hd .hd-konto-name { font-size: 15px; color: var(--hd-text); overflow: hidden; text-overflow: ellipsis; margin-bottom: 16px; }
  html.hd .hd-abmelden { display: block; background: #fff; border-radius: 22px; height: 44px; line-height: 44px; color: var(--hd-text); text-decoration: none; font-weight: 500; }
  html.hd .hd-abmelden::before { font-family: Icons; font-weight: 900; content: "\f2f5"; margin-right: 10px; color: var(--hd-hell); }
  html.hd .hd-abmelden:hover { background: #f6f8fa; }

  /* Seiten außer dem Posteingang: das ganze Feld ist eine weiße Karte */
  html.hd #hd-kopf ~ #layout { width: auto; margin: 0 14px 14px 0; }
  html.hd:not(.hd-post) #hd-kopf ~ #layout { margin-left: 14px; background: var(--hd-karte); border-radius: 16px; overflow: hidden; }
  html.hd:not(.hd-post) #hd-kopf ~ #layout > div { border-color: var(--hd-linie); }
  html.hd:not(.hd-post) #hd-kopf ~ #layout > div > .header { background: none; border-color: var(--hd-linie); }
}

/* ================= Posteingang (ab Tablet-Breite) ================= */
@media (min-width: 769px) {
  html.hd-post #layout {
    display: grid;
    grid-template-columns: 256px auto minmax(0, 1fr) auto;
    grid-template-rows: 48px minmax(0, 1fr);
    position: relative;
  }
  html.hd-post #layout::before { content: ""; grid-area: 1 / 2 / 3 / 5; background: var(--hd-karte); border-radius: 16px; }
  html.hd-post #layout .column-resizer { display: none !important; }

  /* linke Spalte */
  html.hd-post #layout-sidebar {
    grid-area: 1 / 1 / 3 / 2; display: flex !important; flex-direction: column; width: auto !important; min-width: 0; max-width: none; background: none; border: 0;
  }
  html.hd-post #layout-sidebar > .header { display: none; }
  html.hd-post #layout-sidebar > .footer { background: none; border: 0; color: var(--hd-hell); padding: 0 16px; justify-content: flex-start; }
  html.hd-post #folderlist-content { background: none; }

  /* Liste und geöffnete Mail teilen sich dieselbe Karte */
  html.hd-post #layout-list, html.hd-post #layout-content { display: contents !important; }
  html.hd-post #messagelist-header { grid-area: 1 / 2 / 2 / 3; }
  html.hd-post #layout-content > .header { grid-area: 1 / 3 / 2 / 4; }
  html.hd-post #layout-list > .pagenav { grid-area: 1 / 4 / 2 / 5; }
  html.hd-post #messagelist-content { grid-area: 2 / 2 / 3 / 5; border-radius: 0 0 16px 16px; display: block !important; background: none; }
  html.hd-post #layout-content > .iframe-wrapper { grid-area: 2 / 2 / 3 / 5; display: none; border-radius: 0 0 16px 16px; overflow: hidden; background: #fff; }
  html.hd-post #layout-content > .footer { display: none !important; }

  html.hd-post #layout > div > .header, html.hd-post #layout-list > .pagenav {
    height: 48px; min-height: 48px; line-height: 48px; background: none; border: 0; padding: 0 6px; align-items: center; justify-content: flex-start; overflow: visible; font-weight: 400;
  }
  html.hd-post #messagelist-header { padding-left: 8px !important; }
  html.hd-post #messagelist-header > .task-menu-button,
  html.hd-post #messagelist-header > .back-sidebar-button,
  html.hd-post #messagelist-header > .header-title,
  html.hd-post #messagelist-header > .toolbar-menu-button,
  html.hd-post #messagelist-header > .toolbar-list-button,
  html.hd-post #layout-content > .header > .back-list-button,
  html.hd-post #layout-content > .header > .header-title,
  html.hd-post #layout-content > .header > .toolbar-menu-button { display: none !important; }

  /* geöffnete Mail statt Liste */
  html.hd-post.hd-lesen #messagelist-header,
  html.hd-post.hd-lesen #messagelist-content,
  html.hd-post.hd-lesen #layout-list > .pagenav { display: none !important; }
  html.hd-post.hd-lesen #layout-content > .header { grid-area: 1 / 2 / 2 / 5; padding-left: 8px; border-bottom: 1px solid var(--hd-linie); }
  html.hd-post.hd-lesen #layout-content > .iframe-wrapper { display: block; }
  html.hd-post #layout-content > .iframe-wrapper > iframe { width: 100%; height: 100%; border: 0; display: block; }

  /* Suchleiste oben in der Kopfzeile */
  html.hd-post .searchbar {
    position: fixed; top: 9px; left: 270px; width: min(720px, calc(100vw - 270px - 230px)); height: 46px; min-height: 46px; line-height: 46px;
    border: 0; border-radius: 24px; background: var(--hd-suche); z-index: 40; padding: 0 6px 0 4px; overflow: hidden;
  }
  html.hd-post .searchbar:focus-within { background: #fff; box-shadow: var(--hd-schatten); }
  html.hd-post .searchbar form::before { height: 46px; line-height: 46px; margin: 0 4px 0 16px; font-size: 17px; color: var(--hd-grau); }
  html.hd-post .searchbar input { height: 46px; font-size: 16px; background: none; color: var(--hd-text); padding-left: 10px; }
  html.hd-post .searchbar input::placeholder { color: var(--hd-grau); opacity: 1; }
  html.hd-post .searchbar a.button { width: 40px; height: 40px; border-radius: 50%; line-height: 40px; color: var(--hd-grau); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
  html.hd-post .searchbar a.button::before { margin: 0; }
  html.hd-post .searchbar a.button:hover { background: rgba(60, 64, 67, .1); }
  html.hd-post .searchbar a.button.search { display: none; }
  html.hd-post .searchbar:not(.active) a.button.reset { display: none; }
  html.hd-post #searchmenu:not(.hidden) {
    position: fixed; top: 60px; left: 270px; width: min(720px, calc(100vw - 270px - 230px)); max-height: calc(100vh - 90px); height: auto; z-index: 41;
    background: #fff; border-radius: 16px; box-shadow: var(--hd-schatten); padding: 8px 4px;
  }
}

/* ---------- Schreiben-Knopf und Ordner ---------- */
#hd-schreiben { display: none; }
@media (min-width: 769px) {
  html.hd-post #hd-schreiben {
    display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; flex: 0 0 auto; height: 56px; margin: 4px 0 14px 8px; padding: 0 24px 0 20px;
    border-radius: 16px; background: var(--hd-schreiben); color: #06393a; font-size: 14.5px; font-weight: 500; text-decoration: none; transition: box-shadow .15s;
  }
  html.hd-post #hd-schreiben::before { font-family: Icons; font-weight: 900; content: "\f303"; font-size: 17px; }
  html.hd-post #hd-schreiben:hover, html.hd-post #hd-schreiben:focus-visible { box-shadow: var(--hd-schatten); outline: 0; }

  html.hd-post #mailboxlist { background: none; border: 0; }
  html.hd-post #mailboxlist li.mailbox { border: 0; background: none; }
  html.hd-post #mailboxlist li.mailbox > a {
    display: flex; align-items: center; height: 34px; line-height: 34px; margin: 0 14px 1px 0; padding: 0 14px 0 24px; border: 0 !important; border-radius: 0 17px 17px 0;
    color: var(--hd-text); font-size: 14.5px; background: none; cursor: pointer; width: auto;
  }
  html.hd-post #mailboxlist li.mailbox > a::before { width: 22px; margin: 0 16px 0 0; font-size: 15px; color: var(--hd-grau); text-align: center; float: none; height: auto; line-height: inherit; }
  html.hd-post #mailboxlist li.mailbox > a:hover { background: rgba(60, 64, 67, .08); }
  html.hd-post #mailboxlist li.mailbox.selected > a { background: var(--hd-aktiv); font-weight: 600; color: #06393a; }
  html.hd-post #mailboxlist li.mailbox.selected > a::before { color: #06393a; }
  html.hd-post #mailboxlist li.mailbox.unread > a { font-weight: 700; }
  html.hd-post #mailboxlist li.mailbox .unreadcount {
    margin-left: auto; background: none; color: inherit; font-size: 12.5px; font-weight: inherit; padding: 0; min-width: 0; position: static; line-height: inherit; height: auto;
  }
  html.hd-post #mailboxlist li.mailbox ul { padding-left: 14px; }
}

/* ---------- Werkzeugleisten: runde Symbol-Knöpfe ---------- */
@media (min-width: 769px) {
  html.hd-post #layout > div > .header ul.menu.toolbar, html.hd-post #layout > div > .header .toolbar { display: flex; align-items: center; margin: 0; padding: 0; gap: 2px; background: none !important; float: none; height: 40px !important; min-height: 0; border: 0; overflow: visible; }
  html.hd-post #layout > div > .header ul.menu.toolbar > li { display: flex; align-items: center; margin: 0; padding: 0; width: auto; min-width: 0; height: 40px; line-height: 1; }
  html.hd-post #layout > div > .header ul.menu.toolbar > li:has(> a.threads), html.hd-post #layout > div > .header ul.menu.toolbar > li:has(> a.hidden-big), html.hd-post #layout > div > .header ul.menu.toolbar > li:has(> a.hidden) { display: none; }
  html.hd-post #layout > div > .header ul.menu.toolbar > li.spacer { width: 1px; height: 20px; background: var(--hd-linie); margin: 0 8px; flex: 0 0 1px; }
  html.hd-post #layout > div > .header ul.menu.toolbar a,
  html.hd-post #messagelist-header > a.refresh,
  html.hd-post #layout-list > .pagenav a {
    float: none; display: flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; max-width: none; height: 40px; padding: 0; margin: 0;
    border-radius: 50%; color: var(--hd-grau); line-height: 1; font-size: 14px; text-decoration: none; cursor: pointer; overflow: visible;
  }
  html.hd-post #layout > div > .header ul.menu.toolbar a::before,
  html.hd-post #messagelist-header > a.refresh::before,
  html.hd-post #layout-list > .pagenav a::before { margin: 0 !important; float: none; font-size: 16px; height: auto !important; width: auto; line-height: 1 !important; display: block; opacity: 1; }
  html.hd-post #layout > div > .header ul.menu.toolbar a > .inner,
  html.hd-post #messagelist-header > a.refresh > .inner,
  html.hd-post #layout-list > .pagenav a > .inner { display: none !important; }
  html.hd-post #layout > div > .header ul.menu.toolbar a:not(.disabled):hover,
  html.hd-post #messagelist-header > a.refresh:hover,
  html.hd-post #layout-list > .pagenav a:not(.disabled):hover { background: rgba(60, 64, 67, .1); color: var(--hd-text); }
  html.hd-post #layout > div > .header ul.menu.toolbar a.disabled, html.hd-post #layout-list > .pagenav a.disabled { opacity: .35; cursor: default; }
  html.hd-post #layout > div > .header ul.menu.toolbar .dropbutton { display: flex; align-items: center; border: 0; }
  html.hd-post #layout > div > .header ul.menu.toolbar .dropbutton a.dropdown { display: none; }
  html.hd-post #layout > div > .header ul.menu.toolbar a.hidden,
  html.hd-post #layout > div > .header ul.menu.toolbar a.hidden-big,
  html.hd-post #layout > div > .header ul.menu.toolbar a.threads { display: none !important; }
  
  /* in der Listenansicht: Aktionen nur, wenn etwas ausgewählt ist; Antworten gehört zur geöffneten Mail */
  html.hd-post:not(.hd-lesen) #toolbar-menu a.disabled,
  html.hd-post:not(.hd-lesen) #toolbar-menu .dropbutton,
  html.hd-post:not(.hd-lesen) #toolbar-menu a.reply,
  html.hd-post:not(.hd-lesen) #toolbar-menu li.spacer { display: none !important; }
  html.hd-post.hd-lesen #toolbar-menu li.spacer { order: 5; }
  html.hd-post.hd-lesen #toolbar-menu > li { order: 6; }
  html.hd-post.hd-lesen #toolbar-menu > li:nth-child(-n+4) { order: 9; }
  html.hd-post.hd-lesen #toolbar-menu > li:nth-child(5) { order: 8; }

  /* Blättern rechts oben */
  html.hd-post #layout-list > .pagenav { justify-content: flex-end; padding-right: 10px; gap: 2px; color: var(--hd-hell); font-size: 12.5px; }
  html.hd-post #layout-list > .pagenav .pagenav-text { order: 1; margin: 0 10px 0 0; font-weight: 400; font-size: 12.5px; color: var(--hd-hell); line-height: 48px; }
  html.hd-post #layout-list > .pagenav a.prevpage { order: 2; }
  html.hd-post #layout-list > .pagenav a.nextpage { order: 3; }
  html.hd-post #layout-list > .pagenav a.firstpage,
  html.hd-post #layout-list > .pagenav a.lastpage,
  html.hd-post #layout-list > .pagenav input { display: none; }
}

/* ---------- Mail-Liste: eine Zeile je Mail ---------- */
html.hd-post .messagelist td.flags .flag { visibility: visible !important; }
html.hd-post .messagelist span.flag > span::before { font-family: Icons; content: "\f005" !important; font-size: 15px; }
html.hd-post .messagelist span.flag > span.unflagged::before { font-weight: 400; color: #b9bec3; opacity: 1; display: inline-block; }
html.hd-post .messagelist span.flag > span.flagged::before { font-weight: 900; color: var(--hd-stern); }
html.hd-post .messagelist tr.flagged td,
html.hd-post .messagelist tr.flagged td.subject span.subject a,
html.hd-post .messagelist tr.flagged td.subject span.date,
html.hd-post .messagelist tr.flagged td.subject span.fromto { color: inherit; }
html.hd-post .messagelist tr.message td.subject span.subject a { color: var(--hd-text); }

@media (min-width: 769px) {
  html.hd-post #messagelist { display: block; width: 100%; border: 0; margin: 0; }
  html.hd-post #messagelist > tbody { display: block; }
  html.hd-post #messagelist > tbody > tr {
    display: grid; grid-template-columns: 46px 34px minmax(130px, 210px) minmax(0, 1fr) 30px 86px; align-items: center; height: 40px; position: relative;
    background: var(--hd-gelesen); border-bottom: 1px solid var(--hd-linie); cursor: pointer; color: var(--hd-grau);
  }
  html.hd-post #messagelist > tbody > tr > td { border: 0 !important; background: none !important; padding: 0; width: auto; height: auto; line-height: 40px; }
  html.hd-post #messagelist > tbody > tr > td.subject,
  html.hd-post #messagelist > tbody > tr > td.flags { display: contents; }
  html.hd-post #messagelist > tbody > tr > td.threads { display: none; }
  html.hd-post #messagelist > tbody > tr > td.selection { display: flex !important; align-items: center; justify-content: center; grid-area: 1 / 1; height: 40px; }
  html.hd-post #messagelist > tbody > tr > td.selection input { margin: 0; width: 17px; height: 17px; cursor: pointer; accent-color: var(--hd-akzent); }
  html.hd-post #messagelist span.flag { grid-area: 1 / 2; display: flex; align-items: center; justify-content: center; height: 40px; width: 34px; line-height: 1; }
  html.hd-post #messagelist span.flag > span { display: block; line-height: 1; }
  html.hd-post #messagelist td.subject span.fromto {
    grid-area: 1 / 3; padding: 0 16px 0 2px; font-size: 14px; color: var(--hd-text); line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
  }
  html.hd-post #messagelist td.subject span.subject {
    grid-area: 1 / 4; width: auto; font-size: 14px; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; font-weight: 400;
  }
  html.hd-post #messagelist td.subject span.subject a { cursor: pointer; }
  html.hd-post #messagelist td.subject span.msgicon { display: none; }
  html.hd-post #messagelist span.attachment { grid-area: 1 / 5; display: flex; align-items: center; justify-content: center; height: 40px; line-height: 1; color: var(--hd-hell); }
  html.hd-post #messagelist span.attachment > span { display: block; line-height: 1; height: auto; }
  html.hd-post #messagelist td.subject span.date {
    grid-area: 1 / 6; display: block !important; text-align: right; padding-right: 16px; font-size: 12.5px; line-height: 40px; color: var(--hd-grau); white-space: nowrap;
  }
  html.hd-post #messagelist td.subject span.size { display: none !important; }
  html.hd-post #messagelist > tbody > tr.unread { background: #fff; color: var(--hd-text); }
  html.hd-post #messagelist > tbody > tr.unread td.subject span.fromto,
  html.hd-post #messagelist > tbody > tr.unread td.subject span.subject,
  html.hd-post #messagelist > tbody > tr.unread td.subject span.date { font-weight: 700; color: var(--hd-text); }
  html.hd-post #messagelist > tbody > tr.selected { background: var(--hd-gewaehlt); }
  html.hd-post #messagelist > tbody > tr:hover {
    z-index: 2; box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }
  html.hd-post #messagelist > tbody > tr.deleted { opacity: .55; }
}

/* ================= Geöffnete Mail (im Rahmen und als eigene Seite) ================= */
html.hd body.task-mail.action-preview, html.hd body.task-mail.action-show #layout-content { background: #fff; }
html.hd #message-header { padding: 20px 28px 8px; border: 0; background: none; }
html.hd #message-header h2.subject a.extwin { display: none !important; }
html.hd #message-header h2.subject { font-size: 22px; font-weight: 400; line-height: 1.35; color: var(--hd-text); margin: 0 0 18px; padding: 0; }
html.hd #message-header .header { font-size: 14px; color: var(--hd-hell); }
html.hd #message-header .header .rcmContactAddress, html.hd #message-header .header a.rcmContactAddress { color: var(--hd-text); font-weight: 700; }
html.hd #message-header .contactphoto { border-radius: 50%; width: 40px; height: 40px; }
html.hd #message-content, html.hd #messagebody { background: #fff; }
html.hd #messagebody { padding-left: 28px; padding-right: 28px; }
html.hd div.message-part div.pre, html.hd div.message-part pre { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--hd-text); }
#hd-antworten { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 28px 40px; }
#hd-antworten a {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 20px 0 16px; border: 1px solid #747775; border-radius: 19px; color: var(--hd-grau);
  font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; background: #fff;
}
#hd-antworten a::before { font-family: Icons; font-weight: 900; font-size: 14px; }
#hd-antworten a.hd-a-antwort::before { content: "\f3e5"; }
#hd-antworten a.hd-a-alle::before { content: "\f122"; }
#hd-antworten a.hd-a-weiter::before { content: "\f064"; }
#hd-antworten a:hover { background: #f3f6f9; color: var(--hd-text); }

/* ---------- Zurück-Knopf (geöffnete Mail) ---------- */
#hd-zurueck { display: none; }
@media (min-width: 769px) {
  html.hd.hd-lesen #hd-zurueck, html.hd.hd-zeigen #hd-zurueck {
    display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0 6px 0 0; border-radius: 50%;
    color: var(--hd-grau); text-decoration: none; align-self: center;
  }
  html.hd #hd-zurueck::before { font-family: Icons; font-weight: 900; content: "\f060"; font-size: 16px; line-height: 1; }
  html.hd #hd-zurueck:hover { background: rgba(60, 64, 67, .1); color: var(--hd-text); }
  html.hd.hd-zeigen #layout-content > .header { justify-content: flex-start; padding-left: 10px; }
  html.hd.hd-zeigen #layout-content > .header > .header-title { display: none; }
  /* Auswahl-Knopf als Kästchen, wie gewohnt */
  html.hd-post #toolbar-list-menu a.select::before { content: "\f0c8" !important; font-weight: 400; font-size: 17px; }
}

/* ---------- Farben: Türkis statt Blau ---------- */
html.hd .listing li.selected, html.hd .listing li.selected > a, html.hd .listing tr.selected td { background-color: #e2f3f3; }
html.hd .listing li > a { color: var(--hd-text); }
html.hd .listing li > a::before { color: var(--hd-grau); }
html.hd .folderlist li.mailbox .unreadcount { background: var(--hd-akzent); color: #fff; }
html.hd:not(.touch) .listing li > a:focus,
html.hd:not(.touch) .listing.focus tbody tr.focused > td:first-child { border-left-color: var(--hd-akzent); }
html.hd .form-control:focus, html.hd .custom-select:focus { border-color: var(--hd-akzent); box-shadow: 0 0 0 1px var(--hd-akzent); }
html.hd .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--hd-akzent); border-color: var(--hd-akzent); }
html.hd .listing li.selected > a, html.hd .listing li.selected > a::before { color: var(--hd-akzent-dunkel); }
html.hd #message-header h2.subject::before { color: var(--hd-stern); }

/* ================= Handy ================= */
@media (max-width: 768px) {
  html.hd #layout > div > .header { background: var(--hd-bg); border-bottom: 0; color: var(--hd-text); }
  html.hd #layout > div > .footer { background: var(--hd-bg); border-top-color: var(--hd-linie); }
  html.hd #layout-menu .popover-header { background: #fff !important; border-bottom: 1px solid var(--hd-linie); }
  html.hd #layout-menu .popover-header a.button { color: var(--hd-grau) !important; }
  html.hd #layout-menu #taskmenu a { color: var(--hd-text); }
  html.hd #layout-menu #taskmenu a.selected, html.hd #layout-menu #taskmenu a.selected::before { color: var(--hd-akzent); }

  html.hd-post #layout-list { background: var(--hd-bg); }
  html.hd-post .searchbar { height: 48px; min-height: 48px; line-height: 48px; margin: 2px 12px 10px; border: 0; border-radius: 24px; background: var(--hd-suche); }
  html.hd-post .searchbar form::before { height: 48px; line-height: 48px; color: var(--hd-grau); margin-left: 16px; }
  html.hd-post .searchbar input { height: 48px; background: none; font-size: 16px; }
  html.hd-post .searchbar input::placeholder { color: var(--hd-grau); opacity: 1; }
  html.hd-post .searchbar a.button { color: var(--hd-grau); }
  html.hd-post #messagelist-content { background: #fff; border-radius: 18px 18px 0 0; }

  /* Zeilen: Kreis mit Anfangsbuchstabe (antippen = auswählen), Absender, Betreff, Stern */
  html.hd-post #messagelist > tbody > tr > td { border-color: var(--hd-linie); }
  html.hd-post #messagelist > tbody > tr > td.selection {
    display: block !important; position: relative; flex: 0 0 62px; width: 62px; padding: 0; line-height: 1; border-left: 0 !important;
  }
  html.hd-post #messagelist > tbody > tr > td.selection::before {
    content: var(--hd-b, "?"); position: absolute; left: 12px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
    background: var(--hd-farbe, #5b6b74); color: #fff; font-size: 18px; font-weight: 500; line-height: 40px; text-align: center;
  }
  html.hd-post #messagelist > tbody > tr.selected > td.selection::before { content: "\f00c"; font-family: Icons; font-weight: 900; font-size: 16px; background: var(--hd-akzent); }
  html.hd-post #messagelist > tbody > tr > td.selection input { position: absolute; left: 6px; top: 0; width: 52px; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  html.hd-post #messagelist td.subject { padding: 6px 3.2em 6px 0; }
  html.hd-post #messagelist td.subject span.msgicon { display: none; }
  html.hd-post #messagelist td.subject span.fromto { padding-left: 0; font-size: 1rem; color: var(--hd-text); }
  html.hd-post #messagelist td.subject span.date { color: var(--hd-hell); }
  html.hd-post #messagelist td.subject span.size { display: none !important; }
  html.hd-post #messagelist tr td.subject span.date { display: inline !important; }
  html.hd-post #messagelist td.subject span.subject, html.hd-post #messagelist td.subject span.subject a { color: var(--hd-hell); }
  html.hd-post #messagelist > tbody > tr.unread td.subject span.fromto,
  html.hd-post #messagelist > tbody > tr.unread td.subject span.date,
  html.hd-post #messagelist > tbody > tr.unread td.subject span.subject,
  html.hd-post #messagelist > tbody > tr.unread td.subject span.subject a { font-weight: 700; color: var(--hd-text); }
  html.hd-post #messagelist > tbody > tr > td.flags { border: 0 !important; }
  html.hd-post #messagelist td.flags { top: auto; bottom: 4px; right: 8px; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; width: auto; height: 2em; }
  html.hd-post #messagelist td.flags > span { height: auto; line-height: 1; }
  html.hd-post .messagelist span.flag > span::before { font-size: 18px; }

  /* Schreiben-Knopf unten rechts */
  html.hd .floating-action-buttons a.button {
    display: flex; align-items: center; gap: 10px; width: auto; height: 56px; padding: 0 20px 0 18px; margin: 0 16px 16px 0; border-radius: 16px;
    background: var(--hd-schreiben); color: #06393a; opacity: 1; box-shadow: var(--hd-schatten); font-size: 15px; font-weight: 500; text-decoration: none;
  }
  html.hd .floating-action-buttons a.button::before { width: auto; height: auto; line-height: 1; margin: 0; font-size: 18px; content: "\f303"; }
  html.hd .floating-action-buttons a.button .inner { display: inline; }
  html.hd #message-header { padding: 16px 18px 6px; }
  html.hd #messagebody { padding-left: 18px; padding-right: 18px; }
  #hd-antworten { padding: 20px 18px 32px; }
}