/* ── Gast: Liste (/gast) ─────────────────────────────────────────────────── */
.gast-filter-row { padding-top: 0; margin-top: -.6rem; margin-bottom: .8rem; }
.gast-export-wrap { position: relative; margin-left: auto; }
.gast-export-btn { white-space: nowrap; }
.gast-export-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 180px; z-index: 100; overflow: hidden; }
.gast-export-wrap.open .gast-export-dropdown { display: block; }
.gast-export-dropdown a { display: block; padding: .55rem 1rem; color: var(--body-text); text-decoration: none; font-size: .9rem; }
.gast-export-dropdown a:hover { background: var(--sidebar-hover); }

.select2-img-flag { width: 20px; height: 20px; border-radius: 3px; padding: 0; margin-top: -3px; margin-right: 7px; vertical-align: middle; }
.select2-sub-option { display: inline-flex; align-items: center; }
.gast-pagination-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1.5rem 0 .25rem; }
.gast-perpage { display: flex; align-items: center; gap: .6rem; }
.gast-perpage-label { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.gast-pagination { display: flex; align-items: center; gap: .5rem; }
.gast-pagination .btn-icon { padding: .65rem 1.1rem; }
.gast-pagination .btn-icon .ti { font-size: 1.2rem; }
.gast-pagination-info { font-size: .9rem; color: var(--muted); min-width: 50px; text-align: center; }
.gast-pagination .disabled { opacity: .4; pointer-events: none; }

.gast-header-row { padding: 0 !important; }
.gast-header {
    /* seitliches Padding wie .gast-item (1rem), sonst sitzen die Spaltentitel
       um .25rem versetzt zu den Zeilen darunter */
    padding: .5rem 1rem !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    letter-spacing: .04em;
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    background: transparent !important;
    pointer-events: auto;
}
.gast-sort-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted-heavy); text-decoration: none; font-weight: 400; font-size: .85rem; letter-spacing: .04em; }
.gast-sort-link .ti { font-size: 1.05rem; }
.gast-sort-link:hover { color: var(--body-text); text-decoration: none; }
.gast-header li:last-child { text-align: right; }

.gast-liste { list-style: none; margin: 0; padding: 0; }
.gast-li { margin-bottom: .4rem; }
.gast-row { display: flex; }

.gast-toggle {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--body-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    -webkit-text-stroke: .5px currentColor;
    transition: background .15s, color .15s, transform .18s ease;
    border: none;
    color: var(--body-text);
}
.gast-toggle:hover { background: var(--border); color: var(--body-text); }
.gast-toggle--neu { position: relative; }
.gast-toggle--neu::after { content: ''; position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #00d1ff; border: 2px solid var(--bg-white); }
.gast-toggle:active { transform: scale(.85); }
.gast-toggle .ti { transition: transform .25s ease; }
.gast-toggle[aria-expanded="true"] .ti { transform: rotate(180deg); }

.gast-details { background: var(--body-bg); border: 2px solid var(--bg-white); border-top: none; border-radius: 0 0 10px 10px; margin-top: -5px; margin-bottom: 20px; }
.gast-details-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    font-size: .9rem;
}
.gast-details-inner a[href^="mailto:"] { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.gast-details-inner a[href^="mailto:"]:hover { opacity: .65; border-bottom-color: transparent; }
.gast-details-left { display: flex; flex-direction: column; }
.gast-details-cell { padding: 1rem 1.2rem; line-height: 1.7; }
.gast-details-extra .gast-details-cell { line-height: inherit; }
.gast-details-cell:first-child { border-bottom: 2px solid var(--bg-white); }
.gast-details-extra { display: flex; flex-direction: column; border-left: 2px solid var(--bg-white); }
.gast-details-extra .gast-details-cell:first-child { border-bottom: 2px solid var(--bg-white); }
.gast-details-label { font-weight: 600; display: block; margin-bottom: .15rem; font-size: .85rem; color: var(--muted); }
.gast-details-cell .ti { margin-right: 10px; }
.gast-badge-heute { display: inline-block; font-size: .75rem; font-weight: 500; background: var(--accent-yellow); color: var(--text-green); border-radius: 6px; padding: 1px 9px; margin-left: .4rem; vertical-align: middle; }
.gast-details-bearbeiten { display: flex; align-items: center; gap: 1rem; }
.gast-details-bearbeiten .btn-danger { margin-left: auto; }
.gast-details-bearbeiten .btn-danger .ti { margin-right: 0; }
.btn-inline-link { background: none; border: none; border-bottom: 1px dotted currentColor; padding: 0; font-size: inherit; color: inherit; cursor: pointer; line-height: 1.2; }
.btn-inline-link:hover { opacity: .65; border-bottom-color: transparent; }

/* child 4 = .gast-channel-img — nur mobil sichtbar */
.gast-item li:nth-child(4) { display: none; }

.gast-item {
    --gast-cols: 40px 90px 90px 70px 20px 1fr 130px 180px 80px;
    display: grid !important;
    list-style: none;
    margin: 0;
    width: 100%;
    grid-template-columns: var(--gast-cols);
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.2rem .7rem 1rem;
    text-decoration: none;
    color: var(--body-text);
    transition: background .15s;
}

@media (max-width: 1200px) {
    /* Toggle · Anreise · Abreise · Nächte · Gastname · Badge · Erstellt */
    .gast-item {
        --gast-cols: 42px 88px 88px 70px 1fr 120px 65px;
        grid-template-rows: auto;
    }
    .gast-item li:nth-child(4)  { display: none; }
    .gast-item li:nth-child(6)  { display: none; }
    .gast-item li:nth-child(9)  { display: none; }
    .gast-header li:nth-child(4),
    .gast-header li:nth-child(6),
    .gast-header li:nth-child(9) { display: none !important; }
}

@media (max-width: 700px) {
    /* 3-Zeilen-Layout */
    /* Zeile 1: Toggle · Anreise · Abreise · ChannelImg */
    /* Zeile 2: (toggle) · Nächte · Gastname           */
    /* Zeile 3: (toggle) · Unterkunft · Erstellt        */
    .gast-item {
        grid-template-columns: 42px 1fr 1fr auto !important;
        grid-template-rows: auto auto auto;
        padding: .6rem .75rem;
        gap: .25rem .5rem;
    }
    .gast-item li:nth-child(1)  { grid-column: 1; grid-row: 1 / 4; align-self: start; }
    .gast-item li:nth-child(2)  { grid-column: 2; grid-row: 1; }
    .gast-item li:nth-child(3)  { grid-column: 3; grid-row: 1; }
    .gast-item li:nth-child(4)  { display: block; grid-column: 4; grid-row: 1; }
    .gast-item li:nth-child(5)  { grid-column: 2; grid-row: 2; }
    .gast-item li:nth-child(6)  { display: none; }
    .gast-item li:nth-child(7)  { grid-column: 3 / 5; grid-row: 2; }
    .gast-item li:nth-child(8)  { display: none; }
    .gast-item li:nth-child(9)  { display: block; grid-column: 2; grid-row: 3; }
    .gast-item li:nth-child(10) { display: block; grid-column: 3 / 5; grid-row: 3; }
    .gast-header-row { display: none !important; }

    /* view-toggle: horizontal scrollbar statt Wrap */
    .view-toggle { display: flex; overflow-x: auto; flex-wrap: nowrap; border-radius: 30px; scrollbar-width: none; margin-bottom: 1rem; }
    .view-toggle::-webkit-scrollbar { display: none; }
    .vt-tab { flex-shrink: 0; padding: .4rem .9rem; }

    /* Filter */
    .gast-filter-row .form-group { min-width: 0; flex: 1 1 100%; }
    .gast-filter-row .select2-container { width: 100% !important; min-width: 0 !important; }

    /* Details-Klappsbereich */
    .gast-details-inner { grid-template-columns: 1fr; }
    .gast-details-extra { border-left: none; border-top: 3px solid var(--bg-white); }

    /* Pagination */
    .gast-pagination-bar { grid-template-columns: auto 1fr auto; gap: .5rem; }
    .gast-perpage-label { display: none; }
}
.gast-item { cursor: pointer; border: 1px solid transparent; transition: border-color .12s; }
.gast-item:hover { text-decoration: none; border-color: var(--border); }
/* Kopfzeile traegt dieselbe .gast-item-Klasse, ist aber nicht anklickbar */
.gast-header:hover { border-color: transparent; }
.gast-header { cursor: default; }

.gast-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
    border-radius: 10px 5px 10px 5px;
    padding: 0 .8rem 0 0;
    white-space: nowrap;
    color: rgba(255,255,255,.95);
    background: var(--gast-badge-bg, #888);
    min-width: 115px;
    margin-top: 5px;
}
.sort-icon--inactive { opacity: .35; }
#filter-channel { width: 200px; }
#filter-jahr { width: 150px; }
.gast-badge-logo, .gast-badge-logo-m { width: 30px; height: 30px; border-radius: 8px 0 0 4px; object-fit: cover; margin-right: 3px; border: 1px solid var(--gast-badge-bg, #888); border-right: none; }
.gast-badge-logo[src$="liste-eigene-webseite.png"], .gast-badge-logo-m[src$="liste-eigene-webseite.png"] { width: 20px; height: 20px; margin: 5px; }
.gast-badge-logo[src$="liste-eigene.png"], .gast-badge-logo-m[src$="liste-eigene.png"],
.gast-badge-logo[src$="res_20.png"], .gast-badge-logo-m[src$="res_20.png"],
.gast-badge-logo[src$="res_21.png"], .gast-badge-logo-m[src$="res_21.png"] { width: 24px; height: 24px; margin: 3px; }
.gast-badge-label { font-size: .85rem; }

.gast-icons { display: flex; flex-direction: column; gap: 3px; }
.gast-icon-msg { display: block; width: 16px; height: 16px; }
.gast-icon-note, .gast-icon-doc { font-size: 1rem; }
.gast-icon-note { margin-top: 4px; }
.gast-icon-msg::before { content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99962 9.5H11.9996M7.99962 13H14.9996M12.4996 20C17.194 20 20.9996 16.1944 20.9996 11.5C20.9996 6.80558 17.194 3 12.4996 3C7.8052 3 3.99962 6.80558 3.99962 11.5C3.99962 12.45 4.15547 13.3636 4.443 14.2166C4.55119 14.5376 4.60529 14.6981 4.61505 14.8214C4.62469 14.9432 4.6174 15.0286 4.58728 15.1469C4.55677 15.2668 4.48942 15.3915 4.35472 15.6408L2.71906 18.6684C2.48575 19.1002 2.36909 19.3161 2.3952 19.4828C2.41794 19.6279 2.50337 19.7557 2.6288 19.8322C2.7728 19.9201 3.01692 19.8948 3.50517 19.8444L8.62619 19.315C8.78127 19.299 8.85881 19.291 8.92949 19.2937C8.999 19.2963 9.04807 19.3029 9.11586 19.3185C9.18478 19.3344 9.27145 19.3678 9.44478 19.4345C10.3928 19.7998 11.4228 20 12.4996 20Z' stroke='%23000000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gast-name { min-width: 0; padding-right: 5px; }
.gast-personen { display: flex; flex-direction: row; gap: .5rem; flex-wrap: wrap; }
.gast-hunde { margin-left: 15px; }
.gast-hunde::after { content: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' stroke='%23000000' stroke-width='20' d='M393.3,161.33,334.532,76.438a48.09,48.09,0,0,0-38.775-20.673l-111.527-1.6-.23,0c-57.579,0-101.757,9.631-130.21,56.634C27.3,154.551,16,229.08,16,360v16H52.557L29.024,496h32.61L85.167,376H96a99.521,99.521,0,0,0,70.088-27.992c16.979-16.246,29.226-38.472,35.419-64.274l.056-.232L229.006,152h-32.69L170.337,276.488C162.425,309.168,138.766,344,96,344H48.06c.869-113.266,11.182-180.419,33.105-216.634,18.4-30.4,45.295-41.191,102.724-41.206l111.408,1.6a16.026,16.026,0,0,1,12.925,6.891L374.7,190.67,464,205.554v16.959l-14.892,79.421c-4.395,23.441-11.908,35.249-42.718,38.95L280.084,362.493,279.249,496h32l.667-106.493,98.7-16.9c22.36-2.749,38.857-9.955,50.426-22.023,9.89-10.318,15.909-23.5,19.519-42.752L496,225.487V178.446Z'/%3E%3C/svg%3E"); margin-left: 5px; vertical-align: middle; position: relative; top: -1px; }
.gast-gastname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gast-gastname .ti { font-size: 1.3rem; }


.gast-reisezeit { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }

.gast-unterkunft { display: flex; flex-direction: column; overflow: hidden; font-weight: 400; color: var(--muted); }
.gast-unterkunft div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }

.gast-erstellt { white-space: nowrap; color: var(--muted); font-weight: 400; text-align: right; }
.gast-subrow { margin-top: 3px; }
.gast-reisezeit small { display: block; margin-top: 5px; }
.gast-badge--reinigung {
  background: var(--accent-yellow);
  min-width: 77px;
  text-align: center;
  margin-top: 5px;
  padding: 2px 0;
  border-radius: 5px;
}


.gast-bezahlt { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--body-bg); margin-left: -1px; margin-right: 4px; }
.gast-bezahlt .ti { font-size: .7rem; color: var(--body-text); }
.gast-naechte .ti-coins { margin-right: 3px; font-size: 1rem; }
.gast-naechte .ti-moon { margin-right: 4px; }


/* ── Gast: Rechnung (/gast/{id}/rechnung) ────────────────────────────────── */
.rec-wrap { max-width: 900px; }
.rec-card { padding: 1.5rem 1.75rem; }
.rec-kopf { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.rec-gast { font-weight: 400; margin-bottom: 1.5rem; }
.rec-titel { margin: 0 0 .4rem; }
.rec-meta { text-align: left; min-width: 220px; font-weight: 400; }
.rec-tabelle { margin-bottom: .5rem; }
.rec-tabelle td { font-weight: 400; }
.rec-add-pos { align-items: center; padding: .75rem 0 1rem; border-bottom: 1px solid var(--border); }
.rec-add-pos .form-group { margin: 0; }
.rec-add-pos .grow { flex: 1; min-width: 180px; }
.rec-summen { padding: .75rem 1rem .5rem 0; }
.rec-summe-zeile { display: flex; justify-content: flex-end; gap: 3rem; }
.rec-summe-zeile--gesamt { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; }
.rec-zahlung { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.rec-qr-wrap { display: flex; gap: 1.5rem; flex-shrink: 0; }
.rec-qr { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; text-align: center; }
.rec-qr img { width: 90px; height: 90px; background: #fff; border-radius: 6px; padding: 4px; }
.rec-hinweis { padding: 0 .6rem .5rem; }
@media (max-width: 700px) {
    .rec-kopf, .rec-zahlung { flex-direction: column; gap: 1rem; }
}


/* ── Gast: Kommunikation (/gast/{id}/kommunikation, Datei-Manager) ───────── */
.komm-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: start; }
.komm-left { display: flex; flex-direction: column; gap: 0; }
.komm-details { display: flex; flex-direction: column; gap: 0; }
.komm-details .li-box-card-header { padding-right: 0; }
.komm-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
.komm-verlauf .li-box-card-header,
.komm-layout .li-box-card-header, .nach-wrap .li-box-card-header { padding: 0 0 .5rem 0; }
.komm-layout .input-addon { max-width: 100%; }
.komm-form .input-addon .input-addon-text { min-width: 75px; }
.komm-layout textarea { margin-top: 15px; }
.komm-submit { display: flex; justify-content: flex-start; margin-top: 10px; }
#komm-nachricht { font-size: .9rem; }
.dok-icons { display: flex; flex-wrap: wrap; gap: .25rem; padding: .2rem 0 0; }
.dok-icon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; width: 106px; min-height: 126px; padding: .7rem .4rem .5rem; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .15s ease; }
.dok-icon:hover { border-color: var(--border); text-decoration: none; }
.dok-icon svg { flex-shrink: 0; }
.dok-icon-label { font-size: .8rem; font-weight: 600; color: var(--body-text); line-height: 1.25; text-align: center; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dok-icon-badge { position: absolute; top: .35rem; right: .35rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: transparent; color: var(--body-text); font-size: .8rem; font-weight: 700; line-height: 1; border-radius: 50%; border: 1px solid var(--border); }
.dok-icon:hover .dok-icon-badge { background: var(--bg-white); }
.dok-icon:has(.dok-icon-badge) svg { opacity: .4; }
.dok-icon:has(.dok-icon-badge) .dok-icon-label { color: var(--muted); }
.dok-icon--neu::after { content: ''; position: absolute; top: .35rem; right: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-blue); border: 2px solid var(--bg-white); }
.dok-icon-date { font-size: .7rem; color: var(--muted); }
.dok-icon-wrap { position: relative; }
.dok-icon-wrap.open .dok-icon { background: var(--body-bg); }
.dok-menu { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - .2rem); min-width: 140px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 200; overflow: hidden; }
.dok-icon-wrap.open .dok-menu { display: block; }
.dok-menu form { margin: 0; }
.dok-menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .6rem .8rem; font-size: .85rem; font-family: inherit; font-weight: 600; color: var(--body-text); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; }
.dok-menu-item:hover { background: var(--sidebar-hover); text-decoration: none; }
.dok-menu-item--danger { color: var(--text-red); }
.komm-chat { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 0; }
.komm-bubble-wrap { position: relative; }
.komm-msg-bubble--collapsible { max-height: 100px; overflow: hidden; transition: max-height .35s ease; }
.komm-msg-bubble--collapsible.is-open { max-height: 2000px; }
.komm-bubble-fade { height: 50px; margin-top: -50px; position: relative; background: linear-gradient(to bottom, transparent, var(--bg-white)); pointer-events: none; transition: opacity .3s ease; }
.komm-bubble-wrap.is-open .komm-bubble-fade { opacity: 0; }
.komm-bubble-toggle { width: 100%; background: none; border: none; cursor: pointer; color: var(--muted); padding: .4rem 0 0; display: flex; justify-content: center; align-items: center; }
.komm-bubble-toggle .ti { font-size: 1.2rem; transition: transform .3s ease; }
.komm-bubble-wrap.is-open .komm-bubble-toggle .ti { transform: rotate(180deg); }
.komm-msg { display: flex; flex-direction: column; gap: .2rem; max-width: 85%; }
.komm-msg--owner { align-self: flex-end; align-items: flex-end; }
.komm-msg--gast { align-self: flex-start; align-items: flex-start; }
/* Sprechblase mit Profilkreis davor, wie in einem Chatverlauf.
   .avatar-kreis nutzt auch der Postausgang unter /nachrichten. */
.msg-zeile { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
/* alles ausser dem Kreis nimmt den Rest der Breite – Blase im Verlauf,
   .pre-wrap in der Antwortkarte unter /nachrichten */
.msg-zeile > *:not(.avatar-kreis) { flex: 1; min-width: 0; }
.avatar-kreis {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-white);
    color: var(--muted-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* im Kreis ohne die Einrueckung aus der Postausgangs-Liste */
.avatar-kreis .icon-send-mail { margin: 0; padding: 0; }
/* In der Listenzeile kleiner als im Verlauf */
.nach-item .avatar-kreis {
    width: 36px;
    height: 36px;
    background: var(--body-bg);
}
.komm-msg-bubble { background: var(--bg-white); border-radius: 12px; padding: .6rem .9rem; font-size: .9rem; line-height: 1.5; }
.komm-msg--owner .komm-msg-bubble { background: var(--bg-white); color: var(--body-text); }
.komm-msg-betreff { font-weight: 600; margin-bottom: .25rem; font-size: .8rem; opacity: .8; padding-bottom: 10px; }
.komm-msg-text { white-space: pre-wrap; line-height: 1.3; font-weight: 400; opacity: .9; }
.komm-msg-meta { font-size: .75rem; color: var(--muted); padding: .2rem; }
.komm-tabs { margin-top: .5rem; margin-bottom: 1.8rem; }
.komm-tabs .vt-tab { padding: .3rem 1.5rem; }
.komm-tab-pane { }
.komm-form { display: flex; flex-direction: column; gap: .75rem; }
.komm-form .form-group { margin: 0; }
.komm-hinweis { font-size: .9rem; color: var(--muted); padding: .5rem 0; }
.komm-wa-qr { display: block; margin-top: 1rem; width: 160px; height: 160px; border-radius: 8px; border: 1px solid var(--border); background: #fff; padding: .4rem; }
.komm-qr-bar { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; }
.komm-qr-modal-body { display: flex; justify-content: center; padding: 1rem 0; }
.komm-qr-modal-body img { max-width: 350px; width: 100%; }
.komm-qr-modal-hint { text-align: center; font-size: .85rem; color: var(--muted); }
.komm-mobile-only { display: none; }
.komm-desktop-only { display: inline-flex; }
@media (max-width: 768px) { .komm-mobile-only { display: inline-flex; } .komm-desktop-only { display: none; } }
@media (max-width: 900px) { .komm-layout { grid-template-columns: 1fr; } .komm-wrap { grid-template-columns: 1fr; } }

.komm-msg-wartend { color: #b7791f; font-weight: 600; }


/* ── /nachrichten ─────────────────────────────────────────────────────────────
   Posteingang und Postausgang. Liegt hier statt in liste.css; gast.css wird
   nach app.css und liste.css geladen, die Ueberschreibung von .li-item--row
   durch .nach-item greift damit weiterhin.
   ─────────────────────────────────────────────────────────────────────────── */
.nach-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nach-filter { margin-bottom: 1rem; }
/* padding-right wie bei .gast-item, damit das Datum in beiden Listen gleich
   weit vom rechten Rand steht (.li-item bringt nur .8rem mit). */
/* padding: .7rem .8rem kommt aus .li-item – oben/unten hier grosszuegiger */
.nach-item { grid-template-columns: 16px 1.6fr 28px 1.8fr 1.4fr 160px 110px; gap: 1rem; align-items: center; padding: .85rem 1.2rem .85rem .8rem; border: 1px solid transparent; transition: border-color .12s; }
.nach-item .li-box-date { text-align: right; }
.nach-item--postausgang { grid-template-columns: 2fr 1.4fr 160px 110px; }
.nach-item--kompakt { grid-template-columns: 16px 1.6fr 28px 1.8fr 160px 110px; }
.nach-item--header { background: transparent; padding-top: 0; padding-bottom: 0; letter-spacing: .03em; color: var(--muted-heavy); }
/* Eigene Rasterspalte zwischen Gastname und Betreff. Sie bleibt bei einfachen
   Buchungsanfragen leer und traegt nur bei Reservierungen den Blitz – die
   Zelle steht trotzdem immer, damit das Raster nicht verrutscht.
   Als Maske eingebunden statt als background-image, damit die Flaeche ueber
   currentColor die Textfarbe erbt und im Dark Mode mitzieht.
   Pfad deckungsgleich mit funktionenIcon('reservierung') in
   app/Views/funktionen/_icons.php – dort mit stroke-width 1.6, hier 2, weil das
   Icon in der Liste auf ~1.3em laeuft und sonst zu duenn wirkt. */
/* In der Liste stapeln sich Blitz und Telefon untereinander */
.nach-item .nach-icon { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: 1rem; }
/* nimmt weiter Platz ein, wird aber nicht gezeichnet */
.nach-icon--leer { visibility: hidden; }
.nach-icon .ti { margin-top: 2px; }
.nach-icon--blitz::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.07 2.42A2 2 0 0 1 9.99 1H13.69A1.6 1.6 0 0 1 15.19 3.16L13.61 7.38A1.2 1.2 0 0 0 14.73 9H18.35A1.2 1.2 0 0 1 19.35 10.87L11.2 23L11.87 16.32A1.2 1.2 0 0 0 10.68 15H5.91A1.2 1.2 0 0 1 4.76 13.46Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.07 2.42A2 2 0 0 1 9.99 1H13.69A1.6 1.6 0 0 1 15.19 3.16L13.61 7.38A1.2 1.2 0 0 0 14.73 9H18.35A1.2 1.2 0 0 1 19.35 10.87L11.2 23L11.87 16.32A1.2 1.2 0 0 0 10.68 15H5.91A1.2 1.2 0 0 1 4.76 13.46Z'/%3E%3C/svg%3E");
}
/* Typ- bzw. Objektname ueber dem Preis */
.nach-typ { display: block; color: var(--muted); }
/* Briefumschlag mit Haken – Antwort auf eine Buchungsanfrage im Postausgang */
.icon-send-mail { display: inline-flex; align-items: center; margin-right: 5px; padding-left: .3rem; }
.icon-send-mail::before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23000' d='M2.8 4C1.86451 4 1.0468 4.46923 0.544325 5.16792C0.20074 5.64567 0 6.23499 0 6.86667V17.1333C0 18.682 1.21964 20 2.8 20H11.2C11.7523 20 12.2 19.5523 12.2 19C12.2 18.4477 11.7523 18 11.2 18H2.8C2.39214 18 2 17.6466 2 17.1333V7.94766L7.77948 14.3096C8.96986 15.6199 11.0301 15.6199 12.2205 14.3096L18 7.94766V13.1333C18 13.6856 18.4477 14.1333 19 14.1333C19.5523 14.1333 20 13.6856 20 13.1333V6.86667C20 6.235 19.7993 5.64567 19.4557 5.16792C18.9532 4.46923 18.1355 4 17.2 4H2.8ZM9.25983 12.9647L2.9327 6H17.0673L10.7402 12.9647C10.3434 13.4015 9.65662 13.4015 9.25983 12.9647ZM22.7894 16.6139C23.1284 16.178 23.0499 15.5497 22.6139 15.2106C22.178 14.8716 21.5497 14.9501 21.2106 15.3861L17.2268 20.5081L15.6941 19.0302C15.2966 18.6468 14.6635 18.6583 14.2802 19.0559C13.8968 19.4534 13.9083 20.0865 14.3059 20.4698L16.6392 22.7198C16.8434 22.9167 17.1216 23.0177 17.4045 22.9975C17.6875 22.9773 17.9485 22.8379 18.1227 22.6139L22.7894 16.6139Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23000' d='M2.8 4C1.86451 4 1.0468 4.46923 0.544325 5.16792C0.20074 5.64567 0 6.23499 0 6.86667V17.1333C0 18.682 1.21964 20 2.8 20H11.2C11.7523 20 12.2 19.5523 12.2 19C12.2 18.4477 11.7523 18 11.2 18H2.8C2.39214 18 2 17.6466 2 17.1333V7.94766L7.77948 14.3096C8.96986 15.6199 11.0301 15.6199 12.2205 14.3096L18 7.94766V13.1333C18 13.6856 18.4477 14.1333 19 14.1333C19.5523 14.1333 20 13.6856 20 13.1333V6.86667C20 6.235 19.7993 5.64567 19.4557 5.16792C18.9532 4.46923 18.1355 4 17.2 4H2.8ZM9.25983 12.9647L2.9327 6H17.0673L10.7402 12.9647C10.3434 13.4015 9.65662 13.4015 9.25983 12.9647ZM22.7894 16.6139C23.1284 16.178 23.0499 15.5497 22.6139 15.2106C22.178 14.8716 21.5497 14.9501 21.2106 15.3861L17.2268 20.5081L15.6941 19.0302C15.2966 18.6468 14.6635 18.6583 14.2802 19.0559C13.8968 19.4534 13.9083 20.0865 14.3059 20.4698L16.6392 22.7198C16.8434 22.9167 17.1216 23.0177 17.4045 22.9975C17.6875 22.9773 17.9485 22.8379 18.1227 22.6139L22.7894 16.6139Z'/%3E%3C/svg%3E");
}
.nach-versand-wartend { color: #b7791f; }
.nach-wrap { max-width: 1200px; display: grid; grid-template-columns: 350px 1fr; gap: 1.5rem; align-items: start; }
.nach-spalte { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* margin-bottom der Karten wuerde sich mit dem gap addieren */
.nach-spalte > .li-box-card { margin-bottom: 0; }
.nach-eingang { margin: .7rem 0 0; text-align: right; }
/* schiebt den Erledigt-Button im Kartenfuss nach rechts, dieser bleibt links */
.nach-bel-btn { margin-right: auto; }
.nach-preis-gross { font-size: 1.15rem; font-weight: 700; }
.nach-titel { display: inline-flex; align-items: center; gap: .35rem; }
.nach-titel h2 { margin: 0; }
/* .tbl-row hat kein horizontales Padding mehr, mit Hintergrund braucht es das */
/* Laeuft bis an die Kartenkanten: -1rem hebt das padding von .li-box-card auf.
   Radius 11px = 12px der Karte minus deren 1px Rahmen. */
.nach-kopf {
    background: var(--bg-white);
    margin: -1rem -1rem .5rem;
    padding: .8rem 1rem .5rem 1rem;
    border-radius: 11px 11px 0 0;
}
.nach-status { justify-content: flex-end; margin-top: .2rem; margin-bottom: .6rem; }
/* Bearbeitungsstand in der Statuskarte, abgesetzt wie der Text der Nachbarkarten */
.nach-hinweis {
    background: var(--bg-white);
    padding: .6rem .9rem;
    margin: 0 0 .5rem;
    border-radius: 12px;
    border-left: 13px solid var(--accent-yellow);
}
@media (max-width: 900px) { .nach-wrap { grid-template-columns: 1fr; } }
.nach-wrap .pre-wrap { padding: .6rem .9rem; background: var(--bg-white); border-radius: 12px; }
.nach-antwort-tabs { margin-bottom: 1rem; }
/* Abstand zwischen Vorlagen-Auswahl und Textfeld */
.nach-vorlage-wahl { margin-bottom: 1rem; }
.nach-antwort-text { width: 100%; min-height: 12rem; box-sizing: border-box; font-family: inherit; }
.nach-pager { display: flex; align-items: center; gap: .75rem; justify-content: center; margin-top: 1rem; }
/* Zeilen der Anfragenliste weiter auseinander; .list-box li bringt nur 5px padding */
.nach-list li { line-height: 1.65; margin: 0 0 .4rem 0; }
.nach-list .status-led { margin-left: .4rem; }
.nach-list .li-box-name .ti { margin-right: 5px; }

/* Mobil – steht am Dateiende, damit diese Regeln die obigen schlagen. */
@media (max-width: 768px) {
    /* Nachrichten (/nachrichten). Die Zellen tragen eigene .nach-col--*-Klassen,
       damit sie hier direkt adressierbar sind – die Spaltenzahl unterscheidet
       sich je Ansicht (Anfragen 6 bzw. 7, Postausgang 4).

       Anfragen:                        Postausgang:
       [ Gast    ][  Typ   ][ LED ]     [ Betreff          ]
       [         ][ Preis  ][     ]     [ An               ]
       [ Betreff ][    Status     ]     [ Status ][  Datum ]
       [         ][    Datum      ]                          */
    .nach-item {
        /* Feste Verhaeltnisse statt auto: sonst zieht ein langer typ_name die
           mittlere Spalte auf. minmax(0,…) erlaubt den Zellen, unter ihre
           Inhaltsbreite zu schrumpfen. */
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
        grid-template-rows: auto;
        gap: .2rem .75rem;
        padding: .75rem .9rem;
    }
    .nach-item > .nach-col--icons { display: none; }
    /* liste.css setzt fuer .li-item--row .li-box-meta ein zweispaltiges Grid
       (1fr 1fr) – der Inhalt landet dadurch in der linken Haelfte und laesst
       sich nicht ausrichten. Hier zurueck auf Flex, mit gleicher Spezifitaet
       wie dort und spaeter in der Ladereihenfolge. */
    .nach-item > .li-box-meta {
        display: flex;
        grid-template-columns: none;
        justify-content: flex-end;
    }

    .nach-col--gast {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        justify-content: flex-start;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nach-item--postausgang .nach-col--betreff {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        justify-content: flex-start;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* LED ganz rechts am Rand, in einer eigenen schmalen Spalte */
    .nach-col--led {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin-top: -1.2rem;
    }
    /* Typ und Preis stehen in einer Zelle untereinander und belegen zwei Zeilen */
    .nach-col--typ {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: start;
        font-size: .8rem;
        min-width: 0;
        max-width: 100%;
    }
    /* Langer typ_name bricht ab, statt die Spalte breiter zu ziehen */
    .nach-col--typ .nach-typ {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 120px;
    }
    .nach-item:not(.nach-item--postausgang) .nach-col--betreff {
        grid-column: 1;
        grid-row: 3;
        justify-content: flex-start;
        min-width: 0;
        /* langer Betreff bricht um, statt abgeschnitten zu werden */
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .nach-col--status {
        grid-column: 2 / 4;
        grid-row: 3;
        /* Zelle ueber beide Spalten aufziehen und den Badge darin ans Ende
           schieben – justify-self allein laesst die Box auf Inhaltsbreite
           schrumpfen, wo das margin-left:auto von .li-box-meta dagegenhaelt. */
        justify-self: stretch;
        justify-content: flex-end;
        align-self: center;
        margin-left: 0;
    }
    .nach-col--datum {
        grid-column: 2 / 4;
        grid-row: 4;
        justify-self: end;
        /* dichter an den Status-Badge darueber */
        margin-top: -.25rem;
        font-size: .75rem;
        color: var(--muted);
        white-space: nowrap;
    }

    /* Postausgang: keine LED-, Typ- oder Betreff-Zelle rechts */
    .nach-col--an {
        grid-column: 1 / 4;
        grid-row: 2;
        justify-content: flex-start;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nach-item--postausgang .nach-col--betreff { grid-column: 1 / 4; }
    .nach-item--postausgang .nach-col--status {
        grid-column: 1 / 3;
        justify-self: start;
        justify-content: flex-start;
    }
    .nach-item--postausgang .nach-col--datum { grid-row: 3; align-self: center; }
    .nach-item--header { display: none; }

    /* Toolbar: Ansichtswechsel und Objektfilter untereinander, beide volle Breite */
    .nach-toolbar { flex-direction: column; align-items: stretch; gap: .5rem; }
    .nach-filter { margin-bottom: .5rem; }
    .nach-filter > div, .nach-filter select { width: 100%; }

    /* Detailseite: die Karten stehen ab 900px ohnehin untereinander (.nach-wrap),
       hier geht es um die Innenraeume. */
    .nach-wrap { gap: 1rem; }
    .nach-spalte { gap: 1rem; }
    /* Zwei Zellen je Zeile werden auf schmalen Schirmen zu eng – umbrechen lassen */
    .nach-wrap .tbl-row { flex-wrap: wrap; gap: .2rem 1rem; }
    .nach-wrap .tbl-row span:last-child { white-space: normal; }
    /* Titelzeile und Statuszeile bleiben einzeilig, sonst rutscht der Preis unter die LED */
    .nach-kopf .tbl-row { flex-wrap: nowrap; }
    .nach-titel h2 { font-size: 1.05rem; }
    .nach-preis-gross { font-size: 1.05rem; white-space: nowrap; }
    /* Fusszeile: Buttons umbrechen statt ueberlaufen */
    .nach-wrap .li-box-card-footer { flex-wrap: wrap; gap: .5rem; }
    .nach-bel-btn { margin-right: 0; }
    /* Antwortformular */
    .nach-antwort-text { font-size: .9rem; }
}