/* =======================================
   BASE STYLES (Grundlegende Stile)
======================================= */

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  background-color: black;
  color: white;
}

img,
video {
  width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =======================================
   STARTSEITE LAYOUT
======================================= */

.body-startseite {
  height: 98vh;
  display: grid;
  grid-template-rows: 30px auto;
}
/* =======================================
   NAVIGATION BAR
======================================= */

.nav {
  display: grid;
  align-items: center;
  padding: 10px 10px;
  top: 0;
  position: sticky;

  border-bottom: 1px solid rgb(0, 0, 0);
  z-index: 100;
  background-color: black;

  grid-template-columns: auto 1fr auto;
}

.nav-left:hover,
.nav-right:hover {
  color: grey;
  cursor: pointer;
}

.nav-left {
  grid-column: 1 / 2;
}

.nav-center {
  grid-column: 2 / 3;
  text-align: center;
}

.nav-right {
  grid-column: 3 / 4;
}

/* =======================================
   PROJECT PAGE (Generische Elemente)
======================================= */

.project-grid-projekt2 {
  display: grid;
  padding: 0 15px 15px 15px;
  gap: 15px;
}

/* Zuweisung der Grid-Area für generischen Titel/Text */
.project-grid_title {
  grid-area: title;
}

.project-grid_title h1 {
  margin: 0;
  font-size: 20px;
}

.project-grid_text {
  grid-area: text;
}
.project-grid_text p {
  margin: 0;
  font-size: 18px;
}

/* =======================================
  BLICKWECHSEL (Spezifische Zuweisungen)
======================================= */

.project-gridblickwechsel_Image-79 {
  grid-area: Image-79;
}
.project-gridblickwechsel_image-5 {
  grid-area: image-5;
}

.project-gridblickwechsel_video-1 {
  grid-area: video-1;
}

.project-gridblickwechsel_Image-42 {
  grid-area: Image-42;
}

.project-gridblickwechsel_Image-43 {
  grid-area: Image-43;
}

.project-gridblickwechsel_Image-44 {
  grid-area: Image-44;
}

.project-gridblickwechsel_Image-45 {
  grid-area: Image-45;
}

.project-gridblickwechsel_Image-75 {
  grid-area: Image-75;
}

.project-gridblickwechsel_title {
  grid-area: title;
}

.project-gridblickwechsel_text {
  grid-area: text;
}

/* =======================================
  BMW (Spezifische Zuweisungen)
======================================= */
.project-gridbmw_image-6 {
  grid-area: image-6;
  margin-right: 20;
}
.project-gridbmw_image-7 {
  grid-area: image-7;
}
.project-gridbmw_image-8 {
  grid-area: image-8;
}

/* =======================================
  Farben (Spezifische Zuweisungen)
======================================= */
/* ZUWEISUNGEN, DAMIT DAS FARBEN-GRID FUNKTIONIERT */
.project-gridfarben_Image-35 {
  grid-area: Image-35;
  margin: 10;
  margin-left: 40;
}
.project-gridfarben_Image-34 {
  grid-area: Image-34;
}
.project-gridfarben_Image-36 {
  grid-area: Image-36;
}
.project-gridfarben_Image-37 {
  grid-area: Image-37;
  margin-top: -30px;
  margin-bottom: -30px;
}
.project-gridfarben_Image-38 {
  grid-area: Image-38;
}
.project-gridfarben_Image-39 {
  grid-area: Image-39;
}
.project-gridfarben_Image-40 {
  grid-area: Image-40;
}

/* =======================================
  London (Spezifische Zuweisungen)
======================================= */
/* Grid-Area-Zuweisungen für London-Bilder */

.project-gridlondon_Image-27 {
  grid-area: Image-27;
}
.project-gridlondon_Image-46 {
  grid-area: Image-46;
}
.project-gridlondon_Image-48 {
  grid-area: Image-48;
}
.project-gridlondon_Image-49 {
  grid-area: Image-49;
}
.project-gridlondon_Image-52 {
  grid-area: Image-52;
}
.project-gridlondon_Image-53 {
  grid-area: Image-53;
}
.project-gridlondon_Image-54 {
  grid-area: Image-54;
}
.project-gridlondon_Image-58 {
  grid-area: Image-58;
}
.project-gridlondon_Image-57 {
  grid-area: Image-57;
}
.project-gridlondon_Image-61 {
  grid-area: Image-61;
}
.project-gridlondon_Image-47 {
  grid-area: Image-47;
}

/* =======================================
  Lutzwoche (Spezifische Zuweisungen)
======================================= */
/* Grid-Area-Zuweisungen für Lutzwoche-Bilder */

.project-gridlutzwoche_Image-5 {
  grid-area: Image-5;
}
.project-gridlutzwoche_Image-6 {
  grid-area: Image-6;
}
.project-gridlutzwoche_Image-7 {
  grid-area: Image-7;
}
.project-gridlutzwoche_Image-23 {
  grid-area: Image-23;
}

/* =======================================
  Masterabschluss (Spezifische Zuweisungen)
======================================= */
/* Grid-Area-Zuweisungen für Masterabschluss-Bilder */
.project-gridmasterabschluss_Image-78 {
  grid-area: Image-78;
}
.project-gridmasterabschluss_video-2 {
  grid-area: video-2;
}
.project-gridmasterabschluss_Image-12 {
  grid-area: Image-12;
}

/* =======================================
  Paris (Spezifische Zuweisungen)
======================================= */
.project-gridparis_Image-33 {
  grid-area: Image-33;
}

.project-gridparis_Image-63 {
  grid-area: Image-63;
}
.project-gridparis_Image-64 {
  grid-area: Image-64;
}
.project-gridparis_Image-65 {
  grid-area: Image-65;
}
.project-gridparis_Image-67 {
  grid-area: Image-67;
}
.project-gridparis_Image-68 {
  grid-area: Image-68;
}
.project-gridparis_Image-69 {
  grid-area: Image-69;
}
.project-gridparis_Image-70 {
  grid-area: Image-70;
}

/* =======================================
  Plattencover (Spezifische Zuweisungen)
======================================= */
.project-gridplattencover_Image-26 {
  grid-area: Image-26;
}
.project-gridplattencover_Image-25 {
  grid-area: Image-25;
}
.project-gridplattencover_image-9 {
  grid-area: image-9;
}
.project-gridplattencover_image-10 {
  grid-area: image-10;
}

.project-gridplattencover_image-11 {
  grid-area: image-11;
}

.project-gridplattencover_image-12 {
  grid-area: image-12;
}

.project-gridplattencover_image-13 {
  grid-area: image-13;
}

/* =======================================
About me
======================================= */
.project-gridplattencover_Image {
  grid-area: Image;
}

/* =======================================
   SLIDER STYLES
======================================= */

.swiper {
  width: 100vw;
}
.swiper-slide {
  width: auto !important;
}
.swiper-slide img {
  width: auto;
  height: calc(100vh - 30px);
}

/* ------------------------------------ */
/* Navigation und Pfeile */
/* ------------------------------------ */

.swiper-button-prev,
.swiper-button-next {
  color: #666666 !important; /* Dunkelgrau */
  width: 30px !important;
  height: 30px !important;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
  color: #999999 !important; /* Helleres Grau beim Hovern */
}

/* Blendet die Punkte (Pagination) vollständig aus */
.swiper-pagination {
  display: none !important;
}

/* =======================================
   SLIDER HOVER OVERLAY STYLES (Titel)
======================================= */

/* 1. Link-Container: Passt die Klickfläche an das Bild an */
.slide-link {
  /* position: relative;
  display: block;
  height: 100%; */
}

/* 2. Style des Titel-Overlays (Zentriert und anfangs transparent) */
.slide-title {
  /* Positionierung über das gesamte Bild */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Bezieht sich auf die Breite des slide-link Containers */
  height: 100%;

  /* Ausrichtung */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Style */
  background: transparent;
  color: white;
  font-size: 24px;

  /* Unsichtbar standardmäßig */
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  z-index: 5;
  pointer-events: none;
}

/* 3. Hover-Effekt: Zeige den Titel */
.slide-link:hover .slide-title {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

.slide-link .slider-item:hover + .slide-title {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

/* =======================================
  Raster
======================================= */

.project-gridblickwechsel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  grid-template-areas:
    "Image-79 Image-79 Image-79 Image-79"
    "title title title title"
    ".  video-1 video-1 ." /* Zeile 2: Hier darf KEIN 'info' stehen */
    "Image-45 Image-45 Image-42 Image-42"
    "Image-43 Image-43 Image-44 Image-44"
    "Image-75 Image-75 Image-75 Image-75"
    "info info info info"
    ". text text ."; /* Zeile 7: HIER ist die richtige Position */
}

.project-gridblickwechsel_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridblickwechsel_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridblickwechsel_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

.project-gridblickwechsel_text {
  text-align: center;
}

.project-gridblickwechsel_info {
  grid-area: info;
  text-align: center;
}

.project-gridblickwechsel_info ul {
  list-style-type: none; /* Entfernt die Punkte */
  padding-left: 0; /* Entfernt den Standard-Einzug */
  margin: 0; /* Entfernt unnötige Abstände */
}

.project-gridbmw {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  grid-template-areas:
    "image-6 image-6 image-6 image-6"
    "title title title title"
    "image-7 image-7 image-8 image-8"
    "info info info info"
    ". text text .";
}

.project-gridbwm_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridbwm_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridbwm_info {
  text-align: center !important;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

/* --- Styling für die Info-Liste (Punkte entfernen) --- */

.projekt-gridbwm_info ul {
  list-style-type: none; /* WICHTIG: Entfernt die Punkte */
  padding-left: 0; /* Entfernt den Standard-Einzug */
  margin: 0; /* Entfernt unnötige Abstände */
}

/* --- Anpassung der H1-Schrift (falls du eine andere als die 12px möchtest) --- */

.project-gridbwm_title h1 {
  /* Fügt die Zentrierung hinzu und entfernt Standard-Margin des H1 */
  text-align: inherit;
  margin: 0;
}

/* Finde die bestehende .project-gridfarben Regel und ersetze sie damit: */
.project-gridfarben {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  grid-template-areas:
    "Image-35 Image-35 Image-35 Image-35"
    "title title title title"
    "Image-34 Image-34 Image-38  Image-38"
    "Image-39 Image-39 Image-40 Image-40"
    "Image-37 Image-37 Image-37 Image-37"
    "info info info info"
    ". text text .";
}

.project-gridfarben_info {
  grid-area: info;
}

/* --- Styling für den Titel (Abstände und Zentrierung) --- */

.project-gridfarben_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridfarben_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridfarben_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

/* --- Styling für die Info-Liste (Punkte entfernen) --- */

.project-gridfarben_info ul {
  list-style-type: none; /* Entfernt die Punkte */
  padding-left: 0; /* Entfernt den Standard-Einzug */
  margin: 0; /* Entfernt unnötige Abstände */
}

/* Finde die bestehende .project-gridlondon Regel und ersetze sie damit: */
.project-gridlondon {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;

  grid-template-areas:
    "Image-61 Image-61 Image-61 Image-61"
    "title title title title"
    " Image-46 Image-46 Image-57 Image-57"
    "Image-58 Image-58 Image-58 Image-58"
    "Image-47 Image-47 Image-53 Image-53"
    "Image-54 Image-54 Image-54 Image-54"
    "Image-52 Image-52 Image-49 Image-49"
    "Image-48 Image-48 Image-48 Image-48"
    "Image-27 Image-27 Image-27 Image-27"
    "info info info info"
    ". text text .";
}

.project-gridlondon_info {
  grid-area: info;
}

.project-gridlondon_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridlondon_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridlondon_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

.project-gridlondon_info ul {
  list-style-type: none; /* Entfernt die Punkte */
  padding-left: 0; /* Entfernt den Standard-Einzug */
}

.project-gridlutzwoche {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;

  grid-template-areas:
    "Image-23 Image-23 Image-23 Image-23"
    "title title title title"
    "Image-5 Image-5 Image-6 Image-6"
    "Image-7 Image-7 Image-7 Image-7"
    "info info info info"
    ". text text .";
}

.project-gridlutzwoche_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridlutzwoche_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridlutzwoche_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

.project-gridmasterabschluss {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  /* Grid-Layout für Masterabschluss (1 großes Bild oben, dann 2 kleine) */
  grid-template-areas:
    "Image-78 Image-78 Image-78 Image-78"
    "title title title title"
    ". video-2 video-2 ."
    "Image-12 Image-12 Image-12 Image-12"
    "info info info info"
    ". text text .";
}

.project-gridmasterabschluss_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridmasterabschluss_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridmasterabschluss_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

.project-gridparis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  /* KORRIGIERT: Reihenfolge Titel > Info > Text */
  grid-template-areas:
    "Image-33 Image-33 Image-33 Image-33"
    "title title title title"
    "Image-64 Image-64 Image-69 Image-69"
    "Image-65 Image-65 Image-65 Image-65"
    "Image-68 Image-68 Image-67 Image-67"
    "Image-70 Image-70 Image-70 Image-70"
    "Image-63 Image-63 Image-63 Image-63"
    "info info info info"
    ". text text .";
}

.project-gridparis_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridparis_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridparis_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

.project-gridplattencover {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 0 15px 15px 15px;
  /* Grid-Layout für Plattencover: 1 volles Bild, dann 5 weitere in Paaren */
  grid-template-areas:
    "Image-26 Image-26 Image-26 Image-26"
    "title title title title"
    "image-9 image-9 image-9 image-9"
    "image-10 image-10 image-10 image-10"
    "image-11 image-11 image-12 image-12"
    "image-13 image-13 image-13 image-13"
    "Image-25 Image-25 Image-25 Image-25"
    "info info info info"
    ". text text .";
}

.project-gridplattencover_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0px;
  font-size: 12px;
  grid-area: title;
}

.project-gridplattencover_text {
  text-align: center;
  padding-bottom: 0px;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
  grid-area: text;
}

.project-gridplattencover_info {
  text-align: center;
  padding-bottom: 0px;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  grid-area: info;
}

/* =======================================
  About me (Raster Definitionen)
======================================= */

/* MOBILE FIRST (Standard): Alles untereinander (Beibehalten) */
.project-gridaboutme {
  display: grid;
  grid-template-columns: 1fr; /* Nur eine Spalte für kleine Bildschirme */
  gap: 15px;
  padding: 0 15px 15px 15px;

  /* Reihenfolge: Bild -> Titel -> Text -> Sprachen -> Software */
  grid-template-areas:
    "image"
    "title"
    "text"
    "languages"
    "software";
}

/* ------------------------------------------- */
/* Desktop-Layout (Änderung für große Bildschirme) */
/* ------------------------------------------- */

/* Fügen Sie eine Media Query hinzu, um das Layout für Desktops zu ändern */
@media (min-width: 900px) {
  .project-gridaboutme {
    display: grid;
    /* Spalten: 1 (Rand) | 2 (Sprachen) | 3 (Software) | 4 (Rand) */
    grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
    gap: 30px; /* Erhöhter Abstand zwischen den Blöcken */
    padding: 0 40px 40px 40px;

    /* NEUES Grid-Layout: Sprachen in Spalte 2, Software in Spalte 3 */
    grid-template-areas:
      "image image image image" /* Bild bleibt über volle Breite oder große Spannen */
      "title title title title"
      ". text text ." /* Text in der Mitte */
      ". languages software ."; /* Sprachen in Spalte 2, Software in Spalte 3 */
  }

  /* Zuweisung der Areas (Hierarchisch) */
  .project-gridplattencover_Image {
    grid-area: image;
    /* Optional: Zentrieren Sie das Bild im großen Container */
    justify-self: center;
    max-width: 300px;
  }

  .languages {
    /* Sprache wird durch die grid-area: languages in die 2. Spalte geschoben */
    grid-area: languages;
    margin: 0; /* Entfernt die 'margin: 0 auto' Zentrierung, da Grid es jetzt positioniert */
  }

  .software {
    /* Software wird durch die grid-area: software in die 3. Spalte geschoben */
    grid-area: software;
    margin: 0; /* Entfernt die 'margin: 0 auto' Zentrierung */
  }
}

/* =======================================
  About me (Raster Definitionen) - FIX
======================================= */

/* WICHTIG: Das Layout ist jetzt immer 4-spaltig, auch auf Handys! */
.project-gridaboutme {
  display: grid;
  /* Spalten: 1 (Rand) | 2 (Sprachen) | 3 (Software) | 4 (Rand) */
  grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
  gap: 15px; /* Behält den kleineren Abstand bei */
  padding: 0 15px 15px 15px;

  /* NEUE REGEL: Streckt die Container auf die gleiche vertikale Höhe */
  align-items: stretch;

  /* NEUES Grid-Layout: Sprachen in Spalte 2, Software in Spalte 3 */
  grid-template-areas:
    "image image image image"
    "title title title title"
    ". text text ."
    ". languages software ."; /* Sprachen in Spalte 2, Software in Spalte 3 */
}

/* ------------------------------------------- */
/* Zuweisungen der Areas (Hierarchisch) */
/* ------------------------------------------- */
.project-gridplattencover_Image {
  grid-area: image;
  /* Kann für kleine Bildschirme entfernt werden, da es oft zu groß ist */
  /* max-width: 100%; */
}

.languages {
  grid-area: languages;
  margin: 0; /* Entfernt die Zentrierungsmargins */
  width: 100%;
  max-width: none;
}

.software {
  grid-area: software;
  margin: 0; /* Entfernt die Zentrierungsmargins */
  width: 100%;
  max-width: none;
}

/* =======================================
  ABOUT ME (Generisches Styling)
======================================= */

/* Behält die anderen Styles bei, falls sie noch fehlen */
.project-grid_title {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 0;
  grid-area: title;
}
.project-grid_text {
  grid-area: text;
  margin: 0 auto;
  font-size: 18px;
  text-align: center;
}

.languages h3,
.software h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.languages td:last-child,
.software td:last-child {
  text-align: right;
  letter-spacing: 2px;
  border-right: none;
}