: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; }

/* Bildstreifen — only when the gallery block asked for it (.lightbox--strip). Kept out of the plain
   .lightbox rules on purpose: without the modifier not one declaration below applies, so a gallery
   that never switched the option on is byte-for-byte the old overlay. */
.lightbox .lb-strip { display: none; }
/* The side padding is half the strip minus half a thumbnail, and it is what makes "the active one is
   in the middle" true at BOTH ENDS. Without it scrollLeft simply clamps at 0, so picture 1 of 16 sat
   at the left edge instead of centred (measured: 220 px off). The padding buys the scroll range the
   first and last thumbnail need to reach the centre. --lb-thumb-w = image width + the 2 px borders. */
.lightbox--strip .lb-strip { --lb-thumb-w: 96px;
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px;
    padding: 12px calc(50% - var(--lb-thumb-w) / 2) calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto; overflow-y: hidden;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
    scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
/* The picture makes room for the strip instead of hiding behind it. */
.lightbox--strip .lb-figure { max-height: 74vh; margin-bottom: 96px; }
.lightbox--strip .lb-img { max-height: 66vh; }
.lightbox--strip .lb-prev, .lightbox--strip .lb-next { top: calc(50% - 48px); }
.lightbox .lb-thumb { position: static; flex: 0 0 auto; padding: 0; line-height: 0; border-radius: 6px;
    overflow: hidden; opacity: .5; border: 2px solid transparent; transition: opacity .15s ease, border-color .15s ease; }
.lightbox .lb-thumb img { width: 92px; height: 62px; object-fit: cover; display: block; }
.lightbox .lb-thumb:hover { opacity: .85; }
/* The active one must be readable at a glance: full opacity AND a ring — colour alone is not enough. */
.lightbox .lb-thumb.is-active { opacity: 1; border-color: #fff; }
.lightbox .lb-thumb:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }

@media (max-width: 640px) {
    .lightbox--strip .lb-strip { --lb-thumb-w: 72px; }
    .lightbox--strip .lb-figure { margin-bottom: 78px; }
    .lightbox .lb-thumb img { width: 68px; height: 46px; }
}
/* No gliding for anyone who asked the OS for less motion. The script already passes behavior:"auto"
   to scrollTo; this covers the CSS side (a smooth scroll-behaviour inherited from the page). */
@media (prefers-reduced-motion: reduce) {
    .lightbox .lb-strip { scroll-behavior: auto; }
    .lightbox .lb-thumb { transition: none; }
}

/* ---------- 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;
}

/* Every form control shares this look: form-builder controls carry the .mat-input base class (incl.
   the custom date / rich-select <button> triggers), and plain inputs/selects/textareas (e.g. the
   login form) are matched by element so they get the same styling without needing the class.
   Checkboxes/radios/hidden are excluded so they keep their native size. */
.form-field .mat-input,
.form-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.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 .mat-input:focus,
.form-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--black);
    box-shadow: none;
}

.form-field textarea.mat-input,
.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; }
}

/* =========================================================================
   Block: herocta — Hero mit CTA + Bogen-Pfeil. Zwei Farbwelten (Akzent/Bunt),
   umgeschaltet über .hc--accent / .hc--vivid (Feld "colors" am Block).
   ========================================================================= */
.hc--vivid { --hcg: linear-gradient(92deg,#3b6fff,#8b5cf6 60%,#c026d3); --hcg-solid:#7c5cff; --hc-arrow:#8b5cf6; }
.hc--accent { --hcg: linear-gradient(92deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff)); --hcg-solid: var(--accent); --hc-arrow: color-mix(in srgb, var(--accent) 80%, #000); }
.hc { position: relative; overflow: hidden; text-align: center; padding: 88px 20px 96px; isolation: isolate; }
.hc-bg { position: absolute; inset: -20% -10% 0 -10%; z-index: -1; filter: blur(6px); }
.hc--vivid .hc-bg { background:
    radial-gradient(42% 55% at 22% 30%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(40% 55% at 80% 26%, rgba(168,85,247,.30), transparent 70%),
    radial-gradient(46% 60% at 62% 68%, rgba(56,189,248,.24), transparent 70%),
    radial-gradient(40% 55% at 32% 74%, rgba(236,72,153,.18), transparent 72%); }
.hc--accent .hc-bg { background:
    radial-gradient(44% 58% at 24% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(42% 56% at 80% 28%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%),
    radial-gradient(48% 62% at 60% 74%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 74%); }
.hc-inner { max-width: 900px; margin: 0 auto; }
.hc-title { font-family: var(--font-head), sans-serif; font-weight: 800; letter-spacing: -0.02em;
    font-size: clamp(34px, 6vw, 64px); line-height: 1.05; margin: 0 0 22px; color: var(--ink, #14151a); }
.hc-grad, .hc-new { background: var(--hcg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hc-old { position: relative; color: #9aa0ab; font-weight: 800; }
.hc-old::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 4px; border-radius: 3px; background: #ef4444; transform: rotate(-9deg); }
.hc-sub { max-width: 56ch; margin: 0 auto 40px; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--muted, #55606e); }
/* Wenn der Pfeil an ist, garantierter Freiraum über dem CTA – unabhängig von der Untertext-Länge, damit die Pfeil-Notiz nie auf den Text fällt. */
.hc--hasarrow .hc-sub { margin-bottom: 108px; }
.hc-cta { position: relative; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hc-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 14px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.hc-btn--primary { color: #fff; background: var(--hcg); box-shadow: 0 12px 30px color-mix(in srgb, var(--hcg-solid) 35%, transparent); }
.hc-btn--primary:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 38px color-mix(in srgb, var(--hcg-solid) 45%, transparent); }
.hc-btn--primary .hc-btn-ar { transition: transform .18s ease; }
.hc-btn--primary:hover .hc-btn-ar { transform: translateX(4px); }
.hc-btn--ghost { color: var(--ink, #14151a); background: #fff; border: 1px solid var(--line, #e4e6ec); }
.hc-btn--ghost:hover { border-color: #c9ccd6; transform: translateY(-1px); color: var(--ink, #14151a); }
.hc-note { margin: 30px 0 0; font-size: 14px; color: #7a828f; }
.hc-arrow { position: absolute; left: -150px; top: -88px; width: 150px; height: 92px; color: var(--hc-arrow); pointer-events: none; }
.hc-arrow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hc-arrow-note { position: absolute; left: 2px; top: -18px; transform: rotate(-8deg); font-family: "Segoe Script","Bradley Hand",cursive; font-size: 17px; color: var(--hc-arrow); white-space: nowrap; }
.hc-arc, .hc-head { stroke-dasharray: 320; stroke-dashoffset: 320; }
.hc.is-in .hc-arc { transition: stroke-dashoffset 1s cubic-bezier(.6,.05,.2,1) .15s; stroke-dashoffset: 0; }
.hc.is-in .hc-head { transition: stroke-dashoffset .35s ease 1s; stroke-dashoffset: 0; }
.hc.is-in .hc-arrow { animation: hcBob 2.4s ease-in-out 1.5s infinite; }
@keyframes hcBob { 0%,100% { transform: translate(0,0); } 50% { transform: translate(2px,-4px); } }
@media (max-width: 720px) { .hc-arrow { display: none; } .hc-btn { width: 100%; justify-content: center; } .hc-cta { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .hc.is-in .hc-arc, .hc.is-in .hc-head { transition: none; stroke-dashoffset: 0; } .hc.is-in .hc-arrow { animation: none; } }

/* =========================================================================
   Block: timeline — Ablauf mit Scroll-Fortschrittsbalken. .tl--accent/.tl--vivid.
   ========================================================================= */
.tl--vivid { --hcg: linear-gradient(92deg,#3b6fff,#8b5cf6 60%,#c026d3); --hcg-solid:#7c5cff; }
.tl--accent { --hcg: linear-gradient(92deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff)); --hcg-solid: var(--accent); }
/* Vertikale Timeline: Titel links, Karte rechts, linker Strang mit Punkten (füllt sich beim Scrollen). */
.tl-steps { position: relative; }
.tl-rail { position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px; background: color-mix(in srgb, var(--ink,#14151a) 12%, transparent); }
.tl-rail-fill { position: absolute; left: 19px; top: 30px; width: 2px; height: 0; background: var(--hcg); transition: height .5s ease; }
.tl-step { position: relative; display: grid; grid-template-columns: minmax(200px, .8fr) 1.5fr; gap: 34px; padding: 26px 0 26px 60px; }
.tl-dot { position: absolute; left: 12px; top: 34px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid color-mix(in srgb, var(--ink,#14151a) 20%, transparent); z-index: 1; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.tl-step.is-in .tl-dot { border-color: var(--hcg-solid); background: var(--hcg-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--hcg-solid) 18%, transparent); }
.tl-title h3 { font-family: var(--font-head), sans-serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; margin: 0; color: #a2a9b4; transition: color .3s ease; }
.tl-step.is-in .tl-title h3 { background: var(--hcg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-card { background: #fff; border: 1px solid var(--line, #e6e6e6); border-radius: 18px; padding: 26px 30px; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink,#14151a) 6%, transparent); }
.tl-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tl-icon { width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 14px; background: var(--hcg); }
.tl-num { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: 34px; line-height: 1; background: var(--hcg); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; margin-left: auto; }
.tl-card-body { color: var(--muted, #55606e); line-height: 1.7; margin: 0 0 18px; }
.tl-seg { position: relative; display: grid; grid-template-columns: repeat(var(--tl-n, 4), 1fr); gap: 8px; }
.tl-seg-b { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink,#14151a) 12%, transparent); }
.tl-seg-fill { position: absolute; left: 0; top: 0; height: 6px; width: 0; border-radius: 999px; background: var(--hcg); z-index: 1; }
.tl-step.is-in .tl-seg-fill { width: var(--tl-seg, 100%); transition: width .9s cubic-bezier(.6,.05,.2,1) .15s; }
@media (max-width: 820px) { .tl-step { grid-template-columns: 1fr; gap: 14px; padding-left: 52px; } .tl-title h3 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .tl-step.is-in .tl-seg-fill, .tl-rail-fill { transition: none; } }

/* =========================================================================
   Hero: Cursor-Pfeil (gestrichelt), erscheint in Button-Nähe und folgt der Maus.
   ========================================================================= */
.hc-cursor { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .16s ease; overflow: visible; filter: drop-shadow(0 1px 1px rgba(255,255,255,.7)); }
.hc-cursor .hc-line { fill: none; stroke: var(--hc-arrow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; }
.hc-cursor .hc-headline { fill: none; stroke: var(--hc-arrow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { .hc-cursor { display: none; } }