/*
* Das Thema der Anwendung: stellt Bootstrap 5 auf Dichte und Erscheinung ein, die hier seit
* jeher gelten.
*
* Bootstrap 5 ist für Webseiten gemacht und entsprechend großzügig: 16 px Grundschrift, 24 px
* Zeilenhöhe, 38 px hohe Eingabefelder, helle Navigationsleiste. Diese Anwendung ist ein
* Arbeitswerkzeug, in dem Formulare mit dreißig Feldern und Tabellen mit zwanzig Spalten normal
* sind — mit den Vorgabewerten passt gut ein Drittel weniger auf den Bildschirm.
*
* Die Zahlen hier sind nicht geschätzt, sondern am Bootstrap-2-Stand gemessen (20.10.2026,
* mandant/details):
*
* Schrift "Helvetica Neue", 14px, Zeilenhöhe 20px
* Eingabefeld Innenabstand 4px 6px, Rahmen 1px #ccc, Radius 4px
* Feldgruppe 20px Abstand nach unten
* Beschriftung 14px, Gewicht 400, 120px breit, rechtsbündig
* Tabellenzelle 4px 5px
* Leiste 41px hoch, Hintergrund #1b1b1b
*
* Was bewusst von Bootstrap 5 bleibt: Fokusringe, Schatten, Abstufungen der Farben, die
* Rasterlogik und die Barrierefreiheit. Es geht um Maße, nicht um einen Rückbau.
*/
:root {
/* ---- Schrift ---- */
--bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.875rem; /* 14px */
--bs-body-line-height: 1.42857143; /* 20px bei 14px */
--bs-body-color: #333;
--bs-body-bg: #fff;
/* ---- Kanten ---- */
--bs-border-radius: 0.25rem; /* 4px, nicht 6px */
--bs-border-radius-sm: 0.1875rem;
--bs-border-radius-lg: 0.375rem;
--bs-border-color: #ccc;
--bs-border-color-translucent: #ddd;
/* ---- Verweise ---- */
--bs-link-color: #0088cc;
--bs-link-hover-color: #005580;
--bs-link-color-rgb: 0, 136, 204;
--bs-link-hover-color-rgb: 0, 85, 128;
/* ---- Hausfarbe ---- */
--minerva-blau: #7BAAD4;
--minerva-leiste: #1b1b1b;
--minerva-leisten-hoehe: 3.5rem;
}
/* Überschriften.
*
* Bootstrap 5 skaliert h1 bis h3 mit der Fensterbreite (`calc(… + …vw)`), was auf einem breiten
* Bildschirm riesige Zeilen ergibt. Feste Größen in der Staffelung der alten Oberfläche — dort
* nachgemessen: h2 ist 31,5 px und fett, und das trägt die Seitenhierarchie. Ein erster Versuch
* mit kleineren, mageren Überschriften hat die Seiten flach und zusammenhanglos wirken lassen. */
h1, .h1 { font-size: 2.40625rem; line-height: 2.5rem; } /* 38,5 px */
h2, .h2 { font-size: 1.96875rem; line-height: 2.5rem; } /* 31,5 px */
h3, .h3 { font-size: 1.53125rem; line-height: 2.5rem; } /* 24,5 px */
h4, .h4 { font-size: 1.09375rem; line-height: 1.25rem; } /* 17,5 px */
h5, .h5 { font-size: 0.875rem; line-height: 1.25rem; }
h6, .h6 { font-size: 0.74375rem; line-height: 1.25rem; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-weight: 700;
color: inherit;
}
/* Legenden.
*
* Bootstrap 2 gab ihnen viel Luft und eine Trennlinie darunter; Bootstrap 5 nimmt beides weg,
* womit eine Legende wie gewöhnlicher Text wirkt und der Abschnitt darunter an ihr klebt. Die
* Werte stammen aus der alten Fassung: 21px auf 40px Zeile, 20px Abstand, Linie in #e5e5e5. */
legend {
/* Auch nach oben Luft: die beiden Legenden der Anwendung (`mandant/_form.html`) beginnen
jeweils einen Abschnitt unterhalb eines vorherigen Blocks und klebten sonst an dessen
letzter Feldzeile. Am Anfang eines Formulars steht keine, das kann also nicht stören. */
margin-top: 1.5rem;
margin-bottom: 1.25rem;
font-size: 1.3125rem;
line-height: 2.5rem;
color: #333;
border-bottom: 1px solid #e5e5e5;
}
legend small {
font-size: 0.9375rem;
color: #999;
}
/* ---- Eingabefelder ------------------------------------------------------- */
.form-control,
.form-select {
padding: 0.25rem 0.4375rem; /* 4px 7px, wie zuvor */
font-size: 0.875rem;
line-height: 1.42857143;
min-height: calc(1.42857143em + 0.5rem + 2px);
color: #555;
border-color: #ccc;
border-radius: var(--bs-border-radius);
}
.form-select {
padding-right: 1.75rem;
background-size: 12px 9px;
}
.form-control:focus,
.form-select:focus {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.form-label {
margin-bottom: 0.25rem;
font-size: 0.875rem;
font-weight: 400;
color: #333;
}
.form-text {
margin-top: 0.125rem;
font-size: 0.8125rem;
}
.form-check-input {
margin-top: 0.1875rem;
}
.input-group-text {
padding: 0.25rem 0.4375rem;
font-size: 0.875rem;
/* Ohne das erbt der Zusatz Bootstraps Zeilenhöhe 1.5 — bei 14px sind das 21 statt 20 Pixel,
und weil er der höchste Teil der Gruppe ist, zieht er das Feld daneben auf 31,2 px hoch.
Felder in einer Zusatzgruppe waren dadurch einen Pixel höher als alle anderen. */
line-height: 1.42857143;
background-color: #eee;
border-color: #ccc;
}
/* ---- Knöpfe -------------------------------------------------------------- */
.btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.75rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-line-height: 1.42857143;
--bs-btn-border-radius: var(--bs-border-radius);
}
.btn-sm {
--bs-btn-padding-y: 0.125rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.75rem;
}
.btn-lg {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.0625rem;
}
/*
* Der graue Standardknopf.
*
* In Bootstrap 2 war ein nacktes `.btn` genau das; in Bootstrap 5 ist ein `.btn` ohne Variante
* durchsichtig und randlos und damit nicht als Knopf zu erkennen. An 84 Stellen im Markup steht
* aber genau das und meint einen gewöhnlichen Knopf — „hochladen" beim Datei-Upload etwa.
* Der Satz gilt deshalb für beides: für `.btn-secondary` und für ein `.btn` ohne Variante.
*
* Die Varianten sind einzeln ausgeschlossen und nicht über `[class*="btn-"]` — dieser
* Platzhalter träfe auch `btn-sm`, `btn-icon` und `btn-mini`, also Größen- und Hausklassen.
*/
.btn-secondary,
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not([class*="btn-outline-"]) {
--bs-btn-color: #333;
--bs-btn-bg: #f5f5f5;
--bs-btn-border-color: #ccc;
--bs-btn-hover-color: #333;
--bs-btn-hover-bg: #e6e6e6;
--bs-btn-hover-border-color: #bbb;
--bs-btn-active-color: #333;
--bs-btn-active-bg: #d9d9d9;
--bs-btn-active-border-color: #bbb;
--bs-btn-disabled-color: #999;
--bs-btn-disabled-bg: #f5f5f5;
--bs-btn-disabled-border-color: #ccc;
}
/* Knöpfe, die nur ein Symbol tragen, brauchen keine Textbreite.
*
* Die Zeilenhöhe ist kein Beiwerk: 16px Symbol auf 20px Zeile ergibt dieselbe Zeilenbox wie
* 14px Text auf 1.42857, der Knopf wird also genauso hoch wie einer mit Beschriftung. Mit
* `line-height: 1` war er 3px niedriger — im Fußbereich des Vorschau-Dialogs standen
* „Download" und „Schließen" deshalb auf unterschiedlicher Höhe.
*/
.btn-icon {
--bs-btn-padding-x: 0.5rem;
font-size: 1rem;
line-height: 1.25;
}
/* In der kleinen Fassung ist die Zeilenbox eines Textknopfes 17px hoch. Dort trifft das Symbol
mit Zeilenhöhe 1 genau; 1.25 wäre drei Pixel zu hoch. */
.btn-sm.btn-icon {
line-height: 1;
}
/* ---- Tabellen ------------------------------------------------------------ */
.table {
--bs-table-bg: transparent;
--bs-table-striped-bg: #f9f9f9;
--bs-table-striped-color: #333;
--bs-table-color: #333;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.table > :not(caption) > * > * {
padding: 0.5rem; /* 8px, wie .table in Bootstrap 2 */
border-bottom-width: 0;
border-top: 1px solid #ddd;
}
.table > thead > tr > * {
border-top: 0;
border-bottom: 2px solid #ddd;
font-weight: 700;
vertical-align: bottom;
}
/* table-condensed hieß früher so; 4px/5px ist dessen gemessene Dichte. */
.table-sm > :not(caption) > * > * {
padding: 0.25rem 0.3125rem;
}
.table-hover > tbody > tr:hover > * {
--bs-table-accent-bg: #f5f5f5;
background-color: #f5f5f5;
}
/* Muss hinter der Zellenregel oben stehen: die gibt jeder Zelle eine obere Linie, und
Bootstraps `table-borderless` nimmt nur die untere weg. */
.table-borderless td {
border: none;
}
.table-no-head > tbody > tr:first-child > td {
border: none;
}
/* Ausgewählte Zeile (`tr.active`). */
.table tbody tr.active td,
.table-striped tbody tr.active:nth-child(odd) td {
background-color: #E0E0E0;
}
.table tbody tr.active:hover td {
background-color: #E4E4E4;
}
/* ---- Navigationsleiste ---------------------------------------------------
*
* Hell, wie zuvor — und **nur im Development-Modus dunkel**.
*
* Das war ein Messfehler: die Leistenfarbe ist an der lokalen Instanz abgenommen worden, und
* die läuft im Development-Modus. Dort hängt `Navbar.scala` ein `navbar-inverse` an, das in
* Bootstrap 2 die dunkle Fassung war (#1b1b1b gegen #fafafa). Das Dunkel war also der
* Entwicklungsstand, nicht der normale — produktiv hätte die Leiste ihre Farbe gewechselt,
* und die Unterscheidung „bin ich auf Dev oder auf Produktion" wäre verloren gewesen.
*/
.navbar {
--bs-navbar-padding-y: 0.5rem;
--bs-navbar-brand-font-size: 1.25rem;
--bs-navbar-nav-link-padding-x: 0.75rem;
/* Die Farbvariablen gehören an die Leiste, nicht an den einzelnen Verweis: Bootstrap löst
`--bs-navbar-color` schon an `.navbar-nav` zu `--bs-nav-link-color` auf. Am `.nav-link`
gesetzt kommt sie zu spät und bleibt wirkungslos — die helle Leiste hatte dadurch weiße
Verweise auf hellem Grund. */
--bs-navbar-color: #777;
--bs-navbar-hover-color: #333;
--bs-navbar-active-color: #333;
min-height: var(--minerva-leisten-hoehe);
background-color: #fafafa;
border-bottom: 1px solid #d4d4d4;
}
.navbar .nav-link {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
font-size: 0.875rem;
}
/* Die dunkle Fassung des Development-Modus. `navbar-inverse` kommt aus Navbar.scala, zusammen
mit `data-bs-theme="dark"`, das die übrigen Farben von Bootstrap umstellt. */
.navbar.navbar-inverse {
--bs-navbar-color: #999;
--bs-navbar-hover-color: #fff;
--bs-navbar-active-color: #fff;
background-color: var(--minerva-leiste);
border-bottom-color: #000;
}
.navbar .dropdown-menu {
font-size: 0.875rem;
}
/* So hoch wie das Suchfeld daneben (.navbar-suche .input-group), sonst stehen auf schmalen
Bildschirmen zwei verschieden hohe Kästen nebeneinander. */
.navbar-toggler {
display: flex;
align-items: center;
height: 2.125rem;
padding: 0 0.5rem;
font-size: 1rem;
border-color: #ccc;
color: #777;
}
.navbar.navbar-inverse .navbar-toggler {
border-color: #444;
color: #bbb;
}
/* ---- Suche in der Leiste -------------------------------------------------
*
* Steht außerhalb des Collapse und bleibt deshalb auf jeder Breite sichtbar; siehe navbar5.html.
* Sie schrumpft mit, verschwindet aber nicht.
*/
.navbar-suche {
flex: 0 1 20rem;
min-width: 7rem;
margin: 0;
}
/* Unterhalb des Umbruchpunkts teilt sich die Suche die erste Zeile mit Burger, „Neu" und
Avatar. Mit den vollen 20rem passt das auf einem Telefon nicht und die Leiste bricht auf zwei
Zeilen um — dann steht sie 91 statt 57 Pixel hoch, und der Rumpf, dessen Abstand an der
einzeiligen Höhe hängt, verschwindet darunter. */
@media (max-width: 767.98px) {
.navbar-suche {
flex: 1 1 10rem;
max-width: 20rem;
margin: 0 0.75rem;
}
}
.navbar-suche .input-group {
flex-wrap: nowrap;
width: 100%;
}
/* Hell auf beiden Fassungen der Leiste.
Auf der dunklen Leiste färbt `data-bs-theme="dark"` sonst auch das Eingabefeld dunkel, und ein
fast schwarzes Feld auf fast schwarzem Grund ist als Feld nicht mehr zu erkennen.
Der Rahmen sitzt an der Gruppe, nicht an Lupe und Feld einzeln. Zwei aneinanderstoßende Kästen
mit je eigenem Rahmen sehen bei einem Browser-Zoom ungleich 100 % versetzt aus: die Randbreite
ist dann keine ganze Zahl (bei 90 % sind es 1,111 px), und jeder Kasten rundet für sich auf ein
Gerätepixel. Ein Rechteck kann diesen Versatz nicht haben. */
.navbar .navbar-suche .input-group {
min-height: 2.125rem;
overflow: hidden;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: var(--bs-border-radius);
}
.navbar .navbar-suche .form-control,
.navbar .navbar-suche .input-group-text {
min-height: 0;
background-color: transparent;
border: 0;
border-radius: 0;
color: #555;
}
.navbar .navbar-suche .input-group-text {
padding-right: 0.5rem;
color: #888;
}
.navbar .navbar-suche .form-control {
min-width: 0;
padding-left: 0.25rem;
}
.navbar .navbar-suche .form-control::placeholder {
color: #999;
}
/* Die Umrandung gehört jetzt der Gruppe, also auch der Fokusrahmen. */
.navbar .navbar-suche .input-group:focus-within {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0 0 6px rgba(82, 168, 236, 0.5);
}
.navbar .navbar-suche .form-control:focus {
box-shadow: none;
}
/* ---- Anordnung in der Leiste ---------------------------------------------
*
* Im Markup steht die Suche vor dem Collapse, damit auf schmalen Bildschirmen die erste Zeile
* stimmt: Burger, Suche, rechte Seite — und das Menü darunter. Oberhalb des Umbruchpunkts
* gehört sie aber in die Mitte, deshalb hier die Reihenfolge über `order`.
*/
.navbar-rechts {
display: flex;
align-items: center;
gap: 0.25rem;
margin-left: auto;
}
@media (min-width: 768px) {
.navbar .navbar-collapse { order: 1; }
.navbar .navbar-suche { order: 2; margin-left: auto; }
.navbar .navbar-rechts { order: 3; margin-left: 0.75rem; }
}
/* Der Platz des Ajax-Kreisels in der Leiste. */
.navbar-ajax-spinner {
margin-top: 8px;
float: right;
}
/* ---- Plakette „Dev" -------------------------------------------------------
*
* Steht im Markup als letztes in .navbar-rechts und gehört an den rechten Fensterrand, nicht an
* den des Containers. Absolut bezieht sie sich auf die feste Leiste, also auf die volle Breite
* ohne Scrollbar. Erst ab 1280px: darunter reicht der Rand neben dem 1170px-Container nicht für
* die Plakette, und sie läge über dem Avatar — dort bleibt sie an ihrem Platz daneben.
*/
@media (min-width: 1280px) {
.navbar .dev-badge {
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
margin-left: 0 !important;
}
}
/* Im Development-Modus setzt Body.scala `body-dev`: „Dev" als Wasserzeichen im Hintergrund. */
.body-dev {
background-image: url('/images/dev-background.svg');
}
/* ---- Benutzer-Avatar -----------------------------------------------------
*
* Das Bild aus webapp/images/avatare/, und wenn es keines gibt, die Initialen in einem Kreis.
* Die beiden liegen übereinander: das Bild deckt die Initialen ab, sobald es geladen ist. Fehlt
* die Datei, antwortet der Server mit 404 und js/bs5.js nimmt das Bild heraus.
*/
/* Mit `.navbar` davor, sonst gewinnt `.navbar .nav-link` mit seinen 0.625rem und der 32px hohe
Avatar macht die Leiste 13 Pixel höher als beabsichtigt. 4px über und unter dem Kreis ergeben
dieselben 40px, die auch ein Menüeintrag hoch ist. */
.navbar .benutzer-knopf {
display: flex;
align-items: center;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.benutzer-avatar {
position: relative;
display: inline-block;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
}
.benutzer-initialen {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
color: #fff;
letter-spacing: 0.02em;
background-color: var(--minerva-blau);
border-radius: 50%;
}
.benutzer-bild {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* ---- Auswahlmenüs -------------------------------------------------------- */
.dropdown-menu {
--bs-dropdown-font-size: 0.875rem;
--bs-dropdown-padding-y: 0.25rem;
--bs-dropdown-item-padding-y: 0.1875rem;
--bs-dropdown-item-padding-x: 1rem;
--bs-dropdown-border-radius: var(--bs-border-radius-lg);
}
/* ---- Reiter -------------------------------------------------------------- */
.nav-tabs {
--bs-nav-tabs-border-color: #ddd;
--bs-nav-link-padding-y: 0.375rem;
--bs-nav-link-padding-x: 0.75rem;
--bs-nav-link-font-size: 0.875rem;
--bs-nav-tabs-link-active-color: #555;
--bs-nav-tabs-link-active-border-color: #ddd #ddd #fff;
margin-bottom: 1rem;
}
/* Reiter werden über `data-bs-toggle` geschaltet und haben deshalb kein `href`. Für den Browser
ist ein `` ohne `href` aber kein Verweis — der Mauszeiger bliebe der Textcursor.
Bewusst nicht als `a:not([href])` allgemein: diese Seite hat auch echte Sprungmarken
(``), und die sind nicht anklickbar.
`.disabled` bleibt ausgenommen, damit Bootstraps `cursor: default` dort gilt. */
.nav-link:not([href]):not(.disabled):not(:disabled) {
cursor: pointer;
}
/* ---- Dialoge ------------------------------------------------------------- */
.modal {
--bs-modal-border-radius: var(--bs-border-radius-lg);
--bs-modal-header-padding: 0.625rem 0.9375rem;
--bs-modal-padding: 0.9375rem;
--bs-modal-footer-gap: 0.3125rem;
}
.modal-title {
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.5;
}
.modal-footer {
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
/* Breite wie zuvor: 600 px statt der 500 px von Bootstrap 5, und `modal-wide` 900 px.
*
* `modal-wide` kommt aus `Modal.dialogClass` und landet als Zeichenkette am `.modal`-Element —
* im Markup steht sie nirgends. Sie war deshalb beim Abgleich der Bootstrap-2-Klassen nicht zu
* sehen und blieb undefiniert; der E-Mail-Dialog war dadurch 500 statt 900 px breit.
*
* Die Deckelung auf die Fensterbreite entspricht dem alten `max-width: calc(100% - 40px)`. */
.modal-dialog {
max-width: min(600px, calc(100% - 2.5rem));
}
.modal.modal-wide .modal-dialog {
max-width: min(900px, calc(100% - 2.5rem));
}
/* Der Dialogkörper scrollt in sich. Ohne das wächst der ganze Dialog über das Fenster hinaus —
der E-Mail-Dialog kam auf 1534 px Höhe. Der Wert ist der der alten Fassung. */
.modal-body {
max-height: calc(90vh - 180px);
overflow-y: auto;
}
/* Die Überschrift im Dialogkopf trägt keine eigenen Abstände. */
.modal-header h3 {
margin: 0;
line-height: 30px;
}
/* Die Dateivorschau füllt den Rumpf: das iframe darin rechnet mit `height: 100%` und braucht
deshalb eine Höhe in Pixeln — das `max-height` am Rumpf allein gibt ihm keine. Es schließt
die Polsterung ein (border-box); die Vorschau ist um genau diese Polsterung kleiner, sonst
rollt der Rumpf zusätzlich zur PDF-Ansicht. */
.modal-body > .file-preview {
height: calc(90vh - 180px - 2 * var(--bs-modal-padding));
}
.modal-footer {
text-align: left !important;
}
.modal-footer .btn-group + .btn,
.modal-footer .btn + .btn-group {
margin-left: 5px;
}
/* ---- Hinweise ------------------------------------------------------------ */
.alert {
--bs-alert-padding-y: 0.5rem;
--bs-alert-padding-x: 0.875rem;
--bs-alert-border-radius: var(--bs-border-radius);
margin-bottom: 1rem;
}
/* Ein `.alert` ohne Variante war in Bootstrap 2 gelb und in Bootstrap 5 ist es farblos — also
unsichtbar. Mehrere Stellen erzeugen genau das (`renderAlertBox` ohne Zusatzklasse), und sie
meinen dort eine Warnung. */
.alert:not([class*="alert-"]) {
--bs-alert-color: #c09853;
--bs-alert-bg: #fcf8e3;
--bs-alert-border-color: #fbeed5;
color: var(--bs-alert-color);
background-color: var(--bs-alert-bg);
border-color: var(--bs-alert-border-color);
}
.badge {
--bs-badge-padding-y: 0.1875em;
--bs-badge-padding-x: 0.5em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 700;
--bs-badge-border-radius: var(--bs-border-radius-sm);
}
/* Der letzte Absatz und die letzte Liste in einem Hinweis tragen keinen Abstand nach unten. */
.alert p:last-child,
div .alert ul:last-child {
margin-bottom: 0;
}
/* ---- Formularaufbau ------------------------------------------------------
*
* `control-group`, `control-label` und `controls` stammen aus Bootstrap 2, sind hier aber
* bewusst geblieben und werden ab Etappe 5 als eigene Klassen der Anwendung geführt — nicht
* als Altlast.
*
* Der Grund: Bootstrap 5 baut waagerechte Formulare über das Raster, also
* `