/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from about.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 6
 */
/* =============================================================
   Inverta — Section: Über uns / About (Kinetic Manifesto)
   Modular CSS Architecture (Split for Readability & Maintainability)
   ============================================================= */

/* 01. Base: Containers, Capsule Modes & Kinetic Manifesto */

/* ── about-base.css ── */
/* =============================================================
   Inverta — Section: About (Über uns)
   Module 1: Base Containers, Modes & Kinetic Manifesto
   ============================================================= */

.vf-section-about {
    position: relative;
    width: 100%;
    overflow: visible; /* Keeps WordPress edit shortcut pencils fully visible */
    z-index: 10;
    transition: background-color 0.2s ease, padding 0.2s ease;
}


/* -------------------------------------------------------------
   Mode 1: Floating Glass Capsule (Matching Header, Hero & Brands)
   ------------------------------------------------------------- */
.vf-section-about.vf-about-capsule-mode {
    background: transparent !important;
    border: none !important;
    padding: 4px var(--inv-section-px, var(--inv-edge, 10px)) 16px var(--inv-section-px, var(--inv-edge, 10px));
    display: flex;
    justify-content: center;
}

.vf-section-about.vf-about-capsule-mode .vf-about-capsule {
    position: relative;
    width: 100%;
    max-width: min(var(--vf-about-max-w, 100%), var(--inv-shell-max, 100%));
    margin: 0 auto;
    border-radius: var(--inv-radius-capsule, 20px);
    /* Nicht #0f172a als Zahl: ungesetzt soll die Schrift der Palette folgen.
   Gemessen am 08.10.2026 blieb sie unter der Vorlage "Dunkel" auf
   rgb(15,23,42) stehen, waehrend der Seitengrund auf #0a0f1a ging —
   dunkle Schrift auf dunklem Grund. Unter "Standard" ist --inv-fg
   genau #0f172a, es aendert sich also nichts. */
    color: var(--vf-about-fg-color, var(--inv-fg, #0f172a));
    padding-top: var(--vf-about-pt, 64px);
    padding-bottom: var(--vf-about-pb, 64px);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    overflow: hidden;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Light Mode Capsule (Exact Grain Texture & Glass Fidelity from Brands Section) */
.vf-section-about.vf-about-theme-light .vf-about-capsule {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
    box-shadow: var(--inv-shadow-capsule);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 75%, transparent) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

/* Dark Mode Capsule (Matching Hero Canvas Card identically) */
.vf-section-about.vf-about-theme-dark .vf-about-capsule {
    border-radius: var(--inv-radius-capsule, 20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    background-color: var(--vf-about-bg-color, var(--vf-hero-bg-color, #08111d));
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseLight'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseLight)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 75% at 50% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 65%, rgba(0, 0, 0, 0.35) 100%);
    background-size: 160px 160px, 160px 160px, 100% 100%;
    background-repeat: repeat, repeat, no-repeat;
}

/* -------------------------------------------------------------
   Mode 2: Fullwidth (Edge-to-Edge, zero radius)
   ------------------------------------------------------------- */
.vf-section-about.vf-about-fullwidth-mode {
    border-radius: 0 !important;
    color: var(--vf-about-fg-color, var(--inv-fg, #0f172a));
    padding-top: var(--vf-about-pt, 72px);
    padding-bottom: var(--vf-about-pb, 72px);
    -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(104%);
    backdrop-filter: blur(32px) saturate(190%) contrast(104%);
}

.vf-section-about.vf-about-theme-light.vf-about-fullwidth-mode {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 75%, transparent) 100%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

.vf-section-about.vf-about-theme-dark.vf-about-fullwidth-mode {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: var(--vf-about-bg-color, var(--vf-hero-bg-color, #08111d));
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.2 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseLight'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseLight)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 90% 75% at 50% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 65%, rgba(0, 0, 0, 0.35) 100%);
    background-size: 160px 160px, 160px 160px, 100% 100%;
    background-repeat: repeat, repeat, no-repeat;
}

.vf-about-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: var(--inv-gutter, clamp(1.25rem, 4vw, 2.5rem));
}

/* -------------------------------------------------------------
   Eyebrow Badge
   ------------------------------------------------------------- */
.vf-about-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.vf-about-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 1.15rem;
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--vf-about-accent-color, var(--inv-accent, #24a9b3)) 70%, currentColor);
    transition: all 0.2s ease;
}

.vf-section-about.vf-about-theme-light .vf-about-badge {
    background: rgba(36, 169, 179, 0.06);
    border: 1px solid rgba(36, 169, 179, 0.18);
    box-shadow: 0 2px 8px rgba(36, 169, 179, 0.06);
}

.vf-section-about.vf-about-theme-dark .vf-about-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.vf-about-badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--vf-about-accent-color, var(--inv-accent, #24a9b3));
    box-shadow: 0 0 10px var(--vf-about-accent-color, var(--inv-accent, #24a9b3));
    animation: vf-badge-pulse 2s infinite ease-in-out;
}

@keyframes vf-badge-pulse {0%,
100% { transform: scale(1); opacity: 1; }

50% { transform: scale(1.4); opacity: 0.6; }
}

/* -------------------------------------------------------------
   Kinetic Typography Manifesto (Word-by-Word Scroll Highlight)
   ------------------------------------------------------------- */
.vf-about-manifesto-wrap {
    position: relative;
    text-align: center;
    max-width: var(--vf-about-text-max-w, min(820px, 92vw));
    margin: 0 auto clamp(1.75rem, 3.5vw, 3rem) auto;
}

.vf-about-manifesto {
    font-family: inherit;
    font-size: var(--vf-about-font-size, clamp(1.25rem, 1.85vw, 1.85rem));
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -0.015em;
    color: var(--vf-about-fg-color, var(--inv-fg, #0f172a));
    margin: 0;
    user-select: none;
}

/* Kinetic words */
.vf-scrub-word {
    display: inline-block;
    margin-right: 0.26em;
    vertical-align: baseline;
}

.vf-scrub-word-inner {
    display: inline-block;
    color: var(--vf-about-fg-color, var(--inv-fg, #0f172a));
    opacity: 0.14;
    will-change: opacity, transform, filter;
    transition: text-shadow 0.3s ease, color 0.2s ease;
}

/* Turquoise Highlights for Key Words */
.vf-scrub-word.vf-is-highlight .vf-scrub-word-inner,
.vf-highlight {
    color: color-mix(in srgb, var(--vf-about-accent-color, var(--inv-accent, #24a9b3)) 70%, currentColor);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.vf-section-about.vf-about-theme-light .vf-scrub-word.vf-is-highlight .vf-scrub-word-inner,
.vf-section-about.vf-about-theme-light .vf-highlight {
    text-shadow: 0 0 16px rgba(36, 169, 179, 0.22);
}

.vf-section-about.vf-about-theme-dark .vf-scrub-word.vf-is-highlight .vf-scrub-word-inner,
.vf-section-about.vf-about-theme-dark .vf-highlight {
    text-shadow: 0 0 20px rgba(36, 169, 179, 0.4);
}


/* 02. Pillars: Trust Pillars Grid, Glass Cutout & Undocking */

/* ── about-pillars.css ── */
/* =============================================================
   Inverta — Section: About (Über uns)
   Module 2: Trust Pillars Grid, Glass Cutout & Undocking Physics
   ============================================================= */

/* -------------------------------------------------------------
   Trust Pillars (Cards Section)
   Geometry: 521 x 520, diagonal cut x+y=715, parallel chip cut x+y=743
   ------------------------------------------------------------- */
.vf-about-pillars-wrap {
    position: relative;
    width: 100%;
    margin-top: clamp(1.75rem, 3vw, 2.75rem);
    margin-bottom: clamp(2.5rem, 4.5vw, 4.5rem);
}

/* Focused Turquoise Glow shining directly through the translucent cards */
.vf-about-pillars-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, 98vw);
    height: clamp(320px, 42vw, 480px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
    /* Die Lichter reichen bis an die Kante ihres Kastens. Mit filter: blur()
       war die Kante weich; seit 1.7.23 ist der Filter weg (Safari ruckelte),
       und durch das Glas der Karten stand sie als senkrechter Strich — in
       Firefox noch deutlicher. Die Maske blendet zum Rand hin aus. */
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

.vf-section-about.vf-about-theme-light .vf-about-pillars-glow {
    background: 
        radial-gradient(ellipse 55% 48% at 20% 45%, rgba(36, 169, 179, 0.45) 0%, transparent 68%),
        radial-gradient(ellipse 52% 48% at 80% 55%, rgba(14, 165, 233, 0.40) 0%, transparent 62%),
        radial-gradient(ellipse 75% 40% at 50% 50%, rgba(20, 184, 166, 0.35) 0%, transparent 70%);
    /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
       jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
    opacity: 0.95;
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars-glow {
    background: 
        radial-gradient(ellipse 55% 50% at 28% 45%, rgba(36, 169, 179, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 75% 55%, rgba(14, 165, 233, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse 70% 38% at 50% 50%, rgba(45, 212, 191, 0.32) 0%, transparent 70%);
    /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
       jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
}

.vf-about-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.85rem, 1.5vw, 1.4rem);
    align-items: start; /* Prevents vertical stretching, guarantees all 4 cards are identically sized */
    position: relative;
    z-index: 1;
    --accent: var(--vf-about-pillar-accent, var(--vf-about-accent-color, #24a9b3));
    /* Zahlen, und mit Absicht.
     *
     * Die Saeulen stehen auf eigenem Glas, dessen Verlauf aus weissen
     * Werten gemischt ist — gemessen am 08.10.2026 eine Flaeche mit
     * Leuchtdichte 0,58 unter jeder Palette, auch unter 'Dunkel'. Eine
     * Schrift, die hier der Palette folgte, wurde auf dieser hellen
     * Flaeche unlesbar: hell auf hell, 1,07:1. Die Flaeche ist die
     * Referenz, nicht die Seite dahinter. */
    --ink: var(--vf-about-pillar-text, var(--inv-fg, #0f172a));
    --ink-dim: #475569;
    --glass-blur: 20px;
    --card-bg: var(--vf-about-pillar-bg, var(--inv-surface, #ffffff));
    --card-path: path("M44 0 H477 A44 44 0 0 1 521 44 V356 A44 44 0 0 1 477 400 H339.9 A60 60 0 0 0 297.4 417.6 L206.7 508.3 A40 40 0 0 1 178.4 520 H44 A44 44 0 0 1 0 476 V44 A44 44 0 0 1 44 0 Z");
    --chip-path: path("M82.9 0 H230 A34 34 0 0 1 264 34 V66 A34 34 0 0 1 230 100 H24.3 A24 24 0 0 1 7.3 59 L54.6 11.7 A40 40 0 0 1 82.9 0 Z");
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars {
    --ink: var(--vf-about-pillar-text, #ffffff);
    --ink-dim: rgba(255, 255, 255, 0.78);
    --card-bg: rgba(10, 20, 32, 0.38);
}

/* Card Stage (Lightweight, clean shadow without heavy dark or banding artifacts) */
.vf-about-pillars .stage {
    position: relative;
    width: 100%;
    aspect-ratio: 521 / 520;
    isolation: isolate;
    transition: filter 0.3s ease;
    /* Kein will-change hier, an .glass und .chip auch nicht. Mit
       `will-change: transform` malt Chrome die Karte einmal als Bild und
       skaliert danach nur noch dieses Bild. Der Auftritt in about-scroll.js
       beginnt bei 90 % (die Symbole bei 65 %) — gemalt wurde also klein und
       danach hochgezogen: die 3D-Symbole standen unscharf in den Karten
       (21.10.2026). Ohne den Hinweis malt der Browser nach der Animation
       neu, in voller Größe. */
}

.vf-section-about.vf-about-theme-light .stage {
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.04));
}

.vf-section-about.vf-about-theme-light .stage:hover {
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.07));
}

.vf-section-about.vf-about-theme-dark .stage {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

.vf-section-about.vf-about-theme-dark .stage:hover {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
}

/* Staggered Ladder (Лесенка) arrangement */
@media (min-width: 992px) {
.vf-about-stagger-on .vf-about-pillars .stage:nth-child(1),
.vf-about-stagger-on .vf-about-pillars .stage:nth-child(3) {
        margin-top: 0;
    }

.vf-about-stagger-on .vf-about-pillars .stage:nth-child(2),
.vf-about-stagger-on .vf-about-pillars .stage:nth-child(4) {
        margin-top: clamp(32px, 4vw, 56px);
    }

.vf-about-stagger-off .vf-about-pillars .stage {
        margin-top: 0 !important;
    }
}

/* =============================================================
   Style A: Futuristic Glass Cutout Card
   ============================================================= */
.vf-about-pillars .glass {
    position: absolute;
    inset: 0;
    clip-path: var(--card-path);
    -webkit-clip-path: var(--card-path);
    clip-path: url(#vf-card-clip);
    -webkit-clip-path: url(#vf-card-clip);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.vf-about-pillars .chip {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50.67%;
    height: 19.23%;
    clip-path: var(--chip-path);
    -webkit-clip-path: var(--chip-path);
    clip-path: url(#vf-chip-clip);
    -webkit-clip-path: url(#vf-chip-clip);
    display: grid;
    place-items: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive Undocking: Main card and chip subtly separate on hover, widening the cutout gap */
.vf-about-pillars .stage:hover .glass {
    transform: translate(-3px, -3px);
}

.vf-about-pillars .stage:hover .chip {
    transform: translate(5px, 5px);
}

/* Translucent Frosted Glass Material (Underlying turquoise shines clearly through!) */
.vf-about-pillars .body {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.04);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.04);
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .body {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--inv-surface, #fff) 45%, transparent) 0%,
        color-mix(in srgb, var(--inv-surface, #fff) 15%, transparent) 50%,
        color-mix(in srgb, var(--inv-surface, #fff) 28%, transparent) 100%
    );
    box-shadow: 
        inset 0 1.5px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 2px rgba(15, 23, 42, 0.04);
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .chip .body {
    backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.06);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.06);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--inv-surface, #fff) 55%, transparent) 0%,
        color-mix(in srgb, var(--inv-surface, #fff) 22%, transparent) 100%
    );
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.95),
        inset 0 -1px 2px rgba(15, 23, 42, 0.04);
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .body {
    background:
        linear-gradient(158deg,
            rgba(255, 255, 255, .18) 0%,
            rgba(255, 255, 255, .06) 36%,
            rgba(255, 255, 255, .02) 64%,
            rgba(255, 255, 255, .09) 100%),
        rgba(10, 20, 32, 0.38);
}

/* Hide or dim grain so cards remain transparent glass */
.vf-section-about.vf-about-theme-light .vf-about-pillars .grain {
    display: none !important;
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .grain {
    position: absolute;
    inset: 0;
    opacity: .08;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.vf-about-pillars .edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.vf-about-pillars .edge path {
    fill: none;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .edge path {
    stroke: url(#edgeGradLight);
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .edge path {
    stroke: url(#edgeGradDark);
}

.vf-about-pillars .edge path.inner {
    stroke-width: 3.2;
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .edge path.inner {
    stroke: rgba(255, 255, 255, 0.7);
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .edge path.inner {
    stroke: rgba(255, 255, 255, 0.08);
}

/* Card Content: Grouped naturally at top & middle, NEVER colliding with bottom-right chip */
.vf-about-pillars .content {
    position: absolute;
    inset: 0;
    padding: 7.5% 8.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Keeps text in the spacious upper half of the card */
    gap: clamp(10px, 1.3vw, 16px);
    box-sizing: border-box;
    pointer-events: auto;
    z-index: 2;
}

.vf-about-pillars .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.vf-about-pillars .title {
    margin: 0;
    font-size: var(--vf-about-pillar-title-size, clamp(0.85rem, 1.02vw, 1.05rem));
    line-height: 1.18;
    letter-spacing: -0.015em;
    font-weight: 650;
    color: var(--ink);
    word-break: normal;
    hyphens: auto;
}

.vf-about-pillars .title em {
    font-style: normal;
    /* Der Akzent als Schrift: 2,69:1 auf dem Kartengrund, gemessen am
       08.10.2026. 30 % der umgebenden Schriftfarbe dazu ergeben 4,56:1 — und
       auf einer dunklen Karte geht die Mischung in die andere Richtung. */
    color: color-mix(in srgb, var(--accent) 70%, currentColor);
    display: block;
    font-size: 0.9em;
    font-weight: 650;
    margin-top: 1px;
}

/* Badge (Pill tag in Glass Morphism Style) */
.vf-about-pillars .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Die Untergrenze war 8.5px — gemessen am 06.10.2026 auf einem Tablett
       in 768px Breite, und dort stand sie tatsaechlich so im Bild. Die obere
       Grenze bleibt, wie sie war; nur der Boden steigt auf 11px. */
    font-size: clamp(11px, 0.72vw, 11px);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 9999px;
    box-sizing: border-box;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    transition: all 0.25s ease;
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .badge {
    background: linear-gradient(135deg, color-mix(in srgb, var(--inv-surface, #fff) 80%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 45%, transparent) 100%);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-top: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 95%, transparent);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05), inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
    color: var(--inv-fg, #0f172a);
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.vf-about-pillars .badge svg {
    width: 12px;
    height: 12px;
    flex: none;
    color: currentColor !important;
    opacity: 0.85;
    filter: none !important;
}

.badge-icon-img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Card Visual Media Layer Base */
.vf-about-pillars .vf-pillar-media {
    pointer-events: none;
    z-index: 1;
}

/* -------------------------------------------------------------
   Per-card image size

   Each of the four fallback cards has its own size option, so the
   variable is indexed and read on the matching stage. The generic
   --pillar-img-size stays the fallback for repeater-driven cards.
   ------------------------------------------------------------- */
.vf-about-pillars .stage:nth-child(1) .vf-pillar-media--icon { --pillar-img-size: var(--vf-pillar-1-img-size, 105px); }

.vf-about-pillars .stage:nth-child(2) .vf-pillar-media--icon { --pillar-img-size: var(--vf-pillar-2-img-size, 105px); }

.vf-about-pillars .stage:nth-child(3) .vf-pillar-media--icon { --pillar-img-size: var(--vf-pillar-3-img-size, 105px); }

.vf-about-pillars .stage:nth-child(4) .vf-pillar-media--icon { --pillar-img-size: var(--vf-pillar-4-img-size, 105px); }

.vf-about-pillars .vf-pillar-media--icon {
  width: var(--pillar-img-size, 105px);
  height: var(--pillar-img-size, 105px);
}


/* 03. Media: 3D Vectors, Photos, Badges & Captions */

/* ── about-media.css ── */
/* =============================================================
   Inverta — Section: About (Über uns)
   Module 3: Pillar Media Layers (3D Vector Icons, Covers & Captions)
   ============================================================= */

/* -------------------------------------------------------------
   MODE 1: Full-Bleed Cover (Hintergrund / Vollbild mit Vignette)
   ------------------------------------------------------------- */
.vf-about-pillars .vf-pillar-media.vf-pillar-media--cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.vf-about-pillars .vf-pillar-media.vf-pillar-media--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vf-about-pillars .stage:hover .vf-pillar-media.vf-pillar-media--cover img {
    transform: scale(1.05);
}

.vf-about-pillars .vf-pillar-media.vf-pillar-media--cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        155deg,
        rgba(8, 17, 29, 0.60) 0%,
        rgba(8, 17, 29, 0.30) 45%,
        rgba(8, 17, 29, 0.75) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.vf-about-pillars .stage.has-media--cover .glass .body {
    opacity: 0.25;
}

.vf-about-pillars .stage.has-media--cover .title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.vf-about-pillars .stage.has-media--cover .caption {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.vf-about-pillars .stage.has-media--cover .badge {
    background: rgba(8, 17, 29, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* -------------------------------------------------------------
   MODE 2: 3D Icon / Illustration (Kompakt, glasklar OHNE Abdunkelung)
   ------------------------------------------------------------- */
.vf-about-pillars .vf-pillar-media.vf-pillar-media--icon {
    position: absolute;
    top: 52%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: var(--pillar-img-size, 105px);
    height: var(--pillar-img-size, 105px);
    max-width: 65%;
    max-height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.42)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease, width 0.25s ease, height 0.25s ease;
}

.vf-about-pillars .vf-pillar-media.vf-pillar-media--icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.vf-about-pillars .stage:hover .vf-pillar-media.vf-pillar-media--icon {
    transform: translate(-50%, -56%) scale(1.10) rotate(2deg);
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.45));
}

/* Optional Alternate Position: Right-aligned */
.vf-about-pillars .vf-pillar-media.vf-pillar-media--icon.vf-pillar-media--pos-right {
    top: auto;
    left: auto;
    right: 7%;
    bottom: 22%;
    transform: none;
}

.vf-about-pillars .stage:hover .vf-pillar-media.vf-pillar-media--icon.vf-pillar-media--pos-right {
    transform: scale(1.12) translateY(-7px) rotate(2deg);
}

.vf-about-pillars .stage.has-media--icon .caption {
    position: relative;
    z-index: 3;
}

/* Fallback for Clean Card style with uploaded media */
.vf-about-pillars .stage--clean .vf-pillar-clean-card {
    position: relative;
    overflow: hidden;
}

.vf-about-pillars .stage--clean .row,
.vf-about-pillars .stage--clean .caption,
.vf-about-pillars .stage--clean .vf-pillar-clean-footer {
    position: relative;
    z-index: 2;
}

/* Caption Description: Positioned safely above chip with full card width */
.vf-about-pillars .caption {
    font-size: var(--vf-about-pillar-desc-size, clamp(0.72rem, 0.78vw, 0.78rem));
    line-height: 1.4;
    font-weight: 400;
    color: var(--ink-dim);
    margin: 0;
    margin-top: var(--vf-about-pillar-desc-offset, 8px) !important;
    max-width: 100%;
    letter-spacing: -0.01em;
    transition: margin-top 0.25s ease;
}

.vf-about-pillars .chip span {
    position: relative;
    font-size: var(--vf-about-pillar-num-size, clamp(1rem, 1.25vw, 1.25rem));
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--vf-about-pillar-num-color, #ffffff);
    padding-left: 12%;
    transition: color 0.25s ease;
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .chip span {
    color: var(--vf-about-pillar-num-color, var(--inv-fg, #0f172a));
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .chip span {
    color: var(--vf-about-pillar-num-color, #ffffff);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}


/* 04. Story: Clean Cards, Story Row & CTA Finder Button */

/* ── about-story.css ── */
/* =============================================================
   Inverta — Section: About (Über uns)
   Module 4: Clean Modern Cards & Story Narrative Row with CTA
   ============================================================= */

/* =============================================================
   Style B: Clean Modern Cards (Without Cutout)
   ============================================================= */
.vf-about-pillars .stage--clean {
    border-radius: 18px;
}

.vf-about-pillars .vf-pillar-clean-card {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    padding: 7.5% 8.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(10px, 1.3vw, 16px);
    box-sizing: border-box;
    position: relative;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all 0.3s ease;
}

.vf-section-about.vf-about-theme-light .stage--clean .vf-pillar-clean-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--inv-surface, #fff) 50%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 20%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--inv-surface, #fff) 85%, transparent);
    border-top: 1.5px solid #ffffff;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.05);
}

.vf-section-about.vf-about-theme-dark .vf-pillar-clean-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.vf-section-about.vf-about-cardstyle-flat_card .vf-pillar-clean-card {
    box-shadow: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.vf-about-pillars .stage--clean .vf-pillar-clean-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.vf-section-about.vf-about-theme-dark .vf-pillar-clean-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vf-about-pillars .vf-pillar-clean-num {
    font-size: var(--vf-about-pillar-num-size, clamp(1.1rem, 1.35vw, 1.35rem));
    font-weight: 700;
    color: var(--vf-about-pillar-num-color, #ffffff);
    letter-spacing: -0.02em;
    transition: color 0.25s ease;
}

.vf-section-about.vf-about-theme-light .vf-about-pillars .vf-pillar-clean-num {
    color: var(--vf-about-pillar-num-color, var(--inv-fg, #0f172a));
}

.vf-section-about.vf-about-theme-dark .vf-about-pillars .vf-pillar-clean-num {
    color: var(--vf-about-pillar-num-color, #ffffff);
}

/* -------------------------------------------------------------
   4. Secondary Story & Narrative Row + CTA Button
   ------------------------------------------------------------- */
.vf-about-story-row {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
    max-width: var(--vf-about-story-max-w, 1100px);
    margin: 0 auto;
    align-items: start;
}

.vf-about-lead-col {
    position: relative;
}

.vf-about-lead {
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--vf-about-fg-color, var(--inv-fg, #0f172a));
    margin: 0;
}

.vf-about-story-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vf-about-desc {
    font-size: clamp(0.82rem, 0.92vw, 0.92rem);
    line-height: 1.58;
    font-weight: 400;
    color: var(--vf-about-dim-color, color-mix(in srgb, var(--inv-muted-fg, #64748b) 70%, var(--inv-fg, #0f172a)));
    margin: 0;
}

.vf-section-about.vf-about-theme-dark .vf-about-desc {
    color: rgba(255, 255, 255, 0.72);
}

/* Button in About Story Row (Matches Hero Finder Button 100% without style conflict) */
.vf-about-actions {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.vf-about-actions .vf-about-btn,
.vf-about-actions .vf-about-btn.vf-finder-btn,
.vf-about-actions .vf-about-btn:hover,
.vf-about-actions .vf-about-btn:focus,
.vf-about-actions .vf-about-btn:active,
.vf-about-actions .vf-about-btn:visited,
.vf-about-actions .vf-about-btn *,
.vf-about-actions .vf-about-btn:hover *,
.vf-about-actions .vf-about-btn:focus *,
.vf-about-actions .vf-about-btn:active * {
    text-decoration: none !important;
    outline: none;
}

.vf-about-actions .vf-about-btn.vf-finder-btn {
    margin: 0 !important;
    align-self: flex-start !important;
}

.vf-section-about.vf-about-theme-light .vf-about-actions .vf-about-btn.vf-finder-btn {
    background: linear-gradient(135deg, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.45) 0%, rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22) 100%) !important;
    color: var(--inv-cta-color, currentColor) !important;
    border: 1px solid rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.55) !important;
    border-top: 1.5px solid color-mix(in srgb, var(--inv-surface, #fff) 85%, transparent) !important;
    box-shadow: 
        0 4px 16px -2px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.35),
        0 0 14px rgba(var(--inv-cta-rgb, var(--inv-accent-rgb, 36, 169, 179)), 0.22),
        inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.6) !important;
}


/* 05. Responsive: Breakpoints, Stagger & Mobile Layouts */

/* ── about-responsive.css ── */
/* =============================================================
   Inverta — Section: About (Über uns)
   Module 5: Responsive Breakpoints & Mobile Adaptations
   ============================================================= */

/* -------------------------------------------------------------
   Responsive Breakpoints & Compact Adaptations
   ------------------------------------------------------------- */
@media (max-width: 1200px) {
    .vf-about-pillars {
        gap: 0.9rem;
    }
}

@media (max-width: 991px) {
    .vf-about-story-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

.vf-about-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

.vf-about-stagger-on .vf-about-pillars .stage:nth-child(1),
.vf-about-stagger-on .vf-about-pillars .stage:nth-child(3) {
        margin-top: 0;
    }

.vf-about-stagger-on .vf-about-pillars .stage:nth-child(2),
.vf-about-stagger-on .vf-about-pillars .stage:nth-child(4) {
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .vf-section-about.vf-about-capsule-mode .vf-about-capsule {
        padding-top: 40px;
        padding-bottom: 40px;
        border-radius: 16px;
    }

.vf-about-manifesto {
        font-size: 1.25rem;
        line-height: 1.35;
    }

.vf-about-pillars {
        grid-template-columns: 1fr;
        gap: 1.15rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

.vf-about-stagger-on .vf-about-pillars .stage {
        margin-top: 0 !important;
    }

.vf-about-pillars .content {
        padding: 8% 9%;
        gap: 10px;
    }

.vf-about-lead {
        font-size: 1.1rem;
    }

.vf-about-desc {
        font-size: 0.85rem;
    }

.vf-about-btn {
        width: 100%;
        justify-content: center;
    }
}