/*
 * gozi/contao-class-selector — CSS der Grundausstattung (Backend: CSS-Klassen → Grundausstattung einspielen).
 * Klassennamen und Stufen wie im PCT-Theme EclipseX; eigene Umsetzung für Contaos Standard-Artikel
 * (inneres .container wie bei EclipseX; fehlt es, ergänzt es das Bundle). Wird nur auf Seiten geladen, die eine dieser Klassen verwenden, und nicht,
 * wenn das PCT-Theme installiert ist (das bringt eigenes CSS für dieselben Klassen mit).
 *
 * Anpassen ohne diese Datei zu ändern — im eigenen CSS z. B.:
 *   :root { --gozi-space-factor: .8; --gozi-box-width: 1140px; }
 */
:root {
	--gozi-space-factor: 1;            /* skaliert alle Abstände */
	--gozi-box-width: 1240px;          /* Artikelbreite „Inhalt 1240 px" */
	--gozi-box-width-medium: 800px;
	--gozi-box-width-small: 650px;
	--gozi-article-gap: 40px;          /* Mindestabstand links/rechts im Artikel */
	--gozi-article-side: 8%;           /* zusätzlicher Innenabstand bei „Innenabstand links und rechts" */
}

@media (max-width: 767px) {
	:root { --gozi-article-gap: 20px; }
}

/* ---- Inhaltselemente: Außenabstand oben/unten ---------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mt-xxs { margin-top: calc(20px * var(--gozi-space-factor)) !important; }
.mt-xs { margin-top: calc(30px * var(--gozi-space-factor)) !important; }
.mt-s { margin-top: calc(40px * var(--gozi-space-factor)) !important; }
.mt-m { margin-top: calc(50px * var(--gozi-space-factor)) !important; }
.mt-l { margin-top: calc(60px * var(--gozi-space-factor)) !important; }
.mt-xl { margin-top: calc(70px * var(--gozi-space-factor)) !important; }
.mt-xxl { margin-top: calc(80px * var(--gozi-space-factor)) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xxs { margin-bottom: calc(20px * var(--gozi-space-factor)) !important; }
.mb-xs { margin-bottom: calc(30px * var(--gozi-space-factor)) !important; }
.mb-s { margin-bottom: calc(40px * var(--gozi-space-factor)) !important; }
.mb-m { margin-bottom: calc(50px * var(--gozi-space-factor)) !important; }
.mb-l { margin-bottom: calc(60px * var(--gozi-space-factor)) !important; }
.mb-xl { margin-bottom: calc(70px * var(--gozi-space-factor)) !important; }
.mb-xxl { margin-bottom: calc(80px * var(--gozi-space-factor)) !important; }

/* mobil: steht hinter den Desktop-Klassen und ersetzt sie bis 767 px */
@media (max-width: 767px) {
	.mt-0-m { margin-top: 0 !important; }
	.mt-xxs-m { margin-top: calc(20px * var(--gozi-space-factor)) !important; }
	.mt-xs-m { margin-top: calc(25px * var(--gozi-space-factor)) !important; }
	.mt-s-m { margin-top: calc(30px * var(--gozi-space-factor)) !important; }
	.mt-m-m { margin-top: calc(35px * var(--gozi-space-factor)) !important; }
	.mt-l-m { margin-top: calc(60px * var(--gozi-space-factor)) !important; }
	.mt-xl-m { margin-top: calc(70px * var(--gozi-space-factor)) !important; }
	.mt-xxl-m { margin-top: calc(80px * var(--gozi-space-factor)) !important; }

	.mb-0-m { margin-bottom: 0 !important; }
	.mb-xxs-m { margin-bottom: calc(20px * var(--gozi-space-factor)) !important; }
	.mb-xs-m { margin-bottom: calc(25px * var(--gozi-space-factor)) !important; }
	.mb-s-m { margin-bottom: calc(30px * var(--gozi-space-factor)) !important; }
	.mb-m-m { margin-bottom: calc(35px * var(--gozi-space-factor)) !important; }
	.mb-l-m { margin-bottom: calc(60px * var(--gozi-space-factor)) !important; }
	.mb-xl-m { margin-bottom: calc(70px * var(--gozi-space-factor)) !important; }
	.mb-xxl-m { margin-bottom: calc(80px * var(--gozi-space-factor)) !important; }
}

/* ---- Artikel: Breite ------------------------------------------------------------------------------
 * Wie EclipseX: Der Artikel trägt den Hintergrund, das innere .container Breite (max-width) und
 * Innenabstand. Fehlt das .container im Template (Contaos Standard-mod_article), ergänzt es das Bundle. Überschreiben im eigenen CSS, z. B.:
 *   #main .mod_article.fullwidth-boxed-small .container { max-width: 768px; }
 * max-width schließt den Innenabstand links/rechts ein (box-sizing: border-box), wie bei EclipseX.
 */
/* nur Artikel mit Breitenklasse — fremde .container auf derselben Seite bleiben unberührt */
.mod_article:is(.fullwidth-boxed, .fullwidth-boxed-medium, .fullwidth-boxed-small, .fullwidth, .fullwidth-padding-both, .boxed) > .container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gozi-article-gap);
	padding-right: var(--gozi-article-gap);
}

.mod_article.fullwidth-boxed > .container { max-width: var(--gozi-box-width); }
.mod_article.fullwidth-boxed-medium > .container { max-width: var(--gozi-box-width-medium); }
.mod_article.fullwidth-boxed-small > .container { max-width: var(--gozi-box-width-small); }

.mod_article.fullwidth > .container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.mod_article.fullwidth-padding-both > .container {
	max-width: none;
	padding-left: calc(var(--gozi-article-side) + var(--gozi-article-gap));
	padding-right: calc(var(--gozi-article-side) + var(--gozi-article-gap));
}

/* „Box": der ganze Artikel samt Hintergrund begrenzt (EclipseX: Box-Breite − 80 px) */
.mod_article.boxed {
	max-width: calc(var(--gozi-box-width) - 80px);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.mod_article.fullwidth-padding-both > .container {
		padding-left: var(--gozi-article-gap);
		padding-right: var(--gozi-article-gap);
	}
}

/* ---- Artikel: Innenabstand oben/unten — auf dem .container, wie EclipseX ------------------------- */
.mod_article.article-pt-0 > .container { padding-top: 0; }
.mod_article.article-pt-xxs > .container { padding-top: calc(30px * var(--gozi-space-factor)); }
.mod_article.article-pt-xs > .container { padding-top: calc(50px * var(--gozi-space-factor)); }
.mod_article.article-pt-s > .container { padding-top: calc(90px * var(--gozi-space-factor)); }
.mod_article.article-pt-m > .container { padding-top: calc(100px * var(--gozi-space-factor)); }
.mod_article.article-pt-l > .container { padding-top: calc(120px * var(--gozi-space-factor)); }
.mod_article.article-pt-xl > .container { padding-top: calc(150px * var(--gozi-space-factor)); }
.mod_article.article-pt-xxl > .container { padding-top: calc(170px * var(--gozi-space-factor)); }

.mod_article.article-pb-0 > .container { padding-bottom: 0; }
.mod_article.article-pb-xxs > .container { padding-bottom: calc(30px * var(--gozi-space-factor)); }
.mod_article.article-pb-xs > .container { padding-bottom: calc(50px * var(--gozi-space-factor)); }
.mod_article.article-pb-s > .container { padding-bottom: calc(90px * var(--gozi-space-factor)); }
.mod_article.article-pb-m > .container { padding-bottom: calc(100px * var(--gozi-space-factor)); }
.mod_article.article-pb-l > .container { padding-bottom: calc(120px * var(--gozi-space-factor)); }
.mod_article.article-pb-xl > .container { padding-bottom: calc(150px * var(--gozi-space-factor)); }
.mod_article.article-pb-xxl > .container { padding-bottom: calc(170px * var(--gozi-space-factor)); }

/* mobil wie EclipseX: alle Stufen außer „Kein Abstand" einheitlich 50 px */
@media (max-width: 767px) {
	.mod_article:is(.article-pt-xxs, .article-pt-xs, .article-pt-s, .article-pt-m, .article-pt-l, .article-pt-xl, .article-pt-xxl) > .container { padding-top: calc(50px * var(--gozi-space-factor)); }
	.mod_article:is(.article-pb-xxs, .article-pb-xs, .article-pb-s, .article-pb-m, .article-pb-l, .article-pb-xl, .article-pb-xxl) > .container { padding-bottom: calc(50px * var(--gozi-space-factor)); }
}

/* =============================================================================
 * Gestaltungsklassen (Vorlage Kai, 13.11.2026) — unverändert übernommen.
 * Gruppen dazu: Linie oben/unten, Bildrahmen, Hintergrundfarbe, Textfarbe, Textausrichtung,
 * Breite, Sichtbarkeit, Etikett, Zeichenabstand, Textstil, Eckenradius, Textschatten.
 * span.highlight / span.serif / span.no-serif wirken nur an <span> im Text (keine Gruppe).
 * ========================================================================== */

/* =============================================================================
 * border classes
 * ========================================================================== */

.no-border {
    border: 0!important;
}

.bt-dark {
    border-top: 1px solid rgb(229,229,229);
}

.bb-dark {
    border-bottom: 1px solid rgb(229,229,229);
}

.bt-light {
    border-top: 1px solid rgb(255,255,255);
}

.bb-light {
    border-bottom: 1px solid rgb(255,255,255);
}

.bt-dark-dashed {
    border-top: 1px dashed rgb(229,229,229);
}

.bb-dark-dashed {
    border-bottom: 1px dashed rgb(229,229,229);
}

.bt-light-dashed {
    border-top: 1px dashed rgb(255,255,255);
}

.bb-light-dashed {
    border-bottom: 1px dashed rgb(255,255,255);
}

.bt-dark-dotted {
    border-top: 1px dotted rgb(229,229,229);
}

.bb-dark-dotted {
    border-bottom: 1px dotted rgb(229,229,229);
}

.bt-light-dotted {
    border-top: 1px dotted rgb(255,255,255);
}

.bb-light-dotted {
    border-bottom: 1px dotted rgb(255,255,255);
}

/* =============================================================================
 * image border classes
 * ========================================================================== */

.ce_image.border-1 img {
    border: 1px solid rgb(220,220,220);
}

.ce_image.border-5 img {
    border: 5px solid rgb(220,220,220);
}

.ce_image.border-10 img {
    border: 10px solid rgb(220,220,220);
}

/* =============================================================================
 * background color classes
 * ========================================================================== */

.bg-accent {
    background-color: rgb(152,152,152);
}

.bg-lightgray {
    background-color: rgb(247,247,247)!important;
}

.bg-darkgray {
    background-color: rgb(69,69,69)!important;
}

.bg-black {
    background-color: rgb(0,0,0)!important;
}

.bg-gray {
    background-color: rgb(248,248,248);
}

.bg-alert {
    background-color: rgb(206,79,75);
}

.bg-info {
    background-color: rgb(94,187,215);
}

.bg-warning {
    background-color: rgb(240,173,78);
}

.bg-success {
    background-color: rgb(82,172,82);
}

.bg-transparent-white {
    background-color: rgba(255,255,255,0.7);
}

.bg-transparent-black {
    background-color: rgba(0,0,0,0.7);
}

/* =============================================================================
 * text color classes | important
 * ========================================================================== */

.color-white,
.color-white p,
.color-white i,
.color-white h1,
.color-white h2,
.color-white h3,
.color-white h4,
.color-white h5,
.color-white h6,
.color-white a:not(.link-white) {
    color: #fff !important;
    border-color: rgba(255,255,255,0.3)!important;
}

.color-gray,
.color-gray p,
.color-gray i,
.color-gray h1,
.color-gray h2,
.color-gray h3,
.color-gray h4,
.color-gray h5,
.color-gray h6,
.color-gray a:not(.link-white) {
    color: rgb(127,127,127)!important;
}

.color-lightgray,
.color-lightgray p,
.color-lightgray i,
.color-lightgray h1,
.color-lightgray h2,
.color-lightgray h3,
.color-lightgray h4,
.color-lightgray h5,
.color-lightgray h6,
.color-lightgray a:not(.link-white) {
    color: rgb(180,180,180)!important;
}

.color-darkgray,
.color-darkgray p,
.color-darkgray i,
.color-darkgray h1,
.color-darkgray h2,
.color-darkgray h3,
.color-darkgray h4,
.color-darkgray h5,
.color-darkgray h6,
.color-darkgray a:not(.link-white) {
    color: rgb(76,76,76)!important;
}

.color-white-trnp-50,
.color-white-trnp-50 p,
.color-white-trnp-50 i,
.color-white-trnp-50 h1,
.color-white-trnp-50 h2,
.color-white-trnp-50 h3,
.color-white-trnp-50 h4,
.color-white-trnp-50 h5,
.color-white-trnp-50 h6,
.color-white-trnp-50 a:not(.link-white) {
    color: rgba(255,255,255,0.8)!important;
}

.color-accent,
.color-accent p,
.color-accent i,
.color-accent h1,
.color-accent h2,
.color-accent h3,
.color-accent h4,
.color-accent h5,
.color-accent h6,
.color-accent a:not(.link-white) {
    color: rgb(152,152,152);
}

.color-success,
.color-success p,
.color-success i,
.color-success h1,
.color-success h2,
.color-success h3,
.color-success h4,
.color-success h5,
.color-success h6,
.color-success a:not(.link-white) {
    color: rgb(157,213,93);
}

.color-alert,
.color-alert p,
.color-alert i,
.color-alert h1,
.color-alert h2,
.color-alert h3,
.color-alert h4,
.color-alert h5,
.color-alert h6,
.color-alert a:not(.link-white) {
    color: rgb(247,80,90);
}

.color-warning,
.color-warning p,
.color-warning i,
.color-warning h1,
.color-warning h2,
.color-warning h3,
.color-warning h4,
.color-warning h5,
.color-warning h6,
.color-warning a:not(.link-white) {
    color: rgb(240,138,36);
}

.color-info,
.color-info p,
.color-info i,
.color-info h1,
.color-info h2,
.color-info h3,
.color-info h4,
.color-info h5,
.color-info h6,
.color-info a:not(.link-white) {
    color: rgb(160,211,232);
}

/* =============================================================================
 * text color classes
 * ========================================================================== */

 .txt-color-gray,
 .txt-color-gray p,
 .txt-color-gray i,
 .txt-color-gray a,
 .txt-color-gray h1,
 .txt-color-gray h2,
 .txt-color-gray h3,
 .txt-color-gray h4,
 .txt-color-gray h5,
 .txt-color-gray h6,
 .txt-color-gray .h1,
 .txt-color-gray .h2,
 .txt-color-gray .h3,
 .txt-color-gray .h4,
 .txt-color-gray .h5,
 .txt-color-gray .h6,
 .txt-color-gray .h1 p,
 .txt-color-gray .h2 p,
 .txt-color-gray .h3 p,
 .txt-color-gray .h4 p,
 .txt-color-gray .h5 p,
 .txt-color-gray .h6 p,
 .txt-color-gray.h1,
 .txt-color-gray.h2,
 .txt-color-gray.h3,
 .txt-color-gray.h4,
 .txt-color-gray.h5,
 .txt-color-gray.h6,
 .txt-color-gray.h1 p,
 .txt-color-gray.h2 p,
 .txt-color-gray.h3 p,
 .txt-color-gray.h4 p,
 .txt-color-gray.h5 p,
 .txt-color-gray.h6 p {
    color: rgb(127,127,127);
}

.txt-color-white,
.txt-color-white p,
.txt-color-white i,
.txt-color-white a,
.txt-color-white h1,
.txt-color-white h2,
.txt-color-white h3,
.txt-color-white h4,
.txt-color-white h5,
.txt-color-white h6,
.txt-color-white .h1,
.txt-color-white .h2,
.txt-color-white .h3,
.txt-color-white .h4,
.txt-color-white .h5,
.txt-color-white .h6,
.txt-color-white .h1 p,
.txt-color-white .h2 p,
.txt-color-white .h3 p,
.txt-color-white .h4 p,
.txt-color-white .h5 p,
.txt-color-white .h6 p,
.txt-color-white.h1,
.txt-color-white.h2,
.txt-color-white.h3,
.txt-color-white.h4,
.txt-color-white.h5,
.txt-color-white.h6,
.txt-color-white.h1 p,
.txt-color-white.h2 p,
.txt-color-white.h3 p,
.txt-color-white.h4 p,
.txt-color-white.h5 p,
.txt-color-white.h6 p  {
    color: rgb(255,255,255);
}

/* =============================================================================
 * align helper classes
 * ========================================================================== */

.align-center, .align-center * {
    text-align: center !important;
}

.align-right, .align-right * {
    text-align: right !important;
}

.align-left, .align-left * {
    text-align: left !important;
}

.align-centered {
    margin-left: auto;
    margin-right: auto;
}

.align-centered.autogrid {
    float: none;
}

.h-align-left {
    text-align: left;
}

.h-align-center {
    text-align: center;
}

.h-align-right {
    text-align: right;
}

/* =============================================================================
 * device visibility classes
 * ========================================================================== */

.hidden {
    display: none;
}

.only_mobile,
.only-mobile {
    display: none!important;
}

@media only screen and (min-width : 768px) {
    .hide_desktop,
    .hide-desktop {
        display: none!important;
    }
}

/* =============================================================================
 * labels
 * ========================================================================== */

[class*='label-'] {
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    padding: 0px 10px;
    display: inline-block;
}

.label-accent {
    background: rgb(152,152,152);
}

.label-secondary {
    background: rgb(231,231,231);
    color: rgb(51,51,51);
}

.label-success {
    background: rgb(157,213,93);
}

.label-alert {
    background: rgb(247,80,90);
}

.label-warning {
    background: rgb(240,138,36);
}

.label-info {
    background: rgb(160,211,232);
    color: rgb(51,51,51);
}

/* =============================================================================
 * letter spacing
 * ========================================================================== */

.letter-spacing-xxl {
    letter-spacing: 10px;
}

.letter-spacing-xl {
    letter-spacing: 5px;
}

.letter-spacing-l {
    letter-spacing: 3px;
}

.letter-spacing-m {
    letter-spacing: 2px;
}

.letter-spacing-s {
    letter-spacing: 1px;
}

/* =============================================================================
 * utility classes text
 * ========================================================================== */

.line-through {
    text-decoration: line-through;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.medium-width {
    max-width: 600px;
}

.medium-small {
    max-width: 400px;
}

.medium-width-center {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.small-width-center {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

span.highlight {
    background: rgb(51,51,51);
    color: #fff;
    padding-left: 3px;
    padding-right: 3px;
}

span.serif {
    font-family: Georgia, Times, serif;
}

span.no-serif {
    font-family: Arial, Verdana, sans-serif;
}

.no-underline,
.no-underline a {
    text-decoration: none;
}

/* =============================================================================
 * border-radius
 * ========================================================================== */

.border-radius-3 {
    border-radius: 3px;
}

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-50 {
    border-radius: 50px;
}

.border-radius-100 {
    border-radius: 100%;
}

/* =============================================================================
 * text-shadow
 * ========================================================================== */

.text-shadow-10 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.1);
}

.text-shadow-20 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
}

.text-shadow-30 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.3);
}

.text-shadow-40 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.4);
}

.text-shadow-50 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.5);
}

.text-shadow-60 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.6);
}

.text-shadow-70 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.7);
}

.text-shadow-80 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.8);
}

.text-shadow-90 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 0.9);
}

.text-shadow-100 {
    text-shadow: 1px 1px 2px rgba(0,0,0, 1);
}

/* =============================================================================
 * Schriftgröße wie Überschrift (.h1 … .h6) — Werte wie EclipseX, anpassbar über die Variablen:
 *   :root { --gozi-h1-size: 2.75rem; }
 * ========================================================================== */

:root {
	--gozi-h1-size: 3rem;
	--gozi-h2-size: 2.333rem;
	--gozi-h3-size: 1.867rem;
	--gozi-h4-size: 1.5rem;
	--gozi-h5-size: 1.333rem;
	--gozi-h6-size: 1.2rem;
}

@media (max-width: 767px) {
	:root {
		--gozi-h1-size: 1.733rem;
		--gozi-h2-size: 1.6rem;
		--gozi-h3-size: 1.467rem;
		--gozi-h4-size: 1.2rem;
		--gozi-h5-size: 1.067rem;
		--gozi-h6-size: 1.067rem;
	}
}

.h1, .h1 p { font-size: var(--gozi-h1-size); }
.h2, .h2 p { font-size: var(--gozi-h2-size); }
.h3, .h3 p { font-size: var(--gozi-h3-size); }
.h4, .h4 p { font-size: var(--gozi-h4-size); }
.h5, .h5 p { font-size: var(--gozi-h5-size); }
.h6, .h6 p { font-size: var(--gozi-h6-size); }