:root {
    --black: #010101;
    --ink: #1a1a1a;
    --muted: #5b5b5b;
    --line: #e6e6e6;
    --bg: #ffffff;
    --bg-alt: #f6f7f9;
    /* Accent + derived shades. The active Template overrides --accent (and --accent-dark);
       --accent-card follows automatically so themes stay colour-consistent. */
    --accent: #2563eb;
    --accent-dark: color-mix(in srgb, var(--accent) 85%, #000);
    --accent-card: color-mix(in srgb, var(--accent) 82%, #fff);
    --max: 1180px;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-head: "Geologica", "Inter", sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
}

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

a { color: inherit; }

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

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.12;
    color: var(--black);
    margin: 0 0 .5em;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.topbar {
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.topbar-inner a {
    text-decoration: none;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: .02em;
}

.topbar-inner a:hover { color: var(--accent-dark); }

.header-inner {
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 22px;
}

.logo img { height: 56px; width: auto; display: block; }

.header-icons { display: flex; align-items: center; gap: 16px; }
.hicon { color: var(--accent); display: inline-flex; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.hicon svg { width: 31px; height: 31px; display: block; }
.hicon .ti { font-size: 29px; line-height: 1; display: block; }
.hicon:hover { color: var(--accent-dark); transform: translateY(-2px); }

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-left: auto;
}

.main-nav a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
    padding: 4px 0;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width .22s ease;
}

.main-nav a:hover::after { width: 100%; }

/* Language switcher (public header) */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 18px;
    margin-left: 4px;
    border-left: 1px solid var(--line);
}

.lang-switch a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    padding: 2px 4px;
}

.lang-switch a:hover { color: var(--ink); }
.lang-switch a.lang-current { color: var(--accent); }

/* Fallback language switcher (.mat-lang): closed dropdown, opens on click. Rendered only when the
   layout does not define its own switcher — in the default header (top right, vertically centered
   in the menu row) and, for custom layouts, as a fixed top-right overlay. */
.mat-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: center;
    /* No extra margin in the default header: the button already sits in the nav's flex row, which
       provides the gap between it and the last menu item. The overlay variant (not in the nav flow)
       sets its own spacing further down. */
    margin-left: 0;
}
.mat-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line, #e2e4e8);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink, #222);
}
.mat-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.mat-lang-chev { transition: transform .18s ease; }
.mat-lang.open .mat-lang-chev { transform: rotate(180deg); }
.mat-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--line, #e2e4e8);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .14);
    padding: 6px;
    z-index: 1200;
}
.mat-lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    color: var(--ink, #222);
    white-space: nowrap;
}
.mat-lang-menu a::after { display: none; }
.mat-lang-menu a:hover { background: var(--bg-alt, #f4f5f7); }
.mat-lang-menu a.is-current { color: var(--accent); font-weight: 700; }
.mat-lang-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--muted, #6b7280);
}
.mat-lang-name { display: inline-flex; align-items: center; gap: 9px; }
.mat-lang-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: 0 0 auto; display: block; }

/* Custom layouts without a {{languages}} placeholder: same dropdown, floating top right.
   top: 24px puts the button's center at ~38px — level with the menu row of typical 70–90px
   headers, so it reads as part of the navigation instead of hovering above it. */
.mat-lang--overlay {
    position: fixed;
    top: 24px;
    right: 18px;
    z-index: 1300;
    margin: 0;
}
.mat-lang--overlay .mat-lang-btn {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, .94);
}

/* Mobile nav toggle */
.nav-toggle, .nav-toggle-label { display: none; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 14px;
    font-weight: 600;
    padding: 15px 32px;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--accent);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn-outline {
    background: transparent;
    color: var(--accent);
}

.btn-outline:hover { background: var(--accent); color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); }
.section__intro { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section__intro p { color: var(--muted); font-size: 18px; }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.rich p { margin: 0 0 1.1em; }
.rich h3 { margin-top: 1.6em; font-size: 22px; }
.rich ul, .rich ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.rich a { color: var(--accent); text-underline-offset: 3px; }

/* ---------- Hero (heading on white, optional full-width image band below) ---------- */
.hero {
    padding: 92px 0 60px;
    background: var(--bg);
}
.hero--with-image { padding-bottom: 44px; }

.hero__inner { max-width: 880px; }
.hero--center { text-align: center; }
.hero--center .hero__inner { max-width: 940px; margin: 0 auto; }

.hero h1 {
    text-transform: uppercase;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: -.01em;
    margin-bottom: .35em;
    white-space: pre-line;
    color: var(--black);
}

.hero__sub {
    font-size: 19px;
    max-width: 660px;
    margin-bottom: 32px;
    color: var(--muted);
}

.hero--center .hero__sub { margin-left: auto; margin-right: auto; }

.hero-image { width: 100%; }
.hero-image img {
    width: 100%;
    height: clamp(280px, 42vw, 520px);
    object-fit: cover;
    display: block;
}

/* ---------- Columns ---------- */
.columns-block { padding: 84px 0; }
.columns-grid { display: grid; gap: 40px; }
.columns-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.columns-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.column {
    background: var(--accent-card);
    color: #23160a;
    padding: 34px 30px;
}

.column h3 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 20px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(0, 0, 0, .35);
    color: #1a1008;
    display: inline-block;
}

.column .rich { color: #2e2013; }
.column .rich a { color: #1a1008; }
/* Per-column tint: when a background/text colour is picked in the editor, the inline style wins
   and the headings/body inherit the chosen text colour instead of the fixed defaults above. */
.column--tinted h3, .column--tinted .rich, .column--tinted .rich a { color: inherit; }
.column--tinted h3 { border-bottom-color: currentColor; }

/* ---------- Nested "Leistungen" container ---------- */
.leistungen-block .leistungen-grid { display: grid; gap: 28px; margin-top: 8px; }
.leistungen-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.leistungen-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.leistungen-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.leistung-card { border: 1px solid var(--line); padding: 28px; background: #fff; }
.leistung-card__img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 16px; }
.leistung-card h3 { margin: 0 0 10px; }
.leistung-card p { margin: 0; color: var(--muted); }
@media (max-width: 720px) {
    .leistungen-grid.cols-3, .leistungen-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Global per-block layout options (width + spacing, set in the editor) ---------- */
.block-wrap { display: block; }
.bw-narrow .container { max-width: 760px; }
.bw-full .container { max-width: 100%; }
.bst-s { margin-top: 24px; } .bst-m { margin-top: 52px; } .bst-l { margin-top: 90px; }
.bsb-s { margin-bottom: 24px; } .bsb-m { margin-bottom: 52px; } .bsb-l { margin-bottom: 90px; }
/* Hero image height options. */
.hero-image--sm img { height: 300px; object-fit: cover; }
.hero-image--md img { height: 460px; object-fit: cover; }
.hero-image--lg img { height: 620px; object-fit: cover; }
.hero-image--full img { height: 88vh; object-fit: cover; }

/* ---------- Gallery block + lightbox ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.gallery-filter .gfilter { font: inherit; font-size: 14px; padding: 7px 16px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; color: var(--ink); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.gallery-filter .gfilter:hover { border-color: var(--accent); }
.gallery-filter .gfilter.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gallery { margin-top: 8px; }
.gallery__item { margin: 0; }
.gallery__link { display: block; overflow: hidden; }
.gallery__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery__link:hover img { transform: scale(1.04); }
.gallery figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

.gallery--grid { display: grid; gap: 16px; }
.gallery--grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery--grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery--grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.gallery--grid .gallery__link { aspect-ratio: 4 / 3; }

.gallery--masonry { columns: 3; column-gap: 16px; }
.gallery--masonry.cols-2 { columns: 2; }
.gallery--masonry.cols-4 { columns: 4; }
.gallery--masonry .gallery__item { break-inside: avoid; margin-bottom: 16px; }

@media (max-width: 720px) {
    .gallery--grid.cols-3, .gallery--grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .gallery--masonry { columns: 2; }
}

.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.9); padding: 40px; }
.lightbox.open { display: flex; }
.lightbox .lb-figure { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.lightbox .lb-img { max-width: 90vw; max-height: 82vh; object-fit: contain; }
.lightbox .lb-cap { color: #eee; margin-top: 12px; font-size: 15px; }
.lightbox button { position: absolute; background: none; border: none; color: #fff; cursor: pointer; opacity: .85; }
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 18px; right: 24px; font-size: 40px; line-height: 1; }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; transform: translateY(-50%); font-size: 60px; padding: 0 18px; }
.lightbox .lb-prev { left: 8px; }
.lightbox .lb-next { right: 8px; }

/* ---------- Service grid ---------- */
.service-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: svc; }
.service-card { counter-increment: svc; }
.service-card .num::before { content: counter(svc, decimal-leading-zero); }
.service-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.service-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.service-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.service-card {
    background: var(--bg);
    padding: 34px 28px;
    transition: background .2s ease;
}

.service-card:hover { background: var(--bg-alt); }

.service-card .num {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .1em;
}

.service-card h3 {
    font-size: 18px;
    margin: 12px 0 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.service-card p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ---------- CTA ---------- */
.cta-block { padding: 90px 0; text-align: center; }
.cta-block.on-dark { background: var(--black); color: #fff; }
.cta-block.on-dark h2 { color: #fff; }
.cta-block h2 { font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; }
.cta-block p { max-width: 640px; margin: 0 auto 30px; color: var(--muted); font-size: 18px; }
.cta-block.on-dark p { color: rgba(255,255,255,.85); }

/* ---------- Contact form ---------- */
.contact-block { padding: 84px 0; }
.contact-wrap { max-width: 680px; margin: 0 auto; }
.contact-wrap h2 { text-align: center; text-transform: uppercase; margin-bottom: 32px; }

.form-field { margin-bottom: 22px; }
.form-field label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: #fff;
    transition: border-color .18s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--black);
}

.form-field textarea { min-height: 150px; resize: vertical; }

.alert { padding: 14px 18px; margin-bottom: 24px; font-size: 15px; border: 1px solid; }
.alert-success { background: #f0f7f0; border-color: #b7d7b7; color: #24631f; }
.alert-error { background: #fbf0f0; border-color: #e3bdbd; color: #8a2222; }
.alert-info { background: #eef3fb; border-color: #c3d5ee; color: #2a4a75; }

/* ---------- Form block (built with the form builder) ---------- */
.form-block .form-el-title { margin: 26px 0 10px; }
.form-block .form-el-desc { margin: 0 0 18px; color: #555; }
.form-block .field-help { font-size: 13px; color: #777; margin-top: 6px; }
.form-block .form-field label .req { color: #b3261e; }
.form-block .form-group { border: 1px solid #e2e2e2; padding: 18px 20px 4px; margin: 0 0 22px; }
.form-block .form-group legend { font-weight: 600; padding: 0 8px; }

/* ---------- Image block ---------- */
.image-block { padding: 40px 0; }
.image-block figure { margin: 0; }
.image-block.narrow figure { max-width: 760px; margin: 0 auto; }
.image-block figcaption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 12px; }

/* ---------- Accordion (FAQ) ---------- */
.accordion { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 4px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 18px;
    color: var(--black);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-icon { position: relative; width: 16px; height: 16px; flex: none; }
.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    background: var(--accent);
    transition: transform .2s ease, opacity .2s ease;
}
.accordion-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.accordion-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.accordion-item[open] .accordion-icon::after { transform: scaleY(0); opacity: 0; }
.accordion-answer { padding: 0 4px 24px; color: var(--muted); }
.accordion-answer p { margin: 0 0 1em; }

/* ---------- Quote ---------- */
.quote-block .quote { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-block blockquote {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.35;
    color: var(--black);
    position: relative;
}
.quote-block blockquote::before {
    content: "\201C";
    display: block;
    font-size: 64px;
    line-height: .6;
    color: var(--accent);
    margin-bottom: 12px;
}
.quote-block figcaption {
    margin-top: 22px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

/* ---------- Image & Text ---------- */
.imagetext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.imagetext.no-image { grid-template-columns: 1fr; }
.imagetext.image-right .imagetext__media { order: 2; }
.imagetext__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imagetext__body h2 { text-transform: uppercase; }
.imagetext__body .rich { color: var(--muted); }

/* ---------- Spacer ---------- */
.spacer { width: 100%; }
.spacer-small { height: 28px; }
.spacer-medium { height: 60px; }
.spacer-large { height: 108px; }

/* ---------- Logo strip ---------- */
.logostrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 56px;
}
.logostrip__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.logostrip__item img {
    max-height: 64px;
    width: auto;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .2s ease, opacity .2s ease;
}
.logostrip__item:hover img { filter: none; opacity: 1; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    padding: 56px 0 40px;
    margin-top: 20px;
}

.footer-inner { text-align: center; }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin-bottom: 30px;
}

.footer-nav a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    color: var(--muted);
}

.footer-nav a:hover { color: var(--accent); }

.footer-brand img { height: 48px; width: auto; margin: 0 auto 16px; opacity: .9; }
.footer-text { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .columns-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .service-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .service-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .section, .columns-block, .contact-block { padding: 56px 0; }
    .hero { padding: 84px 0; }

    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 34px; height: 30px;
        cursor: pointer;
    }
    .header-icons { margin-left: auto; }
    .hicon svg { width: 27px; height: 27px; }
    .hicon .ti { font-size: 26px; }
    .logo img { height: 46px; }
    .nav-toggle-label span {
        display: block; height: 2px; width: 100%;
        background: var(--black);
        transition: transform .2s ease, opacity .2s ease;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 8px 24px 20px;
    }
    .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .main-nav a::after { display: none; }
    .nav-toggle:checked ~ .main-nav { display: flex; }
    .lang-switch { padding: 12px 0 0; margin: 0; border-left: none; }
    /* Fallback dropdown inside the collapsed mobile nav: own row, menu opens in-flow (no clipping). */
    .mat-lang { margin: 12px 0 0; align-self: flex-start; }
    .mat-lang-menu { position: static; margin-top: 8px; box-shadow: none; }

    .columns-grid.cols-2,
    .columns-grid.cols-3,
    .service-grid.cols-2,
    .service-grid.cols-3,
    .service-grid.cols-4 { grid-template-columns: 1fr; }

    .imagetext { grid-template-columns: 1fr; gap: 32px; }
    .imagetext.image-right .imagetext__media { order: 0; }
}

/* ===== Hierarchical menus (dropdowns / submenus) =====
   One ruleset for every nav: custom-template loops, default {{menu:X}} render, and the
   built-in header/footer. A parent item is wrapped in .mat-hassub carrying a .mat-sub. */
.mat-hassub { position: relative; }
.mat-sub { display: none; }
@media (min-width: 861px) {
    .mat-hassub { display: inline-flex; align-items: center; }
    .mat-hassub > .mat-sub {
        position: absolute; top: 100%; left: 0; z-index: 500;
        flex-direction: column; min-width: 210px; padding: 8px 0;
        background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0,0,0,.16);
    }
    .mat-hassub:hover > .mat-sub, .mat-hassub:focus-within > .mat-sub { display: flex; }
    .mat-sub a {
        display: block; padding: 8px 20px; margin: 0; white-space: nowrap;
        color: #1a1a1a; font-size: 15px; line-height: 1.5; border: 0;
    }
    .mat-sub a::after { display: none !important; } /* kill inherited underline/caret animations */
    .mat-sub a:hover { background: rgba(0,0,0,.06); }
    .mat-sub .mat-hassub > .mat-sub { top: -8px; left: 100%; } /* 3rd level opens sideways */
}
@media (max-width: 860px) {
    /* Stacked/burger nav: submenus render as static indented lists (no hover needed). */
    .mat-hassub { display: block; }
    .mat-hassub > .mat-sub { display: flex; flex-direction: column; padding-left: 16px; }
}