/* Settings for printing in Browser:
- Als PDF speichern
- Skalierung: 100%
- Ränder: Keine
- Hintergrund drucken angewählt

- Use page-break-spacers to add top/bottom margins on the right places in html
like this: <div class="page-break-spacer"></div>
Might clash with <hr>, so might need to adapt with <hr> (remove them if necessary, or add).
It will not look right due to this until you go to print settings in firefox.
*/

@font-face {
    font-family: "Questrial";
    src: url("fonts/Questrial-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "ClearSans";
    src: url("fonts/ClearSans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

.page-break-spacer {
    page-break-before: always; /* or break-before: page; */
    display: block;
    padding-top: 1.5cm; /* Creates 1.5cm vertical space */
    height: 0; /* Ensure no collapsing occurs */
}

body {
    font-family: "ClearSans", "Arial", serif;
    color: #000;
    margin: 0;
    padding: 0;
    background: #fff;
}

/* Page and container setup */
@page {
    size: A4;
    margin: 0cm;
}

.container {
    width: 100%;
    max-width: 18cm;
    margin: 0 auto;
    background-color: #ffffff;
}

/* Header */
header {
    position: relative;
    height: 180px;
    background-color: #e8eff5;
}

.container-special {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    background-color: #e8eff5;
}

.profile {
    position: absolute;
    bottom: -98px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
}


.profile img {
    width: 121%;
    height: 121%;
    object-fit: cover;
    object-position: -24px calc(50% - 2px);
}

/* Info Section */
.info {
    text-align: center;
    margin-top: 118px; /* Ensures text starts below profile picture */
    margin-bottom: 20px;
}

.info h1 {
    font-family: "Questrial", "Arial", serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 2.4em;
    letter-spacing: 0.175em;
    margin-bottom: 0;
}

.info p {
    font-family: "ClearSans", "Arial", serif;
    font-weight: 400;
    font-size: 0.9em;
    color: #a4a4a4;
    margin: 0;
    letter-spacing: 0.1em;
}

/* Contact Info Styling*/
.contact-info {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    font-weight: 400;
    font-size: 0.9em;
    text-align: center;
}

.contact-labels, .contact-values {
    flex-direction: column;
}

.contact-labels p, .contact-values p {
    margin: 0px;
    color: #000000;
    letter-spacing: normal;
}

.contact-labels p {
    text-align: justify;
    margin-right: 15px;
    margin-left: 125px;
}

.contact-values p {
    text-align: justify;
}

/* Main Content */
main {
    margin-top: 20px;
}

hr {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
}

section h2 {
    font-family: "ClearSans", "Arial", sans-serif;
    font-size: 1.5em;
    color: #a4a4a4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 400;
    margin: 0;
    margin-bottom: 15px;
    position: relative;
}

/* Section Content */
.entry {
    display: flex;
    margin-bottom: 20px;
    align-items: baseline;
}

.left {
    width: 30%;
    box-sizing: border-box;
    font-family: "ClearSans", "Arial", serif;
}

.right {
    width: 70%;
    box-sizing: border-box;
    text-align: justify;
    padding-left: 66px;
}

.dates {
    font-size: 0.89em;
    font-weight: bold;
    margin: 0;
}

.institution {
    font-size: 1em;
    font-weight: bold;
    margin: 0px 0;
}

.details {
    font-size: 0.9em;
    margin: 0px 0 0px;
}

ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0px 0;
    font-size: 0.9em;
}

/* Skills (IT-Kenntnisse, Sprachen) */
.skills .skill-row {
    display: flex;
    margin-bottom: 10px;
    align-items: baseline;
}

.skill-left {
    width: 30%;
    font-weight: bold;
    font-size: 0.9em;
}

.skill-right {
    width: 70%;
    font-size: 0.9em;
    padding-left: 94px;
}

.skill-line {
    display: flex;
    align-items: baseline;
    position: relative;
}

.skill-line span {
    display: inline-block;
}

.skill-line .dots {
    flex: 1;
    border-bottom: 2px dotted #000;
    margin: 0 5px;
}

.skill-line .level {
    font-weight: 400;
}

.references-container {
    display: grid;
    grid-template-columns: 210px auto auto auto;
    column-gap: 61px;
}

/* Style reference*/
.reference-item {
    text-align: justify;
}

.reference-item .institution {
    font-weight: bold;
}

.reference-item .details {
    margin-bottom: 5px;
    font-size: 0.9em;
}

.reference-item ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    font-size: 0.9em;
}

#cookie-notice {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(232, 239, 245, 0.9);
    border-top: 1px solid #ccc;
    padding: 10px; /* Reduced padding for smaller screens */
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 2; /* Ensures it stays above everything */
    box-sizing: border-box; /* Ensures padding is included in width */
}

#cookie-notice button {
    margin-left: 15px;
    padding: 7px 15px;
    background-color: #3f88d7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Print Styles */
@media print {
    body {
        background-color: #ffffff;
        -webkit-print-color-adjust: exact;
        margin: 0;
        padding: 0;
    }
    .container {
        margin-left: 1.5cm;
        margin-right: 1.5cm; 
    }

    .container-special {
        margin-left: 1.5cm;
        margin-right: 1.5cm;
    }

    /*@page:first {
        size: A4;
        /*margin: 0cm 1.5cm 1.5cm 1.5cm; /* No top margin on the first page
    }*/
    /*@page {
        size: A4;
        /*margin: 1.5cm; /* Top, Right, Bottom, Left
    }*/
}