/* ===========================================================================
 * Die Farben von Aixactum
 *
 * Neun, gemessen aus public/images/logo.png. Wer eine Farbe braucht, nimmt eine
 * von diesen; wer keine passende findet, hat meistens eine Bedeutung zu viel.
 *
 *   #e2007c  Magenta    Alarm, der eigene Name, "hier fehlt etwas"
 *   #b7c708  Limette    color3
 *   #0095db  Hellblau   Verlaufsakzent
 *   #50af31  Gruen      badge-success, gewoehnliches Fruehstueck
 *   #0075b2  Blau       color2, XL-Fruehstueck, Kachelkoepfe, Links im Menue
 *   #823784  Violett    color4
 *   #cd1719  Rot        color5, vierte Diagrammreihe
 *   #ffe400  Gelb       badge-warning
 *   #f07d00  Orange     color1, Gaeste
 *
 * Zwei Abweichungen mit Grund:
 *
 *   - Das Magenta ist #e2007c und nicht das #d6007f der PNG. Das Theme traegt
 *     #e2007c an 79 Stellen, und seine beiden anderen Markentoene (#0075b2,
 *     #b7c708) stimmen exakt mit dem Logo ueberein - #e2007c ist also der
 *     gemeinte Wert, die Verschiebung steckt in der Bilddatei.
 *   - Das Link-Gruen ist #3f8c1c, dunkler als #50af31, weil ein Link in der
 *     Logofarbe auf Weiss schlecht zu lesen ist. Sein Hover ist #2f6a15.
 *
 * Alles Weitere sind abgeleitete Toene: dunkle Schrift auf hellem Grund
 * (#4a4300 auf Gelb, #33400a auf Limette), Hover-Varianten (#a80060) und blasse
 * Hintergruende (#f3c6de, #fff3cd). Graustufen tragen Text und Kanten und
 * gehoeren nicht zur Marke.
 * ======================================================================== */
/* FARBEN TYPO */
/* NAVIGATION */


/* FARBEN TYPO */

a:active, a:focus, a:hover {
    color: #0075b2;
}
/* 1. Viererblock oben - fa icons größer*/
.icon-big {
	font-size: 26px;
}
.icon-big-2 {
    font-size: 56px;
}
/* 1. Viererblock oben - HG Color */
/* orange */
.color1 {
	background-color: #f07d00;
}/* dunkelblau */
.color2 {
	background-color: #0075b2;
}
/* hellgruen */
.color3 {
	background-color: #b7c708;
}
/* lila */
.color4 {
	background-color: #823784;
}
/*
 * Der fuenfte Diagramm-/Kachelton: das Rot des Logorings.
 *
 * Hier stand ein dunkles Schieferblau (#2c4762), das in keiner Marke vorkommt
 * - erfunden, weil vier Toene nicht reichten. Das Logo hat neun; eine zehnte
 * Farbe zu erfinden ist der Anfang davon, dass die Marke nicht mehr gilt. Rot
 * unterscheidet sich klar von Orange, Blau, Limette und Violett.
 */
.color5 {
	background-color: #cd1719;
}
/* Logo Größe auf schmale Breite angepasst */
.dark-logo {
	max-width: 110px;
	height: auto;
}
/*
 * Das eigene Bild im Menue, rund wie jedes andere Mitgliedsbild.
 *
 * Es war ein Quadrat mit "max-width: 50%" - bei einem Portraet im Hochformat
 * blieben links und rechts weisse Ecken stehen, und rund war es an keiner
 * Stelle.
 *
 * Den Block gibt es nicht mehr: das eigene Bild steht als Symbol am Eintrag
 * "Mein Profil" (siehe .sidebar-avatar), und der Kasten darueber sagte dasselbe
 * ein zweites Mal.
 */

/*
 * Suchfeld und Ansichtsauswahl so breit wie die Menuepunkte darunter.
 *
 * Die Menueliste hat padding: 15px 10px, das Formular hatte margin: 15px - also
 * standen die blauen Felder fuenf Pixel weiter aussen als das Feld darueber, was
 * man in einer schmalen Leiste sofort sieht.
 */
.main-sidebar .sidebar-form {
	margin-right: 10px;
	margin-left: 10px;
}
/* 2. Viererblock unten - Icons Text-Color */
/* hellgruen */
.color-text-1 {
	color: #b7c708;
}
/* dunkelblau */
.color-text-2 {
	color: #0075b2;
}
/* blau */
.color-text-3 {
	color: #0095db;
}
/* dunkelgrün */
.color-text-4 {
	color: #50af31;
}
/* Tabelle mit weniger columns schmaler */
.max-width150 {
	max-width: 150px;
}
/* Formular Abstand Eingabefelder */
input, select, textarea {
	margin: 0 10px 0 10px;
}
/* Formular Button style */
button.color2, button.color3 {
	margin-top:10px;
	border: none;
} 
button.color2:hover, button.color3:hover {
	background-color: #0095db;
} 
button.color3:hover {
	background-color: #b7c708;
} 
span.pflichtfeld {
	font-size: 12px;
	margin-top: 20px;
}
/* Tabelle Engagement Status HG Color */
/* grün */
.badge-success {
    background-color: #50af31;
}
/* pink */
.badge-danger {
    background-color: #e2007c;
}
/* grau */
.badge-offen {
	    background-color: #757f84;
}
/* gelb */
.badge-intern {
	    background-color: #ffe400;
}
/* Farbe vom Punkt online/offline */
.text-success {
    color: #50af31 !important;
}
.main-header .messages-menu .dropdown-toggle i::after, .main-header .notifications-menu .dropdown-toggle i::after, .main-header .tasks-menu .dropdown-toggle i::after {
    background-color: #e2007c;
}
/* seite blättern HG color */
.paging_simple_numbers .pagination .paginate_button.active a, .paging_simple_numbers .pagination .paginate_button:hover a {
    background: #0095db;
    color: #fff;
}
/* Mitglieder Seite Hintergrundfarbe Button E-Mail */
/* grün */
.btn-mail {
    background-color: #50af31;
}
/* dunkelblau */
.btn-link {
    background-color: #0075b2;
}
thead tr, tfoot tr {
	background-color: #ececec;
}
tr:hover td {
	background-color: #f5f5f5;
}
.icon {
	width: auto;
	height: 100%;
	max-height:70px;
	margin-bottom: 5px;
}
.bild {
	width: auto;
	height: 100%;
	max-height:70px;
	margin-bottom: 7px;
}
.download-logo {
	max-width:190px;
	height: auto;
	margin-bottom: 7px;
}

@media (max-width:1100px) {
.download-logo {
	max-width:150px;
	height: auto;
}
}

table.download {
	max-width: 800px;
}
table.download td:first-child {
	padding-right: 20px;
	text-align: right;
}
table.download td {
	padding: 10px;
}
table.download tr {
	border-bottom: 1px solid #d2d6de;
}
p.center {
	text-align: center;
	margin-bottom: 35px;
	padding-bottom: 10px;
	line-height: 18px;
}

/* NAVIGATION */
/* Logo bündig mit Bild Mitglied */
.main-header .sidebar-toggle {
    padding: 15px 13px;
}

.skin-blue .sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.menu-open > a {
    color: #ffffff;
    background: #0075b2;
}

.skin-blue .main-header .navbar {
    background-color: #b7c708;
}
.skin-blue .sidebar-menu > li:hover > a {
    background-color: #0095db;
}
.skin-blue.light-sidebar .sidebar-menu .treeview-menu > li.active > a, .skin-blue.light-sidebar .sidebar-menu .treeview-menu > li > a:hover {
    color: #0095db;
}

/* ---------------------------------------------------------------------------
 * Eingabemasken (.form-mask)
 *
 * Bis hierher war jedes Formularfeld eine eigene Zeile in voller Breite, weil
 * Label und Control beide col-sm-12 waren. Eine Maske sah dadurch immer gleich
 * aus, egal wie viel ein Feld braucht: ein Datum so breit wie eine fuenfzeilige
 * Bemerkung. Die Klassen hier gruppieren die Felder in Abschnitte (fieldset mit
 * legend) und lassen kurze Felder nebeneinander stehen.
 *
 * Zu benutzen mit templates/partials/form-section.php und form-field.php.
 * -------------------------------------------------------------------------*/

/*
 * Die globale Regel input, select, textarea { margin: 0 10px } weiter oben
 * nimmt jeder Gitterspalte 20px weg, so dass die Felder nicht mehr an einer
 * Kante stehen. Innerhalb einer Maske uebernimmt das Gitter die Abstaende.
 */
/* Eine Maske wird nicht lesbarer, wenn sie mitwaechst: ab etwa 1100px stehen
   Label und Feld so weit auseinander, dass man die Zeile verliert. Die Grenze
   sitzt an der Spalte, damit der Kasten nicht breiter wird als sein Inhalt. */
.form-mask-column {
	max-width: 1120px;
}
.form-mask input,
.form-mask select,
.form-mask textarea {
	margin: 0;
}
.form-mask-section {
	border: 0;
	padding: 0;
	margin: 0 0 26px 0;
	/* fieldset ist per Vorgabe min-width: min-content und sprengt sonst das Gitter */
	min-width: 0;
}
.form-mask-section:last-of-type {
	margin-bottom: 18px;
}
.form-mask-legend {
	width: 100%;
	float: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0075b2;
	border-bottom: 1px solid #e6eaee;
	padding-bottom: 6px;
	margin-bottom: 16px;
}
.form-mask-legend small {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #8a949c;
}
.form-mask .col-form-label {
	padding-top: 0;
	padding-bottom: 3px;
	font-size: 13px;
	font-weight: 600;
	color: #4a5560;
}
/* Der Stern am Pflichtfeld: Farbe wie badge-danger, ohne den Unterstrich, den
   Browser einem abbr[title] geben. */
.form-mask-required {
	margin-left: 3px;
	color: #e2007c;
	border: 0;
	text-decoration: none;
	cursor: help;
}
.form-mask .form-text {
	font-size: 12px;
}
/* Der Satz, der an der Stelle einer verborgenen Gruppe steht - siehe
   partials/form-section. Wie ein Hinweis unter einem Feld, nur fuer eine ganze
   Gruppe, damit er nicht als fehlende Angabe gelesen wird. */
.form-mask-note {
	margin: 0;
	font-size: 13px;
	color: #8a949c;
}
/* Ankreuzfelder und Radios zeichnet das Thema selbst: es schiebt das echte
   Bedienelement mit position: absolute; left: -9999px aus dem Bild und malt den
   Kasten ueber :before/:after auf das Label daneben, mit 35px Einzug dafuer.
   Bootstraps .form-check legt noch einmal 20px Einzug fuer ein Element davor,
   das gar nicht mehr da steht - zusammen steht die Beschriftung 55px weit
   drinnen. Der Einzug des Themas genuegt.

   Das gilt fuer die ganze Anwendung und nicht nur fuer die oeffentlichen
   Bogen: dieselben 20px zu viel standen in admin/services und in
   termine/inhalt. */
.form-check {
	padding-left: 0;
}
/* Und dieselbe Zeilenhoehe wie bei der Terminauswahl: das Thema gibt der
   Beschriftung neben einem Ankreuzfeld 25px Hoehe, die Datenschutzzeile bricht
   auf einem Telefon aber um. */
.form-check-label {
	font-weight: 400;
	height: auto;
	line-height: 1.5;
	min-height: 25px;
}
/* Ein Balken fuer Speichern, Abbrechen und den Pflichtfeldhinweis, auf jeder
   Maske an derselben Stelle. */
.form-mask-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-top: 1px solid #e6eaee;
	padding-top: 16px;
}
.form-mask-actions .btn {
	margin: 0 10px 0 0;
}
.form-mask-actions .pflichtfeld {
	margin-top: 0;
	color: #8a949c;
}
/* Seitenspalte: Kopfdaten, Status und Loeschen in einem Kasten statt in drei. */
.form-mask-meta {
	margin-bottom: 0;
}
.form-mask-meta dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a949c;
}
.form-mask-meta dd {
	margin-bottom: 10px;
}
.form-mask-aside,
.form-mask-danger {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e6eaee;
}

/* ---------------------------------------------------------------------------
 * Dashboard
 *
 * Die Kacheln zeigen drei Zahlen: den Wert im gewaehlten Zeitraum (gross), die
 * Veraenderung gegenueber dem Zeitraum davor (Chip) und die Gesamtzahl (klein).
 * Vorher standen Gesamtzahl und Zeitraumwert in zwei getrennten Bloecken auf
 * derselben Seite, ohne erkennbaren Zusammenhang.
 * -------------------------------------------------------------------------*/

/* Die Spalte traegt den Abstand, damit height: 100% der Kachel nicht zusaetzlich
   den Aussenabstand der Box addiert und die Zeile auseinanderzieht. */
.dash-tile-col {
	margin-bottom: 30px;
}
.dash-tile {
	height: 100%;
	margin-bottom: 0;
}
.dash-tile .box-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #fff;
}
.dash-tile-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.dash-tile-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.dash-tile-icons .fa {
	font-size: 20px;
	margin-left: 4px;
	opacity: .5;
}
.dash-tile-value {
	margin: 12px 0 0 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
	white-space: nowrap;
}
/* margin-top: auto haelt die Fusszeile unten, damit alle Kacheln einer Reihe
   dieselbe Hoehe haben, auch wenn ein Label zweizeilig wird. */
.dash-tile-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
}
.dash-trend {
	padding: 2px 7px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
/* Die Kacheln sind farbig, deshalb kann der Chip nicht gruen oder rot sein: die
   Richtung steht im Pfeil, die Helligkeit unterstuetzt sie nur. */
.dash-trend-up {
	background-color: rgba(255, 255, 255, .24);
}
.dash-trend-down {
	background-color: rgba(0, 0, 0, .22);
}
.dash-trend-flat {
	background-color: rgba(255, 255, 255, .12);
}
.dash-tile-total {
	font-size: 12px;
	opacity: .85;
}

/* Naechste Termine: eine Liste, kein Kasten je Termin. Die magentafarbene Kante
   bedeutet dasselbe wie box-danger im Detailblock weiter unten: Sie liefern. */
.next-meetings {
	list-style: none;
	margin: 0;
	padding: 0;
}
.next-meeting {
	margin-bottom: 10px;
	padding: 8px 0 8px 12px;
	border-left: 3px solid #e6eaee;
}
.next-meeting:last-child {
	margin-bottom: 0;
}
.next-meeting-duty {
	border-left-color: #e2007c;
	background-color: #fdf4f8;
}
.next-meeting-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.next-meeting-when {
	font-size: 12px;
	color: #8a949c;
	white-space: nowrap;
}
.next-meeting-meta {
	margin-top: 4px;
}
.next-meeting-meta .badge {
	margin-right: 4px;
}
.next-meeting-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * Filterleisten (.filter-bar, zusammen mit .form-mask)
 *
 * Von/Bis plus Knoepfe, auf dem Dashboard und ueber jeder Liste. Die Knoepfe
 * standen tiefer als die Felder, weil button.color2 weiter oben margin-top: 10px
 * bekommt; die Beschriftungen waren kleiner und grauer als in jedem Formular.
 * Beides hier zurueckgesetzt, damit Label, Feld und Knopf eine Linie ergeben.
 * -------------------------------------------------------------------------*/
/* form-row zieht sich mit -5px nach links, die Tabelle und die Exportknoepfe
   darunter stehen an der Kante des Kastens. Dadurch stand die Filterleiste um
   fuenf Pixel versetzt ueber ihrer eigenen Liste. */
.filter-bar .form-row {
	margin-left: 0;
	margin-right: 0;
}
.filter-bar .form-row > [class*="col"] {
	padding-left: 0;
	padding-right: 12px;
}
.filter-bar .form-group {
	margin-bottom: 8px;
}
.filter-bar .btn {
	margin-top: 0;
	margin-right: 6px;
}
.filter-bar-note {
	padding-bottom: 10px;
	color: #8a949c;
}

/* ---------------------------------------------------------------------------
 * Die Leisten, die DataTables selbst erzeugt (Exportknoepfe, Suchfeld,
 * Zeilenzaehler)
 *
 * DataTables legt um jede Tabelle ein
 * <div class="dataTables_wrapper container-fluid">. Das container-fluid bringt
 * 15px Innenabstand mit, und den bekommt alles, was im Wrapper steht: die
 * Exportknoepfe, das Suchfeld, die Tabelle und der Zeilenzaehler. Die
 * Filterleiste darueber und die Blaetterleiste darunter stehen dagegen an der
 * Kante des Kastens. Dadurch stand "Von / Bis / Pro Seite" fuenfzehn Pixel
 * links neben seiner eigenen Tabelle. Den Rand bringt der Kasten schon mit
 * (.box-body, 1.25rem); ein zweiter darin ist nur Versatz.
 *
 * Die Zeilen im Wrapper haben innerhalb von .table-responsive bereits margin: 0
 * und ihre aeusseren Spalten kein Padding (datatables.min.css), deshalb faellt
 * hier nur der Rahmen des Wrappers weg.
 * -------------------------------------------------------------------------*/
.table-responsive > .dataTables_wrapper {
	padding-left: 0;
	padding-right: 0;
}

/* Knoepfe und Suchfeld auf eine Linie. Das Suchfeld schwimmt nach rechts und
   haengt damit an der Oberkante der Zeile; die Knopfleiste ist ein
   inline-block und stuende sonst auf deren Grundlinie, vertical-align: top
   haengt sie an dieselbe Kante. Beide bekommen dieselbe Hoehe. */
.dataTables_wrapper > .dt-buttons,
.dataTables_wrapper > .dataTables_filter {
	padding-top: 0;
	margin-bottom: 10px;
}
.dataTables_wrapper > .dt-buttons {
	vertical-align: top;
}
/* Das Suchfeld steckt in einem <label> ohne Text. Mit margin-left stand es um
   fuenf Pixel ueber der rechten Tabellenkante. */
.dataTables_filter label {
	margin-bottom: 0;
}
.dataTables_filter input {
	width: 200px;
	margin: 0;
	padding: 3px 8px;
	border: 1px solid #ccd3d9;
	border-radius: 3px;
}
/* Der Zeilenzaehler unter der Tabelle sitzt jetzt in einer Flucht mit ihr. */
.dataTables_wrapper > .dataTables_info {
	padding-top: 10px;
	color: #8a949c;
}
.col-filter-reset {
	float: right;
	margin-right: 8px;
}

/* ---------------------------------------------------------------------------
 * Sortierhinweis in den Tabellenkoepfen
 *
 * Dass eine Spalte sortierbar ist, war nirgends zu sehen. Von DataTables ist
 * nur das JavaScript eingebunden, nicht datatables.min.css - und dort stehen
 * die Pfeile. master_style.css setzt zusaetzlich
 * table.dataTable thead .sorting { background: 0 0 } und nimmt damit auch noch
 * das Hintergrundbild weg, mit dem aeltere DataTables-Versionen sortierten.
 * Uebrig blieb ein Kopf, der auf Klick etwas tut, was ihm niemand ansieht.
 *
 * Die Zeichen kommen aus Font Awesome 4, das master_style.css ohnehin
 * importiert: f0dc unsortiert, f0de aufsteigend, f0dd absteigend.
 * -------------------------------------------------------------------------*/
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
	position: relative;
	padding-right: 28px;
	cursor: pointer;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
	position: absolute;
	top: 50%;
	right: 9px;
	margin-top: -7px;
	font-family: FontAwesome;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: #b3bdc6;
	content: "\f0dc";
}
table.dataTable thead th.sorting:hover::after {
	color: #6b757e;
}
table.dataTable thead th.sorting_asc::after {
	color: #0075b2;
	content: "\f0de";
}
table.dataTable thead th.sorting_desc::after {
	color: #0075b2;
	content: "\f0dd";
}

/* ---------------------------------------------------------------------------
 * Spaltenfilter (js/pages/table-column-filter.js)
 *
 * Eine zweite Kopfzeile mit einem Auswahlfeld je Spalte. Das Feld selbst ist
 * schmal und ruhig - es steht in jeder Spalte und darf die Ueberschrift nicht
 * uebertoenen. Die Klappliste haengt an <body> und braucht deshalb einen
 * z-index ueber der Tabelle.
 * -------------------------------------------------------------------------*/
table.dataTable thead tr.col-filter-row th {
	padding: 5px 6px 7px;
	border-top: 0;
	border-bottom: 2px solid #f4f4f4;
	background-color: #f7f8f9;
	font-weight: 400;
	white-space: nowrap;
}
.col-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 84px;
	max-width: 220px;
	padding: 0 6px;
	border: 1px solid #ccd3d9;
	border-radius: 3px;
	background: #fff;
	color: #4a5560;
	font-weight: 400;
	text-align: left;
}
.col-filter-toggle:hover {
	border-color: #0075b2;
}
.col-filter-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.col-filter-caret {
	margin-left: 6px;
	color: #8a949c;
}
/* Eine gesetzte Spalte muss man auf einen Blick finden, auch bei zehn Spalten. */
.col-filter.is-set .col-filter-toggle {
	border-color: #0075b2;
	background: #e7f2f9;
	color: #0075b2;
	font-weight: 600;
}
.col-filter.is-set .col-filter-caret {
	color: #0075b2;
}
.col-filter.is-empty .col-filter-toggle {
	opacity: .4;
	cursor: default;
}
.col-filter-panel {
	position: absolute;
	z-index: 1100;
	width: 250px;
	padding: 8px;
	border: 1px solid #ccd3d9;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
	white-space: normal;
}
/* .form-control bringt min-height: 2.573rem mit, siehe die Filterleiste oben. */
.col-filter-panel .col-filter-search {
	margin: 0 0 6px 0;
	padding: 3px 8px;
}
.col-filter-actions {
	display: flex;
	margin-bottom: 6px;
}
.col-filter-action {
	flex: 1 1 50%;
	padding: 3px 6px;
	border: 1px solid #ccd3d9;
	border-radius: 3px;
	background: #f4f6f8;
	color: #4a5560;
}
.col-filter-action + .col-filter-action {
	margin-left: 6px;
}
.col-filter-action:hover {
	background: #e9edf1;
	color: #263238;
}
.col-filter-list {
	max-height: 260px;
	overflow-y: auto;
}
.col-filter-option {
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 3px 2px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}
.col-filter-option:hover {
	background: #f4f6f8;
}
/*
 * master_style.css versteckt jede Checkbox der Anwendung
 * ([type=checkbox]:checked, [type=checkbox]:not(:checked) { position: absolute;
 * left: -9999px; opacity: 0 }) und erwartet daneben ein <label>, das die
 * sichtbare Box als Pseudoelement malt. Diese Liste braucht keine 25px hohe
 * Themebox neben jedem Wert, sondern die Checkbox selbst - also zurueckholen.
 * Der Selektor ist eine Klasse spezifischer als die Regel des Themes.
 *
 * Das margin steht hier ausserdem gegen die globale Regel
 * input, select, textarea { margin: 0 10px }, und flex: none dagegen, dass ein
 * langer Wert die Box im Flexcontainer auf null zusammenschiebt.
 */
.col-filter-option input[type="checkbox"] {
	position: static;
	left: auto;
	flex: none;
	width: 13px;
	height: 13px;
	margin: 2px 6px 0 0;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Zeilenaktionen als Icon
 *
 * "Bearbeiten" als vollflaechiger Knopf war das Auffaelligste in der ganzen
 * Zeile und nahm in jeder Liste eine eigene Spaltenbreite ein. Als Icon bleibt
 * die Aktion erreichbar und die Tabelle gehoert wieder ihren Daten. Der Text
 * steht im title und im aria-label, geht also weder fuer die Maus noch fuer
 * einen Screenreader verloren.
 * -------------------------------------------------------------------------*/
.row-actions {
	display: flex;
	align-items: center;
	/*
	 * Der Abstand gehoert an den Container, nicht an die Kinder.
	 *
	 * Vorher stand er als `> * + * { margin-left: 8px }` hier, und die Regel
	 * `.row-actions form { margin: 0 }` weiter unten hat ihn wieder
	 * eingesammelt: ein Klassenname plus ein Typ schlaegt einen Klassennamen
	 * plus zwei Universalselektoren. In der Nutzerliste hiess das, dass der
	 * Knopf "Als dieser Nutzer anmelden" - als einziger in einem Formular
	 * zwischen zwei Nachbarn - am linken Knopf klebte, waehrend der
	 * Bearbeiten-Link daneben seine acht Pixel behielt.
	 *
	 * `gap` kann das nicht passieren: es ist kein Aussenabstand und laesst sich
	 * von keiner margin-Regel ueberschreiben. Dieselben acht Pixel wie in
	 * .button-row.
	 */
	gap: 8px;
}
/*
 * Die Aktionsspalte haelt Abstand zur Spalte davor.
 *
 * In der Terminliste steht links davon der Teilnahme-Tag, und beide sind gleich
 * hoch und pillenfoermig - mit den 12 Pixeln, die eine Tabellenzelle von Haus
 * aus polstert, lasen sich Tag und Knopf als ein Element. Der Zusatz gilt nur
 * fuer die letzte Spalte, weil nur dort Knoepfe stehen.
 */
.table td:last-child > .row-actions {
	padding-left: 12px;
}
/* Acht Pixel und nicht vier: zwei Knoepfe mit Rahmen sahen sonst aus wie ein
   geteilter Knopf, und auf der Personenseite standen "sperren" und "entfernen"
   praktisch aneinander. Der Abstand steht jetzt als `gap` am Container oben. */
.row-actions form {
	margin: 0;
}
/* Knoepfe in einer Reihe stehen auf einer Linie.
 *
 * `button.color2` weiter oben bringt margin-top: 10px mit, ein <a class="btn">
 * daneben nicht - also standen "Speichern" und "Abbrechen" zehn Pixel versetzt,
 * ueberall dort, wo ein <button> neben einem Link steht. align-items richtet
 * die Mitten aus, der Aussenabstand verschiebt sie danach wieder. */
.row-actions .btn,
.form-mask .btn {
	margin-top: 0;
}
.btn-icon {
	margin-top: 0;
	line-height: 1;
}
.btn-icon .fa {
	color: #4a5560;
}
.btn-icon-primary .fa {
	color: #0075b2;
}
.btn-icon-danger .fa {
	color: #e2007c;
}
.btn-icon:hover .fa {
	color: #263238;
}
/* color3 (#b7c708) ist der hellste Ton der Palette: weisser Text darauf ist
   nicht lesbar, und auf der Umsatzkachel steht die groesste Zahl der Seite.
   Deshalb dort dunkle Schrift und hellere Chips. */
.dash-tile.color3 .box-body {
	color: #33400a;
}
.dash-tile.color3 .dash-trend-up {
	background-color: rgba(255, 255, 255, .55);
}
.dash-tile.color3 .dash-trend-down {
	background-color: rgba(0, 0, 0, .10);
}
.dash-tile.color3 .dash-trend-flat {
	background-color: rgba(255, 255, 255, .32);
}
/* Verlauf und Naechste Termine stehen nebeneinander und sind gleich hoch. Die
   Terminliste ist die laengere von beiden, deshalb scrollt sie in ihrem Kasten,
   statt den Kasten mit dem Diagramm auf ihre Hoehe zu ziehen und dort eine
   handbreit Leerraum zu hinterlassen. Der Abstand haengt an der Spalte, weil
   .box eigenes margin-bottom mitbringt. */
.dash-panel-col {
	margin-bottom: 30px;
}
.dash-panel {
	height: 100%;
	margin-bottom: 0;
}
.next-meetings {
	max-height: 330px;
	overflow-y: auto;
}
/* Die Zahl der Gaeste ist eine Angabe, kein Tag. */
.next-meeting-guests {
	font-size: 12px;
	color: #6b7680;
}
/* Die zweite Zeile der Kachel: was die grosse Zahl ist, und ihr Gegenstueck. */
.dash-tile-second {
	margin: 2px 0 0 0;
	font-size: 12px;
	opacity: .9;
}

/* ---------------------------------------------------------------------------
 * Knoepfe: eine Form, eine Groesse
 *
 * Primaer ist .btn.btn-success.btn-sm.color2 (blau), sekundaer
 * .btn.btn-default.btn-sm. Zwei Stellen fielen heraus:
 * -------------------------------------------------------------------------*/

/* Ein <a class="btn btn-success color2"> behielt den gruenen Rahmen von
   btn-success, ein <button> nicht: die Regel weiter oben gilt nur fuer button.
   In den Listen stehen beide nebeneinander. */
.btn.color2,
.btn.color3 {
	border: none;
}

/* Die Export-Knoepfe ueber den Tabellen erzeugt DataTables selbst, als
   .btn.btn-secondary in einer .dt-buttons.btn-group — also in einer Farbe und
   Groesse, die es sonst nirgends in der Anwendung gibt. Hier auf den sekundaeren
   Knopf (btn-default btn-sm) gebracht. */
.dt-buttons .btn {
	padding: 4px 12px;
	border: 1px solid #d5dbe0;
	border-radius: 2px;
	background: #f4f6f8;
	background-image: none;
	box-shadow: none;
	color: #4a5560;
	font-size: 12px;
	line-height: 1.5;
}
.dt-buttons .btn:hover {
	background: #e9edf1;
	background-image: none;
	color: #263238;
}

/* ---------------------------------------------------------------------------
 * Tags, Knoepfe, Klickbarkeit
 *
 * Drei Dinge sahen sich vorher aehnlich genug, um verwechselt zu werden: ein
 * Tag (Status, Terminart), ein Knopf und ein Link. Tags waren ausserdem je nach
 * Seite unterschiedlich gross, weil das Theme .badge an mehreren Stellen anders
 * definiert.
 *
 * Die Regel hier: ein Tag ist klein, rund und nicht anklickbar. Ein Knopf hat
 * eine Kante und eine Hoehe. Was anklickbar ist, ist blau.
 * -------------------------------------------------------------------------*/

.badge {
	display: inline-block;
	padding: 3px 8px;
	border: 0;
	border-radius: 10px;
	/* 13px wie jede andere Beschriftung. Es waren 11px hier und 13px in einer
	   Tabelle, also derselbe Tag in zwei Groessen je nachdem, wo er stand. */
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: .01em;
	vertical-align: baseline;
	white-space: nowrap;
	cursor: default;
}
/*
 * Ein Name mit Gesicht, ueberall wo ein Mitglied genannt wird - in den Zetteln,
 * den Rollen eines Termins, bei "eingeladen von". Ein Name ist eine Zeichenkette,
 * ein Gesicht ist eine Person; in einer Liste von zwanzig Zeilen ist das der
 * Unterschied zwischen Nachschlagen und Erkennen.
 *
 * Gebaut wird das in member_link(); siehe src/Support/helpers.php. Das Bild ist
 * klein genug, dass eine Tabellenzeile einzeilig bleibt.
 */
.member-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	vertical-align: middle;
	color: #3f8c1c;
}
.member-chip:hover {
	color: #2f6a15;
	text-decoration: underline;
}
.member-chip-photo {
	flex: none;
	width: 24px;
	height: 24px;
	margin-right: 7px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
}
/* Ein Name ist fett, ueberall. Auf dem Dashboard war er es, in den Listen nicht,
   und derselbe Mensch sah damit an zwei Stellen verschieden aus. */
.member-chip-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
/* Ein Tag ist nie ein Knopf: kein Schatten, kein Hover, kein Zeigefinger. */
.badge:hover {
	text-decoration: none;
}

/* Knoepfe: eine Hoehe, eine Kante, eine Form. btn-sm ist die Groesse, die die
   Anwendung ueberall benutzt. */
.btn {
	border-radius: 3px;
	font-weight: 600;
}
.btn-sm {
	padding: 5px 12px;
	font-size: 12px;
	line-height: 1.5;
}
/* Der sekundaere Knopf hatte je nach Stelle eine Kante oder keine. */
.btn-default,
.dt-buttons .btn {
	border: 1px solid #ccd3d9;
	background-color: #fff;
	color: #4a5560;
}
.btn-default:hover,
.dt-buttons .btn:hover {
	border-color: #b3bdc6;
	background-color: #f4f6f8;
	color: #263238;
}

/* Ein Textlink sieht ueberall gleich aus. Vorher hatte ein Name eine gepunktete
   Unterlaengung und ein "Details" daneben keine, was wie zwei verschiedene
   Dinge aussah. Text, der nicht anklickbar ist, bleibt schwarz.

   .detail-link stand hier fuer einen <button>, der ein Fenster oeffnet. Es
   gibt keinen mehr: was Angaben zeigt oder aendert, ist eine Seite. */
.link,
.table a:not(.btn):not(.badge),
.next-meeting a,
.person-card a {
	padding: 0;
	border: 0;
	background: none;
	/* Gruen, nicht blau: Blau gehoert seit der Umstellung den Ueberschriften,
	   und zwei Bedeutungen fuer eine Farbe sind eine zu viel. */
	color: #3f8c1c;
	font: inherit;
	text-align: left;
	text-decoration: none;
}
.link:hover,
.link:focus,
.table a:not(.btn):not(.badge):hover,
.next-meeting a:hover,
.person a:hover {
	color: #2f6a15;
	text-decoration: underline;
}

/*
 * Ein Name ist fett, ueberall, ohne Ausnahme.
 *
 * .member-chip-name kann das schon, aber die Karten rufen member_link() mit
 * withPicture: false auf - das Bild traegt dort die Karte - und bekommen damit
 * ein schlichtes .link zurueck, das nicht fett ist. So stand derselbe Mensch auf
 * der Terminseite mager und in der Tabelle daneben fett.
 *
 * Und die Regel steht hier unten, nicht weiter oben, wo sie einmal stand: die
 * .link-Regel darueber setzt `font: inherit`, und die Kurzform setzt auch das
 * Gewicht zurueck. Der Fettdruck stand also da und wirkte nirgends.
 *
 * Fett ist hier keine Betonung, sondern die Auskunft "das ist ein Mensch": in
 * einer Zeile aus Datum, Firma und Projekt ist der Name das, wonach gesucht
 * wird. Deshalb gilt es fuer jede Karte, in der ein Name steht.
 */
.person-card a,
.member-card-name a,
.guest-card a,
.people-line a {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Der eigene Name, ueberall wo er steht
 *
 * In der Anwesenheitsliste, unter den Rollen eines Termins, in den Zetteln, in
 * jeder Tabelle. Die Listen nennen ein Dutzend Namen auf einmal, und sich darin
 * zu finden hiess jede Zeile zu lesen. Rot und fett - dieselbe Alarmfarbe wie
 * das fehlende Thema, aber fett statt normal, damit die beiden nicht dasselbe zu
 * sagen scheinen.
 *
 * ## Warum die Selektoren so umstaendlich sind
 *
 * Weil `.table a:not(.btn):not(.badge)` gruen faerbt und drei Klassen zaehlt -
 * die in einem :not() zaehlen mit. `.table a.link-self` zaehlt zwei, verliert
 * also, und genau das ist passiert: in jeder Liste stand der eigene Name gruen
 * wie jeder andere. Dieselbe Falle wie bei .topic-missing, wo es schon einmal
 * aufgeschrieben wurde.
 *
 * Also vier Klassen und weiter unten in der Datei als die gruene Regel. Das
 * gilt fuer den Chip mit Bild ebenso wie fuer den blossen Link: beide kommen
 * aus member_link(), und in einer Tabelle steht mal der eine, mal der andere.
 *
 * Gesetzt werden die Klassen in member_link(); siehe src/Support/helpers.php.
 * -------------------------------------------------------------------------*/
.link.link-self,
.person-card a.link-self,
.table a.link-self:not(.btn):not(.badge),
.member-chip.is-self,
.table a.member-chip.is-self:not(.btn):not(.badge) {
	color: #e2007c;
	font-weight: 600;
}
.link.link-self:hover,
.person-card a.link-self:hover,
.table a.link-self:not(.btn):not(.badge):hover,
.member-chip.is-self:hover,
.table a.member-chip.is-self:not(.btn):not(.badge):hover {
	color: #a80060;
}
/* ---------------------------------------------------------------------------
 * Lange Texte in Listen
 *
 * Eine Bemerkung mit 200 Zeichen hat die Spaltenbreiten jeder Liste gesprengt.
 * .cell-clamp kuerzt auf eine Zeile; der volle Text steht im title-Attribut und
 * erscheint beim Darauffahren.
 * -------------------------------------------------------------------------*/
.cell-clamp {
	display: block;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cell-clamp-sm {
	max-width: 180px;
}
/* Fuer eine Spalte, die auf jeder Zeile fast dasselbe sagt - der Ort in der
   Terminliste ist in aller Regel dasselbe Hotel. Der volle Name steht im
   title. */
.cell-clamp-xs {
	max-width: 120px;
}

/* Die Polster der Filterfelder; Hoehe und Schriftgroesse stehen im Mass der
   Listenseiten am Dateiende. Dort steht auch min-height, und zwar weil
   bootstrap-extend.css .form-control ein min-height: 2.573rem (36px) gibt und
   ein min-height jedes kleinere height schlaegt: die Felder blieben sonst 36px
   hoch neben Knoepfen, die es nicht sind. */
.filter-bar .form-control {
	padding: 3px 8px;
}
/* Platz fuer den Pfeil, sonst laeuft der laengste Eintrag darunter. */
.filter-bar select.form-control {
	padding-right: 22px;
}

/* Mitgliederseite */
/*
 * Das Portrait auf der Profilseite und im Bearbeitungsformular.
 *
 * Rund, wie jedes Portrait hier. Im Formular war es eckig (Bootstraps
 * `rounded`), sodass man beim Hochladen ein anderes Bild sah als danach in
 * jeder Liste - der Ausschnitt, den ein Kreis nimmt, ist ein anderer als der
 * eines Rechtecks, und wer sein Bild nach dem Rechteck ausrichtet, ist im
 * Kreis falsch beschnitten.
 */
.member-portrait {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
}
/* Ein neutraler Tag fuer Angaben ohne eigene Farbe (Funktion, Anzahl). */
.badge-light-grey {
	background-color: #eef1f4;
	color: #5a6672;
}

/* ---------------------------------------------------------------------------
 * Terminseite
 *
 * Die Seite hatte links eine Leiste mit allen anderen Terminen und rechts einen
 * davon. Seit /termine eine Liste ist und sonst nichts, waere das eine zweite
 * Liste auf demselben Bildschirm. Geblieben ist die Zeile zum Blaettern - das,
 * wofuer die Leiste tatsaechlich benutzt wurde.
 * -------------------------------------------------------------------------*/
.section-heading {
	width: 100%;
	margin: 18px 0 12px 0;
	padding-bottom: 6px;
	border-bottom: 1px solid #e6eaee;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0075b2;
}
.section-heading:first-child {
	margin-top: 0;
}
.meeting-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
/*
 * Ein Ende der Reihe. Behaelt seinen Platz, damit die Zeile nicht springt, wenn
 * man vom vorletzten auf den letzten Termin blaettert.
 */
.meeting-nav-empty {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
	color: #b3bdc6;
}

/*
 * Eine Rolle unter ihrer blauen Ueberschrift, gesetzt wie eine Eingabemaske:
 * Ueberschrift, Wert, naechste Ueberschrift. Es waren Kacheln mit Rahmen und
 * farbiger Kante - drei Rahmen innerhalb des Kastens, der den Termin ohnehin
 * schon einrahmt. Dass etwas fehlt, sagt jetzt allein das rote Warnzeichen.
 */
.meeting-role-block {
	margin-bottom: 16px;
}
.meeting-role-block:last-child {
	margin-bottom: 0;
}
.meeting-role {
	margin-bottom: 4px;
	font-weight: 600;
}
.meeting-topic {
	margin-bottom: 4px;
}

/*
 * Ein Knopf im Kastenkopf steht unter den Tags, nicht dazwischen: "offen fuer
 * Gaeste", "heute" und "Bearbeiten" in einer Reihe sahen aus wie drei Tags, von
 * denen eines anklickbar ist. Ein eigener Block, kein display auf dem Knopf -
 * die Knopfregel am Dateiende gewinnt sonst und macht ihn wieder inline.
 */
.box-tools-action {
	margin-top: 10px;
}

/*
 * Die Akzentfarben, die eine Karte links traegt. Eine Liste statt einer Regel je
 * Kachelart, damit Anwesenheitskarte und Rollenkachel dieselben Toene benutzen
 * und nicht zwei Gruens entstehen.
 *
 * Als Variable, nicht als border-left-color: die Kachelregeln setzen die Kante
 * mit der Kurzschreibweise, und wer von beiden gewinnt, haenge sonst daran, wer
 * weiter unten in dieser Datei steht. Genau daran ist das Gruen der
 * Anwesenheitskarten beim ersten Versuch gescheitert - .person-card stand
 * achtzig Zeilen spaeter und hat die Farbe wieder ueberschrieben.
 */
.accent-success {
	--accent: #50af31;
}
.accent-primary {
	--accent: #0075b2;
}
.accent-warning {
	--accent: #ffe400;
}
.accent-danger {
	--accent: #e2007c;
}
.accent-muted {
	--accent: #b3bdc6;
}
/* Die drei Zahlen ueber dem Termin. */
.meeting-figures {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.meeting-figures > div {
	margin-right: 26px;
	font-size: 12px;
	color: #8a949c;
}
.meeting-figure {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #263238;
}
/* Die Gaestezahl traegt dieselbe Ampel wie die Spalte in der Liste; die
   Schwellen stehen in Domain\Termin\GuestTurnout. */
.meeting-figure-gut {
	color: #3f8c1c;
}
.meeting-figure-knapp {
	color: #8a7a00;
}
.meeting-figure-kritisch {
	color: #e2007c;
}

/* Das Gelb der Palette, mit dunkler Schrift: auf #ffe400 ist Weiss nicht
   lesbar. Bootstrap bringt badge-warning in seinem eigenen Gelb mit; hier
   bekommt es den Ton, den .badge-intern schon benutzt. */
.badge-warning {
	background-color: #ffe400;
	color: #4a4300;
}

/* Das Zeichen fuer "hier fehlt noch ein Thema", ueberall dort, wo ein Thema
   angezeigt wird und keines da ist: in der Terminliste, auf der Terminseite und
   in der Dashboard-Kachel. Rot, nicht gelb - ein Fruehstueck, dessen 10 Minuten
   am Morgen kein Thema haben, ist ein Loch im Programm und nicht ein "fast". */
.topic-missing,
/* Die zweite Zeile ist gegen .table a:not(.btn):not(.badge) - dieselbe Regel,
   die jeden Namen in einer Tabelle gruen macht. Sie zaehlt drei Klassen (auch
   die in einem :not zaehlen mit), also muss diese hier ebenso viele haben und
   weiter unten stehen; mit nur .table a.topic-missing blieb das Zeichen gruen. */
.table a.topic-missing:not(.btn) {
	margin-left: 4px;
	color: #e2007c;
	font-weight: 600;
}
a.topic-missing:hover,
.table a.topic-missing:not(.btn):hover {
	color: #a80060;
	text-decoration: none;
}

/*
 * Die Anwesenheitsliste eines Termins: Karten mit Gesicht statt eines Rasters
 * aus Namen. Zwoelf Namen sind zwoelf Namen, zwoelf Gesichter sind der Raum.
 * Nicht die Karte der Mitgliederseite - die ist ein Viertel Bildschirm breit
 * und traegt die Sozialen Netze -, aber dasselbe Bild und derselbe Link.
 */
.people-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	margin-bottom: 6px;
}
.person-card {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid #eef1f4;
	border-left: 3px solid var(--accent, #eef1f4);
	border-radius: 3px;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * Die Mitgliederkacheln
 *
 * Dieselbe Karte wie auf der Terminseite, eine Nummer groesser: Bild links, Name
 * und Firma daneben, Kontakt darunter, unten ein Knopf aufs Profil.
 *
 * Vorher war das ein Themen-Baustein: ein quadratisches Foto, die Kontaktsymbole
 * hinter einer Ueberblendung, die nur beim Darauffahren erscheint -- auf einem
 * Telefon also nie -- und darunter drei Schriftgroessen in drei Zeilen.
 * -------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------
 * Der Download-Bereich: Ordner, darin Zeilen
 *
 * Die alte Seite zeigte fuer jede Datei dasselbe PDF-Bildchen, auch fuer das EPS
 * und das JPEG. Hier steht die Endung als Kuerzel -- das ist die Angabe, die das
 * Bild vorgeben sollte.
 * -------------------------------------------------------------------------*/
.download-count {
	margin-left: 6px;
	font-weight: 400;
	color: #8a949c;
}
.download-table td {
	vertical-align: middle;
}
.download-type {
	width: 58px;
}
/* Das Symbol zur Dateiart. Es ersetzt das Kuerzel, das hier stand - siehe
   DownloadFile::iconClass(): ein Symbol je Art sagt dasselbe schneller, und
   die Endung steht weiter im title und im aria-label. Etwas groesser als
   Fliesstext, weil es allein in einer Spalte steht. */
.download-icon {
	/* Feste Breite und mittig darin: so stehen die Namen dahinter auf einer
	   Kante, egal ob davor ein schmales Blatt oder ein breites Archivsymbol
	   steht. Ohne das wandert jeder Name um ein paar Pixel. */
	display: inline-block;
	width: 20px;
	text-align: center;
	font-size: 17px;
	color: #7b8288;
	vertical-align: -1px;
}
/* Die Spalte, in der so ein Symbol allein steht: so schmal wie ihr Inhalt. */
.download-icon-col {
	width: 1%;
	white-space: nowrap;
}
/* Das PDF traegt die Warnfarbe des Hauses, weil es die haeufigste Art ist
   und man es beim Ueberfliegen sucht. */
.download-icon.fa-file-pdf-o {
	color: #cd1719;
}
.download-icon.fa-file-image-o {
	color: #823784;
}
.download-icon.fa-file-excel-o {
	color: #50af31;
}
.download-icon.fa-file-word-o {
	color: #0075b2;
}
.download-name {
	font-weight: 600;
}

.member-card-col {
	margin-bottom: 20px;
}
.member-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	border: 1px solid #e6eaee;
	border-left: 3px solid #0075b2;
	border-radius: 3px;
	background-color: #fff;
	line-height: 1.45;
}
.member-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.member-card-photo {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
}
.member-card-identity {
	min-width: 0;
}
/* Eine Groesse fuer den Namen, eine fuer alles andere. Auf der Kachel standen
   drei. */
.member-card-name {
	margin-bottom: 2px;
	font-size: 16px;
	font-weight: 600;
}
.member-card-company {
	margin-bottom: 0;
	color: #6b7680;
}
.member-card-contact {
	margin-top: 12px;
}
.member-card-contact p {
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Der Fuss sitzt unten, auch wenn eine Karte weniger Zeilen hat als ihre
   Nachbarin - sonst steht der Knopf in jeder Kachel woanders. */
.member-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
}
.member-card-social a {
	margin-left: 10px;
	font-size: 17px;
	color: #8a949c;
}
.member-card-social a:hover {
	color: #0075b2;
}
.person-card-photo {
	flex: none;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
}
.person-card-body {
	min-width: 0;
}
/* ---------------------------------------------------------------------------
 * Man selbst, ueberall, in einer Farbe
 *
 * Jede Seite hier nennt zwei Dutzend Menschen, und auf fast jeder sucht man
 * zuerst sich. Das ging bisher nur in Listen: der eigene Name stand magenta da,
 * eine Karte aber trug nur einen kaum sichtbaren rosa Hauch (#fff5fa) und die
 * Karten im Mitgliederverzeichnis gar nichts.
 *
 * Also eine Regel fuer alle drei Kartenarten: rosa Grund, magenta Kante links,
 * und die Kante ueberschreibt die Zustandsfarbe. Auf der Terminseite hiess die
 * Kante bisher "anwesend / online / abgemeldet"; der eigene Zustand steht dort
 * ohnehin gross im Kopf der Kachel, waehrend "welche von diesen Karten bin ich"
 * sonst nirgends beantwortet wird.
 *
 * #e2007c ist dieselbe Farbe wie .link-self und .member-chip.is-self. Nur eine
 * Farbe fuer "das sind Sie", sonst lernt man sie an jeder Stelle neu.
 * -------------------------------------------------------------------------*/
.person-card.is-self,
.member-card.is-self {
	border-color: #f3c6de;
	border-left-color: #e2007c;
	background-color: #fff5fa;
}
/* Der Name auf der eigenen Karte traegt die Farbe mit, damit die Karte auch
   dann als die eigene zu lesen ist, wenn sie allein steht. */
.person-card.is-self a,
.member-card.is-self .member-card-name a {
	color: #e2007c;
}
.person-card.is-self a:hover,
.member-card.is-self .member-card-name a:hover {
	color: #a80060;
}

/*
 * Ein Themenvorschlag fuer eine interne Runde.
 *
 * Er steht jetzt oben im Programm der Runde, weil er ihr Programm ist. Ein
 * heller Block mit einer Kante links, damit mehrere Vorschlaege untereinander
 * als Liste lesbar bleiben, ohne dass daraus wieder Kacheln in einer Kachel
 * werden.
 */
.topic-proposal {
	margin-bottom: 14px;
	padding: 2px 0 2px 12px;
	border-left: 3px solid #e6eaee;
}
.topic-proposal-heading {
	margin-bottom: 2px;
	font-weight: 600;
}
.topic-proposal-text {
	margin-bottom: 4px;
}
.topic-proposal-author {
	margin-bottom: 6px;
	font-size: 13px;
	color: #8a949c;
}
/* Das Bearbeitenformular steht eingerueckt unter seinem Vorschlag. */
.topic-proposal-form {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e6eaee;
}
/*
 * Die Gaestezahl als Balken.
 *
 * Sie war ein Tag mit einer Ziffer darin - "2" sagt nichts darueber, ob das
 * viel ist. "2 von 3" sagt es, und der Balken sagt es, ohne dass man liest.
 * Die Schwellen und das Ziel stehen in Domain\Termin\GuestTurnout.
 */
/*
 * Der Balken fuellt sein Elternelement.
 *
 * Er war inline-block mit min-width: 92px, also so breit wie sein laengster
 * Text und nie breiter - in einer Tabellenzelle ein Stummel neben viel
 * leerem Platz, und in jeder Zelle ein anderer, weil "0 von 3" schmaler ist
 * als "12 von 13". Ein Balken, dessen Laenge von der Textlaenge abhaengt,
 * laesst sich zwischen zwei Zeilen nicht vergleichen, und Vergleichen ist
 * das Einzige, wofuer ein Balken da ist.
 */
.guest-bar {
	display: block;
	width: 100%;
}
.guest-bar-track {
	display: block;
	height: 6px;
	border-radius: 3px;
	background-color: #eef1f4;
	overflow: hidden;
}
.guest-bar-fill {
	display: block;
	height: 100%;
	border-radius: 3px;
}
.guest-bar-kritisch {
	background-color: #e2007c;
}
/* Orange und nicht das erfundene Amber #ffc400: der mittlere Zustand liegt
   zwischen Magenta und Gruen, und genau dort liegt das Orange der Palette.
   Das Gelb waere zu blass fuer einen Balken und zu nah am Gruen. */
.guest-bar-knapp {
	background-color: #f07d00;
}
.guest-bar-gut {
	background-color: #50af31;
}
/*
 * Die grosse Form, fuer das XL-Fruehstueck.
 *
 * Derselbe Balken, nur laut: er ist der einzige Grund, aus dem der Kasten oben
 * auf der Startseite steht, und soll auch aus drei Metern Abstand sagen, wie
 * weit das Netzwerk vom Ziel entfernt ist. Deshalb volle Breite, ein dickerer
 * Streifen und die fehlende Zahl als Ueberschrift darueber.
 */
.guest-bar-headline {
	display: block;
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #263238;
}
.guest-bar-large .guest-bar-track {
	height: 14px;
	border-radius: 7px;
}
.guest-bar-large .guest-bar-fill {
	border-radius: 7px;
}
.guest-bar-large .guest-bar-text {
	margin-top: 4px;
}
/* "0 von 3 Gaesten" in der Textgroesse der Seite. Es stand in 12px, also zwei
   Stufen unter dem Text der Zelle daneben, und war damit die kleinste
   Schrift der Anwendung - fuer eine Zahl, die man lesen soll. */
.guest-bar-text {
	display: block;
	margin-top: 2px;
	color: #6b7680;
	white-space: nowrap;
}

/* Die Verwaltung eines Termins, abgesetzt von der eigenen Teilnahme darueber. */
.meeting-admin-actions {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e6eaee;
}
/* Die Vorschau auf der Nutzerseite: dasselbe runde Bild, nur groesser. */
.member-photo-preview {
	width: 72px;
	height: 72px;
	margin-right: 16px;
}

/*
 * Ein Gast mit allem, was ueber ihn gespeichert ist. Es waren Name, Firma und
 * ein Knopf, der ein Fenster mit dem Rest oeffnete - ein Klick und ein Dialog
 * fuer genau die Angaben, wegen derer man die Seite aufschlaegt.
 */
/* ---------------------------------------------------------------------------
 * Die Gaestekarte: vier Abschnitte, vier Fragen
 *
 * Sie war ein Stapel gleich aussehender Absaetze - Firma, Telefon, Mail,
 * Webseite, "Vertretung von X", "Eingeladen von Y", "Aufmerksam geworden durch
 * Z", Notiz, Anmeldedatum -, neun Zeilen in einer Groesse ohne Beschriftung. Die
 * Telefonnummer las sich wie die Notiz.
 *
 * Jetzt: Kopf (wer), Kontaktreihe (wie erreiche ich ihn), Faktenliste (wie kommt
 * er hierher), Notiz und Fuss. Jeder Abschnitt sieht anders aus, weil er etwas
 * anderes sagt. Siehe partials/guest-card.php.
 *
 * Alles darin in der Textgroesse der Seite - 14px, die Groesse jeder
 * Tabellenzelle. Die Karte hatte kurz ihre eigene Staffelung aus 15, 13 und 12
 * Pixeln; damit war derselbe Mensch hier groesser geschrieben als in der
 * Teilnehmerliste daneben und seine Firma kleiner als jeder andere Text der
 * Seite. Kleiner bleibt nur der Fuss, und der ist eine Fussnote.
 * -------------------------------------------------------------------------*/
.guest-card {
	/*
	 * Eine Karte, kein Balken. Ohne Begrenzung lief sie ueber die ganze
	 * Spaltenbreite - auf der Terminseite gut 700 Pixel fuer einen Namen, eine
	 * Firma und eine Telefonnummer, also viel Rahmen um wenig Inhalt. Der
	 * laengste Wert darin ist eine E-Mail-Adresse; dafuer reichen 440.
	 */
	max-width: 440px;
	padding: 12px 14px;
	margin-bottom: 10px;
	border: 1px solid #eef1f4;
	border-radius: 3px;
	line-height: 1.45;
}
.guest-card:last-child {
	margin-bottom: 0;
}

/* Kopf: Bild links, Name/Firma/Tags rechts. Flex statt absoluter Position -
   die alte Karte hielt mit padding-left und min-height einen Platz frei, der
   bei einem langen Firmennamen nicht mehr passte. */
.guest-card-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.guest-card-picture {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
}
.guest-card-identity {
	min-width: 0;
}
/* Kein eigenes font-size: ein Name ist ueberall gleich gross, und 15px hier
   liessen denselben Menschen in der Gaestekarte groesser aussehen als in der
   Teilnehmerliste daneben. */
.guest-card-name {
	margin: 0;
}
.guest-card-link {
	font-weight: 600;
}
/* Die Firma ist die zweite Zeile des Namens, nicht die erste Angabe: grau und
   eine Nummer kleiner, damit der Name der Name bleibt. */
.guest-card-role {
	margin: 1px 0 0;
	color: #7b8288;
}
.guest-card-tags {
	margin-top: 6px;
}

/*
 * Kontaktwege als eine Reihe mit Symbolen, die umbrechen darf.
 *
 * Untereinander sahen sie aus wie Angaben verschiedener Art, dabei sind es
 * mehrere Wege zu demselben Menschen. Das Symbol sagt "das ist eine
 * Telefonnummer" schneller als das Wort davor - deshalb steht auf dem
 * Mitgliederprofil auch kein "TELEFON" mehr ueber der Nummer.
 *
 * .contact-row und nicht .guest-card-contact: die Gaestekarte war die erste
 * Stelle, aber nicht die einzige.
 */
.contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 10px;
}
.contact-row .fa {
	width: 14px;
	color: #99abb4;
	text-align: center;
}

/*
 * Eine Liste beschrifteter Angaben: Wort und Wert in einer Zeile.
 *
 * .fact-list und nicht .guest-card-facts, weil sie nicht der Gaestekarte
 * gehoert: dasselbe Muster traegt das Mitgliederprofil, wo zehn Angaben vorher
 * als zwanzig Zeilen untereinander standen - Beschriftung in Grossbuchstaben
 * ueber dem Wert, jede Angabe zwei Zeilen hoch.
 *
 * Die Beschriftung muss sein - "Vertretung fuer Anna Berger" und "Eingeladen von
 * Anna Berger" sind zwei verschiedene Auskuenfte und sahen ohne sie gleich aus.
 * Als Spalte taugt sie aber nicht: eine feste Spalte fuer "Aufmerksam durch"
 * riss in jede Zeile mit kurzem Wort eine Luecke, und in der schmalen
 * Gaestespalte des Dashboards blieb fuer den Wert kaum etwas uebrig. Die Karte
 * sah dadurch breiter und leerer aus, als sie ist.
 *
 * Also fliessend: graues Wort, dann der Wert, umbrechend wo es eng wird. Was die
 * Spalte an Ausrichtung gab, gibt hier der Farbunterschied.
 */
.fact-list {
	margin: 10px 0 0;
}
.fact-list dt,
.fact-list dd {
	display: inline;
	margin: 0;
}
.fact-list dt {
	color: #99abb4;
	font-weight: 400;
}
/* Der Doppelpunkt macht aus zwei nebeneinanderstehenden Woertern eine Angabe:
   "Vorgeschichte: schon 6 x dabei" statt "Vorgeschichte schon 6 x dabei". */
.fact-list dt::after {
	content: ": ";
}
/* Jede Angabe faengt eine eigene Zeile an. Ein <dd> ist inline, also erzeugt
   das Break vor dem naechsten <dt> die Zeile - nicht das Element selbst. */
.fact-list dt:not(:first-child)::before {
	content: "";
	display: block;
	margin-top: 3px;
}
/* Die Notiz ist Freitext und wird zitiert, nicht behauptet - dieselbe Kante wie
   .topic-text. */
.guest-card-note {
	margin: 10px 0 0;
	padding: 2px 0 2px 10px;
	border-left: 2px solid #e6eaee;
	color: #6b7680;
}

/* Der Fuss traegt das Anmeldedatum: die leiseste Angabe der Karte, hinter einer
   Linie, damit sie nicht als weitere Auskunft ueber den Menschen gelesen wird. */
.guest-card-foot {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid #f4f4f4;
	color: #99abb4;
	font-size: 12px;
}/* ---------------------------------------------------------------------------
 * Der Kopf einer Personenseite: Bild links, Angaben rechts
 *
 * Ein Gast hat jetzt eine eigene Seite. Sie beginnt wie eine Visitenkarte -
 * Portraet, Firma, Termin - und darunter steht die Tabelle mit allem, was
 * gespeichert ist.
 * -------------------------------------------------------------------------*/
.person-page-head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 6px;
}
.person-page-picture {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
}
.person-page-facts {
	min-width: 0;
}
.person-page-company {
	font-size: 15px;
	font-weight: 600;
}
/* Die drei Zahlen oben auf einem Personenprofil: wie oft als Gast, wie oft als
   Vertretung, wann zuletzt. Dieselbe Form wie "Auf einen Blick" auf der
   Terminseite, damit eine Zahl ueberall gleich aussieht. Sie stehen jetzt im
   gemeinsamen .figure-grid, und die Angaben darunter in .contact-row und
   .fact-list - dieselben Bausteine wie auf dem Mitgliederprofil. Die eigene
   Tabelle .person-facts, die hier stand, ist damit weg: derselbe Mensch sah
   als Gast anders aus als als Mitglied. */
/* Ein Knopf, der etwas entfernt, bleibt ein gewoehnlicher Knopf mit rotem Text.
   Ein durchgehend roter Knopf neben einem blauen liest sich wie die zweite von
   zwei gleichrangigen Moeglichkeiten, und das ist Loeschen nicht. */
.btn-danger-text,
.btn-danger-text .fa {
	color: #e2007c;
}
.btn-danger-text:hover,
.btn-danger-text:hover .fa {
	color: #a80060;
}

/* Der Name fuehrt auf die Seite des Gastes und sieht aus wie das, was er
   ersetzt: der fette Name, der vorher hier stand. */
/* Ein vorbereitetes Thema kann mehrere hundert Woerter haben. Es scrollt in
   seinem Block, statt den Rest des Termins aus dem Bild zu schieben. */
/*
 * Ein vorbereitetes Thema, ganz und in Lesegroesse.
 *
 * Es stand in einem 110px hohen Kasten mit eigener Bildlaufleiste und in 12px:
 * ein Text, den jemand geschrieben hat, damit ihn jemand liest, in Fussnoten-
 * groesse und haeppchenweise. Die Seite darf laenger werden.
 */
.topic-text {
	display: block;
	color: #6b7680;
	margin: 4px 0;
	padding: 2px 6px 2px 10px;
	/* Die Kante sagt, dass hier zitiert wird und nicht die Seite weiterspricht. */
	border-left: 2px solid #e6eaee;
}
/*
 * Eine Reihe Tags, die umbrechen darf.
 *
 * Ueberall dort, wo mehrere Tags nebeneinander stehen. Als Inline-Elemente in
 * einem <p> haben sie waagerecht einen Abstand und senkrecht keinen, also
 * stossen sie beim Umbruch aneinander. Ein Flex-Container mit gap gibt in beide
 * Richtungen denselben.
 */
.tag-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
/*
 * Wer zu einem Termin kommt, auf dem Dashboard: ein Name je Zeile.
 *
 * Keine Kacheln. Diese Liste steht in einer Kachel, und dreizehn gerahmte
 * Kaestchen darin sind eine Kachel in der Kachel. Der Name traegt sein Bild und
 * seinen Verweis ohnehin mit (member_link), also braucht er keinen Rahmen -
 * er braucht Abstand.
 */
.people-lines {
	margin: 0;
	padding: 0;
	list-style: none;
}
.people-line {
	padding: 3px 0;
	line-height: 1.45;
}
/*
 * Die eigene Zeile traegt keine Flaeche: nur der Name ist rot.
 *
 * Die Regel dafuer steht bei .member-chip.is-self und gilt hier von selbst.
 * Ein rosa Streifen stand kurz hier - er machte aus der Zeile doch wieder
 * eine Kachel, und genau die sollten aus dieser Liste verschwinden. Eine
 * Flaeche gehoert zu einer Karte; in einer Namensliste reicht die Farbe des
 * Namens, denn der Name ist das, was gelesen wird.
 */
/*
 * Was man an diesem Termin liefert, hinter dem eigenen Namen. In der
 * Alarmfarbe, weil es das Einzige auf dem Dashboard ist, das eine Aufgabe
 * ankuendigt - und weil es den Tag "Sie liefern" ersetzt, der rot war, aber
 * nicht sagte, was.
 */
.people-duty {
	margin-left: 8px;
	color: #e2007c;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
}

/*
 * Die Vertretung hinter dem Namen, in derselben Zeile.
 *
 * Sie stand als eingerueckte zweite Zeile darunter, und drei Abgemeldete sahen
 * damit aus wie sechs Eintraege. Beschriftung grau mit Doppelpunkt, wie in der
 * Gaestekarte - dieselbe Angabe soll ueberall gleich aussehen.
 */
.people-note {
	margin-left: 8px;
}
.people-note-label {
	color: #99abb4;
}

/*
 * Die Unterlagen unter einem Beitrag: Datei, Verweis, oder beides. *
 * Zwei Links nebeneinander mit Abstand dazwischen, nicht untereinander: es
 * sind zwei Wege zu derselben Sache, und untereinander lesen sie sich wie
 * zwei verschiedene Unterlagen.
 */
.topic-material {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
	font-size: 13px;
}

/* Blaettern innerhalb eines Kastens (Engagement auf dem Dashboard). */
.panel-paging {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e6eaee;
}
.panel-paging .btn {
	margin-right: 6px;
}
.panel-paging-state {
	font-size: 12px;
	color: #8a949c;
}
/* "Alle ... anzeigen" am Fuss einer Kachel: derselbe Knopf, dieselbe Zeile,
   abgesetzt durch dieselbe Linie wie die Blaetterzeile darueber. Vorher war es
   an einer Stelle ein Textlink und an der anderen gar nichts. */
.panel-more {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e6eaee;
}
/* Steht die Blaetterzeile darueber, hat die ihre Linie schon gezogen. */
.panel-paging + .panel-more {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
}

/* ---------------------------------------------------------------------------
 * Ueberschriften
 *
 * Ein Ton fuer alles, was eine Ueberschrift ist: das Blau der Marke, darunter
 * ein Trennstrich. Vorher unterschied sich eine Kastenueberschrift von einer
 * Abschnittsueberschrift nur durch die Schriftgroesse, und Kapitel per grosser
 * und kleiner Schrift zu trennen liest sich schlecht.
 * -------------------------------------------------------------------------*/
/* Nur auf weissem Grund: box-solid faerbt den Kopf blau ein und schreibt weiss
   darauf — dort blau zu setzen macht die Ueberschrift unsichtbar. */
.box:not(.box-solid) > .box-header .box-title {
	color: #0075b2;
	font-weight: 600;
}
.box-header .box-subtitle {
	color: #8a949c;
}
/* Eine Angabe mit Beschriftung, wo vorher Klein- und Grossschrift ineinander
   liefen ("kein Thema eingetragen eintragen"). */
.fact {
	margin-bottom: 10px;
}
.fact-label {
	display: block;
	font-size: 12px;
	color: #8a949c;
}
.fact-value {
	display: block;
}
.fact-value .badge {
	margin-left: 4px;
}
.fact-empty {
	color: #8a949c;
	font-style: italic;
}

/*
 * Der XL-Kasten oben auf dem Dashboard.
 *
 * Blau, weil das XL-Fruehstueck blau ist: derselbe Ton wie sein Tag und wie
 * seine Kachel weiter unten - siehe .meeting-kind-primary. Die Farbe ist eine
 * Angabe und keine Betonung, und sie muss an jeder Stelle dasselbe heissen,
 * sonst lernt man sie dreimal. Dieser Kasten war einmal gruen und die Kacheln
 * blau, also genau verkehrt herum.
 */
.xl-panel {
	border-color: #0075b2;
}
/*
 * Der Kopf traegt jetzt dieselbe Form wie die Terminkacheln darunter: Datum
 * links, Tags rechts. Er ist kein Schalter - dieser Kasten klappt nicht auf -,
 * also ein <div> und kein <button>, aber mit derselben Aufteilung.
 *
 * Die Farbe kommt aus .meeting-kind-primary und die weissen Tags aus
 * .meeting-panel-fact; hier stand beides noch einmal als eigene Regel, und zwei
 * Stellen fuer eine Farbe sind eine zu viel.
 */
.xl-panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
}/*
 * Der Kopf einer Terminkachel auf dem Dashboard ist der Aufklappschalter.
 *
 * Vorher lag der Schalter als Knopf "mehr anzeigen" am rechten Ende einer Reihe
 * aus Datum und drei Tags - vier Dinge nebeneinander, von denen genau eines
 * aufklappte, und das am weitesten aussen. Jetzt ist der ganze Balken der Knopf;
 * der Pfeil rechts dreht sich mit, damit man sieht, in welche Richtung es geht.
 *
 * Ein <button> muss dafuer aussehen wie das <div>, das er ersetzt: volle Breite,
 * kein eigener Rahmen, Text linksbuendig.
 */
.meeting-panel-head {
	display: flex;
	align-items: center;
	width: 100%;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.meeting-panel-head:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}
/*
 * Die Tagreihe im Kopf bricht um, statt aus der Kachel zu laufen - und die Tags
 * behalten dabei ihren Abstand. Sie standen als Inline-Elemente nebeneinander,
 * und beim Umbruch klebte die zweite Reihe an der ersten: die Zeilenhoehe eines
 * Absatzes ist kein Abstand zwischen Tags.
 */
.meeting-panel-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	justify-content: flex-end;
}

.meeting-panel-title {	margin-right: auto;
	font-size: 18px;
	font-weight: 600;
}
/*
 * "in 3 Tagen" hinter dem Datum: dieselbe Zeile, kleiner und blasser, weil es
 * dasselbe Datum noch einmal sagt und nicht etwas Neues.
 */
.meeting-panel-when {
	margin-left: 8px;
	font-size: 13px;
	font-weight: 400;
	opacity: .85;
}
.meeting-panel-title small {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 400;
	opacity: .85;
}
.meeting-panel-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.meeting-panel-tags .badge {
	margin-left: 4px;
}
/* Der Pfeil abgesetzt: eigene Zone hinter einer senkrechten Linie, damit er
   nicht als vierter Tag gelesen wird. Er ist das einzige Element des Kopfes, das
   etwas tut. */
.meeting-panel-toggle {
	display: inline-flex;
	align-items: center;
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, .45);
}
.meeting-panel-caret {
	transition: transform .15s linear;
}
/* Bootstrap setzt .collapsed auf den Schalter, solange der Kasten zu ist. */
.meeting-panel-head:not(.collapsed) .meeting-panel-caret {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Die Farbe einer Terminkachel sagt, was fuer ein Termin es ist
 *
 * Und zwar dieselbe Farbe, die der Tag desselben Termins traegt: die Klasse
 * kommt aus TerminArt::panelClass(), der Tag aus badgeClass(), und beide aus
 * derselben Methode. Vorher gab es zwei Toene - ein helles #b7c708 fuer jedes
 * Nicht-XL-Fruehstueck neben dem #50af31 der Tags -, sodass auf einer Seite
 * zwei Gruen dasselbe meinten.
 *
 * Die Werte stehen hier ausgeschrieben, weil die Tag-Farben es auch tun
 * (badge-success oben in dieser Datei, badge-primary und badge-secondary im
 * master_style). Wer eine aendert, aendert beide - der Kommentar sagt, wo.
 * -------------------------------------------------------------------------*/
.meeting-kind-success {
	border-color: #50af31;
}
.meeting-kind-success > .box-header {
	background-color: #50af31;
	border-color: #50af31;
	color: #fff;
}

.meeting-kind-primary {
	border-color: #0075b2;
}
.meeting-kind-primary > .box-header {
	background-color: #0075b2;
	border-color: #0075b2;
	color: #fff;
}

/* Grau traegt keinen weissen Text: #d9dbdc ist die Tag-Farbe, und weiss darauf
   ist nicht lesbar. Dunkle Schrift, wie beim Tag selbst. */
.meeting-kind-secondary {
	border-color: #d9dbdc;
}
.meeting-kind-secondary > .box-header {
	background-color: #d9dbdc;
	border-color: #d9dbdc;
	color: #4b5563;
}

.meeting-kind-warning {
	border-color: #ffe400;
}
.meeting-kind-warning > .box-header {
	background-color: #ffe400;
	border-color: #ffe400;
	color: #4a4300;
}

.meeting-kind-danger {
	border-color: #e2007c;
}
.meeting-kind-danger > .box-header {
	background-color: #e2007c;
	border-color: #e2007c;
	color: #fff;
}

/*
 * Die Tags im Kopf einer Terminkachel: zwei Sorten, und der Unterschied ist die
 * Aussage.
 *
 * .meeting-panel-fact sind Angaben zum Termin - die Art, der Abstand in Tagen.
 * Sie sind weiss auf dem farbigen Balken, weil die Farbe des Balkens schon die
 * Art ist und ein Tag in derselben Farbe darauf kein Tag mehr waere.
 *
 * Sie sind alle weiss, und das ist eine Entscheidung: die eigene Teilnahme trug
 * kurz ihre eigene Farbe, gruen fuer anwesend wie auf der Terminseite. Auf
 * einem gruenen Balken - dem des gewoehnlichen Fruehstuecks - war davon nichts
 * zu sehen. Auf einfarbigem Grund kann ein Tag entweder seine Farbe tragen
 * oder sich abheben, nicht beides; hier gewinnt das Abheben.
 */
.meeting-panel-fact {
	background-color: #fff;
	color: #4b5563;
}

/* Auf hellem Grund braucht die Trennlinie vor dem Pfeil mehr Kontrast als auf
   dem Blau. */
.meeting-kind-secondary .meeting-panel-toggle,
.meeting-kind-warning .meeting-panel-toggle {
	border-left-color: rgba(0, 0, 0, .22);
}

/*
 * Kein schwarzer Kasten beim Anklicken.
 *
 * Der Kopf ist ein <button>, und der Browser zeichnet um einen angeklickten
 * Button seinen Fokusrahmen - auf dem farbigen Balken ein schwarzes Rechteck,
 * das erst beim naechsten Klick irgendwo anders verschwindet. :focus-visible
 * unterscheidet: wer mit der Maus klickt, sieht nichts, wer mit der Tastatur
 * hierher kommt, sieht weiterhin einen weissen Rahmen und findet sich zurecht.
 * Deshalb wird der Rahmen abgeschaltet und nicht der Fokus.
 */
.meeting-panel-head:focus,
.meeting-panel-head:active {
	outline: none;
	box-shadow: none;
}
.meeting-panel-head:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ---------------------------------------------------------------------------
 * Das Mass der Listenseiten
 *
 * Steht bewusst am Ende der Datei: was hier steht, gilt, und man muss nicht
 * suchen, warum ein Feld so hoch ist, wie es ist.
 *
 * Vorher stand auf einer Listenseite in einer Zeile alles nebeneinander, was es
 * an Hoehen gibt: Eingabefeld 31, Knopf 28, derselbe Knopf als <a> 30 (der
 * <button> verliert seinen Rahmen an .btn.color2, der Link nicht), Exportknopf
 * 31, Suchfeld 31, Spaltenfilter 26, Blaetterlink 27. Und an Textgroessen 11,
 * 12, 12.25, 13 und 14 - auf einem Bildschirm.
 *
 * Zwei Groessen, eine Hoehe:
 *
 *   14px  Inhalt: Tabellenzellen, Unterzeile des Kastens.
 *   13px  alles Bedienbare und alles Beilaeufige: Felder, Knoepfe,
 *         Beschriftungen, Zaehler, Tags.
 *   32px  jedes Bedienelement, das mit einem Knopf in einer Zeile steht.
 *
 * Die 18px der Kastenueberschrift bleiben, das ist eine Ueberschrift.
 *
 * Die Knoepfe zentrieren ihren Text mit inline-flex statt mit Polstern. Nur so
 * ist ein Knopf mit Rahmen genauso hoch wie einer ohne - das war der Unterschied
 * zwischen "Anzeigen" und "Zuruecksetzen".
 * -------------------------------------------------------------------------*/
/*
 * Ein Knopf ist .btn-sm. Die Regel haengt deshalb an der Klasse und nicht an
 * den Stellen, an denen Knoepfe vorkommen: die Liste war
 * .filter-bar .btn, .dt-buttons .btn, .col-filter-reset, .meeting-attendance
 * .btn - und der naechste Knopf, der woanders steht, war dann wieder 28px hoch,
 * so wie "Neuer Termin" im Kopf der Kachel.
 *
 * Ausgenommen ist .btn-link: das ist ein Knopf, der wie ein Textlink aussieht
 * ("entfernen" unter einem Thema). Er steht mitten im Fliesstext und darf dort
 * keine 32px hohe Kiste sein.
 *
 * Die Exportknoepfe erzeugt DataTables selbst, als .btn.btn-secondary ohne
 * btn-sm; sie stehen deshalb weiter daneben.
 */
.btn-sm:not(.btn-link),
.dt-buttons .btn,
/*
 * Jedes Feld im Mitgliederbereich, nicht nur die in einer Filterleiste: die
 * Felder einer Eingabemaske standen mit 36px neben ihrem eigenen 32px hohen
 * Speichern-Knopf. Ausgenommen ist allein das Textfeld, das mitwachsen darf.
 *
 * Die Suche in der Seitenleiste steht ausserhalb des Inhaltsbereichs und bleibt,
 * wie sie ist. Die Klappliste eines Spaltenfilters haengt an <body> und braucht
 * deshalb ihre eigene Zeile in dieser Liste.
 */
.content-wrapper .form-control:not(textarea),
.col-filter-panel .col-filter-search,
.col-filter-toggle,
.col-filter-action,
.pagination .page-link {
	height: 32px;
	min-height: 32px;
	font-size: 13px;
	line-height: 1.4;
}
.btn-sm:not(.btn-link),
.dt-buttons .btn,
.col-filter-action,
.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
}
/*
 * inline-flex verwirft den Leerraum zwischen Icon und Text: zwischen zwei
 * Flexkindern steht kein Wortabstand mehr, und "+ Neuer Termin" wurde zu
 * "+Neuer Termin".
 *
 * Am Klassennamen festgemacht, nicht an :only-child - das zaehlt nur Elemente,
 * und in <button><i></i> Text</button> ist das <i> auch dann das einzige
 * Element, wenn Text daneben steht. .btn-icon ist genau der Knopf, der nur ein
 * Icon traegt.
 */
.btn:not(.btn-icon) > .fa {
	margin-right: 6px;
}
.btn-icon {
	width: 32px;
	height: 32px;
	padding-right: 0;
	padding-left: 0;
	font-size: 14px;
}
/* Beilaeufiges: Beschriftung, Zaehler, Zeilenzahl, Tag in einer Tabelle. */
.filter-bar .col-form-label,
.filter-bar-note,
.dataTables_wrapper > .dataTables_info,
.col-filter-action,
.col-filter-option {
	font-size: 13px;
}
/* Die Klappliste wird mit der groesseren Schrift eine Spur breiter. */
.col-filter-panel {
	width: 260px;
}

/*
 * Die Vier-Augen-Matrix.
 *
 * So viele Spalten wie das Netzwerk Mitglieder hat, deshalb steht die Kopfzeile
 * gedreht: waagerecht waere die Tabelle bei achtundzwanzig Namen mehrere
 * Bildschirme breit, und die Spalte, die man sucht, laege ausserhalb.
 *
 * Die Farbe ist die Aussage: rot heisst "noch nie gesprochen", und genau das
 * ist die Information, die eine Liste dessen, was stattgefunden hat, nicht
 * zeigen kann. Die drei Abstufungen darunter sind Alter, nicht Bewertung.
 */
.matrix-table {
	table-layout: fixed;
	font-size: 12px;
}
/*
 * Ein Gitter, ueberall gleich: 1px in #f4f4f4, der Farbe, die master_style.css
 * jeder Tabelle im Portal gibt. Vorher stand hier Bootstraps #dee2e6, das
 * deutlich dunkler ist -- die Matrix hatte damit ein anderes Gitter als jede
 * andere Liste.
 *
 * Der Doppelselektor `.matrix-table.table-bordered` ist Absicht: Bootstrap gibt
 * Kopfzellen `border-bottom-width: 2px`, und `.table-bordered thead th` hat
 * dieselbe Spezifitaet wie `.matrix-table thead th`. Bei Gleichstand entscheidet
 * die Ladereihenfolge, und darauf sollte man bei drei Stylesheets keine Linie
 * stuetzen. Zwei Klassen schlagen eine, unabhaengig von der Reihenfolge.
 */
.matrix-table.table-bordered th,
.matrix-table.table-bordered td {
	border: 1px solid #f4f4f4;
}
/*
 * Die Oberkante, die das Thema wegnimmt.
 *
 * bootstrap-extend.css hat `.table thead:first-child th { border-top: none }` --
 * gedacht fuer Tabellen, die oben in einem Panel sitzen und deren Rahmen die
 * Panelkante schon zieht. Die Matrix steht frei, also fehlte ihr die oberste
 * Linie, waehrend links eine war. Zwei Klassen und ein Element schlagen eine
 * Klasse und zwei Elemente.
 */
.matrix-table.table-bordered thead:first-child th {
	border-top: 1px solid #f4f4f4;
}
/*
 * Der Kopf traegt Namen, keine Daten -- also auch nicht die Grauschattierung,
 * die das Thema jeder Kopfzeile gibt. Grau las sich hier wie eine weitere
 * Zellenfarbe neben rot, gelb und gruen, und die bedeuten in dieser Tabelle
 * etwas.
 */
.matrix-table thead th,
.matrix-table .matrix-corner {
	background: #ffffff;
}
.matrix-table .matrix-head {
	position: relative;
	width: 34px;
	height: 200px;
	padding: 0;
}
/*
 * Gedreht wird das innere <span>, nicht die Zelle: eine gedrehte Tabellenzelle
 * behaelt ihre Zeilenhoehe, so dass der Text ausserhalb laege.
 *
 * Volle 90 Grad, nicht 60. Schraeg gestellte Beschriftungen sparen Hoehe und
 * kosten Lesbarkeit -- und seit im Kopf derselbe Chip mit Foto steht wie in den
 * Zeilen, kippte das Bild bei 60 Grad mit und stand schief.
 *
 * Absolut positioniert statt mit einem gerechneten translateX. Vorher schob ein
 * `translateX(34px)` den gedrehten Kasten um genau eine Spaltenbreite nach
 * rechts, was ihn an den Rand statt in die Mitte setzte. Jetzt sitzt er bei
 * `left: 50%` und wird um seine halbe eigene Hoehe verschoben.
 *
 * Das Vorzeichen ist +50% und nicht -50%, und das ist der Punkt: die Drehung um
 * -90 Grad ist gegen den Uhrzeigersinn, also bildet sie die lokale Y-Achse nach
 * RECHTS ab, nicht nach links. Mit -50% sass die Beschriftung links neben der
 * Linie statt in der Spalte.
 *
 * `bottom` ist der Abstand zum Gitter -- derselbe Gedanke wie das Zellenpadding
 * der Zeilenkoepfe links, nur an der Kante, an der die gedrehte Spalte endet.
 */
.matrix-table .matrix-head > span {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform-origin: left bottom;
	transform: rotate(-90deg) translateY(50%);
	white-space: nowrap;
	text-align: left;
}
/* Im Kopf sitzt der Chip senkrecht; das Foto muss trotzdem aufrecht bleiben. */
.matrix-table .matrix-head .member-chip-photo {
	width: 20px;
	height: 20px;
	margin-right: 6px;
	transform: rotate(90deg);
}
.matrix-table .matrix-corner {
	width: 200px;
}
.matrix-table .matrix-row-head {
	width: 200px;
	white-space: nowrap;
	font-weight: 600;
}
/* Die Zeilenkoepfe tragen denselben Chip wie jede andere Liste. */
.matrix-table .matrix-row-head .member-chip-photo {
	width: 20px;
	height: 20px;
	margin-right: 6px;
}
.matrix-table .matrix-cell {
	width: 28px;
	text-align: center;
	padding: 4px 0;
}
/* Die Diagonale traegt keine Aussage und bekommt deshalb keine Farbe. */
.matrix-cell-self {
	background: #e9ecef;
}
.matrix-cell-never {
	background: #f8d7da;
}
.matrix-cell-stale {
	background: #fff3cd;
}
.matrix-cell-ageing {
	background: #e2f0d9;
}
.matrix-cell-recent {
	background: #b6d7a8;
}
/* Der Farbschluessel unter der Tabelle -- derselbe Rahmen wie die Zellen, die
   er erklaert. */
.matrix-legend {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	vertical-align: -2px;
	border: 1px solid #f4f4f4;
}

/*
 * Die Legende unter den Dashboard-Kacheln.
 *
 * Klein und grau: sie beantwortet eine Frage, die einmal gestellt wird, und
 * darf den Kacheln darueber keine Aufmerksamkeit wegnehmen. Der Abstand nach
 * oben ist negativ, weil die Kachelspalten unten schon einen tragen.
 */
.dash-trend-legend {
    margin: -8px 0 18px;
    font-size: 12px;
    color: #99abb4;
}

.dash-trend-legend strong {
    color: #6c757d;
    font-weight: 600;
}

/*
 * Der Knopf unter einer Terminkachel: der Weg zum ganzen Termin.
 *
 * Ausserhalb des aufklappbaren Koerpers, also auch an einer zugeklappten Kachel
 * sichtbar - siehe partials/upcoming-meeting.php. Die Linie darueber trennt ihn
 * vom Inhalt, damit er nicht als letzte Angabe gelesen wird.
 */
/*
 * Steht die Fusszeile im Koerper, muss sie dessen Polsterung wieder aufheben.
 *
 * An den Terminkacheln liegt sie darin, weil sie mit einklappen soll - und
 * .box-body polstert selbst mit 1.25rem. Zusammen mit der eigenen Polsterung
 * sassen die Knoepfe also 40 Pixel vom Rand statt 20, und damit weiter innen als
 * alles ueber ihnen. Die negativen Aussenraender ziehen den Streifen auf die
 * Breite der Kachel zurueck; seine eigene Polsterung setzt die Knoepfe dann auf
 * dieselbe Kante wie den Text.
 *
 * Im XL-Kasten steht sie ausserhalb des Koerpers und braucht das nicht.
 */
.box-body > .meeting-panel-foot {
	margin: 14px -1.25rem -1.25rem;
	border-radius: 0 0 3px 3px;
}

.meeting-panel-foot {	/*
	 * Zwei Knoepfe, einer je Seite: links der Weg zum Termin, rechts das
	 * Anmelden eines Gastes. Sie stehen auseinander, weil sie
	 * Verschiedenes tun - der eine fuehrt weiter, der andere legt etwas an -,
	 * und nebeneinander liest man sie als Paar.
	 *
	 * Umbrechend, damit in einer schmalen Spalte der zweite unter den ersten
	 * rutscht statt aus dem Kasten zu laufen.
	 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/*
	 * Waagerecht dieselbe Polsterung wie .box-header und .box-body im Theme:
	 * 1.25rem. Hier standen 14px, also sassen die Knoepfe sechs Pixel weiter
	 * innen als der Text und die Karten darueber - eine Kante, die man nicht
	 * benennen kann, aber sieht. Senkrecht weniger, weil der Streifen duenn
	 * sein soll.
	 */
	padding: 12px 1.25rem;
	border-top: 1px solid #f4f4f4;
	background-color: #fff;
}

/* ---------------------------------------------------------------------------
 * Die eigene Zeile in einer Liste
 *
 * Eine Zeile, die einen selbst angeht - ein Termin, an dem man liefert - traegt
 * dieselbe rosa Flaeche wie die eigene Karte im Mitgliederverzeichnis und eine
 * magentafarbene Kante links. Vorher stand dafuer ein rotes Kaestchen "Sie
 * liefern" in der Datumsspalte: in einer Liste von fuenfzig Zeilen genau so
 * gross wie jede andere Angabe, und man fand es nur, wenn man danach suchte.
 *
 * !important gegen .table-hover und den Monatsstreifen .bg-light: beide setzen
 * eine Hintergrundfarbe auf dieselbe Zelle, und die eigene Zeile soll die eigene
 * bleiben, auch wenn der Zeiger darueber steht.
 * -------------------------------------------------------------------------*/
.table tbody tr.row-mine > td {
	background-color: #fff5fa !important;
}
.table tbody tr.row-mine > td:first-child {
	box-shadow: inset 3px 0 0 0 #e2007c;
}
.table tbody tr.row-mine:hover > td {
	background-color: #ffeaf4 !important;
}

/* ---------------------------------------------------------------------------
 * Der Umschalter "Nur meine" / "Alle im Netzwerk" im Kopf einer Kachel
 *
 * Zwei Knoepfe aneinander, der gewaehlte gefuellt. Er stand als Auswahlfeld in
 * der Filterleiste zwischen "Pro Seite" und "Sortierung" und war dort nicht zu
 * finden: die vier Felder daneben bestimmen, wie die Liste aussieht, dieser
 * bestimmt, was in ihr steht. Siehe partials/scope-switch.php.
 *
 * Die Knoepfe sind <a>, kein Formular - der Kachelkopf steht ueber einem
 * Formular, und eines im anderen gibt es in HTML nicht. Deshalb hier auch die
 * Randbehandlung von Hand: .btn-group richtet Ecken und Kanten fuer <button>
 * ein, und der Theme-Rahmen des .btn-default doppelt sich sonst in der Mitte.
 * -------------------------------------------------------------------------*/
.scope-switch {
	white-space: nowrap;
}
.scope-switch .btn {
	border-radius: 0;
}
.scope-switch .btn:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.scope-switch .btn:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
.scope-switch .btn + .btn {
	margin-left: -1px;
}
/* Der gewaehlte liegt oben, damit seine Kante die des Nachbarn ueberdeckt. */
.scope-switch .btn.btn-success {
	position: relative;
	z-index: 1;
}

/*
 * Die Knopfreihe im Kopf einer Kachel: nebeneinander, mit Abstand, umbrechend.
 *
 * Die Gaesteliste trug dort zwei gefloatete Kaesten - "Gast anmelden" und den
 * Umschalter - und die legten sich uebereinander statt nebeneinander. Ein
 * Kasten, ein Flex-Container, und die Knoepfe stehen in der Reihenfolge, in der
 * sie im Markup stehen: erst was etwas anlegt, dann was die Ansicht aendert.
 */
.header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* ---------------------------------------------------------------------------
 * Die Zahlen auf einem Mitgliederprofil
 *
 * "Im Netzwerk": was jemand gegeben hat, wen er mitgebracht hat, wie oft er da
 * war. Die Zahl gross, das Wort klein darunter - dieselbe Anordnung wie in den
 * Dashboard-Kacheln, nur ohne Vergleichswert, denn hier gibt es keinen
 * Zeitraum, mit dem sich vergleichen liesse.
 *
 * Ein Raster und keine Reihe: es sind bis zu neun Zahlen, und in einer Reihe
 * waeren sie auf einem schmalen Bildschirm neun Zeilen mit je einer Zahl.
 * -------------------------------------------------------------------------*/
.figure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
/* Das Rasterfeld: min-width 0, damit eine lange Beschriftung die Spalte nicht
   breiter macht, als das Raster ihr zugesteht - die Vorgabe fuer ein
   Grid-Element ist auto, und das heisst "so breit wie mein laengstes Wort". */
.figure {
	min-width: 0;
}
.figure-value {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: #263238;
}
.figure-label {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #7b8288;
}

/* ---------------------------------------------------------------------------
 * Der Kopf: ein Streifen statt eines Balkens
 *
 * Der Kopf war 70 Pixel hoch und trug drei Dinge: das Logo, den Knopf zum
 * Einklappen und rechts aussen ein Personensymbol, hinter dem "Mein Profil" und
 * "Logout" lagen. Zwei Menuepunkte, die man am Tag hoechstens einmal braucht,
 * kosteten damit auf jeder Seite die oberste Handbreit des Bildschirms.
 *
 * Uebrig bleiben vier Pixel. Logo, Konto und der Einklapp-Knopf sind in die
 * Seitenleiste gezogen; nur der Hinweis auf eine uebernommene Sitzung erscheint
 * noch darunter, weil er gesehen werden muss, bevor man etwas tut.
 *
 * ## Die Farben
 *
 * Die neun Farben des Logorings, gemessen aus public/images/logo.png und nicht
 * geschaetzt: #e2007c Magenta, #b7c708 Limette, #0095db Hellblau, #50af31
 * Gruen, #0075b2 Blau, #823784 Violett, #cd1719 Rot, #ffe400 Gelb, #f07d00
 * Orange. Dies ist die einzige Stelle der Anwendung, an der die ganze Palette
 * auf einmal vorkommt - ueberall sonst hat eine Farbe eine Bedeutung, hier ist
 * sie die Marke.
 *
 * ## Die Bewegung
 *
 * Zwei Lagen desselben Musters, gegenlaeufig und unterschiedlich schnell: die
 * untere wandert in 90 Sekunden nach links, die obere in 140 nach rechts. Weil
 * ihre Perioden verschieden sind (540 und 380 Pixel), stehen die Farben nie
 * wieder gleich zueinander, und der Streifen wiederholt sich fuer das Auge nie.
 *
 * repeating-linear-gradient mit festen Pixelbreiten und nicht Prozent: der
 * Streifen ist auf jedem Bildschirm anders breit, und ein Muster in Prozent
 * wuerde mit der Fensterbreite die Geschwindigkeit aendern. Die Verschiebung
 * betraegt genau eine Periode, deshalb springt nichts, wenn die Schleife von
 * vorn beginnt.
 *
 * screen als Mischung, nicht multiply: die Farben sollen ineinanderlaufen und
 * heller werden, nicht zu Schlamm.
 * -------------------------------------------------------------------------*/
.brand-header {
	max-height: none;
	background-color: #fff;
}
.brand-stripe {
	position: relative;
	height: 4px;
	overflow: hidden;
	background: repeating-linear-gradient(
		to right,
		#e2007c 0 60px,
		#b7c708 60px 120px,
		#0095db 120px 180px,
		#50af31 180px 240px,
		#0075b2 240px 300px,
		#823784 300px 360px,
		#cd1719 360px 420px,
		#ffe400 420px 480px,
		#f07d00 480px 540px
	);
	animation: brand-drift-back 90s linear infinite;
}
.brand-stripe::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .55;
	mix-blend-mode: screen;
	background: repeating-linear-gradient(
		to right,
		#f07d00 0 42px,
		#0075b2 42px 84px,
		#ffe400 84px 127px,
		#823784 127px 169px,
		#50af31 169px 211px,
		#e2007c 211px 253px,
		#0095db 253px 295px,
		#cd1719 295px 338px,
		#b7c708 338px 380px
	);
	animation: brand-drift-forth 140s linear infinite;
}
@keyframes brand-drift-back {
	from { background-position: 0 0; }
	to { background-position: -540px 0; }
}
@keyframes brand-drift-forth {
	from { background-position: 0 0; }
	to { background-position: 380px 0; }
}
/* Wer Bewegung abgestellt hat, bekommt den Streifen, aber stillstehend. Eine
   Dekoration ist kein Grund, jemandem schlecht werden zu lassen. */
@media (prefers-reduced-motion: reduce) {
	.brand-stripe,
	.brand-stripe::after {
		animation: none;
	}
}

/* Der Hinweis auf eine uebernommene Sitzung: nur dann da, und dann ueber die
   Breite des Inhalts, damit er nicht die Marke ueberdeckt. */
.brand-bar-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: 230px;
	padding: 8px 14px;
	border-bottom: 1px solid #f4f4f4;
}
@media (max-width: 767px) {
	.brand-bar-notice {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Der Kopf der Seitenleiste: Logo, dann das eigene Konto
 * -------------------------------------------------------------------------*/
.main-sidebar {
	/* Faengt unter dem Streifen an, nicht unter ihm. */
	padding-top: 4px;
}
/*
 * Das Logo faengt auf derselben Hoehe an wie der erste Kasten rechts.
 *
 * Die 30 Pixel sind nicht gewaehlt, sondern abgelesen: .content im Theme hat
 * `padding: 30px`, also beginnt der oberste Kasten des Inhalts genau so weit
 * unter dem Streifen. Dieselbe Zahl hier, und Logo und Kastenkante liegen auf
 * einer Linie - vorher stand das Logo zwoelf Pixel zu hoch, was man nicht
 * benennen konnte, aber sah.
 *
 * Wer .content anfasst, fasst das hier mit an.
 */
.sidebar-brand {
	padding: 30px 20px 12px;
	text-align: center;
}
.sidebar-brand-link {
	display: inline-block;
}
.sidebar-brand img {
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
	margin: 0 auto;
}

/*
 * Der eine Knopf fuers Menue, und nur auf einem schmalen Bildschirm.
 *
 * Es gab zwei: einen Pfeil in der Leiste zum Einklappen und einen am Bildrand
 * zum Zurueckholen. Der zweite war noetig, weil die Leiste sich beim Einklappen
 * um ihre volle Breite aus dem Bild schiebt und den ersten mitnimmt - zwei
 * Bedienelemente fuer einen Zustand, den auf einem Rechner niemand braucht. Das
 * Menue steht jetzt.
 *
 * Unterhalb von 768 Pixeln raeumt das Theme die Leiste von sich aus weg; dort
 * ist dieser Knopf der einzige Weg zurueck, und waehrend sie offen steht,
 * verschwindet er wieder.
 */
.sidebar-restore {
	position: fixed;
	top: 12px;
	left: 0;
	z-index: 1040;
	display: none;
	padding: 8px 10px 8px 8px;
	border-radius: 0 3px 3px 0;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
	color: #7b8288;
	font-size: 17px;
	line-height: 1;
}
.sidebar-restore:hover {
	color: #263238;
}
@media (max-width: 767px) {
	.sidebar-restore {
		display: block;
	}
	.sidebar-open .sidebar-restore {
		display: none;
	}
}
/*
 * Das eigene Bild im Menue, als Symbol des eigenen Eintrags.
 *
 * Ueber dem Menue stand dafuer ein eigener Kasten: Bild mittig, Name darunter,
 * zusammen gut hundert Pixel, bevor der erste Menuepunkt anfing. Er sagte
 * dasselbe wie der Eintrag "Mein Profil" weiter unten - derselbe Name, derselbe
 * Verweis - und war doch kein Menuepunkt, denn er leuchtete nicht mit.
 *
 * Jetzt eine Zeile statt eines Blocks. Das Bild steht da, wo die anderen Punkte
 * ihr Symbol tragen, und ist genau so gross: 20 Pixel, damit die Zeile so hoch
 * bleibt wie ihre Nachbarn.
 */
.sidebar-avatar {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #eef1f4;
	vertical-align: -4px;
}
/*
 * Das Konto am Ende des Menues: Profil und Abmelden, hinter einer Trennlinie,
 * weil sie nicht zum Netzwerk gehoeren, sondern zu einem selbst.
 */
.sidebar-account-divider {
	height: 1px;
	margin: 10px 20px;
	background-color: #e6eaee;
}
/* Der Abmelden-Knopf sieht aus wie die Menuepunkte darueber, weil er einer ist.
   Dass ein Formular dahinter steht, ist eine Frage der Sicherheit und keine der
   Darstellung - siehe partials/app-sidebar. */
.sidebar-logout {
	display: block;
	width: 100%;
	padding: 10px 40px 10px 20px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sidebar-menu > li > form {
	margin: 0;
}

/* Die Suche unter dem Menue: etwas Luft nach oben, damit sie nicht am letzten
   Menuepunkt klebt, und nach unten, damit sie nicht am Rand endet. */
.sidebar-search {
	margin: 16px 0 24px;
}

/* ---------------------------------------------------------------------------
 * Unterpunkte docken links an
 *
 * Das Theme rueckt sie mit `padding-left: 35px` ein und setzt vor jeden ein
 * ti-more - drei Punkte, die bei "Gaesteliste" dasselbe sagen wie bei "Dienste",
 * also nichts. Zusammen waren das 35 Pixel Einzug plus 35 Pixel Symbol in einer
 * Leiste von 230: die Beschriftung fing bei 70 an und hatte 160 uebrig, weshalb
 * "Gesperrte Anmeldungen" umbrach.
 *
 * Jetzt beginnen sie da, wo die Symbole der Hauptpunkte beginnen. Dass es
 * Unterpunkte sind, sagt die Einrueckung nicht mehr - das sagen die kleinere
 * Schrift und die Kante links, die den ganzen Block zusammenfasst. Eine Kante
 * kostet einen Pixel, ein Einzug fuenfunddreissig.
 * -------------------------------------------------------------------------*/
/*
 * Die Einrueckung muss die Haut ueberbieten.
 *
 * `.light-sidebar .sidebar-menu > li > .treeview-menu` setzt `margin: 0 0px` und
 * zaehlt drei Klassen; `.treeview-menu` zaehlt eine und verlor. Die Unterpunkte
 * standen deshalb ganz links an der Kante der Leiste - weiter links als das
 * Symbol des Hauptpunktes darueber, unter den sie gehoeren. Dieselbe Falle wie
 * bei .link-self und .topic-missing: in dieser Haut gewinnt, wer mehr Klassen
 * nennt, und man muss sie nennen.
 *
 * Der graue Grund der Haut faellt mit weg. Er war die einzige Klammer um den
 * Block; die uebernimmt jetzt der senkrechte Strich links, der einen Pixel
 * breit ist statt einer ganzen Flaeche - und der traegt das Blau des Logos
 * (#0075b2), dasselbe, das das XL-Fruehstueck und die Kachelkoepfe tragen. Ein
 * Strich neben dem Text stoert dort nicht, wo eine Kante an einer gefuellten
 * Flaeche stoerte.
 */
.light-sidebar .sidebar-menu > li > .treeview-menu {
	/*
	 * Oben kein Abstand: der Strich beginnt an der Unterkante des
	 * Hauptpunktes, zu dem er gehoert. Zwei Pixel Luft standen dort und
	 * liessen ihn schweben - eine Linie, die eine Zugehoerigkeit zeigen
	 * soll, muss das beruehren, wozu sie gehoert.
	 */
	margin: 0 0 6px 20px;
	background: transparent;
	border-left: 1px solid #0075b2;
}
.sidebar-menu .treeview-menu > li > a {
	padding: 7px 10px 7px 14px;
	font-size: 13px;
}

/*
 * Hauptpunkte beruehren sich nicht.
 *
 * Sie standen ohne Abstand untereinander, und weil ein aktiver oder
 * ueberfahrener Punkt eine gefuellte Flaeche bekommt, stiessen zwei blaue
 * Bloecke direkt aneinander - das sah aus wie ein Block mit einer Naht darin
 * und nicht wie zwei Punkte.
 */
.sidebar-menu > li {
	margin-bottom: 3px;
}

/*
 * Keine Kante am aktiven Hauptpunkt.
 *
 * Es gab kurz eine in der Hausfarbe. Sie schnitt aber sichtbar in die gefuellte
 * Flaeche und liess links einen Rand stehen, wo vorher eine glatte Kachel war -
 * ein Streifen, der einen Fehler markiert, wo nur etwas ausgewaehlt ist. Die
 * Fuellung sagt schon genug; die Hausfarbe traegt stattdessen der senkrechte
 * Strich der Unterpunkte darunter.
 */

/*
 * Die Knopfreihe auf einem Profil: eine eigene Zeile unter Bild und Text.
 *
 * Sie stand erst am Ende der Textspalte rechts - also am unteren Ende einer
 * Spalte, die je nach Mensch verschieden lang ist - und dann unter dem Bild
 * links, wo sie die schmale Spalte auf ihre eigene Breite aufzog. Unter
 * beidem hat sie die ganze Kachelbreite und faengt an derselben Kante an wie
 * das Bild.
 *
 * Die Luft nach oben ist noetig, weil sonst Bootstraps mt-3 (16px) sie an die
 * Kontaktzeile klebte und Telefonnummer und Knopf sich als ein Block lasen.
 */
.profile-actions {
	justify-content: flex-start;
	margin-top: 22px;
}

/* Der Gesamtstand unter der Zwoelf-Monats-Zahl. Klein und grau: er ist der
   Zusammenhang, nicht die Aussage - dieselbe Rolle wie "insgesamt N" in den
   Dashboard-Kacheln. */
.figure-note {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: #99abb4;
}

/* Eine Reihe Knoepfe nebeneinander, mit Abstand und umbrechend. Stand an drei
   Stellen als inline-style `d-flex; gap: .5rem` - eine Knopfreihe ist kein
   Einzelfall. */
.button-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/*
 * Gaestekarten nebeneinander.
 *
 * Vierzehn Karten untereinander sind zwei Bildschirmhoehen fuer eine Liste, die
 * man ueberfliegen will. Das Raster fuellt die Breite und bricht von selbst auf
 * eine Spalte, wo es eng wird - dieselbe Mechanik wie bei .people-cards.
 *
 * Die max-width der einzelnen Karte faellt hier weg: sie ist dafuer da, dass
 * eine allein stehende Karte nicht zum Balken wird. In einem Raster bestimmt die
 * Spalte die Breite, und eine Karte, die schmaler bleibt als ihre Zelle, laesst
 * eine Luecke.
 */
.guest-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 10px;
}
.guest-cards .guest-card {
	max-width: none;
	margin-bottom: 0;
}

/*
 * Blaettern links, der Weg zur ganzen Liste rechts - eine Zeile.
 *
 * Sie standen untereinander: erst "Neuere / Aeltere / Seite 2 von 5", darunter
 * "Alles Engagement anzeigen". Zwei Zeilen fuer zwei Knoepfe am Fuss einer
 * Kachel, obwohl die eine Zeile beides traegt. Die Seitenangabe bleibt beim
 * Blaettern, wo sie hingehoert.
 */
.panel-foot-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 14px;
}
.panel-foot-row .panel-paging,
.panel-foot-row .panel-more {
	margin: 0;
}
/*
 * Der Streifen zwischen Kopf und Koerper des XL-Kastens.
 *
 * Er traegt den Gaestebalken und den Knopf "Gast anmelden" und liegt ausserhalb
 * des einklappbaren Teils: der Kasten beginnt zugeklappt, und die Zahl, fuer die
 * er auf dem Dashboard steht, soll trotzdem dastehen. Aufgeklappt kommen die
 * Gaeste selbst dazu.
 */
/*
 * Zugeklappt bleibt eine Linie stehen, nicht zwei.
 *
 * Der Streifen mit dem Balken hat unten einen Rand, die Fusszeile oben - und
 * zwischen beiden liegt der Koerper. Ist der eingeklappt, stossen die zwei
 * Linien direkt aufeinander und man sieht einen doppelt dicken, ungleichmaessig
 * grauen Strich.
 *
 * Weg kommt der obere Rand der Fusszeile, nicht der untere des Streifens: der
 * Streifen braucht seine Trennung in jedem Zustand, die Fusszeile nur dann, wenn
 * ueber ihr wirklich etwas steht.
 *
 * `:not(.collapsing)` haelt die Linie waehrend der Bewegung: dort ist der
 * Koerper sichtbar, aber `show` noch nicht gesetzt, und ohne die Ausnahme
 * blitzte die Linie bei jedem Auf- und Zuklappen weg.
 */
.box-body.collapse:not(.show):not(.collapsing) + .meeting-panel-foot {
	border-top: 0;
}

.xl-panel-summary {	/* Dieselbe Kante wie der Koerper darunter, siehe .meeting-panel-foot. */
	padding: 1.25rem;
	border-bottom: 1px solid #f4f4f4;
	background-color: #fff;
}


/* ---------------------------------------------------------------------------
 * Kastenkoepfe mit Knoepfen ueberlappen nicht mehr
 *
 * Das Theme setzt `.box-header > .box-tools` auf `position: absolute` - der
 * Knopf steht damit ausserhalb des Flusses, und Titel wie Untertitel laufen
 * unter ihm hindurch. Bei einem kurzen Titel faellt das nicht auf; auf der
 * Personenseite lief der Firmenname unter "Zur Liste".
 *
 * Der Kopf wird deshalb ein Raster: Text links, Knoepfe rechts, und die Knoepfe
 * ueber beide Zeilen, damit Titel und Untertitel untereinander bleiben. Ohne
 * Raster waere ein Flex-Container die naheliegende Wahl - der stellt Titel und
 * Untertitel aber nebeneinander, und dafuer muesste jedes Template einen
 * Wrapper bekommen.
 *
 * :has() waehlt nur die Koepfe aus, die wirklich Knoepfe tragen; alle anderen
 * bleiben, wie sie sind. In @supports, damit ein Browser ohne :has() genau das
 * heutige Verhalten behaelt statt ein halb angewandtes Raster.
 * -------------------------------------------------------------------------*/
@supports selector(:has(*)) {
	.box-header:has(> .box-tools) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		align-items: start;
	}
	.box-header:has(> .box-tools) > .box-title,
	.box-header:has(> .box-tools) > .box-subtitle {
		grid-column: 1;
	}
	.box-header:has(> .box-tools) > .box-tools {
		position: static;
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-self: end;
	}
}

/* Der Tag hinter einem Kastentitel: er traegt die Schriftgroesse eines Tags und
   nicht die der Ueberschrift, in der er steht. */
.box-title .badge {
	margin-left: 6px;
	font-size: 12px;
	vertical-align: middle;
}
/*
 * Die Statuszeile unter den Knoepfen des Beitragsformulars.
 *
 * Sie ersetzt drei window.alert() - zu wenig Text, ein Fehler der
 * Schnittstelle, eine leere Antwort. Ein modaler Dialog haelt die Seite an und
 * muss weggeklickt werden; keine dieser drei Meldungen ist das wert.
 */
.contribution-status {
	min-height: 20px;
	margin: 8px 0 0;
	font-size: 13px;
	color: #6b7680;
}
.contribution-status.is-wait {
	color: #0075b2;
}
.contribution-status.is-error {
	color: #e2007c;
}
/* Der Wortzaehler, wenn das Ziel erreicht ist. Gruen und nicht fett: er zaehlt
   mit, er lobt nicht. */
.contribution-count-reached {
	color: #3f8c1c;
}

/*
 * Der Rueckmeldeknopf im Seitenfuss.
 *
 * Unauffaellig, aber auf jeder Seite da: er soll gefunden werden, wenn jemand
 * ihn sucht, und sonst nicht stoeren. Ein gefuellter Knopf im Fuss saehe aus wie
 * eine Aufforderung.
 */
.footer-feedback {
	margin-right: 14px;
	color: #7b8288;
}
.footer-feedback:hover {
	color: #3f8c1c;
	text-decoration: none;
}

/*
 * Eine Rueckmeldung in der Verwaltungsliste.
 *
 * Keine Tabelle: eine Rueckmeldung ist ein Absatz, und eine Zeile, die ihn
 * abschneidet, wird nicht gelesen. Untereinander mit einer Trennlinie, wie
 * Beitraege in einem Verlauf.
 */
.feedback-entry {
	padding: 16px 0;
	border-top: 1px solid #f4f4f4;
}
.feedback-entry:first-child {
	padding-top: 0;
	border-top: 0;
}
/* Erledigte bleiben lesbar, treten aber zurueck: sie sollen die offenen nicht
   ueberdecken. */
.feedback-entry.is-done {
	opacity: .6;
}
.feedback-text {
	margin: 0;
	padding: 2px 0 2px 12px;
	border-left: 2px solid #e6eaee;
	color: #4a5560;
}

/* ---------------------------------------------------------------------------
 * Die Gastseite
 *
 * Ein Gast sieht dieselben Kacheln, Tags und Farben wie ein Mitglied - nur ohne
 * Menue, ohne Suche und ohne Abmeldeknopf, denn er hat kein Konto. Deshalb ein
 * eigenes Layout (templates/layouts/guest.php) mit denselben Stylesheets und
 * hier die wenigen Regeln, die den fehlenden Rahmen ersetzen.
 *
 * Der Mitgliederbereich baut seine Flaeche aus .wrapper und .content-wrapper,
 * und beide rechnen mit einer Seitenleiste links. Ohne sie stuende der Inhalt
 * 230 Pixel zu weit rechts, weshalb die Gastseite ihre Breite selbst setzt.
 * -------------------------------------------------------------------------*/
.public-body {
	background: #f4f6f9;
}
.public-page {
	/* Ein Bogen ist eine Spalte: schmal genug, dass eine Zeile Text nicht ueber
	   das halbe Bild laeuft. */
	max-width: 780px;
	margin: 0 auto;
	padding: 26px 24px 40px;
	/* Die Breite der Menuespalte und ihr Abstand, einmal benannt: der Kopf
	   rueckt unten um genau diese Summe ein, damit das Logo ueber dem Text
	   steht und nicht ueber Menue plus Text. Zwei Zahlen an zwei Stellen
	   laufen beim naechsten Anfassen auseinander. */
	--public-nav: 200px;
	--public-gap: 28px;
}
/* Die Gastseite ist breiter: dort stehen Mitgliederkacheln nebeneinander und
   eine Maske mit zwei Feldern je Zeile. Sie sagt das ueber $view->share(). */
.public-page.is-wide {
	max-width: 1180px;
}
.public-page-head {
	margin-bottom: 22px;
	text-align: center;
}
.public-page-logo {
	height: 42px;
	width: auto;
}
.public-page-claim {
	margin: 8px 0 0 0;
	font-size: 13px;
	color: #8a949c;
}
.public-page-foot {
	margin: 24px 0 0 0;
	text-align: center;
	font-size: 12px;
	color: #8a949c;
}
.public-page-foot a {
	color: #8a949c;
	text-decoration: underline;
}
/* Das Bild des Gastes: rund und beschnitten, wie ueberall im Haus. Ein
   Hochformat in einem quadratischen Rahmen sieht sonst nach Fehler aus - und es
   ist das Gesicht des Gastes. */
.guest-photo {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
}
/* Die Anwesenheitsgruppen: Name je Zeile, wie in der Terminuebersicht. */
.guest-roster {
	margin: 0 0 14px 0;
	padding: 0;
	list-style: none;
}
.guest-roster li {
	padding: 2px 0;
}


/* Ein Punkt im Ablauf einer Terminart. Jede Zeile ist ihr eigenes Formular, und
   ohne Trennlinie liest sich die Seite als eine einzige lange Maske. */
.agenda-item {
	padding: 14px 0;
	border-bottom: 1px solid #eef1f4;
}
.agenda-item:first-child {
	padding-top: 0;
}
/* Verschieben und Loeschen stehen neben dem Speichern-Knopf und nicht darunter:
   sie gehoeren zur selben Zeile, nur nicht zum selben Formular. */
.agenda-item-actions {
	margin-top: -34px;
	justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
 * Das Menue der Gastseite
 *
 * Eine Seite und nicht mehrere: ein Gast kommt ueber einen Link aus einer Mail,
 * liest einmal und entscheidet dann - jeder weitere Klick kostet Leute. Damit
 * die Seite trotzdem ueberschaubar bleibt, steht das Menue daneben und bleibt
 * beim Scrollen stehen.
 *
 * Auf einem Telefon wird daraus eine Zeile ueber dem Inhalt: eine feste Spalte
 * von 180 Pixeln neben 320 Pixeln Text waere dort kein Menue, sondern ein
 * Hindernis.
 * -------------------------------------------------------------------------*/
.guest-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6eaee;
	font-size: 13px;
}
.guest-nav a {
	color: #0075b2;
	text-decoration: none;
}
.guest-nav a:hover {
	text-decoration: underline;
}

@media (min-width: 992px) {
	.guest-layout {
		display: grid;
		grid-template-columns: var(--public-nav) 1fr;
		gap: var(--public-gap);
		align-items: start;
	}
	/* Das Logo gehoert ueber den Inhalt, nicht ueber Menue plus Inhalt: mittig
	   ueber der ganzen Breite steht es sonst sichtbar links vom Text.

	   Nur auf der Gastseite, und nur dort, wo das Menue wirklich steht. Diese
	   Regel stand einmal ungebunden hier und rueckte damit das Logo auf jeder
	   Seite ohne Anmeldung um 228 Pixel ein - auf der Anmeldung, beim
	   Passwort-Zuruecksetzen und auf dem Gaestebogen, die alle kein Menue haben
	   und wo es deshalb einfach schief ueber dem Kasten stand. */
	.public-page.is-wide .public-page-head {
		padding-left: calc(var(--public-nav) + var(--public-gap));
	}
	.guest-nav {
		position: sticky;
		/* Unter dem Farbbalken, mit dem Abstand, den .public-page oben haelt. */
		top: 26px;
		flex-direction: column;
		gap: 8px;
		margin: 0;
		padding: 0 0 0 12px;
		border-bottom: 0;
		border-left: 2px solid #e6eaee;
	}
}

/* ---------------------------------------------------------------------------
 * Der Ablauf als Liste
 *
 * .fact-list ist fuer kurze Angaben gebaut - Beschriftung und Wert stehen inline
 * nebeneinander, getrennt durch einen Doppelpunkt. Ein Ablauf aus sieben Punkten
 * mit je zwei Saetzen wird darin zu einem Block, in dem die Uhrzeiten
 * untergehen.
 *
 * Deshalb ein Raster mit einer Linie je Zeile, und die Zeit in der Hausfarbe -
 * dieselbe Form, die derselbe Ablauf in der Mail hat (mail/_agenda-rows). Wer
 * die Erinnerung gelesen hat, findet hier dasselbe wieder.
 * -------------------------------------------------------------------------*/
.agenda-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: 10px 0 0;
}
.agenda-list dt,
.agenda-list dd {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid #eef1f4;
}
.agenda-list dt {
	padding-right: 18px;
	font-weight: 600;
	color: #b7c708;
	white-space: nowrap;
}
/* Die erste Zeile braucht keine Linie: darueber steht schon die Ueberschrift. */
.agenda-list dt:first-child,
.agenda-list dt:first-child + dd {
	border-top: 0;
	padding-top: 0;
}
.agenda-list dd strong {
	font-weight: 600;
	color: #3b3f44;
}
.agenda-list dd span {
	display: block;
	margin-top: 2px;
	color: #7b8288;
}

/* Das Haus in der Unterzeile der Gastseite. Die Unterzeile ist grau und klein -
   der Ort ist aber die Angabe, die am Vorabend gesucht wird, also traegt er die
   Textfarbe des Hauses statt der leisen. */
.guest-venue {
	color: #3b3f44;
	font-weight: 600;
}

/* Die Dateien, die ein Gast selbst mitgebracht hat, auf seiner Karte. Ueber dem
   Fuss und hinter einer Linie: sie gehoeren zu ihm, sind aber keine weitere
   Auskunft ueber seine Person, sondern etwas zum Anklicken. */
.guest-card-files {
	margin: 10px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid #eef1f4;
	list-style: none;
}
.guest-card-files li {
	padding: 2px 0;
}

/* Eine Gastdatei in der Bearbeitenmaske: Symbol, Name, Groesse - und der
   Entfernen-Knopf ganz rechts, weil er die Ausnahme ist und nicht die Regel. */
.person-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #eef1f4;
}
.person-file:last-child {
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Der oeffentliche Anmeldebogen
 *
 * Er lief auf eigenem Bootstrap mit einem Dutzend eingebetteter Regeln und sah
 * deshalb aus wie ein beliebiges Formular aus dem Netz. Jetzt traegt er die
 * Stylesheets des Hauses; was bleibt, sind die drei Dinge, die es dort noch
 * nicht gab.
 * -------------------------------------------------------------------------*/

/* Der Stern am Pflichtfeld, in derselben Farbe wie in den Masken des
   Mitgliederbereichs (.form-mask-required). */
.required-note {
	color: #e2007c;
}

/* Was erst auftaucht, wenn eine Auswahl es verlangt - eine Vertretung, die
   Frage nach dem Weg zu uns. Vom Skript der Seite umgeschaltet. */
.hidden-fields {
	display: none;
}

/* Ein Termin zur Auswahl: eine Karte, kein Radioknopf in einer Zeile. Die
   Entscheidung, zu welchem Fruehstueck jemand kommt, ist die wichtigste des
   Bogens und darf so gross sein wie ihre Bedeutung. */
.termin-option {
	margin-bottom: 8px;
	padding: 12px 14px;
	border: 1px solid #e6eaee;
	border-radius: 4px;
	background: #fff;
}
.termin-option:hover {
	border-color: #0075b2;
}
/* Das Thema zeichnet den Radioknopf auf das Label und gibt ihm dafuer
   height: 25px und line-height: 25px - richtig fuer eine Zeile Text. Ein Termin
   hat zwei, Datum und Ort, und die zweite stuende sonst ueber dem Rand des
   Kastens. */
.termin-option label {
	display: block;
	width: 100%;
	margin: 0;
	height: auto;
	line-height: 1.5;
	min-height: 25px;
}
/* Das XL ist der Termin, auf den sich das Netzwerk besonders vorbereitet - in
   der Liste hebt es sich ab, wie ueberall sonst auch. */
.termin-option.is-xl {
	border-color: #0075b2;
	border-left-width: 3px;
	background: #f4f9fc;
}

/* Die Kachel unter den Reitern des Anmeldebogens: oben ohne Rundung und ohne
   Linie, damit sie am aktiven Reiter haengt statt darunter zu schweben. */
.public-tab-box {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-top: 0;
}

/* Anmelden, Passwort vergessen, Fehlerseiten: hier steht nie mehr als ein
   kurzes Formular, also schmaler als der Anmeldebogen fuer Gaeste. */
.public-page.is-narrow {
	max-width: 520px;
}