/* === Mobile-Anpassungen Brandl-IT === */

/* 1) Footer: Rechtslinks (Impressum etc.) auf Mobil vollständig & frei anzeigen */
@media (max-width: 782px){
    #bottom,
    #bottom .inside{
        height: auto !important;
        overflow: visible !important;
    }
    #bottom .inside{
        text-align: center !important;
        padding-bottom: 45px !important;
    }
    /* Rechtslinks: eigene, zentrierte Zeile mit Abstand zu den Eck-Buttons */
    #bottom .inside .right{
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 12px !important;
        padding: 0 70px !important;
        box-sizing: border-box !important;
    }
    #bottom .inside .right a{
        display: inline-block !important;
        margin: 3px 6px !important;
    }
}

/* Social-Icons im Footer zentrieren */
#footer .mod_socials{
    width: 100% !important;
    float: none !important;
    text-align: center !important;
}
#footer .mod_socials a{
    float: none !important;
    display: inline-block !important;
    margin: 0 5px !important;
}

/* CTA-Band: Slogan NUR auf Desktop vertikal zentrieren, Mobil unverändert lassen */
@media (min-width: 783px){
    .ce_bgimage_25 .autogrid_row .column.col_8{
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .ce_bgimage_25 .ce_headline_extended h1,
    .ce_bgimage_25 .ce_headline_extended h2,
    .ce_bgimage_25 .ce_headline_extended h3,
    .ce_bgimage_25 .ce_headline_extended h4{
        margin-bottom: 0 !important;
    }
}

/* === Slider-Text auf Mobilgeräten weiter nach links === */
@media (max-width: 767px) {
  .ce_revolutionslider .tp-caption {
    margin-left: -18vw !important;   /* weiter links = größerer Minuswert; falls Text am linken Rand klebt: kleiner */
  }
}

/* =========================================================
   Bildnachweise – aufklappbare Kacheln
   ========================================================= */

.bildnachweise {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.bildnachweise h3 {
    margin: 28px 0 12px;
}

.bildnachweise .bn-item {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    margin: 0 0 8px;
    padding: 0 18px;
    background: #fafafa;
    transition: border-color .15s ease, background-color .15s ease;
}

.bildnachweise .bn-item:hover {
    border-color: #cfcfcf;
    background: #f5f5f5;
}

.bildnachweise .bn-item[open] {
    background: #fff;
    border-color: #cfcfcf;
}

.bildnachweise .bn-head {
    cursor: pointer;
    padding: 10px 28px 10px 0;
    font-weight: 700;
    list-style: none;
    position: relative;
    text-align: left;
    word-break: break-word;
}

.bildnachweise .bn-head::-webkit-details-marker {
    display: none;
}

.bildnachweise .bn-head::marker {
    content: "";
}

.bildnachweise .bn-head::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    font-size: 1.15em;
    line-height: 1;
    color: #777;
}

.bildnachweise .bn-item[open] > .bn-head::after {
    content: "\2013";
}

.bildnachweise .bn-head:focus-visible {
    outline: 2px solid #0a66c2;
    outline-offset: 2px;
    border-radius: 3px;
}

.bildnachweise .bn-ctx {
    font-weight: 400;
    color: #777;
}

.bildnachweise .bn-body {
    padding: 2px 0 12px;
    text-align: left;
}

.bildnachweise .bn-body p {
    margin: 6px 0;
}

.bildnachweise .bn-quellen {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid #e3e3e3;
    color: #555;
    text-align: left;
}

@media print {
    .bildnachweise .bn-item {
        border: 0;
        background: none;
        padding: 0;
    }
    .bildnachweise .bn-head::after {
        content: "";
    }
    .bildnachweise .bn-body {
        display: block !important;
    }
}

/* =========================================================
   Zentrale Text-Regeln (vorher als <style>-Bloecke in einzelnen
   Inhaltselementen: Beratung, Dienstleistungen, Telefonanlagen,
   AGFEO, Webentwicklung, Startseite, Ueber uns) – seit 09/2026 global
   ========================================================= */

/* Ueberschriften: naeher an ihrem Text, mehr Luft darueber */
.ce_text h2,
.ce_text h3,
.ce_text h4 {
    margin-top: 34px;
    margin-bottom: 14px;
}

/* Tabellen: gleichmaessiger Abstand nach unten */
.ce_text table {
    margin-bottom: 26px;
}

/* Tabellen mobil lesbar (groessere Schrift, Zellenabstand, gleichmaessige Spalten) */
@media (max-width: 767px) {
    .ce_text table {
        width: 100%;
        table-layout: fixed;
        font-size: 15px;
    }
    .ce_text th,
    .ce_text td {
        padding: 7px 10px;
        vertical-align: top;
        overflow-wrap: break-word;
    }
}

/* Barrierefreiheit: helle Akzent-Ueberschrift (color-lightgray) WCAG-konform abdunkeln */
.ce_text_extented.color-lightgray,
.ce_text_extented.color-lightgray p {
    color: #767676 !important;
}

/* =========================================================
   Bedienungshilfen-Widget (Accessibility Widget) – Korrekturen
   ========================================================= */

/* Schriftgroesse: Zoom nur einmal anwenden (Theme setzt die Klasse auf <html> UND <body>,
   dadurch wirkte der Zoom doppelt: Stufe 5 = 156 % statt 125 %) */
html[class*="acc_fontsize_"] {
    zoom: 1 !important;
}

/* Panel: nie hoeher als der sichtbare Bereich, bei Bedarf scrollbar */
#accessibility_widget {
    max-height: calc(100vh - 200px);
    overflow-y: auto !important;
    box-sizing: border-box;
}

/* Sichtbarer Fokus fuer den Ausloese-Button (Tastaturbedienung) */
.accessibility_widget_trigger:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* =========================================================
   Headerbild (ce_headerimage) als Vollbreiten-Banner
   – bündig unter dem Menü, über die volle Inhaltsbreite,
     flacher als vorher (Vorbild: Unterseiten feldmark-schule.de)
   ========================================================= */
.mod_article > .container > .ce_headerimage:first-child {
    margin-top: -50px !important;      /* Container-Padding (100px) minus Header-Überlappung (50px) */
    margin-left: -40px !important;
    margin-right: -40px !important;
    width: calc(100% + 80px) !important;
    height: 330px !important;          /* vorher 450px */
    max-width: none !important;
}
.mod_article > .container > .ce_headerimage:first-child .ce_headerimage_inside {
    top: 165px !important;             /* Text vertikal mittig in 330px */
}
.mod_article > .container > .ce_headerimage:first-child h1,
.mod_article > .container > .ce_headerimage:first-child .h1 {
    font-size: 40px;
}
@media only screen and (max-width: 767px) {
    /* Leerraum des nicht vorhandenen Sliders unter dem mobilen Header entfernen
       (50px bleiben, weil #wrapper mit -50px Margin dagegen rechnet) */
    #slider.empty {
        min-height: 50px !important;
        height: 50px !important;
    }
    .mod_article > .container > .ce_headerimage:first-child {
        margin-top: -50px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
        height: 250px !important;
        padding: 20px 0 !important;
    }
    .mod_article > .container > .ce_headerimage:first-child .ce_headerimage_inside {
        top: 125px !important;
    }
    .mod_article > .container > .ce_headerimage:first-child .ce_headerimage_inside .content {
        padding: 12px 0 !important;
    }
    .mod_article > .container > .ce_headerimage:first-child h1,
    .mod_article > .container > .ce_headerimage:first-child .h1 {
        font-size: 28px;
    }
}

/* Bedienungshilfen-Button auf Mobilgeraeten unten rechts (liegt sonst ueber dem Bannertext) */
@media only screen and (max-width: 767px) {
    .accessibility_widget_trigger {
        top: auto !important;
        bottom: 90px !important;
        transform: scale(.8);
        transform-origin: right bottom;
    }
    #accessibility_widget {
        top: auto !important;
        bottom: 90px !important;
        max-height: calc(100vh - 110px) !important;
    }
}

/* Topbar (E-Mail, Telefon, LinkedIn) auch auf Mobilgeraeten anzeigen */
@media only screen and (max-width: 782px) {
    #top {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 1.4 !important;
    }
    #top .inside.topbar {
        padding: 7px 16px !important;
        height: auto !important;
    }
    #top .autogrid_row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #top .autogrid_row > .column {
        width: auto !important;
        flex: 0 1 auto !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0;
    }
    #top .autogrid_row > .column:last-child {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }
    #top .ce_icon_text {
        display: inline-block !important;
        margin: 0 12px 0 0 !important;
        font-size: 12px !important;
        white-space: nowrap;
        vertical-align: middle;
    }
    #top .ce_icon_text .icon,
    #top .ce_icon_text .text {
        display: inline-block !important;
        vertical-align: middle !important;
        float: none !important;
    }
    #top .ce_icon_text .icon { margin-right: 4px !important; }
    #top .ce_icon_text .text p { margin: 0 !important; }
    #top .mod_socials { text-align: right !important; float: none !important; width: auto !important; }
    #top .mod_socials a { display: inline-block !important; float: none !important; margin: 0 !important; }
    #top hr.clear { display: none !important; }
}
@media only screen and (max-width: 400px) {
    #top .ce_icon_text { font-size: 11px !important; margin-right: 8px !important; }
}
@media only screen and (max-width: 340px) {
    #top .mod_socials { display: none !important; }
}

/* Bottom-Bereich mobil: flexibel umbrechen, genug Platz ueber den festen Buttons
   (Datenschutz-Fingerabdruck links, Nach-oben rechts), damit Impressum & Datenschutz immer sichtbar sind */
@media only screen and (max-width: 782px) {
    #bottom,
    #bottom .inside,
    #bottom .inside > div {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #bottom .inside {
        padding: 22px 16px 170px !important;   /* Platz fuer Bedienungshilfen- und Nach-oben-Button */
    }
    #bottom .inside .left {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 12px !important;
    }
    #bottom .inside .right {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    #bottom .inside .right a {
        display: inline-block !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
}

/* Bilder in Textelementen nie breiter als ihr Container (z. B. Produktbilder in Aufklapp-Boxen auf Mobil) */
.ce_text img,
.ce_text_extented img {
    max-width: 100% !important;
    height: auto !important;
}
/* Blocksatz nur auf breiten Bildschirmen – auf Mobil linksbuendig (keine Loecher zwischen den Woertern) */
@media only screen and (max-width: 767px) {
    .ce_text p, .ce_text li, .ce_text td, .ce_text h1, .ce_text h2, .ce_text h3, .ce_text h4,
    .ce_text_extented p, .ce_text_extented li,
    .ce_iconbox p, .ce_iconbox .text,
    #footer p, #footer .text {
        text-align: left !important;
    }
}


/* ---------------------------------------------------------------
   Performance 18.09.2026 – Layoutsprung des Sliders verhindern
   Vor der Initialisierung ist der Slider 750 px hoch, nach dem
   Start auf Mobilgeraeten nur 303 px. Der Inhalt darunter sprang
   dadurch 447 px nach oben (Cumulative Layout Shift 0,30).
   Hier wird vorab genau die spaetere Hoehe reserviert:
   Breite x 750/1020, hoechstens 750 px. Greift nur, solange die
   Klasse revslider-initialised noch fehlt.
   --------------------------------------------------------------- */
#slider .banner:not(.revslider-initialised) {
    height: 73.53vw !important;
    max-height: 750px;
    overflow: hidden !important;
}
@supports (aspect-ratio: 1020 / 750) {
    #slider .banner:not(.revslider-initialised) {
        height: auto !important;
        aspect-ratio: 1020 / 750;
    }
}
#slider .banner:not(.revslider-initialised) > ul {
    height: 100% !important;
    overflow: hidden !important;
}

/* Icon-Schriften neu deklariert: woff vor ttf (themify 47 statt 82 KB)
   und font-display, damit die Schriften das Rendern nicht blockieren. */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'revicons';
    src: url('../scripts/revolution/fonts/revicons/revicons.woff?5510888') format('woff'),
         url('../scripts/revolution/fonts/revicons/revicons.ttf?5510888') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Beschriftung des mobilen Menue-Buttons: "Menu" durch "Men\00FC" ersetzen */
.mmenu_trigger .label {
    font-size: 0 !important;
    line-height: 0 !important;
}
.mmenu_trigger .label::after {
    content: "Men\00FC";
    font-size: 16px;
    line-height: 60px;
    font-weight: 400;
}

/* Iconbox-Kacheln auf der Startseite: Ueberschriften sind jetzt h2 statt h3
   (nach h1 darf kein h3 folgen). Optik bleibt unveraendert wie bei h3. */
.ce_iconbox_cwrapper > h2.headline {
    font-size: 19.2px !important;
    line-height: 26.88px !important;
    letter-spacing: 1px !important;
}

/* Ausschnitte (Subsets) der Icon-Schriften: sie enthalten nur die auf dieser
   Website tatsaechlich verwendeten Zeichen. FontAwesome 184 KB -> 8 KB,
   themify 47 KB -> 3 KB, auf jeder Seite. Die vollstaendigen Schriften sind
   weiter oben deklariert und bleiben als Rueckfall stehen: sie werden nur
   geladen, wenn wirklich ein Zeichen ausserhalb dieser Liste gebraucht wird. */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-subset.woff2') format('woff2'),
         url('../fonts/fontawesome-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+F002-F003, U+F005-F007, U+F00C-F00D, U+F015-F017, U+F019, U+F02F, U+F031-F032, U+F034, U+F041-F042, U+F04B-F04C, U+F053-F054, U+F059-F05A, U+F060-F063, U+F067-F068, U+F06A, U+F073, U+F077-F078, U+F085-F086, U+F08E, U+F095, U+F099-F09A, U+F0AC, U+F0C0, U+F0C9, U+F0D7-F0DA, U+F0E0-F0E1, U+F0ED, U+F100-F107, U+F10B, U+F10D-F10E, U+F110, U+F133, U+F167-F168, U+F16D, U+F1AC, U+F232, U+F2B6;
}
@font-face {
    font-family: 'themify-auszug';
    src: url('../fonts/themify-subset.woff2') format('woff2'),
         url('../fonts/themify-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/* Das Theme verweist nur an einer Stelle auf die Schrift 'themify'. Wird die
   dort auf den Auszug umgestellt, ist die 82-KB-Vollschrift von keiner Regel
   mehr referenziert und wird nicht mehr geladen. */
[class^="ti-"], [class*=" ti-"] {
    font-family: 'themify-auszug' !important;
}

/* Zusaetzlich die Familie 'themify' selbst auf den Auszug umbiegen: neuere
   Chrome-Versionen laden alle Schriftschnitte einer im CSS deklarierten
   Familie, auch wenn keine Regel sie mehr gewinnt. So kostet das 3 statt
   130 KB. */
@font-face {
    font-family: 'themify';
    src: url('../fonts/themify-subset.woff2') format('woff2'),
         url('../fonts/themify-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Bedienungshilfen-Panel: die Ueberschrift "Shortcuts" kommt aus einer
   Sprachdatei des Themes und laesst sich im Template nicht aendern.
   Auf einer deutschen Seite soll dort "Tastenkuerzel" stehen. */
.accessibility_widget .shortcuts .h6 {
    font-size: 0 !important;
    line-height: 0 !important;
}
.accessibility_widget .shortcuts .h6::after {
    content: "Tastenk\00FCrzel";
    font-size: 19.2px;
    line-height: 24.96px;
    font-weight: 700;
}

/* Blocksatz auch dann aufheben, wenn er als Inline-Stil im Inhalt steht
   (z. B. der Datenschutzhinweis unter dem Kontaktformular). Auf schmalen
   Bildschirmen reisst Blocksatz sonst grosse Luecken zwischen die Woerter. */
@media only screen and (max-width: 767px) {
    [style*="text-align: justify"],
    [style*="text-align:justify"] {
        text-align: left !important;
    }
}

/* Kontaktseite: "Unser Buero", "E-Mail", "Telefon", "Oeffnungszeiten" sind
   jetzt h2 statt h5 (nach einer h1 darf keine h5 folgen). Optik bleibt
   unveraendert wie bei h5. */
h1.kontaktinfo, h2.kontaktinfo, h3.kontaktinfo, h4.kontaktinfo,
.kontaktinfo > h1, .kontaktinfo > h2, .kontaktinfo > h3, .kontaktinfo > h4 {
    font-size: 21.33px !important;
    line-height: 1.3 !important;
}

/* Telenot-Folie Startseite: eigenes Mobilbild, Anlage links, Text rechts (21.09.2026) */
@media only screen and (max-width:767px){
#slider li[data-link*="telenot"] .tp-bgimg{background-image:url("../../mbit-uploads/bilder/slider/banner_telenot_mobil.jpg") !important;background-position:center center !important;}
#slider li[data-link*="telenot"] .tp-caption{margin:0 !important;}
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(2),
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(3),
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(4),
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(5){left:46vw !important;}
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(2){top:7.3vw !important;}
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(3){top:19.9vw !important;}
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(4){top:24.8vw !important;}
#slider li[data-link*="telenot"] > .tp-parallax-wrap:nth-child(5){top:35.4vw !important;}
#slider li[data-link*="telenot"] .tp-caption.bold{white-space:normal !important;width:calc(54vw - 10px) !important;line-height:1.25 !important;}
#slider li[data-link*="telenot"] a.tp-caption.hyperlink_txt{padding:0 12px !important;font-size:12px !important;min-width:0 !important;}
}

/* Startseiten-Slider: Folien mit "Hauptbild nachträglich laden" erst laden, wenn der Slider sie braucht (21.09.2026).
   Die vom Slider erzeugten .rs_mq_image-Regeln würden sonst alle Bilder sofort anfordern. */
#slider li.tp-revslider-slidesli .tp-bgimg[src*="dummy.png"]{background-image:none !important;}

/* Bedienungshilfen-Panel: im geschlossenen Zustand unsichtbar statt nur aus dem Bild geschoben (21.09.2026).
   Verhindert gemessene Layoutverschiebungen (CLS) und dass Tastaturnutzer in das geschlossene Panel tabben. */
body:not(.acc_show) #accessibility_widget{visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;}
body.acc_show #accessibility_widget{visibility:visible;transition:transform .3s ease,visibility 0s linear 0s;}