/*
 * orga.diy — Marke im Frontend. Gilt nur fuer die Site orgadiy; die
 * Bedingung dazu steht am Ende von setup.typoscript.
 *
 * Alle Werte kommen aus orga-diy-designsystem/tokens/tokens.css. Keine losen
 * Hex-Werte hier: braucht es eine neue Farbe, gehoert sie in tokens.json und
 * tokens.css wird daraus neu erzeugt.
 *
 * Ladefolge: tokens.css, fonts.css, diy.css, dann diese Datei. diy.css
 * bleibt fuer alle Sites neutral, hier wird sie fuer orgadiy ueberschrieben.
 */

/* ------------------------------------------------------------------ *
 * 1. Bootstrap-Bruecke
 *
 * hyper-theme bringt Bootstrap mit. Statt jede Regel einzeln zu ueber-
 * schreiben, werden die Bootstrap-Variablen auf die Tokens gelegt — damit
 * traegt auch alles, was hier nicht eigens genannt ist, die Marke.
 * ------------------------------------------------------------------ */

:root,
html[data-bs-theme] {
  --bs-body-bg: var(--papier);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);
  --bs-secondary-bg: var(--papier-blatt);
  --bs-tertiary-bg: var(--papier-schatten);

  --bs-primary: var(--brand);
  --bs-primary-rgb: 227, 72, 15;
  --bs-secondary: var(--ink-muted);
  --bs-success: var(--erfolg);
  --bs-warning: var(--warnung);
  --bs-danger: var(--akzent);
  --bs-info: var(--fremd);

  --bs-link-color: var(--brand-text);
  --bs-link-hover-color: var(--akzent-text);
  --bs-link-decoration: underline;

  --bs-border-color: var(--linie);
  --bs-border-width: var(--strich-1);

  /* Regel 2: keine Rundungen. Bootstrap kennt sechs Radius-Stufen. */
  --bs-border-radius: var(--radius-none);
  --bs-border-radius-sm: var(--radius-none);
  --bs-border-radius-lg: var(--radius-none);
  --bs-border-radius-xl: var(--radius-none);
  --bs-border-radius-2xl: var(--radius-none);
  --bs-border-radius-pill: var(--radius-none);

  /* Regel 1: keine weichen Schatten. */
  --bs-box-shadow: var(--versatz);
  --bs-box-shadow-sm: 3px 3px 0 var(--linie);
  --bs-box-shadow-lg: var(--versatz);
  --bs-box-shadow-inset: none;

  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.625;
}

/* ------------------------------------------------------------------ *
 * 1b. Theme-Bruecke (--ct-*)
 *
 * hyper-theme ist ein Bootstrap-Derivat mit eigenem Variablen-Praefix:
 * es liest --ct-*, nicht --bs-*. Die --bs-Bruecke oben allein faerbt
 * deshalb nur einen Teil. Hier liegt der eigentliche Hebel — die
 * Utility-Klassen des Themes (.rounded-pill & Co.) tragen !important
 * und lassen sich nur ueber ihre Variable eckig bekommen.
 *
 * Die -rgb-Tripel muessen als Zahlen dastehen: das Theme setzt sie in
 * rgba(var(--ct-…-rgb), .15) ein, wo ein Hex-Wert nicht funktioniert.
 * Sie entsprechen den Tokens des hellen Themes; die dunklen stehen im
 * Block direkt darunter.
 *
 * Der Selektor nennt html[data-bs-theme] mit: hyper setzt seine dunklen
 * Werte an html[data-bs-theme=dark], und das ist spezifischer als :root.
 * Mit :root allein kamen im dunklen Thema blaugraue Ueberschriften und
 * Links durch (#aab8c5) und die Marke war nur noch halb da.
 * ------------------------------------------------------------------ */

:root,
html[data-bs-theme] {
  --ct-body-bg: var(--papier);
  --ct-body-color: var(--ink);
  --ct-body-color-rgb: 21, 19, 15;
  --ct-body-bg-rgb: 232, 227, 213;
  --ct-emphasis-color: var(--ink);
  --ct-secondary-color: var(--ink-muted);
  --ct-tertiary-color: var(--ink-muted);
  --ct-secondary-bg: var(--papier-blatt);
  --ct-tertiary-bg: var(--papier-schatten);
  --ct-heading-color: var(--ink);
  --ct-highlight-color: var(--ink);
  --ct-code-color: var(--akzent-text);

  --ct-primary: var(--brand);
  --ct-primary-rgb: 227, 72, 15;
  --ct-secondary: var(--ink-muted);
  --ct-success: var(--erfolg);
  --ct-success-rgb: 87, 193, 74;
  --ct-warning: var(--warnung);
  --ct-warning-rgb: 242, 189, 0;
  --ct-danger: var(--akzent);
  --ct-danger-rgb: 232, 49, 143;
  --ct-info: var(--fremd);
  --ct-info-rgb: 77, 127, 232;

  --ct-link-color: var(--brand-text);
  --ct-link-hover-color: var(--akzent-text);
  --ct-link-decoration: underline;

  --ct-border-color: var(--linie);
  --ct-border-color-translucent: var(--linie);
  --ct-border-width: var(--strich-1);
  --ct-form-valid-border-color: var(--linie);
  --ct-form-invalid-border-color: var(--linie);

  /* Regel 2: keine Rundungen. Auch -pill, sonst bleiben die Chips oval. */
  --ct-border-radius: var(--radius-none);
  --ct-border-radius-sm: var(--radius-none);
  --ct-border-radius-lg: var(--radius-none);
  --ct-border-radius-xl: var(--radius-none);
  --ct-border-radius-xxl: var(--radius-none);
  --ct-border-radius-2xl: var(--radius-none);
  --ct-border-radius-pill: var(--radius-none);
  --ct-btn-border-radius: var(--radius-none);

  /* Regel 1: keine weichen Schatten. */
  --ct-box-shadow: var(--versatz);
  --ct-box-shadow-sm: 3px 3px 0 var(--linie);
  --ct-box-shadow-lg: var(--versatz);
  --ct-box-shadow-inset: none;

  --ct-font-sans-serif: var(--font-sans);
  --ct-font-monospace: var(--font-mono);
  --ct-body-font-family: var(--font-sans);
  --ct-body-font-size: 16px;
  --ct-body-line-height: 1.625;
}

/* Dieselben Tripel fuer das dunkle Thema. Ohne sie lief .text-body
   (rgba(var(--ct-body-color-rgb))) als Fast-Schwarz auf Fast-Schwarz. */
html[data-bs-theme="dark"] {
  --ct-body-color-rgb: 241, 237, 225;
  --ct-body-bg-rgb: 10, 10, 9;
  --ct-emphasis-color-rgb: 241, 237, 225;
  --ct-secondary-color-rgb: 154, 148, 135;
  --ct-tertiary-color-rgb: 154, 148, 135;
  --ct-secondary-bg-rgb: 21, 20, 18;
  --ct-tertiary-bg-rgb: 4, 4, 4;
  --ct-primary-rgb: 255, 90, 31;
  --ct-success-rgb: 110, 217, 87;
  --ct-warning-rgb: 255, 208, 46;
  --ct-danger-rgb: 255, 79, 163;
  --ct-info-rgb: 111, 144, 255;
  --ct-link-color-rgb: 255, 138, 77;
  --ct-link-hover-color-rgb: 255, 126, 188;
  --bs-primary-rgb: 255, 90, 31;
}

/*
 * Statuspunkte sind die einzige Ausnahme von Regel 2. Sie holen sich den
 * Kreis direkt aus --radius-pill, nicht ueber die Utility-Klasse.
 */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--erfolg);
}

/* ------------------------------------------------------------------ *
 * 2. Grundlagen
 * ------------------------------------------------------------------ */

body {
  background: var(--papier);
  color: var(--ink);
  font-family: var(--font-sans);
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  text-wrap: balance;
  hyphens: auto;
}

h1, .h1 { font-size: 52px; line-height: 58px; }
h2, .h2 { font-size: 34px; line-height: 38px; }
h3, .h3 { font-size: 24px; line-height: 26px; }

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  text-transform: none;
}

hr {
  border: 0;
  border-top: var(--strich-1) solid var(--linie);
  opacity: 1;
}

/* Regel 10: Fokusring, eckig, nie entfernt. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--strich-2) solid var(--fokus);
  outline-offset: 2px;
}

/* Bootstrap setzt sonst einen weichen blauen Schein auf fokussierte Felder. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible {
  box-shadow: none;
  border-color: var(--linie);
}

::selection {
  background: var(--akzent);
  color: var(--auf-hell);
}

/* ------------------------------------------------------------------ *
 * 3. Buttons — angedrueckte Zettel
 *
 * Zeigen rutscht 1px, Druecken 3px und der Versatz schrumpft auf 2px.
 * Mehr Animation gibt es nicht.
 * ------------------------------------------------------------------ */

.btn {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 13px 20px;
  border: var(--strich-2) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
  color: var(--ink);
  box-shadow: var(--versatz);
  transition: transform .04s linear, box-shadow .04s linear;
}

.btn:hover {
  background: var(--papier-blatt);
  color: var(--ink);
  border-color: var(--linie);
  transform: translate(1px, 1px);
  box-shadow: 4px 4px 0 var(--linie);
}

.btn:active,
.btn:first-child:active,
.btn.active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--linie);
  border-color: var(--linie);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:first-child:active {
  background: var(--brand);
  color: var(--auf-hell);
  border-color: var(--linie);
}

/* Regel 5: Riso-Farben sind Flaechen, darauf steht immer auf-hell. */
.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:first-child:active {
  background: var(--akzent);
  color: var(--auf-hell);
  border-color: var(--linie);
}

.btn-success,
.btn-success:hover,
.btn-success:active {
  background: var(--erfolg);
  color: var(--auf-hell);
  border-color: var(--linie);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:active {
  background: var(--warnung);
  color: var(--auf-hell);
  border-color: var(--linie);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active {
  background: var(--papier-blatt);
  color: var(--ink);
  border-color: var(--linie);
}

.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:first-child:active {
  background: var(--fremd);
  color: var(--auf-hell);
  border-color: var(--linie);
}

/* Bootstrap liefert fuer die btn-outline-* Varianten eigene Farb-Variablen mit,
   die orga-diy sonst nirgends setzt - ohne das faellt der Text auf Weiss
   (border-color: transparent + color: #fff aus Bootstraps Hover-Fallback). */
.btn-outline-info {
  background: var(--papier-blatt);
  color: var(--fremd-text);
  border-color: var(--fremd);
}

.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:first-child:active {
  background: var(--fremd);
  color: var(--auf-hell);
  border-color: var(--fremd);
}

/* Ruhig: kein Kasten, nur Unterstreichung. Fuer Navigation in einer Karte. */
.btn-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-thickness: var(--strich-2);
  text-underline-offset: 4px;
  padding-left: 4px;
  padding-right: 4px;
}

.btn-link:hover {
  background: transparent;
  border-color: transparent;
  transform: none;
  box-shadow: none;
  color: var(--akzent-text);
}

.btn-sm {
  font-size: 14px;
  padding: 8px 13px;
  border-width: var(--strich-1);
  box-shadow: 3px 3px 0 var(--linie);
}

.btn-lg {
  font-size: 18px;
  padding: 15px 24px;
}

/* Deaktiviert: gestrichelt, kein Schatten. Der Text erklaert, warum. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  background: var(--papier-schatten);
  color: var(--ink-muted);
  border-style: dashed;
  border-color: var(--linie);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

/*
 * Knall-Button: Startseite, einer pro Seite, mit Fehldruck-Versatz.
 * In der App gibt es ihn nicht.
 */
.btn-knall {
  background: var(--brand);
  color: var(--auf-hell);
  border: var(--strich-2) solid var(--linie);
  box-shadow: var(--versatz-fehldruck);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 26px;
}

.btn-knall:hover { background: var(--brand); color: var(--auf-hell); box-shadow: 4px 4px 0 var(--akzent); }
.btn-knall:active { box-shadow: 2px 2px 0 var(--akzent); }

/* ------------------------------------------------------------------ *
 * 4. Formularfelder
 *
 * Dreimal im Jahr, auf dem Handy, im Stehen, mit klammen Fingern.
 * ------------------------------------------------------------------ */

.form-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.form-control,
.form-select {
  min-height: 48px;
  padding: 10px 12px;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
}

.form-control::placeholder {
  color: var(--ink-muted);
}

/* Daten stehen in mono — man sieht sofort, was reingehoert. */
.form-control[type="number"],
.form-control[type="time"],
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="tel"],
.form-control.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.form-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

/*
 * Fehler: rot und dick, der Feldname darueber auch rot, Meldung fett mit
 * Raute davor. Richtig Ausgefuelltes bleibt, wie es war - kein Gruen: im
 * vielen Gruen ging frueher unter, was falsch war.
 */
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-width: var(--strich-2);
  border-color: var(--fehler, #c62828);
  background-image: none;
  background-color: #fdeeee;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  border-color: var(--fehler, #c62828);
  box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.25);
}

/* Feldname ueber einem fehlerhaften Feld */
:is(div, fieldset):has(> .is-invalid, > .input-group > .is-invalid) > .form-label,
.was-validated :is(div, fieldset):has(> :invalid, > .input-group > :invalid) > .form-label {
  color: var(--fehler, #c62828);
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: var(--fehler, #c62828);
  border-width: var(--strich-2);
}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--fehler, #c62828);
}

/* Kein Gruen fuer richtig Ausgefuelltes (Bootstrap :valid / .is-valid) */
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--bs-border-color);
  background-image: none;
  padding-right: 0.75rem;
}

.form-select.is-valid,
.was-validated .form-select:valid {
  border-color: var(--bs-border-color);
  --bs-form-select-bg-icon: none;
  padding-right: 2.25rem;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: var(--linie);
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: var(--bs-form-check-input-checked-bg-color, var(--akzent));
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: inherit;
}

.valid-feedback,
.valid-tooltip {
  display: none !important;
}

/* Zusammenfassung oben im Formular (Ui/form-errors.js) */
.alert.dd-form-errors,
.dd-form-errors {
  border: var(--strich-2) solid var(--fehler, #c62828) !important;
  background: #fdeeee !important;
  transform: none;
  color: var(--ink, inherit);
}

.dd-form-errors a {
  color: var(--fehler, #c62828);
  font-weight: 700;
}

.invalid-feedback,
.error {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--fehler, #c62828);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.invalid-feedback::before,
.error::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--fehler, #c62828);
  transform: rotate(45deg);
}

.form-check-input {
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background-color: var(--papier-blatt);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--linie);
}

.form-check-label {
  padding-left: var(--space-2);
}

/* ------------------------------------------------------------------ *
 * 5. Karten und Flaechen
 * ------------------------------------------------------------------ */

.card,
.list-group-item {
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  color: var(--ink);
}

.card {
  box-shadow: var(--versatz);
}

.card-header,
.card-footer {
  background: transparent;
  border-color: var(--linie);
  border-width: var(--strich-1);
}

.card-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.table {
  --bs-table-bg: transparent;
  color: var(--ink);
  border-color: var(--linie);
}

.table > :not(caption) > * > * {
  border-bottom-width: var(--strich-1);
  border-color: var(--linie);
  background: transparent;
}

.table thead th {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom-width: var(--strich-2);
}

/* Zahlen in Tabellen stehen untereinander. */
.table td.zahl,
.table td .data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * 6. Hinweise
 *
 * Zettel mit Versatz, um ±0,6° gedreht. Der gelbe Lueckenkasten und der
 * schwarze Alarmkasten sind laut: hoechstens einer von beiden pro Bildschirm.
 * ------------------------------------------------------------------ */

.alert {
  position: relative;
  background: var(--papier-blatt);
  color: var(--ink);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  box-shadow: var(--versatz);
  padding: var(--space-4) var(--space-5);
  transform: rotate(-0.6deg);
}

.alert + .alert {
  transform: rotate(0.6deg);
}

.alert-heading {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 26px;
  text-transform: uppercase;
}

.alert-success { background: var(--papier-blatt); }
.alert-warning { background: var(--warnung); color: var(--auf-hell); }
.alert-info    { background: var(--papier-blatt); }

/* Regel 8: der lauteste Zustand ist ein schwarzer Kasten, kein rotes Banner. */
.alert-danger {
  background: var(--ink);
  color: var(--auf-invers);
  border-color: var(--ink);
}

/* Knoepfe ausgenommen: die stehen auf Papier und brauchen dunkle Schrift. */
.alert-danger a:not(.btn),
.alert-danger .btn-link { color: var(--auf-invers); }

/* Auf Gelb ist Markenorange zu blass, im dunklen Thema fast unsichtbar. */
.alert-warning a:not(.btn),
.alert-warning .btn-link { color: var(--auf-hell); }

/* .text-dark folgt im dunklen Thema hyper und wird hell — auf Gelb
   bleibt die Schrift aber dunkel, in beiden Themen. */
.bg-warning.text-dark,
.text-bg-warning { color: var(--auf-hell) !important; }

/* Marke links: Kreis, Quadrat, Raute, Balken — Farbe allein nie. */
.alert::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: calc(var(--space-5) * -1 + 6px);
  width: 12px;
  height: 12px;
}

.alert-success::before { background: var(--erfolg); border-radius: var(--radius-pill); }
.alert-warning::before { background: var(--ink); }
.alert-danger::before  { background: var(--akzent); transform: rotate(45deg); }
.alert-info::before    { background: var(--fremd); height: 5px; top: calc(var(--space-4) + 4px); }

/* ------------------------------------------------------------------ *
 * 7. Status-Chips
 *
 * Farbe, Wort und Form — der Plan haengt am Ende als Schwarz-Weiss-Kopie
 * am Container. Nebeneinander nie zweimal derselbe Winkel.
 * ------------------------------------------------------------------ */

.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
  color: var(--auf-hell);
}

.badge::before,
.status::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: currentColor;
}

.status-confirmed { background: var(--erfolg); transform: rotate(-1.5deg); }
.status-confirmed::before { border-radius: var(--radius-pill); }

.status-open { background: var(--warnung); transform: rotate(1.2deg); }
.status-open::before { border-radius: var(--radius-none); }

.status-cancelled { background: var(--akzent); transform: rotate(-0.8deg); }
.status-cancelled::before { transform: rotate(45deg); }

.status-external { background: var(--fremd); transform: rotate(1.6deg); }
.status-external::before { height: 4px; width: 12px; }

.status-alert {
  background: var(--ink);
  color: var(--auf-invers);
  transform: rotate(-1.1deg);
}
.status-alert::before { background: var(--akzent); transform: rotate(45deg); }

/* Belehrungen und Regeln im Profil (Partials/Skill/Picker.html): Name
 * links, Stand rechts; auf dem Telefon rutscht der Chip unter den Namen. */
.skill-status-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--strich-1) solid var(--linie);
}

.skill-status-list > li:last-child {
  border-bottom: 0;
}

.skill-status-list__name {
  flex: 1 1 16rem;
}

/* Zaehlerstaende im Seitenkopf sind keine Chips, sondern kleine Zettel. */
.counter {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
}

.counter-value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 38px;
}

.counter-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ *
 * 8. Navigation und Kopf
 * ------------------------------------------------------------------ */

.navbar {
  background: var(--papier-blatt);
  border-bottom: var(--strich-2) solid var(--linie);
}

.nav-link {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-thickness: var(--strich-2);
  text-underline-offset: 4px;
}

.nav-link.active {
  color: var(--brand-text);
}

.text-contrast {
  color: var(--auf-invers);
}

/*
 * Hero. Regel 4: keine Farbverlaeufe, Regel 6: eine orangene Vollflaeche
 * pro Bildschirm. Die dunkle Flaeche liegt als Vollton darueber, nicht als
 * weiche Abdunklung.
 */
/*
 * Buehne und Fuss nehmen flaeche-laut, nicht ink.
 *
 * ink ist Schrift und kippt mit dem Thema — im dunklen Thema ist sie
 * fast weiss. Als Flaeche benutzt ergab das ein beiges Band quer ueber
 * den schwarzen Karton, also genau das Gegenteil von dem, was die
 * Flaeche sein soll. flaeche-laut ist in beiden Themes dunkel: im
 * hellen die Tinte, im dunklen die tiefste Kartonlage.
 *
 * Die kleinen lauten Kaesten (Alarm, callout--ink, Sticker) drehen sich
 * weiterhin um — bei einer Handflaeche ist die Umkehrung die Geste, bei
 * einem Band ueber die halbe Seite ist sie ein Fehler.
 */
.custom-hero {
  position: relative;
  min-height: 60vh;
  background-color: var(--flaeche-laut);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  color: var(--auf-laut);
  border-bottom: var(--strich-2) solid var(--linie);
  z-index: 1;
}

.custom-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--flaeche-laut);
  opacity: 0.72;
  z-index: -1;
}

.custom-hero-bg-blur {
  filter: blur(8px);
  transform: scale(1.05);
}

.custom-hero h1,
.custom-hero .plakat-xl {
  font-family: var(--font-display);
  text-transform: uppercase;
  /* Bootstrap faerbt h1 mit --bs-heading-color, und das ist im dunklen
     Thema ein Blaugrau (gemessen rgb(170,184,197)). Eine Farbe am
     Element schlaegt jede Vererbung, deshalb stand die Plakatzeile
     blaustichig auf dem Karton statt in Papierfarbe. inherit holt sie
     zurueck an .custom-hero und damit an auf-laut. */
  color: inherit;
}

.custom-hero-subtitle {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warnung);
}

/*
 * Sticker und Gaffa-Streifen stehen 1–2° schief, nebeneinander nie im
 * selben Winkel. Fliesstext und Tabellen bleiben gerade.
 */
.sticker {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--auf-hell);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
  font-family: var(--font-display);
  text-transform: uppercase;
  transform: rotate(-1.6deg);
}

.sticker + .sticker { transform: rotate(1.3deg); }

/*
 * Erfahrungsstufe mit ihrem Symbol (Partials/Staff/RankIcon.html).
 * Ueberall: Symbol vor dem Namen, auf der Grundlinie. Im Profil steht
 * sie als kleiner Zettel - Stempelschrift, Kante, harter Versatz, leicht
 * schief wie jeder Sticker. Papierfarben statt Orange: die orangene
 * Flaeche gehoert auf diesem Bildschirm dem Knopf.
 */
.rang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.rang-icon {
  flex: none;
}

.rang--sticker {
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--papier-blatt);
  color: var(--ink);
  border: var(--strich-1) solid var(--linie);
  box-shadow: 3px 3px 0 var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  max-width: 100%;
  transform: rotate(-1.2deg);
}

.rang--klein {
  gap: var(--space-1);
}

/*
 * Dieselbe Stufe als Mini-Zettel im Namens-Chip der Leiste. Die Farbe
 * kommt von den Stufenklassen darunter (.rang--eingeweiht ...), die
 * Kante haelt auch die papierfarbene Einstiegsstufe vom Chip ab. Die
 * Stufen drehen sich selbst schon leicht - hier nicht noch einmal.
 */
.rang--leiste {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 6px;
  background: var(--papier-blatt);
  color: var(--ink);
  border: var(--strich-1) solid var(--linie);
  box-shadow: 2px 2px 0 var(--linie);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Jede Stufe ihre Druckfarbe - vom leeren Papier bis zum Pink. Nur Riso-
 * Flaechen aus tokens.css, und nach Regel 5 steht darauf immer
 * --auf-hell; der Gaffa-Meister ist der schwarze Gaffa-Streifen aus dem
 * Markenhandbuch und traegt --auf-invers. Nachgerechnet (WCAG 2.1):
 *
 *   Stufe                 Flaeche     hell     dunkel
 *   Kabelbinder-Azubi     papier-blatt 16,4:1  15,7:1
 *   Pfandbecher-Held      erfolg        8,1:1  10,8:1
 *   Bierbank-Statiker     warnung      10,7:1  13,1:1
 *   Gaffa-Meister         ink          16,4:1  16,9:1
 *   Nachtschicht-Veteran  fremd         4,9:1   6,5:1
 *   Festival-Urgestein    akzent        4,7:1   6,3:1
 *
 * Gegen den Seitengrund traegt die 2px-Kante in --linie, nicht die
 * Flaeche (Gelb auf Papier waere allein 1,4:1). Orange bleibt frei: die
 * eine orangene Flaeche des Bildschirms ist der Speichern-Knopf.
 *
 * Status-Chips benutzen dieselben Farben, sind aber an Form und Wort zu
 * erkennen (Kreis, Quadrat, Raute, Balken). Der Rang traegt keine Form,
 * sondern sein Symbol - verwechseln laesst er sich damit nicht.
 */
.rang--eingeweiht { background: var(--erfolg); color: var(--auf-hell); }
.rang--stammcrew { background: var(--warnung); color: var(--auf-hell); transform: rotate(1.1deg); }
.rang--routine { background: var(--ink); color: var(--auf-invers); border-color: var(--ink); transform: rotate(-1.6deg); }
.rang--veteran { background: var(--fremd); color: var(--auf-hell); transform: rotate(1.4deg); }
.rang--urgestein { background: var(--akzent); color: var(--auf-hell); transform: rotate(-0.8deg); }
.rang--legende { background: var(--papier); color: var(--ink); box-shadow: 3px 3px 0 var(--akzent); transform: rotate(1.2deg); }
.rang--inventar { background: var(--ink); color: var(--warnung); border-color: var(--ink); transform: rotate(-1.2deg); }
.rang--mythos { background: linear-gradient(135deg, var(--akzent), var(--fremd)); color: var(--auf-hell); box-shadow: 3px 3px 0 var(--ink); transform: rotate(0.6deg); }

/* ------------------------------------------------------------------ *
 * 9. select2 — Mehrfachauswahl fuer News-Schlagworte
 *
 * Funktional unveraendert uebernommen, Farben und Kanten auf Tokens.
 * ------------------------------------------------------------------ */

.news-tags-field {
  position: relative;
}

.news-tags-field .select2-container {
  width: 100% !important;
  display: block;
}

.news-tags-field .select2-container--default .select2-selection--multiple {
  min-height: 48px;
  height: auto;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background-color: var(--papier-blatt);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  cursor: text;
}

.news-tags-field .select2-container--default.select2-container--focus .select2-selection--multiple,
.news-tags-field .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--linie);
  outline: var(--strich-2) solid var(--fokus);
  outline-offset: 2px;
  box-shadow: none;
}

.news-tags-field .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Die Schlagworte sind Chips: eckig, 2px Kante, Stempelschrift. */
.news-tags-field .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 4px 10px;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background-color: var(--warnung);
  color: var(--auf-hell);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.news-tags-field .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: -1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--auf-hell);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.news-tags-field .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--akzent-text);
}

.news-tags-field .select2-container .select2-search--inline {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
}

.news-tags-field .select2-container .select2-search--inline .select2-search__field {
  width: auto !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  resize: none !important;
  overflow: hidden !important;
  background: transparent !important;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
}

.news-tags-field .select2-container .select2-search--inline .select2-search__field::placeholder {
  color: var(--ink-muted);
}

.select2-dropdown,
.select2-container--open .select2-dropdown {
  border: var(--strich-1) solid var(--linie) !important;
  border-radius: var(--radius-none) !important;
  background-color: var(--papier-blatt) !important;
  box-shadow: var(--versatz) !important;
  z-index: 99999 !important;
  overflow: hidden;
}

.select2-container--open .select2-dropdown--below { margin-top: var(--space-1); }
.select2-container--open .select2-dropdown--above { margin-bottom: var(--space-1); }

.select2-container--default .select2-results,
.select2-container--default .select2-results > .select2-results__options {
  background-color: var(--papier-blatt) !important;
  color: var(--ink) !important;
  max-height: 240px;
  overflow-y: auto;
}

.select2-container--default .select2-results__option {
  background-color: var(--papier-blatt);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: 15px;
}

/*
 * Reihenfolge mit Absicht: "ausgewaehlt" steht vor "markiert".
 *
 * Beide Regeln sind gleich spezifisch und beide !important - es gewinnt
 * also die spaetere. Der Eintrag unter dem Finger traegt in select2 4.1
 * aber oft beides gleichzeitig (aria-selected="true" und
 * --highlighted). Standen sie andersherum, leuchtete die Zeile, auf der
 * man gerade steht, in Warnfarbe statt in der Marke.
 */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background-color: var(--warnung) !important;
  color: var(--auf-hell) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--brand) !important;
  color: var(--auf-hell) !important;
}

/*
 * Einzelauswahl. Der Abschnitt oben ist fuer das Mehrfachfeld der
 * News-Schlagworte entstanden; die Personensuche in den Protokollen ist
 * ein einfaches Feld und blieb deshalb rund und duenn zwischen lauter
 * eckigen 2px-Kanten stehen.
 */
.select2-container--default .select2-selection--single {
  height: auto;
  min-height: 42px;
  padding: 4px var(--space-2);
  background: var(--papier);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  color: var(--ink);
  line-height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}

.select2-container--default.select2-container--open .select2-selection--single {
  outline: var(--strich-2) solid var(--fokus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 10. TYPO3 EXT:form — Abstaende
 * ------------------------------------------------------------------ */

.frame-type-form_formframework .clearfix {
  margin-bottom: 1.5rem;
}

.frame-type-form_formframework .form-group {
  margin-bottom: 1.25rem;
}

.frame-type-form_formframework .form-label {
  display: block;
  margin-bottom: 0.4rem;
}

.frame-type-form_formframework .row {
  row-gap: 1.25rem;
}

.frame-type-form_formframework .actions {
  margin-top: 1.75rem;
}

.frame-type-form_formframework altcha-widget {
  display: block;
  margin: 0.5rem 0 1.5rem;
}

.frame-type-form_formframework .form-check {
  padding-left: 0;
}

.frame-type-form_formframework .form-check-input {
  margin-left: 0;
}

/* ------------------------------------------------------------------ *
 * 11. Satzspiegel
 *
 * Die Content-Elemente liegen ohne .container direkt in main und laufen
 * deshalb ueber die volle Fensterbreite, waehrend Header und Footer bei
 * 1320px sitzen. Das ist der Grund, warum die Seite "unruhig" wirkt.
 * Statt die Templates umzubauen bekommen die Frames denselben
 * Satzspiegel — der Hero bleibt bewusst vollbreit.
 * ------------------------------------------------------------------ */

main .frame:not(.frame-type-dddiy_hero):not(.frame-type-dddiy_callout) {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/*
 * Content-Blocks rendern ohne den .frame-Wrapper von fluid_styled_content —
 * ihre Sections liefen deshalb ueber die volle Breite, waehrend Kopf und
 * Fuss bei 1320px sassen. Die Knallzeile bleibt aussen vor, die ist als
 * Vollflaeche gemeint und bringt ihren Satzspiegel selbst mit.
 */
main > .noteboard,
main > .pricetable,
main .noteboard,
main .pricetable {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-8);
}

main > *:not(.custom-hero):not(.frame-type-dddiy_hero) {
  padding-block: var(--space-8);
}

/*
 * Ausnahme Backstage.
 *
 * Der Satzspiegel oben ist fuer die oeffentlichen Seiten gedacht: dort
 * steht Fliesstext, und 1320px halten die Zeilen lesbar unter dem Kopf
 * und Fuss, die genauso breit sind. Im Backstage steht kein Fliesstext,
 * sondern Tabellen, Listen und Formulare - dort kostete dieselbe Regel
 * auf einem breiten Schirm ueber 700px links und rechts, nachgemessen
 * bei 2400px Fensterbreite: 378px Rand auf jeder Seite, waehrend der
 * Inhaltsbereich darueber 2076px breit war.
 *
 * .content-page ist der Rumpf des Backstage-Layouts und kommt auf den
 * oeffentlichen Seiten nicht vor - die Marke bleibt dort unveraendert.
 * Den seitlichen Abstand traegt weiterhin .container-fluid.
 */
.content-page main .frame:not(.frame-type-dddiy_hero):not(.frame-type-dddiy_callout),
.content-page main .noteboard,
.content-page main .pricetable {
  max-width: none;
  padding-inline: 0;
}

/* Regel: Abstaende kommen aus der --space-Leiter, nicht aus Einzelmargins. */
main .frame + .frame {
  margin-top: var(--space-8);
}

main .frame > *:last-child {
  margin-bottom: 0;
}

/* Fliesstext laeuft nicht ueber die ganze Breite — sonst wird er unlesbar. */
main .frame-type-text p,
main .frame-type-textmedia p,
main .frame-type-textpic p {
  max-width: 68ch;
}

/* ------------------------------------------------------------------ *
 * 12. Kopf und Fuss
 * ------------------------------------------------------------------ */

.navbar {
  padding-block: var(--space-4);
}

/*
 * Der aktive Punkt war heller Text auf Papier und damit praktisch
 * unsichtbar. Er traegt jetzt dieselbe Unterstreichung wie der Hover,
 * nur dauerhaft — Farbe allein soll den Zustand nicht tragen.
 */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: var(--brand-text);
  text-decoration: underline;
  text-decoration-thickness: var(--strich-2);
  text-underline-offset: 6px;
}

/* Die Theme-Klasse faerbt die Navigation mit einem Verlauf ein (Regel 4). */
.navbar .gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}

.navbar-logo-wrapper img,
.orga-wortmarke img {
  display: block;
  height: 44px;
  width: auto;
}

/*
 * Der Footer stand in einem Blaugrau, das in keinem Token vorkommt.
 * Er ist jetzt ein Blatt Papier mit harter Oberkante.
 */
footer {
  background: var(--papier-blatt);
  color: var(--ink);
  border-top: var(--strich-3) solid var(--linie);
  padding-block: var(--space-8);
}

footer a {
  color: var(--ink);
}

footer a:hover {
  color: var(--brand-text);
}

footer .border-bottom {
  border-bottom: var(--strich-1) solid var(--linie) !important;
}

/* ------------------------------------------------------------------ *
 * 13. Tabs
 *
 * Reiter an einer Mappe: sie sitzen auf der Trennlinie, der aktive ist
 * ein Blatt, das nach vorn kommt und die Linie unter sich aufreisst.
 * ------------------------------------------------------------------ */

.nav-tabs {
  border-bottom: var(--strich-2) solid var(--linie);
  gap: var(--space-2);
}

.nav-tabs .nav-link {
  margin-bottom: calc(var(--strich-2) * -1);
  padding: var(--space-3) var(--space-5);
  border: var(--strich-2) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-schatten);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-tabs .nav-link:hover {
  background: var(--papier-blatt);
  color: var(--ink);
  border-color: var(--linie);
}

.nav-tabs .nav-link.active {
  background: var(--papier-blatt);
  color: var(--ink);
  border-color: var(--linie);
  /* Der aktive Reiter reisst die Linie unter sich auf. */
  border-bottom-color: var(--papier-blatt);
}

.tab-content {
  background: var(--papier-blatt);
  border: var(--strich-2) solid var(--linie);
  border-top: 0;
  padding: var(--space-5);
}

/* Reiter, die ausserhalb eines Formulars liegen (Festival: Pretix,
   Motivation), stehen in einem zweiten .tab-content. Ist dort gerade
   keiner aktiv, bliebe ein leerer Kasten mit Rahmen stehen.
   Aktiv zaehlt auch ein Reiter tiefer im Kasten: bei "Bereich
   bearbeiten" liegen manche Reiter direkt im Kasten, andere in einem
   Formular darin - sonst verschwand dort das ganze Formular. */
.tab-content:has(> .tab-pane):not(:has(.tab-pane.active)) {
  display: none;
}

/* Pills tragen keine Rundung, sonst bleiben sie Dashboard-Design. */
.nav-pills .nav-link {
  border-radius: var(--radius-none);
  border: var(--strich-1) solid transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-pills .nav-link.active {
  background: var(--brand);
  color: var(--auf-hell);
  border-color: var(--linie);
  box-shadow: 3px 3px 0 var(--linie);
}

/* Am Handy: Reiter als Kachelraster (init.js markiert .tab-grid, das
   Raster selbst steht in diy.css). Kacheln mit 2px-Kante, der aktive in
   brand mit hartem Versatz - wie ein gedrueckter Knopf. */
@media (max-width: 767.98px) {
  .nav.tab-grid .nav-link {
    margin: 0;
    border: var(--strich-2) solid var(--linie);
    border-radius: var(--radius-none);
    background: var(--papier-blatt);
    color: var(--ink);
  }

  .nav.tab-grid .nav-link.active {
    background: var(--brand);
    color: var(--auf-hell);
    border-color: var(--linie);
    box-shadow: 3px 3px 0 var(--linie);
  }

  /* Ohne Mappen-Reiter darueber braucht der Inhalt seine Oberkante. */
  .nav.tab-grid ~ .tab-content {
    border-top: var(--strich-2) solid var(--linie);
  }
}

/* ------------------------------------------------------------------ *
 * 14. Karten-Kopf
 *
 * Der Kopf ist der Aufkleber auf der Mappe: Vollton, harte Unterkante,
 * Stempelschrift. Nicht dieselbe Flaeche wie der Rumpf.
 * ------------------------------------------------------------------ */

.card {
  background: var(--papier-blatt);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--auf-invers);
  border-bottom: var(--strich-2) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header .card-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

/* Nur Textlinks werden hell. Knoepfe (auch als <a>) behalten die Schrift
   ihrer Variante: .btn, .btn-outline-* & Co. stehen auf Papier und
   brauchen dunkle Schrift - "a" schlug sonst ".btn" und machte sie im
   schwarzen Kopf unlesbar, am Handy mit umbrechenden Knopfreihen
   besonders (Beamer-Steuerung im Protokoll). */
.card-header a:not(.btn),
.card-header .btn-link {
  color: var(--auf-invers);
}

/* Karteninhalt: 24px waren auf dem Dashboard mit acht Kacheln
   nebeneinander mehr Rand als Inhalt. */
.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  background: var(--papier-schatten);
  border-top: var(--strich-1) solid var(--linie);
}

/* ------------------------------------------------------------------ *
 * 15. Tabellen
 *
 * Der Plan haengt am Ende als Kopie am Container: klare Linien, kein
 * Grau, Zahlen untereinander.
 * ------------------------------------------------------------------ */

.table {
  --ct-table-bg: transparent;
  --ct-table-striped-bg: var(--papier-schatten);
  --ct-table-striped-color: var(--ink);
  --ct-table-hover-bg: var(--warnung);
  --ct-table-hover-color: var(--auf-hell);
  --ct-table-border-color: var(--linie);
  --bs-table-striped-bg: var(--papier-schatten);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--warnung);
  --bs-table-hover-color: var(--auf-hell);
  border-color: var(--linie);
  margin-bottom: 0;
}

/*
 * Der Kopf ist ein schwarzer Balken und bleibt es auch beim Scrollen.
 * Vorher war er dieselbe Flaeche wie der Rumpf und ging unter.
 */
.table > thead {
  background: var(--ink);
}

.table > thead th,
.table > thead td {
  background: var(--ink);
  color: var(--auf-invers);
  border-bottom: var(--strich-2) solid var(--linie);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--strich-1) solid var(--linie);
  vertical-align: middle;
}

/*
 * Zebra: Bootstrap loest das ueber box-shadow inset, was mit dem harten
 * Versatz kollidiert. Deshalb echte Flaechen — und der Wechsel sitzt auf
 * der Zeile, nicht auf der Zelle, sonst franst er an den Raendern aus.
 */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  box-shadow: none;
  background: var(--papier-schatten);
  color: var(--ink);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
  box-shadow: none;
  background: var(--papier-blatt);
  color: var(--ink);
}

.table-hover > tbody > tr:hover > * {
  box-shadow: none;
  background: var(--warnung);
  color: var(--auf-hell);
}

/* Zahlen, Uhrzeiten und Mengen stehen untereinander. */
.table td:has(> time),
.table .data,
.table .zahl {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table-responsive {
  border: var(--strich-2) solid var(--linie);
}

/* Eine Tabelle in einer Karte bringt ihre eigene Kante schon mit. */
.card > .table-responsive,
.card > .table,
.card-body > .table-responsive {
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 16. Landing-Layout
 *
 * LandingPage.html schreibt navbar-dark und footer.bg-dark fest ins
 * Markup. Beides wird hier korrigiert statt im Template: das Layout
 * gehoert allen Sites, diese Datei laedt nur fuer orgadiy.
 * ------------------------------------------------------------------ */

.navbar-dark,
.navbar.navbar-dark {
  background: var(--papier-blatt);
  border-bottom: var(--strich-2) solid var(--linie);
}

.navbar-dark .nav-link,
.navbar-dark .navbar-brand {
  color: var(--ink);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-item.active .nav-link {
  color: var(--brand-text);
}

/* Der aktive Punkt trug nur eine Farbe und ging auf Papier unter. */
.navbar-dark .nav-item.active .nav-link {
  text-decoration: underline;
  text-decoration-thickness: var(--strich-2);
  text-underline-offset: 6px;
}

.navbar-dark .navbar-toggler {
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  color: var(--ink);
}

.navbar-brand img,
.logo-dark,
.logo-light {
  height: 44px;
  width: auto;
}

/*
 * Welche Wortmarke gilt.
 *
 * Das Markup liefert beide Fassungen uebereinander und verliess sich
 * darauf, dass eine davon ausgeblendet wird — im Kopfbereich tat das
 * aber nichts: beide standen auf display:inline. Im hellen Thema fiel
 * das nicht auf, weil die dunkle oben liegt; im dunklen Thema war die
 * Marke schlicht weg.
 *
 * Die Namen sind von der Flaeche her gedacht, nicht von der Farbe der
 * Datei: logo-dark ist die dunkle Wortmarke fuer helle Flaechen,
 * logo-light die helle fuer dunkle. Die Auswahl haengt an denselben
 * Selektoren wie die Tokens, damit es eine Wahrheit gibt.
 */
.logo-light { display: none; }
.logo-dark { display: inline; }

/*
 * Zwei Flaechen sind in beiden Themes dunkel: der Fuss (flaeche-laut)
 * und die Seitenleiste. Dort gilt immer die inverse Wortmarke, egal was
 * das Thema sagt — kein Umschalten, kein invert(). Die Regeln unten
 * gelten deshalb nur ausserhalb dieser beiden.
 */
footer .logo-light,
.leftside-menu .logo-light {
  display: inline;
}

footer .logo-dark,
.leftside-menu .logo-dark {
  display: none;
  filter: none;
}

/*
 * Zwei Faelle, und sie sehen im Markup verschieden aus:
 *
 *   Fuss   — beide Fassungen liegen nebeneinander, also wird getauscht.
 *   Kopf   — dort liegt nur die dunkle Wortmarke. Wird sie ausgeblendet,
 *            ist gar keine Marke mehr da (genau das ist mir hier
 *            passiert). Sie wird deshalb invertiert: die Buchstaben der
 *            Wortmarke sind ausgestanzte Pfade auf transparentem Grund,
 *            invert(1) macht aus Schwarz sauberes Papierweiss und laesst
 *            die Aussparungen durchscheinen.
 *
 * :has am Elternelement unterscheidet die beiden Faelle, statt jede
 * Einbaustelle einzeln zu pflegen.
 */
:root[data-theme="dark"] :not(footer):not(.leftside-menu) > .logo-light,
:root[data-bs-theme="dark"] :not(footer):not(.leftside-menu) > .logo-light { display: inline; }

:root[data-theme="dark"] :has(> .logo-light) > .logo-dark,
:root[data-bs-theme="dark"] :has(> .logo-light) > .logo-dark { display: none; }

:root[data-theme="dark"] :not(:has(> .logo-light)) > .logo-dark,
:root[data-bs-theme="dark"] :not(:has(> .logo-light)) > .logo-dark { filter: invert(1); }

/* … aber nie in Fuss und Seitenleiste, die sind ohnehin dunkel. */
footer .logo-dark,
.leftside-menu .logo-dark { filter: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) :not(footer):not(.leftside-menu) > .logo-light { display: inline; }
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) :has(> .logo-light) > .logo-dark { display: none; }
  :root:not([data-theme="light"]):not([data-bs-theme="light"]) :not(:has(> .logo-light)) > .logo-dark { filter: invert(1); }
  footer .logo-dark,
  .leftside-menu .logo-dark { filter: none; }
}

/*
 * Der Footer ist schwarz: er schliesst die Seite ab, statt als weiteres
 * Blatt Papier danebenzustehen. Die Oberkante bleibt hart.
 */
footer.bg-dark {
  background: var(--flaeche-laut) !important;
  color: var(--auf-laut);
  border-top: var(--strich-3) solid var(--linie);
}

footer.bg-dark a:not(.btn),
footer.bg-dark .btn-link,
footer.bg-dark .text-contrast,
footer.bg-dark p {
  color: var(--auf-laut);
}

footer.bg-dark a:not(.btn):hover {
  color: var(--warnung);
}

/* Auf Schwarz braucht die Datenzeile mehr Helligkeit als ink-muted. */
footer.bg-dark .footer-dataline,
footer.bg-dark .footer-datenzeile {
  color: var(--warnung);
}

footer.bg-dark .trustbar li,
footer.bg-dark .vertrauensleiste li {
  border-color: var(--auf-laut);
  background: transparent;
  color: var(--auf-laut);
}

/* Die Social-Punkte trugen Info-Blau aus dem Theme. */
footer .social-list-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: var(--strich-1) solid var(--auf-laut) !important;
  border-radius: var(--radius-none);
  color: var(--auf-laut) !important;
  background: transparent;
}

footer .social-list-item:hover {
  background: var(--brand);
  color: var(--auf-hell) !important;
}

/*
 * Impressum und Datenschutz standen mit dem Listen-Einzug von Bootstrap
 * eingerueckt und flohen damit aus der Flucht des uebrigen Footers.
 */
footer .ServiceNav,
footer .service-nav,
footer ul.list-inline {
  padding-left: 0;
  margin-left: 0;
}

footer .list-inline-item:first-child {
  margin-left: 0;
  padding-left: 0;
}

/* ------------------------------------------------------------------ *
 * 17. Dunkles Theme vorerst stillgelegt
 *
 * tokens.css schaltet ueber prefers-color-scheme automatisch um. Das ist
 * zurueckgestellt, bis die dunkle Fassung geprueft ist — sonst sieht ein
 * Teil der Besucher:innen eine Variante, die niemand angeschaut hat.
 * Die Tokens bleiben unangetastet; hier werden nur die hellen Werte
 * wieder vorgezogen. Zum Aktivieren diesen ganzen Abschnitt loeschen.
 *
 * Wer selbst auf Dunkel schaltet, bekommt Dunkel: der Umschalter in der
 * Topbar setzt data-bs-theme, nicht data-theme. Hoerte die Ausnahme nur
 * auf data-theme, blieb das Papier hell, waehrend Bootstrap schon die
 * hellen Schriftfarben fuer Dunkel nahm — graue Ueberschriften auf Beige.
 * ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]):not([data-bs-theme="dark"]) {
    --papier: #e8e3d5;
    --papier-blatt: #f4f1e6;
    --papier-schatten: #d8d2bf;
    --ink: #15130f;
    --ink-muted: #544e44;
    --linie: var(--ink);
    --brand: #e3480f;
    --brand-text: #b83505;
    --akzent: #e8318f;
    --akzent-text: #a8145f;
    --erfolg: #57c14a;
    --erfolg-text: #1f6b2a;
    --warnung: #f2bd00;
    --warnung-text: #7a5a00;
    --fremd: #4d7fe8;
    --fremd-text: #1c3fa8;
    --auf-hell: #15130f;
    --auf-invers: #f4f1e6;
    --fokus: var(--akzent-text);
    --versatz: 5px 5px 0 #15130f;
    --versatz-fehldruck: 5px 5px 0 #e8318f;
  }
}

/* ==================================================================== *
 * 18. Content-Blocks
 * ==================================================================== */

/* --- Merkzettel ---------------------------------------------------- *
 * Zettel an einer Wand. Jeder haengt in einem anderen Winkel, sonst
 * sieht es nach Raster aus und der Effekt ist weg.
 * ------------------------------------------------------------------- */

.noteboard-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.noteboard-title {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 58px;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.noteboard-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.noteboard-note {
  padding: var(--space-5);
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
}

/* Nebeneinander nie zweimal derselbe Winkel. */
.noteboard-note:nth-child(3n+1) { transform: rotate(-1.2deg); }
.noteboard-note:nth-child(3n+2) { transform: rotate(0.8deg); }
.noteboard-note:nth-child(3n+3) { transform: rotate(-0.5deg); }

.noteboard-note--brand   { background: var(--brand);   color: var(--auf-hell); }
.noteboard-note--akzent  { background: var(--akzent);  color: var(--auf-hell); }
.noteboard-note--warnung { background: var(--warnung); color: var(--auf-hell); }
.noteboard-note--erfolg  { background: var(--erfolg);  color: var(--auf-hell); }
.noteboard-note--fremd   { background: var(--fremd);   color: var(--auf-hell); }

.noteboard-note-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}

.noteboard-note-text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

/* Was man damit tut - eine Zeile je Aufgabe, als Strich-Liste auf dem
 * Zettel. Der Satz darueber sagt, worum es geht; die Liste, was geht. */
.noteboard-note-tasks {
  /* Gedankenstrich statt Haken: den hat die Hausschrift, ✓ nicht. */
  list-style: "–\00a0\00a0" outside;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 1.4em;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
}

.noteboard-note-tasks li + li {
  margin-top: var(--space-1);
}

.noteboard-note-tasks li::marker {
  font-weight: 700;
}

.noteboard-note-more {
  margin-top: var(--space-2);
}

.noteboard-note-more summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.noteboard-note-more .noteboard-note-tasks {
  margin-top: var(--space-2);
}

/* --- Knallzeile ---------------------------------------------------- */

.callout {
  padding-block: var(--space-10);
  border-block: var(--strich-3) solid var(--linie);
}

.callout--brand  { background: var(--brand);  color: var(--auf-hell); }
.callout--ink    { background: var(--ink);    color: var(--auf-invers); }
.callout--papier { background: var(--papier-blatt); color: var(--ink); }

.callout-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-5);
  text-align: center;
}

.callout-title {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 81px;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

.callout-text {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  max-width: 54ch;
  margin: 0 auto var(--space-6);
}

.callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Auf der schwarzen Flaeche braucht der Fehldruck die helle Kante. */
.callout--ink .btn-knall {
  border-color: var(--auf-invers);
}

@media (max-width: 720px) {
  .callout-title { font-size: 44px; line-height: 49px; }
}

/* --- Preistafel ---------------------------------------------------- */

.pricetable-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.pricetable-title {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 58px;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.pricetable-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: start;
}

.pricetable-package {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
}

/* Das hervorgehobene Paket traegt den Fehldruck und steht gerade — es
   soll nicht schief wirken, sondern fest. */
.pricetable-package--featured {
  background: var(--brand);
  color: var(--auf-hell);
  border-width: var(--strich-2);
  box-shadow: var(--versatz-fehldruck);
}

.pricetable-package-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.pricetable-price {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 58px;
  text-transform: uppercase;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pricetable-note {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.pricetable-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-grow: 1;
}

.pricetable-features li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
}

/* Quadrat statt Haken: bleibt auch in der Schwarz-Weiss-Kopie sichtbar. */
.pricetable-features li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: currentColor;
}

.pricetable-package .btn {
  align-self: stretch;
  text-align: center;
}

/* --- Footer-Text --------------------------------------------------- *
 * Boilerplate, Datenzeile und Vertrauensleiste kommen als HTML aus den
 * Site-Settings, damit sie mit deploybar sind und nicht im geteilten
 * Layout-Template stehen.
 * ------------------------------------------------------------------- */

.footer-boilerplate {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  max-width: 62ch;
  margin-bottom: var(--space-3);
}

/*
 * Zwei Namen fuer dieselbe Sache: im Markup aus den Site-Settings
 * heissen die Klassen deutsch (footer-datenzeile, vertrauensleiste),
 * hier standen sie englisch (footer-dataline, trustbar). Getroffen hat
 * sich nichts — die Datenzeile fiel auf Fliesstext zurueck, die
 * Vertrauensleiste auf eine Aufzaehlung mit Punkten.
 *
 * Beide Namen stehen jetzt nebeneinander, statt einen umzubenennen: das
 * Markup kommt aus config/sites/orgadiy/settings.yaml, und an
 * Settings-Dateien wird hier nicht ohne Absprache geschraubt. Werden
 * die Namen spaeter vereinheitlicht, faellt die jeweils andere Zeile
 * ersatzlos weg.
 */
.footer-dataline,
.footer-datenzeile {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

/*
 * Jede Zeile hier ist eine Aussage, die belegbar sein und genauso in der
 * Datenschutzerklaerung stehen muss. Nichts hinzufuegen, was dort fehlt.
 */
.trustbar,
.vertrauensleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar li,
.vertrauensleiste li {
  padding: 5px 10px;
  border: var(--strich-1) solid var(--linie);
  background: var(--papier);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Nebeneinander nie zweimal derselbe Winkel. */
.trustbar li:nth-child(3n+1),
.vertrauensleiste li:nth-child(3n+1) { transform: rotate(-1.4deg); }
.trustbar li:nth-child(3n+2),
.vertrauensleiste li:nth-child(3n+2) { transform: rotate(1.1deg); }
.trustbar li:nth-child(3n+3),
.vertrauensleiste li:nth-child(3n+3) { transform: rotate(-0.6deg); }

/* ------------------------------------------------------------------ *
 * 19. Papierkorn
 *
 * Riso druckt auf ungestrichenes Papier, und das sieht man: die Flaeche
 * ist nie ganz gleichmaessig. Eine reine Farbflaeche wirkt dagegen wie
 * ein Bildschirm.
 *
 * Das Korn kommt aus einem SVG-Filter als Data-URI — keine Bilddatei,
 * kein zusaetzlicher Request, skaliert auf jeder Aufloesung. Es liegt
 * hinter dem Inhalt und faengt keine Klicks ab.
 *
 * baseFrequency steuert die Koernung: hoeher = feiner. Unter 0.6 wird
 * daraus sichtbares Rauschen statt Papier.
 * ------------------------------------------------------------------ */

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.42'/%3E%3C/svg%3E");
}

body {
  background-color: var(--papier);
  background-image: var(--grain);
  background-repeat: repeat;
  background-attachment: fixed;
}

/*
 * Die Zettel tragen dasselbe Korn, sonst wirken sie wie aufgeklebte
 * Bildschirmflaechen auf Papier. mix-blend-mode multiply laesst das Korn
 * die Farbe darunter annehmen, statt Grau darueberzulegen.
 */
.card,
.noteboard-note,
.pricetable-package,
.alert,
.counter,
.callout,
.tab-content,
footer.bg-dark,
.navbar-dark {
  position: relative;
  isolation: isolate;
}

.card::after,
.noteboard-note::after,
.pricetable-package::after,
.alert::after,
.counter::after,
.callout::after,
.tab-content::after,
footer.bg-dark::after,
.navbar-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Auf den dunklen Flaechen wuerde multiply das Korn verschlucken. */
.callout--ink::after,
.noteboard-note--brand::after,
.noteboard-note--akzent::after,
.noteboard-note--erfolg::after,
.noteboard-note--fremd::after,
.pricetable-package--featured::after {
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* Wer Bewegung reduziert haben will, meint meist auch visuelles Rauschen. */
@media (prefers-reduced-motion: reduce) {
  body { background-image: none; }
  .card::after, .noteboard-note::after, .pricetable-package::after,
  .alert::after, .counter::after, .callout::after, .tab-content::after,
  footer.bg-dark::after, .navbar-dark::after { display: none; }
}

/* ==================================================================== *
 * 20. Interner Bereich (Backstage)
 *
 * hyper_theme wird ausschliesslich von orgadiy genutzt, trotzdem stehen
 * die Korrekturen hier und nicht im Theme: diese Datei laedt nur fuer
 * orgadiy, und das Theme bleibt damit aktualisierbar.
 * ==================================================================== */

/* --- Arbeitsflaeche: Papier mit Halbtonraster --------------------- *
 * Riso raster't Flaechen. Das Korn allein wirkt auf grossen leeren
 * Flaechen flach, deshalb liegt hier zusaetzlich ein Punktraster —
 * harte Kante, kein Verlauf (Regel 4).
 * ------------------------------------------------------------------ */

.content-page,
.wrapper {
  background-color: var(--papier);
  background-image:
    radial-gradient(var(--papier-schatten) 1.5px, transparent 1.6px),
    var(--grain);
  background-size: 22px 22px, 160px 160px;
  background-position: 0 0, 0 0;
}

/* --- Container duerfen breiter laufen ----------------------------- *
 * Der Seitenabstand kam vorher aus zwei Quellen: das Theme gibt
 * .content-page 0.75rem, darauf lagen hier nochmal 32px — und ab
 * 1400px sogar 48px. Auf einem Laptop mit 1440px gingen damit rund
 * 120px an leeren Rand drauf, zusaetzlich zur Seitenleiste.
 *
 * Jetzt eine Quelle (der Container) und ein knapper Wert. Mehr Luft
 * gibt es erst ab 1800px, wo sie auch jemand hat — nicht schon auf
 * einem Arbeitsgeraet.
 * ------------------------------------------------------------------ */

.content-page {
  padding-inline: 0;
}

.content-page > .content > .container-fluid,
.content-page .container-fluid {
  max-width: none;
  padding-inline: var(--space-4);
}

@media (min-width: 1800px) {
  /* Dieselbe Selektorkette wie oben, sonst gewinnt die Basisregel:
     ".content-page > .content > .container-fluid" hat drei Klassen,
     ".content-page .container-fluid" nur zwei — und eine Medienabfrage
     erhoeht die Spezifitaet nicht. */
  .content-page > .content > .container-fluid,
  .content-page .container-fluid {
    padding-inline: var(--space-6);
  }
}

/* --- Dashboard ---------------------------------------------------- *
 * Die Kacheln standen mit Bootstrap-Standardrinnen (24px) und einer
 * grosszuegigen Titelzeile — auf einem Laptop passt damit knapp die
 * Haelfte dessen auf den Schirm, was hingehoert.
 * ------------------------------------------------------------------- */

.content-page .page-title-box {
  padding-block: var(--space-4) var(--space-3);
  margin-bottom: 0;
}

.content-page .page-title-box .page-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

/* Engere Rinnen zwischen den Kacheln, aber nur im internen Bereich. */
.content-page .row {
  --bs-gutter-x: var(--space-4);
  --bs-gutter-y: 0;
}

/* Die Kennzahl-Kacheln trugen den Kartenabstand doppelt. */
.content-page .card.widget-flat .card-body {
  padding: var(--space-3) var(--space-4);
}

.content-page .widget-flat .widget-icon {
  font-size: 20px;
}

/* --- Sidebar ------------------------------------------------------ *
 * Vorher ein blaugrauer Kasten mit kontrastarmer Schrift. Jetzt eine
 * schwarze Flaeche mit Korn, groesserer Schrift und einer harten Kante
 * zur Arbeitsflaeche.
 * ------------------------------------------------------------------ */

/*
 * Die Seitenleiste nimmt flaeche-laut, nicht ink — aus demselben Grund
 * wie Buehne und Fuss: ink ist Schrift und kippt mit dem Thema, im
 * dunklen Thema ist sie fast weiss. Die Leiste war damit im Darkmode
 * hell, also genau andersherum als gedacht.
 */
.leftside-menu {
  background-color: var(--flaeche-laut) !important;
  background-image: var(--grain);
  background-blend-mode: overlay;
  border-right: var(--strich-3) solid var(--linie);
}

.leftside-menu .logo img {
  height: 32px;
  width: auto;
  max-width: 100%;
}

.side-nav {
  padding: var(--space-3) var(--space-3) var(--space-6);
  margin-top: 0 !important;
}

/* Die Punkte standen in 13px Grau — auf Schwarz kaum lesbar.
 *
 * papier-schatten war dafuer die falsche Wahl: im hellen Thema ist das
 * gedaempftes Papier auf schwarzer Leiste, im dunklen aber die tiefste
 * Kartonlage — also fast schwarz auf fast schwarz, gemessen
 * rgb(4,4,4) auf rgb(4,4,4). Ein gedaempftes auf-laut stimmt in beiden
 * Themes, weil die Leiste in beiden dunkel ist. */
/* Der Selektor traegt bewusst .leftside-menu: das Theme setzt fuer
 * .side-nav .side-nav-link ein display:block und laedt seine Datei nach
 * dieser - bei gleicher Spezifitaet gewinnt dann die spaetere Regel. Ohne
 * das Flex hat das ::before-Icon keine Breite und blieb unsichtbar. */
.leftside-menu .side-nav .side-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-3);
  color: color-mix(in srgb, var(--auf-laut) 76%, transparent);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  border: var(--strich-1) solid transparent;
  border-radius: var(--radius-none);
}

.side-nav .side-nav-link:hover {
  background: color-mix(in srgb, var(--auf-laut) 8%, transparent);
  color: var(--auf-laut);
}

/* Der aktive Punkt ist ein Zettel auf der schwarzen Flaeche. */
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav .side-nav-link.active {
  background: var(--brand);
  color: var(--auf-hell);
  border-color: var(--auf-laut);
  box-shadow: 3px 3px 0 var(--auf-laut);
}

/* .side-nav davor, weil das Hyper-Theme mit ".side-nav .side-nav-title"
   zwei Klassen aufbietet und seine --ct-menu-item-color sonst gewinnt —
   die Abschnittsueberschrift stand dadurch in Tintenfarbe auf der
   schwarzen Leiste, im hellen Thema also schwarz auf schwarz. */
.side-nav .side-nav-title {
  padding: var(--space-5) var(--space-3) var(--space-2);
  color: var(--warnung);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.side-nav .menu-arrow::before {
  color: inherit;
}

/* --- Menue-Icons -------------------------------------------------- *
 * Das Template legt ein leeres <i> an: die Icon-Quelle im Seitenbaum
 * ist nie gepflegt worden, und theme.navigation.icon.enable steht
 * nirgends. Statt Daten nachzupflegen haengen die Icons an der Seiten-
 * UID, die das Template ohnehin als id ausgibt.
 *
 * Lucide, als Maske in currentColor — damit wechseln sie auf dem
 * aktiven Punkt automatisch mit der Textfarbe.
 * ------------------------------------------------------------------ */

.side-nav .side-nav-link::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--menu-icon, none) center / contain no-repeat;
  mask: var(--menu-icon, none) center / contain no-repeat;
}

/*
 * Punkte ohne eigenes Icon bekommen ein Quadrat statt eines leeren
 * Kastens — welche Variable gesetzt ist, laesst sich in CSS nicht
 * abfragen, also braucht der Default eine Form.
 */
.side-nav .side-nav-link {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='8' width='8' height='8' fill='%23000'/%3E%3C/svg%3E");
}

.side-nav .nav-link-icon {
  display: none;
}

#item-33 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9'/%3E%3Crect x='14' y='3' width='7' height='5'/%3E%3Crect x='14' y='12' width='7' height='9'/%3E%3Crect x='3' y='16' width='7' height='5'/%3E%3C/svg%3E"); }
#item-20 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
#item-32 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
#item-24 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-4 0v-9h4'/%3E%3Cpath d='M10 6h8'/%3E%3Cpath d='M10 10h8'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E"); }
#item-21 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21 14 3'/%3E%3Cpath d='M20.5 21 10 3'/%3E%3Cpath d='M15.5 21 12 15l-3.5 6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E"); }
#item-91 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
#item-103 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='0'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-4.5-4.5L9 18'/%3E%3C/svg%3E"); }
#item-22 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M8 11h8'/%3E%3Cpath d='M8 15h6'/%3E%3C/svg%3E"); }
#item-92 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20'/%3E%3Ccircle cx='12' cy='14' r='4'/%3E%3Cpath d='M12 6h.01'/%3E%3C/svg%3E"); }
#item-93 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Ccircle cx='17' cy='17' r='5'/%3E%3Cpath d='M17 15v2l1 1'/%3E%3C/svg%3E"); }
/* Seite 105 hiess frueher "Ticket-System" und trug eine Eintrittskarte.
   Dort stehen jetzt Meldungen - also eine Sprechblase. */
#item-105 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 7v4'/%3E%3Cpath d='M12 14h.01'/%3E%3C/svg%3E"); }
#item-23 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 21a6 6 0 0 0-12 0'/%3E%3Ccircle cx='12' cy='11' r='4'/%3E%3Crect x='3' y='2' width='18' height='20'/%3E%3C/svg%3E"); }

/* --- Topbar ------------------------------------------------------- *
 * War eine weisse Leiste ohne Halt. Jetzt Papier mit harter Unterkante
 * und Markenfarben auf den Werkzeugen.
 * ------------------------------------------------------------------ */

.navbar-custom {
  background: var(--papier-blatt) !important;
  border-bottom: var(--strich-3) solid var(--linie);
}

.navbar-custom .topbar {
  min-height: 70px;
  padding-inline: var(--space-5);
  gap: var(--space-4);
}

.navbar-custom .button-toggle-menu,
.navbar-custom .navbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: var(--strich-1) solid transparent;
}

.navbar-custom .button-toggle-menu:hover,
.navbar-custom .navbar-toggle:hover {
  border-color: var(--linie);
  background: var(--warnung);
}

/* Die Menueleiste rechts brachte einen eigenen Einzug mit. */
.topbar-menu {
  padding-left: 0 !important;
  margin-bottom: 0;
  gap: var(--space-2);
}

/*
 * Eintraege ohne eigenen Platz in der Leiste: der Chat-Knopf schwebt unten
 * rechts, der Assistent ist nur sein Seitenpanel. Als Listenpunkt nahmen sie
 * trotzdem einen Abstand ein - Luecke zwischen Glocke und Fragezeichen.
 */
.topbar-menu > li.dd-chat-launcher,
.topbar-menu > li.clubs-assistant {
  display: contents;
}

.topbar-menu > li > .nav-link,
.topbar-menu > li > div.nav-link {
  width: 42px;
  height: 42px;
  padding: 0;
}

.topbar-menu .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: var(--strich-1) solid transparent;
}

.topbar-menu > li > .nav-link:hover,
.topbar-menu > li > div.nav-link:hover {
  border-color: var(--linie);
  background: var(--warnung);
  color: var(--auf-hell);
}

/* Die Werkzeuge tragen je eine eigene Riso-Farbe, damit die Leiste
   nicht als graue Reihe verschwindet. */
.topbar-menu > li:nth-child(1) .nav-link:hover { background: var(--fremd); color: var(--auf-hell); }
.topbar-menu > li:nth-child(2) .nav-link:hover { background: var(--erfolg); color: var(--auf-hell); }
.topbar-menu > li:nth-child(3) .nav-link:hover { background: var(--warnung); color: var(--auf-hell); }
.topbar-menu > li:nth-child(4) .nav-link:hover { background: var(--akzent); color: var(--auf-hell); }

/* Der Benachrichtigungspunkt ist ein Riso-Fleck, kein Bootstrap-Badge. */
.topbar-menu .noti-icon-badge,
.topbar-menu .badge {
  background: var(--akzent);
  color: var(--auf-hell);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
}

/* --- Kontext-Chips in der Leiste ----------------------------------- *
 * Welches Festival und welche Organisation gerade eingestellt sind,
 * stand als zwei Textzeilen untereinander in Mono-Versalien. Bei
 * "47. Weinturm Open Air" und "Jugend- und Kultur Foerderverein e.V."
 * ist das doppelt so lang wie die Leiste hoch ist.
 *
 * Als Chip traegt jede Angabe ihre eigene Flaeche: die Vorsilbe klein
 * und leise, der Name in Leseschrift und lesbarer Groesse. Gerade, nicht
 * schief — das Markenhandbuch stellt Chips 1–2° schief, aber das gilt
 * fuer Sticker im Inhalt. In einer dichten Bedienleiste sieht dieselbe
 * Geste nach Fehler aus, nicht nach Absicht.
 * ------------------------------------------------------------------ */

.topbar-kontext {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Die Breite steht in rem, nicht in ch: der umgebende .nav-link setzt
   in dieser Leiste Courier Prime in 12px, und ch rechnet gegen die
   geerbte Schrift — 26ch waren dadurch 182px und der Festivalname
   endete nach "47. Weint…". */
.topbar-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  max-width: 21rem;
  padding: 4px 10px;
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
  color: var(--ink);
}

.topbar-chip-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Der Name ist die Information, nicht die Vorsilbe. Gekuerzt wird er,
   nicht die Leiste aufgeschoben. */
/* text-transform und letter-spacing werden zurueckgesetzt: der
   .nav-link der Leiste setzt beides als Stempel-Geste, und ein
   Eigenname ist kein Stempel — "47. WEINTURM OPEN AIR" mit gesperrten
   Versalien liest sich schlechter und braucht ein Drittel mehr Platz. */
.topbar-chip-wert {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* Die beiden Chips tragen je eine eigene Riso-Kante, damit man sie im
   Vorbeigehen auseinanderhaelt, ohne die Vorsilbe zu lesen. */
.topbar-chip-festival { border-color: var(--akzent); }
.topbar-chip-orga { border-color: var(--fremd); }

/* Auf schmalen Schirmen tragen beide Chips zusammen zu viel. Der
   Organisation wechselt man selten, das Festival oft — also bleibt das
   Festival stehen. */
@media (max-width: 1399.98px) {
  .topbar-chip { max-width: 15rem; }
}

@media (max-width: 1199.98px) {
  .topbar-chip-orga { display: none; }
  .topbar-chip { max-width: 18rem; }
}

/* Der Chip sitzt in einem <a class="nav-link">, das vom Theme eine
   eigene Polsterung und Hoehe mitbringt. */
.topbar-menu > li > .nav-link:has(.topbar-kontext) {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

.topbar-menu > li > .nav-link:has(.topbar-kontext):hover {
  background: transparent;
  border: 0;
}

.topbar-menu > li > .nav-link:has(.topbar-kontext):hover .topbar-chip {
  background: var(--brand);
  border-color: var(--linie);
  color: var(--auf-hell);
}

.topbar-menu > li > .nav-link:has(.topbar-kontext):hover .topbar-chip-label {
  color: var(--auf-hell);
}

/* --- Nutzermenue -------------------------------------------------- *
 * Der Name oeffnet jetzt das Menue. Das Staff-Widget rendert darin
 * einen echten Link auf die Profilseite — der wuerde den Klick
 * abfangen und wegnavigieren, statt aufzuklappen.
 * ------------------------------------------------------------------ */

.usermenu-trigger {
  cursor: pointer;
  border: var(--strich-1) solid transparent;
  padding-inline: var(--space-2);
}

.usermenu-trigger:hover,
.usermenu-trigger[aria-expanded="true"] {
  border-color: var(--linie);
  background: var(--brand);
  color: var(--auf-hell);
}

.usermenu-trigger .nav-user,
.usermenu-trigger a {
  pointer-events: none;
  color: inherit;
}

/*
 * Name und Rolle brauchen eine Obergrenze.
 *
 * Beides kommt aus dem Datensatz und ist beliebig lang — ein ganzer
 * Vor- und Nachname plus eine Rolle wie "Schichtleitung Ausschank"
 * schob die Leiste bisher nach rechts auf, weil nichts die Breite
 * begrenzte und nichts umbrach. Gekuerzt wird mit Auslassung; der
 * vollstaendige Name steht im Menue darunter und auf der Profilseite.
 *
 * min-width:0 am Flex-Kind ist noetig, damit text-overflow ueberhaupt
 * greift: ein Flex-Element schrumpft sonst nie unter seinen Inhalt,
 * und dann laeuft es eben doch heraus.
 */
.usermenu-trigger h5,
.usermenu-trigger h6 {
  color: inherit;
  font-family: var(--font-sans);
  max-width: 22ch;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu-trigger,
.usermenu-trigger .nav-user,
.usermenu-trigger .nav-user > span {
  min-width: 0;
}

/* Die Leiste darf insgesamt nicht breiter werden als der Platz, den
   sie hat — sonst wandert sie unter die Seitenkante statt zu kuerzen. */
.navbar-custom .topbar {
  min-width: 0;
}

.topbar-menu {
  min-width: 0;
  flex-wrap: nowrap;
}

.usermenu-trigger h5 {
  font-size: 15px;
  font-weight: 700;
}

.usermenu-trigger h6 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Der weisse Kasten hinter dem Namen.
 *
 * .nav-user kommt aus dem Hyper-Theme und bringt mit:
 *   background-color: var(--ct-topbar-user-bg)   (weiss)
 *   border-width: 0 1px                          (seitliche Striche)
 *   min-height: var(--ct-topbar-height)          (Theme-Leistenhoehe)
 *
 * Die Theme-Leiste ist hoeher als die von orga.diy — deshalb stand der
 * weisse Kasten oben und unten ueber die Leiste hinaus. Die Flaeche
 * traegt hier ohnehin der Chip, nicht der Kasten.
 */
.usermenu-trigger .nav-user {
  background-color: transparent;
  border-width: 0;
  min-height: 0;
  padding: 0;
  gap: var(--space-2);
  min-width: 0;
}

/* Der Name wird selbst zum Chip — dieselbe Form wie die Kontext-Chips
   links, damit die Leiste eine Sprache spricht. */
.usermenu-trigger {
  padding: 0;
}

.usermenu-trigger .nav-user > span:not(.account-user-avatar) {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  max-width: 14rem;
  padding: 4px 10px;
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
  /* Regel 9: Chips duerfen schief stehen - der Namen-Chip ist der einzige
     auf der Leiste, deshalb reicht ein einziger, fester Winkel. */
  transform: rotate(-1deg);
  box-shadow: var(--versatz);
  transition: transform .04s linear, box-shadow .04s linear;
}

.usermenu-trigger h5 {
  text-transform: none;
  letter-spacing: normal;
}

.usermenu-trigger:hover .nav-user > span:not(.account-user-avatar),
.usermenu-trigger[aria-expanded="true"] .nav-user > span:not(.account-user-avatar) {
  background: var(--brand);
  color: var(--auf-hell);
  /* Derselbe Tastendruck-Effekt wie .btn:active - der Chip wirkt drueckbar. */
  transform: translate(3px, 3px) rotate(-1deg);
  box-shadow: 2px 2px 0 var(--linie);
}

.usermenu-trigger:hover,
.usermenu-trigger[aria-expanded="true"] {
  background: transparent;
  border-color: transparent;
}

.usermenu-trigger .rounded-circle {
  border-radius: var(--radius-pill) !important;
  border: var(--strich-2) solid var(--linie);
  box-shadow: 3px 3px 0 var(--linie);
}

.dropdown-menu {
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  box-shadow: var(--versatz);
  padding: var(--space-2);
}

.dropdown-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-none);
  color: var(--ink);
  font-weight: 700;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--brand);
  color: var(--auf-hell);
}

.dropdown-item.active {
  background: var(--ink);
  color: var(--auf-invers);
}

/* --- Karten im internen Bereich ----------------------------------- *
 * Listen-, Bearbeiten- und Neu-Ansichten brachten unterschiedliche
 * Wrapper mit: mal .card, mal ein nacktes div, mal mit Rahmen, mal
 * ohne. Hier laufen sie auf dieselbe Form zusammen.
 * ------------------------------------------------------------------ */

.content-page .card,
.content-page .card-box,
.content-page .widget-box,
.content-page form > fieldset {
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  box-shadow: var(--versatz);
  margin-bottom: var(--space-5);
}

.content-page .card-box {
  padding: 0;
}

/* Ein Kartenkopf aus Text statt aus einer Kopfzeile: gleiche Form geben. */
.content-page .card-box > h4:first-child,
.content-page .card-box > h5:first-child,
.content-page .card > h4:first-child,
.content-page form > fieldset > legend {
  display: block;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--auf-invers);
  border-bottom: var(--strich-2) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  float: none;
  width: 100%;
}

.content-page .card-box > *:not(:first-child) {
  padding-inline: var(--space-4);
}

.content-page .card-box > *:last-child {
  padding-bottom: var(--space-4);
}

/* Formularzeilen liefen je nach Template mit anderen Abstaenden. */
.content-page form .form-group,
.content-page form .mb-3,
.content-page form .row + .row {
  margin-bottom: var(--space-4);
}

.content-page form .form-label,
.content-page form label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* --- Interner Footer ---------------------------------------------- */

.footer,
.content-page .footer {
  background: var(--papier-blatt);
  border-top: var(--strich-2) solid var(--linie);
  color: var(--ink);
}

.footer a {
  color: var(--ink);
}

.footer a:hover {
  color: var(--brand-text);
}

/*
 * Copyright links, Meta-Links rechts. Das globale footer-Padding (48px)
 * gilt hier nicht, sonst quetscht es die feste Hoehe. Auf dem Handy
 * untereinander und mittig, die Hoehe waechst mit.
 */
.footer.footer-meta {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding-block: 0;
  font-size: 14px;
}

.footer.footer-meta p {
  margin: 0;
}

/* Spruch fuer Vielfalt und Inklusion: eigene Zeile ueber Copyright und
   Links, die Fusszeile waechst dafuer mit. */
.footer.footer-meta:has(.footer-motto) {
  height: auto;
  padding-block: var(--space-3);
}

.footer.footer-meta .footer-motto {
  flex-basis: 100%;
  font-size: 13px;
}

.footer.footer-meta .footer-links a {
  margin-left: 0;
}

.footer.footer-meta .footer-links .list-inline-item:not(:last-child) {
  margin-right: var(--space-4);
}

@media (max-width: 767.98px) {
  .footer.footer-meta {
    height: auto;
    min-height: 60px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-block: var(--space-3);
  }
}

/* --- Logo-Block in der Sidebar ------------------------------------ *
 * Das Logo ist im Theme sticky und ohne eigene Hoehe. Der erste
 * Menuepunkt schob sich mit seinem Versatz darueber.
 * ------------------------------------------------------------------ */

.leftside-menu .logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 70px;
  /* Seitlich schmal, damit im eingeklappten Zustand (70px breite
     Sidebar) ueberhaupt Platz fuer den Avatar bleibt — mit 24px je
     Seite blieben davon 17px uebrig und das Zeichen war gequetscht. */
  padding: var(--space-3) var(--space-4);
  margin: 0;
  background: var(--ink);
  z-index: 2;
}

.leftside-menu .logo img {
  height: 34px;
  width: auto;
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* Auf schwarzem Grund gilt die helle Fassung, die dunkle bleibt weg. */
.leftside-menu .logo-dark {
  display: none !important;
}

#leftside-menu-container {
  padding-top: var(--space-2);
}

.side-nav {
  margin-top: 0 !important;
}

/* Die Wortmarke lief ueber die Sidebar-Kante hinaus. */
.leftside-menu .logo-lg img {
  max-width: 168px;
  height: auto;
}

.leftside-menu .logo-sm {
  display: flex;
  justify-content: center;
  width: 100%;
}

.leftside-menu .logo-sm img {
  width: 32px;
  height: 32px;
  max-width: none;
}

/*
 * DataTables setzt den Kopf ueber eine eigene, spezifischere Regel und
 * bringt damit das Theme-Blaugrau zurueck.
 */
.content-page table.dataTable > thead > tr > th,
.content-page table.dataTable > thead > tr > td,
table.table > thead > tr > th,
table.table > thead > tr > td {
  background-color: var(--ink) !important;
  color: var(--auf-invers) !important;
  border-bottom: var(--strich-2) solid var(--linie);
}

/* Die Sortierpfeile standen in einer Farbe, die auf Schwarz verschwand. */
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting::before,
table.dataTable > thead [class*="sorting"]::after,
table.dataTable > thead [class*="sorting"]::before {
  color: var(--warnung) !important;
  opacity: 1;
}

/* Der Kopfbereich der Liste (Anzahl, Suche) gehoert optisch zur Karte. */
.content-page .dataTables_wrapper .dataTables_length,
.content-page .dataTables_wrapper .dataTables_filter {
  padding: var(--space-2) 0;
}

.content-page .dataTables_wrapper .dataTables_filter input,
.content-page .dataTables_wrapper .dataTables_length select {
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
  padding: 6px 10px;
}

/* ==================================================================== *
 * 21. Formulare im internen Bereich
 *
 * Die Bearbeiten- und Neu-Masken schwammen ohne Wrapper auf der
 * Arbeitsflaeche, waehrend die Listen in einer Karte sassen. Innerhalb
 * einer Maske war es ebenso ungleich: "Weiterfuehrende Links" und
 * "Medien" trugen einen Rahmen, "Basisdaten" und "Inhalt" nicht.
 *
 * Alle Masken folgen demselben Muster — ein Block mit Ueberschrift,
 * darin eine Reihe Felder. Darueber laesst sich die Form vereinheitlichen,
 * ohne zehn Templates einzeln anzufassen.
 * ==================================================================== */

.content-page form > div:has(> h5),
.content-page form > .mb-4:has(> h5),
.content-page form > fieldset:has(> legend) {
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
  margin-bottom: var(--space-6);
  padding: 0;
  overflow: hidden;
}

/* Die Abschnittsueberschrift wird zur Kopfzeile der Karte. */
.content-page form > div:has(> h5) > h5:first-child,
.content-page form > fieldset > legend {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--auf-invers);
  border-bottom: var(--strich-2) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  float: none;
}

.content-page form > div:has(> h5) > *:not(h5),
.content-page form > fieldset > *:not(legend) {
  padding-inline: var(--space-5);
}

.content-page form > div:has(> h5) > *:nth-child(2) {
  padding-top: var(--space-5);
}

.content-page form > div:has(> h5) > *:last-child {
  padding-bottom: var(--space-5);
}

/*
 * Zwischentitel innerhalb einer Maske ("Spalten", "Voraussetzungen",
 * "Belehrung" ...). Die standen als <h5 class="bg-light p-2"> da - ein
 * grauer Kasten ohne Kante, genau das Dashboard-Grau, das das
 * Design-Set ausschliesst (Regel 3). Jetzt Stempelschrift aus
 * tokens.css (.stempel, Courier Prime in Versalien) auf einer 2px-Linie
 * in --linie: die Linie trennt, ohne eine zweite Kopfzeile neben die
 * schwarze der Karte zu stellen. Der Abstand nach oben ist groesser
 * als nach unten, damit der Titel sichtbar zu den Feldern darunter
 * gehoert.
 */
.abschnitt-titel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0 var(--space-4);
  padding: 0 0 var(--space-2);
  border-bottom: var(--strich-1) solid var(--linie);
  color: var(--ink);
  background: none;
}

/* Steht der Titel ganz oben, braucht er keinen Abstand. "Ganz oben"
 * heisst auch: nur hinter den versteckten Feldern, die f:form vor den
 * Inhalt setzt (__referrer, __trustedProperties) - einzeln oder in
 * ihrem eigenen <div>. */
.abschnitt-titel:first-child,
:is(input[type="hidden"], div:not(:has(:not(input[type="hidden"])))) + .abschnitt-titel {
  margin-top: 0;
}

/*
 * Verschachtelte Bloecke (etwa die einzelnen Links) sind Zettel in der
 * Karte — mit duennerer Kante, damit die Ebenen unterscheidbar bleiben.
 */
.content-page form > div:has(> h5) .border,
.content-page form > div:has(> h5) div:has(> h6) {
  border: var(--strich-1) solid var(--linie) !important;
  border-radius: var(--radius-none);
  background: var(--papier);
  padding: var(--space-4);
  box-shadow: 3px 3px 0 var(--linie);
}

.content-page form div > h6 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/*
 * Die Aktionen standen frei unter dem letzten Feld. Jetzt sitzen sie in
 * einer eigenen Leiste, damit klar ist, wo die Maske aufhoert.
 */
.content-page form > .text-end:last-child,
.content-page form > .d-flex:last-child,
.content-page form > .actions:last-child {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
}

/* --- TinyMCE ------------------------------------------------------- *
 * Der Editor brachte seine eigene weisse Oberflaeche mit — mitten in
 * einer Maske aus Papier der auffaelligste Fremdkoerper.
 * ------------------------------------------------------------------- */

.tox.tox-tinymce {
  border: var(--strich-1) solid var(--linie) !important;
  border-radius: var(--radius-none) !important;
  box-shadow: none !important;
}

.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
  background: var(--papier-schatten) !important;
  border-bottom: var(--strich-1) solid var(--linie) !important;
  box-shadow: none !important;
}

.tox .tox-tbtn {
  border-radius: var(--radius-none) !important;
  color: var(--ink) !important;
}

.tox .tox-tbtn svg {
  fill: var(--ink) !important;
}

.tox .tox-tbtn:hover {
  background: var(--warnung) !important;
}

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background: var(--brand) !important;
}

.tox .tox-tbtn--enabled svg {
  fill: var(--auf-hell) !important;
}

.tox .tox-edit-area::before {
  border-radius: var(--radius-none) !important;
  border-color: var(--fokus) !important;
}

.tox .tox-statusbar {
  background: var(--papier-schatten) !important;
  border-top: var(--strich-1) solid var(--linie) !important;
  color: var(--ink-muted) !important;
}

/* Das Schreibfeld selbst liegt in einem iframe — die Schrift darin wird
   ueber die TinyMCE-Konfiguration gesetzt, nicht von hier aus. */
.tox .tox-edit-area {
  background: var(--papier-blatt);
}

/* --- Topbar: Festival- und Organisator-Anzeige --------------------- *
 * Die Anzeige hatte keine Breitenbegrenzung und brach in eine schmale
 * Spalte um, die sich ueber den Inhalt legte.
 * ------------------------------------------------------------------- */

.navbar-custom .topbar > *:first-child {
  flex: 0 0 auto;
}

.navbar-custom .topbar {
  flex-wrap: nowrap;
  justify-content: space-between;
}

.topbar-menu {
  margin-left: auto;
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Der Festival-/Organisator-Punkt darf schrumpfen, aber nicht umbrechen. */
.topbar-menu > li:first-child {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
}

.topbar-menu > li:first-child a,
.topbar-menu > li:first-child .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-menu > li:first-child .nav-link:hover {
  background: var(--fremd);
  color: var(--auf-hell);
}

/* Eingeklappt trug der Logo-Block noch die Theme-Farbe. flaeche-laut
   statt ink, sonst sitzt im dunklen Thema ein heller Block ueber der
   dunklen Leiste. */
.leftside-menu .logo,
body[data-sidenav-size="condensed"] .leftside-menu .logo {
  background: var(--flaeche-laut) !important;
}

/* --- Benachrichtigungen im Kopf ----------------------------------- *
 * Die Glocke (NotificationBus). Ungelesenes hat einen Akzentstrich
 * links und fette Schrift; der Haken rechts markiert, ohne zu oeffnen.
 * ------------------------------------------------------------------- */

.notify-menu .nav-link {
  position: relative;
}

.notify-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--akzent);
  color: var(--auf-hell);
  border: var(--strich-1) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.notify-list {
  width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 0;
}

.notify-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--auf-invers);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notify-read-all {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.notify-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notify-item {
  display: flex;
  align-items: flex-start;
  border-bottom: var(--strich-1) solid var(--papier-schatten);
  border-left: 4px solid transparent;
}

.notify-item:last-child {
  border-bottom: 0;
}

/* Das Theme begrenzt jedes li der Topbar auf deren Hoehe - im Dropdown
 * liefen zweizeilige Eintraege dadurch in den naechsten hinein. */
.navbar-custom .topbar-menu .dropdown-menu li {
  max-height: none;
}

.notify-item.is-unread {
  border-left-color: var(--akzent);
}

.notify-link {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: inherit;
  text-decoration: none;
}

.notify-link:hover,
.notify-link:focus-visible {
  background: var(--papier-schatten);
}

.notify-icon {
  flex: none;
  font-size: 18px;
  line-height: 1.3;
}

.notify-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.notify-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}

.is-unread .notify-title {
  font-weight: 700;
}

.notify-message {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.notify-ago {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.notify-mark {
  flex: none;
  align-self: stretch;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.notify-mark:hover,
.notify-mark:focus-visible {
  color: var(--ink);
  background: var(--papier-schatten);
}

.notify-empty {
  margin: 0;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ *
 * Reihenfolge per Ziehen
 *
 * Angefasst wird am Griff, nicht an der Zeile - sonst laesst sich in
 * einer Tabelle kein Text mehr markieren. Der Griff ist deshalb als
 * solcher zu erkennen: eigener Zeiger, und beim Ziehen haengt die Zeile
 * sichtbar an der Maus.
 * ------------------------------------------------------------------ */

[data-sort-handle] {
  cursor: grab;
  color: var(--ink-muted);
  user-select: none;
}

[data-sort-handle]:active {
  cursor: grabbing;
}

/*
 * Die Zeile, die gerade gezogen wird, haengt an der Maus.
 *
 * pointer-events: none ist hier keine Kosmetik, sondern der Kern: der
 * Klon liegt unter dem Zeiger und im selben Container wie die Liste.
 * Ohne diese Zeile faengt er jeden Treffertest ab, dragula findet nie
 * die Zeile darunter - und legt die gezogene Zeile deshalb immer ganz
 * unten ab, egal wo man loslaesst.
 *
 * dragula bringt diese Grundregeln normalerweise in einer eigenen
 * dragula.css mit. Die liegt im Paket, ist aber 0 Byte gross; deshalb
 * stehen sie hier.
 */
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  pointer-events: none;
  opacity: 0.9;
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  box-shadow: var(--versatz);
  list-style: none;
}

/* Die Luecke, aus der sie kommt. */
.gu-transit {
  opacity: 0.25;
}

/* Waehrend des Ziehens nichts markieren - sonst zieht man den Text mit. */
.gu-unselectable {
  user-select: none !important;
}

.gu-hide {
  display: none !important;
}

/* Waehrend gespeichert wird, ist die Liste kurz nicht anfassbar - sonst
   ueberholt ein zweiter Zug die noch laufende Antwort. */
.is-sorting {
  pointer-events: none;
  opacity: 0.6;
}

.sort-note {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sort-note[data-state="ok"] {
  color: var(--erfolg-text);
}

.sort-note[data-state="error"] {
  color: var(--akzent-text);
}

/* Die beiden Knoepfe oben in der Leiste waren <div> - per Tastatur nicht
 * erreichbar und fuer Screenreader stumm. Als <button> bringen sie die
 * Browser-Vorgaben fuer Rahmen und Hintergrund mit; :where() haelt die
 * Spezifitaet bei null, damit die Theme-Regeln weiter gewinnen. */
:where(button.button-sm-hover, button.button-close-fullsidebar) {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

/* --- Gruppen im Seitenmenue --------------------------------------- *
 * Die Liste links waechst mit jedem Werkzeug. Ein Trenner im Seitenbaum
 * beginnt jetzt eine Gruppe, die sich zuklappen laesst - die
 * Ueberschrift ist derselbe Zettel wie .side-nav-title, nur anklickbar.
 * ------------------------------------------------------------------ */

.leftside-menu .side-nav .side-nav-group-toggle {
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    color: var(--warnung);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Die Gruppenueberschrift traegt kein Seitensymbol - an ihrer Stelle
   steht der Pfeil. Ohne das Ausblenden bliebe das Standardquadrat aus
   .side-nav .side-nav-link davor stehen. */
.side-nav .side-nav-group-toggle::before {
    display: none;
}

.side-nav .side-nav-group-toggle .menu-arrow {
    position: static;
    margin-left: auto;
    transform: none;
    transition: transform .15s ease;
}

.side-nav .side-nav-group-toggle[aria-expanded="true"] .menu-arrow {
    transform: rotate(90deg);
}

.side-nav .side-nav-group-toggle:hover {
    color: var(--auf-laut);
}

/* Die zweite Ebene des Themes ist fuer eingerueckte Untermenues gedacht
   und schiebt sich um die halbe Leiste nach rechts. Hier sind es keine
   Unterpunkte, sondern die Punkte selbst - sie bleiben deshalb fast am
   linken Rand, nur die Kante der Gruppe zeigt die Zugehoerigkeit. */
.side-nav .side-nav-group .side-nav-second-level {
    margin-top: 0;
    padding-left: 0;
    border-left: var(--strich-1) solid color-mix(in srgb, var(--auf-laut) 18%, transparent);
    margin-left: var(--space-3);
}

.side-nav .side-nav-group .side-nav-second-level .side-nav-link {
    font-size: 16px;
}

/* Eingeklappte Leiste (nur Symbole): dort gibt es keinen Platz fuer
 * Gruppenueberschriften, und die Gruppen als zugeklappte Bereiche
 * stehenzulassen hiesse, dass von zwanzig Punkten drei sichtbar
 * waeren. In dieser Breite faellt die Gruppierung also weg und alle
 * Punkte stehen wieder als Symbolliste untereinander.
 *
 * Das Theme blendet in dieser Breite jede zweite Ebene aus und zeigt
 * sie erst beim Ueberfahren - deshalb hier die Gegenrichtung, samt der
 * Symbole, die es dort ebenfalls abschaltet. */
html[data-sidenav-size="condensed"] .side-nav .side-nav-group > .side-nav-group-toggle {
  display: none;
}

html[data-sidenav-size="condensed"] .side-nav .side-nav-group > .collapse {
  display: block !important;
  height: auto !important;
}

/* Der lange Selektor ist Absicht: das Theme schaltet die zweite Ebene
 * mit .wrapper .leftside-menu .side-nav .collapse .side-nav-second-level
 * und !important ab. Wer dagegen anschreiben will, braucht dieselbe
 * Kette - eine kuerzere Regel verliert, egal wie spaet sie steht. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-group > .collapse .side-nav-second-level {
  display: block !important;
  margin: 0;
  padding: 0;
  border-left: 0;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-group > .collapse .side-nav-second-level li .side-nav-link::before {
  display: block;
}

/* Die Leiste scrollt auch auf dem Desktop, wenn sie laenger ist als das
 * Fenster. Zwei Stellen im Theme verhinderten das:
 *  - Der Menue-Container ist h-100, darueber steht aber noch das Logo -
 *    die letzten Punkte lagen unter dem Fensterrand. Als Flex-Spalte
 *    bekommt der Container genau den Platz unter dem Logo.
 *  - In der eingeklappten Leiste (768-1140 px) stellt das Theme die
 *    Scrollflaeche auf overflow: visible, damit beim Ueberfahren der
 *    Name aus der Leiste herausragen kann. Hier scrollt sie; den Namen
 *    zeigt statt dessen der Tooltip (sidenav-tooltips.js). */
@media (min-width: 768px) {
  html:not([data-layout="topnav"]) .wrapper .leftside-menu {
    display: flex;
    flex-direction: column;
  }

  html:not([data-layout="topnav"]) .wrapper .leftside-menu > .logo {
    flex: 0 0 auto;
  }

  html:not([data-layout="topnav"]) .wrapper .leftside-menu #leftside-menu-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
  }

  /* Ohne SimpleBar (Skript fehlt oder noch nicht da): selbst scrollen. */
  html:not([data-layout="topnav"]) .wrapper .leftside-menu #leftside-menu-container:not([data-simplebar="init"]) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu {
    position: fixed;
  }

  html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .simplebar-mask {
    overflow: hidden !important;
  }

  html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .simplebar-content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link {
    width: auto;
  }

  html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link span:not(.badge) {
    visibility: hidden;
  }
}

/* ------------------------------------------------------------------ *
 * 22. Anmeldung und Passkeys
 *
 * Die Passkey-Zeremonie kommt aus EXT:nr_passkeys_fe. Deren eigenes CSS
 * wird nicht geladen - es rundet Ecken und legt weiche Schatten, beides
 * gibt es hier nicht (Regeln 1 und 2). Statt dessen bekommen die Klassen,
 * die die Skripte der Erweiterung selbst erzeugen, hier dieselben Regeln
 * wie .btn, .form-control und .alert. Das ist der Grund, warum das Markup
 * die Klassen der Erweiterung behaelt: eine Zeile, die das Skript nach dem
 * Hinzufuegen eines Passkeys einfuegt, sieht so aus wie die gerenderten.
 * ------------------------------------------------------------------ */

/* Kopf der Anmeldekarte */
.login-intro {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  text-align: center;
}

.login-intro__title {
  font-family: var(--font-display);
  font-size: 32px;
  /* 1.12, nicht 1: unter 1,06 stehen die Punkte von Ä/Ö/Ü der zweiten
     Zeile in den Buchstaben der ersten (siehe markenhandbuch.md). */
  line-height: 1.12;
  text-transform: uppercase;
  margin: 0;
}

.login-intro__text {
  color: var(--ink-muted);
  margin: 0;
}

/* Reiter Passkey / Passwort: beide gleich breit, Inhalt mit Luft darunter */
.login-tabs {
  flex-wrap: nowrap;
}

.login-tabs .nav-item {
  flex: 1;
}

.login-tabs .nav-link {
  justify-content: center;
  text-align: center;
}

.login-tabs__content {
  padding-top: var(--space-5);
}

/* Passkey zuerst */
.login-passkey {
  display: grid;
  gap: var(--space-3);
}

.login-passkey__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  font-size: 18px;
}

.login-passkey__icon {
  flex: none;
}

.login-passkey__hint {
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* "oder mit Passwort": Strich - Wort - Strich, 2px wie jede Kante */
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  border-top: var(--strich-1) solid var(--linie);
}

/* Ruhige Links: brand-text mit Unterstreichung, kein Kasten */
.login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  font-size: 14px;
}

.login-link,
.login-link:hover {
  color: var(--brand-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.login-recovery {
  display: grid;
  gap: var(--space-3);
}

.login-recovery__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.login-recovery__text {
  color: var(--ink-muted);
  margin: 0;
}

.login-recovery__code {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

/* Die Mindestanforderungen beim Passwort setzen - eine schlichte Liste,
   keine Checkbox-Optik: bevor das Formular abgeschickt ist, weiss
   niemand, welche Punkte schon erfuellt sind. */
.login-requirements {
  color: var(--ink-muted);
  font-size: 14px;
  padding-left: var(--space-5);
}

/* Rueckmeldungen der Skripte sind .alert - ohne Schraegstellung, sie
   stehen in einer schmalen Karte direkt ueber dem Knopf. */
.login-passkey .alert,
.passkeys .alert {
  transform: none;
  margin: 0;
}

/* Verwaltung im Profil ------------------------------------------------ */

.passkeys {
  display: grid;
  gap: var(--space-6);
}

.passkeys__section {
  display: grid;
  gap: var(--space-3);
}

.passkeys__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.passkeys__text {
  color: var(--ink-muted);
  margin: 0;
  max-width: 62ch;
}

/* Knoepfe, die das Skript selbst baut: dieselben Zettel wie .btn */
.nr-passkeys-fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 13px 20px;
  border: var(--strich-2) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
  color: var(--ink);
  box-shadow: var(--versatz);
  cursor: pointer;
  transition: transform .04s linear, box-shadow .04s linear;
}

.nr-passkeys-fe-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 4px 4px 0 var(--linie);
}

.nr-passkeys-fe-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--linie);
}

.nr-passkeys-fe-btn:disabled {
  background: var(--papier-schatten);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.nr-passkeys-fe-btn--primary {
  background: var(--brand);
  color: var(--auf-hell);
}

/* Regel "Gefaehrlich": Pink mit auf-hell, immer mit Rueckfrage - die
   Rueckfrage stellt das Skript der Erweiterung vor dem Entfernen. */
.nr-passkeys-fe-btn--danger {
  background: var(--akzent);
  color: var(--auf-hell);
}

.nr-passkeys-fe-btn--sm {
  font-size: 14px;
  padding: 9px 14px;
}

.nr-passkeys-fe-management__table {
  width: 100%;
  border-collapse: collapse;
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
}

.nr-passkeys-fe-management__th,
.nr-passkeys-fe-management__td {
  padding: var(--space-3);
  border-bottom: var(--strich-1) solid var(--linie);
  text-align: left;
  vertical-align: middle;
}

.nr-passkeys-fe-management__th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--papier-schatten);
}

.nr-passkeys-fe-management__td--actions {
  text-align: right;
  white-space: nowrap;
}

.nr-passkeys-fe-management__td--actions .nr-passkeys-fe-btn + .nr-passkeys-fe-btn {
  margin-left: var(--space-2);
}

.nr-passkeys-fe-management__label {
  font-weight: 700;
}

.nr-passkeys-fe-management__input,
.nr-passkeys-fe-management__rename-input {
  font: inherit;
  padding: 10px 12px;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier);
  color: var(--ink);
  min-width: 0;
}

.nr-passkeys-fe-management__register-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.nr-passkeys-fe-management__register-form .nr-passkeys-fe-management__input {
  flex: 1 1 220px;
}

.nr-passkeys-fe-management__empty {
  margin: 0;
  padding: var(--space-4);
  border: var(--strich-1) dashed var(--linie);
  color: var(--ink-muted);
}

/* Wiederherstellungscodes: Schreibmaschine, damit 0 und O nicht
   verwechselt werden, in einem Raster zum Abschreiben. */
.nr-passkeys-fe-recovery-codes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
}

.nr-passkeys-fe-recovery-codes__grid code {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--ink);
  background: none;
}

.passkeys__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 575.98px) {
  /* Schmal: Tabelle wird zu Zetteln untereinander, die Knoepfe darunter. */
  .nr-passkeys-fe-management__table thead {
    display: none;
  }

  .nr-passkeys-fe-management__table tr,
  .nr-passkeys-fe-management__table td {
    display: block;
  }

  .nr-passkeys-fe-management__td {
    border-bottom: 0;
    padding: var(--space-1) var(--space-3);
  }

  .nr-passkeys-fe-management__row {
    padding: var(--space-3) 0;
    border-bottom: var(--strich-1) solid var(--linie);
  }

  .nr-passkeys-fe-management__td--actions {
    text-align: left;
    padding-top: var(--space-2);
  }
}

.login-alert {
  transform: none;
  margin-bottom: var(--space-4);
}

/* Profil: Bild und leise Regel-Skills ---------------------------------- */

/* Quadratisch, 2px-Kante, harter Versatz - keine Rundung (Regel 2). */
.profile-avatar {
  display: inline-block;
  object-fit: cover;
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  box-shadow: var(--versatz);
  background: var(--papier-blatt);
}

.profile-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--papier-schatten);
}

.profile-image-field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.profile-image-field__inputs {
  display: grid;
  gap: var(--space-2);
  flex: 1 1 240px;
}

.profile-rule-skills {
  color: var(--ink-muted);
  font-size: 13px;
  margin: var(--space-2) 0 0;
}

/* Bild antippen = neues Bild waehlen (Profile/Avatar.js). */
.profile-avatar-upload__trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.profile-avatar-upload__badge {
  position: absolute;
  right: calc(var(--space-2) * -1);
  bottom: calc(var(--space-2) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.profile-avatar-upload__trigger:hover .profile-avatar-upload__badge,
.profile-avatar-upload input:focus-visible + .profile-avatar-upload__trigger .profile-avatar-upload__badge {
  background: var(--brand);
  color: var(--auf-hell);
}

.profile-avatar-upload.is-uploading {
  opacity: 0.5;
  pointer-events: none;
}

/* Anmeldungen: je Festival eine Zeile, Einzelheiten zum Aufklappen. */
.profile-registrations {
  display: grid;
  gap: var(--space-2);
}

.profile-registration details {
  border: var(--strich-1) solid var(--linie);
  background: var(--papier-blatt);
}

.profile-registration__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}

.profile-registration__head::-webkit-details-marker {
  display: none;
}

.profile-registration__head::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 700;
}

.profile-registration details[open] .profile-registration__head::after {
  content: "\2212";
}

.profile-registration__title {
  display: grid;
  min-width: 0;
  flex: 1 1 12rem;
  line-height: 1.3;
}

.profile-registration__meta {
  color: var(--ink-muted);
  font-size: 13px;
}

.profile-registration__head .status {
  flex: 0 0 auto;
}

.profile-registration__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: var(--strich-1) solid var(--linie);
  color: var(--ink-muted);
  font-size: 13px;
}

/* Vereine im eigenen Profil (Reiter Organisatoren): eine Zeile je Verein -
   Logo, Name, Ort, Mitgliedschaft, rechts der Schalter. */
.profile-orgs__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.profile-orgs__logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border: var(--strich-1) solid var(--linie);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papier-blatt);
  font-family: var(--font-display);
  font-size: 26px;
}

.profile-orgs__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.profile-orgs__text {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-orgs__name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.profile-orgs__meta {
  color: var(--ink-muted);
  font-size: 13px;
}

.profile-orgs__switch {
  flex: 0 0 auto;
  margin: var(--space-2) 0 0;
  white-space: nowrap;
}

.profile-orgs__switch .profile-orgs__off,
.profile-orgs__switch .form-check-input:checked ~ .form-check-label .profile-orgs__on {
  display: inline;
}

.profile-orgs__switch .profile-orgs__on,
.profile-orgs__switch .form-check-input:checked ~ .form-check-label .profile-orgs__off {
  display: none;
}

.profile-orgs__switch .profile-orgs__off {
  color: var(--ink-muted);
}

/* Handy: Logo und Text nebeneinander, der Schalter darunter unter dem Text. */
@media (max-width: 575.98px) {
  .profile-orgs__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: var(--space-3);
  }

  .profile-orgs__switch {
    grid-column: 2;
    margin-top: var(--space-2);
  }
}

.profile-orgs__group {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.profile-orgs__intro {
  margin-top: var(--space-2);
  font-size: 14px;
}

.profile-orgs__intro summary {
  cursor: pointer;
  color: var(--brand-text);
  font-weight: 600;
  font-size: 13px;
}

/* Mitgliedschaft am Verein (Profil, Reiter Organisatoren). */
.profile-membership {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--linie);
}

/* --- API-Zugang ---------------------------------------------------- *
 * Token und Beispiele zum Kopieren: umbrechen statt seitlich scrollen,
 * die Swagger-Doku in voller Breite darunter.
 * ------------------------------------------------------------------- */

.api-token,
.api-snippet {
  padding: var(--space-3);
  background: var(--papier-schatten);
  border: var(--strich-1) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.api-token {
  font-size: 15px;
  font-weight: 700;
  user-select: all;
}

.api-docs-frame {
  display: block;
  width: 100%;
  height: 80vh;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * "Wann bist du da?" - Tage nach Aufbau, Festival, Abbau gruppiert
 * (Partials/Registration/DayAttendance.html).
 *
 * Die Gruppe steht in Stempelschrift ueber ihren Tagen, der Hinweis der
 * Orga darunter als Zettel: Kante, Papier, kein Grau - er sagt, wann
 * die Schichten anfangen, und soll gelesen werden, bevor man ankreuzt.
 * ------------------------------------------------------------------ */
.day-attendance__group + .day-attendance__group {
  margin-top: var(--space-6);
}

.day-attendance__group-title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--strich-1) solid var(--linie);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.day-attendance__info {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--papier-blatt);
  border: var(--strich-1) solid var(--linie);
  border-left-width: var(--strich-3);
  color: var(--ink);
  max-width: 68ch;
}

/* "?"-Menue: der Thema-Schalter nennt, wohin er schaltet - im hellen
 * Thema "Dunkles Thema", im dunklen "Helles Thema". */
html:not([data-bs-theme="dark"]) .whatsnew-menu .theme-toggle__light,
html[data-bs-theme="dark"] .whatsnew-menu .theme-toggle__dark {
  display: none;
}

/* Reiter eines Arbeitsbereichs (Partials/Navigation/HubTabs.html): das
   Menue-Icon vor dem Titel, leise, am aktiven Reiter voll. */
.hub-tabs__icon {
  flex: none;
  opacity: 0.55;
}

.hub-tabs .nav-link.active .hub-tabs__icon,
.hub-tabs .nav-link:hover .hub-tabs__icon {
  opacity: 1;
}

/* Die Icons sind schwarze SVG-Dateien; im dunklen Thema standen sie
   Schwarz auf Schwarz. */
html[data-bs-theme="dark"] .hub-tabs__icon {
  filter: invert(1);
}

/* Seiten-Icons im Profil-Dropdown - gleiche Maske wie im Seitenmenue,
 * gleiche Groesse wie das Logout-Symbol darunter. */
.profile-dropdown .dropdown-menu-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--menu-icon, none) center / contain no-repeat;
  mask: var(--menu-icon, none) center / contain no-repeat;
}

/* Mehrfachauswahl (Js/dual-list.js): Basis in diy.css, hier die Marke -
 * eckig, Kanten und Flaechen aus den Tokens. */
.dual-list__pane {
  border: var(--strich-1) solid var(--linie);
  border-radius: var(--radius-none);
  background: var(--papier-blatt);
}

.dual-list__pane--selected {
  border-color: var(--ink);
}

.dual-list__count {
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
}

.dual-list__pane--selected .dual-list__count {
  background: var(--akzent);
  color: var(--auf-hell);
}

.dual-list__option {
  border-radius: var(--radius-none);
}

.dual-list__option:hover,
.dual-list__option:focus-visible {
  background: var(--papier);
}

.dual-list__option:focus-visible {
  outline: var(--strich-2) solid var(--fokus);
  outline-offset: -2px;
}

/* "Meine Seiten" im Seitenmenue (sidenav-focus.js, PermissionMenuProcessor::markFocus). */
.side-nav.is-focus [data-nav-focus="0"],
.side-nav.is-focus .side-nav-group.is-focus-empty {
  display: none;
}

.side-nav-focus {
  font-size: 12px;
  color: var(--ink-muted, #999);
}

.side-nav-focus .side-nav-focus-btn {
  font-size: 12px;
  color: inherit;
  text-decoration: none;
}

.leftside-menu .side-nav-focus .side-nav-focus-btn.fw-bold {
  color: var(--bs-primary);
}

/* Dokumente (Document/Index.html, Document/Edit.html): Umbenennen-Feld und Collabora im iframe. */
.documents__rename {
  min-width: 18rem;
}

.documents__editor {
  display: block;
  width: 100%;
  height: calc(100vh - 180px);
  min-height: 480px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: #fff;
}