/* ============================================================
   Self-hosted Inter Variable Font (DSGVO-konform)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-german.woff2') format('woff2');
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0131,
    U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.40%;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Inter-fallback', system-ui, -apple-system, sans-serif; }

/* ============================================================
   Scroll Progress Bar (CSS-only)
   ============================================================ */
@supports (animation-timeline: scroll()) {
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
    background: linear-gradient(90deg, #3a89ff, #a78bfa);
    width: 100%; transform-origin: left; transform: scaleX(0);
    animation: progress linear forwards; animation-timeline: scroll(root);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ============================================================
   Noise/Grain Texture Overlay
   ============================================================ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
section, header, nav, footer, main, #progress-bar { position: relative; z-index: 1; }

/* ============================================================
   Text gradient
   ============================================================ */
.text-gradient {
    background: linear-gradient(135deg, #3a89ff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   Glass morphism card (upgraded with blue glow)
   ============================================================ */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(58, 137, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(58, 137, 255, 0.1), 0 8px 32px rgba(58, 137, 255, 0.12);
}

/* ============================================================
   Fade-in animation
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }

/* CSS-only scroll reveal for Chromium 115+ */
@supports (animation-timeline: view()) {
  .fade-in {
    animation: reveal-up 0.7s ease forwards;
    animation-timeline: view(); animation-range: entry 0% entry 30%;
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   Prose dark overrides
   ============================================================ */
.prose-dark { color: #d1d5db; line-height: 1.8; }
.prose-dark h1, .prose-dark h2, .prose-dark h3, .prose-dark h4 {
    color: #f3f4f6; font-weight: 700; margin-top: 2em; margin-bottom: 0.75em;
}
.prose-dark h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 0.5em;
}
.prose-dark h3 { font-size: 1.25rem; }
.prose-dark p { margin-bottom: 1.25em; }
.prose-dark a {
    color: #3a89ff; text-decoration: underline;
    text-underline-offset: 2px; transition: color 0.2s ease;
}
.prose-dark a:hover { color: #a78bfa; }
.prose-dark ul, .prose-dark ol { margin-bottom: 1.25em; padding-left: 1.5em; }
.prose-dark ul { list-style-type: disc; }
.prose-dark ol { list-style-type: decimal; }
.prose-dark li { margin-bottom: 0.5em; }
.prose-dark blockquote {
    border-left: 3px solid #3a89ff; padding-left: 1em;
    margin: 1.5em 0; color: #9ca3af; font-style: italic;
}
.prose-dark strong { color: #f3f4f6; font-weight: 600; }
.prose-dark em { color: #d1d5db; }
.prose-dark hr { border-color: rgba(255, 255, 255, 0.08); margin: 2em 0; }
.prose-dark img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose-dark table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose-dark th, .prose-dark td {
    border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.75em 1em; text-align: left;
}
.prose-dark th { background: rgba(255, 255, 255, 0.05); color: #f3f4f6; font-weight: 600; }

/* Hero gradient background */
.hero-gradient {
    background: radial-gradient(ellipse at 50% 0%, rgba(58, 137, 255, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 50%, rgba(167, 139, 250, 0.05) 0%, transparent 50%);
}

/* Tag pill */
.tag-pill {
    display: inline-block; padding: 0.25rem 0.75rem;
    font-size: 0.75rem; border-radius: 9999px;
    background: rgba(58, 137, 255, 0.1); color: #3a89ff;
    border: 1px solid rgba(58, 137, 255, 0.2); transition: all 0.2s ease;
}
.tag-pill:hover { background: rgba(58, 137, 255, 0.2); border-color: rgba(58, 137, 255, 0.4); }

/* Form input styles */
.form-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem; padding: 0.75rem 1rem;
    color: #f3f4f6; transition: border-color 0.2s ease; width: 100%;
}
.form-input:focus {
    border-color: #3a89ff; outline: none;
    box-shadow: 0 0 0 3px rgba(58, 137, 255, 0.1);
}
.form-input::placeholder { color: #6b7280; }

/* ============================================================
   Focus styles (WCAG 2.2)
   ============================================================ */
:focus-visible { outline: 3px solid #3a89ff; outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

::selection { background: rgba(58, 137, 255, 0.3); color: #fff; }

/* ============================================================
   Reduced Motion (Accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}