/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 80px; /* Platz für fixierte Navigation */
  margin: 0;
  padding: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto; /* genau eine vertikale Scroll-Leiste */
}

body { 
  margin: 0;
  padding: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto; /* genau eine vertikale Scroll-Leiste */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 300;
}

/* Ensure each section snaps properly */
.section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Variables */
:root {
  --gray-1: #f6f6f6;
  --gray-2: #e9e9e9;
  --gray-3: #dcdcdc;
  --color-text: #222222;
  --font-title: 'Zora', system-ui, -apple-system, sans-serif;
}

/* Layout */
.page {
  height: auto;
  overflow: visible; /* keine eigenen Scroll-Leisten */
  padding-top: 80px; /* Platz für fixierte Navigation */
}

.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible; /* keine eigenen Scroll-Leisten */
}

/* Sections alle in weiß wie die Navbar */
.section {
  background: white;
}

.section-title {
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-weight: 200; /* Extra Light */
  font-size: 42px;
  margin: 0 auto;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}

/* Sicherstellen, dass alle Überschriften Sora Extra Light verwenden */
h1.section-title,
h2.section-title,
h3.section-title {
  font-family: 'Sora', system-ui, -apple-system, sans-serif !important;
  font-weight: 200 !important; /* Extra Light */
}

/* Projects Section */
.projects {
  align-items: flex-start;
  padding: 80px 60px;
  background: white;
  min-height: 100vh;
  overflow: visible; /* keine eigenen Scroll-Leisten */
  position: relative;
}

.projects .section-title {
  text-align: left;
  padding: 0;
  margin: 0 0 40px 0;
  font-weight: 200;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  margin-top: 0;
}

.about {
  align-items: flex-start !important;
  justify-content: center !important; /* Vertikal zentrieren */
  padding: 80px 60px; /* Gleiche Paddings wie .projects */
  background: #fff; 
}

.about .section-title {
  text-align: left !important;
  margin-left: 0 !important; /* Entfernt die Einrückung */
  margin-top: 0 !important; /* Gleiche Höhe wie "Meine Projekte" */
  margin-bottom: 40px !important; /* Gleicher Abstand wie "Meine Projekte" zu den Boxen */
  align-self: flex-start !important;
  padding-left: 0 !important; /* Stellt sicher, dass keine zusätzliche Einrückung vorhanden ist */
  font-weight: 200;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
}

.about__text .section-title {
  margin-bottom: 20px !important;
  transition: transform 0.3s ease;
}

/* Bounce Animation für "Hi, I'm Ismael" */
@keyframes bounceTitle {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.about__text .section-title.bounce {
  animation: bounceTitle 1s ease;
}

/* Kontakt Section */
#kontakt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 80px) !important;
  padding: 200px 60px 0 60px; /* Mehr Padding oben für bessere Zentrierung */
  padding-bottom: 0;
  position: relative; /* Für Footer-Positionierung */
}

#kontakt .section-title {
  font-weight: 200;
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
}

/* Hero Section - Maximum specificity */
section#start {
  position: relative; /* Für absolute Positionierung der Staubpartikel */
  overflow: visible; /* Mobile: Partikel können außerhalb sichtbar sein */
}

/* Desktop: Partikel nur innerhalb Hero-Section */
@media (min-width: 769px) {
  section#start {
    overflow: hidden; /* Verhindert, dass Partikel außerhalb sichtbar sind */
  }
}

section#start h1.section-title,
.section#start h1.section-title,
main .section#start h1.section-title {
  font-weight: 200 !important;
  font-family: 'Sora', system-ui, -apple-system, sans-serif !important;
  text-align: center !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  line-height: 1.2 !important;
  position: relative; /* Über den Partikeln */
  z-index: 1;
}

@media (max-width: 768px) {
  section#start h1.section-title,
  .section#start h1.section-title,
  main .section#start h1.section-title {
    font-size: 48px !important; /* Etwas größer auf Mobile */
    margin-top: -20px !important; /* Ein Stück weiter nach oben */
  }
}

/* Staubpartikel Animation */
.dust-particle {
  position: absolute;
  border-radius: 0; /* Striche haben keine abgerundeten Ecken */
  pointer-events: none; /* Keine Interaktion */
  z-index: 0;
  will-change: transform, opacity, left, top; /* Optimierung für Animation */
  transform-origin: left center; /* Rotation um linken Mittelpunkt */
}

/* Animation wird per JavaScript inline gesetzt */

/* Layout for the gray box and text */
.about__intro { 
  display: grid; 
  grid-template-columns: 1fr 1.3fr; /* Left box smaller, text area larger */
  gap: 60px; 
  align-items: center; /* Centers both vertically */
  margin-left: 0; /* Stellt sicher, dass der Wrapper keine zusätzliche Einrückung hinzufügt */
  margin-top: 0; /* Kein zusätzlicher Abstand, da margin-bottom der Überschrift bereits 40px ist */
  width: 100%; /* Volle Breite nutzen */
}

/* The gray placeholder box */
.about__media {
  background: #d9d9d9;           /* neutral gray */
  border-radius: 12px;           /* soft corners */
  height: auto;                   /* Automatische Höhe basierend auf Aspect-Ratio */
  aspect-ratio: 820 / 858;       /* Portrait-Bild Verhältnis (820x858) */
  width: 100%;                    /* nimmt die volle Breite der Grid-Zelle ein */
  max-width: 600px;              /* Maximale Breite */
  overflow: hidden;               /* Verhindert, dass Bilder über die abgerundeten Ecken hinausragen */
  position: relative;
  align-self: start;             /* Aligniert oben, wie Projekt-Boxen */
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* Bild füllt die Box aus, behält aber das Seitenverhältnis */
  object-position: center;       /* Bild zentrieren */
  display: block;
}

/* Text content styles */
.about__text h2.section-title {
  font-family: "Sora", sans-serif !important;
  font-size: 56px;
  font-weight: 300; /* Light */
  color: #222;
  margin: 0 0 20px 0;
  margin-top: -20px !important; /* Weiter nach oben rücken */
  line-height: normal;
}

.about__text h3 {
  font-family: "Sora", sans-serif !important;
  font-size: 18px;
  font-weight: 300; /* Light */
  color: #222;
  margin: 0 0 10px 0;
}

.about__text p {
  font-family: "Inter", sans-serif !important;
  font-size: 16px;
  font-weight: 300; /* Inter Light */
  color: #222;
  line-height: 1.6;
  margin-bottom: 14px;
}

.about__contact a {
  color: #9000FF; /* accent color */
  text-decoration: none;
  font-weight: 400; /* Inter Regular */
  font-family: "Inter", sans-serif !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.about__contact a .arrow {
  font-size: 24px;
  font-weight: 600;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
  transition: transform 0.2s ease;
}

.about__contact a:hover .arrow {
  transform: translateX(8px);
}

.about__contact a:hover {
  text-decoration: none;
}

/* Skills Section */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-top: 80px; /* spacing from the text area */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.skill-category {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 40px;
  height: 248px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0;
}

.skill-category h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 30px;
  color: black;
  margin-top: 22px;
  margin-bottom: 25px;
}

.skill-category:last-child h3 {
  letter-spacing: -1px;
}

.skill-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
  align-items: center;
  justify-items: stretch;
  width: 100%;
  flex: 1;
}

.skill-tag {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 14px;
  color: black;
  padding: 12px 24px;
  border: 1px solid black;
  border-radius: 50px;
  background-color: white;
  transition: transform 0.3s ease;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  transform-origin: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.skill-tag:hover {
  transform: scale(1.08);
}

.skill-text {
  display: inline-block;
  white-space: nowrap;
}

.skill-icon {
  display: none;
}

.skill-icon-logo {
  display: none;
}

/* Kontakt Section */
.contact-description {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  max-width: 650px;
  margin: 0 auto 60px;
  line-height: 1.6;
  text-align: center;
}

.contact-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid black;
  border-radius: 100px;
  transition: all 0.3s ease, transform 0.3s ease;
  min-width: 200px;
  text-align: center;
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.contact-btn .material-symbols-outlined {
  font-size: 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.contact-btn.primary {
  color: #9000ff;
  border-color: #9000ff;
}

.contact-btn:hover {
  transform: scale(1.05);
  background-color: transparent;
  color: #9000ff;
  border-color: #9000ff;
}

.contact-btn.primary:hover {
  transform: scale(1.05);
  background-color: transparent;
  color: #9000ff;
  border-color: #9000ff;
}

/* Ripple-Effekt für Kontakt-Buttons */
.contact-btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Footer */
.footer {
  margin-top: auto;
  padding: 0 0 40px 0;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

/* Linie über dem Footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  right: 60px;
  height: 0.5px;
  background: #d0d0d0; /* Helles Grau */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 80px 0 80px;
  box-sizing: border-box;
}

.copyright {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 18px;
  color: black;
  margin: 0;
}

.impressum {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 18px;
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}

.impressum:hover {
  color: #9000ff;
}

/* Responsive: stack on small screens */
@media (max-width: 1024px) {
  .about__intro { 
    grid-template-columns: 1fr; /* Stack vertically on tablet/mobile */
    align-items: start; /* Stacks naturally on mobile */
    gap: 40px;
    margin-top: 16px; /* slightly smaller on smaller screens */
  }
  .about__media { 
    aspect-ratio: 16 / 10;
    min-height: 280px;      /* etwas kleiner für mobile */
  }
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .skill-tags {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .skill-tags { 
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
  justify-content: start;
  margin-top: 10px; /* Sehr geringer Abstand zur Überschrift */
}

/* Colosseum-Karte spannt über beide Spalten */
.project-full-width {
  grid-column: 1 / -1; /* Spannt über beide Spalten */
}

.project-full-width .project-placeholder {
  aspect-ratio: 2 / 1; /* Doppelt so breit wie hoch (2:1 Format) */
}

.project-link-wrapper {
  display: block;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.project-placeholder {
  background: #d9d9d9;
  /* 1:1 Verhältnis – entspricht z.B. 800x800px skaliert */
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0; /* Keine Zentrierung, links aligniert */
  overflow: hidden; /* Verhindert, dass Bilder über die abgerundeten Ecken hinausragen */
  position: relative;
}

.project-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
  opacity: 1;
}

/* Nur das Bild zoomen beim Hover, Box bleibt gleich groß */
.project:hover .project-placeholder img {
  transform: scale(1.1);
}

.project {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Links ausrichten statt zentrieren */
  text-align: left;
  width: 100%; /* Volle Breite für korrekte Ausrichtung */
}

.project-meta {
  margin-top: 20px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #555;
  margin-bottom: 2px; /* reduced spacing below 'Fach' */
}

.project-title {
  font-family: "Sora", sans-serif;
  font-size: 24px;
  font-weight: 300; /* Light */
  color: #222;
  margin-top: 0; /* ensures minimal gap */
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Clickable title link with arrow */
.project-link {
  font-family: "Sora", sans-serif;
  font-size: 24px;
  font-weight: 300; /* Light */
  color: #222;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 160ms ease;
}

/* Material icon (thin) */
.project-link .arrow {
  font-family: 'Material Symbols Outlined';
  font-variation-settings:
    'FILL' 0,
    'wght' 200, /* thin arrow */
    'GRAD' 0,
    'opsz' 24;
  font-size: 32px;
  line-height: 1;
  color: #222;
  width: 32px;
  height: 32px;
  transform: translateY(1px);
  transition: color 160ms ease, transform 160ms ease;
}

/* Hover / active / keyboard focus → accent color */
.project-link:hover,
.project-link:active,
.project-link:focus-visible {
  color: #9000FF;
  outline: none;
}

/* Pfeil springt nach vorne, wenn man über der Box hovert */
.project:hover .arrow {
  transform: translateY(1px) translateX(10px);
}

/* Pfeil wird blau UND springt nach vorne, wenn man direkt über dem Titel hovert */
.project-link:hover .arrow,
.project-link:active .arrow,
.project-link:focus-visible .arrow {
  color: #9000FF;
  transform: translateY(1px) translateX(10px);
}

/* Navigation */
.navbar {
  position: fixed;
  top: 20px; /* Abstand vom oberen Rand */
  left: 50%;
  transform: translateX(-50%); /* Zentrieren */
  width: calc(100% - 320px); /* Volle Breite minus Seitenabstände */
  max-width: 1000px; /* Maximale Breite für größere Bildschirme */
  background: rgba(255, 255, 255, 0.15); /* Mehr Transparenz - verstärkt */
  backdrop-filter: blur(10px) saturate(180%); /* Weniger verschwommen - reduzierter Blur */
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari-Kompatibilität */
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 40px;
  border-radius: 40px; /* Abgerundete Ecken */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}


/* Brand styles removed since they're now handled by .navbar a */

/* Desktop: Burger-Button verstecken */
.nav-toggle {
  display: none;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Navigation Links */
.navbar a {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 200; /* Extra Light */
  color: #222; /* Schwarz im Normalzustand */
  text-decoration: none !important;
  display: inline-block;
  line-height: 1.2;
  padding: .25rem .5rem;
  transition: font-variation-settings 120ms ease, color 120ms ease; /* Transition auch für Farbe */
  font-size: 16px; /* Fixe Schriftgröße */
}

/* Active (clicked) = Akzentfarbe */
.navbar a.active, .navbar a.is-active {
  font-variation-settings: "wght" 200; /* Light bleiben */
  color: #9000FF; /* Akzentfarbe wenn aktiv */
  text-decoration: none !important;
}

/* Hover = Akzentfarbe */
.navbar a:hover,
.navbar a:focus-visible {
  font-variation-settings: "wght" 200; /* Light bleiben */
  color: #9000FF; /* Akzentfarbe beim Hover */
  text-decoration: none !important;
  outline: none;
}

/* Fallback for static fonts */
@supports not (font-variation-settings: normal) {
  .navbar a { font-weight: 200; }
  .navbar a.is-active,
  .navbar a:hover,
  .navbar a:focus-visible { font-weight: 300; }
}

/* Responsive Design */
/* Medium screens (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .navbar {
    width: calc(100% - 160px);
    padding: 20px 50px;
  }
  
  .projects,
  .about {
    padding: 70px 50px;
  }
  
  .project-grid {
    gap: 25px;
  }
  
  .about__intro {
    gap: 50px;
  }
  
  .about__skills {
    gap: 50px;
  }
}

/* Smaller screens (max-width: 1200px) - only when not a large monitor */
@media (max-width: 1200px) {
  .navbar {
    width: calc(100% - 80px);
    padding: 20px 40px;
  }
  
  .projects {
    padding: 60px 40px;
  }
  
  .about {
    padding: 60px 40px;
  }
  
  .project-grid {
    gap: 20px;
  }
  
  .about__intro {
    gap: 40px;
  }
  
  .about__skills {
    gap: 40px;
  }
  
  /* Entfernt - wird durch Mobile-Styles in @media (max-width: 768px) überschrieben */
  /* .footer-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 0 40px;
  } */
}

/* Entfernt - wird durch Mobile-Styles weiter unten überschrieben */
/* @media (max-width: 768px) {
  .footer-content {
    padding: 0 20px;
  }
} */

@media (max-width: 768px) {
  /* Mobile Navbar - Burger Menu */
  .navbar {
    top: 10px !important; /* Weniger Abstand oben auf mobilen Geräten */
    width: calc(100% - 40px) !important; /* Kleinere Seitenabstände */
    padding: 12px 20px !important; /* Kompakteres Padding */
    flex-direction: row !important; /* Horizontal: Brand links, Burger rechts */
    justify-content: space-between !important; /* Brand links, Burger rechts */
    align-items: center !important; /* Vertikale Zentrierung - beide auf gleicher Höhe */
    gap: 0 !important; /* Kein Gap zwischen Brand und Burger */
    border-radius: 999px !important; /* Perfekte Pill-Form */
  }
  
  /* Mobile: Brand links positionieren */
  .navbar .brand {
    display: inline-block !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important; /* Verhindert Schrumpfen */
    align-self: center !important; /* Vertikal zentriert */
    order: 1; /* Erste Position im Flex-Container */
  }
  
  /* Mobile: Burger Button anzeigen - rechts positioniert */
  .nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    width: 44px !important; /* Touch-Ziel */
    height: 44px !important; /* Touch-Ziel */
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
    margin: 0 !important;
    flex-shrink: 0 !important; /* Verhindert Schrumpfen */
    align-self: center !important; /* Vertikal zentriert - auf gleicher Höhe wie Brand */
    order: 3; /* Letzte Position im Flex-Container */
  }
  
  /* Mobile: Nav-Links aus Flex-Flow entfernen wenn versteckt */
  .navbar .nav-links {
    order: 2; /* Zwischen Brand und Burger */
  }
  
  .nav-toggle:hover,
  .nav-toggle:focus {
    background-color: rgba(0, 0, 0, 0.05);
    outline: none;
  }
  
  .nav-toggle .material-symbols-outlined {
    font-size: 24px;
    color: #222;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  
  /* Mobile: Desktop-Links im Header verstecken */
  .navbar .nav-links {
    display: none; /* Standard: versteckt - aus Flex-Flow entfernt */
    position: absolute;
    top: calc(100% + 10px); /* Direkt unter der Navbar */
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 10px 0;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    z-index: 1001;
    width: 100%; /* Volle Breite für Dropdown */
  }
  
  /* Mobile: Menü öffnen - muss nach der display: none Regel kommen */
  .navbar.is-open .nav-links {
    display: flex !important; /* Überschreibt display: none wenn Menü geöffnet */
  }
  
  /* Mobile: Nav-Links Styling */
  .navbar .nav-links li {
    margin: 0;
    padding: 0;
  }
  
  .navbar .nav-links a {
    display: block;
    padding: 14px 20px; /* Gute Touch-Ziele (~44px Höhe) */
    font-size: 16px;
    line-height: 1.2;
    color: #222;
    text-decoration: none;
    transition: color 0.2s ease; /* Nur Farb-Transition, kein Hintergrund */
    border-radius: 0;
    background-color: transparent; /* Kein Hintergrund */
  }
  
  .navbar .nav-links a:hover,
  .navbar .nav-links a:focus {
    background-color: transparent; /* Kein Hintergrund */
    color: #9000FF;
    outline: none;
  }
  
  .navbar .nav-links a.active,
  .navbar .nav-links a.is-active {
    color: #9000FF;
    background-color: transparent; /* Kein Hintergrund */
  }
  
  
  .section-title {
    font-size: 32px;
    font-family: 'Sora', system-ui, -apple-system, sans-serif;
    font-weight: 200; /* Extra Light */
  }
  
  /* Mobile Hero Headline - Mobile only */
  section#start h1.section-title,
  .section#start h1.section-title,
  main .section#start h1.section-title {
    font-size: clamp(32px, 8vw, 42px) !important; /* Responsive Font-Size mit clamp() */
    line-height: 1.1 !important; /* Engerer Line-Height für bessere Lesbarkeit */
    max-width: 18ch !important; /* Textbreite begrenzen für natürliche Umbrüche */
    padding: 0 20px !important; /* Horizontales Padding */
  }
  
  /* Mobile Hero Section Container - Padding */
  section#start.section {
    padding-inline: 20px !important; /* Horizontales Padding für den Container */
  }
  
  .projects {
    padding: 40px 20px;
    margin-top: 100px; /* Größerer Abstand zwischen Sektion 1 und Sektion 2 auf Mobile */
  }
  
  .about {
    padding: 40px 20px;
  }
  
  .project-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .about__intro {
    gap: 30px;
  }
  
  .about__skills {
    gap: 30px;
  }
  
  /* Mobile: Skill Cards - Inhalt anpassen */
  .skill-category {
    padding: 30px 20px !important; /* Kompakteres Padding auf Mobile */
    height: auto !important; /* Automatische Höhe statt fester Höhe */
    min-height: 200px; /* Mindesthöhe für bessere Proportionen */
  }
  
  /* Mobile: Skill Cards - Inhalt anpassen */
  .skill-category h3 {
    font-size: 20px !important; /* Kleinere Überschrift auf Mobile */
    margin-top: 0 !important; /* Weniger Abstand oben */
    margin-bottom: 16px !important; /* Angepasster Abstand zu Tags */
    font-family: 'Sora', sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
  }
  
  .skill-tags {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 Spalten auf Mobile statt 3 */
    gap: 8px 10px !important; /* Kompaktere Abstände */
  }
  
  .skill-tag {
    font-size: 14px !important; /* Kleinere Schrift auf Mobile */
    padding: 10px 16px !important; /* Kompakteres Padding */
    font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
  }
  
  /* Mobile: Footer - wie Desktop strukturiert */
  .footer {
    margin-top: auto !important; /* Wie Desktop */
    padding: 0 0 40px 0 !important; /* Wie Desktop */
    width: 100% !important;
    margin-bottom: 0 !important;
    position: relative !important;
  }
  
  /* Mobile: Footer-Linie - gleiche Breite wie Navbar */
  .footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20px !important; /* Gleiche Seitenabstände wie Navbar (20px) */
    right: 20px !important; /* Gleiche Seitenabstände wie Navbar (20px) */
    height: 0.5px !important;
    background: #d0d0d0 !important; /* Wie Desktop */
  }
  
  /* Mobile: Footer-Content - mit Linie ausgerichtet */
  .footer-content {
    display: flex !important;
    flex-direction: row !important; /* Horizontal wie Desktop, nicht vertikal */
    justify-content: space-between !important; /* Copyright links, Impressum rechts */
    align-items: center !important;
    width: 100% !important;
    padding: 24px 20px 0 20px !important; /* Padding links/rechts 20px wie Linie */
    box-sizing: border-box !important;
    gap: 20px !important; /* Größerer Abstand zwischen Copyright und Impressum */
    text-align: left !important; /* Links ausgerichtet wie Desktop */
  }
  
  /* Mobile: Footer-Text - kleinere Schrift für größere Abstände */
  .copyright,
  .impressum {
    font-size: 11px !important; /* Noch kleinere Schrift, damit alles in eine Zeile passt */
    font-family: 'Sora', sans-serif !important;
    font-weight: 300 !important; /* Light */
    margin: 0 !important; /* Keine zusätzlichen Margins */
    white-space: nowrap !important; /* Verhindert Zeilenumbruch */
  }
  
  /* Mobile: Sicherstellen dass Copyright und Impressum nebeneinander bleiben */
  .copyright {
    text-align: left !important;
  }
  
  .impressum {
    text-align: right !important;
  }
  
  /* Mobile: Größere Abstände im Footer */
  .footer-content {
    padding: 24px 20px 0 20px !important; /* Mehr Abstand oben für größere visuelle Abstände */
    gap: 20px !important; /* Größerer Abstand zwischen Copyright und Impressum */
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 28px;
    font-family: 'Sora', system-ui, -apple-system, sans-serif;
    font-weight: 200; /* Extra Light */
  }
  
  .navbar a {
    font-size: 14px;
  }
  
  .project-link {
    font-size: 20px;
  }
  
  .project-meta {
    font-size: 14px;
  }
  
  /* Footer bleibt wie in @media (max-width: 768px) - horizontal */
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 20px 0 20px !important;
    gap: 0 !important;
    text-align: left !important;
  }
  
  .footer::before {
    left: 20px !important;
    right: 20px !important;
  }
}

/* Project Detail Page Styles */
.project-page {
  padding: 100px 60px 40px 60px; /* Mehr Abstand oben für Navbar, weniger unten */
  max-width: 1728px;
  margin: 0 auto;
  scroll-snap-type: none;
  display: flex;                 /* Ermöglicht, den Footer nach unten zu drücken */
  flex-direction: column;
  min-height: calc(100vh - 80px); /* Volle Höhe minus Navbar */
}

html.project-page-active {
  scroll-snap-type: none;
}

.back-link-container {
  margin-bottom: 20px; /* Reduziert, damit die Box näher zum Link rückt */
  margin-top: 5px; /* Sehr nah an die horizontale Linie unter dem Nav-Menü, mit minimalem Abstand */
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400; /* Regular */
  line-height: 1.2;
  color: #222;
  text-decoration: none;
  transition: color 160ms ease;
}

.back-link:hover,
.back-link:active,
.back-link:focus-visible {
  color: #9000FF;
  outline: none;
}

.back-arrow {
  font-family: 'Material Symbols Outlined';
  font-variation-settings:
    'FILL' 0,
    'wght' 200, /* thin arrow */
    'GRAD' 0,
    'opsz' 24;
  font-size: 24px;
  line-height: 1;
  color: #222;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0px);
  transition: color 160ms ease, transform 160ms ease;
}

/* Pfeil springt nach vorne (von der Schrift weg, nach links) beim Hover */
.back-link:hover .back-arrow,
.back-link:active .back-arrow,
.back-link:focus-visible .back-arrow {
  color: #9000FF;
  transform: translateY(0px) translateX(-10px); /* Nach links, von der Schrift weg */
}

.project-hero {
  margin-bottom: 20px; /* Größerer Abstand zwischen Box und Metadaten */
}

.project-hero-image {
  /* Basisbreite in Figma: 1920px, skaliert responsiv */
  width: 1920px;
  max-width: 100%;
  max-height: calc(100vh - 100px); /* Sehr große Skalierung wie im Screenshot: 100vh - Navigation (80px) - minimales Padding (20px) */
  height: auto; /* Ermöglicht proportionale Skalierung */
  /* 16:9 Verhältnis – entspricht 1920x1080px */
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  border-radius: 40px;
  overflow: hidden; /* Verhindert, dass das Bild über die abgerundeten Ecken hinausragt */
  display: block;
  margin: 0; /* Links ausgerichtet, um mit Metadaten übereinzustimmen */
}

.project-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.project-hero-image img.loaded {
  opacity: 1;
}

.project-metadata {
  display: flex;
  gap: 50px; /* Weiter reduzierter Abstand zwischen Fach, Team und Topic */
  margin-bottom: 60px; /* Reduziert, damit Projekttitel näher an die Box rückt */
  margin-top: 0; /* Abstand wird durch .project-hero margin-bottom kontrolliert */
  margin-left: 20px; /* Etwas nach rechts gerückt */
  align-items: baseline;
}

.metadata-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.metadata-label {
  font-family: "Inter", sans-serif;
  font-weight: 400; /* Inter Regular */
  font-size: 16px;
  color: black;
  margin: 0;
  white-space: nowrap;
}

.metadata-value {
  font-family: "Inter", sans-serif;
  font-weight: 300; /* Inter Light */
  font-size: 16px;
  color: black;
  margin: 0;
}

.project-detail-title {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light statt Extra Light (200) */
  font-size: 56px;
  color: black;
  margin: 0 0 20px 0; /* Reduziert, damit Text näher an den Titel rückt */
}

.project-description {
  margin-bottom: 100px; /* Reduzierter Abstand, damit Video-Box näher am Projekttitel-Bereich ist */
  max-width: 933px;
}

.project-description p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  line-height: 1.6;
  margin: 0;
}

.carousel-section {
  display: flex;
  gap: 40px; /* Abstand zwischen Box und Text */
  margin-bottom: 120px; /* Reduzierter Abstand zwischen den Sektionen */
  align-items: flex-start; /* Text startet auf Höhe der Box-Oberkante */
}

/* Video-Box: Mehr Abstand zum Text rechts und zu den Boxen darunter */
.carousel-section-video {
  gap: 60px; /* Größerer Abstand zwischen Video-Box und Text */
  margin-bottom: 180px; /* Größerer Abstand zu den Boxen des Unterüberschrift-Bereichs */
}

/* Abstand zur "Andere Projekte"-Sektion bleibt gleich, auch wenn letzte Box versteckt ist */
.carousel-section:not([style*="display: none"]):last-of-type {
  margin-bottom: 120px; /* Gleicher Abstand wie vorher */
}

.carousel-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Abstand zwischen Box und Indikatoren */
  width: 874px; /* Gleiche Breite wie carousel-image-container */
  position: relative; /* Für absolute Positionierung der Pfeile */
}

/* Carousel Pfeile - vertikal zentriert an den Rändern der Box */
.carousel-arrow {
  position: absolute;
  /* Box ist 500px hoch (carousel-image-container) oder 492px (carousel-video-container), also Mitte bei 250px bzw. 246px von oben des Wrappers */
  top: calc(250px - 14px); /* Mitte der Box (250px) minus halbe Pfeil-Höhe (14px) für exakte Zentrierung an der Box-Mitte */
  transform: translateY(0); /* Keine zusätzliche Transformation nötig */
  background: rgba(255, 255, 255, 0.5); /* Transparenter wie Mobile */
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  opacity: 0.6; /* Transparenter wie Mobile */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-image-container {
  position: relative;
  width: 874px; /* Genau wie im Figma */
  height: 500px; /* Höhe erhöht von 420px auf 500px */
  background: #d9d9d9;
  border-radius: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /* Snap-Effekt für exakte Positionierung */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
  scrollbar-width: none; /* Scrollbar für Firefox unsichtbar */
  -ms-overflow-style: none; /* Scrollbar für IE/Edge unsichtbar */
  flex-shrink: 0;
  touch-action: pan-x; /* erlaubt horizontales Swipen */
  cursor: grab;
  pointer-events: auto; /* Sicherstellen, dass Klicks funktionieren */
}

/* YouTube Video Container für erste Box (ohne Text) - Desktop */
.carousel-video-container {
  position: relative;
  width: 874px; /* Gleiche Breite wie carousel-image-container */
  height: 492px; /* 16:9 Verhältnis: 874 / 16 * 9 = 491.625px, gerundet 492px */
  background: #000;
  border-radius: 40px;
  overflow: hidden;
  flex-shrink: 0;
}

.carousel-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 40px;
  object-fit: cover; /* Video füllt Container vollständig aus */
}

/* Mobile: Carousel-Boxen responsive anpassen - direkt nach Desktop-Styles */
@media (max-width: 768px) {
  .carousel-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* 4:3 Verhältnis – entspricht z.B. 1600x1200px */
    aspect-ratio: 4 / 3 !important;
    min-height: 200px !important;
    max-height: 50vh !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
  
  .carousel-video-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* YouTube-Video Format */
    min-height: 200px !important;
    max-height: 50vh !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
  
  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.7); /* Transparenter Hover wie Mobile */
  opacity: 0.8; /* Transparenter Hover wie Mobile */
}

.carousel-arrow-left {
  left: 6px; /* In die Box hinein, links - wie Mobile */
  /* top und transform werden von .carousel-arrow geerbt */
}

.carousel-arrow-right {
  right: 6px; /* In die Box hinein, rechts - wie Mobile */
  /* top und transform werden von .carousel-arrow geerbt */
}

.carousel-arrow .material-symbols-outlined {
  font-size: 20px;
  color: #222;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.carousel-image-container::-webkit-scrollbar {
  display: none; /* Scrollbar für Chrome/Safari unsichtbar */
}

.carousel-track {
  display: flex;
  width: 2622px; /* 3 Slides × 874px = 2622px */
  height: 100%;
}

.carousel-slide {
  flex: 0 0 874px; /* Feste Breite wie Container, verhindert Schrumpfen */
  height: 100%;
  background: #d9d9d9; /* Fallback falls Bild nicht lädt */
  position: relative;
  overflow: hidden;
  scroll-snap-align: start; /* Snap-Position für jedes Bild */
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zweites Bild in Box 1 vollständig anzeigen */
.carousel-section:not(.carousel-section-video):first-of-type .carousel-slide:nth-child(2) img {
  object-fit: contain;
  object-position: center;
}

.carousel-text {
  flex: 1;
  max-width: 588px;
  margin-top: 0;
  padding-top: 0;
  align-self: flex-start; /* Text startet auf Höhe der Box-Oberkante */
}

/* Carousel Indikatoren */
.carousel-indicators {
  display: flex;
  justify-content: flex-end; /* Rechts ausrichten */
  align-items: center;
  gap: 12px; /* Abstand zwischen den Punkten */
  margin-top: 0;
  width: 100%;
  padding-right: 40px; /* Weiter nach links verschieben */
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #B3B3B3; /* Graue Punkte (inaktiv) */
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.carousel-dot.active {
  background-color: #6E6E6E; /* Dunkler grauer Punkt für aktives Bild */
}

.carousel-image {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.carousel-subtitle {
  font-family: 'Sora', sans-serif;
  font-weight: 300;
  font-size: 36px;
  color: black;
  margin: 0 0 20px 0;
}

.carousel-description {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.other-projects {
  margin-top: 200px; /* Reduzierter Abstand zur letzten Carousel-Sektion */
  margin-bottom: 0; /* Abstand nach unten wird vollständig vom Footer gesteuert */
}

.other-projects-title {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 56px;
  color: black;
  margin: 0 auto 60px auto; /* Zentrieren wie das Grid */
  width: 100%; /* Volle Breite der Section nutzen */
  max-width: 1200px; /* Gleiche maximale Breite wie das Grid */
  text-align: left; /* Text links ausrichten */
}

.other-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%; /* Volle Breite der Section nutzen */
  max-width: 1200px; /* Erhöhte maximale Breite für bessere Raumausnutzung */
  margin: 0 auto; /* Zentrieren */
}

.other-projects-grid::-webkit-scrollbar {
  display: none; /* Scrollbar für Chrome/Safari unsichtbar */
}

.other-project-link-wrapper {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  width: 100%; /* Nimmt die volle Breite der Grid-Zelle ein */
}

.other-project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.other-project-image {
  /* 1:1 Verhältnis – quadratisch */
  width: 100%;        /* Nimmt die volle Breite des Wrappers ein */
  aspect-ratio: 1 / 1; /* Quadratisch */
  background: #d9d9d9;
  border-radius: 40px; /* Größerer border-radius wie bei den anderen Boxen */
  margin-bottom: 20px;
  overflow: hidden; /* Verhindert, dass Bilder über die abgerundeten Ecken hinausragen */
  position: relative;
}

.other-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* Nur das Bild zoomen beim Hover, Box bleibt gleich groß */
.other-project-link-wrapper:hover .other-project-image img,
.other-project-card:hover .other-project-image img {
  transform: scale(1.1);
}

.other-project-category {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: black;
  margin: 0 0 10px 0;
}

.other-project-title {
  font-family: 'Sora', sans-serif;
  font-weight: 300; /* Light */
  font-size: 24px;
  color: black;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.other-project-title:hover {
  color: #9000ff;
}

.other-project-title .arrow {
  font-size: 32px;
  width: 32px;
  height: 32px;
  color: black;
  transition: transform 160ms ease, color 160ms ease;
  display: inline-block;
}

/* Pfeil springt nach vorne, wenn man über der Box hovert */
.other-project-card:hover .arrow {
  transform: translateX(10px);
}

/* Pfeil wird blau UND springt nach vorne, wenn man direkt über dem Titel hovert */
.other-project-title:hover .arrow {
  color: #9000ff;
  transform: translateX(10px);
}

.project-footer {
  margin-top: 80px;         /* Reduzierter Abstand zu "Andere Projekte" */
  padding: 0 0 0 0;         /* Minimaler Abstand unterhalb des Footers - Weißraum stark reduziert */
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

/* Linie unterhalb von "Back to projects" */
.footer-back-link {
  padding: 0 80px 20px 60px; /* Linkes Padding reduziert, um "Back to projects" weiter links zu positionieren */
  margin-bottom: 0;
}

/* Linie relativ zum .project-footer Container, genau wie auf Hauptseite */
.project-footer::after {
  content: '';
  position: absolute;
  top: 38px; /* Position nach "Back to projects" Link (18px font-size + 20px padding-bottom) */
  left: 60px;
  right: 60px;
  height: 0.5px;
  background: #d0d0d0; /* Gleiche Farbe wie Hauptseite */
}

/* Footer-Content mit gleichem Abstand zur Linie wie Hauptseite */
.project-footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 80px 0 80px; /* Gleicher Padding wie Hauptseite - 20px Abstand zur Linie */
  box-sizing: border-box;
}

.project-link-wrapper {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive Styles for Project Page */
@media (max-width: 1200px) {
  .project-hero-image {
    width: 100%;
    height: auto;
  }
  
  .carousel-section {
    flex-direction: column;
  }
  
  .carousel-image-container {
    width: 100%;
  }
  
  .carousel-text {
    max-width: 100%;
  }
  
  .other-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .project-page {
    padding: 100px 40px 80px 40px; /* Mehr Abstand oben für Navbar */
  }
  
  .project-hero-image {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 200px);
  }
  
  .project-detail-title {
    font-size: 40px;
  }
  
  .carousel-section {
    flex-direction: column;
  }
  
  .carousel-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* 4:3 Verhältnis – entspricht z.B. 1600x1200px */
    aspect-ratio: 4 / 3 !important;
    min-height: 200px !important;
    max-height: 50vh !important;
    box-sizing: border-box !important;
  }
  
  .carousel-text {
    max-width: 100%;
  }
  
  .carousel-subtitle {
    font-size: 28px;
  }
  
  .other-projects-title {
    font-size: 40px;
  }
  
  .other-projects-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN
   ============================================ */

/* Tablet and smaller desktop (max-width: 1200px) - but not on large monitors */
@media (max-width: 1200px) and (max-height: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .project-placeholder {
    max-width: 100%;
  }
  
  .skills-grid {
    gap: 30px;
  }
}

/* Standard desktop (1200px - 1399px) */
@media (min-width: 1201px) and (max-width: 1399px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 100%;
    margin: 0;
  }
  
  .project-placeholder {
    max-width: 100%;
  }
}

/* Large screens - ensure proper layout */
@media (min-width: 1400px) {
  .navbar {
    max-width: 1200px;
    width: calc(100% - 320px);
  }
  
  /* Hero Section Text proportional größer */
  section#start h1.section-title,
  .section#start h1.section-title,
  main .section#start h1.section-title {
    font-size: 56px !important; /* Größer auf großen Bildschirmen (von 42px) */
    max-width: 1000px !important; /* Breiterer Container für größeren Text */
  }
  
  .projects {
    padding: 80px 100px;
    max-width: 100%;
  }
  
  .about {
    padding: 80px 100px; /* Gleicher Abstand zur Nav-Bar wie Projekte */
    max-width: 100%;
    justify-content: flex-start !important; /* Gleiche Ausrichtung wie Projekte */
  }
  
  .project-grid {
    max-width: 100%;
    margin: 0;
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
    gap: 50px;
  }
  
  .project-placeholder {
    max-width: 100%;
  }
  
  .about__intro {
    max-width: 100%;
    margin: 0; /* Kein zusätzlicher Abstand, da margin-bottom der Überschrift bereits 40px ist */
    gap: 60px; /* Gleicher Gap wie auf MacBook */
  }
  
  .about__media {
    max-width: 700px; /* Größer auf großen Bildschirmen, proportional zu Projekt-Boxen */
    aspect-ratio: 820 / 858; /* Portrait-Bild Verhältnis beibehalten */
  }
  
  /* Text proportional größer, um gleiches Verhältnis zu Box zu behalten */
  .about__text h3 {
    font-size: 22px; /* Größer auf großen Bildschirmen (von 18px) */
  }
  
  .about__text p {
    font-size: 18px; /* Größer auf großen Bildschirmen (von 16px) */
  }
  
  /* Sicherstellen, dass Projekt-Boxen und About-Box links aligniert sind */
  .project-grid {
    justify-content: start; /* Links ausrichten statt zentrieren */
  }
  
  .project {
    align-items: flex-start;
  }
  
  /* Gleiche Padding-Werte für beide Bereiche */
  .projects,
  .about {
    padding-left: 100px;
    padding-right: 100px;
  }
  
  .skills-grid {
    max-width: 100%;
    margin: 80px 0 0 0; /* Gleicher Abstand wie auf MacBook, links aligniert */
    gap: 60px; /* Gleicher Gap wie auf MacBook */
  }
  
  .project-page {
    max-width: 1800px;
    margin: 0 auto;
  }
  
  #kontakt {
    max-width: 100%;
    padding: 220px 100px 0 100px; /* Mehr Padding oben für bessere Zentrierung auf großen Bildschirmen */
  }
  
  #kontakt .section-title {
    font-size: 56px !important; /* Größer auf großen Bildschirmen (proportional) */
  }
  
  .contact-description {
    max-width: 800px; /* Größer auf großen Bildschirmen (von 650px) */
    margin: 0 auto 60px;
    font-size: 18px; /* Größer auf großen Bildschirmen (von 16px) */
  }
  
  .contact-buttons {
    align-items: center;
    gap: 20px; /* Gleicher Gap wie auf MacBook */
  }
  
  .contact-btn {
    font-size: 18px; /* Größer auf großen Bildschirmen (von 16px) */
    min-width: 250px; /* Größer auf großen Bildschirmen */
    padding: 16px 32px; /* Größere Paddings */
  }
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .projects,
  .about {
    padding: 60px 40px;
  }
  
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .project-hero-image {
    width: 100%;
    height: auto;
  }
  
  .carousel-section {
    flex-direction: column;
    gap: 30px;
  }
  
  .carousel-image-container {
    width: 100%;
  }
  
  .carousel-text {
    max-width: 100%;
  }
}

/* Mobile landscape and small tablets (max-width: 768px) */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 100px;
  }
  
  .page {
    padding-top: 100px;
  }
  
  .section {
    padding: 40px 20px;
    min-height: auto;
  }
  
  .section-title {
    font-size: 32px;
    margin-bottom: 30px;
  }
  
  .navbar {
    top: 10px;
    width: calc(100% - 40px);
    padding: 15px 20px;
    border-radius: 20px;
  }
  
  .nav-links {
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .navbar a {
    font-size: 14px;
  }
  
  .project-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .project-placeholder {
    max-width: 100%;
    border-radius: 15px;
  }
  
  .project-title {
    font-size: 20px;
  }
  
  .project-link {
    font-size: 20px;
  }
  
  .project-link .arrow {
    font-size: 24px;
    width: 24px;
    height: 24px;
  }
  
  .about__intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .about__media {
    height: 250px;
  }
  
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  /* Skill Cards bleiben wie in @media (max-width: 768px) */
  /* .skill-category h3 {
    font-size: 24px;
  }
  
  .skill-tag {
    font-size: 16px;
    padding: 14px 20px;
  } */
  
  .contact-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .contact-btn {
    width: 100%;
  }
  
  /* Footer-Content bleibt wie in @media (max-width: 768px) - horizontal */
  /* .footer-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
    padding: 0 20px;
  } */
  
  .project-page {
    padding: 100px 20px 60px 20px;
  }
  
  .back-link {
    font-size: 16px;
  }
  
  .back-arrow {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
  
  .project-detail-title {
    font-size: 32px;
  }
  
  .project-hero-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
  }
  
  .carousel-section {
    flex-direction: column !important;
    gap: 12px !important; /* Reduzierter Abstand zwischen Box und Text */
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }
  
  /* Mobile: Text näher an die Box rücken */
  .carousel-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Mobile: Unterüberschrift näher an die Box */
  .carousel-subtitle {
    margin-top: 0 !important;
    margin-bottom: 12px !important; /* Reduzierter Abstand zum Text darunter */
  }
  
  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important; /* Für absolute Positionierung der Pfeile */
  }
  
  .carousel-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* 4:3 Verhältnis – entspricht z.B. 1600x1200px */
    aspect-ratio: 4 / 3 !important; /* 4:3 Format für responsive Boxen */
    min-height: 200px !important; /* Mindesthöhe */
    max-height: 50vh !important; /* Maximal 50% der Viewport-Höhe, damit Boxen nicht abgeschnitten werden */
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  
  .carousel-video-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* YouTube-Video Format */
    min-height: 200px !important;
    max-height: 50vh !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
  
  /* Mobile: Bilder vollständig in Boxen sichtbar */
  .carousel-track {
    width: 300% !important; /* 3 Slides × 100% = 300% */
    height: 100% !important;
  }
  
  .carousel-slide {
    flex: 0 0 33.333333% !important; /* Jeder Slide nimmt 1/3 der Track-Breite ein (100% / 3) */
    width: 33.333333% !important;
    height: 100% !important;
    overflow: hidden !important; /* Verhindert, dass Bilder über die Box hinausragen */
    box-sizing: border-box !important;
    scroll-snap-align: start !important; /* Snap-Position für jedes Bild */
  }
  
  .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Bilder füllen die Box vollständig aus */
    object-position: center !important; /* Bilder zentriert */
    display: block !important;
  }
  
  /* Mobile: Pfeile in die Boxen hinein rücken, vertikal zentriert relativ zur Box */
  .carousel-arrow {
    /* Auf Mobile: Box hat aspect-ratio 4/3, also ist die Höhe variabel */
    /* Pfeile sind vertikal zentriert an der Box-Mitte */
    top: 50% !important; /* Vertikal zentriert an der Box-Mitte */
    transform: translateY(-50%) !important; /* Exakte Zentrierung durch Verschiebung um die Hälfte der eigenen Höhe */
  }
  
  .carousel-arrow-left {
    left: 6px !important; /* Näher am linken Rand der Box */
  }
  
  .carousel-arrow-right {
    right: 6px !important; /* Näher am rechten Rand der Box */
  }
  
  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .carousel-subtitle {
    font-size: 24px;
  }
  
  .carousel-description {
    font-size: 14px;
  }
  
  .other-projects-title {
    font-size: 32px;
  }
  
  /* Mobile: Andere Projekte - horizontal scrollbar mit Peek-Effekt */
  .other-projects-grid {
    display: flex !important; /* Horizontal wie Desktop */
    flex-direction: row !important; /* Horizontal nebeneinander */
    gap: 20px !important; /* Kompakterer Abstand auf Mobile */
    overflow-x: auto !important; /* Horizontal scrollbar */
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling auf iOS */
    scrollbar-width: none !important; /* Scrollbar für Firefox unsichtbar */
    -ms-overflow-style: none !important; /* Scrollbar für IE/Edge unsichtbar */
    cursor: grab !important;
    padding-right: 20px !important; /* Padding rechts für besseren Peek-Effekt */
  }
  
  .other-projects-grid::-webkit-scrollbar {
    display: none !important; /* Scrollbar für Chrome/Safari unsichtbar */
  }
  
  .other-project-link-wrapper {
    flex-shrink: 0 !important; /* Verhindert, dass Boxen schrumpfen */
    width: 85vw !important; /* 85% der Viewport-Breite - erste Box vollständig sichtbar, Teil der zweiten */
    max-width: 85vw !important;
  }
  
  .other-project-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Quadratisch */
    border-radius: 20px !important; /* Angepasster Radius für Mobile */
  }
  
  .other-project-card {
    width: 100% !important;
  }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
  html {
    scroll-padding-top: 120px;
  }
  
  .page {
    padding-top: 120px;
  }
  
  .section {
    padding: 30px 15px;
  }
  
  .section-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .navbar {
    top: 5px;
    width: calc(100% - 20px);
    padding: 12px 15px;
    border-radius: 15px;
    flex-direction: column;
    gap: 15px;
  }
  
  .nav-links {
    gap: 15px;
    width: 100%;
    justify-content: center;
  }
  
  .navbar a {
    font-size: 13px;
    padding: 0.2rem 0.4rem;
  }
  
  .project-grid {
    gap: 25px;
  }
  
  .project-placeholder {
    border-radius: 12px;
  }
  
  .project-title {
    font-size: 18px;
  }
  
  .project-link {
    font-size: 18px;
  }
  
  .project-link .arrow {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
  
  .about__media {
    height: 200px;
    border-radius: 10px;
  }
  
  .about__text h3 {
    font-size: 16px;
  }
  
  .about__text p {
    font-size: 14px;
  }
  
  /* Skill Cards bleiben wie in @media (max-width: 768px) - Schriftgrößen bereits angepasst */
  /* .skill-category h3 {
    font-size: 20px;
  }
  
  .skill-tag {
    font-size: 14px;
    padding: 12px 18px;
  } */
  
  .contact-btn {
    font-size: 14px;
    padding: 12px 20px;
  }
  
  .project-page {
    padding: 120px 15px 40px 15px;
  }
  
  /* Mobile: Footer "Back to projects" Link minimal weiter nach links (auch für sehr kleine Screens) */
  .footer-back-link {
    padding: 0 15px 20px 12px !important; /* Minimal weiter nach links (12px statt 15px) */
  }
  
  /* Mobile: Linie anpassen (auch für sehr kleine Screens) */
  .project-footer::after {
    left: 12px !important; /* Gleiche Position wie Padding */
    right: 15px !important;
  }
  
  /* Mobile: Footer "Back to projects" Link minimal weiter nach links */
  .footer-back-link {
    padding: 0 20px 20px 15px !important; /* Minimal weiter nach links (15px statt 20px) */
  }
  
  /* Mobile: Linie anpassen */
  .project-footer::after {
    left: 15px !important; /* Gleiche Position wie Padding */
    right: 20px !important;
  }
  
  .back-link {
    font-size: 14px;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
  }
  
  .back-arrow {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-1px) !important; /* Pfeil leicht nach oben verschieben für bessere Zentrierung */
    vertical-align: middle !important;
  }
  
  .project-detail-title {
    font-size: 28px;
  }
  
  /* Mobile: Projekt-Hero-Image - sicherstellen dass es volle Breite hat */
  .project-hero-image {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Mobile: Projekt-Hero - Abstand zur Box reduzieren */
  .project-hero {
    margin-bottom: 5px !important; /* Kleiner Abstand zwischen Box und Metadaten */
  }
  
  /* Mobile: Metadaten in einer Reihe, wie Desktop - mit Box-Breite ausgerichtet */
  .project-metadata {
    flex-direction: row !important; /* Horizontal wie Desktop */
    gap: 6px !important; /* Sehr kompakterer Abstand auf Mobile */
    margin-left: 5px !important; /* Minimal nach rechts gerückt */
    margin-top: 0 !important; /* Kein zusätzlicher Abstand oben */
    margin-bottom: 40px !important;
    flex-wrap: nowrap !important; /* Verhindert Umbruch */
    align-items: baseline !important; /* Baseline-Ausrichtung wie Desktop */
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* Sichtbar bleiben */
  }
  
  .metadata-item {
    flex-shrink: 0 !important; /* Verhindert Schrumpfen */
    white-space: nowrap !important; /* Verhindert Zeilenumbruch */
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important; /* Sehr kompakterer Gap zwischen Label und Value */
  }
  
  /* Mobile: Kleinere Schriftgrößen für Metadaten, damit alles in eine Reihe passt */
  .metadata-label,
  .metadata-value {
    font-size: 7px !important; /* Sehr kleine Schrift, damit alles unter die Box passt */
    line-height: 1.0 !important; /* Sehr kompaktere Zeilenhöhe */
    letter-spacing: -0.4px !important; /* Kompakterer Buchstabenabstand */
    white-space: nowrap !important; /* Verhindert Zeilenumbruch */
  }
  
  .project-description {
    font-size: 14px;
    margin-bottom: 60px;
  }
  
  .carousel-section {
    gap: 10px !important; /* Noch kompakterer Abstand auf sehr kleinen Screens */
    margin-bottom: 30px !important;
  }
  
  /* Mobile: Text näher an die Box rücken (auch für sehr kleine Screens) */
  .carousel-text {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Mobile: Unterüberschrift näher an die Box (auch für sehr kleine Screens) */
  .carousel-subtitle {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Reduzierter Abstand zum Text darunter */
  }
  
  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important; /* Für absolute Positionierung der Pfeile */
  }
  
  .carousel-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* 4:3 Verhältnis – entspricht z.B. 1600x1200px */
    aspect-ratio: 4 / 3 !important; /* 4:3 Format für responsive Boxen */
    min-height: 180px !important; /* Mindesthöhe für sehr kleine Screens */
    max-height: 45vh !important; /* Maximal 45% der Viewport-Höhe, damit Boxen nicht abgeschnitten werden */
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  
  .carousel-video-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* YouTube-Video Format */
    min-height: 180px !important;
    max-height: 45vh !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Mobile: Bilder vollständig in Boxen sichtbar (auch für sehr kleine Screens) */
  .carousel-track {
    width: 300% !important; /* 3 Slides × 100% = 300% */
    height: 100% !important;
  }
  
  .carousel-slide {
    flex: 0 0 33.333333% !important; /* Jeder Slide nimmt 1/3 der Track-Breite ein (100% / 3) */
    width: 33.333333% !important;
    height: 100% !important;
    overflow: hidden !important; /* Verhindert, dass Bilder über die Box hinausragen */
    box-sizing: border-box !important;
    scroll-snap-align: start !important; /* Snap-Position für jedes Bild */
  }
  
  .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Bilder füllen die Box vollständig aus */
    object-position: center !important; /* Bilder zentriert */
    display: block !important;
  }
  
  /* Mobile: Pfeile in die Boxen hinein rücken, vertikal zentriert relativ zur Box (auch für sehr kleine Screens) */
  .carousel-arrow {
    /* Auf sehr kleinen Screens: Box hat aspect-ratio 4/3, also ist die Höhe variabel */
    /* Pfeile sind vertikal zentriert an der Box-Mitte */
    top: 50% !important; /* Vertikal zentriert an der Box-Mitte */
    transform: translateY(-50%) !important; /* Exakte Zentrierung durch Verschiebung um die Hälfte der eigenen Höhe */
  }
  
  .carousel-arrow-left {
    left: 5px !important; /* Näher am linken Rand der Box */
  }
  
  .carousel-arrow-right {
    right: 5px !important; /* Näher am rechten Rand der Box */
  }
  
  .carousel-subtitle {
    font-size: 20px;
  }
  
  .carousel-description {
    font-size: 13px;
  }
  
  .other-projects-title {
    font-size: 28px;
  }
  
  /* Mobile: Andere Projekte - horizontal scrollbar mit Peek-Effekt (auch für sehr kleine Screens) */
  .other-projects-grid {
    display: flex !important; /* Horizontal wie Desktop */
    flex-direction: row !important; /* Horizontal nebeneinander */
    gap: 15px !important; /* Noch kompakterer Abstand auf sehr kleinen Screens */
    overflow-x: auto !important; /* Horizontal scrollbar */
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling auf iOS */
    scrollbar-width: none !important; /* Scrollbar für Firefox unsichtbar */
    -ms-overflow-style: none !important; /* Scrollbar für IE/Edge unsichtbar */
    cursor: grab !important;
    padding-right: 15px !important; /* Padding rechts für besseren Peek-Effekt */
  }
  
  .other-projects-grid::-webkit-scrollbar {
    display: none !important; /* Scrollbar für Chrome/Safari unsichtbar */
  }
  
  .other-project-link-wrapper {
    flex-shrink: 0 !important; /* Verhindert, dass Boxen schrumpfen */
    width: 85vw !important; /* 85% der Viewport-Breite - erste Box vollständig sichtbar, Teil der zweiten */
    max-width: 85vw !important;
  }
  
  .other-project-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Quadratisch */
    border-radius: 20px !important; /* Angepasster Radius für Mobile */
  }
  
  .other-project-card {
    width: 100% !important;
  }
  
  .other-project-title {
    font-size: 18px;
  }
  
  .other-project-title .arrow {
    font-size: 20px;
    width: 20px;
    height: 20px;
  }
}

/* Very small mobile (max-width: 360px) */
@media (max-width: 360px) {
  .section {
    padding: 25px 10px;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .navbar {
    padding: 10px 12px;
  }
  
  .navbar a {
    font-size: 12px;
  }
  
  .project-title {
    font-size: 16px;
  }
  
  .project-link {
    font-size: 16px;
  }
  
  .project-detail-title {
    font-size: 24px;
  }
  
  .carousel-subtitle {
    font-size: 18px;
  }
}

/* ============================================
   IMPRINT PAGE STYLES
   ============================================ */

.imprint-page {
  padding: 100px 60px 80px 60px;
  min-height: calc(100vh - 80px);
  background: #fff;
}

.imprint-container {
  max-width: 800px;
  margin: 0 auto;
}

.imprint-title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 56px;
  color: #222;
  margin: 0 0 60px 0;
}

.imprint-section {
  margin-bottom: 40px;
}

.imprint-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 32px;
  color: #222;
  margin: 0 0 20px 0;
}

.imprint-subheading {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: #222;
  margin: 30px 0 15px 0;
}

.imprint-section p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 15px 0;
}

.imprint-section a {
  color: #9000FF;
  text-decoration: none;
  transition: color 0.3s ease;
}

.imprint-section a:hover {
  color: #7000CC;
  text-decoration: underline;
}

.imprint-back {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #e0e0e0;
}

.imprint-back .back-link {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #9000FF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease;
}

.imprint-back .back-link:hover {
  transform: translateX(-4px);
}

.imprint-back .back-arrow {
  font-size: 24px;
  vertical-align: middle;
  color: #9000FF; /* Gleiche Farbe wie der Text */
}

/* Mobile Styles for Imprint */
@media (max-width: 768px) {
  .imprint-page {
    padding: 100px 20px 60px 20px;
  }

  .imprint-title {
    font-size: 40px;
    margin-bottom: 40px;
  }

  .imprint-heading {
    font-size: 28px;
  }

  .imprint-subheading {
    font-size: 20px;
  }

  .imprint-section p {
    font-size: 14px;
  }
}