/* ============================================
   ECX 10 - Basis-Regeln
   Uebernommen aus dem Entwurf der Grafikerin
   (assets/styles.css), aber JEDE Regel unter .ecx
   gekapselt.
   Grund: GeneratePress bleibt geladen und alle alten
   Seiten muessen unberuehrt bleiben. Ungekapselte
   Element-Selektoren wuerden die ganze Website
   umformatieren.
   Die Klasse .ecx setzt ecx_body_class() nur auf
   neuen Templates.
   ============================================ */

.ecx,
.ecx *,
.ecx *::before,
.ecx *::after { box-sizing: border-box; }

body.ecx {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================
   BOOTSTRAP-BEREICHE BLEIBEN AUSGESPART

   Auf ECX-Seiten steht genau ein Bereich, den nicht wir bauen: der
   Footer. Er kommt ueber GeneratePress und Toolset herein und ist
   durchgehend Bootstrap-Markup (.row, .col-*, .card, .btn). Gezaehlt auf
   der Startseite: 18 von 19 Nicht-ECX-Elementen liegen im .site-footer,
   das eine uebrige ist ein Fehltreffer der Suche.

   Unsere Element-Regeln sind Grundeinstellungen fuer SELBST gebautes
   Markup. Auf Bootstrap losgelassen richten sie Schaden an, weil sie bei
   gleicher Spezifitaet (beide 0,1,0) spaeter geladen werden und deshalb
   gewinnen. Belegt am .btn-outline-light im Footer: mit .ecx wird aus
   rgb(9,67,106) auf Weiss ein rgb(255,255,255) auf Weiss - der Knopf
   verschwindet, bis man mit der Maus darueber faehrt.

   Deshalb klammert jede Element-Regel den Footer aus. Das
   :not(.site-footer *) steht INNERHALB von :where() und aendert die
   Spezifitaet damit nicht - sie bleibt 0,1,0.

   Warum keine Cascade Layers: die waeren eleganter, wuerden aber auch
   GeneratePress ueber unsere Basis stellen. Die Basis ist ausdruecklich
   so gebaut, dass sie GeneratePress schlaegt und den eigenen Komponenten
   unterliegt (siehe Block unten). Layers wuerden diese Auslegung
   umdrehen.

   Kommt spaeter ein weiterer fremder Bereich auf einer ECX-Seite dazu,
   gehoert er in dieselbe Klammer.
   ========================================================== */

/* Ab hier stehen die Element-Selektoren in :where().
   Grund: die Kapselung unter .ecx hebt die Spezifitaet von 0,0,1 auf 0,1,1
   und damit ueber jede Komponentenklasse (.ecx-nav__trigger = 0,1,0). Die
   Basis wuerde dann die Komponente ueberschreiben statt umgekehrt.
   :where() zaehlt nicht mit, die Regeln bleiben auf 0,1,0 - stark genug
   gegen GeneratePress, schwach genug fuer unsere eigenen Komponenten. */

.ecx :where(img:not(.site-footer *)) { display: block; max-width: 100%; }

.ecx :where(button:not(.site-footer *)) {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

.ecx :where(a:not(.site-footer *)) { color: inherit; text-decoration: none; }

/*
 * HOVER: DIE FREMDE REGEL, DIE UEBER ALLEM STEHT
 *
 * Bootstrap und GeneratePress setzen beide einen nackten Selektor:
 *
 *   bootstrap.min.css        a:hover { color: #0056b3 }
 *   GeneratePress inline-CSS a:hover { color: var(--contrast) }   also #222
 *
 * a:hover wiegt 0,1,1 und schlaegt damit JEDE Klassenregel auf 0,1,0 -
 * auch die Zeile darueber. Ohne Gegenwehr wird jeder ECX-Link beim
 * Ueberfahren dunkelgrau. Gemessen auf Startseite und Events-Seite waren
 * das 105 Links mit heller Schrift, darunter der rote Knopf, das
 * Topbar-Logo und die Links im Menue-Panel - weisse Schrift auf rotem
 * oder dunkelblauem Grund, also praktisch unlesbar.
 *
 * Die Gegenregel steht eine Stufe hoeher: das :hover ausserhalb von
 * :where() macht 0,2,0. Fremde 0,1,1-Regeln verlieren, eigene
 * Komponenten auf 0,2,0 gewinnen weiterhin ueber die Ladereihenfolge.
 *
 * FOLGE FUER NEUE KOMPONENTEN: Wer einem Link eine Farbe gibt, die von
 * der geerbten ABWEICHT, muss sie auch fuer :hover setzen - sonst zieht
 * diese Regel ihn auf inherit zurueck. Betroffen und versorgt sind
 * .ecx-btn--primar, .ecx-teaser, .ecx-panel__link, .ecx-panel__child
 * sowie die beiden "Alle ansehen"-Links.
 *
 * Nicht betroffen sind Links, deren eigene Farbe der geerbten entspricht
 * (.ecx-topbar__socials a und .ecx-panel__socials|__lang a setzen #fff
 * auf weiss vererbendem Grund). Dort ist inherit dasselbe Weiss.
 */
.ecx :where(a:not(.site-footer *)):hover,
.ecx :where(a:not(.site-footer *)):focus { color: inherit; }

/* Dasselbe Spiel bei Knoepfen: das GeneratePress-Inline-CSS setzt
   button:hover { color: #fff } - ebenfalls 0,1,1. Ohne Gegenwehr wird
   jede Beschriftung beim Ueberfahren weiss. Aufgefallen an den
   Kalendertagen mit Termin: rote Zahl auf blassrotem Feld, beim
   Ueberfahren weiss auf blassrot und damit weg. */
.ecx :where(button:not(.site-footer *)):hover,
.ecx :where(button:not(.site-footer *)):focus { color: inherit; }

/*
 * DER HINTERGRUND WIRD HIER BEWUSST NICHT MITGENOMMEN.
 *
 * Dieselbe Regel setzt auch button:hover { background: rgb(63,64,71) }.
 * Eine Gegenregel muesste einen Wert setzen - "none" waere der Wert
 * dieser Basis. Fuer die Schrift geht das, weil inherit genau das ist,
 * was fast jeder Knopf ohnehin will. Beim Hintergrund ist es umgekehrt:
 * die meisten Knoepfe bringen einen eigenen mit (Kalendertage,
 * Filterknoepfe, Hero-Striche). Eine Regel auf 0,2,0 wuerde die alle
 * ueberschreiben - der Schaden waere groesser als der Nutzen.
 *
 * Betroffene Knoepfe halten ihren Hintergrund deshalb selbst fest, in
 * ihrer eigenen :hover-Regel. Erledigt fuer die Kalendertage
 * (events.css) und die Hero-Striche (hero.css); alle uebrigen hatten
 * schon eine.
 */

/*
 * Der Altbestand haengt an JEDE h1 einen hellblauen Kasten:
 *
 *   .single-klassifikationen h1, ..., h1, h2.h1like {
 *     background-color: #E6ECF0; padding: 10px 20px; border-radius: 6px; }
 *
 * (style.css, Zeile 1633). Der nackte h1-Selektor trifft site-weit. Auf
 * ECX-gebauten Seiten ist der Kasten falsch - er ist beim Bau der
 * Events-Uebersicht aufgefallen, deren Hero-Ueberschrift ein h1 ist.
 * Der Hero der Startseite entgeht der Regel nur, weil er ein h2 nutzt.
 *
 * Zurueckgesetzt wird deshalb hier, gekapselt unter .ecx. Auf den noch
 * nicht umgebauten Seiten bleiben die blauen Ueberschriften unberuehrt -
 * die gehoeren dort zur Gestaltung.
 */
.ecx :where(h1:not(.site-footer *), h2:not(.site-footer *), h3:not(.site-footer *), h4:not(.site-footer *)) {
  margin: 0;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: none;
  padding: 0;
  border-radius: 0;
  /* Keine Silbentrennung in Ueberschriften, Vorgabe der Grafikerin
     vom 06.10.2026 - siehe DECISIONS Punkt 35. */
  hyphens: none;
}

.ecx :where(h1:not(.site-footer *)) { font-size: var(--t-h1); }
.ecx :where(h2:not(.site-footer *)) { font-size: var(--t-h2); }
.ecx :where(h3:not(.site-footer *)) { font-size: var(--t-h3); }
.ecx :where(h4:not(.site-footer *)) { font-size: var(--t-h4); }

.ecx :where(p:not(.site-footer *)) { margin: 0; }

/* Nur fuer Screenreader sichtbar (aus .sr) */
.ecx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icon-System (Sprite).
   Liegt hier und nicht in einer Komponente, weil Topbar und Navigation
   es gemeinsam nutzen und spaetere Komponenten ebenfalls. */
.ecx-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}