/* =============================================================
   Roeder Bauunternehmung – Joomla 6 Template Stylesheet
   Übernommen aus dem alten Joomla-3-Template (template.css)
   und so reduziert/angepasst, dass es ohne Foundation/Quix
   funktioniert. Module + Beiträge nutzen diese Klassen.
   ============================================================= */

/* ---------- Basis-Reset / Typografie ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    margin: 0;
    font-family: 'Assistant', Arial, Helvetica, sans-serif;
    color: #474747;
    font-size: 22px;
    line-height: 1.45;
    background: #ffffff;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #00508f; text-decoration: none; }
a:hover { text-decoration: underline; }

b, strong { color: rgba(216, 31, 36, 1); }

h1 {
    font-family: 'Assistant', Arial, Helvetica, sans-serif;
    font-size: 48px;
    font-weight: 800;
    text-transform: none;
    color: #D81E23;
    padding-bottom: 10px;
    margin: 0 0 .5rem;
    line-height: 1.15;
}

h2 {
    font-size: 30px;
    font-weight: 200;
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.15;
    margin: 0;
}

h3 {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin: 0 0 .5rem;
    line-height: 1.25;
}

h4 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 1rem 0 .5rem;
    line-height: 1.3;
}

h5 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

p { margin: 0 0 1rem; }

/* ---------- Container / Grid ---------- */
.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.container--wide { max-width: 100%; padding: 0; }

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

.row > [class*="col-"] { padding: 0 15px; }

.col-12 { width: 100%; }
.col-md-6 { width: 100%; }
.col-md-4 { width: 100%; }
.col-md-3 { width: 100%; }

@media (min-width: 768px) {
    .col-md-6 { width: 50%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-3 { width: 25%; }
}

/* ---------- Adresszeile (Topbar) ---------- */
.adresse {
    background: #ffffff;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    color: #232323;
}

.adresszeile {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    min-height: 44px;
}

.adresszeile .adresse-rechts {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.adresszeile .adresse-zelle {
    display: flex;
    align-items: center;
    padding: 10px 28px;
    border-left: 1px solid #e0e0e0;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

.adresszeile .adresse-zelle:last-child {
    border-right: 1px solid #e0e0e0;
}

.adresszeile .adresse-karriere a {
    color: #6f6f6f;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.adresszeile .adresse-karriere a:hover { color: #D81E23; }

.adresszeile .adresse-mail { color: #232323; }
.adresszeile .adresse-mail a {
    color: #232323;
    text-decoration: none;
    margin-left: 4px;
}
.adresszeile .adresse-mail a:hover { color: #D81E23; }

.adresszeile .adresse-telefon { font-weight: 700; color: #D81E23; }
.adresszeile .adresse-telefon a { color: #D81E23; text-decoration: none; }
.adresszeile .adresse-telefon a:hover { color: #b02633; }
.adresszeile .adresse-telefon b { color: #D81E23; }

/* ---------- Kopf (Logo + Navigation) ---------- */
.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 15px 0;
    gap: 20px;
}

.logo_header {
    padding: 0;
    flex: 0 0 auto;
}

.logo_header a { display: inline-block; }

.logo_header img {
    width: 100%;
    max-width: 403px;
    height: auto;
}

/* Navigation-Container (Joomla erzeugt das <ul> selbst –
   wir stylen nur die Hülle und die Items) */
.navi-wrap {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}

/* Joomla-Mainmenu (mod_menu Ausgabe als <ul class="mod-menu nav">)
   – wir kompatibel zu .nav, .menu und Klassen .dj-megamenu */
.mod-menu,
.nav-main {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mod-menu li,
.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.mod-menu > li > a,
.nav-main > li > a {
    display: block;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    font-family: 'Assistant', Arial, Helvetica, sans-serif;
    transition: color .2s ease;
}

.mod-menu > li > a:hover,
.mod-menu > li.current > a,
.mod-menu > li.active > a,
.nav-main > li > a:hover,
.nav-main > li.current > a,
.nav-main > li.active > a {
    color: #D81E23;
    text-decoration: none;
}

/* Untermenu (sofern in Joomla 6 angelegt) */
.mod-menu li ul,
.nav-main li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #303030;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    box-shadow: 0 0 8px rgba(0,0,0,.15);
    z-index: 500;
}

.mod-menu li:hover > ul,
.nav-main li:hover > ul { display: block; }

.mod-menu li ul li a,
.nav-main li ul li a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    text-transform: none;
    color: #ffffff;
    height: auto;
    line-height: 1.3;
    font-weight: 400;
}

.mod-menu li ul li a:hover,
.nav-main li ul li a:hover {
    background: #1681d1;
    color: #ffffff;
}

/* Items, die im alten Template per CSS ausgeblendet wurden,
   bleiben auch hier ausgeblendet (Karriere/Impressum/
   Datenschutz im Hauptmenü). */
.mod-menu > li.hide-desktop,
.nav-main > li.hide-desktop { display: none; }

/* Burger Button – Joomla 6 nutzt eine eigene Bezeichnung;
   wir liefern eine schlanke, neutrale Variante. */
/* Close-Button im Mobile-Slide-in-Panel – auf Desktop komplett ausblenden.
   Wird per JS injiziert und ist standardmäßig im DOM vorhanden. */
.menu-close { display: none; }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #e4e4e4;
    color: #434343;
    border: 0;
    border-radius: 3px;
    padding: 8px 12px;
    cursor: pointer;
    height: 42px;
    width: 46px;
    line-height: 1;
}
.menu-toggle:hover { background: #434343; color: #e4e4e4; }
.menu-toggle .bar {
    display: block;
    width: 22px;
    height: 3px;
    background: currentColor;
    border-radius: 1px;
    margin: 0;
    font-size: 0;          /* &nbsp;-Inhalt rendert keinen Text */
    line-height: 0;
}

/* ---------- Akzentbalken zwischen Header und Hero ---------- */
.balken { display: none; }
.navifullwidthcolor {
    background: linear-gradient(to bottom, #0086bd 0%, #00508f 100%);
    border-bottom: 5px solid #0086BD;
}

/* ---------- Headerbild (Hero/Slider) ---------- */
.headerbild_,
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f4f4f4;
    min-height: 520px;
}

.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 720px;
    object-fit: cover;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}

.hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 520px;
    text-align: center;
    color: #ffffff;
}

.hero__content h2 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 200;
    line-height: 1.1;
    max-width: 900px;
    padding: 0 0 15px;
}

.hero__content p {
    color: #ffffff;
    font-size: 20px;
    max-width: 900px;
    margin: 0;
}

/* Einheitliche Hero-Höhe – Inhalt darf bei längerem Text wachsen,
   nichts wird beschnitten. */
.hero,
.headerbild_,
.hero--page,
.hero--page .hero__content { min-height: 520px; }
.hero--page .hero__media img { max-height: none; }

/* ---------- Inhaltsbereich ---------- */
.inhaltsbereich {
    background: #ffffff;
}

/* Standard-Joomla-Beitragstitel und „Page Heading" ausblenden,
   damit nur unsere eigenen H1 im Beitrag erscheinen. */
.inhaltsbereich .page-header,
.inhaltsbereich .com-content-article__heading,
.inhaltsbereich .com-content-category-blog__title-heading,
.inhaltsbereich .item-page > h1:first-child,
.inhaltsbereich .item-page > h2:first-child {
    display: none !important;
}

.inhalt {
    padding: 50px 0;
}

.section {
    padding: 50px 0;
}

.section--tight { padding: 30px 0; }

.section--alt {
    background: linear-gradient(to right, #deecf1 0%, #ffffff 100%);
}

.section--centered { text-align: center; }

.section--cta {
    text-align: center;
    padding: 60px 0;
}

/* ---------- Drei Säulen-Blurb (Erfahrung / Zufriedenheit / Termingerecht) ---------- */
.blurb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: stretch;
}

.blurb {
    flex: 1 1 280px;
    text-align: center;
    padding: 20px 10px;
}

.blurb__media { margin: 0 auto 20px; }
.blurb__media img {
    margin: 0 auto;
    max-width: 220px;
    height: auto;
}

.blurb__title h3 {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}

.blurb__body { color: #474747; font-size: 18px; line-height: 1.5; }

/* ---------- Bilder-Galerie ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }

.gallery a { display: block; overflow: hidden; }
.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.gallery a:hover img { transform: scale(1.05); }

/* ---------- Auszeichnungs-Block (Logos nebeneinander) ---------- */
.auszeichnungen {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.auszeichnungen a { display: inline-block; }
.auszeichnungen img {
    max-height: 120px;
    width: auto;
    object-fit: contain;
}

/* ---------- Zertifizierungs-Zeile (Bild + Text nebeneinander) ---------- */
.cert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}
.cert-row__media { flex: 0 0 auto; max-width: 280px; }
.cert-row__media img { max-width: 100%; height: auto; }
.cert-row__body { flex: 1 1 320px; }
.cert-row__body p { font-size: 18px; }

/* ---------- Vorteile-Liste (Umwelt) ---------- */
.vorteile { list-style: none; padding: 0; margin: 0; }
.vorteile li {
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 22px;
    font-weight: 400;
}
.vorteile li::before {
    content: "›";
    position: absolute;
    left: 6px;
    top: 4px;
    color: #D81E23;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- Akkordeon (Leistungen / Karriere) ---------- */
.acc-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    align-items: start; /* Karten dehnen sich nicht mehr auf Zeilenhöhe */
}
@media (min-width: 768px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .acc-grid { grid-template-columns: repeat(3, 1fr); } }

.acc-card {
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
}

.acc-card__media { display: block; overflow: hidden; }
.acc-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Bild-Slider innerhalb einer Karte (mehrere Bilder rotieren automatisch) */
.acc-card__slider {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #1a1a1a;
}
.acc-card__slider .acc-card__media {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
    z-index: 1;
}
.acc-card__slider .acc-card__media.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.acc-card__slider .acc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-item { border-top: 1px solid #ececec; }
.acc-item__header {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 15px 40px 15px 15px;
    font-size: 18px;
    font-weight: 800;
    color: #000;
    cursor: pointer;
    position: relative;
    font-family: inherit;
}

.acc-item__header::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #D81E23;
    line-height: 1;
}

.acc-item.is-open .acc-item__header::after { content: "−"; }

.acc-item__body {
    display: none;
    padding: 0 15px 15px;
    font-size: 18px;
    color: #474747;
    text-align: left;       /* immer linksbündig – auch in zentrierten Sektionen */
}

.acc-item.is-open .acc-item__body { display: block; }

.acc-item__body p { margin: 0 0 .75rem; text-align: left; }

.acc-item__body ul { padding-left: 22px; margin: 0 0 .75rem; text-align: left; }
.acc-item__body ul li { margin-bottom: 4px; }

/* Akkordeon-Header ebenfalls linksbündig – sieht sauberer aus,
   gerade in zentrierten Sektionen wie Karriere */
.acc-item__header { text-align: left; }

/* ---------- Karriere – einzelne große Akkordeon-Karte ---------- */
.acc-single {
    max-width: 760px;
    margin: 0 auto;
}
.acc-single .acc-item__header {
    background: #f4f4f4;
    border: 1px solid #ececec;
    font-size: 20px;
    padding: 18px 50px 18px 20px;
}
.acc-single .acc-item__body { padding: 20px; border: 1px solid #ececec; border-top: 0; }
.acc-single .acc-item.is-open .acc-item__body { display: block; }
.acc-single .acc-item { border-top: 0; margin-bottom: 10px; }

/* ---------- Buttons ---------- */
.qx-btn,
.btn {
    display: inline-block;
    color: #fff;
    background-color: #dc3545;
    border: 1px solid transparent;
    border-radius: 0;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 12px 28px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .2s ease;
}

.qx-btn:hover,
.qx-btn-primary:hover,
.btn:hover {
    color: #fff;
    background-color: #b02633;
    text-decoration: none;
}

.qx-btn-primary { background-color: #dc3545; color: #fff; }

.btn-cta { font-size: 22px; padding: 14px 36px; }

/* ---------- CTA-Block ---------- */
.cta {
    text-align: center;
    padding: 50px 0;
}
.cta h2 { color: #000; font-weight: 200; }
.cta p { font-size: 22px; }
.cta .btn { margin-top: 10px; }

/* ---------- Bild + Text 50/50 ---------- */
.image-text {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}
.image-text__media { flex: 1 1 280px; }
.image-text__body { flex: 1 1 320px; }

/* Mobile: bei alternierenden Reihen Text zuerst */
@media (max-width: 767px) {
    .image-text { flex-direction: column-reverse; }
    .image-text--text-first { flex-direction: column; }
}

/* ---------- Panorama-Iframe Wrapper ---------- */
.panorama-wrap {
    position: relative;
    width: 100%;
    height: 500px;
    border: 0;
    overflow: hidden;
    background: #1a1a1a;
}
.panorama-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---------- Google-Maps-Wrapper ---------- */
.map-wrap {
    position: relative;
    width: 100%;
    height: 460px;
    border: 0;
    overflow: hidden;
    background: #eaeaea;
    margin-top: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-hinweis {
    margin-top: 10px;
    color: #6f6f6f;
}
.map-hinweis a { color: #00508f; }

@media (max-width: 767px) {
    .map-wrap { height: 380px; }
}
@media (max-width: 500px) {
    .map-wrap { height: 320px; }
}

/* ---------- Kontaktformular ---------- */
.kontaktformular {
    max-width: 720px;
    margin: 0 auto;
}

.form-group { margin-bottom: 18px; }

.form-control {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 18px;
    color: #474747;
    background: #f4f4f4;
    border: 1px solid #d6d6d6;
    border-radius: 0;
    outline: 0;
    transition: border-color .15s ease, background-color .15s ease;
}

.form-control:focus {
    border-color: #00508f;
    background: #ffffff;
}

textarea.form-control { min-height: 160px; resize: vertical; }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
}

.form-check input { margin-top: 6px; }

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Leerer Result-Container ist standardmäßig unsichtbar – wird erst
   nach Redirect mit ?sent=… per JS in eine .form-message umgewandelt */
.form-result:not(.form-message) {
    display: none;
}

.form-message {
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid;
    font-size: 18px;
}

.form-message--success {
    background: #e8f5e9;
    border-color: #66bb6a;
    color: #1b5e20;
}

.form-message--error {
    background: #fdecea;
    border-color: #ef5350;
    color: #b71c1c;
}

/* ---------- Kontakt-Info Block ---------- */
.kontakt-info {
    background: #f8f8f8;
    padding: 25px 25px;
    border-left: 4px solid #D81E23;
    font-size: 18px;
    line-height: 1.55;
}
.kontakt-info p { margin: 0 0 .25rem; }
.kontakt-info a { color: #232323; text-decoration: none; }
.kontakt-info a:hover { color: #D81E23; }

/* ---------- Legal-Seiten ---------- */
.legal { font-size: 18px; line-height: 1.6; }
.legal h1 { margin-top: 0; }
.legal h4 {
    color: #000;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 20px;
}
.legal ul { padding-left: 22px; }
.legal ul[style*="list-style: none"] { padding-left: 0; }

/* ---------- Footer ---------- */
.footer {
    background-color: #232323;
    color: #ffffff;
    padding: 35px 0 25px;
}

.footer .row { row-gap: 30px; }

.footer h3 {
    color: #ffffff;
    font-family: 'Assistant', Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: .5rem;
}

.footer p,
.footer a {
    color: #ffffff;
    font-size: 16px;
}

.footer a { text-decoration: none; }
.footer a:hover { color: #ffd2d4; text-decoration: none; }

.footer__col { padding: 0 15px; }

.footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
    justify-content: flex-start;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #3a3a3a;
}

.footer__badge { flex: 0 0 auto; text-align: center; }
.footer__badge img {
    max-height: 110px;
    width: auto;
    background: #ffffff;
    padding: 4px;
}
.footer__badge .reg { display: block; font-size: 13px; margin-top: 4px; color: #cfcfcf; }

.footer__copyright {
    background: #1a1a1a;
    color: #ffffff;
    text-align: center;
    padding: 12px 15px;
    font-size: 14px;
}
.footer__copyright a { color: #ffffff; text-decoration: underline; }
.footer__copyright h5 { display: inline; font-weight: 400; font-size: 14px; }

/* ---------- Off-Canvas-Wrapper aus altem Template (Hülle) ---------- */
.off-canvas-wrapper { background: #ffffff; }
.off-canvas-content { background: #ffffff; }

/* =============================================================
   RESPONSIVE / MOBILE
   ============================================================= */

@media (max-width: 1023px) {
    .navi-wrap { justify-content: flex-end; }
    .menu-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1200;       /* über dem Slide-in-Panel */
    }

    /* --- Slide-in-Mobile-Menü von rechts --- */
    .mod-menu,
    .nav-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 80px 0 30px;
        background: #232323;
        color: #ffffff;
        overflow-y: auto;
        z-index: 1150;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, .25);
    }

    .mod-menu.is-open,
    .nav-main.is-open { transform: translateX(0); }

    .mod-menu > li,
    .nav-main > li {
        width: 100%;
        border-top: 1px solid #3a3a3a;
        background: none;
        position: static;
    }
    .mod-menu > li:last-child,
    .nav-main > li:last-child { border-bottom: 1px solid #3a3a3a; }

    .mod-menu > li > a,
    .nav-main > li > a {
        height: auto;
        line-height: 1.3;
        padding: 18px 24px;
        font-size: 18px;
        color: #ffffff;
    }
    .mod-menu > li > a:hover,
    .mod-menu > li.current > a,
    .mod-menu > li.active > a,
    .nav-main > li > a:hover,
    .nav-main > li.current > a,
    .nav-main > li.active > a {
        color: #ff6166;
        background: rgba(255, 255, 255, .04);
    }

    .mod-menu li ul,
    .nav-main li ul {
        position: static;
        background: rgba(0, 0, 0, .25);
        box-shadow: none;
        padding: 0;
        min-width: 0;
    }
    .mod-menu li ul li a,
    .nav-main li ul li a {
        color: #d0d0d0;
        padding: 12px 38px;
        font-size: 15px;
        background: transparent;
    }

    .mod-menu > li.hide-desktop,
    .nav-main > li.hide-desktop { display: block; }

    /* --- Backdrop hinter dem Menü --- */
    .menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
        z-index: 1100;
    }
    .menu-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease;
    }

    /* --- Body-Scroll-Lock wenn Menü offen --- */
    html.menu-open,
    html.menu-open body { overflow: hidden; }

    /* Hamburger ausblenden, wenn Menü offen ist – stattdessen
       gibt es einen eigenen Close-Button oben rechts im Panel. */
    html.menu-open .menu-toggle {
        visibility: hidden;
        pointer-events: none;
    }

    /* --- Close-Button („X") im Panel oben rechts --- */
    .menu-close {
        display: flex;
        position: absolute;
        top: 14px;
        right: 14px;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        z-index: 3;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background-color .2s ease;
    }
    .menu-close:hover,
    .menu-close:focus-visible {
        background: rgba(255, 255, 255, .08);
        outline: none;
    }
    .menu-close__bar {
        position: absolute;
        width: 24px;
        height: 2px;
        background: #ffffff;
        border-radius: 1px;
    }
    .menu-close__bar:nth-child(1) { transform: rotate(45deg); }
    .menu-close__bar:nth-child(2) { transform: rotate(-45deg); }
    .menu-close:hover .menu-close__bar,
    .menu-close:focus-visible .menu-close__bar { background: #ff6166; }
}

@media (max-width: 767px) {
    .hero__content h2 { font-size: 28px; line-height: 1.15; }
    .hero__content p { font-size: 16px; line-height: 1.4; }

    .headerbild_, .hero,
    .hero--page, .hero--page .hero__content { min-height: 440px; }
    .hero__content { min-height: 440px; padding: 40px 16px; }

    .blurb-row { gap: 10px; }
    .cert-row { gap: 20px; }
}

@media (max-width: 425px) {
    .hero__content h2 { font-size: 22px; }
    .hero__content p { font-size: 14px; }
    .headerbild_, .hero,
    .hero--page, .hero--page .hero__content { min-height: 380px; }
    .hero__content { min-height: 380px; padding: 30px 14px; }
}

@media (max-width: 500px) {
    body { font-size: 18px; }

    h1 { font-size: 32px; line-height: 1.2; padding-bottom: 10px; }
    h2 { font-size: 26px; line-height: 1.2; padding-bottom: 10px; }

    .logo_header { text-align: center; flex: 1 1 100%; }
    .logo_header img { max-width: 260px; padding: 0; margin: 0 auto; }

    .kopf {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .adresszeile {
        justify-content: center;
        flex-direction: column;
        padding: 6px 0;
    }
    .adresszeile .adresse-rechts {
        flex-direction: column;
        width: 100%;
    }
    .adresszeile .adresse-zelle {
        justify-content: center;
        padding: 8px 16px;
        border-left: 0;
        border-bottom: 1px solid #ececec;
        white-space: normal;
        text-align: center;
    }
    .adresszeile .adresse-zelle:last-child {
        border-right: 0;
        border-bottom: 0;
    }

    .footer { padding: 25px 0 0; }
    .footer .row > [class*="col-"] { padding: 0 15px; margin-bottom: 18px; }

    .footer__badges { justify-content: center; }
    .footer__badge img { max-height: 80px; }

    .image-text { gap: 20px; }
    .panorama-wrap { height: 380px; }
}

/* =============================================================
   Lightbox
   ============================================================= */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 60px;
    z-index: 1000;
    opacity: 0;
    transition: opacity .2s ease;
}

.lightbox.is-open {
    display: flex;
    opacity: 1;
}

html.lightbox-open,
html.lightbox-open body {
    overflow: hidden;
}

.lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
    background: #1a1a1a;
}

.lightbox__caption {
    color: #f4f4f4;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    max-width: 80ch;
    margin: 0;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    border: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, transform .15s ease;
    z-index: 2;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(216, 31, 36, .9);
    transform: scale(1.05);
}

.lightbox__close {
    top: 16px;
    right: 16px;
    font-size: 32px;
}

.lightbox__prev { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 600px) {
    .lightbox { padding: 20px 12px; }
    .lightbox__img { max-height: calc(100vh - 120px); }
    .lightbox__close,
    .lightbox__prev,
    .lightbox__next { width: 40px; height: 40px; font-size: 20px; }
    .lightbox__close { top: 10px; right: 10px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
}

/* Auf Lightbox-Bildern Cursor-Hinweis */
.gallery a,
.acc-card__media { cursor: zoom-in; }

/* =============================================================
   Hilfsklassen
   ============================================================= */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }