@font-face {
    font-family: "Karla";
    src: url("webfonts/Karla-VariableFont_wght.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --color-header: #666666;
    --color-accent: #006e8c;
    --color-text: #929292;
    --font-s: clamp(0.875rem, 0.8036rem + 0.2857vw, 1.25rem); /* 14px - 20px */
    --font-sm: clamp(1.125rem, 1.0536rem + 0.2857vw, 1.5rem); /* 18px - 24px */
    --font-m: clamp(1.375rem, 1.256rem + 0.4762vw, 2rem); /* 22px - 32px */
    --font-l: clamp(1.875rem, 1.5179rem + 1.4286vw, 3.75rem); /* 30px - 60px */
    --space: clamp(1.125rem, 0.75rem + 1vw, 1.875rem);
}

body {
    font-family: "Karla", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-weight: 300;
}

.main-content {
    display: flex;
    flex: 1;
}

.content-section {
    width: 50%;
    display: flex;
    flex-direction: column;
}

header {
    padding: 40px 60px;
}
.organization-title a{
    border-bottom: none;
}
.organization-title a:hover{
    border-bottom: none;
}

main {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 60px;
}

.image-section {
    width: 50%;
    background-image: url("ci_keyvisual.webp");
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    overflow: visible;
}

.container {
    text-align: left;
    width: 100%;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.organization-title {
    font-size: var(--font-m);
    color: var(--color-header);
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: border-bottom 0.3s ease;
}
a:hover {
    border-bottom: 1px solid transparent;
}

.home .member-names {
    font-size: var(--font-l);
    /*font-weight: 600;*/
    color: var(--color-header);
    margin-bottom: clamp(0.75rem, 0.6rem + 0.3vw, 1.125rem);
    line-height: 1;
}

.home .description {
    font-size: var(--font-m); /* 14px - 20px */
    color: var(--color-text);
    margin-top: calc(var(--space) * 2);
    margin-bottom: calc(var(--space) * 0.6);
}
.home ul,
.home li,
.kontakt ul,
.kontakt li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.home li,
.kontakt li {
    margin-bottom: var(--space); /* 18px - 30px */
}

.home .dates {
    font-size: var(--font-sm);
    color: var(--color-text);
    margin-bottom: 30px;
}
.kontakt {
    font-size: var(--font-sm);
    color: var(--color-text);
}
.kontakt .address {
    margin-top: var(--space);
}
footer .description {
    font-size: var(--font-sm);
    color: var(--color-accent);
    margin-bottom: calc(var(--space) * 4);
    max-width: 800px;
}
.kontakt li {
    line-height: 1.3;
}
.kontakt .member-name {
    color: var(--color-header);
    font-size: calc(var(--font-sm) * 1.2);
    font-weight: 350;
}
.kontakt .member-contact {
    margin-bottom: calc(var(--space) * 2);
    margin-top: calc(var(--space) * 1);
}

footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
}
footer a:hover {
    border-bottom: 1px solid currentColor;
}

.cta-button {
    background-color: transparent;
    color: var(--color-header);
    padding: 12px 30px;
    border: 1px solid var(--color-header);
    border-radius: 25px;
    font-size: var(--font-m);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover {
    background-color: var(--color-header);
    color: #fff;
}
h2, h3 {
    font-size: var(--font-sm);
    color: var(--color-accent);
    margin-top: calc(var(--space) * 2);
    margin-bottom: 0;
    font-weight: 300;
}
.section-title {
    margin-bottom: calc(var(--space));
}
p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}
footer {
    padding: 40px 60px;
}
.footer-kontakt {
    padding-top: 0;

}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: var(--font-s);
    color: var(--color-text);
}

.footer-left,
.footer-right {
    color: var(--color-text);
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .content-section,
    .image-section {
        width: 100%;
    }

    .image-section {
        height: 40vh;
    }

    header,
    main,
    footer {
        padding: 20px 30px;
    }
    footer, .footer-kontakt {
        padding-top: 60px;
    }

    .footer-inner {
        flex-direction: column;
        gap: 10px;
        text-align: left;
        align-items: flex-start;
    }
    .footer-right {
        padding-top: 20px;
        text-align: left;
    }
}