/**/

body {
   font-size: 1.2rem;
   background-color: #FAFAFA;
}

/* Die Seite wurde unter Quirks-Mode entwickelt, wo Tabellen die body-Schriftgröße (1.2rem) NICHT
   erben, sondern bei 1rem bleiben. Nach der Doctype-Korrektur (Standards-Mode) würden sie 1.2rem
   erben und wären größer - daher hier explizit auf den gewohnten Wert zurücksetzen. */
table {
   font-size: 1rem;
}

mark {
   background-color: #e9ecef;
}

.dropdown-submenu {
   position: relative;
}

.dropdown-submenu a::after {
   transform: rotate(-90deg);
   position: absolute;
   right: 6px;
   top: .8em;
}

.dropdown-submenu .dropdown-menu {
   top: 0;
   left: 100%;
   margin-left: .1rem;
   margin-right: .1rem;
}

/* Trennlinie im Dropdown nicht komplett durchgezogen, sondern mit Abstand zum Rand -
   buendig zum Text der Eintraege und Zwischenueberschriften (padding-x = 1rem).
   Sie grenzt ausschliesslich Bloecke ab, fuer die es keine Bezeichnung gibt (z.B. die
   Untermenues im Tools-Menue) - innerhalb einer benannten Gruppe steht nie eine.
   Blasser als die Ueberschriften, damit sie die Gruppen nicht uebertoent. */
.dropdown-menu .dropdown-divider {
   margin-left: 1rem;
   margin-right: 1rem;
   border-top-color: #cfe0e4;
}

[data-theme=dark] .dropdown-menu .dropdown-divider {
   border-top-color: #4a373e;
}

/* Zwischenueberschriften im Dropdown: als Grau (#6c757d) in Normalschrift gingen sie
   zwischen den Eintraegen unter. Sie bekommen daher eine getoente Flaeche ueber die
   volle Menuebreite - eine Flaeche schneidet das Menue sichtbar in Bloecke, wo eine
   blosse Farbe nur ein weiterer Textton unter vielen war.
   Versalien + Sperrung nehmen ihnen zusaetzlich den Link-Charakter: Links sind hier
   nirgends gesperrt gesetzt, und die Schrift ist bewusst nicht die Linkfarbe
   (Light #0d6efd / Dark pink). */
.dropdown-menu .dropdown-header {
   color: #2a6472;
   font-size: 0.75rem;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   padding-bottom: 0.25rem;
}

[data-theme=dark] .dropdown-menu .dropdown-header {
   color: #c98da3;
}

/* Die Eintraege haengen an einem Balken, die Ueberschriften stehen davor - dadurch
   liest sich das Menue als Folge von Bloecken, und die Ueberschrift gehoert sichtbar
   zu dem, was unter ihr haengt.
   Der Balken sitzt an JEDEM Eintrag, nicht nur unter einer Ueberschrift: Bloecke ohne
   Bezeichnung (die ersten Eintraege eines Menues, die Untermenues im Tools-Menue)
   wirkten sonst unfertig. Er markiert also den Eintrag, nicht die Zugehoerigkeit zu
   einer benannten Gruppe - unterbrochen wird er ohnehin von den Ueberschriften und
   Trennlinien, die als div neben den li stehen und daher keinen Balken tragen. */
.dropdown-menu > li {
   margin-left: 1rem;
   border-left: 3px solid #7fb0bc;
}

.dropdown-menu > li .dropdown-item {
   padding-left: 0.75rem;
}

[data-theme=dark] .dropdown-menu > li {
   border-left-color: #7a4f5c;
}

.max-width {
    max-width: 100%;
}

.hide {
   display: none;
}

.nav-link:hover {
   color: #00bfff !important;
}

.col_width_50 {
   width: 50px;
}

.col_width_75 {
   width: 75px;
}

.col_width_85 {
   width: 85px;
}

.col_width_100 {
   width: 100px;
}

.col_width_125 {
   width: 125px;
}

.col_width_150 {
   width: 150px;
}

.col_width_225 {
   width: 225px;
}

.dt-left-col {
   float: left;
   width: 12%;
}

.dt-center-col {
   float: left;
   width: 63%;
}

.dt-right-col {
   float: right;
   width: 25%;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #c9c9c9 !important;
  color: unset !important;
}

.imgHeight24 {
   height: 24px;
}

.autocompleteDropdown {
   padding: 1px;
   max-height: 200px;
   overflow: auto;
   /* ueber dem Bootstrap-Modal (z-index 1055) liegen, sonst waere die Vorschlagsliste
      in Modals (z.B. "Befehl manuell hinzufuegen") hinter dem Dialog verdeckt */
   z-index: 1060;
}

/* Typ-Multiselect nahtlos an das "Typ"-Label der input-group anschliessen */
.input-group > .commandTypeSelect {
   flex: 1 1 auto;
}
.input-group > .commandTypeSelect > .multiselect.form-select {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

/* Werkzeug-Knopf fuer Icon-Bedienelemente in Leisten und Zeilen; farbig ist nur die
   Hauptaktion. Karten- und Bildbedienung schwebt auf dem Bild, das in beiden Modi dunkel
   ist - dort bleibt er hell und faellt nicht unter die Dark-Regel darunter. */
.btn-tool,
[data-theme=dark] #mapToolbar .btn-tool,
[data-theme=dark] #mapToolbarTop .btn-tool,
[data-theme=dark] #mapControls .btn-tool,
[data-theme=dark] .imgzoom-controls .btn-tool {
   --bs-btn-color: #343a40;
   --bs-btn-bg: #f1f3f5;
   --bs-btn-border-color: #ced4da;
   --bs-btn-hover-color: #212529;
   --bs-btn-hover-bg: #e2e6ea;
   --bs-btn-hover-border-color: #adb5bd;
   --bs-btn-active-color: #212529;
   --bs-btn-active-bg: #d8dde2;
   --bs-btn-active-border-color: #adb5bd;
   --bs-btn-disabled-color: #adb5bd;
   --bs-btn-disabled-bg: #f1f3f5;
   --bs-btn-disabled-border-color: #dee2e6;
   --bs-btn-focus-shadow-rgb: 173, 181, 189;
}

/* Nur der Seiteninfo-Knopf in der Navbar: er erklaert jede Seite und soll auffallen, ohne
   eine Hauptaktion zu sein. Keine Dark-Variante - die Navbar ist in beiden Modi #343a40,
   und gegen die sticht das Cyan mit 5,7:1, waehrend btn-primary im Light nur 2,5:1 kaeme. */
.btn-help {
   --bs-btn-color: #212529;
   --bs-btn-bg: #0dcaf0;
   --bs-btn-border-color: #0dcaf0;
   --bs-btn-hover-color: #212529;
   --bs-btn-hover-bg: #31d2f2;
   --bs-btn-hover-border-color: #25cff2;
   --bs-btn-active-color: #212529;
   --bs-btn-active-bg: #3dd5f3;
   --bs-btn-active-border-color: #25cff2;
   --bs-btn-focus-shadow-rgb: 11, 172, 204;
}

[data-theme=dark] .btn-tool {
   --bs-btn-color: #d4d4d4;
   --bs-btn-bg: #2b2b2b;
   --bs-btn-border-color: #454545;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #3a3a3a;
   --bs-btn-hover-border-color: #5a5a5a;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #444;
   --bs-btn-active-border-color: #5a5a5a;
   --bs-btn-disabled-color: #6c6c6c;
   --bs-btn-disabled-bg: #2b2b2b;
   --bs-btn-disabled-border-color: #3a3a3a;
   --bs-btn-focus-shadow-rgb: 90, 90, 90;
}

.img-revert {
   filter: invert(0%);
}

.font-larger {
   font-size: larger;
}

/* Truppen-Eingabe (drawUnitInputs): Icon + Feld bleiben als Paar zusammen und
   brechen um, statt auf schmalen Screens unlesbar zu schrumpfen. Grid statt
   Flexbox, damit die Paare die volle Breite ausnutzen, eine angebrochene letzte
   Zeile aber trotzdem normal breite Felder behaelt. */
.unit-input-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   gap: .5rem;
}

.font-smaller {
   font-size: smaller;
}

.field-icon {
   float: right;
   margin-right: 8px;
   margin-top: -28px;
   position: relative;
   z-index: 2;
}

.checkboxDoubleSized {
   -ms-transform: scale(2); /* IE */
   -moz-transform: scale(2); /* FF */
   -webkit-transform: scale(2); /* Safari and Chrome */
   -o-transform: scale(2); /* Opera */
   transform: scale(2);
   padding: 10px;
}

/* BS5: form-check-input ist bereits 1em groß (Radios rund via border-radius:50%,
   Checkboxen leicht abgerundet quadratisch). Das padding/min-height aus
   .checkboxDoubleSized bzw. .form-control-sm verzerrt das zu einem Oval/Rechteck -
   daher hier zuruecksetzen und feste quadratische, vergroesserte Größe erzwingen.
   Der Selektor trifft nur Checkboxen/Radios (Textfelder haben .form-control, Labels
   .form-check-label), nicht andere Eingaben. */
.form-check-input.checkboxDoubleSized,
.form-check-input.form-control-sm {
   width: 1.25em;
   height: 1.25em;
   min-height: 0;
   padding: 0;
   transform: none;
}

/* Der kleine Button würde im float-Layout der .form-check oben am (hohen)
   form-control-Label kleben. Per Flexbox vertikal zentrieren, Label behält volle Breite. */
.form-check:has(> .form-check-input.checkboxDoubleSized),
.form-check:has(> .form-check-input.form-control-sm) {
   display: flex;
   align-items: center;
   padding-left: 0;
}

.form-check:has(> .form-check-input.checkboxDoubleSized) > .form-check-input.checkboxDoubleSized,
.form-check:has(> .form-check-input.form-control-sm) > .form-check-input.form-control-sm {
   float: none;
   margin: 0 0.5em 0 0;
   flex-shrink: 0;
}

.form-check:has(> .form-check-input.checkboxDoubleSized) > .form-check-label,
.form-check:has(> .form-check-input.form-control-sm) > .form-check-label {
   flex: 1;
}

.icon-vertical-center {
   position: relative;
   top: 35%;
   transform: translate(-35%);
}

tr.strikeout td {
   background: transparent url('../img/strike_black.png') 0 50% repeat-x;
}

.timer-rendered {
   font-weight: bold;
}

.jst-hours, .jst-minutes, .jst-seconds {
   float: left;
}

.jst-clearDiv {
   clear: both;
}

.jst-timeout {
   color: red;
}

.countdown60 {
   background-color: #ffad99 !important;
   --bs-table-bg: #ffad99;
   --bs-table-bg-type: initial;
}

.countdown300 {
   background-color: #ffffb3 !important;
   --bs-table-bg: #ffffb3;
   --bs-table-bg-type: initial;
}

.countdown600 {
   background-color: #c6ffb3 !important;
   --bs-table-bg: #c6ffb3;
   --bs-table-bg-type: initial;
}

.differenceMinus {
   color: #FF6F61 !important;
}

.differencePlus {
   color: #92B558 !important;
}

#infoDiv {
   height: 75%;
   overflow: scroll;
   overflow-x: hidden;
}

.playerNoteOutput {
   height: 150px;
   overflow: scroll;
   overflow-x: hidden;
}

.disabled-nav {
   color: #212529 !important;
}

.vertical-center {
   vertical-align: middle !important;
}

.dt-max-width {
   width: 100% !important;
}

/* DataTables mittelt die Ladeanzeige in der Tabelle - bei langen Tabellen weit unterhalb des Sichtbereichs */
div.dt-container div.dt-processing {
   position: fixed;
   z-index: 1030;
}

/* Berichts-DataTable (#tblReports): festes Tabellen-Layout. Icon-/Zahl-/Datumsspalten
   bekommen feste Breiten (aus der Kopfzeile), der Betreff die komplette Restbreite und
   wird nur bei Bedarf mit … gekuerzt - so fuellt er auch breite Bildschirme voll aus.
   Unterhalb der min-width horizontal scrollen statt Spalten zu stauchen. */
.dt-reports {
   table-layout: fixed;
   width: 100%;
   min-width: 60rem;
}

.dt-reports td,
.dt-reports th {
   white-space: nowrap;
   vertical-align: middle;
}

.dt-reports .dt-w-dot  { width: 2.5rem; }
.dt-reports .dt-w-icon { width: 5.5rem; }
.dt-reports .dt-w-log  { width: 4rem; }
.dt-reports .dt-w-num  { width: 5.5rem; }
.dt-reports .dt-w-date { width: 10rem; }

/* Betreff fuellt die verbleibende Spaltenbreite und wird dynamisch gekuerzt
   (voller Text im Hover-Popover). */
.dt-reports .report-subject {
   max-width: 100%;
}

.faded {
   opacity: 0.3;
}

/* Berichte-Modal: Farben als Variablen, darktheme.css setzt nur die Werte um. */
.report-modal {
   --rp-line: var(--bs-border-color);
   --rp-band: var(--bs-tertiary-bg);
   --rp-muted: var(--bs-secondary-color);
}

/* Der Kopf traegt nur das Schliessen-Kreuz - es liegt ueber dem Titel statt eine eigene Zeile zu belegen. */
.modal-content.report-modal .modal-header {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   border: 0;
   background: transparent;
}

.report-modal .modal-body {
   padding: 1.25rem 1.5rem 1.5rem;
}

.rp-head {
   padding-right: 2.5rem;
}

.rp-title {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
   text-wrap: balance;
}

.rp-title img {
   position: relative;
   top: -2px;
   margin-right: .25rem;
}

.rp-sub {
   margin-top: .25rem;
}

.rp-facts {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: .75rem 1.5rem;
   margin: 1rem 0 .5rem;
   padding: .75rem 1rem;
   background: var(--rp-band);
   border-radius: .5rem;
}

.rp-facts-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rp-fact dt {
   margin-bottom: .125rem;
   font-size: .8125rem;
   font-weight: 400;
   color: var(--rp-muted);
}

.rp-fact dd {
   margin: 0;
   font-variant-numeric: tabular-nums;
}

.rp-fact-wide {
   grid-column: span 2;
}

.rp-links {
   display: inline-flex;
   flex-wrap: wrap;
   gap: .25rem 1rem;
}

.rp-scroll {
   overflow-x: auto;
}

.rp-troops {
   width: 100%;
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
}

.rp-troops th,
.rp-troops td {
   padding: .2rem .25rem;
   text-align: center;
   white-space: nowrap;
}

.rp-troops .rp-icons td {
   padding-bottom: .375rem;
}

.rp-troops tbody th {
   width: 1%;
   padding-right: 1rem;
   text-align: left;
   font-weight: 400;
   color: var(--rp-muted);
}

.rp-troops .rp-party th {
   padding: 1rem 0 .375rem;
   border-top: 1px solid var(--rp-line);
   color: inherit;
   white-space: normal;
}

.rp-troops .rp-first .rp-party th {
   padding-top: .75rem;
   border-top: 0;
}

.rp-side {
   margin-right: 1rem;
   font-weight: 600;
}

.rp-troops .rp-extra th,
.rp-troops .rp-extra td {
   padding-top: .375rem;
   vertical-align: top;
   font-size: .875rem;
}

.rp-troops .rp-extra td {
   text-align: left;
   white-space: normal;
}

.rp-troops .rp-extra + .rp-extra td,
.rp-troops .rp-extra + .rp-extra th {
   padding-top: .125rem;
}

.rp-troops .rp-split th,
.rp-troops .rp-split td {
   padding-top: .5rem;
   border-top: 1px solid var(--rp-line);
}

.rp-troops .rp-split + tr th,
.rp-troops .rp-split + tr td {
   padding-top: .25rem;
}

.rp-toggle {
   padding: 0;
   border: 0;
   background: none;
   color: inherit;
}

.rp-toggle i {
   margin-left: .25rem;
   font-size: .75em;
   transition: transform .2s ease-out;
}

.rp-toggle[aria-expanded=true] i {
   transform: rotate(180deg);
}

.rp-troops .rp-stationed th {
   padding-left: 1rem;
   font-size: .75rem;
   white-space: nowrap;
}

/* Qualitaetsstufen der Reliquien in den Farben aus dem Spiel */
.relic-quality-shoddy { color: #5f5f5f; }
.relic-quality-polished { color: #277d32; }
.relic-quality-refined { color: #3b4cb4; }
.relic-quality-superior { color: #6a3bb4; }
.relic-quality-renowned { color: #b4573b; }

.rp-effects {
   margin: 0;
   padding: 0;
   list-style: none;
}

.rp-section {
   margin: 1rem 0 0;
   padding: 1rem 0 0;
   border-top: 1px solid var(--rp-line);
}

.rp-heading {
   margin-bottom: .75rem;
   font-size: 1rem;
   font-weight: 600;
}

.rp-lines {
   list-style: none;
}

.rp-lines li {
   display: grid;
   grid-template-columns: 18px 1fr;
   align-items: center;
   gap: .625rem;
   padding: .125rem 0;
}

.rp-buildings {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
   gap: .5rem;
}

.rp-building {
   display: flex;
   align-items: center;
   gap: .5rem;
   padding: .375rem .625rem;
   background: var(--rp-band);
   border-radius: .375rem;
   font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
   .report-modal .modal-body {
      padding: 1rem;
   }

   .rp-facts,
   .rp-facts-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .rp-fact-wide {
      grid-column: 1 / -1;
   }
}

.luck-bar {
   display: inline-flex;
   align-items: center;
   gap: .375rem;
   vertical-align: middle;
   font-variant-numeric: tabular-nums;
}

.luck-track {
   position: relative;
   width: 128px;
   height: 14px;
   border: 1px solid var(--bs-border-color);
   border-radius: 2px;
   overflow: hidden;
}

.luck-track::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 1px;
   background: currentColor;
}

.luck-fill {
   position: absolute;
   top: 0;
   bottom: 0;
   background-size: auto 100%;
}

.luck-glueck {
   left: 50%;
   background-image: url(../img/report/balken_glueck.png);
}

.luck-pech {
   right: 50%;
   background-image: url(../img/report/balken_pech.png);
}

.luck-value {
   margin-left: .125rem;
   font-weight: 600;
}

.modal-xxl {
   max-width: 90%;
}

/* select2 ersetzt das <select> durch einen eigenen Container - der muss sich in einer
   input-group wie ein Formularfeld verhalten und die Hoehe der Nachbarn treffen. */
.input-group > .select2-container {
   flex: 1 1 auto;
   width: 1% !important;
}

.input-group > .select2-container .select2-selection--single {
   height: 100%;
   display: flex;
   align-items: center;
   border-radius: 0;
   border-color: var(--bs-border-color);
}

.input-group > .select2-container:last-child .select2-selection--single {
   border-top-right-radius: var(--bs-border-radius);
   border-bottom-right-radius: var(--bs-border-radius);
}

/* select2 zeigt von Haus aus nur 200px Liste. Mit der Fensterhoehe als Mass bleibt
   der Aufklapper so vollstaendig wie frueher das native Auswahlfeld. */
.select2-results > .select2-results__options {
   max-height: 70vh !important;
}

/* select2 setzt 6px Polster je Zeile - damit wird die Liste doppelt so hoch wie das
   native Auswahlfeld und passt nicht mehr aufs Bild. */
.select2-results__option,
.select2-results__group {
   padding-top: 2px;
   padding-bottom: 2px;
}

.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
   height: 100%;
}

/* Zwischenstufen: Bootstrap hoert bei .container (1320px) und .modal-xl (1140px) auf,
   darueber gibt es nur noch .max-width bzw. .modal-xxl mit voller Breite. */
.container-wide {
   max-width: 1750px;
}

.modal-wide {
   max-width: 1500px;
}

.pointer {
   cursor: pointer;
}

.logOutput {
   height: 300px;
   overflow: scroll;
   overflow-x: hidden;
}

.inc_size1 {
   background-color: #92B558 !important;
   --bs-table-bg: #92B558;
   --bs-table-bg-type: initial;
}

.inc_size2 {
   background-color: #F1EA7F !important;
   --bs-table-bg: #F1EA7F;
   --bs-table-bg-type: initial;
}

.inc_size3 {
   background-color: #FF6F61 !important;
   --bs-table-bg: #FF6F61;
   --bs-table-bg-type: initial;
}

.inc_size4 {
   background-color: #6F9FD8 !important;
   --bs-table-bg: #6F9FD8;
   --bs-table-bg-type: initial;
}

.inc_size5 {
   background-color: #EBAF26 !important;
   --bs-table-bg: #EBAF26;
   --bs-table-bg-type: initial;
}

.inc_size6 {
   background-color: #DA70D6 !important;
   --bs-table-bg: #DA70D6;
   --bs-table-bg-type: initial;
}

/* --bs-table-bg + Stripe/Hover-Overlay neutralisieren: BS5 färbt Zellen über die Variable und
   legt bei .table-striped/.table-hover ein Overlay darüber, das eine reine tr-Farbe sonst übermalt.
   Als Label-Hintergrund (Radio-Buttons im Eroberungs-Modal) wirkt weiterhin background-color. */
.allyConquest {
   background-color: #cccaca !important;
   --bs-table-bg: #cccaca;
   --bs-table-bg-type: initial;
}

.bbConquest {
   background-color: #c7c7c7 !important;
   --bs-table-bg: #c7c7c7;
   --bs-table-bg-type: initial;
}

.selfConquest {
   background-color: #bddbff !important;
   --bs-table-bg: #bddbff;
   --bs-table-bg-type: initial;
}

.internConquest {
   background-color: #f0cef7 !important;
   --bs-table-bg: #f0cef7;
   --bs-table-bg-type: initial;
}

.loseConquest {
   background-color: #ffb9b9 !important;
   --bs-table-bg: #ffb9b9;
   --bs-table-bg-type: initial;
}

.winConquest {
   background-color: #dcffd7 !important;
   --bs-table-bg: #dcffd7;
   --bs-table-bg-type: initial;
}

.worldmap {
   width: 100%;
}

/* Kartenbild im Vollbild-Popup (scripts/imgZoom.js): die Buehne fuellt den Bildschirm,
   das Bild darin wird per transform verschoben und vergroessert. */
.imgzoom-stage {
   position: absolute;
   inset: 0;
   overflow: hidden;
   touch-action: none;
   cursor: grab;
   background: var(--bs-body-bg);
}
.imgzoom-stage.dragging { cursor: grabbing; }
.imgzoom-stage img {
   position: absolute;
   top: 0;
   left: 0;
   max-width: none;
   transform-origin: 0 0;
   user-select: none;
   -webkit-user-drag: none;
}
/* ueber der Originalaufloesung nicht interpolieren - die Karten sind Pixelgrafiken */
.imgzoom-stage img.pixelated { image-rendering: pixelated; }

.imgzoom-controls {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 6;
   display: flex;
   flex-direction: column;
   gap: 6px;
}
.imgzoom-controls .btn { width: 38px; height: 38px; opacity: .92; }

.imgzoom-hint {
   position: absolute;
   left: 10px;
   bottom: 10px;
   z-index: 5;
   padding: 4px 8px;
   font-size: 12px;
   color: #fff;
   background: rgba(0,0,0,.55);
   border-radius: .25rem;
   pointer-events: none;
}

.note-editor { width: 100% !important; }
.note-editor .note-editable {
   font-size: 1.1rem !important;
}

.unit-img {
   height: 24px;
}

.diverse_icon {
   width: 18px;
   height: 18px;
   display:inline-block;
   margin: auto 2px auto 0;
   overflow: hidden;
   background-repeat: no-repeat;
   vertical-align: -4px;
   background-image:url(../img/diverse_icons.png);
}

.divserse_icon_population { background-position: -72px 0; }
.divserse_icon_time { background-position: -285px 0; }

.bonus_icon {
   width: 18px;
   height: 18px;
   display: inline-block;
   margin-left: 2px;
   vertical-align: middle;
   background-image:url(../img/bonus_icons.png);
}

.bonus_icon_1 {
   background-position: 0 0;
}

.bonus_icon_2 {
   background-position: 0 -18px;
}

.bonus_icon_3 {
   background-position: 0 -36px;
}

.bonus_icon_4 {
   background-position: 0 -126px;
}

.bonus_icon_5 {
   background-position: 0 -72px;
}

.bonus_icon_6 {
   background-position: 0 -90px;
}

.bonus_icon_7 {
   background-position: 0 -108px;
}

.bonus_icon_8 {
   background-position: 0 -54px;
}

.bonus_icon_9 {
   background-position: 0 -144px;
}

.bonus_icon_10 {
   background-position: 0 -162px;
}

.bonus_icon_11 {
   background-position: 0 -180px;
}

.bonus_icon_12 {
   background-position: 0 -198px;
}

.bonus_icon_13 {
   background-position: 0 -216px;
}

.bonus_icon_14 {
   background-position: 0 -234px;
}

.bonus_icon_15 {
   background-position: 0 -252px;
}

.bonus_icon_16 {
   background-position: 0 -270px;
}

.bonus_icon_17 {
   background-position: 0 -288px;
}

.bonus_icon_18 {
   background-position: 0 -306px;
}

.bonus_icon_19 {
   background-position: 0 -324px;
}

.bonus_icon_20 {
   background-position: 0 -342px;
}

.bonus_icon_21 {
   background-position: 0 -360px;
}

.bonus_icon_22, .bonus_icon_23, .bonus_icon_24, .bonus_icon_25, .bonus_icon_26, .bonus_icon_27, .bonus_icon_28, .bonus_icon_29, .bonus_icon_30, .bonus_icon_31, .bonus_icon_32 {
   background-position: 0 -378px;
}

.bonus_icon_33 {
   background-position: 0 -396px;
}

#loading, #loadingModal {
 position: fixed;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 opacity: 0.7;
 background-color: #fff;
 z-index: 99;
}

#loading-image {
 z-index: 100;
}

@media screen and (max-width: 768px) {
  .row {
     margin-top: 0;
  }

  .card {
     margin-bottom: 1rem;
  }
}


/* bootstrap-multiselect: Button im form-select-Look (Farben/runde Ecken wie übrige Eingabefelder) */
.multiselect.form-select {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* form-select bringt bereits einen Pfeil mit, den dropdown-toggle-Pfeil daher ausblenden */
.multiselect.form-select.dropdown-toggle::after {
   display: none;
}

/* bootstrap-multiselect sperrt beim disable() nur den Button - der ist ein <button>,
   greift also nicht in die input:disabled-Regeln. Deutlich als gesperrt kennzeichnen
   (z.B. Dorftyp in der Berichtssuche, solange kein eingrenzender Filter gesetzt ist). */
.multiselect.form-select:disabled {
   cursor: not-allowed;
   opacity: .65;
}

/* Dropdown-Menue mindestens so breit wie der Button (buttonWidth: 100%),
   darf aber fuer breitere Inhalte wie bisher mitwachsen */
.btn-group > .multiselect-container.dropdown-menu {
   min-width: 100%;
   box-sizing: border-box;
}

/* Bootstrap 5 unterstreicht Links standardmaessig - altes BS4-Verhalten wiederherstellen */
a {
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}
/* wie in BS4: Navigations-/Button-Elemente auch bei Hover ohne Unterstrich */
.nav-link:hover,
.navbar-brand:hover,
.dropdown-item:hover,
.page-link:hover,
.btn:hover {
   text-decoration: none;
}
/* BS4-Navbar hatte 1rem Seitenabstand (padding: .5rem 1rem) - BS5 setzt 0 und erwartet einen Container */
.navbar {
   padding-left: 1rem;
   padding-right: 1rem;
}

/* BS5 hat bg-dark auf #212529 abgedunkelt - BS4-Ton (#343a40) der Navbar wiederherstellen */
.navbar.bg-dark {
   background-color: #343a40 !important;
}

/* BS5 färbt nur .nav-link.active hell; BS4 färbte auch Links unter einem li.active (.active > .nav-link).
   Da hier jedes nav-item .active trägt, waren die Links unter BS4 hell - wiederherstellen. */
.navbar-dark .navbar-nav .nav-item.active > .nav-link,
.navbar-dark .navbar-nav .show > .nav-link {
   color: var(--bs-navbar-active-color);
}

/* Mond-Icon des Darkmode-Schalters aufhellen - erbt sonst die schwarze Standardtextfarbe
   und ist dadurch auf der dunklen Navbar kaum sichtbar (im Darkmode war es bereits hell). */
.darkSwitchIcon {
   color: #e9ecef;
}
/* Farbinputs: Hoehe an die uebrigen Eingabefelder angleichen (BS5-Pendant: .form-control-color) */
input[type="color"].form-control {
   height: calc(1.5em + 0.75rem + (var(--bs-border-width) * 2));
   padding: 0.375rem;
}
/* Pagination (u.a. DataTables-Seitenzahlen): Schriftfarbe wie restlicher Text statt Link-Blau */
.page-link {
   color: var(--bs-body-color);
}
/* BS4-Zellenhoehe wiederherstellen: BS5 reduzierte das Tabellen-Padding von .75rem auf .5rem */
.table > :not(caption) > * > * {
   padding: 0.75rem;
}
/* BS5 entfernte den Standard-Abstand unter <label> (man soll .form-label nutzen).
   Für klassenlose Form-Labels (z.B. über Textareas) das BS4-Verhalten wiederherstellen,
   damit der <mark>-Hintergrund nicht direkt auf dem Feld klebt. input-group-text-,
   form-check-label- und form-label-Labels haben eine Klasse und bleiben unberührt. */
label:not([class]) {
   margin-bottom: 0.5rem;
}

/* "Nach oben"-Button (Opt-in per $GLOBALS['backToTop'] vor dem Footer-Include, siehe
   layout/footer.php): schwebt unten rechts mit und erscheint erst nach etwas Scrollweg */
#backToTop {
   position: fixed;
   right: 1.25rem;
   bottom: 1.25rem;
   z-index: 1030;
   width: 2.75rem;
   height: 2.75rem;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s, visibility 0.2s;
}
#backToTop.show {
   opacity: 1;
   visibility: visible;
}

/* "Ermitteln"-Knopf der Rechentools bleibt unten sichtbar; auf sehr kleinen Screens nicht breiter als der Viewport */
.ermitteln-fab {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   bottom: 20px;
   z-index: 1030;
   min-width: 260px;
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45);
}

@media (max-width: 400px) {
   .ermitteln-fab {
      min-width: 0;
      width: calc(100vw - 1.5rem);
   }
}

/* Lade-Overlay waehrend einer Worker-Berechnung (scripts/workerCalc.js) */
.calc-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2000;
   display: none;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .6);
   color: #fff;
}

.calc-overlay.is-active {
   display: flex;
}