/* AMJ-CRM — Oberfläche. Farben und Schrift aus artmedia-jaeger.de. */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
    /* Markenfarben */
    --gold: #deae36;
    --gold-dunkel: #9E7E30;
    --gold-hell: #E2C97E;
    --gold-text: #7c632e;
    --gold-10: rgba(201,168,76,.10);
    --gold-18: rgba(201,168,76,.18);
    --gold-focus: rgba(185,151,91,.35);
    /* Neutrale */
    --tinte: #111111;
    --tinte-2: #555555;
    --linie: #e6e3dc;
    --linie-zart: rgba(0,0,0,.08);
    --flaeche: #f2f1ee;
    --karte: #ffffff;
    /* Status */
    --akzent: var(--gold-dunkel);
    --akzent-dunkel: var(--gold-text);
    --ok: #059669;
    --warn: #b3261e;
    --ki: #7C3AED;
    /* Radien wie auf der Website */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-pille: 9999px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--tinte);
    background: var(--flaeche);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--akzent-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
code { background: var(--flaeche); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 1rem 0; }

/* Kopfleiste — heller Website-Header mit Goldakzent */
.topbar {
    display: flex; align-items: center; gap: 1.75rem;
    background: #ffffff; color: var(--tinte);
    padding: 0 1.5rem; height: 64px;
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.marke { display: flex; align-items: center; }
.marke img { height: 30px; width: auto; display: block; }
.marke:hover { text-decoration: none; }
.topbar nav { display: flex; gap: .35rem; flex: 1; }
.topbar nav a {
    color: var(--tinte-2); padding: .4rem .85rem; border-radius: var(--radius-pille);
    font-weight: 600; font-size: .92rem;
}
.topbar nav a:hover { color: var(--tinte); background: var(--gold-10); text-decoration: none; }
.topbar nav a.aktiv { color: var(--gold-text); background: var(--gold-18); }

.inhalt { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* Flash */
.flash { padding: .6rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: #e7f5ec; color: var(--ok); border: 1px solid #bfe3cd; }
.flash-fehler { background: #fdecea; color: var(--warn); border-color: #f5c6c0; }

/* Seitenkopf */
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.kopf-aktionen { display: flex; gap: .75rem; align-items: center; }
.brotkrumen { margin: 0 0 .25rem; font-size: .85rem; color: var(--tinte-2); }
.suche input[type=search], .suche select {
    padding: .5rem .75rem; border: 1px solid var(--linie); border-radius: 8px; min-width: 220px; background: #fff; font-size: .95rem;
}

/* Karten & Tabellen */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.tabelle th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-2); padding: .7rem 1rem; border-bottom: 1px solid var(--linie); background: #fafbfd; }
.tabelle td { padding: .7rem 1rem; border-bottom: 1px solid var(--linie); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.klickbar:hover { background: var(--gold-10); cursor: pointer; }

/* Buttons */
.btn {
    display: inline-block; padding: .5rem 1.1rem; border-radius: var(--radius-pille); border: 1px solid transparent;
    font-size: .92rem; font-weight: 600; cursor: pointer; background: none; font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primaer { background: var(--gold); color: var(--tinte); }
.btn-primaer:hover { background: var(--gold-dunkel); color: #fff; }
.btn-leise { background: #fff; border-color: var(--linie); color: var(--tinte); }
.btn-leise:hover { border-color: var(--tinte-2); }
.btn-gefahr-leise { background: none; color: var(--warn); border-color: transparent; }
.btn-gefahr-leise:hover { background: #fdecea; }
.btn-klein { padding: .25rem .6rem; font-size: .85rem; }
.breit { width: 100%; }

/* Formulare */
.formular .feld { margin-bottom: .8rem; display: flex; flex-direction: column; gap: .25rem; }
.feld-reihe { display: flex; gap: .75rem; }
.feld-reihe .feld { flex: 1; }
.feld-reihe .schmal { flex: 0 0 90px; }
label { font-size: .82rem; color: var(--tinte-2); font-weight: 600; }
input, select, textarea {
    padding: .5rem .7rem; border: 1px solid var(--linie); border-radius: 8px; font-family: inherit; font-size: .95rem; width: 100%;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-focus); border-color: var(--gold); }
.checkbox { display: flex; gap: .5rem; align-items: center; font-size: .95rem; font-weight: 400; color: var(--tinte); margin-bottom: .8rem; }
.checkbox input { width: auto; }
.zeile { display: flex; gap: .5rem; }
.zeile input { flex: 1; }
.aktionen { display: flex; gap: .75rem; margin-top: .5rem; }
.hinweis { font-size: .85rem; color: var(--tinte-2); margin: 0 0 .75rem; }
.leer { color: var(--tinte-2); font-style: italic; }
.gedimmt { color: var(--tinte-2); }

/* Badges */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .74rem; font-weight: 600; vertical-align: middle; }
.badge-aktiv { background: #e7f5ec; color: var(--ok); }
.badge-inaktiv { background: #f1f3f7; color: var(--tinte-2); }
.badge-archiviert { background: #f1f3f7; color: var(--tinte-2); }
.badge-ki { background: #f1e9fe; color: var(--ki); }
.badge-hoch { background: #fdecea; color: var(--warn); }
.badge-niedrig { background: #f1f3f7; color: var(--tinte-2); }
.badge-haupt { background: var(--gold-18); color: var(--gold-text); }
.badge-anrede { background: #f1f3f7; color: var(--tinte-2); }
.badge-aufgabe { background: var(--gold-18); color: var(--gold-text); }
.badge-smalltalk { background: #f1f3f7; color: var(--tinte-2); }
.badge-unklar { background: #fdf6e3; color: #92700c; }
.badge-aufgabe-link { background: #e7f5ec; color: var(--ok); }

/* Login */
.login-karte { max-width: 380px; margin: 12vh auto; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 2.25rem 2rem; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.login-logo { width: 210px; height: auto; margin: 0 auto .5rem; display: block; }
.login-karte form { text-align: left; margin-top: 1.5rem; }
.login-karte label { display: block; margin-bottom: .3rem; }
.login-karte input { margin-bottom: 1rem; }

/* Kundenakte */
.akte { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .akte { grid-template-columns: 1fr; } }
.kontakt { display: flex; justify-content: space-between; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.kontakt:last-of-type { border-bottom: 0; }
.freigaben { list-style: none; margin: 0 0 .75rem; padding: 0; }
.freigaben li { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--linie); }
.nachklapp { margin-top: .75rem; }
.nachklapp summary { list-style: none; }
.nachklapp summary::-webkit-details-marker { display: none; }
.nachklapp form { margin-top: .75rem; }

/* Mails */
.mailliste { list-style: none; margin: 0; padding: 0; }
.mailliste li { padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.mailliste li:last-child { border-bottom: 0; }
.mail-betreff { font-weight: 600; color: var(--tinte); }
.mail-meta { font-size: .83rem; color: var(--tinte-2); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.mail-detail-meta { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.mail-body { white-space: pre-wrap; font-family: inherit; font-size: .95rem; margin: 0; }

/* Aufgaben */
.aufgabe { border: 1px solid var(--linie); border-left: 3px solid var(--linie); border-radius: 10px; padding: .8rem .9rem; margin-bottom: .7rem; background: #fff; }
.aufgabe.prio-hoch { border-left-color: var(--warn); }
.aufgabe.prio-normal { border-left-color: var(--akzent); }
.aufgabe.prio-niedrig { border-left-color: var(--linie); }
.aufgabe.erledigt { opacity: .6; }
.aufgabe-kopf { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.aufgabe-meta { font-size: .83rem; color: var(--tinte-2); white-space: nowrap; }
.aufgabe-beschreibung { font-size: .9rem; color: var(--tinte-2); margin: .35rem 0 0; }
.aufgabe-aktionen { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; flex-wrap: wrap; }
.aufgabe-aktionen details { flex: 1 1 100%; order: 9; }
.aufgabe-aktionen summary { display: inline-block; }
.aufgabe-formular { margin-top: .75rem; padding: .75rem; background: var(--flaeche); border-radius: 8px; }
.ueberfaellig { color: var(--warn); font-weight: 700; }

/* Board */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .board { grid-template-columns: 1fr; } }
.spalte h2 { display: flex; justify-content: space-between; align-items: center; padding-bottom: .4rem; border-bottom: 2px solid var(--linie); }
.anzahl { font-size: .8rem; background: var(--linie); border-radius: 99px; padding: 0 .5rem; color: var(--tinte-2); }

/* Logout-Button in Topbar */
.logout .btn-leise { background: transparent; color: var(--tinte-2); border-color: var(--linie); }
.logout .btn-leise:hover { color: var(--tinte); border-color: var(--gold); background: var(--gold-10); }