@charset "UTF-8";
/* CSS Document */

/* Mobile-first styles here */

body {
    padding: 20px; /* Creates the 10px frame around the body */
    margin: 0; /* Removes default margin */
    box-sizing: border-box; /* Ensures padding is included in the body's width */
    background-color: #000000; /* Optional: Background color for the frame */
}


/* Frame and Body Styling */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base font size */
html {
    font-size: 16px; /* Set the root font size */
}

body {
    font-size: 1em; /* 1em = 16px based on root font size */
    line-height: 1.5; /* Optional: Adds a bit of space between lines for readability */
    color: #333; /* Set a default text color */
    font-family: "Mallory" /* Set a default font family */
}

/* Headings */
h1 {
    font-size: 2em; /* 32px */
}

h2 {
    font-size: 1.75em; /* 28px */
}

h3 {
    font-size: 1.5em; /* 24px */
}

h4 {
    font-size: 1.25em; /* 20px */
}

h5 {
    font-size: 1.125em; /* 18px */
}

h6 {
    font-size: 1em; /* 16px, same as body text */
}

/* Other text elements */
p {
    margin-bottom: 20px; /* This adds a gap after each paragraph */
    line-height: 1.6; /* Optional: Adjusts the space between lines within the paragraph */
}

li {
    font-size: 1em; /* 16px */
}

small {
    font-size: 0.875em; /* 14px */
}

caption,
figcaption {
    font-size: 0.75em; /* 12px */
}

/* ===================================================
   Font-face for Mallory (All Variations)
   =================================================== */

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Bold'), local('Mallory-Bold'),
url('../fonts/mallory/Mallory-Bold.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Bold.woff') format('woff'),
url('../fonts/mallory/Mallory-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Black'), local('Mallory-Black'),
url('../fonts/mallory/Mallory-Black.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Black.woff') format('woff'),
url('../fonts/mallory/Mallory-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Bold Italic'), local('Mallory-BoldItalic'),
url('../fonts/mallory/Mallory-BoldItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-BoldItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Black Italic'), local('Mallory-BlackItalic'),
url('../fonts/mallory/Mallory-BlackItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-BlackItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Medium'), local('Mallory-Medium'),
url('../fonts/mallory/mallory-medium.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Medium.woff') format('woff'),
url('../fonts/mallory/Mallory-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory Book';
    src: local('Mallory Book'), local('Mallory-Book'),
url('../fonts/mallory/Mallory-Book.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Book.woff') format('woff'),
url('../fonts/mallory/Mallory-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory Book';
    src: local('Mallory Book Italic'), local('Mallory-BookItalic'),
url('../fonts/mallory/Mallory-BookItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-BookItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Light'), local('Mallory-Light'),
url('../fonts/mallory/Mallory-Light.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Light.woff') format('woff'),
url('../fonts/mallory/Mallory-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory XLight';
    src: local('Mallory XLight Italic'), local('Mallory-XLightItalic'),
url('../fonts/mallory/Mallory-XLightItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-XLightItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-XLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory XLight';
    src: local('Mallory XLight'), local('Mallory-XLight'),
url('../fonts/mallory/Mallory-XLight.woff2') format('woff2'),
url('../fonts/mallory/Mallory-XLight.woff') format('woff'),
url('../fonts/mallory/Mallory-XLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Light Italic'), local('Mallory-LightItalic'),
url('../fonts/mallory/Mallory-LightItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-LightItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Medium Italic'), local('Mallory-MediumItalic'),
url('../fonts/mallory/Mallory-MediumItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-MediumItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory Ultra';
    src: local('Mallory Ultra'), local('Mallory-Ultra'),
url('../fonts/mallory/Mallory-Ultra.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Ultra.woff') format('woff'),
url('../fonts/mallory/Mallory-Ultra.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory Ultra';
    src: local('Mallory Ultra Italic'), local('Mallory-UltraItalic'),
url('../fonts/mallory/Mallory-UltraItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-UltraItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-UltraItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Thin'), local('Mallory-Thin'),
url('../fonts/mallory/Mallory-Thin.woff2') format('woff2'),
url('../fonts/mallory/Mallory-Thin.woff') format('woff'),
url('../fonts/mallory/Mallory-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mallory';
    src: local('Mallory Thin Italic'), local('Mallory-ThinItalic'),
url('../fonts/mallory/Mallory-ThinItalic.woff2') format('woff2'),
url('../fonts/mallory/Mallory-ThinItalic.woff') format('woff'),
url('../fonts/mallory/Mallory-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}


.frame {
    padding: 0px; /* 10px frame around the entire page */
    background-color: transparent; /* Optional: Background color for the frame */
    box-sizing: border-box;
	color: #FFFFFF;
	max-width: 100%;
    margin: 0;
    width: 100vw; /* Full viewport width */
    position: relative;
    transition: background-color 0.3s ease; /* Weicher Übergang */
}

.styled-link {
	color: #909090; /* Default text color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make text bold */
    font-family: 'Mallory', sans-serif; /* Apply a beautiful font */
    border-bottom: 2px solid transparent; /* Add an underline that animates on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.styled-link hover{
	border-bottom: 2px solid #909090; /* Add an underline that animates on hover */
}

/* ===================================================
   Header
   =================================================== */


/* Full-Width Header Background Rectangle */
.header-background {
    position: fixed;
    top: 0; /* Align it at the very top */
    left: 0; /* Start from the left edge */
    width: 100vw; /* 100% of the viewport width */
    height: 140px; /* Adjust height to match both rows of the header (logo + menu) */
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition */
	-webkit-transition: background-color 0.3s ease; /* Safari and older mobile browsers */
    z-index: 998; /* Place it behind the header */
}


/* Turn the rectangle black when scrolled */
.header-background.scrolled {
    background-color: #000000;
}


/* Fixed Header Container */
.fixed-header {
    position: fixed;
    top: 20px; /* 20px offset to match the frame padding */
    left: 20px;
    right: 20px;
    z-index: 1000; /* Higher than header-background */
    background-color: transparent;
    padding: 10px 0;
    box-sizing: border-box; /* Include padding within width */
}

/* Adjustments for Scrolling */
.container {
    margin-top: 160px; /* Offset to prevent content from hiding behind fixed header */
}

/* Header Styling */
.header {
    display: grid;
    grid-template-rows: auto auto; /* Two rows */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    margin-bottom: 10px;
    height: auto;
}

/* Logo */
.logo {
    grid-row: 1 / 2; /* Top row */
    grid-column: 1 / 2;
    text-align: left;
    width: 30px;
    height: auto;
}

/* Name */
.name {
    grid-row: 1 / 2; /* Top row */
    grid-column: 2 / 3;
    font-size: 1.4em;
    letter-spacing: 2px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    transform: translateY(-4px); /* Adjust the value for precise alignment */
    margin-right: 20px;
    margin-left: 20px;
}

/* Burger Menu */
.burger {
    grid-row: 1 / 2; /* Top row */
    grid-column: 3 / 4;
    text-align: right;
    width: 30px;
    height: auto;
}

/* Center Menu in Second Row */
.menu {
    grid-row: 2 / 3; /* Second row */
    grid-column: 1 / 4; /* Span all columns */
    display: flex;
    justify-content: space-between; /* Evenly space items across the container */
    align-items: center;
    width: calc(100% - 100px); /* Full width minus 50px padding on each side */
    margin: 20px auto 0 auto; /* Center the menu container */
    text-align: center;
}

.menu a {
    color: white; /* Sets menu text to white */
    text-decoration: none; /* Removes underline */
    font-weight: 400;
    font-size: 1.25em;
}



/* ===================================================
   Slideshow
   =================================================== */

.slideshow {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: black; /* Background to blend with black fade */
}

.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Adjust fade duration */
}

.slideshow-image.active {
    opacity: 1;
    transition: opacity 1.5s ease-in-out; /* Fade duration for active image */
}

/* Slideshow Section */
.slideshow {
    position: relative;
    width: 100vw;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Post Slideshow container */
.post-slideshow-container {
    width: 100%;
	height: auto;
    position: relative;
    margin: 10;
}

/* Hide the images by default */
.postSlides {
	position: relative;
    display: ;
}

/* Next & previous buttons */
.post-prev, .post-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.post-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit of see-through */
.post-prev:hover, .post-next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Fade animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}



/* ===================================================
   Contact Button
   =================================================== */

/* Contact Link and Arrow within Slideshow */
.contact-container {
    position: absolute;
    bottom: 60px; /* 100px from the bottom of the viewport */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
}



.contact-link {
	display: block;
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}



.arrow-down img {
    width: 24px; /* Adjust size as needed */
    height: auto;
    margin-top: 40px;
}



/* ===================================================
   Main
   =================================================== */

/* Content Slogan Styling */
.content-slogan {
    position: absolute;
    bottom: 20px; /* Position it 60px from the bottom or adjust as needed */
    left: 20px;
    text-align: center;
    color: white; /* White text for visibility */
}

.content-slogan h1 {
    font-size: 2em; /* Adjust font size as needed */
	text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}



/* Main Content Container */
.content-container {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add padding if needed */
	margin: 0 auto;
    box-sizing: border-box;
	background-color: #FFFFFF;
	color: #000000;
}

.content-container p {
	font-family: "Swift Neue LT Pro Black Condensed", "Swift Neue LT Pro Black Condensed Italic", "Swift Neue LT Pro Bold", "Swift Neue LT Pro Bold Italic", "Swift Neue LT Pro Book", "Swift Neue LT Pro Book Italic", "Swift Neue LT Pro Italic", "Swift Neue LT Pro Light", "Swift Neue LT Pr";
	text-align: justify-all;
	margin-bottom: 1em;
	line-height: 1.6;
}

/* Black Background Section */
.black-section {
    background-color: black;
    color: white;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Hides overflow to the left/right */
}

/* Black Section Menu for Vertical Alignment */
.black-section-menu {
    display: flex;
    flex-direction: column; /* Ensures rows stack vertically */
    gap: 0px; /* Space between rows */
    width: 100%;
    margin-top: 100px;
    text-transform: uppercase;
}

/* Scrolling Text with Links */
.scrolling-text {
    display: flex;
    gap: 40px; /* Adds space between repeated items */
    animation: scroll-left 15s linear infinite; /* Adjust duration for speed */
    font-size: 4em;
    font-weight: bold;
    white-space: nowrap; /* Prevents line breaks */
}

/* Each link in scrolling text */
.scrolling-text a {
    color: white;
    text-decoration: none;
    display: inline-block;
}

/* Keyframes for Continuous Right-to-Left Scrolling Animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0); /* Start fully visible */
    }
    100% {
        transform: translateX(-50%); /* End at halfway point */
    }
}

/* Heading Styling */
.black-section h1 {
    font-size: 3em;
    font-weight: bold;
    margin: 10px 0;
}


.cta-section {
	padding: 10px; /* Add padding if needed */
	text-align: center;
	margin-top: 60px;
	margin-bottom: 20px;
	color: #FFFFFF;
}

.content-line {
	border: none; /* Remove the default border */
    height: 4px; /* Increase the height to make it thicker */
    background-color: black; /* Set the desired color for the line */
    margin: 20px 0; /* Adjust margin if needed */
}

/* General Content Feed Styling */
.content-feed-colum {
    display: flex;
    flex-direction: column; /* Stack content vertically for mobile */
    align-items: center;
    margin-bottom: 20px;
}

.content-feed {
    width: 100%;
    text-align: left;
    align-content: top;
    margin-top: 10px;
	overflow: hidden;
}

.content-feed-title {
	font-family: "Swift Neue LT Pro Black Condensed", "Swift Neue LT Pro Black Condensed Italic", "Swift Neue LT Pro Bold", "Swift Neue LT Pro Bold Italic", "Swift Neue LT Pro Book", "Swift Neue LT Pro Book Italic", "Swift Neue LT Pro Italic", "Swift Neue LT Pro Light", "Swift Neue LT Pr";
	font-color: #000000;
	margin-bottom: 10px;
	margin-top: 10px;
}

.content-feed h3 {
	color: #909090;
	margin-bottom: 10px;
	margin-top: 10px;
}

.content-feed h4 {
	color: #909090;
	margin-bottom: 10px;
	margin-top: 10px;
}

.content-feed h5 {
	color: #909090;
	font-weight: 300;
	font-size: 1.125em;
	margin-bottom: 10px;
	margin-top: 10px;
}

.content-feed p {
	margin-top: 20px;
}


/* Image Content Styling */
.image-content img {
    width: 100%; /* Image takes full width of the container */
    height: auto;
    margin-top: 10px;
    border-radius: 8px; /* Optional: Rounded corners */
}

/* Social Media Posts Layout */
.social-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adds space between posts */
    justify-content: center; /* Centers the posts */
}

/* Post Container Styling */
.post {
    width: 100%; /* Full width for mobile */
    max-width: 100%; /* Ensures it takes the full container width */
    margin: 10px 0;
    overflow: hidden; /* Ensure content doesn't overflow */
    text-align: center; /* Center the text */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Instagram Embed Styling */
.instagram-media {
    width: 100% !important; /* Full width inside post container */
    max-width: 100% !important; /* Override Instagram's default width */
    height: auto !important; /* Maintain aspect ratio */
    margin: 0 auto;
}

/* Post Text Styling */
.post-text {
    font-size: 14px;
    line-height: 1.4;
    color: #666; /* Slightly gray text */
    max-height: 40px; /* Limit the amount of text shown */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Ensure text doesn't break into multiple lines */
}


.follow-button-container {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.follow-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    color: #000000;
    background-color: #FFFFFF; /* Button color, can be customized */
    text-decoration: none;
	border: 2px solid black; /* Black border around the button */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.follow-button:hover {
    background-color: #909090; /* Darker shade on hover */
}


/* ===================================================
   Posts
   =================================================== */

/* Post Slideshow Container */
.post-slideshow-container {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto;
    text-align: center;
}

/* Individual Slide Styling */
.postSlides {
    display: none; /* Hide all slides by default */
}

.post-slideshow-container .postSlides:first-child {
    display: block; /* Show only the first slide on load */
}

.postSlides img {
    width: 100%; /* Make images responsive to fill container */
    height: auto;
    border-radius: 0px; /* Optional: Add rounded corners */
}

/* Fade Animation for Slides */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* Navigation Buttons for Slideshow */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
	margin-bottom: 20px;
	gap: 100px;
}

.post-prev, .post-next {
    cursor: pointer;
    padding: 12px 24px;
    margin: 0 10px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: #333; /* Dark background for contrast */
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.post-prev:hover, .post-next:hover {
    background-color: #555; /* Lighter shade on hover */
}

/* Content Feed Columns */
.content-feed-colum {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.content-feed {
    width: 100%;
    text-align: left;
    margin-top: 10px;
    overflow: hidden;
}

/* Title and Subheading for Feed */
.content-feed h4 {
    color: #909090;
    margin-bottom: 10px;
    margin-top: 10px;
}

.content-feed h5 {
    color: #909090;
    font-weight: 300;
    font-size: 1.125em;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Feed Description Text */
.content-feed p {
    margin-top: 20px;
    line-height: 1.6;
}

/* Image Content Styling */
.image-content {
    position: relative;
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.image-content img {
    width: 100%; /* Ensure images take full width of container */
    height: auto;
    border-radius: 0px; /* Optional: Rounded corners */
}

/* Custom Horizontal Line for Feed */
.contentnumber-line {
    border: none;
    height: 1px;
    width: 100%;
    background-color: #909090;
    margin-top: 20px;
}


/* ===================================================
   Project Grid
   =================================================== */

.grid-container {
    display: grid;
    gap: 10px;
    max-width: 800px;
    width: 100%;
    
    /* Festlegen von 3 Spalten mit gleichmäßiger Breite */
    grid-template-columns: repeat(1, 1fr);
}

.grid-item {
    position: relative;
    width: 100%;
    overflow: ;
}

.grid-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* Ensures the image container stays square */
    object-fit: cover; /* Keeps the image scaled to fill the container */
    margin: 10px 0; /* Space above and below the image */
}

.grid-item h3{
	text-transform: uppercase;
}

hr {
    border: none;       /* Removes the default border */
    border-top: 2px solid #000; /* Adds a custom border on top */
    width: 25%; /* Adjusts the width of the line */
    margin-top: 0 0;     /* Adds space above and below */
}

.grid-item h3 {
	margin-bottom: -20px;
}


.grid-item h5 {
	margin-bottom: 10px;
}



/* ===================================================
   Footer
   =================================================== */

.footer {
	position: relative;
    height: 20vh;
    background-color: #000000;
	color: #000000;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr; /* Four rows */
    width: calc(100% - 40px); /* Adjust width to account for 20px padding on each side */
    padding: 10 10; 
    align-items: center;
    box-sizing: border-box; /* Ensures padding is included in width */
	margin-bottom: 10px;
    margin: 0 auto; /* Centers footer */
	z-index: 10;
}


/* Social Links Styling (First Row) */
.social-links {
    display: flex;
    justify-content: space-between; /* Evenly space links across the width */
    width: 100%; /* Takes full width of the footer */
    max-width: 100%; /* Prevents links from collapsing */
    font-size: 1.25em;
	font-weight: 400;
    margin-top: 0px;
}

.social-links a {
    color: white;
    text-decoration: none;
}

/* Centered Text Styling (Second Row) */
.centered-text {
    text-transform: uppercase; /* Makes text uppercase */
    text-align: center; /* Centers text horizontally */
    color: #909090; /* Ensures text color is gray */
	font-weight: 300;
    font-size: 0.75em;
    margin: 0;
    width: 100%; /* Takes full width for proper centering */
}

.footer-links {
	font-size: 0.875em;
    display: flex;
    justify-content: flex-start; /* Aligns links to the left initially */
    width: 100%;
    gap: 20px;
    margin-top: 0px;
}

/* Footer Links Styling (Third Row) */
.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-links a:last-child {
    margin-left: auto; /* Pushes the "Contact" link to the right */
}

/* Footer Note Styling (Fourth Row) */
.footer-note {
    font-size: 0.75em;
    color: #FFFFFF;
	margin-bottom: 10px;
}



/* ===================================================
   Media
   =================================================== */


/* Tablet adjustments */
@media (min-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 2fr; /* Two-column layout on tablet */
    }
	/* Tablet layout: Show 3 columns */
    .social-posts {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }

    .social-posts iframe {
        height: 350px; /* Optional: Adjust height for tablet */
    }
	
	.content-feed-colum {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns: text on the left, image on the right */
        gap: 40px; /* Adds space between text and image */
        align-items: start; /* Aligns the content to the top of the grid */
    }

    .content-feed {
        width: auto;
    }

    .image-content img {
        width: 100%; /* Full width of its container */
        height: auto;
    }
	
	.grid-container {
    display: grid;
    gap: 20px;
    max-width: 100vw;
    width: 100%;
    
    /* Festlegen von 3 Spalten mit gleichmäßiger Breite */
    grid-template-columns: repeat(4, 1fr);
	}

	.grid-item {
		background-color: transparent;
		color: #000000;
		text-align: left;
	}

	.grid-item img {
		width: 100%;
		height: auto;
	}
}



/* Desktop adjustments */
@media (min-width: 1024px) {
    /* Assuming .container is the main page layout container */
    .container {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr; /* Three-column layout on desktop */
    }

    /* Set 3 columns for social posts section */
    .social-posts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .social-posts iframe {
        height: 400px;
    }

    /* Three-column layout for the content feed */
    .content-feed-colum {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr; /* Three columns */
        gap: 40px; /* Space between items */
        align-items: start; /* Aligns items to the top of the grid */
    }

    .content-feed {
        width: 100%; /* Ensures content feeds take full width of grid cells */
        margin: 0;
    }

    /* Ensuring images within content feed are responsive */
    .image-content img {
        width: 100%; /* Full width of its container */
        height: auto;
        display: block; /* Prevents image from creating unnecessary space */
    }
}

@media (max-width: 375px){
}

.contentnumber-line {
	border: none; /* Remove the default border */
    height: 1px; /* Increase the height to make it thicker */
	width: 100%;
    background-color: #909090; /* Set the desired color for the line */
    margin: 0px 0 0px 0; /* Adjust margin if needed */
	margin-bottom: 10px;
}

.devision-link {
	color: #000000;
}



.title-separator {
    width: 50px; /* Adjust the width of the line as needed */
    height: 2px; /* Thickness of the line */
    background-color: black; /* Line color */
    margin: 5px 0;
}


.grid-item-image {
	width: 100%;
    height: 0;
    padding-bottom: 75%; /* Adjust this aspect ratio as needed */
    position: relative;
    overflow: hidden;
}
}

.grid-item {
	
}

.contentnumber-line2 {
	border: none; /* Remove the default border */
    height: 4px; /* Increase the height to make it thicker */
    background-color: black; /* Set the desired color for the line */
    margin: 10px 0 10px 0; /* Adjust margin if needed */
	margin-bottom: 10px;
}
}

.post-content-container {
	width: 100vw;
	height: auto;
}







.contentnumber-line-projects {
	border: none;
    height: 1px;
    width: 100%;
    background-color: #909090;
    margin: 10px 0; /* Adjust margin for spacing */
}

.cta-contact {
	font-family: ;
	text-align: center;
}