/* ===================================================================
   knollPLUS CMS – Admin-Oberfläche
   Stil angelehnt an „Paces" (Coderthemes): helle Sidebar, Blau #236dc9,
   kühles Grau, feine Hairlines, kompakte Radien, schwebende Topbar.
   =================================================================== */

@font-face{
    font-family:'NunitoVar';
    src:url('/assets/vendor/fonts/nunito-var.woff2') format('woff2');
    font-weight:100 900; font-display:swap;
}

:root{
    --accent:      #236dc9;
    --accent-dark: #1d5aa6;
    --accent-soft: rgba(35,109,201,.09);
    --page-bg:     #f6f7fb;
    --panel-bg:    #ffffff;
    --ink:         #4c4c5c;
    --ink-soft:    #8a94a6;
    --hairline:    #e7e9eb;
    --radius:      .3rem;
    --sidebar-w:   245px;
    --topbar-h:    62px;
    --font: 'NunitoVar', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Bootstrap-Primärfarbe umbiegen */
    --bs-primary:#236dc9;
    --bs-primary-rgb:35,109,201;
    --bs-link-color:#236dc9;
    --bs-link-color-rgb:35,109,201;
    --bs-link-hover-color:#1d5aa6;
    --bs-border-color:#e7e9eb;
    --bs-body-color:#4c4c5c;
    --bs-body-font-family:'NunitoVar', system-ui, sans-serif;
    --bs-border-radius:.3rem;
}

*{ box-sizing:border-box; }
body{ font-family:var(--font); color:var(--ink); }

/* --- Bootstrap-Komponenten neu einfärben --- */
.btn-primary{
    --bs-btn-bg:#236dc9; --bs-btn-border-color:#236dc9;
    --bs-btn-hover-bg:#1f60b0; --bs-btn-hover-border-color:#1d5aa6;
    --bs-btn-active-bg:#1d5aa6; --bs-btn-active-border-color:#1a5093;
    --bs-btn-disabled-bg:#236dc9; --bs-btn-disabled-border-color:#236dc9;
}
.btn-outline-primary{
    --bs-btn-color:#236dc9; --bs-btn-border-color:#236dc9;
    --bs-btn-hover-bg:#236dc9; --bs-btn-hover-border-color:#236dc9;
    --bs-btn-active-bg:#236dc9; --bs-btn-active-border-color:#236dc9;
}
.btn-success{
    --bs-btn-bg:#22a06b; --bs-btn-border-color:#22a06b;
    --bs-btn-hover-bg:#1c8a5b; --bs-btn-hover-border-color:#1c8a5b;
    --bs-btn-active-bg:#1c8a5b;
}
.btn{ --bs-btn-border-radius:.3rem; font-weight:500; }
.text-primary{ color:#236dc9 !important; }
.text-bg-primary{ background-color:#236dc9 !important; }
a{ color:#236dc9; }
.form-check-input:checked{ background-color:#236dc9; border-color:#236dc9; }
.form-control:focus,.form-select:focus{ border-color:#8fb4e2; box-shadow:0 0 0 .2rem rgba(35,109,201,.15); }
.card{ --bs-card-border-color:#e7e9eb; --bs-card-border-radius:.3rem; }
.badge{ font-weight:500; }

/* ===================== Shell ===================== */
body.app{ margin:0; background:var(--page-bg); }

.app-sidebar{
    position:fixed; inset:0 auto 0 0; width:var(--sidebar-w);
    background:var(--panel-bg); border-right:1px solid var(--hairline);
    display:flex; flex-direction:column; padding:0 12px 40px; overflow-y:auto;
}
.app-brand{
    font-size:1.3rem; font-weight:800; letter-spacing:-.5px; color:#1f2733;
    padding:18px 12px 16px; margin-bottom:4px;
}
.app-brand span{ color:var(--accent); }
.app-brand small{ font-weight:600; font-size:.58rem; letter-spacing:2px; color:var(--ink-soft); vertical-align:middle; }

.app-nav{ display:flex; flex-direction:column; gap:2px; }
.app-nav-link{
    display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--radius);
    color:#667787; text-decoration:none; font-size:.875rem; font-weight:500;
    border-left:3px solid transparent;
}
.app-nav-link i{ font-size:1.05rem; width:20px; text-align:center; color:#9aa4b2; }
.app-nav-link:hover{ color:var(--accent); background:var(--accent-soft); }
.app-nav-link:hover i{ color:var(--accent); }
.app-nav-link.active{
    color:var(--accent); background:var(--accent-soft);
    border-left-color:var(--accent); font-weight:600;
}
.app-nav-link.active i{ color:var(--accent); }
.app-nav-link--sm{ font-size:.8rem; padding-top:7px; padding-bottom:7px; }
.app-nav-sep{
    margin:14px 12px 4px; font-size:.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1.4px; color:#aab2bf;
}

.app-main{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

.app-topbar{
    height:var(--topbar-h); background:var(--panel-bg);
    border:1px solid var(--hairline); border-radius:10px;
    margin:14px 18px 0; padding:0 18px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    position:sticky; top:14px; z-index:20;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.app-tenant{ font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.app-topbar-left{ min-width:0; flex:1 1 auto; }
.app-topbar-right{ flex:none; }
.app-menu-toggle{ flex:none; }
.app-topbar .btn{ white-space:nowrap; }
@media (max-width: 1199.98px){ .app-tenant__domain{ display:none; } }
@media (max-width: 767.98px){ .app-topbar .btn-label{ display:none; } }
.app-tenant i{ color:var(--accent); margin-right:6px; }
.app-topbar-right{ display:flex; align-items:center; gap:10px; }

/* Veröffentlichen-Knopf + Stand in der Kopfleiste */
.publish-form{ display:flex; align-items:center; gap:10px; margin:0; }
.publish-state{ font-size:.78rem; color:var(--ink-soft); white-space:nowrap; }
.publish-state.is-pending{ color:#b57d15; font-weight:600; }
.publish-state .ti{ font-size:.9rem; vertical-align:-2px; }
@media (max-width: 1199.98px){ .publish-state{ display:none; } }

.app-content{ padding:20px 18px 32px; flex:1; }
.app-content-narrow{ padding:28px 18px; max-width:640px; margin:0 auto; }

.impersonation-bar{
    background:#8250df; color:#fff; padding:7px 20px; font-size:.83rem;
    display:flex; align-items:center; gap:8px; margin:14px 18px 0; border-radius:10px;
}

/* ===================== Bausteine ===================== */

.card{ border:1px solid var(--hairline); border-radius:.3rem; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.card-header{ background:transparent; font-weight:600; border-bottom:1px solid var(--hairline); }

.edit-block{
    background:var(--panel-bg); border:1px solid var(--hairline); border-radius:.3rem;
    padding:16px 18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.edit-block__title{
    font-size:.95rem; font-weight:700; color:#1f2733;
    margin:-16px -18px 0; padding:12px 18px;
    border-bottom:1px dashed var(--hairline); background:rgba(246,247,251,.55);
    border-radius:.3rem .3rem 0 0;
}
.edit-block__intro{ color:var(--ink-soft); font-size:.8rem; margin:12px 0 0; }
.edit-block__title + .edit-block__intro{ margin-top:12px; }
.edit-block__title + *:not(.edit-block__intro),
.edit-block__intro + *{ margin-top:14px; }

/* eingeklappter Bereich "Weitere Einstellungen" */
.edit-more > summary{
    list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    border-bottom:0; border-radius:.3rem;
}
.edit-more > summary::-webkit-details-marker{ display:none; }
.edit-more > summary::before{
    content:"\203A"; display:inline-block; width:10px; color:var(--ink-soft);
    transition:transform .15s; font-weight:400;
}
.edit-more[open] > summary::before{ transform:rotate(90deg); }
.edit-more[open] > summary{ border-bottom:1px dashed var(--hairline); border-radius:.3rem .3rem 0 0; }
.edit-more:not([open]){ padding-bottom:0; }
.edit-more:not([open]) > summary{ margin-bottom:0; }
.edit-more__hint{ font-size:.78rem; font-weight:400; color:var(--ink-soft); }
.edit-more__title{ font-size:.85rem; font-weight:700; margin:22px 0 8px; color:#1f2733; }
.edit-more__title:first-of-type{ margin-top:16px; }

.form-label{ font-weight:500; font-size:.85rem; margin-bottom:.3rem; }
.form-text{ font-size:.78rem; }

/* Editor: Hauptinhalt + Meta-Karten (Veröffentlichen/Kopfbild/Adresse) volle Breite, untereinander */
.form-actions-bar{
    display:flex; justify-content:flex-end; gap:8px;
    background:var(--panel-bg); border:1px solid var(--hairline); border-radius:.3rem;
    padding:12px 16px; margin-bottom:24px; box-shadow:0 1px 2px rgba(16,24,40,.03);
}

/* Stat-Kacheln */
.stat-card{ background:var(--panel-bg); border:1px solid var(--hairline); border-radius:.3rem; padding:16px; height:100%; }
.stat-icon{ font-size:1.3rem; }
.stat-value{ font-size:1.7rem; font-weight:700; line-height:1.1; margin-top:4px; color:#1f2733; }
.stat-label{ font-size:.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px; }

/* Seitentyp-Auswahl */
.typecards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.typecard{ cursor:pointer; margin:0; }
.typecard input{ position:absolute; opacity:0; }
.typecard__body{
    display:flex; flex-direction:column; gap:4px; height:100%;
    border:1.5px solid var(--hairline); border-radius:.3rem; padding:14px; background:#fff;
}
.typecard__body i{ font-size:1.4rem; color:var(--accent); }
.typecard__body strong{ font-size:.92rem; color:#1f2733; }
.typecard__body span{ font-size:.8rem; color:var(--ink-soft); }
.typecard input:checked + .typecard__body{ border-color:var(--accent); background:var(--accent-soft); }

/* Bild-Picker */
.imgpick__row{ display:flex; gap:14px; align-items:flex-start; }
.imgpick__preview{
    width:150px; height:110px; border-radius:.4rem; overflow:hidden; flex:none;
    background:#eef1f5; display:flex; align-items:center; justify-content:center; position:relative;
}
.imgpick__preview.is-empty{ border:1.5px dashed #c7ccd6; color:var(--ink-soft); font-size:.8rem; }
.imgpick__preview img{ width:100%; height:100%; object-fit:cover; }
.imgpick__badge{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff;
    font-size:.62rem; text-align:center; padding:2px; }
.imgpick__actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

/* Modal-Bildraster */
.picker-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.picker-item{
    border:1px solid var(--hairline); border-radius:.4rem; background:#fff; padding:0; overflow:hidden;
    cursor:pointer; text-align:left;
}
.picker-item img{ width:100%; height:90px; object-fit:cover; display:block; }
.picker-item span{ display:block; font-size:.7rem; padding:4px 6px; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-item:hover{ border-color:var(--accent); }

/* Google-Vorschau */
.google-preview{ border:1px solid var(--hairline); border-radius:.4rem; padding:12px 14px; background:#fafbfc; max-width:600px; }
.gp-title{ color:#1a0dab; font-size:1.05rem; line-height:1.3; }
.gp-url{ color:#006621; font-size:.8rem; }
.gp-desc{ color:#4d5156; font-size:.85rem; margin-top:2px; }

/* Inline-Liste (Einträge einer Seite) */
.inline-list{ border:1px solid var(--hairline); border-radius:.4rem; overflow:hidden; }
.inline-list__row{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-top:1px solid var(--hairline); }
.inline-list__row:first-child{ border-top:0; }
.inline-list__thumb{
    width:44px; height:44px; flex:none; border-radius:.35rem; background:#eef1f5;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.inline-list__thumb img{ width:100%; height:100%; object-fit:cover; }
.inline-list__main{ flex:1; min-width:0; }
.inline-list__actions{ display:flex; align-items:center; gap:2px; flex:none; }

.hero-thumb{ display:block; width:180px; text-decoration:none; color:inherit; border:1px solid var(--hairline); border-radius:.4rem; overflow:hidden; background:var(--panel-bg); }
.hero-thumb:hover{ border-color:var(--accent); }
.hero-thumb img{ width:100%; height:100px; object-fit:cover; display:block; }
.hero-thumb__meta{ display:block; padding:6px 8px; }
.hero-thumb__edit{ display:block; font-size:.74rem; color:var(--accent); margin-top:4px; }

/* Tabellen */
.table{ --bs-table-border-color:var(--hairline); }
.table > :not(caption) > * > *{ padding:.65rem .75rem; }
.table thead th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); font-weight:600; }

/* ===== Paces-Listenlayout (Übersichten) ===== */
.page-title-head{
    display:flex; align-items:center; gap:16px; min-height:52px; margin-bottom:14px;
}
.page-title-head .page-main-title{ font-size:1.15rem; font-weight:700; margin:0; color:#1f2733; }
.page-back{ display:inline-flex; align-items:center; gap:3px; font-size:.78rem; color:var(--ink-soft); text-decoration:none; margin-bottom:2px; }
.page-back:hover{ color:var(--accent); }
.page-intro{ font-size:.82rem; color:var(--ink-soft); margin:.25rem 0 0; max-width:62rem; }
.page-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.page-actions .btn{ white-space:nowrap; }
@media (max-width: 575.98px){ .page-title-head{ flex-wrap:wrap; } .page-actions{ width:100%; justify-content:flex-start; } }

.card--table > .card-header{
    border-bottom:1px dashed var(--hairline); background:rgba(246,247,251,.6);
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;
    padding:.7rem 1rem;
}
.card--table > .card-footer{ border-top:1px dashed var(--hairline); background:transparent; font-size:.8rem; color:var(--ink-soft); }

.app-search{ position:relative; }
.app-search .form-control,.app-search .form-select{ padding-left:34px; height:34px; font-size:.85rem; }
.app-search-icon{
    position:absolute; left:0; top:0; height:34px; width:34px; display:flex; align-items:center;
    justify-content:center; color:var(--ink-soft); font-size:.95rem; pointer-events:none;
}

.avatar-md{ height:2.25rem; width:2.25rem; flex:none; }
.avatar-title{
    display:flex; align-items:center; justify-content:center; height:100%; width:100%;
    background:#eef1f5; color:#8a94a6; border-radius:.4rem; font-size:1rem;
}

.badge-soft-success{ background:#e4f5ec; color:#1a8b57; }
.badge-soft-secondary{ background:#eceef1; color:#6b7583; }
.badge-soft-warning{ background:#fdf2dd; color:#b57d15; }
.badge-soft-danger{ background:#fbe6e6; color:#c23b3b; }
.badge-soft-info{ background:#e3f1fb; color:#1f6fa8; }
.badge-label{ font-weight:600; font-size:.68rem; padding:.32em .6em; letter-spacing:.2px; }

.btn-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; padding:0;
}
.btn-soft-primary{ background:var(--accent-soft); color:var(--accent); border:1px dashed rgba(35,109,201,.4); }
.btn-soft-primary:hover{ background:var(--accent); color:#fff; }

.table-custom{ margin:0; }
.table-custom > thead > tr > th{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);
    font-weight:600; background:rgba(246,247,251,.7); border-bottom:1px solid var(--hairline);
    padding:.6rem .75rem; white-space:nowrap;
}
.table-custom > tbody > tr > td{ padding:.7rem .75rem; vertical-align:middle; }
.table-custom > tbody > tr:hover{ background:rgba(35,109,201,.03); }
.row-title{ font-weight:600; color:#1f2733; text-decoration:none; }
.row-title:hover{ color:var(--accent); }
.row-sub{ font-size:.72rem; color:var(--ink-soft); }
.link-reset{ color:inherit; text-decoration:none; }
.fs-xxs{ font-size:.7rem; }
.fs-xs{ font-size:.78rem; }
.min-w-0{ min-width:0; }
.row-sub code{ color:var(--ink-soft); background:transparent; padding:0; font-size:.72rem; }

/* Medien-Raster: Kacheln (Standard) und Liste (Umschalter oben rechts, per JS+localStorage) */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.media-tile{ overflow:hidden; }
.media-row{ display:flex; flex-direction:column; height:100%; }
.media-thumb{ position:relative; height:130px; display:flex; align-items:center; justify-content:center; background:#eef1f5; color:#9aa4b2; font-size:2rem; flex:0 0 auto; }
.media-thumb img{ width:100%; height:100%; object-fit:cover; }
.badge-external{
    position:absolute; top:4px; left:4px; z-index:1; display:flex; align-items:center; gap:3px;
    background:rgba(0,0,0,.65); color:#fff; font-size:.62rem; font-weight:600; line-height:1;
    padding:3px 6px; border-radius:.3rem;
}
.media-grid.is-list .badge-external{ padding:3px 4px; }
.media-grid.is-list .badge-external__text{ display:none; }
.media-info{ padding:8px 10px 0; min-width:0; }
.media-info .row-sub{ font-size:.72rem; }
.media-controls{ display:flex; flex-direction:column; gap:6px; padding:6px 10px 10px; }
.media-controls .btn-row{ display:flex; gap:6px; }
.media-controls .btn-row > *{ flex:1 1 0; }

.view-toggle{ display:inline-flex; border:1px solid var(--hairline); border-radius:.3rem; overflow:hidden; }
.view-toggle button{ border:0; background:#fff; padding:.3rem .6rem; color:var(--ink-soft); line-height:1; }
.view-toggle button.active{ background:var(--accent); color:#fff; }

/* Ordner-Kacheln in der Mediathek (gleiches Grid wie media-tile) */
.folder-tile{ display:flex; align-items:center; gap:10px; padding:12px; text-decoration:none; color:inherit; flex:1 1 auto; min-width:0; }
.folder-tile i{ font-size:1.6rem; color:var(--accent); }
.folder-tile__name{ font-weight:600; font-size:.85rem; }
.folder-tile__meta{ font-size:.72rem; color:#9aa4b2; }
.folder-controls{ display:flex; gap:6px; padding:0 12px 12px; }
.folder-controls .input-group{ max-width:180px; }

/* Kopfbilder: Fokuspunkt setzen (Klick ins Vorschaubild) – aus dem wt27-Projekt übernommen */
.hero-fokus-bild-wrap{
    position:relative; display:inline-block; cursor:crosshair; line-height:0;
    border-radius:.4rem; overflow:hidden; border:1px solid var(--hairline);
}
.hero-fokus-bild-wrap img{ display:block; width:100%; max-width:360px; height:auto; }
.hero-fokus-marker{
    position:absolute; width:22px; height:22px; border-radius:50%;
    border:2px solid #fff; box-shadow:0 0 0 1.5px var(--accent), 0 1px 4px rgba(0,0,0,.4);
    background:rgba(35,109,201,.35); pointer-events:none;
    transform:translate(-50%,-50%); transition:left .1s, top .1s;
}
.hero-fokus-hinweis{ font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; }

/* Listenansicht: Zeilen statt Kacheln, Thumbnail bleibt sichtbar (nur kleiner) */
.media-grid.is-list{ display:flex; flex-direction:column; gap:8px; }
.media-grid.is-list .media-tile{ width:100%; }
.media-grid.is-list .media-row{ flex-direction:row; align-items:center; }
.media-grid.is-list .media-thumb{ width:56px; height:56px; flex-basis:56px; font-size:1.3rem; }
.media-grid.is-list .media-info{ flex:1 1 260px; padding:8px 12px; }
.media-grid.is-list .media-controls{ flex-direction:row; align-items:center; flex:0 0 auto; padding:8px 12px; }
.media-grid.is-list .media-controls .input-group{ max-width:140px; }
.media-grid.is-list .media-controls .btn-row{ flex:0 0 auto; }
.media-grid.is-list .folder-controls{ padding:0 12px 0 0; flex:0 0 auto; }

/* Zuschneiden-Werkzeug (Bildbearbeitung) */
.crop-wrap{ position:relative; display:inline-block; max-width:100%; line-height:0; cursor:crosshair; }
.crop-wrap img{ max-width:100%; max-height:70vh; display:block; user-select:none; -webkit-user-drag:none; }
.crop-box{
    position:absolute; border:2px dashed #fff; outline:1px solid var(--accent);
    background:rgba(35,109,201,.15); pointer-events:none;
}

/* Metadaten-Liste in der Bild-Detailansicht */
.media-meta{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:6px; font-size:.82rem; }
.media-meta dt{ color:var(--ink-soft); font-weight:500; white-space:nowrap; }
.media-meta dd{ margin:0; }

.rte-editor{ min-height:120px; }

/* Seitenzusammenbau (Segmente) + Formular-Baukasten (Felder) teilen sich die Karten-Optik */
.seg-toolbar, .field-toolbar{ display:flex; flex-wrap:wrap; gap:6px; }
.seg-card{
    border:1px solid var(--hairline); border-radius:.4rem; margin-bottom:12px; overflow:hidden;
}
.seg-card__head{
    display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(246,247,251,.7);
    border-bottom:1px solid var(--hairline); font-size:.85rem;
}
.seg-card__head i{ color:var(--accent); }
.seg-card__body{ padding:12px; }

/* Mediathek-Dialog muss auch über TinyMCEs eigenem Bild-Dialog liegen (dessen
   .tox-dialog-wrap nutzt z-index:1100 – höher als Bootstraps Standard-Modal). */
#mediaModal{ z-index:1200; }
.modal-backdrop{ z-index:1150; }

/* ===================== Login ===================== */
body.app-bare{ margin:0; background:var(--page-bg); font-family:var(--font); color:var(--ink); }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ background:#fff; border:1px solid var(--hairline); border-radius:.6rem; padding:34px; width:360px;
    box-shadow:0 4px 24px rgba(16,24,40,.06); }
.login-brand{ font-size:1.8rem; font-weight:800; text-align:center; letter-spacing:-1px; color:#1f2733; }
.login-brand span{ color:var(--accent); }
.login-sub{ text-align:center; color:var(--ink-soft); margin-bottom:22px; }

/* Mobil/Tablet: Menü als ausklappbare Seitenleiste (Knopf links in der Kopfleiste) */
.app-menu-toggle{ display:none; }
.app-backdrop{ display:none; }
@media (max-width: 991.98px){
    .app-sidebar{ transform:translateX(-100%); transition:transform .2s ease; z-index:1045; box-shadow:0 0 24px rgba(16,24,40,.15); }
    body.nav-open .app-sidebar{ transform:none; }
    body.nav-open .app-backdrop{ display:block; position:fixed; inset:0; background:rgba(16,24,40,.35); z-index:1040; }
    body.nav-open{ overflow:hidden; }
    .app-main{ margin-left:0; }
    .app-menu-toggle{ display:inline-flex; }
    .app-topbar{ margin:10px; top:10px; padding:0 12px; }
    .app-topbar-left{ display:flex; align-items:center; gap:8px; }
    .app-content{ padding:16px 12px 28px; }
}

/* Zeitsteuerungs-Hinweis unter dem Status-Badge (Seiten, Kopfbilder) */
.schedule-note{ font-size:.72rem; color:var(--ink-soft); margin-top:3px; white-space:nowrap; }
.avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:6px; display:block; }
.btn-soft-success{ background:#e4f5ec; color:#1a8b57; border:1px dashed rgba(26,139,87,.4); }
.btn-soft-success:hover{ background:#1a8b57; color:#fff; }
.table-custom > tbody > tr.is-done > td{ color:var(--ink-soft); }
.stat-card--link{ display:block; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.stat-card--link:hover{ border-color:var(--accent); box-shadow:0 2px 8px rgba(35,109,201,.08); color:inherit; }
.app-nav-count{ margin-left:auto; background:#c23b3b; color:#fff; font-size:.68rem; font-weight:700; line-height:1; padding:.25em .5em; border-radius:10px; }
/* Datei-Feld: Vorschau (PDF erste Seite / Bild / Kachel mit Dateityp), darunter der Dateiname */
.imgpick--file .imgpick__preview{ width:170px; height:auto; flex-direction:column; align-items:stretch; overflow:visible; background:none; }
.imgpick--file .imgpick__preview.is-empty{ height:110px; align-items:center; background:#eef1f5; }
.imgpick__doc{ position:relative; display:flex; align-items:center; justify-content:center; height:200px; border-radius:.4rem; overflow:hidden;
    background:#eef1f5; border:1px solid #dfe3ea; }
.imgpick__doc img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:top; background:#fff; }
.imgpick__ext{ position:absolute; font-weight:700; font-size:1.1rem; letter-spacing:.06em; color:#7a8495; }
.imgpick__doc[data-ext="pdf"] .imgpick__ext{ color:#c23b3b; }
.imgpick__doc img + .imgpick__ext{ z-index:2; top:6px; right:6px; font-size:.62rem; padding:2px 6px; border-radius:3px; background:rgba(0,0,0,.65); color:#fff; }
.imgpick__file{ display:block; margin-top:6px; font-size:.75rem; line-height:1.3; word-break:break-all; color:var(--ink); }
a.imgpick__file:hover{ color:var(--accent); }
.imgpick--file .imgpick__badge{ position:static; margin-top:4px; border-radius:3px; }

/* Einstellungen: Einstiege zu Kopfbildern und Formularen */
.settings-tile{ display:flex; gap:14px; align-items:center; padding:14px; height:100%; background:var(--panel-bg);
    border:1px solid var(--hairline); border-radius:.4rem; text-decoration:none; color:inherit; }
.settings-tile:hover{ border-color:var(--accent); color:inherit; }
.settings-tile__media{ flex:none; width:96px; height:60px; border-radius:.3rem; overflow:hidden; background:#eef1f5;
    display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--ink-soft); }
.settings-tile__media img{ width:100%; height:100%; object-fit:cover; }

/* Baustein „Ansprechpartner": Personenauswahl */
.seg-persons{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.seg-person{ display:flex; align-items:center; gap:6px; font-size:.85rem; }

/* ===================== Reihenfolge ziehen ===================== */
.sort-handle{
    display:inline-flex; align-items:center; justify-content:center; width:24px; height:28px;
    color:#9aa3b2; cursor:grab; border-radius:4px; touch-action:none; flex:none;
}
.sort-handle:hover{ color:var(--bs-primary, #3e60d5); background:rgba(62,96,213,.08); }
.sort-handle--off{ visibility:hidden; cursor:default; }
.sort-chosen{ background:#f4f6fb !important; }
.sort-ghost{ opacity:.35; }
.sortable-fallback{ box-shadow:0 8px 24px rgba(16,24,40,.18); opacity:.95 !important; background:#fff; }
.sortable-fallback td{ background:#fff; }

.kp-toast{
    position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); z-index:2000;
    background:#1f2733; color:#fff; font-size:.85rem; padding:10px 16px; border-radius:6px;
    box-shadow:0 8px 24px rgba(16,24,40,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    max-width:calc(100vw - 32px);
}
.kp-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
.kp-toast--error{ background:#c0392b; }

/* ===================== Übersicht: Was ist zu tun? ===================== */
.quick-actions{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.quick-action{
    display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:.4rem;
    background:var(--panel-bg); border:1px solid var(--hairline); color:#1f2733; font-weight:600;
    text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.quick-action i{ font-size:1.5rem; color:var(--accent); }
.quick-action:hover{ border-color:var(--accent); box-shadow:0 4px 14px rgba(35,109,201,.12); color:#1f2733; transform:translateY(-1px); }
.quick-action--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.quick-action--primary i{ color:#fff; }
.quick-action--primary:hover{ color:#fff; filter:brightness(1.05); }

.section-title{ font-size:.95rem; font-weight:700; color:#1f2733; margin:0 0 10px; }

.task{
    display:flex; gap:14px; padding:14px 16px; margin-bottom:10px; border-radius:.4rem;
    background:var(--panel-bg); border:1px solid var(--hairline);
}
.task__icon{ font-size:1.6rem; line-height:1; flex:none; padding-top:2px; }
.task__body{ flex:1; min-width:0; }
.task__head{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
.task__title{ font-weight:700; color:#1f2733; }
.task__text{ font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
.task__items{ list-style:none; padding:0; margin:10px 0 0; border-top:1px dashed var(--hairline); }
.task__items li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:.85rem; border-bottom:1px dashed var(--hairline); }
.task__items li:last-child{ border-bottom:0; padding-bottom:0; }
.task__items a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task__note{ color:var(--ink-soft); font-size:.78rem; white-space:nowrap; }
.task__more{ color:var(--ink-soft); }
.task--done{ align-items:center; }
@media (max-width:575.98px){ .task__head{ flex-direction:column; } }

/* sortierbare Spaltenköpfe */
.th-sort{ background:none; border:0; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.th-sort i{ opacity:.45; }
.th-sort[data-dir] i{ opacity:1; color:var(--accent); }

/* Seitenbausteine: Bildauswahl, Symbol-Punkte, Hintergrund */
.seg-img__row{ display:flex; gap:10px; align-items:flex-start; }
.seg-img__prev{ width:120px; aspect-ratio:4/3; border:1px dashed var(--hairline); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--ink-soft); overflow:hidden; background:#fafbfc; flex:none; }
.seg-img__prev img{ width:100%; height:100%; object-fit:cover; }
.seg-img__prev:not(.is-empty){ border-style:solid; }
.seg-sym-rows{ display:grid; gap:6px; }
.seg-sym-row{ display:grid; grid-template-columns:32px 140px 1fr 1.6fr 110px auto; gap:6px; align-items:center; }
.seg-sym-row__icon{ width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.seg-sym-row textarea{ resize:vertical; min-height:31px; }
@media (max-width: 767.98px){ .seg-sym-row{ grid-template-columns:32px 1fr auto; } .seg-sym-row input, .seg-sym-row textarea{ grid-column:2 / 4; } }
.seg-bg{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; margin-top:12px; padding-top:10px; border-top:1px dashed var(--hairline); }
.seg-bg > select{ width:auto; min-width:130px; }
.seg-bg__img{ flex-basis:100%; }

/* frühere Fassungen */
.revision-list{ list-style:none; margin:14px 0 0; padding:0; }
.revision-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--hairline); font-size:.85rem; }
.revision-list li:last-child{ border-bottom:0; }
.revision-list form{ margin:0; }

/* Galerie-Baustein im Editor */
.seg-gal{ display:flex; flex-wrap:wrap; gap:8px; min-height:40px; }
.seg-gal__item{ position:relative; width:96px; aspect-ratio:4/3; border-radius:4px; overflow:hidden; cursor:grab; background:#f1f3f6; }
.seg-gal__item img{ width:100%; height:100%; object-fit:cover; }
.seg-gal__item button{ position:absolute; top:2px; right:2px; width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; line-height:1; font-size:15px; padding:0; }

/* Vorschau (Handy/Computer) */
.preview-stage{ background:#e9ecf2; display:flex; justify-content:center; padding:18px; }
.preview-stage iframe{ width:390px; max-width:100%; height:72vh; border:0; border-radius:14px; background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.18); transition:width .25s; }

/* Seitenvorlagen beim Anlegen */
.tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.tpl-card{ position:relative; cursor:pointer; margin:0; }
.tpl-card input{ position:absolute; opacity:0; }
.tpl-card__body{ display:flex; flex-direction:column; gap:4px; height:100%; padding:12px 14px; border:1px solid var(--hairline); border-radius:.4rem; background:var(--panel-bg); transition:border-color .15s, box-shadow .15s; }
.tpl-card__body i{ font-size:1.5rem; color:var(--accent); }
.tpl-card__body small{ color:var(--ink-soft); font-size:.75rem; line-height:1.35; }
.tpl-card:hover .tpl-card__body{ border-color:#b9c6da; }
.tpl-card input:checked + .tpl-card__body{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(35,109,201,.18); }
.tpl-card input:focus-visible + .tpl-card__body{ outline:2px solid var(--accent); outline-offset:2px; }

/* Übersicht: Besucher */
.visit-stats{ display:flex; gap:22px; flex-wrap:wrap; }
.visit-stats__num{ display:block; font-size:1.5rem; font-weight:700; color:#1f2733; line-height:1.1; }
.visit-stats__label{ font-size:.75rem; color:var(--ink-soft); }
.visit-bars{ display:flex; align-items:flex-end; gap:3px; height:54px; margin:14px 0 4px; }
.visit-bars span{ flex:1; background:var(--accent); opacity:.75; border-radius:2px 2px 0 0; min-height:2px; }
.visit-bars span:nth-last-child(-n+7){ opacity:1; }
.visit-top{ list-style:none; margin:10px 0 0; padding:0; font-size:.82rem; }
.visit-top li{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-top:1px dashed var(--hairline); }

/* Statistik */
.visit-bars--big{ height:140px; }
.vitals-table th[scope="row"]{ min-width:220px; }
.vitals-bar{ display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--hairline); margin:6px 0 4px; max-width:260px; }
.vitals-bar__good{ background:#1e8e5a; }
.vitals-bar__mid{ background:#e8a317; }
.vitals-bar__poor{ background:#d6453d; }

/* Dateiauswahl & Mediathek: PDF-Vorschau (erste Seite) */
.picker-doc{ position:relative; flex:none; width:38px; height:50px; border-radius:3px; overflow:hidden; background:#eef1f5; border:1px solid #dfe3ea;
    display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:700; color:#7a8495; }
.picker-doc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; background:#fff; }
.media-pdf-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; background:#fff; }
.imgpick__doc[data-ext] img + .imgpick__ext{ color:#fff; }

/* Personen → Felder */
.pf-row{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--bs-border-color,#e9ecef)}
.pf-row:first-child{padding-top:0}
.pf-row .sort-handle{margin-top:30px;cursor:grab;color:#adb5bd}
.pf-row__main{flex:1;min-width:0}
.pf-row [data-pf-remove]{margin-top:28px}

/* Baustein „Personen": Auswahl mit Reihenfolge */
.seg-persons:has(.seg-person--sort){ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px 18px; }
.seg-person--sort{ justify-content:space-between; }
.seg-person--sort label{ display:flex; align-items:center; gap:6px; margin:0; min-width:0; }
/* Onepager-Abschnitt je Baustein */
.seg-abschnitt{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--bs-border-color,#dee2e6); }