/* ============================================================
   ardda.de · Öffentliche Webseiten-Atmosphäre (v1)
   Bringt den hellen, bunten Look auf ALLE öffentlichen Seiten
   (Suche, Firmen-Profile, Jobs, Login/Registrieren).
   Wird in header-original eingebunden → Dashboards bleiben unberührt.
   Behutsam: legt Atmosphäre + Politur drüber, zerstört keine Layouts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --web-c-coral:   #ff5a5f;
    --web-c-tangerine:#ff8a3d;
    --web-c-sun:     #ffc24b;
    --web-c-mint:    #2ec9a6;
    --web-c-sky:     #3da5ff;
    --web-c-violet:  #8b5cf6;
    --web-c-pink:    #ff5fa2;
    --web-grad-brand: linear-gradient(100deg, #ff5a5f, #ff8a3d 55%, #ffc24b);
    --web-ink: #1a1726;
    --web-ink-soft: #555067;
    --web-line: #efe9f3;
    --web-shadow: 0 18px 40px -22px rgba(80,40,120,.28);
    --web-shadow-pop: 0 26px 60px -26px rgba(80,40,120,.40);
}

/* === Body-Hintergrund: hell mit sanftem animiertem Schimmer ===
   Wir setzen es auf body, ABER nur wenn NICHT die Startseite (die hat ihr eigenes).
   Behutsam: nur Hintergrund + Schrift, keine Layout-Eingriffe. */
body:not(.home-bunt) {
    background:
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255,180,162,.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(185,160,255,.16), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(127,231,207,.12), transparent 60%),
        #fffdfa;
    background-attachment: fixed;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--web-ink);
}

/* Überschriften in der klaren, seriösen Schrift (nur öffentliche Seiten) */
body:not(.home-bunt) h1,
body:not(.home-bunt) h2 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* === Karten aufhübschen (Firmen, Jobs, etc.) === */
body:not(.home-bunt) .company-card,
body:not(.home-bunt) .job-card {
    border-radius: 18px !important;
    border: 1px solid var(--web-line) !important;
    box-shadow: var(--web-shadow) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    background: #fff !important;
}
body:not(.home-bunt) .company-card:hover,
body:not(.home-bunt) .job-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--web-shadow-pop) !important;
}

/* Firmen-Logo-Platzhalter bunt */
body:not(.home-bunt) .logo-placeholder {
    background: var(--web-grad-brand) !important;
    color: #fff !important;
    border-radius: 16px !important;
}

/* === Buttons === */
body:not(.home-bunt) .btn-primary {
    background: var(--web-grad-brand) !important;
    border: none !important;
    border-radius: 100px !important;
    box-shadow: 0 12px 26px -12px rgba(255,90,95,.55) !important;
    transition: transform .18s, box-shadow .18s !important;
}
body:not(.home-bunt) .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 36px -12px rgba(255,90,95,.65) !important;
}

/* === Such-Header / Seiten-Header etwas Atmosphäre geben === */
body:not(.home-bunt) .search-header,
body:not(.home-bunt) .page-hero {
    position: relative;
}

/* === Schwebende Deko-Formen für öffentliche Seiten === */
.web-ambient {
    position: fixed; pointer-events: none; z-index: -1; border-radius: 50%;
    filter: blur(40px); opacity: .35;
    animation: webFloat 16s ease-in-out infinite;
}
.web-ambient.wa1 { width: 340px; height: 340px; background: radial-gradient(circle, #ffb4a2, transparent 70%); top: -80px; left: -60px; }
.web-ambient.wa2 { width: 380px; height: 380px; background: radial-gradient(circle, #b9a0ff, transparent 70%); bottom: 5%; right: -100px; animation-delay: -6s; }
.web-ambient.wa3 { width: 240px; height: 240px; background: radial-gradient(circle, #7fe7cf, transparent 70%); top: 45%; left: -80px; animation-delay: -10s; }

@keyframes webFloat {
    0%,100% { transform: translateY(0) translateX(0) scale(1); }
    33%     { transform: translateY(-26px) translateX(16px) scale(1.06); }
    66%     { transform: translateY(16px) translateX(-12px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
    .web-ambient { animation: none; }
}

/* ============================================================
   v2 · "Neue Welt im Web" — futuristische Politur für ALLE
   öffentlichen Seiten (nicht Startseite, nicht Dashboards)
   ============================================================ */

/* Feines Zukunfts-Raster über dem hellen Hintergrund */
body:not(.home-bunt) {
    background-image:
        linear-gradient(rgba(139, 92, 246, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, .045) 1px, transparent 1px),
        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(255,180,162,.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(185,160,255,.16), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(127,231,207,.12), transparent 60%);
    background-size: 44px 44px, 44px 44px, auto, auto, auto;
    background-color: #fffdfa;
}

/* Sanfter Auftritt des Seiteninhalts (Kino-Blende) */
@media (prefers-reduced-motion: no-preference) {
    body:not(.home-bunt) .site-main {
        animation: webEnter .55s cubic-bezier(.2, .7, .3, 1) both;
    }
    @keyframes webEnter {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Markierter Text in Markenfarbe */
body:not(.home-bunt) ::selection {
    background: rgba(255, 90, 95, .22);
    color: var(--web-ink);
}

/* Moderne, dezente Scrollbar */
body:not(.home-bunt)::-webkit-scrollbar { width: 10px; }
body:not(.home-bunt)::-webkit-scrollbar-track { background: transparent; }
body:not(.home-bunt)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ffb4a2, #b9a0ff);
    border-radius: 100px;
    border: 2px solid #fffdfa;
}

/* Eingabefelder: futuristischer Fokus-Ring statt Standard-Outline */
body:not(.home-bunt) input[type="text"]:focus,
body:not(.home-bunt) input[type="search"]:focus,
body:not(.home-bunt) input[type="email"]:focus,
body:not(.home-bunt) input[type="password"]:focus,
body:not(.home-bunt) input[type="number"]:focus,
body:not(.home-bunt) input[type="tel"]:focus,
body:not(.home-bunt) select:focus,
body:not(.home-bunt) textarea:focus {
    outline: none !important;
    border-color: var(--web-c-violet) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .14), 0 8px 24px -12px rgba(139, 92, 246, .35) !important;
    transition: box-shadow .2s, border-color .2s;
}

/* Sekundär-Buttons ebenfalls modernisieren */
body:not(.home-bunt) .btn-secondary {
    border-radius: 100px !important;
    transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
body:not(.home-bunt) .btn-secondary:hover {
    transform: translateY(-2px) !important;
    border-color: var(--web-c-violet) !important;
    box-shadow: 0 12px 26px -14px rgba(139, 92, 246, .5) !important;
}

/* Glanz-Sweep über Primär-Buttons (wie Licht, das über Metall läuft) */
body:not(.home-bunt) .btn-primary {
    position: relative !important;
    overflow: hidden !important;
}
body:not(.home-bunt) .btn-primary::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 40%;
    left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}
body:not(.home-bunt) .btn-primary:hover::after { left: 130%; }

/* Überschriften bekommen einen dezenten Verlaufs-Unterstrich-Akzent */
body:not(.home-bunt) .section-title,
body:not(.home-bunt) .page-title {
    position: relative;
}

/* Tabellen & Panels weicher */
body:not(.home-bunt) table {
    border-radius: 14px;
    overflow: hidden;
}

/* Flash-Meldungen als Glas-Kapseln */
body:not(.home-bunt) .flash {
    border-radius: 16px !important;
    backdrop-filter: blur(8px);
    box-shadow: var(--web-shadow) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
}