/* ============================================
   SECOOLIO TOOLS – schlanke Basis
   ============================================
   Die Online-Tools zogen bisher das komplette css/style.css (104 KB,
   4590 Regeln) render-blockierend herein und benutzten davon zehn Klassen.
   Das kostet doppelt: einmal die Übertragung, einmal den Style-Recalc,
   der jede der 4590 Regeln gegen jedes Element abgleichen muss. Genau das
   war das „dauert ein bisschen, bis es durchlädt".

   Hier steht nur, was die Tools wirklich brauchen. Inhaltlich identisch
   mit den entsprechenden Blöcken in css/style.css – wer dort etwas an den
   Tokens ändert, muss es hier nachziehen.
   ============================================ */

/* --- Selbst gehostete Schrift (Inter Variable, latin) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-var.woff2') format('woff2');
}

/* --- Design-Tokens (Dark) --- */
:root {
    --primary: #2997ff;
    --primary-dark: #0071e3;
    --accent: #bf5af2;
    --accent-alt: #5e5ce6;
    --bg-dark: #000000;
    --bg-darker: #000000;
    --bg-section: #0a0a0a;
    --bg-card: rgba(28, 28, 30, 0.8);
    --card: rgba(28, 28, 30, 0.8);
    --text: #f5f5f7;
    --text-primary: #f5f5f7;
    --text-muted: #a1a1a6;
    --text-secondary: #b0b0b5;
    --white: #f5f5f7;
    --border: rgba(255, 255, 255, 0.08);
    --transition: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-spring: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --nav-bg: rgba(0, 0, 0, 0.72);
    --nav-bg-scroll: rgba(0, 0, 0, 0.88);
    --sidebar-bg: rgba(0, 0, 0, 0.92);
    --radius: 20px;
    --radius-sm: 12px;
    --radius-full: 980px;
    --glow-primary: rgba(41, 151, 255, 0.15);
    --glow-accent: rgba(191, 90, 242, 0.15);
}

/* --- Design-Tokens (Light) --- */
[data-theme="light"] {
    --primary: #0071e3;
    --primary-dark: #0077ed;
    --bg-dark: #ffffff;
    --bg-darker: #fbfbfd;
    --bg-section: #f5f5f7;
    --bg-card: rgba(255, 255, 255, 0.8);
    --card: rgba(255, 255, 255, 0.8);
    --text: #1d1d1f;
    --text-primary: #1d1d1f;
    --text-muted: #515154;
    --text-secondary: #6e6e73;
    --white: #1d1d1f;
    --border: rgba(0, 0, 0, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.72);
    --nav-bg-scroll: rgba(255, 255, 255, 0.88);
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --glow-primary: rgba(0, 113, 227, 0.08);
    --glow-accent: rgba(191, 90, 242, 0.08);
}

/* --- Reset & Basis --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* `el.hidden = true` versteckt nur, solange KEINE Autoren-Regel ein eigenes
   display setzt — die Browser-Regel dafuer ist die schwaechste von allen.
   Jede Klasse mit `display: block` (und davon gibt es in den Werkzeugen
   viele: .cl-field, .bl-field, .pd-field …) hebelt sie aus. Das ist hier
   schon zweimal aufgefallen, beide Male an der Farbwahl unter „Hintergrund
   entfernen", die sichtbar blieb, obwohl sie nichts bewirkte. Eine Regel
   an einer Stelle statt einer Sonderregel je Klasse. */
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text);
    overflow-x: hidden;
    /* dvh statt vh: auf iOS wächst und schrumpft der sichtbare Bereich mit
       der Adressleiste – mit 100vh entsteht darunter ein Streifen, der beim
       Scrollen mitwandert. Der vh-Wert bleibt als Rückfall stehen. */
    min-height: 100vh;
    min-height: 100dvh;
    transition: background 0.6s ease, color 0.6s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Tastaturbedienung sichtbar machen – fehlt in css/style.css komplett. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Partikel-Leinwand --- */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.6s ease;
}
[data-theme="light"] #particleCanvas { opacity: 0.12; }

/* --- Schwebende Leuchtkugeln --- */
.hero-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orbFloat 20s ease-in-out infinite;
    will-change: transform;
}
.hero-orb-1 {
    width: 500px; height: 500px;
    background: var(--glow-primary);
    top: -10%; right: -10%;
    animation-delay: 0s; animation-duration: 18s;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: var(--glow-accent);
    bottom: -10%; left: -10%;
    animation-delay: -5s; animation-duration: 22s;
}
.hero-orb-3 {
    width: 300px; height: 300px;
    background: linear-gradient(135deg, var(--glow-primary), var(--glow-accent));
    top: 40%; left: 50%;
    animation-delay: -10s; animation-duration: 25s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(-30px, -20px) scale(1.05); }
}

/* --- Theme-Umschalter --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    color: var(--text-muted);
    transition: color var(--transition), background var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle .icon-sun { opacity: 0; transform: scale(0.5) rotate(-90deg); }
.theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); }
[data-theme="light"] .theme-toggle { color: #f59e0b; }

@media (hover: hover) and (pointer: fine) {
    .theme-toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
    [data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); }
}
/* Mit dem Finger sind 32 px zu klein (Richtwert der Apple-Richtlinien: 44 px).
   Nur auf Touch vergrößern – am Desktop bleibt die Leiste unverändert. */
@media (pointer: coarse) {
    .theme-toggle { width: 44px; height: 44px; }
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.75rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    transition: transform var(--transition), background var(--transition),
                color var(--transition), box-shadow var(--transition);
    cursor: pointer;
    border: none;
    text-decoration: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary {
    background: var(--primary);
    color: #fff;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    pointer-events: none;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
}
.btn-glow { position: relative; }
.btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% 200%;
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.4s ease;
    animation: gradientShift 4s ease-in-out infinite;
}
.btn-outline {
    background: transparent;
    color: var(--primary);
    position: relative;
}
.btn-outline::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 50%;
    width: 0; height: 1px;
    background: var(--primary);
    transition: width 0.3s ease;
    transform: translateX(-50%);
}

/* :hover nur mit echter Maus. Auf Touch bleibt der Zustand sonst nach dem
   ersten Tippen kleben – inklusive des dauerhaft neu gezeichneten Glühens. */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background: var(--primary-dark);
        transform: scale(1.04);
        box-shadow: 0 4px 20px rgba(41, 151, 255, 0.3);
    }
    .btn-glow:hover::after { opacity: 0.6; }
    .btn-glow:not(:hover)::after {
        animation: gradientShift 4s ease-in-out infinite, glowPulse 3.5s ease-in-out infinite;
    }
    .btn-outline:hover { color: var(--primary-dark); }
    .btn-outline:hover::after { width: 55%; }
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.32; }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Scroll-Reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }