/*
 * BEWOPS V4 — component and page stylesheet
 * Edit this stylesheet directly. No build step or generated source files.
 * Section order preserves the existing CSS cascade. No runtime @import.
 *
 * 01. Legacy bridge (compatibility.css)
 * 02. Design tokens (tokens.css)
 * 03. Shared components and original home components (components.css)
 * 04. Software (software.css)
 * 05. Product foundations (product-base.css)
 * 06. Inventory visual (inventory.css)
 * 07. Shared software pricing and FAQ (software-pricing-faq.css)
 * 08. Websites (web.css)
 * 09. Maintenance visual (maintenance.css)
 * 10. Shared plan cards and checklists (plan-components.css)
 * 11. Maintenance pricing (maintenance-pricing.css)
 * 12. Photography (photography.css)
 * 13. About (about.css)
 * 14. Time tracking (time-tracking.css)
 * 15. Alarm (alarm.css)
 * 16. Contact (contact.css)
 * 17. Shared typography and headings (shared-typography.css)
 * 18. Shared final CTA (final-cta.css)
 * 19. Legal (legal.css)
 * 20. Shared rhythm and process (shared-rhythm-process.css)
 * 21. Medical supplies use case (usecase.css)
 * 22. Home variants (home.css)
 * 23. Responsive (responsive.css)
 */

/* ===== 01. Legacy bridge | compatibility.css ===== */

/* Global navigation/footer foundations formerly supplied by legacy styles.
   Kept before V4 rules to preserve the existing cascade. */
header {
    margin: 0;
    width: 100%;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(25, 25, 25, 0.500);
}
/*Ende Navigationsmenü*/

@media (min-width:1201px) {
    nav ul {
        row-gap: 24px;
    }
    nav a {
        padding: 12px;
        /* font-size: clamp(1.1rem, 1.2vw + 0.3rem, 1.4rem); */
        font-size:var(--v4-type-feature);
    }
}

@media (min-width: 801px) and (max-width: 1200px) {
    nav ul {
        row-gap: 12px;
    }
    nav a {
        padding: 6px;
        /* font-size: clamp(1rem, 1vw + 0.3rem, 1.2rem); */
        font-size:var(--v4-type-card);
    }
}

@media (min-width: 801px) {
    nav ul {
        padding-right: 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    nav a {
        box-sizing: border-box;
        position: relative;
        /* color: var(--primary-text-color); */
    }
}

@media (max-width:800px) {
    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1;
    }
    nav a {
        /* color: var(--secondary-text-color); */
        font-size: clamp(1.8rem, 6.6vw, 2.8rem);
        transition: 200ms ease-in-out;
        width: 100%;                        /*Der Link soll auf das gesamte Elternelement ausgeweitet werden, sonst würde er */
        height: 100%;                       /*nur auf der Schrift liegen und nicht auf der gesamten Schaltfläche (Block)*/
        display: flex;
        justify-content: flex-start;
        padding: 5%;
    }
}

footer {
    margin: 0;
    width: 100%;
    z-index: 1;
}

/* ===== 02. Design tokens | tokens.css ===== */

/* V4 breakpoint system: 576 / 768 / 992 / 1200 / 1400 px.
   Use only these widths for new V4 media queries. */

/*
 * bewops redesign-v4.css — consolidated stylesheet
 * Includes shared V4 styles plus page-specific styles for:
 * Start/Software, Inventory, Time Tracking, Notfall-Alarm, Websites,
 * Maintenance, Business Photography, About and Contact.
 */

/* Breakpoints
max-width: 576px - kleine Smartphones
max-width: 768px - Mobile / kleine Tablets
max-width: 992px - Tablets / kompakte Layouts
max-width: 1200px - kleinere Desktops
max-width: 1400px - große Desktop-Anpassungen */

  :root {
    /* Brand and surfaces */
    --v4-blue: #145ee8;
    --v4-blue-dark: #0b3b9b;
    --v4-blue-middle: #9fbefe;
    --v4-blue-light: #cbdfff;
    --v4-bg-dark: #0b192b;
    --v4-bg-dark-alt: #0d264a;
    --v4-bg-dark-alt2: #13386d;
    --v4-dark-surface: #17263a;
    --v4-surface: #ffffff;
    --v4-surface-alt: #f3f6f8;
    --v4-btn-second: #edf3ff;

    /* Text and borders */
    --v4-ink: #081526;
    --v4-text-lite: #b0b0b0;
    --v4-text-soft: #818993;
    --v4-text-muted: #58718e;
    --v4-line: #dfe7f0;
    --v4-line-medium: #c9d2dc;
    --v4-line-strong: #304157;

    /* States */
    --v4-alert: #e64b2f;
    --v4-error: #f0d1cd;
    --v4-error-dark: #8a3b32;
    --v4-success: #f1faf6;
    --v4-success-middle: #c9ead9;
    --v4-success-dark: #245c43;
    --v4-success-accent: #1c9b61;

    /* Geometry and effects */
    --v4-shadow: 0 24px 70px rgba(8, 21, 38, .12);
    --v4-radius: 20px;
    --v4-max: 1440px;

    /* Typography */
    --v4-body-font: "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --v4-ui-font: "Be Vietnam Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Shared spacing */
    --v4-hero-space: clamp(60px, 6vw, 82px);
    --v4-section-space: 60px;
    --v4-section-space-mobile: 48px;
    --v4-label-title-gap: 20px;
    --v4-title-gap: 12px;
    --v4-lead-gap: 24px;
    --v4-actions-gap: 30px;
    --v4-hero-meta-gap: 34px;
    --v4-eyebrow-title-gap: 8px;
    --v4-title-copy-gap: 8px;
    --v4-split-gap: clamp(48px, 7vw, 104px);

    /* Final CTA */
    --v4-final-card-padding-y: 56px;
    --v4-final-card-padding-x: 60px;
    --v4-final-card-gap: 60px;
    --v4-type-h2: clamp(1.7rem, 1.6rem + 1vw, 2.5rem);
    --v4-final-copy-size: var(--v4-type-body);

    /* Shared typography: exact existing ranges, one definition per size. */
    --v4-type-small: clamp(0.85rem, 0.85rem + 0.07vw, 0.9rem);
    --v4-type-label: clamp(0.76rem, 0.7rem + 0.07vw, 0.84rem);
    --v4-type-mini: clamp(0.68rem, 0.6rem + 0.1vw, 0.74rem);
    --v4-type-meta: clamp(0.6rem, 0.54rem + 0.07vw, 0.66rem);
    --v4-type-subheading: clamp(1rem, 0.9667rem + 0.1481vw, 1.1rem);
    --v4-type-feature: clamp(1.04rem, 0.9533rem + 0.3852vw, 1.3rem);
    --v4-type-body: clamp(0.95rem, 0.9333rem + 0.0741vw ,1rem);
    --v4-type-micro: clamp(0.6rem, 0.56rem + 0.07vw, 0.7rem);
    --v4-type-card: clamp(1rem, 0.9333rem + 0.2963vw, 1.2rem);
    --v4-type-heading: clamp(1.5rem, 2vw, 2.3rem);
    --v4-type-emphasis: clamp(1.5rem, 1.5rem + 0.1vw, 1.8rem);
    --v4-type-display-small: clamp(1.6rem, 1.4667rem + 0.5926vw, 2rem);
    --v4-type-micro-compact: clamp(0.56rem, 0.5533rem + 0.0296vw, 0.58rem);
    --v4-type-caption: clamp(0.76rem, 0.7533rem + 0.0296vw, 0.78rem);
    --v4-type-heading-mobile: clamp(1.7rem, 7vw, 2.1rem);
}

/* ===== 03. Shared components and original home components | components.css ===== */

/* --------------------------------------------------------------------------
   V4 section rhythm — single source of truth
   Standard content sections: 72px desktop/tablet, 60px mobile.
   Hero, header and footer keep their own spacing.
   -------------------------------------------------------------------------- */
body.v4-page .v4-section {
    padding-top: var(--v4-section-space);
    padding-bottom: var(--v4-section-space);
}
body.v4-page ul,
body.v4-page ol,
body.v4-page li {
    list-style: none;
}
h1 {
    max-width:720px;
    margin: 0;
    text-align:left;
    color: var(--v4-ink);
    font-family: var(--v4-ui-font);
    font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
    font-weight:400;
    line-height:1.1;
    letter-spacing: -.035em;
}
h1 span {
    color:var(--v4-blue);
}
h4 { 
    font-size: clamp(1rem, 0.92rem + 0.25vw, 1.25rem);
}
h5 {
    font-size: clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);
}
p, section ul li, section ol li {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}
body.home-v4,
body.software-v4 {
    margin: 0;
    background: var(--v4-surface);
    color: var(--v4-ink);
    font-family: var(--v4-ui-font);
    text-rendering: optimizeLegibility;
}

/* Low-specificity page resets: component classes can override these normally. */
:where(body.home-v4, body.software-v4) * {
    box-sizing: border-box;
}
:where(body.home-v4, body.software-v4) p {
    margin: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    hyphens: none;
}
:where(body.home-v4, body.software-v4) a {
    color: inherit;
}
:where(body.home-v4, body.software-v4) img {
    display: block;
    max-width: 100%;
}
.sr-only {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
.v4-shell {
    width: min(calc(100% - 64px), var(--v4-max));
    margin-inline: auto;
}
.v4-header {
    position: sticky;
    top: 0;
    z-index: 60;
    overflow: visible;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(223,231,240,.8);
}
.v4-header-inner {
    height: 86px;
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 28px;
}
.v4-logo img, .v4-footer-brand img {
    width: 136px;
    height: auto;
}
.v4-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 3vw, 48px);
}
.v4-navigation a {
    position: relative;
    font-size: var(--v4-type-small);
    color: var(--v4-bg-dark-alt);
}
.v4-navigation a::after {
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-8px;
    height:2px;
    background:var(--v4-blue);
    transition:right .22s ease;
}
.v4-navigation a:hover::after, .v4-navigation a:focus-visible::after {
    right:0;
}
.v4-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-height:48px;
    padding:0 21px;
    border:1px solid transparent;
    border-radius:8px;
    font-size: var(--v4-type-small);
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.v4-btn-primary {
    background:var(--v4-blue);
    color:var(--v4-surface);
    box-shadow:0 10px 26px rgba(20,94,232,.18);
}
.v4-btn-primary:hover {
    background:var(--v4-blue-dark);
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(20,94,232,.24);
}

/* Primary and secondary CTAs share the same button geometry. */
.v4-btn-primary,
.v4-btn-secondary,
.v4-btn-ghost {
    width:270px;
    max-width:100%;
    height:48px;
}
.v4-btn-secondary {
    background:var(--v4-surface);
    border-color:var(--v4-blue-middle);
    color:var(--v4-ink);
    box-shadow:0 10px 26px rgba(8,21,38,.08);
}
.v4-btn-secondary:hover {
    background: var(--v4-btn-second);
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(8,21,38,.12);
}
.v4-btn-ghost {
    border-color:var(--v4-blue-middle);
    color:var(--v4-blue);
    background:rgba(255,255,255,.7);
}
.v4-btn-ghost:hover {
    border-color:var(--v4-blue-dark);
    color:var(--v4-blue-dark);
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(8,21,38,.12);
}
.v4-menu-toggle {
    display:none;
    background:none;
    border:0;
    padding:10px;
    cursor:pointer;
}
.v4-menu-toggle > span:not(.sr-only) {
    display:block;
    width:24px;
    height:2px;
    background:var(--v4-ink);
    margin:5px 0;
    transition:.2s ease;
}
.v4-eyebrow {
    color:var(--v4-blue);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-weight:700;
    font-size:var(--v4-type-label);
}

/* Eyebrows on dark V4 surfaces use the shared middle-blue token. */
:is(.sw4-pricing, .v4-pricing, .wv4-code, .mv4-speed, .ph4-web, .av4-spectrum) p.v4-eyebrow {
    color: var(--v4-blue-middle);
}
.v4-hero {
    position:relative;
    padding-top:var(--v4-hero-space);
    padding-bottom:var(--v4-hero-space);
    background:linear-gradient(100deg,var(--v4-surface) 0 58%,var(--v4-surface-alt) 100%);
}
.v4-hero-home {
    min-height:680px;
    display:flex;
    align-items:flex-start;
}
.v4-hero-home::after {
    content:"";
    position:absolute;
    right:-12%;
    top:0;
    width:44%;
    height:100%;
    background:radial-gradient(circle at 50% 45%, rgba(20,94,232,.08), transparent 64%);
    pointer-events:none;
}
.v4-hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(540px,1fr);
    gap:60px;
    align-items:center;
}
.v4-hero-copy {
    position:relative;
    z-index:2;
    align-self: start;
}
.v4-lead {
    max-width: 650px;
    margin-top: var(--v4-lead-gap);
    margin-bottom: 0;
    text-align: left;
    font-size:clamp(1.05rem,1.2vw,1.24rem);
    line-height:1.7;
    color:var(--v4-text-soft);
}
.v4-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px 16px;
    margin-top:var(--v4-actions-gap);
}
.v4-hero-facts {
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    margin:var(--v4-hero-meta-gap) 0 0;
    padding:0;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-meta);
    list-style:none;
}
.v4-hero-facts li:before {
    content:'✓';
    color:var(--v4-blue);
    margin-right:7px;
}
.v4-hero-facts span {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
}
.v4-trust {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:26px;
    padding:0;
    margin:42px 0 0;
}
.v4-trust li {
    display:flex;
    align-items:center;
    gap:10px;
    max-width:160px;
    line-height:1.2;
    color:var(--v4-bg-dark-alt);
    font-weight:600;
    font-size: var(--v4-type-small);
}
.v4-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-text-soft);
    border-radius:50%;
    color:var(--v4-ink);
    font-weight:700;
}
.v4-hero-visual {
    position:relative;
    z-index:2;
    min-width:0;
}
.v4-dashboard-window {
    position:relative;
    border:1px solid var(--v4-line-medium);
    border-radius:16px;
    background: var(--v4-surface);
    box-shadow:var(--v4-shadow);
    overflow:hidden;
    transform:rotate(-1.2deg);
    transform-origin:center;
}
.v4-window-bar {
    height:54px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 18px;
    border-bottom:1px solid var(--v4-line);
    font-size: var(--v4-type-meta);
}
.v4-window-bar strong {
    font-weight:700;
}
.v4-window-bar span {
    color:var(--v4-line-strong);
}
.v4-window-bar i {
    margin-left:auto;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--v4-blue);
}
.v4-dashboard-content {
    display:grid;
    grid-template-columns:126px 1fr;
    min-height:380px;
}
.v4-dashboard-side {
    padding:18px 12px;
    border-right:1px solid var(--v4-line);
    display:flex;
    flex-direction:column;
    gap:9px;
    background:var(--v4-surface-alt);
}
.v4-dashboard-side span {
    padding:9px 10px;
    border-radius:7px;
    font-size: var(--v4-type-meta);
    color:var(--v4-text-soft);
}
.v4-dashboard-side .active {
    background:var(--v4-line);
    color:var(--v4-blue);
    font-weight:700;
}
.v4-dashboard-main {
    padding:22px;
    min-width:0;
}
.v4-dashboard-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.v4-dashboard-head div {
    display:grid;
    gap:4px;
}
.v4-dashboard-head small,
.v4-metrics small {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
}
.v4-dashboard-head strong {
    font-size: var(--v4-type-subheading);
}
.v4-dot {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--v4-blue);
    color: var(--v4-surface);
    font-size: var(--v4-type-label);
}
.v4-metrics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin:22px 0 18px;
}
.v4-metrics div {
    display:grid;
    gap:4px;
    padding:15px 14px;
    border:1px solid var(--v4-line);
    border-radius:9px;
}
.v4-metrics b {
    font-size: var(--v4-type-feature);
}
.v4-metrics .warn {
    background:var(--v4-surface-alt);
    border-color:var(--v4-line);
}
.v4-metrics .warn b {
    color:var(--v4-alert);
}
.v4-dashboard-main img {
    border:1px solid var(--v4-line-medium);
    border-radius:10px;
    width:100%;
}
.v4-handnote {
    margin:24px 22px 0 auto;
    width:max-content;
    color:var(--v4-bg-dark-alt);
    font-size: var(--v4-type-body);
    transform:rotate(-4deg);
}
.v4-side-note {
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    gap:4px;
    text-transform:uppercase;
    letter-spacing:.26em;
    font-size: var(--v4-type-micro);
    color:var(--v4-text-muted);
}
.v4-side-note::after {
    content:"";
    width:30px;
    height:1px;
    background:var(--v4-text-soft);
    margin-top:12px;
}
.v4-intro {
    padding-top: var(--v4-section-space);
    padding-bottom: var(--v4-section-space);
    background:var(--v4-surface-alt);
    border-top:1px solid var(--v4-line-medium);
    border-bottom:1px solid var(--v4-line-medium);
}
.zt4-page .v4-intro {
    background:var(--v4-surface);
    border:none;
}

/* Shared two-column/grid foundation. Page classes only define proportions and visual treatment. */
.v4-split-grid {
    display:grid;
}
.v4-split-start {
    align-items:start;
}
.v4-split-center {
    align-items:center;
}
.v4-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--v4-split-gap);
    row-gap: 0;
    align-items: start;
}
.v4-intro-grid > :first-child {
    grid-column: 1;
    grid-row: 1;
}
.v4-intro h2 {
    max-width:760px;
    margin:0;
}
.v4-intro-copy {
    display:grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap:16px;
    margin: 0;
    padding: 0;
}
.v4-intro-copy p {
    color:var(--v4-text-muted);
    line-height:1.5;
}
.v4-intro-copy a {
    color:var(--v4-blue);
    text-decoration:underline;
    text-underline-offset:3px;
}
.v4-intro-copy a:hover {
    color:var(--v4-bg-dark-alt);
}
.v4-intro-grid > .v4-manifesto {
    display:flex;
    grid-column: 1;
    grid-row: 2;
    align-items:center;
    gap:18px;
    color:var(--v4-text-soft);
}
.v4-manifesto span {
    width:34px;
    height:44px;
    border-left:2px solid var(--v4-text-soft);
    border-bottom:2px solid var(--v4-text-soft);
}
.v4-manifesto p {
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.v4-text-link {
    color:var(--v4-blue);
    font-size: var(--v4-type-small);
    transition: all .15s ease-in-out;
}
.v4-text-link:hover {
    color:var(--v4-blue-middle);
    text-decoration: underline;
}
.v4-software-showcase {
    margin-top:46px;
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:44px;
    align-items:center;
}
.v4-screen-stack {
    min-height:420px;
    position:relative;
    background:linear-gradient(135deg,var(--v4-surface-alt), var(--v4-surface));
    border-radius:var(--v4-radius);
    overflow:hidden;
    border:1px solid var(--v4-line);
}
.v4-screen-back, .v4-screen-front {
    position:absolute;
    background: var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:12px;
    box-shadow:0 18px 50px rgba(8,21,38,.15);
    overflow:hidden;
}
.v4-screen-back {
    width:58%;
    left:5%;
    top:13%;
    transform:rotate(-4deg);
}
.v4-screen-front {
    width:70%;
    right:4%;
    bottom:11%;
    transform:rotate(2deg);
}
.v4-screen-back img, .v4-screen-front img {
    width:100%;
    min-height:180px;
    object-fit:cover;
}
.v4-index {
    color:var(--v4-blue);
    letter-spacing:.08em;
    font-size: var(--v4-type-meta);
}
.v4-title-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
}
.v4-case-grid {
    margin-top:42px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--v4-line);
    border-left:1px solid var(--v4-line);
}
.v4-case-card {
    position:relative;
    min-height:430px;
    padding:18px 18px 24px;
    border-right:1px solid var(--v4-line);
    border-bottom:1px solid var(--v4-line);
    display:flex;
    flex-direction:column;
    gap:12px;
    background: var(--v4-surface);
    transition:background .2s ease, transform .2s ease;
}
.v4-case-card:hover {
    background:var(--v4-surface-alt);
    transform:translateY(-4px);
}
.v4-case-image {
    height:170px;
    margin-top:8px;
    border-radius:10px;
    overflow:hidden;
    background:var(--v4-surface-alt);
    display:grid;
    place-items:center;
}
.v4-case-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.v4-case-image-dark {
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--v4-bg-dark-alt);
}
.v4-case-image-dark img {
    width:auto;
    height:65%;
    object-fit:contain;
    object-position:center center;
    border-radius:8px;
}
.v4-case-card h3 {
    margin-top:3px;
    font-size: var(--v4-type-feature);
    line-height:1.1;
}
.v4-case-card p {
    color:var(--v4-text-soft);
    line-height:1.5;
    font-size: var(--v4-type-small);
}
.v4-case-card .v4-text-link,
.v4-about-copy .v4-text-link {
    margin-top:auto;
}
.v4-case-idea {
    background:linear-gradient(145deg,var(--v4-surface-alt),var(--v4-line));
}
.v4-idea-mark {
    font-size: clamp(2.96rem, 2.7133rem + 1.0963vw, 3.7rem);
    color:var(--v4-blue);
    margin:32px 0 2px;
}
.v4-case-idea .v4-btn {
    margin-top:auto;
    align-self:flex-start;
}
.v4-services {
    background:var(--v4-surface-alt);}
.v4-service-grid {
    display:grid;
    grid-template-columns:1.3fr .8fr 1fr;
    gap:18px;
    margin-top:40px;
}
.v4-service-card {
    position:relative;
    min-height:460px;
    border:1px solid var(--v4-line);
    border-radius:16px;
    background: var(--v4-surface);
    padding:28px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.v4-service-card .v4-index {
    position:absolute;
    right:24px;
    top:24px;
}
.v4-kicker {
    font-size: var(--v4-type-label);
    text-transform:uppercase;
    letter-spacing:.13em;
    font-weight:700;
    color:var(--v4-text-soft);
}
.v4-service-card h3 {
    max-width:470px;
    margin-top: var(--v4-label-title-gap);
    font-size:clamp(1.3rem,1.8vw,2rem);
    line-height:1.1;
}
.v4-service-card > p:not(.v4-kicker) {
    margin-top:18px;
    max-width:420px;
    line-height:1.7;
    color:var(--v4-text-soft);
}
.v4-service-card .v4-text-link {
    margin-top:auto;
    position:relative;
    z-index:3;
}
.v4-service-card img {
    position:absolute;
    right:0;
    bottom:0;
    width:48%;
    height:48%;
    object-fit:cover;
    border-radius:14px 0 0 0;
}
.v4-service-web,
.v4-service-photo {
    padding-right:34%;
}
.v4-service-photo img {
    height:58%;
    width:38%;
}
.v4-price {
    margin-top:auto;
    margin-bottom:18px;
    color:var(--v4-blue);
    font-size: clamp(1.36rem, 1.2467rem + 0.5037vw, 1.7rem);
}
.v4-price small {
    font-size: var(--v4-type-label);
    font-weight:700;
}
.v4-about {
    background: var(--v4-surface);}
.v4-about-card {
    display:grid;
    grid-template-columns:340px 1fr 290px;
    min-height:390px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    overflow:hidden;
}
.v4-about-photo {
    min-height:390px;
}
.v4-about-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    filter:saturate(.82);
}
.v4-about-copy {
    padding:var(--v4-final-card-padding-y);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.v4-about-copy > p:not(.v4-eyebrow) {
    margin-top:20px;
    max-width:690px;
    color:var(--v4-text-soft);
    line-height:1.7;
}
.v4-name-story {
    background:var(--v4-line);
    padding:50px 34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.v4-name-story strong {
    font-size: var(--v4-type-feature);
}
.v4-name-story p {
    margin-top:18px;
    line-height:1.5;
}
.v4-name-story span {
    color:var(--v4-blue);
    font-weight:700;
}
.v4-name-story small {
    margin-top:28px;
    color:var(--v4-text-soft);
    line-height:1.5;
}
.v4-final-card {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:var(--v4-final-card-gap);
    padding:var(--v4-final-card-padding-y) var(--v4-final-card-padding-x);
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:linear-gradient(120deg,var(--v4-line),var(--v4-surface) 68%);
}
.v4-final-cta .v4-final-card {
    min-height:340px;
}
.v4-final-card::after {
    content:"";
    position:absolute;
    right:-80px;
    bottom:-130px;
    width:520px;
    height:300px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(20,94,232,.16), transparent 68%);
    pointer-events:none;
}
.v4-final-card h2 {
    max-width:760px;
}
.v4-final-card > div > p:not(.v4-eyebrow) {
    margin-top:20px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-subheading);
}
.v4-final-card .v4-actions small {
    display:block;
    margin:0;
    color:var(--v4-text-muted);
    font-size:var(--v4-type-label);
    line-height:1.4;
}
.v4-final-card blockquote {
    position:relative;
    z-index:2;
    margin:0;
    font-size: var(--v4-type-card);
    line-height:1.5;
    color:var(--v4-bg-dark-alt);
    font-weight:600;
}
.v4-final-card cite {
    display:block;
    margin-top:16px;
    font-size: var(--v4-type-small);
    font-style:normal;
    color:var(--v4-text-muted);
}
.v4-footer {
    border-top:1px solid var(--v4-line);
    background:var(--v4-surface);
    padding:var(--v4-final-card-padding-y) 0 30px;
    color:var(--v4-text-soft);
    font-family:var(--v4-ui-font);
}
.v4-footer-grid {
    display:grid;
    grid-template-columns:1.7fr repeat(3,.7fr);
    gap:40px;
}
.v4-footer-grid > div:not(.v4-footer-brand) {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
}
.v4-footer strong {
    margin-bottom:6px;
    color:var(--v4-ink);
    font-size: var(--v4-type-small);
    font-weight:500;
}
.v4-footer a {
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    font-weight:400;
}
.v4-footer a:hover {
    color:var(--v4-blue);
}
.v4-footer-brand p {
    margin-top:18px;
    color:var(--v4-ink);
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.v4-footer-brand small {
    display:block;
    margin-top:18px;
    color:var(--v4-line-strong);
}
.v4-footer-bottom {
    border-top:1px solid var(--v4-line);
    margin-top:40px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    font-size: var(--v4-type-label);
    color:var(--v4-text-muted);
}
body.home-v4 :focus-visible {
    outline:3px solid rgba(20,94,232,.45);
    outline-offset:3px;
}
@media (prefers-reduced-motion: reduce) {
    .v4-btn, .v4-case-card, .v4-navigation a::after {
        transition:none!important;
    }
}

/* ===== 04. Software | software.css ===== */

/* ============================================================
   SOFTWARE V4 — software.php
   ============================================================ */

.sw4-hero-visual {
    position:relative;
    z-index:2;
    padding:36px 34px 44px 8px;
}
.sw4-screen-frame {
    overflow:hidden;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:14px;
    box-shadow:0 30px 80px rgba(8,21,38,.14);
    transform:rotate(-1deg);
}
.sw4-screen-top {
    height:50px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 18px;
    border-bottom:1px solid var(--v4-line);
    font-size: var(--v4-type-mini);
}
.sw4-screen-top span {
    color:var(--v4-text-soft);
}
.v4-frame-image {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    object-position:top;
}
.sw4-handnote {
    position:absolute;
    right:42px;
    bottom:10px;
    z-index:3;
    width:max-content;
    margin:0;
    color:var(--v4-dark-surface);
    font-size: var(--v4-type-small);
    line-height:1.2;
    transform:rotate(-2deg);
    transform-origin:right center;
}
.sw4-solution-list {
    margin-top:54px;
    border-top:1px solid var(--v4-line);
}
.sw4-solution {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:420px;
    border-bottom:1px solid var(--v4-line);
}
.sw4-solution > * {
    min-width:0;
}
.v4-feature-media {
    padding:42px;
    background:var(--v4-surface-alt);
    display:grid;
    place-items:center;
    overflow:hidden;
}
.v4-feature-media img {
    width:100%;
    max-height:360px;
    object-fit:contain;
    border-radius:8px;
}
.sw4-solution-media { min-height:420px; }
.sw4-solution-media img { box-shadow:0 18px 45px rgba(8,21,38,.12); }
.sw4-alarm-media img {
    width:min(72%,400px);
}
.v4-feature-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}
.sw4-solution-copy {
    padding:62px clamp(34px,5vw,78px);
}
.v4-index-label {
    color:var(--v4-blue);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size: var(--v4-type-label);
    font-weight:600;
}
.sw4-solution h3 {
    margin-top: var(--v4-label-title-gap);
    max-width:560px;
    font-size: var(--v4-type-heading);
    line-height:1.1;
    font-weight:500;
}
.sw4-solution p {
    margin-top:18px;
    max-width:620px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.sw4-solution .v4-text-link {
    margin-top:24px;
}
.v4-inline-checks {
    margin:24px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    color:var(--v4-line-strong);
    font-size: var(--v4-type-small);
}
.v4-inline-checks li::before {
    content:"✓";
    color:var(--v4-blue);
    font-weight:700;
    margin-right:10px;
}
.sw4-solution .v4-inline-checks {
    gap:9px;
}
.sw4-custom-card {
    position:relative;
    display:grid;
    grid-template-columns:110px 1fr 1fr;
    gap:46px;
    align-items:center;
    padding:var(--v4-final-card-padding-y);
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:linear-gradient(110deg,var(--v4-surface-alt),var(--v4-surface) 72%);
    overflow:hidden;
}
.sw4-custom-mark {
    position:relative;
    width:104px;
    height:82px;
    background-image:radial-gradient(circle, var(--v4-line-medium) 1px, transparent 1px);
    background-size:12px 12px;
    background-position:2px 2px;
}
.sw4-custom-mark::before {
    content:"";
    position:absolute;
    left:58px;
    top:8px;
    width:1px;
    height:66px;
    background:var(--v4-line-strong);
}
.sw4-custom-mark::after {
    content:"";
    position:absolute;
    left:55px;
    top:38px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--v4-surface);
    border:2px solid var(--v4-blue);
    box-sizing:border-box;
}
.sw4-custom-node,
.sw4-custom-output,
.sw4-custom-line {
    position:absolute;
    display:block;
}
.sw4-custom-node {
    left:0;
    width:28px;
    height:18px;
    border:1px solid var(--v4-line-strong);
    border-radius:4px;
    background:var(--v4-surface);
    box-shadow:0 4px 10px rgba(8,21,38,.045);
}
.sw4-custom-node::after {
    content:"";
    position:absolute;
    right:-4px;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--v4-line-strong);
    transform:translateY(-50%);
}
.sw4-custom-node--1 { top:0; }
.sw4-custom-node--2 { top:32px; }
.sw4-custom-node--3 { top:64px; }
.sw4-custom-line {
    height:1px;
    background:var(--v4-line-strong);
}
.sw4-custom-line--1 {
    top:9px;
    left:32px;
    width:26px;
}
.sw4-custom-line--2 {
    top:41px;
    left:32px;
    width:26px;
}
.sw4-custom-line--3 {
    top:73px;
    left:32px;
    width:26px;
}
.sw4-custom-line--merge {
    top:41px;
    left:59px;
    width:19px;
    height:1px;
    background:var(--v4-blue);
}
.sw4-custom-output {
    top:28px;
    left:79px;
    width:26px;
    height:26px;
    border:1px solid var(--v4-blue-dark);
    border-radius:5px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
        var(--v4-blue);
    background-size:7px 7px;
    box-shadow:0 9px 22px rgba(20,94,232,.18);
}
.sw4-custom-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
}
.sw4-custom-copy p {
    color:var(--v4-text-muted);
    line-height:1.5;
}
.sw4-audience,
.v4-faq,
.zt4-functions,
.zt4-fit {
    background:var(--v4-surface-alt);
    border-block:1px solid var(--v4-line);
}
.v4-audience-grid {
    margin-top:52px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    border:0;
}
.v4-audience-grid article {
    /* Shared rows align labels, headings, descriptions and tags across cards. */
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 4;
    row-gap:12px;
    min-width:0;
    min-height:220px;
    padding:44px;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:16px;
    box-shadow:0 14px 36px rgba(8,21,38,.06);
}
.v4-audience-grid article > * {
    min-width:0;
    align-self:start;
}
.v4-audience-grid article > p {
    color: var(--v4-text-soft);
}
/* Alarm: shared audience styling with a three-column desktop layout. */
.alarm-v4 .sw4-audience .v4-audience-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.v4-tag-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.v4-tag-list span {
    border-radius:999px;
    background:var(--v4-surface);
    font-weight:500;
}
.sw4-audience .v4-tag-list span {
    padding:8px 12px;
    background:var(--v4-surface-alt);
    border:1px solid var(--v4-line-medium);
    color:var(--v4-text-soft);
    font-size: var(--v4-type-mini);
}
.sw4-pricing,
.v4-pricing {
    background:var(--v4-bg-dark);
    color:var(--v4-surface);
}
.v4-main .sw4-pricing h2,
.v4-pricing .v4-price-intro h2,
.wv4-code h2,
.wv4-code-copy > h2,
.mv4-speed h2,
.mv4-speed-copy > h2,
.ph4-web h2,
.av4-spectrum h2,
.v4-main .sw4-pricing h3 {
    color:var(--v4-surface-alt);
}
.sw4-price-grid {
    margin-top:52px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--v4-line-strong);
    border-left:1px solid var(--v4-line-strong);
}
.sw4-price-grid article {
    min-height:280px;
    padding:38px;
    border-right:1px solid var(--v4-line-strong);
    border-bottom:1px solid var(--v4-line-strong);
}
.sw4-price-grid article.is-featured {
    background: var(--v4-bg-dark-alt);
}
.sw4-price-grid span {
    color:var(--v4-blue-middle);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size: var(--v4-type-label);
    font-weight:700;
}
.sw4-price-grid h3 {
    padding:var(--v4-lead-gap) 0;
    font-size: var(--v4-type-h2);
    letter-spacing:-.04em;
}
.sw4-price-grid h3>small {
    font-size: var(--v4-type-label);
    color:var(--v4-line);
    font-weight:400;
    letter-spacing:0;
}
.sw4-price-grid p {
    margin-top:20px;
    color:var(--v4-line-medium);
    line-height:1.5;
}
.sw4-pricing .sw4-price-note {
    margin-top:var(--v4-label-title-gap);
    color:var(--v4-surface-alt);
    font-size: var(--v4-type-mini);
    line-height:1.5;
}

/* ===== 05. Product foundations | product-base.css ===== */

/* ============================================================
   INVENTORY V4 — software-inventarverwaltung.php
   ============================================================ */
body.product-v4 {
    background:var(--v4-surface);
    color:var(--v4-ink);
}
body.product-v4 p {
    font-family:inherit;
}
.v4-main {
    background:var(--v4-surface);
    color:var(--v4-dark-surface);
    overflow:hidden;
}
.v4-main h2,.v4-main h3 {
    margin:0;
    font-family:inherit;
    color:var(--v4-ink);
}
.v4-main p {
    margin:0;
    text-align:left;
    hyphens:none;
}
.v4-main img {
    display:block;
    max-width:100%;
}

/* ===== 06. Inventory visual | inventory.css ===== */

.v4-hero-visual-product {
    padding:38px 24px 52px 0;
}
.pv4-browser {
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:14px;
    background:var(--v4-surface);
    box-shadow:0 30px 78px rgba(8,21,38,.15);
    transform:rotate(-.7deg);
}
.pv4-browser-bar {
    height:45px;
    padding:0 15px;
    display:flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid var(--v4-line);
}
.pv4-browser-bar > span,
.zt4-sheet-top span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--v4-line);
}
.pv4-browser-bar small {
    margin-left:9px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
    font-weight:400;
}
.pv4-browser-bar strong {
    font-size: var(--v4-type-mini);
}
.pv4-mini-card {
    position:absolute;
    z-index:2;
    min-width:125px;
    padding:13px 15px;
    display:grid;
    gap:1px;
    border:1px solid var(--v4-line-medium);
    border-radius:10px;
    background:rgba(255,255,255,.95);
    box-shadow:0 15px 38px rgba(8,21,38,.11);
    backdrop-filter:blur(8px);
}
.pv4-mini-card small,.pv4-mini-card span {
    font-size: var(--v4-type-label);
    color:var(--v4-text-muted);
}
.pv4-mini-card strong {
    font-size: var(--v4-type-card);
    color:var(--v4-ink);
}
.pv4-mini-alert {
    right:0;
    top:10px;
}
.pv4-mini-alert strong {
    color:var(--v4-alert);
}
.pv4-mini-stock {
    left:-16px;
    bottom:32px;
}
.pv4-mini-stock strong {
    color:var(--v4-blue);
}
.v4-proofbar {
    border-block:1px solid var(--v4-line-medium);
    background:var(--v4-surface);
}
.pv4-proof-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.pv4-proof-grid > div {
    min-height:138px;
    padding:28px 30px;
    border-left:1px solid var(--v4-line-medium);
    display:grid;
    align-content:center;
    gap:5px;
}
.pv4-proof-grid > div:first-child {
    border-left:0;
}
.pv4-proof-grid span {
    font-size: var(--v4-type-label);
    color:var(--v4-blue);
    font-weight:700;
    letter-spacing:.1em;
}
.pv4-proof-grid strong {
    font-size: var(--v4-type-small);
    color:var(--v4-dark-surface);
}
.pv4-proof-grid small {
    color:var(--v4-text-soft);
    line-height:1.5;
}
.pv4-demo h2,
.v4-pricing h2,
.v4-faq h2,
.v4-final h2,
.sw4-custom h2,
.sw4-faq h2,
.v4-process h2,
.v4-title-row h2,
.zt4-product-copy h2,
.na4-video-grid h2 {
    margin-top:var(--v4-title-gap);
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.pv4-story-list {
    margin-top:54px;
    border-top:1px solid var(--v4-line-medium);
}
.pv4-story {
    min-height:430px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    border-bottom:1px solid var(--v4-line-medium);
}
.pv4-story-reverse .pv4-story-copy {
    order:2;
    padding-left:clamp(32px,5vw,74px);
    padding-right:0;
}
.pv4-story-reverse .pv4-story-media {
    order:1;
}
.pv4-story-copy {
    padding:58px clamp(32px,5vw,74px) 58px 0;
}
.pv4-story h3 {
    margin-top:14px;
    max-width:570px;
    font-size: var(--v4-type-heading);
    line-height:1.1;
    font-weight:500;
}
.pv4-story-copy > p {
    margin-top:18px;
    max-width:620px;
    color:var(--v4-text-soft);
    line-height:1.5;
}
.pv4-story-copy .v4-inline-checks {
    gap:8px;
}
.pv4-story-media {
    min-height:430px;
}
.pv4-story-media img {
    box-shadow:0 17px 44px rgba(8,21,38,.12);
}
.pv4-demo-card {
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:64px;
    align-items:center;
    padding:var(--v4-final-card-padding-y);
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:linear-gradient(110deg,var(--v4-surface-alt),var(--v4-surface) 72%);
}
.pv4-demo-copy > p:not(.v4-eyebrow),
.zt4-product-copy>p:not(.v4-eyebrow) {
    margin-top:20px;
    color:var(--v4-text-muted);
    line-height:1.7;
}
.pv4-demo-copy .v4-actions>span {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-meta);
}
.pv4-demo-visual {
    position:relative;
}
.pv4-demo-visual img {
    width:100%;
    border-radius:10px;
    box-shadow:0 20px 48px rgba(8,21,38,.13);
}
.pv4-demo-badge {
    position:absolute;
    right:14px;
    top:14px;
    padding:8px 11px;
    border-radius:999px;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    color:var(--v4-blue);
    font-size: var(--v4-type-label);
    font-weight:700;
    box-shadow:0 10px 25px rgba(8,21,38,.1);
}

/* ===== 07. Shared software pricing and FAQ | software-pricing-faq.css ===== */

/* --------------------------------------------------------------------------
   Canonical software pricing component
   All three current PHP sections use the same price-card markup.
   -------------------------------------------------------------------------- */
.v4-pricing-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 100px;
    align-items: center;
}
.v4-pricing-grid > div:first-child > p:last-child {
    margin-top: 22px;
    max-width: 620px;
    color: var(--v4-line);
    line-height: 1.7;
}
.v4-price-intro strong {
    color: var(--v4-surface);
}
.v4-pricing .v4-price-card {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    padding: 28px;
    background: var(--v4-bg-dark-alt);
    border: 1px solid var(--v4-line-strong);
    border-radius: 15px;
}
.v4-pricing .v4-price-card > p:first-child {
    display: block;
    margin: 0;
    color: var(--v4-blue-middle);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: var(--v4-type-label);
    font-weight: 700;
}
.v4-pricing .v4-price-card > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 13px;
}
.v4-pricing .v4-price-card > div strong {
    color: var(--v4-surface);
    font-size: clamp(2.4rem, 2.2rem + 0.8889vw, 3rem);
    letter-spacing: -.04em;
}
.v4-pricing .v4-price-card > div :is(small, span) {
    color:var(--v4-line);
}
.v4-pricing .v4-price-card ul {
    margin: 25px 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid var(--v4-line-strong);
    display: grid;
    gap: 10px;
    color: var(--v4-line);
}
.v4-pricing .v4-price-card li::before {
    content: "✓";
    color: var(--v4-blue-middle);
    margin-right: 9px;
    font-weight: 700;
}
.v4-pricing .v4-price-card > .v4-btn-primary {
    width: 75%;
}
.v4-pricing .v4-price-card > small:last-child {
    display: block;
    margin-top: 14px;
    color: var(--v4-line-medium);
    font-size: var(--v4-type-label);
    line-height: 1.5;
}
.v4-faq-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:96px;
    align-items:start;
}
.v4-faq-list {
    border-top:1px solid var(--v4-line-medium);
}
.v4-faq-list details {
    border-bottom:1px solid var(--v4-line-medium);
}
.v4-faq-list summary {
    cursor:pointer;
    position:relative;
    padding:24px 42px 24px 0;
    list-style:none;
    font-size: var(--v4-type-body);
    font-weight:700;
    color:var(--v4-dark-surface);
}
.v4-faq-list summary::-webkit-details-marker {
    display:none;
}
.v4-faq-list summary::after {
    content:"+";
    position:absolute;
    right:2px;
    top:19px;
    color:var(--v4-blue);
    font-size: var(--v4-type-emphasis);
    font-weight:400;
}
.v4-faq-list details[open] summary::after {
    content:"−";
}
.v4-faq-list details p {
    padding:0 38px 26px 0;
    max-width:760px;
    color:var(--v4-text-soft);
    line-height:1.5;
}
.v4-final-card > div:first-child > p:not(.v4-eyebrow) {
    max-width:700px;
    margin-top:20px;
    color:var(--v4-text-muted);
    font-size:var(--v4-final-copy-size);
    line-height:1.7;
}

/* ===== 08. Websites | web.css ===== */

/* ============================================================
   WEB V4 — Webdesign / development.php
   ============================================================ */

.v4-hero-copy-wide {
    max-width:768px;
}
.v4-intro h2 span,
.v4-about h2 span,
.av4-name h2 span,
.v4-section-head h2 span,
.av4-personal h2 span,
body.photo-v4 .v4-section-head h2 span,
.ph4-final-card h2 span {
    color:var(--v4-text-soft);
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.web-v4 .v4-hero-editorial {
    overflow:hidden;
    background:linear-gradient(104deg,var(--v4-surface) 0 54%,var(--v4-surface-alt) 100%);
}
.web-v4 .v4-hero-editorial::after {
    content:"";
    position:absolute;
    top:8%;
    right:-8%;
    width:48%;
    height:84%;
    background:radial-gradient(circle at 50% 45%, rgba(20,94,232,.075), transparent 68%);
    pointer-events:none;
}
.web-v4 .v4-lead {
    max-width:620px;
}
.wv4-stage {
    position:relative;
    z-index:2;
    isolation:isolate;
    padding:28px 6px 50px 22px;
}
.wv4-stage::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:52px -8px 22px 48px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:var(--v4-surface);
    transform:rotate(-1.15deg);
    box-shadow:0 18px 50px rgba(8,21,38,.055);
    pointer-events:none;
}
.wv4-window {
    position:relative;
    z-index:1;
    background:var(--v4-surface);
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    box-shadow:0 30px 72px rgba(20,42,69,.14);
    overflow:hidden;
    transform:rotate(.65deg);
}
.wv4-windowbar {
    height:42px;
    background:var(--v4-bg-dark-alt);
    border-bottom:1px solid var(--v4-line);
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 15px;
}
.wv4-windowbar span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--v4-surface);
}
.wv4-windowbar small {
    margin-left:9px;
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
    letter-spacing:.04em;
}
.wv4-canvas {
    min-height:400px;
    padding:28px 34px 34px;
    background:var(--v4-surface);
    position:relative;
}
.wv4-canvas-nav {
    display:flex;
    align-items:center;
    gap:13px;
}
.wv4-canvas-nav b {
    font-size: var(--v4-type-subheading);
    margin-right:auto;
}
.wv4-canvas-nav i {
    width:30px;
    height:2px;
    background:var(--v4-line-medium);
}
.wv4-canvas-copy {
    margin-top:64px;
    width:68%;
}
.wv4-canvas-copy small {
    font-size: var(--v4-type-micro);
    letter-spacing:.1em;
    color:var(--v4-blue);
}
.wv4-canvas-copy strong {
    display:block;
    font-size:clamp(2.25rem,3.7vw,3.85rem);
    line-height:.9;
    margin:15px 0 25px;
    font-weight:600;
    letter-spacing:-.05em;
}
.wv4-canvas-copy em {
    display:block;
    width:75%;
    height:6px;
    background:var(--v4-surface-alt);
    margin:9px 0;
}
.wv4-canvas-copy em+em {
    width:55%;
}
.wv4-canvas-object {
    position:absolute;
    right:30px;
    bottom:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:148px;
    height:142px;
    padding:18px;
    background:var(--v4-blue-dark);
    color:var(--v4-surface);
    box-shadow:0 16px 34px rgba(11,59,155,.16);
}
.wv4-canvas-object span {
    font-size: var(--v4-type-label);
}
.wv4-canvas-object>b {
    font-size: var(--v4-type-feature);
    line-height:1.1;
}
.wv4-code-card {
    position:absolute;
    z-index:2;
    left:-12px;
    bottom:4px;
    background:var(--v4-dark-surface);
    color:var(--v4-line-medium);
    padding:15px 18px;
    border:1px solid var(--v4-line-strong);
    border-radius:9px;
    box-shadow:0 16px 38px rgba(20,42,69,.18);
    font-family:monospace;
    font-size: var(--v4-type-label);
    display:grid;
    gap:3px;
}
.wv4-code-card b {
    color:var(--v4-surface);
}
.wv4-code-card span {
    color:var(--v4-blue-middle);
}
.wv4-stage-meta {
    position:absolute;
    z-index:3;
    top:0;
    right:8px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--v4-text-muted);
    font-family:var(--v4-ui-font);
    font-size: var(--v4-type-label);
    text-transform:uppercase;
    letter-spacing:.1em;
}
.wv4-stage-meta span {
    color:var(--v4-blue);
    font-weight:700;
}
.wv4-stage-meta small {
    padding-left:10px;
    border-left:1px solid var(--v4-line-medium);
    color:var(--v4-text-soft);
    font-size:inherit;
    letter-spacing:.08em;
}
/* .mv4-custom h2, */
.wv4-code h2,
.wv4-price h2,
.wv4-code-copy h2,
.mv4-speed h2,
.mv4-speed-copy h2,
.ph4-final h2,
.av4-name h2,
.av4-spectrum h2,
.av4-personal h2,
.ct4-after-head h2,
.ph4-web h2 {
    margin:0;
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.wv4-showcase {
    background:var(--v4-surface);
}
.wv4-showcase-stage {
    margin-top:52px;
    padding:15px;
    background:var(--v4-surface-alt);
    border:1px solid var(--v4-line);
    border-radius:20px;
    box-shadow:0 18px 48px rgba(8,21,38,.055);
}
.wv4-showcase-grid {
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
    gap:15px;
}
.wv4-study {
    position:relative;
    min-width:0;
    overflow:hidden;
    border-radius:14px;
}
.wv4-study-meta {
    position:absolute;
    z-index:3;
    top:18px;
    left:22px;
    right:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    pointer-events:none;
}
.wv4-study-meta span,
.wv4-study-meta small {
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.1em;
}
.wv4-study-meta span {
    font-size: var(--v4-type-label);
    font-weight:700;
}
.wv4-study-meta>small {
    font-size: var(--v4-type-mini);
    color:var(--v4-text-soft);
}
.wv4-study-editorial {
    min-height:476px;
    padding:62px 22px 22px;
    background:var(--v4-dark-surface);
    color:var(--v4-surface);
}
.wv4-study-editorial .wv4-study-meta span {
    color:var(--v4-blue-middle);
}
.wv4-study-editorial .wv4-study-meta small {
    color:var(--v4-line-medium);
}
.wv4-editorial-demo {
    position:relative;
    height:100%;
    min-height:390px;
    overflow:hidden;
    border:1px solid var(--v4-line-strong);
    background:var(--v4-bg-dark);
}
.wv4-editorial-demo::after {
    content:"";
    position:absolute;
    right:-90px;
    bottom:-110px;
    width:320px;
    height:320px;
    border:1px solid var(--v4-line-strong);
    border-radius:50%;
    opacity:.72;
}
.wv4-editorial-nav {
    position:relative;
    z-index:2;
    height:50px;
    padding:0 19px;
    display:flex;
    align-items:center;
    gap:22px;
    border-bottom:1px solid var(--v4-line-strong);
}
.wv4-editorial-nav b {
    margin-right:auto;
    font-size: var(--v4-type-small);
    letter-spacing:-.03em;
}
.wv4-editorial-nav span {
    color:var(--v4-line-medium);
    font-size: var(--v4-type-label);
}
.wv4-editorial-copy {
    position:relative;
    z-index:2;
    width:min(76%,610px);
    padding:61px 36px 40px;
}
.wv4-editorial-copy small {
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-micro);
    font-weight:700;
    letter-spacing:.16em;
}
.v4-main .wv4-editorial-copy h3 {
    margin-top:18px;
    color:var(--v4-surface);
    font-size:clamp(2.1rem,3.1vw,3.5rem);
    font-weight:500;
    line-height:.98;
    letter-spacing:-.05em;
}
.wv4-editorial-copy p {
    margin-top:20px;
    max-width:450px;
    color:var(--v4-line-medium);
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.wv4-editorial-index {
    position:absolute;
    z-index:1;
    right:22px;
    bottom:8px;
    color:var(--v4-line-strong);
    font-size:clamp(5rem,9vw,9rem);
    font-weight:600;
    line-height:.8;
    letter-spacing:-.1em;
}
.wv4-study-stack {
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:15px;
}
.wv4-study-structured {
    min-height:230px;
    padding:56px 19px 19px;
    border:1px solid var(--v4-line);
    background:var(--v4-surface);
}
.wv4-study-character {
    min-height:230px;
    padding:56px 19px 19px;
    border:1px solid var(--v4-line);
    background:linear-gradient(135deg,var(--v4-btn-second),var(--v4-surface) 70%);
}
.wv4-structured-demo {
    height:100%;
    overflow:hidden;
    border:1px solid var(--v4-line);
    background:var(--v4-surface);
    box-shadow:0 14px 36px rgba(8,21,38,.07);
}
.wv4-structured-top {
    height:36px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid var(--v4-line);
}
.wv4-structured-top b {
    margin-right:auto;
    color:var(--v4-ink);
    font-size: var(--v4-type-meta);
}
.wv4-structured-top b span {
    color:var(--v4-blue);
}
.wv4-structured-top i {
    width:18px;
    height:2px;
    background:var(--v4-line-medium);
}
.wv4-structured-body {
    padding:19px 20px 18px;
}
.wv4-structured-body small {
    color:var(--v4-blue);
    font-size: var(--v4-type-micro);
    font-weight:700;
    letter-spacing:.14em;
}
.v4-main .wv4-structured-body h3 {
    margin-top:10px;
    color:var(--v4-ink);
    font-size: var(--v4-type-heading);
    font-weight:500;
    line-height:1.05;
}
.wv4-structured-lines {
    margin-top:14px;
}
.wv4-structured-lines i {
    display:block;
    height:4px;
    margin-top:7px;
    background:var(--v4-surface-alt);
}
.wv4-structured-lines i:last-child {
    width:66%;
}
.wv4-study-cta {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:15px;
    padding:7px 10px;
    border-radius:6px;
    background:var(--v4-blue);
    color:var(--v4-surface);
    font-size: var(--v4-type-label);
    font-weight:700;
}
.wv4-study-cta b {
    font-size: var(--v4-type-small);
}
.wv4-character-demo {
    position:relative;
    height:100%;
    min-height:153px;
    display:grid;
    grid-template-columns:96px 1fr;
    gap:18px;
    align-items:end;
}
.wv4-character-mark {
    align-self:stretch;
    min-height:145px;
    display:grid;
    grid-template-rows:1fr 1fr 1fr;
    gap:6px;
    transform:rotate(-2deg);
}
.wv4-character-mark span {
    display:block;
    border-radius:4px;
    background:var(--v4-blue);
}
.wv4-character-mark span:nth-child(2) {
    margin-left:24px;
    background:var(--v4-blue-dark);
}
.wv4-character-mark span:nth-child(3) {
    margin-right:18px;
    background:var(--v4-blue-middle);
}
.wv4-character-demo small {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-micro);
    font-weight:700;
    letter-spacing:.13em;
}
.v4-main .wv4-character-demo h3 {
    margin-top:8px;
    color:var(--v4-ink);
    font-size:clamp(2.7rem,4.5vw,4.5rem);
    font-weight:500;
    line-height:.8;
    letter-spacing:-.07em;
}
.wv4-character-demo h3 span {
    color:var(--v4-blue);
}
.wv4-character-demo p {
    margin-top:11px;
    max-width:340px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.wv4-showcase-foot {
    min-height:52px;
    padding:14px 6px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.wv4-showcase-foot p {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
}
.wv4-showcase-foot strong {
    color:var(--v4-ink);
    font-weight:600;
}
.wv4-showcase-foot > span,
.v4-main .wv4-caption {
    color: var(--v4-text-soft);
    font-size: var(--v4-type-label);
}
.wv4-showcase-foot > span {
    text-transform:uppercase;
    letter-spacing:.12em;
}
.v4-main .wv4-caption {
    margin-top:14px;
    text-align:right;
}
.wv4-approach {
    background:var(--v4-surface-alt);
}
.wv4-code-grid {
    grid-template-columns:.8fr 1.2fr;
    gap:10vw;
}
.wv4-code,
.mv4-speed,
.ph4-web,
.av4-spectrum {
    background:var(--v4-dark-surface);
    color:var(--v4-surface);
}
.wv4-code-copy p {
    color:var(--v4-line-medium);
}
.wv4-textlink {
    display:inline-block;
    margin-top:12px;
    color:var(--v4-blue-middle);
    text-decoration:none;
    border-bottom:1px solid var(--v4-line-strong);
    padding-bottom:3px;
    transition: all .2s ease-in-out;
}
.wv4-textlink:hover {
    border-bottom:1.4px solid var(--v4-blue-middle);
}
.wv4-terminal {
    background:var(--v4-bg-dark-alt2);
    border:1px solid var(--v4-line-strong);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 28px 60px rgba(0,0,0,.18);
}
.wv4-terminal>div {
    height:42px;
    border-bottom:1px solid var(--v4-line-strong);
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 15px;
}
.wv4-terminal i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--v4-text-lite);
}
.wv4-terminal small {
    margin-left:8px;
    color:var(--v4-text-lite);
}
.wv4-terminal pre {
    padding:35px;
    margin:0;
    color:var(--v4-line);
    line-height:2;
    font-size: var(--v4-type-small);
    white-space:pre-wrap;
}
.wv4-terminal pre span {
    color:var(--v4-text-lite);
    margin-right:12px;
}
.wv4-price-card {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9vw;
    column-gap:var(--v4-split-gap);
    padding:var(--v4-final-card-padding-y);
    background:var(--v4-surface-alt);
}
.wv4-price-card>div>p:not(.v4-eyebrow) {
    color:var(--v4-text-muted);
    line-height:1.7;
    max-width:550px;
}
.wv4-price-value {
    margin:0;
    padding:0;
}
.wv4-price-value small,.wv4-price-value>span {
    display:block;
    color:var(--v4-text-soft);
}
.wv4-price-value small {
    font-size: var(--v4-type-small);
}
.wv4-price-value strong {
    display:block;
    font-size: clamp(2.24rem, 2.0533rem + 0.8296vw, 2.8rem);
    margin:6px 0;
    font-weight:600;
}
.wv4-price-value>p {
    margin:20px 0 25px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-small);
    line-height:1.5;
}

/* ===== 09. Maintenance visual | maintenance.css ===== */

/* ============================================================
   Wartung V4
   ============================================================ */
.maintenance-v4 .v4-navigation a[href="wartung.php"] {
    color:var(--v4-blue);
}
.mv4-care {
    position:relative;
    z-index:2;
    padding:34px 30px 38px 8px;
}
.mv4-care-back {
    position:absolute;
    inset:16px 8px 18px 28px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(20,94,232,.06),transparent 56%),
        var(--v4-surface-alt);
    transform:rotate(2deg);
}
.mv4-care-panel {
    position:relative;
    overflow:hidden;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    background:var(--v4-surface);
    box-shadow:0 30px 75px rgba(23,45,70,.12);
    transform:rotate(-.65deg);
}
.mv4-care-top {
    min-height:52px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 22px;
    border-bottom:1px solid var(--v4-line);
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
}
.mv4-care-top small {
    margin-left:auto;
    color:var(--v4-text-muted);
}
.mv4-care-dot {
    width:8px;
    height:8px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--v4-success-accent);
    box-shadow:0 0 0 5px rgba(28,155,97,.09);
}
.mv4-care-task {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    margin:26px 28px 0;
    padding:22px 22px;
    border:1px solid var(--v4-line);
    border-radius:13px;
    background:linear-gradient(120deg,var(--v4-surface-alt),var(--v4-surface));
}
.mv4-care-label {
    align-self:start;
    padding:6px 8px;
    border:1px solid var(--v4-line-medium);
    border-radius:999px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-micro);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.mv4-care-task strong {
    display:block;
    color:var(--v4-ink);
    font-size: var(--v4-type-body);
    font-weight:600;
}
.mv4-care-task p {
    margin-top:5px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    line-height:1.4;
}
.mv4-care-arrow {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--v4-btn-second);
    color:var(--v4-blue);
    font-size: var(--v4-type-body);
}
.mv4-care-flow {
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;
    gap:10px;
    margin:20px 42px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-micro);
    letter-spacing:.04em;
}
.mv4-care-flow i {
    height:1px;
    background:linear-gradient(90deg,var(--v4-line-medium),var(--v4-blue-middle));
}
.mv4-care-flow span:last-child {
    color:var(--v4-blue);
    font-weight:700;
}
.mv4-care-result {
    display:flex;
    align-items:center;
    gap:15px;
    margin:0 28px;
    padding:20px 22px;
    border:1px solid rgba(20,94,232,.16);
    border-radius:13px;
    background:rgba(237,243,255,.72);
}
.mv4-care-check {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:10px;
    background:var(--v4-blue);
    color:var(--v4-surface);
    box-shadow:0 9px 20px rgba(20,94,232,.17);
}
.mv4-care-result small {
    display:block;
    color:var(--v4-blue);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.mv4-care-result strong {
    display:block;
    margin-top:3px;
    color:var(--v4-ink);
    font-size: var(--v4-type-body);
    font-weight:600;
}
.mv4-care-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin:24px 28px 0;
    border-top:1px solid var(--v4-line);
    border-bottom:1px solid var(--v4-line);
}
.mv4-care-meta span {
    display:grid;
    gap:3px;
    padding:13px 12px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    text-align:center;
}
.mv4-care-meta span + span {
    border-left:1px solid var(--v4-line);
}
.mv4-care-meta b,
.mv4-origin-steps b {
    color:var(--v4-line-strong);
    font-size: var(--v4-type-label);
    font-weight:600;
}
.mv4-care-note {
    margin:0;
    padding:18px 28px 22px;
    color:var(--v4-blue);
    font-size: var(--v4-type-small);
    font-style:italic;
    text-align:right;
}
.v4-feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--v4-line-medium);
    border-bottom:1px solid var(--v4-line-medium);
}
.wv4-approach .v4-feature-grid {
    background: var(--v4-surface);
}
.v4-feature-grid article {
    padding:30px 28px 35px;
    border-left:1px solid var(--v4-line-medium);
}
.v4-feature-grid article:first-child {
    border-left:0;
}
.v4-feature-grid span {
     color:var(--v4-blue);
    font-size: var(--v4-type-label);
}
.v4-feature-grid h3 {
    margin:12px 0;
    font-size: var(--v4-type-card);
}
.v4-feature-grid p {
    margin:0;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.v4-feature-grid-strong {
    border-color:var(--v4-line-medium);
}
.v4-feature-grid-strong h3 {
    margin-top:44px;
    color: var(--v4-ink);
    font-size: var(--v4-type-subheading);
    font-weight:500;
}
.v4-feature-grid-strong article { 
    padding:31px 27px 35px;
    border-color:var(--v4-line-medium);
}
.v4-feature-grid-strong p { 
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
}
.mv4-speed-grid {
    grid-template-columns:.7fr 1.1fr;
    gap:10vw;
}
.mv4-speed-number {
    min-height:180px;
    padding-right:65px;
    display:flex;
    align-items:flex-end;
    gap:18px;
    border-right:1px solid var(--v4-line-strong);
}
.mv4-speed-number strong {
    color:var(--v4-surface);
    font-size:clamp(6.5rem,12vw,11rem);
    font-weight:500;
    line-height:.8;
    letter-spacing:-.1em;
}
.mv4-speed-number span {
    padding-bottom:7px;
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.mv4-speed-copy p {
    color:var(--v4-line-medium);
    line-height:1.5;
    max-width:600px;
}
.mv4-speed-copy .mv4-small {
    margin-top: 20px;
    color:var(--v4-surface-alt);
    font-size: var(--v4-type-label);
}
.mv4-origin {
    background:linear-gradient(180deg,var(--v4-surface-alt),rgba(243,246,248,.62)),var(--v4-surface-alt);
}
.mv4-origin-stage {
    position:relative;
    padding:20px;
    border:1px solid var(--v4-line);
    border-radius:20px;
    background:var(--v4-surface);
    box-shadow:0 22px 58px rgba(8,21,38,.075);
}
.mv4-origin-paths {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.mv4-origin-route {
    position:relative;
    min-height:390px;
    display:flex;
    flex-direction:column;
    padding:34px;
    border:1px solid var(--v4-line);
    border-radius:15px;
    background:var(--v4-surface);
}
.mv4-origin-route-own {
    background:linear-gradient(145deg,var(--v4-surface-alt),var(--v4-surface) 72%);
}
.mv4-origin-route::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-21px;
    width:1px;
    height:20px;
    background:linear-gradient(var(--v4-line-medium),var(--v4-blue-middle));
}
.mv4-origin-route-head {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:16px;
    align-items:start;
}
.mv4-origin-index,
.mv4-origin-route-head div>span {
    color: var(--v4-blue);
    font-weight: 700;
}
.mv4-origin-index {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    font-size: var(--v4-type-meta);
    border:1px solid var(--v4-line);
    border-radius:12px;
    background:var(--v4-surface);
}
.mv4-origin-route-head div>span {
    display:block;
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.mv4-origin-route h3 {
    margin:8px 0 0;
    max-width:470px;
    color:var(--v4-ink);
    font-size: var(--v4-type-emphasis);
    font-weight:500;
    line-height:1.1;
}
.mv4-origin-route>p {
    max-width:560px;
    margin-top:22px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.mv4-origin-steps {
    display:grid;
    margin:auto 0 0;
    padding:24px 0 0;
}
.mv4-origin-steps li {
    position:relative;
    display:grid;
    grid-template-columns:32px 1fr;
    gap:12px;
    align-items:center;
    min-height:58px;
}
.mv4-origin-steps li + li {
    margin-top:10px;
}
.mv4-origin-steps li>span {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface);
    color:var(--v4-text-muted);
    font-size: var(--v4-type-mini);
    font-weight:700;
}
.mv4-origin-steps b,
.mv4-origin-steps small {
    display:block;
}
.mv4-origin-steps small {
    margin-top:2px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
}
.mv4-origin-target {
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    margin-top:20px;
    padding:24px 28px;
    overflow:hidden;
    border-radius:15px;
    background:var(--v4-bg-dark);
    color:var(--v4-surface);
}
.mv4-origin-target::after {
    content:"";
    position:absolute;
    right:-70px;
    top:-95px;
    width:230px;
    height:230px;
    border:36px solid rgba(159, 191, 254, 0.15);
    border-radius:50%;
}
.mv4-origin-target-mark {
    position:relative;
    z-index:1;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:var(--v4-blue);
    color:var(--v4-surface);
    box-shadow:0 10px 24px rgba(20,94,232,.22);
}
.mv4-origin-target>div {
    position:relative;
    z-index:1;
}
.mv4-origin-target>div>span {
    display:block;
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.mv4-origin-target strong {
    display:block;
    margin-top:4px;
    color:var(--v4-surface);
    font-size: var(--v4-type-subheading);
    font-weight:600;
}
.mv4-origin-target ul {
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
    margin:0;
    padding:0;
}
.mv4-origin-target li,
.ph4-custom-tags li {
    padding:7px 10px;
    border:1px solid var(--v4-line-strong);
    border-radius:999px;
    color:var(--v4-line-medium);
    font-size: var(--v4-type-label);
}
.mv4-price-grid {
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.mv4-inline-link {
    margin-top:auto;
    padding-top:18px;
    color:var(--v4-dark-surface);
    text-decoration:none;
    font-size: var(--v4-type-small);
    border-bottom:1px solid var(--v4-line);
    width:max-content;
}
.mv4-inline-link:hover {
    color:var(--v4-blue);
}

/* ===== 10. Shared plan cards and checklists | plan-components.css ===== */

/* Shared plan-card foundation currently used by maintenance pricing.
   Photography keeps its distinct editorial offer layout. */
.v4-plan-grid {
    display:grid;
    align-items:stretch;
}
.v4-plan-card {
    position:relative;
    background:var(--v4-surface);
    display:flex;
    flex-direction:column;
}
.v4-plan-tag {
    position:absolute;
    right:22px;
    top:0;
    transform:translateY(-50%);
    padding:7px 11px;
    color:var(--v4-surface);
    font-size: var(--v4-type-micro);
    letter-spacing:.08em;
    text-transform:uppercase;
}
.v4-plan-package {
    color:var(--v4-blue);
    text-transform:uppercase;
}
.v4-plan-price {
    display:flex;
    align-items:baseline;
    gap:9px;
}
.v4-plan-price strong {
    letter-spacing:-.05em;
}
.v4-check-list {
    list-style:none;
}
.v4-check-list li {
    position:relative;
}
.v4-check-list li::before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--v4-blue);
}

/* ===== 11. Maintenance pricing | maintenance-pricing.css ===== */

.mv4-price-head {
    margin-bottom:44px;
}
.mv4-price-card {
    border:1px solid var(--v4-line-medium);
    padding:39px;
}
.mv4-price-card-featured {
    background:var(--v4-dark-surface);
    color:var(--v4-surface);
    border-color:var(--v4-dark-surface);
    box-shadow:0 25px 60px rgba(23,38,58,.12);
}
.mv4-price-label {
    right:25px;
    background:var(--v4-blue);
    padding:7px 12px;
    font-size:var(--v4-type-label);
}
.mv4-package {
    font-size:var(--v4-type-label);
    font-weight:600;
    letter-spacing:.1em;
    margin:0 0 15px;
}
.mv4-price-card-featured .mv4-package {
    color:var(--v4-blue-middle);
}
.mv4-price strong {
    font-size: var(--v4-type-h2);
    font-weight:600;
}
.mv4-price span {
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
}
.mv4-price-card-head>p:last-child {
    color:var(--v4-text-muted);
    line-height:1.5;
    min-height:54px;
}
.mv4-price-card-featured .mv4-price-card-head>p:last-child {
    color:var(--v4-line-medium);
}
.mv4-price-card ul {
    padding:26px 0 23px;
    margin:20px 0 0;
    border-top:1px solid var(--v4-line);
}
.mv4-price-card-featured ul {
    border-color:var(--v4-line-strong);
}
.mv4-price-card li {
    padding:7px 0 7px 23px;
    font-size: var(--v4-type-small);
    color:var(--v4-text-soft);
}
.mv4-price-card-featured li {
    color:var(--v4-line);
}
.mv4-price-card-featured li:before {
    color:var(--v4-blue-middle);
}
.mv4-package-note {
    display:flex;
    gap:18px;
    border-top:1px solid var(--v4-line);
    padding:20px 0 26px;
    margin-top:auto;
    font-size: var(--v4-type-label);
}
.mv4-price-card-featured .mv4-package-note {
    border-color:var(--v4-line-strong);
}
.mv4-package-note b {
    color:var(--v4-bg-dark-alt);
}
.mv4-price-card-featured .mv4-package-note b {
    color:var(--v4-surface);
}
.mv4-package-note span {
    color:var(--v4-text-soft);
}
.mv4-price-card-featured .mv4-package-note span {
    color:var(--v4-line-medium);
}
.mv4-price-card-featured .v4-btn-primary {
    background:var(--v4-surface);
    color:var(--v4-dark-surface);
}
.mv4-price-card-featured .v4-btn-primary:hover {
    background:var(--v4-surface-alt);
}
.mv4-hosting-note {
    margin-top:18px;
    background:var(--v4-surface-alt);
    border-left:3px solid var(--v4-blue);
    padding:24px 28px;
    grid-template-columns:.8fr 1.2fr;
    gap:40px;
}
.mv4-hosting-note span {
    display:block;
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    color:var(--v4-blue);
    margin-bottom:5px;
}
.mv4-hosting-note strong {
    font-size: var(--v4-type-body);
}
.mv4-hosting-note p {
    margin:0;
    color:var(--v4-text-muted);
    line-height:1.5;
    font-size: var(--v4-type-small);
}
/*.mv4-custom-card {
    background:var(--v4-surface-alt);
    padding:50px 55px;
    grid-template-columns:.8fr 1.1fr;
    gap:8vw;
}
.mv4-custom-card>div:last-child p {
    margin-top:0;
    color:var(--v4-text-muted);
    line-height:1.5;
} */

/* ===== 12. Photography | photography.css ===== */

/* ==========================================================
   V4 · BUSINESSFOTOGRAFIE
   ========================================================== */
.photo-v4 {
    background:var(--v4-surface);
}
.ph4-hero-canvas {
    position:relative;
    min-height:550px;
}
.ph4-hero-image {
    position:absolute;
    margin:0;
    overflow:hidden;
    background:var(--v4-surface-alt);
}
.ph4-hero-image img,
.ph4-offer-media img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.ph4-hero-image-main {
    inset:0 0 52px 18%;
    box-shadow:0 30px 70px rgba(30,47,67,.13);
}
.ph4-hero-image-main img {
    object-position:center 47%;
}
.ph4-hero-image-portrait {
    width:35%;
    height:42%;
    left:0;
    bottom:0;
    border:10px solid var(--v4-surface);
    box-shadow:0 18px 45px rgba(30,47,67,.12);
}
.ph4-hero-image-portrait img {
    object-position:center;
}
.ph4-frame-note {
    position:absolute;
    right:-22px;
    top:230px;
    display:grid;
    grid-template-columns:auto 40px auto;
    align-items:center;
    gap:9px;
    transform:rotate(90deg);
    transform-origin:right top;
    font-size: var(--v4-type-mini);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--v4-text-muted);
}
.ph4-frame-note span {
    color:var(--v4-blue);
}
.ph4-frame-note i {
    height:1px;
    background:var(--v4-line-medium);
}
.ph4-frame-note b {
    font-weight:500;
}
.ph4-handnote {
    position:absolute;
    right:1%;
    bottom:11px;
    margin:0;
    color:var(--v4-line-strong);
    font-size: var(--v4-type-small);
    font-style:italic;
    transform:rotate(-3deg);
}
.ph4-editorial-grid {
    display:grid;
    gap:18px;
}
.ph4-feature {
    display:grid;
    grid-template-columns:1.12fr .88fr;
    min-height:470px;
    background:var(--v4-surface-alt);
}
.ph4-feature:nth-child(even) {
    grid-template-columns:.88fr 1.12fr;
}
.ph4-feature figure {
    margin:0;
    min-height:470px;
    overflow:hidden;
}
.ph4-feature figure img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.ph4-feature:hover figure img {
    transform:scale(1.018);
}
.ph4-feature-portrait figure img {
    object-position:center 35%;
}
.ph4-feature-reportage figure img {
    object-position:center 47%;
}
.ph4-feature-space figure img {
    object-position:center;
}
.ph4-feature-copy {
    padding:var(--v4-final-card-padding-y);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ph4-feature-copy>span {
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--v4-blue);
}
.ph4-feature-copy h3 {
    margin:25px 0 15px;
    font-size: var(--v4-type-heading);
    font-weight:500;
    line-height:1.1;
    letter-spacing:-.04em;
}
.ph4-feature-copy p {
    margin:0;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.ph4-feature-copy small {
    margin-top:35px;
    padding-top:15px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    letter-spacing:.04em;
    border-top:1px solid var(--v4-line);
}
.ph4-gallery-label {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:19px;
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--v4-text-muted);
}
.ph4-gallery-label span {
    color:var(--v4-blue);
}
.ph4-gallery-label i {
    width:50px;
    height:1px;
    background:var(--v4-line-medium);
}
.ph4-gallery-grid {
    display:grid;
    grid-template-columns:1fr .8fr .8fr 1fr;
    grid-template-rows:285px 270px;
    gap:12px;
}
.ph4-gallery-grid figure {
    margin:0;
    overflow:hidden;
    background:var(--v4-surface-alt);
}
.ph4-gallery-grid img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease,filter .6s ease;
}
.ph4-gallery-grid figure:hover img {
    transform:scale(1.025);
}
.ph4-g1 {
    grid-column:1/3;
    grid-row:1;
}
.ph4-g2 {
    grid-column:3/5;
    grid-row:1;
}
.ph4-g3 {
    grid-column:1;
    grid-row:2;
}
.ph4-g4 {
    grid-column:2;
    grid-row:2;
}
.ph4-g5 {
    grid-column:3/5;
    grid-row:2;
}
.ph4-g1 img {
    object-position:center 27%;
}
.ph4-g2 img {
    object-position:center 42%;
}
.ph4-g4 img {
    object-position:center 22%;
}
.ph4-g5 img {
    object-position:center 45%;
}
.ph4-web-grid {
    display:grid;
    grid-template-columns:.2fr .9fr .82fr;
    gap:6vw;
    align-items:center;
}
.ph4-web-grid>div:last-child {
    color:var(--v4-line);
    line-height:1.7;
}
.ph4-web-label {
    height:180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-right:1px solid var(--v4-line-strong);
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
    letter-spacing:.14em;
    text-transform:uppercase;
}
.ph4-web-label i {
    height:56px;
    width:1px;
    background:var(--v4-text-muted);
}
.ph4-text-link {
    display:inline-block;
    margin-top:16px;
    color:var(--v4-blue);
    text-decoration:none;
    font-size: var(--v4-type-small);
    border-bottom:1px solid rgba(18,100,216,.35);
    padding-bottom:4px;
}
.ph4-web .ph4-text-link {
    color:var(--v4-blue-middle);
    border-color:var(--v4-text-muted);
}
.ph4-text-link:hover {
    border-color:currentColor;
}
.ph4-process {
    background:var(--v4-surface-alt);
}
.ph4-process .v4-feature-grid article {
    background-color: var(--v4-surface);
}
.ph4-process .v4-feature-grid span,
.av4-values .v4-feature-grid span {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    background:var(--v4-surface-alt);
    color:var(--v4-blue);
    font-weight:600;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
}
.ph4-pricing {
    background:
        linear-gradient(180deg,var(--v4-surface-alt),rgba(243,246,248,.72)),
        var(--v4-surface-alt);
}
.ph4-price-head {
    margin-bottom:45px;
}
.ph4-pricing-stage {
    position:relative;
}
.ph4-offer-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.ph4-offer {
    min-width:0;
    display:grid;
    grid-template-rows:205px 1fr;
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:var(--v4-surface);
    box-shadow:0 18px 48px rgba(8,21,38,.055);
}
.ph4-offer-featured {
    border-color:var(--v4-blue-middle);
    box-shadow:0 24px 62px rgba(20,94,232,.09);
}
.ph4-offer-media {
    position:relative;
    height:205px;
    margin:0;
    overflow:hidden;
    background:var(--v4-line);
}
.ph4-offer-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 42%,rgba(8,21,38,.62));
    pointer-events:none;
}
.ph4-offer:first-child .ph4-offer-media img {
    object-position:center 32%;
}
.ph4-offer-featured .ph4-offer-media img {
    object-position:center 46%;
}
.ph4-offer-media figcaption {
    position:absolute;
    left:22px;
    bottom:18px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--v4-surface);
}
.ph4-offer-media figcaption span {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    font-size: var(--v4-type-label);
    font-weight:700;
}
.ph4-offer-media figcaption small,
.ph4-offer-tag {
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ph4-offer-media figcaption small {
    font-size: var(--v4-type-label);
}
.ph4-offer-tag {
    position:absolute;
    right:18px;
    top:18px;
    z-index:2;
    padding:7px 10px;
    border-radius:999px;
    background:var(--v4-blue);
    color:var(--v4-surface);
    font-size: var(--v4-type-micro);
    font-weight:700;
    box-shadow:0 9px 22px rgba(20,94,232,.2);
}
.ph4-offer-body {
    display:flex;
    flex-direction:column;
    min-height:440px;
    padding:32px;
}
.ph4-offer-head {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-start;
}
.ph4-package {
    margin:5px 0 0;
    color:var(--v4-blue);
    font-size: var(--v4-type-small);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ph4-price {
    display:grid;
    justify-items:end;
    gap:4px;
    flex:0 0 auto;
}
.ph4-price strong {
    color:var(--v4-ink);
    font-size: var(--v4-type-h2);
    line-height:1;
    font-weight:600;
    letter-spacing:-.05em;
}
.ph4-price span {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
}
.ph4-price-intro {
    max-width:500px;
    margin-top:22px;
    color:var(--v4-text-muted);
    line-height:1.5;
    font-size: var(--v4-type-small);
}
.ph4-offer-list {
    margin:25px 0 0;
    padding:0;
    border-top:1px solid var(--v4-line);
    border-bottom:1px solid var(--v4-line);
}
.ph4-offer-list li {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:11px 0;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
}
.ph4-offer-list li + li {
    border-top:1px solid var(--v4-line);
}
.ph4-offer-list b {
    color:var(--v4-line-strong);
    font-weight:600;
    text-align:right;
}
.ph4-price-note {
    margin-top:auto;
    padding-top:22px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
    line-height:1.5;
}
.ph4-offer .v4-btn {
    width:290px;
    max-width:100%;
    margin-top:20px;
    align-self:flex-start;
    white-space:nowrap;
}
.ph4-included {
    display:grid;
    grid-template-columns:minmax(210px,.34fr) 1fr;
    gap:28px;
    align-items:center;
    margin-top:18px;
    padding:24px 28px;
    border:1px solid var(--v4-line);
    border-radius:14px;
    background:rgba(255,255,255,.78);
}
.ph4-included>div>span {
    display:block;
    color:var(--v4-blue);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ph4-included strong {
    display:block;
    margin-top:4px;
    color:var(--v4-ink);
    font-size: var(--v4-type-card);
    font-weight:600;
}
.ph4-included ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px 18px;
    margin:0;
    padding:0;
}
.ph4-included li {
    position:relative;
    padding-left:18px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
}
.ph4-included li::before {
    content:"✓";
    position:absolute;
    left:0;
    color:var(--v4-blue);
    font-weight:700;
}
.ph4-custom-offer {
    position:relative;
    display:grid;
    grid-template-columns:100px minmax(0,1fr) minmax(260px,.55fr);
    gap:36px;
    align-items:center;
    margin-top:18px;
    padding:36px 40px;
    overflow:hidden;
    border-radius:18px;
    background:var(--v4-bg-dark);
    color:var(--v4-surface);
}
.ph4-custom-offer::after {
    content:"";
    position:absolute;
    right:-95px;
    top:-125px;
    width:300px;
    height:300px;
    border:42px solid rgba(159,190,254,.12);
    border-radius:50%;
    pointer-events:none;
}
.ph4-custom-index {
    position:relative;
    z-index:1;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:10px;
    min-height:150px;
    border-right:1px solid var(--v4-line-strong);
    color:var(--v4-blue-middle);
}
.ph4-custom-index span {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--v4-line-strong);
    border-radius:50%;
    font-size: var(--v4-type-label);
    font-weight:700;
}
.ph4-custom-index i {
    width:1px;
    height:34px;
    background:var(--v4-line-strong);
}
.ph4-custom-index small {
    font-size: var(--v4-type-mini);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ph4-custom-copy,
.ph4-custom-action {
    position:relative;
    z-index:1;
}
.ph4-custom-offer .v4-eyebrow {
    color:var(--v4-blue-middle);
}
.ph4-custom-copy h3 {
    margin:12px 0 0;
    max-width:620px;
    color:var(--v4-surface);
    font-size: var(--v4-type-heading);
    font-weight:500;
    line-height:1.1;
}
.ph4-custom-copy>p:not(.v4-eyebrow) {
    max-width:650px;
    margin-top:16px;
    color:var(--v4-line-medium);
    line-height:1.5;
}
.ph4-custom-tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:22px 0 0;
    padding:0;
}
.ph4-custom-action {
    padding-left:32px;
    border-left:1px solid var(--v4-line-strong);
}
.ph4-custom-price {
    display:grid;
    gap:3px;
}
.ph4-custom-price strong {
    color:var(--v4-surface);
    font-size: var(--v4-type-display-small);
    font-weight:600;
    line-height:1;
    letter-spacing:-.04em;
}
.ph4-custom-price span {
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-small);
}
.ph4-custom-action>p {
    margin-top:18px;
    color:var(--v4-line-medium);
    font-size: var(--v4-type-label);
    line-height:1.5;
}
.ph4-custom-action .v4-btn {
    margin-top:22px;
}
.ph4-final-card {
    display:grid;
    grid-template-columns:.7fr 1fr;
    min-height:430px;
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:var(--v4-surface-alt);
    box-shadow:0 20px 52px rgba(8,21,38,.065);
}
.ph4-final-card figure {
    margin:0;
    overflow:hidden;
    min-height:430px;
}
.ph4-final-card figure img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 33%;
    display:block;
}
.ph4-final-card>div {
    padding:var(--v4-final-card-padding-y) 65px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ph4-final-card>div>p {
    max-width:610px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.ph4-final-card small {
    margin-top:18px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
}

/* ===== 13. About | about.css ===== */

/* ============================================================
   ABOUT / ÜBER BEWOPS V4
   ============================================================ */
.about-v4 .v4-navigation a[href="ueber-bewops.php"] {
    color:var(--v4-blue);
}
.about-v4 .v4-hero-editorial {
    isolation:isolate;
    background:
        linear-gradient(104deg,var(--v4-surface) 0 54%,var(--v4-surface-alt) 100%);
}
.about-v4 .v4-hero-editorial::after {
    content:"";
    position:absolute;
    z-index:0;
    top:7%;
    right:-10%;
    width:50%;
    height:86%;
    background:radial-gradient(circle at 48% 44%,rgba(20,94,232,.085),transparent 67%);
    pointer-events:none;
}
.av4-signature {
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
    letter-spacing:.09em;
    text-transform:uppercase;
}
.av4-signature i {
    width:42px;
    height:1px;
    background:var(--v4-line-strong);
}
.av4-portrait {
    position:relative;
    z-index:2;
    width:100%;
    max-width:455px;
    margin:0 18px 28px 0;
    justify-self:end;
    isolation:isolate;
}
.av4-portrait::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:28px -22px -18px 30px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(20,94,232,.045),transparent 54%),
        var(--v4-surface-alt);
    transform:rotate(1.2deg);
}
.av4-portrait img {
    position:relative;
    z-index:1;
    width:100%;
    height:560px;
    display:block;
    object-fit:cover;
    object-position:center 24%;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    filter:saturate(.86);
    box-shadow:0 28px 68px rgba(8,21,38,.12);
}
.av4-portrait figcaption {
    position:absolute;
    z-index:4;
    left:22px;
    right:-12px;
    bottom:-24px;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:0 15px;
    border:1px solid var(--v4-line);
    border-radius:10px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 30px rgba(8,21,38,.08);
    backdrop-filter:blur(8px);
    color:var(--v4-text-muted);
    font-size: var(--v4-type-micro);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.av4-portrait figcaption span {
    color:var(--v4-blue);
    font-weight:700;
}
.av4-portrait figcaption i {
    height:1px;
    flex:1;
    background:var(--v4-line-strong);
}
.av4-portrait figcaption b {
    font-weight:500;
}
.av4-name {
    background:
        linear-gradient(180deg,var(--v4-surface),rgba(243,246,248,.62)),
        var(--v4-surface);
}
.av4-name-grid {
    grid-template-columns:.75fr 1.15fr;
    gap:10vw;
}
.av4-wordmark-story {
    position:relative;
    overflow:hidden;
    padding:34px 40px 32px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:
        radial-gradient(circle at 92% 12%,rgba(20,94,232,.065),transparent 25%),
        var(--v4-surface);
    box-shadow:0 20px 54px rgba(8,21,38,.065);
}
.av4-wordmark-story::before {
    content:"";
    position:absolute;
    right:-76px;
    bottom:-96px;
    width:230px;
    height:230px;
    border:34px solid rgba(20,94,232,.045);
    border-radius:50%;
    pointer-events:none;
}
.av4-word {
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    padding:16px 0 20px;
    border-bottom:1px solid var(--v4-line);
}
.av4-word span {
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    text-transform:uppercase;
}
.av4-word strong {
    color:var(--v4-text-soft);
    font-size:clamp(2.6rem,5vw,5rem);
    font-weight:500;
    letter-spacing:-.07em;
    line-height:.9;
}
.av4-word-final {
    padding-top:20px;
}
.av4-word-final strong {
    color:var(--v4-bg-dark-alt);
}
.av4-word-final strong span {
    color:var(--v4-blue);
    font-size:inherit;
    letter-spacing:inherit;
}
.av4-turn {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px 0;
    color:var(--v4-blue);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.1em;
}
.av4-turn span {
    padding:5px 8px;
    border:1px solid var(--v4-blue-light);
    border-radius:999px;
    background:var(--v4-btn-second);
}
.av4-turn i {
    height:1px;
    flex:1;
    background:linear-gradient(90deg,var(--v4-line-medium),var(--v4-blue-middle));
}
.av4-turn::after {
    content:"";
    width:7px;
    height:7px;
    flex:0 0 auto;
    border:2px solid var(--v4-surface);
    border-radius:50%;
    background:var(--v4-blue);
    box-shadow:0 0 0 1px var(--v4-blue-middle);
}
.av4-wordmark-story>p {
    position:relative;
    z-index:1;
    max-width:650px;
    margin:26px 0 0;
    padding-top:24px;
    border-top:1px solid var(--v4-line);
    color:var(--v4-text-muted);
    line-height:1.5;
}
.av4-values {
    background:var(--v4-surface-alt);
}
.av4-spectrum {
    position:relative;
    overflow:hidden;
}
.av4-spectrum::after {
    content:"";
    position:absolute;
    right:-120px;
    top:-150px;
    width:360px;
    height:360px;
    border:52px solid rgba(159,190,254,.035);
    border-radius:50%;
    pointer-events:none;
}
.av4-spectrum-grid {
    position:relative;
    z-index:1;
    grid-template-columns:.65fr 1.2fr;
    gap:9vw;
}
.av4-spectrum-list {
    border-top:1px solid var(--v4-line-strong);
}
.av4-spectrum-list a {
    position:relative;
    display:grid;
    grid-template-columns:50px 1fr 1fr 38px;
    gap:20px;
    align-items:center;
    padding:22px 8px;
    border-bottom:1px solid var(--v4-line-strong);
    color:var(--v4-surface);
    text-decoration:none;
    transition:background .2s ease,padding .2s ease;
}
.av4-spectrum-list a::before {
    content:"";
    position:absolute;
    left:0;
    top:20%;
    bottom:20%;
    width:2px;
    border-radius:2px;
    background:var(--v4-blue);
    opacity:0;
    transform:scaleY(.25);
    transition:opacity .2s ease,transform .2s ease;
}
.av4-spectrum-list a:hover {
    padding-left:14px;
    background:rgba(255,255,255,.025);
}
.av4-spectrum-list a:hover::before {
    opacity:1;
    transform:scaleY(1);
}
.av4-spectrum-list span {
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
}
.av4-spectrum-list strong {
    font-weight:500;
}
.av4-spectrum-list small {
    color:var(--v4-text-lite);
}
.av4-spectrum-list b {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    justify-self:end;
    border:1px solid var(--v4-line-strong);
    border-radius:50%;
    color:var(--v4-blue-middle);
    font-weight:400;
    transition:border-color .2s ease,background .2s ease;
}
.av4-spectrum-list a:hover b {
    border-color:var(--v4-blue-middle);
    background:rgba(159,190,254,.07);
}
.av4-personal-grid {
    grid-template-columns:.65fr 1fr;
    gap:9vw;
}
.av4-personal figure {
    position:relative;
    height:500px;
    margin:0;
    overflow:visible;
    isolation:isolate;
}
.av4-personal figure::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:24px -18px -18px 24px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:var(--v4-surface-alt);
    transform:rotate(-1deg);
}
.av4-personal figure img {
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 30%;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    filter:saturate(.86);
    box-shadow:0 24px 62px rgba(8,21,38,.1);
}
.av4-personal-grid>div>p {
    max-width:670px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.av4-personal blockquote {
    position:relative;
    z-index:2;
    max-width:680px;
    margin:34px 0 0;
    padding:25px 28px 24px;
    border:1px solid var(--v4-blue-light);
    border-radius:14px;
    background:rgba(237,243,255,.92);
    box-shadow:0 14px 34px rgba(8,21,38,.06);
    color:var(--v4-dark-surface);
    font-size: var(--v4-type-card);
    font-weight:500;
    line-height:1.5;
}
.av4-personal blockquote::before {
    content:"";
    position:absolute;
    left:28px;
    top:0;
    width:48px;
    height:2px;
    background:var(--v4-blue);
    transform:translateY(-1px);
}
.av4-personal cite {
    display:block;
    margin-top:11px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
    font-style:normal;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* ===== 14. Time tracking | time-tracking.css ===== */

/* V4 product landing page: Excel time tracking */

.zt4-hero-media {
    position:relative;
}
.zt4-sheet-frame {
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:14px;
    box-shadow:0 28px 70px rgba(8,21,38,.13);
    overflow:hidden;
    transform:rotate(1.1deg);
}
.zt4-sheet-top {
    height:48px;
    padding:0 17px;
    display:flex;
    align-items:center;
    gap:7px;
    border-bottom:1px solid var(--v4-line);
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
}
.zt4-sheet-top small {
    margin-right:auto;
    font-weight:700;
}
/* Panoramic screenshot: preserve the full image instead of cropping its sides. */
.zt4-sheet-frame img {
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    object-fit:contain;
}
.zt4-side-caption {
    position:absolute;
    right:-36px;
    bottom:-28px;
    padding:11px 15px;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    box-shadow:0 12px 28px rgba(8,21,38,.08);
    font-size: var(--v4-type-label);
    transform:rotate(-3deg);
}
.zt4-feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--v4-line-medium);
    border-left:1px solid var(--v4-line-medium);
}
.zt4-feature {
    min-height:250px;
    padding:34px;
    border-right:1px solid var(--v4-line-medium);
    border-bottom:1px solid var(--v4-line-medium);
    background:var(--v4-surface);
}
.zt4-feature>span {
    color:var(--v4-blue);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.1em;
}
.zt4-feature h3 {
    margin-top:28px;
    font-size: var(--v4-type-feature);
    font-weight:500;
}
.zt4-feature p {
    margin-top:13px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.zt4-feature-large {
    grid-column:span 2;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:50px;
}
.zt4-feature-large>span,.zt4-feature-large>h3,.zt4-feature-large>p {
    grid-column:1;
}
.zt4-mini-ui {
    grid-column:2;
    grid-row:1/5;
    align-self:center;
    padding:26px;
    border:1px solid var(--v4-line);
    border-radius:12px;
    background:var(--v4-surface-alt);
    display:grid;
    gap:6px;
}
.zt4-mini-ui b {
    font-size: var(--v4-type-display-small);
}
.zt4-mini-ui em {
    font-style:normal;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-meta);
}
.zt4-mini-ui button {
    margin-top:15px;
    padding:10px;
    border:0;
    border-radius:7px;
    background:var(--v4-line);
    color:var(--v4-blue);
    font-weight:700;
}
.zt4-feature-accent {
    background:var(--v4-bg-dark-alt);
    color:var(--v4-surface);
}
.zt4-feature-accent>span {
    color:var(--v4-blue-middle);
}
.zt4-feature-accent>h3 {
    color:var(--v4-surface);
}
.zt4-feature-accent>p {
    color:var(--v4-line-medium);
}
.zt4-feature-accent>a {
    display:inline-block;
    margin-top:25px;
    color:var(--v4-blue-middle);
    font-weight:700;
}
.zt4-product-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:90px;
    align-items:center;
}
.zt4-product-copy ul {
    margin:28px 0 0;
    padding:22px 0 0;
    list-style:none;
    border-top:1px solid var(--v4-line-medium);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.zt4-product-copy li {
    font-size: var(--v4-type-small);
    font-weight:500;
}
.zt4-product-copy li::before {
    content:"✓";
    color:var(--v4-blue);
    margin-right:8px;
}
.zt4-product-image {
    margin:0;
}
.zt4-product-image img {
    width:100%;
    border:1px solid var(--v4-line-medium);
    border-radius:12px;
    box-shadow:0 22px 55px rgba(8,21,38,.1);
}
.zt4-product-image figcaption {
    margin-top:10px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-small);
    text-align:right;
}
.zt4-fit-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--v4-line-medium);
}
.zt4-fit-grid article {
    padding:40px;
    background:var(--v4-surface);
}
.zt4-fit-grid article+article {
    border-left:1px solid var(--v4-line-medium);
}
.zt4-fit-grid article>span {
    font-size: var(--v4-type-label);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:700;
    color:var(--v4-blue);
}
.zt4-fit-grid ul {
    margin:24px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:14px;
}
.zt4-fit-grid li {
    padding-left:22px;
    position:relative;
    color:var(--v4-line-strong);
    line-height:1.5;
}
.zt4-fit-grid li::before {
    content:"";
    position:absolute;
    left:0;
    top:.58em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--v4-text-muted);
}

/* ===== 15. Alarm | alarm.css ===== */

/* === V4 Notfall-Alarm product page === */

.na4-video-stage {
    position:relative;
    isolation:isolate;
}
.na4-screen {
    position:relative;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(24,49,78,.13);
    z-index:2;
}
.na4-screenbar {
    height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 15px;
    background:var(--v4-surface-alt);
    border-bottom:1px solid var(--v4-line);
}
.na4-screenbar span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--v4-surface-alt);
}
.na4-screenbar small {
    margin-left:8px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
}
.na4-screen video,.na4-video-frame video {
    display:block;
    width:100%;
    height:auto;
    background:var(--v4-bg-dark);
}
.na4-how {
    background:var(--v4-surface);
}
.na4-flow {
    display:grid;
    grid-template-columns:1fr 55px 1fr 55px 1fr;
    align-items:center;
    margin-top:50px;
}
.na4-flow article {
    min-height:220px;
    padding:32px;
    border:1px solid var(--v4-line);
    border-radius:14px;
    background:var(--v4-surface-alt);
}
.na4-flow article span {
    font-size: var(--v4-type-label);
    letter-spacing:.1em;
    color:var(--v4-blue);
}
.na4-flow h3 {
    margin:20px 0 10px;
    color:var(--v4-dark-surface);
    font-size: var(--v4-type-feature);
}
.na4-flow p {
    margin:0;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.na4-flowline {
    text-align:center;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-emphasis);
}
.na4-video {
    background:var(--v4-surface-alt);
}
.na4-video-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:70px;
    align-items:center;
}
.na4-video-grid p:not(.v4-eyebrow) {
    color:var(--v4-text-muted);
    line-height:1.5;
}
.na4-video-frame {
    padding:10px;
    background:var(--v4-surface);
    border:1px solid var(--v4-line);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(24,49,78,.1);
    overflow:hidden;
}
.na4-video-frame video {
    border-radius:11px;
}

/* ===== 16. Contact | contact.css ===== */

/* ============================================================
   CONTACT V4 — kontakt.php
   ============================================================ */
.contact-v4 {
    background:var(--v4-surface);
}
.contact-v4 .v4-main {
    overflow:hidden;
}
.ct4-hero {
    overflow:hidden;
    border-bottom:1px solid var(--v4-line);
    background:
        radial-gradient(circle at 82% 40%,rgba(20,94,232,.075),transparent 30%),
        linear-gradient(105deg,var(--v4-surface) 0 61%,var(--v4-surface-alt) 100%);
}
.ct4-hero::after {
    content:"";
    position:absolute;
    z-index:0;
    right:-140px;
    top:-170px;
    width:430px;
    height:430px;
    border:58px solid rgba(20,94,232,.035);
    border-radius:50%;
    pointer-events:none;
}
.ct4-hero-grid {
    position:relative;
    isolation: isolate;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(340px,.66fr);
    gap:clamp(58px,7vw,110px);
    align-items:center;
}
.ct4-hero-copy {
    min-width:0;
    align-self:start;
}
.ct4-hero-copy h1 {
    max-width:820px;
}
.ct4-hero-copy .v4-lead {
    max-width:720px;
}
.ct4-direct {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    max-width:820px;
    overflow:hidden;
    border-radius:15px;
    background:rgba(255,255,255,.72);
    box-shadow:0 14px 36px rgba(8,21,38,.045);
}
.ct4-direct>div {
    min-width:0;
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:15px 14px;
}
.ct4-direct>div+div {
    border-left:1px solid var(--v4-line);
}
.ct4-direct>div>span {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface);
    color:var(--v4-blue);
    font-size: var(--v4-type-mini);
    letter-spacing:.08em;
    font-weight:700;
}
.ct4-direct p {
    margin:0;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-label);
    line-height:1.45;
}
.ct4-direct strong {
    color:var(--v4-ink);
    font-weight:600;
}
.contact-v4 .ct4-direct {
    margin-top:26px;
}
.ct4-note {
    position:relative;
    isolation: auto;
    min-height:420px;
    display:flex;
    flex-direction:column;
    padding:30px;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    background:var(--v4-surface);
    /* background:
        linear-gradient(145deg,rgba(20,94,232,.045),transparent 58%),
        var(--v4-surface-alt); */
    box-shadow:0 28px 70px rgba(8,21,38,.11);
    z-index:auto;
    
}
.ct4-note::before {
    content:"";
    position:absolute;
    inset:-20px -18px 17px 16px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(20,94,232,.045),transparent 55%),
        var(--v4-surface-alt);
    transform:rotate(2.8deg);
    pointer-events:none;
    z-index:-1;
}
.ct4-note::after {
    content:"";
    position:absolute;
    right:-70px;
    bottom:-92px;
    width:220px;
    height:220px;
    border:32px solid rgba(20,94,232,.045);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}
.ct4-note-top {
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin:-8px -8px 0;
    padding:8px 8px 17px;
    border-bottom:1px solid var(--v4-line);
    border-radius:12px 12px 0 0;
    background:rgba(255,255,255,.98);
    color:var(--v4-text-muted);
    font-size: var(--v4-type-mini);
}
.ct4-note-top span:first-child {
    color:var(--v4-ink);
    font-weight:700;
}
.ct4-note-kicker {
    position:relative;
    z-index:2;
    margin:auto 0 0;
    padding-top:42px;
    color:var(--v4-blue);
    font-size: var(--v4-type-mini);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ct4-note h2 {
    position:relative;
    z-index:2;
    max-width:410px;
    margin:var(--v4-title-gap) 0 0;
    color:var(--v4-ink);
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.ct4-note>p:not(.ct4-note-kicker) {
    position:relative;
    z-index:2;
    max-width:430px;
    margin-top:18px;
    color:var(--v4-text-muted);
    line-height:1.5;
}
.ct4-note-line {
    position:relative;
    z-index:2;
    width:56px;
    margin:27px 0 13px;
    border-top:2px solid var(--v4-blue);
}
.ct4-note small {
    position:relative;
    z-index:2;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-label);
}
.ct4-form-section {
    background:
        linear-gradient(180deg,var(--v4-surface-alt),rgba(243,246,248,.68)),
        var(--v4-surface-alt);
    border-bottom:1px solid var(--v4-line);
}
.ct4-form-grid {
    display:grid;
    grid-template-columns:minmax(260px,.52fr) minmax(0,1fr);
    gap:clamp(58px,8vw,124px);
    align-items:start;
}
.ct4-form-intro {
    position:sticky;
    top:120px;
}
.ct4-form-intro h2 {
    max-width:430px;
    margin:var(--v4-title-gap) 0 0;
    color:var(--v4-ink);
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.ct4-form-intro>p {
    max-width:430px;
    margin-top:var(--v4-title-copy-gap);
    color:var(--v4-text-muted);
    line-height:1.5;
}
.ct4-prompt {
    position:relative;
    margin-top:36px;
    padding:22px 23px 23px;
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:14px;
    background:var(--v4-surface);
    box-shadow:0 12px 30px rgba(8,21,38,.045);
}
.ct4-prompt::before {
    content:"";
    position:absolute;
    left:0;
    top:18px;
    bottom:18px;
    width:2px;
    background:var(--v4-blue);
}
.ct4-prompt span {
    color:var(--v4-text-muted);
    font-size:var(--v4-type-mini);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ct4-prompt p {
    margin:12px 0 0;
    color:var(--v4-line-strong);
    font-size:var(--v4-type-small);
    line-height:1.5;
}
.ct4-form-card {
    position:relative;
    overflow:hidden;
    padding:clamp(30px,4vw,50px);
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:var(--v4-surface);
    box-shadow:0 24px 62px rgba(8,21,38,.075);
}
.ct4-form-card::before {
    content:"";
    position:absolute;
    left:42px;
    right:42px;
    top:0;
    height:2px;
    background:linear-gradient(90deg,var(--v4-blue),var(--v4-blue-middle),transparent 78%);
}
.ct4-form {
    display:grid;
    gap:24px;
}
.ct4-field {
    display:grid;
    gap:9px;
}
.ct4-field label {
    color:var(--v4-line-strong);
    font-size: var(--v4-type-caption);
    font-weight:600;
}
.ct4-label-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.ct4-label-row span {
    color:var(--v4-text-soft);
    font-size:var(--v4-type-mini);
}
.ct4-field input,
.ct4-field textarea {
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--v4-line-medium);
    border-radius:10px;
    background:var(--v4-surface-alt);
    color:var(--v4-ink);
    padding:15px 16px;
    font:inherit;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.ct4-field input {
    min-height:52px;
}
.ct4-field textarea {
    min-height:210px;
    resize:vertical;
    line-height:1.5;
}
.ct4-field input:hover,
.ct4-field textarea:hover {
    border-color:var(--v4-line-strong);
}
.ct4-field input:focus,
.ct4-field textarea:focus {
    border-color:var(--v4-blue);
    background:var(--v4-surface);
    box-shadow:0 0 0 3px rgba(20,94,232,.08);
}
.ct4-field input::placeholder,
.ct4-field textarea::placeholder {
    color:var(--v4-text-soft);
}
.ct4-privacy {
    display:grid;
    grid-template-columns:20px 1fr;
    gap:11px;
    align-items:start;
    padding:14px 15px;
    border:1px solid var(--v4-line);
    border-radius:10px;
    background:var(--v4-surface-alt);
    color:var(--v4-text-muted);
    font-size:var(--v4-type-label);
    line-height:1.5;
}
.ct4-privacy input {
    width:18px;
    height:18px;
    margin:1px 0 0;
    accent-color:var(--v4-blue);
}
.ct4-privacy a {
    color:var(--v4-blue);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}
.ct4-submit {
    width:280px;
    max-width:100%;
    border:0;
    cursor:pointer;
    justify-self:start;
    font-family:inherit;
}
.ct4-submit:disabled {
    opacity:.38;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.ct4-form-foot {
    margin:0;
    padding-top:3px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-caption);
}
.form-honeypot {
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}
.ct4-message {
    display:grid;
    grid-template-columns:36px 1fr;
    gap:14px;
    align-items:start;
    margin-bottom:28px;
    padding:17px 18px;
    border:1px solid;
    border-radius:12px;
}
.ct4-message>span {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:9px;
    font-weight:700;
}
.ct4-message strong {
    display:block;
    margin:1px 0 4px;
}
.ct4-message p {
    margin:0;
    font-size:var(--v4-type-small);
    line-height:1.5;
}
.ct4-success {
    border-color:var(--v4-success-middle);
    background:var(--v4-success);
    color:var(--v4-success-dark);
}
.ct4-success>span {
    background:var(--v4-surface);
}
.ct4-error {
    border-color:var(--v4-error);
    background:rgba(240,209,205,.23);
    color:var(--v4-error-dark);
}
.ct4-error>span {
    background:var(--v4-surface);
}
.ct4-after {
    background:var(--v4-surface);
}
.ct4-after-head {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    align-items: end;
    margin-bottom:44px;
}
.ct4-steps {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:hidden;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    background:var(--v4-surface);
    box-shadow:0 18px 46px rgba(8,21,38,.05);
}
.ct4-steps article {
    min-height:220px;
    padding:30px 32px 34px;
}
.ct4-steps article+article {
    border-left:1px solid var(--v4-line-medium);
}
.ct4-steps span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface-alt);
    color:var(--v4-blue);
    font-size: var(--v4-type-mini);
    font-weight:700;
    letter-spacing:.08em;
}
.ct4-steps h3 {
    margin:25px 0 11px;
    color:var(--v4-ink);
    font-size: var(--v4-type-subheading);
    font-weight:500;
}
.ct4-steps p {
    max-width:390px;
    margin:0;
    color:var(--v4-text-muted);
    font-size:var(--v4-type-small);
    line-height:1.5;
}
.ct4-final {
    background:var(--v4-surface-alt);
}
.ct4-final-inner {
    position:relative;
    overflow:hidden;
    padding:clamp(40px,5.6vw,68px);
    border:1px solid var(--v4-line-strong);
    border-radius:18px;
    background:
        radial-gradient(circle at 88% 25%,rgba(20,94,232,.14),transparent 25%),
        var(--v4-bg-dark);
    box-shadow:0 22px 56px rgba(8,21,38,.1);
    color:var(--v4-surface);
}
.ct4-final-inner::before {
    content:"";
    position:absolute;
    left:clamp(40px,5.6vw,68px);
    top:0;
    width:74px;
    height:2px;
    background:var(--v4-blue);
}
.ct4-final-inner::after {
    content:"";
    position:absolute;
    right:-94px;
    bottom:-128px;
    width:310px;
    height:310px;
    border:44px solid rgba(159,190,254,.15);
    border-radius:50%;
    pointer-events:none;
}
.ct4-final .v4-eyebrow {
    position:relative;
    z-index:1;
    margin:0;
    color:var(--v4-blue-middle);
}
.ct4-final h2 {
    position:relative;
    z-index:1;
    max-width:760px;
    margin:var(--v4-title-gap) 0 0;
    color:var(--v4-surface);
    /* Size and weight are defined centrally by body.v4-page h2. */
}
.ct4-final-inner>span {
    position:relative;
    z-index:1;
    display:block;
    max-width:670px;
    margin-top:17px;
    color:var(--v4-line-medium);
    line-height:1.5;
}

/* ===== 17. Shared typography and headings | shared-typography.css ===== */

/* --------------------------------------------------------------------------
   SHARED CANONICAL OVERRIDES
   Kept after the page-specific blocks intentionally: these rules normalize
   typography, spacing and reusable components across all V4 pages.
   -------------------------------------------------------------------------- */
body.v4-page {
    font-family: var(--v4-ui-font);
    text-rendering: optimizeLegibility;
}
body.v4-page * {
    box-sizing: border-box;
}
body.v4-page :is(h1, h2, h3, h4, h5, h6, nav, button, label, legend, summary) {
    font-family: var(--v4-ui-font);
}
body.v4-page :is(p, li, figcaption, blockquote, cite),
body.v4-page :is(input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
    font-family: var(--v4-body-font);
}
body.v4-page .v4-btn,
body.v4-page .v4-eyebrow,
body.v4-page .v4-text-link,
body.v4-page .wv4-textlink,
body.v4-page .ph4-text-link,
body.v4-page .mv4-inline-link,
/* Decorative hand notes follow the UI type as well; code examples remain monospace. */
.v4-handnote,
.sw4-handnote,
.zt4-side-caption,
.ph4-handnote {
    font-family: var(--v4-ui-font);
}
:is(.v4-hero, .ct4-hero, .legal4-hero) .v4-eyebrow {
    margin: 0;
}
:is(.v4-hero, .ct4-hero, .legal4-hero) .v4-eyebrow + h1 {
    margin-top: var(--v4-title-gap);
    margin-bottom: var(--v4-title-gap);
}

/* Supporting hero signatures start at the same vertical position. */
.v4-trust,
.av4-signature,
.ct4-direct {
    margin-top: var(--v4-hero-meta-gap);
}
.v4-section-head h2,
body.v4-page .v4-final-card h2,
.ct4-after-head h2 {
    margin-top: var(--v4-title-gap);
    margin-bottom: 0;
    text-align: left;
}
.v4-section-head > p {
    max-width: 590px;
    margin: 0;
    text-align: left;
    color: var(--v4-text-soft);
    line-height: 1.5;
}
.sw4-pricing .v4-section-head > p {
    color: var(--v4-line-medium);
}
.v4-btn,
button {
    text-align: center;
}

/* ===== 18. Shared final CTA | final-cta.css ===== */

/* --------------------------------------------------------------------------
   V4 final CTA component — shared structure and rhythm
   v4-final is the shared structural component: copy column + actions column.
   Section spacing itself remains controlled by the global section rhythm.
   -------------------------------------------------------------------------- */

.v4-final-card .v4-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* ===== 19. Legal | legal.css ===== */

/* --------------------------------------------------------------------------
   Legal pages — Impressum & Datenschutz
   Shared V4 components provide hero, section rhythm, split grids and labels.
   -------------------------------------------------------------------------- */
body.legal-v4 {
    margin:0;
    background:var(--v4-surface);
    color:var(--v4-ink);
}
.legal4-hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);
    gap:var(--v4-split-gap);
}
.legal4-meta {
    align-self:center;
    display:grid;
    align-content:center;
    padding:28px 30px;
    border:1px solid var(--v4-line-medium);
    border-radius:16px;
    background:var(--v4-surface);
    box-shadow:0 14px 36px rgba(8,21,38,.045);
}
.legal4-meta strong {
    display:block;
    margin-top:9px;
    font-family:var(--v4-ui-font);
    font-size: var(--v4-type-subheading);
    font-weight:500;
    line-height:1.5;
}
.legal4-meta p {
    margin-top:10px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-small);
    line-height:1.5;
}
.legal4-sections {
    display:grid;
    border-top:1px solid var(--v4-line-medium);
}
.legal4-section {
    display:grid;
    grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);
    gap:clamp(28px,4vw,64px);
    padding:24px 0;
    border-bottom:1px solid var(--v4-line-medium);
}
.legal4-section:last-child {
    border-bottom:0;
}
.legal4-sections .legal4-section>h2 {
    margin:0;
    color:var(--v4-ink);
    font-size: var(--v4-type-card);
}
.legal4-copy p {
    min-width:0;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-body);
    line-height:1.7;
    letter-spacing:-.03em;
}
.legal4-copy p+p {
    margin-top:18px;
}
.legal4-copy a {
    color:var(--v4-blue);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    overflow-wrap:anywhere;
}
.legal4-copy a:hover {
    color:var(--v4-blue-dark);
}
.legal4-note {
    margin-top:20px;
    padding:17px 20px;
    border-left:3px solid var(--v4-blue);
    background:var(--v4-surface-alt);
    color:var(--v4-line-strong);
}
.legal4-credit {
    color:var(--v4-ink);
    font-family:var(--v4-ui-font);
    font-weight:500;
}
.privacy4-copy ul {
    display:grid;
    gap:8px;
    margin:18px 0 0;
    padding:0;
    color:var(--v4-text-muted);
}
.privacy4-copy li {
    position:relative;
    padding-left:16px;
}
.privacy4-copy li::before {
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--v4-blue);
}
.privacy4-copy p+ul,
.privacy4-copy ul+p {
    margin-top:18px;
}

/* ===== 20. Shared rhythm and process | shared-rhythm-process.css ===== */

/* --------------------------------------------------------------------------
   V4 refinement — lighter UI weights, consistent section rhythm and columns
   -------------------------------------------------------------------------- */
/* Quieter weights for navigation, buttons and links. */
body.v4-page :is(a, button, summary),
.v4-text-link,
.wv4-textlink,
.ph4-text-link,
.mv4-inline-link {
    font-weight: 500;
}

/* Eyebrow and following heading always form one vertical unit. */
.v4-eyebrow + h2,
body.v4-page [class] > .v4-eyebrow + h2 {
    margin-top: var(--v4-eyebrow-title-gap);
    margin-bottom: 0;
}

/* More breathing room when body copy follows directly below that unit. */
.v4-eyebrow + h2 + p,
body.v4-page [class] > .v4-eyebrow + h2 + p {
    margin-top: var(--v4-title-copy-gap);
    margin-bottom: 0;
}

/* Standard two-column section heads. */
.v4-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--v4-split-gap);
    row-gap: 0;
    align-items: end;
}
:is(.wv4-showcase, .wv4-approach, .mv4-what, .mv4-origin, .mv4-pricing, .ph4-work, .ph4-gallery, .ph4-process, .ph4-pricing, .av4-values, .zt4-functions, .zt4-fit) .v4-section-head {
    margin-bottom: 52px;
}

/* Copy-column horizontal alignment
 * These section layouts use the same two-column geometry as .v4-section-head,
 * so their copy column starts at the same horizontal position.
 */

.v4-intro-grid div > .v4-eyebrow {
    grid-column: 1;
    grid-row: 1;
}
.v4-intro-grid div > .v4-eyebrow + h2 {
    grid-column: 1;
    grid-row: 2;
}
.v4-intro-grid div > .v4-eyebrow + h2 + * {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
}
body.v4-page h2 {
    /* Size and weight are defined centrally by body.v4-page h2. */
    font-size: var(--v4-type-h2);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing:-.04em;
}

/* --------------------------------------------------------------------------
   V4 content rhythm — .ph4-feature-copy is the spacing reference.
   Desktop: label → heading 8px, heading → copy 8px.
   Mobile:  label → heading 8px, heading → copy 16px.
   -------------------------------------------------------------------------- */
/* Remove default paragraph margins from V4 eyebrows so the measured gaps are
   controlled only by the shared rhythm variables. */
body.v4-page [class] > .v4-eyebrow {
    margin-top: 0;
    margin-bottom: 0;
}

/* Keep the reference component itself tied to the same variables. */
.ph4-feature-copy > span + h3 {
    margin-top: var(--v4-eyebrow-title-gap);
    margin-bottom: var(--v4-title-copy-gap);
}

/* Match the dark-section title treatment used by .av4-spectrum-title. */
:is(.av4-spectrum-title, .wv4-code-copy, .mv4-speed-copy, .ph4-web-grid > div:nth-child(2)) > .v4-eyebrow + h2,
.ph4-web .v4-eyebrow + h2 {
    /* margin-top:var(--v4-eyebrow-title-gap);
    margin-bottom:0; */
    color:var(--v4-surface);
    line-height:1.1;
    letter-spacing:-.04em;
}

/* --------------------------------------------------------------------------
   Precise label/index → heading spacing
   Ensures the shared 20px token is measured from the label/index itself,
   independent of legacy paragraph margins or component-specific rules.
   -------------------------------------------------------------------------- */
.sw4-solution-copy > .v4-index-label {
    margin: 0;
}
.v4-service-grid .v4-service-card > .v4-kicker + h3,
.sw4-solution-copy > .v4-index-label + h3,
.sw4-solution-copy > h3 + p {
    margin-top: var(--v4-label-title-gap);
}
.v4-service-grid .v4-service-card > .v4-kicker {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Screenshot corrections — process sections and dark pricing titles
   -------------------------------------------------------------------------- */

/* Process typography: shared canonical V4 treatment. */
.v4-process h2 {
    color: var(--v4-bg-dark-alt);
}

/* --------------------------------------------------------------------------
   Canonical process layout
   v4-process is the shared process component.
   v4-process uses the same robust two-column structure so its heading
   remains pinned to the top instead of being distributed across grid rows.
   -------------------------------------------------------------------------- */

.v4-process-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 100px;
    align-items: start;
}

/* Intro copy in v4-process: same treatment as sw4-process-heading copy. */
.v4-process-grid > div:first-child > p:last-child {
    margin-top: 22px;
    max-width: 520px;
    color: var(--v4-text-soft);
    line-height: 1.7;
}

/* Ensure the pv4 heading block itself starts at the top of the grid. */
.v4-process-grid > div:first-child {
    align-self: start;
}

/* Shared process lists use one canonical component styling. */
.v4-process-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--v4-line-medium);
}
.v4-process-list li {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 24px;
    padding: 34px 0;
    border-bottom: 1px solid var(--v4-line-medium);
}
.v4-process-list > li > span {
    padding-top: 0;
    color: var(--v4-blue);
    letter-spacing: .1em;
    font-size: var(--v4-type-mini);
    font-weight: 500;
}
.v4-process-list h3 {
    margin: 0;
    color: var(--v4-ink);
    font-size: var(--v4-type-subheading);
    line-height: 1.2;
    font-weight: 500;
}
.v4-process-list li p {
    margin-top: 9px;
    margin-bottom: 0;
    max-width: 660px;
    color: var(--v4-text-soft);
    font-size: inherit;
    line-height: 1.5;
}

/* ===== 21. Medical supplies use case | usecase.css ===== */

/* ============================================================
   SPRECHSTUNDENBEDARF USE CASE V4
   sprechstundenbedarf-bestellung-arztpraxis.php
   ============================================================ */
.usecase-v4 .v4-hero-product {
    background:
        radial-gradient(circle at 82% 44%,rgba(20,94,232,.07),transparent 30%),
        linear-gradient(100deg,var(--v4-surface) 0 58%,var(--v4-surface-alt) 100%);
}
.sb4-hero-visual {
    position:relative;
    padding:40px 18px 24px 26px;
}
.sb4-hero-visual::before {
    content:"";
    position:absolute;
    inset:22px 0 56px 54px;
    border:1px solid var(--v4-line);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(20,94,232,.045),transparent 55%),
        var(--v4-surface-alt);
    transform:rotate(.8deg);
    pointer-events:none;
}
.sb4-browser {
    position:relative;
    z-index:2;
    transform:none;
    box-shadow:0 24px 62px rgba(8,21,38,.11);
}
.sb4-browser .v4-frame-image {
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
    background:var(--v4-surface);
}
.sb4-route-card {
    position:relative;
    z-index:3;
    width:calc(100% - 56px);
    margin:-18px 16px 0 auto;
    padding:16px 18px 17px;
    border:1px solid var(--v4-line-medium);
    border-radius:13px;
    background:rgba(255,255,255,.97);
    box-shadow:0 16px 38px rgba(8,21,38,.09);
    backdrop-filter:blur(9px);
}
.sb4-route-label {
    display:block;
    padding-bottom:11px;
    border-bottom:1px solid var(--v4-line);
    color:var(--v4-blue);
    font-size:var(--v4-type-meta);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.sb4-route-card ol {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:13px 0 0;
    padding:0;
}
.sb4-route-card li {
    position:relative;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:9px;
    align-items:center;
    min-height:46px;
    padding:0 12px;
}
.sb4-route-card li:first-child {
    padding-left:0;
}
.sb4-route-card li:last-child {
    padding-right:0;
}
.sb4-route-card li + li {
    border-left:1px solid var(--v4-line);
}
.sb4-route-card li>span {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface-alt);
    color:var(--v4-blue);
    font-size:var(--v4-type-meta);
    font-weight:700;
}
.sb4-route-card b,
.sb4-route-card small {
    display:block;
}
.sb4-route-card b {
    color:var(--v4-line-strong);
    font-size: var(--v4-type-label);
    font-weight:600;
    line-height:1.3;
}
.sb4-route-card small {
    margin-top:2px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-mini);
    line-height:1.3;
}
.sb4-problems {
    background:var(--v4-surface);
}
.sb4-problems .v4-feature-grid-strong {
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:44px;
    overflow:hidden;
    border:1px solid var(--v4-line-medium);
    border-radius:18px;
    background:var(--v4-surface);
    box-shadow:0 18px 46px rgba(8,21,38,.05);
}
.sb4-problems .v4-feature-grid-strong article {
    min-height:230px;
    padding:30px 32px 34px;
    border:0;
}
.sb4-problems .v4-feature-grid-strong article:nth-child(even) {
    border-left:1px solid var(--v4-line-medium);
}
.sb4-problems .v4-feature-grid-strong article:nth-child(n+3) {
    border-top:1px solid var(--v4-line-medium);
}
.sb4-problems .v4-feature-grid-strong>article>span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface-alt);
    color:var(--v4-blue);
    font-weight:600;
}
.sb4-problems .v4-feature-grid-strong h3 {
    max-width:440px;
    margin-top:24px;
}
.sb4-flow {
    background:var(--v4-surface-alt);
    border-block:1px solid var(--v4-line);
}
.sb4-flow-stage {
    position:relative;
    display:grid;
    grid-template-columns:minmax(180px,.8fr) minmax(220px,1fr) minmax(210px,.9fr) minmax(240px,1.05fr);
    gap:34px;
    align-items:center;
    margin-top:48px;
    padding:34px;
    overflow:hidden;
    border:1px solid var(--v4-line);
    border-radius:20px;
    background:var(--v4-surface);
    box-shadow:0 22px 56px rgba(8,21,38,.065);
}
.sb4-flow-stage::before {
    content:"";
    position:absolute;
    left:17%;
    right:17%;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,var(--v4-line-medium),var(--v4-blue-middle),var(--v4-line-medium));
    pointer-events:none;
}
.sb4-flow-sources,
.sb4-flow-checks {
    position:relative;
    z-index:1;
    display:grid;
    gap:9px;
}
.sb4-flow-sources>div {
    display:grid;
    grid-template-columns:32px 1fr;
    gap:12px;
    align-items:center;
    min-height:56px;
    padding:10px 14px;
    border:1px solid var(--v4-line);
    border-radius:11px;
    background:var(--v4-surface-alt);
}
.sb4-flow-sources span {
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid var(--v4-line-medium);
    border-radius:50%;
    background:var(--v4-surface);
    color:var(--v4-text-muted);
    font-size: var(--v4-type-meta);
    font-weight:700;
}
.sb4-flow-sources b {
    color:var(--v4-line-strong);
    font-size: var(--v4-type-caption);
    font-weight:600;
}
.sb4-flow-core {
    position:relative;
    z-index:1;
    display:grid;
    gap:6px;
    align-content:center;
    min-height:154px;
    padding:24px;
    border:1px solid var(--v4-blue-middle);
    border-radius:15px;
    background:linear-gradient(145deg,var(--v4-btn-second),var(--v4-surface));
    box-shadow:0 14px 34px rgba(20,94,232,.07);
}
.sb4-flow-core strong {
    color:var(--v4-ink);
    font-size: var(--v4-type-subheading);
    font-weight:600;
    line-height:1.2;
}
.sb4-flow-core small {
    color:var(--v4-text-muted);
    font-size: var(--v4-type-mini);
}
.sb4-flow-checks>div {
    display:grid;
    grid-template-columns:34px 1fr;
    gap:12px;
    align-items:center;
    min-height:70px;
    padding:12px 14px;
    border:1px solid var(--v4-line);
    border-radius:11px;
    background:var(--v4-surface);
}
.sb4-flow-checks>div>span {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:var(--v4-surface-alt);
    color:var(--v4-blue);
    font-size:var(--v4-type-label);
    font-weight:700;
}
.sb4-flow-checks>div:first-child>span {
    background:var(--v4-error);
    color:var(--v4-error-dark);
}
.sb4-flow-checks>div:last-child>span {
    background:var(--v4-btn-second);
    color:var(--v4-blue);
}
.sb4-flow-checks b,
.sb4-flow-checks small {
    display:block;
}
.sb4-flow-checks b {
    color:var(--v4-line-strong);
    font-size:var(--v4-type-label);
    font-weight:600;
}
.sb4-flow-checks small {
    margin-top:2px;
    color:var(--v4-text-soft);
    font-size: var(--v4-type-mini);
}
.sb4-flow-target {
    position:relative;
    z-index:1;
    display:grid;
    gap:5px;
    align-content:center;
    min-height:154px;
    padding:24px;
    border-radius:15px;
    background:var(--v4-bg-dark);
    color:var(--v4-surface);
}
.sb4-flow-target span {
    color:var(--v4-blue-middle);
    font-size: var(--v4-type-label);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.sb4-flow-target strong {
    max-width:380px;
    color:var(--v4-surface);
    font-size:var(--v4-type-subheading);
    font-weight:600;
    line-height:1.3;
}
.sb4-flow-target small {
    margin-top:5px;
    color:var(--v4-line-medium);
    font-size: var(--v4-type-label);
    line-height:1.3;
}
.sb4-software .pv4-story-list {
    margin-top:46px;
}
.sb4-software .pv4-story-media {
    min-height:360px;
    padding:34px;
    background:linear-gradient(145deg,var(--v4-surface-alt),var(--v4-surface));
}
.sb4-software .pv4-story-media img {
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    border:1px solid var(--v4-line);
    border-radius:12px;
    background:var(--v4-surface);
    box-shadow:0 16px 36px rgba(8,21,38,.08);
}
.pv4-usecase-link {
    margin-top:24px;
}

/* ===== 22. Home variants | home.css ===== */

/* --------------------------------------------------------------------------
   HOME V4 — calm layout refinement
   Existing markup/classes only.
   -------------------------------------------------------------------------- */
.home-v4 .v4-side-note {
    left:max(32px,calc((100vw - var(--v4-max)) / 2));
    top:auto;
    bottom:30px;
    transform:none;
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--v4-text-muted);
    font-size: var(--v4-type-micro-compact);
    letter-spacing:.14em;
}
.home-v4 .v4-side-note::after {
    width:42px;
    height:1px;
    margin:0 0 0 10px;
    background:var(--v4-line-medium);
}
.home-v4 .v4-trust {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    max-width:640px;
    margin-top:var(--v4-hero-meta-gap);
    padding-top:15px;
    border-top:1px solid var(--v4-line);
}
.home-v4 .v4-trust li {
    min-width:0;
    max-width:none;
    gap:10px;
    padding:0 18px;
    color:var(--v4-bg-dark-alt);
    font-size: var(--v4-type-caption);
    font-weight:600;
    line-height:1.2;
}
.home-v4 .v4-trust li:first-child {
    padding-left:0;
}
.home-v4 .v4-trust li + li {
    border-left:1px solid var(--v4-line);
}
.home-v4 .v4-icon {
    width:31px;
    height:31px;
    flex:0 0 31px;
    border-color:var(--v4-line-medium);
    background:var(--v4-surface);
    font-size: var(--v4-type-label);
}
.home-v4 .v4-hero-visual {
    padding-bottom:32px;
}
.home-v4 .v4-handnote {
    position:absolute;
    right:18px;
    bottom:0;
    width:max-content;
    margin:0;
    color:var(--v4-text-muted);
    font-size:var(--v4-type-label);
    line-height:1.2;
    transform:rotate(-1.5deg);
    transform-origin:right center;
}
.home-v4 .v4-manifesto {
    align-self:start;
    gap:12px;
    margin-top:24px;
    color:var(--v4-text-soft);
}
.home-v4 .v4-manifesto span {
    width:38px;
    height:1px;
    border:0;
    background:var(--v4-blue-middle);
}
.home-v4 .v4-manifesto p {
    color:var(--v4-text-soft);
    font-size: var(--v4-type-caption);
    line-height:1.45;
}
.home-v4 .v4-service-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.home-v4 .v4-service-card {
    min-height:430px;
    padding:28px;
    border-radius:16px;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.home-v4 .v4-service-card:hover {
    transform:translateY(-2px);
    border-color:var(--v4-line-medium);
    box-shadow:0 16px 38px rgba(8,21,38,.06);
}
.home-v4 .v4-service-web,
.home-v4 .v4-service-photo {
    padding-right:28px;
}
.home-v4 .v4-service-card h3 {
    max-width:390px;
}
.home-v4 .v4-service-card > p:not(.v4-kicker) {
    max-width:360px;
}
.home-v4 .v4-service-card img {
    right:22px;
    bottom:22px;
    width:132px;
    height:98px;
    border:1px solid var(--v4-line);
    border-radius:10px;
    object-fit:cover;
    filter:saturate(.78);
}
.home-v4 .v4-service-photo img {
    width:132px;
    height:98px;
}
.home-v4 .v4-service-web .v4-text-link,
.home-v4 .v4-service-photo .v4-text-link {
    max-width:calc(100% - 150px);
}
.home-v4 .v4-price {
    margin-top:28px;
    margin-bottom:0;
}

/* ===== 23. Responsive | responsive.css ===== */

/* --------------------------------------------------------------------------
   Canonical responsive overrides
   Keep shared 992px layout changes before 768px mobile refinements so the
   narrower breakpoint remains the final authority where both conditions apply.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Consolidated responsive overrides — max-width: 1200px
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .v4-shell {
        width:min(calc(100% - 44px),var(--v4-max));
    }
    .v4-hero-grid {
        grid-template-columns:1fr 1fr;
        gap:38px;
    }
    .v4-dashboard-content {
        grid-template-columns:100px 1fr;
    }
    .v4-case-grid {
        grid-template-columns:1fr 1fr;
    }
    .home-v4 .v4-final-cta .v4-final-card {
        grid-template-columns:1fr;
        align-items:start;
    }
    .home-v4 .v4-final-cta .v4-final-card blockquote {
        max-width:760px;
    }
    .v4-service-grid {
        grid-template-columns:1fr 1fr;
    }
    .v4-service-photo {
        grid-column:1 / -1;
        min-height:380px;
    }
    .home-v4 .v4-service-grid {
        grid-template-columns:1fr 1fr;
    }
    .home-v4 .v4-service-photo {
        grid-column:1 / -1;
        min-height:360px;
    }
    .v4-about-card {
        grid-template-columns:300px 1fr;
    }
    .v4-name-story {
        grid-column:1 / -1;
        padding:28px 36px;
        display:grid;
        grid-template-columns:auto 1fr 1fr;
        gap:26px;
        align-items:center;
    }
    .v4-name-story p,
    .v4-name-story small {
        margin:0;
    }
    .sb4-flow-stage {
        grid-template-columns:1fr 1fr;
        gap:18px;
    }
    .sb4-flow-stage::before {
        display:none;
    }
    .sb4-flow-sources,
    .sb4-flow-core,
    .sb4-flow-checks,
    .sb4-flow-target {
        min-height:100%;
    }
    .alarm-v4 .sw4-audience .v4-audience-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
    }
}

/* --------------------------------------------------------------------------
   Consolidated responsive overrides — max-width: 992px
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {

    :root {
        --v4-final-card-padding-y: 32px;
        --v4-final-card-padding-x: 40px;
        --v4-final-card-gap: 40px;
    }
    .v4-header-inner {
        height:76px;
        grid-template-columns:1fr auto;
    }
    .v4-header-cta {
        display:none;
    }
    .v4-menu-toggle {
        display:block;
    }
    .v4-navigation {
        position:absolute;
        z-index:10;
        left:22px;
        right:22px;
        top:76px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:12px;
        border:1px solid var(--v4-line);
        border-radius:12px;
        background:var(--v4-surface);
        box-shadow:0 20px 50px rgba(8,21,38,.13);
    }
    .v4-navigation.is-open {
        display:flex;
    }
    .v4-navigation a {
        padding:14px 12px;
    }
    .v4-navigation a::after {
        display:none;
    }
    .v4-hero {
        padding-top:54px;
        min-height:auto;
    }
    .v4-hero-grid {
        grid-template-columns:1fr;
    }
    h1 {
        max-width:760px;
        font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
    }
    .v4-hero-visual {
        max-width:760px;
    }
    .v4-side-note,
    .home-v4 .v4-side-note {
        display:none;
    }
    .home-v4 .v4-intro-grid > :first-child {
        order:1;
    }
    .home-v4 .v4-manifesto {
        order:2;
        margin-top:22px;
    }
    .home-v4 .v4-intro-copy {
        order:3;
    }
    .v4-intro-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
    .v4-manifesto {
        grid-column:1 / -1;
    }
    .v4-section-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: start;
    }
    .zt4-product-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .v4-section-head .v4-text-link {
        grid-column:1/-1;
    }
    .v4-software-showcase {
        grid-template-columns:1fr;
    }
    .v4-about-card {
        grid-template-columns:260px 1fr;
    }
    .v4-about-copy {
        padding:40px;
    }
    .sw4-hero-visual {
        max-width:760px;
    }
    .sw4-handnote {
        right:34px;
        bottom:10px;
    }
    .sw4-solution {
        grid-template-columns:1fr;
    }
    .sw4-solution:nth-child(even) .sw4-solution-copy {
        order:2;
    }
    .sw4-solution:nth-child(even) .sw4-solution-media {
        order:1;
    }
    .sw4-solution-media {
        min-height:340px;
    }
    .sw4-custom-card {
        grid-template-columns:92px 1fr;
        gap:0;
        row-gap:8px;
        column-gap:36px;
    }
    .sw4-custom-copy {
        grid-column:2;
    }
    .pv4-proof-grid {
        grid-template-columns:1fr 1fr;
    }
    .pv4-proof-grid > div {
        border-left:none;
    }
    .pv4-demo-card {
        gap:45px;
    }
    .v4-faq-grid {
        gap:36px;
    }
    .v4-hero-product {
        padding:58px 0 70px;
    }
    .pv4-demo-card,.v4-faq-grid {
        grid-template-columns:1fr;
    }
    .v4-hero-visual-product {
        max-width:760px;
    }
    .sb4-hero-visual {
        max-width:760px;
        padding-right:0;
    }
    .sb4-route-card {
        width:calc(100% - 44px);
        margin-top:-14px;
    }
    .pv4-story {
        grid-template-columns:1fr;
    }
    .pv4-story-reverse .pv4-story-copy {
        order:2;
    }
    .pv4-story-reverse .pv4-story-media {
        order:1;
    }
    .pv4-story-copy,.pv4-story-reverse .pv4-story-copy {
        padding:42px 4px 52px;
    }
    .pv4-story-media {
        min-height:330px;
    }
    .v4-price-card {
        justify-self:start;
    }
    .wv4-code-card {
        left:40px;
        bottom:32px;
    }
    .wv4-stage {
        max-width:760px;
    }
    .wv4-showcase-grid {
        grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
    }
    .wv4-study-editorial {
        min-height:442px;
    }
    .wv4-editorial-demo {
        min-height:362px;
    }
    .wv4-editorial-copy {
        width:82%;
        padding:56px 28px 35px;
    }
    .wv4-character-demo {
        grid-template-columns:76px 1fr;
        gap:15px;
    }
    .wv4-character-mark {
        min-height:123px;
    }
    .wv4-code-grid {
        gap:45px;
    }
    .wv4-price-value {
        margin: 0;
        padding: 0;
    }
    .mv4-care {
        max-width:780px;
    }
    .mv4-origin-paths {
        grid-template-columns:1fr;
    }
    .mv4-origin-route {
        min-height:0;
    }
    .mv4-origin-route::after {
        display:none;
    }
    .mv4-origin-target {
        grid-template-columns:auto 1fr;
    }
    .mv4-origin-target ul {
        grid-column:2;
        justify-content:flex-start;
    }
    .mv4-hosting-note {
        padding:24px;
        gap:8px;
    }
    .v4-feature-grid {
        grid-template-columns:1fr 1fr;
    }
    .v4-feature-grid article:nth-child(3) {
        border-left:0;
        border-top:1px solid var(--v4-line-medium);
    }
    .v4-feature-grid article:nth-child(4) {
        border-top:1px solid var(--v4-line-medium);
    }
    .mv4-speed-grid {
        gap:45px;
    }
    .mv4-speed-number {
        border-right:0;
        border-bottom:1px solid var(--v4-line-strong);
        padding:0 0 40px;
        min-height:0;
    }
    .mv4-price-grid {
        grid-template-columns:1fr;
    }
    .mv4-price-card-head>p:last-child {
        min-height:0;
    }
    /* .mv4-custom-card {
        gap:0;
    } */
    .ph4-hero-canvas {
        min-height:590px;
        max-width:860px;
    }
    .ph4-web-grid {
        grid-template-columns:.16fr 1fr;
    }
    .ph4-web-grid>div:last-child {
        grid-column:2;
    }
    .ph4-custom-offer {
        grid-template-columns:78px minmax(0,1fr);
    }
    .ph4-custom-action {
        grid-column:2;
        padding:24px 0 0;
        border-left:0;
        border-top:1px solid var(--v4-line-strong);
    }
    .ph4-included {
        grid-template-columns:1fr;
    }
    .ph4-included ul {
        justify-content:flex-start;
    }
    .ph4-final-card {
        grid-template-columns:.8fr 1fr;
    }
    .av4-portrait {
        justify-self:start;
        max-width:500px;
        margin-right:0;
    }
    .av4-personal blockquote {
        margin-left:0;
    }
    .v4-feature-grid-strong article:nth-child(3),
    .v4-feature-grid-strong article:nth-child(4) {
        border-top-color:var(--v4-line-strong);
    }
    .av4-personal figure {
        width:100%;
        max-width:540px;
    }
    .zt4-hero-media {
        max-width:760px;
    }
    .zt4-feature-grid {
        grid-template-columns:1fr 1fr;
    }
    .zt4-feature-large {
        grid-column:span 2;
    }
    .na4-flow {
        grid-template-columns:1fr;
        gap:14px;
    }
    .na4-flowline {
        transform:rotate(90deg);
    }
    .na4-flow article {
        min-height:0;
    }
    .na4-flow h3 {
        margin:20px 0 10px;
        color:var(--v4-dark-surface);
        font-size: var(--v4-type-feature);
    }
    .na4-video-grid {
        grid-template-columns:1fr;
        gap:35px;
    }
    .ct4-hero-grid,
    .ct4-form-grid {
        grid-template-columns:1fr;
    }
    .ct4-hero-grid {
        gap:52px;
    }
    .ct4-note {
        width:min(100%,680px);
        min-height:340px;
    }
    .ct4-form-grid {
        gap:46px;
    }
    .ct4-form-intro {
        position:static;
        display:grid;
        grid-template-columns:minmax(0,.9fr) minmax(280px,.7fr);
        gap:36px;
        align-items:start;
    }
    .ct4-form-intro>.v4-eyebrow,
    .ct4-form-intro>h2,
    .ct4-form-intro>p {
        grid-column:1;
    }
    .ct4-prompt {
        grid-column:2;
        grid-row:1 / span 3;
        margin-top:0;
    }
    .ct4-direct {
        max-width:820px;
    }
    .ct4-steps {
        grid-template-columns:1fr;
    }
    .ct4-steps article {
        min-height:0;
    }
    .ct4-steps article+article {
        border-left:0;
        border-top:1px solid var(--v4-line-medium);
    }
    .legal4-meta {
        align-self:start;
        max-width:560px;
    }
    .legal4-section {
        grid-template-columns:minmax(180px,.32fr) minmax(0,1fr);
    }
    .v4-intro-grid div > .v4-eyebrow,
    .v4-intro-grid div > .v4-eyebrow + h2,
    .v4-intro-grid div > .v4-eyebrow + h2 + *,
    .v4-intro-grid > :first-child,
    .v4-intro-grid > .v4-intro-copy,
    .v4-intro-grid > .v4-manifesto {
        grid-column: 1;
        grid-row: auto;
    }
    .v4-intro-grid > .v4-intro-copy {
        margin: 0;
        padding: 0;
    }
    .v4-section-head > div + *,
    .v4-eyebrow + h2 + *,
    .v4-intro-grid div > .v4-eyebrow + h2 + *,
    .v4-section-head > p,
    .v4-intro-grid > p,
    .v4-intro-copy > p {
        margin-top: var(--v4-title-copy-gap);
        max-width: 100%;
    }
    .v4-intro-copy > p:last-child {
        margin-top: 0;
    }
    .v4-pricing-grid,
    .v4-process-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .v4-process-grid > div:first-child > p:last-child {
        margin-top: var(--v4-title-copy-gap);
        max-width: 100%;
    }
    .v4-pricing .v4-price-card {
        justify-self: start;
    }
    .v4-collapse-992 {
        grid-template-columns:1fr;
    }
}

/* --------------------------------------------------------------------------
   Consolidated responsive overrides — max-width: 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --v4-hero-space: 48px;
        --v4-title-gap: 6px;
        --v4-title-copy-gap: 16px;
        --v4-lead-gap: 20px;
        --v4-actions-gap: 24px;
        --v4-hero-meta-gap: 24px;
        --v4-final-card-padding-y: 34px;
        --v4-final-card-padding-x: 25px;
        --v4-final-card-gap: 30px;
        --v4-type-h2: clamp(1.7rem, 7.5vw, 2.2rem);
    }
    body.v4-page .v4-section {
        padding-top: var(--v4-section-space-mobile);
        padding-bottom: var(--v4-section-space-mobile);
    }
    .v4-shell {
        width:min(calc(100% - 30px),var(--v4-max));
    }
    .v4-logo img, .v4-footer-brand img {
        width:116px;
    }
    .v4-hero {
        padding:42px 0 54px;
    }
    .v4-lead {
        font-size: var(--v4-type-body);
    }
    /* Shared mobile layout normalizations. */
    .v4-actions,
    .v4-final-card .v4-actions {
        align-items:stretch;
    }
    .v4-actions .v4-btn,
    .v4-final-card .v4-btn,
    .v4-final-card .v4-actions .v4-btn,
    .ph4-offer .v4-btn,
    .v4-pricing .v4-price-card > .v4-btn-primary {
        width:100%;
    }
    .sw4-custom-copy>.v4-btn,
    .wv4-price-value>.v4-btn,
    .mv4-price-card>.v4-btn,
    .ph4-custom-action>.v4-btn,
    .v4-case-idea .v4-btn {
        width:100%;
        max-width:none;
        align-self:stretch;
    }
    .v4-case-grid,
    .v4-service-grid,
    .home-v4 .v4-service-grid,
    .v4-about-card,
    .v4-audience-grid,
    .sw4-price-grid,
    .sb4-route-card ol,
    .sb4-problems .v4-feature-grid-strong,
    .pv4-proof-grid,
    .v4-feature-grid,
    .ph4-feature,
    .ph4-feature:nth-child(even),
    .ph4-offer-grid,
    .ph4-final-card,
    .zt4-feature-grid,
    .zt4-fit-grid,
    .zt4-product-copy ul {
        grid-template-columns:1fr;
    }
    .v4-section-head .v4-text-link,
    .v4-service-photo,
    .home-v4 .v4-service-photo,
    .sw4-custom-copy,
    .mv4-origin-target ul,
    .ph4-web-grid>div:last-child {
        grid-column:auto;
    }
    .v4-dashboard-window,
    .sb4-browser,
    .wv4-window,
    .mv4-care-panel {
        transform:none;
    }
    .v4-dashboard-side,
    .v4-handnote,
    .home-v4 .v4-service-card img,
    .sw4-handnote,
    .pv4-mini-card,
    .wv4-code-card,
    .wv4-stage-meta,
    .wv4-stage::before,
    .wv4-study-meta small,
    .wv4-editorial-nav span,
    .mv4-care-top small,
    .ph4-frame-note,
    .av4-spectrum-list small,
    .zt4-side-caption,
    .na4-note {
        display:none;
    }
    .v4-trust {
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:32px;
    }
    .v4-trust li {
        max-width:none;
    }
    .home-v4 .v4-trust {
        grid-template-columns:1fr;
        gap:0;
        max-width:none;
        margin-top:30px;
        padding-top:0;
        border-top:1px solid var(--v4-line);
    }
    .home-v4 .v4-trust li {
        padding:13px 0;
        border-left:0;
        border-bottom:1px solid var(--v4-line);
    }
    .home-v4 .v4-trust li:last-child {
        border-bottom:0;
    }
    .home-v4 .v4-hero-visual {
        padding-bottom:0;
    }
    .v4-dashboard-content {
        grid-template-columns:1fr;
        min-height:auto;
    }
    .v4-dashboard-main {
        padding:14px;
    }
    .v4-metrics {
        gap:6px;
    }
    .v4-metrics div {
        padding:11px 8px;
    }
    .v4-metrics b {
        font-size: var(--v4-type-subheading);
    }
    .v4-intro {
        padding:0;
        padding-top: var(--v4-section-space-mobile);
        padding-bottom: var(--v4-section-space-mobile);
    }
    .v4-screen-stack {
        min-height:300px;
    }
    .v4-title-row {
        align-items:flex-start;
        flex-direction:column;
    }
    .v4-case-card {
        min-height:0;
        padding:18px 18px 24px;
    }
    .v4-case-image {
        height:190px;
    }
    .v4-service-card {
        min-height:420px;
        padding:24px;
    }
    .v4-service-web, .v4-service-photo {
        padding-right:24px;
        padding-bottom:180px;
    }
    .v4-service-card img {
        width:62%;
        height:170px;
    }
    .v4-service-photo img {
        width:56%;
        height:180px;
    }
    .home-v4 .v4-service-card {
        min-height:330px;
        padding:24px;
    }
    .home-v4 .v4-service-web,
    .home-v4 .v4-service-photo {
        padding-right:24px;
        padding-bottom:24px;
    }
    .home-v4 .v4-service-web .v4-text-link,
    .home-v4 .v4-service-photo .v4-text-link {
        max-width:none;
    }
    .v4-about-photo {
        min-height:350px;
        max-height:480px;
    }
    .v4-about-copy {
        padding:34px 26px;
    }
    .v4-about-copy .v4-text-link {
        margin-top:28px;
    }
    .v4-name-story {
        grid-column:auto;
        grid-template-columns:1fr;
        gap:12px;
        padding:28px 26px;
    }
    .v4-name-story p {
        margin-top:4px;
    }
    .v4-name-story small {
        margin-top:6px;
    }
    .v4-final-cta .v4-final-card {
        min-height:430px;
    }
    .v4-final-card .v4-actions small,
    .ph4-final-card small {
        width:100%;
        text-align:center;
    }
    .v4-footer-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        column-gap:12px;
        row-gap:32px;
    }
    .v4-footer-brand {
        grid-column:1 / -1;
    }
    .v4-footer-bottom {
        flex-direction:column;
        gap:8px;
    }
    h1 {
        font-size: clamp(1.85rem, 8vw, 2.4rem);
    }
    .sw4-hero-visual {
        padding:24px 0 36px;
    }
    .sw4-solution-media {
        min-height:250px;
        padding:22px;
    }
    .sw4-solution-copy {
        padding:36px 6px 48px;
    }
    .sw4-solution h3 {
        font-size: clamp(1.36rem, 1.2467rem + 0.5037vw, 1.7rem);
    }
    .sw4-custom-card {
        grid-template-columns:1fr;
        padding:34px 26px;
    }
    .sw4-custom-mark {
        width:82px;
        height:66px;
        background-size:10px 10px;
    }
    .sw4-custom-mark::before {
        left:45px;
        top:6px;
        height:54px;
    }
    .sw4-custom-mark::after {
        left:42px;
        top:29px;
        width:7px;
        height:7px;
    }
    .sw4-custom-node {
        width:22px;
        height:14px;
        border-radius:3px;
    }
    .sw4-custom-node::after {
        right:-4px;
        width:4px;
        height:4px;
    }
    .sw4-custom-node--1 { top:0; }
    .sw4-custom-node--2 { top:26px; }
    .sw4-custom-node--3 { top:52px; }
    .sw4-custom-line--1 { top:7px; left:26px; width:19px; }
    .sw4-custom-line--2 { top:33px; left:26px; width:19px; }
    .sw4-custom-line--3 { top:59px; left:26px; width:19px; }
    .sw4-custom-line--merge { top:33px; left:46px; width:14px; }
    .sw4-custom-output {
        top:23px;
        left:61px;
        width:21px;
        height:21px;
        border-radius:4px;
        background-size:6px 6px;
        box-shadow:0 7px 16px rgba(20,94,232,.16);
    }
    .v4-audience-grid {
        gap:16px;
    }
    .alarm-v4 .sw4-audience .v4-audience-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .sw4-audience .v4-audience-grid article {
        padding:34px 26px;
        min-height:0;
    }
    .sw4-price-grid article {
        min-height:0;
        padding:30px 26px;
    }
    .v4-hero-product {
        padding:42px 0 52px;
    }
    .v4-hero-visual-product {
        padding:20px 0 30px;
    }
    .sb4-hero-visual {
        padding:20px 0 0;
    }
    .sb4-hero-visual::before {
        inset:10px 8px 74px 18px;
    }
    .sb4-route-card {
        width:calc(100% - 20px);
        margin:-8px 0 0 auto;
        box-shadow:0 10px 24px rgba(8,21,38,.06);
    }
    .sb4-route-card li {
        padding:10px 0;
    }
    .sb4-route-card li + li {
        border-left:0;
        border-top:1px solid var(--v4-line);
    }
    .sb4-problems .v4-feature-grid-strong article,
    .sb4-problems .v4-feature-grid-strong article:nth-child(even),
    .sb4-problems .v4-feature-grid-strong article:nth-child(n+3) {
        min-height:0;
        border-left:0;
        border-top:1px solid var(--v4-line-medium);
    }
    .sb4-problems .v4-feature-grid-strong article:first-child {
        border-top:0;
    }
    .sb4-flow-stage {
        grid-template-columns:1fr;
        gap:14px;
        padding:20px;
    }
    .sb4-flow-sources,
    .sb4-flow-core,
    .sb4-flow-checks,
    .sb4-flow-target {
        grid-column:1;
    }
    .sb4-flow-core,
    .sb4-flow-target {
        min-height:0;
    }
    .sb4-software .pv4-story-media {
        min-height:0;
        padding:20px;
    }
    .pv4-proof-grid > div,.pv4-proof-grid > div:first-child,.pv4-proof-grid > div:nth-child(3) {
        border-left:none;
    }
    .pv4-proof-grid > div {
        min-height:112px;
        padding:22px;
    }
    .pv4-story-media {
        min-height:240px;
        padding:20px;
    }
    .pv4-story h3 {
        font-size: var(--v4-type-emphasis);
    }
    .pv4-demo-card {
        padding:32px 24px;
    }
    .v4-final-card {
        grid-template-columns:1fr;
        align-items:start;
    }
    .v4-hero-editorial {
        padding:45px 0 60px;
    }
    .wv4-stage {
        padding:0 0 28px;
    }
    .wv4-canvas {
        min-height:310px;
        padding:20px;
    }
    .wv4-canvas-copy {
        margin-top:45px;
    }
    .wv4-canvas-copy strong {
        font-size: clamp(2rem, 1.8333rem + 0.7407vw, 2.5rem);
    }
    .wv4-canvas-object {
        width:105px;
        height:105px;
        right:18px;
        bottom:22px;
        padding:12px;
    }
    .wv4-showcase-stage {
        margin-top:40px;
        padding:9px;
        border-radius:16px;
    }
    .wv4-showcase-grid {
        grid-template-columns:1fr;
        gap:9px;
    }
    .wv4-study-stack {
        gap:9px;
    }
    .wv4-study-editorial {
        min-height:332px;
        padding:52px 12px 12px;
        border-radius:11px;
    }
    .wv4-study-structured,
    .wv4-study-character {
        min-height:238px;
        padding:52px 12px 12px;
        border-radius:11px;
    }
    .wv4-study-meta {
        top:17px;
        left:16px;
        right:16px;
    }
    .wv4-editorial-demo {
        min-height:255px;
    }
    .wv4-editorial-nav {
        height:41px;
        padding:0 13px;
        gap:10px;
    }
    .wv4-editorial-copy {
        width:88%;
        padding:34px 19px 25px;
    }
    .v4-main .wv4-editorial-copy h3 {
        font-size:clamp(2rem,10vw,2.8rem);
    }
    .wv4-editorial-copy p {
        margin-top:18px;
        font-size: var(--v4-type-meta);
    }
    .wv4-editorial-index {
        right:14px;
        font-size: clamp(4rem, 3.6667rem + 1.4815vw, 5rem);
    }
    .wv4-character-demo {
        grid-template-columns:66px 1fr;
        gap:14px;
        min-height:153px;
    }
    .wv4-character-mark {
        min-height:136px;
    }
    .v4-main .wv4-character-demo h3 {
        font-size:clamp(2.8rem,16vw,4.2rem);
    }
    .wv4-showcase-foot {
        min-height:44px;
        padding:12px 7px 3px;
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
    .v4-main .wv4-caption {
        text-align:left;
    }
    .wv4-terminal pre {
        padding:24px 18px;
        font-size: var(--v4-type-label);
    }
    .wv4-price-card {
        padding:32px 24px;
    }
    .wv4-price-value strong {
        font-size: clamp(1.84rem, 1.6867rem + 0.6815vw, 2.3rem);
    }
    .mv4-care {
        padding:24px 0 32px;
    }
    .mv4-care-back {
        inset:12px 6px 18px 16px;
    }
    .mv4-care-task {
        grid-template-columns:1fr auto;
        gap:14px;
        margin:20px 18px 0;
        padding:18px;
    }
    .mv4-care-label {
        grid-column:1/-1;
        width:max-content;
    }
    .mv4-care-flow {
        margin:17px 24px;
        gap:7px;
        font-size: var(--v4-type-micro);
    }
    .mv4-care-result {
        margin:0 18px;
        padding:18px;
    }
    .mv4-care-meta {
        margin:20px 18px 0;
    }
    .mv4-care-meta span {
        padding:11px 6px;
    }
    .mv4-care-note {
        padding:17px 18px 20px;
        text-align:left;
    }
    .v4-feature-grid article,.v4-feature-grid article:nth-child(3),.v4-feature-grid article:nth-child(4) {
        border-left:0;
        border-top:1px solid var(--v4-line-medium);
    }
    .v4-feature-grid article:first-child {
        border-top:0;
    }
    .v4-feature-grid h3,
    .v4-feature-grid-strong h3 { 
        margin-top:16px;
    }
    .mv4-speed-number strong {
        font-size: clamp(5.6rem, 5.1333rem + 2.0741vw, 7rem);
    }
    .mv4-origin-stage {
        padding:12px;
        border-radius:17px;
    }
    .mv4-origin-route {
        padding:26px 22px;
        border-radius:13px;
    }
    .mv4-origin-route-head {
        grid-template-columns:38px 1fr;
        gap:13px;
    }
    .mv4-origin-index {
        width:38px;
        height:38px;
        border-radius:10px;
    }
    .mv4-origin-route h3 {
        font-size: clamp(1.12rem, 1.0267rem + 0.4148vw, 1.4rem);
    }
    .mv4-origin-route>p {
        margin-top:18px;
    }
    .mv4-origin-steps {
        padding-top:24px;
    }
    .mv4-origin-target {
        grid-template-columns:1fr;
        gap:14px;
        padding:24px 22px;
    }
    .mv4-price-card {
        padding:31px 24px;
    }
    .mv4-price strong {
        font-size: clamp(1.76rem, 1.6133rem + 0.6519vw, 2.2rem);
    }
    /* .mv4-custom-card {
        padding:34px 24px;
        gap:0;
    } */
    .ph4-feature:nth-child(even) .ph4-feature-copy {
        order:2;
    }
    .ph4-feature:nth-child(even) figure {
        order:1;
    }
    .ph4-offer-body {
        min-height:0;
        padding:28px 24px 30px;
    }
    .ph4-offer {
        grid-template-rows:190px 1fr;
    }
    .ph4-offer-media {
        height:190px;
    }
    .ph4-offer .v4-btn {
        white-space:normal;
    }
    .ph4-offer-head {
        gap:18px;
        flex-direction:column;
        align-items:flex-start;
    }
    .ph4-price strong {
        font-size: var(--v4-type-display-small);
    }
    .ph4-included {
        padding:22px;
    }
    .ph4-included ul {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px 16px;
    }
    .ph4-custom-offer {
        grid-template-columns:1fr;
        gap:24px;
        padding:30px 24px;
    }
    .ph4-custom-index {
        min-height:0;
        grid-template-columns:auto 34px auto;
        justify-content:start;
        align-items:center;
        border-right:0;
        border-bottom:1px solid var(--v4-line-strong);
        padding-bottom:20px;
    }
    .ph4-custom-index i {
        width:34px;
        height:1px;
    }
    .ph4-custom-action {
        grid-column:auto;
        padding:22px 0 0;
    }
    .ph4-price {
        justify-items:start;
    }
    .ph4-offer-list li {
        align-items:flex-start;
    }
    .ph4-hero-canvas {
        min-height:420px;
    }
    .ph4-hero-image-main {
        inset:0 0 45px 11%;
    }
    .ph4-hero-image-portrait {
        width:39%;
        height:38%;
        border-width:7px;
    }
    .ph4-handnote {
        font-size: var(--v4-type-label);
    }
    .ph4-feature figure {
        min-height:330px;
    }
    .ph4-feature-copy {
        padding:31px 24px;
    }
    .ph4-feature-copy h3 {
        font-size: var(--v4-type-emphasis);
        margin-top:16px;
    }
    .ph4-gallery-grid {
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:none;
    }
    .ph4-gallery-grid figure,.ph4-g1,.ph4-g2,.ph4-g3,.ph4-g4,.ph4-g5 {
        grid-column:auto;
        grid-row:auto;
        height:280px;
    }
    .ph4-gallery-grid .ph4-g3,.ph4-gallery-grid .ph4-g4 {
        height:360px;
    }
    .ph4-web-grid {
        grid-template-columns:1fr;
        gap:25px;
    }
    .ph4-web-label {
        height:auto;
        flex-direction:row;
        border-right:0;
        border-bottom:1px solid var(--v4-line-strong);
        padding-bottom:20px;
        justify-content:flex-start;
    }
    .ph4-web-label i {
        height:1px;
        width:45px;
    }
    .ph4-final-card figure {
        min-height:320px;
    }
    .ph4-final-card>div {
        padding:37px 25px;
    }
    .av4-portrait {
        max-width:460px;
        margin-bottom:10px;
        padding-bottom:28px;
    }
    .av4-portrait img {
        height:470px;
    }
    .av4-portrait::before {
        inset:16px -10px 12px 18px;
    }
    .av4-portrait figcaption {
        left:14px;
        right:0;
        bottom:4px;
    }
    .av4-wordmark-story {
        padding:28px 24px 26px;
    }
    .av4-word {
        align-items:start;
        flex-direction:column;
        gap:10px;
    }
    .v4-feature-grid-strong article,
    .v4-feature-grid-strong article:nth-child(3),
    .v4-feature-grid-strong article:nth-child(4) {
        border-top-color:var(--v4-line-strong);
    }
    .av4-signature {
        justify-content: center;
        gap:6px;
        letter-spacing:.05em;
    }
    .av4-signature i {
        width:12px;
    }
    .av4-spectrum-list a {
        grid-template-columns:35px 1fr 20px;
    }
    .av4-personal figure {
        height:440px;
        max-width:100%;
        margin-bottom:14px;
    }
    .av4-personal figure::before {
        inset:16px -9px -10px 16px;
    }
    .av4-personal blockquote {
        margin-top:28px;
        padding:23px 22px 22px;
    }
    .zt4-product-copy h2 {
        font-size: var(--v4-type-heading-mobile);
    }
    .zt4-feature-large {
        grid-column:auto;
        display:block;
    }
    .zt4-mini-ui {
        margin-top:25px;
    }
    .zt4-feature {
        min-height:0;
        padding:28px 24px;
    }
    .zt4-fit-grid article+article {
        border-left:0;
        border-top:1px solid var(--v4-line-strong);
    }
    .na4-flow {
        margin-top:32px;
    }
    .na4-flow article {
        padding:24px;
    }
    .ct4-hero-grid {
        gap:38px;
    }
    .ct4-direct {
        grid-template-columns:1fr;
        max-width:none;
    }
    .ct4-direct>div {
        padding:14px 15px;
    }
    .ct4-direct>div+div {
        border-left:0;
        border-top:1px solid var(--v4-line);
    }
    .ct4-note {
        min-height:310px;
        padding:24px;
    }
    .ct4-note::before {
        inset:14px 10px -10px -8px;
    }
    .ct4-note-kicker {
        padding-top:34px;
    }
    .ct4-form-intro {
        grid-template-columns:1fr;
        gap:0;
    }
    .ct4-form-intro>.v4-eyebrow,
    .ct4-form-intro>h2,
    .ct4-form-intro>p,
    .ct4-prompt {
        grid-column:1;
    }
    .ct4-prompt {
        grid-row:auto;
        margin-top:28px;
    }
    .ct4-form-card {
        padding:28px 20px;
        border-radius:16px;
    }
    .ct4-form-card::before {
        left:20px;
        right:20px;
    }
    .ct4-label-row {
        align-items:start;
    }
    .ct4-submit {
        width:100%;
        justify-content:center;
    }
    .ct4-after-head {
        margin-bottom:30px;
    }
    .ct4-steps {
        border-radius:16px;
    }
    .ct4-steps article {
        padding:26px 24px 28px;
    }
    .ct4-final-inner {
        padding:32px 24px;
        border-radius:16px;
    }
    .ct4-final-inner::before {
        left:24px;
    }
    .legal4-meta {
        padding:22px;
    }
    .legal4-section {
        grid-template-columns:1fr;
        gap:12px;
        padding:28px 0;
    }
    .legal4-section h2 {
        font-size: var(--v4-type-card);
    }
    .v4-section-head > * {
        min-width: 0;
    }
    body.v4-page h2 {
        font-size: var(--v4-type-heading-mobile);
    }
    .v4-pricing .v4-price-card {
        padding: 30px 23px;
    }
    .v4-process-list li {
        grid-template-columns: 50px 1fr;
        gap: 16px;
    }
}

/* ===== 24. CRM leads | leads.php ===== */
.leads-v4 .v4-section-head {
    margin-bottom: 32px;
}
.leads4-login {
    max-width: 560px;
}
.leads4-actions {
    margin: 0 0 24px;
}
.leads4-card {
    min-width: 0;
}
.leads4-table-scroll {
    overflow-x: auto;
    border: 1px solid var(--v4-line);
    border-radius: 10px;
}
.leads4-table-scroll:focus-visible {
    outline: 2px solid var(--v4-blue);
    outline-offset: 4px;
}
.leads4-table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
    color: var(--v4-ink);
    font-family: var(--v4-body-font);
    font-size: var(--v4-type-small);
    line-height: 1.5;
}
.leads4-table th,
.leads4-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--v4-line);
}
.leads4-table th {
    background: var(--v4-surface-alt);
    color: var(--v4-line-strong);
    font-family: var(--v4-ui-font);
    font-weight: 600;
}
.leads4-table tbody tr:last-child td {
    border-bottom: 0;
}
.leads4-table tbody tr:hover {
    background: var(--v4-surface-alt);
}
.leads4-table a {
    color: var(--v4-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}