/* =========================================================================
   Convenio – main.css
   Reihenfolge: Utilities → Allgemeine Frames → Galerie → Bodytext →
                Frame-Header (allgemein) → Responsive allgemein →
                Desktop-Menü → Bootstrap-Grid → Buttons →
                Job-Hintergrund → Job-Grid →
                Benefits (überschreibt frame-header h3!) →
                Intro → Zweispaltige Liste → Responsive Jobs
   ========================================================================= */


/* =========================================================
   1. FRAME SPACE – Abstände vor/nach Content-Elementen
   ========================================================= */

.frame-space-before-extra-small  { margin-top:    0.5rem !important; }
.frame-space-before-small        { margin-top:    1rem   !important; }
.frame-space-before-medium       { margin-top:    2rem   !important; }
.frame-space-before-large        { margin-top:    3rem   !important; }
.frame-space-before-extra-large  { margin-top:    5rem   !important; }

.frame-space-after-extra-small   { margin-bottom: 0.5rem !important; }
.frame-space-after-small         { margin-bottom: 1rem   !important; }
.frame-space-after-medium        { margin-bottom: 2rem   !important; }
.frame-space-after-large         { margin-bottom: 3rem   !important; }
.frame-space-after-extra-large   { margin-bottom: 5rem   !important; }


/* =========================================================
   2. UTILITIES
   ========================================================= */

.text-center,
.ce-headline-center {
    text-align: center;
}


/* =========================================================
   3. ALLGEMEINE FRAME-REGELN
   ========================================================= */

/* Content-Element-Rahmen zentrieren */
.content .frame {
    clear: both;
    margin: 0 auto;
}

/* ce_container: Full-Bleed (bricht aus max-width:1077px heraus) */
.content .frame.frame-type-ce_container {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    clear: both;
}

/* Innere section-default wieder auf ursprüngliche max-width begrenzen */
.content .frame.frame-type-ce_container .section-default {
    max-width: 1077px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* =========================================================
   4. BILDERGALERIE
   ========================================================= */

.content .ce-gallery .ce-outer,
.content .ce-gallery .ce-inner {
    width: 100%;
}

.content .ce-gallery .ce-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 22px 0;
    clear: both;
    float: none;
    width: auto;
    max-width: none;
}

/* Standardmäßig 3 Spalten */
.content .ce-gallery .ce-column {
    width: auto;
    float: none;
    margin: 0 !important;
    box-sizing: border-box;
    flex: 0 0 calc((100% - 44px) / 3);
    max-width: calc((100% - 44px) / 3);
}

/* Spaltenzahl aus dem Inhaltselement */
.content .ce-gallery[data-ce-columns="1"] .ce-column {
    flex-basis: 100%;
    max-width: 100%;
}
.content .ce-gallery[data-ce-columns="2"] .ce-column {
    flex-basis: calc((100% - 22px) / 2);
    max-width: calc((100% - 22px) / 2);
}
.content .ce-gallery[data-ce-columns="3"] .ce-column {
    flex-basis: calc((100% - 44px) / 3);
    max-width: calc((100% - 44px) / 3);
}
.content .ce-gallery[data-ce-columns="4"] .ce-column {
    flex-basis: calc((100% - 66px) / 4);
    max-width: calc((100% - 66px) / 4);
}

.content .ce-gallery figure.image {
    margin: 0;
}

.content .ce-gallery figure.image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* =========================================================
   5. TEXTBLOCK (ce-bodytext)
   ========================================================= */

.content .ce-bodytext {
    max-width: 700px;
    margin: 0 auto;
    line-height: 24px;
    text-align: left;
}

/* Goldene Bullet-Punkte */
.content .ce-bodytext ul {
    list-style: none;
    margin-left: 15px;
    margin-bottom: 15px;
    
    font-size: 18px;
}
.content .ce-bodytext ul li::before {
    content: "\2022";
    color: #cfa533 !important;
    font-weight: bold;
    display: inline-block;
    width: .7em;
    margin-left: -.7em;
}


/* =========================================================
   6. FRAME-HEADER – allgemein (gold, uppercase, 26px)
      ACHTUNG: Benefits-Sektion weiter unten überschreibt h3!
   ========================================================= */

.content .frame header {
    max-width: 700px;
    margin: 0 auto;
}

.content .frame header h1,
.content .frame header h2,
.content .frame header h3 {
    
    font-size: 26px;
    text-transform: uppercase;
    color: #cfa533;
    font-style: normal;
    margin-bottom: 35px;
    font-weight: 600;
}

.content .frame header .caps,
.content .frame header .caps_str {
    font-size: inherit !important;
    font-style: normal !important;
    color: #cfa533 !important;
}


/* =========================================================
   7. RESPONSIVE – allgemein (Breakpoints analog mobile.css)
   ========================================================= */

@media (max-width: 650px) {
    .content .ce-gallery .ce-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .content .ce-gallery .ce-column,
    .content .ce-gallery[data-ce-columns="1"] .ce-column,
    .content .ce-gallery[data-ce-columns="2"] .ce-column,
    .content .ce-gallery[data-ce-columns="3"] .ce-column,
    .content .ce-gallery[data-ce-columns="4"] .ce-column {
        flex-basis: 80%;
        max-width: 80%;
    }
    .content .ce-bodytext {
        width: 90%;
        max-width: 90%;
    }
    .content .frame header {
        width: 90%;
    }
}


/* =========================================================
   8. DESKTOP-MENÜ – Untermenü einklappen
   ========================================================= */

@media (min-width: 951px) {
    .topnav ul li .lvl2 {
        display: none;
    }
    .topnav ul li:hover .lvl2 {
        display: block !important;
    }
}


/* =========================================================
   9. BOOTSTRAP-GRID – Minimalimplementierung
   ========================================================= */

.content .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -12px;
    margin-right: -12px;
}

.content .row > .col,
.content .row > .ce-col {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    flex: 1 0 0%;
    min-width: 0;
}

.content .row.row-cols-1 > .col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .content .row.row-cols-md-2 > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* row-cols-lg-3: wie alte Seite zweispaltig (col-lg-6) */
@media (min-width: 992px) {
    .content .row.row-cols-lg-3 > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.content .row > .col-md {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
    flex: 0 0 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
    .content .row > .col-md {
        flex: 1 0 0%;
        max-width: 100%;
    }
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.content .btn {
    display: inline-block;
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    margin: 1rem 0;
    padding: 0 2rem;
    font-size: 16px;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
    vertical-align: middle;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

.content .btn.btn-primary {
    background: #cfa533;
    border-radius: 24px;
    color: #fff !important;
    font-weight: 300;
    padding-left: 2rem;
    padding-right: 72px;
    position: relative;
    text-transform: uppercase;
}

.content .btn.btn-primary::after {
    content: "❯";
    background: #577b9c;
    border-radius: 24px;
    display: block;
    font-size: 1rem;
    font-style: normal;
    line-height: 48px;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    color: #fff;
}

.content .btn.btn-primary:hover,
.content .btn.btn-primary:focus {
    background: #b8911f;
    color: #fff !important;
}

.content .btn.btn-secondary {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #cfa533 !important;

    font-weight: 300;
    text-transform: none;
    padding: 0 2rem;
}

.content .btn.btn-secondary:hover,
.content .btn.btn-secondary:focus {
    color: #1d1d1d !important;
    text-decoration: underline !important;
}


/* =========================================================
   11. JOB-HINTERGRUND
   ========================================================= */

.frame-layout-101 {
    padding: 20px 0 100px 0;
}

.content .frame.frame-type-ce_grid {
    background: #f5f5f5;
    padding: 30px 0;
    max-width: none;
    width: 100%;
}


/* =========================================================
   12. JOB-GRID (.job-wrapper)
   ========================================================= */

.content .job-wrapper {
    margin: 0;
    padding: 0 12px;
}

.content .job-wrapper > .col {
    display: flex;
    margin-bottom: 30px;
}

/* Karte */
.content .job-wrapper > .col > .frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow:
        rgba(0, 0, 0, 0.07) 0px  1px  2px 0px,
        rgba(0, 0, 0, 0.07) 0px  2px  4px 0px,
        rgba(0, 0, 0, 0.07) 0px  4px  8px 0px,
        rgba(0, 0, 0, 0.07) 0px  8px 16px 0px,
        rgba(0, 0, 0, 0.07) 0px 16px 32px 0px,
        rgba(0, 0, 0, 0.07) 0px 32px 64px 0px;
    padding: 0;
    margin: 0;
    max-width: none;
    clear: none;
}

/* Karten-Header */
.content .job-wrapper > .col > .frame header {
    border-bottom: 4px solid #cfa533;
    padding: 8px 16px;
    margin: 0;
    max-width: none;
}

.content .job-wrapper > .col > .frame header h1,
.content .job-wrapper > .col > .frame header h2,
.content .job-wrapper > .col > .frame header h3 {
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    color: #cfa533;
    text-transform: none;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

/* Karten-Zwischentitel */
.content .job-wrapper > .col > .frame > h3 {
    font-size: 20px;

    font-style: normal;
    font-weight: normal;
    color: #1d1d1d;
    text-transform: none;
    letter-spacing: normal;
    margin: 16px 16px 8px;
    padding: 0;
}

/* Karten-Text */
.content .job-wrapper > .col > .frame > p {
    font-size: 18px;
    font-style: normal;
    line-height: 1.5;
    color: #1d1d1d;
    padding: 0 16px;
    margin: 0 0 16px;
    flex: 1 1 auto;
}

/* Karten-Footer (p mit .btn) */
.content .job-wrapper > .col > .frame > p:has(> .btn) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 16px 12px;
    margin: 0;
    flex: 0 0 auto;
}
.content .job-wrapper > .col > .frame > p:last-child {
    margin-top: auto;
    padding: 4px 16px 12px;
}

@media (max-width: 650px) {
    .content .job-wrapper > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}





/* =========================================================
   14. INTRO-STYLES (.introduction)
   ========================================================= */

.introduction h1.job {
    font-size: 32px;
    font-weight: 600;
    color: #cfa533;
    margin-bottom: 0;
    line-height: 1.25;
}
.introduction h1.job span { white-space: nowrap; }

.introduction h2.job {
    font-size: 1.2rem;
    font-weight: 400;
    color: #cfa533;
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.introduction h1:not(.job) {
    font-size: 32px;
    font-weight: 600;
    color: #cfa533;
}

.introduction p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #1d1d1d;
    max-width: 800px;
    margin: 1rem auto;
}


/* =========================================================
   15. ZWEISPALTIGE INTRO-LISTE (ce-col / col-md)
   Muss VOR benefits stehen – niedrigere Spezifität,
   wird von .row.benefits ul li::before überschrieben.
   ========================================================= */

.content .row > .ce-col ul {
    list-style: none;
    margin-left: 15px;
    margin-bottom: 15px;
    
    font-size: 17px;
    line-height: 1.6em;
}

.content .row > .ce-col ul li {
	padding: 0px 0px 10px 0px;

}


.content .row > .ce-col ul li::before {
    content: "\2022";
    color: #cfa533 !important;
    font-weight: bold;
    display: inline-block;
    width: .7em;
    margin-left: -.7em;
}

@media (max-width: 767px) {
    .content .row > .ce-col + .ce-col {
        margin-top: 20px;
    }
}

/* =========================================================
   13. BENEFITS-SEKTION (.row.benefits)
   Überschreibt bewusst den allgemeinen frame-header h3 (Abschnitt 6):
   h3 hier grau (#4a4a4a), nicht uppercase, 1.2rem statt 26px.
   Funktioniert wegen höherer Spezifität (mehr Klassen im Selektor).
   ========================================================= */

.content .row.benefits {
    justify-content: center;
}

.content .row.benefits .ce-col {
    padding: 0 24px;
}

.content .row.benefits .frame-type-text {
    margin-bottom: 2rem;
}

/* h3 in benefits: überschreibt .content .frame header h3 */
.content .row.benefits .frame-type-text header {
    max-width: none;
    margin: 0;
}

.content .row.benefits .frame-type-text header h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    font-style: normal;
    color: #4a4a4a;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 1rem;
    line-height: 1.35;
}

/* Listen-Reset */
.content .row.benefits ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 10px;
    font-style: normal;
    font-size: 16px;
}

/* Goldenes Häkchen – überschreibt .content .row > .ce-col ul li::before */
.content .row.benefits ul li {
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0px;
    color: #1d1d1d;
}

.content .row.benefits ul li strong {
    font-weight: bold;
}

.content .row.benefits ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    color: #cfa533;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.content .row.benefits ul li p {
    margin: 0;
}

@media (max-width: 767px) {
    .content .row.benefits .ce-col {
        padding: 0 12px;
        margin-bottom: 1.5rem;
    }
}

/* ===== ROUNDED-CIRCLE: Portraits ===== */
.section.rounded-circle .ce-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section.rounded-circle .ce-column figure.image {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section.rounded-circle .ce-column .image-embed-item {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center top;   /* Gesichter oben zentrieren */
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

/* ===== SLIDER ===== */
/* ================================================
   SLIDER – 16:9 Panorama Fix
   Ergänzung für main.css
   ================================================ */

/* Slider-Container: 16:9 Seitenverhältnis */
.ce-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Swiper braucht definierte Höhe */
.ce-slider.swiper {
    height: 100%;
}

/* ce-column auf volle Breite zwingen (überschreibt unbekannte 80%-Regel) */
.ce-slider .ce-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Alle TYPO3-Wrapper-Ebenen auf volle Höhe */
.ce-slider .frame,
.ce-slider .ce-image,
.ce-slider .ce-gallery,
.ce-slider .ce-outer,
.ce-slider .ce-inner,
.ce-slider .ce-row {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Figure ohne Extra-Abstand */
.ce-slider figure.image {
    margin: 0 !important;
    height: 100% !important;
}

/* Bild füllt den Slide vollständig aus */
.ce-slider .image-embed-item {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: unset !important;
    display: block !important;
}

/* ================================================
   POWERMAIL – Kontaktformular CSS
   Convenio Gelsenkirchen | LIXX-CONSULT
   ================================================ */

/* ================================================
   POWERMAIL – Kontaktformular CSS
   Convenio Gelsenkirchen | LIXX-CONSULT
   ================================================ */

/* Wrapper */
.tx-powermail {
    font-family: 'Open Sans', sans-serif;
    color: #1d1d1d;
}

/* Formular-Abstand */
.tx-powermail .powermail_form {
    padding: 0;
}

/* Fieldset ohne Standard-Rahmen */
.tx-powermail fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.tx-powermail h3,
.tx-powermail legend {
    display: none;
}

/* ================================================
   POWERMAIL – Kontaktformular CSS
   Convenio Gelsenkirchen | LIXX-CONSULT
   ================================================ */

/* Wrapper */
.tx-powermail {
    font-family: 'Open Sans', sans-serif;
    color: #1d1d1d;
}

/* Formular-Abstand */
.tx-powermail .powermail_form {
    padding: 0;
}

/* Fieldset ohne Standard-Rahmen */
.tx-powermail fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ── Labels ─────────────────────────────────────── */
.tx-powermail .powermail_label,
.tx-powermail .form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1d1d1d;
    margin-bottom: 4px;
}

/* Pflichtfeld-Stern */
.tx-powermail .mandatory {
    color: #cfa533;
    font-weight: 700;
    margin-left: 2px;
}

/* ── Eingabefelder ───────────────────────────────── */
.tx-powermail .form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: 'Open Sans', sans-serif;
    color: #1d1d1d;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.tx-powermail .form-control:focus {
    outline: none;
    border-color: #cfa533;
    box-shadow: 0 0 0 3px rgba(207, 165, 51, 0.18);
}

.tx-powermail .form-control::placeholder {
    color: #aaa;
    font-size: 0.9rem;
}

/* Textarea – explizit volle Breite */
.tx-powermail textarea.form-control {
    width: 100% !important;
    min-height: 140px;
    resize: vertical;
}

/* Select */
.tx-powermail select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cfa533' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Checkbox / Radio ────────────────────────────── */
.tx-powermail .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 0;
}

.tx-powermail .form-check-input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.tx-powermail .form-check-input[type="radio"] {
    border-radius: 50%;
}

.tx-powermail .form-check-input:checked {
    background-color: #cfa533;
    border-color: #cfa533;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,9 11,1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.tx-powermail .form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='white'/%3E%3C/svg%3E");
}

.tx-powermail .form-check-label {
    font-size: 0.9rem;
    color: #1d1d1d;
    line-height: 1.5;
    cursor: pointer;
}

/* ── CAPTCHA ─────────────────────────────────────── */
.tx-powermail .powermail_captchaimage {
    display: block;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.tx-powermail .powermail_captcha .form-control {
    max-width: 200px;
}

/* ── Fehlermeldungen ─────────────────────────────── */
.tx-powermail .powermail_field_error .form-control,
.tx-powermail .has-error .form-control {
    border-color: #c0392b;
}

.tx-powermail .powermail_field_error_container,
.tx-powermail .help-block {
    font-size: 0.82rem;
    color: #c0392b;
    margin-top: 4px;
}

/* ── Feldwrapper: volle Breite (Powermail hat keine Bootstrap-col-Klassen) */
.tx-powermail .powermail_fieldwrap {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* form-control füllt den Wrapper */
.tx-powermail .form-control {
    box-sizing: border-box;
}

/* ── Absenden-Button ─────────────────────────────── */
.tx-powermail .btn-primary,
.tx-powermail input[type="submit"].btn-primary,
.tx-powermail button[type="submit"] {
    display: inline-block !important;
    padding: 12px 32px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #fff !important;
    background-color: #cfa533 !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.tx-powermail .btn-primary:hover,
.tx-powermail input[type="submit"].btn-primary:hover,
.tx-powermail button[type="submit"]:hover {
    background-color: #b8911f !important;
    color: #fff !important;
}

.tx-powermail .btn-primary:active,
.tx-powermail input[type="submit"].btn-primary:active,
.tx-powermail button[type="submit"]:active {
    transform: scale(0.98);
}

/* ── Erfolgsmeldung ──────────────────────────────── */
.tx-powermail .powermail_confirmation,
.tx-powermail .powermail_thx {
    padding: 20px 24px;
    background-color: #f5f0e0;
    border-left: 4px solid #cfa533;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #1d1d1d;
}

/* ── Responsive: Spalten-Abstand ─────────────────── */
@media (max-width: 767.98px) {
    .tx-powermail .row > [class*="col-"] {
        margin-bottom: 0;
    }
    .tx-powermail .powermail_fieldwrap {
        margin-bottom: 16px;
    }
}


/* ================================================
   MOBILE – Content-Padding ab max. 600px
   Ergänzung für main.css
   ================================================ */

@media (max-width: 600px) {

    /* Seitenabstand für alle Inhalte */
    .content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* Vollbreite-Sections (ce_container) brechen weiterhin korrekt aus –
       calc(50% - 50vw) kompensiert das padding automatisch */

    /* Überschriften etwas kleiner für schmale Screens */
    .content h1 {
        font-size: 22px !important;
    }

    .content h2 {
        font-size: 20px !important;
    }

    /* Text lesbarer: kein italic auf p (subpage.css setzt font-style: italic) */
    .content p {
        font-size: 16px !important;
        font-style: normal !important;
        line-height: 1.6 !important;
    }

    /* ce-bodytext: bestehende margin nicht verdoppeln */
    .content .ce-bodytext {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bilder: nie über den Rand */
    .content img {
        max-width: 100%;
        height: auto;
    }

    /* Galerie-Spalten: auf mobil untereinander */
    .content .ce-gallery .ce-column,
    .content .ce-gallery[data-ce-columns="2"] .ce-column,
    .content .ce-gallery[data-ce-columns="3"] .ce-column,
    .content .ce-gallery[data-ce-columns="4"] .ce-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    /* ── Jobs / Unterseiten: zweispaltige Bereiche stapeln ─────────
       .ce-col.col-md-6 hat flex: 1 0 0% → beide Spalten nebeneinander.
       Bootstrap-Breakpoint greift hier nicht automatisch.          */
    .content .row .ce-col.col-md-6,
    .content .row .ce-col[class*="col-md"],
    .content .row.benefits .ce-col,
    .content .introduction,
    #c64 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        width: 90% !important;
    }

    /* Überschriften in den gestapelten Spalten wieder linksbündig */
    .content .row.benefits h2,
    .content .row.benefits h3 {
        text-align: left !important;
    }

    /* Bootstrap .row: negative Margins (−12px) die über den Viewport ragen */
    .content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Spalten-Innenabstand beibehalten */
    .content .row > [class*="col-"],
    .content .row > .ce-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

.mobile-infobar {
  --infobar-bg: #577b9c;              /* Hintergrund */
  --infobar-accent: #cfa533;          /* Convenio-Gold: Linie oben, Hover */
  --infobar-icon: #ffffff;            /* Icons */
  --infobar-text: #ffffff;            /* Beschriftung */
  --infobar-hover-text: #1d1d1d;      /* Icons/Text beim Antippen */
  --infobar-divider: rgba(255,255,255,.35);
  --infobar-offset-left: 40px;        /* Platz für das Cookie-Icon links */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: none;
  background: var(--infobar-bg);
  box-shadow: 0 -6px 20px rgba(0,0,0,.28);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}
.mobile-infobar__row { display: flex; align-items: stretch; padding-left: var(--infobar-offset-left); }
.mobile-infobar__item {
  flex: 1 1 0; position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 9px 3px 8px;
  color: var(--infobar-text); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, color .18s;
}
.mobile-infobar__item + .mobile-infobar__item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: var(--infobar-divider);
}
.mobile-infobar__item svg {
  display: block; width: 23px; height: 23px;
  fill: none; stroke: var(--infobar-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s;
}
.mobile-infobar__item span {
  font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--infobar-text); transition: color .18s;
}
.mobile-infobar__item:hover, .mobile-infobar__item:focus-visible, .mobile-infobar__item:active {
  background: var(--infobar-accent); outline: none;
}
.mobile-infobar__item:hover svg, .mobile-infobar__item:focus-visible svg, .mobile-infobar__item:active svg { stroke: var(--infobar-hover-text); }
.mobile-infobar__item:hover span, .mobile-infobar__item:focus-visible span, .mobile-infobar__item:active span { color: var(--infobar-hover-text); }

@media (max-width: 600px) {
  .mobile-infobar { display: block; }
  /* Platz unten, damit der Footer nicht verdeckt wird (Höhe der Leiste) */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .mobile-infobar { display: none !important; } }