@charset "UTF-8";
/* =============================================================================
   GCO Designbase – Grundraster und Farbanwendung
   Geboxtes Layout, Full-Bleed, Text- und Buttonfarben für Oxygen Classic
   (erzeugt aus der Bricks-Fassung – Änderungen dort machen).

   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.
   --maxw-outer
            AUSSENrahmen der ganzen Seite. Randlose Bereiche (Full-Bleed)
            laufen höchstens bis hierhin, auf breiteren Schirmen steht der
            Inhaltsbereich zentriert mit weißem Rand. 2560 ist die Breite, auf
            die WordPress große Uploads herunterrechnet ("-scaled") – bis dahin
            wird kein Foto hochgerechnet.
   --vw     Rechenwert, nicht setzen: min(100vw, --maxw-outer). Überall, wo
            früher 100vw stand, steht jetzt var(--vw, 100vw).

   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 */
  --maxw-outer: 2560px;                       /* Aussenrahmen der ganzen Seite */
  --vw: min(100vw, var(--maxw-outer));        /* wirksame Fensterbreite */
}


/* =============================================================================
   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 */
.ct-inner-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Äußerste Container: begrenzt, zentriert, mit Randabstand */
.ct-section-inner-wrap {
  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 */
.ct-section .ct-section .ct-section-inner-wrap {
  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 */
.ct-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% - var(--vw, 100vw) / 2) !important;
  margin-right: calc(50% - var(--vw, 100vw) / 2) !important;
  width: var(--vw, 100vw) !important;
  max-width: none !important;
}

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

/* Innerhalb von full-bleed / full-bleed-bg übernimmt die Section
   die Einrückung, Container darin bleiben neutral */
.full-bleed .ct-section-inner-wrap,
.full-bleed-bg .ct-section-inner-wrap {
  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.

   `clip` statt `hidden`: Beides verbirgt den Überhang. `hidden` macht das
   Wurzelelement aber zum Scrollcontainer, und darauf reagieren die Engines
   unterschiedlich – in Chromium hält `position: sticky` darin nachweislich
   (nachgemessen: Kopf bleibt nach 900 px Scroll bei 0), in WebKit ist genau
   diese Kombination seit Jahren eine bekannte Fehlerquelle. `clip` erzeugt
   keinen Scrollcontainer und nimmt die Frage aus dem Spiel. Die Zeile mit
   `hidden` bleibt als Rückfall für Browser stehen, die `clip` nicht kennen;
   sie wird von der folgenden überschrieben, sobald `clip` verstanden wird.

   Was das NICHT behebt: Ein Element mit `width: 100vw` ist unter Windows um
   die Scrollbalkenbreite zu breit (rund 15 px) und ragt je Seite gut 7 px
   über den sichtbaren Bereich. Sichtbar ist das nur an Kanten, die exakt
   sitzen müssen – bei einem Foto fällt es nicht auf, bei der roten Linie
   fehlen rechts ein paar Pixel. Die Rechnung selbst bleibt trotzdem stehen:
   Abschnitt 3 ist zeichengleich mit den PEG-Frontend-Styles, und eine
   Abweichung hier würde den Template-Austausch brechen. Wer das wirklich
   wegbekommen will, muss es auf BEIDEN Installationen gleichzeitig ändern. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}


/* ---------- C) Aussenrahmen (seit 1.15.0) ----------
   Der Inhaltsbereich endet bei --maxw-outer und steht zentriert. Kopf und
   Fuß bleiben volle Breite.

   Eigener Block mit `html .ct-inner-content` statt einer Änderung an der Regel in
   Abschnitt 2: Dort steht #brx-content mit max-width: none, und dieselbe
   Regel steht zeichengleich in den PEG-Frontend-Styles, die SPÄTER geladen
   werden. Mit dem zusätzlichen `html` gewinnt dieser Block über die
   Spezifität, egal in welcher Reihenfolge die Dateien kommen. */
html .ct-inner-content {
  max-width: var(--maxw-outer) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =============================================================================
   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.
   ========================================================================== */

.ct-text-block a,
.oxy-rich-text a,
.gco-text a {
  color: var(--text-link, currentColor);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  transition: color .2s ease;
}

.ct-text-block a:hover,
.oxy-rich-text a:hover,
.gco-text a:hover {
  color: var(--text-link-hover, currentColor);
}

.ct-text-block strong, .ct-text-block b,
.oxy-rich-text strong, .oxy-rich-text b,
.gco-text strong, .gco-text 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 .ct-text-block a,
.inverse .oxy-rich-text a,
.inverse .gco-text a {
  color: var(--text-link-light, currentColor);
}

.inverse .ct-text-block a:hover,
.inverse .oxy-rich-text a:hover,
.inverse .gco-text a:hover {
  color: var(--text-light, currentColor);
}

.inverse .ct-text-block strong, .inverse .ct-text-block b,
.inverse .oxy-rich-text strong, .inverse .oxy-rich-text b,
.inverse .gco-text strong, .inverse .gco-text 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,
  .ct-text-block a, .oxy-rich-text a, .gco-text a { transition: none; }
}

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