@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;600&display=swap');
/* ===================================
   codeloop Robotics — THEME.CSS
   “Dark Robotics” Original Palette
   =================================== */

/* ---------- Farbvariablen ---------- */
:root {
    --bg: #161d2a;            /* Haupt-Hintergrund: sehr dunkles Blau-Grau */
    --panel: #232b3b;         /* Karten, Panels: etwas heller */
    --ink: #e6ebf3;           /* Primärer Text: sehr hell */
    --muted: #8fa1bf;         /* Sekundärtext: blaugrau */
    --brand: #3ea6ff;         /* Akzent/Primär: leuchtendes Roboterblau */
    --brand-2: #1e71d7;       /* Akzent dunkel: für Hover, Buttons */
    --ok: #23d18b;            /* Grün für Erfolg */
    --warn: #efb40d;          /* Gelb für Warnungen */
    --radius: 14px;
    --shadow: 0 10px 30px rgba(16,28,48,0.15);
    --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --transition: 0.23s cubic-bezier(.4,.2,.2,1);
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-base);
    line-height: 1.6;
    letter-spacing: 0.02em;
    font-weight: 400;
    transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4 {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Links inherit font from body (Inter) */
a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}
a:hover, a:focus {
    color: var(--brand-2);
    text-decoration: underline;
}

/* Navigation menu specific styles */
.menu .btn-primary,
.menu .btn-primary:link,
.menu .btn-primary:visited {
    color: #fff !important;
    text-decoration: none !important;
}

.menu .btn-primary:hover,
.menu .btn-primary:focus {
    color: #fff !important;
    opacity: 0.9;
    text-decoration: none !important;
}

/* ---------- Buttons ---------- */
.btn {
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0.7em 1.4em;
    transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition);
    box-shadow: none;
}

.btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(62,166,255,0.13);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-2);
    color: #fff;
}

.btn-secondary {
    background: var(--panel);
    color: var(--brand);
    border: 1.5px solid var(--brand);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: var(--brand);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--brand);
    transition: all var(--transition);
}
.btn-ghost:hover, .btn-ghost:focus {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ---------- Karten & Panels ---------- */
.card {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover, .card:focus-within {
    box-shadow: 0 18px 38px rgba(16,28,48,0.18);
    transform: translateY(-2px) scale(1.01);
}

/* ---------- Navigation ---------- */
header.site-header {
    background: var(--panel);
    border-bottom: 1.5px solid #23304d;
    transition: background var(--transition), border-color var(--transition);
}

/* ---------- Hero ---------- */
.hero {
    background: #263352;
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: background var(--transition), color var(--transition);
    font-family: inherit;
}
.hero h1, .hero h2, .hero h3 {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 12px #1e71d7aa;
    letter-spacing: 0.01em;
}
.hero p, .hero .sub {
    color: #d0e3ff;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.chip {
    background: #1e2b44;
    color: var(--brand);
    border: 1.2px solid var(--brand);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- Features ---------- */
.feature {
    background: #1a2234;
    color: var(--ink);
    border: 1.5px solid #23304d;
    box-shadow: none;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.feature h4 {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.feature .icon {
    color: var(--brand);
}

/* ---------- Footer ---------- */
footer, .site-footer {
    background: #141926;
    border-top: 1.5px solid #23304d;
    color: var(--muted);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.footer-grid .muted, .muted {
    color: var(--muted);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- Formulare ---------- */
input, select, textarea {
    background: #1b2436;
    border: 1.5px solid #2a395b;
    border-radius: 10px;
    color: var(--ink);
    padding: 0.6em 0.8em;
    transition: border var(--transition), background var(--transition), color var(--transition);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    outline: none;
    background: #23304d;
    color: #fff;
}
label span {
    color: var(--muted);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- Cookie Banner ---------- */
.cookie-banner {
    background: #1e2637;
    color: var(--ink);
    border-bottom: 1.5px solid #23304d;
    box-shadow: 0 2px 10px #1e71d72f;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- Sponsor Card ---------- */
.sponsor {
    background: #182238;
    border: 1.5px solid #23304d;
    color: var(--ink);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ---------- Legal Block ---------- */
.legal-block {
    background: #1a2234;
    border: 1.5px solid #23304d;
    color: var(--ink);
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0.02em;
}
.legal-block h3 {
}