@charset "utf-8";



.mails .content {
    display: inline-grid;
    grid-template-columns: 200px 500px auto;
    grid-template-rows: 100%;
    gap: 4px;
    grid-template-areas: "mail_konten mail_mitte mail_anzeige";
    overflow: hidden;
    width: calc(100% - 185px);
    padding: 4px 0px;
    height: calc(100% - 10px);
    transition: all 0.2s;
}



.mails .zurueckknopf {
    display: none;
    background-color: #488925;
    color: #fff;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
}

.mails .zurueckknopf:hover {
    background-color: #63bc33;
}

.mails .zurueckknopf img {
    width: 24px;
    margin-right: 8px;
}

.mails .zurueckknopf span {
    position: relative;
    top: -6px;
}



.mails_konten_aufklappen_knopf {
    position: absolute;
    display: none;
    background-color: #9f9f9f;
    top: 4px;
    height: calc(100% - 26px);
    width: 20px;
    cursor: pointer;
    padding-top: 16px;
    padding-left: 5px;
    transition: all 0.2s;
}

.mails_konten_aufklappen_knopf:hover {
    filter: brightness(1.1);
}

.mails_konten_aufklappen_knopf span {
    writing-mode: sideways-lr;
    color: #fff;
    font-size: 12px;
}



.mail_anzeige .toolbar div:hover {
    background-color: #ffffff;
}

.mail_anzeige .toolbar div img {
    width: 24px;
}

.mails .betreff {
    font-size: 16px;
    color: #488925;
    margin-bottom: 4px;
}

.mails .fett {
    font-weight: bold;
}



.mails .konten .mailSuchenKnopf {
    background-color: #d3ffba;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
}

.mails .konten .mailSuchenKnopf:hover {
    background-color: #adff7f;
}

.mails .konten .mailSuchenKnopf img {
    width: 24px;
    margin-right: 8px;
}

.mails .konten .mailSuchenKnopf span {
    position: relative;
    top: -6px;
}



.mails .konten .ordner {
    background-color: #d3ffba;
    padding: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    overflow-x: hidden;
    white-space: nowrap;
    transition: all 0.2s;
}

.mails .konten .ordner:hover {
    background-color: #adff7f;
}

.mails .konten .selected {
    background-color: #adff7f;
}

.mails .konten .ordner img {
    width: 24px;
    margin-right: 8px;
}

.mails .konten .ordner.zugeklappt {
    height: 0px;
    padding: 0px;
    margin-bottom: 0px;
}



.mails .suche .mailSuche {
    margin-bottom: 8px;
    width: calc(100% - 34px);
    font-size: 16px;
    padding: 8px 8px 8px 40px;
    background-image: url(../../img/lupe.png);
    background-position: 8px center;
    background-size: 24px;
    background-repeat: no-repeat;
}



.mails .anzeige .karte {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    cursor: pointer;
    overflow: hidden;
}

.mails .anzeige .karte:hover {
    border: 1px solid #727272;
}

.mails .anzeige .karte .name {
    font-size: 18px;
    margin-bottom: 8px;
    color: #488925;
    white-space: nowrap;
}

.mails .anzeige .karte .adresse {
    margin-bottom: 8px;
}



.mails .anzeige .nachricht {
    background-color: #fff;
    padding: 16px 8px 16px 8px;
    box-shadow: 2px 2px 10px #adadad;
}

.mail_anzeige .datum {
    color: #5f5f5f;
    float: right;
    font-size: 12px;
}



.mails .anzeige .fuss {
    margin-top: 32px;
    padding-top: 8px;
}

.mails .anzeige .fuss .nachricht {
    opacity: 0.6;
}

.mails .anzeige .fuss .nachricht:hover {
    opacity: 1.0;
}



.mailneu .ergebnisse {
    position: absolute;
}

.mailneu .ergebnisse .karte {
    padding: 8px;
    margin-bottom: 2px;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    cursor: pointer;
}

.mailneu .ergebnisse .karte:hover {
    border: 1px solid #727272;
}

.mailneu .ergebnisse .karte.selected {
    background-color: #d3ffba;
}

.mailneu .ergebnisse .karte .email {
    color: #488925;
}



.mailneu .toliste select {
    width: calc(25% - 4px);
    margin-right: 2px;
    display: inline-block;
}

.mailneu .toliste input {
    width: calc(75% - 4px);
    display: inline-block;
}



.vorschausignatur {
    background-color: #fff;
    padding: 8px;
}

.vorschauzitat {
    background-color: #fff;
    padding: 8px;
}



/* .mailanzeige .inhalt {
    padding: 16px;
    background-color: #fff;
}

.mailanzeige iframe {
    border: 0px;
    width: 100%;
    min-height: 100%;
}

.mailanzeige .kopf {
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.mailanzeige .spalte {
    width: calc(50% - 34px);
    display: inline-block;
    vertical-align: top;
    margin-right: 16px;
}



.mailanzeige .datei {
    width: 64px;
    padding: 8px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.mailanzeige .datei:hover {
    background-color: #d3ffba;
}

.mailanzeige .datei img {
    width: 32px;
    margin-bottom: 4px;
}

.mailanzeige .datei div {
    font-size: 12px;
    width: 100%;
    overflow-wrap: break-word;
} */



.mailneu .anhangliste .datei {
    width: 96px;
    padding: 8px;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.mailneu .anhangliste .datei:hover {
    background-color: #fff;
}

.mailneu .anhangliste .datei img {
    width: 64px;
    margin-bottom: 4px;
}

.mailneu .anhangliste .datei div {
    font-size: 11px;
    width: 100%;
    overflow-wrap: break-word;
}


.keinebilder {
    height: 32px;
    vertical-align: middle;
    padding-right: 5px;
}


.passwortvorschlag {
    margin: 4px;
    padding: 8px;
    border: 1px solid #727272;
    background-color: #fff;
    text-align: left;
}



.mailtermin {
    border: 5px solid #bdbdbd;
    padding: 8px;
    border-radius: 8px;
    margin-top: 8px;
    column-count: 3;
    column-gap: 16px;
}

.mailtermin div {
    font-size: 12px;
}



/* AB HIER NEUE STYLES */



.mails .konten {
    background-color: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
    grid-area: mail_konten;
}

.mails .mitte {
    background-color: #fff;
    overflow: hidden;
    grid-area: mail_mitte;
}

.mails .suche {
    background-color: #ceceff;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

.mails .liste {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

.mail_anzeige {
    overflow-y: scroll;
    overflow-x: hidden;
    grid-area: mail_anzeige;
    height: 100%;
    width: 100%;
    display: inline-grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 250px auto 0px;
    grid-template-rows: min-content min-content auto min-content min-content;
    gap: 4px;
    transition : all 0.2s;
    grid-template-areas:
      "mail_anzeige_absender mail_anzeige_empfaenger mail_anzeige_empfaenger"
      "toolbar toolbar toolbar"
      "mail_anzeige_nachricht mail_anzeige_nachricht mail_anzeige_zusatz"
      "mail_anzeige_anhang mail_anzeige_anhang mail_anzeige_anhang"
      "mail_anzeige_antwort mail_anzeige_antwort mail_anzeige_antwort"; 
}



.mail_anzeige.hat_ai {
    grid-template-columns: 250px auto 200px;
}


.mails_ai_spalte_aufklappen_knopf {
    position: absolute;
    display: none;
    top: 20%;
    right: 0px;
    cursor: pointer;
    padding: 16px 4px;
    transition: all 0.2s;
    background: linear-gradient(135deg, #6c5ce7, #097c37);
}

.mails_ai_spalte_aufklappen_knopf:hover {
    filter: brightness(1.1);
}

.mails_ai_spalte_aufklappen_knopf span {
    writing-mode: sideways-lr;
    color: #fff;
    font-size: 12px;
}



.mails .konten .konto {
    padding: 4px;
    margin-bottom: 2px;
    margin-top: 8px;
    overflow-x: hidden;
    cursor: pointer;
}

.mails .konten .konto img {
    height: 16px;
    vertical-align: middle;
}

.mails .konten .konto span {
    vertical-align: middle;
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
    width: calc(100% - 20px);
}

.mails .konten .ordner span {
    position: relative;
    top: -6px;
    font-size: 12px;
}

.mails .konten .ordner span b {
    font-size: 12px;
}



.mails .nachricht {
    overflow-x: hidden;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #a5a5a5;
    display: grid;
    grid-template-columns: auto 160px 22px;
    grid-template-rows: auto auto auto;
    gap: 4px 4px;
    grid-template-areas:
        "absender datum flags"
        "betreff betreff flags"
        "vorschau vorschau flags";
}

.mails .nachricht:hover {
    background-color: #d3ffba;
}

.mails .nachricht.selected {
    background-color: #adff7f;
}

.mails .nachricht .betreff {
    grid-area: betreff;
    font-size: 14px;
    color: #488925;
    margin: 0px;
}

.mails .nachricht .vorschau {
    grid-area: vorschau;
    overflow: hidden;
}

.mails .nachricht .vorschau pre {
    font-size: 11px;
    color: #727272;
    overflow: hidden;
    white-space: nowrap;
}

.mails .nachricht .vorschau .status {
    color: #a80000;
    font-size: 10px;
}

.mails .nachricht .absender {
    grid-area: absender;
    font-size: 13px;
    margin: 0px;
}

.mails .nachricht .flags {
    grid-area: flags;
    text-align: right;
    border-left: 1px solid #dfdfdf;
}

.mails .nachricht .flags img {
    margin: 1px 0px 1px 0px;
    width: 16px;
}

.mails .nachricht .flags .markierung {
    height: 16px;
    width: 16px;
    border-radius: 4px;
    display: inline-block;
}

.mails .nachricht .datum {
    grid-area: datum;
    font-size: 11px;
    color: #5f5f5f;
    text-align: right;
    margin: 0px;
}



.mail_anzeige iframe {
    border: none;
    width: 100%;
    min-height: 100%;
}

.mail_anzeige_absender {
    grid-area: mail_anzeige_absender;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}

.mail_anzeige_absender .titel {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: #777;
}

.mail_anzeige_absender .adressenkarteklein {
    margin-bottom: 0px;
    margin-right: 0px;
    max-width: calc(100% - 20px);
}

.mail_anzeige_empfaenger {
    grid-area: mail_anzeige_empfaenger;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.mail_anzeige_empfaenger .titel {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: #777;
}

.mails_adressen_box {
    display: inline-block;
    padding: 6px;
    background-color: #fff;
    color: #000;
    border-radius: 8px;
    margin: 2px;
    vertical-align: top;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #cfcfcf;
}

.mails_adressen_box.bekannt {
    border-color: #448223;
    border-width: 5px 1px 1px 1px;
}

.mails_adressen_box.schwach {
    opacity: 0.8;
}

.mails_adressen_box:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    opacity: 1.0;
}

.mails_adressen_box_zeile {
    display: block;
    margin-top: 4px;
    white-space: nowrap;
}

.mails_adressen_box_zeile span {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

.mails_adressen_box_zeile span.gicon {
    width: 20px;
}

.mails_adressen_box_zeile span.text {
    width: calc(100% - 20px);
    white-space: normal;
}

.mails_adressen_box_typ {
    display: inline-block;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #858585;
}

.mail_anzeige .toolbar {
    grid-area: toolbar;
    background-color: #fff;
    margin: 0px;
    border-radius: 8px;
    padding: 2px 2px 2px 4px;
}

.mail_anzeige .toolbar div {
    padding: 0px;
}

.mail_anzeige .toolbar .mails_toolbar_knopf {
    display: inline-block;
    padding: 6px;
    cursor: pointer;
    background-color: unset;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.mail_anzeige .toolbar .checkbox {
    background-color: unset;
    display: inline-block;
    padding: 8px;
    cursor: pointer;
    margin: 6px 0px 0px 0px;
}

.mail_anzeige .toolbar .mails_toolbar_knopf:hover {
    background-color: #f8f8f8;
}

.mail_anzeige_nachricht {
    grid-area: mail_anzeige_nachricht;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    overflow-y: scroll;
}

.mail_anzeige_zusatz {
    grid-area: mail_anzeige_zusatz;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    overflow-y: scroll;
}

.mail_anzeige_anhang {
    grid-area: mail_anzeige_anhang;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}

.mail_anzeige_antwort {
    grid-area: mail_anzeige_antwort;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
}



.mail_anzeige h1 {
    font-size: 18px;
    margin-bottom: 8px;
    min-height: 12px;
}



.mail_anzeige_anhang .uniknopf {
    vertical-align: top;
}

.mail_anzeige .datei {
    display: inline-block;
    width: auto;
    padding: 4px;
    margin: 4px;
    text-align: left;
    border-radius: 4px;
    background-color: #f2f2f2;
    cursor: pointer;
    vertical-align: top;
}

.mail_anzeige .datei:hover {
    background-color: #d3ffba;
}

.mail_anzeige .datei img {
    width: 32px;
    height: 32px;
    margin: 0px 4px 0px 0px;
    vertical-align: middle;
    object-fit: cover;
}

.mail_anzeige .datei div {
    font-size: 12px;
    width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
}



.mail_anzeige_antwort textarea {
    height: 50px;
    min-height: 0px;
    display: inline-block;
    width: calc(100% - 50px);
    min-width: 50px;
    vertical-align: bottom;
    margin: 0px;
    overflow: hidden;
    resize: none;
}

.mail_anzeige_antwort .bilduniknopf {
    vertical-align: bottom;
    margin: 0px;
}



.mail_anzeige .ai_karte {
    max-width: none;
    display: block;
    margin: 8px 0px 0px 0px;
    padding: 8px;
    border-radius: 8px;
    border: 5px solid transparent;
    background: linear-gradient(#f2f2f2, #f2f2f2) padding-box, linear-gradient(135deg, #6c5ce7, #097c37) border-box;
}

.mail_anzeige .ai_karte.spam {
    background-image: linear-gradient(135deg, #c14747 0%, #5c2e92 50%, #3498db 100%);
    font-weight: bold;
    color: #fff;
}

.mail_anzeige .ai_karte.spam .icon {
    filter: brightness(3);
}

.mail_anzeige .ai_karte .icon {
    height: 32px;
    float: right;
    transform: translate(6px, -6px);
}

.mail_anzeige .ai_karte div {
    font-size: 12px;
}

.mail_anzeige .ai_karte ul {
    margin: 0px;
}

.mail_anzeige .ai_karte li {
    font-size: 12px;
    margin: 4px 0px 4px 2px;
    list-style: none;
}

.mail_anzeige .ai_karte .uniknopf {
    background-color: #7d45be;
    text-align: center;
    margin: 8px 0px 0px 0px;
    display: block;
    color: #fff;
    font-size: 12px;
}

.mail_anzeige .ai_karte .uniknopf:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}



.mail_anzeige .mail_ai_antworten .ai_antwort {
    display: inline-block;
    padding: 4px 6px;
    margin: 0px 4px 8px 0px;
    background-color: #5a5a5a;
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    width: calc(33% - 15px);
    vertical-align: top;
}

.mail_anzeige .mail_ai_antworten .ai_antwort:hover {
    background-color: #323232;
}



.mails .versteckt {
    display: none !important;
}



@media (width < 1700px) {

    .mails .content {
        grid-template-columns: 20px 400px auto;
    }
    
    .mails_konten_aufklappen_knopf {
        display: inline-block;
    }

    .mails .content.mail_fokus_konten .mails_konten_aufklappen_knopf {
        display: none;
    }

    .mails .content.mail_fokus_konten {
        grid-template-columns: 420px 0px auto;
    }

    .mailtermin {
        column-count: 2;
    }

}



@media (width < 1400px) {

    .mail_anzeige.hat_ai {
        grid-template-columns: 250px auto 0px;
    }

    .mail_anzeige.hat_ai .mails_ai_spalte_aufklappen_knopf {
        display: inline-block;
    }

    .mail_anzeige.ai_spalte_erzwingen {
        grid-template-columns: 250px auto 200px;
    }

}



@media (width < 1300px) {

    .mails .content {
        grid-template-columns: 200px auto 0px;
    }
    
    .mails_konten_aufklappen_knopf {
        display: none;
    }

}



@media (width < 900px) {

    .mails .content {
        grid-template-columns: 24px calc(100% - 24px) 0px;
    }
    
    .mails_konten_aufklappen_knopf {
        display: inline-block;
    }

    .mails .content.mail_fokus_konten .mails_konten_aufklappen_knopf {
        display: none;
    }

    .mails .content.mail_fokus_konten {
        grid-template-columns: 100% 0px 0px;
    }

    .mailtermin {
        column-count: 1;
    }

}



@media (width < 700px) {

    .mails .liste .nachricht {
        grid-template-areas:
            "datum flags"
            "absender flags"
            "betreff flags"
            "vorschau vorschau";
        grid-template-rows: auto auto auto auto;
        grid-template-columns: auto 22px;
    }

    .mails .liste .datum {
        text-align: left;
    }

    .mail_anzeige {
        grid-template-columns: 100% !important;
        grid-template-rows: min-content min-content auto min-content min-content min-content;
        grid-template-areas:
            "mail_anzeige_absender"
            "mail_anzeige_empfaenger"
            "toolbar"
            "mail_anzeige_nachricht"
            "mail_anzeige_anhang"
            "mail_anzeige_antwort";
    }

    .mail_anzeige.hat_ai .mails_ai_spalte_aufklappen_knopf {
        display: none;
    }

}



@media (width <= 600px) or (height <= 900px) {

    .mails .content {
        padding: 4px 0px 4px 50px;
        width: calc(100% - 80px);
    }

    .mail_anzeige_nachricht {
        height: fit-content;
        overflow-y: auto;
        overflow-x: auto;
    }

    .mail_anzeige {
        grid-template-rows: min-content min-content min-content min-content min-content min-content;
    }

}