/**** TEXT & ICONS ****/
body,
html {
    background-color: #15181D !important;
    color: #fff;
}

.content,
#teaserbox,
#topfooter {
    background-color: transparent !important;
}

/* WHITE */
hr,
h1,
.prev,
.next,
.teaser i,
button,
.button,
input[type=submit],
#bottomfooter p,
#bottomfooter a {
    color: var(--black);
}

/* XXX */
a,
.form h4,
#decline,
#popup h3,
#selection,
.menuitem a:hover {
    color: var(--xxx);
}

/* BLACK */
h2,
h3,
h4,
p,
li i,
#selection,
.menuitem a,
#topfooter p,
#topfooter a {
    color: var(--white);
}

/* OTHER */
.alert i:nth-of-type(1) {
    color: green;
}

/**** ELEMENT BACKGROUND ****/
body,
.bottommenu nav,
.bottommenu,
#teaserbox .box {
    background: transparent;
}

input,
textarea,
.topmenu,
#teaserbox,
#topfooter {
    background: var(--grey);
}

button,
.button,
.teaser i,
input[type=submit] {
    background: var(--xxx);
}

#burgermenu .burger .line {
    background: #000;
}

#selection,
#burgermenu,
#decline {
    background: transparent;
}

#popup {
    background: #ffffff85;
}

/**** OUTLINE & SHADOW COLORS ****/
#decline,
input:focus,
textarea:focus {
    outline-color: var(--xxx);
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
a:focus-visible {
    outline-color: var(--black);
}

#popup {
    box-shadow: var(--black) 0 0 10rem -4rem;
}

/**** ROOT ****/
:root {
    --white: #FFFFFF;
    --grey: #F0F0F0;
    --xxx: #facc15;
    --black: #000000;
}

/* BUTTONS */
.btn-yellow {
    background-color: #ffe72f !important;
    color: #15181D !important;
}

.btn-white {
    background-color: var(--white) !important;
    color: var(--black) !important;
}

/* HERO TEXT FARBEN */
#hero h1 {
    color: var(--white) !important;
}

.subtitle {
    color: var(--white);
}

.highlight {
    color: #FFE02E;
    font-family: inherit;
}

#hero p {
    color: var(--white);
}

/* STATS SECTION VISUALS */
#stats {
    background-color: #15181D;
}


#stats p {
    color: rgba(255, 255, 255, 0.7);
}

/* NAVBAR TEXT COLOR OVERRIDE */
.nav-list .menuitem a,
.nav-list .menuitem i {
    color: #161514;
}

/* FOOTER */
#topfooter p,
#topfooter a,
#topfooter h3,
#topfooter li {
    color: #F7F7F7 !important;
}



/* INLINE STYLES MOVED TO CSS */
.section-subtitle {
    color: #FACC15 !important;
}

.about-feature i {
    color: #FFE02E;
}

/* CTA DESIGN */
.teaser {
    background: #15181D;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.teaser i {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.25);
    color: #15181D !important;
}

/* DROPDOWN DESIGN */
.dropdown {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dropdown .menuitem a {
    color: #333333;
}

.dropdown .menuitem a:hover {
    color: #000000;
    background: transparent;
}

.link-list a {
    color: var(--white);
    text-decoration: none;
}

.link-list a:hover {
    color: var(--xxx);
}

/* LINKBLOCK FIXES */
#linkblock a,
#linkblock a:link,
#linkblock a:visited,
#linkblock a:hover,
#linkblock a:active,
#selection {
    color: var(--xxx) !important;
}

/* EXACT GRADIENT REQUESTED BY USER */
#teaserbox,
footer {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.001) 25%, #15181D 100%) !important;
    opacity: 1 !important;
}

/* ABOUT SECTION COLORS */
#about .section-subtitle {
    color: #FFFF00 !important;
}

#about .right h2,
#about .right p {
    color: #F9F6F4 !important;
}

#stats h3 {
    color: #facc15 !important;
}

#stats p {
    color: #94a3b8 !important;
    font-size: 16px !important;
}
/* Fluid heading sizes for all landing pages. */
#hero h1 {
    font-weight: 300;
    font-size: clamp(26px, 4.5vw, 64px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

h2 {
    font-size: clamp(24px, 2.4vw, 40px);
    overflow-wrap: anywhere;
    line-height: 1.2;
    margin-bottom: 1rem;
}