/* ============================================================
   Kontakt-Seite — Layout nach dem Ursprungs-Design (Link-Hub):
   Back-Nav, Profilkopf, vertikale Kartenliste mit Icon-Box.
   Farben & Animationen kommen aus dem Site-Schema (../styles.css).
   ============================================================ */

.kontakt-page .site-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--gutter) var(--space-lg);
    min-height: 100vh;
    min-height: 100svh;
}

/* ---------- Zurück-Navigation (oben links, wie im Ursprung) ---------- */
.back-nav {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    /* Über .site-main (z=1), sonst fängt main die Klicks ab */
    z-index: 10;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink-muted);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-chip);
    transition:
        color var(--dur-fast) var(--ease-out-expo),
        border-color var(--dur-fast) var(--ease-out-expo),
        transform var(--dur-fast) var(--ease-out-expo);
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--ink);
    border-color: rgba(77, 149, 255, .45);
    transform: translateX(-2px);
}

/* ---------- Profilkopf ---------- */
.profile-header {
    text-align: center;
    margin-block: var(--space-xl) var(--space-lg);
}

.profile-img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(229, 240, 255, .25);
    box-shadow:
        0 0 0 4px rgba(42, 93, 168, .25),
        0 12px 32px rgba(4, 10, 20, .5);
    margin-bottom: var(--space-sm);
}

.profile-header h1 {
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.profile-header .tagline {
    font-size: var(--step--1);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

/* ---------- Kartenliste (Ursprung: schmale Spalte, volle Breite) ---------- */
.links-container {
    width: 100%;
    max-width: 27.5rem;                  /* ~440px wie im Ursprung */
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.link-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--ink);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1.25rem;
    overflow: hidden;                    /* für den Sheen-Sweep */
    isolation: isolate;
    box-shadow:
        inset 0 1px 0 rgba(229, 240, 255, .06),
        0 6px 18px rgba(4, 10, 20, .35);
    transition:
        transform var(--dur-fast) var(--ease-out-expo),
        border-color var(--dur-fast) var(--ease-out-expo),
        background-color var(--dur-fast) var(--ease-out-expo),
        box-shadow var(--dur-fast) var(--ease-out-expo);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .link-card {
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
}

/* Sheen-Sweep aus dem Site-Schema, nur bei Hover/Fokus */
.link-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(229, 240, 255, .10) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    pointer-events: none;
}

@media (hover: hover) {
    .link-card:hover,
    .link-card:focus-visible {
        transform: translateY(-2px) scale(1.015);
        border-color: rgba(77, 149, 255, .45);
        background: rgba(42, 93, 168, .18);
        box-shadow:
            inset 0 1px 0 rgba(229, 240, 255, .08),
            0 12px 28px rgba(4, 10, 20, .45),
            0 8px 30px rgba(77, 149, 255, .22);
    }

    .link-card:hover::after,
    .link-card:focus-visible::after {
        transition: transform var(--dur-sweep) var(--ease-out-expo);
        transform: translateX(120%);
    }
}

.link-card:active {
    transform: translateY(0) scale(0.99);
}

/* ---------- Icon-Box (44px, abgerundet — wie im Ursprung) ---------- */
.icon-box {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: rgba(15, 42, 79, .55);
    border: 1px solid rgba(229, 240, 255, .10);
    border-radius: 0.875rem;
    box-shadow: inset 0 1px 0 rgba(229, 240, 255, .08);
}

.icon-box svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Kartentext ---------- */
.link-info h3 {
    font-size: var(--step-0);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.link-info p {
    font-size: var(--step--1);
    color: var(--ink-muted);
    line-height: 1.35;
}

/* ---------- Fußzeile ---------- */
.kontakt-footer {
    margin-top: auto;
    padding-block: var(--space-lg);
    font-size: var(--step--1);
    color: var(--ink-muted);
    text-align: center;
}

.kontakt-footer a {
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease-out-expo),
                border-color var(--dur-fast) var(--ease-out-expo);
}

.kontakt-footer a:hover,
.kontakt-footer a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .link-card,
    .back-link {
        transition: none;
    }

    .link-card::after {
        display: none;
    }

    .link-card:hover {
        transform: none;
    }
}

/* ---------- Kleine Viewports ---------- */
@media (max-width: 25rem) {
    .link-card {
        padding: var(--space-xs) var(--space-sm);
    }
}