/* Allgemeines Reset */
* {
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: blue;
    background-color: white;
    margin: 0;
    padding: 0;
}

body {
    cursor: url('cursor.png'), auto;
    line-height: 1.5;
    font-size: 16px;
}

/* Styling für Links */
a {
    color: blue;
    text-decoration: none;
}


/* Sicherstellen, dass html/body die Schrift übernehmen /
html, body {
font-family: Arial, sans-serif !important;
}
/ ===== Typography, Links, Layout etc. folgen hier ===== */

main {
flex: 1;
}

footer {
background-color: #fff;
text-align: left;
padding: 20px 40px;
color: none;
font-size: 1rem;
border-top: 1px solid white;
}

/* ===== Typography ===== */
.site-title h1 {
font-size: 2rem;
color: blue;
font-weight: bold;
letter-spacing: 1px;
}
/* ===== Fließende Schrift auf About ===== */
body.about-page .about-text h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}
body.about-page .about-text p {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.6;
}


/* ===== Links ===== */
a {
color: blue;
text-decoration: none;
transition: text-shadow 0.3s ease;
}
a:hover,
a:focus-visible {
text-shadow: 0 0 8px rgba(0, 0, 255, 0.5);
outline: none;
}

/* ===== Header & Navigation ===== */
.top-bar {
  margin-bottom: 2rem;
}
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: #fff;
margin-top: 0.8rem;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 1000;
}
/* ===== Navigation Text Size ===== */
.navigation a {
  font-size: 1.4rem; /* Erhöhe die Schriftgröße der Navigationslinks */
}
/* ===== Main Title Size ===== */
.site-title h1 {
font-size: 3rem; /* Haupttitel vergrößern */
}
/* ===== Navigation Bar Position ===== */
.top-bar {
top: 20px; /* Verschiebt die Navigationsleiste 20px nach unten */
left: 0;
right: 0;
z-index: 1000;
}
/* ===== Navigation Button Box ===== */
.navigation a {
display: inline-block;
padding: 0.2em 0.5em;
border: 2px solid blue;
border-radius: 2px;
margin: 0 0.5em;
transition: background-color 0.3s ease, color 0.3s ease;
color: blue;
text-decoration: none;
}
.navigation a:hover,
.navigation a:focus-visible {
background-color: blue;
color: #fff;
}
/* ===== Sanfte Übergänge ===== */
.about-wrapper,
.project-main img,
.projectgallery img {
  transition: all 0.3s ease;
}

/* ===== Responsive Navigation Position ===== */
@media (max-width: 600px) {
.navigation a {
font-size: 1.2rem; /* Etwas kleinere Schrift auf Handy */
}
}



.navigation {
display: flex;
gap: 20px;
}

.nav-toggle-checkbox {
display: none;
}

.nav-toggle-label {
display: none;
font-size: 6rem;
color: blue;
cursor: pointer;
}

@media (max-width: 768px) {
.top-bar {
flex-direction: column;
padding: 1rem;
height: auto;
}
.site-title h1 {
font-size: 1.5rem;
}
.nav-toggle-label {
display: block;
align-self: flex-end;
}
.navigation {
display: none;
flex-direction: column;
position: absolute;
top: 70px;
right: 0;
background: #fff;
padding: 10px 20px;
width: 200px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.nav-toggle-checkbox:checked + .nav-toggle-label + .navigation {
display: flex;
}
}

/* ===== Filter Bar ===== */
.filter-bar {
display: flex;
justify-content: center;
gap: 1rem;
padding: 10px 20px;
background: #fff;
border-bottom: 1px solid #eee;
margin-top: 60px;
}

.filter-bar button {
background: none;
border: 2px solid blue;
color: blue;
padding: 8px 16px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s, color 0.3s;
}

.filter-bar button:hover,
.filter-bar button.active {
background: blue;
color: #fff;
}

/* ===== Projects Grid ===== */
.projects-grid {
display: grid;
gap: 20px;
padding: 40px;
margin-top: 110px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.project {
background: #fff;
border-radius: 0px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project:hover,
.project:focus-visible {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 255, 0.2);
}

.project img {
width: 100%;
height: auto;
display: block;
}

.project-text {
padding: 12px;
}

.project-text h3 {
margin: 0 0 8px;
font-size: 1.4rem;
color: #000;
}

.project-text p {
margin: 0;
font-size: 1rem;
color: #333;
}

/* ===== Project Detail ===== */
.project-main {
max-width: 1200px;
margin: 40px auto;
display: flex;
flex-wrap: wrap;
gap: 40px; align-items: flex-start;
}

.project-main img {
flex: 1 1 320px;
max-width: 100%;
border: 1px solid #ddd;
border-radius: 0px;
}

.project-main .project-text {
flex: 1 1 400px;
}

.project-info-box {
margin-top: 20px;
padding: 0.8rem 1rem;
border: 2px solid blue;
border-radius: 0px;
font-size: 0.9rem;
color: #000;
}

/* ===== Gallery ===== */
.projectgallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 40px;
}

.projectgallery img {
width: 250px;
height: auto;
object-fit: cover;
border: 1px solid #ddd;
transition: transform 0.3s ease;
}

.projectgallery img:hover,
.projectgallery img:focus-visible {
transform: scale(1.05) translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 139, 0.6);
}

/* ===== About & Contact Sections ===== */
.about-wrapper,
.contact-wrapper {
display: flex;
flex-wrap: wrap;
gap: 2rem;
max-width: 800px;
margin: 3rem auto;
padding: 0 1rem; align-items: flex-start;
}

.about-text,
.contact-text {
flex: 1 1 100%;
}

.about-image {
flex: 1 1 300px;
display: flex;
justify-content: center;
}

.about-image img {
max-width: 100%;
height: auto;
}

.social-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.social-links a {
color: blue;
font-size: 2rem;
}
/* ===== About‑Seite: zentraler Max‑Width‑Wrapper ===== */
body.about-page .about-wrapper {
  max-width: 900px;
  margin: 3rem auto;
  padding: 0 1rem;
}

/* ===== Remove Blue Box on About Page ===== */
.project-info-box {
border: none !important; /* Entfernt den blauen Kasten um die Info-Box */
}
.project-info-box p {
border: none !important; /* Entfernt Rand um die Absätze */
        /* etwas helleres Blau beim Hover */
text-decoration: underline; /* optionale Unterstreichung beim Hover */
}



/* ===== Animations ===== */
@keyframes rotate {
0%, 100% { transform: rotate(0deg); }
50%     { transform: rotate(2deg); }
}

.project-image-wrapper img,
.project-image img {
animation: rotate 6s ease-in-out infinite;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 600px) {
.projects-grid {
padding: 20px;
}
.projectgallery img {
width: 100%;
max-width: 100%;
}
.filter-bar {
flex-direction: column;
}
.project-main {
flex-direction: column;
text-align: center;
}
.project-main img {
width: 80%;
margin: 0 auto;
}
.hover-text {
font-size: 2rem !important;
opacity: 1;
position: relative;
transform: none;
margin-top: 1rem;
background: #fff;
padding: 10px;
border-radius: 0px;
box-shadow: 0 0 10px rgba(0, 0, 255, 0.2);
}
}

/* ===== Page-specific Overrides ===== /
/ Hier sammelst du alle spezifischen Anpassungen, die früher in den HTML-Dateien standen */

/* Beispiel: Abstand unterhalb der fixierten Top-Bar auf Projekt-Seiten /
.project-main {
margin-top: 60px; / aus inline-Styles in projekt?.html */


/* Weitere overrides aus  Blöcken deiner HTML-Dateien /
/ z. B. .top-bar { background-color: white; } falls abweichend */

/* Entferne alle -Tags in den HTML-Dateien, sobald du die Overrides hier ergänzt hast */

/* ===== Landing Page Overrides ===== */
.project-image {
display: flex;
justify-content: center;
align-items: center;
margin-top: 150px; /* Abstand unter Header */
}

.project-image-wrapper {
  position: relative;
width: 60vw; /* Bildbreite anpassen */
max-width: 1000px;
margin: 0 auto;
}
.project-image-wrapper img {
width: 100%;
height: auto;
display: block;
}
.project-image-wrapper .hover-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: blue;
font-size: 8vw;
font-weight: bold;
padding: 0.5em 1em;
border-radius: 0 px;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.project-image-wrapper:hover .hover-text,
.project-image-wrapper.clicked .hover-text {
opacity: 1;
}

/* ===== Grid Configuration for Index Page ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 Spalten */
  grid-auto-rows: auto;                   /* Zeilenhöhe automatisch */
  gap: 20px;
  padding: 40px;
  margin-top: 110px;
}

/* ===== Horizontal Gallery Size ===== */
/* ===== Grid Configuration for Index Page ===== */
.projects-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);  /* 4 Spalten festlegen /
grid-auto-rows: auto;                   /* Zeilenhöhe automatisch */
gap: 20px;
padding: 40px;
margin-top: 110px;
}

/* ===== Horizontal Gallery Size ===== */
.projectgallery {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 20px;
padding: 20px 40px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.projectgallery img {
flex: 0 0 auto;
width: auto;         /* Breite automatisch anpassen */
max-height: 400px;   /* Maximalhöhe festlegen */
height: auto;
object-fit: contain; /* Bild proportional ohne Beschneidung anzeigen */
border-radius: 0px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.projectgallery img:hover,
.projectgallery img:focus-visible {
transform: scale(1.05) translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 139, 0.6);
}

/* ===== Override: Always Horizontal Gallery ===== */
.projectgallery {
display: block;              /* Block-Layout für whitespace */
white-space: nowrap;         /* Nebeneinander, kein Umbruch */
overflow-x: auto;            /* Horizontal scroll */
overflow-y: hidden;
padding: 20px 40px;
}
.projectgallery img {
display: inline-block;
width: auto !important;
max-height: 300px;
margin-right: 20px;
vertical-align: middle;
}
.projectgallery img:last-child {
margin-right: 0;
}


/* ===== Video Styling ===== */
.video-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.video-wrapper iframe {
width: 80vw;       /* Breite auf 80% des Viewports */
height: 70vw;      /* Höhe proportional 16:9 */
max-width: 1200px;  /* Maximale Breite */
max-height: 700px; /* Maximale Höhe */
border: none;
margin-top: 2rem;
}

/* =============================================
   Einheitliches Layout für alle Projektseiten
   ============================================= */
body.project-page .project-container {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1rem;
}

body.project-page .project-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

body.project-page .project-main .project-text,
body.project-page .project-main img {
  flex: 1 1 45%;
  min-width: 300px;
}

body.project-page .projectgallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

body.project-page .projectgallery img {
  width: 250px;
  height: auto;
  object-fit: cover;
}

/* ===== Full‑Bleed Galerie ===== */
body.project-page .projectgallery {
  position: relative;
  width: 100vw;                      
  left: 50%;                         
  margin-left: -50vw;                
  margin-right: -50vw;               
  padding: 1rem 0;                   
  display: flex;                     
  flex-wrap: nowrap;                 
  overflow-x: auto;                  
  overflow-y: hidden;                
  gap: 1rem;                         
}

body.project-page .projectgallery img {
  flex: 0 0 auto;                    
  max-height: 300px;                 
  object-fit: contain;               
}



/* ===== Bild‑Modal ===== */
.img-modal {
  display: none;               /* versteckt, bis geöffnet */
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.img-modal__content {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.img-modal__close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.5rem;
  color: blue;
  cursor: pointer;
}
/* ===== Modal‑Navigation ===== */
.img-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 3rem;
  color: blue;
  cursor: pointer;
  padding: 0 0.5rem;
  z-index: 2100;
}
.img-modal__nav--prev { left: 1rem; }
.img-modal__nav--next { right: 1rem; }
.img-modal__nav:focus { outline: none; }

/* ===== Keine Unterstreichung in der Info‑Box ===== */
body.project-page .project-info-box p {
  text-decoration: none !important;
}

/* ===== Größere Filter‑Bar ===== */
body.project-page .filter-bar {
  padding: 20px 40px;      /* vertikal/horizontal mehr Raum */
  gap: 1.5rem;             /* etwas größeren Abstand zwischen Buttons */
  margin-top: 60px;        /* beibehalten oder anpassen */
  background: #fff;
}

body.project-page .filter-bar button {
  padding: 12px 24px;      /* größere Klickfläche */
  font-size: 1.1rem;       /* größere Schrift */
  border-width: 2px;       /* etwas markantere Rahmen */
}
/* Flex-Layout auch für About */
body.about-page .project-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
body.about-page .project-main .project-text,
body.about-page .project-main img {
  flex: 1 1 45%;
  min-width: 300px;
}
@media (max-width: 600px) {
  /* ===== Index‑Grid auf 1 Spalte mit Rand ===== */
  .projects-grid {
    display: block;          /* Block‑Layout statt Grid */
    padding: 0;              /* Ggf. in der Grid‑Wrapper entfernen */
    margin: 0;               /* Basis‑Margin resetten */
  }

  .projects-grid .project {
    width: calc(100% - 2rem) !important;    /* 1rem Rand links rechts */
    margin: 1rem auto 1.5rem !important; /* oben und unten 1rem Abstand, zentriert */
    box-sizing: border-box !important;         /* Padding und Border einbeziehen */
    border-radius: 0px;              /* optional: sanfte Ecken */
    overflow: hidden;                /* verhindert Überlauf */
  }

  .projects-grid .project img {
    width: 100%;                     /* Bild füllt Projekt‑Card */
    height: auto;
    object-fit: cover;
    display: block;
  }

  .projects-grid .project-text {
    padding: 1rem;                   /* Textbereich ebenfalls etwas gepuffert */
    text-align: center;              /* optional zentriert */
  }
}

@media (max-width: 600px) {
  /* ===== Projekt‑Detail: Bild zentrieren im Container ===== */
  body.project-page .project-main img {
    order: 1;
    width: 100%;               /* 100% der Container‑Breite */
    max-width: 400px;          /* optional: eine Höchstbreite */
    margin: 0 auto 1.5rem;     /* zentriert und Abstand nach unten */
    object-fit: cover;
  }

  /* ===== Text darunter ===== */
  body.project-page .project-main .project-text {
    order: 2;
    flex: none;
    width: 100%;
    padding: 1rem;
  }

  /* ===== Galerie: vertikal stapeln & im Container ===== */
  body.project-page .projectgallery {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    width: calc(100% - 2rem) !important;
    margin: 0 auto 2rem !important;
    padding: 0 !important;
    gap: 1rem !important;
    position: relative !important;
    left: auto !important;
  }
  body.project-page .projectgallery img {
    width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    margin: 0 !important;
  }
}

/* ===== About‑Seite Responsive ===== */
body.about-page .about-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1rem;
  align-items: flex-start;
}

/* Bild und Text je 50% auf Desktop */
body.about-page .about-text,
body.about-page .about-image {
  flex: 1 1 45%;
  min-width: 300px;
}
@media (max-width: 900px) {
  /* ===== Tablet‑Feinschliff ===== */
  body.about-page .about-wrapper {
    padding: 0 2rem;
    gap: 1.5rem;
  }
}

/* Kleine Bildschirme: eine Spalte */
@media (max-width: 600px) {
  body.about-page .about-wrapper {
    flex-direction: column;
    align-items: center;
  }
  body.about-page .about-image {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  body.about-page .about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
  }
  body.about-page .about-text {
    width: 100%;
    text-align: center;  /* optional */
    padding: 0 1rem;
  }
}