/* =========================================================
   Fleetfront: Helion Wars
   Datei: /public/css/index.css

   Ziel:
   - Desktop-first Landing Page wie im Mockup
   - 4K Background, gut lesbar durch Overlays
   - Großes Logo im Header
   - Links: Teaser-Block
   - Rechts: Login Panel mit Tabs (Login / Registrieren)
   - Unten: futuristischer Footer
========================================================= */

/* -------------------------
   Reset / Basis
------------------------- */

* { box-sizing: border-box; }
html, body { height: 100%; }

body{
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(245, 248, 255, 0.94);
    background: #070b12;
    overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

img{ max-width: 100%; height: auto; display: block; }

/* -------------------------
   Theme Tokens
------------------------- */

:root{
    --ff-ink: #060913;
    --ff-ink-2: #0b1020;

    --ff-text: rgba(245, 248, 255, 0.94);
    --ff-text-soft: rgba(210, 220, 255, 0.78);
    --ff-text-muted: rgba(175, 190, 225, 0.62);

    --ff-line: rgba(255,255,255,0.10);
    --ff-line-2: rgba(255,255,255,0.06);

    --ff-accent: #ff8a22;      /* Helion Glow */
    --ff-accent-2: #ffd1a3;    /* warm highlight */
    --ff-cold: #7fb7ff;        /* subtle cold light */

    --ff-radius-lg: 20px;
    --ff-radius-md: 16px;

    --ff-shadow: 0 18px 60px rgba(0,0,0,0.55);
    --ff-shadow-soft: 0 12px 40px rgba(0,0,0,0.35);

    --ff-maxw: 1200px;
}

/* -------------------------
   Background + Overlays
------------------------- */

.ffBg{
    position: fixed;
    inset: 0;
    z-index: -5;

    background-image: url("/public/img/index/bg-4k.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.05);
}

.ffOverlayTop{
    position: fixed;
    inset: 0;
    z-index: -4;

    background: radial-gradient(1200px 520px at 50% 18%,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.55) 55%,
        rgba(0,0,0,0.82) 100%);
    pointer-events: none;
}

.ffOverlayBottom{
    position: fixed;
    inset: 0;
    z-index: -3;

    background: linear-gradient(to bottom,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.25) 35%,
        rgba(0,0,0,0.70) 75%,
        rgba(0,0,0,0.88) 100%);
    pointer-events: none;
}

/* -------------------------
   Header / Branding
------------------------- */

.ffHeader{
    padding: 44px 18px 6px;
}

.ffHeaderInner{
    max-width: var(--ff-maxw);
    margin: 0 auto;
    text-align: center;
}

.ffBrand{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ffLogo{
    width: min(760px, 92vw);
    height: auto;
    filter: drop-shadow(0 18px 55px rgba(0,0,0,0.75));
}

/* -------------------------
   Main Layout
------------------------- */

.ffMain{
    padding: 8px 18px 34px;
    margin-top: -30px;
}

.ffMainInner{
    max-width: var(--ff-maxw);
    margin: 0 auto;
}

.ffGrid{
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 26px;
    align-items: end;
}

/* -------------------------
   Teaser (links)
------------------------- */

.ffTeaser{
    padding: 18px 10px 10px;
}

.ffTeaserTitle{
    margin: 0 0 14px;
    font-size: 44px;
    line-height: 1.02;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 16px 40px rgba(0,0,0,0.70);
}

.ffTeaserText{
    margin: 0 0 16px;
    max-width: 520px;
    line-height: 1.6;
    color: var(--ff-text-soft);
    text-shadow: 0 14px 34px rgba(0,0,0,0.60);
}

.ffTeaserBullets{
    display: grid;
    gap: 12px;
    max-width: 540px;
}

.ffBullet{
    border: 1px solid var(--ff-line-2);
    background: linear-gradient(180deg,
        rgba(10,14,26,0.50) 0%,
        rgba(6,9,19,0.65) 100%);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--ff-shadow-soft);
    backdrop-filter: blur(6px);
}

.ffBulletTitle{
    display: block;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    margin-bottom: 4px;
}

.ffBulletText{
    display: block;
    color: var(--ff-text-muted);
    line-height: 1.45;
}

/* -------------------------
   Auth Panel (rechts)
------------------------- */

.ffAuth{
    display: flex;
    justify-content: center;
}

.ffAuthFrame{
    width: 100%;
    border-radius: var(--ff-radius-lg);
    border: 1px solid rgba(255,255,255,0.12);

    background: linear-gradient(180deg,
        rgba(12,16,28,0.58) 0%,
        rgba(7,10,18,0.78) 100%);

    box-shadow: var(--ff-shadow);
    backdrop-filter: blur(10px);

    position: relative;
    overflow: hidden;
}

.ffAuthFrame::before{
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(500px 220px at 50% 105%,
        rgba(255,138,34,0.70) 0%,
        rgba(255,138,34,0.22) 35%,
        rgba(255,138,34,0.00) 70%);
    pointer-events: none;
}

.ffAuthFrame::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.02) 35%,
        rgba(255,255,255,0.05) 70%,
        rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    opacity: 0.55;
}

.ffAuthHead{
    padding: 18px 20px 10px;
    position: relative;
    z-index: 1;
}

.ffAuthTitle{
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 12px 24px rgba(0,0,0,0.55);
}

.ffAuthSub{
    margin-top: 8px;
    text-align: center;
    color: var(--ff-text-muted);
    line-height: 1.4;
    font-size: 13px;
}

/* Tabs im Panel */
.ffAuthTabs{
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ffAuthTab{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(8, 10, 18, 0.45);
    color: rgba(210, 220, 255, 0.78);

    padding: 10px 12px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    cursor: pointer;
}

.ffAuthTab:hover{
    filter: brightness(1.08);
}

.ffAuthTab.isActive{
    background: linear-gradient(180deg,
        rgba(140,170,210,0.25) 0%,
        rgba(40,55,85,0.55) 100%);
    color: rgba(245,248,255,0.92);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

/* Body Bereich im Panel */
.ffAuthBody{
    padding: 12px 20px 20px;
    position: relative;
    z-index: 1;
}

/* Formular Bausteine */
.ffAuthForm{
    margin: 0;
}

.ffField{
    display: block;
    margin-bottom: 12px;
}

.ffLabel{
    display: block;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ff-text-muted);
    margin-bottom: 6px;
}

.ffInput{
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(8, 10, 18, 0.65);
    color: var(--ff-text);

    padding: 12px 12px;
    outline: none;

    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.ffInput::placeholder{
    color: rgba(200,210,245,0.42);
}

.ffInput:focus{
    border-color: rgba(255,138,34,0.55);
    box-shadow:
        0 0 0 3px rgba(255,138,34,0.15),
        inset 0 0 0 1px rgba(0,0,0,0.20);
}

.ffAuthMeta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 14px;
}

.ffCheck{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ff-text-muted);
    font-size: 13px;
}

.ffCheck input{
    width: 18px;
    height: 18px;
    accent-color: var(--ff-accent);
}

.ffLink{
    color: rgba(255, 175, 95, 0.92);
    font-size: 13px;
    text-decoration: none;
}
.ffLink:hover{ text-decoration: underline; }

.ffAuthActions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Panel nutzt meist nur einen Button */
.ffAuthActionsSingle{
    grid-template-columns: 1fr;
}

.ffBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.ffBtnPrimary{
    background: linear-gradient(180deg,
        rgba(140,170,210,0.25) 0%,
        rgba(40,55,85,0.55) 100%);
    color: rgba(245,248,255,0.92);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.ffBtnPrimary:hover{
    filter: brightness(1.07);
}

.ffBtnSecondary{
    background: linear-gradient(180deg,
        rgba(255,138,34,0.85) 0%,
        rgba(150,60,10,0.85) 100%);
    color: rgba(25, 10, 6, 0.92);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.ffBtnSecondary:hover{
    filter: brightness(1.06);
}

.ffAuthHint{
    margin-top: 14px;
    color: rgba(170, 190, 225, 0.55);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

/* -------------------------
   Footer
------------------------- */

.ffFooter{
    padding: 22px 18px 26px;
}

.ffFooterInner{
    max-width: var(--ff-maxw);
    margin: 0 auto;

    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 14px;
}

.ffFooterNav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ffFooterLink{
    color: rgba(210, 220, 255, 0.72);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}
.ffFooterLink:hover{ color: rgba(255, 185, 120, 0.95); }

.ffFooterCopy{
    text-align: center;
    color: rgba(175, 190, 225, 0.55);
    font-size: 13px;
}

/* -------------------------
   Responsive
------------------------- */

@media (max-width: 1040px){
    .ffGrid{
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .ffTeaserTitle{ font-size: 40px; }
    .ffMain{ margin-top: -18px; }
}

@media (max-width: 620px){
    .ffHeader{ padding-top: 32px; }
    .ffTeaserTitle{ font-size: 34px; }
    .ffAuthActions{ grid-template-columns: 1fr; }
    .ffMain{ margin-top: -10px; }
}