/* Korrekturen am gespiegelten Theme — gilt fuer ALLE Seiten.
   ==========================================================================

   Diese beiden Regeln standen bis 13.08.2026 in `hero.css`. Die laden aber nur
   drei von 25 Seiten (Startseite, /danke/, /leichte-sprache/) — auf den
   uebrigen 22 wirkten sie deshalb nicht, und die Kopfzeile sah dort anders aus
   als auf der Startseite. Gemessen bei 820 px: Startseite 144 px hoch,
   /ueber-uns/ und /ausbildung/ 248 px.

   Was hier hineingehoert: alles, was Theme-Markup (`#brx-…`, `.brxe-…`)
   betrifft und auf jeder Seite gelten soll.
   Was NICHT: `cf-`-Klassen, die nur zur Kampagne selbst gehoeren (Hero,
   Pill-Switch, Spendenformular) — die bleiben in `hero.css`.
   Ausnahme, seit `.cf-icon` (18.08.2026): Ein `cf-`-Baustein, der auch
   AUSSERHALB der Kampagne gebraucht wird, gehoert hierher — sonst muesste
   die betroffene Seite die ganzen 53 KB von `hero.css` fuer ein einzelnes
   Bauteil mitladen. `.cf-funders` (Foerderer-Logos, jetzt auch auf
   /geschichte/) ist aus demselben Grund hier gelandet.

   Eingriffe in das Theme sind unbedenklich, weil Bricks nicht mehr genutzt
   wird und das gespiegelte Markup eingefroren ist.

   Eingebunden von `apply_theme.py`, das nach jedem Spiegeln laufen muss.
   ========================================================================== */

/* ------------------------------------------------------- Seitenabstand ---
   Eine Quelle fuer den seitlichen Abstand, damit Kopfzeile, Hero und
   Textsektionen auf derselben Fluchtlinie beginnen. Frueher stand derselbe
   Wert an drei Stellen und wirkte unterschiedlich:

     .cf-context   Abstand AUSSEN an der Sektion -> Inhalt beginnt am Rand
                   der max-width-Box
     .cf-hero      Abstand INNEN im Container    -> Inhalt beginnt 30 px
                   weiter innen
     Kopfzeile     gar kein Abstand              -> Inhalt klebt bei LG am
                   Bildschirmrand

   Gemessen bei 1280 px: Kontext 83, Hero 113, Kopfzeile 83.
   Seit 14.08.2026 stehen BEIDE Groessen hier und nur hier — Abstand und
   maximale Breite. Vorher lag `--cf-max` in `hero.css`, das aber nur drei von
   25 Seiten laden; die Kopfzeile der uebrigen 22 konnte sich gar nicht daran
   ausrichten. */
:root {
  --cf-rand: clamp(2rem, 4vw, 3rem);
  --cf-max: 110rem;
}

/* Ab 1320 px waechst der Inhalt mit, statt mit immer groesseren Raendern
   stehenzubleiben. 1320 px ist der oberste Umbruchpunkt des alten Themes. */
@media (min-width: 1320px) { :root { --cf-max: 132rem; } }

/* ---------------------------------------------------- Containerbreite ---
   Kopfzeile, Fusszeile und Inhalt bekommen dieselbe Geometrie wie
   `.cf-hero__inner` und `.cf-context`: Die Breite schliesst den Seitenabstand
   MIT ein, der Abstand liegt innen. Nur so beginnt der Inhalt ueberall auf
   derselben Fluchtlinie.

   Gemessen vor der Vereinheitlichung (linke Kante des Inhalts):

     1280 px   Kopfzeile 113   Hero  83   Kontext  83
     1320 px   Kopfzeile   0   Hero  30   Kontext  30

   Bricks setzt `width: 1100px` FEST, nicht als max-width — ein blosses
   max-width bleibt deshalb wirkungslos. Beides muss gesetzt werden.

   Bewusst erst ab LG: Darunter braucht die Navigation die volle Breite. Sie
   passt mit 11 px Luft in eine Zeile; 60 px Abstand liessen sie wieder
   umbrechen. */
@media (min-width: 992px) {   /* LG + XL */
  #brx-header .brxe-container,
  #brx-footer .brxe-container,
  #brx-content .brxe-container {
    width: 100%;
    max-width: calc(var(--cf-max) + 2 * var(--cf-rand));
    padding-inline: var(--cf-rand);
  }
}

/* ------------------------------------------------- Navigation im MD-Band ---
   Zwischen 801 und 869 px rutschte „Kontakt" in eine zweite Zeile und die
   Kopfzeile wuchs von 144 auf 248 px.

   Ursache: Das Theme schaltet bei `max-width: 800px` auf das Burger-Menue.
   Ab 801 px zeigt es wieder die volle Navigation — die aber erst ab 870 px in
   eine Zeile passt. Fuer die 69 px dazwischen gab es keine Regel.

   Gemessen: Die vier Menuepunkte brauchen 492 px, verfuegbar sind 439 px.
   12 px statt 20 px Innenabstand sparen 4 Punkte x 2 Seiten x 8 px = 64 px,
   macht 428 px — es bleiben 11 px Luft.

   Achtung: Der verfuegbare Platz ist NICHT konstant. Misst man ihn im bereits
   umgebrochenen Zustand, kommt ein zu grosser Wert heraus (457 statt 439) —
   mit 14 px Abstand blieb die Kopfzeile deshalb im ersten Anlauf zweizeilig.

   Warum nicht einfach das Burger-Menue frueher einblenden: Die Luecke trifft
   genau die verbreitetsten Tablets im Hochformat — iPad 10,2" (810 px),
   iPad Air und iPad 10. Gen. (820 px), iPad Pro 11" (834 px). Die Navigation
   dort hinter einem Knopf zu verstecken, obwohl sie mit 8 px weniger Abstand
   hineinpasst, waere bei einer Seite ueber Zugaenglichkeit die schlechtere
   Wahl.

   Die Regel gilt bis 991 px und nicht nur bis 869: So bleibt Platz, falls ein
   Menuepunkt dazukommt oder umbenannt wird. Sonst kehrt die Luecke bei der
   naechsten Textaenderung unbemerkt zurueck. */
@media (min-width: 801px) and (max-width: 991px) {    /* MD */
  #brxe-hoayvt .brx-nav-nested-items > li > a,
  #brxe-hoayvt .brx-nav-nested-items > li > .brx-submenu-toggle > * {
    padding-inline: 12px;
  }
}

/* ------------------------------------------------ Nur fuer Screenreader ---
   Wird von `apply_links.py` in jeden externen Link gesetzt, damit der Wechsel
   in einen neuen Tab angesagt wird. Muss auf ALLEN Seiten verfuegbar sein —
   die gleichnamige Regel in `hero.css` laden nur drei davon.

   `clip-path` statt `display: none`: Ausgeblendetes waere auch fuer
   Screenreader weg, genau das soll es hier nicht sein. */
.cf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------- Sitemap-Seite ---
   `/sitemap/` und `/en/sitemap-2/` werden von `apply_sitemap.py` aus den
   tatsaechlich gebauten Seiten erzeugt. Vorher standen dort elf lose
   `<a>`-Elemente ohne Liste und ohne einzige Ueberschrift.

   Warum das hier steht und nicht in `hero.css`: Die beiden Sitemap-Seiten
   laden `hero.css` nicht — nur drei Seiten tun das. `theme-fixes.css` ist auf
   allen 25.

   Die Zielflaechen sind bewusst gross (mindestens 44 px hoch, mit Abstand
   dazwischen). Wer die Sitemap benutzt statt des Aufklappmenues, tut das oft
   gerade deshalb, weil kleine Ziele schwer zu treffen sind. */
.cf-sitemap {
  max-width: var(--cf-max);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 6rem) var(--cf-rand) clamp(4rem, 8vw, 8rem);
}
.cf-sitemap h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(3.2rem, 5vw, 4.8rem);
  line-height: 1.15;
}
.cf-sitemap__intro {
  margin: 0 0 0.8rem;
  font-size: 1.8rem;
  line-height: 1.5;
}
.cf-sitemap__wechsel {
  margin: 0 0 3.2rem;
  font-size: 1.6rem;
}
.cf-sitemap h2 {
  margin: 3.2rem 0 0.8rem;
  font-size: 2.2rem;
  line-height: 1.3;
}
.cf-sitemap ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Mehrspaltig erst, wenn eine Spalte wirklich breit genug ist. `auto-fit`
     mit `minmax` erledigt das ohne Media Query — und damit ohne die Falle,
     dass eine Media-Regel vor der Grundregel steht und stillschweigend
     ueberschrieben wird.

     Die Obergrenze ist `max-content`, nicht `1fr`. Mit `1fr` verteilten sich
     drei kurze Woerter ueber die volle Breite von 1320 px: „Ueber uns" links,
     „Geschichte" in der Mitte, „Team" ganz rechts, dazwischen je 300 px
     Leere. Die Gruppe sah dadurch nicht wie eine Liste aus, sondern wie drei
     unzusammenhaengende Elemente — und der Blick musste jede Zeile ganz
     durchqueren. Mit `max-content` ist eine Spalte so breit wie ihr laengster
     Eintrag; die Liste bleibt links beisammen und liest sich als eine. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, max-content));
  gap: 0.4rem 4rem;
}
.cf-sitemap li {
  margin: 0;
}
.cf-sitemap li > a,
.cf-sitemap__hier {
  display: block;
  min-height: 4.4rem;
  padding: 1rem 0;
  font-size: 1.8rem;
  line-height: 1.4;
}
.cf-sitemap li > a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.cf-sitemap li > a:hover,
.cf-sitemap li > a:focus-visible {
  text-decoration-thickness: 0.2em;
}
/* Die aktuelle Seite ist absichtlich kein Link. Damit sie trotzdem als
   Listenpunkt erkennbar bleibt, wird sie gedaempft ausgezeichnet — nicht
   ueber Farbe allein, sondern zusaetzlich durch den Zusatz „(diese Seite)"
   im Text. Farbe als einziges Unterscheidungsmerkmal waere hier ein
   Verstoss gegen 1.4.1. */
.cf-sitemap__hier {
  opacity: 0.75;
}
.cf-sitemap__marke {
  font-size: 1.5rem;
}

/* ------------------------------------------------------------- Icons als SVG ---
   `apply_icons.py` setzt die zehn benutzten Icons direkt ins HTML, statt eine
   Icon-Schrift zu laden. Gemessen gespart: 365 KB je Seitenaufruf.

   Die Maße bilden nach, was die Schrift tat: Ein Icon war ein Zeichen und
   damit so hoch wie die Schriftgröße. `1em` Höhe hält das; die
   Grundlinienverschiebung von -0.125em ist dieselbe, die Font Awesome benutzt.

   `currentColor`: Vorher färbte `color` das Icon, weil es Text war. Damit alle
   bestehenden Farbregeln weiter greifen — auch die für die helle Schrift auf
   dem dunklen Band oben — erbt die Füllung die Textfarbe.

   `box-sizing: content-box`: Das Theme setzt `* { box-sizing: border-box }`.
   Auf den Team-Knöpfen liegen Innenabstand und Rahmen (`icon_team`) auf
   demselben Element wie dieses `height: 1em` — unter border-box zaehlt beides
   zur Hoehe hinzu und frisst den Platz fuers Icon fast vollstaendig auf. Beim
   Schrift-Icon vorher war das egal, ein Zeichen ist immer so gross wie die
   Schriftgroesse. Mit content-box bleibt `1em` die Groesse des Icons selbst,
   Innenabstand und Rahmen kommen wie beim Schrift-Icon obendrauf. */
.cf-icon {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
  box-sizing: content-box;
}

/* ------------------------------------------------------------ Förderer ---
   Bis 24.08.2026 nur in `hero.css`, also nur auf drei Seiten. `/geschichte/`
   zeigt dieselben drei Logos schon laenger, aber in der alten, gespiegelten
   Form: Text und Logos nebeneinander in der Fusszeile statt einer eigenen
   Sektion mit zentrierter Ueberschrift. `apply_foerderer.py` ersetzt diesen
   Block jetzt durch dieselben Klassen wie auf der Startseite.

   Farben fest statt `var(--cf-petrol)`/`var(--cf-sand)` aus hero.css: Diese
   Datei laedt auf 22 der 25 Seiten OHNE hero.css, die Variablen gaebe es
   dort nicht. Es sind dieselben Werte. */
.cf-funders {
  background: #005a6e;
  /* Waagerecht KEIN Polster: Das setzt `__inner` mit der Geometrie des
     Seitencontainers, sonst zaehlt es doppelt und der Inhalt rutscht nach
     innen. */
  padding: clamp(4rem, 6vw, 6.5rem) 0;
}

/* Foerderer links, darunter als ruhige Zeile die Begleitung durch Traction.
   Bewusst NICHT nebeneinander: Die beiden Bereiche haben sehr ungleiches
   Gewicht — drei Logos gegen eines. Nebeneinander laedt zum Vergleich ein,
   und der rechte verliert ihn. Gemessen kam dazu, dass die drei Amts-Logos
   605 px in einer Reihe brauchen und unter 1320 px umbrechen; eine zweite
   Spalte daneben ging erst bei XL auf. */
/* Der Hintergrund laeuft von Rand zu Rand, der INHALT steht in derselben
   Flucht wie der Rest der Seite. Kein eigener Container mehr, sondern genau
   die Geometrie des Bricks-Containers, den Kopf und Fusszeile benutzen:
   max-width 1380, mittig, 3rem Polster.

   Gemessen bei 1400 px: Hero-Ueberschrift, Kontext-Ueberschrift, Logo im Kopf
   und „Impressum" in der Fusszeile beginnen alle bei 40. Ein eigener
   Container (max-width 1320) lag bei 30, randlos ebenfalls bei 30 — beides
   war aus der Flucht, nur in die andere Richtung. */
.cf-funders__inner {
  max-width: 138rem;
  margin-inline: auto;
  padding-inline: 3rem;
  text-align: center;
}

.cf-funders__title {
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1.3;
  font-weight: 700;
  color: #f7f7f5;
  margin: 0 0 3rem;
}

.cf-funders__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Eine Zeile: Satz und Wortmarke nebeneinander, ohne Trennstrich.
   Umbricht auf schmalen Schirmen von selbst untereinander. */
/* Grundfassung = die schmalste: Satz und Wortmarke UNTEREINANDER, beides
   mittig. Das gilt bis einschliesslich MD (991 px); darueber greifen die
   beiden Media-Regeln weiter unten. */
.cf-funders__spalte--begleitung {
  margin-top: clamp(3.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}

.cf-funders__spalte--begleitung .cf-funders__title {
  font-size: 1.7rem;
  font-weight: 400;
  margin: 0;
  opacity: .85;
}

.cf-funders__traction {
  display: block;
  /* Zweizeilig darf die Wortmarke die Breite nutzen, ohne die Zeile zu
     sprengen. Die Obergrenze verhindert, dass sie auf einem Handy quer
     groesser wird als die Amts-Logos darueber. */
  width: min(100%, 32rem);
}

.cf-funders__traction img {
  width: 100%;
  height: auto;
  display: block;
}

.cf-funders__traction:focus-visible {
  outline: 3px solid #f7f7f5;
  outline-offset: .6rem;
}

/* Höhe optisch angleichen statt exakt gleich setzen – die Logos haben sehr
   unterschiedliche Proportionen. */
.cf-funders__logos img {
  height: 7rem;
  width: auto;
  max-width: 26rem;
  object-fit: contain;
}

/* Ab LG eine Zeile: Satz und Wortmarke nebeneinander. Der Satz traegt hier
   wieder das volle Ueberschriften-Gewicht; die Wortmarke wird ueber ihre
   HOEHE eingestellt, damit sie neben dem groesseren Text nicht verschwindet.

   Erst ab LG und nicht schon ab MD: Bei 900 px stand der Satz mit der
   Wortmarke zwar in einer Zeile, aber beides gedraengt — zweizeilig ist dort
   ruhiger. */
@media (min-width: 992px) {
  .cf-funders__spalte--begleitung {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(1.6rem, 2.5vw, 3rem);
    /* Nur so breit wie der Inhalt, dann mittig. Ueber die volle Breite
       gezogen rutschte der Satz an den linken Rand, die Wortmarke an den
       rechten — und der Satz brach dabei um, obwohl Platz war. */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .cf-funders__spalte--begleitung .cf-funders__title {
    font-size: clamp(2rem, 2.6vw, 2.5rem);
    font-weight: 700;
    opacity: 1;
  }

  .cf-funders__traction {
    width: auto;
  }

  /* Hoehe am Text ausgerichtet: Die Ueberschrift steht hier bei rund 25 px,
     ihre Versalhoehe also bei etwa 18 px. Eine Wortmarke von 2.4rem sitzt
     damit auf Augenhoehe, statt den Satz zu ueberragen. */
  .cf-funders__traction img {
    height: 2.4rem;
    width: auto;
  }
}

/* Ab XL nebeneinander: links die Foerderer, rechts durch einen senkrechten
   Strich getrennt die Begleitung. Erst hier geht das auf — die drei
   Amts-Logos brauchen 605 px in einer Reihe, und darunter brechen sie um und
   hinterlassen ein Loch neben der zweiten Spalte.
   Die linke Spalte ist deshalb fest 62rem breit; die rechte bekommt den Rest. */
@media (min-width: 1320px) {
  .cf-funders__inner {
    display: grid;
    grid-template-columns: 62rem minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
    text-align: left;
  }

  .cf-funders__logos {
    justify-content: flex-start;
  }

  /* Nebeneinander traegt die Ueberschrift wieder das volle Gewicht — als
     ruhiger Nachsatz war sie gesetzt, solange sie unter den Logos stand. */
  .cf-funders__spalte--begleitung {
    margin-top: 0;
    /* Zurueck auf untereinander: Die Zeilenrichtung aus der MD-Regel wirkt
       sonst weiter, und Ueberschrift und Wortmarke stuenden nebeneinander in
       einer Spalte, die dafuer zu schmal ist. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.4rem;
    /* Die Spalte schrumpft auf ihren Inhalt — breitestes Element ist der
       Satz. Die Wortmarke darunter nimmt mit `width: 100%` genau diese
       Breite an und steht damit buendig unter dem Text. */
    width: fit-content;
    border-inline-start: 1px solid rgba(255, 255, 255, .22);
    padding-inline-start: clamp(3rem, 5vw, 5rem);
  }

  .cf-funders__spalte--begleitung .cf-funders__title {
    font-size: clamp(2rem, 2.6vw, 2.5rem);
    font-weight: 700;
    opacity: 1;
  }

  .cf-funders__traction {
    width: 100%;
  }

  .cf-funders__traction img {
    width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------- Quellenhinweis ---
   `apply_datenschutz.py` haengt den Quellenhinweis als eigenes <div> hinter
   den bcause-Abschnitt. Andere Abschnitte auf der Seite bekommen ihren
   Abstand von eigenen, durch Bricks vergebenen ID-Regeln (margin-bottom:
   100px) — dieses <div> hat keine solche ID-Regel und stuende sonst direkt
   am vorigen Absatz. */
#coin-ds-quelle {
  margin-top: 100px;
}