@charset "UTF-8";
/* =============================================================================
   GCO Designbase – Grundraster und Farbanwendung
   Geboxtes Layout, Full-Bleed, Text- und Buttonfarben für Bricks Builder.

   INHALT
   ------------------------------------------------------------------
    1  Stellschrauben
    2  Grundraster
    3  Full-Bleed
    4  Text, Links und Fettungen
    5  Dunkle Bereiche
    6  Buttons

   KONVENTIONEN
   ------------------------------------------------------------------
   · Werte pro Website über die Variablen in Abschnitt 1 überschreiben,
     nie in dieser Datei ändern.
   · `!important` ist hier nötig: Bricks setzt eigene Container-Regeln,
     die sonst gewinnen.
   · Abschnitt 4 bis 6 wenden die Farb-Token an. Sie greifen eng gefasst und
     mit Rückfall – ohne gesetzte Farben ändert sich nichts.
   · Abschnitt 2 und 3 sind zeichengleich mit Abschnitt 2 der PEG-Frontend-
     Styles (staging26.peggmbh.de). Das ist Absicht: Nur so lassen sich
     Bricks-Templates zwischen Development und PEG austauschen, ohne dass
     das Raster verrutscht. Änderungen hier immer mit PEG abgleichen.
   ============================================================================= */


/* =============================================================================
   1  STELLSCHRAUBEN

   --maxw   INHALTSbreite. Der Seitenabstand wird aufgeschlagen, nicht
            abgezogen: Die Box ist außen --maxw + 2 × --pad-x = 1570 px breit,
            der Inhalt darin exakt 1520 px.
   --pad-x  Seitenabstand, auf allen Breakpoints gleich.

   Pro Website überschreiben, z. B. in Bricks unter
   Einstellungen → Custom Code → Custom CSS:

     :root { --maxw: 1400px; --pad-x: 35px; }

   Auch bereichsweise möglich, auf einer eigenen Klasse:

     .weite-sektion { --maxw: 1800px; }

   ACHTUNG: Wer die Werte ändert, verlässt das PEG-Raster. Templates, die
   zwischen den Installationen wandern sollen, brauchen dieselben Werte.
   ========================================================================== */

:root {
  --pad-x: 25px;    /* seitlicher Randabstand */
  --maxw: 1520px;   /* maximale Inhaltsbreite */
}


/* =============================================================================
   2  GRUNDRASTER

   Bewusst per CSS statt über Bricks Theme Styles: Theme Styles greifen auf
   JEDEN Container, auch auf verschachtelte – dann entsteht ein zweiter Rand.
   Die Regeln unten setzen den Rand nur am äußersten Container.
   ========================================================================== */

/* Seitenbereiche selbst: neutral */
#brx-header,
#brx-content,
#brx-footer {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Äußerste Container: begrenzt, zentriert, mit Randabstand */
.brxe-container {
  box-sizing: border-box !important;
  max-width: calc(var(--maxw) + var(--pad-x) * 2) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* verschachtelte Container: kein zweiter Rand */
.brxe-container .brxe-container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Sections bleiben neutral, sie sind immer volle Breite */
.brxe-section {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =============================================================================
   3  FULL-BLEED

   .full-bleed      alles randlos, auch der Inhalt
   .full-bleed-bg   Hintergrund randlos, Inhalt bleibt auf der Rasterlinie

   Die Formel in .full-bleed-bg liefert auf breiten Schirmen genau den
   Abstand, den auch ein normaler Container hätte, und fällt auf schmalen
   auf --pad-x zurück.

   HINWEIS: Beide Klassen gehören auf eine SECTION. Liegen sie auf einem
   Container, behält der seinen Rand aus Abschnitt 2 – bei .full-bleed ist
   der Inhalt dann doch nicht randlos. So ist es auch bei PEG; deshalb hier
   bewusst nicht „korrigiert", sonst laufen die Installationen auseinander.
   ========================================================================== */

/* ---------- A) komplett randlos ---------- */
.full-bleed,
.full-bleed-bg {
  box-sizing: border-box !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: none !important;
}

/* ---------- B) nur Hintergrund randlos ---------- */
.full-bleed-bg {
  padding-left:  max(var(--pad-x), (100vw - var(--maxw)) / 2) !important;
  padding-right: max(var(--pad-x), (100vw - var(--maxw)) / 2) !important;
}

/* Innerhalb von full-bleed / full-bleed-bg übernimmt die Section
   die Einrückung, Container darin bleiben neutral */
.full-bleed .brxe-container,
.full-bleed-bg .brxe-container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Pflicht, sobald etwas über die volle Breite geht: 100vw schließt unter
   Windows die Scrollbar ein. Deckt zugleich den expand-Effekt aus
   GCO Effects ab, der dieselbe Regel braucht. */
html {
  overflow-x: hidden;
}


/* =============================================================================
   4  TEXT, LINKS UND FETTUNGEN

   Bewusst eng gefasst: nur die Textbausteine von Bricks und der Beitragsinhalt.
   Ein Selektor wie `a` oder `p a` würde auch Navigation, Buttons, Breadcrumbs
   und Bricks-eigene Bausteine einfärben – und genau das will man nicht.

   Alle Werte mit Rückfall: fehlt der :root-Block (Plugin deaktiviert, Farben
   nie gesetzt), bleibt es bei dem, was das Theme vorgibt.
   ========================================================================== */

.brxe-text a,
.brxe-text-basic a,
.brxe-post-content a {
  color: var(--text-link, currentColor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: color .2s ease;
}

.brxe-text a:hover,
.brxe-text-basic a:hover,
.brxe-post-content a:hover {
  color: var(--text-link-hover, currentColor);
}

.brxe-text strong, .brxe-text b,
.brxe-text-basic strong, .brxe-text-basic b,
.brxe-post-content strong, .brxe-post-content b {
  color: var(--text-bold, inherit);
  font-weight: 700;
}


/* =============================================================================
   5  DUNKLE BEREICHE

   Klasse `inverse` auf die Section. Dreht Fläche und Text um und schaltet
   die Links auf die helle Variante – sonst steht Dunkelblau auf Fast-Schwarz.
   ========================================================================== */

.inverse {
  background-color: var(--background-dark, transparent);
  color: var(--text-light, inherit);
}

.inverse h1, .inverse h2, .inverse h3,
.inverse h4, .inverse h5, .inverse h6 {
  color: var(--text-light, inherit);
}

.inverse .brxe-text a,
.inverse .brxe-text-basic a,
.inverse .brxe-post-content a {
  color: var(--text-link-light, currentColor);
}

.inverse .brxe-text a:hover,
.inverse .brxe-text-basic a:hover,
.inverse .brxe-post-content a:hover {
  color: var(--text-light, currentColor);
}

.inverse .brxe-text strong, .inverse .brxe-text b,
.inverse .brxe-text-basic strong, .inverse .brxe-text-basic b,
.inverse .brxe-post-content strong, .inverse .brxe-post-content b {
  color: var(--text-light, inherit);
}


/* =============================================================================
   6  BUTTONS

   Zwei Grundformen als Klassen, in Bricks unter Stil → CSS → CSS-Klassen
   einzutragen. Bewusst NICHT auf `.brxe-button` gelegt: das würde jeden
   Bricks-Button überschreiben und die Gestaltungsfreiheit im Builder nehmen.

   Form (Rundung, Polsterung) pro Website über die Variablen unten.
   ========================================================================== */

.btn-1,
.btn-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: var(--btn-pad-y, .8em) var(--btn-pad-x, 1.8em);
  border: 1px solid transparent;
  border-radius: var(--btn-radius, 0);
  box-shadow: var(--btn-shadow, none);
  font: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-1 {
  background-color: var(--btn-1-fill, transparent);
  border-color: var(--btn-1-border, currentColor);
  color: var(--btn-1-text, inherit);
}

.btn-1:hover,
.btn-1:focus-visible {
  background-color: var(--btn-1-fill-hover, transparent);
  border-color: var(--btn-1-border-hover, currentColor);
  color: var(--btn-1-text-hover, inherit);
}

.btn-2 {
  background-color: var(--btn-2-fill, transparent);
  border-color: var(--btn-2-border, currentColor);
  color: var(--btn-2-text, inherit);
}

.btn-2:hover,
.btn-2:focus-visible {
  background-color: var(--btn-2-fill-hover, transparent);
  border-color: var(--btn-2-border-hover, currentColor);
  color: var(--btn-2-text-hover, inherit);
}

/* Tastaturfokus muss sichtbar bleiben, auch wenn Hover und Fokus gleich aussehen */
.btn-1:focus-visible,
.btn-2:focus-visible {
  outline: 2px solid var(--brand-color, currentColor);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-1, .btn-2,
  .brxe-text a, .brxe-text-basic a, .brxe-post-content a { transition: none; }
}

/* ========================= Ende ========================= */