/* Victoria - gemeinsames Design für alle Seiten */

:root {
    --accent: #6d28d9;
    --accent-soft: #ede9fe;
    --accent-line: #ddd6fe;
    --bg: #f6f6fa;
    --card: #ffffff;
    --line: #e8e8ee;
    --text: #1a1a22;
    --muted: #71717f;
    --faint: #9c9caa;
    --ok: #15803d;
    --ok-bg: #dcfce7;
    --warn: #b45309;
    --warn-bg: #fef3c7;
    --bad: #b91c1c;
    --bad-bg: #fee2e2;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16,16,32,.04), 0 4px 16px rgba(16,16,32,.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Grundgerüst ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--card);
    border-right: 1px solid var(--line);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px 18px; }
.brand-img, .brand-fallback {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-line);
}
.brand-fallback {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem;
}
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.brand-role { font-size: .74rem; color: var(--faint); }

.nav-group { font-size: .68rem; font-weight: 700; color: var(--faint);
             text-transform: uppercase; letter-spacing: .06em; padding: 14px 10px 5px; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: 9px;
    color: var(--muted); text-decoration: none;
    font-size: .89rem; font-weight: 500; transition: all .12s;
}
.nav-item:hover { background: #f5f5f9; color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: #5b21b6; font-weight: 650; }
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: var(--bad); color: #fff; font-size: .68rem;
             font-weight: 700; padding: 1px 7px; border-radius: 99px; }

.sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.who { padding: 4px 11px 9px; font-size: .78rem; }
.who-name { color: var(--muted); font-weight: 600; }
@media (max-width: 820px) { .who { display: none; } }

.main { flex: 1; min-width: 0; padding: 26px 30px 70px; max-width: 1060px; }

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 1.42rem; margin: 0; letter-spacing: -.02em; }
.page-head .sub { color: var(--muted); font-size: .89rem; margin: 2px 0 0; }
.page-head.with-portrait { display: flex; gap: 15px; align-items: center; }
.portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
            box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-line); }
.portrait.fallback { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff;
                     display: flex; align-items: center; justify-content: center;
                     font-weight: 700; font-size: 1.4rem; }
.page-head-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.page-head-row > :first-child { flex: 1; min-width: 200px; }

/* Mobil: Sidebar wird zur oberen Leiste */
@media (max-width: 820px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; height: auto; position: static; flex-direction: row;
               flex-wrap: wrap; align-items: center; gap: 5px; padding: 12px 14px;
               border-right: none; border-bottom: 1px solid var(--line); }
    .brand { padding: 0 10px 0 0; }
    .brand-img, .brand-fallback { width: 34px; height: 34px; }
    .brand-role { display: none; }
    .nav-group { display: none; }
    .nav-item { padding: 7px 10px; font-size: .84rem; }
    .nav-item span.lbl { display: none; }
    .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: none; }
    .main { padding: 20px 16px 60px; }
}

/* ---------- Typografie und Blöcke ---------- */

h2 { font-size: 1.02rem; margin: 30px 0 12px; letter-spacing: -.01em;
     display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
h2:first-of-type { margin-top: 0; }
h2 .count { font-size: .8rem; color: var(--muted); font-weight: 400; }
h3 { font-size: .93rem; margin: 20px 0 6px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 15px 17px; box-shadow: var(--shadow); }
.card + .card { margin-top: 10px; }
.stack > * + * { margin-top: 9px; }

.hint { background: #faf9ff; border: 1px solid var(--accent-line); border-radius: var(--radius);
        padding: 13px 15px; font-size: .85rem; color: #4a4a58; }

.empty { color: var(--muted); font-size: .89rem; padding: 14px 2px; }

.msg { padding: 11px 14px; border-radius: 9px; margin-bottom: 10px; font-size: .88rem; }
.msg.error { background: var(--bad-bg); color: var(--bad); }
.msg.notice { background: var(--ok-bg); color: var(--ok); }

/* ---------- Bedienelemente ---------- */

button, .btn {
    padding: 9px 16px; border: none; border-radius: 9px;
    background: var(--accent); color: #fff; font-size: .88rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all .12s; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
}
button:hover, .btn:hover { background: #5b21b6; }
button:disabled { opacity: .4; cursor: default; }
button.grey, .btn.grey { background: var(--card); color: var(--muted); border: 1px solid var(--line); }
button.grey:hover, .btn.grey:hover { background: #f5f5f9; color: var(--text); }
button.danger { background: var(--bad); }
button.danger:hover { background: #991b1b; }
button.mini, .btn.mini { padding: 5px 11px; font-size: .77rem; border-radius: 7px; }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=email], select, textarea {
    padding: 9px 11px; border: 1px solid #dcdce4; border-radius: 9px;
    font-size: .9rem; font-family: inherit; background: var(--card); color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
label { font-weight: 600; font-size: .84rem; display: block; margin-top: 13px; }
small { color: var(--muted); font-size: .79rem; display: block; margin-top: 3px; }

.row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.row .grow { flex: 1; min-width: 180px; }

/* Symbolknöpfe */
.ico { width: 33px; height: 33px; padding: 0; justify-content: center;
       border-radius: 9px; background: var(--card); border: 1px solid var(--line);
       color: var(--muted); }
.ico:hover { background: var(--card); transform: translateY(-1px); }
.ico-ok:hover   { background: var(--ok-bg);   border-color: #86efac; color: var(--ok); }
.ico-task:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.ico-del:hover  { background: var(--bad-bg);  border-color: #fca5a5; color: var(--bad); }

/* Marken */
.tag { display: inline-block; font-size: .69rem; font-weight: 700; padding: 2px 8px;
       border-radius: 99px; vertical-align: middle; margin-left: 5px; }
.tag-grey { background: #f2f2f7; color: var(--muted); }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-accent { background: var(--accent-soft); color: #5b21b6; }
.tag-warn { background: var(--warn-bg); color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; padding: 8px 7px; border-bottom: 1px solid var(--line);
     color: var(--muted); font-size: .76rem; font-weight: 700;
     text-transform: uppercase; letter-spacing: .04em; }
td { padding: 9px 7px; border-bottom: 1px solid #f4f4f8; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.actions { text-align: right; white-space: nowrap; }

code { background: #f4f4f8; padding: 2px 6px; border-radius: 5px;
       font-size: .84rem; word-break: break-all; }

a { color: var(--accent); }
a.plain { text-decoration: none; }

/* ---------- Anmeldeseite ---------- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
              padding: 24px; }
.login-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
             padding: 34px 32px; width: 100%; max-width: 370px; box-shadow: var(--shadow);
             text-align: center; }
.login-box .brand-img, .login-box .brand-fallback { width: 66px; height: 66px; margin: 0 auto 14px;
             font-size: 1.6rem; }
.login-box h1 { font-size: 1.22rem; margin: 0 0 2px; }
.login-box p { color: var(--muted); font-size: .87rem; margin: 0 0 20px; }
.login-box input { width: 100%; text-align: center; }
.login-box button { width: 100%; justify-content: center; margin-top: 11px; }

/* ---------- Einstellungs-Übersicht ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 17px 18px; text-decoration: none; color: var(--text);
        box-shadow: var(--shadow); transition: all .13s; display: block; }
.tile:hover { border-color: var(--accent-line); transform: translateY(-2px);
              box-shadow: 0 4px 18px rgba(109,40,217,.09); }
.tile-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft);
             color: var(--accent); display: flex; align-items: center; justify-content: center;
             margin-bottom: 11px; }
.tile-title { font-weight: 650; font-size: .95rem; }
.tile-desc { color: var(--muted); font-size: .82rem; margin-top: 3px; }


/* ---------- Mail-Ansicht (mail_overlay.php) ---------- */

.cc-toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
                 font-size: 0.85rem; color: #4b5563; background: #fff; border: 1px solid #e5e7eb;
                 border-radius: 99px; padding: 6px 14px 6px 11px; }
.cc-toggle:hover { border-color: #c4b5fd; }
.cc-toggle input { width: 16px; height: 16px; margin: 0; }
.cc-count { background: #ede9fe; color: #5b21b6; font-size: 0.74rem; font-weight: 700;
                padding: 1px 8px; border-radius: 99px; }
.openable { cursor: pointer; }
.openable:hover { color: var(--accent); text-decoration: underline; }
/* Die Abstände oben und unten rechnen die Sicherheitsbereiche mit ein:
   Das Fenster liegt über allem, also greift die Angabe am body nicht.
   Ohne das lagen die Symbole zum Schließen im App-Betrieb unter der
   Statusleiste des Handys - direkt neben Empfang und Akku. */
.overlay { display: none; position: fixed; inset: 0; background: rgba(17,24,39,0.45);
               z-index: 100; overflow-y: auto;
               padding: calc(24px + env(safe-area-inset-top, 0px)) 16px
                        calc(24px + env(safe-area-inset-bottom, 0px)); }
.overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.sheet { background: #fff; border-radius: 12px; width: 100%; max-width: 720px;
             box-shadow: 0 18px 50px rgba(0,0,0,0.22); overflow: hidden; margin: auto; }
.sheet-head { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px;
                  border-bottom: 1px solid #f3f4f6; background: #faf9ff; }

/* Betreff und Absender teilen sich die Zeile mit den Symbolen */
.sheet-titel { flex: 1; min-width: 0; }

/* Am schmalen Bildschirm reicht die Breite dafür nicht: Dann stehen die
   Symbole allein in der ersten Zeile und der Betreff darunter über die
   ganze Breite. Vorher blieb ihm eine Spalte von wenigen Wörtern, und
   jeder zweite Betreff brach fünfmal um. */
@media (max-width: 820px) {
    .sheet-head { flex-wrap: wrap; justify-content: flex-end; }
    .sheet-titel { order: 2; flex: 1 0 100%; }
}
.sheet-subject { font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.sheet-meta { font-size: 0.79rem; color: #6b7280; margin-top: 4px; white-space: pre-line;
                  word-break: break-word; }
.sheet-body { padding: 6px 18px 0; }
.mail-frame { width: 100%; border: none; height: 240px; display: block; }
.loading { color: #9ca3af; font-size: 0.9rem; padding: 22px 0; text-align: center; }
.draft-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 9px; }
.draft-row input,
.draft-row textarea { flex: 1; min-width: 150px; font-size: .87rem; resize: vertical;
                      line-height: 1.4; }
.draft-row button { white-space: nowrap; }

/* Freie Zeiten aus dem Kalender */
.frei-zeile { margin-bottom: 8px; }
.frei-zeile button { gap: 6px; }
.frei-panel { background: #faf9ff; border: 1px solid var(--accent-line);
              border-radius: 10px; padding: 9px 10px; margin-bottom: 9px; }
.frei-tage { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.frei-tag { background: #fff; border: 1px solid var(--line); color: var(--muted);
            border-radius: 99px; padding: 4px 11px; font-size: .74rem; font-weight: 600;
            cursor: pointer; }
.frei-tag:hover { background: #f5f5f9; color: var(--text); }
.frei-tag.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.frei-slots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
              min-height: 28px; }
.frei-slot { background: #fff; border: 1px solid #86efac; color: #166534;
             border-radius: 8px; padding: 5px 11px; font-size: .78rem; font-weight: 650;
             cursor: pointer; white-space: nowrap; }
.frei-slot:hover { background: #dcfce7; border-color: #4ade80; color: #14532d; }
.frei-hinweis { font-size: .76rem; color: var(--muted); }
.sheet-head .ico { background: #fff; border-color: #dcdce4; color: #71717f; }
.sheet-head .ico:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sender-switch { display: flex; gap: 4px; background: #f4f4f8; border-radius: 99px;
                     padding: 3px; }
.snd { display: flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px;
           background: none; border: none; border-radius: 99px; cursor: pointer;
           color: #71717f; font-size: .82rem; font-weight: 600; transition: all .13s; }
.snd:hover { background: #eceaf4; }
.snd.active { background: #fff; color: #1a1a22;
                  box-shadow: 0 1px 3px rgba(16,16,32,.09); }
.snd-circle { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
                  display: flex; align-items: center; justify-content: center;
                  font-size: .76rem; font-weight: 700; flex-shrink: 0;
                  filter: grayscale(.55); opacity: .6; transition: all .13s; }
.snd.active .snd-circle { filter: none; opacity: 1;
                              box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent); }
.snd-me { background: #e0e7ff; color: #3730a3; }
.snd-v { background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; }
.snd-name { white-space: nowrap; }
.clip { font-size: .82rem; opacity: .55; margin-left: 4px; vertical-align: middle; }
.attach-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
                 margin: 10px 18px 2px; padding-top: 10px; border-top: 1px solid #f2f2f7; }
.attach-label { font-size: .76rem; font-weight: 700; color: #9c9caa;
                    text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.attach { display: inline-flex; gap: 8px; align-items: center; text-decoration: none;
              background: #fff; border: 1px solid #e8e8ee; border-radius: 9px;
              padding: 7px 11px; max-width: 100%; transition: all .12s; }
.attach:hover { border-color: #ddd6fe; background: #faf9ff; transform: translateY(-1px); }
.attach-ico { font-size: 1rem; line-height: 1; }
.attach-name { font-size: .84rem; color: #1a1a22; font-weight: 500;
                   max-width: 230px; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; }
.attach-size { font-size: .74rem; color: #9c9caa; flex-shrink: 0; }
.blocked-note { display: flex; gap: 10px; align-items: center; margin: 8px 18px;                    padding: 8px 12px; background: #fffbeb; border: 1px solid #fde68a;
                    border-radius: 6px; font-size: 0.82rem; color: #92400e; }
.sheet-reply { padding: 13px 18px 16px; border-top: 1px solid #f3f4f6; background: #fcfcfd; }
.sheet-reply textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db;
                            border-radius: 8px; font-family: inherit; font-size: 0.91rem;
                            resize: vertical; }
.sheet-reply textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.reply-bar { display: flex; gap: 9px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.reply-status { font-size: 0.82rem; color: #6b7280; margin-top: 7px; min-height: 17px; }

/* ---------- Anhangsvorschau ---------- */

/* Der Anhang ersetzt den Mailinhalt im selben Fenster -
   zwei gestapelte Fenster sind auf dem Handy unbrauchbar. */
.file-pane { display: none; flex-direction: column; }
.sheet.showing-file .file-pane { display: flex; }
.sheet.showing-file .sheet-body,
.sheet.showing-file .sheet-reply,
.sheet.showing-file .attach-row,
.sheet.showing-file .blocked-note { display: none; }

.file-bar { display: flex; gap: 10px; align-items: center; padding: 10px 16px;
            border-bottom: 1px solid var(--line); background: #faf9ff; flex-wrap: wrap; }
.file-name { flex: 1; min-width: 120px; font-size: .87rem; font-weight: 600;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { display: block; font-size: .76rem; color: var(--faint); font-weight: 400; }

.file-body { background: #f4f4f8; display: flex; align-items: center;
             justify-content: center; min-height: 260px; overflow: auto; }
.file-frame { width: 100%; height: 68vh; border: none; background: #fff; }
.file-img { max-width: 100%; max-height: 68vh; display: block; object-fit: contain; }
.file-nopreview { text-align: center; padding: 42px 22px; color: var(--muted); }
.file-nopreview .file-ico { font-size: 2.6rem; margin-bottom: 10px; }
.file-nopreview p { font-size: .89rem; margin: 0 0 16px; }
.file-nopreview .btn { margin: 0 4px; }

/* Anhänge sind Schaltflächen, keine Links */
button.attach { font-family: inherit; cursor: pointer; }
button.attach:hover { transform: translateY(-1px); }

@media (max-width: 820px) {
    .file-frame { height: 60vh; }
    .file-img { max-height: 60vh; }
    .file-bar { padding: 9px 12px; }
}

/* Rückmeldung nach dem Anlegen einer Aufgabe aus der Mail */
.task-info { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
             margin: 10px 18px 0; padding: 9px 13px; border-radius: 8px;
             font-size: .85rem; background: #f4f4f8; color: #4a4a58; }
.task-info.good { background: var(--ok-bg); color: var(--ok); }
.task-info.bad { background: var(--bad-bg); color: var(--bad); }
.task-info button { flex-shrink: 0; }

/* Weiterleiten aus der Leseansicht */
.fwd { padding: 10px 18px 14px; border-top: 1px solid var(--line); background: #faf9ff; }
.fwd-row { display: flex; gap: 8px; }
.fwd-row input { flex: 1; min-width: 0; }
.fwd textarea { width: 100%; margin-top: 8px; font-family: inherit; font-size: .9rem; }
.fwd-note { font-size: .78rem; color: var(--faint); margin-top: 5px; }
.fwd-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.fwd-hit { display: flex; gap: 8px; align-items: baseline; text-align: left;
           background: #fff; border: 1px solid var(--line); border-radius: 8px;
           padding: 7px 11px; cursor: pointer; font-size: .85rem; }
.fwd-hit:hover, .fwd-hit.sel { border-color: var(--accent); background: var(--accent-soft); }
.fwd-hit span { color: var(--muted); font-size: .8rem; }
.fwd-src { margin-left: auto; font-size: .72rem; font-style: normal; color: var(--faint);
           background: #f4f4f8; padding: 1px 8px; border-radius: 99px; flex-shrink: 0; }

/* Zeitplan für die Abrufe */
.sched { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sched th { text-align: left; font-size: .72rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--faint); padding: 0 8px 6px 0; }
.sched td { padding: 6px 8px 6px 0; border-top: 1px solid #f3f4f6; vertical-align: middle; }
.sched input[type=time] { padding: 6px 8px; }
.days { display: flex; gap: 3px; flex-wrap: wrap; }
.day { display: inline-flex; align-items: center; justify-content: center; margin: 0;
       width: 34px; height: 28px; border: 1px solid var(--line); border-radius: 6px;
       font-size: .76rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.day input { display: none; }
.day.on { background: var(--accent-soft); border-color: var(--accent-line); color: #5b21b6; }

/* Am Rechner darf das Lesefenster deutlich breiter sein - Mails mit
   Tabellen oder Signaturen brauchen den Platz */
@media (min-width: 1100px) {
    .sheet { max-width: 1040px; }
}
@media (min-width: 1500px) {
    .sheet { max-width: 1180px; }
}

/* Schnellvorgaben für den Antwortvorschlag */
.presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.preset { background: #f4f4f8; border: 1px solid transparent; border-radius: 99px;
          padding: 5px 13px; font-size: .81rem; font-weight: 600; color: #4a4a58;
          cursor: pointer; font-family: inherit; }
.preset:hover { background: var(--accent-soft); color: #5b21b6; border-color: var(--accent-line); }

/* --- Kampagnen --- */
.camp { display: flex; gap: 12px; align-items: center; padding: 12px 0;
        border-bottom: 1px solid #f3f4f6; }
.camp:last-child { border-bottom: none; }
.camp-info { flex: 1; min-width: 0; }
.camp-name { font-weight: 650; font-size: .95rem; color: var(--text); text-decoration: none; }
.camp-name:hover { color: var(--accent); }
.camp-meta { font-size: .81rem; color: var(--muted); margin-top: 2px; }
.camp-side { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px;
        padding: 10px 16px; font-size: .78rem; color: var(--muted); min-width: 92px; }
.stat-n { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text);
          line-height: 1.1; }

.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line);
                border-radius: 12px; }
table.grid { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.grid th { text-align: left; font-size: .71rem; text-transform: uppercase;
                letter-spacing: .04em; color: var(--faint); font-weight: 700;
                padding: 11px 12px; border-bottom: 1px solid var(--line);
                white-space: nowrap; }
table.grid td { padding: 11px 12px; border-bottom: 1px solid #f3f4f6;
                vertical-align: top; max-width: 280px; }
table.grid tr:last-child td { border-bottom: none; }
table.grid tr.review { background: #fffbeb; }
table.grid td.leer { color: var(--faint); }
.sub-cell { font-size: .78rem; color: var(--muted); }

/* Fragenzeile als Raster statt Flexbox: Die allgemeine Kartenregel
   weiter unten setzt jedes Feld auf volle Breite und hätte die Zeile
   umbrechen lassen. Ein Raster gibt die Spalten fest vor. */
.q-row { display: grid; grid-template-columns: 2.2fr 1.6fr auto auto;
         gap: 8px; margin-bottom: 8px; align-items: center; }
.q-row input[type=text], .q-row select { width: 100%; box-sizing: border-box; margin: 0; }
.q-row select { min-width: 110px; }
.q-row button { justify-self: end; }

@media (max-width: 720px) {
    .q-row { grid-template-columns: 1fr auto; }
    .q-row input[type=text]:first-child { grid-column: 1 / -1; }
}

.slot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        padding: 7px 0; font-size: .86rem; }
.slot-when { font-weight: 600; }

.reply-text { background: #fff; border: 1px solid var(--line); border-radius: 12px;
              padding: 16px; margin-top: 12px; }
.reply-text pre { white-space: pre-wrap; word-break: break-word; font-family: inherit;
                  font-size: .85rem; color: var(--muted); margin: 8px 0 12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 720px) {
    .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .q-row { flex-wrap: wrap; }
}

.draft-box { background: #faf9ff; border: 1px solid var(--accent-line);
             border-radius: 12px; padding: 16px; margin: 4px 0 14px; }
.draft-box textarea { width: 100%; box-sizing: border-box; font-family: inherit;
                      font-size: .9rem; line-height: 1.6; padding: 14px 16px;
                      min-height: 260px; resize: vertical; }

/* --- Breite Seiten: Kampagnen brauchen Platz für Texte und Tabellen --- */
body.wide .main { max-width: 1500px; }

/* --- Reiter --- */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin: 18px 0 20px;
        overflow-x: auto; }
.tab { background: none; border: none; border-bottom: 2px solid transparent;
       padding: 10px 16px; font-size: .9rem; font-weight: 600; color: var(--muted);
       cursor: pointer; font-family: inherit; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .cnt { display: inline-block; margin-left: 6px; background: #f2f2f7; color: var(--muted);
            border-radius: 99px; padding: 1px 7px; font-size: .74rem; }
.tab.active .cnt { background: var(--accent-soft); color: #5b21b6; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Einfacher Formatierer --- */
.editor-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
               background: #fff; }
.editor-bar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line);
              background: #fafafc; flex-wrap: wrap; }
.editor-bar button { background: none; border: 1px solid transparent; border-radius: 6px;
                     padding: 4px 9px; font-size: .84rem; color: var(--muted); cursor: pointer;
                     font-family: inherit; min-width: 30px; }
.editor-bar button:hover { background: #fff; border-color: var(--line); color: var(--text); }
.editor-bar .sep { width: 1px; background: var(--line); margin: 3px 5px; }
.editor-area { padding: 14px 16px; min-height: 190px; font-size: .92rem; line-height: 1.6;
               outline: none; }
.editor-area:focus { background: #fffefb; }
.editor-area p { margin: 0 0 10px; }
.editor-area ul, .editor-area ol { margin: 0 0 10px; padding-left: 22px; }
.editor-area:empty::before { content: attr(data-placeholder); color: var(--faint); }


/* Eingabefelder füllen die Breite ihrer Karte. Ohne diese Regel behalten
   Textfelder ihre Standardbreite von rund zwanzig Zeichen - das fällt
   erst auf, wenn irgendwo ein neues Feld dazukommt. */
.card input[type=text], .card input[type=password], .card input[type=email],
.card input[type=date], .card textarea, .card select {
    width: 100%; box-sizing: border-box;
}
.card .row input[type=text], .card .row select { width: auto; }
.card input[type=number] { width: 100%; max-width: 160px; }
.card input[type=time] { width: auto; }
.grid-2 input, .grid-2 select, .grid-4 input { width: 100%; box-sizing: border-box; }

/* Auswahl der angebotenen Zeitfenster */
.slot-list { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 4px;
             max-height: 420px; overflow-y: auto; background: #fff; }
.slot-day { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
            letter-spacing: .03em; padding: 10px 10px 4px; }
.slot-day:first-child { padding-top: 4px; }
.slot-pick { display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 10px;
             border-radius: 8px; font-weight: 400; font-size: .88rem; cursor: pointer; }
.slot-pick:hover { background: var(--accent-soft); }
.slot-pick input { margin: 0; }

/* Vorschau der Signatur */
.sig-preview { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 16px; }
.sig-img { width: 64px; height: 64px; border-radius: 32px; display: block; object-fit: cover; }

/* Überlagerungsfenster für den Zusage-Entwurf */
.modal-back { position: fixed; inset: 0; background: rgba(24, 22, 40, .55);
              display: flex; align-items: center; justify-content: center;
              padding: 20px; z-index: 900; overflow-y: auto; }
.modal-box { width: 100%; max-width: 780px; background: #faf9ff; border-radius: 16px;
             padding: 22px 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
             max-height: 92vh; overflow-y: auto; margin: auto; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.modal-head > div:first-child { flex: 1; }
.modal-close { background: none; border: none; font-size: 1.6rem; line-height: 1;
               color: var(--muted); cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--text); }

/* Gruppen in der Antwortliste */
.group-head { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
              color: var(--muted); font-weight: 700; margin: 22px 0 8px; }
.group-head .cnt { background: #f2f2f7; border-radius: 99px; padding: 1px 8px;
                   margin-left: 6px; font-size: .8rem; }
.card-done { opacity: .72; }
.card-done:hover { opacity: 1; }

/* Aufteilung nach Steuersätzen */
.steuer-tabelle { border: 1px solid var(--line); border-radius: var(--radius);
                  padding: 10px 12px; background: #fff; }
.st-kopf, .st-zeile { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
                      gap: 8px; align-items: center; }
.st-kopf { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
           color: var(--faint); font-weight: 700; padding: 0 0 6px; }
.st-kopf span { text-align: right; }
.st-kopf span:first-child { text-align: left; }
.st-zeile { padding: 4px 0; }
.st-zeile input { margin: 0; text-align: right; }
.st-name { font-size: .86rem; font-weight: 600; }
.st-summe { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.st-wert { text-align: right; font-size: .88rem; font-weight: 600; }
.st-warnung { background: var(--warn-bg); color: var(--warn); border-radius: 8px;
              padding: 9px 12px; font-size: .84rem; margin-top: 8px; }
@media (max-width: 640px) {
    .st-kopf { display: none; }
    .st-zeile { grid-template-columns: 1fr 1fr 1fr; }
    .st-name { grid-column: 1 / -1; }
}

/* Freie Terminangabe in der Antwortliste */
.frei-termin { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
               background: #fafaff; border: 1px solid var(--line); border-radius: 10px;
               padding: 9px 12px; margin-top: 10px; }
.frei-termin input { margin: 0; width: auto; }
.q-kopf { display: grid; grid-template-columns: 2.2fr 1.6fr auto auto; gap: 8px;
          font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
          color: var(--faint); font-weight: 700; padding: 0 0 6px; }
.q-kopf span:nth-child(3) { min-width: 110px; }
@media (max-width: 720px) { .q-kopf { display: none; } }

/* Empfänger bearbeiten */
.empf-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr auto;
             gap: 8px; align-items: end; margin-top: 8px; background: #fafaff;
             border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.empf-form input { width: 100%; box-sizing: border-box; margin: 0; }
.anrede-zeile { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px;
                align-items: center; padding: 5px 0; }
.anrede-zeile input { margin: 0; }
@media (max-width: 860px) {
    .empf-form, .anrede-zeile { grid-template-columns: 1fr; }
}

/* Rundmail-Vorschau */
.vorschau-kopf { display: flex; gap: 8px; align-items: center; margin: 16px 0 0;
                 padding-top: 12px; border-top: 1px solid var(--line); }
.vorschau-mail { background: #fff; border: 1px solid var(--line); border-radius: 12px;
                 padding: 14px 16px; margin-top: 10px; }
.vorschau-zeile { font-size: .86rem; margin-bottom: 4px; }
.vorschau-body { max-height: 300px; overflow-y: auto; }
.vorschau-text { white-space: pre-wrap; font-size: .9rem; line-height: 1.55; }
.vorschau-sig { margin-top: 14px; padding-top: 12px;
                border-top: 1px dashed var(--line); }
.vorschau-sig img { max-height: 70px; width: auto; }

/* Nie aussortieren */
.nie-btn { background: none; border: none; padding: 2px; cursor: pointer;
           color: #bbbdc7; align-self: flex-start; margin-top: 2px; line-height: 0;
           position: relative; }
.nie-btn:hover { color: #16a34a; }
.nie-dom .dom-zeichen { position: absolute; right: -3px; bottom: -3px; font-size: .62rem;
                        font-weight: 800; line-height: 1; background: #fff;
                        border-radius: 50%; padding: 0 1px; }

/* Auswahl im Teambereich */
.thread { position: relative; }
.tcheck { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; cursor: pointer; }
.team-bulk { display: flex; gap: 7px; align-items: center; padding: 10px 0 2px;
             border-top: 1px solid var(--line); margin-top: 8px; opacity: .55; }
.team-bulk.an { opacity: 1; }
.team-form { margin: 0; }

/* Dateistand - hilft beim Hochladen über den Browser */
.stand { text-align: center; font-size: .7rem; color: #c8cad3; padding: 20px 0 8px; }

/* Lange Zeichenketten ohne Leerzeichen brechen um, statt die Seite zu
   verbreitern. Gemeint sind vor allem die umgeschriebenen Adressen aus
   Outlook (eur01.safelinks.protection.outlook.com/?url=…): Eine einzige
   davon in einer Vorschau macht das Dokument breiter als der Bildschirm.
   Safari verkleinert dann die ganze Seite, bis sie hineinpaßt - alles
   wirkt geschrumpft, und rechts bleibt ein leerer Streifen.
   "anywhere" statt "break-word", weil nur diese Fassung auch in die
   Breitenberechnung von Flex- und Rasterfeldern eingeht. */
body { overflow-wrap: anywhere; }

/* Ausgenommen: Felder, in denen man selbst schreibt - dort stört ein
   Umbruch mitten im Wort beim Lesen des eigenen Texts. */
input, textarea, select { overflow-wrap: normal; }

/* Der Melder unten rechts, wenn die Seite doch breiter wird als das
   Fenster. Er erscheint nur im Fehlerfall. */
.breitmelder { margin: 0 auto 10px; max-width: 520px; font-size: .72rem;
               color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
               border-radius: 8px; padding: 7px 10px; text-align: center;
               word-break: break-all; }

/* Bereichsfreigaben in der Benutzerverwaltung */
.bereiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 8px 16px; background: #fafaff; border: 1px solid var(--line);
            border-radius: 10px; padding: 12px 14px; }

/* Rote Merker - ganz oben, unübersehbar */
.merker { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start;
          background: linear-gradient(180deg, #fff5f5, #fff);
          border: 1px solid #fecaca; border-radius: 18px;
          padding: 18px 20px; margin-bottom: 18px; }
.merker-eintrag { display: flex; gap: 12px; align-items: center; }
.merker-kreis { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
                background: #dc2626; color: #fff; border: none; cursor: pointer;
                font-size: 1.25rem; font-weight: 800; letter-spacing: .02em;
                box-shadow: 0 6px 18px rgba(220, 38, 38, .35);
                animation: merkerPuls 2.6s ease-in-out infinite; }
.merker-kreis:hover { filter: brightness(1.1); }
.merker-text { font-size: .84rem; line-height: 1.35; min-width: 0; }
.merker-text strong { font-size: .9rem; }
.merker-alter { color: #b91c1c; font-weight: 600; font-size: .78rem; margin-top: 2px; }
.merker-weg { background: none; border: none; color: #b9bbc6; font-size: 1.4rem;
              cursor: pointer; line-height: 1; padding: 0 2px; }
.merker-weg:hover { color: #dc2626; }

@keyframes merkerPuls {
    0%, 100% { box-shadow: 0 6px 18px rgba(220, 38, 38, .35); }
    50%      { box-shadow: 0 6px 26px rgba(220, 38, 38, .55); }
}

/* Fähnchen: dasselbe Maß wie die übrigen Symbole, kräftiges Rot - es
   steht für etwas, das nicht untergehen soll. */
.flag-btn { display: inline-flex; align-items: center; justify-content: center;
            width: 33px; height: 33px; border-radius: 9px; cursor: pointer;
            border: 1px solid var(--line); background: var(--card);
            color: #dc2626; flex-shrink: 0; padding: 0; }
.flag-btn svg { width: 21px; height: 21px; }
.flag-btn:hover { background: #fef2f2; border-color: #fecaca;
                  transform: translateY(-1px); }

/* Schon markiert: roter Rahmen und heller Grund. So sieht man es an der
   Mail selbst, nicht erst oben an den Kreisen. */
.flag-btn.an { border-color: #dc2626; background: #fee2e2; }
.flag-btn.an:hover { background: #fecaca; }
.ico-flag { color: #dc2626; }
.ico-flag:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
    .merker-kreis { animation: none; }
}

/* ============================================================
   Handy: App-Betrieb vom Startbildschirm
   ============================================================ */

/* Sicherheitsbereiche: Bei Geräten mit Aussparung reicht die Seite bis
   an den Rand, der Inhalt darf aber nicht darunter geraten. */
body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px) {
    /* Im App-Betrieb fehlt die Adressleiste - dafür ragt die Statusleiste
       des Geräts über die Seite. Oben Platz schaffen. Die Navigation
       heißt hier .sidebar und liegt auf dem Handy waagerecht oben. */
    .sidebar {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        position: sticky;
        top: 0;
        z-index: 40;
    }

    /* iOS vergrößert die Seite, sobald ein Eingabefeld unter 16px liegt.
       Das wirkt wie ein Fehler und lässt sich nur so verhindern. */
    input, select, textarea { font-size: 16px; }

    /* Knöpfe mit Fingern bedienbar machen: unter 40 Pixel trifft man
       daneben, besonders die kleinen Symbolknöpfe. */
    .mini, .ico, button, .nav-item { min-height: 40px; }
    .ico { width: 40px; }

    /* Fähnchen und Umschalter auf dasselbe Maß - sonst stehen sie
       neben den übrigen Symbolen zu klein da */
    .flag-btn, .skim { width: 40px; height: 40px; min-height: 40px; }
    .skim svg { width: 19px; height: 19px; }
    .flag-btn svg { width: 23px; height: 23px; }
    .nie-btn { min-height: 32px; min-width: 32px; }

    /* Tabellen umbrechen statt die Seite breit zu machen */
    .table-scroll { -webkit-overflow-scrolling: touch; }

    /* Die roten Merker nebeneinander, aber kleiner */
    .merker { gap: 14px; padding: 14px; }
    .merker-kreis { width: 54px; height: 54px; font-size: 1.05rem; }
    .merker-text { font-size: .8rem; }

    /* Sammelleisten am unteren Rand erreichbar halten */
    .bulkbar, .team-bulk { flex-wrap: wrap; gap: 6px; }
}

/* Im App-Betrieb: kein Textmarkieren beim Tippen auf Knöpfe, das wirkt
   sonst wie ein Hänger */
@media (display-mode: standalone) {
    button, .nav-item, .merker-kreis { -webkit-user-select: none; user-select: none; }
    body { overscroll-behavior-y: contain; }
}

/* Hinweis zum Einbauen auf dem Startbildschirm */
.apphinweis { display: none; gap: 10px; align-items: center; justify-content: center;
              background: var(--accent-soft); border: 1px solid var(--accent-line);
              border-radius: 12px; padding: 11px 14px; margin: 18px 0 4px;
              font-size: .84rem; color: #5b21b6; }
.apphinweis button { background: none; border: none; color: #7c3aed; font-size: 1.2rem;
                     cursor: pointer; line-height: 1; padding: 0 2px; }


/* Mailzeilen auf dem Handy: Text über die ganze Breite
   ============================================================
   Die Symbolknöpfe nebeneinander mit dem Text in einer Zeile
   lassen auf einem Telefon kaum Platz zum Lesen - drei Knöpfe
   belegten fast die halbe Breite. Deshalb oben die Knöpfe,
   darunter der Text über die volle Breite. */
@media (max-width: 640px) {
    .triage-item { gap: 8px; padding: 10px 11px; }

    /* Enger stellen, der Platz ist knapp */
    .ti-rechts { gap: 6px; }
    .ti-side { gap: 6px; }

    /* Betreff darf umbrechen statt abgeschnitten zu werden */
    .ti-subject { white-space: normal; }
    .ti-subject .openable { word-break: break-word; }
}

/* Beleg fotografieren */
.foto-karte { display: block; margin-bottom: 14px; }
.foto-karte.hat-datei { border-color: var(--accent); }
.foto-knopf { display: flex; gap: 10px; align-items: center; justify-content: center;
              border: 2px dashed var(--accent-line); border-radius: 12px;
              padding: 18px 14px; cursor: pointer; color: var(--accent);
              font-weight: 600; font-size: .9rem; background: #faf9ff; }
.foto-knopf:hover { background: var(--accent-soft); }
.foto-knopf input[type=file] { display: none; }
.hat-datei .foto-knopf { border-style: solid; background: var(--accent-soft); }
.neu-erfasst { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Umschalter "Zu überfliegen"
   ============================================================
   Das Kästchen trägt weiterhin die Auswahl für Sammelaktionen,
   sichtbar ist aber ein Symbol: Pfeil in eine Ablage. Nach unten
   heißt wegräumen, nach oben zurückholen. */
.skim { display: inline-flex; align-items: center; justify-content: center;
        width: 33px; height: 33px; border-radius: 9px; cursor: pointer;
        border: 1px solid var(--line); background: var(--card);
        color: var(--muted); flex-shrink: 0; }
.skim input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.skim svg { width: 17px; height: 17px; }
.skim:hover { color: var(--accent); border-color: var(--accent-line);
              transform: translateY(-1px); }

/* Ausgewählt: deutlich, aber ohne Alarm - es ist kein Fehler,
   sondern eine Einordnung */
.skim:has(input:checked) { background: var(--accent-soft); color: var(--accent); }

/* Richtung des Pfeils: nach unten zum Wegräumen, nach oben zum
   Zurückholen. Ohne Umweg über JavaScript, damit es auch beim
   Umschalten ohne Neuladen stimmt. */
.skim .pfeil-hoch { display: none; }
.skim:has(input:checked) .pfeil-runter { display: none; }
.skim:has(input:checked) .pfeil-hoch { display: inline; }

/* Fähnchen und Umschalter rechts, abgesetzt von den Aktionen links.
   Als Gruppe, damit sie beim Umbrechen zusammenbleiben und auf einer
   Linie stehen - einzeln rutschte der Umschalter in die nächste Zeile. */
/* Fähnchen und Umschalter sitzen im Symbolbereich rechts, unter den
   Aktionen. Zwei Reihen à zwei bis drei Symbolen statt einer langen
   Reihe - das lässt dem Text spürbar mehr Breite. */
.ti-rechts { display: flex; gap: 7px; align-items: center; flex-wrap: nowrap; }


/* Teamvorgänge: Aktionen rechts oben, Text fließt darunter
   ============================================================
   Dasselbe Prinzip wie im Posteingang. Vorher standen die Symbole
   in einer eigenen Spalte, wodurch der Text auf dem Handy nur noch
   ein Drittel der Breite hatte. */
.thread-actions { float: right; display: flex; gap: 6px; align-items: center;
                  margin: 0 0 6px 12px; }
.thread .body::after { content: ''; display: block; clear: both; }

@media (max-width: 640px) {
    .thread-actions { margin-left: 8px; gap: 5px; }
}

/* Antwort auf eine Termineinladung */
.termin-antwort { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.mini.ta-ja { background: var(--ok-bg); color: var(--ok); border-color: #86efac; }
.mini.ta-ja:hover { background: #bbf7d0; }
.mini.ta-nein { background: var(--warn-bg); color: var(--warn); border-color: #fecaca; }
.mini.ta-nein:hover { background: #fecaca; }

/* Beleg zuschneiden */
.zu-flaeche { position: relative; display: inline-block; max-width: 100%;
              line-height: 0; border-radius: 10px; overflow: hidden; }
.zu-flaeche canvas { max-width: 100%; height: auto; display: block; }
.zu-rahmen { position: absolute; border: 2px solid var(--accent); cursor: move;
             box-shadow: 0 0 0 9999px rgba(15, 12, 35, .45); touch-action: none; }
.zu-griff { position: absolute; width: 26px; height: 26px; background: var(--accent);
            border: 2px solid #fff; border-radius: 50%; touch-action: none; }
.zu-lo { left: -13px; top: -13px; cursor: nwse-resize; }
.zu-ro { right: -13px; top: -13px; cursor: nesw-resize; }
.zu-lu { left: -13px; bottom: -13px; cursor: nesw-resize; }
.zu-ru { right: -13px; bottom: -13px; cursor: nwse-resize; }

/* Beleg ansehen, ohne die App zu verlassen */
.schau { position: fixed; inset: 0; background: rgba(15, 12, 35, .78); z-index: 950;
         display: none; align-items: center; justify-content: center; padding: 12px; }
.schau.auf { display: flex; }
.schau-box { background: var(--card); border-radius: 14px; width: 100%; max-width: 900px;
             height: 92vh; display: flex; flex-direction: column; overflow: hidden;
             padding-top: env(safe-area-inset-top, 0px); }
.schau-kopf { display: flex; gap: 8px; align-items: center; padding: 12px 14px;
              border-bottom: 1px solid var(--line); }
.schau-inhalt { flex: 1; overflow: auto; background: #f3f2f8; }
.schau-inhalt iframe { width: 100%; height: 100%; border: none; }
.schau-inhalt img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.schau-seite { display: block; margin: 0 auto 10px; height: auto;
               box-shadow: 0 2px 10px rgba(0,0,0,.12); background: #fff; }
.schau-warte { text-align: center; color: var(--muted); font-size: .84rem;
               padding: 14px; margin: 0; }

/* Eigene Wünsche fürs Bild */
.bild-wunsch { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 260px; }
.bild-wunsch input { margin: 0; flex: 1; }
@media (max-width: 640px) { .bild-wunsch { flex-wrap: wrap; } }

/* Sicherungen aufräumen */
.aufraeumen { background: #faf9ff; border: 1px solid var(--accent-line);
              border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.aufraeumen label { cursor: pointer; }

/* Fußzeile auf der Anmeldeseite: an den unteren Rand, nicht neben die
   Box - die wird mittig nebeneinander ausgerichtet. */
.stand-fest { position: fixed; left: 0; right: 0; bottom: 0;
              padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

/* Einführung für neue Mitarbeiter */
.tour { position: fixed; inset: 0; background: rgba(15, 12, 35, .72); z-index: 960;
        display: flex; align-items: center; justify-content: center; padding: 16px; }
.tour-box { background: var(--card); border-radius: 18px; width: 100%; max-width: 440px;
            padding: 30px 28px 20px; box-shadow: var(--shadow); text-align: center;
            padding-top: calc(30px + env(safe-area-inset-top, 0px)); }
.tour-seite { display: none; }
.tour-seite.auf { display: block; animation: tourRein .25s ease; }
.tour-symbol { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px;
               background: var(--accent-soft); color: var(--accent);
               display: flex; align-items: center; justify-content: center; }
.tour-symbol svg { width: 30px; height: 30px; }
.tour-box h2 { font-size: 1.12rem; margin: 0 0 8px; }
.tour-box p { font-size: .92rem; color: #4b5563; line-height: 1.55; margin: 0;
              min-height: 104px; }
.tour-punkte { display: flex; gap: 6px; justify-content: center; margin: 18px 0 14px; }
.tour-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-punkt.auf { background: var(--accent); }
.tour-leiste { display: flex; gap: 8px; align-items: center;
               border-top: 1px solid var(--line); padding-top: 12px; }

@keyframes tourRein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tour-seite.auf { animation: none; } }

/* Einführung: mehrere Symbole je Seite */
.tour-liste { margin-top: 14px; text-align: left; display: grid; gap: 9px; }
.tour-zeile { display: grid; grid-template-columns: 34px auto 1fr; gap: 10px;
              align-items: center; }
.tour-ikon { width: 34px; height: 34px; border-radius: 9px; background: #faf9ff;
             border: 1px solid var(--line); color: var(--accent);
             display: flex; align-items: center; justify-content: center; }
.tour-ikon svg { width: 18px; height: 18px; }
.tour-wort { font-weight: 650; font-size: .85rem; white-space: nowrap; }
.tour-was { font-size: .8rem; color: var(--muted); line-height: 1.35; }

/* Wechsel: die neue Seite kommt aus der Richtung, in die geblättert wird */
.tour-seite.rein-rechts { animation: tourRechts .28s cubic-bezier(.2, .7, .3, 1); }
.tour-seite.rein-links  { animation: tourLinks .28s cubic-bezier(.2, .7, .3, 1); }

@keyframes tourRechts { from { opacity: 0; transform: translateX(26px); } }
@keyframes tourLinks  { from { opacity: 0; transform: translateX(-26px); } }

@media (prefers-reduced-motion: reduce) {
    .tour-seite.rein-rechts, .tour-seite.rein-links { animation: none; }
}

/* Tankbeleg: Zusammenfassung statt Formular */
.tank-kurz { background: #faf9ff; border: 1px solid var(--accent-line);
             border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.tank-zeile { font-size: .86rem; color: var(--muted); margin-top: 3px; }

/* ============================================================
   Mailfenster zweispaltig: Mail links, Antwort rechts
   ============================================================
   Nur ab 1000 Punkten Breite - darunter wäre jede Spalte zu
   schmal zum Lesen, und auf dem Handy erst recht. Dort bleibt
   es wie gehabt untereinander. */
@media (min-width: 1000px) {
    .sheet-breit { max-width: min(2400px, 96vw); width: 96vw; height: 92vh;
                   display: grid;
                   /* Hälfte und Hälfte: Mail und Antwort gleich breit. */
                   grid-template-columns: 1fr 1fr;
                   grid-template-rows: auto 1fr; column-gap: 0; }

    .sheet-breit .sheet-head { grid-column: 1 / -1; }
    .sheet-breit .task-info { grid-column: 1 / -1; }

    .sheet-breit .sheet-body { grid-column: 1; grid-row: 2; overflow: auto;
                               border-right: 1px solid var(--line); }

    /* Die Antwort steht rechts und scrollt für sich - so bleibt der
       Senden-Knopf erreichbar, auch wenn die Mail lang ist. */
    .sheet-breit .sheet-reply { grid-column: 2; grid-row: 2; overflow: auto;
                                border-top: none; }

    /* Der Mailinhalt füllt die linke Spalte aus. Ohne das bliebe unter
       einer kurzen Mail die halbe Spalte leer - und bei einer langen
       wurde sie abgeschnitten, weil die Höhe zu früh gerechnet wurde. */
    .sheet-breit .sheet-body { display: flex; flex-direction: column;
                               padding-bottom: 6px; }
    .sheet-breit .sheet-body .mail-frame { flex: 1; height: auto; min-height: 0; }


    /* Die Anhangsansicht nimmt beide Spalten - ein PDF in einer halben
       Spalte liest niemand */
    .sheet-breit .file-pane { grid-column: 1 / -1; grid-row: 2; }
}


/* Im zweispaltigen Fenster soll das Antwortfeld die Höhe ausfüllen
   ============================================================
   Sonst bleibt unter einem vierzeiligen Feld die halbe Spalte leer,
   während man zum Schreiben scrollen muss. */
@media (min-width: 1000px) {
    .sheet-breit .sheet-reply { display: flex; flex-direction: column; }

    /* Vorschläge, Wunschfeld und Leiste behalten ihre Höhe … */
    .sheet-breit .sheet-reply .presets,
    .sheet-breit .sheet-reply .draft-row,
    .sheet-breit .sheet-reply .frei-zeile,
    .sheet-breit .sheet-reply .frei-panel,
    .sheet-breit .sheet-reply .reply-bar,
    .sheet-breit .sheet-reply .reply-status { flex: 0 0 auto; }

    /* … das Textfeld bekommt den Rest */
    .sheet-breit .sheet-reply #mvText { flex: 1; min-height: 160px; resize: none; }
}

/* Regelmäßige Aufgaben bei den Merkern: gleicher Platz, andere Farbe.
   Rot steht für "darf nicht untergehen", hier geht es um einen Termin,
   der heute dran ist - das soll man unterscheiden können. */
.merker-kreis.merker-routine { background: #7c3aed; text-decoration: none;
                               display: flex; align-items: center;
                               justify-content: center; animation: none;
                               box-shadow: 0 6px 18px rgba(124, 58, 237, .32); }
.merker-kreis.merker-routine:hover { filter: brightness(1.1); }
.routine-alter { color: #6d28d9; }
.merker-kreis.merker-routine svg { width: 28px; height: 28px; }

/* Roter Merker im Mailfenster */
.sheet-head .ico-flag { color: #dc2626; }
.sheet-head .ico-flag:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sheet-head .ico-flag.an { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }

/* Adressvorschläge beim Schreiben */
.adr-feld { position: relative; }
.adr-liste { position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
             background: var(--card); border: 1px solid var(--line);
             border-radius: 10px; box-shadow: var(--shadow); overflow: hidden;
             max-height: 280px; overflow-y: auto; }
.adr-liste:empty { display: none; }
/* Farbe ausdrücklich setzen: Die Grundregel für Knöpfe färbt die
   Schrift weiß - in der Vorschlagsliste wäre sie damit unsichtbar. */
.adr-treffer { display: flex; gap: 8px; align-items: baseline; width: 100%;
               text-align: left; background: none; border: none; cursor: pointer;
               padding: 9px 12px; font-size: .88rem; border-radius: 0;
               color: var(--text); }
.adr-treffer:hover, .adr-treffer.auf { background: var(--accent-soft);
                                       color: var(--text); }
.adr-name { font-weight: 600; color: var(--text); }
.adr-mail { color: var(--muted); font-size: .8rem; }
.adr-quelle { margin-left: auto; font-size: .7rem; color: var(--muted);
              background: #f3f2f8; border-radius: 99px; padding: 1px 8px; }

/* DATEV-Weiterleitung im Mailfenster.
   Grün wie das Logo des Herstellers - dadurch findet man den Knopf
   auch dann, wenn man die Beschriftung nicht liest. */
.sheet-head .ico-datev { width: auto; padding: 0 10px; font-size: .72rem;
                         font-weight: 700; letter-spacing: .04em;
                         color: #76b82a; border-color: #cfe8a8; }
.sheet-head .ico-datev:hover { background: #f3faea; border-color: #76b82a;
                               color: #5a8f20; }
.sheet-head .ico-datev.an { background: #76b82a; border-color: #76b82a; color: #fff; }

/* Bilder an eine Mail hängen */
.bild-zone { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
             border: 2px dashed var(--line); border-radius: 10px;
             padding: 10px 14px; margin-top: 10px; }
.bild-zone.drueber { border-color: var(--accent); background: #faf9ff; }
.bild-waehlen { display: inline-flex; align-items: center; cursor: pointer;
                background: var(--card); border: 1px solid var(--line);
                border-radius: 8px; padding: 6px 12px; font-size: .85rem;
                font-weight: 600; color: var(--muted); margin: 0; }
.bild-waehlen:hover { color: var(--accent); border-color: var(--accent-line); }
.bild-waehlen input { display: none; }
.bild-liste { display: grid; gap: 8px; margin-top: 10px; }
.bild-liste:empty { display: none; }
.bild-karte { display: flex; gap: 12px; align-items: center;
              border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.bild-karte img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px;
                  background: #f3f2f8; }

/* Anhänge ohne Bild: Die Endung an derselben Stelle wie sonst die
   Vorschau - ein leeres graues Rechteck sagt nichts aus. */
.datei-art { width: 64px; height: 48px; border-radius: 6px; background: #f3f2f8;
             border: 1px solid var(--line); color: var(--accent);
             display: flex; align-items: center; justify-content: center;
             font-size: .72rem; font-weight: 700; letter-spacing: .03em;
             flex-shrink: 0; }

.bild-name { flex: 1; font-size: .85rem; line-height: 1.3; word-break: break-word; }

/* Immer aussortieren - Gegenstück zum Doppelhaken */
/* Deutlicher als der Doppelhaken: Dieser Knopf steht im Posteingang
   zwischen Text und Symbolen und ging in Hellgrau unter. */
.immer-btn { color: #9ca3af; }
.immer-btn:hover { color: var(--accent); }