/* ===========================================================================
   QuickPost - Stylesheet
   Fall 158 / Cipher Investigations

   Die komplette Farbgebung steckt im :root-Block. Wer die Seite umfaerben
   will, aendert ausschliesslich dort - im restlichen Stylesheet steht kein
   einziger fester Farbwert.
   =========================================================================== */

:root {
    /* --- Farben aus der Farbpalette (Blatt QuickPost) --- */
    --qp-marke:       #443730;   /* Kopfleiste, Marke                */
    --qp-marke-hell:  #786452;   /* Icons, sekundaerer Text, Hover   */
    --qp-linie:       #A5907E;   /* Trennlinien, Metatext            */
    --qp-flaeche:     #DADDD8;   /* Seitenleiste, Seitenhintergrund  */
    --qp-akzent:      #96C5B0;   /* Akzent, ungelesen-Marker         */
    --qp-aktiv:       #ADF1D2;   /* aktive / ausgewaehlte Zeile      */
    --qp-weiss:       #FFFFFF;   /* Mailflaeche                      */
    --qp-text:        #000000;   /* Text                             */

    /* --- Abgeleitete Werte, damit die Palette nicht erweitert werden muss --- */
    --qp-gelesen:     #EDEFEC;               /* Flaeche einer gelesenen Zeile */
    --qp-hover:       #E4E7E2;               /* Hoverflaeche                  */
    --qp-rand:        rgba(165,144,126,0.32); /* Linien, aus --qp-linie       */
    --qp-rand-stark:  rgba(165,144,126,0.55);
    --qp-schatten:    rgba(68,55,48,0.16);

    /* --- Masse --- */
    --qp-kopfhoehe:   64px;
    --qp-leiste:      256px;
    --qp-radius:      16px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--qp-flaeche);
    color: var(--qp-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}


/* ===========================================================================
   Login (index.html)
   =========================================================================== */

.login-seite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 24px;
}

.login-karte {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: var(--qp-weiss);
    border: 1px solid var(--qp-rand);
    border-radius: 28px;
}

.login-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.login-karte h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 400;
}

.login-karte p.hinweis {
    margin: 0 0 28px;
    color: var(--qp-marke-hell);
}

.feld {
    position: relative;
    margin-bottom: 22px;
}

.feld input {
    width: 100%;
    padding: 14px 15px;
    background: transparent;
    border: 1px solid var(--qp-rand-stark);
    border-radius: 6px;
    color: var(--qp-text);
    font-family: inherit;
    font-size: 15px;
}

.feld input:focus {
    border-color: var(--qp-marke);
    outline: 2px solid var(--qp-akzent);
    outline-offset: -1px;
}

.feld label {
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0 5px;
    background: var(--qp-weiss);
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.login-fehler {
    min-height: 20px;
    margin-bottom: 12px;
    color: var(--qp-marke);
    font-size: 13px;
}

.login-fehler:empty {
    margin-bottom: 0;
}

.login-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.login-fuss a {
    color: var(--qp-marke-hell);
    font-size: 13px;
    text-decoration: none;
}

.login-fuss a:hover {
    text-decoration: underline;
}

.knopf {
    padding: 11px 26px;
    background: var(--qp-marke);
    border: none;
    border-radius: 999px;
    color: var(--qp-weiss);
    font-size: 14px;
}

.knopf:hover {
    background: var(--qp-marke-hell);
}

.knopf:disabled {
    background: var(--qp-linie);
    cursor: default;
}


/* ===========================================================================
   Grundgeruest Postfach (inbox.html)
   =========================================================================== */

.app {
    display: grid;
    grid-template-rows: var(--qp-kopfhoehe) 1fr;
    height: 100%;
}

.kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--qp-marke);
    color: var(--qp-weiss);
}

.kopf-marke {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(var(--qp-leiste) - 16px);
    font-size: 21px;
    letter-spacing: 0.2px;
}

.suche {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    padding: 0 16px;
    background: rgba(255,255,255,0.14);
    border-radius: 8px;
}

.suche:focus-within {
    background: var(--qp-weiss);
    color: var(--qp-text);
}

.suche input {
    flex: 1;
    padding: 12px 0;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.suche input::placeholder {
    color: currentColor;
    opacity: 0.75;
}

.kopf-rechts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.kopf-mail {
    color: var(--qp-weiss);
    font-size: 13px;
    opacity: 0.85;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--qp-akzent);
    border-radius: 50%;
    color: var(--qp-marke);
    font-size: 14px;
    text-transform: uppercase;
}

.icon-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: inherit;
}

.icon-knopf:hover {
    background: rgba(0,0,0,0.08);
}

.kopf .icon-knopf:hover {
    background: rgba(255,255,255,0.14);
}

.rahmen {
    display: grid;
    grid-template-columns: var(--qp-leiste) 1fr;
    min-height: 0;
}


/* ===========================================================================
   Seitenleiste
   =========================================================================== */

.seitenleiste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 8px 16px 0;
    overflow-y: auto;
}

.verfassen {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 8px 16px 16px;
    padding: 16px 24px;
    background: var(--qp-akzent);
    border: none;
    border-radius: 16px;
    color: var(--qp-marke);
    font-size: 14px;
}

.verfassen:hover {
    background: var(--qp-aktiv);
}

.ordner {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 32px;
    padding: 0 12px 0 26px;
    background: transparent;
    border: none;
    border-radius: 0 999px 999px 0;
    color: var(--qp-text);
    font-size: 14px;
    text-align: left;
}

.ordner:hover {
    background: var(--qp-hover);
}

.ordner.aktiv {
    background: var(--qp-aktiv);
}

.ordner-name {
    flex: 1;
}

.ordner-zahl {
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.ordner.aktiv .ordner-zahl {
    color: var(--qp-marke);
}

.leiste-trenner {
    height: 1px;
    margin: 10px 12px 10px 26px;
    background: var(--qp-rand);
}

.leiste-titel {
    padding: 6px 12px 4px 26px;
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.label-punkt {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}


/* ===========================================================================
   Inhaltsflaeche
   =========================================================================== */

.inhalt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 16px 16px 0;
    background: var(--qp-weiss);
    border-radius: var(--qp-radius);
    overflow: hidden;
}

.werkzeugleiste {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    padding: 0 8px;
    color: var(--qp-marke-hell);
    flex-shrink: 0;
}

.werkzeug-rechts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-right: 8px;
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.blaettern {
    white-space: nowrap;
}


/* --- Mailliste --- */

.liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--qp-rand);
}

.zeile {
    display: grid;
    grid-template-columns: 44px 40px 40px 200px 1fr 92px;
    align-items: center;
    height: 40px;
    padding-right: 8px;
    background: var(--qp-gelesen);
    border-bottom: 1px solid var(--qp-rand);
    cursor: pointer;
}

.zeile:hover {
    background: var(--qp-hover);
}

.zeile.ungelesen {
    background: var(--qp-weiss);
    font-weight: 600;
}

.zeile.ungelesen:hover {
    background: var(--qp-hover);
}

.zeile.neu {
    animation: neu-eingetroffen 2.4s ease-out 1;
}

@keyframes neu-eingetroffen {
    0%   { background: var(--qp-aktiv); }
    100% { background: var(--qp-weiss); }
}

.zeile-kaestchen,
.zeile-stern,
.zeile-wichtig {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qp-linie);
}

.zeile-stern:hover,
.zeile-wichtig:hover {
    color: var(--qp-marke);
}

.zeile-stern.gesetzt {
    color: var(--qp-marke-hell);
}

.zeile-absender,
.zeile-betreff,
.zeile-datum {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.zeile-absender {
    padding-right: 12px;
}

.zeile-betreff {
    padding-right: 16px;
    font-weight: inherit;
}

.zeile-auszug {
    color: var(--qp-marke-hell);
    font-weight: 400;
}

.zeile-datum {
    color: var(--qp-marke-hell);
    font-size: 12px;
    text-align: right;
}

.zeile.ungelesen .zeile-datum {
    color: var(--qp-text);
}


/* --- Leeransicht / Statusmeldungen --- */

.leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 72px 24px;
    color: var(--qp-marke-hell);
    text-align: center;
}

.leer strong {
    color: var(--qp-text);
    font-size: 16px;
    font-weight: 400;
}


/* --- Leseansicht --- */

.lesen {
    flex: 1;
    min-height: 0;
    padding: 0 0 48px;
    overflow-y: auto;
}

.lesen-betreff {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 48px 20px 24px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
}

.lesen-kopf {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: start;
    gap: 14px;
    padding: 0 48px 16px 24px;
}

.lesen-absender {
    font-size: 14px;
}

.lesen-adresse {
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.lesen-datum {
    color: var(--qp-marke-hell);
    font-size: 12px;
    white-space: nowrap;
}

.lesen-text {
    padding: 8px 48px 24px 78px;
    font-size: 14px;
    line-height: 1.62;
    white-space: pre-wrap;
    word-break: break-word;
}

.lesen-fuss {
    display: flex;
    gap: 12px;
    padding: 8px 48px 0 78px;
}

.fuss-knopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--qp-rand-stark);
    border-radius: 999px;
    color: var(--qp-text);
}

.fuss-knopf:hover {
    background: var(--qp-hover);
}


/* --- Anhang --- */

.anhang-block {
    padding: 20px 48px 8px 78px;
    border-top: 1px solid var(--qp-rand);
    margin-top: 24px;
}

.anhang-titel {
    margin-bottom: 12px;
    color: var(--qp-marke-hell);
    font-size: 12px;
}

.anhang {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 260px;
    padding: 12px 14px;
    background: var(--qp-weiss);
    border: 1px solid var(--qp-rand-stark);
    border-radius: 10px;
    color: var(--qp-text);
    text-decoration: none;
}

.anhang:hover {
    background: var(--qp-hover);
}

.anhang-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--qp-akzent);
    border-radius: 6px;
    color: var(--qp-marke);
    flex-shrink: 0;
}

.anhang-name {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.anhang-info {
    color: var(--qp-marke-hell);
    font-size: 11px;
}


/* ===========================================================================
   Sichtbarkeit
   =========================================================================== */

.versteckt {
    display: none !important;
}


/* ===========================================================================
   Schmale Fenster
   =========================================================================== */

@media (max-width: 900px) {
    .rahmen {
        grid-template-columns: 1fr;
    }

    .seitenleiste {
        display: none;
    }

    .kopf-marke {
        width: auto;
    }

    .kopf-mail {
        display: none;
    }

    .inhalt {
        margin: 0 8px 8px;
    }

    .lesen-text,
    .lesen-fuss,
    .anhang-block {
        padding-left: 24px;
        padding-right: 24px;
    }
}