/* ============================================================
   Lernwege für Kinder – Saarland | Nachbau lernwege-saar.de
   ============================================================ */

/* ---------- Custom Properties ---------- */
:root {
    --color-blue: #16a3d5;          /* Navigation, Footer, Links, Titel */
    --color-blue-h1: #13a2df;       /* H1-Überschriften */
    --color-orange: #f97202;        /* H2-Überschriften */
    --color-orange-overlay: rgba(250, 114, 2, .72);   /* Orange Box Startseite */
    --color-orange-cta: rgba(250, 114, 2, .78);       /* CTA-Button */
    --color-orange-scrolltop: #ee7b39;
    --color-brown: #6d564c;         /* H3-Überschriften, "Wichtige Info" */
    --color-text: #4b4b4b;
    --color-bg-page: #fff7f0;       /* warmer Seitenhintergrund */
    --color-bg-header: #eefaff;     /* Kopfbereich */
    --color-bg-peach: #fce3d0;      /* Peach-Sektionen und Boxen */
    --color-accordion-head: #fbdcbc;
    --color-accordion-border: #eab98a;
    --color-accordion-panel: #fdf2e4;
    --color-white: #ffffff;

    /* Font-Stacks exakt wie Original (Nunito nicht eingebunden -> Fallbacks identisch) */
    --font-serif: Nunito, serif, Georgia;
    --font-sans: Nunito, sans-serif;
    --font-arial: Nunito, Arial, sans-serif;

    --container: 1170px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
}

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

a { color: #1779ba; text-decoration: none; transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
a:hover { color: #1468a0; }

p { margin: 0 0 18px; }

ul { margin: 0 0 18px 20px; padding-left: 0; }
li { margin-bottom: 0; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1209px) {
    .container { padding: 0 20px; }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-blue);
    color: #fff;
    padding: 10px 18px;
    z-index: 3000;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Überschriften ---------- */
h1 {
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-blue-h1);
    margin: 0 0 20px;
}

h2 {
    font-family: var(--font-arial);
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-orange);
    margin: 0 0 30px;
}

h2.h2-serif {
    font-family: Nunito;
    font-weight: 800;
}

h3 {
    font-family: var(--font-arial);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brown);
    margin: 0 0 12px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
    background-color: var(--color-bg-header);
}

.site-header .container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.site-branding {
    display: flex;
    align-items: flex-start;
    gap: 63px;
    flex: 1 1 auto;
    min-width: 0;
}

.site-logo { margin: 15px 0 18px; }

.site-logo img {
    width: 137px;
    height: 137px;
    flex-shrink: 0;
}

.site-title-group { margin-top: 10px; padding-top: 30px; }

.site-title {
    font-family: Nunito;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-blue);
    margin: 0;
}

.site-title a { color: var(--color-blue); }
.site-title a:hover { color: var(--color-blue); }

.site-slogan {
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.6;
    color: var(--color-blue);
    margin: 0;
}

.header-contact {
    flex: 0 0 370px;
    max-width: 370px;
    margin-top: 15px;
}

.header-contact-title {
    font-family: Nunito;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-blue);
    margin: 0;
    padding-top: 30px;
}

.hc-media { display: flex; align-items: flex-start; }

.hc-media-info { padding-bottom: 20px; }

.hc-icon {
    flex: 0 0 30px;
    width: 30px;
    margin-top: 17px;
    font-size: 23px;
    line-height: 1;
    color: var(--color-blue);
    font-style: normal;
}

.hc-body { flex: 1 1 auto; min-width: 0; }

/* Unterseiten: Header mit größeren Blockabständen (Original 244px hoch) */
.header-sub .hc-media { margin-bottom: 20px; }

.header-phone {
    font-size: 24px;
    line-height: 1.6;
    color: var(--color-blue);
    margin: 0;
    padding-top: 10px;
}

.header-phone a { color: var(--color-blue); }
.header-phone a:hover { color: #1468a0; }

.info-title {
    font-family: var(--font-arial);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-brown);
    margin: 0 0 10px;
}

.info-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-blue);
    margin: 0;
}

/* ============================================================
   Navigation
   ============================================================ */
.main-nav {
    background-color: var(--color-blue);
    padding: 2px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .12);
    position: relative;
    z-index: 100;
}

.main-nav .container { padding: 0 20px; }

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-list > li { position: relative; margin: 0; }

.nav-list > li > a {
    display: block;
    font-family: var(--font-arial);
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 40px;
}

.nav-list > li > a:hover,
.nav-list > li.active > a {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.nav-list .dj-drop {
    font-size: 11px;
    margin-left: 7px;
}

/* Dropdown */
.nav-list li.has-sub .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 354px;
    background-color: var(--color-blue);
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1500;
    display: none;
}

@media (min-width: 1024px) {
    .nav-list li.has-sub:hover .sub-menu,
    .nav-list li.has-sub:focus-within .sub-menu { display: block; }
}

.sub-menu li { margin: 0; }

.sub-menu a {
    display: block;
    padding: 10px 18px;
    font-family: Nunito, serif, Arial;
    font-size: 14px;
    color: #fff;
}

.sub-menu a:hover { background-color: rgba(255, 255, 255, .3); color: #fff; }

.mobile-only { display: none; }
.submenu-toggle { display: none; }

/* Burger (mobil) */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 12px 20px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

/* ============================================================
   Inhalt
   ============================================================ */
.page-content { padding: 26px 0 60px; }

/* Asymmetrische Reihen: Text 770 + Bild 370 */
.row-asym {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 100px;
}

.row-asym .col-wide { flex: 1 1 auto; min-width: 0; }
.row-asym .col-narrow { flex: 0 0 370px; }
.row-asym .col-narrow-470 { flex: 0 0 470px; }

.row-hero { margin-top: 47px; }

.h1-sub { margin-top: 47px; }
.row-hero h1 { padding-top: 0; }

/* Zweispaltige Text/Bild-Reihen */
.row-2col {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 100px;
}

.row-2col .col-text { flex: 0 0 calc(50% - 15px); }
.row-2col .col-media { flex: 0 0 calc(50% - 15px); }

/* Abstands-Utilities (aus Original vermessen) */
.u-mb75 { margin-bottom: 75px !important; }
.u-mb70 { margin-bottom: 70px !important; }
.u-mb120 { margin-bottom: 120px !important; }
.u-mb90 { margin-bottom: 90px !important; }

/* Bold-Listen (Aufzählungen mit fetten Punkten) */
.list-bold li { font-weight: 700; }

/* Zwei Listen-Spalten nebeneinander (Dyskalkulie) */
.row-2col-lists {
    display: flex;
    gap: 30px;
    margin-bottom: 70px;
}
.row-2col-lists > div { flex: 1 1 50%; }

/* Drei Spalten (Wünsche, Säulen) */
.row-3col {
    display: flex;
    gap: 0;
    margin-bottom: 40px;
}
.row-3col > div { flex: 1 1 33.333%; min-width: 0; padding: 0 15px; }

.row-3col-flush { gap: 30px; }
.row-3col-flush > div { padding: 0; }

/* Peach-Vollbreite-Sektion (Drei Säulen) */
.section-peach {
    background-color: var(--color-bg-peach);
    padding: 25px 0 60px;
    margin-bottom: 100px;
}

.section-peach .row-3col { margin-bottom: 0; }

.section-peach h2 { margin: 0 15px 36px; }

.pillar-caption {
    font-weight: 700;
    margin: 18px 0 14px;
}

.section-peach img { width: 100%; }

.section-peach ul { margin-bottom: 0; }

/* Peach-Box (Angebot LRS / Dyskalkulie / Lerntherapie) */
.box-peach {
    background-color: #fadec5;
    padding: 20px 15px 35px 55px;
    margin: 0 -15px 0;
}

.box-peach h2 { margin-bottom: 30px; }

.box-peach ul { margin-bottom: 0; }
/* Orange Overlay-Box (Startseite Erstgespräch) */
.box-orange {
    background-color: var(--color-orange-overlay);
    color: #fff;
    text-align: center;
    padding: 30px 15px 60px;
    margin-bottom: 60px;
}

.box-orange h2 {
    font-family: Nunito;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
}

.box-orange p { font-size: 19px; margin-bottom: 16px; }

.box-orange .big-contact {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.25;
    margin: 6px 0 0;
}

.box-orange a { color: #fff; text-decoration: none; }
.box-orange a:hover { color: #fff; opacity: .85; }

/* CTA-Button "Erstgespräch vereinbaren unter" */
.cta-phone {
    display: flex;
    justify-content: center;
    margin: 70px 0 17px;
}

.cta-phone a {
    display: flex;
    align-items: stretch;
    width: 385px;
    background-color: rgba(249, 114, 2, .75);
    color: #fff;
    text-align: left;
}

.cta-phone .cta-icon {
    display: block;
    flex: 0 0 83px;
    padding: 12px 10px 0 15px;
}

.cta-phone .cta-icon .fa {
    font-size: 44px;
    line-height: 1;
    color: #fff;
}

.cta-phone .cta-text {
    padding: 10px 0 16px;
    width: 302px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
}

.cta-phone a:hover { opacity: .92; color: #fff; }
.cta-phone a, .cta-phone a:hover { text-decoration: none; }

/* Galerien */
.gallery-title { text-align: center; }

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 5px;
    padding: 0 3px;
    margin-bottom: 15px;
}

.gallery-grid a {
    flex: 0 0 calc((100% - 10px) / 3);
    display: block;
    overflow: hidden;
}

.gallery-grid img {
    width: 100%;
    height: 257px;
    object-fit: cover;
    transition: transform .3s ease, opacity .3s ease;
}

.gallery-grid a:hover img { opacity: .85; }

/* kleine Galerie (Über mich, 5 Bilder) */
.gallery-row-small {
    display: flex;
    justify-content: flex-start;
    gap: 1px;
    margin: 30px 0 90px;
}

.gallery-row-small a { flex: 0 0 auto; }

.gallery-row-small img {
    width: 233px;
    height: 163px;
    object-fit: cover;
    transition: opacity .3s ease;
}

.gallery-row-small a:hover img { opacity: .8; }

/* Zertifikate (Über mich) */
.cert-row {
    display: flex;
    gap: 30px;
    margin-bottom: 90px;
}

.cert-row a { flex: 0 0 auto; }

.cert-row img {
    width: 270px;
    height: 372px;
    object-fit: cover;
    background: #fff;
    transition: opacity .3s ease;
}

.cert-row a:hover img { opacity: .85; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 40px;
}

.lightbox.open { display: flex; }

.lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}

.lightbox-close {
    position: absolute;
    top: 18px;
    right: 26px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    line-height: 1;
}

/* Akkordeon (häufige Fragen) */
.accordion { margin-bottom: 120px; }

.accordion-item { margin-bottom: 25px; }

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fadec5;
    border: 1px solid var(--color-accordion-border);
    padding: 9px 16px;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease;
}

.accordion-header:hover { background-color: #f9d2a9; }

.accordion-header .fa { font-size: 17px; }

.accordion-panel {
    display: none;
    background-color: var(--color-accordion-panel);
    border: 1px solid var(--color-accordion-border);
    border-top: 0;
    padding: 24px 16px 16px;
    font-size: 19px;
}

.accordion-item.open .accordion-panel { display: block; }

.accordion-panel ul { margin-top: 0; }
.accordion-panel li { margin-bottom: 8px; }

/* Karte (Kontakt) */
.map-wrap {
    margin-bottom: 60px;
}

.map-wrap iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

/* Text-Seiten (Impressum / Datenschutz) */
.legal-content { max-width: 770px; }

.legal-content h4 {
    font-family: var(--font-sans);  /* Nunito, sans-serif */
    font-size: 25px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text);
    margin: 28px 0 14px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background-color: var(--color-blue);
    color: #fff;
    padding: 24px 0 10px;
    font-size: 18px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, .12);
}

.footer-cols {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.footer-cols > div { flex: 1 1 33.333%; min-width: 0; }

.site-footer h3 {
    font-family: Nunito, sans-serif, Arial;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    margin: 0 0 14px;
}

.site-footer p { margin-bottom: 14px; }

.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-mail { font-size: 16px; }

.footer-image img { width: 100%; max-width: 372px; }

.footer-bottom {
    text-align: center;
    font-size: 12px;
    padding-top: 28px;
}

.footer-bottom p { margin-bottom: 6px; }

.agency-branding { font-size: 13px; }
.agency-branding p { margin: 0; }

/* Scroll-to-top */
.scroll-top {
    position: fixed;
    right: 22px;
    bottom: 28px;
    width: 56px;
    height: 56px;
    background-color: var(--color-orange-scrolltop);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 22px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    transition: opacity .3s ease;
}

.scroll-top.visible { display: flex; }

.scroll-top:hover { opacity: .85; }

/* ============================================================
   Cookie-Banner
   ============================================================ */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-blue);
    color: #fff;
    padding: 16px 20px;
    z-index: 3500;
    display: none;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
}

.cookie-banner.visible { display: block; }

.cookie-banner .container {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cookie-banner p { margin: 0; font-size: 15px; flex: 1 1 420px; }

.cookie-banner a { color: #fff; text-decoration: underline; }

.cookie-banner button {
    background-color: var(--color-orange-scrolltop);
    color: #fff;
    border: 0;
    padding: 10px 26px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    transition: opacity .2s ease;
}

.cookie-banner button:hover { opacity: .88; }

/* ============================================================
   404
   ============================================================ */
.error-page {
    text-align: center;
    padding: 90px 20px 110px;
}

.error-page .error-code {
    font-family: Nunito;
    font-size: 120px;
    font-weight: 700;
    color: var(--color-blue-h1);
    line-height: 1;
    margin-bottom: 10px;
}

.error-page h2 { margin-bottom: 25px; }

.error-page a.btn-home {
    display: inline-block;
    background-color: var(--color-orange-scrolltop);
    color: #fff;
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 3px;
}

.error-page a.btn-home:hover { opacity: .88; color: #fff; }

/* Keine Scroll-Animationen — Original blendet nichts ein */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet & kleiner: Mobile-Navigation ab < 1024px (wie Original: Push-Panel von links) */
@media (max-width: 1023px) {
    body { display: flex; flex-direction: column; overflow-x: hidden; }
    .main-nav { order: -1; }
    .site-header { order: 0; }

    .main-nav {
        background-color: #fff;
        padding: 0;
        box-shadow: none;
    }

    .main-nav .container {
        display: flex;
        justify-content: flex-start;
        padding: 0;
    }

    .nav-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: #e4e4e4;
        color: #434343;
        padding: 4px 18px 4px 14px;
        font-size: 25px;
        line-height: 34px;
        font-family: var(--font-sans);
    }

    .nav-toggle .fa { font-size: 22px; }

    .nav-toggle-label { line-height: 1.3; }

    /* Seiteninhalt wird nach rechts geschoben */
    .site-header, .page-content, .site-footer, .nav-toggle {
        transition: transform .3s ease;
    }

    body.nav-open .site-header,
    body.nav-open .page-content,
    body.nav-open .site-footer,
    body.nav-open .nav-toggle { transform: translateX(300px); }

    /* Panel: dunkel, von links */
    .nav-list {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100vh;
        background-color: #3b3b3b;
        flex-direction: column;
        padding: 0;
        overflow-y: auto;
        z-index: 2500;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: none;
    }

    .nav-list.open { transform: translateX(0); }

    .nav-close-item {
        display: block;
        text-align: right;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .nav-close {
        position: static;
        background: none;
        border: 0;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        padding: 8px 16px;
        cursor: pointer;
    }

    .nav-list > li { position: relative; }

    .nav-list > li > a {
        padding: 16px 40px 16px 15px;
        font-size: 15px;
        font-family: var(--font-sans);
        line-height: 1.5;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        background: none;
    }

    .nav-list > li.active > a,
    .nav-list > li > a:hover { background-color: rgba(255, 255, 255, .12); }

    .nav-list .dj-drop { display: none; }

    .mobile-only { display: block; }

    /* Untermenü: eingerückt, per +/- aufklappbar */
    .submenu-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 44px;
        height: 55px;
        background: none;
        border: 0;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
    }

    .nav-list li.has-sub .sub-menu {
        display: none;
        position: static;
        min-width: 0;
        background-color: #2f2f2f;
        margin: 0;
        padding: 0;
    }

    .nav-list li.has-sub.sub-open .sub-menu { display: block; }

    .sub-menu a {
        padding: 16px 15px 16px 30px;
        font-family: var(--font-sans);
        font-size: 15px;
        color: #c9c9c9;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .sub-menu li.active > a,
    .sub-menu a:hover { background-color: rgba(255, 255, 255, .12); color: #fff; }

    body.nav-open { overflow: hidden; }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 2400;
        display: none;
    }

    body.nav-open .nav-overlay { display: block; }
}

@media (min-width: 1024px) {
    .nav-close, .nav-overlay { display: none; }
}

@media (max-width: 1023px) {
    .site-header .container { flex-wrap: wrap; gap: 10px; }
    .header-contact { padding-top: 6px; max-width: none; }
    h1 { font-size: 44px; }
}

/* Tablet */
@media (max-width: 992px) {
    .row-asym { flex-wrap: wrap; }
    .row-asym .col-wide,
    .row-asym .col-narrow { flex: 1 1 100%; }

    .row-2col { flex-wrap: wrap; }
    .row-2col .col-text,
    .row-2col .col-media { flex: 1 1 100%; }

    .row-3col { flex-wrap: wrap; }
    .row-3col > div { flex: 1 1 100%; }

    .row-2col-lists { flex-wrap: wrap; }
    .row-2col-lists > div { flex: 1 1 100%; }

    .footer-cols { flex-wrap: wrap; }
    .footer-cols > div { flex: 1 1 100%; }

    .gallery-grid a { flex: 0 0 calc(50% - 2px); }

    .cert-row { flex-wrap: wrap; }

    .gallery-row-small { flex-wrap: wrap; }
}

/* Mobil */
@media (max-width: 1209px) {
    .box-peach { margin-left: 0; margin-right: 0; }
}

@media (max-width: 767px) {
    .container { padding: 0 10px; }

    .site-header .container { padding: 0 18px 10px; }

    h1 { font-size: 33px; }
    h2 { font-size: 27px; }
    .box-peach h2 { font-size: 25px; }
    .box-orange h2 { font-size: 27px; }
    .box-orange .big-contact { font-size: 21px; }

    .site-header .container { flex-direction: column; gap: 10px; }
    .site-branding { flex-direction: row; align-items: flex-start; gap: 16px; }
    .site-logo { margin: 14px 0 0; }
    .site-logo img { width: 52px; height: 52px; }
    .site-title-group { margin-top: 10px; padding-top: 0; }
    .site-title { font-size: 27px; }
    .site-slogan { font-size: 16px; }
    .header-contact { margin-top: 0; flex-basis: auto; }
    .header-contact-title { padding-top: 6px; font-size: 19px; }
    .header-phone { font-size: 22px; padding-top: 4px; }
    .hc-icon { margin-top: 8px; }
    .header-sub .hc-media { margin-bottom: 8px; }
    .hc-media-info { padding-bottom: 12px; }

    .box-peach { padding: 28px 22px 24px; }
    .box-orange { padding: 36px 22px 30px; }

    .gallery-grid a { flex: 0 0 100%; }
    .gallery-grid img { height: auto; }

    .map-wrap iframe { height: 340px; }

    .cta-phone a { max-width: none; }

    .page-content { padding: 25px 0 40px; }
}