/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section img {
    max-width: 100%;
}

/* Design-Variablen basierend auf dem Entwurf */
:root {
    --primary-coral: #af2738;
    --primary-blue: #4a90e2;
    --dark-blue: #2c3d55;
    --light-blue: #eceef5;
    --silver: #f8f9fa;
    --text-dark: #333333;
    --text-light: #f8f9fa;
    --white: #ffffff;
    --nav: #f8f9fa;
    --spacing: 1.5rem;
}

/* Basis-Typografie */
body {
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
}

h1, h2, h3 {
    font-family: Garamond, serif;
}

p, li {
    font-size: calc(16px + (19 - 16) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(22px + (28 - 22) * ((100vw - 300px) / (1600 - 300)));
}

p {
    margin: 1vw 0;
}

a {
    font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(22px + (28 - 22) * ((100vw - 300px) / (1600 - 300)));
}

h1 {
    font-size: calc(22px + (28 - 22) * ((100vw - 300px) / (1600 - 280)));
    line-height: calc(28px + (32 - 28) * ((100vw - 300px) / (1600 - 280)));
}

.main-h1 {
    font-weight: 500;
    padding-left: 23%;
    font-size: calc(20px + (28 - 20) * ((100vw - 300px) / (1600 - 280)));
    line-height: calc(26px + (34 - 26) * ((100vw - 300px) / (1600 - 280)));
    font-family: Tahoma, sans-serif;
}

h2 {
    font-size: calc(24px + (32 - 24) * ((100vw - 300px) / (1600 - 280)));
    line-height: calc(30px + (44 - 30) * ((100vw - 300px) / (1600 - 280)));
}

h3 {
    font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 280)));
    line-height: calc(24px + (28 - 24) * ((100vw - 300px) / (1600 - 280)));
}

.hl-familiaris {
    font-size: 6vw;
}

.strong {
    font-weight: bold;
}

.red-check-list {
  list-style: none;
  padding-bottom: 2vw;
}

.red-check-list > li {
  list-style-image: url('../images/red-check.png');
  list-style-type: disc; 
  list-style-position: inside;
}

.word-break {
    word-break: break-word;
}



/* Skip-Link */
.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: var(--focus-color);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: bold;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Fokus-Indikator */
*:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
}


/* Runde Ecken */
.round {
    border-radius: 3%;
}


/* Container */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}


/* Column Layout */
.grid {
    display: grid;
}


/* Columns */
.fr-2-5-5 {
    grid-template-columns: 2fr 5fr 5fr;
}

.fr-6-5 {
    grid-template-columns: 6fr 5fr;
}

.fr-4-7 {
    grid-template-columns: 4fr 7fr;
}

.fr-7-4 {
    grid-template-columns: 7fr 4fr;
}

.fr-8-4 {
    grid-template-columns: 8fr 4fr;
}

.fr-4-8 {
    grid-template-columns: 8fr 4fr;
}

.fr-1-1 {
    grid-template-columns: 1fr 1fr;
}


/* gap */

.gap-2 {
    gap: 2rem;
}

.gap-4 {
    gap: 4rem;
}


/* Container */
.small-width > .container {
  max-width: 900px;
  margin: 0 auto;
}


/* vertikale Ausrichtung */
.ali-center {
    align-items: center;
}


/* Navigation */
.nav-logo {
    max-width: 190px;
}

/* Header */
.site-header {
    background-color: var(--nav);
    padding: .8rem 3rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 2;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-coral);
}

/* Navigation Container */
.nav-container {
    display: flex;
    align-items: end;
    gap: .5rem;
    flex-flow: column;
}

/* Sprachnavigation */
.language-nav {
    margin-bottom: .3rem;
}

.language-nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
}

nav > ul > li {
    padding-right: 1vw;
}

nav > ul > li > a {
    color: var(--dark-blue);
    text-decoration: none;
    padding: 2px 6px 3px 6px;
}



/* Farben */
.color-primary-coral {
    color: var(--primary-coral);
}

.color-primary-blue {
    color: var(--primary-blue);
}

.color-dark {
    color: var(--dark-blue);
}


/* Hauptnavigation */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1vw;
}

.main-nav a {
    color: var(--primary-coral);
    text-decoration: none;
    padding: 2px 6px 3px 6px;
}

.main-nav a:hover,
.main-nav a:focus {
    background-color: var(--primary-coral);
    color: var(--silver);
    border-radius: 5px;
}

.main-nav a[aria-current="page"] {
    background-color: var(--primary-coral);
    color: var(--silver);
    border-radius: 5px;
}

.language-nav a[aria-current="true"] {
    background-color: var(--dark-blue);
    color: var(--silver);
    border-radius: 5px;
}

.language-nav a:hover,
.language-nav a:focus {
    background-color: var(--dark-blue);
    color: var(--silver);
    border-radius: 5px;
}


/* Abstände */
.marg-top-1 > li {
    margin-top: 1vw;
}

.marg-top-2 {
    margin-top: 2vw;
}

.padd-top-1-2 {
    padding-top: 1.2rem;
}

.marg-btm-1 {
    margin-bottom: 1rem;
}

.space {
    margin: 1rem 0;
}


/* Sektionen */
section {
    padding: 5vw;
}

.hero {
    padding-top: 24px;
}

.section-alternate {
    background-color: var(--light-blue);
}

.bg-white {
    background-color: var(--white);
}

.bg-dark {
    background-color: var(--dark-blue);
    color: var(--white);
}

.bg-silver {
    background-color: var(--silver);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

/* Schriftenlayout */

.center {
    text-align: center;
}

.list {
    margin-left: 1.1rem;
}

.list > li {
  padding-bottom: .2rem;
}

.illustration {
    max-width: 100%;
    height: auto;
}

/* Werte-Sektion */
.values-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.values-highlight {
    font-weight: bold;
    color: var(--text-dark);
}

/* Grid für Karten */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 2vw;
}

.card {
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card h3 {
    margin-bottom: .5rem;
}

.so-unterstuetzen-wir > article > p {
    color: var(--dark-blue);
    margin: .4vw 0;
}

.so-unterstuetzen-wir.gf > article {
    max-width: 420px;
}

/* Footer */
.site-footer {
    background-color: var(--nav);
    color: var(--text-dark);
    padding: 1rem 3rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-nav ul {
    list-style: none;
    text-align: end;
}

.footer-nav a {
    text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus {
    text-decoration: underline;
}

.hero-img {
        width: 90vw;
        max-width: 100%;
        max-height: 100%;
    }


/* Responsive Design min-width */

@media (min-width: 760px) {
    .jus-self-end {
        justify-self: end;
    }
}


/* Responsive Design max-width */

@media (max-width: 630px) {

    section {
        padding: 9vw 1vw;
    }

    section img {
        max-width: 100%;
        max-height: 200px;
    }

    .fr-6-5, .fr-4-7, .fr-7-4, .fr-8-4, .fr-4-8, .fr-1-1, .card-grid {
        grid-template-columns: 1fr;
    }

    .gap-4 {
        gap: 1rem;
    }

    .nav-container {
        align-items: end;
    }

    .revert > div {
        order: 2;
    }

    h1.color-primary-coral {
        padding-left: 0;
    }

    .header-content {
        align-items: center;
    }

    .main-nav ul {
        flex-direction: row;
    }

    .nav-logo {
        max-width: 32vw;
    }

    .card {
        padding: 5vw;
    }

    .site-header {
        padding: 1rem 1rem;
    }

    .center {
        text-align: left;
    }

    .site-footer {
        padding: 1rem 1rem;
    }

}

/* Screen-Reader-Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}