:root {
  /* Font Family */
  --font-heading: 'Roboto';
  --font-body: 'Inter';

  /* Font Sizes */
  --font-size-h1: 4rem;
  --font-size-h2: 2.074rem;
  --font-size-h3: 1.728rem;
  --font-size-h4: 1.44rem;
  --font-size-h5: 1.2rem;
  --font-size-p: 1rem;
  --font-size-p-small: 0.833rem;
  --font-size-p-xsmall: 0.694rem;

  /* Spacing */
  --spacing-large: 2rem;
  --spacing-medium: 1rem;
  --spacing-small: 0.5rem;
  --section-spacing: clamp(4rem, 7vw, 8rem);
  /* Hinzugefügt */

  /* Border Radius */
  --border-radius: 1rem;

  /* Colors */
  --color-darkest: #0a0908;
  --color-dark: #22333b;
  --color-lightest: #f8f6f2;
  --color-accent: #D3D8E3;
  --color-secondary-accent: #5e503f;
}

.content:nth-of-type(odd) {
  background-color: var(--color-lightest);
}

.content:nth-of-type(even) {
  background-color: var(--color-accent);
}
@font-face {
  font-family: 'Inter';
  src: url('/Font/inter/Inter-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Roboto';
  src: url('/Font/roboto/Roboto-BoldCondensed.ttf') format('truetype');
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
}

h1 {
  font-size: var(--font-size-h1);
  text-align: center;
  margin-bottom: var(--spacing-medium);
  margin-top: var(--spacing-large);
  color: var(--color-darkest);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  line-height: 3.5rem;
}

h2 {
  font-size: var(--font-size-h2);
  text-align: center;
  margin-bottom: var(--spacing-medium);
  margin-top: var(--spacing-large);
  color: var(--color-darkest);
}

h3 {
  font-size: var(--font-size-h3);
  text-align: center;
  margin-bottom: var(--spacing-medium);
  margin-top: var(--spacing-large);
  color: var(--color-darkest);
}

h4 {
  font-size: var(--font-size-h4);
  text-align: center;
  margin-bottom: var(--spacing-medium);
  margin-top: var(--spacing-large);
  color: var(--color-darkest);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  font-size: var(--font-size-p);
  color: var(--color-text);
  background-color: var(--color-lightest);
  line-height: 1.5;
  font-family: var(--font-body);
}

.char {
  transform: translateY(115px);
  transition: transform 0.5s;
}

.container {
  margin: 0 auto;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
  width: 50vw;
  background-color: transparent;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.grid, .card {
  display: flex;
  gap: var(--spacing-medium);
  align-items: center;
  border: 1px solid var(--secondary-accent);
  border-radius: var(--border-radius);
  width: 100%;

}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  flex: 1;
  border-radius: var(--border-radius);
  padding: var(--spacing-medium);
  text-align: center;
  border: 0.25rem solid var(--color-secondary-accent);
  color: var(--color-darkest);
  background-color: var(--color-lightest);
  
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-medium) var(--spacing-large);
  background-color: var(--color-dark);
  color: var(--color-lightest);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-dark);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 4rem; /* Fixed height for the navbar */
  z-index: 1000; /* Ensure the navbar stays above the hero section */
  position: fixed; /* Keep the navbar fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
}

.header nav {
  display: flex;
  gap: var(--spacing-medium);
}

.header nav a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-lightest);
  font-size: var(--font-size-p);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius);
  transition: background-color 0.3s, color 0.3s;
}

.header nav a:hover {
  background-color: var(--color-lightest);
  color: var(--color-darkest);
  transform: scale(1.1);
  transition: transform 0.4s ease;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transform: translatex(+490%);
}

.burger span {
  display: block;
  width: 100%;
  height: 0.25rem;
  background: var(--color-lightest);
  border-radius: 10px;
}

.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  height: 100vh; 
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
  box-sizing: border-box; /* Include borders and padding in width/height calculations */
}

.hero h1 {
  text-align: center;
}

.hero-image {
  width: 300px;
  height: auto;
  border-radius: var(--border-radius);
  margin-left: var(--spacing-large);
}

#about .card {
  text-align: justify;
  flex: 0 1 auto;
  align-self: flex-start;
  height: auto;
}

#education .grid {
  display: flex;
  border: none;
  border-radius: var(--border-radius);
  align-items: stretch;
}

#education .card {
  flex: 1;
  border-radius: var(--border-radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 0.25rem solid var(--color-secondary-accent);

}

#education .card p {
  font-size: var(--font-size-p);
  line-height: 1.5;
  text-align: center;
}

#tools {
  text-align: center;
}

#tools .grid {
  display: flex;
  align-items: center;
  border: none;
}

#tools .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--border-radius);
  text-align: center;
}

#tools .icons-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-large);
  justify-items: center; 
  align-items: center; 
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 100%; 
}

#tools .icons-grid img {
  width: 50px;
  height: 50px;
}

#gallery {
  text-align: center;
}

#gallery .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--border-radius);
  text-align: center;
}

#gallery .grid {
  display: grid;
  gap: var(--spacing-medium);
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  padding: var(--spacing-medium);
  border: 0.25rem solid var(--color-secondary-accent);
  grid-template-columns: repeat(3, 2fr); 
}

#gallery .grid img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#gallery .grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

#contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contact .card {
  text-align: center; 
  box-sizing: border-box; 
  border: 0.25rem solid var(--color-secondary-accent);
}

.contact-icons {
  display: flex;
  gap: var(--spacing-medium); /* Space between the buttons */
  justify-content: space-between; /* Distribute buttons evenly */
  margin-top: var(--spacing-medium);
  width: 100%; /* Ensure the buttons span the full width of the card */
}

.contact-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Make buttons take equal space */
  height: 60px; /* Set a fixed height for the buttons */
  background-color: var(--color-dark); /* Button background color */
  color: var(--color-lightest); /* Button text color */
  text-decoration: none;
  font-size: var(--font-size-p); /* Button text size */
  font-weight: bold;
  border-radius: var(--border-radius); /* Rounded corners */
  transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  text-align: center;
}

.contact-icons a:not(:last-child) {
  margin-right: var(--spacing-medium); /* Add spacing between buttons */
}

.contact-icons a:hover {
  background-color: var(--color-lightest);
  color: var(--color-darkest); /* Change text color on hover */
  transform: scale(1.05); /* Slight zoom effect on hover */
  border: 0.25rem solid var(--color-secondary-accent); /* Add border on hover */
}

.contact-icons a img {
  width: 30px; /* Icon size */
  height: 30px;
  margin-right: var(--spacing-small); /* Space between icon and text */
  filter: brightness(0) invert(1); /* Make the SVG icons white */
  transition: filter 0.3s ease; /* Smooth transition for hover effect */
}

.contact-icons a:hover img {
  filter: brightness(1); /* Restore original color on hover */
}

/* Vollbild-Overlay: Es überdeckt den gesamten Bildschirm und blendet den Hintergrund (Galerie) ab */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none; /* Standardmäßig ausgeblendet */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  background-color: rgba(0, 0, 0, 0.7); /* Abdunkelung */
  backdrop-filter: blur(8px); /* Blurr-Effekt */
  z-index: 2000;

}

.lightbox:not(.hidden) {
  display: flex;
}

/* Modal-Inhalt: Das Modal wird so positioniert, dass das Bild zentral steht */
.lightbox-content {
  position: relative;
  max-width: auto; /* Begrenze die Breite */
  max-height: 80vh; /* Begrenze die Höhe */
  margin: auto;
  display: flex; /* Flexbox für zentrierte Inhalte */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  overflow: hidden; /* Verhindere Überlauf */
}

/* Das Bild: Es wird innerhalb des Modals zentriert und passt sich der maximalen Größe an */
.lightbox-image {
  display: block;
  max-width: auto; /* Bild passt sich der Breite an */
  max-height: 80vh; /* Bild passt sich der Höhe an */
  margin: auto; /* Zentriere das Bild */
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: flex; /* Flexbox für zentrierte Inhalte */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  border-radius: var(--border-radius);
  object-fit: contain; /* Bild wird skaliert, um vollständig sichtbar zu sein */
}

/* Schließ-Kreuz in der oberen rechten Ecke */
.lightbox-close {
  position: absolute;
  top: 0.2rem;
  right: 1rem;
  font-size: var(--font-size-h3);
  color: #fff;
  cursor: pointer;
  z-index: 2100;

  border-radius: var(--border-radius);
  padding: 0.5rem;
  transition: background-color 0.3s ease;
}

/* Navigationspfeile: Sie werden mittig über dem Bild platziert */
.lightbox-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* Damit sie nicht den Klick auf das Bild blockieren */
}

.lightbox-prev,
.lightbox-next {
  pointer-events: all; /* Klicks sollen hier registriert werden */
  background-color: rgba(0, 0, 0, 0.5); /* Hintergrund für bessere Sichtbarkeit */
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  font-size: var(--font-size-p);
  transition: background-color 0.3s ease;
}

.lightbox-prev {
  margin-left: 3%; /* Abstand vom linken Rand */
}

.lightbox-next {
  margin-right: 3%; /* Abstand vom rechten Rand */
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.lightbox-counter {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: var(--font-size-p);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  z-index: 2100;
}

.footer {
  text-align: center;
  padding: var(--spacing-medium) 0;
  margin-top: var(--spacing-large);
  font-size: var(--font-size-p-small);
  background-color: var(--color-lightest);
  color: var(--color-darkest);
}



/* ========================= */
/* Responsive Design         */
/* ========================= */
@media (max-width: 1200) {
  section {
    width: 80vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}


/* Tablet (768px and below) */
@media (max-width: 768px) {
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 90vw;
  }

  content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .hero {
    display: flex; /* Ändere von Grid zu Flexbox */
    flex-direction: column; /* Ordne Bild und Text vertikal an */
    align-items: center; /* Zentriere Bild und Text horizontal */
    justify-content: center; /* Zentriere Bild und Text vertikal */
    text-align: center; /* Zentriere den Text */
  }
  
  .hero-image {
    /* Reduziere den oberen Abstand, um das Bild näher an die Überschrift zu rücken */
    margin-top: 20%;
    max-width: 30vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: var(--spacing-medium); /* Abstand zwischen Bild und Text */
  }
  
  .hero h1 {
    /* Verringerter Abstand zum Bild */
    margin-bottom: 1rem;
    font-size: var(--font-size-h1);
    text-align: center;
    margin-bottom: 10%;
    margin-top: 0; /* Entferne oberen Abstand */
  }

  .grid {
    flex-direction: column;
  }

  #gallery .grid {
    grid-template-columns: repeat(3, 2fr);
  }

  .lightbox {
    -webkit-overflow-scrolling: touch;
  }

  .lightbox-content {
    position: relative;
    max-width: 70vw; /* Begrenze die Breite */
    max-height: 70vh; /* Begrenze die Höhe */
    margin: auto;
  }

  .lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    font-size: var(--font-size-p);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    z-index: 2100;
  }

  .lightbox-image {
    touch-action: pan-y;
    will-change: transform;
  }
  
  .lightbox-content {
    overflow: hidden;
  }

  .lightbox-counter {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: var(--font-size-p);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    z-index: 2100;
  }

  .lightbox-navigation {
    display: none;
  }
  
  .lightbox-content {
    max-width: 100vw;
    max-height: 100vh;
    padding: 20px;
  }

  #tools .icons-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 540px) {

  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90vw;
  }

  .header {
    height: 4rem;
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 4vh);
  }

  .hero-image {
    width: 90vw;
    height: auto;
    margin-top: 35%;
  }

  .hero h1 {
    font-size: var(--font-size-h1);
    text-align: center;
    margin-bottom: 40%;
  }

  .grid {
    flex-direction: column;

  }

  #tools .icons-grid {
    grid-template-columns: repeat(4, 2fr);
  }

  #gallery .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lightbox-content {
    position: relative;
    max-width: 90vw; /* Begrenze die Breite */
    max-height: 90vh; /* Begrenze die Höhe */
    margin: auto;
    justify-content: center;
    align-items: center;
  }

  .lightbox-image {
    display: block;
    max-width: 90vw; /* Bild passt sich der Breite an */
    max-height: 90vh; /* Bild passt sich der Höhe an */
    margin: auto; /* Zentriere das Bild */
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: flex; /* Flexbox für zentrierte Inhalte */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    border-radius: var(--border-radius);
  }

  .header nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .header nav.open {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
    background-color: var(--color-dark);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: var(--spacing-small) 0;
  }

  .header nav.open a {
    padding: var(--spacing-small);
    text-align: center;
  }

  .header nav a:active,
  .header nav a:focus {
    border-radius: var(--border-radius);
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  #contact .card {
    width: calc(100% - 2 * var(--spacing-small));
    margin: 0 var(--spacing-small);;
  }

  .contact-icons {
    flex-direction: column; /* Stack buttons vertically */
    gap: var(--spacing-small); /* Reduce spacing between buttons */

  }

  .contact-icons a {
 /* Remove fixed height */
    width: 100%; /* Make buttons take full width */
    padding: var(--spacing-medium);
  }
}

@media (max-width: 375px) {
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 95vw;
  }

  #tools .icons-grid {
    grid-template-columns: repeat(3, 2fr);
  }

  #gallery .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}