/* =====================
   FONTS
   ===================== */

/* Inter (Sans-Serif) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Poppins */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Source Sans 3 */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source_sans_3/source-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source_sans_3/source-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Lora (Serif) inkl. Italic */
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/lora-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/lora-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/lora-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}


/* =====================
   BASE CONTAINER
   ===================== */

#sub {
    font-family: var(--font-base, 'Inter', system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.6;
}

/* Alle Kindelemente erben die Schrift */
#sub .text-content {
    font-family: inherit;
}

#sub .text-content * {
    font-family: inherit;
}


/* =====================
   TEXT CONTENT (Rich Text)
   ===================== */

#sub .text-content {
    font-family: inherit;
}


/* =====================
   TYPOGRAPHY
   ===================== */

#sub .text-content h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent);
}

#sub .text-content h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--accent);
}

#sub .text-content h3 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
}

#sub .text-content p {
    font-size: 1.25rem;
    font-weight: 400;
}


/* =====================
   INLINE FORMATTING
   ===================== */

#sub .text-content strong,
#sub .text-content b {
    font-weight: 700;
    font-style: normal;
}

#sub .text-content em,
#sub .text-content i {
    font-weight: 400;
    font-style: italic;
}

#sub .text-content strong em,
#sub .text-content strong i,
#sub .text-content b em,
#sub .text-content b i {
    font-weight: 700;
    font-style: italic;
}


/* =====================
   LISTS
   ===================== */

#sub .text-content ul {
    margin: 0 0 1rem 1.5rem;
    padding: 0;
}

#sub .text-content li {
    margin-bottom: 0.25rem;
}


/* =====================
   FORM ELEMENTS
   ===================== */

#sub button,
#sub input,
#sub textarea {
    font-family: inherit;
    font-size: 1rem;
}


/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 768px) {
    #sub .text-content h1 {
        font-size: 2rem;
    }

    #sub .text-content h3 {
        font-size: 1.25rem;
    }
}