:root {
  --pa-primary: #0063a6;
  --pa-surface: #ffffff;
  --pa-bg: #f7f9fb;
  --pa-border: #dbe5ef;
  --pa-text: #1b2733;
  --pa-muted: #5b6b7a;
}
#gremien-container a {
  color: var(--pa-primary);
  text-decoration: none;
}
#gremien-container a:hover {
  color: color-mix(in srgb, var(--pa-primary) 85%, black);
  text-decoration: underline;
}
#gremien-container a#OrganisationsEditProfile {
  color: #fff !important;
}
#gremien-container #gremien-left.offcanvas-start:not(.show) {
  background-color: #0063a6 !important;
  border-right: 1px solid var(--pa-border);
}
#gremien-container #gremien-left .gremien-nav {
  padding-right: 1rem;
}
#gremien-container #gremien-left .gremien-nav:not(.collapsed) {
  min-width: 280px;
}
#gremien-container #gremien-left .gremien-nav .sidebar-link {
  border-radius: 0;
  font-size: 1.05rem;
  color: #fff;
  margin: 6px 10px;
  padding: 0.75rem 1rem;
}
#gremien-container #gremien-left .gremien-nav .sidebar-link:hover {
  background-color: #004170;
  color: #fff;
  font-weight: 700;
}
#gremien-container #gremien-left .gremien-nav .sidebar-link.active {
  background-color: #004170;
  color: #fff;
  font-weight: 700;
}
#gremien-container #gremien-left .gremien-nav.collapsed .sidebar-link {
  margin-left: 0;
}
#gremien-container #gremien-right {
  background-color: #f1f1f1;
}
#gremien-container #gremien-right .gremien-header {
  background-color: var(--pa-surface);
  border-bottom: 1px solid var(--pa-border);
  padding: 12px 16px;
}
#gremien-container #gremien-right .gremien-header .left button {
  border-radius: 0;
  padding: 0.55rem 0.8rem;
  background: rgba(0, 99, 166, 0.08);
  color: var(--pa-text);
}
#gremien-container #gremien-right .gremien-header .left button:hover {
  background: rgba(0, 99, 166, 0.14);
}
#gremien-container #gremien-right .gremien-page {
  padding: 16px;
}
#gremien-container #gremien-right .gremien-page .page-description {
  padding: 0;
  margin-bottom: 12px;
  color: #000;
}
#gremien-container #gremien-right .gremien-page .card {
  border: 1px solid var(--pa-border);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
#gremien-container #gremien-right .gremien-page .card .card-title {
  font-weight: 800;
  color: var(--pa-text);
}
#gremien-container #gremien-right .gremien-page .card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}
#gremien-container #gremien-right .gremien-page .card-link, #gremien-container #gremien-right .gremien-page .btn-primary {
  background-color: var(--pa-primary) !important;
  border-color: var(--pa-primary) !important;
  border-radius: 0 !important;
  font-weight: 800;
  text-decoration: none;
}
#gremien-container #gremien-right .gremien-page .card-link:hover, #gremien-container #gremien-right .gremien-page .btn-primary:hover {
  background-color: color-mix(in srgb, var(--pa-primary) 88%, black) !important;
  border-color: color-mix(in srgb, var(--pa-primary) 88%, black) !important;
}
#gremien-container #gremien-right .gremien-page .btn-outline-primary {
  border-color: var(--pa-primary);
  color: var(--pa-primary);
  border-radius: 0 !important;
  font-weight: 800;
}
#gremien-container #gremien-right .gremien-page .btn-outline-primary:hover {
  background: rgba(0, 99, 166, 0.1);
  color: var(--pa-text);
}
#gremien-container #gremien-right .gremien-page table {
  background: var(--pa-surface);
  border-radius: 0 !important;
  overflow: hidden;
  border: 1px solid var(--pa-border);
}
#gremien-container #gremien-right .gremien-page table th {
  background: rgba(0, 99, 166, 0.06);
  color: var(--pa-text);
  font-weight: 800;
  border-bottom: 1px solid var(--pa-border);
}
#gremien-container #gremien-right .gremien-page table td {
  border-top: 1px solid var(--pa-border);
}
#gremien-container #gremien-right .gremien-page .accordion-item {
  border-color: var(--pa-border);
}
#gremien-container #gremien-right .gremien-page .accordion-item .accordion-header {
  background-color: #fff !important;
}
#gremien-container #gremien-right .gremien-page .accordion-item .accordion-button {
  font-weight: 800;
}
#Header {
  background-color: #fff;
  border-color: #fff;
  padding-top: 0;
  margin-bottom: 0px;
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.15);
  z-index: 2;
  position: relative;
  max-width: 100% !important;
}
#HeaderContent {
  max-width: 1420px !important;
  margin-left: auto;
  margin-right: auto;
}
.gremienNav {
  padding-top: 0;
  padding-bottom: 0;
}
.logoutText {
  font-weight: 400;
  font-size: 16px;
}
.gremien-header {
  display: none;
}
#Footer {
  max-width: 100% !important;
  padding-top: 10px;
  padding-left: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 0 rgba(0, 0, 0, 0);
  color: #fff;
  background-color: #005da8;
}
#Footer a {
  color: #fff;
}
#FooterContent {
  padding-top: 20px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}
#powered-by {
  text-align: right;
  font-family: Roboto;
}
#powered-by a {
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.5s ease;
  -moz-appearance: all 0.5s ease;
  transition: all 0.5s ease;
}
#powered-by img {
  max-width: 80px;
  display: inline;
  margin-top: 8px;
  margin-left: 5px;
}
#CentralLogInForm {
  max-width: 420px;
  width: 100%;
}
#CentralLogInForm fieldset.EditKontakt {
  background: #edf4f9;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0px;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(8px);
  color: #ffffff;
}
#CentralLogInForm legend {
  color: #004170;
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
#CentralLogInForm .input-group-text {
  display: none;
}
#CentralLogInForm #togglePasswordIcon {
  display: inline;
  z-index: 10;
  color: #004170;
  position: absolute;
  right: 0;
}
#CentralLogInForm .form-control {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #0063a6;
  color: #0063a6;
}
#CentralLogInForm .form-control::placeholder {
  color: #0063a6;
}
#CentralLogInForm .form-control:focus {
  background: rgba(255, 255, 255, 0.06);
  border-width: 2px;
  color: #0063a6;
}
#CentralLogInForm .CheckboxInputAutologIn + label {
  color: #0063a6;
  font-size: 1rem;
}
#CentralLogInForm .PortalRegistrationContainer {
  font-size: 1rem;
  border-radius: 0;
  border-color: #cc051c;
  border-width: 2px;
  border-style: solid;
  background-color: transparent;
  box-shadow: none;
}
#CentralLogInForm .PortalRegistrationContainer:hover {
  border-color: #9D0012;
  color: 9D0012;
  box-shadow: none;
}
#CentralLogInForm .PortalRegistrationContainer .PortalRegistrationLink {
  background-color: transparent !important;
  box-shadow: none;
}
#CentralLogInForm .PortalRegistrationContainer .PortalRegistrationLink span.arrow {
  display: none;
}
#CentralLogInForm .PreLoginActionContainer {
  font-size: 1rem;
}
#CentralLogInForm .PreLoginActionContainer .AutoLogIn label {
  color: #0063a6;
}
#CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink {
  border-radius: 0;
  color: #0063a6 !important;
  padding: 0;
}
#CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink span.arrow {
  display: none;
}
#CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink:hover {
  background-color: transparent;
  color: #004170 !important;
}
#CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink span {
  color: #0063a6;
}
#CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink span:hover {
  color: #004170;
}
#CentralLogInForm .btn-login {
  position: relative;
  background: #cc051c;
  border: none;
  border-radius: 0;
  padding: 0.75rem 2.5rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}
#CentralLogInForm .btn-login span.arrow {
  display: none;
}
#CentralLogInForm .btn-login .btn-text {
  display: inline-block;
  width: 100%;
  text-align: center;
}
#CentralLogInForm .btn-login:hover {
  background: #9D0012;
  box-shadow: none;
}
#CentralLogInForm .btn-login:active {
  background: #9D0012;
  box-shadow: none;
}
#NewsModal1 .news-body, #NewsModal1 .NewsModal, #NewsModal2 .news-body, #NewsModal2 .NewsModal, #NewsModal3 .news-body, #NewsModal3 .NewsModal {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.GremienSettingsName {
  text-transform: uppercase;
  color: #0063a6;
  font-weight: 400;
}
#LogOutButton.btn {
  --bs-btn-color: #0063a6;
  --bs-btn-bg:transparent;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-color: #0063a6;
  --bs-btn-hover-bg:transparent;
  --bs-btn-hover-border-color:transparent;
}
.NewsPage .NewsPageTop {
  margin-top: 2rem;
  width: 100%;
  background-color: #f1f1f1;
  min-height: 220px;
  margin-bottom: 1rem;
}
.NewsPage .NewsDateAuthor {
  font-size: 0.8rem;
}
.CustomNavTabs .nav-link.active:hover, #formTab .nav-link.active:hover {
  color: #004170;
}
#Footer #FooterContent .menu--footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
#Footer #FooterContent .menu--footer .footer-left img {
  padding-left: 0px;
  padding-right: 0px;
  max-width: 200px;
}
#Footer #FooterContent .menu--footer .footer-left {
  padding-top: 10px;
}
#Footer #FooterContent .menu--footer .footer-right {
  display: flex;
  gap: 20px;
  padding-top: 40px;
}
#Footer #FooterContent .menu--footer .footer a {
  color: white;
  text-decoration: none;
}
#Footer #FooterContent .menu--footer .footer a:hover {
  text-decoration: underline;
}
.GremienHeaderBelow {
  padding-right: 1.5rem;
}
.GremienHeaderBelow.navbar {
  padding: 0;
}
.GremienHeaderBelow ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.GremienHeaderBelow .navbar-toggler {
  border-color: #005ca9;
}
.GremienHeaderBelow .navbar-toggler:focus {
  box-shadow: none;
}
.GremienHeaderBelow .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23005ca9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (min-width: 768px) {
  .GremienHeaderBelow .level-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
  }
  .GremienHeaderBelow .level-1 > li {
    position: relative;
  }
  .GremienHeaderBelow .level-1 > li > a {
    display: block;
    padding: 8px 0 24px;
    color: #005ca9;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .GremienHeaderBelow .level-1 > li > a:hover, .GremienHeaderBelow .level-1 > li > a.active, .GremienHeaderBelow .level-1 > li > a.current {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 3px;
    color: #005ca9;
  }
  .GremienHeaderBelow .level-1 > li.hassub > a {
    cursor: pointer;
  }
  .GremienHeaderBelow .level-1 > li.hassub:hover > .level-2, .GremienHeaderBelow .level-1 > li.hassub:focus-within > .level-2 {
    display: block;
  }
  .GremienHeaderBelow .level-1 > li.hassub:hover > a, .GremienHeaderBelow .level-1 > li.hassub:focus-within > a {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 3px;
  }
  .GremienHeaderBelow .level-2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 270px;
    margin: 0;
    padding: 24px 16px;
    background: #004b7c;
    border: 0;
    border-radius: 0;
  }
  .GremienHeaderBelow .level-2 > li > a {
    display: block;
    padding: 10px 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
  }
  .GremienHeaderBelow .level-2 > li > a:hover, .GremienHeaderBelow .level-2 > li > a:focus, .GremienHeaderBelow .level-2 > li > a.current {
    color: #ffffff;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
  }
}
@media (max-width: 767.98px) {
  .GremienHeaderBelow .navbar-collapse {
    width: 100%;
    padding-left: 1rem;
  }
  .GremienHeaderBelow .level-1 {
    width: 100%;
    padding: 8px 0;
  }
  .GremienHeaderBelow .level-1 > li > a.nav-link {
    color: #005ca9;
    font-size: 19px;
    font-weight: 700;
    padding: 10px 0;
    white-space: nowrap;
  }
  .GremienHeaderBelow .level-2 {
    position: static;
    float: none;
    display: none;
    min-width: 0;
    margin: 0 0 8px;
    padding: 8px 12px;
    background: #004b7c;
    border: 0;
    border-radius: 0;
  }
  .GremienHeaderBelow .level-2.show {
    display: block;
  }
  .GremienHeaderBelow .level-2 > li > a {
    color: #ffffff;
    font-size: 17px;
    padding: 8px 0;
  }
  .GremienHeaderBelow .level-2 > li > a:hover, .GremienHeaderBelow .level-2 > li > a:focus, .GremienHeaderBelow .level-2 > li > a.current {
    color: #ffffff;
    background: transparent;
    text-decoration: underline;
  }
}
.InhalteOrganisations {
  margin-top: 20px;
}
.TopicFilterRow {
  margin-top: 1rem !important;
}
/* Filterzeile: alle Filter an den rechten Rand.
 *
 * Die Zeile (.card-filter, gebaut in aon_webexbox_gremien_view::htmlCardBoard) traegt bereits
 * justify-content-end. Rechts stand trotzdem nur die Textsuche, weil der Themen-/Elementfilter
 * Bootstraps me-auto mitbringt und damit nach links gedrueckt wird. Hier faellt genau dieser
 * Schub weg, dann stehen Filter und Suche als ein Block rechts.
 *
 * me-auto ist eine Utility und damit !important - ohne eigenes !important passiert lautlos
 * gar nichts. Drei Klassen schlagen die eine der Utility, die Regel gewinnt also.
 *
 * Die einspaltige Variante (.card-filter-side, Filter als eigene Spalte neben den Karten)
 * vergibt kein me-auto und bleibt unberuehrt.
 */
.card-filter .TopicFilter.me-auto {
  margin-right: 0 !important;
}
.link-collapseBot {
  display: none;
}
.copyClipContainer {
  display: none;
}
.GremienHeaderBeforeOrgaButtons {
  font-size: 17px;
}
.GremienHeaderBeforeOrgaButtons ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.GremienHeaderBeforeOrgaButtons li {
  display: flex;
  align-items: center;
}
.GremienHeaderBeforeOrgaButtons a {
  color: #005ca9;
  text-decoration: none;
  transition: color 0.2s ease;
}
.GremienHeaderBeforeOrgaButtons a:hover, .GremienHeaderBeforeOrgaButtons a:focus {
  color: #cc051c;
}
.GremienHeaderBeforeOrgaButtons .fa-solid, .GremienHeaderBeforeOrgaButtons .bi {
  transition: color 0.2s ease;
}
#Header {
  position: sticky;
  top: 0;
  z-index: 2000;
}
.ModalHeaderIDname {
  display: none;
}
.modal {
  z-index: 2050;
}
.ModalFormSubmit, .TabSubmit {
  display: none;
}
.NewsContactData p {
  margin-bottom: 0.25rem;
}
.NewsCard {
  background-color: #fff;
}
.NewsPageContent {
  margin-left: -15px;
  background-color: #fff;
}
.NewsPageContent .NewsBackLinkContainer {
  padding-bottom: 2rem;
}
a.NewsPageLink {
  color: var(--pa-primary) !important;
  text-decoration: none;
}
a.NewsPageLink:hover {
  color: color-mix(in srgb, var(--pa-primary) 85%, black);
  text-decoration: underline;
}
#gremien-container #gremien-left {
  background-color: #0063a6;
}
.menu--footer a {
  text-decoration: none;
}
.sticky-top {
  top: 140px;
}
.CompanyBackLinkCol {
  padding: 1rem;
  margin-left: 1rem;
}
.GremienHeaderBeforeOrgaButtons {
  font-size: 20px;
}
#hauptnavigation {
  font-size: 26px;
}
/* =====================================================================================
 * MOBILE-OPTIMIERUNGEN (#48983) - angefuegt 2026-09-11
 *
 * Der Block steht bewusst am Dateiende: bei gleicher Spezifitaet gewinnt die spaetere Regel.
 * So muss oben nichts angefasst werden, und der ganze Block laesst sich in einem Stueck
 * wieder entfernen. Alles hier wirkt nur unterhalb der jeweiligen Bruchstelle - die Ansicht
 * ab 768px bleibt unveraendert. Die Nummern verweisen auf die Punkte der Kundenliste.
 *
 * Bruchstelle 767.98px (Bootstrap md): genau dort klappt auch das Kundenmenue
 * .GremienHeaderBelow in seinen Hamburger ein (navbar-expand-md, siehe Block weiter oben).
 * Die Formularregeln halten sich dagegen an Bootstraps sm (575.98px) - dort schaltet das
 * Portal-Raster ohnehin um. Eine eigene Bruchstelle bei 600px wuerde nur ein schmales Band
 * erzeugen, in dem Kopfzeile und Formulare unterschiedlicher Meinung sind.
 *
 * WICHTIG fuer jede spaetere Aenderung: .GremienHeaderOrgaButtons traegt die Bootstrap-
 * Utilities d-flex, justify-content-end und ms-auto. Utilities sind !important - wer dagegen
 * anschreibt, braucht selbst !important, sonst passiert lautlos gar nichts.
 * ===================================================================================== */
:root {
  --pa-page-gutter: 1rem;
  --pa-header-offset: 140px;
}
@media (max-width: 767.98px) {
  :root {
    --pa-header-offset: 72px;
  }
}
/* (9) .sticky-top hing an festen 140px - das ist die Kopfhoehe am Desktop. Auf dem Handy
 *     schob das jedes klebende Element um ein Viertel Bildschirmhoehe nach unten. */
.sticky-top {
  top: var(--pa-header-offset);
}
/* (5) Ueberschriften duerfen umbrechen, Container duerfen schrumpfen.
 *     min-width:0 ist der Gegenpol zu Bootstraps min-width:auto an Flex-Kindern: ohne ihn
 *     schiebt ein einziges langes Wort die Spalte auf und die ganze Seite scrollt waagerecht.
 *     hyphens:auto braucht ein lang-Attribut am Dokument, sonst trennt der Browser nicht. */
#Header h1, #Header h2, #Header h3, #Header h4, #Header h5, #Header h6, #Header .card-title, #Footer h1, #Footer h2, #Footer h3, #Footer h4, #Footer h5, #Footer h6, #Footer .card-title, #gremien-container h1, #gremien-container h2, #gremien-container h3, #gremien-container h4, #gremien-container h5, #gremien-container h6, #gremien-container .card-title {
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}
#gremien-container .row > *, #gremien-container .card, #gremien-container .card-body {
  min-width: 0;
}
@media (max-width: 767.98px) {
  /* -------------------------------------------------------------------------------
	 * (1) Kopfzeile deutlich flacher
	 * ------------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------------
	 * (3) Einstiegsflaeche kompakter + (7) seitliche Abstaende auf 16px
	 *
	 * Der dritte Teil des Punktes - kuerzerer Einleitungstext - ist kein CSS: der Text steht
	 * in Organisations_<Seite>_Text_Top und gehoert in der Konfiguration gekuerzt. Ein
	 * CSS-seitiges Abschneiden waere nur versteckter Text ohne Aufklappmoeglichkeit.
	 * ------------------------------------------------------------------------------- */
  /* (13) Der Fuss war die Ursache des waagerechten Scrollens auf dem Handy.
	 *
	 *      .menu--footer und .footer-right sind beide display:flex OHNE flex-wrap - Vorgabe ist
	 *      also nowrap. Die Linkreihe rechts kann damit nicht umbrechen; ihre Mindestbreite ist
	 *      die Summe aller Links plus der Abstaende. Zusammen mit dem Logoblock links liegt das
	 *      ueber der Bildschirmbreite, und die ganze Seite laesst sich seitwaerts schieben.
	 *
	 *      Auffaellig war es nur halb: #Footer a ist weiss, der Ueberhang steht also hinter der
	 *      blauen Flaeche auf weissem Grund und ist unsichtbar. Es sah nach einem abgeschnittenen
	 *      Wort aus ("Impre...") - abgeschnitten war nichts, es war nur nicht zu sehen.
	 *
	 *      min-width:0 ist der Gegenpol zu Bootstraps min-width:auto an Flex-Kindern, sonst
	 *      koennen die beiden Bloecke trotz Umbruch nicht unter ihre Mindestbreite.
	 *
	 *      Nur im Mobilblock: am Desktop ist die einzeilige Fusszeile gewollt.
	 */
  /* (6) die einzige starre Hoehe in dieser Datei. 220px sind am Handy ein Drittel des
	 *     Bildschirms, bevor der erste Satz kommt. */
  /* (4) Datum, Trenner und Autorenname untereinander.
	 *
	 *     Moeglich seit #49097: pageGremienSingleNews.php gibt die drei Teile als eigene
	 *     span-Elemente aus (.NewsDateAuthor-Date / -Separator / -Author). Vorher standen sie
	 *     als EIN Textknoten im Absatz - daran konnte CSS nichts anordnen, egal wie die Regel
	 *     aussah. Eine Konfigurationsaenderung am Trennzeichen ist dafuer nicht mehr noetig.
	 *
	 *     Der Trenner wird ausgeblendet statt mit umgebrochen: zwischen zwei Zeilen trennt der
	 *     Zeilenwechsel selbst, ein einzelner Strich auf eigener Zeile saehe nach Fehler aus.
	 *     display:none und nicht visibility:hidden, sonst bliebe eine leere Zeile stehen.
	 *
	 *     Ab 768px greift nichts davon - dort bleibt die Zeile einzeilig mit Trenner. */
  #Header {
    /* (2) Benutzername einzeilig halten. Zweizeilig war er, weil der Name die ganze
		 *     Restbreite bekam; hier wird er stattdessen mit Auslassungspunkten gekuerzt. */
    /* Abmelden als reines Symbol - aber nur, wenn ueberhaupt ein Symbol ausgegeben wird.
		 * Organisations_LogOutAS kann auf Text stehen, dann bliebe sonst ein leerer Knopf. */
  }
  #Header #HeaderContent {
    padding-left: var(--pa-page-gutter);
    padding-right: var(--pa-page-gutter);
  }
  #Header nav.navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  #Header .navbar-brand {
    margin-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  #Header .navbar-brand img {
    max-height: 44px;
    width: auto;
  }
  #Header .GremienHeaderOrgaButtons > * {
    min-width: 0;
  }
  #Header .OrganisationsUserSettings .GremienSettingsName {
    display: inline-block;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  #Header #LogOutButton:has(.logoutIcon) .logoutText {
    display: none;
  }
  #Header .GremienHeaderBelow .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  #Header .GremienHeaderBelow {
    padding-left: var(--pa-page-gutter);
    padding-right: var(--pa-page-gutter);
  }
  .gremien-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  #hauptnavigation {
    font-size: 1.25rem;
  }
  .GremienHeaderBeforeOrgaButtons {
    font-size: 1rem;
  }
  .GremienHeaderBeforeOrgaButtons ul {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }
  #gremien-container #gremien-right .gremien-page {
    padding-top: 0.75rem;
    padding-left: var(--pa-page-gutter);
    padding-right: var(--pa-page-gutter);
    /* (11) eigene Zugabe: lange E-Mail-Adressen und URLs sprengen sonst die Tabelle und
		 *      damit die Seite. Bewusst OHNE display:block am table - das wuerde die Tabelle
		 *      auf Inhaltsbreite schrumpfen und die Darstellung sichtbar veraendern. */
  }
  #gremien-container #gremien-right .gremien-page .page-header {
    margin-bottom: 0.5rem;
  }
  #gremien-container #gremien-right .gremien-page .page-header h3 {
    font-size: 1.4rem;
    line-height: 1.25;
    margin-bottom: 0;
  }
  #gremien-container #gremien-right .gremien-page .page-description {
    margin-bottom: 0.75rem;
    line-height: 1.45;
  }
  #gremien-container #gremien-right .gremien-page .page-description img {
    max-width: 100%;
    height: auto;
  }
  #gremien-container #gremien-right .gremien-page table {
    max-width: 100%;
  }
  #gremien-container #gremien-right .gremien-page table th, #gremien-container #gremien-right .gremien-page table td {
    word-break: normal;
    overflow-wrap: anywhere;
  }
  #FooterContent {
    padding-left: var(--pa-page-gutter);
    padding-right: var(--pa-page-gutter);
  }
  #Footer #FooterContent .menu--footer {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
  #Footer #FooterContent .menu--footer .footer-left, #Footer #FooterContent .menu--footer .footer-right {
    min-width: 0;
  }
  #Footer #FooterContent .menu--footer .footer-right {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0;
  }
  .NewsPageContent {
    margin-left: 0;
  }
  .CompanyBackLinkCol {
    margin-left: 0;
    padding: 0.75rem var(--pa-page-gutter);
  }
  .news-body img {
    max-width: 100%;
    height: auto;
  }
  .NewsPage .NewsPageTop {
    min-height: 120px;
    margin-top: 1rem;
  }
  .NewsPage .NewsDateAuthor {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .NewsPage .NewsDateAuthor .NewsDateAuthor-Separator {
    display: none;
  }
}
/* -------------------------------------------------------------------------------------
 * (10) Anmeldeformular einspaltig und mit erreichbaren Zielflaechen
 *
 * Die Profil-Dialoge des Portals stapeln Beschriftung und Feld unterhalb 576px bereits von
 * selbst - standardGremien.scss traegt dafuer seit #49004 ein Netz fuer .modal-body und
 * .EditGroup. Offen war nur die zentrale Anmeldung, die hier steht.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #CentralLogInForm {
    max-width: 100%;
    /* Das Auge liegt als position:absolute ueber dem Feld (die Regel weiter oben blendet
		 * die .input-group-text aus und holt nur dieses eine Symbol zurueck). Ohne senkrechte
		 * Ausrichtung klebt es an der Oberkante des Feldes. 44px Zielflaeche, ohne das Symbol
		 * selbst zu vergroessern. */
    /* Zielflaeche der Zusatzlinks unter dem Anmeldeknopf - padding:0 weiter oben macht
		 * sie sonst nur texthoch. */
  }
  #CentralLogInForm fieldset.EditKontakt {
    padding: 1.25rem 1rem;
  }
  #CentralLogInForm legend {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  #CentralLogInForm .form-control {
    width: 100%;
  }
  #CentralLogInForm #togglePasswordIcon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  #CentralLogInForm .PreLoginActionContainer .PwRecoverContainer a.PortalRecoverLink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* -------------------------------------------------------------------------------------
 * (1) Kernpunkt der Liste: mobil nur Logo und Hamburger.
 *     Benutzerfunktionen wandern in das aufgeklappte Menue.
 *
 * Im Markup steht der Nutzerblock .GremienHeaderOrgaButtons neben dem Logo, das Kundenmenue
 * .GremienHeaderBelow als eigener Zweig darunter. Per CSS laesst er sich nicht dorthin
 * verschieben; er wird deshalb ausgeblendet und erscheint wieder, sobald das Hamburger-Menue
 * offen ist - also direkt ueber den Menuepunkten.
 *
 * Das Ausblenden steht in @supports selector(:has(*)). Wo :has() fehlt, bleibt die heutige
 * Kopfzeile stehen; sonst waeren Profil und Abmelden auf so einem Geraet unerreichbar.
 *
 * Der Kindpfad ist Absicht: steht Organisations_ShowHeaderStandardMenu auf TopNavi oder
 * MainNavi, liegt der Nutzerblock im Standard-Aufklapper #navbarSupportedContent. Dann
 * trifft der Selektor nicht - dort klappt Bootstrap den Block ohnehin schon selbst ein.
 *
 * Bewusste Entscheidung zu Punkt 9 der Liste: die Kopfzeile bleibt fixiert, wird aber flach
 * (Logo + Hamburger, rund 56px). Die Alternative - nur die Menuezeile stehen lassen und den
 * Rest wegscrollen - wuerde diesen Aufklapper mit nach oben nehmen, sobald man gescrollt hat.
 * ------------------------------------------------------------------------------------- */
@supports selector(:has(*)) {
  @media (max-width: 767.98px) {
    #HeaderContent > nav.navbar > .container-fluid > .GremienHeaderOrgaButtons {
      display: none !important;
    }
    #Header:has(.GremienHeaderBelow .navbar-collapse.show) #HeaderContent > nav.navbar > .container-fluid > .GremienHeaderOrgaButtons {
      display: flex !important;
      flex: 0 0 100%;
      justify-content: flex-start !important;
      margin-left: 0 !important;
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--pa-border);
    }
  }
}
/* =====================================================================================
 * (12) Nachjustiert am Geraet (2026-09-13) - Schrift eine Stufe kleiner, seitliche
 *      Abstaende halbiert.
 *
 * Zwei Stellschrauben, beide hier - nicht in den Einzelregeln nachziehen:
 *   --pa-page-gutter   seitlicher Abstand   1rem (16px)      ->  .5rem (8px)
 *   --pa-font-mobile   Fliesstext im Inhalt 1.42083rem (22.7px) -> 1.2rem (19.2px)
 *
 * Warum die Schrift nicht ueber $font-size-base in _gremienvariablen.scss: die Variable
 * gilt fuer ALLE Breiten, am Desktop ist die grosse Grundschrift gewollt.
 *
 * Warum die Ueberschriften trotzdem eine eigene Zeile brauchen: Bootstrap rechnet sie als
 * Vielfaches von $font-size-base und laesst sie per RFS mit der Fensterbreite schrumpfen.
 * Nachgemessen am echten Bootstrap dieser Installation (scssphp, $font-size-base gesetzt):
 *
 *   h1  calc(1.4802075rem + 2.76249vw)    -> auf 390px rund 34.5px
 *   h2  calc(1.409166rem + 1.909992vw)    -> auf 390px rund 30.0px
 *   h3  calc(1.37364525rem + 1.483743vw)  -> auf 390px rund 27.8px
 *
 * Das sind rem und vw, beide wurzel- bzw. fensterbezogen: eine kleinere Schrift am
 * Container vererbt sich NICHT an sie. Die Stufen unten senken alles um rund ein Fuenftel,
 * gleichmaessig, damit der Abstand zwischen Ueberschrift und Fliesstext erhalten bleibt.
 *
 * Nebenwirkung, bewusst in Kauf genommen: die Personen-Icons sind em-basiert (Stufen
 * initials-* / member-image-* in standardGremien.scss). Sie werden auf dem Handy im
 * selben Verhaeltnis kleiner - auf dieser Breite erwuenscht.
 * ===================================================================================== */
@media (max-width: 767.98px) {
  :root {
    --pa-page-gutter: .5rem;
    --pa-font-mobile: 1.2rem;
  }
  #gremien-container #gremien-right {
    font-size: var(--pa-font-mobile);
  }
  #gremien-container #gremien-right h1 {
    font-size: 1.7rem;
  }
  #gremien-container #gremien-right h2 {
    font-size: 1.55rem;
  }
  #gremien-container #gremien-right h3, #gremien-container #gremien-right .card-title {
    font-size: 1.4rem;
  }
  #gremien-container #gremien-right h4, #gremien-container #gremien-right h5, #gremien-container #gremien-right h6 {
    font-size: 1.25rem;
  }
  #gremien-container .card {
    --bs-card-spacer-x: .5rem;
  }
}
/* =====================================================================================
 * (13) Seitlicher Rand, zweiter Anlauf (2026-09-13)
 *
 * Block (12) halbierte den Rand der .gremien-page von 16px auf 8px - sichtbar geaendert
 * hat das wenig, weil die .gremien-page nur der LETZTE von vier Containern ist. Am Live-
 * Portal nachgerechnet (standardGremien.css und customGremien.css abgerufen, Kette aus
 * MasterGremien.php dagegengehalten):
 *
 *   #Rahmen             .container-fluid   padding-x   12px
 *   #Gesamt             -                               0
 *   #Inhalte            .container         padding-x   12px
 *   #gremien-container  .container-fluid   padding-x   12px
 *   .row.gremien-row    .row               margin-x   -12px   (hebt den Container auf)
 *   #gremien-right      .col               padding      0     (standardGremien)
 *   .gremien-page                          padding-x    8px   (Block 12)
 *                                                      -----
 *                                           je Seite    32px
 *
 * Bootstrap rechnet alle diese Werte aus EINEM Token: --bs-gutter-x (1.5rem, je Seite
 * halbiert). Den zu verkleinern ist der saubere Hebel - er zieht Container-Polster und
 * negative Zeilenraender gemeinsam, es kann also kein Ueberhang entstehen.
 *
 * ZWEI FALLEN, beide am ausgelieferten CSS geprueft:
 *
 * 1. Nicht nur .row setzt den Token neu, sondern AUCH .container/.container-fluid
 *    (eine gemeinsame Regel ganz oben in Bootstrap). Ein Ueberschreiben an der obersten
 *    Ebene vererbt sich deshalb NICHT nach unten - jede Ebene braucht ihren Selektor.
 *    Genau deshalb steht unten eine lange Selektorliste und nicht eine Zeile am #Rahmen.
 *
 * 2. Wer den Token an .row setzt, ueberschreibt damit auch .g-0 - das ist nur eine
 *    Utility-Klasse, die denselben Token auf 0 stellt, und sie ist NICHT !important.
 *    Die Bauform aus #49004 (.form-group.row.g-0 in den Portal-Dialogen) braucht dort
 *    aber ausdruecklich 0, sonst zieht der negative Zeilenrand das Label aus dem Dialog.
 *    Daher :not(.g-0):not(.gx-0).
 *
 * Ergebnis je Seite: 4 + 4 + (4 - 4) + 8 = 16px statt 32px. Das ist zugleich der Wert,
 * den der Kunde urspruenglich genannt hat ("16-20px").
 * Noch schmaler: --pa-container-gutter auf 0 - dann bleiben die 8px der .gremien-page.
 * ===================================================================================== */
@media (max-width: 767.98px) {
  /* Der Fuss hat links ein eigenes padding-left:10px (Regel weiter oben in dieser Datei),
	 * rechts kommt der Wert aus dem Container-Token. Bisher stand das 10 zu 12 und fiel
	 * nicht auf; mit dem kleineren Token waere es 10 zu 4 - sichtbar schief. Gleichziehen. */
  :root {
    --pa-container-gutter: .5rem;
  }
  #Rahmen, #Header, #Footer, #Rahmen .container, #Rahmen .container-fluid, #Header .container-fluid, #Footer .container-fluid, #Rahmen .row:not(.g-0):not(.gx-0), #Header .row:not(.g-0):not(.gx-0), #Footer .row:not(.g-0):not(.gx-0) {
    --bs-gutter-x: var(--pa-container-gutter);
  }
  #Footer {
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
}