/* =========================================================
   Stargrave – UI Basis
   Datei: /public/css/ui.css
   ========================================================= */

/* -------------------------
   Root & Reset
------------------------- */

:root {
    --sg-bg: #050814;
    --sg-bg-soft: #090d1c;
    --sg-surface: rgba(9, 15, 32, 0.96);
    --sg-border-soft: rgba(255, 255, 255, 0.06);
    --sg-border-strong: rgba(255, 255, 255, 0.16);

    --sg-text: rgba(245, 248, 255, 0.94);
    --sg-text-soft: rgba(210, 220, 255, 0.78);
    --sg-text-muted: rgba(180, 190, 225, 0.68);

    --sg-accent: #4af2ff;
    --sg-accent-soft: rgba(74, 242, 255, 0.12);
    --sg-accent-strong: #33d3e6;
    --sg-accent-2: #c08cff;

    --sg-danger: #ff4f6b;

    --sg-radius-lg: 18px;
    --sg-radius-pill: 999px;

    --sg-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.75);
    --sg-shadow-glow: 0 0 40px rgba(74, 242, 255, 0.26);

    --sg-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI", sans-serif;

    --sg-wrap-max: 1160px;
    --sg-wrap-gutter: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* -------------------------
   Body & Global Layout
------------------------- */

body.sgBody {
    min-height: 100vh;
    font-family: var(--sg-font-ui);
    color: var(--sg-text);

    /* sauberer, einfarbiger Space-Background – kein Gradient -> keine Balken */
    background-color: var(--sg-bg);

    /* Falls Effekte in Unter-Containern (z.B. .sgMain::before/after) etwas überstehen */
    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
}

/* Main-Bereich – extra Padding unten, damit nichts hinter dem fixen Footer verschwindet */
.sgMain {
    position: relative;
    z-index: 1;
    padding-bottom: 96px; /* Platz für festen Footer + etwas Luft */
}

/* Wrapper für Inhalte mit max-breite */
.sgWrap {
    width: min(var(--sg-wrap-max), 100% - (var(--sg-wrap-gutter) * 2));
    margin-inline: auto;
}

/* -------------------------
   Typografie
------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--sg-text);
}

p {
    margin: 0 0 12px;
    color: var(--sg-text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
}

.sgHero__title,
.sgHero__subtitle,
.sgHero__lead {
    margin: 0;
}

/* Section Standard */

.sgSection {
    padding: 40px 0 20px;
}

.sgSection__title {
    font-size: 1.5rem;
    margin-bottom: 18px;
}

/* -------------------------
   Buttons
------------------------- */

.sgBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: var(--sg-radius-pill);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        color 0.16s ease-out,
        transform 0.08s ease-out,
        box-shadow 0.16s ease-out;
    outline: none;
    gap: 6px;
}

.sgBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.sgBtnPrimary {
    background: linear-gradient(135deg, var(--sg-accent), var(--sg-accent-2));
    color: #020307;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--sg-shadow-soft), var(--sg-shadow-glow);
}

.sgBtnPrimary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--sg-accent-strong), var(--sg-accent-2));
    transform: translateY(-1px);
}

.sgBtnGhost {
    background: rgba(4, 7, 18, 0.7);
    color: var(--sg-text-soft);
    border-color: rgba(255, 255, 255, 0.16);
}

.sgBtnGhost:hover:not(:disabled) {
    background: rgba(9, 14, 30, 0.95);
    transform: translateY(-1px);
}

.sgBtnLg {
    padding-block: 11px;
    padding-inline: 20px;
    font-size: 0.95rem;
}

.sgBtnFull {
    width: 100%;
}

/* Link-Button */

.sgLinkBtn {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 10px;
    font: inherit;
    color: var(--sg-accent);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.16s ease-out, opacity 0.16s ease-out;
}

.sgLinkBtn:hover {
    color: var(--sg-accent-2);
    opacity: 0.9;
}

/* Icon Button */

.sgIconBtn {
    border: none;
    background: rgba(0, 0, 0, 0.4);
    color: var(--sg-text-soft);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color 0.16s ease-out,
        color 0.16s ease-out,
        transform 0.08s ease-out;
}

.sgIconBtn:hover {
    background: rgba(0, 0, 0, 0.7);
    color: var(--sg-accent);
    transform: translateY(-1px);
}

/* -------------------------
   Formulare
------------------------- */

.sgForm {
    display: grid;
    gap: 12px;
}

.sgField {
    display: grid;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--sg-text-soft);
}

.sgField span {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
    opacity: 0.9;
}

.sgInput {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--sg-border-soft);
    background: rgba(3, 7, 20, 0.85);
    color: var(--sg-text);
    padding: 9px 11px;
    font: inherit;
    outline: none;
    transition:
        border-color 0.14s ease-out,
        box-shadow 0.14s ease-out,
        background-color 0.14s ease-out;
}

.sgInput::placeholder {
    color: rgba(170, 182, 215, 0.7);
}

.sgInput:focus {
    border-color: var(--sg-accent);
    background: rgba(3, 9, 26, 0.96);
    box-shadow: 0 0 0 1px rgba(74, 242, 255, 0.32);
}

/* Hilfstext / Fineprint im Modal */

.sgFineprint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--sg-text-muted);
}

/* -------------------------
   Tabs (Auth Modal)
------------------------- */

.sgTabs {
    display: inline-flex;
    align-items: center;
    border-radius: var(--sg-radius-pill);
    padding: 4px;
    background: rgba(3, 7, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 4px;
}

.sgTab {
    border: none;
    background: transparent;
    color: var(--sg-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--sg-radius-pill);
    cursor: pointer;
    transition:
        background-color 0.16s ease-out,
        color 0.16s ease-out;
}

.sgTab.is-active {
    background: var(--sg-accent-soft);
    color: var(--sg-accent);
}

/* Auth Panes */

.sgAuthPane {
    display: none;
}

.sgAuthPane.is-active {
    display: block;
}

/* -------------------------
   Utility
------------------------- */

.sgMuted {
    color: var(--sg-text-muted);
}

.sgKicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: var(--sg-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.5);
    color: var(--sg-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sgKickerDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sg-accent);
    box-shadow: 0 0 12px rgba(74, 242, 255, 0.9);
}

/* Responsive Kleinkram */

@media (max-width: 768px) {
    .sgSection {
        padding: 28px 0 12px;
    }
}