/* =========================================================
   RESET & VARIABLES
========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --tile:     152px;
    --gap:      10px;
    --cols:     2;
    --radius:   18px;
    --glass:    rgba(255, 255, 255, 0.09);
    --gborder:  rgba(255, 255, 255, 0.13);
    --gsheen:   rgba(255, 255, 255, 0.08);
    --text:     rgba(255, 255, 255, 0.92);
    --muted:    rgba(255, 255, 255, 0.48);
}

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background: #060610;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================================
   ANIMATED BACKGROUND
========================================================= */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.bb1 {
    width: 70vw; height: 70vw;
    background: radial-gradient(circle, #2d1b6988 0%, transparent 70%);
    top: -25%; left: -20%;
    animation: drift1 24s ease-in-out infinite alternate;
}

.bb2 {
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, #0c2a4a88 0%, transparent 70%);
    bottom: -20%; right: -12%;
    animation: drift2 30s ease-in-out infinite alternate;
}

.bb3 {
    width: 45vw; height: 45vw;
    background: radial-gradient(circle, #1a0a3066 0%, transparent 70%);
    top: 45%; left: 35%;
    animation: drift3 20s ease-in-out infinite alternate;
}

@keyframes drift1 { to { transform: translate(18%, 22%) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-14%, -18%) scale(1.15); } }
@keyframes drift3 { to { transform: translate(-22%, 18%) scale(0.85); } }

/* =========================================================
   TILE GRID  — mobile-first: 2 cols, desktop: 4 cols
========================================================= */
.grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Mobile: 2 Spalten füllen die volle Breite */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: var(--tile);
    width: 100%;
    gap: var(--gap);
    padding: 12px 4px 36px;
}

/* Very small screens (< 340 px) */
@media (max-width: 339px) {
    :root { --tile: 120px; --gap: 8px; }
}

/* Medium phones */
@media (min-width: 380px) {
    :root { --tile: 136px; --gap: 10px; }
}

/* Tablet / Desktop → 4 columns */
@media (min-width: 768px) {
    :root { --tile: 162px; --gap: 14px; --cols: 4; }
    .grid {
        /* Desktop: feste Kachelgröße, zentriert */
        width: auto;
        grid-template-columns: repeat(4, var(--tile));
        padding: 48px 24px 80px;
    }
    /* Tag-Zeilenumbruch-Elemente auf Desktop nicht nötig */
}

/* FamWake auf Mobile: 1 Reihe, Bild ohne Beschnitt */
@media (max-width: 767px) {
    /* Kacheln auf Mobile deutlich heller */
    :root {
        --glass:   rgba(255, 255, 255, 0.13);
        --gborder: rgba(255, 255, 255, 0.20);
    }

    /* ── Mobile Performance: Alle teuren GPU-Effekte deaktiviert ──
       backdrop-filter, Animationen und ::before-Blob verursachen
       Render-Artefakte (Text/Icons verschwinden) beim Scrollen.   */
    .tile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.13) !important;
        will-change: auto;
        /* Keine Entrance-Animation auf Mobile */
        animation: none !important;
        opacity: 1 !important;
        transform: none;
        filter: brightness(1.0);
        /* Kein box-shadow Blur */
        box-shadow: none;
    }
    /* Accent-Farbe statisch (kein Blur, kein Morph) — GPU-safe */
    .tile::before {
        display: block !important;
        animation: none !important;
        filter: none !important;     /* kein blur → kein GPU-Layer */
        opacity: 0.3 !important;
        inset: 0;                    /* genau Kachel-Größe, kein Overflow */
    }
    /* body-Blob bleibt aus */
    body::before { display: none !important; }

    /* Höhere Spezifität als .sr2 — verhindert 2-Reihen-Override */
    .tile-famwake.sr2 { grid-row: span 1; }

    /* FamWake Bild */
    .tile-famwake .famwake-bg img {
        object-fit: cover;
        object-position: center center;
    }
}

/* Span helpers */
.s2    { grid-column: span 2; }
.sr2   { grid-row:    span 2; }
/* Volle Gitter-Breite (alle Spalten) */
.s-full { grid-column: 1 / -1; }

/* =========================================================
   BASE TILE
========================================================= */
.tile {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(18px) saturate(1.8);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    border: 1px solid var(--gborder);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    /* Kein Graustufen-Filter — Akzentfarben immer subtil sichtbar */
    filter: brightness(1.0);
    transition:
        filter        0.45s ease,
        transform     0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow    0.45s ease,
        border-color  0.45s ease,
        background    0.45s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, filter;
    /* Entrance animation – set per tile via animation-delay */
    animation: tileIn 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes tileIn {
    from { opacity: 0; transform: translateY(24px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* Staggered entrance delays */
.tile:nth-child(1)  { animation-delay: 0.04s; }
.tile:nth-child(2)  { animation-delay: 0.10s; }
.tile:nth-child(3)  { animation-delay: 0.15s; }
.tile:nth-child(4)  { animation-delay: 0.20s; }
.tile:nth-child(5)  { animation-delay: 0.25s; }
.tile:nth-child(6)  { animation-delay: 0.30s; }
.tile:nth-child(7)  { animation-delay: 0.35s; }
.tile:nth-child(8)  { animation-delay: 0.40s; }
.tile:nth-child(9)  { animation-delay: 0.45s; }
.tile:nth-child(10) { animation-delay: 0.50s; }
.tile:nth-child(11) { animation-delay: 0.55s; }
.tile:nth-child(12) { animation-delay: 0.60s; }
.tile:nth-child(13) { animation-delay: 0.65s; }

/* =========================================================
   LIQUID BLOB  (::before) — animierter Farb-Nebel
========================================================= */
.tile::before {
    content: '';
    position: absolute;
    inset: -35%;
    /* Accent-Farbe per CSS-Variable, fallback transparent */
    background: radial-gradient(circle at 50% 50%, var(--accent, #fff2) 0%, transparent 55%);
    opacity: 0.2;
    border-radius: 65% 35% 45% 55% / 55% 45% 55% 45%;
    filter: blur(28px);
    /* Sanfte Morph-Animation läuft immer; Opacity wird per Hover gesteuert */
    animation: blobMorph 8s ease-in-out infinite;
    pointer-events: none;
    transition: opacity 0.55s ease;
    z-index: 0;
}

@keyframes blobMorph {
    0%, 100% {
        border-radius: 65% 35% 45% 55% / 55% 45% 55% 45%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        border-radius: 35% 65% 55% 45% / 45% 55% 45% 55%;
        transform: rotate(90deg) scale(1.12);
    }
    50% {
        border-radius: 55% 45% 35% 65% / 65% 35% 65% 35%;
        transform: rotate(180deg) scale(0.9);
    }
    75% {
        border-radius: 45% 55% 65% 35% / 35% 65% 35% 65%;
        transform: rotate(270deg) scale(1.06);
    }
}

/* =========================================================
   GLOSS SHEEN  (::after)
========================================================= */
.tile::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(to bottom, var(--gsheen) 0%, transparent 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    z-index: 2;
}

/* =========================================================
   HOVER / FOCUS STATE — nur auf Maus-Geräten (kein Sticky-Hover auf Touch)
========================================================= */
@media (hover: hover) and (pointer: fine) {
    .tile:hover {
        filter: grayscale(0) brightness(1);
        transform: translateY(-7px) scale(1.03);
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.55),
            0  0  0 1px rgba(255, 255, 255, 0.08),
            0  0 50px var(--accent-glow, transparent);
        outline: none;
    }
    .tile:hover::before { opacity: 0.75; }
    .tile:hover .t-icon  {
        color: var(--accent, white);
        transform: scale(1.18);
    }
    .tile:hover .t-label { color: rgba(255, 255, 255, 0.62); }
    .tile-famwake:hover .famwake-bg img { opacity: 0.9; }
}

/* Focus-Visible bleibt immer (Tastaturnavigation) */
.tile:focus-visible {
    filter: grayscale(0) brightness(1);
    transform: translateY(-7px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px var(--accent, white);
    outline: none;
}
.tile:focus-visible::before { opacity: 0.75; }
.tile:focus-visible .t-icon  {
    color: var(--accent, white);
    transform: scale(1.18);
}

.tile:active {
    transform: translateY(-2px) scale(1.01);
    transition-duration: 0.12s;
}

/* =========================================================
   SHARED TILE CONTENT
========================================================= */
.t-icon {
    position: absolute;
    top: 14px; right: 14px;
    width: 28px; height: 28px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.4s, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 3;
}
.t-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* icon-hover nur auf Maus (im media query oben); focus-visible separat gesetzt */

.t-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
    position: relative; z-index: 3;
    transition: color 0.3s;
    /* Ausgeblendet auf Wunsch */
    display: none;
}
/* .tile:hover .t-label handled in hover media query above */

.t-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    position: relative; z-index: 3;
}

.t-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 3px;
    position: relative; z-index: 3;
}

/* =========================================================
   COLOUR THEMES — jede Kachel hat eine Akzentfarbe
========================================================= */
.c-profile   { --accent: #7c3aed; --accent-glow: rgba(124, 58,  237, 0.28); }
.c-email     { --accent: #10b981; --accent-glow: rgba(16,  185, 129, 0.28); }
.c-phone     { --accent: #3b82f6; --accent-glow: rgba(59,  130, 246, 0.28); }
.c-location  { --accent: #f59e0b; --accent-glow: rgba(245, 158,  11, 0.28); }
.c-linkedin  { --accent: #0A66C2; --accent-glow: rgba(10,  102, 194, 0.30); }
.c-facebook  { --accent: #1877F2; --accent-glow: rgba(24,  119, 242, 0.30); }
.c-instagram { --accent: #E1306C; --accent-glow: rgba(225,  48, 108, 0.30); }
.c-bluesky   { --accent: #0085FF; --accent-glow: rgba(0,   133, 255, 0.30); }
.c-twitter   { --accent: #1DA1F2; --accent-glow: rgba(29,  161, 242, 0.30); }
.c-github    { --accent: #e0e0e0; --accent-glow: rgba(220, 220, 220, 0.20); }
.c-paypal    { --accent: #009cde; --accent-glow: rgba(0,  156, 222, 0.30); }
.c-famwake   { --accent: #f97316; --accent-glow: rgba(249, 115,  22, 0.30); }
.c-famweb    { --accent: #8b5cf6; --accent-glow: rgba(139,  92, 246, 0.30); }

/* =========================================================
   PROFILE KACHEL  (2×2)
========================================================= */
.tile-profile {
    justify-content: flex-end;
    padding: 20px;
    cursor: default;
    /* Profil-Kachel: kein Graustufen-Filter, immer klar */
    filter: none !important;
}

.profile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Fallback-Gradient sichtbar wenn kein Foto vorhanden */
    background: linear-gradient(145deg, #1a0e2e 0%, #0c1830 55%, #090916 100%);
}

/* Fallback-Initialen — sichtbar, wenn kein Foto */
.profile-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(52px, 12vw, 72px);
    font-weight: 800;
    letter-spacing: -3px;
    color: rgba(255, 255, 255, 0.09);
    z-index: 1;
}

.profile-bg img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.5s ease;
}
/* JS setzt opacity, wenn geladen */
.profile-bg img.loaded { opacity: 1; }

.profile-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.90) 0%,
        rgba(0, 0, 0, 0.45) 38%,
        transparent        68%
    );
    z-index: 3;
}

.profile-name {
    position: relative; z-index: 4;
    font-family: 'Space Grotesk', sans-serif;
    /* Größer auf Mobile — clamp(min, preferred, max) */
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8);
    /* Abstand zu den Tags darüber */
    margin-top: 10px;
}

.profile-loc {
    position: relative; z-index: 4;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Stichwort-Chips unter dem Namen */
.profile-tags {
    position: relative; z-index: 4;
    display: flex;
    flex-direction: column;   /* jeder Tag eine eigene Zeile */
    align-items: flex-start;
    gap: 5px;
    margin-top: 8px;
}


.profile-tags span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 3px 7px;
    backdrop-filter: blur(4px);
}

/* =========================================================
   FAMWAKE HINTERGRUNDBILD
========================================================= */
.famwake-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius);
    z-index: 0;
}

.famwake-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: left top;
    opacity: 0.38;
    transition: opacity 0.4s ease;
}

/* FamWake-Bild voll hell — Glow kommt von der Hover box-shadow */
.tile-famwake {
    filter: none !important;
}
.tile-famwake .famwake-bg img { opacity: 0.75; }
/* .tile-famwake:hover handled in hover media query above */

.famwake-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(6, 3, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        transparent         100%
    );
    z-index: 1;
}
/* Gradient entfernen da kein Text mehr — Bild soll voll sichtbar sein */
.tile-famwake .famwake-gradient { display: none; }

/* =========================================================
   LEERE FÜLLKACHELN
========================================================= */
.tile-empty {
    pointer-events: none;
    animation: none;
    filter: none;
    opacity: 0.35;
}
.tile-empty::before,
.tile-empty::after { display: none; }

/* =========================================================
   FOOTER
========================================================= */
.page-footer {
    position: relative; z-index: 1;
    padding: 20px 16px 36px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}