/*
Theme Name:   Twenty Twentyfive Child
Template:     twentytwentyfive
*/

/** GLOBALER CONTAINER **/
.page-container {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  padding: 0px;
}

@media (max-width: 1960px) {
  .page-container {
    padding: 0px;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 15px;
  }
}

/** Hintergrund **/ 
body {
  margin: 0;
  padding: 0;
  background-color: white;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100vh;
}

@media (max-width: 1100px) {
  body {
    background-size: 20px 20px; /* kleinere Karos für Mobil */
  }
}

/** NAVIGATION BAR UNTEN **/
.navbar-bottom {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: white;
	border: 1px solid #ccc;
	border-radius: 9999px;
	padding: 0.5rem 1.5rem;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 1rem;
  }
  
  /* Burger Button */
  .burger-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
  }
  
  /* Navigation */
  .bottom-nav {
	display: flex;
	gap: 2rem;
	justify-content: center;
	align-items: center;
  }
  
  .bottom-nav a {
	text-decoration: none;
	color: #333;
	font-weight: 600;
	font-size: 1rem;
	transition: color 0.3s;
  }
  
  .bottom-nav a:hover {
	color: #00bfff;
  }
  
  /* --- Responsive --- */
  @media (max-width: 1100px) {
	.burger-toggle {
	  display: block;
	}
  
	.bottom-nav {
	  display: none;
	  position: absolute;
	  bottom: 60px;
	  left: 50%;
	  transform: translateX(-50%);
	  background: white;
	  flex-direction: column;
	  gap: 1rem;
	  padding: 1rem 2rem;
	  border-radius: 1rem;
	  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	}
  
	.bottom-nav.active {
	  display: flex;
	}
  }
  
/** FOOTER **/
.site-footer {
  padding: 120px;
  text-align: center;
}


/** STARTSEITE **/

h1 {
	display: none;
}

/* Allgemeine Layoutregeln */
  
  body {
	margin: 0;
	font-family: 'Arial', sans-serif;
  }
  
  section {
	padding: 80px 20px;
	max-width: 1200px;
	margin: 0 auto;
  }
  
  /* Textausrichtung */
  .text-left {
	text-align: left;
  }
  
  .text-center {
	text-align: center;
  }
  
  /* Überschriften-Stil */
  .headline {
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: 'Courier New', Courier, monospace;
  }
  
  /* Zentriertes Bild */
  .img-center {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
  }

/** STARTSCREEN **/

  
  .star-collage {
	position: relative;
	width: 100vw;
	height: 100vh;
	max-width: 1600px;
	max-height: 1000px;
	padding: 40px 20px;
	margin: 0 auto;
  }
  
  /* Logo in der Mitte */
  .star-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -50%);
	object-fit: contain;
	z-index: 10;
  }
  
  /* Gemeinsame Basis für alle Sternbilder */
  .star-img {
	position: absolute;
	object-fit: cover;
	z-index: 10;
  }
  
  /* Individuelle Positionen und Größen */
  .star-img-1 {
	top: 18%;
	left: 43%;
	width: 220px;
	height: 300px;
	z-index: 7;
  }
  
  .star-img-2 {
	top: 21%;
	left: 56%;
	width: 380px;
	height: 240px;
	z-index: 5;
  }
  
  .star-img-3 {
	top: 52%;
	left: 64%;
	transform: translateY(-50%);
	width: 245px;
	height: 215px;
	z-index: 6;
  }
  
  .star-img-4 {
	bottom: 32%;
	left: 56%;
	width: 145px;
	height: 265px;
	z-index: 4;
  }
  
  .star-img-5 {
	bottom: 25%;
	left: 48%;
	transform: translateX(-50%);
	width: 290px;
	height: 220px;
	z-index: 3;
  }
  
  .star-img-6 {
	bottom: 30%;
	left: 22%;
	width: 360px;
	height: 190px;
	z-index: 1;
  }
  
  .star-img-7 {
	top: 34%;
	left: 18%;
	width: 180px;
	height: 205px;
	z-index: 3;
  }
  
  .star-img-8 {
	top: 22%;
	left: 28%;
	width: 290px;
	height: 380px;
	z-index: 2;
  }
  
  


  /** NEONBLAU VORSTELLUNG - MEHR ÜBER UNS **/

  .hero-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 40px;
	gap: 40px;
  }
  
  .image-collage {
	position: relative;
	width: 400px;
	height: 600px;
  }
  
  .image-collage img {
	position: absolute;
	object-fit: cover;
  }
  
  /* Feste Positionen und Größen */
  .img1 {
	top: -10px;
	left: 50px;
	width: 240px;
	height: 200px;
	z-index: 4; /* 2. Bild */
  }
  
  .img2 {
	top: 140px;
	left: -20px;
	width: 220px;
	height: 200px;
	z-index: 3; /* 3. Bild */
  }
  
  .img3 {
	top: 160px;
	left: 200px;
	width: 150px;
	height: 220px;
	z-index: 5; /* 1. Bild */
  }
  
  .img4 {
	top: 340px;
	left: 10px;
	width: 190px;
	height: 180px;
	z-index: 2; /* 4. Bild */
  }
  
  .img5 {
	top: 300px;
	left: 150px;
	width: 240px;
	height: 350px;
	z-index: 1; /* 5. Bild */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  .text-content {
	max-width: 500px;
  }
  
  .text-content h1 {
	font-family: 'Courier New', monospace;
	font-size: 2em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: pre-line;
  }
  
  .text-content p {
	margin-top: 20px;
	font-size: 1em;
	line-height: 1.5;
  }
  
  .more-link {
	display: inline-block;
	margin-top: 20px;
	font-family: 'Courier New', monospace;
	font-size: 1em;
	text-decoration: none;
	border-bottom: 1px solid black;
	padding-bottom: 2px;
	transition: all 0.2s ease-in-out;
  }
  
  .more-link:hover {
	color: #007bff;
	border-color: #007bff;
  }

  /** NEONBLAU UPDATES - LINKEDIN **/

  .updates-wrapper {
	padding: 60px 40px;
	font-family: Arial, sans-serif;
	color: #000;
  }
  
  .update-heading {
	font-size: 2em;
	margin-bottom: 30px;
	font-weight: bold;
  }
  
  .posts-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
  }
  
  .post {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	overflow: hidden;
	flex: 1 1 0;
	max-width: 22%; /* Sicherstellen, dass 4 in eine Zeile passen */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease;
  }
  
  .post:hover {
	transform: translateY(-5px);
  }
  
  .post img {
	width: 100%;
	height: 160px;
	object-fit: cover;
  }
  
  .post p {
	padding: 16px;
	font-size: 0.95em;
	line-height: 1.4;
  }
  
  .more-posts {
	display: inline-block;
	margin: 40px auto 0 auto;  /* Abstand oben + automatische Zentrierung */
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	position: relative;
	padding-bottom: 4px;
	text-align: center;
	display: block;             /* wichtig für auto-margin bei block */
	width: fit-content;         /* begrenzt die Breite auf Text */
  }  
  
  .more-posts::after,
  .more-posts::before {
	content: "";
	position: absolute;
	left: 0;
	height: 1px;
	width: 100%;
	background-color: #000;
  }
  
  .more-posts::before {
	bottom: 0;
  }
  
  .more-posts::after {
	bottom: 4px;
  }
  
  /** FÜNF TEAMS - EINE VISION **/

  .card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 30px;
}

@media (min-width: 600px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
  
  /* Gestaltung der Karten */
  .card {
	border: 2px solid black;
	padding: 60px 30px;
	text-align: center;
	font-family: 'Arial', sans-serif;
  }
  
  /* Letzter Textblock unter den Karten */
  .card-grid > div:last-child {
	grid-column: 1 / -1; /* über gesamte Breite */
	text-align: center;
	margin-top: 20px;
	font-style: italic;
	font-size: 1em;
  }
  
  /** ZUKUNFT MUSS MAN SELBER MACHEN **/

  .image-collage-wrapper {
	position: relative;
  }
  
  
  .collage-create-future h2 {
	font-size: 2em;
	margin-bottom: 20px;
	line-height: 1.3;
  }

  @media (max-width: 1440px) {
	.collage-create-future {
	  max-width: 1000px;
	  margin: 0 auto; /* optional: zentriert den Block */
	}
  }


  
  
  /* Gemeinsame Basis-Klassen für Bilder */
  .img-left,
  .img-right {
	position: absolute;
	object-fit: cover;
	z-index: 1;
  }
  
  /* Linke Bilder – feste Positionen & Größen */
  .img-left-1 {
	top: 90px;
	left: 0px;
	width: 220px;
	height: 220px;
  }
  
  .img-left-2 {
	top: 270px;
	left: 0px;
	width: 150px;
	height: 260px;
	z-index: 2;
  }
  
  .img-left-3 {
	top: 510px;
	left: 0px;
	width: 180px;
	height: 200px;
  }
  
  /* Rechte Bilder – feste Positionen & Größen */
  .img-right-1 {
	top: 10px;
	right: 0px;
	width: 420px;
	height: 200px;
  }
  
  .img-right-2 {
	top: 210px;
	right: 0px;
	width: 190px;
	height: 400px;
	z-index: 2;
  }
  
  .img-right-3 {
	top: 500px;
	right: 0px;
	width: 510px;
	height: 205px;
  }
  


  /** ÜBER UNS Seite **/

  .about-us-image-collage-wrapper {
		position: relative;
	  }
	  
	  .about-us-headline {
		max-width: 800px;
	  }

	  .about-us-headline h2 {
		font-size: 2em;
		margin-bottom: 20px;
		line-height: 1.3;
	  }
	
	  @media (max-width: 1440px) {
		.about-us-headline {
		  max-width: 600px;
		  margin: 0 auto; /* optional: zentriert den Block */
		}
	  }

	  /* Gemeinsame Basis-Klassen für Bilder */
	  .about-us-img-left,
	  .about-us-img-right {
		position: absolute;
		object-fit: cover;
		z-index: 1;
	  }
	  
	  /* Linke Bilder – feste Positionen & Größen */
	  .about-us-left-1 {
		top: 0px;
		left: 0px;
		width: 480px;
		height: 330px;
	  }
	  
	  .about-us-left-2 {
		top: 320px;
		left: 0px;
		width: 300px;
		height: 300px;
		z-index: 2;
	  }
	  
	  .about-us-left-3 {
		top: 560px;
		left: 0px;
		width: 270px;
		height: 250px;
		z-index: 5;
	  }

	  /* Zusätzliche linke Bilder - überlappend zur Mitte */
	  .about-us-left-4 {
		top: 300px;
		left: 300px;
		width: 240px;
		height: 200px;
		z-index: 3;
	  }
	  
	  .about-us-left-5 {
		top: 550px;
		left: 250px;
		width: 240px;
		height: 290px;
		z-index: 4;
	  }

	  /* Logo links */
	  .about-us-logo {
		top: 530px;
		left: 240px;
		width: 100px;
		height: 100px;
		z-index: 5;
		object-fit: contain;
	  }
	  
	  /* Rechte Bilder – feste Positionen & Größen */
	  .about-us-right-1 {
		top: -10px;
		right: 0px;
		width: 320px;
		height: 370px;
	  }
	  
	  .about-us-right-2 {
		top: 270px;
		right: 0px;
		width: 370px;
		height: 250px;
		z-index: 2;
	  }
	  
	  .about-us-right-3 {
		top: 470px;
		right: 0px;
		width: 280px;
		height: 330px;
	  }

	  /* Zusätzliche rechte Bilder - überlappend zur Mitte */
	  .about-us-right-4 {
		top: 110px;
		right: 320px;
		width: 180px;
		height: 310px;
		z-index: 3;
	  }
	  
	  .about-us-right-5 {
		top: 490px;
		right: 250px;
		width: 180px;
		height: 280px;
		z-index: 4;
	  }
	  
	  .about-us-right-6 {
		top: 610px;
		right: 380px;
		width: 290px;
		height: 230px;
		z-index: 5;
	  }
	  
  /** ÜBER UNS TEXT ABSCHNITTE **/

  .about-text-sections {
    position: relative;
  }

  /* Abschnitt 1 - Überschrift 1/3 (2/6 links frei, 1/6 rechts frei) */
  .about-section-1 {
    margin-bottom: 80px;
	margin-top: -60px;
  }

  .about-section-1 .section-title {
    width: 33.33%; /* 1/3 der Seite */
    margin-left: 48%; 
    margin-right: 16.67%; /* 1/6 rechts frei */
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
  }

  .about-section-1 .section-content {
    width: 33.33%; /* gleiche Breite wie die Überschrift */
    margin-left: 48%;
  }

  .about-section-1 .section-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.7em;
  }

  /* Abschnitt 2 - Überschrift 2/3 der Seite */
  .about-section-2 {
    margin-bottom: 80px;
    position: relative;
  }

  .about-section-2 .section-title {
    width: 66.67%; /* 2/3 der Seite */
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
  }

  .about-section-2 .section-content {
    width: 33.33%; /* kleinere Breite als die Überschrift */
  }

  .about-section-2 .section-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.7em;
  }

  /* Abschnitt 3 - Überschrift 1/3 rechts, überlappend */
  .about-section-3 {
    position: absolute;
    top: 50%; /* Startet auf der Hälfte von Abschnitt 2 */
    right: 0;
    width: 50%; /* rechte 50% der Seite */
  }

  .about-section-3 .section-title {
    width: 66.67%; /* 1/3 der Seite bezogen auf rechte Hälfte */
    margin-left: auto;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
  }

  .about-section-3 .section-content {
    width: 66.67%; /* gleiche Breite wie die Überschrift */
    margin-left: auto;
  }

  .about-section-3 .section-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.7em;
  }

  /* Responsive Anpassungen */
  @media (max-width: 1200px) {
    .about-section-1 .section-title,
    .about-section-1 .section-content {
      margin-left: 20%;
      width: 60%;
    }

    .about-section-2 .section-title {
      width: 80%;
    }

    .about-section-2 .section-content {
      width: 70%;
    }

    .about-section-3 {
      position: relative;
      top: auto;
      width: 100%;
      margin-top: 60px;
    }

    .about-section-3 .section-title {
      width: 80%;
      margin-left: 0;
    }
  }

  @media (max-width: 768px) {
    .about-text-sections {
      padding: 60px 0;
    }

    .about-section-1 .section-title,
    .about-section-1 .section-content,
    .about-section-2 .section-title,
    .about-section-2 .section-content,
    .about-section-3 .section-title,
    .about-section-3 .section-content {
      width: 100%;
      margin-left: 0;
    }

    .about-section-1 .section-title,
    .about-section-2 .section-title,
    .about-section-3 .section-title {
      font-size: 2em;
    }

    .about-section-3 {
      margin-top: 40px;
    }
  }