/*
 * theme_002.css — JetBrains-Inspired Dark Design
 * Lädt nach nicepage.css und überschreibt alle Styles
 * --------------------------------------------------------
 * Inspiriert von: jetbrains.com/phpstorm/promo
 *
 * Design-System:
 *   Background:  #16181B (fast schwarz, warm)
 *   Surface:     #1e2024 / #252830
 *   Primär:      #6B57FF (Vibrant Purple)
 *   Akzent 1:    #FF318C (Hot Pink / Magenta)
 *   Akzent 2:    #00E0D6 (Cyan / Teal)
 *   Akzent 3:    #21D789 (Bright Green)
 *   Text:        #FFFFFF / #B4B8BF
 *   Font:        Inter
 */

/* ===================================================
   CUSTOM PROPERTIES
   =================================================== */
:root {
    --jb-bg:        #16181B;
    --jb-surface:   #1e2024;
    --jb-surface2:  #252830;
    --jb-border:    rgba(255, 255, 255, 0.08);
    --jb-purple:    #6B57FF;
    --jb-pink:      #FF318C;
    --jb-cyan:      #00E0D6;
    --jb-green:     #21D789;
    --jb-orange:    #FC6443;
    --jb-text:      #FFFFFF;
    --jb-text-muted:#B4B8BF;
    --jb-text-dim:  #6B7280;
    --jb-radius:    10px;
    --jb-radius-lg: 16px;
    --jb-transition: 0.22s ease;
}

/* ===================================================
   1. GLOBALE BASIS
   =================================================== */
html {
    scroll-behavior: smooth;
    background-color: var(--jb-bg);
}

body.u-body,
body {
    font-family: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--jb-text-muted) !important;
    background-color: var(--jb-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.u-text,
.u-title {
    font-family: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif !important;
    color: var(--jb-text) !important;
    letter-spacing: -0.025em;
}

p, .u-text {
    color: var(--jb-text-muted) !important;
}

a {
    color: var(--jb-cyan);
    text-decoration: none;
    transition: color var(--jb-transition);
}

a:hover {
    color: #ffffff;
}

/* ===================================================
   2. NAVIGATION — Dark Glassmorphism
   =================================================== */
.u-header.u-sticky,
.u-header.u-white,
.u-header {
    background: rgba(22, 24, 27, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid var(--jb-border) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: background var(--jb-transition), box-shadow var(--jb-transition) !important;
}

.u-nav-link,
.u-text-grey-60 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: var(--jb-text-muted) !important;
    transition: color var(--jb-transition) !important;
    border-radius: 6px !important;
}

.u-nav-link:hover,
.u-text-hover-palette-2-base {
    color: var(--jb-text) !important;
    background: rgba(255,255,255,0.06) !important;
}

.u-text-active-palette-1-base {
    color: var(--jb-purple) !important;
}

/* Hamburger-Icon */
.menu-collapse svg rect {
    fill: var(--jb-text-muted);
}

/* ===================================================
   3. SEITENCONTAINER — Dark Background
   =================================================== */
.u-clearfix,
.u-sheet,
section {
    background-color: transparent;
}

/* ===================================================
   4. HERO-SEKTION (Section 1)
   =================================================== */
.u-section-1 {
    position: relative;
    background-color: var(--jb-bg) !important;
    overflow: hidden;
}

/* Hintergrundbild abdunkeln + JetBrains Gradient-Overlay */
.u-section-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 60% 30%, rgba(107, 87, 255, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(255, 49, 140, 0.2) 0%, transparent 60%),
        linear-gradient(180deg, rgba(22, 24, 27, 0.55) 0%, rgba(22, 24, 27, 0.82) 70%, rgba(22, 24, 27, 1) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Dekorativer Glow-Blob oben rechts */
.u-section-1::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(107, 87, 255, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.u-section-1 .u-sheet-1 {
    position: relative;
    z-index: 2;
}

.u-section-1 .u-text-1 {
    font-size: clamp(2.2rem, 5.5vw, 3.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
    color: #ffffff !important;
    /* Gradient-Text-Effekt */
    background: linear-gradient(135deg, #ffffff 30%, #b8b0ff 70%, var(--jb-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.u-section-1 .u-text-2 {
    font-size: clamp(1rem, 2.2vw, 1.2rem) !important;
    font-weight: 400 !important;
    color: var(--jb-text-muted) !important;
    -webkit-text-fill-color: var(--jb-text-muted) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
}

/* ===================================================
   5. SECTION 2 — Subtitle/Tagline (Dark + Cyan Glow)
   =================================================== */
.u-section-2 {
    position: relative;
    background-color: var(--jb-bg) !important;
    overflow: hidden;
}

.u-section-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 30% 50%, rgba(0, 224, 214, 0.14) 0%, transparent 65%),
        linear-gradient(180deg, rgba(22, 24, 27, 0.7) 0%, rgba(22, 24, 27, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.u-section-2 .u-text-1 {
    position: relative;
    z-index: 2;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ===================================================
   6. SECTION 3 — Info-Textbereich (Surface)
   =================================================== */
.u-section-3 {
    background-color: var(--jb-surface) !important;
    border-top: 1px solid var(--jb-border) !important;
    border-bottom: 1px solid var(--jb-border) !important;
    position: relative;
}

.u-section-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 100% at 80% 50%, rgba(107, 87, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.u-section-3 .u-text-1 {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: var(--jb-text-muted) !important;
    -webkit-text-fill-color: var(--jb-text-muted) !important;
}

/* ===================================================
   7. SECTION 4 — Content / Features (Dark)
   =================================================== */
.u-section-4 {
    background-color: var(--jb-bg) !important;
    position: relative;
    overflow: hidden;
}

.u-section-4::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: -150px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(255, 49, 140, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.u-section-4 .u-text-1,
.u-section-4 .u-text-2 {
    color: var(--jb-text-muted) !important;
    -webkit-text-fill-color: var(--jb-text-muted) !important;
}

/* Feature-Images mit dunkler Border */
.u-section-4 .u-image-1,
.u-section-4 .u-image-2,
.u-section-4 .u-image-3 {
    border-radius: var(--jb-radius-lg) !important;
    border: 1px solid var(--jb-border) !important;
    box-shadow:
        0 0 0 1px rgba(107, 87, 255, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.5) !important;
    transition: transform var(--jb-transition), box-shadow var(--jb-transition) !important;
    overflow: hidden;
}

.u-section-4 .u-image-1:hover,
.u-section-4 .u-image-2:hover,
.u-section-4 .u-image-3:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow:
        0 0 0 1px rgba(107, 87, 255, 0.2),
        0 32px 64px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(107, 87, 255, 0.15) !important;
}

/* ===================================================
   8. SECTION 5 — Kontaktformular (Surface + Purple Glow)
   =================================================== */
.u-section-5 {
    background-color: var(--jb-surface) !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--jb-border) !important;
}

.u-section-5::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(107, 87, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.u-section-5::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(0, 224, 214, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.u-section-5 .u-text-1 {
    color: var(--jb-text) !important;
    -webkit-text-fill-color: var(--jb-text) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
}

/* ===================================================
   9. SECTIONS 6 — Trenner
   =================================================== */
.u-section-6 {
    background-color: var(--jb-bg) !important;
    border-top: 1px solid var(--jb-border) !important;
}

/* ===================================================
   10. SECTIONS 7 & 8 — Feature-Rows (abwechselnd)
   =================================================== */
.u-section-7 {
    background-color: var(--jb-surface) !important;
    position: relative;
    border-top: 1px solid var(--jb-border) !important;
    border-bottom: 1px solid var(--jb-border) !important;
    overflow: hidden;
    transition: background-color var(--jb-transition) !important;
}

.u-section-7::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 300px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse, rgba(0, 224, 214, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.u-section-8 {
    background-color: var(--jb-bg) !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--jb-border) !important;
}

.u-section-8::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 300px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse, rgba(255, 49, 140, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.u-section-7 .u-text-1,
.u-section-7 .u-text-2,
.u-section-8 .u-text-1 {
    color: var(--jb-text-muted) !important;
    -webkit-text-fill-color: var(--jb-text-muted) !important;
}

.u-section-7 h1, .u-section-7 h2, .u-section-7 h3,
.u-section-7 h4, .u-section-7 h5,
.u-section-8 h1, .u-section-8 h2, .u-section-8 h3 {
    color: var(--jb-text) !important;
    -webkit-text-fill-color: var(--jb-text) !important;
}

.u-section-7 .u-image-1,
.u-section-8 .u-image-1 {
    border-radius: var(--jb-radius) !important;
    border: 1px solid var(--jb-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* ===================================================
   11. SECTION 9 — CTA-Bereich (Vibrant Gradient)
   =================================================== */
.u-section-9 {
    background: linear-gradient(135deg, #3d2f8f 0%, var(--jb-purple) 40%, #9B45FF 70%, var(--jb-pink) 100%) !important;
    position: relative;
    overflow: hidden;
    border: none !important;
}

.u-section-9::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(0, 224, 214, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.u-section-9 .u-text-1,
.u-section-9 .u-text,
.u-section-9 h1,
.u-section-9 h2,
.u-section-9 h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* ===================================================
   12. SECTION 10 — Footer-Abstandhalter
   =================================================== */
.u-section-10 {
    background-color: var(--jb-bg) !important;
}

/* ===================================================
   13. KARTEN & LAYOUT-ZELLEN
   =================================================== */
.u-layout-cell {
    background-color: var(--jb-surface2) !important;
    border: 1px solid var(--jb-border) !important;
    border-radius: var(--jb-radius-lg) !important;
    transition: transform var(--jb-transition), box-shadow var(--jb-transition), border-color var(--jb-transition) !important;
    overflow: hidden;
}

.u-layout-cell:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(107, 87, 255, 0.35) !important;
    box-shadow:
        0 0 0 1px rgba(107, 87, 255, 0.15),
        0 20px 48px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(107, 87, 255, 0.1) !important;
}

.u-container-layout {
    background-color: transparent !important;
}

/* ===================================================
   14. BILDER
   =================================================== */
.u-image:not(.u-logo) {
    border-radius: var(--jb-radius) !important;
    transition: transform var(--jb-transition), filter var(--jb-transition) !important;
}

.u-image:not(.u-logo):hover {
    transform: scale(1.025) !important;
    filter: brightness(1.08) !important;
}

/* ===================================================
   15. BUTTONS — JetBrains Gradient-Style
   =================================================== */
.u-btn,
.u-btn-submit,
a.u-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.01em !important;
    padding: 11px 26px !important;
    background: linear-gradient(135deg, var(--jb-purple) 0%, var(--jb-pink) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: opacity var(--jb-transition), transform var(--jb-transition), box-shadow var(--jb-transition) !important;
    box-shadow: 0 4px 16px rgba(107, 87, 255, 0.35) !important;
}

.u-btn::before,
a.u-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity var(--jb-transition);
}

.u-btn:hover,
.u-btn-submit:hover,
a.u-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(107, 87, 255, 0.5) !important;
    opacity: 1 !important;
}

.u-btn:hover::before,
a.u-btn:hover::before {
    opacity: 1;
}

.u-btn:active,
a.u-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(107, 87, 255, 0.3) !important;
}

/* ===================================================
   16. FORMULARE — Dark Inputs
   =================================================== */
.u-input,
.u-form-group input,
.u-form-group textarea,
.u-form-group select {
    font-family: 'Inter', sans-serif !important;
    border-radius: var(--jb-radius) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 16px !important;
    font-size: 0.925rem !important;
    color: var(--jb-text) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transition: border-color var(--jb-transition), box-shadow var(--jb-transition), background var(--jb-transition) !important;
    outline: none !important;
}

.u-input::placeholder,
.u-form-group input::placeholder,
.u-form-group textarea::placeholder {
    color: var(--jb-text-dim) !important;
}

.u-input:focus,
.u-form-group input:focus,
.u-form-group textarea:focus {
    border-color: var(--jb-purple) !important;
    background: rgba(107, 87, 255, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(107, 87, 255, 0.18) !important;
}

.u-form-group {
    margin-bottom: 16px !important;
}

.u-label {
    color: var(--jb-text-muted) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

/* Erfolgs-/Fehlermeldungen */
.u-form-send-success {
    background: rgba(33, 215, 137, 0.12) !important;
    border: 1px solid rgba(33, 215, 137, 0.3) !important;
    color: var(--jb-green) !important;
    border-radius: var(--jb-radius) !important;
    padding: 12px 16px !important;
}

.u-form-send-error {
    background: rgba(255, 49, 140, 0.1) !important;
    border: 1px solid rgba(255, 49, 140, 0.3) !important;
    color: var(--jb-pink) !important;
    border-radius: var(--jb-radius) !important;
    padding: 12px 16px !important;
}

/* ===================================================
   17. FOOTER — Ultra-Dark Navy
   =================================================== */
.u-footer.u-grey-80,
.u-footer {
    background: #0d0f12 !important;
    color: var(--jb-text-muted) !important;
    border-top: 1px solid var(--jb-border) !important;
}

.u-footer .u-text,
.u-footer p,
.u-footer div {
    color: var(--jb-text-muted) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    background: transparent !important;
}

.u-footer h5,
.u-footer .u-block-header,
.u-footer .u-text-1,
.u-footer .u-text-3,
.u-footer .u-text-5,
.u-footer .u-text-7,
.u-footer .u-text-9 {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
}

.u-footer a {
    color: var(--jb-text-muted) !important;
    -webkit-text-fill-color: var(--jb-text-muted) !important;
    text-decoration: none !important;
    transition: color var(--jb-transition) !important;
}

.u-footer a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.u-footer .u-map {
    border-radius: var(--jb-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--jb-border) !important;
}

.u-line-1 {
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ===================================================
   18. LOGIN-SEITE
   =================================================== */
#form_body.u-section-1 {
    background: var(--jb-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(107, 87, 255, 0.25) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255, 49, 140, 0.15) 0%, transparent 60%) !important;
}

#form_body.u-section-1::before {
    display: none;
}

#form_body.u-section-1::after {
    display: none;
}

#form_body .u-text-1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    background: linear-gradient(135deg, #ffffff 30%, #c8c0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#form_body .u-form-1 {
    background: var(--jb-surface) !important;
    border: 1px solid var(--jb-border) !important;
    border-radius: 16px !important;
    padding: 36px !important;
    box-shadow:
        0 0 0 1px rgba(107, 87, 255, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.6) !important;
    width: 420px !important;
    height: auto !important;
}

@media (max-width: 575px) {
    #form_body .u-form-1 {
        width: 340px !important;
        padding: 24px !important;
    }
}

/* ===================================================
   19. OFFCANVAS / MOBILE MENU
   =================================================== */
.u-sidenav,
.u-black.u-sidenav-1 {
    background: #0d0f12 !important;
    border-right: 1px solid var(--jb-border) !important;
}

.u-sidenav .u-nav-link,
.u-sidenav a.u-nav-link {
    color: var(--jb-text-muted) !important;
    font-weight: 500 !important;
    transition: color var(--jb-transition), background var(--jb-transition) !important;
}

.u-sidenav .u-nav-link:hover {
    color: #ffffff !important;
    background: rgba(107, 87, 255, 0.12) !important;
}

.u-menu-overlay,
.u-black.u-menu-overlay {
    background: rgba(13, 15, 18, 0.85) !important;
    backdrop-filter: blur(4px) !important;
}

/* ===================================================
   20. SCROLLBAR
   =================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--jb-bg);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 87, 255, 0.5);
}

/* ===================================================
   21. TEXT-SELECTION
   =================================================== */
::selection {
    background: rgba(107, 87, 255, 0.35);
    color: #ffffff;
}

/* ===================================================
   22. RESPONSIVE ANPASSUNGEN
   =================================================== */
@media (max-width: 767px) {
    .u-section-9 {
        background: linear-gradient(180deg, var(--jb-purple) 0%, var(--jb-pink) 100%) !important;
    }

    #form_body .u-form-1 {
        margin: 0 auto !important;
    }
}

/* ===================================================
   23. DATASPECS-SEITE — Font-Override
   =================================================== */
body {
    font-family: 'Inter', 'Helvetica Neue', helvetica, arial, verdana, sans-serif !important;
}