/* ----------------- Fonts ----------------- */
@font-face { 
    font-family: PPNeueMontreal-Light; 
    src: url(../fonts/PPNeueMontreal-Light.woff); 
}
@font-face { 
    font-family: PPNeueMontreal-Book; 
    src: url(../fonts/PPNeueMontreal-Book.woff); 
}
@font-face { 
    font-family: PPNeueMontreal-Regular; 
    src: url(../fonts/PPNeueMontreal-Regular.woff); 
}
@font-face { 
    font-family: PPNeueMontreal-Medium; 
    src: url(../fonts/PPNeueMontreal-Medium.woff); 
}
@font-face { 
    font-family: PPMigra-Extralight; 
    src: url(../fonts/PPMigra-Extralight.woff); 
}
@font-face { 
    font-family: PPMigra-ExtralightItalic; 
    src: url(../fonts/PPMigra-ExtralightItalic.woff); 
}

/* ----------------- General ----------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #E2E3DB;
    text-align: center;
    font-weight: lighter;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Makes the stretching of the content over the whole viewport possible */
html, body {
    height: 100%;
    width: 100%;
}

/* Spacing and Positioning Logo to Text Segment */
body {
    padding: 10vh 10vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ----------------- Logo ----------------- */
/* Logo Container */
nav {
    display: flex;
    justify-content: center; /* Logo zentrieren */
    margin-bottom: 3em;     /* min spacing to text block */
}
/* Logo SVG */
body img { 
    width: clamp(100px, 20vw, 300px); /* min, dynamisch, max */
    height: auto; /* proportional bleiben */
}


/* ----------------- Text Segment / Spacing and Position ----------------- */
body main { 
    display: flex; 
    flex-direction: column; 
    gap: clamp(1.5em, 5vh, 6em);
}

/* ----------------- H1 & H2 ----------------- */
/* Spacing and Positioning */
body main section { 
    display: flex; 
    flex-direction: column; 
    gap: 0.6em; 
    /* TO-DO: Gap flexibler, bei kleinen Größen ist sie zu groß */
}

/* Styling */
/* My Name */
h1 {
    font-family: "PPNeueMontreal-Regular", Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 4rem);
    letter-spacing: -0.015em;
}
/* My Roles – Designer … */
h2 {
    font-family: "PPMigra-ExtralightItalic", Times, serif;
    font-size: clamp(1.75rem, 4vw, 4rem);
    line-height: 1.2;
}

/* ----------------- Phrase List ----------------- */
.phrase-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.phrase-list li {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.phrase-list .descriptive {
    font-family: "PPMigra-Extralight", Times, serif;
    text-transform: uppercase;
}
/* Dash */
.phrase-list .dash {
    margin-left: 0.15em;
    margin-right: 0.15em;
    font-family: "PPMigra-ExtralightItalic", Times, serif;
}

/* ----------------- Link ----------------- */
a {
    font-family: PPNeueMontreal-Medium;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: #000;
    text-decoration: none;
    letter-spacing: -0.015em;
}

.link-underline {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.1em;
}

.arrow {
    font-family: PPNeueMontreal-Light;
    padding-right: 0.5em;
}