/* Social-Poster, interner Bereich.
   Teil 1 ist eine unveraenderte Kopie von apps.miet-boot.de/akquise/intern/style.css (Stand 2026-11-02),
   damit beide Tools gleich aussehen. Bei Aenderungen am Akquise-Design Teil 1 einfach neu kopieren.
   Teil 2 enthaelt nur Bausteine, die es ausschliesslich im Social-Poster gibt. */

/* ==================== Teil 1: Akquise-Design ==================== */

:root {
	--navy: #283e55;
	--navy-tief: #1c2d3f;
	--navy-2: #34506c;
	--orange: #f89944;
	--orange-dunkel: #e9822a;
	--bg: #eef3f7;
	--flaeche: #f5f7fa;
	--linie: #e5eaf0;
	--text: #283e55;
	--grau: #64748b;
	--gruen: #1f9d55;
	--radius: 16px;
	--schatten: 0 1px 2px rgba(40, 62, 85, .05), 0 8px 24px rgba(40, 62, 85, .07);
	--schatten-hoch: 0 2px 4px rgba(40, 62, 85, .06), 0 18px 40px rgba(40, 62, 85, .14);

	/* Bootstrap an die Farbwelt anpassen */
	--bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
	--bs-body-color: var(--text);
	--bs-body-bg: var(--bg);
	--bs-border-color: var(--linie);
	--bs-border-radius: 10px;
	--bs-border-radius-sm: 8px;
	--bs-border-radius-lg: 14px;
	--bs-link-color: #1f5f9e;
	--bs-link-color-rgb: 31, 95, 158;
	--bs-link-hover-color: var(--navy);
	--bs-primary: var(--navy);
	--bs-primary-rgb: 40, 62, 85;
	--bs-success-rgb: 31, 157, 85;
	--bs-warning-rgb: 233, 160, 32;
	--bs-danger-rgb: 205, 60, 50;
	--bs-info-rgb: 43, 138, 214;
	--bs-secondary-rgb: 100, 116, 139;
}

body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--bs-link-color); }
::selection { background: rgba(248, 153, 68, .3); }

/* ---------- Kopf ---------- */
.topbar { position: sticky; top: 0; z-index: 1030; background: rgba(28, 45, 63, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
	padding: .65rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.topbar .brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; letter-spacing: .2px; }
.topbar .brand img { height: 27px; width: auto; }
.topbar .brand span { color: var(--orange); font-weight: 600; padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .2); }
.nav-link-mb { color: rgba(255, 255, 255, .78); text-decoration: none; padding: .45rem .85rem; border-radius: 999px; font-size: .93rem; font-weight: 500; transition: background-color .15s, color .15s; }
.nav-link-mb:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-link-mb.aktiv { background: rgba(248, 153, 68, .16); color: #ffc58e; }
.nav-link-mb i { margin-right: .2rem; }
.nav-user { color: rgba(255, 255, 255, .75); font-size: .88rem; margin-left: .8rem; padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .15); }
.nav-user a { color: rgba(255, 255, 255, .75); margin-left: .4rem; }
.nav-user a:hover { color: #fff; }

/* Band mit Seitentitel */
.band { position: relative; overflow: hidden; color: #fff; padding: 1.6rem 0 1.8rem;
	background: radial-gradient(120% 140% at 15% 0%, var(--navy-2) 0%, var(--navy) 45%, var(--navy-tief) 100%); }
.band::after { content: ''; position: absolute; right: -10%; top: -60%; width: 50%; height: 220%; background: radial-gradient(closest-side, rgba(248, 153, 68, .14), transparent); pointer-events: none; }
.band > div { position: relative; z-index: 1; }
.band h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.band .unterzeile { font-size: .95rem; color: #c9d6e3; margin-top: .3rem; }
.band .btn-light { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 600; border-radius: 999px; }
.band .btn-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.band .badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }

/* ---------- Karten ---------- */
.card, .karte { border: 0; border-radius: var(--radius); box-shadow: var(--schatten); background: #fff; }
.karte { padding: 1.35rem 1.45rem; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--linie);
	padding-bottom: .8rem; margin-bottom: 1.05rem; gap: .5rem; flex-wrap: wrap; }
.karte-kopf h2 { font-size: 1.02rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .55rem; }
.karte-kopf h2 i { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: rgba(248, 153, 68, .14); color: var(--orange-dunkel); font-size: .95rem; }
.border-mb { border-top: 0 !important; }

/* KPI-Kacheln */
.kpi { display: block; background: #fff; border-radius: var(--radius); padding: 1.05rem 1.2rem 1.1rem; box-shadow: var(--schatten);
	color: var(--text); text-decoration: none; position: relative; transition: transform .18s ease, box-shadow .18s ease; height: 100%; overflow: hidden; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); color: var(--text); }
.kpi .label { font-size: .82rem; color: var(--grau); font-weight: 500; padding-right: 2.6rem; }
.kpi .wert { font-size: 2.05rem; font-weight: 750; line-height: 1.1; margin-top: .45rem; letter-spacing: -.02em; }
.kpi .icon { position: absolute; top: .9rem; right: .95rem; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
	font-size: 1.15rem; color: var(--navy); background: var(--flaeche); }
.kpi.akzent .wert { color: var(--orange-dunkel); }
.kpi.akzent .icon { background: rgba(248, 153, 68, .15); color: var(--orange-dunkel); }
.kpi.gruen .wert { color: var(--gruen); }
.kpi.gruen .icon { background: rgba(31, 157, 85, .12); color: var(--gruen); }
.kpi .wert .small { font-size: .85rem; font-weight: 600; margin-left: .4rem; letter-spacing: 0; }
.kpi.aktiv { box-shadow: 0 0 0 2px var(--orange), var(--schatten-hoch); }

/* Datenfelder */
.feld-label { font-weight: 600; font-size: .8rem; color: var(--grau); text-transform: none; letter-spacing: .01em; }
.feld-wert { color: var(--text); margin-bottom: .95rem; word-break: break-word; font-size: .95rem; }
.feld-wert:empty::after { content: '–'; color: #b0b9c4; }

/* ---------- Reiter ---------- */
.tabs-mb { display: flex; flex-wrap: wrap; gap: .25rem; border: 0; background: #fff; border-radius: 14px; padding: .35rem; box-shadow: var(--schatten); margin-bottom: .75rem !important; }
.tabs-mb .nav-link { border: 0; background: transparent; color: #475569; border-radius: 10px; padding: .5rem .95rem; font-weight: 600; font-size: .92rem; }
.tabs-mb .nav-link:hover { background: var(--flaeche); color: var(--text); }
.tabs-mb .nav-link.active { background: var(--navy); color: #fff; }
.tabs-mb .nav-link .badge { margin-left: .2rem; }
.tab-inhalt { border-left: 0; }

/* ---------- Tabellen ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f6f9fc; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .78rem .75rem; border-bottom-color: var(--linie); }
.table-sm > :not(caption) > * > * { padding: .5rem .6rem; }
.table thead th, .table .table-light th { background: var(--flaeche) !important; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); font-weight: 700; border-bottom: 1px solid var(--linie); }
.table thead tr th:first-child { border-top-left-radius: 10px; }
.table thead tr th:last-child { border-top-right-radius: 10px; }
.table-responsive.card { padding: .35rem; }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Badges und Chips ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .38em .72em; letter-spacing: .01em; }
.text-bg-success { background: #e3f5ea !important; color: #17803f !important; }
.text-bg-primary { background: #e4edf7 !important; color: #23507d !important; }
.text-bg-info { background: #e1f1fb !important; color: #1b6fa8 !important; }
.text-bg-warning { background: #fdf0d8 !important; color: #9a5d00 !important; }
.text-bg-danger { background: #fbe4e2 !important; color: #b42c22 !important; }
.text-bg-secondary { background: #eceff3 !important; color: #4b5a6b !important; }
.text-bg-light { background: #f3f5f8 !important; color: #64748b !important; }
.text-bg-dark { background: var(--navy) !important; color: #fff !important; }
.text-bg-purple { background: #efe8fb !important; color: #6236b0 !important; }
.text-bg-teal { background: #dff3f1 !important; color: #0f7a74 !important; }
.chip { display: inline-block; background: #eef4fb; color: #23507d; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 500; margin: 0 .25rem .35rem 0; }
.rel { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 9px; font-weight: 700; font-size: .82rem; }
.rel-A { background: #e3f5ea; color: #17803f; }
.rel-B { background: #fdf0d8; color: #9a5d00; }
.rel-C { background: #eceff3; color: #64748b; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1rem; transition: transform .12s, box-shadow .15s, background-color .15s; }
.btn-sm { border-radius: 8px; padding: .32rem .7rem; }
.btn-mb { background: var(--orange); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(248, 153, 68, .28); }
.btn-mb:hover, .btn-mb:focus { background: var(--orange-dunkel); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(248, 153, 68, .35); }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-tief); border-color: var(--navy-tief); }
.btn-outline-primary { color: var(--navy); border-color: #c9d4df; background: #fff; }
.btn-outline-primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-outline-secondary { color: #475569; border-color: #d5dde6; background: #fff; }
.btn-outline-secondary:hover { background: var(--flaeche); color: var(--text); border-color: #c4cfda; }
.btn-light.border { background: #fff; border-color: #dbe2ea !important; }
.btn-light.border:hover { background: var(--flaeche); }
.btn-link { font-weight: 600; text-decoration: none; }
.btn-outline-success { color: #17803f; border-color: #b7e0c6; }
.btn-outline-warning { color: #9a5d00; border-color: #f1d39a; }
.btn-outline-danger { color: #b42c22; border-color: #efc0bb; }
.btn-check:checked + .btn-outline-success { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.btn-check:checked + .btn-outline-warning { background: #e9a020; border-color: #e9a020; color: #fff; }
.btn-check:checked + .btn-outline-danger { background: #cd3c32; border-color: #cd3c32; color: #fff; }
.btn-check:checked + .btn-outline-secondary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-check:checked + .btn { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

/* ---------- Formulare ---------- */
.form-control, .form-select { border-color: #d5dde6; border-radius: 10px; padding: .55rem .85rem; color: var(--text); background-color: #fff; }
.input-group-text { background-color: #fff; }
.form-control-sm, .form-select-sm { border-radius: 8px; padding: .38rem .7rem; }
.form-control:focus, .form-select:focus { border-color: var(--orange); box-shadow: 0 0 0 .22rem rgba(248, 153, 68, .2); }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(248, 153, 68, .2); border-color: var(--orange); }
.input-group-text { border-color: #d5dde6; border-radius: 10px; color: var(--grau); }
.form-label { color: var(--grau); font-weight: 600; }

/* Filter */
.filter-gruppe { border-top: 1px solid var(--linie); margin-top: 1.05rem; padding-top: 1rem; }
.filter-titel { font-weight: 700; font-size: .76rem; color: var(--grau); margin-bottom: .55rem; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: .4rem; }
.filter-titel i { color: var(--orange-dunkel); }
.form-select.gesetzt { border-color: var(--orange); background-color: #fff6ee; font-weight: 600; }

/* ---------- Seitenpanel (rechtes Panel, das über die Seite gleitet) ----------
   Ein Bauteil, drei Einsatzorte mit eigenem Namen je nach Inhalt: .seitenpanel
   (index.php, Verleiher-Details), .ap-panel (mail.php, E-Mail-Unterhaltung),
   .vp-panel (mail.php, Mail-Vorschau). Nur Breite, Titel-Verhalten und Inhalt
   (-koerper) unterscheiden sich je nach Einsatzort, daher weiterhin per Datei. */
.seitenpanel, .ap-panel, .vp-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050; background: var(--bg);
	box-shadow: -18px 0 50px rgba(28, 45, 63, .25); display: flex; flex-direction: column;
	transform: translateX(102%); transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.seitenpanel.offen, .ap-panel.offen, .vp-panel.offen { transform: none; }
.seitenpanel[hidden], .ap-panel[hidden], .vp-panel[hidden] { display: none !important; }
.seitenpanel-kopf, .ap-panel-kopf, .vp-panel-kopf {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
	background: var(--navy); color: #fff;
}
.seitenpanel-kopf .btn-light, .ap-panel-kopf .btn-light, .vp-panel-kopf .btn-light {
	background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
}
.seitenpanel-kopf .btn-light:hover, .ap-panel-kopf .btn-light:hover, .vp-panel-kopf .btn-light:hover {
	background: rgba(255, 255, 255, .24); color: #fff;
}
.seitenpanel-hinter, .ap-panel-hinter, .vp-panel-hinter { position: fixed; inset: 0; z-index: 1040; background: rgba(28, 45, 63, .28); }
body.panel-offen, body.ap-panel-offen, body.vp-panel-offen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .seitenpanel, .ap-panel, .vp-panel { transition: none; } }

/* ---------- Verleiher-Liste (index.php) ---------- */
.schnellfilter { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.schnellfilter .schnell { border: 1px solid var(--linie); background: #fff; color: inherit; border-radius: 99px; padding: .25rem .75rem; }
.schnellfilter .schnell .badge { background: var(--flaeche); color: var(--grau); font-weight: 600; }
.schnellfilter .schnell:hover { border-color: var(--orange); }
.schnellfilter .schnell.aktiv { border-color: var(--orange); background: rgba(248, 153, 68, .12); color: var(--orange-dunkel); }
.kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: .5rem; }
.kalender-wtag { font-size: .75rem; color: var(--grau, #6c757d); text-align: center; font-weight: 600; padding-bottom: 2px; }
.kalender-tag { position: relative; display: flex; align-items: center; justify-content: center; height: 2.4rem; border-radius: .4rem;
	background: var(--flaeche, #f1f3f5); color: inherit; text-decoration: none; font-size: .8rem; border: 1px solid transparent; }
.kalender-tag:hover { border-color: var(--orange, #f89944); }
.kalender-tag.s1 { background: #ffe3c2; }
.kalender-tag.s2 { background: #ffc47a; }
.kalender-tag.s3 { background: #f89944; color: #fff; }
.kalender-tag.s4 { background: #c9641f; color: #fff; }
.kalender-tag.heute { border-color: #283e55; }
.kalender-tag.aktiv { outline: 2px solid #283e55; outline-offset: 1px; font-weight: 700; }
.kalender-tag b { position: absolute; bottom: 1px; right: 3px; font-size: .62rem; font-weight: 700; opacity: .85; }
tr.zeile-warnung > td { background: #fdecea; }
tr.zeile-warnung:hover > td { background: #fbdbd8; }
.seitenpanel { width: min(760px, 100vw); }
.seitenpanel-titel { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seitenpanel iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
#zeilen tr.panel-aktiv > td { background: #fff4e8 !important; }
#zeilen tr.panel-aktiv > td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
#zeilen tr.gerade-gespeichert > td { animation: gespeichert 1.4s ease; }
@keyframes gespeichert { from { background: #e3f5ea; } }
@media (prefers-reduced-motion: reduce) { #zeilen tr.gerade-gespeichert > td { animation: none; } }
.kalender-monat-label { min-width: 9em; text-align: center; display: inline-block; }

/* ---------- Verleiher-Detail (detail.php) ---------- */
.progress-duenn { height: 8px; }
body.panel-ansicht { background: var(--bg); }
.panel-ansicht .row > .col-lg-5 { order: -1; }
.panel-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; border-radius: var(--radius); padding: 14px 18px; }
.panel-band h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.panel-band .unterzeile { font-size: .85rem; color: #c9d6e3; margin-top: .25rem; }
.panel-band .btn-light { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 600; border-radius: 999px; }

/* ---------- Website-Scan (scan.php) ---------- */
.scan-karte .zahl-gross { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.scan-karte .progress { height: 10px; border-radius: 99px; background: var(--flaeche); }
.scan-karte .progress-bar { border-radius: 99px; transition: width .6s ease; }
.scan-status { min-height: 1.5rem; }
.scan-status .spinner-border { width: 1rem; height: 1rem; border-width: .15em; vertical-align: -2px; }
tr.scan-neu > td { animation: scanNeu 1.2s ease; }
@keyframes scanNeu { from { background: #fff4e8; } }
.scan-mini { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.scan-mini div span { display: block; font-size: .8rem; color: var(--grau); }
.scan-mini div b { font-size: 1.15rem; }
.scan-karte { display: flex; flex-direction: column; }
.scan-karte .scan-hinweis { font-size: .875rem; color: var(--grau); margin-bottom: 1rem; }
.scan-karte .scan-knoepfe { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie); display: flex; gap: .5rem; }
.scan-karte .btn-mb:disabled { background: var(--orange); color: #fff; opacity: .45; box-shadow: none; }
.scan-filter tr { cursor: pointer; }
.scan-filter td.text-end { white-space: nowrap; width: 1%; }
.scan-filter a { color: inherit; text-decoration: none; }
.scan-filter tr:hover a { color: var(--orange-dunkel); }
.scan-filter .bi-chevron-right { font-size: .7rem; color: var(--grau); opacity: 0; transition: opacity .15s; }
.scan-filter tr:hover .bi-chevron-right { opacity: 1; }
.scan-website { max-width: 260px; }
.progress-bar.progress-bar-gruen { background: var(--gruen) !important; }

/* ---------- E-Mail (mail.php) ---------- */
.zeile-klick { cursor: pointer; }
.zeile-klick:hover > td { background: var(--flaeche, #f1f3f5); }
.versand-schritt { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.versand-schritt-nr { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; }
.versand-schritt-text { color: var(--grau); font-size: .92rem; padding-top: 4px; }
.versand-schritt-text b { color: var(--text); }
.versand-vorschau-mini { border: 1px dashed #c9d4df; border-radius: 10px; padding: 8px 10px; margin-top: 6px; background: var(--flaeche); font-size: .8rem; color: var(--grau); }
.ap-panel { width: min(560px, 96vw); }
.ap-panel-titel { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-panel-koerper { flex: 1; overflow-y: auto; padding: 14px; }
.ap-nachricht { border: 1px solid #e3e8ee; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.ap-nachricht.ap-beantwortet { border-left: 3px solid #4caf7d; }
.vp-panel { width: min(760px, 96vw); }
.vp-panel-titel { font-weight: 700; }
.vp-panel-koerper { flex: 1; position: relative; }
.vp-panel-koerper iframe { width: 100%; height: 100%; border: 0; background: var(--bg); display: block; }
/* Bootstraps d-flex arbeitet mit !important und überstimmt sonst das hidden-Attribut, wenn es per JS gesetzt wird */
#vorschauLaden[hidden] { display: none !important; }
.ph-chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid #c9d4df; border-radius: 999px;
	background: #fff; font-size: .72rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	color: var(--navy); cursor: pointer; transition: background .15s, border-color .15s; }
.ph-chip:hover, .ph-chip:focus-visible { background: var(--flaeche); border-color: var(--orange); outline: none; }
.ph-chip:active { background: rgba(248, 153, 68, .18); border-color: var(--orange); }
.bs-karte { border: 1px solid #e3e8ee; border-radius: 10px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.bs-kopf { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--flaeche); border-bottom: 1px solid #e3e8ee; }
.bs-typ { font-size: .78rem; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.bs-aktionen { display: flex; gap: 2px; }
.bs-aktionen .btn { padding: 2px 7px; }
.bs-koerper { padding: 12px; }
.bs-koerper .form-control, .bs-koerper .form-select { font-size: .85rem; }
.bs-bild-vorschau { height: 40px; border-radius: 6px; border: 1px solid #e3e8ee; object-fit: cover; }
.bs-leer { border: 1px dashed #c9d4df; border-radius: 10px; padding: 24px; text-align: center; color: var(--grau); font-size: .85rem; margin-bottom: 10px; }
.bs-bild-auswahl { width: auto; min-width: 220px; }
.liste-scroll { max-height: 240px; overflow: auto; }
.vorschau-iframe { width: 100%; height: 720px; border: 1px solid var(--linie); border-radius: 6px; background: var(--bg); }
.ap-suche-ergebnis { z-index: 20; max-height: 220px; overflow-y: auto; }
.ap-pre { white-space: pre-wrap; }
.html-editor { font-size: .8rem; min-height: 50vh; }

/* ---------- Sonstiges (seitenübergreifende Kleinigkeiten) ---------- */
.w-150px { width: 150px; }
.w-200px { width: 200px; }
.w-50px { width: 50px; }
.alert { border: 0; border-radius: 12px; box-shadow: var(--schatten); }
.alert-success { background: #e6f6ec; color: #17673a; }
.alert-warning { background: #fdf3e2; color: #8a5300; }
.alert-danger { background: #fbe7e5; color: #9b2a21; }
.alert-info { background: #e5f2fb; color: #1c5f8f; }
.progress { background: #e5eaf0; border-radius: 999px; }
.progress-bar, .bg-mb { background: var(--orange) !important; }
.list-group-item { border-color: var(--linie); }
.list-group-item.active { background: var(--navy); border-color: var(--navy); }
.list-group { border-radius: 12px; }
code { color: #b4541a; background: #fff3e8; border-radius: 5px; padding: .08rem .35rem; font-size: .85em; }
.verlauf li { border-left: 2px solid var(--linie); padding-left: .85rem; position: relative; }
.verlauf li::before { content: ''; position: absolute; left: -5px; top: .35rem; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.chart-box { position: relative; height: 210px; }
details summary { cursor: pointer; color: #1f5f9e; font-weight: 600; }
iframe { box-shadow: var(--schatten); }

/* ---------- Bestätigungsdialog (ersetzt native confirm()/alert()-Fenster, siehe config.php: mb_dialog_markup) ---------- */
.mb-dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(420px, 92vw); box-shadow: 0 30px 70px rgba(0, 0, 0, .3); }
.mb-dialog::backdrop { background: rgba(28, 45, 63, .55); backdrop-filter: blur(2px); }
.mb-dialog-inner { padding: 1.25rem 1.4rem 1.4rem; }
.mb-dialog-titel { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: .65rem; }
.mb-dialog-titel i { color: var(--orange-dunkel); }
.mb-dialog-text { color: var(--text); white-space: pre-line; margin-bottom: 1.1rem; }
.mb-dialog-aktionen { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- Login ---------- */
body.seite-login { min-height: 100vh; background: radial-gradient(120% 90% at 50% 0%, var(--navy-2) 0%, var(--navy) 45%, var(--navy-tief) 100%); }
body.seite-login .topbar { background: transparent; border: 0; }
body.seite-login .band { display: none; }
body.seite-login .card { border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); padding: 2rem !important; }
body.seite-login .card h1 { font-size: 1.35rem !important; font-weight: 700 !important; }
body.seite-login .btn-mb { padding: .7rem 1rem; }

@media (max-width: 767px) {
	.nav-user { border: 0; padding-left: 0; margin-left: .3rem; }
	.band h1 { font-size: 1.35rem; }
	.kpi .wert { font-size: 1.65rem; }
}

/* ==================== Teil 2: nur Social-Poster ==================== */

/* Hilfstext, entspricht "small text-muted" (aeltere Seiten) */
.klein { font-size: .875em; color: var(--grau); }

/* Schalter in Orange, Aufklapper mit Pfeil */
.form-switch .form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .bi-chevron-right { transition: transform .15s; }
details[open] > summary .bi-chevron-right { transform: rotate(90deg); }
a[data-bs-toggle="collapse"] .bi-chevron-right { display: inline-block; transition: transform .15s; }
a[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }

/* Boot-Karten (Anbieter & Boote) */
.boot-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.boot-karte { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.boot-karte.aus { opacity: .5; }
.boot-karte.panel-aktiv { box-shadow: 0 0 0 2px var(--orange); }
.boot-karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--flaeche); display: block; }
.boot-karte .boot-inhalt { padding: .65rem .8rem; display: grid; gap: 4px; flex: 1; }
.boot-karte .boot-name { font-weight: 700; font-size: .88rem; line-height: 1.3; color: var(--text); }
.boot-karte .boot-fuss { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; border-top: 1px solid var(--linie); font-size: .78rem; }
tr.zeile-premium > td { background: #fff8f0; }
tr.boote-auf > td { background: var(--flaeche); }

/* Abschnitte innerhalb einer Karte (Kampagne bearbeiten) */
.abschnitt-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); font-weight: 700; margin: 1.5rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.abschnitt-titel:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Vorlagen und Post-Vorschau */
.vorlage-block { border: 1px solid var(--linie); border-radius: var(--radius); padding: .85rem; background: var(--bg); }
.vorlage-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.vorlage-kopf .btn-link { font-size: .78rem; }
.vorlage-kopf .btn-link:hover { text-decoration: underline; }
.vorschau-karte { border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; padding: .85rem; position: relative; box-shadow: var(--schatten); }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }

/* Seitenpanel: Boots-Details sind schmaler als die Verleiher-Details im Akquise-Tool */
.seitenpanel.boot-panel { width: min(480px, 100vw); }
.seitenpanel-kopf { flex: none; }
.seitenpanel-koerper { flex: 1; overflow-y: auto; padding: 16px; }

/* Ausgabe (Protokoll, Testergebnis) */
pre.ausgabe { background: #fff; border-radius: 10px; padding: 12px 14px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; box-shadow: var(--schatten); }

/* Seitenpanel mit HTML-Inhalt (Vorlagen-Vorschau, Boote hinzufügen). Gleicher Rahmen wie .vp-panel im Akquise-Tool,
   nur der Körper scrollt statt eines iframes. Erzeugt über panel_auf()/panel_zu() in inc/kopf.php. */
.sp-panel-koerper { flex: 1; overflow-y: auto; padding: 16px; }
.sp-panel.schmal { width: min(560px, 96vw); }

/* Auswahl-Knöpfe (Wochentage, Kategorien): btn-check, ausgewählt in Navy wie im Akquise-Tool */
.tage-wahl { display: flex; flex-wrap: wrap; gap: .35rem; }
.tage-wahl .btn { min-width: 2.9rem; border-radius: 999px; }

/* Kippschalter etwas größer und klickbar samt Text */
.schalter-reihe { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: .1em; cursor: pointer; }
.form-switch .form-check-label { cursor: pointer; padding-left: .3rem; }

/* Post-Vorschau wie im Feed (Facebook, Instagram) */
.post-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; height: 100%; }
.post-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; }
.post-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.post-name { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.post-name small { display: block; font-weight: 400; color: var(--grau); font-size: .75rem; }
.post-kanal { margin-left: auto; font-size: 1.15rem; }
.post-kanal.fb { color: #1877f2; }
.post-kanal.ig { color: #d62976; }
.post-text { padding: 0 .85rem .85rem; white-space: pre-wrap; word-break: break-word; font-size: .9rem; line-height: 1.5; flex: 1; }
.post-bild + .post-text { padding-top: .75rem; }
.post-text .tags { color: #1f5f9e; }
.post-text .link { color: var(--grau); }
.post-bild { width: 100%; display: block; background: var(--flaeche); }
.post-bild.ig { aspect-ratio: 4 / 5; object-fit: cover; }
.post-bild.leer { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--grau); font-size: .8rem; }
.post-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .85rem; border-top: 1px solid var(--linie); background: var(--flaeche); }
.vorschau-boot { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Tage nur anzeigen (Vorschau & Posten), ausgewählt wie die Auswahl-Knöpfe in Navy */
.tage-wahl .tag-anzeige { pointer-events: none; }
.tage-wahl .tag-anzeige.an { background: var(--navy); border-color: var(--navy); color: #fff; }