/* Bestattungsportal - Stil angelehnt an die Pacemo-Optik */
:root {
    --gruen-dunkel: #2B3618;
    --gruen-aktiv: #3C4A24;
    --gruen-hell: #E7EDDA;
    --creme: #FAF7E8;
    --weiss: #FFFFFF;
    --text: #22261A;
    --rand: #E3E0D2;
    --rot: #C0392B;
    --gelb: #B8860B;
    --gruen: #2E7D32;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--creme);
    color: var(--text);
    font-size: 14px;
}

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

/* ---------- Sidebar ---------- */
.sidebar {
    width: 220px;
    background: var(--gruen-dunkel);
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.brand {
    font-size: 21px;
    font-weight: 700;
    padding: 20px 18px 14px;
    letter-spacing: .3px;
}
.brand span { font-weight: 300; font-style: italic; opacity: .8; }
.sidebar nav { flex: 1; overflow-y: auto; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #E9EDDC;
    text-decoration: none;
    padding: 10px 18px;
    border-left: 3px solid transparent;
    font-size: 13.5px;
    transition: background .12s;
}
.nav-ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar nav a.aktiv .nav-ico { opacity: 1; }
.sidebar nav a:hover { background: rgba(255,255,255,.07); }
.sidebar nav a.aktiv {
    background: var(--gruen-hell);
    color: var(--gruen-dunkel);
    border-left-color: var(--gruen-dunkel);
    font-weight: 600;
    border-radius: 0 20px 20px 0;
}
.userbox {
    margin: 12px;
    padding: 12px;
    background: var(--weiss);
    color: var(--text);
    border-radius: 8px;
    font-size: 12.5px;
}
.userbox a { color: var(--rot); text-decoration: none; }

/* ---------- Hauptbereich ---------- */
.main { flex: 1; padding: 26px 32px; min-width: 0; }
.seitentitel { font-size: 22px; margin: 0 0 18px; color: var(--gruen-dunkel); }

.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash-ok { background: #E4F3DF; color: #28510F; }
.flash-fehler { background: #FDE3E3; color: #922; }
.flash-warnung { background: #FCF3D7; color: #7A5A00; }

/* ---------- Karten / Tabellen ---------- */
.karte {
    background: var(--weiss);
    border-radius: 10px;
    border: 1px solid var(--rand);
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    padding: 20px 24px;
    margin-bottom: 18px;
}
.karte h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin: 0 0 16px;
    color: var(--gruen-dunkel);
    border-bottom: 1px solid var(--rand);
    padding-bottom: 10px;
}

table.liste { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: 10px; overflow: hidden; }
table.liste th, table.liste td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--rand); }
table.liste th { font-size: 12px; text-transform: none; color: #555; background: #F6F7F9; }
table.liste tr:hover td { background: #F7F8FA; }
table.liste tr.klickbar { cursor: pointer; }
table.liste tr.klickbar:hover td { background: var(--gruen-hell); }
table.liste td.aktion { text-align: right; white-space: nowrap; width: 1%; }
.btn-loeschen { background: none; border: 1px solid var(--rand); color: #B0392B; border-radius: 6px;
                padding: 4px 9px; font-size: 13px; cursor: pointer; line-height: 1; }
.btn-loeschen:hover { background: var(--rot); color: #fff; border-color: var(--rot); }
td.r, th.r { text-align: right; }

.badge { padding: 3px 9px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.badge-grau { background: #ECECEC; color: #555; }
.badge-gelb { background: #FCF3D7; color: var(--gelb); }
.badge-gruen { background: #E4F3DF; color: var(--gruen); }
.badge-rot { background: #FDE3E3; color: var(--rot); }

/* ---------- Formulare ---------- */
.formzeile { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.feld { flex: 1; min-width: 160px; }
.feld label { display: block; font-size: 11.5px; font-weight: 600; color: #6B6857; margin-bottom: 5px; }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld select, .feld textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #CCC8B8;
    border-radius: 7px;
    background: #fff;
    font: inherit;
    transition: border-color .12s, box-shadow .12s;
}
/* Radio-Buttons und Checkboxen behalten ihre native Groesse/Darstellung */
.feld input[type="radio"], .feld input[type="checkbox"] {
    width: auto;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    vertical-align: middle;
}
.feld input:not([type="radio"]):not([type="checkbox"]):focus, .feld select:focus, .feld textarea:focus {
    outline: none;
    border-color: var(--gruen-aktiv);
    box-shadow: 0 0 0 3px rgba(60, 74, 36, .14);
}
.feld textarea { min-height: 70px; resize: vertical; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--gruen-dunkel);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.10);
    transition: background .15s, transform .08s, box-shadow .15s;
}
.btn:hover { background: var(--gruen-aktiv); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.btn svg { width: 16px; height: 16px; }
.btn-hell { background: #fff; color: var(--gruen-dunkel); border: 1px solid var(--gruen-dunkel); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn-hell:hover { background: var(--gruen-hell); }
.btn-rot { background: var(--rot); }
.btn-rot:hover { background: #a93226; }
.btn-klein { padding: 5px 10px; font-size: 12px; }

.kopfzeile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.kopfzeile .filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kopfzeile .filter input, .kopfzeile .filter select { padding: 7px 10px; border: 1px solid #CCC8B8; border-radius: 6px; }

/* ---------- Dashboard-Kacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kachel { background: var(--weiss); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.kachel .zahl { font-size: 26px; font-weight: 700; color: var(--gruen-dunkel); }
.kachel .label { font-size: 12.5px; color: #666; }

/* ---------- Tabs (Pill-Leiste) ---------- */
.tabs { display: flex; gap: 5px; background: var(--weiss); padding: 6px; border-radius: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-bottom: 22px; flex-wrap: wrap; width: max-content; max-width: 100%; }
.tabs a, .tabs .deaktiviert { padding: 8px 16px; border-radius: 8px; color: #5A5A4E; text-decoration: none; font-size: 13.5px; white-space: nowrap; }
.tabs a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.tabs a.aktiv { background: var(--gruen-dunkel); color: #fff; font-weight: 600; }
.tabs a.aktiv:hover { background: var(--gruen-dunkel); color: #fff; }
.tabs .deaktiviert { color: #BDB8A6; cursor: not-allowed; }

/* ---------- Klappbare Abschnitte (Detailseiten) ---------- */
details.abschnitt { background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px;
                    margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
details.abschnitt summary { cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: 14px;
                            color: var(--gruen-dunkel); list-style: none; display: flex; align-items: center; gap: 10px; }
details.abschnitt summary::-webkit-details-marker { display: none; }
details.abschnitt summary::after { content: "\25BE"; margin-left: auto; color: #A8A492; transition: transform .15s; }
details.abschnitt[open] summary::after { transform: rotate(180deg); }
details.abschnitt .inhalt { padding: 16px 20px 18px; border-top: 1px solid var(--rand); }
.zaehler { background: var(--gruen-hell); color: var(--gruen-dunkel); border-radius: 12px;
           padding: 2px 10px; font-size: 11.5px; font-weight: 600; }
.detailgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px 18px; }
.detailgrid .feld { min-width: 0; max-width: none; }

/* Wunsch-/Angaben-Bloecke: sauberes Raster, jede Zelle gleich ausgerichtet,
   keine Ueberlappungen trotz unterschiedlicher Feldhoehen (Dropdown/Radio/Textarea). */
.wunsch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 18px; align-items: start; }
.wunsch-grid .feld { min-width: 0; max-width: none; width: 100%; margin: 0; align-self: start; flex: none !important; }
.wunsch-grid .feld-wrapper { min-width: 0; width: 100%; }
/* Felder mit Textarea (z.B. Traueranzeige, Benoetigte Unterlagen, Dekoration) ueber die volle Breite */
.wunsch-grid .feld-voll, .wunsch-grid .feld:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .wunsch-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .wunsch-grid .feld-voll, .wunsch-grid .feld:has(textarea) { grid-column: 1 / -1; }
}

/* ---------- Kopfkarte (Vorgangs-Kopf wie Pacemo) ---------- */
.kopfkarte { background: var(--weiss); border: 1px solid var(--rand); border-radius: 10px;
             box-shadow: 0 1px 3px rgba(0,0,0,.04); padding: 18px 24px; margin-bottom: 16px;
             display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kopfkarte .kk-name { font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.kopfkarte .kk-name .kk-datum { font-size: 14px; font-weight: 600; color: #6B6857; margin-left: 10px; }
.kopfkarte .kk-unter { font-size: 13px; color: #6B6857; margin-top: 5px; }
.kopfkarte .kk-meta { text-align: right; font-size: 12.5px; color: #6B6857; line-height: 1.55; }
.kopfkarte .kk-meta strong { color: var(--gruen-dunkel); font-size: 14px; }

/* ---------- Status-Workflow (Pfeilleiste) ---------- */
.workflow { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.workflow form { display: flex; flex: 1; min-width: 110px; }
.workflow button, .workflow .wf-statisch {
    flex: 1; border: 0; padding: 9px 8px 9px 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
    background: #ECE9DA; color: #8A8674; cursor: pointer; text-align: center; white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.workflow form:first-child button { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.workflow form:last-child button { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 6px 6px 0; }
.workflow button:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.workflow button.erledigt { background: var(--gruen-dunkel); color: #E9EDDC; }
.workflow button.aktuell { background: var(--gruen-aktiv); color: #fff; }
.workflow .wf-statisch { cursor: default; }
.workflow .wf-statisch.erledigt { background: var(--gruen-dunkel); color: #E9EDDC; }
.workflow .wf-statisch.aktuell { background: var(--gruen-aktiv); color: #fff; }

/* ---------- Zweispaltiges Karten-Layout ---------- */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .zweispaltig { grid-template-columns: 1fr; } }
.zweispaltig .karte { margin-bottom: 0; }
.kartenabstand { margin-top: 18px; }

/* ---------- Kalender ---------- */
.kal { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; table-layout: fixed; }
.kal th { background: #FCFAF0; padding: 8px; font-size: 12px; border: 1px solid var(--rand); }
.kal td { border: 1px solid var(--rand); vertical-align: top; height: 92px; padding: 5px; font-size: 12px; }
.kal td.fremd { background: #F6F4E8; color: #AAA; }
.kal td.heute { background: var(--gruen-hell); }
.kal .tag-nr { font-weight: 600; }
.kal .termin { display: flex; align-items: center; gap: 4px; background: var(--gruen-dunkel); color: #fff; border-radius: 4px; padding: 2px 5px; margin-top: 3px; text-decoration: none; font-size: 11px; }
.kal .termin-t { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kal .termin > form { flex: 0 0 auto; }
.kal .termin-x { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 4px; width: 16px; height: 16px; line-height: 1; font-size: 13px; cursor: pointer; padding: 0; }
.kal .termin-x:hover { background: var(--rot); }
.kal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }

/* ---------- Statistik-Balken ---------- */
.balken-wrap { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: 10px 0; }
.balken { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.balken .saeule { width: 70%; background: var(--gruen-dunkel); border-radius: 4px 4px 0 0; min-height: 2px; }
.balken .bl { font-size: 10.5px; color: #666; margin-top: 5px; text-align: center; }
.balken .bw { font-size: 10.5px; color: #333; margin-bottom: 3px; }

/* ---------- Sonstiges ---------- */
.warnung-niedrig { color: var(--rot); font-weight: 700; }
.hinweis { font-size: 12.5px; color: #777; }
a.tlink { color: var(--gruen-dunkel); }

/* ---------- Responsiv: Tablet/Smartphone ---------- */
@media (max-width: 900px) {
    .app { flex-direction: column; }
    .sidebar {
        width: 100%;
        flex-direction: column;
        box-shadow: 0 2px 10px rgba(0,0,0,.18);
    }
    .brand { padding: 13px 16px 8px; font-size: 19px; }
    .zurueck-link { padding: 12px 16px 2px; }
    .sidebar nav {
        flex: none;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 12px 12px;
    }
    .sidebar nav a {
        white-space: nowrap;
        border-left: none;
        border-radius: 999px;
        padding: 8px 14px;
        background: rgba(255,255,255,.07);
        font-size: 13px;
    }
    .sidebar nav a.aktiv { border-radius: 999px; }
    .sidebar .nav-gruppe { display: none; }
    /* Seite nicht seitlich verrutschen lassen (nur die Navi-Leiste darf horizontal scrollen) */
    html, body { overflow-x: hidden; }
    .app, .main { max-width: 100%; }
    /* Trauerdruck auf dem Handy: Menuepunkt bleibt sichtbar; die Unterpunkte
       (Traueranzeigen, Sterbebildchen, Liedblaetter) reihen sich flach als Pillen
       daneben ein - kein ueberlappender Aufklapp-Kasten. */
    .sidebar nav .nav-druck {
        display: flex; flex-direction: row; gap: 6px;
        background: none; padding: 0; border: none;
    }
    .sidebar nav .nav-druck > summary {
        white-space: nowrap; border-radius: 999px; padding: 8px 14px;
        background: rgba(255,255,255,.07); font-size: 13px; list-style: none;
    }
    .sidebar nav .nav-druck > summary::after { display: none !important; }
    .sidebar nav .nav-druck .nav-unter {
        display: flex !important; flex-direction: row; gap: 6px;
    }
    .sidebar nav .nav-unter a {
        padding-left: 14px;
        white-space: nowrap;
        border-radius: 999px;
        background: rgba(255,255,255,.07);
        font-size: 13px;
    }
    .userbox { margin: 0 12px 10px; padding: 7px 11px; font-size: 11.5px; line-height: 1.45; }
    .main { padding: 16px 14px 34px; }
    .seitentitel { font-size: 19px; margin-bottom: 14px; }

    /* Auf Tablets bleiben die Felder in einer flexiblen Zeile und brechen nur bei
       Bedarf um - so stehen schmale Felder (Reihe, Folge, Grabtiefe ...) weiter
       nebeneinander statt einzeln untereinander mit grossen Luecken. */
    .formzeile { gap: 10px 12px; }

    .kopfkarte { flex-direction: column; gap: 10px; padding: 16px; }
    .kopfkarte .kk-meta { text-align: left; }

    .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
    .karte { padding: 16px; }

    .filter-pacemo { flex-direction: column; align-items: stretch; }
    .filter-pacemo .filterfeld input,
    .filter-pacemo .filterfeld select { min-width: 0; width: 100%; }

    /* Tabellen horizontal scrollbar machen statt das Layout zu sprengen */
    table.liste, table.liste-sterbefaelle {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* Kalender: lesbar halten - Mindestbreite + waagerecht scrollen im Kalender selbst */
    .kal { min-width: 720px; }
    .kal td { height: 78px; font-size: 12px; }
    .kal .termin { font-size: 11px; }

    .ereignis > summary { grid-template-columns: 30px 1fr auto; gap: 8px; padding: 13px 12px; }
    .ereignis-zeit { display: none; }
    .ereignis .inhalt { padding: 4px 12px 18px; }
    .kacheln { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

    /* Eingaben: 16px verhindert den automatischen Zoom von iOS beim Antippen */
    input, select, textarea { font-size: 16px !important; }
    /* Groessere, gut treffbare Schaltflaechen */
    .btn { min-height: 42px; }
    .btn-klein { min-height: 34px; padding: 6px 12px; }
    /* Suchfelder (Musik, Pakete, Listen) volle Breite */
    form input[name="s"] { min-width: 0 !important; width: 100%; }
    /* Inline-Bearbeitungszeilen (z.B. Friedhofsgebuehren) sauber umbrechen */
    td form { flex-wrap: wrap; }
    td form input { min-width: 0 !important; flex: 1 1 150px; }
    /* Musik-Player: Spul-Leiste behaelt Greifflaeche, Leiste darf umbrechen */
    #bp-mp-seek { min-width: 110px; }
}

/* Smartphone-Feinschliff */
@media (max-width: 640px) {
    .formzeile { flex-direction: column; gap: 11px; }
    .formzeile .feld { min-width: 0 !important; max-width: none !important; width: 100%; }
    .main { padding: 12px 10px 30px; }
    .karte { padding: 13px 12px; border-radius: 12px; }
    .seitentitel { font-size: 17.5px; }
    h1 { font-size: 19px; }
    h2 { font-size: 16px; }
    .btn { padding: 10px 16px; }
    table.liste td, table.liste th { padding: 8px 8px; font-size: 13px; }
    .sidebar nav a { font-size: 12.5px; padding: 8px 12px; }
    .brand { font-size: 17px; }
    .kacheln { grid-template-columns: 1fr 1fr; }
    #bp-mp-status { font-size: 12.5px; }
    .tabs a, .tabs .deaktiviert { padding: 8px 12px; font-size: 13px; }
    .hinweis { font-size: 12.5px; }
}
@media print {
    .sidebar, .btn, .kopfzeile .filter { display: none !important; }
    .main { padding: 0; }
    body { background: #fff; }
}

/* ---------- Moderne Feinheiten ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.btn-umriss, .tdo-wohnadr {
    transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-umriss:hover, .tdo-wohnadr:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0,0,0,.10); }
.btn-umriss:active, .tdo-wohnadr:active { transform: translateY(0); box-shadow: none; }
.karte { box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 8px 24px -16px rgba(0,0,0,.12); }
.feld input:not([type="radio"]):not([type="checkbox"]):hover:not(:focus), .feld select:hover:not(:focus), .feld textarea:hover:not(:focus) { border-color: #b4ae98; }
.tabs a { transition: background .12s, color .12s; }
table.liste tr td, table.liste-sterbefaelle tr td { transition: background .1s; }
.badge { display: inline-flex; align-items: center; }

/* ---------- Einstellungs-Seitenleiste ---------- */
.zurueck-link { display: block; color: #C9CFB8; text-decoration: none; padding: 16px 18px 4px; font-size: 13px; }
.zurueck-link:hover { color: #fff; }
.nav-gruppe { padding: 14px 18px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: #8E967A; }

/* ---------- Platzhalter-Panel (Textbaustein-Editor) ---------- */
.ph-gruppe { margin-bottom: 12px; padding: 8px 10px; background: #FBFAF2; border-radius: 0 8px 8px 0; }
.ph-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ph-btn { display: inline-block; margin: 0 4px 5px 0; padding: 4px 10px; font-size: 12px; border: 1px solid var(--rand);
          border-radius: 14px; background: var(--weiss); cursor: pointer; color: var(--text); font-family: inherit; }
.ph-btn:hover { background: var(--gruen-hell); border-color: var(--gruen-aktiv); color: var(--gruen-dunkel); }

/* Produkt-Autovervollstaendigung im Rechnungs-/Angebots-Editor */
.pos-produkt-zelle { position: relative; }
.pos-produkt-such { width: 100%; }
.pos-vorschlaege {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid #c9c3ad;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    max-height: 260px;
    overflow-y: auto;
}
.pos-vorschlag {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
}
.pos-vorschlag:hover { background: #EFece0; }
.pos-vorschlag .pv-name { color: #2B3618; }
.pos-vorschlag .pv-preis { color: #5a6b3b; white-space: nowrap; }
.pos-vorschlag-leer { padding: 7px 10px; font-size: 12px; color: #888; font-style: italic; }

/* ---------- Sterbefaelle-Liste im Pacemo-Stil ---------- */
.filter-pacemo { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-pacemo .filterfeld { display: flex; flex-direction: column; gap: 4px; }
.filter-pacemo .filterfeld label { font-size: 12px; font-weight: 600; color: #4A4A3C; }
.filter-pacemo .filterfeld input,
.filter-pacemo .filterfeld select {
    padding: 9px 12px; border: 1px solid #D8D4C4; border-radius: 8px; background: #fff;
    font-size: 13.5px; color: var(--text); min-width: 150px;
}
.filter-pacemo .filterfeld-suche input { min-width: 180px; }
.filter-pacemo .filterfeld input:focus,
.filter-pacemo .filterfeld select:focus { outline: none; border-color: var(--gruen-aktiv); }
.filter-reset { align-self: center; margin-bottom: 8px; color: #999; text-decoration: none;
    font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.filter-reset:hover { background: #eee; color: var(--rot); }

/* Wiederverwendbarer Listen-Kopf im Pacemo-Stil (Sterbefaelle/Vorsorgen/Angebote/Rechnungen) */
.listenkopf { display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rand); flex-wrap: wrap; gap: 12px; }
.listenkopf h1 { font-size: 30px; font-weight: 800; margin: 0; color: var(--text); letter-spacing: -.5px; }
.listenkopf .kopf-aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.listenfilter { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
    flex-wrap: wrap; margin-bottom: 16px; }
.listen-ansicht { display: flex; align-items: center; gap: 10px; }
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid #D8D4C4;
    border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 600; color: #4A4A3C; white-space: nowrap; }

table.liste-sterbefaelle th { font-weight: 700; color: #3A3A2C; padding-top: 13px; padding-bottom: 13px; }
table.liste-sterbefaelle td { padding-top: 14px; padding-bottom: 14px; }
table.liste-sterbefaelle .spalte-check { width: 38px; text-align: center; padding-left: 14px; padding-right: 0; }
table.liste-sterbefaelle .spalte-check input { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
table.liste-sterbefaelle .spalte-menue { width: 44px; text-align: center; }

a.sort-kopf { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
a.sort-kopf:hover { color: var(--gruen-aktiv); }
.sort-pfeil { font-size: 10px; color: #B7B3A2; }
a.sort-kopf.sortiert .sort-pfeil { color: var(--gruen-aktiv); }

.zeilenmenue { position: relative; display: inline-block; }
.menue-knopf { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1;
    color: #8A8A7A; padding: 4px 8px; border-radius: 6px; }
.menue-knopf:hover { background: #EFEDE2; color: var(--text); }
.menue-popup { display: none; position: absolute; right: 0; top: 100%; z-index: 30;
    background: #fff; border: 1px solid var(--rand); border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0,0,0,.13); min-width: 150px; padding: 5px; text-align: left; }
.menue-popup.auf { display: block; }
.menue-popup a, .menue-popup .menue-loeschen, .menue-popup .menue-kopieren { display: block; width: 100%; text-align: left;
    padding: 9px 12px; border-radius: 6px; font-size: 13.5px; color: var(--text);
    text-decoration: none; background: none; border: none; cursor: pointer; }
.menue-popup a:hover, .menue-popup .menue-kopieren:hover { background: var(--gruen-hell); }
.menue-popup .menue-loeschen { color: var(--rot); }
.menue-popup .menue-loeschen:hover { background: #FDE3E3; }

/* ---------- Sterbefaelle-Liste: Pacemo-Feinschliff ---------- */
table.liste-sterbefaelle { border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
table.liste-sterbefaelle th { background: #FCFBF4; color: #3A3A2C; font-weight: 700; font-size: 12.5px;
    border-bottom: 1px solid var(--rand); padding: 14px 14px; }
table.liste-sterbefaelle td { border-bottom: 1px solid #EFEDE3; padding: 18px 14px; font-size: 14px; color: #2C2E22; }
table.liste-sterbefaelle tr:last-child td { border-bottom: none; }
table.liste-sterbefaelle tr.klickbar:hover td { background: #F6F5EC; }
table.liste-sterbefaelle tr.klickbar:first-of-type td { background: #ECEFE6; }
table.liste-sterbefaelle tr.klickbar:first-of-type:hover td { background: #E5EADD; }
table.liste-sterbefaelle .tlink { font-weight: 600; }

/* Unter-Abschnitte im Ereignis-Editor (Leben und Familie) */
.abschnitt-titel { font-size: 12.5px; font-weight: 700; color: var(--gruen-aktiv); margin: 16px 0 8px; }
.abschnitt .inhalt > .zweispaltig { gap: 32px; }

/* Ereignis-Editor (Leben und Familie) im Pacemo-Stil */
.karte-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.karte-kopf h2 { margin:0; }
.btn-umriss { background:var(--weiss); border:1px solid var(--rand); border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
.btn-umriss:hover { border-color:var(--gruen); }
.ereignisliste { border:1px solid var(--rand); border-radius:10px; overflow:hidden; margin-top:12px; }
.ereignis { border-bottom:1px solid var(--rand); }
.ereignis:last-child { border-bottom:none; }
.ereignis > summary { list-style:none; display:grid; grid-template-columns:40px 1.1fr 1fr 70px; align-items:center; gap:14px; padding:15px 18px; cursor:pointer; }
.ereignis > summary::-webkit-details-marker { display:none; }
.ereignis-toggle { width:22px; height:22px; border:1.5px solid #c4c4b8; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; color:var(--text); }
.ereignis-toggle::before { content:'+'; }
.ereignis[open] .ereignis-toggle::before { content:'\2212'; }
.ereignis-name { font-weight:700; font-size:15px; }
.ereignis-datum { font-weight:700; font-size:13.5px; }
.ereignis-datum small { display:block; font-weight:400; color:#9a9a90; font-size:12px; }
.ereignis-zeit { color:#9a9a90; font-size:13px; text-align:right; }
.ereignis[open] > summary { background:rgba(0,0,0,.015); }
.ereignis .inhalt { padding:4px 18px 22px; }

/* Todesort: Live-Kontaktsuche + Wohnadresse-Button */
.tdo-such-zelle { position: relative; }
.tdo-wohnadr { background:var(--weiss); border:1px solid var(--rand); border-radius:7px; padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
.tdo-wohnadr:hover { border-color:var(--gruen); background:var(--gruen-hell); }
.tdo-box { display:none; position:absolute; z-index:99999; background:#fff; border:1px solid var(--rand); border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.16); max-height:260px; overflow-y:auto; }
.tdo-vorschlag { display:flex; flex-direction:column; gap:2px; padding:9px 12px; cursor:pointer; border-bottom:1px solid #f0ede0; }
.tdo-vorschlag:last-child { border-bottom:none; }
.tdo-vorschlag:hover { background:#EFece0; }
.tdo-vorschlag .tv-name { font-size:13.5px; color:var(--text); font-weight:600; }
.tdo-vorschlag .tv-adr { font-size:12px; color:#9a9a90; }

/* Autospeicher-Status (statt Speichern-Button) */
.autosave-status { display:inline-block; font-size:13px; color:#8a8a80; padding:9px 4px; margin-right:6px; vertical-align:middle; }
.autosave-status.speichert { color:#9a7b1a; }
.autosave-status.ok { color:var(--gruen-aktiv); font-weight:600; }
.autosave-status.ok::before { content:'\2713\00a0'; }
.autosave-status.fehler { color:var(--rot); font-weight:600; }

/* Seiten-Navigation (Pagination) */
.seiten { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:14px 2px 4px; }
.seiten-info { font-size:13px; color:#666; }
.seiten-nav { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.seiten-aktiv { background:var(--gruen-dunkel); color:#fff; border-color:var(--gruen-dunkel); cursor:default; pointer-events:none; }
.seiten-punkte { padding:0 4px; color:#999; }

/* Sortierbare Spaltenkoepfe */
.sortkopf { color: var(--gruen-dunkel); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sortkopf:hover { text-decoration: underline; }
.sortkopf.aktiv { font-weight: 700; }

/* Design-Auswahl: Vorschau-Galerie */
.theme-galerie { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 6px; }
.theme-karte { position: relative; width: 200px; cursor: pointer; border: 2px solid var(--rand); border-radius: 12px;
    padding: 8px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .08s; }
.theme-karte:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-2px); }
.theme-karte.gewaehlt { border-color: var(--gruen-dunkel); box-shadow: 0 0 0 3px rgba(60,74,36,.12); }
.theme-karte input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-vorschau { display: flex; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.tv-side { width: 38%; padding: 9px 7px; display: flex; flex-direction: column; gap: 6px; }
.tv-bar { height: 9px; border-radius: 5px; display: block; }
.tv-aktiv { font-size: 7px; line-height: 9px; text-align: left; padding-left: 4px; font-weight: 700; }
.tv-inhalt { flex: 1; padding: 11px 9px; display: flex; flex-direction: column; gap: 7px; }
.tv-titel { height: 8px; width: 62%; border-radius: 4px; background: currentColor; opacity: .9; }
.tv-card { height: 24px; border-radius: 6px; background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.tv-btn { height: 11px; width: 46%; border-radius: 6px; }
.theme-name { display: block; text-align: center; margin-top: 8px; font-weight: 600; font-size: 13px; color: var(--text); }