/* Lato (OFL 1.1, tyPoland Lukasz Dziedzic) — liegt auf dem Server, vier Schnitte (E50, 06.10.2026).
Vorher nannte main.css Lato, lieferte sie aber nie; jeder Browser zeigte seine Ersatzschrift. */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/lato-latin-300-normal.716309aab2bc.woff2") format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.e1b3b5908c9c.woff2") format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.de69cf9e514d.woff2") format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/jost-latin-var.c801208ca8f0.woff2") format('woff2'); } /* nur „Intranet" am Logo (E66): freier Futura-Nachbau, OFL */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato-latin-900-normal.1c6c65523675.woff2") format('woff2'); }
:root {
/* Farbwechsel (03.10.2026): alte Palette → neue, Tag für Tag vom 03.10.2026 bis zum 22.04.2027 (services/farbschema.py). --farb-t setzt
includes/farbwechsel.html aus dem Datum (Vorschau ?farbe=alt|neu|0-100|demo|auto).
Gemischt wird in OKLab, in zwei Teilstrecken über einen Wegpunkt (--t1 bis 50 %, --t2 danach):
der gerade Weg von Blau nach Rot führt durch Violett, der gerade Weg von Marine nach Sand durch
Grau. Die Wegpunkte sind Grün (Mike, 03.10.): Blau → Tannengrün → Ziegelrot, jeder Tag eine echte
Farbe (Blau, Petrol, Grün, Oliv, Terrakotta, Rot), Kontrast auf Creme nie unter 3,3. Der Kopf geht
Marine → Tannengrün → Ocker und bleibt so bis ~60 % dunkel; seine Schrift kann nicht gleiten und
kippt am gemessenen Schnittpunkt von Weiß auf Dunkel (Kopf 64,5 %, Brotkrumen 68 %, Suchfeld 67 %),
dort haben beide ~3,9:1. Im Kopf trägt die Schriftfarbe die Markierung (aktiv = fett), nicht der
Akzent. Musterblatt der Wege: /static/website/farbe/wege.html */
--alt-A: #172D40; --mitte-A: #3F6B4F; --neu-A: #E7D3A6; /* Kopf, Menüs, Tabellenköpfe: Marine → Tannengrün → Ocker (Mike, 03.10.) */
--alt-text: #ffffff; --neu-text: #2B2522; /* Schrift darauf: kippt am Schnittpunkt */
--alt-D: #498FCC; --mitte-D: #2F7A4F; --neu-D: #B3362B; /* Links, Knöpfe, Haken: Blau → Tannengrün → Ziegelrot */
--alt-E: #32628C; --mitte-E: #225C3B; --neu-E: #8C2A22; /* Hover: eine Stufe dunkler */
--alt-Dlight: #ECF3F9; --neu-Dlight: #FBF3E3; /* Pflichtfeld-Füllung */
--alt-grund: #E9E4DD; --neu-grund: #F0EAE0; /* Seitengrund, Ende des Verlaufs */
--alt-krumen: #EAF1F7; --mitte-krumen: #EDF3EE; --neu-krumen: #FBF8F2; /* Brotkrumen-Band: hell in jeder Welt — Eisblau, Blassgrün, Creme; Schrift immer dunkel (Mike, 07.10.: das Marine freundlicher; vorher #10191C / #2E4F3A) */
--alt-zweit: #C7D9EA; --mitte-zweit: #CBDFD0; /* Zweitfarbe (gewählter Reiter): in der Marine-Welt helles Blau, am Ziel = Kopffarbe (Mike, 07.10.) */
--alt-such: #212529; --mitte-such: #2E4F3A; --neu-such: #ffffff; /* Suchfeld im Kopf */
--farb-t: 100%;
--t1: clamp(0%, calc(var(--farb-t) * 2), 100%);
--t2: clamp(0%, calc(var(--farb-t) * 2 - 100%), 100%);
--t-text: clamp(0%, calc((var(--farb-t) - 64.5%) * 1000), 100%); /* Kipppunkte: innerhalb von 0,1 % — kein Zwischentag; Kopf → Ocker schneidet bei 64,5 % */
--t-krumen: clamp(0%, calc((var(--farb-t) - 67.5%) * 1000), 100%);
--t-such: clamp(0%, calc((var(--farb-t) - 66.5%) * 1000), 100%);
--colorA: var(--neu-A);
--colorTitle: var(--neu-text);
--colorD: var(--neu-D);
--colorE: var(--neu-E);
--colorDlight: var(--neu-Dlight);
--grund: var(--neu-grund);
--krumen: var(--neu-krumen);
--krumen-text: var(--neu-text);
--krumen-rand: color-mix(in oklab, var(--krumen), #000 9%); /* Haarlinien im Brotkrumen-Band (Trennlinie Leiste | Brotkrumen) */
--zweit: var(--neu-A);
--such-text: var(--neu-text);
--such: var(--neu-such);
--kante: var(--neu-D); /* Dachkante unter dem Kopf */
--menu-rand: #E3D9C8; /* Rahmen von Menüs und Suchfeld */
--colorB: var(--colorD);
--colorC: var(--colorD);
--colorHighlight: #EB6C00;
--mvz-radius: 4px; /* ein Radius für Felder, Knöpfe, Kästen */
--mvz-border: #8a8a8a; /* ein Rahmen: 1px solid, für alle Feldarten */
/* Regelsatz E44 (Mike, 05.10.2026): vier Schriftstufen, eine leise Farbe, Feldhöhe und Zeilenabstand (Dichte kompakt) */
--s-titel: 24px; --s-abschnitt: 18px; --s-text: 16px; --s-leise: 14px;
--leise: #6b625c;
--beschriftung: var(--leise); /* Beschriftung über dem Wert (schmal): passiv, darum Grau — Farbe heißt „aktiv" (Mike, 07.10.) */
--beschriftung-links: #38312d; /* Beschriftung links neben dem Wert: fast so dunkel wie der Wert — Spalte und Schnitt (300) trennen schon (Mike, 07.10.) */
--feld-h: 32px; /* Höhe einzeiliger Felder; Labels zentrieren sich darauf */
--zeile: 6px; /* Abstand zwischen Feldzeilen und Faktenzeilen */
--label-spalte: 11rem; /* Beschriftung links, eine Spaltenbreite für Formular und Fakten (rem: gilt auch in 14px-Fußnoten) */
}
@supports (color: color-mix(in oklab, red, blue 50%)) {
:root {
--colorA: color-mix(in oklab, color-mix(in oklab, var(--alt-A), var(--mitte-A) var(--t1)), var(--neu-A) var(--t2));
--colorTitle: color-mix(in oklab, var(--alt-text), var(--neu-text) var(--t-text));
--colorD: color-mix(in oklab, color-mix(in oklab, var(--alt-D), var(--mitte-D) var(--t1)), var(--neu-D) var(--t2));
--colorE: color-mix(in oklab, color-mix(in oklab, var(--alt-E), var(--mitte-E) var(--t1)), var(--neu-E) var(--t2));
--colorDlight: color-mix(in oklab, var(--alt-Dlight), var(--neu-Dlight) var(--t1)); /* in der ersten Hälfte: Grau-Fenster kurz halten */
--grund: color-mix(in oklab, var(--alt-grund), var(--neu-grund) var(--farb-t));
--krumen: color-mix(in oklab, color-mix(in oklab, var(--alt-krumen), var(--mitte-krumen) var(--t1)), var(--neu-krumen) var(--t2));
--krumen-text: var(--neu-text); /* das Band ist in jeder Welt hell — kein Kipppunkt mehr (--t-krumen bleibt unbenutzt stehen) */
--zweit: color-mix(in oklab, color-mix(in oklab, var(--alt-zweit), var(--mitte-zweit) var(--t1)), var(--neu-A) var(--t2));
--such: color-mix(in oklab, color-mix(in oklab, var(--alt-such), var(--mitte-such) var(--t1)), var(--neu-such) var(--t2));
--such-text: color-mix(in oklab, var(--alt-text), var(--neu-text) var(--t-such));
--kante: color-mix(in oklab, var(--alt-A), var(--colorE) var(--farb-t)); /* Dachkante: taucht aus dem Marine auf, folgt dem Hover-Ton */
--menu-rand: color-mix(in oklab, transparent, #E3D9C8 var(--farb-t));
}
}
/* Global styles */
html { scrollbar-gutter: stable; } /* Seiten mit und ohne Scrollbalken gleich breit: kein Ruck beim Reiterwechsel */
body {
padding-top: 0;
padding-bottom: 0;
font-size: 18px;
font-family: 'Lato', sans-serif;
background: rgb(255,255,255);
background: linear-gradient(135deg, #fff 0%, #fff 50%, var(--grund) 100%);
min-height: 100vh;
}
h1 {
font-weight: 300;
font-size: 60px;
position: relative;
}
.hero h1 {
color: white;
}
h2,
table caption {
font-weight: 900;
}
h3 {
font-weight: 900;
margin-top: 20px;
}
h4 {
font-weight: 600;
font-size: 22px;
}
p {
margin: 0 0 30px;
color: #444;
}
a, a:focus, a:visited {
color: var(--colorD);
text-decoration: none;
line-break: auto;
}
a:hover {
color: var(--colorE);
text-decoration: none;
}
a.btn {
background-color: #d4566b;
color: white;
display: inline-block;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.15em;
padding: 15px 20px;
text-transform: uppercase;
}
a.btn:hover {
background-color: #eb7400;
color: white;
}
a.btn-sm {
border-radius: 4px;
font-size: 10px;
line-height: normal;
padding: 6px 8px;
}
.header input {
border-radius: var(--mvz-radius);
border: 1px solid var(--menu-rand);
font-size: 18px;
padding: 10px;
width: 100%;
}
#extendedSearch .mvzsearch label {
width: 14%;
text-align: right;
margin-top: 10px;
margin-bottom: 0px;
}
.mvzsearch input {
padding: 10px;
width: 100%;
}
.mvzsearch select {
width: 85%;
float: right;
padding: 10px;
}
#extendedSearch .mvzsearch input {
width: 85%;
float: right;
}
#extendedSearch .mvzsearch input[type='submit'] {
width: 100%;
float: none;
}
ul.nav{
display: block;
}
/*ul.nav{
display: grid;
}*/
ul {
margin: 0 0 50px; /*30px;*/
}
figure {
padding: 25px 50px;
position: relative;
}
figure > blockquote > p {
margin-left: 20px;
}
figcaption .blockquote-footer {
background-color: rgba(99,33,13,0.8);
bottom: 0;
color: white;
font-size: 16px;
font-weight: 300;
left: 0;
padding: 10px;
position: absolute;
/*width: 75%;*/
}
img {
display: block;
/*width: 100%;*/
}
.col-md-10 {
width: 95%;
}
/* Generic detail page styles */
.stand-first {
color: rgba(255,255,255,0.8);
font-size: 26px;
margin: 0;
}
.intro {
font-weight: 300;
margin: 0 0 60px; /*40px;*/
font-size: 30px; /*22px;*/
}
/* Hero image area */
.hero {
background-size: cover;
background-position: center;
padding: 20px 0 3px 0;
position: relative;
margin: 0 0 3px;
}
@media screen and (min-width: 768px) {
.hero {
padding: 20px 0 3px 0;
margin: 0 0 4px;
}
}
.hero-gradient-mask {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,1) 100%);
}
blockquote {
border-left: 5px solid #d4566b;
margin: 0 0 50px;
}
blockquote p {
font-size: 30px;
margin: 0 0 10px;
}
blockquote footer::before {
display: none;
}
blockquote footer p {
font-size: 1.8em;
font-style: italic;
}
cite {
text-transform: uppercase;
color: #888;
font-size: 12px;
font-style: normal;
letter-spacing: 0.15em;
}
/* Page header */
/*.header {
padding: 15px 0 15px;
width: 100%;
background: var(--colorA);
position: relative;
z-index: 1001;
}
#header h2 {
color: white;
}
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}*/
/* Logo */
.logo, .logo:visited, .logo:focus,
.auth h1 {
display: inline-block;
padding: 0;
color: var(--colorTitle);
font-size: 30px;
font-weight: 300;
margin: 0 0 0;
}
.logo:hover {
color: var(--colorE);
text-decoration: none;
}
/*
.search {
display: inline-block;
float: right;
margin: 0 0 0 30px;
}*/
.search-icon {
height: 20px;
margin-right: 8px;
margin-top: -38px;
float: right;
}
/* Lupe im Kopf-Suchfeld mittig (Mike, 05.10.): absolut in der Feldmitte statt -38px nach oben gezogen */
nav.navbar .searchelement .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; float: none; line-height: 0; }
.mvzsearch .search-icon {
margin-top: 13px;
margin-left: -33px;
}
.search-icon svg {
fill: var(--colorD);
height: 20px;
width: 20px;
}
/*nav {
margin: 15px 0 0 0;
border-top: 1px solid rgba(255,255,255,0.1);
display: block;
}*/
#main-navigation {
padding-left: 0;
}
/* Farben-Link im Kopf und die Einstellungsseite (ldap_mvz/templates/farbschema-form.html) */
/* Kopfzeile rechts: angemeldet-als fuellt und schiebt die beiden Aktionen nach rechts; Symbole einfarbig (currentColor) */
.nav.logininformation a.farbenlink {
flex: 0 0 auto;
margin-left: 16px; /* 16 Luecke + 16 = 32: Name | Farben Abmelden | Suche, die Gruppen doppelt so weit wie das Paar */
text-decoration: none;
}
.nav.logininformation a.farbenlink:hover { color: var(--colorB); }
.nav.logininformation .ikon {
vertical-align: -3px;
margin-right: 2px;
opacity: 0.85;
}
.nav.logininformation .logoutbutton>button {
color: var(--colorTitle);
text-decoration: none; /* schlaegt die aeltere Regel .logoutbutton>button weiter unten */
}
.nav.logininformation .logoutbutton>button:hover { color: var(--colorB); }
form.farbschema label.schema {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
padding: 8px 10px;
margin: 0 0 6px;
border: 1px solid transparent;
border-radius: var(--mvz-radius);
cursor: pointer;
font-weight: normal;
}
form.farbschema label.schema:hover { background-color: rgba(127, 127, 127, 0.08); }
form.farbschema label.schema.gewaehlt, form.farbschema label.schema:has(input:checked) {
border-color: var(--colorD);
background-color: var(--colorDlight);
}
form.farbschema label.schema input[type=radio] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--colorD);
flex: none;
}
form.farbschema .plaettchen {
flex: none;
width: 72px;
height: 44px;
border-radius: var(--mvz-radius);
border: 1px solid #c9c2b8;
background: linear-gradient(90deg, var(--p-kopf) 0%, var(--p-kopf) 45%, var(--p-ziel) 55%, var(--p-ziel) 100%);
position: relative;
}
form.farbschema .plaettchen::after {
content: '';
position: absolute;
left: 8px;
bottom: 6px;
width: 56px;
height: 4px;
border-radius: 2px;
background: var(--p-akzent);
}
form.farbschema .text small { color: #666; }
form.farbschema .fehler { color: var(--colorHighlight); }
/* Suche im Kopf: Bootstrap zeichnet sie dunkel (data-bs-theme="dark"); hier läuft sie mit dem Kopf mit */
nav.navbar .searchelement .form-control {
background-color: var(--such);
color: var(--such-text);
border: 1px solid var(--menu-rand);
}
nav.navbar .searchelement .form-control::placeholder {
color: var(--such-text);
opacity: 0.6;
}
nav.navbar .searchelement { position: relative; }
nav.navbar .searchelement .btn-group {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 4px; /* Leiste haengt am Feld: das Formular hat keine feste Hoehe mehr */
z-index: 50; /* ueber dem Handy-Menue-Overlay (40): wer ins Suchfeld tippt, meint die Suche */
padding: 4px;
border-radius: var(--mvz-radius);
background-color: var(--colorA);
border: 1px solid var(--menu-rand);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
nav.navbar .searchelement:focus-within .btn-group { display: inline-flex; }
nav.navbar .searchelement .btn-group .btn {
color: var(--colorTitle);
border-color: var(--menu-rand);
background-color: transparent;
opacity: 0.85;
}
nav.navbar .searchelement .btn-group .btn:hover { opacity: 1; }
nav.navbar .searchelement .btn-group .btn-check:checked + .btn {
color: #fff;
background-color: var(--colorD);
border-color: var(--colorD);
opacity: 1;
}
/***********************************/
/* Menü-Navigation */
/***********************************/
/* Zwei Zonen (03.10.2026): oben die leise Werkzeugzeile (Konto, Farben, Abmelden, Suche) ohne Sperrung,
darunter das Menue als einzige gesperrte Zeile, durch eine Haarlinie abgesetzt. */
.nav-pills {
font-size: 16px;
font-weight: 400;
letter-spacing: 0; /* keine Sperrung: Kleinbuchstaben brauchen ihre Wortgestalt (Mike, 03.10.) */
}
.nav.logininformation {
font-size: 13px;
font-weight: 300;
letter-spacing: 0.02em;
opacity: 0.85;
}
.nav.logininformation b { font-weight: 500; }
.nav.logininformation .logoutbutton>button { font-size: inherit; letter-spacing: inherit; }
.nav-pills>li {
padding: 0px 24px 0px 0px;
float: left;
}
.nav-pills>li>a, .logininformation a {
border-radius: 0;
color: var(--colorTitle);
padding: 8px 0;
}
.nav-pills>li>a { display: block; } /* inline haette die Polsterung nicht in der Zeilenhoehe: Menuezeile = 8 + 24 + 8 */
/* Schalter des Menues — Basis, gilt ueberall (03.10.2026): der Pfeil je Hauptpunkt setzt aria-expanded, das CSS oeffnet
die Liste daran (:has). Der Server setzt den aktiven Ast auf true (fuer das Overlay; in der Menuezeile setzt main.js beim
Laden alles zu). Zwei Weichen, keine Kombination steht doppelt: das LAYOUT haengt an der Breite (Bloecke 992px),
HOVER ist eine Ergaenzung fuer Geraete mit Maus (Block (hover: hover) hinter dem breiten Layout). */
.menu-auf {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; /* = Menuezeile 8 + 24 + 8 */
padding: 0; border: 0; background: none; color: var(--colorTitle);
}
.menu-auf svg { transition: transform 0.2s; }
@media (prefers-reduced-motion: reduce) { .menu-auf svg { transition: none; } }
.menu-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.has-submenu:has(> .menu-auf[aria-expanded="true"]) > .dropdown-menu { display: block; }
.dropdown-menu .dropdown-menu { display: none; } /* dritte Stufe und tiefer: nur als Flyout per Hover; per Tipp gehoert sie auf die Bereichsseite */
.logoutbutton>button /*,
[type="button"],
[type="submit"]*/ {
-webkit-appearance: textfield;
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
text-decoration: underline;
font-size: 14px;
letter-spacing: 0.15em;
}
.nav.logininformation a.logoutbutton {
flex: 0;
margin-left: 20px;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
color: var(--colorTitle);
cursor: pointer;
}
.nav>li>a,.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
}
/* Menü (03.10.2026): aktiv = fett + Unterstrich dicht unter der Schrift (Tab-Muster), Hover ein neutraler Strich.
Der Strich ist text-decoration, nicht border + margin: der Kasten des Punkts bleibt geschlossen bis zum
Aufklappmenü, sonst reißt die Maus im Spalt den Hover ab. */
.nav-pills>li>a, .nav>li>a {
border-top: none;
border-bottom: none;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 3px;
text-underline-offset: 5px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover,
.nav-pills>li.active, .nav-pills>li:hover, .nav>li>a:focus, .nav>li>a:hover, .logininformation a.logoutbutton:hover, .logininformation a.logoutbutton:focus {
color: var(--colorTitle);
background-color: transparent;
text-decoration-color: color-mix(in oklab, var(--colorTitle), transparent 55%);
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
font-weight: 700;
text-decoration-color: var(--colorB);
}
/* Burger (03.10.2026): Bootstrap zeichnet ihn fuer data-bs-theme=dark weiss — auf dem warmen Kopf fast unsichtbar.
Als Maske in der Kopf-Schriftfarbe folgt er jedem Farbschema: dunkel auf Ocker, weiss auf Marine. */
.navbar-toggler { padding: 6px 8px; border: 1px solid var(--menu-rand); border-radius: var(--mvz-radius); color: var(--colorTitle); }
.navbar-toggler:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--colorB), transparent 60%); }
.navbar-toggler-icon {
width: 26px; height: 26px;
background: var(--colorTitle);
-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M3 6h18M3 12h18M3 18h18'/%3e%3c/svg%3e") center / contain no-repeat;
mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M3 6h18M3 12h18M3 18h18'/%3e%3c/svg%3e") center / contain no-repeat;
}
.navbar-toggle .icon-bar {
background-color: var(--colorTitle);
}
/* Kopf-Raster (03.10.2026), Einheit 8px: 16 ueber dem Logo, Logo 56 (= sichtbares Zeichen, die PNG ist beschnitten),
16 bis zur Haarlinie — seit 07.10.2026 (E66): 10,5 + Logo 70 + 7,5, gleiche Hoehe; breit: Logo 21 px nach links (Spitze ueber dem Linienanfang), Menue 5 + 24 + 5, 3 bis zur Dachkante; Menue 8 + 24 + 8, 8 bis zur Dachkante. Keine Kompensationsraender mehr: alles zentriert sich
per align-items an der Logo-Hoehe. */
nav.navbar {
padding: 0 0 8px;
background: var(--colorA) !important;
border-bottom: 3px solid var(--kante); /* Dachkante — taucht aus dem Marine auf */
/* background: radial-gradient(ellipse at left top, #FFFFFF 0%, #D7D8D9 12%, #7E8999 34%, #334657 55%, #172D40 70%, #172D40 0%) !important;*/
}
nav.navbar > .container, nav.navbar > .container-fluid, nav.navbar > .container-sm, nav.navbar > .container-md, nav.navbar > .container-lg, nav.navbar > .container-xl, nav.navbar > .container-xxl {
display: block;
}
.upperline {
display: flex;
align-items: center;
padding: 10.5px 0 7.5px; /* Logo 70: 10,5 + 70 + 7,5 = 88 (Mike, 07.10.) */
}
.upperline .searchelement {
width: 250px;
}
.navbar .upperline .rightaligned {
margin-left: auto;
display: flex;
align-items: center;
}
.upperline .navbar-brand {
position: relative; /* Bezug fuer „Intranet" */
padding: 0 88px 0 0; /* das Wort reicht bis ~220 px, das Logo bis 135: der Platz rechts gehoert zur Marke (schmal: Rasterspalte) */
margin: 0;
}
/* „Intranet" ueber dem Logo (Mike, 07.10.2026, E66): in der leeren Ecke oben rechts im Logo, Kapitälchen in Jost (die Logo-Schrift
ist eine breit gezogene Futura), Logorot #DB0040 aus dem PNG, weiße Kontur wie im Logo (SVG-Filter in includes/intranet-marke.html:
am Rand sofort weiß, 0,95 fest + Auslauf). Maße fuer Logo 70 px — Formblatt /static/website/muster/kopf-intranet-regler.html */
.navbar-brand .intranet {
position: absolute; left: 98.82px; top: 5.79px; /* Grundlinie 25 px bei 68 */
font: 600 23.53px/1 Jost, Futura, sans-serif; /* Versalhöhe 16 px bei 68 */
letter-spacing: 0.075em; transform: scaleX(1.15); transform-origin: left;
color: #DB0040; filter: url(#intranet-kontur); white-space: nowrap; pointer-events: none;
}
.navbar-brand .intranet .k { font-size: 0.9em; font-weight: 616; }
.navbar-brand .intranet-filter { position: absolute; width: 0; height: 0; }
@media (min-width: 992px) { /* breit (Mike, 07.10.): die untere Spitze des Bumerangs steht ueber dem Anfang der Haarlinie; Menue enger */
.upperline .navbar-brand { left: -21px; }
#main-navigation .nav-pills>li>a { padding: 5px 0; }
nav.navbar { padding-bottom: 3px; }
}
.upperline .navbar-brand img {
display: block;
height: 70px; /* Homepage-Fassung des Logos (752x385, MyDocs/-ArtaWeb-Web-2-0/Logo.png, Quelle Logo.pxm): Kontur ist eingebrannt, kein Filter */
}
.nav.logininformation {
display: flex;
align-items: center;
gap: 16px;
margin-right: 32px;
}
.nav.logininformation a {
display: inline-block;
}
.navbar-expand-lg .lowerline .navbar-collapse.show {
display: block;
}
.lowerline {
border-top: 1px solid color-mix(in oklab, var(--colorTitle), transparent 85%); /* Haarlinie: hier beginnt das Menue */
}
/* Pagination navigation */
nav[role=pagination] {
margin-top: 50px;
text-align: center;
}
.dropdown-menu, .dropdown-menu1 {
border-radius: var(--mvz-radius);
border: 1px solid var(--menu-rand);
margin: 0;
padding: 4px 0;
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
background-color: var(--colorA);
letter-spacing: 0;
font-weight: 400; /* Schrift des Hauptmenues (16px, 400): die Liste gehoert zum Menue, nicht unter den Fliesstext (18px) */
}
.dropdown-menu > li> a {
color: var(--colorTitle);
text-decoration: none;
padding: 10px 12px;
display: block;
letter-spacing: 0;
font-weight: 400;
}
.dropdown-menu > li > a:hover {
color: var(--colorB);
background-color: rgba(127, 127, 127, 0.12); /* neutral: trägt auf Marine wie auf Sand */
}
.has-submenu {
position: relative; /* inline-block stand hier auch: Listeneintraege mit Unterliste wurden textbreit, der Winkel flatterte */
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*
.navbar button {
margin-left: 0.5rem !important;
--bs-btn-color: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0d6efd;
--bs-btn-hover-border-color: #0d6efd;
--bs-btn-focus-shadow-rgb: 13, 110, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0d6efd;
--bs-btn-active-border-color: #0d6efd;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #0d6efd;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #0d6efd;
--bs-gradient: none;
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-width: var(--bs-border-width);
--bs-btn-border-color: transparent;
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}*/
/* Custom page footer */
.footer {
font-size: 16px;
color: #777;
padding: 20px 0;
margin: 40px 0 0;
font-weight: 300;
background-color: white;
}
.footer p {
margin: 0;
}
footer.bg-light {
background-color: transparent !important;
margin-top: 30px;
padding-top: 10px;
border-top: 1px solid black;
}
div[role="alertdialog"] ul {
margin: 0;
padding-inline-start: 0;
}
div[role="alertdialog"] ul li {
display: block;
}
div[role="alertdialog"] .messages .error {
color: #d01212;
}
div[role="alertdialog"] .messages .info {
color: #eec036;
}
div[role="alertdialog"] .messages .warning {
color: #ff9334;
}
div[role="alertdialog"] .messages .success {
color: #9fdb18;
}
.container-narrow > hr {
margin: 30px 0;
}
/*
#content {
padding-top: 20px;
}*/
div[role="alertdialog"] {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
background-color: #EEEEEE;
padding: 20px;
}
/*#content > *:not(.hero-bg) {
padding-top: 10px;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.my-5 {
padding-left: 0;
}*/
/* Breadcrumbs */
.breadcrumb-container {
background: var(--krumen);
border-bottom: 1px solid var(--krumen-rand);
position: relative;
z-index: 3;
margin-top: 0;
}
/*.breadcrumb-container + content > .hero {
margin-top: -36px;
}*/
/* Ueberall gleich (Mike, 07.10.2026, E67): leise — 13 px, fett, helles Grau aus der Bandschrift gemischt (traegt auch auf Marine),
Pfeil → als Trenner, knapp ueber und unter der Schrift. Nur der Platz unterscheidet sich: im MVZ unter der Verzeichnis-Leiste
(base-mvz.html), sonst oben (base.html). Vorher: 14 px dunkel, letztes Glied fett in der Kopfschrift, » als Trenner. */
.breadcrumb { background-color: transparent; font-size: 13px; margin: 0; padding: 2px 0 3px; letter-spacing: .01em; }
.breadcrumb :is(a, .active) { color: color-mix(in oklab, var(--krumen-text), var(--krumen) 55%); opacity: 1; font-weight: 700; text-decoration: none; }
.breadcrumb a:hover { color: var(--colorD); }
.breadcrumb > li + li:before { content: "\2192"; padding: 0 7px; color: var(--krumen-text); opacity: .45; } /* → */
/* Location detail page */
.template-location-page .intro {
margin-bottom: 0;
}
.location-opening h3 {
margin-top: 0;
}
span.day {
font-weight: bold;
}
time.location-time {
display: block;
}
.map-container {
height: 550px;
}
.location-address {
background-color: var(--grund);
padding: 10px 30px;
margin-bottom: -200px;
position: relative;
z-index: 1;
}
/* Miscellaneous helper styles */
/* No gutters */
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Bootstrap Equal height rows */
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
@media (min-width: 970px) {
.hidden-md-up {
display: none;
}
}
@media (max-width: 970px) {
.hidden-md-down {
display: none;
}
}
/* From Wagtail core */
/* Responsive image/video classes */
.rich-text img {
max-width: 100%;
height: auto;
}
.richtext-image.left{
float:left;
}
.richtext-image.right{
float:right;
}
.responsive-object {
position: relative;
}
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/************************************/
/* Login */
/************************************/
.auth #header {
width: 100%;
background: var(--colorA);
z-index: 10;
text-align: center;
}
.auth {
margin: 3rem auto;
max-width: 960px;
padding: 0 1rem;
}
.auth #content,
.auth #header {
padding: 15px 0;
}
.auth h1 {
}
.auth th {
width: 275px;
text-align: left;
}
.auth .submit-row input[type="submit"]{
background-color: var(--colorD);
border: none;
margin-top: 10px;
font-size: 22px;
}
.auth input {
padding: 8px 14px;
font-size: 16px;
width: 100%;
}
.auth table {
margin: 0 auto;
text-align: center;
width: 100%;
}
.auth table td, .auth table th {
border: none;
}
.auth td:nth-child(2) {
display: grid;
}
/*New password*/
.auth #ft-password-reset-confirm tr:nth-child(2) th:first-child {
vertical-align: baseline;
padding-top: 15px;
}
.auth span.helptext {
font-style: italic;
text-align: left;
}
.auth span.helptext ul {
list-style-type: none;
padding-inline-start: 0px;
}
/*.auth*/ ul.errorlist {
list-style-type: none;
padding-inline-start: 0px;
color: red; /*var(--colorC);*/
font-weight: 600;
}
.auth ul.errorlist {
color: var(--colorC);
}
/*.auth*/ ul.errorlist li {
display: table;
}
.auth #ft-password-reset-confirm tr:nth-child(3) th:first-child {
vertical-align: bottom;
padding-bottom: 20px;
}
.auth p.errornote {
text-align: center;
color: var(--colorC);
font-weight: 600;
}
.auth tbody {}
/************************************/
/* Colors */
/************************************/
.searchcolorholder {
float: right;
}
.colorranges {
float: left;
}
.colorranges input[type=range] {
width: 140px;
height: 20px;
border: 1px solid white;
-webkit-appearance: none;
}
.colorranges input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet,red);
border-radius: 1.3px;
border: 0.2px solid #010101;
}
.colorranges input#blackwhiterange[type=range]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, white,black);
}
.colorranges input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
}
.colorranges input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
.colorranges input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
.colorranges input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
.colorranges input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.colorranges input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.colorranges input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 20px;
width: 10px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/************************************/
/* Tabellen */
/************************************/
.block-table thead,
table thead,
table > thead {
background-color: var(--colorA) !important;
color: var(--colorTitle) !important;
}
.block-table th,
.block-table td,
table th,
table td {
padding: 5px 10px;
border: 1px solid black;
}
.table > :not(caption) > * > * /*overwrite tables.scss ...*/ {
/*background-color: var(--colorA);
color: var(--colorTitle);*/
}
.table > thead > * > * /*overwrite tables.scss ...*/ {
background-color: var(--colorA);
color: var(--colorTitle);
}
.htCenter {
text-align: center;
}
.htRight {
text-align: right;
}
.marker {
font-weight: bold;
}
.searchresult {
font-weight: bold;
color: var(--colorHighlight);
}
hr {
border-top: 1px solid #777;
}
/* no-table like formatting, see https://codered.artabana.de/mvz/gemeinschaft/32-110/ and https://codered.artabana.de/gruppen-kreise/fachgruppen/fg-it-betrieb/*/
table.function-block-kopf {
margin-bottom: 20px;
max-width: none;
}
table.function-block-kopf td {
border: 0;
padding: 0px 15px 5px 0px;
}
table.function-block-kopf td:nth-child(1) {
font-weight: bold;
text-align: right;
}
th[onclick] {
background-repeat: no-repeat;
background-position: right top;
padding-right: 25px;
background-image: url("data:image/svg+xml;utf8,");
}
th[onclick]:nth-child(1) {
background-image: url("data:image/svg+xml;utf8,"); /*↑▲*/
}
th[onclick].arrowUp {
background-image: url("data:image/svg+xml;utf8,"); /*↑▲*/
}
th[onclick].arrowDown {
background-image: url("data:image/svg+xml;utf8,"); /*↑▲*/
}
th[onclick].no-arrow {
background-image: url("data:image/svg+xml;utf8,");
}
th[onclick].noBackgroundImage {
background-image: unset;
}
table td, table th, table td * {
line-break: auto;
}
/***********************************/
/* Editelements */
/************************************/
/* Style the header */
#myHeader.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 102px;
}
table.function-block {
width: 100%;
/*table-layout: fixed;*/
}
table.function-block td, table.function-block th {
width: 15%;
padding: 6px;
border: 1px solid black;
}
table.function-block th:nth-child(2), table.function-block th:nth-child(3) { /*Region, Telefon, Gemeinschaft kleiner, name+mail größer*/
width: 27.5%;
}
table.function-block tr.oddRow {
background-color: #F0F0F0F4;
}
/***********************************/
/* Regelsatz E44 — Objekt, Fakten, Formular, Knöpfe */
/***********************************/
/* Entschieden am Musterblatt /static/website/muster/layout.html (Mike, 05.10.2026): Fassung „Vorgabe", kompakt,
Beschriftung links, Pflicht = Punkt am Label, alle Knöpfe Pillen, Marken Umriss, Reiter Unterstrich, Tabellen
Haarlinien. Kunst des Weglassens: Unterschiede über Fläche, Form und Abstand — keine Kontur ohne Bedeutung.
Ein Vokabular für Mitglied, Gemeinschaft, Region, Fachgruppe: .objekt-titel .unter .kommandos .knopf .fakten
.abschnitt .bereich .feld .wert .hilfe .abschluss. Die Regeln „.col-md-10 form p …" weiter unten tragen die
as_p-Formulare (Gemeinschaft, Region, Fachgruppe), bis auch sie umgebaut sind. */
.mvz { font-size: var(--s-text); line-height: 1.45; }
.mvz .leise { font-size: var(--s-leise); color: var(--leise); }
/* Objektkopf: Titel, leise Unterzeile, Kommandozeile — Hauptkommando gefüllt, Nebenkommandos Umriss, Löschen leise rechts */
.objekt-titel { font-size: var(--s-titel); font-weight: 700; line-height: 1.2; margin: 0; }
.objekt-titel .searchresult { color: var(--colorHighlight); }
.mvz p.unter { font-size: var(--s-leise); color: var(--leise); margin: 4px 0 14px 12px; line-height: 1.6; } /* 12 px unter dem Titel wie aller Inhalt unter einer Ueberschrift (Mike, 05.10.) */
.mvz p.unter a { font-size: var(--s-text); font-weight: 700; } /* Gemeinschaft und Region: der einzige Weg dorthin — Name in Textgroesse und fett, die Beschriftung bleibt leise (Mike, 05.10.) */
.mvz p.zugehoerigkeiten { margin: 0 0 8px calc(var(--label-spalte) + 12px); color: inherit; } /* Inhalt, keine Beschriftung: in der Wertspalte (Mike, 05.10.) */
.mvz-leiste-band + .container, .mvz-leiste-band + .breadcrumb-container + .container { padding-top: 16px; } /* Luft zwischen Orientierungsband und Inhalt (E47); CMS-Seiten mit Hero unberührt */
/* Brotkrumen im MVZ: unter der Leiste, ihre Haarlinie trennt — das Aussehen ist das allgemeine (Block „Breadcrumbs" oben). */
/* Verzeichnis-Leiste (E47, 05.10.): zweite Zeile des Brotkrumen-Bands — volle Breite, dieselbe Toenung und Haarlinie wie
.breadcrumb-container, so hoch wie die Brotkrumen. Die anderen Einstiege sind Links (rot), die aktuelle Stelle ist keiner:
grau, fett (Mike, 05.10.). Abgestuft (Mike, 07.10.): die Leiste ist noch halb Navigation — ihr Ton liegt zwischen Band und
Zweitfarbe (am Ziel die Kopffarbe, in Marine helles Blau), die Brotkrumen darunter bleiben im hellen Bandton. Anteil 75 % in
Marine und Mitte, in der zweiten Hälfte des Übergangs gleitend auf den Anteil des Ziels: 50 %, bei Sand 75 % (--ziel-anteil aus
services/farbschema.LEISTE, gesetzt von includes/farbwechsel.html; Mike, 07.10.). Zwei Mischungen, nach --t2 gemischt — linear,
also dasselbe wie ein gleitender Anteil. */
.mvz-leiste-band { --leiste-ton: color-mix(in oklab, color-mix(in oklab, var(--krumen), var(--zweit) 75%),
color-mix(in oklab, var(--krumen), var(--zweit) var(--ziel-anteil, 50%)) var(--t2));
background: var(--leiste-ton); border-bottom: 1px solid var(--leiste-linie, var(--krumen-rand)); }
.mvz-leiste { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 14px; margin: 0; padding: 6px 0; }
.mvz-leiste a { color: var(--colorD); text-decoration: none; padding: 1px 0; }
.mvz-leiste a.abgesetzt { margin-left: 18px; } /* doppelte Luft (36 statt 18) vor Suche und vor Funktionsgruppen: Werkzeug und andere Achse, keine Stufen der Hierarchie — spuerbar, nicht laut (Mike, 06.10.) */
.mvz-leiste a:hover { color: var(--colorE); text-decoration: underline; }
.mvz-leiste a[aria-current] { color: var(--leise); font-weight: 700; pointer-events: none; }
.objekt-titel + form, .objekt-titel + .kommandos { margin-top: 12px; } /* Seiten ohne Unterzeile: Luft zwischen Titel und erstem Feld */
/* .rolle[title] mit gepunkteter Unterstreichung: bis 06.10.2026 — jetzt Symbole mit Hover (E51) */ /* wie .legende-trigger: hier gibt es beim Fahren mehr (langer Name) */ /* Luft zwischen Brotkrumen und Einleitung der MVZ-Seiten (Mike, 05.10.); CMS-Seiten mit Hero unberührt */
.kommandos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 22px 12px; }
.knopf {
display: inline-block; font: inherit; font-size: var(--s-text); line-height: 1.25; padding: 5px 14px 7px; /* gemessen mit echter Lato (07.10.): Versalmitte 16,8 bei Knopfmitte 17 — 05.10. war 7/5, ausgeglichen für die Ersatzschrift, die vor E50 statt Lato kam (Mike: „jetzt zu tief") */
border-radius: 999px; border: 1px solid var(--colorD); background: transparent; color: var(--colorD);
cursor: pointer; white-space: nowrap;
}
.mvz a.knopf, .mvz a.knopf:hover { text-decoration: none; }
.knopf:hover { background: var(--colorDlight); color: var(--colorE); border-color: var(--colorE); }
.knopf.haupt { background: var(--colorD); color: #fff; }
.knopf.haupt:hover { background: var(--colorE); color: #fff; }
.knopf.leise { color: var(--leise); border-color: var(--leise); } /* graue Umriss-Pille in gleicher Groesse, hinter den anderen Knoepfen — nicht rechts aussen, nicht kleiner (Mike, 05.10.) */
.knopf.leise:hover { background: var(--grund); color: var(--colorE); border-color: var(--leise); }
.knopf.warnung, .knopf.warnung:hover { background: var(--colorHighlight); border-color: var(--colorHighlight); color: #fff; }
.knopf:disabled, .knopf:disabled:hover { background: #e6e6e6; color: #8a8a8a; border-color: transparent; cursor: default; }
/* Fakten: Beschriftung leise links, Wert rechts — eine Spalte wie im Formular */
.fakten { display: grid; grid-template-columns: var(--label-spalte) 1fr; column-gap: 12px; row-gap: var(--zeile); margin: 0 0 8px; }
.fakten dt { font-size: var(--s-leise); font-weight: 300; color: var(--beschriftung-links); padding: 2px 0 0 12px; } /* 12 px unter der Abschnitts-Ueberschrift (05.10.); Lato 300 in Grau: die Strichstaerke trennt Beschriftung und Wert (Musterblatt beschriftung.html, Fassung C, 07.10.) */
.fakten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fakten dt.nebeninfo, .fakten dd.nebeninfo { font-size: 12px; color: var(--leise); opacity: 0.8; } /* Randinformation (Koordinaten): kleiner und leiser als jede Tatsache (Mike, 06.10.) */
.fakten dd .searchresult, .fakten dd .marker { color: var(--colorHighlight); }
/* Abschnitte: Überschrift und Abstand, kein Kasten — als h3 im Fluss oder als fieldset.bereich mit legend */
.abschnitt { font-size: var(--s-abschnitt); font-weight: 700; line-height: 1.3; margin: 18px 0 8px; }
.abschnitt:first-child, .tab-pane > .abschnitt:first-child { margin-top: 0; }
fieldset.bereich { border: 0; margin: 0 0 18px; padding: 0 0 0 12px; min-width: 0; } /* Inhalt 12 px unter der Ueberschrift eingerueckt — wie Fakten und Formular (Mike, 05.10.) */
fieldset.bereich > legend { float: none; width: auto; padding: 0; margin: 0 0 6px -12px; font-size: var(--s-abschnitt); font-weight: 700; line-height: 1.3; }
fieldset.bereich > legend label { margin: 0; font: inherit; }
.mvz .hilfe { display: block; font-size: var(--s-leise); color: var(--leise); margin: 0 0 8px; font-style: normal; }
.mvz .hilfe a { color: var(--colorD); }
.mvz .hilfe.fehler { color: var(--colorHighlight); }
/* Formularzeile: Label links (leise), Feld als Fläche ohne Rahmen; zwei feste Breiten (kurz 12, mittel 20 Zeichen), sonst voll */
.feld { display: grid; grid-template-columns: var(--label-spalte) 1fr; column-gap: 12px; align-items: start; margin: 0 0 var(--zeile); }
.feld > label { font-size: var(--s-leise); font-weight: 300; color: var(--beschriftung-links); line-height: 1.35; margin: 0; padding: calc((var(--feld-h) - 1.35em) / 2) 0 0 12px; width: auto; text-align: left; } /* erste Zeile mittig zum Feld, weitere Zeilen eng; eingerueckt wie die Fakten */
.feld.pflichtfeld > label::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--colorD); margin-left: 6px; vertical-align: middle; }
.feld .wert { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: start; min-width: 0; }
.feld :is(input[type=text], input[type=date], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=password], select, textarea) {
box-sizing: border-box; font: inherit; color: inherit; width: 100%; max-width: none; margin: 0;
min-height: var(--feld-h); padding: 5px 10px; line-height: 1.35;
background: var(--grund); border: 1px solid transparent; border-radius: var(--mvz-radius);
-webkit-appearance: none; appearance: none;
}
.feld .wert .kurz { width: 12em; }
.feld .wert .mittel { width: 20em; }
.feld .wert select { /* .feld .wert select statt .feld select: die :is()-Feldregel oben wiegt (0,2,1) und ueberdeckte sonst den Pfeil (Mike, 05.10.) */
padding-right: 32px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23444' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 10px;
}
.feld textarea { min-height: calc(var(--feld-h) * 1.6); resize: vertical; } /* 1,6 Zeilen: der Rest sagt „hier geht mehr"; wächst am Inhalt (main.js) */
.feld :is(input, select, textarea):focus { outline: none; box-shadow: 0 0 0 2px rgba(179, 54, 43, 0.3); box-shadow: 0 0 0 2px color-mix(in oklab, var(--colorD), transparent 70%); }
.mvz .feld input[type=checkbox] { width: 18px; height: 18px; margin: calc((var(--feld-h) - 18px) / 2) 0 0; accent-color: var(--colorD); vertical-align: top; }
.feld .wert .hilfe { flex-basis: 100%; margin: -2px 0 0; }
.abschluss { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin: 24px 0 0; }
.feld :is(input, select, textarea):disabled { color: var(--leise); opacity: .7; cursor: default; } /* sichtbar, aber nicht auf dieser Stufe aenderbar (z. B. AD-Mitglied, Kuerzel) */
.formular h3.abschnitt + .flaglist fieldset.bereich > legend { font-size: var(--s-text); } /* Listenfeld unter einer eigenen Ueberschrift: seine Bereiche eine Stufe leiser */
/* Liste (Station 2, 05.10.): Listenkopf mit Zahl und Sammlungs-Kommandos, Tabelle mit Haarlinien, Spaltenkopf leise.
Ansprechpartner-Zeile gefuellt (das eine Andere), die eigene Zeile fett (.marker). Sortierpfeile: th[onclick] oben. */
.listenkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; margin: 18px 0 8px; }
.listenkopf .abschnitt { margin: 0; }
.listenkopf > .knopf:first-of-type { margin-left: auto; } /* die Sammlungs-Kommandos stehen rechts, egal welcher der erste ist */
table.liste { width: calc(100% - 12px); border-collapse: collapse; margin: 0 0 16px 12px; } /* 12 px unter der Listen-Ueberschrift eingerueckt wie aller Abschnitts-Inhalt (Mike, 05.10.) */
.listenkopf > .legende { margin: 0 0 0 auto; } /* in der Kopfzeile ganz rechts, auf Hoehe der Ueberschrift — keine eigene Zeile (Mike, 07.10.); nur so breit wie ihr Text, nur dort klappt sie auf */
.listenkopf > .knopf ~ .legende { margin-left: 1.5em; } /* hinter den Sammlungs-Kommandos: die schieben schon nach rechts */
.listenkopf > .legende .legende-liste { left: auto; right: 0; } /* die Liste oeffnet nach links */
.liste th { text-align: left; font-size: var(--s-leise); font-weight: 400; color: var(--leise); padding: 6px 10px 6px 0; border: 0; border-bottom: 1px solid var(--menu-rand); background-color: transparent; } /* kein background-Kurzschreib: die Sortierpfeile (th[onclick], Bild + Position) bleiben */
.liste th[onclick] { padding-right: 25px; cursor: pointer; }
.liste td { padding: 7px 10px 7px 0; vertical-align: top; border: 0; border-bottom: 1px solid var(--menu-rand); }
.liste tr:last-child td { border-bottom: 0; }
.liste td.leise { font-size: var(--s-leise); color: var(--leise); }
.liste td.symbol { text-align: center; }
.liste tr.ansprechpartner td { background: var(--colorDlight); }
.liste tr.marker td { font-weight: 700; }
.liste .knopf { font-size: var(--s-leise); padding: 2px 10px 4px; } /* wie .knopf: gemessen mit echter Lato */ /* Kommandos in Zeilen: kleinere Pillen */
.liste td.symbol .knopf { white-space: nowrap; }
/***********************************/
/* MVZ-Memberedit */
/***********************************/
.col-md-10 form p label,
.container.group form label {
text-align: right;
padding-right: 1%;
width: 19%;
vertical-align: top;
padding-top: 5px; /* = Rahmen + Innenabstand der Felder: Label-Text auf Höhe des Feldtexts */
}
.container.group form label {
float: left;
padding-right: 4%;
}
/* ALT (bis E44): Absatz-Formulare „form p" — kein MVZ-Template nutzt sie mehr (05.10.2026); sie tragen noch Registrierung
(templates/registration) und CMS-Formularseiten. Fallen, wenn auch die auf .feld stehen.
Ein Regelsatz für alle Eingabefelder (03.10.2026): gleicher Rahmen, gleicher Radius,
Höhe folgt der Schrift (1,5em Zeile + 2×4px Innenabstand + 2×1px Rahmen).
Pflicht = Füllfarbe + Stern (unten). Mehrzeilig = 1,5 Zeilen hoch + ⇓, wächst mit dem Inhalt (main.js). */
.col-md-10 form p :is(input[type=text], input[type=date], input[type=email], input[type=url],
input[type=number], input[type=password], select, textarea) {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
width: 80%;
max-width: none;
min-height: calc(1.5em + 10px);
padding: 4px 8px;
line-height: 1.5;
color: inherit;
background-color: white;
border: 1px solid var(--mvz-border);
border-radius: var(--mvz-radius);
-webkit-appearance: none;
appearance: none;
}
.col-md-10 form p :is(input, select, textarea):focus {
outline: none;
border-color: var(--colorD);
box-shadow: 0 0 0 2px rgba(73, 143, 204, 0.25);
}
.col-md-10 form p input[type=date] {
width: auto;
min-width: 11em;
}
.col-md-10 form p select {
padding-right: 32px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23444' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px 10px;
}
/*.col-md-10 form p input#id_postalCode {
width: 55%;
}*/
.col-md-10 form p textarea {
resize: vertical;
height: calc(2.25em + 10px); /* 1,5 Zeilen (statt rows=2 des Widgets): der freie Rest sagt „hier geht mehr" */
min-height: calc(2.25em + 10px);
padding-right: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-position: right bottom;
background-repeat: no-repeat;
}
.col-md-10 form p {
display: block; /*flex;*/
margin-bottom: 15px;
}
.col-md-11 {
width: 100%;
}
/* Listenfeld Rollen / Mailing-Funktionen (03.10.2026, E44 05.10.): Bereiche als Abschnitte (fieldset.bereich, oben), drei Zustaende —
aenderbar, gesperrt (grau), fremd (Abschnitt „Unbekannte Eintraege"). Markup: ldap_mvz/templates/widgets/flaglist.html. */
.flaglist { display: grid; gap: 4px; margin-bottom: 8px; }
.col-md-10 form .flaglist { margin-left: calc(19% + 5px); } /* in der Feldspalte der as_p-Formulare (Gemeinschaft, Region, Fachgruppe): ein kann kein fieldset tragen, der Browser schliesst es vor dem Widget */
.col-md-10 form .tab-pane .flaglist, .col-md-10 form.formular .flaglist { margin-left: 0; } /* in den Tabs des Mitglieds und in .feld-Formularen (E44) gibt es keine 19%-Spalte */ /* in den Tabs des Mitglieds gibt es keine Label-Spalte (Spezifitaet wie die Regel darueber) */
.flaglist .flag {
display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px;
min-height: 28px; margin: 0; font-weight: normal;
}
.flaglist .flag input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--colorD); }
.flaglist .flag.gesperrt { opacity: 0.6; }
.flaglist .flag-extra, .flaglist .flag-entfernen { font-size: var(--s-leise); color: var(--leise); font-weight: normal; margin: 0; }
/* Formular in Tabs (Mitglied): Karteikarten (Mike, 07.10.2026, Musterblatt krumen.html R9) — der gewählte Reiter in der Kopffarbe
auf einer breiten Linie in der Kopffarbe, die anderen im halben Feldton; oben stark gerundet, flach (4 px über und unter der
Schrift). Fehlerzahl am Reiter, Fehlerliste oben. Davor: Unterstrich (E44, 05.10.); davor Karteikarten-Kaesten (03.10.). */
ul.formular-tabs {
display: flex; flex-wrap: wrap; gap: 0 4px;
margin: 0 0 18px; padding: 0; list-style: none;
border-bottom: 3px solid var(--zweit);
}
.formular-tabs > li { float: none; width: auto; padding: 0; margin-bottom: -1px; }
.formular-tabs .nav-link {
font: inherit; font-size: var(--s-text); color: var(--leise);
padding: 4px 18px; margin: 0 0 1px; background: color-mix(in oklab, var(--grund), #fff 50%);
border: 0; border-radius: 16px 16px 0 0; opacity: 1;
}
.formular-tabs .nav-link:hover { color: #2B2522; background: color-mix(in oklab, var(--zweit), #fff 60%); }
.formular-tabs .nav-link.active, .formular-tabs .nav-link.active:hover {
color: #2B2522; font-weight: 700; background: var(--zweit); box-shadow: none; /* Zweitfarbe: am Ziel die Kopffarbe, in Marine helles Blau */
}
.tab-fehler {
display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
border-radius: 10px; background: var(--colorHighlight, #b23a2f); color: #fff; font-size: 13px; font-weight: 700; line-height: 20px;
}
.formular-fehler { margin: 0 0 16px; padding: 8px 16px; border: 1px solid var(--colorHighlight, #b23a2f); border-radius: var(--mvz-radius); }
.formular-fehler p { margin: 0 0 4px; font-weight: 700; }
.formular-fehler ul { margin: 0; padding-left: 20px; }
.koordinaten { margin: 8px 0 16px calc(19% + 5px); font-size: 13px; opacity: 0.7; } /* berechnet, nicht editierbar: Fussnote statt Feld, in der Feldspalte (as_p-Formulare) */
.mvz p.koordinaten.feldspalte { margin: 2px 0 0 calc(var(--label-spalte) + 12px); font-size: var(--s-leise); color: var(--leise); opacity: 1; } /* im Formular nach E44: unter der Feldspalte */
input[type=submit] {
background-color: var(--colorD);
color: white;
width: 100%;
border: none;
border-radius: var(--mvz-radius);
padding: 8px;
}
/* Abbrechen | Speichern: 40/60 mit 8px Luft dazwischen, als Floats — vorher inline-block 40 + 59 %, und das Leerzeichen
dazwischen warf den zweiten Knopf schmal in die naechste Zeile, ohne Abstand */
.ansprechpartner {
background-color: var(--colorDlight);
}
h4.ansprechpartner {
line-height: 2;
width: 175px;
}
/* Pflichtfeld: Füllfarbe + Stern, Rahmen wie alle (Selektor so spezifisch wie der Regelsatz oben) */
input:required,
textarea:required,
.col-md-10 form p :is(input, textarea):required {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right top;
background-color: var(--colorDlight);
}
textarea:required,
.col-md-10 form p textarea:required {
background-image: url("data:image/svg+xml;utf8,");
background-position: right bottom;
background-color: var(--colorDlight);
}
.col-md-10 form input[type=checkbox] {
width: 18px;
height: 18px;
margin: 0 8px 0 0;
vertical-align: -4px;
accent-color: var(--colorD);
}
.col-md-10 form p > input[type=checkbox] {
vertical-align: top;
margin-top: 9px; /* Mitte des Kästchens auf Mitte des Label-Texts */
}
span.helptext, span.preHelptext {
margin-left: calc(19% + 5px); /* 19 % Label + das Leerzeichen zwischen Label und Feld: bündig mit dem Feld */
line-height: normal;
display: block;
font-size: 17px;
}
span.helptext {
font-style: italic;
}
.col-md-10.mvz a:not(.knopf) { /* Knoepfe (E44) sind Pillen, keine Textlinks */
text-decoration: underline;
}
.col-md-10.mvz {
margin-top: 10px;
}
.mvz.objekt { margin-top: 0; } /* Objektseiten (E44): der Abstand zu den Brotkrumen kommt allein vom ersten Container (24 px) — gemessen 05.10.: Mitglied 34, Gemeinschaft 24 */
.col-md-7 {
width: 90%;
}
/* Location list page */
.location-list-item {
text-align: center;
margin-bottom: 30px;
}
.location-list-title {
line-height: 270px;
height: 270px;
background-color: #eb7400;
}
.location-list-title img {
background-color: var(--grund);
height: 270px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.location-list-title:hover img {
opacity: 0.3;
}
.location-list-title span.title {
color: white;
display: inline-block;
font-weight: 300;
position: relative;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}
.location-list-title:hover span.title {
text-shadow: none;
}
.location-list-item address {
font-weight: 300;
font-size: 1.4em;
padding: 10px 40px;
}
/* Blog list view */
.blog-tags>li {
border-right: 1px solid rgba(0,0,0,0.1);
font-size: 0.9em;
margin-left: -6px;
padding: 4px 18px;
text-transform: uppercase;
}
.blog-tags>li:first-child {
margin-left: 0;
border-left: 1px solid rgba(0,0,0,0.1);
}
.blog-tags>li:hover {
background-color: rgba(0,0,0,0.1);
}
.blog-list li {
list-style: none;
}
@media (min-width: 1025px) {
.blog-list li:first-of-type, .blogpage-listing li:first-of-type,
.blog-list li:nth-child(6), .blogpage-listing li:nth-child(6),
.blog-list li:nth-child(7), .blogpage-listing li:nth-child(7),
.blog-list li:nth-child(12), .blogpage-listing li:nth-child(12) {
width: 50%;
}
}
.blog-list-item {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.blog-list-item a {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.blog-list-item:hover img {
opacity: 0.3;
}
.blog-list-item .image {
overflow: hidden;
background-color: #eb7400;
flex: 1 0 auto;
}
.blog-list-item .image img {
min-height: 510px;
width: auto;
min-width: 100%;
}
.blog-list-item .text {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 23%,rgba(0,0,0,1) 50%);
margin-top: -150px;
padding: 20px;
position: relative;
z-index: 1;
}
.blog-list-item .text h2 {
color: #fff;
font-weight: 200;
margin-top: 0;
}
.blog-list-item .text p {
color: #e3e3e3;
font-size: 0.8em;
margin-bottom: 0;
}
.blog-list-item .footer {
background-color: #333;
color: #fff;
margin-top: 0;
padding: 20px;
position: relative;
z-index: 1;
}
/* used to style tags on blog */
span.outline {
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.1);
font-size: 0.8em;
padding: 3px 6px;
text-transform: uppercase;
}
/* Blog detail page */
.blog-meta {
margin-top: -40px;
margin-bottom: 20px;
}
.blog-avatar {
border-radius: 100%;
display: inline;
width: unset;
}
.blog-avatars {
margin-bottom: 20px;
}
.blog-avatars .author {
display: inline-block;
margin-right: 30px;
}
/* Bread styles */
/* Bread listview */
.bread-list-item {
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px;
margin: 12px;
overflow: hidden;
}
.bread-list-item h2 {
font-weight: 300;
}
/* overwrites from @media selectors in navbar or containers.scss... */
.container-md, .container-sm, .container, .container-fluid, .crx-grid {
max-width: unset !important;
margin-left: 3%;
margin-right: 3%;
width: 94%;
}
.bread-list-item .image {
background-color: #eb7400;
margin: 0;
max-width: 180px;
max-height: 180px;
min-width: 180px;
min-height: 180px;
padding: 0;
}
.bread-list-item .image:hover img {
opacity: 0.3;
}
.bread-list-item img {
margin: 0;
width: auto;
}
.bread-list-item ul {
padding-left: 2px;
}
.bread-list-item li {
list-style: none;
}
.bread-list-item li span {
color: #777;
display: inline-block;
font-weight: 600;
width: 70px;
}
/* Bread detail page */
.bread-detail .introduction {
color: #777;
font-size: 1.4em;
margin-top: 40px;
}
.bread-detail figure {
margin: 35px auto 20px auto;
overflow: hidden;
}
.bread-detail figure img {
width: auto;
}
.bread-detail ul.bread-meta {
list-style: none;
padding-left: 0;
}
.bread-detail ul.bread-meta li ul {
padding-left: 0;
}
.bread-detail ul.bread-meta li ul li {
border-bottom: 1px solid #ccc;
list-style: none;
max-width: 450px;
}
/* Forms */
/* Form detail page */
.form-page input, .form-page textarea, .form-page select {
display: block;
min-width: 450px;
max-width: 450px;
}
.form-page li input[type=checkbox], .form-page input[type=radio] {
display: inline-block;
margin-right: 10px;
}
.form-page .fieldWrapper ul,
.form-page .fieldWrapper li {
list-style: none;
padding: 0;
margin: 0;
}
.form-page .required {
color: red;
}
.form-page .fieldWrapper {
margin-bottom: 30px;
}
.form-page .help {
color: #999;
font-size: 0.8em;
margin-top: 10px;
max-width: 350px;
}
/* Form thank you page */
.form-page-thanks h1 {
margin-bottom: 30px;
}
.col-md-10 form :is(input, select, textarea):disabled {
color: #777;
background-color: #f2f2f2;
border-color: #cfcfcf;
}
/* Generic title image header include */
.base-header img {
height: auto;
margin-top: 20px;
max-width: 100%;
width: auto;
}
@media (max-width: 970px) {
.base-header img {
width: 100%;
}
}
/* Homepage */
.homepage .hero {
margin: 0;
padding: 20px 0 3px 0;
}
.homepage .hero h1 {
font-size: 2.2em;
text-transform: uppercase;
}
.homepage .hero h1:after {
background-color: rgba(255,255,255, 0.7);
content: "";
display: block;
height: 5px;
margin: 20px auto;
width: 250px;
}
.homepage .home-hero {
margin-bottom: 0;
padding-bottom: 60px;
text-align: center;
}
.homepage .home-hero .lead {
color: #ddd;
font-size: 1.6em;
margin: 40px auto;
}
.homepage .home-hero .hero-cta-link {
color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
padding: 10px 34px 10px 10px;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
transition-duration: 0.1s;
}
.homepage .home-hero .hero-cta-link:before {
content: "\f18e";
font-family: FontAwesome;
font-size: 1.2em;
font-weight: 200;
opacity: 0.8;
padding: 0 1px;
position: absolute;
right: 0.2em;
top: 0.2em;
transform: translateZ(0);
transition-duration: 0.1s;
transition-property: transform;
transition-timing-function: ease-out;
}
.homepage .home-hero .hero-cta-link:hover:before,
.homepage .home-hero .hero-cta-link:focus:before,
.homepage .home-hero .hero-cta-link:active:before {
transform: translateX(4px);
}
.homepage .streamfield {
background: linear-gradient(45deg, rgba(170,170,170,1) 0%,rgba(238,238,238,1) 44%);
}
.homepage .streamfield-column {
padding: 60px;
margin: 0 auto;
float: none;
}
.homepage .streamfield-column h1,
.homepage .streamfield-column h2,
.homepage .streamfield-column h3,
.homepage .streamfield-column h4,
.homepage .streamfield-column h5 {
text-align: center;
}
.homepage .promo-row {
padding: 40px 0 40px 0;
}
.homepage .promo {
background: linear-gradient(190deg, rgba(0,4,8,1) 0%,rgba(55,28,25,1) 100%);
border-radius: 0px 0px 10px 10px;
color: #fff;
height: 100%;
margin-bottom: 20px;
margin-top: -40px;
padding: 40px 60px;
text-align: center;
}
.homepage .promo h1,
.homepage .promo h2,
.homepage .promo h3,
.homepage .promo h4 {
color: #eb7400;
font-weight: 200;
}
.homepage .promo p,
.homepage .promo li {
color: #ccc;
line-height: 1.6em;
}
.homepage .promo a {
color: #fff;
}
@media (max-width: 970px) {
.homepage .promo {
padding: 30px 40px;
}
.homepage .promo figure img {
max-width: 120px;
height: auto;
}
.homepage .promo p {
color: #fff;
font-size: 1em;
}
}
@media (max-width: 766px) {
.homepage .promo {
margin-left: 15px;
margin-right: 15px;
}
}
.homepage .promo figure img {
border-radius: 100%;
margin: auto;
width: auto;
}
.homepage .feature-1 h2 {
margin-top: 0;
margin-bottom: 20px;
}
.homepage .feature-1 .featured-children li {
border: 1px solid #ccc;
border-radius: 3px;
list-style: none;
margin-bottom: 10px;
}
.homepage .feature-1 .featured-children li figure {
width: 100%;
overflow: hidden;
margin: 0;
}
.homepage .feature-1 .featured-children li img {
width: auto;
}
.homepage .feature-1 .featured-children li h3 {
margin-top: 40px;
font-weight: 300;
font-size: 1.4em;
}
.homepage .feature-2 {
padding: 40px 0 20px;
}
.homepage .feature-2 .feature-2-row {
display: flex;
flex-wrap: wrap;
}
.homepage .feature-2 h2,
.homepage .feature-3 h2 {
text-align: center;
margin: 20px;
}
.homepage .feature-2 .feature-2-item {
display: flex;
flex-direction: column;
margin: 0 auto 20px;
}
.homepage .feature-2 .featured-children li {
list-style: none;
}
.homepage .feature-2 .feature-2-item figure {
margin-bottom: 0;
}
.homepage .feature-2 .feature-2-item img {
min-height: 210px;
}
.homepage .feature-2 .feature-2-item .feature-2-text {
background-color: #dfdfdf;
border-radius: 0 0 10px 10px;
padding: 0 20px;
flex: 1;
}
.homepage .feature-2 figure,
.homepage .feature-3 figure {
background-color: #eb7400;
margin: 0;
}
@media (max-width: 991.98px) {
.homepage .feature-2 .feature-2-row {
display: inline-block;
}
}
.homepage .feature-3 .featured-children li {
list-style: none;
}
.homepage .feature-3 h3 {
color: #fff;
font-weight: 300;
font-size: 1.8em;
margin-bottom: 135px;
margin-top: -145px;
position: relative;
text-align: center;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
z-index: 1;
}
.homepage .feature-2 li:hover img,
.homepage .feature-3 li:hover img {
opacity: 0.3;
}
.header,
.footer {
padding-right: 0;
padding-left: 0;
}
ul.dropdown-menu {
background-color: var(--colorA);
}
option:disabled {
color: lightgrey;
}
/* Legende der Rollen-Symbole (03.10.2026): leiser Hinweis, Liste beim Fahren oder Fokus (Touch: Tippen = Fokus) */
.legende { position: relative; display: inline-block; margin: 0 0 8px; font-size: 14px; }
.legende-trigger { cursor: help; opacity: 0.8; text-decoration: underline dotted; text-underline-offset: 4px; }
.legende-trigger::after { content: " ⓘ"; }
.legende-liste {
display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 30;
min-width: 320px; padding: 8px 14px;
background: #fff; color: #222; border: 1px solid var(--menu-rand); border-radius: var(--mvz-radius);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
columns: 2; column-gap: 24px;
}
.legende:hover .legende-liste, .legende:focus-within .legende-liste { display: block; }
/* Rollen-Symbole (E51, 06.10.2026) — Sprite includes/symbole.svg. Die Ebene trägt Füllung (AD gefüllt), Strich, Größe
und Schriftgewicht: Gemeinschaft dünn (300), Region fett (700), AD e. V. extrafett (900) — darum liegt Lato jetzt auf
dem Server (E50). In Aufzählungen nur das Symbol; die Worte stehen in der Legende und im Hover. */
.rolle { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; margin-right: .9em; vertical-align: middle; }
.rolle .sym { width: 1.4em; height: 1.4em; fill: currentColor; overflow: visible; flex: none; }
.rolle .kz { letter-spacing: .03em; }
/* Linienstärke in Bildschirmpixeln, unabhängig von der Größe (vector-effect im Sprite): --strich für Linien-Sätze
(Tabler, Basil), --kontur als zusätzliche Kontur für Flächen-Sätze (Bootstrap, Ant Design, F7, Majesticons). */
.rolle { --strich: 1.8px; --kontur: 0px; }
.rolle.lv-lo { font-weight: 300; }
.rolle.lv-re { font-weight: 700; --strich: 2.3px; --kontur: 0.4px; } .rolle.lv-re .sym { width: 1.75em; height: 1.75em; }
.rolle.lv-bund { font-weight: 900; --strich: 2.8px; --kontur: 0.7px; } .rolle.lv-bund .sym { width: 1.85em; height: 1.85em; }
.rolle.gk .sym, .rolle.mail .sym { width: 1.6em; height: 1.6em; } .rolle.gk, .rolle.mail { --strich: 2px; --kontur: 0.2px; }
.rolle.gk .kz { font-weight: 400; }
.rolle.mail { color: var(--leise); } .rolle.mail .kz { color: var(--neu-text); font-weight: 400; margin-right: .45em; }
.liste td .rolle { line-height: 1.9; }
/* Gruppierung der Aufzählung (Mike, 06.10.): jeder berührte Bereich ist ein unteilbarer Block (.rblock — nicht .bereich,
das ist der Formular-Abschnitt fieldset.bereich; Kollision am 06.10. zerlegte den PV-Tab) — Label (AD · Reg · Lo · GK ·
Verw, Mail ohne Label) und seine Symbole bleiben zusammen; mehrere Bereiche stehen nebeneinander, beim Umbruch wandert
immer ein ganzer Bereich in die nächste Zeile. Keine Trenner. */
.rblock { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; margin: 0 1.1em .15em 0; line-height: 1.6; }
.rblock .bl { flex: none; font-size: .78em; font-weight: 400; letter-spacing: .02em; color: var(--leise); margin-right: .45em; }
.rblock .bl:empty { display: none; }
.rblock .rolle { margin-right: .35em; }
.rblock .rolle:last-child { margin-right: 0; }
.rblock.b-ml .bl, .rblock.b-gk .bl { color: var(--leise); margin-right: .7em; } /* Brief / Gruppen-Symbol als Beschriftung, etwas weiter weg; Kürzel enger (Mike, 06.10.) */
.rblock.b-ml .rolle.mail { gap: .4em; }
.rblock.b-gk .bl .sym { width: 1.6em; height: 1.6em; fill: currentColor; overflow: visible; --strich: 2px; --kontur: .2px; }
.rblock.b-gk .rolle.gk { margin-right: 0; }
.rblock.b-ml .bl .sym { width: 1.5em; height: 1.5em; fill: currentColor; overflow: visible; --strich: 2px; --kontur: .2px; }
.rblock.b-ml .rolle.mail .kz { margin: 0; }
/* In Listen hat der Text der Symbolreihe (Gruppennamen, Mail-Kürzel, Orga/FdR) die leise Größe wie Telefon und sichtbar —
nicht größer als der Rest der Zeile (Mike, 06.10.). Die Symbole behalten ihre Ebenen-Größe. */
.liste .rblock .kz { font-size: var(--s-leise); }
/* Eigener Hover statt Browser-Tooltip (Mike, 06.10.: „erscheint spät, zu klein"): sofort, 15 px. Ein schwebendes Element am
Fenster (main.js, data-tip), nie im Tabellenfluss — ein Pseudo-Element hatte die Tabelle verbreitert und eine Scrollleiste erzeugt. */
[data-tip] { cursor: help; }
.tip {
display: none; position: fixed; z-index: 60; pointer-events: none; max-width: min(40em, 90vw);
font: 400 15px/1.3 'Lato', sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap;
color: var(--neu-text); background: #fff; border: 1px solid var(--menu-rand); border-radius: var(--mvz-radius);
padding: 5px 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.zugehoerigkeiten { margin: 0 0 0 12px; line-height: 2.2; }
/* Legende in Lesefolge (Mike, 06.10.): erst die Dreigliederung AD · Region · Lokal, dann die Begleiter Verwaltung · Gruppen ·
Mail — so liest man die 3er-Ansicht, Zeile für Zeile von links nach rechts, und so bleibt die Folge in jeder Ansicht:
.sp3 zwei Zeilen; feste Platzierung nach Ebene (data-ebene) und Rang (data-art) — fehlt Mail-Empfang (ohne das Recht,
abonnierte Listen sind privat), bleibt seine Zelle leer
.sp2 dieselbe Folge, zwei je Zeile ohne Klasse dieselbe Folge untereinander (Handy, ohne JS)
main.js wählt die größte Ansicht, die ins Fenster passt, und setzt die Breite; jede Zeile ist eine Rasterlinie.
Verworfen: CSS-columns, freie Schnitte, gedrehte Matrix (riss die Dreigliederung auseinander). */
.legende-liste.raster { columns: auto; min-width: 0; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 18px; }
.legende-liste .lg-raster > * + * { margin-top: 14px; }
.legende-liste .lg-stapel > .lg + .lg { margin-top: 14px; } /* PV-Block unter „Gruppen und Kreise", eine Rasterzelle (Mike, 07.10.) */
.legende-liste.messen .lg-raster > * { width: max-content; }
.legende-liste.sp3 .lg-raster, .legende-liste.sp2 .lg-raster { display: grid; gap: 14px 32px; align-items: start; }
.legende-liste.sp3 .lg-raster > * + *, .legende-liste.sp2 .lg-raster > * + * { margin-top: 0; }
.legende-liste.sp3 .lg-raster { grid-template-columns: repeat(3, max-content); }
.legende-liste.sp3 [data-ebene="ad"] { grid-column: 1; } .legende-liste.sp3 [data-ebene="re"] { grid-column: 2; } .legende-liste.sp3 [data-ebene="lo"] { grid-column: 3; }
.legende-liste.sp3 [data-art="haupt"] { grid-row: 1; } .legende-liste.sp3 [data-art="beg"] { grid-row: 2; }
.legende-liste.sp2 .lg-raster { grid-template-columns: repeat(2, max-content); }
/* Weg vom Link zur Liste (Mike, 06.10.: „wenn ich langsam bin, verschwindet die Legende"). Die Brücke sitzt am Link, nicht an der
Liste — deren overflow-y (main.js) schneidet alles über ihrem Rand ab. Für den langsamen oder schrägen Weg hält main.js die
Liste nach dem Verlassen noch einen Augenblick offen (.legende.offen). */
.legende::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.legende.offen .legende-liste { display: block; }
.legende-liste h4 { margin: 0 0 4px; font-size: 14px; font-weight: 400; color: var(--leise); border-bottom: 1px solid var(--menu-rand); padding-bottom: 2px; white-space: nowrap; }
.legende-liste h4 .lx { font-size: 12px; margin-left: 4px; }
.legende-liste .li { display: flex; align-items: center; gap: 8px; line-height: 1.9; }
.legende-liste .li .rolle { margin-right: 0; min-width: 2.6em; justify-content: center; }
.legende-liste .li .ln { white-space: nowrap; }
.legende-liste .li.lv-lo .ln { font-weight: 300; } .legende-liste .li.lv-re .ln { font-weight: 700; } .legende-liste .li.lv-bund .ln { font-weight: 900; }
.legende-liste .li .lx { color: var(--leise); font-size: 12px; margin-left: 2px; }
.legende-liste .li.lk { padding-left: 2.9em; line-height: 1.6; }
.legende-liste .li .kk { display: inline-block; min-width: 2.4em; font-weight: 700; }
div[role="contentinfo"] .col-md-10 {
width: 100%;
margin-left: 0;
}
/* !!!!!
this is where navbar toggles the burger menu (mobile / portrait menu). */
@media (min-width: 992px) {
.bread-list-item {
width: 47%;
}
.navbar-expand-lg .lowerline .navbar-collapse {
}
/*.has-submenu:hover>.dropdown-menu, ul.dropdown-menu>li:hover>ul.dropdown-menu {
display: none !important;
}*/
}
/* Menuezeile (breites Layout, Bootstrap lg = 992px): hier steht nur, WO die Listen liegen — nicht, was sie oeffnet.
Genau EINE Schwelle, keine Orientation — sonst gelten beide Bloecke zugleich
(Bug 02.10.2026: hochkantiges Fenster bekam Mobil- und Desktop-Regeln). */
@media (min-width: 992px) {
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
background-color: transparent;
color: var(--colorB);
}
.nav-pills>li.has-submenu { display: flex; align-items: center; } /* Link | Pfeil in einer Zeile (Pfeil nur ohne Hover sichtbar) */
.nav-pills>li.has-submenu>.dropdown-menu,
ul.dropdown-menu>li>ul.dropdown-menu {
position: absolute;
z-index: 1000;
min-width: 160px;
width: max-content; /* Breite aus dem Text, nicht aus einer Konstante */
max-width: 420px;
padding: 0;
margin: 0; /* direkt am Punkt, ueber der Dachkante: die Liste gehoert sichtbar zu ihm (Mike, 03.10.) */
font-size: 16px;
text-align: left;
list-style: none;
}
.nav-pills>li.has-submenu>.dropdown-menu { top: 100%; left: 0; }
ul.dropdown-menu>li>ul.dropdown-menu {
left: 100%; /* buendig an der Elternliste — vorher right: -251px zu einem textbreiten li: Spalt und Ueberlappung */
top: -1px; /* Rand der Elternliste (ihr Polster ist hier 0): erster Eintrag auf Hoehe des gefahrenen */
}
.dropdown-menu > li> a:hover {
background-color: transparent;
color: var(--colorB);
}
}
/* Hover — Ergaenzung fuer Geraete mit Maus in der Menuezeile: der Pfeil verschwindet, Fahren oeffnet, tiefere Stufen als
Flyout, Eintraege mit Unterliste tragen rechts einen Winkel. Ein iPad ohne Trackpad meldet (hover: none) und behaelt den
Pfeil; mit Trackpad ist es hier drin. */
@media (hover: hover) and (min-width: 992px) {
.menu-auf { display: none; }
.has-submenu:has(> .menu-auf[aria-expanded="true"]):not(:hover) > .dropdown-menu { display: none; } /* der Server-Zustand (aktiver Ast offen) gilt hier nicht — sonst blitzt die Liste bis main.js laeuft, und haengt, wenn es ausfaellt */
.has-submenu:hover > .dropdown-menu,
ul.dropdown-menu > li:hover > ul.dropdown-menu { display: block; }
.dropdown-menu>li.has-submenu>a { position: relative; padding-right: 32px; }
.dropdown-menu>li.has-submenu>a::after {
content: ""; position: absolute; right: 14px; top: 50%;
width: 7px; height: 7px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: translateY(-50%) rotate(-45deg);
opacity: 0.6;
}
}
/* Mobil-Navigation und Formulare unterhalb von Bootstrap lg — Komplement zum Block
oben. 991.98 statt 991: Bruchteile von Pixeln bei Zoom fallen nicht ins Loch. */
@media (max-width: 991.98px) {
/* Main menu */
/*nav {
margin: 15px 0 5px;
display: none;
}*/
.auth table td,
.auth table th {
float: left;
width: 100%;
}
/* Kopf schmal (03.10.2026): ein Raster aus zwei Zeilen — Logo | angemeldet-als rechts,
Burger | Suche rechts, darunter das aufgeklappte Menue. Die Zwischen-Container (upperline,
rightaligned, lowerline) werden mit display: contents durchsichtig, das Markup bleibt. */
nav.navbar > .container {
width: 100%; /* als Flex-Kind der navbar sonst nur so breit wie der Inhalt */
padding-top: 12px; /* die upperline ist hier display: contents, ihr Rand ueber dem Logo kommt vom Raster-Container */
display: grid;
grid-template-columns: auto 1fr;
column-gap: 12px;
row-gap: 6px;
align-items: center;
}
.upperline, .navbar .upperline .rightaligned, .lowerline { display: contents; } /* .navbar davor: schlaegt die Desktop-Regel (float, 88 %, flex) */
.upperline .navbar-brand { grid-column: 1; grid-row: 1; float: none; width: auto;
padding-right: 0; z-index: 2; } /* kompakt: kein Platz fuer das Wort reserviert — ein langer Name laeuft unter „INTRANET" (Wort obenauf, Mike, 07.10.) */
.nav.logininformation {
grid-column: 2; grid-row: 1;
justify-content: flex-end;
margin-right: 0;
min-width: 0;
}
.nav.logininformation a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kein Umbruch (Mike, 07.10.): .nav bringt flex-wrap mit — wurde es eng, rutschte Abmelden in eine eigene Zeile und das Suchfeld
auf die Dachkante. Jetzt kuerzt sich der Name; Ränder: 12 oben, 12 unter dem Suchfeld, rechts wie die Inhaltsspalte. */
.nav.logininformation { flex-wrap: nowrap; }
.nav.logininformation a.angemeldet { flex: 0 1 auto; min-width: 0; }
nav.navbar { padding-bottom: 12px; }
.navbar-toggler { grid-column: 1; grid-row: 2; justify-self: start; }
.upperline .searchelement {
grid-column: 2; grid-row: 2;
justify-self: end;
width: min(100%, 340px);
}
.navbar-collapse { grid-column: 1 / -1; grid-row: 3; }
/* Farben und Abmelden nur als Symbol, so gross wie die Lupe im Suchfeld; der Text bleibt als title */
.nav.logininformation .txt { display: none; }
.nav.logininformation .ikon { width: 22px; height: 22px; vertical-align: -6px; opacity: 1; }
.nav.logininformation a.farbenlink { margin-left: 8px; } /* Name → Palette 16 + 8 = 24 (vorher 34, Mike, 07.10.: ~70 %) */
.search {
float: none;
}
.navbar-toggle {
margin-right: 0;
padding-right: 0;
}
/* Bis zum Umschaltpunkt des Menues (992px) die volle Breite nutzen: Bootstrap deckelt .container
ab 768px auf 720px und col-md-10 auf 83 %, das liess rechts ein Fuenftel leer. */
.container,
div[role="alertdialog"] {
width: auto;
max-width: none;
padding-left: 20px;
padding-right: 20px;
}
.col-md-10 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
div[role="alertdialog"] {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
background-color: #EEEEEE;
padding: 20px;
}
.search {
display: none;
margin: 15px 0 0 0;
position: relative;
}
ul.formular-tabs { margin-left: 0; }
/* Reiter schmal: eine Reihe, seitlich wischbar (Material-Muster „scrollable tabs"); ein angeschnittener Reiter zeigt, dass es weitergeht */
ul.formular-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 0 4px; scrollbar-width: none; }
ul.formular-tabs::-webkit-scrollbar { display: none; }
/* Kante verblasst, wo noch Reiter liegen (main.js setzt data-ueberlauf beim Scrollen) */
ul.formular-tabs[data-ueberlauf="rechts"] { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
ul.formular-tabs[data-ueberlauf="links"] { mask-image: linear-gradient(to right, transparent, #000 48px); }
ul.formular-tabs[data-ueberlauf="beide"] { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
ul.formular-tabs { gap: 0 4px; } /* Karteikarten: Abstand zwischen den Flaechen, nicht zwischen Woertern */
.formular-tabs .nav-link { white-space: nowrap; }
.mvz p.zugehoerigkeiten, .mvz p.unter, .kommandos { margin-left: 12px; }
/* E44 schmal: Abschluss-Knoepfe volle Breite (Beschriftung ueber dem Wert: Container-Abfrage .mvz, nach diesem Block) */
.abschluss .knopf { flex: 1 1 auto; text-align: center; }
.container.group form label {
text-align: left;
margin-bottom: 0;
width: 100%;
}
/* Feldabstand schmal (03.10.2026): Label 4px ueber dem Feld, 16px zwischen den Feldern — vorher 20 (Feld) + 15 (p) + 5 (Label) + Zeilenluecke = 45 */
.col-md-10 form p :is(input[type=text], input[type=date], select, textarea) {
width: 100%;
margin-bottom: 0;
}
.col-md-10 form p {
display: block;
margin-bottom: 16px;
}
.col-md-10 form p label { display: block; padding-top: 0; margin-bottom: 4px; }
.col-md-11.mvz {
max-width: unset;
width: 100%;
}
.row.half {
width: 100%;
float: none;
min-height: unset;
}
.col-md-10 form p label, .container.group form label {
width: 100%;
text-align: left;
}
span.preHelptext {
margin-left: 0;
}
span.helptext {
margin-left: 0;
}
#extendedSearch .mvzsearch label {
overflow: hidden;
}
/*.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse[aria-expanded="true"] {
display: block !important;
}*/
button.navbar-toggle {
display: block !important;
}
/* Menue schmal (03.10.2026): ein Overlay unter dem Kopf statt Teil des Seitenflusses, Akkordeon (Schalter: Basis oben),
44px Zeilen fuer den Daumen, zwei Stufen. Hover schaltet hier nichts — es gibt keinen Hover-Block fuer dieses Layout. */
.navbar-collapse {
position: absolute;
left: 0; right: 0; top: 100%;
z-index: 40;
max-height: calc(100vh - 100%);
overflow-y: auto;
padding: 8px 20px 16px;
background: var(--colorA);
border-bottom: 3px solid var(--kante);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
#main-navigation ul.nav { display: block; } /* nur das Menue — ul.formular-tabs traegt auch .nav und bleibt flex */
.nav-pills>li { float: none; padding: 0; }
.nav-pills>li>a { padding: 0; }
.has-submenu { display: flex; flex-wrap: wrap; align-items: center; }
.has-submenu>a { flex: 1 1 auto; }
.nav-pills>li>a, .dropdown-menu>li>a { display: flex; align-items: center; min-height: 44px; }
.menu-auf {
width: 44px; height: 44px;
margin-right: -12px; /* das Zeichen sitzt buendig mit dem Rand, die Flaeche darf darueber hinaus */
}
.has-submenu .dropdown-menu {
display: none;
position: static;
flex: 0 0 100%;
width: 100%;
margin: 0 0 8px;
padding: 0 0 0 16px;
border: 0; box-shadow: none; background: none;
}
.dropdown-menu>li>a { padding: 0; font-size: 15px; }
div#content { /* war: width 100vw + overflow-x scroll (CodeRed-Vorlage) — 100vw schließt in Firefox die senkrechte Leiste ein, die
Seite wurde seitlich scrollbar, und scroll zeigte die Leiste immer (Mike, 06.10.2026). Breite Tabellen scrollen weiter. */
width: 100%;
overflow-x: auto;
}
nav.navbar {
overflow-x: clip;
}
.legende-liste { columns: 1; min-width: 0; right: 0; }
}
/* Beschriftung neben oder über dem Wert (Mike, 06.10.): entscheidet der Platz der Inhaltsspalte, nicht das Fenster. Die 992 px
des Media-Query sind Bootstraps Schwelle für die Navigation — mit ihr stand die Beschriftung noch bei ~1000 px Platz über dem Wert.
Nebeneinander brauchen die Paare Beschriftungsspalte 11 rem + 12 px + gut 200 px Wert ≈ 30 rem; ein langer Wert bricht in seiner
Spalte um (overflow-wrap). Container ist .mvz (immer eine Bootstrap-Spalte, Breite aus dem Raster) — trifft auch die geteilte
Ansicht mit Karte (E38), in der die Textspalte schmaler ist als das Fenster. Ohne Container-Abfragen: immer nebeneinander. */
.mvz { container: mvz / inline-size; }
@container mvz (max-width: 30rem) {
/* Eine Kante (Mike, 06.10.; Muster iOS-Kontakte, GOV.UK Summary list): Überschrift 0, Beschriftung und Wert bündig auf 12 —
Fakten wie Formular. Unterschieden über Schnitt und Helligkeit (Lato 300 Grau gegen 400 dunkel), das Paar hält die Nähe
zusammen. Die vorige Treppe (Wert 36) ließ das Auge im Zickzack springen. */
.feld, .fakten { grid-template-columns: 1fr; row-gap: 2px; }
.feld > label { padding-top: 0; padding-left: 12px; color: var(--beschriftung); }
.feld > .wert { padding-left: 12px; }
.feld { margin-bottom: 16px; }
.fakten { row-gap: 0; } /* Abstand als Klammer: im Paar 2 px, zwischen den Paaren 16 px (Gesetz der Nähe) */
.fakten dt { padding: 0 0 2px 12px; color: var(--beschriftung); }
.fakten dd { margin: 0 0 16px 12px; }
p.koordinaten.feldspalte { margin-left: 12px; }
.mvz form .flaglist, .koordinaten { margin-left: 12px; } /* .mvz: so spezifisch wie .col-md-10 form .flaglist (breit) */
}
/* Hinweis „Datenschutz" (Mike, 07.10.2026): sichtbar nur, wer etwas wegen seiner Funktion sieht — sehr dezent, leise und klein,
die Erklärung im Hover (data-tip). Keine Farbe: Farbe heißt aktiv (layout.md §1). */
.vertraulich { display: inline-flex; align-items: center; gap: .3em; font-size: 12px; font-weight: 400; color: var(--leise); opacity: .8; vertical-align: baseline; }
.vertraulich .sym { width: 1.05em; height: 1.05em; flex: none; }
dt .vertraulich, dd .vertraulich { margin-left: .4em; }