/* =========================================================
   AYJUNITY — STARTSEITE
   Wird nur auf /index.html geladen.
   ========================================================= */

/* =========================================================
   7. STARTSEITE: HERO
   ========================================================= */

.hero {
    padding:
        clamp(64px, 7vw, 105px)
        0
        clamp(72px, 8vw, 110px);
}

.hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, 0.7fr);

    align-items: center;
    gap: clamp(48px, 5vw, 82px);
}

.hero-content,
.hero-visual {
    min-width: 0;
}

.hero-content h1 {
    max-width: 850px;
}

.hero-description {
    max-width: 740px;
    margin-bottom: 30px;

    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-bottom: 42px;
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.hero-facts li {
    display: grid;
    gap: 3px;

    color: var(--color-text-muted);

    font-size: 0.92rem;
}

.hero-facts strong {
    color: var(--color-text);

    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-visual {
    width: 100%;
    max-width: 440px;

    justify-self: end;
}

.visual-placeholder {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 500px;
    padding: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            150deg,
            rgba(220, 161, 93, 0.22),
            transparent 45%
        ),
        linear-gradient(
            330deg,
            rgba(71, 103, 90, 0.25),
            transparent 55%
        ),
        #171a1f;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-large);
}

.visual-placeholder::after {
    content: "";

    position: absolute;
    top: 8%;
    right: -12%;

    width: 270px;
    height: 270px;

    background: rgba(220, 161, 93, 0.13);

    border-radius: 50%;
}

.visual-label,
.project-status {
    position: relative;
    z-index: 1;

    width: fit-content;
    padding: 7px 11px;

    color: var(--color-text);
    background: rgba(13, 15, 18, 0.72);

    border: 1px solid var(--color-border);
    border-radius: 999px;

    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.visual-content {
    position: relative;
    z-index: 1;
}

.visual-content p {
    margin-bottom: 8px;

    color: var(--color-text);

    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
}

.visual-content span {
    color: var(--color-text-muted);

    font-size: 0.92rem;
    line-height: 1.5;
}


/* =========================================================
   9. KOMPETENZKARTEN
   ========================================================= */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.expertise-card {
    min-height: 235px;
    padding: 32px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
}

.expertise-card h3 {
    font-size: 1.45rem;
}

.expertise-card p {
    margin-bottom: 0;

    font-size: 1rem;
}

.expertise-number {
    display: block;
    margin-bottom: 48px;

    color: var(--color-accent);

    font-size: 0.82rem;
    font-weight: 780;
}


/* =========================================================
   10. TRADING-LAB-VORSCHAU
   ========================================================= */

.trading-preview {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(380px, 1.2fr);

    align-items: center;
    gap: clamp(50px, 6vw, 90px);
}

.lane-preview {
    padding: 28px;

    background: var(--color-surface-dark);
    border: 1px solid rgba(120, 214, 163, 0.26);
    border-radius: var(--radius-medium);

    font-family: var(--font-mono);
}

.lane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 18px;
    margin-bottom: 18px;

    border-bottom: 1px solid var(--color-border);

    font-size: 0.9rem;
}

.status-dot {
    color: var(--color-success);
}

.status-dot::before {
    content: "";

    display: inline-block;

    width: 8px;
    height: 8px;
    margin-right: 7px;

    background: var(--color-success);
    border-radius: 50%;
}

.lane-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    margin: 0;
}

.lane-data div {
    padding: 15px;

    background: rgba(255, 255, 255, 0.025);
    border-radius: var(--radius-small);
}

.lane-data dt {
    margin-bottom: 6px;

    color: var(--color-text-muted);

    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.lane-data dd {
    margin: 0;

    color: var(--color-text);

    font-size: 0.92rem;
}


/* =========================================================
   11. ABOUT- UND KONTAKTBEREICH
   ========================================================= */

.about-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 90px;
}

.about-copy {
    font-size: 1.08rem;
    line-height: 1.75;
}


/* Heart-of-Ash-Hero */
.heart-hero-figure {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
}

.heart-hero-figure > a {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.heart-hero-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.heart-hero-figure figcaption {
    padding: 13px 16px;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.project-media-heart-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.project-card:hover .project-media-heart-image { transform: scale(1.025); }
.project-media-heart::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,15,18,.08), rgba(13,15,18,.62));
    pointer-events: none;
}
.project-media-heart .project-status { z-index: 2; }

/* =========================================================
   RESPONSIVE STARTSEITE
   ========================================================= */

@media (min-width: 1200px) {
    .hero-grid {
        grid-template-columns:
            minmax(0, 1.04fr)
            minmax(500px, 0.78fr);

        align-items: start;
        gap: clamp(48px, 5vw, 78px);
    }

    .hero-content h1 {
        max-width: 880px;

        font-size: clamp(3.9rem, 4.6vw, 4.8rem);
        line-height: 1.02;
        letter-spacing: -0.05em;
    }

    .hero-visual {
        width: 100%;
        max-width: 620px;

        margin-top: clamp(88px, 7vw, 116px);

        justify-self: end;
    }
}

@media (max-width: 1180px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
        gap: 40px;
    }
    .hero-content h1 { font-size: clamp(3.5rem, 5.8vw, 4.9rem); }
    .hero-visual { max-width: 520px; }
    .about-grid { gap: 60px; }
}

@media (max-width: 980px) {
    .hero-grid, .trading-preview, .about-grid { grid-template-columns: 1fr; }
    .hero-content h1 { max-width: 900px; }
    .hero-visual { width: min(100%, 820px); max-width: none; justify-self: start; }
    .expertise-grid { grid-template-columns: 1fr; }
    .expertise-card { min-height: auto; }
    .expertise-number { margin-bottom: 34px; }
}

@media (max-width: 760px) {
    .hero { padding-top: 52px; }
    .hero-content h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); line-height: .99; }
    .hero-description { font-size: 1rem; }
    .lane-header { align-items: flex-start; flex-direction: column; }
    .lane-data { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .hero-facts { display: grid; gap: 18px; }
    .expertise-card { padding: 22px; }
}