/* ==============================
  HERO-HEADER & NAVIGATION
============================== */
.hero-header {
 background: linear-gradient(90deg, #6f7b8a, #9ea5ad);
 padding: 2em 0;
 color: white;
}
.hero-overlay {
 max-width: 1200px;
 margin: 0 auto;
 padding: 2em;
 background: rgba(0, 0, 0, 0.25);
 border-radius: 4px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* obere Zeile: Logo + Hamburger */
.top-row {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
/* Logo – dynamisch skalierend */
.logo {
 display: flex;
 justify-content: center;
 align-items: center;
}
.logo img {
 max-height: 140px;      /* feste Obergrenze */
 height: auto;
 width: auto;
 display: block;
}
/* Hamburger-Button (☰ Symbol) */
.nav-toggle {
 display: none;              /* Desktop: ausblenden */
 background: none;
 border: none;
 font-size: 2em;             /* Größe des Symbols */
 color: white;
 cursor: pointer;
 transition: transform 0.3s ease;
}
.nav-toggle:hover {
 transform: scale(1.1);      /* leichte Vergrößerung beim Hover */
}
/* Mobile aktivieren */
@media (max-width: 1024px) {
 .nav-toggle {
   display: inline-flex;
   justify-content: center;
   align-items: center;
 }
}
/* Animation beim Öffnen */
.nav-toggle.open span:nth-child(1) {
 transform: translateY(8px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
 opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
 transform: translateY(-8px) rotate(-45deg);
}
/* Headertext */
.header-text {
 text-align: center;
 margin-top: 1em;
}
.header-text h1 {
 margin: 0;
 font-size: 2em;
}
.header-text p {
 margin: 0.4em 0 0.8em 0;
 font-size: 1.1em;
}
/* Navigation (Desktop) */
.main-nav {
 margin-top: 1.5em;
 display: flex;
 justify-content: center;
 gap: 2em;
}
.main-nav a {
 color: white;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.3s ease;
}
.main-nav a:hover {
 color: #f28c28;
}
/* ==============================
  ARBEITSWEISE (VIDEO)
============================== */
#work {
 max-width: 960px;
 margin: auto;
 padding-left: 1em;  /* gleiche Einrückung wie Text */
}
.video-wrapper {
 position: relative;
 width: 100%;
 max-width: 600px;
 margin: 2em 0 2em 0;  /* kein auto, damit es links ausgerichtet bleibt */
 cursor: pointer;
 text-align: left;
}
.video-poster {
 width: 100%;
 height: auto;
 display: block;
 border-radius: 8px;
 object-fit: contain;
}
/* ==============================
  BASIS-STYLES
============================== */
body {
 font-family: sans-serif;
 margin: 0;
 line-height: 1.6;
 background-color: #f9f9f9;
}
section {
 padding: 2em 1em;
 max-width: 960px;
 margin: auto;
}
.profile-img {
 max-width: 200px;
 border-radius: 50%;
 display: block;
 margin-bottom: 1em;
}
/* ==============================
  MOBILE OPTIMIERUNG + MENÜ
============================== */
@media (max-width: 1024px) {
 .hero-header {
   padding: 1.2em 0;
 }
 .hero-overlay {
   padding: 1.2em;
   background: rgba(0, 0, 0, 0.35);
 }
 /* Logo mittig & kleiner */
 .logo img {
 max-height: 140px;
 height: auto;
 width: auto;
 margin: 0.5em auto;
 display: block;
}
 /* Hamburger-Button anzeigen */
 .nav-toggle {
   display: inline-flex;
 }
 /* Navigation: standardmäßig versteckt */
 .main-nav {
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 0.8em;
   margin-top: 1em;
   background: rgba(0, 0, 0, 0.8);
   padding: 1em 0;
   border-radius: 6px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 /* Navigation sichtbar, wenn geöffnet */
 .main-nav.open {
   display: flex;
 }
 .main-nav a {
   font-size: 1em;
   color: white;
   padding: 0.3em 0;
 }
 .header-text h1 {
   font-size: 1.5em;
 }
 .header-text p {
   font-size: 0.95em;
 }
 section {
   padding: 1.5em 1em;
 }
}
/* === Fix: Video links ausrichten === */
#work {
 max-width: 960px;
 margin: 2em auto;
 text-align: left;        /* Inhalt des Abschnitts nach links */
}
#work .video-wrapper {
 max-width: 600px;
 margin-left: 0 !important;   /* linksbündig */
 margin-right: auto !important;
 text-align: left;
}
#work .video-poster {
 display: block;
}