/* EQUIPE Contentplaner, Gestaltung auf Basis von Bootstrap 5.3 und dem Klick-Muster v3 (Barlow, EQUIPE-Lila, Nacht).
 *
 * Farben nur über die Variablen hier oben. Für eine neue App zuerst diese Werte
 * an das Corporate Design anpassen, Schriften lokal unter assets/fonts einbinden
 * (keine Google Fonts, Content-Security-Policy). Kein Inline-Style in den Views.
 */

:root {
  --brand: #140c17;          /* Kopfzeile: EQUIPE-Nacht */
  --brand-contrast: #f4eef6; /* Schrift auf der Kopfzeile */
  --accent: #831d81;         /* EQUIPE-Lila: Knöpfe und Links */
  --accent-dark: #5e145c;
  --accent-light: #f6eaf6;
  --accent-soft: #c77fc4;
  --signal: #d7ff3a;         /* Signalgelb, nur auf Dunkel */
  --ink: #1a1220;
  --ink-2: #4a4150;
  --ink-3: #6f6674;
  --line: #e6e0e8;
  --bg: #f4f1f5;
  --plus: #1d7f53;
  --minus: #b8283b;
  --c-foto: #831d81;
  --c-karussell: #1e5aa8;
  --c-reel: #e6007e;
  --c-video: #1f8f84;
  --c-story: #9a6200;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Barlow', sans-serif;

  --bs-body-font-family: var(--sans);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 131, 29, 129;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 131, 29, 129;
  --bs-link-hover-color: var(--accent-dark);
  --bs-link-hover-color-rgb: 94, 20, 92;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--ink-3);
  --bs-focus-ring-color: rgba(131, 29, 129, .3);
}

.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
}
.text-primary { color: var(--accent) !important; }

/* Lange Wörter und Namen dürfen umbrechen, nie waagrecht scrollen */
body { overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }

.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; padding: .5rem .75rem; background: #fff; border-radius: .375rem; }

/* Kopf und Fuß */
.app-navbar { background: var(--brand); }
.app-navbar .app-brand { display: flex; flex-direction: column; gap: 4px; color: var(--brand-contrast); line-height: 1; padding: .35rem 0; }
.brand-logo { display: block; height: 23px; width: auto; }
.brand-sub { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); }
.app-navbar { min-height: 64px; }
.app-navbar .nav-link { color: #bfb2c4; font-weight: 500; font-size: 1.02rem; border-bottom: 3px solid transparent; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus, .app-navbar .nav-link.active { color: var(--brand-contrast); }
.app-navbar .nav-link.active { border-bottom-color: var(--signal); }
@media (min-width: 768px) { .app-navbar .navbar-nav .nav-link { padding: 1.1rem .9rem .9rem; } .app-navbar .app-brand { margin-right: 1.5rem; } }
.app-main { padding-top: 1.5rem; padding-bottom: 2rem; }
.app-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-bottom: 2rem; font-size: .875rem; color: var(--ink-2); }

/* Tableiste unten auf dem Handy */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--brand); border-top: 1px solid rgba(255, 255, 255, .12); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .25rem .45rem; font-size: .75rem; font-weight: 500; color: #bfb2c4; text-decoration: none; border-top: 3px solid transparent; }
.tabbar a .bi { font-size: 1.25rem; line-height: 1; }
.tabbar a[aria-current="page"] { color: var(--brand-contrast); border-top-color: var(--signal); }
@media (max-width: 767.98px) { body.app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* Seitenkopf */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .25rem; }
h1 { font-family: var(--cond); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0; }

/* Karten */
.card { --bs-card-bg: #fff; border-color: var(--line); }
.table { --bs-table-bg: #fff; }
.form-control, .form-select { background-color: #fff; }
.card-header { background: #fff; }
.card-title-inline { font-size: 1rem; font-weight: 600; margin: 0; }
a.tile { transition: border-color .15s ease, box-shadow .15s ease; }
a.tile:hover, a.tile:focus { border-color: var(--accent); box-shadow: 0 2px 10px rgba(20, 12, 23, .08); }

/* Personen */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-weight: 700; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .7rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; font-size: .9rem; }
.app-navbar .avatar { background: rgba(255, 255, 255, .16); color: var(--brand-contrast); }
.person-row { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }
.person-row:first-of-type { border-top: 0; }
.person-row .meta { font-size: .85rem; color: var(--ink-2); }
.tag { display: inline-block; padding: .05rem .4rem; margin-left: .25rem; border-radius: .25rem; font-size: .75rem; font-weight: 500; vertical-align: middle; }
.tag-muted { background: #eceff3; color: var(--ink-2); }
.badge-role { background: var(--accent-light); color: var(--accent); font-weight: 600; }

/* Startpasswort, Protokolle */
.temp-password code { color: var(--ink); background: #fff; padding: .15rem .4rem; border-radius: .25rem; }
.log-msg { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
pre.log-msg { font-family: var(--bs-font-monospace); color: inherit; }

/* Anmeldung */
.guest-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.guest-card { width: 100%; max-width: 26rem; padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 6px 24px rgba(20, 12, 23, .06); }
.guest-brand { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-bottom: 1.25rem; text-align: center; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.guest-logo { display: block; height: 34px; width: auto; }

/* ------------------------------------------------------------------
   Contentplaner
   ------------------------------------------------------------------ */
.tnum { font-variant-numeric: tabular-nums; }
.card { border-radius: .85rem; }

/* Kennzahlen */
.kpi .card-body { padding: 1rem 1.1rem; }
.kpi-label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.kpi-wert { font-family: var(--cond); font-weight: 700; font-size: 2.1rem; line-height: 1.1; margin: .2rem 0 .15rem; color: var(--ink); }
.kpi-delta, .kpi-hinweis { font-size: .8rem; color: var(--ink-3); }
.kpi-delta .tnum { font-weight: 600; }
.kpi-plus .tnum { color: var(--plus); }
.kpi-minus .tnum { color: var(--minus); }
.kpi-gleich .tnum { color: var(--ink-2); }

/* Hinweis „nicht verbunden“ */
.hinweis-karte { border-color: var(--accent-soft); background: var(--accent-light); }
.hinweis-karte .card-body > .bi { color: var(--accent); }

/* Beiträge */
.beitrag { overflow: hidden; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.beitrag:hover, .beitrag:focus { border-color: var(--accent); box-shadow: 0 2px 12px rgba(20, 12, 23, .08); color: var(--ink); }
.beitrag .card-body { padding: .7rem .8rem .8rem; }
.beitrag-bild { position: relative; aspect-ratio: 4 / 5; background: var(--accent-light); overflow: hidden; }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitrag-ohne-bild { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--accent-soft); }
.beitrag-art { position: absolute; left: .5rem; top: .5rem; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #fff; background: var(--c-foto); }
.beitrag-art.art-karussell, .art-punkt.art-karussell { background: var(--c-karussell); }
.beitrag-art.art-reel, .art-punkt.art-reel { background: var(--c-reel); }
.beitrag-art.art-video, .art-punkt.art-video { background: var(--c-video); }
.beitrag-art.art-story, .art-punkt.art-story { background: var(--c-story); }
.art-punkt { display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; background: var(--c-foto); }
.beitrag-datum { font-size: .75rem; color: var(--ink-3); }
.beitrag-text { font-size: .85rem; line-height: 1.35; margin: .25rem 0 .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.beitrag-hinweis { font-size: .78rem; color: var(--ink-3); margin: .35rem 0 0; }
.beitrag-zahlen { display: flex; flex-wrap: wrap; gap: .15rem .8rem; list-style: none; padding: 0; margin: .35rem 0 0; font-size: .88rem; font-weight: 600; }
.beitrag-zahlen li { white-space: nowrap; }
.beitrag-zahlen .bi { color: var(--accent-soft); margin-right: .15rem; }
.beitrag-gross { position: relative; aspect-ratio: 4 / 5; border-radius: .85rem; overflow: hidden; background: var(--accent-light); border: 1px solid var(--line); }
.beitrag-gross.beitrag-bild-story { aspect-ratio: 9 / 16; max-width: 22rem; }
.beitrag-gross img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caption-text { white-space: pre-line; }

/* Zahlenlisten */
.zahlen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem 1rem; margin: 0; }
.zahlen-liste dt { font-size: .8rem; font-weight: 500; color: var(--ink-3); }
.zahlen-liste dd { font-size: 1.25rem; font-weight: 600; margin: 0; }
.zahlen-liste-text { grid-template-columns: 1fr; gap: .5rem; }
.zahlen-liste-text > div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .75rem; }
.zahlen-liste-text dd { font-size: .95rem; font-weight: 400; }

/* Filter und Zeitraum */
.filter-leiste { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; }
.zeitraum-form, .filter-form, .zeitraum-frei { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.zeitraum-feld { min-width: 9rem; }
.zeitraum-feld .form-label { color: var(--ink-2); font-weight: 500; }
.js .zeitraum-knopf { display: none; }
.js .zeitraum-frei:not([hidden]) ~ .zeitraum-knopf { display: inline-block; }

/* Diagramme (SVG, Farben nur hier) */
.diagramm { display: block; width: 100%; height: auto; font-family: var(--sans); }
.d-raster { stroke: var(--line); stroke-width: 1; }
.d-achse { fill: var(--ink-3); font-size: 13px; }
@media (max-width: 575.98px) { .d-achse { font-size: 19px; } }
.d-saeule { fill: var(--accent); }
.d-saeule:hover { fill: var(--accent-dark); }
.d-linie { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.d-punkt { fill: var(--accent); }
.tabelle-auf summary { cursor: pointer; color: var(--accent); }

/* Bestenlisten */
.top-liste { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.top-liste li { border-top: 1px solid var(--line); }
.top-liste li:first-child { border-top: 0; }
.top-eintrag { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; color: var(--ink); text-decoration: none; }
.top-eintrag:hover, .top-eintrag:focus { background: var(--accent-light); color: var(--ink); }
.top-eintrag img, .top-ohne-bild { width: 56px; height: 56px; flex-shrink: 0; border-radius: .5rem; object-fit: cover; background: var(--accent-light); }
.top-ohne-bild { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-soft); }
.top-text { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-wert { margin-left: auto; font-weight: 700; font-size: 1.05rem; padding-left: .5rem; }

.card > .table-responsive .table > :not(caption) > * > :first-child { padding-left: 1rem; }
.card > .table-responsive .table > :not(caption) > * > :last-child { padding-right: 1rem; }
.pagination { --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-color: var(--accent); }

@media (max-width: 575.98px) {
  .kpi-wert { font-size: 1.7rem; }
  .zeitraum-feld { min-width: 0; flex: 1 1 8.5rem; }
  .zahlen-liste-text > div { grid-template-columns: 1fr; gap: 0; }
  .app-main { padding-top: 1rem; }
  .guest-card { padding: 1.25rem; }
}