/* ==========================================================
   Telluride Projektseite – minimale Styles
   Enthält nur Regeln, die von index-optimized.html verwendet werden.
   ========================================================== */

/* --- Schriften ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');

@font-face {
    font-family: 'NewEdge Rounded';
    src: url('../Font/newedge6666-regularrounded.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'NewEdge Light';
    src: url('../Font/newedge6666-light.otf') format('opentype');
    font-display: swap;
}

/* --- Basis ---------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

body {
    font-family: 'NewEdge Light', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #000;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h1, .h3, .h5, h1, h3, h5 {
    font-family: "NewEdge Rounded";
}

.h2, .h4, .h6, h2, h4, h6 {
    font-family: "NewEdge Light";
}

.head-Tea {
    font-family: "NewEdge Rounded";
}

.head-Tea-light {
    font-family: "NewEdge Light";
}



a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

/* --- Seitenrahmen -------------------------------------------- */
.site {
    width: 100%;
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    pointer-events: none;
}

.site-brand {
    padding: 13px 12px 0;
    font-family: 'NewEdge Rounded', sans-serif;
    font-size: 3rem;
    line-height: 1;
}

.site-main {
    margin-top: 8px;
    padding-bottom: 72px; /* Platz für den fixierten Footer */
}

.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    pointer-events: none;
}

.site-footer-inner {
    width: 100%;
    margin: 0 auto;
    padding: 10px 12px 0;
    text-align: right;
}

.site-footer a {
    pointer-events: auto;
    font-family: 'NewEdge Light', sans-serif;
    font-size: 3rem;
    line-height: 1;
}

/* --- Inhaltsblöcke --------------------------------------------
   Titel, Text und Bilder sind bewusst voneinander getrennt.
   Dadurch lassen sich Abstände und Darstellung unabhängig steuern. */
.title-block {
    margin: 0 0 8px;
    padding: 32px 16px 0;
}

.title-block h2,
.title-block h3 {
    margin: 0;
    font-family: 'NewEdge Rounded', sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.title-block h2 {
    font-size: calc(1.325rem + 0.9vw);
}

/* Nur für die Überschrift „Fraunhofer-Institut …" */
.title-block--mehr-abstand {
    padding-top: 2.0rem; /* ca. 64 px über der Überschrift */
    padding-bottom: 1.325rem; /* ca. 64 px unter der Überschrift (+ 8 px margin) */
}

.title-block.title-block--mehr-abstand h2 {
        font-size: 2.5rem; /* ca. 40 px, nach Geschmack anpassen */
    }

/* Abstand zwischen dem ersten und dem zweiten Textblock */
.title-block--mehr-abstand + .text-block {
    padding-bottom: 21px; /* vorher 32px */
    margin-bottom: 0; /* vorher 16px */
}

.title-block h3 {
    font-size: calc(1.3rem + 0.6vw);
}

.text-block {
    margin: 0 0 16px;
    padding: 0 16px 32px;
    font-family: 'NewEdge Light', sans-serif;
    font-size: 1.2rem;
}

.image-block {
    width: 100%;
    margin: 0 0 80px;
    padding: 0;
}

.image-block img {
    display: block;
    width: 100%;
    height: auto;
}

.image-block--spaced-top {
    padding-top: 16px;
}

.hero-image {
    max-height: 800px;
    object-fit: cover;
    object-position: 50% 100%;
}

.image-block--pair {
    padding-top: 32px;
    padding-bottom: 16px;
}

.image-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

.image-block figure {
    margin: 0;
}

.image-block figcaption {
    margin-top: 10px;
    padding: 0 8px;
    font-family: 'NewEdge Light', sans-serif;
    font-size: 1rem;
}

.image-pair figure {
    margin: 0;
    padding: 0;
}

.image-pair img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.image-pair figure > figcaption {
    padding: 0px 8px 0;
    font-family: 'NewEdge Light', sans-serif;
    
}

.press-title {
    margin-bottom: 4px;
}

.text-block.press-intro {
    margin-bottom: 0px;
    padding-bottom: 0;
}

.text-block.press-details {
    margin-top: 0;
    padding-top: 0;
    padding-bottom:0;
}

        /* --- Projektteam --------------------------------------------- */
        .team-block {
            margin: 0 0 16px;
            padding: 0 8px 32px;
            font-family: 'NewEdge Light', sans-serif;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            gap: 8px;
            padding: 8px;
        }

        .team-member {
            display: grid;
            grid-template-columns: 25% 1fr;
            gap: 12px;
            align-items: center;
            padding: 8px;
        }

            .team-member img {
                width: 100%;
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 50%;
            }

        .team-name {
            font-family: 'NewEdge Rounded', sans-serif;
            font-size: 1.2rem;
        }

        .team-role {
            font-size: 1rem;
        }
        /* --- Original Bootstrap container widths ---------------------
   The old page used .container. These breakpoints preserve the
   same text width and therefore the same heading line breaks. */
        @media (min-width: 576px) {
            .site,
            .site-footer-inner {
                max-width: 540px;
            }
        }

        @media (min-width: 768px) {
            .site,
            .site-footer-inner {
                max-width: 720px;
            }
        }

        @media (min-width: 992px) {
            .site,
            .site-footer-inner {
                max-width: 960px;
            }
        }

        @media (min-width: 1200px) {
            .site,
            .site-footer-inner {
                max-width: 1140px;
            }

            .title-block h2 {
                font-size: 2rem;
            }

            .title-block h3 {
                font-size: 1.75rem;
            }
        }

        @media (min-width: 1400px) {
            .site,
            .site-footer-inner {
                max-width: 1320px;
            }
        }
        /* --- Responsive Anpassung ------------------------------------ */
        @media (min-width: 1024px) {
            .site-brand,
            .site-footer a {
                font-size: 5rem;
            }

            .site-brand {
                padding: 12px;
            }
        }

        @media (max-width: 575.98px) {
            .team-grid {
                grid-template-columns: 1fr;
            }

            .image-block--pair .image-pair {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1rem;
            }

                .image-block--pair .image-pair figure {
                    width: 100%;
                    margin: 0;
                }

                .image-block--pair .image-pair img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
        }