/* ==========================================================================
   VerdantGrounds Solutions - Homepage Styles
   Professional business aesthetic: sharp edges, strong hierarchy,
   controlled motion, atmospheric image integration
   ========================================================================== */

:root {
    --vg-bg-primary:   #090c08;
    --vg-bg-secondary: #0e120c;
    --vg-bg-card:      rgba(255, 255, 255, 0.033);
    --vg-text-primary:   #eeeee8;
    --vg-text-secondary: #b8b8ae;
    --vg-text-muted:     #787870;
    --vg-forest: #1a8a1a;
    --vg-ocean:  #1589d6;
    --vg-cyber:  #06ccc5;
    --vg-border:        rgba(255, 255, 255, 0.08);
    --vg-border-hover:  rgba(6, 204, 197, 0.35);
    --vg-radius-sm:  2px;
    --vg-radius-md:  4px;
    --vg-radius-card: 6px;
    --vg-radius-full: 9999px;
    --vg-shadow-card: 0 2px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    background-color: var(--vg-bg-primary);
    color: var(--vg-text-primary);
    font-family: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */
.vg-display {
    font-family: 'Space Grotesk', 'Geist', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.vg-label {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Gradient / accent
   -------------------------------------------------------------------------- */
.vg-gradient-text {
    background: linear-gradient(120deg, #2fb82f 0%, var(--vg-ocean) 45%, var(--vg-cyber) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   Aurora / animated gradient background (Hero)
   -------------------------------------------------------------------------- */
@keyframes vg-aurora {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.vg-aurora {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 140% 90% at 60% 0%,
        rgba(26,138,26,0.22) 0%,
        rgba(21,137,214,0.14) 38%,
        rgba(6,204,197,0.10) 62%,
        transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Subtle animated grid overlay */
.vg-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* --------------------------------------------------------------------------
   Ambient glow orbs
   -------------------------------------------------------------------------- */
.vg-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.vg-orb--green {
    background: radial-gradient(circle, rgba(26,138,26,0.55) 0%, transparent 70%);
    width: 500px;
    height: 500px;
}

.vg-orb--cyber {
    background: radial-gradient(circle, rgba(6,204,197,0.40) 0%, transparent 70%);
    width: 480px;
    height: 480px;
}

.vg-orb--ocean {
    background: radial-gradient(circle, rgba(21,137,214,0.35) 0%, transparent 70%);
    width: 400px;
    height: 400px;
}

/* --------------------------------------------------------------------------
   Glass cards (sharp business style)
   -------------------------------------------------------------------------- */
.vg-card {
    background: var(--vg-bg-card);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-card);
    box-shadow: var(--vg-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.vg-card:hover {
    border-color: var(--vg-border-hover);
    box-shadow: 0 0 0 1px rgba(6,204,197,0.1), 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(6,204,197,0.08);
    transform: translateY(-3px);
}

/* legacy alias used in older selectors */
.vg-glass {
    background: var(--vg-bg-card);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-card);
    box-shadow: var(--vg-shadow-card);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.vg-glass:hover {
    border-color: var(--vg-border-hover);
    box-shadow: 0 0 0 1px rgba(6,204,197,0.1), 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(6,204,197,0.08);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Buttons: very small radius, sharp professional look
   -------------------------------------------------------------------------- */
.vg-btn-primary {
    background: linear-gradient(135deg, var(--vg-forest) 0%, var(--vg-ocean) 55%, var(--vg-cyber) 100%);
    color: #fff;
    border: none;
    border-radius: var(--vg-radius-md);
    padding: 0.75rem 1.625rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.vg-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0));
    pointer-events: none;
}

.vg-btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(6,204,197,0.35);
}

.vg-btn-primary:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 3px;
}

.vg-btn-secondary {
    background: rgba(255,255,255,0.04);
    color: var(--vg-text-primary);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-md);
    padding: 0.75rem 1.625rem;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.vg-btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(6,204,197,0.4);
    transform: translateY(-1px);
}

.vg-btn-secondary:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Chip / kicker label
   -------------------------------------------------------------------------- */
.vg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vg-cyber);
    background: rgba(6,204,197,0.07);
    border: 1px solid rgba(6,204,197,0.18);
    border-radius: var(--vg-radius-sm);
    padding: 0.28rem 0.75rem;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace;
}

.vg-chip::before {
    /* Punkt vor den Eyebrow-Labels bewusst entfernt (auf Wunsch). */
    display: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.vg-nav {
    background: rgba(9, 12, 8, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--vg-border);
}

.vg-nav-link {
    color: var(--vg-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.18s ease;
    position: relative;
    padding-bottom: 2px;
}

.vg-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, var(--vg-forest), var(--vg-cyber));
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
}

.vg-nav-link:hover {
    color: var(--vg-text-primary);
}

.vg-nav-link:hover::after {
    width: 100%;
}

.vg-nav-link:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Language switch */
.vg-lang-btn {
    color: var(--vg-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.35rem;
    transition: color 0.18s ease;
    text-decoration: none;
    font-family: 'Geist Mono', monospace;
}

.vg-lang-btn.active { color: var(--vg-cyber); }
.vg-lang-btn:hover  { color: var(--vg-text-primary); }
.vg-lang-btn:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 3px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Section divider rule
   -------------------------------------------------------------------------- */
.vg-rule {
    border: none;
    border-top: 1px solid var(--vg-border);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Icon container
   -------------------------------------------------------------------------- */
.vg-icon-box {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--vg-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,204,197,0.07);
    border: 1px solid rgba(6,204,197,0.15);
    flex-shrink: 0;
}

/* legacy alias */
.vg-icon-circle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--vg-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,204,197,0.07);
    border: 1px solid rgba(6,204,197,0.15);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Hero section specifics
   -------------------------------------------------------------------------- */
.vg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    padding: 0.35rem 0.8rem 0.35rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vg-text-secondary);
    font-family: 'Geist Mono', monospace;
    margin-bottom: 1.5rem;
}

.vg-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vg-cyber);
    box-shadow: 0 0 8px var(--vg-cyber);
    animation: vg-pulse-dot 2.4s ease-in-out infinite;
}

@keyframes vg-pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--vg-cyber); }
    50%       { opacity: 0.5; box-shadow: 0 0 4px var(--vg-cyber); }
}

/* --------------------------------------------------------------------------
   Hero image: atmospheric bleed, no hard border box
   -------------------------------------------------------------------------- */
.vg-hero-visual {
    position: relative;
}

.vg-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Fade edges so image bleeds into background */
    mask-image: radial-gradient(ellipse 92% 88% at 50% 45%, black 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 45%, black 55%, transparent 100%);
}

/* Float / breathe animation */
@keyframes vg-float {
    0%, 100% { transform: translateY(0px) rotate(-0.3deg); }
    50%       { transform: translateY(-14px) rotate(0.3deg); }
}

.vg-float {
    animation: vg-float 7s ease-in-out infinite;
}

/* Glow halo behind hero image */
.vg-hero-visual::before {
    content: '';
    position: absolute;
    inset: -15%;
    background: radial-gradient(ellipse 80% 70% at 50% 50%,
        rgba(6,204,197,0.18) 0%,
        rgba(26,138,26,0.12) 40%,
        transparent 72%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   Section visuals: atmospheric, no hard frame
   -------------------------------------------------------------------------- */
.vg-section-visual {
    position: relative;
}

.vg-section-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, black 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 50%, black 45%, transparent 100%);
}

.vg-section-visual::before {
    content: '';
    position: absolute;
    inset: -12%;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
        rgba(6,204,197,0.14) 0%,
        rgba(26,138,26,0.09) 45%,
        transparent 72%);
    filter: blur(24px);
    pointer-events: none;
    z-index: -1;
}

/* planting-hands atmospheric band (used as section separator) */
.vg-visual-band {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.vg-visual-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 78%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 18%,
        black 78%,
        transparent 100%
    );
    opacity: 0.55;
}

.vg-visual-band-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--vg-bg-secondary) 0%,
        transparent 30%,
        transparent 70%,
        var(--vg-bg-secondary) 100%
    );
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Ecosystem nodes visual (solutions section)
   -------------------------------------------------------------------------- */
.vg-eco-visual {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.vg-eco-visual img {
    display: block;
    width: 100%;
    height: auto;
    mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 40%, transparent 100%);
}

.vg-eco-visual::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle, rgba(6,204,197,0.16) 0%, rgba(26,138,26,0.10) 50%, transparent 75%);
    filter: blur(28px);
    pointer-events: none;
    z-index: -1;
}

/* --------------------------------------------------------------------------
   Stat counter items
   -------------------------------------------------------------------------- */
.vg-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Geist', sans-serif;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(120deg, #2fb82f, var(--vg-cyber));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vg-stat-label {
    font-size: 0.8rem;
    color: var(--vg-text-muted);
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Technology section: data-pipeline visual
   -------------------------------------------------------------------------- */
.vg-protocol-nodes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 2rem 0;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.vg-pnode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.vg-pnode-dot {
    width: 42px;
    height: 42px;
    border-radius: var(--vg-radius-sm);
    background: rgba(6,204,197,0.08);
    border: 1px solid rgba(6,204,197,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vg-pnode-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vg-cyber);
    box-shadow: 0 0 10px var(--vg-cyber);
}

.vg-pnode-label {
    font-size: 0.65rem;
    font-family: 'Geist Mono', monospace;
    color: var(--vg-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    max-width: 72px;
}

.vg-pnode-label--hub {
    max-width: none;
    white-space: nowrap;
}

.vg-pnode-connector {
    height: 1px;
    width: 48px;
    background: linear-gradient(90deg, rgba(6,204,197,0.4), rgba(6,204,197,0.15));
    align-self: flex-start;
    margin-top: 21px;
    flex-shrink: 0;
}

/* Der Verbinder rechts neben dem Mittelknoten läuft von Grün nach Cyan, weil
   dort der Wechsel vom Protokoll zur Anwendungsseite sitzt. Diese Farbfolge
   stand bisher als Inline-Stil im HTML und war damit aus dem Stylesheet nicht
   erreichbar. Als Klasse lässt sie sich in der Handy-Ansicht auf die
   senkrechte Richtung umstellen, ohne mit !important zu arbeiten. */
.vg-pnode-connector--hub {
    background: linear-gradient(90deg, rgba(26,138,26,0.4), rgba(6,204,197,0.25));
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.vg-form-row {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .vg-form-row { grid-template-columns: 1fr 1fr; }
}

.vg-field-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--vg-text-secondary);
    margin-bottom: 0.4rem;
}

.vg-required {
    color: var(--vg-cyber);
    font-weight: 700;
    line-height: 1;
}

.vg-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--vg-radius-md);
    padding: 0.65rem 0.9rem;
    color: var(--vg-text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.vg-input::placeholder { color: var(--vg-text-muted); }

.vg-input:focus {
    border-color: rgba(6,204,197,0.5);
    box-shadow: 0 0 0 3px rgba(6,204,197,0.10);
}

.vg-input.vg-input-error {
    border-color: rgba(248,113,113,0.55);
    box-shadow: 0 0 0 3px rgba(248,113,113,0.08);
}

/* Select arrow */
select.vg-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396968c' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

select.vg-input option {
    background: #141812;
    color: var(--vg-text-primary);
}

.vg-field-error {
    font-size: 0.78rem;
    color: #f87171;
    margin-top: 0.3rem;
    display: none;
}

.vg-field-error.visible { display: block; }

.vg-form-status {
    font-size: 0.875rem;
    min-height: 1.2rem;
    text-align: center;
}

.vg-form-status.success { color: #4ade80; }
.vg-form-status.error   { color: #f87171; }

/* Inline conditional field */
.vg-field-conditional {
    display: none;
    margin-top: 0.75rem;
}

.vg-field-conditional.visible { display: block; }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.vg-faq {
    border-radius: var(--vg-radius-card);
    overflow: hidden;
}

.vg-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--vg-text-primary);
    transition: color 0.2s ease;
}

.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary:hover { color: var(--vg-cyber); }

.vg-faq-icon {
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vg-cyber);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vg-faq[open] .vg-faq-icon { transform: rotate(45deg); }

.vg-faq-body {
    padding: 0 1.375rem 1.125rem;
    color: var(--vg-text-secondary);
    line-height: 1.72;
    font-size: 0.9rem;
}

.vg-faq[open] .vg-faq-body {
    animation: vg-faq-open 0.3s ease;
}

@keyframes vg-faq-open {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */
.vg-mobile-menu {
    display: none;
    background: rgba(9,12,8,0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--vg-border);
}

.vg-mobile-menu.open { display: block; }

/* --------------------------------------------------------------------------
   Scroll-reveal animations
   -------------------------------------------------------------------------- */
@keyframes vg-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vg-fade-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes vg-fade-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes vg-fade-scale {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.js-anim .vg-animate,
.js-anim .vg-animate-left,
.js-anim .vg-animate-right,
.js-anim .vg-animate-scale { opacity: 0; }

.vg-animate.vg-visible        { animation: vg-fade-up    0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
.vg-animate-left.vg-visible   { animation: vg-fade-left  0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
.vg-animate-right.vg-visible  { animation: vg-fade-right 0.72s cubic-bezier(0.16,1,0.3,1) forwards; }
.vg-animate-scale.vg-visible  { animation: vg-fade-scale 0.7s  cubic-bezier(0.16,1,0.3,1) forwards; }

.vg-delay-1 { animation-delay: 0.07s; }
.vg-delay-2 { animation-delay: 0.14s; }
.vg-delay-3 { animation-delay: 0.21s; }
.vg-delay-4 { animation-delay: 0.28s; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.vg-footer-link {
    color: var(--vg-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.18s ease;
}

.vg-footer-link:hover { color: var(--vg-cyber); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.vg-legal h2 { color: var(--vg-text-primary); }
.vg-legal h3 { color: var(--vg-text-secondary); }

.vg-legal p,
.vg-legal li {
    color: var(--vg-text-secondary);
    line-height: 1.7;
}

.vg-legal a { color: var(--vg-cyber); }
.vg-legal a:hover { text-decoration: underline; }
.vg-legal strong { color: var(--vg-text-primary); }

/* --------------------------------------------------------------------------
   Reduced motion: disable ALL decorative motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .vg-animate,
    .vg-animate-left,
    .vg-animate-right,
    .vg-animate-scale {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .vg-float { animation: none !important; }

    .vg-hero-badge-dot { animation: none !important; }

    html { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Accessibility: focus rings
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 3px;
    border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--vg-cyber);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive utilities
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .vg-visual-band { height: 200px; }
}

/* ==========================================================================
   HANDY-ANSICHT

   Alles unterhalb dieser Überschrift gilt ausschließlich für schmale
   Geraete. Die Ansicht auf dem Rechner wird davon nicht berührt, weil jede
   Regel in einer @media-Abfrage mit oberer Breitengrenze steht.

   Warum ein eigener, gebündelter Abschnitt und keine Regeln verstreut im
   Dokument: bis hierher enthielt die Datei genau eine einzige Abfrage für
   Handgeraete, und die setzte nur die Höhe eines Bildbandes. Es gab also
   praktisch keine Handy-Anpassung. Gebuendelt bleibt sichtbar, was für das
   Handy gilt und was nicht.

   Breitengrenzen, und warum genau diese:
     767.98px  entspricht der Grenze md des im Projekt genutzten Tailwind.
               Genau dort schaltet die Seitennavigation vom Menü-Knopf auf
               die ausgeschriebene Leiste um.
     639.98px  entspricht der Grenze sm. Ab hier bricht die Protokoll-Kette
               ohnehin um, deshalb wird sie darunter senkrecht gestellt.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* --- Waagerechter Überstand ------------------------------------------
       Gemessen bei 390px Sichtfeld: das Dokument war 510px breit, also 120px
       zu viel, und die Seite wirkte dadurch als Ganzes verrutscht. Verursacher
       waren ausnahmslos die acht Leuchtkugeln .vg-orb. Sie sind 400 bis 500px
       breit und tragen ihre Lage als Inline-Stil, teils mit negativen Werten
       wie right:-120px. Vier der Abschnitte klammern solche Kinder bereits ab
       (overflow-hidden im Markup), die Abschnitte "Ueber uns" und "Warum wir"
       jedoch nicht, und von dort lief der Überstand bis ins Dokument durch.

       Geklammert wird am Hauptinhalt, weil dort alle acht Kugeln liegen und
       weil damit auch jedes später hinzugefuegte Schmuckelement nicht mehr
       ausbrechen kann. clip statt hidden aus drei Gründen: clip erzeugt
       keinen Scrollbereich, macht position:sticky im Inneren nicht kaputt,
       und lässt die senkrechte Achse ausdrücklich sichtbar, sodass die
       Schwebebewegung des Titelbildes unverändert bleibt. */
    main {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* --- Tippziele --------------------------------------------------------
       Gemessen waren die Fusszeilen-Links nur 17px hoch, also weniger als die
       Hälfte dessen, was ein Daumen sicher trifft. Bewusst über Mindesthöhe
       und Innenabstand gelöst und nicht über eine feste Höhe, damit ein
       Text, der auf schmalen Geraeten umbricht, den Kasten weiter wachsen
       lassen darf statt aus ihm herauszulaufen. */
    .vg-footer-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    /* Die Rechtsseiten (Impressum, Datenschutz, Imprint, Privacy) tragen ihre
       Fusszeilen-Links ohne eigene Klasse, deshalb hier über die Struktur. */
    footer nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    /* Kopfzeile: Wortmarke, Rückweg auf den Rechtsseiten und die Links im
       aufgeklappten Menü. Der Menü-Knopf selbst war 40x40 und braucht
       zusätzlich Mindestbreite, weil er kein Textkind hat, das ihn trägt. */
    header a,
    header button {
        min-height: 44px;
    }

    #vg-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
    }

    /* Der Sprachumschalter besteht aus zwei sehr kurzen Beschriftungen und
       war mit 0.2rem Innenabstand kaum zu treffen. */
    .vg-lang-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    /* --- Schriftgrößen --------------------------------------------------
       Unter 12px wird Text auf einem Handy unleserlich und iOS zoomt beim
       Antippen von Eingabefeldern nach. Gemessen lagen vier Stellen darunter.
       Die Beschriftungen der Protokoll-Kette stehen weiter unten, weil sie
       zusammen mit deren Umbau gesetzt werden. */
    .vg-chip { font-size: 0.75rem; }
    .vg-hero-badge { font-size: 0.75rem; }

    /* Eingabefelder brauchen auf dem Handy genau 16px, und zwar nicht wegen der
       Lesbarkeit: iOS Safari vergrößert die gesamte Seite, sobald ein Feld mit
       kleinerer Schrift den Fokus bekommt, und zoomt danach nicht von selbst
       zurück. Der Besucher muss dann mitten im Ausfüllen von Hand
       herauszoomen. Gemessen standen alle neun Felder des Kontaktformulars auf
       14.4px, also knapp darunter. Die Höhe der Felder wächst dadurch von 44
       auf 46px und bleibt damit über der Mindestgröße für Tippziele. */
    .vg-input { font-size: 16px; }

    /* 0.65rem ergaben gemessen 10.4px und waren die kleinste Schrift der ganzen
       Seite. Gilt für die volle Handy-Breite, nicht erst ab der Kaskade, denn
       auch in der Reihe darunter ist der Text zu klein. Die Breitengrenze von
       72px bleibt hier stehen, sie hält die Knoten in der Reihe gleich breit. */
    .vg-pnode-label { font-size: 0.75rem; }

    /* --- Lange Woerter und Netzadressen auf den Rechtsseiten --------------
       Bei 320px Sichtfeld schoben eine Überschrift und mehrere ausgeschriebene
       Netzadressen den Inhalt über seinen Kasten hinaus, gemessen bis 329px in
       einem 222px breiten Kasten. Ursache sind unteilbare Zeichenketten: lange
       deutsche Zusammensetzungen und vollstaendige Adressen, die laut Vorgabe
       nicht gekürzt werden dürfen. Silbentrennung zuerst, weil sie das
       schönere Ergebnis liefert, und ein harter Umbruch als Rückfall, wenn
       kein Trennwörterbuch vorhanden ist. */
    .vg-legal,
    .vg-legal h1,
    .vg-legal h2,
    .vg-legal h3,
    .vg-legal p,
    .vg-legal li,
    .vg-legal a {
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
    }

    /* Der Umbruch allein reicht nicht, er macht aus einer Überschrift nur eine
       zerrissene Überschrift: "Datenschutzerklaerung" brach gemessen in
       "Datenschutzerklaer" und "ung". Zwei Stellschrauben davor:

       Erstens der Innenabstand der Karte. Bei 320px Sichtfeld blieben von der
       Seitenbreite nur 222px für den Text übrig, ein Drittel ging an den
       Rand. 1.5rem geben davon 32px zurück. Die doppelte Klasse ist nötig,
       damit die Regel gegen die Hilfsklasse p-8 im Markup gewinnt, unabhängig
       davon, in welcher Reihenfolge die Stylesheets geladen werden.

       Zweitens die Schriftgröße der Überschriften, mitwachsend statt fest.
       Der obere Wert entspricht genau der bisherigen Größe, kleiner wird es
       also nur dort, wo es sonst zerrisse. */
    .vg-glass.vg-legal {
        padding: 1.5rem;
    }

    .vg-legal h1 {
        font-size: clamp(1.5rem, 7vw, 1.875rem);
        line-height: 1.2;
    }

    .vg-legal h2 {
        font-size: clamp(1.05rem, 5.2vw, 1.25rem);
        line-height: 1.3;
    }

    /* --- Senkrechter Rhythmus ---------------------------------------------
       Gemessen bei 390px Sichtfeld: die sechs Inhaltsabschnitte trugen oben
       und unten je 80px Polster. An jedem Übergang stapeln sich zwei davon,
       macht 160px reine Leere zwischen zwei Abschnitten, also 41 Prozent der
       Geraetebreite. Der Hero fiel zusätzlich aus der Reihe: 144 oben, 80
       unten.

       Statt eines einzigen Wertes für alles eine kleine Leiter, denn starre
       Gleichheit wirkt mechanisch. Jede Stufe ist ein Vielfaches von 8px,
       und 8px ist die Grundeinheit, aus der hier JEDER Wert abgeleitet ist:

           2 Einheiten   16px   Geschwister in einer Liste oder einem Gitter
           4 Einheiten   32px   Teile innerhalb eines Blocks, Text zu Bild
           6 Einheiten   48px   zwischen zwei Bloecken eines Abschnitts
           7 Einheiten   56px   Abschnittspolster, ergibt an jedem Übergang
                                die doppelte Strecke, also 112px

       Der Abstand ZWISCHEN Abschnitten ist damit deutlich größer als der
       INNERHALB eines Abschnitts, und beide stammen aus derselben Einheit.
       Die 112px sind kein gegriffener Wert: sie entsprechen genau dem
       Polster, das ein Abschnitt auf dem Rechner an EINER Seite trägt
       (py-28 = 112px). Was dort eine Seite ist, ist auf dem Handy der ganze
       Übergang.

       Alle Regeln hängen an #top, also am Hauptinhalt der beiden
       Startseiten. Die Rechtsseiten tragen an ihrem main kein id und bleiben
       unberührt, obwohl auch sie section-Elemente enthalten.

       Die Auswahl ist absichtlich strukturell formuliert und nicht über die
       Hilfsklassen, die sie überschreibt. Wird im Markup aus mb-10 einmal
       mb-8, bleibt die Regel gültig, statt still auszufallen. Durch das id
       liegt die Spezifitaet über jeder Hilfsklasse, die Regel greift also
       unabhängig davon, in welcher Reihenfolge die Stilvorlagen geladen
       werden. */
    #top > section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    /* Der Hero ist der einzige Abschnitt, der mit einem Bild endet, und
       genau darunter lag das gemeldete Loch: 80px eigenes Polster plus 80px
       des Folgeabschnitts, also 160px Leere unter dem Baum, während über ihm
       40px standen. Die Farbkante dazwischen trennt optisch nichts, #090c08
       und #0e120c sind mit blossem Auge kaum zu unterscheiden.

       Unten deshalb 32px, genau so viel wie über dem Bild. Der Baum liegt
       damit symmetrisch in seinem eigenen Abschnitt. Was darunter folgt,
       sind die 56px, die JEDER Abschnitt oben trägt, also kein Sonderfall,
       sondern die normale Leiter. Ein Bild braucht am Abschnittsende kein
       trennendes Polster, weil seine Kanten ohnehin weich auslaufen; ein
       Abschnitt, der mit Text oder Karten endet, braucht es sehr wohl.

       Oben 120px: die Kopfleiste steht fest und ist 65px hoch. 120 minus 65
       lassen 55px frei, also das Abschnittspolster auf einen Pixel genau. */
    #top > section:first-of-type {
        padding-top: 120px;
        padding-bottom: 32px;
    }

    /* WICHTIG für alle folgenden Regeln: sie dürfen NICHT an den Kennungen
       der Abschnitte hängen. Die deutsche und die englische Seite tragen
       dafür verschiedene Wörter, ueber-uns gegen about, loesungen gegen
       solutions, technologie gegen technology, warum gegen why, kontakt
       gegen contact. Nur faq heisst in beiden Sprachen gleich.

       Ein erster Entwurf hing an den deutschen Kennungen und wirkte deshalb
       auf der englischen Seite bei fünf von sechs Abschnitten NICHT. Gefunden
       wurde das durch Nachmessen beider Sprachen, nicht durch Nachdenken.
       Deshalb wird ab hier ausschliesslich über die Struktur ausgewaehlt,
       die in beiden Sprachen Zeichen für Zeichen dieselbe ist. Eine dritte
       Sprache wäre damit von selbst mit abgedeckt. */

    /* Bild und Textspalte sind ein Paar innerhalb EINES Blocks, deshalb die
       kleinere Stufe. Betrifft das Titelbild im Hero und das Bild im
       Abschnitt "Über uns", gemessen vorher 40px und 48px für dieselbe
       Beziehung. Der Hero ist der einzige Abschnitt, dessen Container direkt
       mit einem Gitter beginnt und der zugleich der erste ist; in "Über uns"
       ist das Einleitungsgitter das erste Kind seines Containers.
       Nur die senkrechte Achse, damit an der waagerechten nichts kippt. */
    #top > section:first-of-type > .container > .grid,
    #top > section:not(:first-of-type) > .container > .grid:first-child {
        row-gap: 32px;
    }

    /* Zwischen zwei Bloecken eines Abschnitts: 48px. Gemessen standen für
       diese eine Beziehung sechs verschiedene Werte nebeneinander:
       "Über uns" 64 und 32, "Lösungen" 48, "Technologie" 40, "Warum wir" 56,
       "FAQ" 48, "Kontakt" 40. 48 ist davon der haeufigste Wert und liegt in
       der Mitte, kostet also die kleinste Verschiebung.

       Der Kopf eines Abschnitts ist strukturell immer dasselbe: ein div mit
       text-center als erstes Kind, entweder direkt im Container oder eine
       Ebene tiefer in einem Breitenbegrenzer. Der Ausschluss des ersten
       Abschnitts ist nötig, weil die Textspalte des Hero genauso gebaut ist,
       dort aber ein Gitterfeld und kein Kopf ist. */
    #top > section:not(:first-of-type) > .container > .grid:first-child,
    #top > section:not(:first-of-type) > .container > div.text-center:first-child,
    #top > section:not(:first-of-type) > .container > div > div.text-center:first-child {
        margin-bottom: 48px;
    }

    /* Die abschliessende Bemerkung unter den drei Saeulen in "Über uns" ist
       der einzige Absatz, der direkt im Container eines Abschnitts steht. */
    #top > section > .container > p {
        margin-top: 48px;
    }

    /* Geschwister in einer Liste oder einem Gitter: 16px. Gemessen 12px in
       den FAQ und 20px bei den Lösungskarten, während die drei Saeulen in
       "Über uns" und die Karten in "Warum wir" bereits auf 16 standen. */
    #top > section:not(:first-of-type) > .container > .grid:not(:first-child),
    #top > section > .container > .flex {
        row-gap: 16px;
    }
}

/* Zwischen 640px und der Grenze md bleibt die Protokoll-Kette eine Reihe, so
   wie es abgestimmt ist. Gemessen frisst sie dort aber mehr Platz, als sie hat:
   die fuenf Knoten brauchen zusammen rund 348px, dazu vier Verbinder zu je 48px,
   macht 540px, während der Kasten nur 497 bis 510px breit ist. Die Folge war
   genau der gemeldete Fehler, nur eine Stufe höher: die Reihe brach um, der
   Knoten "Investoren" rutschte allein in die nächste Zeile, und der vierte
   Verbinder endete im Nichts.

   Statt die Kaskade nach oben auszudehnen und damit die getroffene Entscheidung
   zu übergehen, werden hier die Verbinder halbiert. Das spart 96px, die Reihe
   passt wieder in einer Zeile, und die Zeichnung bleibt dieselbe, nur enger. */
@media (min-width: 640px) and (max-width: 767.98px) {
    .vg-pnode-connector { width: 24px; }
}

@media (max-width: 639.98px) {

    /* --- Die Protokoll-Kette wird zur senkrechten Kaskade -----------------
       Vorher: eine waagerechte Reihe aus fuenf Knoten und vier Verbindern zu
       je fest 48px, gehalten von flex-wrap. Bei 390px Sichtfeld zerfiel sie
       gemessen in drei ausgefranste Reihen, und zwei Verbinder endeten im
       Nichts, weil ihr Anschlussknoten in der nächsten Reihe stand.

       Ein waagerecht scrollbares Band wäre die andere Loesung gewesen und
       wurde ausdrücklich verworfen: es versteckt die Hälfte des Diagramms
       hinter einer Wischgeste, die niemand entdeckt. Senkrecht bleibt die
       Reihenfolge NGOs, NGOWallet, VerdantGrounds Protocol, Marketplace,
       Investoren erhalten, und der Mittelknoten bleibt der Mittelknoten. */
    .vg-protocol-nodes {
        flex-direction: column;
        flex-wrap: nowrap;
        row-gap: 0;
    }

    /* Aus dem waagerechten Strich wird ein senkrechter. margin-top trägt in
       der Reihe den Versatz auf die Höhe der Knotenmitte und muss hier weg,
       sonst reißt zwischen jedem Knotenpaar eine Lücke von 21px auf. */
    .vg-pnode-connector {
        width: 1px;
        height: 28px;
        margin-top: 0;
        align-self: center;
        background: linear-gradient(180deg, rgba(6,204,197,0.4), rgba(6,204,197,0.15));
    }

    .vg-pnode-connector--hub {
        background: linear-gradient(180deg, rgba(26,138,26,0.4), rgba(6,204,197,0.25));
    }

    /* In der Kaskade steht jede Beschriftung allein in ihrer Zeile, deshalb
       fällt die Breitenbegrenzung von 72px weg, die in der Reihe für gleich
       breite Spalten sorgte. Die Schriftgröße steht weiter oben, sie gilt
       für die volle Handy-Breite. */
    .vg-pnode-label {
        max-width: none;
    }

    /* nowrap hält in der Reihe die zweizeilige Beschriftung des Mittelknotens
       zusammen. Senkrecht ist das nicht nötig und wäre ein Risiko für neuen
       Überstand, der Zeilenumbruch steckt ohnehin als <br> im Markup. */
    .vg-pnode-label--hub {
        white-space: normal;
    }
}