) werden von Clubdesk selbst
dimensioniert und bleiben bewusst ausgenommen (`:not([id$="_title"])`).
!important auf font-family und color: Clubdesks eigenes content.css setzt
`.cd-light h1..h6` / `.cd-dark h1..h6` (Hell/Dunkel-Sektionsthema) mit
Klassen-Selektoren – selbst die einfachste Variante `.cd-light h1` hat
Spezifität (0,1,1) und schlägt damit unsere reinen Element-Selektoren
`main h1` / `header h1` (0,0,2), egal wie viele Element-Teile die haben.
Ohne !important würde unsere Farbe je nach Hell/Dunkel-Einstellung der
Sektion von Clubdesk überschrieben (siehe content.css:245ff., 287ff. etc. –
dieselbe Kollision existiert für main genauso wie für header). Bei
font-size nicht nötig (Inhalts-Überschriften tragen keine Inline-Grösse). */
main h1 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h1); line-height: 1.2; color: var(--bt-heading-color) !important; }
main h2 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h2); line-height: 1.2; color: var(--bt-heading-color) !important; }
main h3 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h3); line-height: 1.2; color: var(--bt-heading-color) !important; }
main h4 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h4); line-height: 1.2; color: var(--bt-heading-color) !important; }
main h5 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h5); line-height: 1.2; color: var(--bt-heading-color) !important; }
main h6 { font-family: var(--bt-heading-font) !important; font-weight: 700; font-size: var(--bt-h6); line-height: 1.2; color: var(--bt-heading-color) !important; }
/* Libre Caslon Text ist statisch 400/700 – 600 würde unzuverlässig gematcht. */
/* header h1–h3: echte Titel im Header-Banner (z.B. Seiten-/Abschnittstitel)
– gleiche Marken-Schrift/-Farbe wie main. h5/h6 im Header sind Taglines/
Callouts (siehe 1c. HERO unten) und bewusst NICHT hier enthalten – die
bekommen ihre eigene Schrift (--bt-callout-font), da sie inhaltlich/
gestalterisch etwas anderes sind als Inhalts-Überschriften. */
header h1, header h2, header h3 {
font-family: var(--bt-heading-font) !important;
font-weight: 700;
line-height: 1.2;
color: var(--bt-heading-color) !important;
}
/* Fliesstext auf Open Sans (von Clubdesk selbst gehostet, siehe page.css) statt
des Standard-Contentfonts Onest. Nur , damit Navigation/Header/
Megamenü (Roboto/Open Sans bzw. --bt-callout-font) unberührt bleiben. */
main {
font-family: var(--bt-body-font);
}
/* ---------------------------------------------------------------------
1b. TYPOGRAFIE – Basis-Schriftgrösse & Überschriften-Skala
---------------------------------------------------------------------
Clubdesk setzt standardmässig html,body = 17px (Font «Onest») und
überlässt h2–h6 den winzigen Browser-Standardgrössen. Hier setzen wir
die Basis auf 20px (Vorgabe next.MD) und definieren eine dezente,
konsistente Skala.
------------------------------------------------------------------- */
html, body {
font-size: var(--bt-font-base); /* 20px – überschreibt Clubdesks 16px */
}
body {
background-color: var(--bt-background);
}
/* Silbentrennung für Fliesstext (Vorgabe next.MD 2026-10-05). Wirkt dank
mit dem deutschen Trennwörterbuch des Browsers.
hyphens vererbt sich → auf body an, für Überschriften, Buttons,
Navigation, Kachel-Titel und E-Mail-Adressen wieder aus.
hyphenate-limit-chars: Wörter erst ab 6 Zeichen, min. 3 vor/nach der
Trennung (keine "Le-ben"-Stummel); ignoriert, wo nicht unterstützt. */
body {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.cd-button, a.cd-button-login,
.cd-navigation-bar-container, .cd-megamenu,
.cd-tile-v-main-heading, .cd-tile-h-main-heading,
.cd-tile-v-detail-heading, .cd-tile-h-detail-heading,
a[href^="mailto:"] {
-webkit-hyphens: manual;
hyphens: manual;
}
/* Clubdesks content.css setzt auf p/li/div/td eine EIGENE, nicht von
html/body geerbte font-size: 16px (siehe p{}, html,td,div{}-Regeln in
content.css) – die Basis-Grösse oben allein erreicht Fliesstext also
nicht. Deshalb hier explizit auf übertragen. */
main p, main li {
font-size: var(--bt-font-base);
}
/* Angenehmere Zeilenhöhe für Fliesstext (nur , damit die Navigation
unberührt bleibt). */
main, main p, main li {
line-height: var(--bt-lh-body);
}
/* Absatzabstand – Clubdesks p { margin-bottom: 2em } (~36px) ist zu gross.
Auf beschränkt; letzter Absatz ohne Abstand, damit Blöcke unten
nicht zusätzlich Luft bekommen. */
main p {
margin-bottom: var(--bt-p-spacing);
}
main p:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
1c. HERO – Vereinsname (Tagline 1, h5) & Untertitel (Tagline 2, h6)
---------------------------------------------------------------------
Der Header-Banner enthält einen TextBlock mit zwei bare Überschriften
(Clubdesk-Konvention für grosse Display-Schrift): Bärn treit
und Gemeinsam bis zuletzt.
. Ungestylt erben sie Clubdesks
content.css-Defaults: h5 = 120px/140px, h6 = 56px/100px.
Liegen ausserhalb von , daher eigene Regeln.
Beide Grössen & Zeilenhöhen sind pro Breakpoint aufeinander abgestimmt
(h6 bleibt deutlich untergeordnet); Zeilenhöhe nimmt bei kleineren
Grössen relativ zu (bessere Lesbarkeit, mehr Zeilenumbrüche).
Eigene Schrift (--bt-callout-font) statt --bt-heading-font: Callouts im
Header sind gestalterisch etwas anderes als Inhalts-/Titel-Überschriften.
Text-Shadow: weisse Schrift ist auf hellen Bildpartien schlecht lesbar →
weicher dunkler Schein. Nur header h5/h6 (die weissen Taglines), nicht
header h1–h3 (dunkle --bt-heading-color) und nichts ausserhalb . */
header h5, header h6 {
font-family: var(--bt-callout-font);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.6);
}
header h5 {
font-size: 72px;
line-height: 1.15;
}
header h6 {
font-size: 32px;
line-height: 1.3;
}
@media (max-width: 992px) {
header h5 { font-size: 48px; line-height: 1.2; }
header h6 { font-size: 24px; line-height: 1.35; }
}
@media (max-width: 576px) {
header h5 { font-size: 32px; line-height: 1.25; }
header h6 { font-size: 18px; line-height: 1.4; }
}
/* ---------------------------------------------------------------------
1d. KACHELN (Tiles) – Titel in .cd-tile-v-main-heading / .cd-tile-h-main-heading
---------------------------------------------------------------------
Clubdesk setzt Kachel-Titel (z.B. "Besinnungsweg auf dem Bremgartenfriedhof")
fix auf 16px (content.css: .cd-tile-v-main-heading, .cd-tile-h-main-heading) –
kleiner als unsere neue Basis (20px) und kleiner als jede h1–h6-Stufe. Das
sind KEINE -Elemente (eigene -Klassen), daher greifen unsere
h1–h6-Regeln hier nicht; separate Regel nötig. Schrift/Gewicht (Open Sans,
700) entsprechen bereits unserer Vorgabe, nur die Grösse wird angehoben.
main + Klasse (main .cd-tile-...) hat Spezifität (0,1,1) gegen Clubdesks
(0,1,0) – kein !important nötig (nur color wird von Clubdesk per
.cd-light/.cd-dark überschrieben, nicht font-size).
Zwei-Stufen-System für alle Kachel-Varianten (v/h vereinheitlicht):
- "Heading"-Rolle (main-heading, detail-heading) = --bt-h6 (18px).
Clubdesk selbst ist hier zwischen v (16px) und h (24px) inkonsistent –
hier bewusst vereinheitlicht statt die Diskrepanz zu übernehmen.
- "Subheading"-Rolle (main-subheading, detail-subheading) = 14px, analog
zur Tabellen-Kopfzeile (Abschnitt 7) – ein Wert statt vier leicht
unterschiedlicher (11/12px), da Clubdesks Unterschiede hier keine
erkennbare gestalterische Absicht tragen, nur historisch gewachsen sind. */
main .cd-tile-v-main-heading,
main .cd-tile-h-main-heading,
main .cd-tile-v-detail-heading,
main .cd-tile-h-detail-heading {
font-size: var(--bt-h6);
}
main .cd-tile-v-main-subheading,
main .cd-tile-h-main-subheading,
main .cd-tile-v-detail-subheading,
main .cd-tile-h-detail-subheading {
font-size: 14px;
}
/* Kachel-Detailfelder (z.B. "Ort", "Typ", "Teilnehmer" in Termin-Kacheln):
Label = Subheading-Rolle (14px, wie oben), Wert = normale Fliesstext-
Grösse (var(--bt-font-base), wie main p/li). Die sichtbaren Feldnamen
sind .cd-tile-{v,h}-detail-label/-value (10px/16px) – NICHT
.cd-data-label/-value (11px/16px, eigene Klasse, auf dieser Seite
aktuell nirgends im DOM; trotzdem mitgestylt falls sie anderswo
auftaucht, z.B. Formulare). */
main .cd-data-label,
main .cd-tile-v-detail-label,
main .cd-tile-h-detail-label {
font-size: 14px;
}
main .cd-data-value,
main .cd-tile-v-detail-value,
main .cd-tile-h-detail-value {
font-size: var(--bt-font-base);
}
/* Terminliste (horizontale Kacheln, z.B. "Nächste Termine" auf der
Startseite) – Vorgabe next.MD 2026-10-05:
- abgerundete Ecken 10px; overflow:hidden, damit der farbige Kopf
(.cd-tile-h-main-area) die Rundung mitmacht. Clubdesk setzt die
Radien als (0,1,0)-Regel → main + Klasse (0,1,1) genügt.
- Kopf-Hintergrund = --bt-tile-bg statt Clubdesks Bordeaux #770419;
background-color kommt über die .cd-light/.cd-dark-Kette → !important.
- Feldname ("Ort") ausgeblendet, Wert 18px (statt der 20px oben).
Gleiche Behandlung für die vertikalen Kacheln (-v-) der Projektliste
(NewsItemList-Tile, Bild oben – overflow:hidden rundet auch das Bild). */
main .cd-tile-h-box,
main .cd-tile-v-box {
border-radius: 10px;
overflow: hidden;
}
main .cd-tile-h-main-area,
main .cd-tile-v-main-area {
background-color: var(--bt-tile-bg) !important;
}
main .cd-tile-h-detail-label,
main .cd-tile-v-detail-label {
display: none;
}
main .cd-tile-h-detail-value,
main .cd-tile-v-detail-value {
font-size: 18px;
}
/* Umbruch statt Abschneiden: Clubdesk setzt auf Kachel-Titel und
Detailzeilen white-space:nowrap + text-overflow:ellipsis, wodurch z.B.
ein langer "Ort" in schmalen Spalten mit "…" endet (next.MD 2026-10-30).
Titel und einfache Werte dürfen umbrechen; overflow-wrap fängt lange
Wörter wie "Performancespace369" ab. */
main .cd-tile-h-main-heading,
main .cd-tile-v-main-heading,
main .cd-tile-h-detail-value,
main .cd-tile-v-detail-value {
white-space: normal;
overflow-wrap: anywhere;
}
/* Projektlisten (NewsItemList, z.B. /projekte/abgeschlossene, /aktuelle,
Themengruppen-Seiten): die Subheading-Zeile ist nur das Publikations-
datum (analog .cd-additional-subheading in der Detailansicht) → aus-
geblendet. Bei den vertikalen Kacheln (Startseite, /projekte) ist sie
leer, wird aber der Konsistenz halber mit ausgeblendet. NICHT in den
Terminlisten (EventList): dort ist die Subheading das Termindatum. */
main .cd-newslist-tile-h .cd-tile-h-main-subheading,
main .cd-newslist-tile-v .cd-tile-v-main-subheading {
display: none;
}
/* Hover-Effekt der Kacheln auch für "Karten"-Blöcke, d.h. Textblöcke mit
eigener Hintergrundfarbe (z.B. die Vorstands-Karten unter
/verein/vorstand). Clubdesk rendert die Blockfarbe als absolut
positioniertes
direkt im .cd-block – daran erkennen wir sie. Schatten = exakt Clubdesks
.cd-light .cd-tile-*-box:hover; Übergang 0.2s statt hartem Umschalten.
10px Radius wie die Kacheln. */
main .cd-block:has(> .cd-backgroundPane[style*="background-color"]) {
border-radius: 10px;
overflow: hidden; /* rundet auch die absolut positionierte Farbfläche */
transition: box-shadow 0.2s ease;
}
main .cd-block:has(> .cd-backgroundPane[style*="background-color"]):hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/* Themengruppen (/mitmachen/themengruppen): sechs Karten (Textblock +
Button "Mitmachen") in drei Sektionen à zwei .cd-col.m6 – die Buttons
erzwingen Sektionen, anders als auf der Vorstands-Seite. Bewusst
seiten-spezifisch über die Sektions-IDs (Vorgabe next.MD; ändern sich,
wenn die Sektionen in Clubdesk neu angelegt werden).
- Ganze Spalte = Karte: weiss, 10px Radius, Hover wie Vorstands-Karten.
- Innenabstände kommen aus dem Editor (Textblock mit weissem Hintergrund,
margin/padding 15px – gleiche Einstellungen wie auf der Vorstands-
Seite) und werden hier nicht überschrieben; der innere Schatten dieses
Textblocks wird unterdrückt, damit nur die Karte schattiert.
- 15px Aussenabstand je Karte → 30px Raster wie bei den Vorstands-Karten
(Clubdesk-Spaltenbreite 100% / ab 577px 50% entsprechend gekürzt).
- Sektions-Innenabstand (Clubdesk: 40px oben / 50px unten) zwischen den
drei Sektionen entfernt, damit die Karten im selben 30px-Raster
untereinander stehen; oben/unten aussen bleibt er. */
#section_1000088 .cd-col.m6,
#section_1000089 .cd-col.m6,
#section_1000090 .cd-col.m6 {
background-color: #FFFFFF;
border-radius: 10px;
transition: box-shadow 0.2s ease;
margin: 15px;
flex: 0 0 calc(100% - 30px);
max-width: calc(100% - 30px);
}
@media (min-width: 577px) {
#section_1000088 .cd-col.m6,
#section_1000089 .cd-col.m6,
#section_1000090 .cd-col.m6 {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
}
}
#section_1000088 .cd-col.m6:hover,
#section_1000089 .cd-col.m6:hover,
#section_1000090 .cd-col.m6:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
#section_1000088 .cd-col.m6 .cd-block:hover,
#section_1000089 .cd-col.m6 .cd-block:hover,
#section_1000090 .cd-col.m6 .cd-block:hover {
box-shadow: none;
}
#section_1000088,
#section_1000089 {
padding-bottom: 0;
}
#section_1000089,
#section_1000090 {
padding-top: 0;
}
/* Termin-Detailansicht (Feld "Text"): der Beschreibungstext steckt in
.cd-data-value.cd-data-html.tinyMceContent > p. Clubdesks
.tinyMceContent > * { font-size:16px; line-height:1.4 } (0,1,0) schlägt
unser main p (0,0,2) – deshalb eigene, spezifischere Regel, damit der
Text wie normaler Fliesstext aussieht (20px / 1.6). */
main .cd-data-value.cd-data-html.tinyMceContent > * {
font-size: var(--bt-font-base);
line-height: var(--bt-lh-body);
}
/* Projekt-Detailansicht (NewsItem): der Teaser unter dem Titel
(p.cd-additional-teaser) ist der Lead/Intro → Konvention 120% der Basis
(24px). Clubdesks .cd-additional-teaser (0,1,0) setzt 16px und schlägt
main p (0,0,2); main + Klasse (0,1,1) genügt. Normales Gewicht statt
Clubdesks 700. Darunter etwas Luft vor der Bildergalerie.
Die Datum/Autor-Zeile über dem Titel (.cd-additional-subheading,
z.B. "11.09.2026, Fritschy Donat") wird ausgeblendet. */
main .cd-additional-subheading {
display: none;
}
main .cd-additional-teaser {
font-size: calc(var(--bt-font-base) * 1.2);
font-weight: 400;
}
main .cd-carousel-container {
margin-top: 2rem;
}
/* ---------------------------------------------------------------------
2. FARBEN – Navigationsleiste (Hintergrund)
------------------------------------------------------------------- */
/* Gescrollt / Megamenü offen */
.cd-scroll .cd-navigation-bar-container,
.cd-megamenu-open .cd-navigation-bar-container {
background-color: var(--bt-primary);
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),
0 4px 5px 0 rgba(0,0,0,0.14),
0 1px 10px 0 rgba(0,0,0,0.12);
}
/* Seiten ohne Header (Navigationsleiste immer gefüllt) */
.cd-header-empty .cd-navigation-bar-container {
background: var(--bt-primary);
}
/* Clubdesk setzt per :focus einen 3px-Outline-Kasten auf praktisch alles
(Logo, Menü-Button, Megamenü-Links, Buttons, Links, Kacheln, Überschriften
– ~780 :focus-Regeln in content.css/page.css, ausschliesslich outline-*),
also auch bei Maus-Klick, nicht nur bei Tastatur-Fokus.
:not(:focus-visible) blendet ihn nur beim Klick aus; Tastatur-Navigation
bleibt (Barrierefreiheit) weiterhin sichtbar fokussiert. Textfelder sind
für Browser immer :focus-visible → behalten ihren Rahmen auch beim Klick.
!important, weil Clubdesks Regeln teils höhere Spezifität haben
(z.B. .cd-megamenu .cd-menu-level-1 a:focus = 0,3,1); unbedenklich, da
die Regel nie den Tastatur-Fokus trifft. */
:focus:not(:focus-visible) {
outline: none !important;
}
/* ---------------------------------------------------------------------
3. FARBEN – Megamenü-Links (Text auf weissem Grund = Primärrot)
------------------------------------------------------------------- */
.cd-megamenu .cd-menu-level-1 a,
.cd-megamenu .cd-menu-level-2 a,
.cd-megamenu .cd-menu-level-3 a {
color: var(--bt-primary);
}
.cd-megamenu .cd-menu-level-1 a:focus { outline-color: var(--bt-primary); }
.cd-megamenu .cd-menu-level-2 a:focus { outline-color: var(--bt-primary); }
.cd-megamenu .cd-menu-level-3 a:focus { outline-color: var(--bt-primary); }
/* Hover / aktiv – Gold-Akzent (ersetzt das frühere Google-Blau #1A73E8) */
.cd-megamenu a.cd-menu-item.cd-menu-active,
.cd-megamenu a.cd-menu-item:hover {
color: var(--bt-accent);
}
/* ---------------------------------------------------------------------
4. Login/Logout – als letzter, dezenter Eintrag im Megamenü
------------------------------------------------------------------- */
/* page.mustache rendert Login/Logout nicht mehr als Pill-Button in der
Navigationsleiste, sondern als am Ende der
.cd-menu-level-1-Liste. Diese ist auf dem Desktop eine Flex-Zeile (Spalten
nebeneinander) → flex-basis: 100% zwingt den Eintrag in eine eigene Zeile
UNTER die Hauptpunkte; mobil (≤992px) sind die ohnehin 100% breit.
Eigene Klasse statt .cd-menu-item, damit Clubdesk-Menü-JS ihn ignoriert. */
/* Der Pill-Button (22px + Padding + 10px Margin oben/unten) gab der Leiste
ihre Höhe (gemessen 62.8px, auf allen Breiten); ohne ihn schrumpfte sie auf
die Höhe des Menü-Buttons (~31px) und Logo/Menü rückten nach oben. */
.cd-navigation-bar-content {
min-height: 63px;
}
/* "Menü"-Button: 24px auf ALLEN Breiten (vom User live ausprobiert).
Ersetzt Clubdesks 22px (Desktop) und v.a. das mobile
`@media (max-width: 576px) { font-size: 4vmin }` aus page.css, das auf
Phones nur ~16px ergab. Gleiche Spezifität, custom.css lädt zuletzt →
die ungescopte Regel gewinnt auch gegen die Media-Query. */
.cd-megamenu-button {
font-size: 24px;
}
/* Auf dem Desktop ist das Menü rechts gefloatet (shrink-to-fit): ohne
contain würde die Breite dieses Eintrags (Text + Margins) zur Menübreite
addiert und Trennlinie/Login stünden ~80px rechts von "Kontakt".
contain: inline-size → trägt 0px bei; Abstände daher nur INNERHALB des
(Linie als ::before, Margin am Link), nicht als Margin am . */
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login {
flex-basis: 100%;
contain: inline-size;
margin-top: 15px;
}
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login::before {
content: "";
display: block;
margin: 0 20px 10px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* Desktop (ab 993px, wo Clubdesk das Menü rechts ausrichtet): rechtsbündig,
bündig mit dem Textende des letzten Hauptpunkts ("Kontakt"). */
@media (min-width: 993px) {
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login {
text-align: right;
}
}
.cd-megamenu .cd-menu-level-1 a.bt-menu-login-link {
margin: 0 20px;
font-size: 16px;
font-weight: 400;
color: #6b6b6b;
}
.cd-megamenu .cd-menu-level-1 a.bt-menu-login-link:hover {
color: var(--bt-accent);
}
/* ---------------------------------------------------------------------
5. FARBEN – Cookie-Banner
------------------------------------------------------------------- */
.cc-window,
.cc-revoke {
background-color: var(--bt-primary);
}
/* „Weiterlesen“-Link & Ablehnen-Button im Banner = Gold-Akzent */
a.cc-link,
a.cc-link:active,
a.cc-link:visited,
.cc-bottom,
.cc-btn:first-child {
color: var(--bt-accent);
}
a.cc-link:hover,
a.cc-link:active:hover,
a.cc-link:visited:hover,
.cc-bottom:hover {
color: var(--bt-on-primary);
}
/* Zustimmen-Button: weisser Grund, Primärrot-Text */
.cc-btn {
background-color: var(--bt-on-primary);
color: var(--bt-primary);
}
/* ---------------------------------------------------------------------
6. INHALTS-BUTTONS (.cd-button-primary/-secondary/-tertiary)
---------------------------------------------------------------------
Content-CTA-Buttons (z.B. "Mitmachen", "Über Bärn treit" im Header-Banner
der Startseite) – nicht zu verwechseln mit .cd-button-login (Navigation,
oben bereits gestylt). Clubdesk liefert sie in Roboto und in der ALTEN
Vereinsfarbe Bordeaux #770419 (Primär, siehe docs/clubdesk-css-reference.md)
bzw. neutralem Grau (Tertiär) – hier auf unsere Palette & Schrift
umgestellt. Können sowohl im Header als auch im Content vorkommen, daher
ohne main/header-Scope.
Farben: !important nötig (Clubdesks .cd-light/.cd-dark-Kollision, siehe
Referenz-Doku). Schrift: kein !important nötig – Clubdesks eigene
Basis-Regel ist selbst nicht themenabhängig, und bei gleicher Spezifität
gewinnt unser später geladenes custom.css automatisch. */
a.cd-button-primary, input.cd-button-primary, button.cd-button-primary,
a.cd-button-secondary, input.cd-button-secondary, button.cd-button-secondary,
a.cd-button-tertiary, input.cd-button-tertiary, button.cd-button-tertiary {
font-family: var(--bt-body-font);
}
/* Primär: gefüllt, wie der Login-Button in der Navigation (Rot → Akzent bei Hover) */
a.cd-button-primary, input.cd-button-primary, button.cd-button-primary {
background-color: var(--bt-primary) !important;
border-color: var(--bt-primary) !important;
color: var(--bt-on-primary) !important;
}
a.cd-button-primary:hover, input.cd-button-primary:hover, button.cd-button-primary:hover {
background-color: var(--bt-accent) !important;
border-color: var(--bt-accent) !important;
color: var(--bt-on-primary) !important;
}
/* Sekundär: Outline-Stil, füllt bei Hover wie Primär */
a.cd-button-secondary, input.cd-button-secondary, button.cd-button-secondary {
background-color: transparent !important;
border-color: var(--bt-primary) !important;
color: var(--bt-primary) !important;
}
a.cd-button-secondary:hover, input.cd-button-secondary:hover, button.cd-button-secondary:hover {
background-color: var(--bt-accent) !important;
border-color: var(--bt-accent) !important;
color: var(--bt-on-primary) !important;
}
/* Tertiär: zurückhaltend, keine Füllfarbe (folgt Clubdesks eigener
neutraler Grundidee, aber mit unserer Überschriften-Farbe statt Grau) */
a.cd-button-tertiary, input.cd-button-tertiary, button.cd-button-tertiary {
border-color: var(--bt-heading-color) !important;
color: var(--bt-heading-color) !important;
}
a.cd-button-tertiary:hover, input.cd-button-tertiary:hover, button.cd-button-tertiary:hover {
border-color: var(--bt-primary) !important;
color: var(--bt-primary) !important;
}
/* ---------------------------------------------------------------------
7. TABELLEN (.cd-table)
---------------------------------------------------------------------
Clubdesk setzt Tabellen-Kopfzeile fix auf 11px und Werte auf 16px,
beides kleiner als unsere Basis. Beide Selektoren matchen Clubdesks
eigene Regeln exakt (gleiche Spezifität (0,2,0)) – bei Gleichstand
gewinnt automatisch unser später geladenes custom.css, kein !important
nötig (nur Farbe wäre themenabhängig, hier nicht angetastet). */
.cd-table .cd-table-header {
font-size: 14px;
font-weight: 700;
}
.cd-table .cd-table-value {
font-size: var(--bt-font-base);
}
/* ---------------------------------------------------------------------
8. LINKS im Inhalt ()
---------------------------------------------------------------------
Vorgabe next.MD: Links in der Farbe des umgebenden Texts, beim Hover
unterstrichen und dunkler; verlinkte Überschriften in Überschriften-
farbe. color: inherit erledigt beides (Fliesstext → Textfarbe,
h1–h6 → --bt-heading-color). Clubdesk färbt Links blau über die
.cd-light/.cd-dark-Kette → !important.
Unterstreichung statt border-bottom: text-decoration mit eigener
Dicke/Abstand/Farbe sieht aus wie eine Border-Linie, bricht aber sauber
über Zeilenumbrüche, spart Unterlängen aus (skip-ink) und verschiebt
kein Layout. In Ruhe nur eine dezente Linie (sonst wären Links im
Fliesstext unsichtbar – und auf Touch-Geräten gibt es kein Hover),
beim Hover volle Linie + dunklere Farbe. color-mix() mit currentColor
leitet die Töne von der jeweiligen Textfarbe ab.
Ausgenommen: Buttons (.cd-button) und Bild-Links (Galerie/Lightbox). */
main a:not(.cd-button):not(:has(img)),
main a:not(.cd-button):not(:has(img)):visited {
color: inherit !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
main a:not(.cd-button):not(:has(img)):hover,
main a:not(.cd-button):not(:has(img)):visited:hover {
color: color-mix(in srgb, currentColor 60%, #000000) !important;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
/* Footer-Hintergrund: Markenrot statt Clubdesks #333333. Die Farbe steht
inline auf .cd-backgroundPane (Sektionseinstellung) → !important. */
footer .cd-backgroundPane {
background-color: var(--bt-primary) !important;
}
/* Footer-Links (dunkle Sektion): weiss statt Clubdesks Hellblau #81BBD5,
ohne Unterstreichung; beim Hover eine dünne Linie als Rückmeldung
(gleiches Prinzip wie die Inhalts-Links oben). Farbe über die
.cd-dark-Kette → !important. */
footer a:not(.cd-button),
footer a:not(.cd-button):visited {
color: var(--bt-on-primary) !important;
text-decoration: none !important;
text-underline-offset: 0.2em;
}
footer a:not(.cd-button):hover,
footer a:not(.cd-button):visited:hover {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
}
Bärn treit
undGemeinsam bis zuletzt.
. Ungestylt erben sie Clubdesks content.css-Defaults: h5 = 120px/140px, h6 = 56px/100px. Liegen ausserhalb von-Klassen), daher greifen unsere
h1–h6-Regeln hier nicht; separate Regel nötig. Schrift/Gewicht (Open Sans,
700) entsprechen bereits unserer Vorgabe, nur die Grösse wird angehoben.
main + Klasse (main .cd-tile-...) hat Spezifität (0,1,1) gegen Clubdesks
(0,1,0) – kein !important nötig (nur color wird von Clubdesk per
.cd-light/.cd-dark überschrieben, nicht font-size).
Zwei-Stufen-System für alle Kachel-Varianten (v/h vereinheitlicht):
- "Heading"-Rolle (main-heading, detail-heading) = --bt-h6 (18px).
Clubdesk selbst ist hier zwischen v (16px) und h (24px) inkonsistent –
hier bewusst vereinheitlicht statt die Diskrepanz zu übernehmen.
- "Subheading"-Rolle (main-subheading, detail-subheading) = 14px, analog
zur Tabellen-Kopfzeile (Abschnitt 7) – ein Wert statt vier leicht
unterschiedlicher (11/12px), da Clubdesks Unterschiede hier keine
erkennbare gestalterische Absicht tragen, nur historisch gewachsen sind. */
main .cd-tile-v-main-heading,
main .cd-tile-h-main-heading,
main .cd-tile-v-detail-heading,
main .cd-tile-h-detail-heading {
font-size: var(--bt-h6);
}
main .cd-tile-v-main-subheading,
main .cd-tile-h-main-subheading,
main .cd-tile-v-detail-subheading,
main .cd-tile-h-detail-subheading {
font-size: 14px;
}
/* Kachel-Detailfelder (z.B. "Ort", "Typ", "Teilnehmer" in Termin-Kacheln):
Label = Subheading-Rolle (14px, wie oben), Wert = normale Fliesstext-
Grösse (var(--bt-font-base), wie main p/li). Die sichtbaren Feldnamen
sind .cd-tile-{v,h}-detail-label/-value (10px/16px) – NICHT
.cd-data-label/-value (11px/16px, eigene Klasse, auf dieser Seite
aktuell nirgends im DOM; trotzdem mitgestylt falls sie anderswo
auftaucht, z.B. Formulare). */
main .cd-data-label,
main .cd-tile-v-detail-label,
main .cd-tile-h-detail-label {
font-size: 14px;
}
main .cd-data-value,
main .cd-tile-v-detail-value,
main .cd-tile-h-detail-value {
font-size: var(--bt-font-base);
}
/* Terminliste (horizontale Kacheln, z.B. "Nächste Termine" auf der
Startseite) – Vorgabe next.MD 2026-10-05:
- abgerundete Ecken 10px; overflow:hidden, damit der farbige Kopf
(.cd-tile-h-main-area) die Rundung mitmacht. Clubdesk setzt die
Radien als (0,1,0)-Regel → main + Klasse (0,1,1) genügt.
- Kopf-Hintergrund = --bt-tile-bg statt Clubdesks Bordeaux #770419;
background-color kommt über die .cd-light/.cd-dark-Kette → !important.
- Feldname ("Ort") ausgeblendet, Wert 18px (statt der 20px oben).
Gleiche Behandlung für die vertikalen Kacheln (-v-) der Projektliste
(NewsItemList-Tile, Bild oben – overflow:hidden rundet auch das Bild). */
main .cd-tile-h-box,
main .cd-tile-v-box {
border-radius: 10px;
overflow: hidden;
}
main .cd-tile-h-main-area,
main .cd-tile-v-main-area {
background-color: var(--bt-tile-bg) !important;
}
main .cd-tile-h-detail-label,
main .cd-tile-v-detail-label {
display: none;
}
main .cd-tile-h-detail-value,
main .cd-tile-v-detail-value {
font-size: 18px;
}
/* Umbruch statt Abschneiden: Clubdesk setzt auf Kachel-Titel und
Detailzeilen white-space:nowrap + text-overflow:ellipsis, wodurch z.B.
ein langer "Ort" in schmalen Spalten mit "…" endet (next.MD 2026-10-30).
Titel und einfache Werte dürfen umbrechen; overflow-wrap fängt lange
Wörter wie "Performancespace369" ab. */
main .cd-tile-h-main-heading,
main .cd-tile-v-main-heading,
main .cd-tile-h-detail-value,
main .cd-tile-v-detail-value {
white-space: normal;
overflow-wrap: anywhere;
}
/* Projektlisten (NewsItemList, z.B. /projekte/abgeschlossene, /aktuelle,
Themengruppen-Seiten): die Subheading-Zeile ist nur das Publikations-
datum (analog .cd-additional-subheading in der Detailansicht) → aus-
geblendet. Bei den vertikalen Kacheln (Startseite, /projekte) ist sie
leer, wird aber der Konsistenz halber mit ausgeblendet. NICHT in den
Terminlisten (EventList): dort ist die Subheading das Termindatum. */
main .cd-newslist-tile-h .cd-tile-h-main-subheading,
main .cd-newslist-tile-v .cd-tile-v-main-subheading {
display: none;
}
/* Hover-Effekt der Kacheln auch für "Karten"-Blöcke, d.h. Textblöcke mit
eigener Hintergrundfarbe (z.B. die Vorstands-Karten unter
/verein/vorstand). Clubdesk rendert die Blockfarbe als absolut
positioniertes
direkt im .cd-block – daran erkennen wir sie. Schatten = exakt Clubdesks
.cd-light .cd-tile-*-box:hover; Übergang 0.2s statt hartem Umschalten.
10px Radius wie die Kacheln. */
main .cd-block:has(> .cd-backgroundPane[style*="background-color"]) {
border-radius: 10px;
overflow: hidden; /* rundet auch die absolut positionierte Farbfläche */
transition: box-shadow 0.2s ease;
}
main .cd-block:has(> .cd-backgroundPane[style*="background-color"]):hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/* Themengruppen (/mitmachen/themengruppen): sechs Karten (Textblock +
Button "Mitmachen") in drei Sektionen à zwei .cd-col.m6 – die Buttons
erzwingen Sektionen, anders als auf der Vorstands-Seite. Bewusst
seiten-spezifisch über die Sektions-IDs (Vorgabe next.MD; ändern sich,
wenn die Sektionen in Clubdesk neu angelegt werden).
- Ganze Spalte = Karte: weiss, 10px Radius, Hover wie Vorstands-Karten.
- Innenabstände kommen aus dem Editor (Textblock mit weissem Hintergrund,
margin/padding 15px – gleiche Einstellungen wie auf der Vorstands-
Seite) und werden hier nicht überschrieben; der innere Schatten dieses
Textblocks wird unterdrückt, damit nur die Karte schattiert.
- 15px Aussenabstand je Karte → 30px Raster wie bei den Vorstands-Karten
(Clubdesk-Spaltenbreite 100% / ab 577px 50% entsprechend gekürzt).
- Sektions-Innenabstand (Clubdesk: 40px oben / 50px unten) zwischen den
drei Sektionen entfernt, damit die Karten im selben 30px-Raster
untereinander stehen; oben/unten aussen bleibt er. */
#section_1000088 .cd-col.m6,
#section_1000089 .cd-col.m6,
#section_1000090 .cd-col.m6 {
background-color: #FFFFFF;
border-radius: 10px;
transition: box-shadow 0.2s ease;
margin: 15px;
flex: 0 0 calc(100% - 30px);
max-width: calc(100% - 30px);
}
@media (min-width: 577px) {
#section_1000088 .cd-col.m6,
#section_1000089 .cd-col.m6,
#section_1000090 .cd-col.m6 {
flex-basis: calc(50% - 30px);
max-width: calc(50% - 30px);
}
}
#section_1000088 .cd-col.m6:hover,
#section_1000089 .cd-col.m6:hover,
#section_1000090 .cd-col.m6:hover {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
#section_1000088 .cd-col.m6 .cd-block:hover,
#section_1000089 .cd-col.m6 .cd-block:hover,
#section_1000090 .cd-col.m6 .cd-block:hover {
box-shadow: none;
}
#section_1000088,
#section_1000089 {
padding-bottom: 0;
}
#section_1000089,
#section_1000090 {
padding-top: 0;
}
/* Termin-Detailansicht (Feld "Text"): der Beschreibungstext steckt in
.cd-data-value.cd-data-html.tinyMceContent > p. Clubdesks
.tinyMceContent > * { font-size:16px; line-height:1.4 } (0,1,0) schlägt
unser main p (0,0,2) – deshalb eigene, spezifischere Regel, damit der
Text wie normaler Fliesstext aussieht (20px / 1.6). */
main .cd-data-value.cd-data-html.tinyMceContent > * {
font-size: var(--bt-font-base);
line-height: var(--bt-lh-body);
}
/* Projekt-Detailansicht (NewsItem): der Teaser unter dem Titel
(p.cd-additional-teaser) ist der Lead/Intro → Konvention 120% der Basis
(24px). Clubdesks .cd-additional-teaser (0,1,0) setzt 16px und schlägt
main p (0,0,2); main + Klasse (0,1,1) genügt. Normales Gewicht statt
Clubdesks 700. Darunter etwas Luft vor der Bildergalerie.
Die Datum/Autor-Zeile über dem Titel (.cd-additional-subheading,
z.B. "11.09.2026, Fritschy Donat") wird ausgeblendet. */
main .cd-additional-subheading {
display: none;
}
main .cd-additional-teaser {
font-size: calc(var(--bt-font-base) * 1.2);
font-weight: 400;
}
main .cd-carousel-container {
margin-top: 2rem;
}
/* ---------------------------------------------------------------------
2. FARBEN – Navigationsleiste (Hintergrund)
------------------------------------------------------------------- */
/* Gescrollt / Megamenü offen */
.cd-scroll .cd-navigation-bar-container,
.cd-megamenu-open .cd-navigation-bar-container {
background-color: var(--bt-primary);
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),
0 4px 5px 0 rgba(0,0,0,0.14),
0 1px 10px 0 rgba(0,0,0,0.12);
}
/* Seiten ohne Header (Navigationsleiste immer gefüllt) */
.cd-header-empty .cd-navigation-bar-container {
background: var(--bt-primary);
}
/* Clubdesk setzt per :focus einen 3px-Outline-Kasten auf praktisch alles
(Logo, Menü-Button, Megamenü-Links, Buttons, Links, Kacheln, Überschriften
– ~780 :focus-Regeln in content.css/page.css, ausschliesslich outline-*),
also auch bei Maus-Klick, nicht nur bei Tastatur-Fokus.
:not(:focus-visible) blendet ihn nur beim Klick aus; Tastatur-Navigation
bleibt (Barrierefreiheit) weiterhin sichtbar fokussiert. Textfelder sind
für Browser immer :focus-visible → behalten ihren Rahmen auch beim Klick.
!important, weil Clubdesks Regeln teils höhere Spezifität haben
(z.B. .cd-megamenu .cd-menu-level-1 a:focus = 0,3,1); unbedenklich, da
die Regel nie den Tastatur-Fokus trifft. */
:focus:not(:focus-visible) {
outline: none !important;
}
/* ---------------------------------------------------------------------
3. FARBEN – Megamenü-Links (Text auf weissem Grund = Primärrot)
------------------------------------------------------------------- */
.cd-megamenu .cd-menu-level-1 a,
.cd-megamenu .cd-menu-level-2 a,
.cd-megamenu .cd-menu-level-3 a {
color: var(--bt-primary);
}
.cd-megamenu .cd-menu-level-1 a:focus { outline-color: var(--bt-primary); }
.cd-megamenu .cd-menu-level-2 a:focus { outline-color: var(--bt-primary); }
.cd-megamenu .cd-menu-level-3 a:focus { outline-color: var(--bt-primary); }
/* Hover / aktiv – Gold-Akzent (ersetzt das frühere Google-Blau #1A73E8) */
.cd-megamenu a.cd-menu-item.cd-menu-active,
.cd-megamenu a.cd-menu-item:hover {
color: var(--bt-accent);
}
/* ---------------------------------------------------------------------
4. Login/Logout – als letzter, dezenter Eintrag im Megamenü
------------------------------------------------------------------- */
/* page.mustache rendert Login/Logout nicht mehr als Pill-Button in der
Navigationsleiste, sondern als am Ende der
.cd-menu-level-1-Liste. Diese ist auf dem Desktop eine Flex-Zeile (Spalten
nebeneinander) → flex-basis: 100% zwingt den Eintrag in eine eigene Zeile
UNTER die Hauptpunkte; mobil (≤992px) sind die ohnehin 100% breit.
Eigene Klasse statt .cd-menu-item, damit Clubdesk-Menü-JS ihn ignoriert. */
/* Der Pill-Button (22px + Padding + 10px Margin oben/unten) gab der Leiste
ihre Höhe (gemessen 62.8px, auf allen Breiten); ohne ihn schrumpfte sie auf
die Höhe des Menü-Buttons (~31px) und Logo/Menü rückten nach oben. */
.cd-navigation-bar-content {
min-height: 63px;
}
/* "Menü"-Button: 24px auf ALLEN Breiten (vom User live ausprobiert).
Ersetzt Clubdesks 22px (Desktop) und v.a. das mobile
`@media (max-width: 576px) { font-size: 4vmin }` aus page.css, das auf
Phones nur ~16px ergab. Gleiche Spezifität, custom.css lädt zuletzt →
die ungescopte Regel gewinnt auch gegen die Media-Query. */
.cd-megamenu-button {
font-size: 24px;
}
/* Auf dem Desktop ist das Menü rechts gefloatet (shrink-to-fit): ohne
contain würde die Breite dieses Eintrags (Text + Margins) zur Menübreite
addiert und Trennlinie/Login stünden ~80px rechts von "Kontakt".
contain: inline-size → trägt 0px bei; Abstände daher nur INNERHALB des
(Linie als ::before, Margin am Link), nicht als Margin am . */
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login {
flex-basis: 100%;
contain: inline-size;
margin-top: 15px;
}
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login::before {
content: "";
display: block;
margin: 0 20px 10px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* Desktop (ab 993px, wo Clubdesk das Menü rechts ausrichtet): rechtsbündig,
bündig mit dem Textende des letzten Hauptpunkts ("Kontakt"). */
@media (min-width: 993px) {
.cd-megamenu .cd-menu-level-1 > ul > li.bt-menu-login {
text-align: right;
}
}
.cd-megamenu .cd-menu-level-1 a.bt-menu-login-link {
margin: 0 20px;
font-size: 16px;
font-weight: 400;
color: #6b6b6b;
}
.cd-megamenu .cd-menu-level-1 a.bt-menu-login-link:hover {
color: var(--bt-accent);
}
/* ---------------------------------------------------------------------
5. FARBEN – Cookie-Banner
------------------------------------------------------------------- */
.cc-window,
.cc-revoke {
background-color: var(--bt-primary);
}
/* „Weiterlesen“-Link & Ablehnen-Button im Banner = Gold-Akzent */
a.cc-link,
a.cc-link:active,
a.cc-link:visited,
.cc-bottom,
.cc-btn:first-child {
color: var(--bt-accent);
}
a.cc-link:hover,
a.cc-link:active:hover,
a.cc-link:visited:hover,
.cc-bottom:hover {
color: var(--bt-on-primary);
}
/* Zustimmen-Button: weisser Grund, Primärrot-Text */
.cc-btn {
background-color: var(--bt-on-primary);
color: var(--bt-primary);
}
/* ---------------------------------------------------------------------
6. INHALTS-BUTTONS (.cd-button-primary/-secondary/-tertiary)
---------------------------------------------------------------------
Content-CTA-Buttons (z.B. "Mitmachen", "Über Bärn treit" im Header-Banner
der Startseite) – nicht zu verwechseln mit .cd-button-login (Navigation,
oben bereits gestylt). Clubdesk liefert sie in Roboto und in der ALTEN
Vereinsfarbe Bordeaux #770419 (Primär, siehe docs/clubdesk-css-reference.md)
bzw. neutralem Grau (Tertiär) – hier auf unsere Palette & Schrift
umgestellt. Können sowohl im Header als auch im Content vorkommen, daher
ohne main/header-Scope.
Farben: !important nötig (Clubdesks .cd-light/.cd-dark-Kollision, siehe
Referenz-Doku). Schrift: kein !important nötig – Clubdesks eigene
Basis-Regel ist selbst nicht themenabhängig, und bei gleicher Spezifität
gewinnt unser später geladenes custom.css automatisch. */
a.cd-button-primary, input.cd-button-primary, button.cd-button-primary,
a.cd-button-secondary, input.cd-button-secondary, button.cd-button-secondary,
a.cd-button-tertiary, input.cd-button-tertiary, button.cd-button-tertiary {
font-family: var(--bt-body-font);
}
/* Primär: gefüllt, wie der Login-Button in der Navigation (Rot → Akzent bei Hover) */
a.cd-button-primary, input.cd-button-primary, button.cd-button-primary {
background-color: var(--bt-primary) !important;
border-color: var(--bt-primary) !important;
color: var(--bt-on-primary) !important;
}
a.cd-button-primary:hover, input.cd-button-primary:hover, button.cd-button-primary:hover {
background-color: var(--bt-accent) !important;
border-color: var(--bt-accent) !important;
color: var(--bt-on-primary) !important;
}
/* Sekundär: Outline-Stil, füllt bei Hover wie Primär */
a.cd-button-secondary, input.cd-button-secondary, button.cd-button-secondary {
background-color: transparent !important;
border-color: var(--bt-primary) !important;
color: var(--bt-primary) !important;
}
a.cd-button-secondary:hover, input.cd-button-secondary:hover, button.cd-button-secondary:hover {
background-color: var(--bt-accent) !important;
border-color: var(--bt-accent) !important;
color: var(--bt-on-primary) !important;
}
/* Tertiär: zurückhaltend, keine Füllfarbe (folgt Clubdesks eigener
neutraler Grundidee, aber mit unserer Überschriften-Farbe statt Grau) */
a.cd-button-tertiary, input.cd-button-tertiary, button.cd-button-tertiary {
border-color: var(--bt-heading-color) !important;
color: var(--bt-heading-color) !important;
}
a.cd-button-tertiary:hover, input.cd-button-tertiary:hover, button.cd-button-tertiary:hover {
border-color: var(--bt-primary) !important;
color: var(--bt-primary) !important;
}
/* ---------------------------------------------------------------------
7. TABELLEN (.cd-table)
---------------------------------------------------------------------
Clubdesk setzt Tabellen-Kopfzeile fix auf 11px und Werte auf 16px,
beides kleiner als unsere Basis. Beide Selektoren matchen Clubdesks
eigene Regeln exakt (gleiche Spezifität (0,2,0)) – bei Gleichstand
gewinnt automatisch unser später geladenes custom.css, kein !important
nötig (nur Farbe wäre themenabhängig, hier nicht angetastet). */
.cd-table .cd-table-header {
font-size: 14px;
font-weight: 700;
}
.cd-table .cd-table-value {
font-size: var(--bt-font-base);
}
/* ---------------------------------------------------------------------
8. LINKS im Inhalt ()
---------------------------------------------------------------------
Vorgabe next.MD: Links in der Farbe des umgebenden Texts, beim Hover
unterstrichen und dunkler; verlinkte Überschriften in Überschriften-
farbe. color: inherit erledigt beides (Fliesstext → Textfarbe,
h1–h6 → --bt-heading-color). Clubdesk färbt Links blau über die
.cd-light/.cd-dark-Kette → !important.
Unterstreichung statt border-bottom: text-decoration mit eigener
Dicke/Abstand/Farbe sieht aus wie eine Border-Linie, bricht aber sauber
über Zeilenumbrüche, spart Unterlängen aus (skip-ink) und verschiebt
kein Layout. In Ruhe nur eine dezente Linie (sonst wären Links im
Fliesstext unsichtbar – und auf Touch-Geräten gibt es kein Hover),
beim Hover volle Linie + dunklere Farbe. color-mix() mit currentColor
leitet die Töne von der jeweiligen Textfarbe ab.
Ausgenommen: Buttons (.cd-button) und Bild-Links (Galerie/Lightbox). */
main a:not(.cd-button):not(:has(img)),
main a:not(.cd-button):not(:has(img)):visited {
color: inherit !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
main a:not(.cd-button):not(:has(img)):hover,
main a:not(.cd-button):not(:has(img)):visited:hover {
color: color-mix(in srgb, currentColor 60%, #000000) !important;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
/* Footer-Hintergrund: Markenrot statt Clubdesks #333333. Die Farbe steht
inline auf .cd-backgroundPane (Sektionseinstellung) → !important. */
footer .cd-backgroundPane {
background-color: var(--bt-primary) !important;
}
/* Footer-Links (dunkle Sektion): weiss statt Clubdesks Hellblau #81BBD5,
ohne Unterstreichung; beim Hover eine dünne Linie als Rückmeldung
(gleiches Prinzip wie die Inhalts-Links oben). Farbe über die
.cd-dark-Kette → !important. */
footer a:not(.cd-button),
footer a:not(.cd-button):visited {
color: var(--bt-on-primary) !important;
text-decoration: none !important;
text-underline-offset: 0.2em;
}
footer a:not(.cd-button):hover,
footer a:not(.cd-button):visited:hover {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
}