: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); }
/* A plugin's counter on an icon (the shop's cart) and next to a text link in a menu. */
.hicon { position: relative; }
.hbadge { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 11px/18px var(--font-body, inherit); text-align: center; box-sizing: border-box; }
.mat-toolbar-overlay { position: fixed; top: 12px; right: 16px; z-index: 900; display: flex; gap: 16px; padding: 8px 16px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 99px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.mat-toolbar-overlay.with-lang { right: 92px; }
.mat-toolbar-overlay .hicon .ti, .mat-toolbar-overlay .hicon svg { font-size: 24px; width: 24px; height: 24px; }
.hbadge.inline { position: static; display: inline-block; margin-left: 4px; vertical-align: 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;
    /* Never spill past the viewport edge (narrow screens / button near the corner) — the menu is
       right-anchored, so without this it could run off the left instead of staying readable. */
    max-width: calc(100vw - 24px);
    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);
}

/* ---------- Language switcher: MODAL variant ({{languages:modal}}) ---------- */
/* A flag button that opens a real dialog. Centered card on desktop, full-screen on mobile — never
   clipped by a header/overflow, and a big touch target instead of a fiddly dropdown row. */
.mat-langm { display: inline-flex; align-items: center; }
.mat-langm-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line, #e2e4e8); background: #fff; color: var(--ink, #222);
    border-radius: 999px; padding: 6px 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1;
}
.mat-langm-btn:hover { border-color: var(--accent); color: var(--accent); }
.mat-langm-btn .mat-lang-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
html.mat-langm-lock { overflow: hidden; }
.mat-langm-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 23, 32, .55); backdrop-filter: blur(2px);
}
/* display:flex above beats the [hidden] UA rule — without this the closed, invisible overlay still
   covers the viewport (inset:0) and swallows every click on the page. */
.mat-langm-overlay[hidden] { display: none; }
.mat-langm-dialog {
    position: relative; width: 100%; max-width: 360px;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
    padding: 20px; max-height: calc(100vh - 40px); overflow: auto;
}
.mat-langm-close {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--muted, #6b7280); cursor: pointer; border-radius: 8px;
}
.mat-langm-close:hover { background: var(--bg-alt, #f4f5f7); color: var(--ink, #222); }
/* Clear the absolute ✕ (top:12px, 36px tall) so it never overlaps the first language row. */
.mat-langm-list { display: flex; flex-direction: column; gap: 4px; margin-top: 34px; }
.mat-langm-list a {
    display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 10px;
    text-decoration: none; color: var(--ink, #222); font-size: 16px;
}
.mat-langm-list a::after { display: none; }
.mat-langm-list a:hover { background: var(--bg-alt, #f4f5f7); }
.mat-langm-list a.is-current { color: var(--accent); font-weight: 700; }
.mat-langm-list .mat-lang-flag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.mat-langm-name { flex: 1; }
.mat-langm-code { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--muted, #6b7280); }

/* 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 "features" container (formerly "leistungen"; old classes kept as aliases so a
   template's CustomCss written against the old names still applies) ---------- */
.features-block .features-grid, .leistungen-block .leistungen-grid { display: grid; gap: 28px; margin-top: 8px; }
.features-grid.cols-2, .leistungen-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.features-grid.cols-3, .leistungen-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.features-grid.cols-4, .leistungen-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card, .leistung-card { border: 1px solid var(--line); padding: 28px; background: #fff; }
.feature-card__img, .leistung-card__img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 16px; }
.feature-card h3, .leistung-card h3 { margin: 0 0 10px; }
.feature-card p, .leistung-card p { margin: 0; color: var(--muted); }
@media (max-width: 720px) {
    .features-grid.cols-3, .features-grid.cols-4,
    .leistungen-grid.cols-3, .leistungen-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-card, .leistung-card { min-width: 0; padding: 22px; }
}
@media (max-width: 520px) {
    /* One column on a phone: two cards of 28px padding each overflowed 390px by a few pixels. */
    .features-grid.cols-2, .features-grid.cols-3, .features-grid.cols-4,
    .leistungen-grid.cols-2, .leistungen-grid.cols-3, .leistungen-grid.cols-4 { grid-template-columns: minmax(0, 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; }

/* Overlay hero: title fused ONTO the photo. The image is a natural <img> (NOT a cover background),
   so the whole picture is always shown, never cropped; the title floats over it with a gradient. */
.hero--overlay { position: relative; color: #fff; overflow: hidden; background: #0e1a24; }
/* Blurred copy of the photo fills the frame behind the whole (uncropped) image, so the capped height
   has no empty side bars. */
.hero--overlay::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--hero-bg); background-size: cover; background-position: center;
    filter: blur(26px) brightness(.55); transform: scale(1.12);
}
.hero-ov-img { position: relative; z-index: 0; display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 60vh; }
.hero-ov-text {
    position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end;
    background: linear-gradient(to bottom, rgba(0,0,0,.06) 50%, rgba(0,0,0,.5) 100%);
}
.hero--overlay.hero--center .hero-ov-text { align-items: center; text-align: center; }
.hero-ov-text .container { width: 100%; }
.hero--overlay .hero__inner { padding: 40px 0; }
.hero--overlay h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.hero--overlay .hero__sub { color: rgba(255,255,255,.92); text-shadow: 0 1px 20px rgba(0,0,0,.5); }

/* Split hero: text beside the photo — the photo in a rounded card, the title calm on the page. */
.hero--split { padding: 56px 0; }
.hero--split__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.hero--split__text h1 { margin: 0 0 14px; }
.hero--split__text .hero__sub { font-size: 19px; color: var(--muted, #6b7280); margin: 0 0 26px; line-height: 1.5; }
.hero--split__img { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .16); }
.hero--split__img img { display: block; width: 100%; height: clamp(320px, 34vw, 480px); object-fit: cover; }
@media (max-width: 760px) {
    .hero--split { padding: 32px 0; }
    .hero--split__grid { grid-template-columns: 1fr; gap: 26px; }
    .hero--split__img img { height: 260px; }
}

/* Hero background tints (use the theme's own colours). Dark/accent flip the text to light and give
   the button a warm secondary fill so it stays legible. */
.hero--bg-soft { background: var(--bg-alt, #f2f6f8); }
.hero--bg-dark { background: var(--black, #16323b); }
.hero--bg-accent { background: var(--accent, #2f7d95); }
.hero--bg-dark h1, .hero--bg-accent h1 { color: #fff; }
.hero--bg-dark .hero__sub, .hero--bg-accent .hero__sub { color: rgba(255, 255, 255, .82); }
.hero--bg-dark .btn, .hero--bg-accent .btn {
    background: var(--accent-2, #c9a86a); color: var(--black, #16323b); border: 0;
}
.hero--bg-dark .btn:hover, .hero--bg-accent .btn:hover { filter: brightness(1.07); }

/* Hero image fit + width (editor options on the hero block).
   "Einpassen" (contain) shows the WHOLE image, never cropped: for banner/split it sits on a soft tint,
   for the overlay it floats within the frame (on the blurred backdrop where the theme keeps one, else a
   matte). "Füllen" (cover, default) crops to fill — and then the image's focal point (media library) or
   the hero's own focal choice decides which part stays in view. */
.hero-image.hero--fit-contain img,
.hero--split__img.hero--fit-contain img { object-fit: contain; background: var(--bg-alt, #f2f2f2); }
.hero--overlay.hero--fit-contain .hero-carousel__slide img,
.hero--overlay.hero--fit-contain .hero-ov-img { object-fit: contain; width: 100%; height: 100%; }
.hero--overlay.hero--fit-contain .hero-carousel__slide { background: transparent; }
/* Overlay + "Füllen" (cover, the default): the photo is the whole section, edge to edge and as tall as the
   screen — no blurred frame, no section padding around it. The framed look above (whole photo on its own
   blurred copy) is what "Einpassen" (contain) asks for. It used to be the ONLY overlay look, so "Füllen" and
   the height did nothing here, and every site's template had to override it. "Bildhöhe" sets the height.
   :where() keeps these at ONE class of weight, so a template's own `.hero--overlay { min-height: … }` still wins. */
.hero--overlay:where(:not(.hero--fit-contain)) { padding: 0; min-height: clamp(460px, 88vh, 1100px); }
.hero--overlay:where(:not(.hero--fit-contain))::before { display: none; }
.hero--overlay:where(:not(.hero--fit-contain)) .hero-ov-img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
}
.hero--overlay.hero-ov--sm { min-height: 320px; }
.hero--overlay.hero-ov--md { min-height: 460px; }
.hero--overlay.hero-ov--lg { min-height: 620px; }
.hero--overlay.hero-ov--full { min-height: 100vh; min-height: 100svh; }
@media (max-width: 760px) { .hero--overlay:where(:not(.hero--fit-contain)) { min-height: 78svh; } }
/* Optional width cap for the banner image band, centred (portrait-ish photos read better narrower). */
.hero-image.hero--w-narrow { max-width: 1100px; margin-left: auto; margin-right: auto; }

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

/* Icon variant: separated feature cards with a round icon badge (modern), instead of the number grid. */
.service-grid--cards { display: grid; gap: 20px; background: none; border: 0; }
.service-grid--cards .service-card {
    background: var(--bg, #fff); border: 1px solid var(--line, #e2e4e8); border-radius: 16px;
    padding: 30px 24px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}
.service-grid--cards .service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .1); background: var(--bg, #fff); }
.service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--bg-alt, #eef4f5); color: var(--accent, #2f7d95); font-size: 27px; margin: 0 0 16px;
}
.service-icon i { line-height: 1; }
.service-grid--cards .service-card h3 { text-transform: none; letter-spacing: 0; font-size: 18px; margin: 0 0 8px; }
.service-grid--cards .service-card p { margin: 0; color: var(--muted, #6b7280); line-height: 1.55; }

.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; }
/* margin auto: a template that caps the line length (`.footer-text { max-width: 70ch }`) would otherwise leave the
   capped box at the LEFT edge, its centred text visibly off-centre under the centred menu and logo. */
.footer-text { color: var(--muted); font-size: 14px; margin: 0 auto; }

/* ---------- 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; }
    /* Inside the collapsed mobile nav the dropdown is its own row and its list opens IN FLOW, below the
       button, as wide as the nav. It used to be static for EVERY inline switcher while .mat-lang stayed a
       flex ROW: the list then sat beside the button — in the burger menu next to it, in a template's header
       ({{languages:dropdown}}, kabri.es) pushed off the right edge of the screen. A switcher outside the nav
       keeps its button-anchored list (lang-switch.js moves it back into the viewport); so does the overlay.
       The list's links must not inherit the nav's rows (padding + bottom rule). */
    .main-nav .mat-lang:not(.mat-lang--overlay) { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; margin: 14px 0 0; }
    .main-nav .mat-lang:not(.mat-lang--overlay) .mat-lang-menu { position: static; margin-top: 8px; width: 100%; max-width: none; box-shadow: none; }
    .main-nav .mat-lang-menu a { padding: 11px 12px; border-bottom: 0; }
    /* On mobile the burger sits top-right — so the floating FALLBACK overlay must get out of its way:
       park it bottom-right and open its menu upward. (The clean answer is to place
       {{languages:dropdown}} in the template header so it integrates and no overlay is injected at all.) */
    .mat-lang--overlay { top: auto; bottom: 14px; right: 14px; }
    .mat-lang--overlay .mat-lang-menu { top: auto; bottom: calc(100% + 8px); }
    /* Modal variant on mobile: full-screen sheet, and the trigger shrinks to a compact flag chip so it
       fits next to a burger. */
    .mat-langm-overlay { padding: 0; }
    .mat-langm-dialog { max-width: none; height: 100vh; max-height: 100vh; border-radius: 0; padding: 26px 20px; }
    .mat-langm-btn { padding: 7px 9px; gap: 0; }
    .mat-langm-btn .mat-langm-cur { display: 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: 761px) {
    .mat-hassub { display: inline-flex; align-items: center; }
    .mat-sub-toggle { display: none; }
    .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, .mat-hassub.open > .mat-sub { display: flex; }
    /* The last entry of the main menu sits at the right edge: its dropdown opens to the left, or it would push the page sideways. */
    .main-nav > .mat-hassub:last-child > .mat-sub { left: auto; right: 0; }
    .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 */
    .mat-sub .mat-hassub > a { flex: 1 1 auto; position: relative; padding-right: 36px; }
    .mat-sub .mat-hassub > a::before { content: "\203A"; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); opacity: .55; font-size: 18px; } /* a flyout follows */
    /* The last entry of the main menu is at the right edge: its flyouts open to the left, too. */
    .main-nav > .mat-hassub:last-child .mat-sub .mat-hassub > .mat-sub { left: auto; right: 100%; }
}
@media (max-width: 760px) {
    /* Stacked/burger nav: a submenu is an indented list. Elsewhere (the footer) it is always shown; in the main menu it is folded away behind an arrow (site-nav.js adds the button). */
    .mat-hassub { display: block; }
    .mat-hassub > .mat-sub { display: flex; flex-direction: column; padding-left: 16px; }
    .main-nav { align-items: stretch; max-height: calc(100vh - 96px); overflow-y: auto; }
    .main-nav > a, .main-nav .mat-sub a { display: block; }
    .main-nav .mat-hassub { display: flex; flex-wrap: wrap; align-items: stretch; position: static; }
    .main-nav .mat-hassub > a { flex: 1 1 0; min-width: 0; }
    /* Folded away only where the arrow button exists (site-nav.js adds it) — without the script the submenu simply stays visible. */
    .main-nav .mat-hassub > .mat-sub { flex: 1 1 100%; }
    .main-nav .mat-hassub:has(> .mat-sub-toggle) > .mat-sub { display: none; }
    .main-nav .mat-hassub.open > .mat-sub { display: flex; }
    .mat-sub-toggle { flex: 0 0 52px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .mat-sub-toggle span { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
    .mat-hassub.open > .mat-sub-toggle span { transform: rotate(225deg) translate(-2px, -2px); }
    .main-nav .mat-sub a { padding-left: 0; }
}

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

/* =========================================================================
   Blocks: pricing (+ plan) and comparison. Share .pr--accent/.pr--vivid and the *Wort* gradient
   (.hc-grad) with herocta, so a page built from the three reads as one design.
   ========================================================================= */
.pr--vivid { --hcg: linear-gradient(92deg,#3b6fff,#8b5cf6 60%,#c026d3); --hcg-solid:#7c5cff; }
.pr--accent { --hcg: linear-gradient(92deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ffffff)); --hcg-solid: var(--accent); }
.pr-title { font-family: var(--font-head), sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; }
/* A check drawn in CSS: no icon font on the public site, and it takes the block's colour. */
.pr-check { display: inline-block; flex: none; width: 7px; height: 13px; margin: 2px 12px 0 5px; border: solid var(--hcg-solid); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pr-plans { display: grid; grid-template-columns: repeat(var(--pr-cols, 3), minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.pr-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #e6e6e6); border-radius: 20px; padding: 34px 32px; box-shadow: 0 10px 30px color-mix(in srgb, var(--ink,#14151a) 6%, transparent); }
/* The recommended plan: lifted, framed in the block colour, with a flag on its top edge. */
.pr-plan.is-featured { border: 2px solid var(--hcg-solid); transform: translateY(-14px); box-shadow: 0 24px 60px color-mix(in srgb, var(--hcg-solid) 22%, transparent); }
.pr-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 6px 16px; border-radius: 999px; background: var(--hcg); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.pr-head { text-align: center; }
.pr-name { font-family: var(--font-head), sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.pr-desc { color: var(--muted, #55606e); font-size: 15px; line-height: 1.55; margin: 0; }
.pr-price { display: flex; flex-direction: column; align-items: center; margin: 26px 0 6px; line-height: 1; }
.pr-old { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: 30px; color: #a2a9b4; text-decoration: none; background: linear-gradient(transparent 46%, #e5484d 46%, #e5484d 58%, transparent 58%); padding: 0 4px; margin-bottom: 8px; }
.pr-new { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: clamp(40px, 4.4vw, 54px); letter-spacing: -0.02em; background: var(--hcg); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.pr-note { margin-top: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--hcg-solid); }
.pr-offer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; text-align: center; }
.pr-badge { padding: 5px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #0f7a55; background: #e3f7ee; }
.pr-saving { font-weight: 600; color: #0f7a55; font-size: 15px; }
.pr-features { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 13px; }
.pr-features li { display: flex; align-items: flex-start; color: var(--ink, #1a1a1a); font-size: 15px; line-height: 1.45; }
/* The spacer grows, pinning every button to the card's foot so the buttons line up however long the lists are. */
.pr-spacer { flex: 1 0 30px; }
.pr-btn { display: block; text-align: center; padding: 14px 20px; border-radius: 12px; font-weight: 700; text-decoration: none; color: var(--ink, #1a1a1a); background: color-mix(in srgb, var(--ink,#14151a) 7%, #fff); transition: transform .15s ease, box-shadow .15s ease; }
.pr-plan.is-featured .pr-btn { color: #fff; background: var(--hcg); box-shadow: 0 12px 30px color-mix(in srgb, var(--hcg-solid) 35%, transparent); }
.pr-btn:hover { transform: translateY(-2px); }
.pr-extras { margin-top: 64px; padding: 44px 40px; border: 1px solid var(--line, #e6e6e6); border-radius: 24px; background: color-mix(in srgb, var(--hcg-solid) 4%, #fff); text-align: center; }
.pr-extras h3 { font-family: var(--font-head), sans-serif; font-size: 26px; margin: 0 0 8px; }
.pr-extras-intro { color: var(--muted, #55606e); margin: 0 0 26px; }
.pr-extras-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.pr-extras-list li { display: flex; align-items: center; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line, #e6e6e6); font-weight: 600; }
.pr-extras-list .pr-check { margin-top: -4px; }
@media (max-width: 900px) {
    .pr-plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .pr-plan.is-featured { transform: none; margin-top: 12px; }
    .pr-extras-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pr-extras { padding: 30px 20px; } .pr-extras-list { grid-template-columns: 1fr; } }

/* Comparison: the "pro" side in green with checks and a frame in the block colour, the "con" side in red with crosses. */
.cmp-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.cmp-side { background: #fff; border: 1px solid var(--line, #e6e6e6); border-radius: 22px; padding: 32px; }
.cmp--pro { border: 2px solid color-mix(in srgb, var(--hcg-solid) 55%, transparent); box-shadow: 0 20px 50px color-mix(in srgb, var(--hcg-solid) 14%, transparent); }
.cmp-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 14px; background: #eef0f3; color: #4b5563; }
.cmp--pro .cmp-badge { background: var(--hcg); color: #fff; }
.cmp-title { display: flex; align-items: flex-start; font-family: var(--font-head), sans-serif; font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.cmp-text { color: var(--muted, #55606e); margin: 0 0 22px; line-height: 1.6; }
.cmp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cmp-items li { display: flex; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid; line-height: 1.5; }
.cmp-items strong { display: block; margin-bottom: 2px; }
.cmp-items span { color: var(--muted, #55606e); font-size: 15px; }
.cmp--pro .cmp-items li { background: #effaf4; border-color: #bfe8d2; }
.cmp--con .cmp-items li { background: #fdf1f2; border-color: #f4c6ca; }
/* The mark: a check on the pro side, a cross on the con side — both pure CSS. */
.cmp-mark { position: relative; flex: none; width: 18px; height: 18px; margin: 3px 14px 0 0; }
.cmp--pro .cmp-mark::before { content: ""; position: absolute; left: 5px; top: 0; width: 6px; height: 12px; border: solid #16a34a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.cmp--con .cmp-mark::before, .cmp--con .cmp-mark::after { content: ""; position: absolute; left: 8px; top: 1px; width: 2.5px; height: 16px; border-radius: 2px; background: #e5484d; transform: rotate(45deg); }
.cmp--con .cmp-mark::after { transform: rotate(-45deg); }
.cmp-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 20px; border-radius: 14px; font-size: 14px; }
.cmp-total strong { font-size: 20px; white-space: nowrap; }
.cmp--pro .cmp-total { background: #effaf4; color: #0f7a55; }
.cmp--con .cmp-total { background: #fdf1f2; color: #b4232a; }
.cmp-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted, #55606e); }
@media (max-width: 860px) { .cmp-sides { grid-template-columns: 1fr; } .cmp-side { padding: 24px; } }

/* =========================================================================
   Block: bento — tiles of different sizes in one grid, content at the tile's foot. Same colours as pricing.
   ========================================================================= */
.bento-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); grid-auto-flow: dense; gap: 22px; }
.bento-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px 32px; border-radius: 22px; border: 1px solid var(--line, #e6e6e6);
    background: linear-gradient(160deg, #fff 40%, color-mix(in srgb, var(--hcg-solid) 6%, #fff)); box-shadow: 0 12px 34px color-mix(in srgb, var(--ink,#14151a) 6%, transparent);
    transition: transform .2s ease, box-shadow .2s ease; }
.bento--wide { grid-column: span 2; }
.bento--tall { grid-row: span 2; }
.bento--big { grid-column: span 2; grid-row: span 2; }
.bento-icon { font-size: 44px; line-height: 1; color: var(--ink, #1a1a1a); margin-bottom: 6px; }
.bento--big .bento-icon { font-size: 60px; }
.bento-title { font-family: var(--font-head), sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.01em; margin: 0; }
.bento--big .bento-title, .bento--wide .bento-title { font-size: 28px; }
.bento-text { color: var(--muted, #55606e); line-height: 1.65; margin: 0; max-width: 62ch; }
.bento--link:hover { transform: translateY(-3px); box-shadow: 0 18px 44px color-mix(in srgb, var(--hcg-solid) 16%, transparent); }
.bento-cover { position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 900px) { .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento--big { grid-row: span 1; } }
@media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento--wide, .bento--big { grid-column: span 1; } .bento--tall, .bento--big { grid-row: span 1; } .bento-tile { min-height: 200px; } }

/* =========================================================================
   Block: testimonials — reviews in columns; "scroll" lets every column drift (alternating), faded top and bottom.
   ========================================================================= */
.tm-grid { display: grid; grid-template-columns: repeat(var(--tm-cols, 3), minmax(0, 1fr)); gap: 22px; align-items: start; }
/* margin instead of gap inside a column: the doubled track is then EXACTLY twice one list, so moving it by half
   loops without a jump. */
.tm-card { margin: 0 0 22px; padding: 22px 24px; background: #fff; border: 1px solid var(--line, #e6e6e6); border-radius: 18px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ink,#14151a) 5%, transparent); }
.tm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tm-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.tm-avatar--initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px;
    background: linear-gradient(135deg, hsl(var(--tm-hue, 220) 55% 55%), hsl(calc(var(--tm-hue, 220) + 30) 55% 40%)); }
.tm-who { display: flex; flex-direction: column; line-height: 1.3; }
.tm-who strong { font-size: 16px; }
.tm-who span { color: var(--muted, #55606e); font-size: 13.5px; }
.tm-stars { color: #d6d9de; font-size: 18px; letter-spacing: 2px; margin-bottom: 8px; }
.tm-stars .on { color: #f5b301; }
.tm-text { margin: 0; color: var(--ink, #1a1a1a); line-height: 1.65; font-size: 15.5px; }
.tm-dup { display: contents; }
.tm--scroll { height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.tm--scroll .tm-track { animation: tm-up var(--tm-dur, 40s) linear infinite; }
.tm--scroll .tm-col--reverse .tm-track { animation-direction: reverse; }
.tm--scroll:hover .tm-track { animation-play-state: paused; }
@keyframes tm-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .tm--scroll { height: auto; -webkit-mask-image: none; mask-image: none; } .tm--scroll .tm-track { animation: none; } .tm--scroll .tm-dup { display: none; } }
@media (max-width: 860px) { .tm-grid { grid-template-columns: 1fr; } .tm--scroll { height: auto; -webkit-mask-image: none; mask-image: none; } .tm--scroll .tm-track { animation: none; } .tm--scroll .tm-dup { display: 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; } }

/* Count-up / countdown block, FlipClock look: each digit its own black card, groups split by a
   colon, digits in the theme accent. Self-contained; no external clock library. */
.countup { padding: 32px 0; text-align: center; }
.countup .cu-heading { margin: 0 0 16px; }
.fc { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.fc-d { position: relative; background: #111; color: var(--accent, #2563eb); font-weight: 700; font-size: 2.6rem; line-height: 1; padding: 12px 9px; border-radius: 7px; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.fc-d::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; transform: translateY(-.5px); background: rgba(255,255,255,.12); }
.fc-c { color: var(--accent, #2563eb); font-weight: 700; font-size: 2rem; padding: 0 1px; }
@media (max-width: 560px) { .fc-d { font-size: 1.8rem; padding: 9px 6px; min-width: 20px; } .fc-c { font-size: 1.4rem; } }

/* --- Admin bar over the live site (logged-in back-office admins) ------------------------------ */
/* The bar over the LIVE site is the back office's top bar (MatUi, compact): the menu's logo column on the left
   (236px, the menu's ground), the view switch and the icon actions on the right. The public site does not load
   matui.css (it would restyle the customer's template), so the few MatUi values it needs are set ON the bar as
   its own variables — the same numbers as the tokens in lib/matui/matui.css. Always light: the site underneath
   has no dark mode. Sticky in normal flow — pushes the site down, never overlaps. */
.mat-adminbar {
    --mab-h: var(--mat-adminbar-h, 52px); --mab-nav-w: 236px;
    --mab-bg: #f5f4f1; --mab-nav: #eeede9; --mab-line: rgba(31, 30, 27, .13); --mab-hover: #efeeea;
    --mab-text: #1f1e1b; --mab-muted: #5d5b55; --mab-accent: #2563eb; --mab-accent-soft: rgba(37, 99, 235, .19);
    --mab-accent-text: #1d4ed8; --mab-danger-bg: rgba(217, 45, 74, .10); --mab-danger: #b3203b;
    position: sticky; top: 0; z-index: 2147483000; height: var(--mab-h); box-sizing: border-box;
    background: var(--mab-bg); border-bottom: 1px solid var(--mab-line); color: var(--mab-text);
    font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* No horizontal padding: the logo column touches the left edge like the back office's menu. The actions carry their own right padding. */
.mat-adminbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; box-sizing: border-box; }
/* The site's OWN sticky header must stick BELOW the admin bar, not fight it for the same top:0. Offset =
   the bar's full height. Only when the bar renders. --mat-adminbar-h is the number for a template's own sticky
   header (top: var(--mat-adminbar-h, 0)) — never write the pixels: templates copied the old "top: 67px" when the bar
   was 67px high and showed a 15px gap above their header once it became 52. The html in front makes this rule win
   over such a copy in a template's CSS (which comes later), so those sites are right again without touching them. */
body.has-adminbar { --mat-adminbar-h: 52px; }
html body.has-adminbar .site-header { top: var(--mat-adminbar-h); }
/* The logo column, NO text — the same column the back office's menu shows, so the live site and the admin look like one product. */
.mab-brand { display: inline-flex; align-items: center; height: 100%; width: var(--mab-nav-w); box-sizing: border-box;
    padding: 0 14px; background: var(--mab-nav); border-right: 1px solid var(--mab-line); text-decoration: none; flex: 0 0 auto; }
/* max-height + max-width:100% so it fits the column and never collapses to 0 width (which a bare width:auto does inside an auto-width flex parent). */
.mab-logo { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
/* The right padding is the back office's top bar's (MatUi's compact content padding: 28 / 24 / 16 px, the same steps as admin-matui.css), so the switch at the end lands on the same pixels in all three views. */
.mab-right { display: inline-flex; align-items: center; gap: 4px; padding-right: calc(28px + env(safe-area-inset-right, 0px)); flex: 0 0 auto; }
@media (max-width: 1199px) { .mab-right { padding-right: calc(24px + env(safe-area-inset-right, 0px)); } }
@media (max-width: 899px) { .mab-right { padding-right: calc(16px + env(safe-area-inset-right, 0px)); } }
.mab-logout { margin: 0; display: inline-flex; }
/* While the bar is shown (signed-in admins only) the window's scrollbar is the back office's: thin, its room always kept.
   Otherwise the switch would sit a normal scrollbar's width further in than in the admin, or move when a page scrolls. */
html:has(> body.has-adminbar) { scrollbar-width: thin; scrollbar-gutter: stable; }
.mab-right > .mat-viewswitch { margin-left: 4px; }
/* Icon-only actions (account, logout): MatUi's ghost icon buttons, 34px, muted until hovered. "Edit this page" is the
   bar's main action and the one icon in the accent, filled (MatUi SHELL-17). */
.mab-stool { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 18px;
    text-decoration: none; color: var(--mab-muted); font-family: inherit; transition: background .12s ease, color .12s ease; }
.mab-stool:hover { background: var(--mab-hover); color: var(--mab-text); }
.mab-stool.mab-edit { background: var(--mab-accent); color: #fff; margin-right: 4px; }
.mab-stool.mab-edit:hover { background: color-mix(in oklab, var(--mab-accent) 86%, black); color: #fff; }
.mab-stool.mab-out:hover { background: var(--mab-danger-bg); color: var(--mab-danger); }
/* Mobile: the logo column shrinks (the logo scales down via max-width), so the whole row — logo, account, logout,
   switch — fits one line on a phone. The switch keeps its size and its place, as everywhere. */
@media (max-width: 640px) {
    .mab-brand { width: 120px; padding: 0 10px; }
    .mab-right { gap: 2px; }
}

/* Cloud | Website | Admin — the ONE view switcher, shared across the cloud's bar, the public site's admin bar and
   the instance back-office (site.css is loaded on all three). MatUi's segmented control: 34px high, a hairline
   around it, muted icons, the current view tinted in the accent (one colour, not one per view). `_ViewSwitch.cshtml`
   renders it. Fixed pixel sizes on purpose (34 x 34 with its line): it must be the SAME control on the same pixels in
   the site's bar and both back offices, at every screen and pointer — admin-matui.css only recolours it for dark mode. */
.mat-viewswitch { display: inline-flex; align-items: center; flex: 0 0 auto;
    border: 1px solid rgba(31, 30, 27, .13); border-radius: 6px; overflow: hidden; background: #fff; }
.mat-vs { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px;
    border: 0; background: transparent; cursor: pointer; text-decoration: none; font-size: 17px; color: #5d5b55; }
.mat-vs + .mat-vs { border-left: 1px solid rgba(31, 30, 27, .13); }
.mat-vs:hover { background: #efeeea; color: #1f1e1b; }
.mat-vs.is-active { background: rgba(37, 99, 235, .19); color: #1d4ed8; }

/* ============ Element blocks (editor v2: el-section, el-columns, el-heading …) ============
   A section is a band; inside it elements stack with an even gap. Colours come from the template's
   variables only (--accent, --ink, --black, --bg-alt), so the pieces fit every theme; a template
   restyles them through these classes like any other block. */
.el-section { padding: 64px 0; position: relative; }
.el-section.el-pad-none { padding: 0; }
.el-section.el-pad-s { padding: 32px 0; }
.el-section.el-pad-l { padding: 96px 0; }
.el-section.el-pad-xl { padding: 140px 0; }
.el-section.el-h-half { min-height: 50vh; display: flex; align-items: center; }
.el-section.el-h-screen { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.el-section.el-h-half > .container, .el-section.el-h-screen > .container { width: 100%; }
.el-bg-alt { background: var(--bg-alt); }
.el-bg-accent { background: var(--accent); color: #fff; }
.el-bg-dark { background: #111; color: #eee; }
.el-bg-accent :is(h1, h2, h3, h4), .el-bg-dark :is(h1, h2, h3, h4) { color: inherit; }
.el-bg-image { background-size: cover; background-repeat: no-repeat; color: #fff; }
.el-bg-image :is(h1, h2, h3, h4) { color: #fff; }
.el-bg-image::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.el-bg-image.el-ov-light::before { background: rgba(0, 0, 0, .25); }
.el-bg-image.el-ov-medium::before { background: rgba(0, 0, 0, .45); }
.el-bg-image.el-ov-strong::before { background: rgba(0, 0, 0, .65); }
.el-bg-image > .container { position: relative; }

.el-inner, .el-column { display: flex; flex-direction: column; gap: 18px; }
.el-inner.el-w-narrow { max-width: min(var(--max), 760px); }
.el-inner.el-w-wide { max-width: min(1440px, 100%); }
.el-align-left { text-align: left; }
.el-align-center { text-align: center; }
.el-align-right { text-align: right; }
.el-inner.el-align-center, .el-column.el-align-center { align-items: center; }
.el-inner.el-align-right, .el-column.el-align-right { align-items: flex-end; }
:is(.el-heading, .el-text, .el-image, .el-buttons).el-align-left { align-self: flex-start; }
:is(.el-heading, .el-text, .el-image, .el-buttons).el-align-center { align-self: center; }
:is(.el-heading, .el-text, .el-image, .el-buttons).el-align-right { align-self: flex-end; }

.el-heading { max-width: 100%; }
.el-heading :is(h1, h2, h3, h4) { margin: 0; }
.el-heading.el-size-s :is(h1, h2, h3, h4) { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.el-heading.el-size-m :is(h1, h2, h3, h4) { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.el-heading.el-size-l :is(h1, h2, h3, h4) { font-size: clamp(2rem, 4.2vw, 3rem); }
.el-heading.el-size-xl :is(h1, h2, h3, h4) { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.08; }
.el-hl { color: var(--accent); }
.el-kicker { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.el-text { max-width: 100%; }
.el-text > :last-child { margin-bottom: 0; }
.el-text.el-size-s { font-size: .92em; }
.el-text.el-size-l { font-size: 1.18em; line-height: 1.7; }
.el-text.el-measure { max-width: 68ch; }

.el-image { margin: 0; max-width: 100%; }
.el-image img { display: block; width: 100%; height: auto; }
.el-image.el-isize-l { width: min(100%, 75%); }
.el-image.el-isize-m { width: min(100%, 50%); }
.el-image.el-isize-s { width: min(100%, 320px); }
.el-image.el-isize-xs { width: min(100%, 160px); }
.el-image.el-shape-rounded img { border-radius: 14px; }
.el-image.el-shape-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.el-image.el-shape-square img { aspect-ratio: 1; object-fit: cover; }
.el-image.el-shape-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.el-image.el-shape-landscape img { aspect-ratio: 16 / 9; object-fit: cover; }
.el-image figcaption { margin-top: 8px; font-size: .9em; opacity: .75; }

/* align-items: center — a link-style button is plain text next to padded boxes; without it the text
   sat at the top of the row instead of in line with the button beside it. */
.el-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.el-buttons.el-stack-column { flex-direction: column; align-items: flex-start; }
.el-inner.el-align-center .el-buttons, .el-column.el-align-center .el-buttons, .el-buttons.el-align-center { justify-content: center; }
.el-inner.el-align-right .el-buttons, .el-column.el-align-right .el-buttons, .el-buttons.el-align-right { justify-content: flex-end; }
.el-buttons.el-stack-column.el-align-center, .el-align-center .el-buttons.el-stack-column { align-items: center; }
.el-btn-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.el-btn-link::after { content: " →"; }
.el-btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.el-spacer { height: 32px; }
.el-spacer.el-space-s { height: 12px; }
.el-spacer.el-space-l { height: 64px; }
.el-spacer.el-space-xl { height: 112px; }
.el-spacer.el-line { position: relative; }
.el-spacer.el-line::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; opacity: .18; }

.el-columns { display: grid; gap: 40px; align-items: start; width: 100%; }
.el-columns.el-gap-s { gap: 20px; }
.el-columns.el-gap-l { gap: 72px; }
.el-columns.el-valign-center { align-items: center; }
.el-columns.el-valign-bottom { align-items: end; }
.el-cols-50-50 { grid-template-columns: 1fr 1fr; }
.el-cols-33-67 { grid-template-columns: 1fr 2fr; }
.el-cols-67-33 { grid-template-columns: 2fr 1fr; }
.el-cols-25-75 { grid-template-columns: 1fr 3fr; }
.el-cols-75-25 { grid-template-columns: 3fr 1fr; }
.el-cols-40-60 { grid-template-columns: 2fr 3fr; }
.el-cols-60-40 { grid-template-columns: 3fr 2fr; }
.el-cols-33-33-33 { grid-template-columns: repeat(3, 1fr); }
.el-cols-25-25-25-25 { grid-template-columns: repeat(4, 1fr); }
.el-column { min-width: 0; }
.el-column.el-bg-alt, .el-column.el-bg-accent, .el-column.el-bg-dark { border-radius: 12px; }
.el-column.el-ipad-s { padding: 16px; }
.el-column.el-ipad-m { padding: 28px; }
.el-column.el-ipad-l { padding: 44px; }
@media (max-width: 900px) {
    .el-cols-25-25-25-25 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    /* A phone has room for one column; "keep" leaves the grid as it is (e.g. two small icons). */
    .el-columns.el-mobile-stack, .el-columns.el-mobile-reverse { display: flex; flex-direction: column; gap: 28px; }
    .el-columns.el-mobile-reverse { flex-direction: column-reverse; }
    /* "> .mat-ed-child > *": in the editor preview each column sits in a display:contents wrapper. */
    :is(.el-columns.el-mobile-stack, .el-columns.el-mobile-reverse) > :is(.el-column, .mat-ed-child > .el-column) { width: 100%; }
    .el-section { padding: 44px 0; }
    .el-section.el-pad-s { padding: 24px 0; }
    .el-section.el-pad-l, .el-section.el-pad-xl { padding: 64px 0; }
    .el-image.el-isize-l, .el-image.el-isize-m { width: 100%; }
}

/* ---------- Plugin UI library (UiRenderer): layout primitives shared by the back office and the public site ---------- */
.ui-stack { display: flex; flex-direction: column; gap: 16px; }
.ui-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ui-grid { display: grid; gap: 18px; }
.ui-card { border: 1px solid var(--line); background: var(--bg); padding: 20px; }
.ui-card h2 { font-size: 20px; margin: 0 0 12px; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th, .ui-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ui-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* A search box a plugin puts into a menu (the shop's). The markup is a template part, so a template can replace it; this is the look it has until it does — it follows the template's accent. */
.mat-search { display: flex; align-items: stretch; flex: 1 1 220px; min-width: 150px; max-width: 440px; border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 999px; background: #fff; overflow: hidden; }
.mat-search:focus-within { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.mat-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 14px; font: inherit; color: inherit; outline: none; }
.mat-search button { border: 0; background: var(--accent); color: #fff; padding: 0 15px; cursor: pointer; display: inline-flex; align-items: center; }
.mat-search button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The suggestions under a shop search box (script in the shop plugin: ShopSuggest). The list sits in <body>, so a box that clips its content cannot cut it off; it follows the template's colours. */
.shop-suggest { position: absolute; z-index: 1000; max-width: min(92vw, 440px); background: var(--bg, #fff); color: var(--text, inherit); border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); overflow: hidden; padding: 4px; }
.shop-suggest .shop-sg-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
.shop-suggest .shop-sg-item.on, .shop-suggest .shop-sg-item:hover { background: var(--bg-soft, rgba(0,0,0,.06)); }
.shop-suggest .shop-sg-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.shop-suggest .ph { width: 44px; height: 44px; border-radius: 6px; flex: none; background: var(--bg-soft, rgba(0,0,0,.08)); }
.shop-suggest .t { display: flex; flex-direction: column; min-width: 0; } .shop-suggest .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-suggest .p { font-size: .85em; opacity: .7; }
.shop-suggest .shop-sg-fix { flex-wrap: wrap; gap: 4px; } .shop-suggest .shop-sg-fix .n { font-weight: 600; text-decoration: underline; }
/* On a phone the header wraps: logo and menu button on top, the icon strip (search first) as a row of its own below. */
/* On a phone the search box is an ICON between the other header icons (a bar of its own made the header two rows high); a tap opens it as a bar across the top of the screen (site-nav.js). */
@media (max-width: 760px) {
    .header-inner { row-gap: 8px; }
    .mat-search { flex: none; min-width: 0; max-width: none; border: 0; border-radius: 0; background: none; overflow: visible; }
    .mat-search:focus-within { box-shadow: none; }
    .mat-search input { display: none; }
    .mat-search button { background: none; color: var(--accent); padding: 0; }
    .mat-search button svg { width: 27px; height: 27px; }
    .mat-search.is-open { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 1200; display: flex; background: var(--bg, #fff); border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: 999px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
    .mat-search.is-open input { display: block; padding: 13px 18px; font-size: 16px; }   /* 16px: iOS zooms into a smaller field */
    .mat-search.is-open button { background: var(--accent); color: #fff; padding: 0 18px; }
    .mat-search.is-open button svg { width: 20px; height: 20px; }
}