/* Mitgliederbereich.
 *
 * Eigenes Stylesheet statt Theme-CSS, damit der Bereich in jedem Theme
 * gleich funktioniert. Farben kommen aus den Theme-Variablen - er passt
 * sich also an, ohne angefasst zu werden.
 */

/*
 * "hidden" muss auch wirklich verbergen.
 *
 * Der Browser setzt für [hidden] ein display:none - aber nur in seinem
 * eigenen Stylesheet, und das verliert gegen jede Regel von uns. Sobald
 * ein Element display:grid oder display:flex bekommt (und das haben hier
 * fast alle Listen), bleibt es trotz el.hidden = true sichtbar.
 *
 * Der Fehler ist besonders unangenehm, weil er sich beim Prüfen versteckt:
 * el.hidden meldet brav true, die Konsole sagt "verborgen", und nur auf
 * dem Bildschirm steht es weiter da. Genau so ist der Filter der
 * Matchliste durchgerutscht.
 */
[hidden] { display: none !important; }

.cms-mh {
  --mh-line: var(--color-border, rgba(255,255,255,.10));
  --mh-surface: var(--color-surface, #141821);
  --mh-accent: var(--color-accent, #c7a25a);
  --mh-muted: var(--color-muted, #98a2b8);
  display: grid;
  gap: 20px;
  padding: 24px;
}

/* --- Uhr -------------------------------------------------------------- */

.cms-mh-clock {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mh-line);
}
.cms-mh-date { font-size: clamp(18px, 3vw, 26px); font-weight: 700; }
.cms-mh-sep { color: var(--mh-muted); }
.cms-mh-time {
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: var(--mh-accent);
  /* Gleiche Ziffernbreite, damit die Uhr beim Minutenwechsel nicht springt. */
  font-variant-numeric: tabular-nums;
}

/* --- Karten ----------------------------------------------------------- */

.cms-mh-grid-outer {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.cms-mh-card {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--radius, 14px);
  padding: 18px;
}
.cms-mh-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cms-mh-card h3 { margin: 0; font-size: 15px; letter-spacing: .04em; }
.cms-mh-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(127,145,190,.14);
  color: var(--mh-muted);
}
.cms-mh-empty { color: var(--mh-muted); font-size: 13px; margin: 0; }
.cms-mh-note { color: var(--mh-muted); font-size: 12px; margin: 8px 0 0; }
.cms-mh-next { font-size: 13px; margin: 10px 0 0; }
.cms-mh-today {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(199,162,90,.12);
  color: var(--mh-accent);
  font-size: 13px;
}

/* Das Kalenderfeld darf breiter sein als die übrigen Karten. */
.cms-mh-calendar { grid-column: span 2; }
@media (max-width: 700px) { .cms-mh-calendar { grid-column: span 1; } }

/* --- Formularfeld ------------------------------------------------------ */

.cms-mh-field { display: grid; gap: 6px; }
.cms-mh-field > span { font-size: 11px; font-weight: 700; color: var(--mh-muted); }
.cms-mh-field select {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--mh-line);
  background: var(--color-bg, #0b0d12);
  color: inherit;
  font: inherit;
}

/* --- Kalender ---------------------------------------------------------- */

.cms-mh-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cms-mh-cal-head {
  text-align: center;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--mh-muted);
  padding-bottom: 6px;
}
.cms-mh-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.cms-mh-day.is-other { opacity: .28; }
.cms-mh-day.is-weekend { color: var(--mh-muted); }
.cms-mh-day.is-today {
  border-color: var(--mh-accent);
  background: rgba(199,162,90,.12);
  font-weight: 800;
}
.cms-mh-day.is-vacation { background: rgba(63,191,117,.14); }
.cms-mh-day.is-holiday { background: rgba(217,83,79,.16); }
.cms-mh-day b { font-weight: inherit; }

.cms-mh-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.cms-mh-day .cms-mh-dot { position: absolute; bottom: 4px; }
.cms-mh-dot.is-holiday { background: #d9534f; }
.cms-mh-dot.is-vacation { background: #3fbf75; }

.cms-mh-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--mh-muted);
}
.cms-mh-legend .cms-mh-dot { margin-left: 8px; }

/* --- Listen ------------------------------------------------------------ */

.cms-mh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cms-mh-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--mh-line);
  border-radius: 9px;
}
.cms-mh-item b { font-size: 13px; }
.cms-mh-item p { margin: 4px 0 0; font-size: 12px; color: var(--mh-muted); }
.cms-mh-when { font-size: 11px; color: var(--mh-muted); white-space: nowrap; }
.cms-mh-item.is-done { opacity: .5; }
.cms-mh-item.is-done b { text-decoration: line-through; }
.cms-mh-item.is-overdue { border-color: rgba(217,83,79,.5); }
.cms-mh-item.is-overdue .cms-mh-when { color: #ff9b97; }

.cms-mh-loading, .cms-member-loading {
  display: grid;
  place-items: center;
  min-height: 200px;
  color: var(--mh-muted);
}

/* --- Kennzahlen -------------------------------------------------------- */

.cms-mh-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cms-mh-kpi {
  background: var(--mh-surface);
  border: 1px solid var(--mh-line);
  border-radius: var(--radius, 14px);
  padding: 14px 16px;
  display: grid;
  gap: 2px;
}
.cms-mh-kpi small {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mh-muted);
}
.cms-mh-kpi b { font-size: 26px; line-height: 1.1; color: var(--mh-accent); }
.cms-mh-kpi span { font-size: 11px; color: var(--mh-muted); }

/* --- Wochenplaner ------------------------------------------------------ */

.cms-mh-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cms-mh-week-head small {
  display: block;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--mh-muted);
  margin-bottom: 3px;
}
.cms-mh-week-head h3 { margin: 0; font-size: 15px; }

.cms-mh-week-nav { display: flex; gap: 6px; }
.cms-mh-week-nav button {
  border: 1px solid var(--mh-line);
  background: transparent;
  color: inherit;
  border-radius: 9px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.cms-mh-week-nav button:hover:not(:disabled) {
  border-color: var(--mh-accent);
  color: var(--mh-accent);
  background: rgba(199,162,90,.08);
}
.cms-mh-week-nav button:disabled { opacity: .4; cursor: default; }

/* Sieben Spalten am Rechner, gestapelt auf dem Telefon. */
.cms-mh-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 900px) {
  .cms-mh-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cms-mh-week-grid { grid-template-columns: 1fr; }
}

.cms-mh-wday {
  border: 1px solid var(--mh-line);
  border-radius: 10px;
  padding: 10px;
  min-height: 118px;
  display: grid;
  gap: 6px;
  align-content: start;
}
.cms-mh-wday > header { display: grid; gap: 1px; margin: 0 0 2px; }
.cms-mh-wday > header small {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mh-muted);
}
.cms-mh-wday > header b { font-size: 15px; }
.cms-mh-wday.is-weekend { background: rgba(127,145,190,.05); }
.cms-mh-wday.is-vacation { border-color: rgba(63,191,117,.42); }
.cms-mh-wday.is-holiday { border-color: rgba(217,83,79,.45); }
.cms-mh-wday.is-today {
  border-color: var(--mh-accent);
  background: rgba(199,162,90,.10);
}
.cms-mh-wday.is-today > header b { color: var(--mh-accent); }

.cms-mh-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 999px;
  line-height: 1.3;
}
.cms-mh-tag.is-holiday { background: rgba(217,83,79,.18); color: #ff9b97; }
.cms-mh-tag.is-vacation { background: rgba(63,191,117,.16); color: #7fe0a6; }

.cms-mh-wentry {
  border-left: 2px solid var(--mh-accent);
  padding: 3px 0 3px 8px;
  display: grid;
  gap: 1px;
}
.cms-mh-wentry b { font-size: 12px; font-weight: 600; }
.cms-mh-wentry span { font-size: 10px; color: var(--mh-muted); }
.cms-mh-wentry.is-done { opacity: .45; }
.cms-mh-wentry.is-done b { text-decoration: line-through; }
.cms-mh-wentry.is-overdue { border-left-color: #d9534f; }
.cms-mh-wempty { margin: 0; color: var(--mh-muted); font-size: 12px; }

/* --- Nur-Lese-Feld ----------------------------------------------------- */

.cms-mh-readonly { display: grid; gap: 4px; margin: 0; }
.cms-mh-readonly span { font-size: 11px; font-weight: 700; color: var(--mh-muted); }
.cms-mh-readonly b { font-size: 14px; }
/* --- Mehr anzeigen ------------------------------------------------------ */

.cms-mh-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--mh-line);
  border-radius: var(--radius, 14px);
  background: transparent;
  color: var(--mh-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.cms-mh-more:hover {
  border-color: var(--mh-accent);
  color: var(--mh-accent);
  background: rgba(199,162,90,.06);
}
.cms-mh-more i {
  font-style: normal;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.cms-mh-more.is-open i { transform: rotate(180deg); }
/* --- Such-Overlay: Kopfzeile ------------------------------------------- *
 *
 * Das uebernommene Stylesheet kennt .search-close, aber keine Kopfzeile mit
 * Markenzeile links und Schliessen rechts - im Original stand das Kreuz als
 * einzelnes Element im Fluss. Diese wenigen Zeilen stellen die Aufteilung her.
 */
.site-search-panel .search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
}
.site-search-panel .search-head .member-label { margin: 0; }
.site-search-panel .search-close { flex: 0 0 auto; line-height: 1; }
/* --- Module und Positionen ---------------------------------------------- */

.cms-position-header { display: block; }
.cms-module { display: block; }

/* --- Menü-Addon --------------------------------------------------------- */

/* Bootstrap setzt .navbar-nav ausserhalb einer .navbar auf senkrecht -
   deshalb muss die Richtung hier ausdruecklich gesetzt werden, sonst
   stapeln sich die Menuepunkte untereinander. */
.cms-menu .navbar-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cms-menu-vertical .navbar-nav { flex-direction: column; align-items: flex-start; gap: 2px; }
.cms-menu .dropdown-menu { flex-direction: column; }
.cms-menu .nav-item { list-style: none; }
.cms-menu-sep {
  padding: 8px 12px 4px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}
.cms-menu-icon { width: 1em; height: 1em; margin-right: .5em; vertical-align: -.12em; }
.cms-menu-empty {
  padding: 10px 14px;
  border: 1px dashed var(--color-border, rgba(255,255,255,.2));
  border-radius: 9px;
  opacity: .7;
  font-size: 13px;
}

/* Ausrichtung innerhalb der Spalte. */
.cms-menu-center .navbar-nav { justify-content: center; }
.cms-menu-end .navbar-nav { justify-content: flex-end; }
.cms-menu-center.cms-menu-vertical .navbar-nav { align-items: center; }
.cms-menu-end.cms-menu-vertical .navbar-nav { align-items: flex-end; }

/* --- Hamburger ----------------------------------------------------------
   Ohne JavaScript bleibt das Menü offen und der Knopf verborgen - ein Knopf,
   der nichts tut, wäre schlimmer als kein Knopf. Erst das Skript setzt
   .is-bereit, klappt zu und macht den Knopf sichtbar. */

.cms-menu-burger { position: relative; display: flex; }
.cms-menu-burger.cms-menu-center { justify-content: center; }
.cms-menu-burger.cms-menu-end { justify-content: flex-end; }
.cms-menu-burger .cms-menu-toggle { display: none; }
.cms-menu-burger.is-bereit .cms-menu-toggle { display: inline-flex; }
.cms-menu-burger.is-bereit .cms-menu-panel { display: none; }
.cms-menu-burger.is-bereit.is-offen .cms-menu-panel { display: block; }

.cms-menu-toggle {
  align-items: center;
  justify-content: center;
  width: var(--cms-burger-size, 44px);
  height: var(--cms-burger-size, 44px);
  padding: 0;
  border: 1px solid var(--color-border, rgba(255,255,255,.16));
  border-radius: var(--cms-burger-radius, 12px);
  background: var(--cms-burger-bg, transparent);
  color: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.cms-menu-toggle:hover { border-color: var(--color-primary, currentColor); }
.cms-menu-toggle:focus-visible {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: 2px;
}

.cms-burger { display: block; width: 18px; }
.cms-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.cms-burger span + span { margin-top: 4px; }
.is-offen .cms-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-offen .cms-burger span:nth-child(2) { opacity: 0; }
.is-offen .cms-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .cms-burger span { transition: none; }
}

.cms-menu-burger.is-bereit .cms-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--color-border, rgba(255,255,255,.16));
  border-radius: var(--cms-burger-radius, 12px);
  background: var(--color-surface, #14141c);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.cms-menu-burger.cms-menu-start.is-bereit .cms-menu-panel { right: auto; left: 0; }
.cms-menu-burger .cms-menu-panel .navbar-nav {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.cms-menu-burger .cms-menu-panel .nav-link { display: block; padding: 8px 10px; border-radius: 8px; }
.cms-menu-burger .cms-menu-panel .nav-link:hover { background: rgba(127,127,127,.14); }

/* --- Hamburger von selbst auf dem Telefon --------------------------------
   Jede Navigation, die nicht ohnehin ein Klappmenü ist, wird auf schmalen
   Geräten zu einem. Vorher standen dort alle Einträge offen nebeneinander -
   bei zehn Stück war der halbe Bildschirm Menü, bevor der Inhalt anfing.

   Der Knopf steht immer im HTML; hier entscheidet sich nur, ab wann man ihn
   sieht. Über der Schwelle bleibt alles, wie es war: Knopf verborgen, Liste
   offen. Die Grenze ist dieselbe wie beim Breakpoint "Mobil" im Builder,
   damit sich Vorschau und Wirklichkeit decken. */

.cms-menu-auto .cms-menu-toggle { display: none; }
.cms-menu-auto .cms-menu-panel { display: block; }

@media (max-width: 767.98px) {
  .cms-menu-auto { position: relative; display: flex; }
  .cms-menu-auto.cms-menu-center { justify-content: center; }
  .cms-menu-auto.cms-menu-end { justify-content: flex-end; }

  .cms-menu-auto.is-bereit .cms-menu-toggle { display: inline-flex; }
  .cms-menu-auto.is-bereit .cms-menu-panel { display: none; }
  .cms-menu-auto.is-bereit.is-offen .cms-menu-panel { display: block; }

  .cms-menu-auto.is-bereit .cms-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    padding: 10px;
    border: 1px solid var(--color-border, rgba(255,255,255,.16));
    border-radius: var(--cms-burger-radius, 12px);
    background: var(--color-surface, #14141c);
    box-shadow: 0 18px 44px rgba(0,0,0,.34);
  }
  .cms-menu-auto.cms-menu-start.is-bereit .cms-menu-panel { right: auto; left: 0; }

  .cms-menu-auto .cms-menu-panel .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .cms-menu-auto .cms-menu-panel .nav-link { display: block; padding: 8px 10px; border-radius: 8px; }
  .cms-menu-auto .cms-menu-panel .nav-link:hover { background: rgba(127,127,127,.14); }
}

/* --- Suchknopf in Größen ------------------------------------------------
   Das Theme bringt die Grundform mit; hier nur die Abweichungen, damit ein
   Theme-Wechsel nicht die Größen mitnimmt. */

.search-trigger.is-klein { height: 32px; padding: 0 10px; font-size: 8px; }
.search-trigger.is-klein svg { width: 13px; height: 13px; }
.search-trigger.is-gross { height: 52px; padding: 0 20px; font-size: 11px; gap: 12px; }
.search-trigger.is-gross svg { width: 19px; height: 19px; }

.search-trigger.is-breit {
  width: 100%;
  justify-content: flex-start;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  border-radius: var(--cms-suche-radius, 10px);
}
.search-trigger.is-breit > span { flex: 1; text-align: left; opacity: .72; }
.search-trigger.is-breit > svg { order: 3; margin-left: auto; flex: none; }
.search-trigger.is-breit kbd { order: 2; }

/* --- Kopf- und Fußmodule folgen dem Farbschema ---------------------------
 *
 * Ein Theme bringt seine eigene Leiste mit und färbt sie fest - das
 * Manada-Theme etwa hell für einen dunklen Balken. Sobald eine Seite auf
 * ein helles Schema umschaltet, steht dort hellgrau auf weiß und man liest
 * nichts mehr.
 *
 * Kopf- und Fußbereich sind aber **Module des CMS**, nicht Bestandteil des
 * Themes. Sie gehören also an die Farben des CMS - und zwar in jedem
 * Theme. Deshalb hier und nicht im Theme.
 */

/*
 * Mit !important - und das ist hier keine Bequemlichkeit.
 *
 * Das Manada-Theme setzt seine Leistenfarbe selbst mit !important
 * (".nav-link { color: #d4d1ca !important }"). Dagegen kommt keine
 * normale Regel an, egal wie spezifisch. Übernommene Themes machen das
 * regelmäßig - deshalb gibt es im Builder auch den Schalter
 * "Stil erzwingen", der genau dasselbe Problem löst.
 *
 * Gemessen: ohne diese Zeilen steht hellgrau auf weiß, rgb(212,209,202).
 */
[data-cms-module] .nav-link,
[data-cms-module] .navbar-nav a,
[data-cms-module] .dropdown-item,
[data-cms-module] .brand,
[data-cms-module] .navbar-brand,
[data-cms-module] .search-trigger { color: var(--color-text) !important; }

[data-cms-module] .nav-link:hover,
[data-cms-module] .navbar-nav a:hover,
[data-cms-module] .nav-link.active {
  color: var(--color-primary, var(--color-accent)) !important;
}

[data-cms-module] .brand small,
[data-cms-module] .cms-menu-sep { color: var(--color-muted) !important; }

/*
 * Kein Kasten um das Logo.
 *
 * Das Manada-Theme setzt .brand-icon als um 45 Grad gedrehtes Quadrat mit
 * Rand - die Raute, die man in der Kopfleiste sieht. Für das Theme ist das
 * sein Wappen; für ein hochgeladenes Logo ist es ein Rahmen, der nicht
 * dorthin gehört, und die Drehung legt das Bild schief.
 *
 * Der Marke-Baustein gehört dem CMS, nicht dem Theme - also hier zurück
 * auf null. Wer eine Raute will, baut sie in sein Logo ein.
 */
/*
 * inline-flex, nicht block.
 *
 * Ein Block nimmt die Breite, die er kriegen kann, und das Bild darin
 * wird auf die Höhe des Kastens gestaucht - ein breites Wortlogo war
 * dadurch angeschnitten. inline-flex legt sich um seinen Inhalt: Die
 * Höhe gibt der Baustein vor, die Breite ergibt sich aus dem Seiten-
 * verhältnis.
 */
[data-cms-module] .brand-icon {
  border: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0;
  flex: none;
  background: none !important;
  overflow: visible !important;
}
[data-cms-module] .brand-icon > img,
[data-cms-module] .brand-icon > svg {
  transform: none !important;
  width: auto !important;
  height: 100% !important;
  max-width: none;
  object-fit: contain;
}
/* Ohne eigenes Logo bleibt das Symbol des Themes - dann aber in der
   Schriftfarbe, nicht in seinem Gold auf weißem Grund. */
[data-cms-module] .brand-icon > svg { stroke: currentColor !important; }

[data-cms-module] .search-trigger {
  border-color: var(--color-border);
  background: transparent;
}
[data-cms-module] .search-trigger:hover {
  border-color: var(--color-primary, currentColor);
  color: var(--color-primary, currentColor);
  background: transparent;
}
[data-cms-module] .search-trigger kbd {
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* --- Fußbereich in der Akzentfarbe ---------------------------------------
 *
 * Steht die Fläche in der Hausfarbe, muss alles darin weiß sein - Links,
 * Symbole, Copyright. Das Theme färbt sie sonst weiter in seinen eigenen
 * Tönen, und die sind auf Rot nicht zu lesen.
 *
 * Erkannt am gesetzten Hintergrund des Abschnitts: Wer eine farbige Fläche
 * baut, bekommt die passenden Schriftfarben dazu, ohne sie einzeln zu
 * setzen.
 */
.cms-module-footer .cms-section[style*="--color-primary"] a,
.cms-module-footer .cms-section[style*="--color-primary"] .nav-link,
.cms-module-footer .cms-section[style*="--color-primary"] .cms-social-item {
  color: #fff !important;
}
.cms-module-footer .cms-section[style*="--color-primary"] a:hover,
.cms-module-footer .cms-section[style*="--color-primary"] .nav-link:hover {
  opacity: .78;
}
.cms-module-footer .cms-section[style*="--color-primary"] .cms-social-item {
  border-color: rgba(255,255,255,.4) !important;
}

/*
 * Das Logo auf farbigem Grund weiß.
 *
 * Ein Logo trägt die Hausfarbe - und genau die ist hier der Untergrund.
 * Das rote Wappen verschwand vollständig, vom Schriftzug blieb nur der
 * Teil übrig, der die Textfarbe erbt.
 *
 * brightness(0) macht alles schwarz, invert(1) daraus weiß. Das
 * funktioniert für jedes Logo, egal welche Farben darin stecken - und ist
 * deshalb der richtige Rückfall, solange niemand etwas Besseres hinterlegt
 * hat.
 *
 * **Aber es plättet auch die Zeichnung.** Aus einem roten Schild mit weißem
 * Kreuz wird eine weiße Fläche ohne Kreuz - man erkennt die Marke nicht
 * mehr, nur noch ihren Umriss. Wer eine umgedrehte Fassung hinterlegt
 * (weißes Schild, farbiges Kreuz), soll sie deshalb unverändert sehen.
 *
 * Erkennungszeichen ist "invers" im Dateinamen. Das ist eine Verabredung
 * und keine Technik - aber eine, die man einmal liest und danach behält,
 * und sie kostet keine zusätzliche Einstellung im Admin.
 */
.cms-module-footer .cms-section[style*="--color-primary"] .brand-icon img:not([src*="invers"]),
.cms-module-footer .cms-section[style*="--color-primary"] .brand-icon svg:not([src*="invers"]) {
  filter: brightness(0) invert(1);
}

/* --- Bildband am Seitenkopf ----------------------------------------------
 *
 * Sehr langsam, sehr wenig: zwanzig Sekunden für vier Prozent Vergrößerung.
 * Man sieht die Bewegung nicht, man merkt nur, dass das Band nicht tot ist.
 * Mehr wäre eine Diashow, und die lenkt vom Inhalt ab.
 *
 * Die Kacheln laufen versetzt, damit sie nicht im Gleichschritt atmen -
 * das fiele sofort als Effekt auf.
 */
.cms-kachel-lebt {
  animation: cms-kachel-zoom 22s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}
.cms-kachel-lebt:nth-child(2n) { animation-delay: -7s; }
.cms-kachel-lebt:nth-child(3n) { animation-delay: -14s; }

@keyframes cms-kachel-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

/* Die Kachel darf beim Vergrößern nicht über ihre Spalte hinauslaufen. */
.cms-kachel-lebt { display: block; }
.row > [class*="col"]:has(> .cms-kachel-lebt) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cms-kachel-lebt { animation: none; }
}

/* --- Neuigkeiten ---------------------------------------------------------
 *
 * Karten mit Bild oben und Text darunter. Die ganze Karte ist der Verweis:
 * Auf dem Telefon trifft der Daumen eine Fläche leichter als eine Zeile.
 */

.cms-news { display: grid; gap: 22px; }
.cms-news-titel { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.cms-news-leer { margin: 0; color: var(--color-muted); }

.cms-news-raster {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (min-width: 900px) {
  .cms-news-raster {
    grid-template-columns: repeat(var(--cms-news-spalten, 3), minmax(0, 1fr));
  }
}

.cms-news-karte {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform .16s ease, border-color .18s ease;
}
.cms-news-karte:hover { transform: translateY(-2px); border-color: var(--color-primary, currentColor); }
.cms-news-karte:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; }

.cms-news-bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cms-news-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne Bild eine Fläche statt gar nichts - sonst sind die Karten einer
   Reihe verschieden hoch und die Reihe sieht zerrissen aus. */
.cms-news-bild.is-leer {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary, #666) 16%, var(--color-surface)),
    var(--color-surface));
}

.cms-news-text { display: grid; gap: 7px; padding: 16px 18px 18px; align-content: start; }
.cms-news-datum {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cms-news-kopf { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.cms-news-anriss { font-size: 14px; color: var(--color-muted); line-height: 1.6; }

.cms-news-mehr { display: flex; justify-content: flex-end; }
.cms-news-knopf {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--radius, 10px);
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cms-news-knopf:hover { opacity: .86; }

/* --- Ein einzelner Beitrag ---------------------------------------------- */

.cms-beitrag { max-width: 44rem; margin-inline: auto; }
.cms-beitrag-meta {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cms-beitrag-titel {
  margin: 0 0 22px;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.12;
  text-wrap: balance;
}
.cms-beitrag-bild {
  width: 100%;
  height: auto;
  margin-bottom: 26px;
  border-radius: var(--radius, 12px);
}

/* Der Anriss steht etwas größer - er ist die Zusammenfassung. */
.cms-beitrag-anriss { font-size: 1.12em; color: var(--color-text); }

.cms-beitrag-text { line-height: 1.75; }
.cms-beitrag-text > :first-child { margin-top: 0; }
.cms-beitrag-text h2 { margin: 32px 0 10px; font-size: 1.5em; }
.cms-beitrag-text h3 { margin: 26px 0 8px; font-size: 1.25em; }
.cms-beitrag-text p { margin: 0 0 16px; }
.cms-beitrag-text ul,
.cms-beitrag-text ol { margin: 0 0 16px; padding-left: 24px; }
.cms-beitrag-text li { margin-bottom: 6px; }
.cms-beitrag-text img { max-width: 100%; height: auto; border-radius: var(--radius, 10px); }
.cms-beitrag-text a { color: var(--color-primary, currentColor); }
.cms-beitrag-text blockquote {
  margin: 0 0 16px;
  padding: 6px 0 6px 18px;
  border-left: 3px solid var(--color-primary, var(--color-border));
  color: var(--color-muted);
  font-style: italic;
}
.cms-beitrag-text hr { margin: 28px 0; border: 0; border-top: 1px solid var(--color-border); }
.cms-beitrag-text code {
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: .92em;
}
.cms-beitrag-text pre { overflow-x: auto; padding: 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent); }

.cms-beitrag-zurueck { margin: 34px 0 0; font-size: 13px; }
.cms-beitrag-zurueck a { color: var(--color-muted); }
.cms-beitrag-zurueck a:hover { color: var(--color-text); }

/* --- GetOneLink ------------------------------------------------------------
 *
 * Diese Seiten werden fast nur am Telefon gelesen und mit dem Daumen
 * bedient. Deshalb durchgehend: eine Spalte, große Trefferflächen, nichts
 * Kleingedrucktes zwischen den Zielen.
 */

.cms-profil { display: grid; gap: 8px; justify-items: center; text-align: center; }
.cms-profil.is-start { justify-items: start; text-align: left; }

.cms-profil-bild {
  width: var(--cms-profil-bild, 96px);
  height: var(--cms-profil-bild, 96px);
  object-fit: cover;
  border: 1px solid var(--color-border);
}
.cms-profil-bild.is-circle { border-radius: 50%; }
.cms-profil-bild.is-rounded { border-radius: 18px; }
.cms-profil-bild.is-square { border-radius: 0; }

.cms-profil-name { margin: 6px 0 0; font-size: clamp(1.25rem, 4vw, 1.6rem); }
/*
 * Kennung und Kurztext folgen der Schriftfarbe ihrer Umgebung.
 *
 * Vorher stand dort --color-muted - ein fester Grauton aus dem
 * Farbschema der Website. Auf einem farbigen Kopfband war das
 * Blaugrau auf Violett: lesbar nur, wenn man weiss, dass da etwas steht.
 * currentColor nimmt die Farbe des Bandes und daempft sie, statt eine
 * fremde danebenzusetzen.
 */
.cms-profil-kennung {
  margin: 0; font-size: 13px;
  color: color-mix(in srgb, currentColor 65%, transparent);
}
.cms-profil-bio {
  margin: 4px 0 0; max-width: 34em; line-height: 1.6;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.cms-profil-leer { margin: 0; color: var(--color-muted); font-size: 13px; }

/* --- Linkliste ---------------------------------------------------------- */

.cms-linkliste { display: grid; gap: 10px; }

.cms-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--cms-link-radius, 14px);
  text-decoration: none;
  color: inherit;
  /* Der Daumen trifft leichter, wenn nichts wackelt - nur Farbe und ein
     kleiner Versatz, keine Größenänderung, die den Umbruch verschiebt. */
  transition: transform .16s ease, background .18s ease, border-color .18s ease;
}
.cms-link:hover { transform: translateY(-1px); }
.cms-link:active { transform: translateY(0); }
.cms-link:focus-visible { outline: 2px solid var(--color-primary, currentColor); outline-offset: 2px; }

.cms-linkliste.is-large .cms-link { padding: 18px 20px; }

/*
 * Die Knopffarbe darf die Liste selbst setzen.
 *
 * Ohne Angabe bleibt es beim Akzent der Website - das ist richtig, wenn
 * die Linkseite zum Auftritt gehoert. Eine Vorlage dagegen bringt ihre
 * eigene Farbe mit: Sonst bekaeme jede frisch angelegte Seite die Farbe
 * der Installation, auf der sie entstanden ist, und alle vier Fassungen
 * saehen gleich aus.
 */
.cms-linkliste.is-fill .cms-link {
  background: var(--cms-link-bg, var(--color-primary, #6c5ce7));
  border-color: var(--cms-link-bg, var(--color-primary, #6c5ce7));
  color: var(--cms-link-fg, var(--color-on-primary, #fff));
}
.cms-linkliste.is-fill .cms-link:hover {
  background: color-mix(in srgb, var(--cms-link-bg, var(--color-primary, #6c5ce7)) 86%, #000);
}

.cms-linkliste.is-outline .cms-link { border-color: var(--color-border); }
.cms-linkliste.is-outline .cms-link:hover { border-color: var(--color-primary, currentColor); }

.cms-linkliste.is-soft .cms-link {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border-color: transparent;
}
.cms-linkliste.is-soft .cms-link:hover {
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.cms-link-symbol { width: 20px; height: 20px; flex: none; }
.cms-link-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cms-link-text b { font-weight: 600; overflow-wrap: anywhere; }
.cms-link-text small { font-size: 12px; opacity: .72; overflow-wrap: anywhere; }
.cms-link-pfeil { flex: none; font-size: 20px; opacity: .5; line-height: 1; }

/* Aufmerksamkeit - langsam, damit es nicht nervös wirkt. */
.cms-linkliste.is-puls .cms-link { animation: cms-link-puls 2.4s ease-in-out infinite; }
@keyframes cms-link-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary, #6c5ce7) 45%, transparent); }
  60% { box-shadow: 0 0 0 12px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .cms-linkliste.is-puls .cms-link { animation: none; }
  .cms-link { transition: none; }
  .cms-link:hover { transform: none; }
}

.cms-linkliste-empty,
.cms-linkliste-leer,
.cms-phasen-leer,
.cms-countdown-leer {
  padding: 12px 14px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  color: var(--color-muted);
  font-size: 13px;
}

/* --- Countdown ---------------------------------------------------------- */

.cms-countdown { display: grid; gap: 10px; justify-items: center; text-align: center; }
.cms-countdown-titel { margin: 0; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-muted); }
.cms-countdown-uhr { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.cms-countdown-feld {
  display: grid;
  gap: 2px;
  min-width: 62px;
  padding: 10px 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
}
.cms-countdown-feld b {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cms-countdown-feld small { font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-muted); }

.cms-countdown.is-large .cms-countdown-feld { min-width: 84px; padding: 14px 12px; }
.cms-countdown.is-large .cms-countdown-feld b { font-size: 38px; }

.cms-countdown-fertig { margin: 0; font-size: clamp(1.1rem, 3.5vw, 1.5rem); font-weight: 600; }

/* --- Zeitgesteuerte Phasen ---------------------------------------------- */

.cms-phasen { display: grid; gap: 12px; }
.cms-phase-inhalt { display: grid; gap: 12px; }
.cms-phase-text { margin: 0; font-size: clamp(1rem, 3vw, 1.2rem); line-height: 1.5; }

/* Der Knopf einer Phase ist derselbe wie in der Linkliste - deshalb erben
   die Zustandsklassen hier mit. */
.cms-phasen.is-fill .cms-link {
  background: var(--color-primary, #6c5ce7);
  border-color: var(--color-primary, #6c5ce7);
  color: var(--color-on-primary, #fff);
}
.cms-phasen.is-outline .cms-link { border-color: var(--color-border); }
.cms-phasen.is-soft .cms-link { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* Im Builder stehen alle Phasen untereinander, damit man sie prüfen kann. */
.cms-phase-vorschau {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  opacity: .55;
}
.cms-phase-vorschau.is-aktiv { opacity: 1; border-style: solid; }
.cms-phase-zeit {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Soziale Links ------------------------------------------------------ */

.cms-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cms-social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: calc(var(--cms-social-size, 20px) * 2);
  min-height: calc(var(--cms-social-size, 20px) * 2);
  padding: 8px;
  border: 1px solid var(--color-border, rgba(255,255,255,.12));
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.cms-social-item:hover {
  border-color: var(--color-accent, #c7a25a);
  color: var(--color-accent, #c7a25a);
  transform: translateY(-2px);
}
.cms-social-item span { font-size: 13px; }
.cms-social-icon,
.cms-social-item i { font-size: var(--cms-social-size, 20px); }
.cms-social-item svg { width: var(--cms-social-size, 20px); height: var(--cms-social-size, 20px); }
.cms-socials-empty {
  padding: 10px 14px;
  border: 1px dashed var(--color-border, rgba(255,255,255,.2));
  border-radius: 9px;
  opacity: .7;
  font-size: 13px;
}
/* --- Fußbereich --------------------------------------------------------- */

.cms-menu-title {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .55;
  font-weight: 600;
}

/* Mehrspaltiges Menü: die Einträge verteilen sich, ohne dass ein Eintrag
   über den Spaltenumbruch zerrissen wird. */
.cms-menu-cols .navbar-nav {
  display: block;
  columns: var(--cms-menu-cols, 2);
  column-gap: 28px;
}
.cms-menu-cols .nav-item { break-inside: avoid; }
.cms-menu-cols .nav-link { padding: 5px 0; display: block; }

.cms-footer-top .cms-menu-vertical .nav-link,
.cms-footer-bottom .nav-link {
  padding-inline: 0;
  font-size: 12px;
  letter-spacing: .1em;
  opacity: .72;
  transition: opacity .18s ease, color .18s ease;
}
.cms-footer-top .cms-menu-vertical .nav-link:hover,
.cms-footer-bottom .nav-link:hover { opacity: 1; }

.cms-footer-bottom .navbar-nav { gap: 22px; }
@media (max-width: 700px) {
  .cms-footer-bottom .row > [class*="col-"] { text-align: center; }
  .cms-footer-bottom .navbar-nav { justify-content: center; }
}
/* --- Nach oben ---------------------------------------------------------- */

.cms-scrolltop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: var(--cms-scrolltop-size, 40px);
  height: var(--cms-scrolltop-size, 40px);
  border: 1px solid var(--color-border, rgba(255,255,255,.14));
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  opacity: .6;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.cms-scrolltop:hover {
  opacity: 1;
  border-color: var(--color-accent, #c7a25a);
  color: var(--color-accent, #c7a25a);
  transform: translateY(-3px);
}
.cms-scrolltop svg { width: 45%; height: 45%; }
.cms-scrolltop span { font-size: 11px; letter-spacing: .12em; }

/* --- Einwilligung ------------------------------------------------------- */

/*
 * Der Hinweis bringt seine Farben selbst mit.
 *
 * **Warum er sie nicht mehr von der Seite erbt.** Vorher standen hier
 * --color-surface, --color-text und --color-accent. Auf einer Linkseite
 * mit weißer Schrift fallen die alle drei auf Weiß zusammen: Die Fläche
 * wurde weiß, die Schrift blieb weiß, die Verweise ebenfalls. Uebrig war
 * ein leerer weißer Kasten, in dem nur "Alle erlauben" zu lesen war -
 * ausgerechnet der Knopf, der zustimmt. Nachgemessen auf einer
 * GetOneLink-Seite: surface #ffffff, text #ffffff, accent #ffffff.
 *
 * Das ist kein Schoenheitsfehler. Eine Einwilligung, die man nicht lesen
 * kann, ist keine - und der einzige sichtbare Knopf war der, der alles
 * erlaubt.
 *
 * Deshalb eine eigene, feste Palette: weiße Karte, schwarze Schrift.
 * Sie steht als eigenes Blatt ueber der Seite und ist damit auf jedem
 * Untergrund lesbar - auf der dunklen Vereinsseite ebenso wie auf einer
 * hellen Linkseite. Wer sie faerben will, setzt --cms-consent-grund,
 * --cms-consent-schrift oder --cms-consent-akzent bewusst; dann sieht
 * jemand hin, statt dass eine Seitenfarbe sie unbemerkt ausloescht.
 */
.cms-consent {
  --cc-grund: var(--cms-consent-grund, #ffffff);
  --cc-text: var(--cms-consent-schrift, #15171d);
  --cc-leise: #5b6270;
  --cc-linie: rgba(0, 0, 0, .14);
  --cc-akzent: var(--cms-consent-akzent, #15171d);
  --cc-akzent-schrift: #ffffff;

  position: fixed;
  inset: auto 0 0 0;
  z-index: 12000;
  display: flex;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
  color: var(--cc-text);
}
.cms-consent-card {
  pointer-events: auto;
  width: min(720px, 100%);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--cc-grund);
  border: 1px solid var(--cc-linie);
  color: var(--cc-text);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  animation: cmsConsentIn .32s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes cmsConsentIn { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .cms-consent-card { animation: none } }

/* Die Ueberschrift bekommt die Farbe ausdruecklich: Ein Theme, das
   h1-h3 global einfaerbt, wuerde das Erben sonst aushebeln. */
.cms-consent-card h2 { margin: 0 0 10px; font-size: 18px; color: var(--cc-text); }
.cms-consent-card > p { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--cc-leise); }
.cms-consent-link { color: var(--cc-akzent); }

.cms-consent-details { display: grid; gap: 10px; margin-bottom: 20px; }
.cms-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid var(--cc-linie);
  border-radius: 10px;
}
.cms-consent-row strong { display: block; font-size: 13px; color: var(--cc-text); }
.cms-consent-row span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--cc-leise); }
.cms-consent-always {
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: .14em;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  color: var(--cc-leise);
}

/* Schalter */
.cms-consent-switch { flex: 0 0 auto; position: relative; width: 46px; height: 26px; cursor: pointer; }
.cms-consent-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cms-consent-switch span {
  position: absolute; inset: 0;
  border-radius: 999px;
  /* Ausgeschaltet: hellgrau. Vorher blaugrau auf dunkler Karte - auf
     der weißen Karte waere davon nichts mehr zu sehen gewesen. */
  background: rgba(0, 0, 0, .18);
  transition: background .2s ease;
  pointer-events: none;
}
.cms-consent-switch span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.cms-consent-switch input:checked + span { background: var(--cc-akzent); }
.cms-consent-switch input:checked + span::after { transform: translateX(20px); }
.cms-consent-switch input:focus-visible + span { outline: 2px solid var(--cc-akzent); outline-offset: 2px; }

/* Aktionen - Ablehnen steht gleichrangig neben Zustimmen, nicht versteckt. */
.cms-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cms-consent-actions button {
  flex: 1 1 auto;
  min-width: 150px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}
.cms-consent-actions button:hover { transform: translateY(-1px); }
.cms-consent-primary { background: var(--cc-akzent); color: var(--cc-akzent-schrift); }
.cms-consent-secondary {
  background: transparent;
  border-color: var(--cc-linie);
  color: var(--cc-text);
}
.cms-consent-secondary:hover { border-color: var(--cc-akzent); }
.cms-consent-ghost { background: transparent; color: var(--cc-leise); }
.cms-consent-ghost:hover { color: var(--cc-text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Beschreibung eines Eintrags im Wochenplaner.
   Standardmaessig gedaempft und knapp gehalten - die Woche soll auf einen
   Blick lesbar bleiben. Wer ueber die Suche herkommt, sieht sie trotzdem,
   weil der Treffer hervorgehoben wird. */
.cms-mh-wnote{
  margin:4px 0 0;
  font-size:11px;
  line-height:1.45;
  opacity:.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cms-mh-wentry.cms-treffer .cms-mh-wnote,
.cms-mh-item.cms-treffer .cms-mh-wnote{
  -webkit-line-clamp:unset;
  opacity:.85;
}
.cms-mh-wentry[tabindex]:focus-visible,
.cms-mh-item[tabindex]:focus-visible{outline:2px solid var(--gold,#c9a75a);outline-offset:3px}

/* Der Schatten unter den Link-Knöpfen.
   Die Stufe kommt als Variable aus den Seiteneinstellungen - ohne Angabe
   bleibt es bei "kein Schatten", und die Regel kostet dann nichts. */
.cms-linkliste .cms-link { box-shadow: var(--cms-link-schatten, none); }