/* =============================================================
   round360 | portfolio.css  –  Präsentations-Layout
   Kein Footer, keine Nav – nur Content mit Blue Glow
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --bg:        #090f1e;
    --bg-card:   #0d1a30;
    --border:    rgba(255,255,255,0.08);
    --blue:      #3b82f6;
    --blue-dk:   #2563eb;
    --blue-glow: rgba(59, 130, 246, 0.15);
    --muted:     #6b89a8;
    --light:     #b8cee4;
    --font:      'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: #fff;
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── Animated Orb Background ────────────────────────────────── */
.orb-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.20;
}
.orb-1 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, #3b82f6, #1d4ed8);
    top: -200px; left: -180px;
    animation: orbFloat1 12s ease-in-out infinite;
}
.orb-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #8b5cf6, #6d28d9);
    bottom: -120px; right: -100px;
    animation: orbFloat2 15s ease-in-out infinite;
}
.orb-3 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, #06b6d4, #0284c7);
    top: 45%; left: 55%;
    animation: orbFloat3 10s ease-in-out infinite;
}
.orb-4 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, #3b82f6, transparent);
    top: 25%; right: 18%;
    animation: orbFloat1 8s ease-in-out infinite reverse;
}
@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%     { transform: translate(40px,-50px) scale(1.08); }
    70%     { transform: translate(-30px,30px) scale(0.94); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    35%     { transform: translate(-50px,40px) scale(1.1); }
    65%     { transform: translate(30px,-30px) scale(0.92); }
}
@keyframes orbFloat3 {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-40px,-40px) scale(1.15); }
}

/* ── Top Bar ─────────────────────────────────────────────────── */
.pf-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    background: rgba(9, 15, 30, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Inner – gleiche Breite wie Content-Grid */
.pf-topbar-inner {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem;
}
/* Detail-Seiten: max-width passend zu .pf-detail */
.pf-topbar-inner--detail {
    max-width: 1100px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Logo → Hauptwebsite */
.pf-logo {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    font-style: italic;
    color: #fff;
    line-height: 1;
}
.pf-logo span { color: var(--blue); }

/* Home-Button → Portfolio-Übersicht */
.pf-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.35);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blue);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pf-home-btn:hover {
    background: rgba(59,130,246,0.22);
    border-color: var(--blue);
    color: #fff;
}
.pf-home-btn svg {
    width: 14px; height: 14px;
    display: inline-block;
}

/* ── Page Wrapper ────────────────────────────────────────────── */
.pf-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding-top: 72px; /* topbar height */
}

/* ── Overview Grid ───────────────────────────────────────────── */
.pf-overview {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

.pf-overview-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.pf-overview-header .pf-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--blue);
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    margin-bottom: 1.25rem;
}
.pf-overview-header h1 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 0.9rem;
}
.pf-overview-header h1 span { color: var(--blue); }
.pf-overview-header p {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 520px;
    margin: 0 auto;
    font-weight: 300;
}

/* Grid der 9 Service-Karten */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
@media (max-width: 900px) {
    .pf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-overview { padding: 2rem 1.25rem 4rem; }
}

/* Einzelne Service-Karte */
.pf-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.1rem;
    padding: 2rem 1.75rem;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Shimmer top line */
.pf-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.pf-card:hover {
    transform: translateY(-6px);
    border-color: rgba(59,130,246,0.4);
    box-shadow:
        0 0 0 1px rgba(59,130,246,0.25),
        0 0 32px rgba(59,130,246,0.12),
        0 20px 50px rgba(0,0,0,0.5);
}
.pf-card:hover::before { opacity: 1; }

.pf-card-icon {
    width: 3rem; height: 3rem;
    background: rgba(59,130,246,0.12);
    color: var(--blue);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s;
}
.pf-card:hover .pf-card-icon {
    background: rgba(59,130,246,0.22);
}
.pf-card-icon svg { width: 22px; height: 22px; }

.pf-card-num {
    position: absolute;
    top: 1.25rem; right: 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(59,130,246,0.4);
}

.pf-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}
.pf-card p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
}
.pf-card-arrow {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blue);
    margin-top: 0.25rem;
    transition: gap 0.2s;
}
.pf-card:hover .pf-card-arrow { gap: 0.7rem; }
.pf-card-arrow svg { width: 14px; height: 14px; }


/* ══════════════════════════════════════════════════════════════
   DETAIL PAGE
══════════════════════════════════════════════════════════════ */
.pf-detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem 6rem;
}
@media (max-width: 560px) {
    .pf-detail { padding: 2rem 1.25rem 4rem; }
}

/* Breadcrumb */
.pf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 2.5rem;
}
.pf-breadcrumb a { color: var(--blue); transition: color 0.2s; }
.pf-breadcrumb a:hover { color: #fff; }
.pf-breadcrumb svg { width: 12px; height: 12px; opacity: 0.5; }

/* Hero Block */
.pf-detail-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.pf-detail-icon {
    width: 4.5rem; height: 4.5rem;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blue);
    box-shadow: 0 0 24px rgba(59,130,246,0.18);
}
.pf-detail-icon svg { width: 28px; height: 28px; }

.pf-detail-titles .pf-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--blue);
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 50px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
}
.pf-detail-titles h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
}
.pf-detail-titles h1 span { color: var(--blue); }

/* Divider */
.pf-divider {
    width: 3rem;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
    margin: 2rem 0;
    box-shadow: 0 0 12px rgba(59,130,246,0.5);
}

/* Lead text */
.pf-lead {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--light);
    font-weight: 300;
    line-height: 1.75;
    max-width: 780px;
    margin-bottom: 3rem;
}

/* Content columns */
.pf-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (max-width: 680px) {
    .pf-content-grid { grid-template-columns: 1fr; }
    .pf-detail-hero { flex-direction: column; }
}

.pf-glass-block {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
}
.pf-glass-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5), transparent);
}
.pf-glass-block h3 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--blue);
    margin-bottom: 1rem;
}
.pf-glass-block ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.pf-glass-block ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.55;
}
.pf-glass-block ul li::before {
    content: '';
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px rgba(59,130,246,0.6);
    margin-top: 0.45em;
}
.pf-glass-block p {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.7;
}

/* CTA Block */
.pf-cta-block {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
}
.pf-cta-block::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 65%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pf-cta-block h2 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 0.75rem;
    position: relative;
}
.pf-cta-block p {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 1.75rem;
    position: relative;
}
.pf-cta-btn {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: var(--blue);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 8px;
    transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
    position: relative;
}
.pf-cta-btn:hover {
    background: var(--blue-dk);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(59,130,246,0.4);
}