/* ============================================================
   Preview "Whoop-style" — light/paper-dominant, big imagery,
   sticky nav, split hero, alternating image-text service blocks.
   Uses NEO tokens from /assets/tokens.css.
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anker-Ziel bündig unter die fixierte Navleiste (~69px) legen.
       Die Luft zur Überschrift liefert das Section-Padding selbst —
       bei größeren Werten scheint sonst der Block davor durch. */
    scroll-padding-top: 69px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.55;
    color: var(--neo-ink);
    background: var(--neo-paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
    color: inherit;
}
p { margin: 0; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.caption {
    font-family: var(--font-display);
    font-size: var(--size-caption);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-stone);
}

/* ---------- Preview banner ---------- */

.preview-bar {
    background: var(--neo-ink);
    color: var(--neo-cream);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px var(--gutter);
    text-align: center;
}

.preview-bar a {
    color: var(--neo-cream);
    border-bottom: 1px solid var(--neo-stone);
    margin-left: var(--s-4);
}

/* ---------- Sticky nav ---------- */

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(245, 241, 232, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(139, 133, 120, 0.2);
}

.nav-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-8);
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    font-family: var(--font-display);
    line-height: 1;
    border-bottom: 0;
}
.brand:hover { border-bottom: 0; opacity: 1; }
.brand__mark { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--neo-ink); }
.brand__text { font-weight: 500; font-size: 13px; letter-spacing: 0.22em; color: var(--neo-ink); }
.foot .brand { display: inline-flex; border-bottom: 0; }

.nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--neo-ink);
}
.nav-links a { padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color .15s; }
.nav-links a:hover { border-bottom-color: var(--neo-ink); }

/* Hamburger toggle — visible only below the desktop breakpoint. */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--neo-ink);
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: the links + CTA live in a dropdown panel, hidden until toggled. */
.nav-menu { display: none; }
.nav-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--s-6) var(--gutter) var(--s-8);
    background: rgba(245, 241, 232, 0.98);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(139, 133, 120, 0.2);
}
.nav-menu.is-open .btn { width: 100%; text-align: center; }

/* Desktop: links sit inline next to the Erstgespräch button, no hamburger. */
@media (min-width: 880px) {
    .nav-toggle { display: none; }
    .nav-menu {
        display: flex;
        align-items: center;
        gap: var(--s-8);
        margin-left: auto;
    }
    .nav-links { flex-direction: row; gap: var(--s-8); }
}

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 12px 22px;
    background: var(--neo-ink);
    color: var(--neo-cream);
    border: 1px solid var(--neo-ink);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--neo-ink); }

.btn--ghost { background: transparent; color: var(--neo-ink); }
.btn--ghost:hover { background: var(--neo-ink); color: var(--neo-cream); }

.btn--lg { padding: 16px 32px; font-size: 15px; }

.btn--on-dark { background: var(--neo-cream); color: var(--neo-ink); border-color: var(--neo-cream); }
.btn--on-dark:hover { background: transparent; color: var(--neo-cream); }

/* Uniform vertical rhythm: every section uses the same block padding
   as .stats, so the gap between any two sections matches stats → pillars. */
/* Generous top padding on every content section so each block's heading is
   clearly separated from the block above (matches the "Was wir leisten."
   section). Bottom padding stays on the tighter --section-pad rhythm. */
.section { padding-top: var(--s-12); padding-bottom: var(--section-pad); }

/* Mobile: tighter vertical rhythm — the desktop section padding feels too
   airy on phones. Reduces every section that uses --section-pad at once. */
@media (max-width: 720px) {
    :root { --section-pad: var(--s-6); }
    /* Stacked twocol: pull the small caption label (e.g. "Mieter &
       Verwaltung") closer to its body text and trim the space above it. */
    .twocol { gap: var(--s-6); }
    .twocol__label { padding-top: 0; }
}

/* Full-width dark bands with rounded corners on the constant beige page.
   The dark background spans edge to edge; the inner .container keeps the
   content centred and aligned with the light sections. */
.section--ink,
.pillars {
    background: var(--neo-ink);
    color: var(--neo-cream);
}

/* CTA panel ("Unverbindliche Objektanalyse") spans the full section
   width like every other section; its text stays at a readable measure. */
/* CTA jetzt als .twocol aufgebaut: links die Überschrift, rechts die beiden
   Textabschnitte untereinander — Raster/Spaltenbreite kommen aus .twocol. */
.cta-card { max-width: none; text-align: left; border: 0; padding: 0; }
.cta-card p { color: var(--neo-cream); }
.cta-card .reach__intro { color: var(--neo-cream); margin-bottom: var(--s-6); }
/* CTA button on its own line, left-aligned with the copy. */
.cta-card .btn { display: block; width: fit-content; margin-inline: 0; }

/* „Objektanalyse anfragen" als eigene, zentrierte Zeile über die volle
   Breite unter dem zweispaltigen Radar-/CTA-Block. */
.cta-fullwidth { text-align: center; margin-top: var(--s-10); }

/* Radar sweep — leading line + faded trailing wedge. Rotation and the
   per-city brighten/fade are driven in JS; this just styles + reveals it. */
.reach__sweep-line { stroke: var(--neo-cream); stroke-width: 1.5; opacity: .6; }
.reach__sweep { opacity: 0; transition: opacity .8s ease; }
.reach.is-visible .reach__sweep { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reach__sweep { display: none; } }

/* Einsatzgebiet: map (intro + circle) on the left, CTA on the right, on one row. */
.einsatz-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
    align-items: start;
}
@media (min-width: 900px) {
    .einsatz-layout { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}

/* Intro paragraph left-aligned in its column. */
.reach__intro { text-align: left; }

/* Hannover sits a touch larger than the satellite cities. */
.reach__center-label { font-size: 15px; }

/* Satellite city labels a touch brighter than the default muted tone.
   Hannover (centre label) and Neustadt (--key, cream) keep their own colour. */
.reach__city:not(.reach__city--key) text { fill: #CBC3B2; }

/* CTA heading sits a step below the section heading "Bis zu 100 km um Hannover." */
.cta-card h2 { font-size: clamp(18px, 1.8vw, 22px); }

/* Kontakt-Grid an .twocol angleichen (5fr/7fr statt 1fr/1fr), damit das
   Formular in der rechten Spalte bündig unter dem Textblock (Team-Bio)
   darüber sitzt statt weiter nach rechts eingerückt zu sein. */
@media (min-width: 720px) {
    .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Kontakt is a light section now: make the contact text dark-on-light. */
.section--paper .contact-info dt { color: var(--neo-stone); }
.section--paper .contact-info dd,
.section--paper .contact-info a { color: var(--neo-ink); }

/* Contact form sits on paper too — dark-on-light variants. */
.section--paper .contact-form label { color: var(--neo-stone); }
.section--paper .contact-form .field__opt { color: var(--neo-muted); }
.section--paper .contact-form input,
.section--paper .contact-form textarea { color: var(--neo-ink); }
.section--paper .contact-form input:focus,
.section--paper .contact-form textarea:focus { border-color: var(--neo-ink); }
.section--paper .contact-form ::placeholder { color: var(--neo-muted); }
.section--paper .field-check { color: var(--neo-stone); }
.section--paper .field-check a { color: var(--neo-ink); }
.section--paper .field-check input { accent-color: var(--neo-ink); }
.section--paper .contact-form__status.is-ok { color: var(--neo-ink); }

/* ---------- Hero (split) ---------- */

.hero {
    padding-block: var(--s-12);
    background: var(--neo-paper);
    color: var(--neo-ink);
    border-bottom: 0;
}

.hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
    align-items: center;
}

@media (min-width: 980px) {
    .hero__grid { grid-template-columns: 6fr 6fr; gap: var(--s-16); }
}

.hero__caption { margin-bottom: var(--s-6); }

.hero__title {
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-8);
}

.hero__title .dot { color: inherit; }

.hero__lead {
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.45;
    color: var(--neo-stone);
    max-width: 50ch;
    margin-bottom: var(--s-12);
}

.hero__ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ---------- Hero: full-bleed background photo (homepage) ---------- */
/* The photo fills the whole section, a dark veil sits over it, and the
   text reads in cream on top. Overrides the split-hero base above. */

.hero--bg {
    position: relative;
    isolation: isolate;
    background: var(--neo-ink);
    color: var(--neo-cream);
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: min(78vh, 760px);
    padding-block: var(--s-16);
}

.hero--bg .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero--bg .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    display: block;
    filter: saturate(0.8) contrast(0.95);
}

/* Dark veil: stronger on the left where the text sits, fading toward the
   right, plus a slight top+bottom darkening for nav/scroll legibility. */
.hero--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(20,20,20,0.86) 0%, rgba(20,20,20,0.66) 48%, rgba(20,20,20,0.42) 100%),
        linear-gradient(180deg, rgba(20,20,20,0.30) 0%, rgba(20,20,20,0.08) 35%, rgba(20,20,20,0.50) 100%);
}

.hero--bg .container { position: relative; z-index: 2; }
.hero--bg .hero__text { max-width: 640px; }
.hero--bg .hero__caption { color: var(--neo-cream); opacity: 0.85; }
.hero--bg .hero__lead { color: rgba(232, 223, 201, 0.92); }

/* Buttons tuned for the dark photo: solid cream primary, light-outline ghost. */
.hero--bg .btn {
    background: var(--neo-cream);
    color: var(--neo-ink);
    border-color: var(--neo-cream);
}
.hero--bg .btn:hover { background: transparent; color: var(--neo-cream); }
.hero--bg .btn--ghost {
    background: transparent;
    color: var(--neo-cream);
    border-color: rgba(232, 223, 201, 0.6);
}
.hero--bg .btn--ghost:hover { background: var(--neo-cream); color: var(--neo-ink); border-color: var(--neo-cream); }

/* ---------- Image placeholders ---------- */

.img-frame {
    position: relative;
    background: var(--neo-ink);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.img-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg,
            transparent 0,
            transparent 22px,
            rgba(232, 223, 201, 0.04) 22px,
            rgba(232, 223, 201, 0.04) 24px);
}

.img-frame__label {
    position: absolute;
    left: var(--s-6);
    bottom: var(--s-6);
    right: var(--s-6);
    color: var(--neo-muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.img-frame__label::before {
    content: "Foto folgt · ";
    color: var(--neo-stone);
}

.img-frame--tall { aspect-ratio: 3 / 4; }
.img-frame--wide { aspect-ratio: 16 / 9; }

/* Photo variant: hides hash pattern + label, shows actual <img>
   with a subtle filter so colours stay aligned with the muted palette. */
.img-frame--photo::before,
.img-frame--photo .img-frame__label {
    display: none;
}

.img-frame--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.82) contrast(0.96);
}

.img-frame--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(26,26,26,0) 60%, rgba(26,26,26,0.18) 100%);
}

/* Hero image: cap its height to the text column beside it.
   The frame is taken out of flow (absolute), so the grid row collapses to
   the text height; the frame then stretches to fill that height at full
   column width. The image covers it, keeping its width and cropping the
   excess from the top (object-position bottom anchors the lower edge). */
@media (min-width: 980px) {
    .hero__grid { align-items: stretch; }

    .hero__image { position: relative; }

    .hero__image .img-frame--tall {
        position: absolute;
        inset: 0;
        height: auto;
        aspect-ratio: auto;
    }

    .hero__image .img-frame--tall img {
        /* Split the (fixed) vertical crop ~14:8 top:bottom → ~64% from top. */
        object-position: center 64%;
    }
}

/* ---------- Stat strip ---------- */

.stats {
    color: var(--neo-ink);
    padding-top: var(--s-6);
    padding-bottom: var(--section-pad);
    text-align: center;
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8);
}

@media (min-width: 760px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat__num {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--neo-ink);
    margin-bottom: var(--s-2);
}

.stat__label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neo-stone);
}

/* ---------- Three pillars ---------- */

.pillars {
    padding-top: var(--s-12);
    padding-bottom: var(--section-pad);
}

.pillars__head { max-width: 900px; margin-bottom: var(--s-8); }
.pillars__head h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.pillars__head h2 .dot { color: inherit; }
/* Desktop: keep "Service, der sich messen lässt." on a single line.
   Below the breakpoint the viewport is narrower than the line, so it
   wraps naturally — nowrap only kicks in where there's room. */
@media (min-width: 880px) { .pillars__head h2 { white-space: nowrap; } }

.pillars__grid {
    display: grid;
    gap: var(--s-12);
    grid-template-columns: 1fr;
}
@media (min-width: 760px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }

.pillar {
    border-top: 1px solid var(--neo-stone);
    padding-top: var(--s-6);
}

.pillar__num {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--neo-stone);
    margin-bottom: var(--s-4);
}

.pillar h3 {
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-4);
}

.pillar p { color: var(--neo-stone); max-width: 38ch; }

/* ---------- Services carousel (Whoop-style horizontal scroll-snap) ---------- */

.services {
    padding-top: var(--s-12);
    padding-bottom: var(--s-2);
    background: transparent;
}

.services__head { margin-bottom: var(--s-8); max-width: var(--text-max); }
.services__head h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-top: var(--s-4);
    margin-bottom: var(--s-4);
}
.services__head h2 .dot { color: inherit; }
.services__head p {
    color: var(--neo-stone);
    font-size: 17px;
    max-width: 60ch;
}

.carousel {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
}

.carousel__viewport {
    overflow: hidden;
    cursor: grab;
}
.carousel__viewport.is-dragging { cursor: grabbing; }

.carousel__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 4px 0 24px;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.carousel__track.is-animating {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.svc-card {
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 380px;
    min-height: 480px;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    background: var(--neo-ink);
    cursor: pointer;
    isolation: isolate;
}

@media (min-width: 600px)  { .svc-card { flex: 0 0 320px; width: 320px; min-height: 426px; } }
@media (min-width: 980px)  { .svc-card { flex: 0 0 360px; width: 360px; min-height: 480px; } }

.svc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) contrast(0.97);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.svc-card:hover img,
.svc-card:focus-within img { transform: scale(1.04); }

/* Two-wrench photo: keep BOTH wrenches centered in the clear band between the
   title and the description, at native zoom, with no text overlap. Card height
   and title size differ per breakpoint, so the nudge is tuned for each. Hover
   holds the same position (no zoom) so the wrenches never drift into the text. */
.svc-card--img-low img {
    transform: scale(1) translateY(16.5px);   /* desktop (>= 980px) */
    transform-origin: center;
}
.svc-card--img-low:hover img,
.svc-card--img-low:focus-within img {
    transform: scale(1) translateY(16.5px);
}
@media (min-width: 600px) and (max-width: 979px) {   /* tablet: shorter card (~427px) */
    .svc-card--img-low img,
    .svc-card--img-low:hover img,
    .svc-card--img-low:focus-within img {
        transform: scale(0.93) translateY(8.8px);
    }
}

/* Mobile: the card is taller here (min-height wins over the 3:4 ratio), so the
   default downward nudge leaves the wrench pair too low — the lower wrench slips
   behind the description. Same zoom as before, just shifted up so both wrenches
   sit centered in the gap between the title and the description. */
@media (max-width: 599px) {
    .svc-card--img-low img {
        transform: scale(1) translateY(12.5px);
    }
    .svc-card--img-low:hover img,
    .svc-card--img-low:focus-within img {
        transform: scale(1) translateY(12.5px);
    }
}

.svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26,26,26,0.55) 0%,
        rgba(26,26,26,0.15) 30%,
        rgba(26,26,26,0.05) 55%,
        rgba(26,26,26,0.85) 100%);
    z-index: 1;
}

.svc-card__head {
    position: relative;
    z-index: 2;
    padding: var(--s-8);
    color: var(--neo-cream);
}

.svc-card__num {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--neo-cream);
    opacity: .65;
    margin-bottom: var(--s-3);
}

.svc-card__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--neo-cream);
    max-width: 14ch;
}

.svc-card__body {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--s-8);
    color: var(--neo-cream);
}

.svc-card__body p {
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    opacity: .9;
    max-width: 34ch;
}

.carousel__controls {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    margin-top: var(--s-6);
}

.carousel__btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--neo-stone);
    background: transparent;
    color: var(--neo-ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 0;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.carousel__btn:hover {
    background: var(--neo-ink);
    color: var(--neo-cream);
    border-color: var(--neo-ink);
}

.carousel__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* On dark sections the default ink glyph is invisible at rest — use cream so
   the arrows are always visible, and invert to a filled cream pill on hover. */
.section--ink .carousel__btn {
    color: var(--neo-cream);
    border-color: var(--neo-cream);
}
.section--ink .carousel__btn:hover {
    background: var(--neo-cream);
    color: var(--neo-ink);
    border-color: var(--neo-cream);
}

.carousel__hint {
    margin-top: var(--s-3);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-stone);
}

@media (min-width: 980px) { .carousel__hint { display: none; } }

/* ---------- Pull quote ---------- */

.quote {
    background: var(--neo-ink);
    color: var(--neo-cream);
    padding-block: var(--s-24);
}

.quote blockquote {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

@media (min-width: 880px) {
    .quote blockquote { max-width: 26ch; }
}

.quote blockquote .dot { color: inherit; }

.quote__attr {
    margin-top: var(--s-8);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-muted);
}

/* ---------- CTA strip ---------- */

.cta-strip {
    background: var(--neo-cream);
    color: var(--neo-ink);
    padding-block: var(--s-24);
}

.cta-strip__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    align-items: flex-start;
}

@media (min-width: 880px) {
    .cta-strip__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cta-strip h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    letter-spacing: -0.02em;
    max-width: 18ch;
}

/* ---------- Über uns (team) ---------- */

.team {
    display: grid;
    gap: var(--s-12);
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .team { grid-template-columns: repeat(2, 1fr); gap: var(--s-16); }
}

.team-member {
    border-top: 1px solid var(--neo-stone);
    padding-top: var(--s-6);
}

.team-member__role { margin-bottom: var(--s-3); }

.team-member__name {
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-4);
}

.team-member__bio { color: var(--neo-ink); max-width: 46ch; }

.ueber-uns__intro {
    margin-top: var(--s-4);
    color: var(--neo-stone);
    font-size: 17px;
    max-width: 60ch;
}

/* ---------- Footer ---------- */

.foot {
    background: var(--neo-ink);
    color: var(--neo-muted);
    padding-block: var(--s-16);
    font-size: 14px;
}

.foot__grid {
    display: grid;
    gap: var(--s-8);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-12); }
}

.foot h4 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-cream);
    margin: 0 0 var(--s-3);
}

.foot a {
    color: var(--neo-muted);
    display: block;
    padding-block: 3px;
}
.foot a:hover { color: var(--neo-cream); }

/* Leistungen column: plain (non-link) labels, same layout as the link rows. */
.foot__col--plain span {
    color: var(--neo-muted);
    display: block;
    padding-block: 3px;
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal__body { max-width: var(--text-max); }

.legal__body h2 {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: var(--s-12) 0 var(--s-3);
}
.legal__body > h2:first-child { margin-top: 0; }

.legal__body p { color: var(--neo-stone); margin: 0 0 var(--s-4); }
.legal__body p:last-child { margin-bottom: 0; }

.legal__body ul {
    color: var(--neo-stone);
    margin: 0 0 var(--s-4);
    padding-left: 1.25em;
}
.legal__body li { margin-block: 2px; }

.legal__body a { color: var(--neo-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal__body a:hover { color: var(--neo-stone); }

.foot__legal {
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px solid var(--neo-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* ---------- Digitale Dokumentation page ---------- */

/* Intro reuses the hero split; keep the concept image a calm, even tone. */
.doc-intro .hero__lead { max-width: 46ch; }

/* The shared .hero h1 caps width at 14ch — too narrow for "Digitale
   Dokumentation.", which then wraps to three lines. Lift the cap and size the
   title so the long second line fits the half-width hero column; with the
   explicit <br> that yields exactly two lines. */
.doc-intro .hero__title {
    max-width: none;
    font-size: clamp(20px, 3vw, 40px);
}

/* Readable copy column for the explanatory text. */
.doc-copy { max-width: var(--text-max); }
.doc-copy p { margin: 0 0 var(--s-4); }
.doc-copy p:last-child { margin-bottom: 0; }
.section--ink .doc-copy p { color: var(--neo-cream); opacity: .85; }

/* Ticketsystem screenshot shown as a centered showcase below the intro
   twocol — the live system, ahead of the document protocols. */
.doc-shots__showcase {
    max-width: 980px;
    margin: var(--s-12) auto 0;
}
.doc-shots__showcase img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid rgba(139, 133, 120, 0.30);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}


/* Both intro paragraphs should read as full body text — override the
   .section--paper follow-on rule (styles.css) that muts them to stone. */
.doc-shots .twocol__body p + p { color: var(--neo-ink); }

/* Heading for the screenshot carousel band. */
.doc-shots__head { margin-bottom: var(--s-8); }
.doc-shots__head p { color: var(--neo-muted); margin-top: var(--s-4); }

/* "Berichte & Protokolle." sub-heading: give it clear breathing room from
   the intro above and the carousel below. Mobile felt very cramped, so the
   base values are generous; desktop gets a touch more room still. */
.doc-shots__head--sub { margin-top: var(--s-12); margin-bottom: var(--s-8); }
@media (min-width: 880px) {
    .doc-shots__head--sub { margin-top: var(--s-16); margin-bottom: var(--s-8); }
}

/* Document/screenshot card: show the whole shot (contain) on a light panel,
   with a caption below — unlike the photo svc-cards which crop (cover).
   One card at a time: each card spans the full carousel viewport width;
   the prev/next buttons step through the set. */
.doc-card {
    flex: 0 0 78vw;
    width: 78vw;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--neo-paper);
    border: 1px solid rgba(139, 133, 120, 0.25);
    overflow: hidden;
}

@media (min-width: 600px)  { .doc-card { flex: 0 0 320px; width: 320px; } }
@media (min-width: 980px)  { .doc-card { flex: 0 0 360px; width: 360px; } }

/* The Ticketsystem screenshot is landscape (~16:10), so its card gets a wider
   special format. Its shot grows to fill the card so the card stays the same
   height as the portrait protocol cards in the row. */
.doc-card--wide { flex: 0 0 88vw; width: 88vw; max-width: 620px; }
@media (min-width: 600px)  { .doc-card--wide { flex: 0 0 560px; width: 560px; } }
@media (min-width: 980px)  { .doc-card--wide { flex: 0 0 640px; width: 640px; } }
.doc-card--wide .doc-card__shot {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.doc-card__shot {
    aspect-ratio: 3 / 4;
    background: var(--bpm-petrol-tint);
    display: grid;
    place-items: center;
    padding: var(--s-6);
    border-bottom: 1px solid rgba(139, 133, 120, 0.18);
}
/* Each screenshot is framed (border + soft shadow) so even the light ticket-
   system UI reads as a distinct screenshot on the tinted panel. */
.doc-card__shot img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(139, 133, 120, 0.30);
    box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
}

.doc-card__cap {
    padding: var(--s-4) var(--s-6) var(--s-6);
    color: var(--neo-ink);
}
.doc-card__cap span {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neo-stone);
    margin-bottom: var(--s-2);
}
.doc-card__cap h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

/* ============================================================
   Leistungen detail page (/leistungen)
   Full-bleed photo sections — one per service, image as background,
   dark veil, copy on top. Alternating side keeps a rhythm so the
   five dark bands don't read as a single repeated template.
   ============================================================ */

/* Compact paper intro at the top of the page. */
.lp-intro { padding-block: var(--s-16) var(--s-12); background: var(--neo-paper); }
.lp-intro .display-l { margin-top: var(--s-3); }
.lp-intro__lead {
    margin-top: var(--s-6);
    color: var(--neo-stone);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    max-width: 62ch;
}

/* Quick-jump chips to each service. */
.lp-jump { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.lp-jump a {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neo-ink);
    border: 1px solid var(--neo-stone);
    padding: 8px 15px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lp-jump a:hover { background: var(--neo-ink); color: var(--neo-cream); border-color: var(--neo-ink); }

/* Full-bleed service section. */
.svc-detail {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--neo-ink);
    color: var(--neo-cream);
    display: flex;
    align-items: center;
    min-height: min(92vh, 880px);
    padding-block: var(--s-24);
}

.svc-detail__bg { position: absolute; inset: 0; z-index: 0; }
.svc-detail__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    filter: saturate(0.8) contrast(0.96);
}

/* Photo-left treatment (e.g. Gebäudereinigung): instead of zooming a low-res
   photo to push the subject left (which softens it), the image keeps its native
   scale but only fills the LEFT portion of the section; the worker sits at the
   left edge and the photo's right edge fades into the dark background, so the
   cut-off is invisible. Desktop only — mobile keeps the full-bleed cover. */
.svc-detail--photoleft .svc-detail__bg img { object-position: center 38%; }
@media (min-width: 721px) {
    .svc-detail--photoleft .svc-detail__bg img {
        width: 80%;
        object-position: 100% center;
    }
    .svc-detail--photoleft .svc-detail__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, transparent 40%, var(--neo-ink) 90%);
    }
}

/* Photo-right treatment (e.g. Notrufdienst): mirror of --photoleft. The image
   fills only the RIGHT portion at native scale and fades into the dark
   background on the left behind the copy. night-building.jpg is mirrored so its
   lit window lands on the right as the focal point. Desktop only. */
.svc-detail--photoright .svc-detail__bg img { object-position: center 42%; }
@media (min-width: 721px) {
    .svc-detail--photoright .svc-detail__bg img {
        display: block;
        width: 80%;
        height: 100%;
        margin-left: auto;
        object-position: center 42%;
        transform: scaleX(-1);
    }
    .svc-detail--photoright .svc-detail__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(270deg, transparent 40%, var(--neo-ink) 90%);
    }
}

/* Veil: strong on the content side, fading to the photo on the other.
   Default = content on the left. */
.svc-detail::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0.98) 26%, rgba(18,18,18,0.78) 50%, rgba(18,18,18,0.30) 78%, rgba(18,18,18,0.06) 100%),
        linear-gradient(180deg, rgba(18,18,18,0.40) 0%, rgba(18,18,18,0.06) 32%, rgba(18,18,18,0.50) 100%);
}
/* Mirrored veil for right-aligned sections. */
.svc-detail--right::after {
    background:
        linear-gradient(270deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0.98) 26%, rgba(18,18,18,0.78) 50%, rgba(18,18,18,0.30) 78%, rgba(18,18,18,0.06) 100%),
        linear-gradient(180deg, rgba(18,18,18,0.40) 0%, rgba(18,18,18,0.06) 32%, rgba(18,18,18,0.50) 100%);
}

/* Mobile: the photo is full-bleed cover and the copy sits directly over it,
   so the side-fading desktop veil isn't enough — apply a strong, uniform
   top-to-bottom darkening for legibility. Desktop (>=721px) is untouched. */
@media (max-width: 720px) {
    /* Darken the photo itself and lay a strong, near-opaque veil over it so the
       cream copy stays clearly legible on every section. */
    .svc-detail__bg img { filter: saturate(0.75) contrast(0.96) brightness(0.6); }
    .svc-detail::after,
    .svc-detail--right::after {
        background: linear-gradient(180deg, rgba(18,18,18,0.88) 0%, rgba(18,18,18,0.82) 45%, rgba(18,18,18,0.94) 100%);
    }
}

.svc-detail .container { position: relative; z-index: 2; }
.svc-detail__inner { max-width: 560px; }
.svc-detail--right .svc-detail__inner { margin-left: auto; }

/* Big translucent index number. */
.svc-detail__num {
    font-family: var(--font-display);
    font-size: clamp(56px, 12vw, 132px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--neo-cream);
    opacity: 0.16;
    margin-bottom: var(--s-2);
}

.svc-detail__caption {
    font-family: var(--font-display);
    font-size: var(--size-caption);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-cream);
    opacity: 0.8;
    margin-bottom: var(--s-3);
}

.svc-detail__title {
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-4);
}
.svc-detail__title .dot { color: inherit; }

.svc-detail__lead {
    font-size: clamp(17px, 1.9vw, 20px);
    line-height: 1.5;
    color: rgba(232, 223, 201, 0.92);
    margin-bottom: var(--s-8);
    max-width: 48ch;
}

/* Included-items list — two columns on wider screens, diamond markers. */
.svc-detail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-3);
}
@media (min-width: 720px) {
    .svc-detail__list { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-8); }
}
.svc-detail__list li {
    position: relative;
    padding-left: 22px;
    color: rgba(232, 223, 201, 0.9);
    font-size: 15px;
    line-height: 1.45;
}
.svc-detail__list li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border: 1px solid var(--neo-cream);
    opacity: 0.85;
    transform: rotate(45deg);
}

/* On narrow screens the copy spans the full width, so guarantee contrast with
   a uniform vertical veil regardless of the left/right variant, and let the
   sections size to their content instead of forcing full viewport height. */
@media (max-width: 720px) {
    .svc-detail { min-height: auto; padding-block: var(--s-16); }
    .svc-detail::after,
    .svc-detail--right::after {
        background: linear-gradient(180deg, rgba(18,18,18,0.90) 0%, rgba(18,18,18,0.84) 45%, rgba(18,18,18,0.95) 100%);
    }
    .svc-detail--right .svc-detail__inner { margin-left: 0; }
    .svc-detail__num { font-size: clamp(48px, 18vw, 96px); }
}

/* Closing CTA band. */
.lp-cta { background: var(--neo-cream); color: var(--neo-ink); padding-block: var(--s-16); }
.lp-cta__inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    align-items: flex-start;
}
@media (min-width: 880px) {
    .lp-cta__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
.lp-cta h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 900; letter-spacing: -0.02em; max-width: 22ch; }
.lp-cta h2 .dot { color: var(--neo-ink); }
.lp-cta p { color: var(--neo-stone); margin-top: var(--s-3); max-width: 46ch; }

/* "Mehr erfahren" link inside the homepage carousel cards. */
.svc-card__more {
    display: inline-block;
    margin-top: var(--s-3);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neo-cream);
    border-bottom: 1px solid rgba(232, 223, 201, 0.5);
    padding-bottom: 2px;
    transition: border-color .15s ease, opacity .15s ease;
}
.svc-card__more:hover { border-bottom-color: var(--neo-cream); opacity: 1; }

/* ============================================================
   Sprach-Umschalter DE/EN  (von /assets/i18n.js in die Nav eingefügt)
   ============================================================ */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;            /* im mobilen Dropdown nicht über volle Breite strecken */
    background: transparent;
    border: 1px solid rgba(139, 133, 120, 0.35);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--neo-stone);
    cursor: pointer;
    transition: border-color .15s ease;
}
.lang-switch:hover { border-color: var(--neo-ink); }
.lang-switch__sep { color: var(--neo-muted); font-weight: 500; }
.lang-switch__opt { color: var(--neo-stone); transition: color .15s ease; }
.lang-switch__opt.is-active { color: var(--neo-ink); }

@media (min-width: 880px) {
    .lang-switch { align-self: center; padding: 6px 12px; }
}

/* ============================================================
   CI-SCHICHT „Hanseatisches Kontor"  (Branch ci-vorschlag)
   ------------------------------------------------------------
   Lädt zuletzt und überschreibt gezielt die Stellen, die das
   CI-Playbook über den reinen Token-Tausch hinaus verlangt:
   Eyebrows in Mono, Zahlen/Daten als Logbuch-Mono, Petrol-Logo
   & -Buttons, dünne Linien unter den Section-Headern, dezente
   Radien und großzügiger Weißraum. Palette/Fonts kommen aus
   tokens.css; hier nur die Signatur-Details.
   ============================================================ */

/* HINWEIS: Geometrie (Abstände, Breiten, Linien, Radien) bleibt bewusst
   identisch zur bestehenden BPM-Seite, damit die Varianten layout-gleich
   vergleichbar sind. Diese CI-Schicht ändert NUR Farbe, Schrift und die
   Logbuch-Mono-Signatur — nicht den Aufbau. */

/* --- Eyebrow: gleiche Geometrie wie im Original (.caption), Montserrat wie NEO,
   nur die Petrol-Farbe bleibt als Maritim-Akzent. --- */
.caption {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--bpm-petrol);
}
/* Auf dunklen Petrol-Bändern muss die Eyebrow hell sein. */
.section--ink .caption,
.pillars .caption { color: var(--bpm-petrol-tint); }

/* --- Zahlen/Kennungen in der Display-Schrift (Montserrat) statt Mono, damit
   sie zum Rest der Seite passen. Nur die Petrol-Akzentfarbe bleibt Maritim. --- */
.stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bpm-petrol);
}
.stat__label,
.doc-card__cap span { font-family: var(--font-display); font-weight: 600; }

.pillar__num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0;
    color: var(--bpm-petrol-tint);
}
.svc-card__num { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
.svc-detail__num { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }

/* Telefon/E-Mail wie die übrigen Links in der Grundschrift (Inter). */
.contact-info a { font-family: var(--font-body); }
.foot a[href^="tel:"],
.foot a[href^="mailto:"] { font-family: var(--font-body); }

/* --- Wortmarke: BALTIC in Petrol, Zusatz in Mono (Playbook §10) --- */
.brand__mark { color: var(--bpm-petrol); }
/* „PM" als hochgestelltes Trademark-Zeichen oben rechts an der Ecke von BALTIC —
   Maritim-Variante: bleibt in Mono und im gedämpften Petrol-Ton der CI. */
.brand__text {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--bpm-muted);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.06em;
    align-self: flex-start;
    margin-top: 1px;
    line-height: 1;
}

/* --- Buttons: Primär = Petrol-Fläche, Sekundär = Petrol-Rand (Playbook §7) --- */
.btn {
    background: var(--bpm-petrol);
    color: #fff;
    border: 1px solid var(--bpm-petrol);
}
.btn:hover { background: var(--bpm-petrol-deep); color: #fff; border-color: var(--bpm-petrol-deep); }
.btn--ghost { background: transparent; color: var(--bpm-petrol); border-color: var(--bpm-petrol); }
.btn--ghost:hover { background: var(--bpm-petrol-tint); color: var(--bpm-petrol); }

/* Buttons auf dunklen Petrol-Bändern (Hero, section--ink): weiß gefüllt,
   Petrol-Schrift — Petrol-auf-Petrol hätte zu wenig Kontrast. */
.hero--bg .btn,
.section--ink .btn {
    background: #fff; color: var(--bpm-petrol-deep); border-color: #fff;
}
.hero--bg .btn:hover,
.section--ink .btn:hover { background: transparent; color: #fff; border-color: #fff; }
.hero--bg .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.hero--bg .btn--ghost:hover { background: #fff; color: var(--bpm-petrol-deep); border-color: #fff; }

/* --- Nav: helle (statt cremefarbene) Leiste auf Weiß --- */
.nav-bar { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--bpm-line); }
.nav-menu.is-open { background: rgba(255,255,255,0.98); border-bottom: 1px solid var(--bpm-line); }
.nav-links a:hover { border-bottom-color: var(--bpm-petrol); color: var(--bpm-petrol); }

/* --- Karten: Geometrie wie Original (scharfe Ecken); nur Hover-Farbe --- */
.doc-card:hover { border-color: var(--bpm-petrol); }

/* Quick-Jump-Chips (Leistungen): Hover in Petrol statt Tinte. */
.lp-jump a:hover { background: var(--bpm-petrol); border-color: var(--bpm-petrol); color: #fff; }

/* --- Footer: helle Schrift auf Petrol-tief, Pflichtangaben in Mono --- */
.foot { color: var(--bpm-footer-text); }
.foot h4 { color: #fff; }
.foot a,
.foot__col--plain span { color: var(--bpm-footer-text); }
.foot a:hover { color: #fff; }
.foot__legal { font-family: var(--font-body); color: var(--bpm-footer-text); letter-spacing: 0; }

/* Erfolgs-Status des Kontaktformulars im CI-Grün (Playbook §3). */
.section--paper .contact-form__status.is-ok { color: var(--bpm-green); }

/* =========================================================================
   Einsatzgebiet — DREI Radare (Lübeck, Kiel, Bremen), je 50 km Radius.
   Ersetzt die einzelne 130-km-Karte. Oyten (betreute Liegenschaft) ist der
   eine Amber-Aufmerksamkeitsakzent. JS-Sweep pro Radar in index.html.
   ========================================================================= */

/* Radare über die volle Breite; CTA-Karte darunter statt daneben. */
@media (min-width: 900px) {
    .einsatz-layout { grid-template-columns: 1fr; }
}

.radars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-12);
    width: 100%;
}
@media (min-width: 720px) {
    .radars { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

.radar {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
}

.radar__svg { width: 100%; max-width: 250px; }

/* Faint range grid: 25-km ring + cross-hairs. */
.radar__ring { fill: none; stroke: var(--neo-cream); stroke-width: 1; opacity: .14; }
.radar__axis { stroke: var(--neo-cream); stroke-width: 1; opacity: .08; }

/* 50-km perimeter: shorter circumference (r=92) than the old r=200 circle. */
.radar__radius { stroke-dasharray: 578; stroke-dashoffset: 578; }

/* Centre city label + scale tick. */
.radar__center { font-size: 12px; letter-spacing: 0.06em; }
.radar__scale {
    font-family: var(--font-mono);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: var(--neo-cream);
    opacity: .55;
}

/* Town labels: smaller and mixed-case for legibility at radar scale. */
.radar__svg .reach__city text {
    font-size: 8px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}
.radar__svg .reach__city circle { fill: var(--neo-stone); }

/* Thin connector when a label was nudged away from its dot to avoid overlap. */
.radar__leader { stroke: var(--neo-cream); stroke-width: 0.5; opacity: .28; }

/* Oyten (betreute Liegenschaft): amber dot marks it; the label matches the other
   town names in font and size and is only set bold so it flares a little brighter
   as the radar beam sweeps across it. */
.radar__svg .reach__city--key circle { fill: var(--bpm-amber); }
.radar__svg .reach__city--key text { fill: #CBC3B2; font-weight: 700; }

/* Legend key dot + caption pin in amber to match Oyten. */
.reach__legend-dot--key { background: var(--bpm-amber); }
.radar__legend-key { color: var(--neo-cream); }

/* Caption under each radar. */
.radar__cap {
    text-align: center;
    color: var(--neo-cream);
    opacity: .85;
    font-size: 13px;
    line-height: 1.45;
    max-width: 30ch;
}
.radar__cap strong { color: var(--neo-cream); opacity: 1; font-weight: 700; }
.radar__cap .radar__pin { color: var(--bpm-amber); }