/* =====================================================
   LMU München – Corporate Design
   ChatDashboard Shiny App
   Schrift: Compatil Fact (Fallback: Source Sans 3)
   ===================================================== */

/* Webfont: Source Sans 3 als Compatil-Fact-Äquivalent.
   Laden via tags$link in app.R für bessere Performance.
   Wenn eine lizenzierte Compatil-Fact-Webfont-Datei
   vorhanden ist, diese als @font-face in einer
   separaten compatil.css einbinden und dort
   font-family: 'Compatil Fact' definieren. */

/* ===================================================
   DESIGN TOKENS
   =================================================== */
:root {
  /* Primärfarben */
  --lmu-green:        #00883A;
  --lmu-green-dark:   #005C27;
  --lmu-green-light:  #E6F4EC;
  --lmu-black:        #232323;
  --lmu-white:        #FFFFFF;

  /* Sekundärfarben */
  --lmu-gray-dark:    #626468;
  --lmu-gray-mid:     #C0C1C3;
  --lmu-gray-light:   #E6E6E7;
  --lmu-gray-pale:    #F5F5F5;

  /* Typografie */
  --lmu-font: 'Compatil Fact', 'Source Sans 3', 'Source Sans Pro',
              'Segoe UI', Arial, sans-serif;
  --lmu-font-size-base: 1rem;
  --lmu-line-height:    1.65;

  /* Layout */
  --lmu-header-h:  60px;
  --lmu-banner-h:  120px;
  --lmu-radius:    5px;
  --lmu-shadow:    0 1px 4px rgba(0,0,0,0.10);
}

/* ===================================================
   BASISSTILE / TYPOGRAFIE
   =================================================== */
html, body {
  font-family: var(--lmu-font) !important;
  font-size: var(--lmu-font-size-base) !important;
  line-height: var(--lmu-line-height) !important;
  color: var(--lmu-black) !important;
  background: var(--lmu-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  /* Verhindert horizontalen Overflow auf allen Geräten */
  overflow-x: hidden;
  max-width: 100%;
  /* Reserviert immer Platz für die vertikale Scrollbar, unabhängig davon,
     ob der aktuelle Tab-Inhalt tatsächlich überläuft. Ohne das wird die
     Seite auf kürzeren Tabs (kein Scrollbalken) ein paar Pixel breiter als
     auf längeren (mit Scrollbalken, z.B. Nachrichtenlänge mit zwei
     Boxplots) – man springt beim Tab-Wechsel sichtbar in der Breite. */
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lmu-font) !important;
  font-weight: 700 !important;
  color: var(--lmu-black) !important;
  line-height: 1.25 !important;
  margin-top: 0;
}

h1 { font-size: 1.75rem !important; margin-bottom: 1rem; }
h2 { font-size: 1.4rem  !important; margin-bottom: 0.75rem; }
h3 { font-size: 1.2rem  !important; margin-bottom: 0.6rem; }
h4 { font-size: 1.05rem !important; margin-bottom: 0.5rem; }
h5 { font-size: 1rem    !important; margin-bottom: 0.4rem; }
h6 { font-size: 0.9rem  !important; margin-bottom: 0.4rem; }

p { margin-bottom: 0.9rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--lmu-green) !important;
  text-decoration: none !important;
}
a:hover, a:focus {
  color: var(--lmu-green-dark) !important;
  text-decoration: underline !important;
}

ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.3rem; }

hr {
  border: 0;
  border-top: 1px solid var(--lmu-gray-light);
  margin: 1.5rem 0;
}

/* Auswahl-Highlight in LMU-Grün */
::selection {
  background: var(--lmu-green);
  color: #fff;
}

/* ===================================================
   LAYOUT
   =================================================== */
/* width:100% ist hier der Fix für breite Inhalte (z.B. die DataTables-
   Tabellen mit scrollX): ohne explizites width lässt der Flex-Stretch
   dieses Kind auf die Inhaltsbreite mehrerer verschachtelter Block-
   Elemente darunter (.tab-content, .row, .col-sm-8, ... bis zur Tabelle)
   anwachsen, bis body{overflow-x:hidden} sie rein visuell abschneidet,
   ohne dass dieser Container selbst je auf Viewport-Breite schrumpft.
   Ein explizites width:100% HIER erzwingt die korrekte Breite unabhängig
   vom Inhalt – die Tabelle scrollt danach innerhalb ihrer eigenen Box
   (dataTables_scrollBody). Sichtbares Symptom davor: die Seite ließ sich
   auf schmalen Bildschirmen horizontal verschieben/war breiter als das
   Gerät, v.a. bei Tabs mit breiten Tabellen (Spalten-/Zeilenauswahl). */
.container-fluid { flex: 1 0 auto; width: 100%; }
.tab-content { padding-top: 1.5rem; padding-bottom: 4rem; }

/* ===================================================
   LMU HEADER
   =================================================== */
.lmu-header {
  background: var(--lmu-green);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.lmu-header--inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: var(--lmu-header-h);
  max-width: 1400px;
  margin: 0 auto;
}

/* Offizielles LMU-Logo (Bilddatei www/lmu-logo.svg).
   Fehlt die Datei, blendet der onerror-Handler im HTML das Bild aus
   und zeigt stattdessen den Schriftzug-Platzhalter. */
.lmu-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}
.lmu-logo-img {
  height: 34px;
  width: auto;
  max-width: 180px;
  display: block;
}
.lmu-logo-img--footer { height: 28px; max-width: 150px; }

@media (max-width: 600px) {
  .lmu-logo-img { height: 26px; max-width: 130px; }
  .lmu-logo-img--footer { height: 24px; }
}

.lmu-logo-placeholder {
  font-family: var(--lmu-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: 1.5px;
  text-decoration: none !important;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.lmu-logo-placeholder:hover,
.lmu-logo-placeholder:focus { color: rgba(255,255,255,0.88) !important; }

.lmu-header-subtitle { color: rgba(255,255,255,0.78) !important; }

.lmu-logo-placeholder .lmu-sub {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  opacity: 0.88;
}

.lmu-header-subtitle {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.78);
}
@media (max-width: 600px) { .lmu-header-subtitle { display: none; } }

/* ===================================================
   LMU PAGE BANNER
   =================================================== */
.lmu-page-banner {
  background: linear-gradient(
    135deg,
    var(--lmu-green-dark) 0%,
    var(--lmu-green) 55%,
    #00a84a 100%
  );
  padding: 1.8rem 1.5rem 1.4rem;
  min-height: var(--lmu-banner-h);
  display: flex;
  align-items: flex-end;
}

.lmu-page-banner--inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.lmu-breadcrumb { font-size: 0.78rem; margin-bottom: 0.4rem; }

.lmu-breadcrumb ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 0 0.3rem;
  align-items: center;
}
.lmu-breadcrumb li { color: rgba(255,255,255,0.75); margin-bottom: 0; }
.lmu-breadcrumb li + li::before {
  content: "›"; margin-right: 0.3rem;
  color: rgba(255,255,255,0.55);
}
/* !important nötig: die globale Regel a{color:lmu-green !important} weiter
   unten würde die Links sonst grün auf grünem Grund darstellen (Kontrast 1.8:1). */
.lmu-breadcrumb a { color: rgba(255,255,255,0.85) !important; }
.lmu-breadcrumb a:hover,
.lmu-breadcrumb a:focus { color: #fff !important; text-decoration: underline !important; }

/* !important nötig: die globale Regel h1..h6 { color: lmu-black !important }
   würde den Titel sonst schwarz auf grünem Banner darstellen (Kontrast 2.6:1). */
.lmu-page-title {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: #fff !important;
  margin: 0;
  line-height: 1.25;
  font-family: var(--lmu-font);
}

@media (max-width: 768px) {
  .lmu-page-banner { min-height: 90px; padding: 1.2rem 1rem 1rem; }
}

/* ===================================================
   LMU NAVIGATION (Micro-Nav)
   =================================================== */
.lmu-micro-nav {
  background: var(--lmu-white) !important;
  border-bottom: 3px solid var(--lmu-green);
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.lmu-micro-nav ul.list-inline {
  list-style: none;
  padding: 0 0.75rem !important;
  margin: 0 auto !important;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1400px;
}
.lmu-micro-nav ul.list-inline::-webkit-scrollbar { display: none; }
.lmu-micro-nav li { flex-shrink: 0; }

.lmu-micro-nav a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--lmu-black) !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--lmu-font);
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.lmu-micro-nav a:hover {
  color: var(--lmu-green) !important;
  border-bottom-color: var(--lmu-green);
}
.lmu-micro-nav a.is-active,
.lmu-micro-nav a.active {
  color: var(--lmu-green) !important;
  border-bottom-color: var(--lmu-green);
  font-weight: 700;
}
@media (max-width: 768px) {
  .lmu-micro-nav a { padding: 0.62rem 0.8rem; font-size: 0.84rem; }
}

/* ===================================================
   LMU FOOTER
   =================================================== */
.lmu-footer {
  background: var(--lmu-green);
  color: rgba(255,255,255,0.9);
  padding: 2rem 1.5rem 1.5rem;
  flex-shrink: 0;
  margin-top: 2rem;
  font-family: var(--lmu-font);
}

.lmu-footer--inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
}

.lmu-footer-info p { margin: 0 0 0.2rem; font-size: 0.85rem; line-height: 1.5; }
.lmu-footer-info strong { color: #fff; }

.lmu-footer-logo-text {
  font-size: 1.2rem; font-weight: 700;
  font-family: var(--lmu-font);
  color: #fff; letter-spacing: 1.5px;
  display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap;
}
.lmu-footer-logo-text .lmu-sub { font-size: 0.8rem; font-weight: 400; opacity: 0.85; }

.lmu-footer-nav {
  grid-column: 1 / -1;
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem; font-size: 0.8rem;
}
/* !important aus demselben Grund wie beim Breadcrumb (grüner Footer-Grund) */
.lmu-footer-nav a { color: rgba(255,255,255,0.8) !important; }
.lmu-footer-nav a:hover,
.lmu-footer-nav a:focus { color: #fff !important; text-decoration: underline !important; }

@media (max-width: 576px) {
  .lmu-footer--inner { grid-template-columns: 1fr; }
}

/* ===================================================
   SIDEBAR-PANEL (.well)
   =================================================== */
.well {
  background-color: var(--lmu-gray-pale) !important;
  border: 1px solid var(--lmu-gray-light) !important;
  border-radius: var(--lmu-radius) !important;
  box-shadow: var(--lmu-shadow) !important;
  padding: 1.25rem 1.25rem 1.5rem !important;
}

/* Sidebar-Überschriften in LMU-Grün */
.well h2, .well h3, .well h4 {
  color: var(--lmu-green) !important;
  border-bottom: 2px solid var(--lmu-green);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* shinymanager Login-Box: eigenen Panel-Titel ausblenden
   (lmu-header übernimmt diese Rolle) */
.shinymanager-container .panel-heading,
.shinymanager-page .panel > .panel-heading {
  display: none !important;
}
/* Kompensation: Panel-Body oben abrunden, da kein Heading */
.shinymanager-container .panel > .panel-body:first-child {
  border-radius: 4px 4px 0 0;
}

/* ===================================================
   VISUALISIERUNGS-TABS (tabsetPanel in Ergebnisse)
   Nur .tabbable-gebundene .nav-tabs, d.h. innere
   tabsetPanels – nicht die ausgeblendete navbarPage.
   =================================================== */
.tabbable > .nav-tabs > li > a {
  background-color: var(--lmu-gray-pale) !important;
  color:            var(--lmu-gray-dark) !important;
  border:           1px solid var(--lmu-gray-mid) !important;
  border-bottom:    none !important;
  font-weight:      500;
  border-radius:    4px 4px 0 0 !important;
  transition:       background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tabbable > .nav-tabs > li > a:hover {
  background-color: var(--lmu-green-light) !important;
  color:            var(--lmu-green)       !important;
  border-color:     var(--lmu-green)       !important;
}
.tabbable > .nav-tabs > li.active > a,
.tabbable > .nav-tabs > li.active > a:focus,
.tabbable > .nav-tabs > li.active > a:hover {
  background-color: var(--lmu-green)  !important;
  color:            var(--lmu-white)  !important;
  border-color:     var(--lmu-green)  !important;
  font-weight:      700;
}
/* Trennlinie unter den Tabs in LMU-Grün */
.tabbable > .nav-tabs {
  border-bottom: 2px solid var(--lmu-green) !important;
}

/* ===================================================
   HILFE-TEXT
   =================================================== */
.help-block, .shiny-input-container .help-block {
  color: var(--lmu-gray-dark);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-top: 0.2rem;
}

/* ===================================================
   FORMULARELEMENTE
   =================================================== */
.form-control {
  font-family: var(--lmu-font) !important;
  color: var(--lmu-black) !important;
  background-color: var(--lmu-white) !important;
  border: 1px solid var(--lmu-gray-mid) !important;
  border-radius: var(--lmu-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus {
  border-color: var(--lmu-green) !important;
  box-shadow: 0 0 0 3px rgba(0,136,58,0.18) !important;
  outline: none !important;
}

label {
  font-weight: 600 !important;
  color: var(--lmu-black) !important;
  font-family: var(--lmu-font) !important;
}

/* ===================================================
   SLIDER INPUTS (.irs)
   =================================================== */
/* Bootstrap 3 / Shiny IRS v1 */
.irs-bar, .irs-bar-edge {
  background: var(--lmu-green) !important;
  border-top-color: var(--lmu-green-dark) !important;
  border-bottom-color: var(--lmu-green-dark) !important;
}
.irs-single, .irs-from, .irs-to {
  background: var(--lmu-green) !important;
  font-family: var(--lmu-font);
}
.irs-handle > i:first-child {
  background: var(--lmu-green) !important;
  border-color: var(--lmu-green-dark) !important;
}

/* Shiny IRS v2 / --shiny theme */
.irs--shiny .irs-bar {
  background-color: var(--lmu-green) !important;
  border-top: 1px solid var(--lmu-green-dark) !important;
  border-bottom: 1px solid var(--lmu-green-dark) !important;
}
.irs--shiny .irs-handle {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green-dark) !important;
}
.irs--shiny .irs-single,
.irs--shiny .irs-from,
.irs--shiny .irs-to {
  background-color: var(--lmu-green) !important;
}

/* ===================================================
   DATUMSAUSWAHL (.daterangepicker)
   =================================================== */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .start-date,
.daterangepicker .end-date {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green) !important;
  color: #fff !important;
}
.daterangepicker td.in-range {
  background-color: var(--lmu-green-light) !important;
  color: var(--lmu-black) !important;
}
.daterangepicker td:hover {
  background-color: var(--lmu-gray-light) !important;
}
.daterangepicker .btn-primary {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green-dark) !important;
}

/* ===================================================
   PICKER INPUT (.bootstrap-select / shinyWidgets)
   =================================================== */
.bootstrap-select > .btn,
.bootstrap-select .btn-default {
  font-family: var(--lmu-font);
  background-color: var(--lmu-white) !important;
  border: 1px solid var(--lmu-gray-mid) !important;
  color: var(--lmu-black) !important;
  border-radius: var(--lmu-radius) !important;
  box-shadow: none !important;
}
.bootstrap-select > .btn:hover,
.bootstrap-select.open > .btn {
  border-color: var(--lmu-green) !important;
  box-shadow: 0 0 0 3px rgba(0,136,58,0.15) !important;
}
.bootstrap-select .dropdown-menu > li > a {
  font-family: var(--lmu-font);
  color: var(--lmu-black);
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li > a:focus {
  background-color: var(--lmu-green-light);
  color: var(--lmu-black);
}
.bootstrap-select .dropdown-menu > .selected > a,
.bootstrap-select .dropdown-menu > .selected > a:hover {
  background-color: var(--lmu-green) !important;
  color: #fff !important;
}

/* Deaktivierte (nicht abwählbare) Einträge: grau statt grün – auch wenn
   sie ausgewählt sind (Zeit, Absender_anonym, Nummerierungen). Muss NACH
   der .selected-Regel stehen und ist spezifischer, damit sie gewinnt. */
.bootstrap-select .dropdown-menu > li.disabled > a,
.bootstrap-select .dropdown-menu > li.disabled.selected > a,
.bootstrap-select .dropdown-menu > li.disabled > a:hover,
.bootstrap-select .dropdown-menu > li.disabled.selected > a:hover {
  background-color: var(--lmu-gray-light) !important;
  color: var(--lmu-gray-dark) !important;
  cursor: not-allowed !important;
  opacity: 0.85;
}

/* ===================================================
   CHECKBOX GROUP BUTTONS (shinyWidgets)
   =================================================== */
.btn-group .btn-default {
  font-family: var(--lmu-font);
  border-color: var(--lmu-gray-mid) !important;
  color: var(--lmu-black) !important;
  background-color: var(--lmu-white) !important;
}
.btn-group .btn-default:hover {
  background-color: var(--lmu-green-light) !important;
  border-color: var(--lmu-green) !important;
  color: var(--lmu-black) !important;
}
.btn-group .btn-default.active,
.btn-group .btn-default:active {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ===================================================
   BUTTONS
   =================================================== */
/* Primär-CTA (btn-warning übernommen für LMU-Grün) */
.btn-warning,
.btn-warning:visited {
  background-color: var(--lmu-green) !important;
  border-color:     var(--lmu-green) !important;
  color: #fff !important;
  font-weight: 600;
  font-family: var(--lmu-font);
  letter-spacing: 0.3px;
  border-radius: var(--lmu-radius) !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  background-color: var(--lmu-green-dark) !important;
  border-color:     var(--lmu-green-dark) !important;
  color: #fff !important;
}

/* Sekundär (Download-Buttons etc.) */
.btn-default {
  font-family: var(--lmu-font);
  color: var(--lmu-black);
  background-color: var(--lmu-white);
  border-color: var(--lmu-gray-mid);
  border-radius: var(--lmu-radius);
}
.btn-default:hover {
  background-color: var(--lmu-gray-pale);
  border-color: var(--lmu-gray-dark);
  color: var(--lmu-black);
}

/* Alle Buttons – gemeinsame Basis */
.btn {
  font-family: var(--lmu-font) !important;
  font-size: 0.9rem !important;
  padding: 0.45rem 1.2rem;
  border-radius: var(--lmu-radius);
  transition: background-color 0.15s, border-color 0.15s;
}

/* ===================================================
   FILE INPUT (Bootstrap 3 Layout-Fix)
   =================================================== */
.bs3-fileinput .input-group {
  display: table !important;
  width: 100% !important;
  border-collapse: separate;
}
.bs3-fileinput .input-group .form-control {
  display: table-cell !important;
  width: 100% !important;
  float: none;
}
.bs3-fileinput .input-group-btn,
.bs3-fileinput .input-group-prepend,
.bs3-fileinput .input-group-append,
.bs3-fileinput label.input-group-btn {
  display: table-cell !important;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.btn-file { position: relative; overflow: hidden; }
.btn-file > input[type=file] {
  position: absolute; top: 0; right: 0;
  min-width: 100%; min-height: 100%;
  font-size: 100px; opacity: 0; cursor: inherit; display: block;
}

.bs3-fileinput .btn-file {
  display: inline-block;
  background-color: var(--lmu-green) !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 16px !important;
  font-weight: 600 !important;
  font-family: var(--lmu-font) !important;
  border-radius: 0 var(--lmu-radius) var(--lmu-radius) 0 !important;
}
.bs3-fileinput .btn-file:hover {
  background-color: var(--lmu-green-dark) !important;
}
.bs3-fileinput .input-group .form-control {
  background: var(--lmu-white) !important;
  border: 1px solid var(--lmu-gray-mid) !important;
  box-shadow: none !important;
  height: 36px;
  line-height: 1.4;
  border-radius: var(--lmu-radius) 0 0 var(--lmu-radius) !important;
}
.bs3-fileinput input[type=file] { all: unset; }
.bs3-fileinput input[type=file]::file-selector-button { display: none !important; }

/* ===================================================
   TABS (Ergebnis-Unterseiten, .nav-tabs)
   =================================================== */
.nav-tabs {
  border-bottom: 2px solid var(--lmu-green);
  margin-bottom: 1.25rem;
}
.nav-tabs > li > a {
  font-family: var(--lmu-font);
  font-size: 0.9rem;
  color: var(--lmu-gray-dark);
  border-radius: var(--lmu-radius) var(--lmu-radius) 0 0;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  transition: color 0.12s, background-color 0.12s;
}
.nav-tabs > li > a:hover {
  color: var(--lmu-green);
  background-color: var(--lmu-gray-pale);
  border-color: var(--lmu-gray-light) var(--lmu-gray-light) transparent;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--lmu-green);
  font-weight: 700;
  border: 1px solid var(--lmu-gray-mid);
  border-bottom-color: var(--lmu-white);
  background-color: var(--lmu-white);
}

/* ===================================================
   DATATABLES
   =================================================== */
table.dataTable {
  font-family: var(--lmu-font);
  border-collapse: collapse !important;
}

table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--lmu-black) !important;
  color: var(--lmu-white) !important;
  font-family: var(--lmu-font);
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 2px solid var(--lmu-green) !important;
  padding: 0.6rem 0.8rem !important;
  white-space: nowrap;
}

table.dataTable thead th:hover {
  background-color: var(--lmu-gray-dark) !important;
}

table.dataTable tbody tr {
  background-color: var(--lmu-white);
}
table.dataTable tbody tr.odd {
  background-color: var(--lmu-gray-pale);
}
table.dataTable tbody tr:hover > td {
  background-color: var(--lmu-green-light) !important;
}

table.dataTable tbody td {
  color: var(--lmu-black);
  font-size: 0.875rem;
  padding: 0.45rem 0.8rem !important;
  border-top: 1px solid var(--lmu-gray-light);
  vertical-align: middle;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: var(--lmu-font);
  border-radius: var(--lmu-radius) !important;
  color: var(--lmu-black) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--lmu-green) !important;
  border-color: var(--lmu-green) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--lmu-green-light) !important;
  border-color: var(--lmu-green) !important;
  color: var(--lmu-black) !important;
}

/* Info & Filter */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-family: var(--lmu-font);
  font-size: 0.84rem;
  color: var(--lmu-gray-dark);
}
.dataTables_length select { display: inline-block; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--lmu-gray-mid);
  border-radius: var(--lmu-radius);
  padding: 0.2rem 0.5rem;
}

/* Scroll-Body: kein overflow-clip */
.dataTables_scrollBody {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ===================================================
   DOWNLOAD-BUTTONS (Daten-Auswahl-Seite)
   =================================================== */
.lmu-download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
  align-items: center;
}

/* ===================================================
   SHINYALERT / SWEETALERT2
   =================================================== */
.swal2-popup {
  font-family: var(--lmu-font) !important;
  border-radius: 8px;
}
.swal2-title {
  font-family: var(--lmu-font) !important;
  font-weight: 700;
  color: var(--lmu-black) !important;
}
.swal2-html-container {
  font-family: var(--lmu-font) !important;
  color: var(--lmu-black) !important;
}
.swal2-confirm {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green) !important;
  font-family: var(--lmu-font) !important;
}
.swal2-confirm:hover {
  background-color: var(--lmu-green-dark) !important;
}
.swal2-cancel {
  font-family: var(--lmu-font) !important;
}
.swal2-popup .swal2-input { display: none !important; }

/* ===================================================
   CALLOUT BOX
   =================================================== */
.callout {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--lmu-green) !important;
  background: var(--lmu-green-light);
  border-radius: 0 var(--lmu-radius) var(--lmu-radius) 0;
  font-size: 0.9rem;
}
.callout h4 {
  margin: 0 0 0.5rem;
  color: var(--lmu-green-dark);
  font-size: 0.95rem;
}

/* ===================================================
   DETAILS / SUMMARY (Upload-Anleitungen)
   =================================================== */
details {
  border: 1px solid var(--lmu-gray-light);
  border-radius: var(--lmu-radius);
  padding: 0;
  margin-bottom: 1rem;
  overflow: hidden;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--lmu-font);
  padding: 0.75rem 1rem;
  background: var(--lmu-gray-pale);
  border-radius: var(--lmu-radius) var(--lmu-radius) 0 0;
  color: var(--lmu-black);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
summary::before {
  content: "▶";
  font-size: 0.65rem;
  color: var(--lmu-green);
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] > summary::before { transform: rotate(90deg); }
summary:hover { background: var(--lmu-green-light); }
details > *:not(summary) {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
details img {
  max-width: 100%;
  height: auto;
  border-radius: var(--lmu-radius);
  display: block;
  margin: 0.5rem 0;
}

/* ===================================================
   PLOT-AUSGABE
   =================================================== */
.shiny-plot-output {
  border-radius: var(--lmu-radius);
  overflow: hidden;
}

/* Spinner-Container (addSpinner) */
.shiny-spinner-output-container > .load-container .load7 > div {
  background-color: var(--lmu-green) !important;
}

/* ===================================================
   BOOTSTRAP NAVBAR – ausgeblendet (lmu-micro-nav übernimmt)
   =================================================== */
.navbar,
.navbar .navbar-header,
.navbar .navbar-nav {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ===================================================
   WAITER / LADE-OVERLAY
   =================================================== */
.waiter-overlay, #waiter-overlay, .waiter {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 2147483647 !important;
}
@supports (height: 100dvh) {
  .waiter-overlay, #waiter-overlay, .waiter { height: 100dvh !important; }
}

/* ===================================================
   SHINYMANAGER LOGIN-SEITE
   =================================================== */
.panel-auth {
  padding-top: calc(var(--lmu-header-h) + var(--lmu-banner-h) + 1.5rem) !important;
  box-sizing: border-box;
  min-height: 100dvh;
  background: var(--lmu-gray-pale);
}

.panel-auth::before {
  content: '';
  position: fixed;
  top: var(--lmu-header-h);
  left: 0; right: 0;
  height: var(--lmu-banner-h);
  background: linear-gradient(135deg, var(--lmu-green-dark) 0%, var(--lmu-green) 55%, #00a84a 100%);
  z-index: 1020;
}

/* Login-Card */
.panel-auth > .panel,
.panel-auth .panel.panel-default,
.panel-auth .auth-panel {
  width: min(480px, 94%);
  margin: 0 auto;
  border: 1px solid var(--lmu-gray-light);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
}

.panel-auth .panel-heading {
  background-color: var(--lmu-green) !important;
  color: #fff !important;
  font-family: var(--lmu-font);
  font-weight: 700;
}

.panel-auth .panel-body {
  background: var(--lmu-white);
  padding: 2rem;
  font-family: var(--lmu-font);
}

.panel-auth .btn-primary {
  background-color: var(--lmu-green) !important;
  border-color: var(--lmu-green-dark) !important;
  font-family: var(--lmu-font);
  font-weight: 600;
  width: 100%;
}
.panel-auth .btn-primary:hover {
  background-color: var(--lmu-green-dark) !important;
}

#banner-overlay {
  position: fixed;
  top: var(--lmu-header-h);
  left: 0; right: 0;
  height: var(--lmu-banner-h);
  z-index: 1025;
  pointer-events: none;
}
#banner-overlay .lmu-page-banner {
  background: transparent !important;
  min-height: var(--lmu-banner-h) !important;
}

@media (max-width: 768px) {
  :root { --lmu-banner-h: 90px; }
  .panel-auth {
    padding-top: calc(var(--lmu-header-h) + var(--lmu-banner-h) + 2rem) !important;
  }
}

/* ===================================================
   MOBILE-OPTIMIERUNGEN
   =================================================== */

/* --- Tablet & schmale Desktops (< 992px) --- */
@media (max-width: 991px) {
  /* Sidebar über MainPanel stapeln */
  .col-sm-4, .col-sm-8 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  /* md-Offset zurücksetzen */
  [class*="col-md-offset-"] { margin-left: 0 !important; }
  /* Plots nicht zu hoch */
  .shiny-plot-output {
    height: clamp(260px, 55vw, 480px) !important;
    min-height: 220px !important;
  }

  /* ---------------------------------------------------------------
     ÜBERLAUF-EINDÄMMUNG (muss ab 991px greifen, wo Spalten stapeln)
     Verschachtelte container-fluid (navbarPage in fluidPage) und
     die negativen .row-Margins verursachen sonst Überlauf, der durch
     das globale overflow-x:hidden rechts ABGESCHNITTEN wird.
  --------------------------------------------------------------- */
  html, body { overflow-x: hidden !important; }
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .container-fluid .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* DataTables-Steuerungsspalten behalten etwas Innenabstand */
  .dataTables_wrapper [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Datenvorschau: breite Tabelle scrollt INNERHALB ihrer Box,
     statt die Seite zu verbreitern (sonst rechts abgeschnitten). */
  .dataTables_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .dataTables_wrapper table.dataTable { min-width: 0 !important; }
  .dataTables_scrollBody {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Smartphone (< 768px) --- */
@media (max-width: 767px) {

  /* -----------------------------------------------
     KERN: Overflow-Fix
     Bootstrap .row hat margin: 0 -15px, was bei
     reduzierten Container-Paddings überläuft.
     Hier alles auf box-sizing + overflow fixieren.
  ----------------------------------------------- */
  html, body { overflow-x: hidden !important; }

  /* Äußerstes Container: schlankes Padding */
  .container-fluid {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
  /* Verschachteltes container-fluid (navbarPage in fluidPage)
     bekommt 0 eigenes Padding – damit kein doppeltes Padding */
  .container-fluid .container-fluid {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
  /* Bootstrap .row hat -15px negative Margins.
     Auf Mobile auf 0 setzen, damit kein Überlauf. */
  .row {
    margin-left:  0 !important;
    margin-right: 0 !important;
  }
  /* Alle Bootstrap-Spalten: volle Breite, kein Float */
  [class*="col-"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
  /* Ausnahme: Spalten innerhalb von DataTables-Controls
     dürfen ihre eigene Breite behalten */
  .dataTables_wrapper [class*="col-"] {
    width: auto !important;
    padding-left:  8px !important;
    padding-right: 8px !important;
  }

  /* -----------------------------------------------
     LAYOUT
  ----------------------------------------------- */
  .tab-content { padding-top: 0.75rem; padding-bottom: 3rem; }
  .shiny-split-layout > div { width: 100% !important; float: none !important; }

  /* Lange Wörter umbrechen – verhindert Overflow durch lange Chat-Namen o.ä. */
  .tab-pane, .well, .panel-body, p, li, td, th, label, .shiny-text-output {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* -----------------------------------------------
     SIDEBAR / WELL
  ----------------------------------------------- */
  .well {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
  }

  /* -----------------------------------------------
     TYPOGRAFIE
  ----------------------------------------------- */
  h1 { font-size: 1.3rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem  !important; }

  /* -----------------------------------------------
     BUTTONS – Touch-Targets ≥ 44 px
  ----------------------------------------------- */
  .btn {
    min-height: 44px !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.9rem !important;
    box-sizing: border-box;
  }
  .btn-warning { width: 100% !important; }

  /* Zeilenausschluss-Buttons nebeneinander */
  #excludeRows, #RestoreRows {
    width: calc(50% - 0.25rem) !important;
    min-height: 44px !important;
    display: inline-block !important;
  }

  /* -----------------------------------------------
     FORMULARFELDER
  ----------------------------------------------- */
  .form-control { min-height: 44px !important; font-size: 1rem !important; }
  label { margin-bottom: 0.3rem !important; }
  .shiny-input-container { margin-bottom: 0.8rem !important; }

  /* -----------------------------------------------
     DATATABLE
  ----------------------------------------------- */
  .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Kein min-width erzwingen – scrollX in R übernimmt das */
  .dataTables_wrapper table.dataTable { min-width: 0 !important; }
  .dataTables_scrollBody {
    max-height: 45vh !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Scroll-Header genau so breit wie Body */
  .dataTables_scrollHead { overflow: hidden !important; }

  table.dataTable tbody td {
    padding: 0.5rem 0.4rem !important;
    font-size: 0.82rem !important;
    /* Lange Wörter/Namen umbrechen statt zu überlaufen */
    word-break: break-word;
    overflow-wrap: break-word;
  }
  table.dataTable thead th {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.4rem !important;
    word-break: break-word;
  }

  /* Filter, Länge, Info, Paging: untereinander */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    display: block !important;
    text-align: left !important;
    margin-bottom: 0.35rem;
    float: none !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* -----------------------------------------------
     DOWNLOAD-BUTTONS
  ----------------------------------------------- */
  .lmu-download-row { flex-direction: column; }
  .lmu-download-row .btn { width: 100% !important; text-align: center; }

  /* -----------------------------------------------
     BILDER & PLOTS
     .lmu-logo-img ausgenommen: sonst übersteuert diese Regel per
     !important die feste, bewusst kleine Logo-Höhe (.lmu-logo-img weiter
     oben) und das Header/Footer-Logo wird auf Mobile riesig (skaliert
     dann mit height:auto an der Containerbreite statt an einer festen
     Höhe von 26px).
  ----------------------------------------------- */
  img:not(.lmu-logo-img) { max-width: 100% !important; height: auto !important; }
  .shiny-plot-output {
    height: clamp(220px, 70vw, 360px) !important;
    min-height: 200px !important;
  }

  /* -----------------------------------------------
     NAV-TABS (Ergebnis-Unterseiten)
  ----------------------------------------------- */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs > li { flex-shrink: 0 !important; }

  /* -----------------------------------------------
     LMU MICRO-NAV
  ----------------------------------------------- */
  .lmu-micro-nav a { padding: 0.5rem 0.7rem !important; font-size: 0.82rem !important; }

  /* -----------------------------------------------
     DETAILS / ANLEITUNG
  ----------------------------------------------- */
  details > *:not(summary) { padding: 0.6rem 0.5rem; }

  /* -----------------------------------------------
     CALLOUT / ALERTS
  ----------------------------------------------- */
  .callout { margin-left: 0 !important; margin-right: 0 !important; }
  .swal2-popup { width: min(340px, 94vw) !important; }

  /* -----------------------------------------------
     MODAL-DIALOGE (z. B. "Datenspende abbrechen")
  ----------------------------------------------- */
  .modal-dialog {
    width: auto !important;
    margin: 10px !important;
  }
  .modal-body { padding: 14px !important; }
  /* Footer-Buttons untereinander, volle Breite, große Touch-Targets */
  .modal-footer { text-align: center !important; }
  .modal-footer .btn {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    min-height: 44px !important;
  }
  /* Auswahl-Optionen im Abbruch-Dialog gut umbrechen + Touch-Abstand */
  .modal-body .checkbox { margin: 6px 0 !important; }
  .modal-body .checkbox label { line-height: 1.4 !important; }

  /* -----------------------------------------------
     LMU HEADER / BANNER / FOOTER
  ----------------------------------------------- */
  .lmu-page-banner { min-height: 70px !important; padding: 0.8rem 1rem !important; }
  .lmu-page-title  { font-size: 1rem !important; }
  .lmu-breadcrumb  { display: none; }
  .lmu-footer--inner { grid-template-columns: 1fr !important; }

  /* -----------------------------------------------
     PICKER-DROPDOWN: außerhalb Sidebar rendern
  ----------------------------------------------- */
  .bootstrap-select .dropdown-menu {
    min-width: 260px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* --- Sehr kleine Phones (< 400px) --- */
@media (max-width: 399px) {
  h1 { font-size: 1.15rem !important; }
  .lmu-micro-nav a { padding: 0.45rem 0.55rem !important; font-size: 0.76rem !important; }
}

/* ===================================================
   MAIN-CONTENT WRAPPER (Breite & Abstand)
   =================================================== */
.container-fluid > .row:first-child {
  padding-top: 1rem;
}

/* ===================================================
   GLOBALER FONT-OVERRIDE (schlägt Bootstrap/Flatly)
   =================================================== */
.container-fluid, .tab-content, .tab-pane,
.well, .panel, .panel-body, .panel-heading,
.modal-content, .modal-body, .modal-header,
.shiny-input-container, .shiny-output-container,
.dataTables_wrapper,
p, li, td, th, input, select, textarea, button {
  font-family: var(--lmu-font) !important;
}

/* Bootstrap 3 Flatly-Restfarben überschreiben */
a, a:visited {
  color: var(--lmu-green) !important;
}
a:hover, a:focus {
  color: var(--lmu-green-dark) !important;
}

/* Flatly Navbar- und Heading-Farben neutralisieren */
.text-primary { color: var(--lmu-green) !important; }
.bg-primary    { background-color: var(--lmu-green) !important; }

/* Panel-Heading (Bootstrap accordion/well-header) */
.panel-default > .panel-heading {
  background-color: var(--lmu-gray-pale) !important;
  border-color: var(--lmu-gray-light) !important;
  color: var(--lmu-black) !important;
}

/* Hilfe-Text */
.help-block {
  font-family: var(--lmu-font) !important;
  color: var(--lmu-gray-dark) !important;
  font-size: 0.84rem !important;
}

/* ===================================================
   STATISTIK-KARTEN (Ergebnisse-Seite)
   =================================================== */
.stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.stat-card {
  flex: 1;
  min-width: 150px;
  background: var(--lmu-gray-pale);
  border-left: 4px solid var(--lmu-green);
  border-radius: var(--lmu-radius);
  padding: 14px 16px;
  box-shadow: var(--lmu-shadow);
}
.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lmu-green);
  line-height: 1.2;
  margin-bottom: 4px;
  word-break: break-word;
}
.stat-card-label {
  font-size: 0.78rem;
  color: var(--lmu-gray-dark);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
@media (max-width: 768px) {
  .stat-row { flex-direction: column; }
  .stat-card { min-width: unset; }
}

/* ===================================================
   EXPORT-ANLEITUNG: SCHRITT-FÜR-SCHRITT-SLIDESHOW
   (Daten hochladen > Android/iPhone-Anleitung)
   =================================================== */
.eg-slideshow {
  background: var(--lmu-gray-pale);
  border: 1px solid var(--lmu-gray-light);
  border-radius: var(--lmu-radius);
  box-shadow: var(--lmu-shadow);
  padding: 16px 16px 14px;
  margin: 10px 0 16px;
}
.eg-step-counter {
  font-size: 0.78rem;
  color: var(--lmu-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  margin-bottom: 8px;
}
.eg-step-text {
  font-size: 0.92rem;
  color: var(--lmu-black);
  line-height: 1.5;
  margin: 0 0 12px;
}
.eg-step img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.eg-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.eg-nav-btn {
  flex: 1;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  background-color: #fff;
  border: 1px solid var(--lmu-gray-mid);
  color: var(--lmu-black);
  border-radius: var(--lmu-radius);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.eg-nav-btn:hover:not(:disabled) {
  background-color: var(--lmu-green-light);
  color: var(--lmu-green-dark);
  border-color: var(--lmu-green);
}
.eg-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ===================================================
   ÜBERBLICKS-LISTE (Ergebnisse > Überblick)
   Listenartige Darstellung statt Karten-Grid – kompakte
   Zeilen mit Label/Wert nebeneinander und Erklärung darunter.
   =================================================== */
.overview-list {
  border-top: 1px solid var(--lmu-gray-light);
}
.overview-item {
  padding: 14px 2px;
  border-bottom: 1px solid var(--lmu-gray-light);
}
.overview-item-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.overview-item-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lmu-black);
}
.overview-item-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lmu-green);
  text-align: right;
  white-space: nowrap;
}
.overview-item-desc {
  font-size: 0.78rem;
  color: var(--lmu-gray-dark);
  margin-top: 4px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .overview-item-main { flex-direction: column; align-items: flex-start; gap: 2px; }
  .overview-item-value { text-align: left; }
}

/* ===================================================
   GRAFIK-KARTEN (Plots auf der Ergebnisseite)
   Rahmen wie bei den Statistik-Karten, damit die
   Diagramme nicht "lose" unter den Kennzahlen hängen.
   =================================================== */
.plot-card {
  background: var(--lmu-white);
  border: 1px solid var(--lmu-gray-light);
  border-top: 3px solid var(--lmu-green);
  border-radius: var(--lmu-radius);
  box-shadow: var(--lmu-shadow);
  padding: 16px 18px 10px;
  margin-bottom: 22px;
}
.plot-card .shiny-plot-output { margin: 0 auto; }

/* Abschnitts-Trenner zwischen Kennzahlen und Grafiken */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--lmu-gray-dark);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lmu-gray-mid);
}
@media (max-width: 767px) {
  .plot-card { padding: 10px 8px 6px; margin-bottom: 16px; }
}

/* ===================================================
   NACHRICHTEN-HEATMAP (Wochentag × 2h-Block)
   Zählt Nachrichten statt zu mitteln – robust bei dünnen
   Chats, wo ein Mittelwert pro Block sonst verzerrt.
   =================================================== */
.hm-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lmu-black);
  margin: 0 0 4px;
}
.hm-explainer {
  font-size: 0.86rem;
  color: var(--lmu-gray-dark);
  margin: 0 0 14px;
  line-height: 1.5;
}
.hm-scroll { overflow-x: auto; padding-bottom: 4px; }
.hm-grid {
  display: grid;
  grid-template-columns: 52px repeat(12, minmax(30px, 1fr));
  gap: 3px;
  min-width: 560px;
}
.hm-corner {}
.hm-colhead {
  font-size: 0.64rem;
  color: var(--lmu-gray-dark);
  text-align: center;
  padding-bottom: 3px;
  white-space: nowrap;
}
.hm-rowhead {
  font-size: 0.76rem;
  color: var(--lmu-gray-dark);
  display: flex;
  align-items: center;
  padding-right: 6px;
}
.hm-cell {
  aspect-ratio: 1 / 1;
  min-width: 28px;
  border-radius: 4px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}
.hm-step-0 {
  background: var(--lmu-gray-pale);
  border: 1px dashed var(--lmu-gray-mid);
  color: var(--lmu-gray-dark);
}
.hm-step-1 { background: var(--lmu-green-light); color: var(--lmu-black); }
.hm-step-2 { background: #ADDCBF; color: var(--lmu-black); }
.hm-step-3 { background: #63B98A; color: var(--lmu-black); }
.hm-step-4 { background: var(--lmu-green); color: #fff; }
.hm-step-5 { background: var(--lmu-green-dark); color: #fff; }

.hm-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lmu-gray-light);
  font-size: 0.76rem;
  color: var(--lmu-gray-dark);
}
.hm-legend-group { display: flex; align-items: center; gap: 6px; }
.hm-legend-scale { display: flex; gap: 2px; }
.hm-legend-swatch { width: 16px; height: 16px; border-radius: 3px; }
.hm-legend-swatch.nd {
  border: 1px dashed var(--lmu-gray-mid);
  background: var(--lmu-gray-pale);
}
.hm-peak {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--lmu-black);
}
.hm-peak strong { color: var(--lmu-green-dark); }

/* ===================================================
   NACHRICHTENLÄNGE-BOXPLOT (Wortanzahl je Tageszeit/Wochentag)
   Zeigt die Verteilung (Min/Q1/Median/Q3/Max) statt nur eines
   Durchschnitts – vermeidet, dass einzelne sehr lange oder kurze
   Nachrichten das Bild verzerren. Folgt dem Vorbild von
   WhatsR::plot_tokens(plot = "box").
   =================================================== */
.bp-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lmu-black);
  margin: 0 0 4px;
}
.bp-explainer {
  font-size: 0.86rem;
  color: var(--lmu-gray-dark);
  margin: 0 0 14px;
  line-height: 1.5;
}
.bp-scroll { overflow-x: auto; padding-bottom: 4px; }
.bp-svg { display: block; min-width: 560px; font-family: var(--lmu-font); }

.bp-grid { stroke: var(--lmu-gray-light); stroke-width: 1; }
.bp-ylabel { font-size: 10px; fill: var(--lmu-gray-dark); }
.bp-xlabel { font-size: 10px; fill: var(--lmu-gray-dark); }
.bp-nlabel { font-size: 9px; fill: var(--lmu-gray-mid); }
.bp-axistitle { font-size: 10px; fill: var(--lmu-gray-dark); }

.bp-bar { fill: var(--lmu-green); }
.bp-medianlabel { font-size: 10px; font-weight: 700; fill: var(--lmu-green-dark); }
.bp-range { stroke: var(--lmu-gray-mid); stroke-width: 2; stroke-linecap: round; }
.bp-nodata { stroke: var(--lmu-gray-mid); stroke-width: 2; stroke-dasharray: 3 3; }

.bp-legend {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lmu-gray-light);
  font-size: 0.76rem;
  color: var(--lmu-gray-dark);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.bp-legend-swatch {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--lmu-green);
  border-radius: 2px;
  margin-right: 2px;
}
.bp-legend-whisker {
  display: inline-block;
  width: 0; height: 12px;
  border-left: 2px solid var(--lmu-gray-mid);
  margin-right: 2px;
}

/* ===================================================
   PODIUM / TOP-3 (Links, Emoji, Smilies)
   =================================================== */
.podium-box {
  background: var(--lmu-gray-pale);
  border: 1px solid var(--lmu-gray-light);
  border-radius: var(--lmu-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--lmu-shadow);
}
.podium-title {
  font-weight: 600;
  color: var(--lmu-black);
  font-size: 0.88rem;
  margin-bottom: 10px;
}
.podium-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.podium-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--lmu-gray-mid);
}
/* Nummerierter Rang-Badge (ersetzt Medaillen-Emoji) */
.podium-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.podium-rank-1 { background: var(--lmu-green); }
.podium-rank-2 { background: var(--lmu-gray-dark); }
.podium-rank-3 { background: var(--lmu-gray-mid); }

/* Mini-Siegertreppchen als CSS-Icon im Titel */
.podium-trophy {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.podium-trophy span {
  display: inline-block;
  border-radius: 2px 2px 0 0;
}
.podium-trophy .pt-1 { width: 9px; height: 20px; background: var(--lmu-green); }
.podium-trophy .pt-2 { width: 9px; height: 14px; background: var(--lmu-gray-dark); }
.podium-trophy .pt-3 { width: 9px; height: 9px;  background: var(--lmu-gray-mid); }

.podium-emoji { font-size: 1.4rem; line-height: 1; }
.podium-text  { font-size: 0.88rem; font-weight: 500; color: var(--lmu-black); }
.podium-count { font-size: 0.82rem; color: var(--lmu-gray-dark); font-weight: 600; }
@media (max-width: 600px) { .podium-items { flex-direction: column; } }