/* 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; }
/* Zu ist unsichtbar, nicht display:none - nur so kann das Menü weich aufgleiten (v1.91). */
.cms-menu-burger.is-bereit .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: 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); }
}

/* --- Weiches Aufklappen (v1.91) ------------------------------------------
   Wunsch des Betreibers: weich wie in einer App, auf allen Seiten. Das
   Menü gleitet von oben herein und wird sichtbar, die Einträge folgen kurz
   versetzt. Zu ist es unsichtbar und nicht anklickbar (visibility hidden) -
   so erreicht es auch die Tastatur nicht. Wer Bewegung abbestellt hat,
   bekommt das Menü ohne Animation. Die Übergänge hängen an .is-weich,
   das theme.js erst nach dem ersten Bild setzt - sonst sähe man das
   Menü beim Laden einmal ausblenden. */

.cms-menu-burger.is-bereit .cms-menu-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
}
.cms-menu-burger.is-weich .cms-menu-panel { transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
.cms-menu-burger.cms-menu-start.is-bereit .cms-menu-panel { transform-origin: top left; }
.cms-menu-burger.is-weich.is-offen .cms-menu-panel { transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.cms-menu-burger.is-bereit.is-offen .cms-menu-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cms-menu-burger.is-offen .cms-menu-panel .navbar-nav > * { animation: cms-menue-ein .34s cubic-bezier(.22, 1, .36, 1) both; }

@media (max-width: 767.98px) {
  .cms-menu-auto.is-bereit .cms-menu-panel {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    pointer-events: none;
  }
  .cms-menu-auto.is-weich .cms-menu-panel { transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s; }
  .cms-menu-auto.cms-menu-start.is-bereit .cms-menu-panel { transform-origin: top left; }
  .cms-menu-auto.is-weich.is-offen .cms-menu-panel { transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .cms-menu-auto.is-bereit.is-offen .cms-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .cms-menu-auto.is-offen .cms-menu-panel .navbar-nav > * { animation: cms-menue-ein .34s cubic-bezier(.22, 1, .36, 1) both; }
}

/* Die Einträge kurz nacheinander - bei mehr als acht kommen die übrigen mit dem achten. */
.is-offen .cms-menu-panel .navbar-nav > :nth-child(2) { animation-delay: .03s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(3) { animation-delay: .06s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(4) { animation-delay: .09s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(5) { animation-delay: .12s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(6) { animation-delay: .15s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(7) { animation-delay: .18s; }
.is-offen .cms-menu-panel .navbar-nav > :nth-child(n+8) { animation-delay: .21s; }

@keyframes cms-menue-ein {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cms-menu-burger.is-bereit .cms-menu-panel,
  .cms-menu-auto.is-bereit .cms-menu-panel,
  .is-weich .cms-menu-panel { transition: none !important; transform: none; }
  .is-offen .cms-menu-panel .navbar-nav > * { animation: none; }
}

/* --- 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; }

/*
 * Name, Kennung und Kurztext spannen über die volle Breite.
 *
 * Ohne das ist jede Rasterzelle genau so breit wie ihr Inhalt - und in
 * einer Zelle, die den Text umschließt, kann text-align nichts mehr
 * verschieben. Genau deshalb tat „links" und „rechts" am Profilkopf
 * nichts, während es beim Textbaustein längst ging.
 *
 * Das Bild bleibt ausdrücklich außen vor: Es ist der Mittelpunkt der
 * Seite und wandert nicht mit an den Rand.
 */
.cms-profil-name,
.cms-profil-kennung,
.cms-profil-bio { justify-self: stretch; width: 100%; }

.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; }

/*
 * Die Schriftgröße des Profilkopfs als Faktor.
 *
 * --cms-schrift setzt der Baustein, wenn der Kunde eine Größe gewählt hat;
 * ohne Wahl steht dort nichts und der Faktor ist 1 - dann kommt genau
 * dieselbe Größe heraus wie vorher.
 *
 * **Warum ein Faktor und nicht einfach font-size am Baustein.** Der erste
 * Versuch war, die Maße hier von rem auf em umzustellen und die Größe
 * oben am .cms-profil zu setzen. Gemessen wurde daraufhin ein Name mit
 * 35,8 statt 25,6 Pixeln - ohne dass jemand etwas eingestellt hätte: Der
 * Baustein erbt vom Abschnitt 23,2 Pixel und nicht die 16 des Dokuments,
 * und em rechnet mit dem Erbe. Ein Faktor multipliziert dagegen genau
 * das, was hier steht.
 */
.cms-profil-name {
  margin: 6px 0 0;
  font-size: calc(clamp(1.25rem, 4vw, 1.6rem) * var(--cms-schrift, 1));
}
/*
 * 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: calc(13px * var(--cms-schrift, 1));
  color: color-mix(in srgb, currentColor 65%, transparent);
}
.cms-profil-bio {
  margin: 4px 0 0; max-width: 34em; line-height: 1.6;
  font-size: calc(1em * var(--cms-schrift, 1));
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.cms-profil-leer { margin: 0; color: var(--color-muted); font-size: 13px; }

/*
 * Unterstrichen muss bis zum Text durchkommen.
 *
 * **Der Fehler, den das behebt.** Der Baustein traegt seine Textformate
 * am Rahmen: font-weight, font-style und text-decoration setzt
 * Blocks::styleString() dort. Erbe und Vererbung tragen die ersten
 * beiden bis zum Namen und zum Kurztext - text-decoration aber wird
 * nicht vererbt, sondern vom Vorfahren **ueber** seine Nachfahren
 * gemalt, und genau das hoert an einem Rasterelement auf: .cms-profil
 * ist display:grid, und Name, Kennung und Kurztext sind Rasterzellen
 * mit eigenem Formatierungskontext.
 *
 * Ergebnis: "Unterstrichen" am Profilkopf tat auf der Seite nichts -
 * kein Fehler, keine Meldung, es passierte einfach nichts. Fett und
 * Kursiv wirkten daneben, was die Sache noch verwirrender machte.
 *
 * "inherit" macht aus dem Malen eine Vererbung: Steht am Rahmen nichts,
 * erben die drei "none" und alles ist wie vorher.
 */
.cms-profil-name,
.cms-profil-kennung,
.cms-profil-bio { text-decoration: inherit; }

/*
 * Ausgezeichneter Text - im Kurztext des Profils und im Textbaustein.
 *
 * Beide nehmen seit v73 Auszeichnungen entgegen: fett, kursiv,
 * unterstrichen, Listen, Zitate. Geprüft wurden sie von Anfang an, nur
 * **aussehen** taten sie nach nichts: Für ein Zitat gab es auf einer
 * Kundenseite überhaupt keine Regel, also stand es da wie ein normaler
 * Absatz. „Geht nicht" war deshalb richtig - es war zu sehen und nicht zu
 * erkennen.
 *
 * Die Maße in em, damit sie der eingestellten Schriftgröße folgen.
 */
.cms-profil-bio > :first-child,
.cms-text > :first-child { margin-top: 0; }
.cms-profil-bio > :last-child,
.cms-text > :last-child { margin-bottom: 0; }

.cms-profil-bio p,
.cms-text p { margin: 0 0 .7em; }

.cms-profil-bio blockquote,
.cms-text blockquote {
  margin: 1em 0;
  padding: .55em 1em;
  border: 0;
  border-inline-start: 3px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font-style: italic;
}
/* Rechtsbündig gehört der Strich auf die andere Seite - sonst zeigt er
   ins Leere. */
[style*="text-align:right"] .cms-profil-bio blockquote,
[style*="text-align:right"] .cms-text blockquote,
.cms-profil-bio[style*="text-align:right"] blockquote { border-radius: 10px 0 0 10px; }

.cms-profil-bio ul, .cms-text ul,
.cms-profil-bio ol, .cms-text ol { margin: .6em 0; padding-inline-start: 1.4em; text-align: start; }
.cms-profil-bio li, .cms-text li { margin: .25em 0; }

.cms-profil-bio h2, .cms-text h2 { font-size: 1.35em; margin: .8em 0 .3em; }
.cms-profil-bio h3, .cms-text h3 { font-size: 1.18em; margin: .8em 0 .3em; }
.cms-profil-bio h4, .cms-text h4 { font-size: 1.05em; margin: .8em 0 .3em; }

.cms-profil-bio a, .cms-text a { color: inherit; text-underline-offset: 2px; }

/*
 * Die Schriftgröße der Überschrift als Faktor.
 *
 * Nur wenn eine gewählt ist: Ohne --cms-schrift trifft der Selektor nicht
 * zu, und es bleibt bei der Größe, die h1 bis h6 im Theme haben. Wäre die
 * Regel unbedingt, bekäme jede Überschrift auf jeder Seite plötzlich
 * Fließtextgröße - ein font-size ersetzt die Größe, es multipliziert sie
 * nicht.
 */
h1.cms-heading[style*="--cms-schrift"] { font-size: calc(2.2rem * var(--cms-schrift, 1)); }
h2.cms-heading[style*="--cms-schrift"] { font-size: calc(1.75rem * var(--cms-schrift, 1)); }
h3.cms-heading[style*="--cms-schrift"] { font-size: calc(1.4rem * var(--cms-schrift, 1)); }
h4.cms-heading[style*="--cms-schrift"] { font-size: calc(1.15rem * var(--cms-schrift, 1)); }
h5.cms-heading[style*="--cms-schrift"] { font-size: calc(1rem * var(--cms-schrift, 1)); }
h6.cms-heading[style*="--cms-schrift"] { font-size: calc(.9rem * var(--cms-schrift, 1)); }

/* --- 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));
}
/*
 * Die Farbe beim Überfahren.
 *
 * --cms-link-bg-hover und --cms-link-fg-hover setzt die Seite, wenn der
 * Kunde sie eingestellt hat. Ohne Angabe bleibt es bei der bisherigen
 * Rechnung: 14 Prozent dunkler. Die ist ein brauchbarer Standard, aber
 * eben keine Wahl - auf einer dunklen Seite wird "dunkler" zu
 * "unsichtbar".
 */
.cms-linkliste.is-fill .cms-link:hover {
  background: var(--cms-link-bg-hover,
    color-mix(in srgb, var(--cms-link-bg, var(--color-primary, #6c5ce7)) 86%, #000));
  border-color: var(--cms-link-bg-hover,
    color-mix(in srgb, var(--cms-link-bg, var(--color-primary, #6c5ce7)) 86%, #000));
  color: var(--cms-link-fg-hover, var(--cms-link-fg, var(--color-on-primary, #fff)));
}

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

.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: var(--cms-link-bg-hover, color-mix(in srgb, var(--color-text) 12%, transparent));
  color: var(--cms-link-fg-hover, inherit);
}

/*
 * Ein eigenes Bild im Knopf.
 *
 * So, wie es die Vorlage zeigt: bündig am linken Ende, über die **ganze
 * Höhe** des Knopfes, und die beiden linken Ecken folgen seiner Rundung.
 * Es ist ein Teil des Knopfes, kein Symbol daneben.
 *
 * Der erste Versuch war ein kleines Vorschaubild mit Rand ringsum - und
 * die Regel dafür stand in der Editor-Datei, die eine veröffentlichte
 * Seite gar nicht lädt. Dort kam das Bild deshalb in Originalgröße und
 * sprengte die Zeile.
 *
 * Das Seitenverhältnis ist fest (4:3) und der Ausschnitt wird gefüllt:
 * Sonst bestimmte die Bilddatei, wie hoch der Knopf wird, und vier Knöpfe
 * mit vier Bildern wären vier verschiedene Höhen.
 */
/*
 * Ein eigenes Bild im Knopf.
 *
 * Es sitzt links im Knopf, mit einem schmalen Abstand nach links, oben und
 * unten - so, wie die Vorlage es zeigt. Und es macht den Knopf **nicht**
 * höher: Wie hoch der ist, entscheidet weiterhin allein die Beschriftung.
 *
 * Warum es absolut liegt und nicht einfach als erstes Kind der Reihe:
 * Ein Bild ist ein ersetztes Element und bringt seine eigene Größe mit.
 * Als Flex-Kind zählt diese Größe bei der Zeilenhöhe mit - ein Foto mit
 * 1200 Pixel Höhe machte den Knopf 1200 Pixel hoch, und "Höhe passt sich
 * an" ließ sich mit align-self:stretch nicht erzwingen, weil die Zeile
 * ihre Höhe vorher aus genau diesem Bild bezieht. Herausgenommen aus dem
 * Fluss kann es nichts mehr aufblähen: Oben und unten festgenagelt, nimmt
 * es die Höhe, die der Text vorgibt, und den Rest schneidet object-fit ab.
 *
 * Die Beschriftung bekommt links so viel Polster, wie das Bild breit ist -
 * deshalb steht die Breite in einer Variablen und nicht zweimal als Zahl.
 *
 * Das Bild bleibt damit auch dort links, wo die Beschriftung mittig oder
 * rechts steht: Es liegt nicht in der Reihe, die justify-content verteilt.
 */
/*
 * Die Masse stehen an der **Liste**, nicht nur am einzelnen Knopf.
 *
 * Sonst kennt ein Knopf ohne Bild sie nicht - und genau der braucht sie:
 * Er steht in derselben Liste wie die Knoepfe mit Bild, und seine
 * Beschriftung begann bisher bei 16 Pixeln, also zehn Pixel neben der
 * linken Kante der Bilder darueber. Das sah aus, als klebte sie daran.
 *
 * Am Knopf selbst bleiben dieselben Werte stehen: Ein Knopf muss nicht in
 * einer Liste stehen, und dann hat er niemanden, von dem er sie erbt.
 */
.cms-linkliste:has(.cms-link-bild) {
  --cms-link-bild-rand: 6px;
  --cms-link-bild-breite: 78px;
}
.cms-link:has(> .cms-link-bild) {
  --cms-link-bild-rand: 6px;
  --cms-link-bild-breite: 78px;
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--cms-link-bild-rand) + var(--cms-link-bild-breite) + 12px);
}
/*
 * Ein Knopf ohne Bild bleibt links - mit etwas Luft.
 *
 * Nicht bis auf Bildbreite eingerueckt: Das waere eine leere Spalte, in
 * der nichts steht, und der Knopf saehe aus, als fehlte ihm etwas. Ein
 * Stueck weiter innen als die Bildkante genuegt, damit die Zeile nicht
 * an der Bilderspalte klebt.
 */
.cms-linkliste:has(.cms-link-bild) .cms-link:not(:has(> .cms-link-bild)) {
  padding-left: calc(var(--cms-link-bild-rand, 6px) + 22px);
}
@media (max-width: 430px) {
  .cms-linkliste:has(.cms-link-bild),
  .cms-link:has(> .cms-link-bild) { --cms-link-bild-breite: 58px; }
}

.cms-link-bild {
  position: absolute;
  left: var(--cms-link-bild-rand, 6px);
  top: var(--cms-link-bild-rand, 6px);
  width: var(--cms-link-bild-breite, 78px);
  /*
   * Die Höhe ausgerechnet, nicht über "bottom".
   *
   * Bei einem Bild hilft bottom nicht: Ein ersetztes Element mit
   * height:auto nimmt seine **eigene** Höhe, auch wenn oben und unten
   * beide festgenagelt sind - so steht es im Standard. Gemessen kam
   * dabei ein 29 Pixel hohes Bild in einem 53 Pixel hohen Knopf heraus,
   * oben 7 Pixel Abstand und unten 17.
   *
   * 100 Prozent sind hier die Höhe des Knopfes; davon zweimal der Rand ab,
   * und das Bild steht oben, unten und links gleich weit vom Rand.
   */
  height: calc(100% - var(--cms-link-bild-rand, 6px) * 2);
  object-fit: cover;
  /*
   * Rundum gerundet, und zwar wie der Knopf.
   *
   * Etwas enger als er: Eine gleich große Rundung sähe aus, als rutschte
   * die Ecke heraus. Auch rechts - das Bild ist eine eigene Kachel im
   * Knopf und keine abgeschnittene Kante.
   */
  border-radius: max(4px, calc(var(--cms-link-radius, 14px) - 5px));
}
.cms-link-bild.is-bild-eckig { border-radius: 4px; }

/*
 * "Rund" ist ein Kreis, und ein Kreis braucht gleiche Seiten.
 *
 * Deshalb hier keine oben-und-unten-Verankerung, sondern eine feste
 * Größe, mittig. Damit sie hineinpasst, bekommt der Knopf in diesem einen
 * Fall eine Mindesthöhe - er kann dadurch höher werden als ohne Bild.
 * Das ist der Preis für einen Kreis, und wer ihn wählt, will ihn.
 */
.cms-link-bild.is-bild-rund {
  top: 50%;
  bottom: auto;
  height: var(--cms-link-bild-breite, 78px);
  transform: translateY(-50%);
  border-radius: 50%;
}
.cms-link:has(> .cms-link-bild.is-bild-rund) {
  min-height: calc(var(--cms-link-bild-breite) + var(--cms-link-bild-rand) * 2);
}

/*
 * Ohne :has() gibt es kein Polster für das Bild.
 *
 * Dann läge es über der Beschriftung. Deshalb rückt es in diesem Fall in
 * die Reihe zurück - kleiner und mit Rand ringsum, nicht die Fassung aus
 * der Vorlage, aber lesbar. Die Zahl der Browser ohne :has() geht gegen
 * null; dieser Zweig ist eine Rückversicherung, kein Entwurf.
 */
@supports not selector(:has(*)) {
  .cms-link-bild {
    position: static;
    flex: none;
    width: 52px;
    height: 52px;
    margin-right: 10px;
    border-radius: 8px;
  }
}

/*
 * Ein Farbverlauf, der wandert.
 *
 * Ein Verlauf steht still - ein wandernder zieht den Blick. Der Trick ist
 * alt und kostet nichts: Die Fläche bekommt einen Verlauf, der dreimal so
 * breit ist wie sie selbst, und es wandert nur der Ausschnitt. Kein
 * Neuzeichnen der Farben, keine Rechenlast, kein JavaScript.
 *
 * Die Regel steht hier und nicht bei jedem Baustein, weil sie für alles
 * gilt, was einen Verlauf haben kann: Knöpfe, Kopfband, Seitenfläche.
 *
 * Wer am System eingestellt hat, dass Bewegung ihn stört, bekommt keine.
 * Das ist keine Höflichkeit, sondern für manche Menschen der Unterschied
 * zwischen benutzbar und nicht benutzbar.
 */
@keyframes cms-verlauf-lauf {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cms-verlauf-animiert,
[data-cms-verlauf-animiert] {
  background-size: 300% 300% !important;
  animation: cms-verlauf-lauf var(--cms-verlauf-dauer, 14s) ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cms-verlauf-animiert,
  [data-cms-verlauf-animiert] { animation: none; background-size: auto !important; }
}

/*
 * Ein Schatten unter der Form des Kopfbereichs.
 *
 * Warum das hier so umstaendlich aussieht
 * ---------------------------------------
 * Die Unterkante des Kopfbereichs ist eine Maske - eine Welle, eine
 * Kurve, ein Zickzack. Ein box-shadow kennt davon nichts; er wirft den
 * Schatten des **Rechtecks** und laege quer ueber jede Welle. Richtig
 * ist filter: drop-shadow(): Der nimmt die Silhouette und folgt jeder
 * der 26 Formen.
 *
 * Nur: Filter und Maske am selben Element vertragen sich nicht. Der
 * Browser filtert zuerst und schneidet danach mit der Maske zu - und der
 * Schatten liegt per Definition ausserhalb der Silhouette, also genau
 * dort, wo die Maske wegnimmt. Man sieht schlicht nichts. (Drei Faelle
 * nebeneinander gestellt und angesehen; nur der mit einer zweiten Ebene
 * zeigte ihn.)
 *
 * Deshalb zwei Ebenen: Die Flaeche mitsamt Maske liegt auf ::before, der
 * Abschnitt darum traegt nur noch den Filter. Der Text im Kopfbereich
 * wirft dabei ebenfalls einen Schatten - er faellt hinter die
 * undurchsichtige Flaeche und ist nicht zu sehen.
 *
 * Alles hier haengt an der Klasse "cms-band-schatten", die nur gesetzt
 * ist, wenn der Kunde den Schatten eingeschaltet hat. Ohne ihn bleibt
 * der Kopfbereich unveraendert - dieselbe Flaeche, dieselbe Maske, an
 * derselben Stelle wie bisher.
 */
.cms-kopfband.cms-band-schatten {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-image: none !important;
  -webkit-mask: none !important;
          mask: none !important;
  animation: none !important;
  filter: var(--cms-band-schatten, none);
}
.cms-kopfband.cms-band-schatten::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cms-band-flaeche, transparent);
  background-size: var(--cms-band-groesse, auto);
  background-position: var(--cms-band-lage, 0% 0%);
  background-repeat: var(--cms-band-wdh, repeat);
  -webkit-mask: var(--cms-band-maske, none);
          mask: var(--cms-band-maske, none);
  animation: var(--cms-band-lauf, none);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cms-kopfband.cms-band-schatten::before { animation: none; }
}

/*
 * Das Symbol sitzt mittig - auch wenn es ein Zeichen und kein Bild ist.
 *
 * "width/height: 20px" wirkt nur auf ein ersetztes Element. Steht in der
 * Huelle ein Buchstabe oder ein Emoji, ist das Element inline: Die Masse
 * verpuffen, und ausgerichtet wird an der **Grundlinie**. Genau daher kam
 * der Versatz im Kreis - das Zeichen sass zu hoch, um den Unterlaengen
 * Platz zu lassen, die es gar nicht hat.
 *
 * Deshalb wird das Symbol selbst zu einem Raster mit mittigem Inhalt und
 * bekommt line-height: 1, damit die Zeilenhoehe nichts mehr dazurechnet.
 * Feste Masse gelten nur noch fuer svg und img - dort gehoeren sie hin.
 */
.cms-link-symbol {
  display: inline-grid;
  place-items: center;
  flex: none;
  line-height: 1;
}
.cms-link-symbol > svg,
.cms-link-symbol > img,
svg.cms-link-symbol,
img.cms-link-symbol { width: 20px; height: 20px; display: block; }

/*
 * Der Kreis hinter dem Symbol.
 *
 * Ohne die Klasse an der Liste ist die Hülle nur eine Klammer um das
 * Symbol - keine Fläche, keine Farbe, kein zusätzlicher Platz. So sieht
 * eine bestehende Seite aus wie vorher.
 *
 * Mit Klasse wird daraus die runde Fläche aus der Vorlage. Ihre Größe
 * hängt an der Schrift des Knopfes (em), damit sie bei einem großen Knopf
 * mitwächst statt daneben zu verschwinden.
 */
.cms-link-symbol-huelle { display: inline-flex; flex: none; }

.cms-linkliste.is-symbolkreis .cms-link-symbol-huelle {
  width: 2.4em;
  height: 2.4em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Ohne eigene Farbe eine gedämpfte Fassung der Schriftfarbe - das
     trifft auf hellem wie auf dunklem Grund. */
  background: var(--cms-symbol-kreis, color-mix(in srgb, currentColor 14%, transparent));
}
.cms-linkliste.is-symbolkreis .cms-link-symbol { width: 1.05em; height: 1.05em; }
.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; }
}
/* --- Alle Knöpfe reagieren, auch die mit eigener Farbe ------------------ */
/*
 * **Das Problem.** Eine Vorlage wie "Aktionsseite" oder "Veranstaltung"
 * setzt die Farbe ihres Knopfes als Inline-Stil - genauso jeder Knopf,
 * dem ein Kunde im Editor eine Farbe gibt, und jeder hervorgehobene Link
 * (der schreibt sie sogar mit !important). Ein Inline-Stil schlägt jede
 * Regel aus einem Stylesheet. Damit war die Hover-Regel darunter
 * (`background: color-mix(...)`) wirkungslos: Genau die Knöpfe, die am
 * auffälligsten sind, reagierten beim Überfahren gar nicht.
 *
 * **Die Lösung.** Nicht über den Hintergrund, sondern über Eigenschaften,
 * die kein Inline-Stil belegt: filter, transform und box-shadow. Sie
 * wirken über jeder Farbe und über jedem Verlauf - und sie blenden weich
 * über, weil sie in derselben transition stehen.
 *
 * Der Aufheller gilt nur dort, wo wirklich eine eigene Farbe steht
 * ([style*="background"]). Wo das Stylesheet die Farbe bestimmt, bleibt
 * es beim dezenten Abdunkeln weiter oben - zweimal gleichzeitig wäre zu
 * viel.
 */
/*
 * Die transition mit !important.
 *
 * Die Knöpfe der Vorlagen tragen eine eigene transition als Inline-Stil
 * ("color .4s, box-shadow .4s") - ohne filter und transform. Der Aufheller
 * und das Anheben sprangen dort also hart um, statt weich überzublenden.
 * Hier ist !important ausnahmsweise richtig: Es geht um eine einzige
 * Eigenschaft, die überall gleich sein soll, und kein Knopf braucht eine
 * andere.
 */
.cms-link,
.cms-btn,
a[data-cms-addon="button"] {
  transition: transform .25s ease-in-out, filter .25s ease-in-out,
              box-shadow .25s ease-in-out, background-color .25s ease-in-out,
              border-color .25s ease-in-out, color .25s ease-in-out !important;
}

.cms-link:hover,
.cms-btn:hover,
a[data-cms-addon="button"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}

/*
 * Aufhellen: bei hervorgehobenen Links (Inline-Farbe) und bei jedem
 * einzelnen Knopf.
 *
 * Gemessen am 11.9.2026 an "Jetzt sichern" (Aktionsseite): Die Farbe
 * steht dort nicht inline, sondern in der Regel, die der Renderer für
 * genau diesen Knopf schreibt - [style*="background"] traf also nicht.
 * Einzelne Knöpfe tragen auf einer Linkseite fast immer eine eigene
 * Farbe; deshalb gilt das Aufhellen für alle. Ausgenommen sind die mit
 * Blasen: Dort legt sich beim Überfahren ohnehin eine eigene Ebene
 * darüber, und beides zusammen wäre zu viel.
 */
.cms-link[style*="background"]:hover,
.cms-btn:not(.is-blasen):hover {
  filter: brightness(1.08) saturate(1.03);
}

.cms-link:active,
.cms-btn:active,
a[data-cms-addon="button"]:active {
  transform: translateY(0);
  box-shadow: none;
  filter: brightness(.97);
}

/*
 * Der Pfeil rückt mit.
 *
 * Eine kleine Bewegung in Leserichtung sagt "hier geht es weiter" -
 * deutlicher als jede Farbe und ohne den Knopf unruhig zu machen.
 */
.cms-link-pfeil { transition: transform .18s ease, opacity .18s ease; }
.cms-link:hover .cms-link-pfeil { transform: translateX(3px); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .cms-linkliste.is-puls .cms-link { animation: none; }
  .cms-link, .cms-btn, a[data-cms-addon="button"],
  .cms-link-pfeil { transition: none; }
  .cms-link:hover, .cms-btn:hover, a[data-cms-addon="button"]:hover {
    transform: none; box-shadow: none;
  }
  .cms-link:hover .cms-link-pfeil { 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;
}
/* Wie bei den Knöpfen: --cms-social-hover kommt von der Seite, ohne
   Angabe bleibt es beim Akzent des Designs. */
.cms-social-item:hover {
  border-color: var(--cms-social-hover, var(--color-accent, #c7a25a));
  color: var(--cms-social-hover, 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); }