/* style.css */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #FAFAD2; 
  color: #000080;           
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header mit fester Höhe */
header {
  height: 160px;                
  background-color: #FAFAD2;
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 3px solid #000080; 
  position: fixed;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease;
  z-index: 999;
}

/* Innerer Header-Container, Grid für Logo/Navigation */
.header-container {
  width: 100%;
  height: 100%; 
  display: grid;
  grid-template-columns: auto 1fr; 
  align-items: center;
  padding: 0 1rem;
}

/* Logo links, max. Höhe = Header-Höhe */
.logo {
  height: 100%;  
  width: auto;
}

.header-hidden {
  transform: translateY(-100%);
}

/* =========================
   NEU: Burger-Button
========================= */
#burgerBtn {
  display: none; /* standardmäßig unsichtbar im Desktop */
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px; 
  height: 24px; 
}
#burgerBtn span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #800080;
}

/* Navigation mittig (Desktop) */
nav {
  justify-self: center; 
}
nav ul {
  list-style: none;
  display: flex; /* Im Desktop: horizontal */
  gap: 4rem;
}

/* Responsive Schriftgrößen + Scale-Effekt */
nav a {
  text-decoration: none;
  color: #800080;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  
  /* Responsive Schriftgröße (nie <16px, nie >32px) */
  font-size: clamp(16px, 3vw, 32px);
}

nav a:hover {
  transform: scale(1.1);
  color: #000080;
}

/* Main-Bereich */
main {
  flex: 1;
  padding: 2rem;
  background-color: #FAFAD2;
  padding-top: 160px; /* Platz für fixen Header */
}

/* Footer */
footer {
  background-color: #FAFAD2;
  text-align: center;
  padding: 1rem;
  border-top: 3px solid #000080;
}

/* Innerer Footer-Container */
.footer-container {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 1rem;
}

/* Linker Footer-Teil */
.footer-left {
  font-size: 0.9rem;
}

/* Footer-Navigation */
.footer-nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: 5rem; 
  margin: 0;
  padding: 0;
}
.footer-nav li a {
  text-decoration: none;
  color: #800080; 
  font-size: 1.3rem;
  font-weight: bold;
}
.footer-nav li a:hover {
  color: #000080;
  text-decoration: underline;
}

/* ========== Slideshow Layout ========== */
#slideshowContainer {
  max-width: 80%;    
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding: 1rem 0;
}

#slideImg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}

#slideLink {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

#slideText {
  margin-top: 0.5rem;
  font-size: 1rem;
  text-align: center;
  color: inherit;
}

/* Pfeile (links/rechts) bei Hover */
#prevArrow,
#nextArrow {
  position: absolute;
  top: 50%; 
  transform: translateY(-50%);
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  background: rgba(255,255,255,0.6);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  display: none;
  user-select: none;
}

#prevArrow {
  left: 0.5rem;
}
#nextArrow {
  right: 0.5rem;
}

/* Pfeile nur anzeigen, wenn Maus drüber ist */
#slideshowContainer:hover #prevArrow,
#slideshowContainer:hover #nextArrow {
  display: block;
}

#prevArrow:hover,
#nextArrow:hover {
  background: rgba(255,255,255,0.9);
  color: #000;
}

/* ========== Wissen/Produkte (Kreis) Layout ========== */
#circleContainer {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 2rem auto;
  position: relative;
  border-radius: 50%;
  overflow: visible;
}

#centerCircle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 2px solid #999;
  display: flex; 
  align-items: center; 
  justify-content: center;
  overflow: hidden;
  left: 0; 
  top: 0;
  transform: translate(-50%, -50%);
}
#centerCircle img {
  max-width: 100%;
  max-height: 100%;
}

.orbit-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ddd;
  border: 2px solid #bbb;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.orbit-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.orbit-circle:hover {
  transform: scale(1.3) !important;
  z-index: 999;
}

/* ========== Textbereiche / Über uns / Impressum / AGB etc. ========== */
#aboutPage {
  font-size: 1.325rem;
  line-height: 1.5;
  width: 50%;
  margin: 0 auto;
}

#Impressum {
  font-size: 1.325rem;
  line-height: 1.5;
  width: 50%;
  margin: 0 auto;
}

#agbs {
  font-size: 1.325rem;
  line-height: 1.5;
  width: 80%;
  margin: 0 auto;
}

#datenschutz {
  font-size: 1.325rem;
  line-height: 1.5;
  width: 80%;
  margin: 0 auto;
}

/* ==============================================
 =========== RESPONSIVE NAV (Mobile) ===========
 ============================================== */
@media (max-width: 600px) {
  /* 1) Burger-Button -> display: flex (Rest: Desktop=none) */
  #burgerBtn {
    display: flex;
  }

  /* 2) Das UL im mobilen Zustand verbergen, bis .nav-open */
  nav ul {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  #mainNav.nav-open ul {
    display: flex;
  }

  nav a {
    font-size: clamp(14px, 5vw, 24px);
  }

  /* Header dynamisch */
  header {
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .logo {
    height: 80px;
  }

  /* Footer-Navigation Umbruch */
  .footer-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  /* #aboutPage -> 100% statt 50% */
  #aboutPage {
    width: 100%;
  }

  /* Ggf. Header-Container anpassen, 
     damit Logo & Burger genug Platz haben. */
  .header-container {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
}

/* ===========================================
   ========== PRODUKTE: 2 Layouts ============
   #desktopLayout = Desktop
   #mobileLayout  = Mobile
=========================================== */
#desktopLayout {
  display: block; /* Desktop sichtbar */
}
#mobileLayout {
  display: none;
  max-width: 600px;
  margin: 2rem auto;
}

/* Mobile-Liste: Einfache Darstellung */
.mobile-product {
  text-align: center;
  margin-bottom: 1.5rem;
}
.mobile-product img {
  max-width: 100%;
  height: auto;
}
.mobile-product-title {
  font-weight: bold;
  margin-top: 0.5rem;
}
.mobile-product-desc {
  margin: 0.3rem 0;
}
.product-divider {
  border-top: 1px solid #ccc;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Handy-Layout schaltet Desktop-Layout aus */
@media (max-width: 600px) {
  #desktopLayout {
    display: none;
  }
  #mobileLayout {
    display: block;
  }
}

/* product_info: Container-Bereich für Container-Seite (prodb.php) */
/* = Entfernt background-color: #fff, damit #FAFAD2 durchscheint */
#product_info {
  max-width: 60%;    /* oder 900px, nach Geschmack */
  margin: 0 auto;
  padding: 1rem;
  font-size: 1.325rem;
  /* background-color: #FAFAD2;  <- Falls Du hier Beige willst
     Sonst Weglassen => 'erbt' Body-Hintergrund #FAFAD2 */
}

/* Mobile-Ansicht #product_info */
@media (max-width: 600px) {
  #product_info {
    max-width: 100%;
    padding: 0.5rem;
  }
}
/* WISSEN.PHP - STYLES */

/* Desktop vs Mobile */
#wissenDesktop {
  display: block;
}
#wissenMobile {
  display: none;
}
@media (max-width: 600px) {
  #wissenDesktop {
    display: none;
  }
  #wissenMobile {
    display: block;
  }
}

/* Tabelle Desktop */
#wissenTable {
  border-collapse: collapse;
  margin: 2rem auto;
  width: 90%;
}
#wissenTable td {
  border: 1px solid #ccc;  /* oder none, wenn du keinen Rand willst */
  vertical-align: middle;
  text-align: center;
  padding: 0.5rem;
}
#wissenTable td:first-child img {
  width: 100%;
  height: auto;
}

/* Mobile-Liste */
.wissenItem {
  margin: 1rem auto;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  width: 90%;
  max-width: 600px;
}
.wissenItem img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.wissenItemTitle {
  margin-top: 0.5rem;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}
.wissenItemDesc {
  font-size: 1rem;
  margin: 0.5rem 0;
  text-align: center;
}
.wissenItemLink {
  text-align: center;
  margin: 0.5rem 0;
}
.wissenItemLink strong {
  color: #000080; /* z.B. Dunkelblau */
  text-decoration: underline;
  cursor: pointer;
}
/* wissen_info: Container-Bereich für Container-Seite (wisse.php) */
/* = Entfernt background-color: #fff, damit #FAFAD2 durchscheint */
#wissen_info {
  max-width: 60%;    /* oder 900px, nach Geschmack */
  margin: 0 auto;
  padding: 1rem;
  font-size: 1.325rem;
  /* background-color: #FAFAD2;  <- Falls Du hier Beige willst
     Sonst Weglassen => 'erbt' Body-Hintergrund #FAFAD2 */
}

/* Mobile-Ansicht #wissen_info */
@media (max-width: 600px) {
  #wissen_info {
    max-width: 100%;
    padding: 0.5rem;
  }
}
/* anleitungen: Container-Bereich für Container-Seite (manu.php) */
/* = Entfernt background-color: #fff, damit #FAFAD2 durchscheint */
#anleitungen {
  max-width: 60%;    /* oder 900px, nach Geschmack */
  margin: 0 auto;
  padding: 1rem;
  font-size: 1.325rem;
  /* background-color: #FAFAD2;  <- Falls Du hier Beige willst
     Sonst Weglassen => 'erbt' Body-Hintergrund #FAFAD2 */
}

/* Mobile-Ansicht #wissen_info */
@media (max-width: 600px) {
  #anleitungen {
    max-width: 100%;
    padding: 0.5rem;
  }
}