@charset "utf-8";

/* === BASIS-RESET UND BOX-MODELL === */
html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
}

/* === BODY UND GRUNDLEGENDE STYLES === */
body {
  margin: 0;
  padding: 0;
  font-family: Calibri, sans-serif;
  overflow-x: hidden;
  color: #000000;
  background-color: #fff;
}

/* === FIX: PROBLEMATISCHE GLOBALE REGEL ENTFERNT === */
/* Alte, zerstörerische Regel wurde entfernt: */
/* body > * { padding: 1em; margin: 1em 0; } */

/* === NEUE ZENTRIERUNGS-LOGIK FÜR ALLE HAUPTELEMENTE === */
/* Zentrierung wie im Original - NICHT volle Breite */
.gallery-container,
.abschnitt, 
.artikel, 
.news,
.footer {
  margin: 20px auto;
  max-width: 1200px;
  width: calc(100% - 40px); /* Etwas Abstand zu den Rändern */
}

/* === NAVBAR - SCHMAL WIE IM ORIGINAL === */
.navbar {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #5c0e2e;
  color: #fff;
  font-family: Century, serif;
  font-size: 16pt;
  margin: 0 auto; /* Zentriert */
  max-width: 1200px; /* Nicht volle Breite */
  width: calc(100% - 40px); /* Wie im Original */
  border-radius: 0 0 10px 10px; /* Abgerundete untere Ecken */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* LOGO - schmaler wie im Original */
.logo img {
  width: 200px; /* Kleiner als vorher */
  height: 70px;
  max-width: 100%;
  object-fit: contain;
}

.nav-links a {
  color: #f2f2f2;
  text-decoration: none;
}

/* NAVBAR MENU */
.menu {
  display: flex;
  gap: 1em;
  font-size: 18px;
}

.menu li:hover {
  background-color: rgba(221, 221, 221, 0.2);
  border-radius: 5px;
  transition: 0.3s ease;
}

.menu li {
  list-style-type: none;
  padding: 8px 12px;
}

/* DROPDOWN MENU */
.services {
  position: relative;
}

.dropdown {
  background-color: #5c0e2e;
  padding: 0.8em 0;
  position: absolute;
  display: none;
  border-radius: 10px;
  top: 100%;
  left: 0;
  z-index: 1001;
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.dropdown li + li {
  margin-top: 5px;
}

.dropdown li {
  padding: 8px 15px;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.dropdown li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.services:hover .dropdown {
  display: block;
}

/* RESPONSIVE NAVBAR */
input[type=checkbox] {
  display: none;
}

.hamburger {
  display: none;
  font-size: 24px;
  user-select: none;
  cursor: pointer;
  padding: 5px;
}

/* === TABELLEN-STYLES === */
.table-container {
  overflow-x: auto;
  margin: 20px 0;
  width: 100%;
  background: transparent;
  border: none;
}

table {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #f8f9fa;
  border: 1px solid #ddd;
}

th, td {
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: top;
  padding: 15px 10px;
  background: transparent;
}

th {
  background: #f8f9fa;
  font-weight: bold;
  color: #5c0e2e;
  font-size: 1.1rem;
}

.subject-title {
  margin: 15px 0;
  font-weight: bold;
  color: #5c0e2e;
  font-size: 1.1rem;
}

/* === GALLERY CONTAINER - HAUPTLAYOUT === */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  margin: 40px auto;
  border: 3px solid #5c0e2e;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  background: white;
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 1200px;
}

.gallery-text {
  flex: 2;
  min-width: 300px;
  padding: 30px;
  background: white;
  overflow: hidden;
}

.gallery-images {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  background: #f8f9fa;
}

/* === STANDARD BILD MIT BESCHRIFTUNG === */
.image-with-caption {
  flex: 1;
  min-width: 250px;
  text-align: center;
  margin-bottom: 20px;
}

.image-with-caption img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 100%;
  background: white;
}

.caption {
  margin-top: 15px;
  padding: 0 10px;
}

.caption h3 {
  font-size: 1.3rem;
  color: #777;
  margin-bottom: 8px;
}

.caption p {
  color: #777;
  font-size: 1rem;
  line-height: 1.4;
}

/* === ERWEITERTE VERSIONEN - BEIBEHALTEN === */
.image-with-caption_broader {
  flex: 2;
  min-width: 300px;
  text-align: center;
  margin-bottom: 20px;
}

.image-with-caption_broader img {
  width: 100%;
  height: 450px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-width: 100%;
  background: white;
}

.caption_broader {
  margin-top: 20px;
  padding: 0 15px;
}

.caption_broader h3 {
  font-size: 1.4rem;
  color: #5c0e2e;
  margin-bottom: 10px;
}

.caption_broader p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.5;
}

.gallery-text-images_broader {
  flex: 1;
  min-width: 300px;
  padding: 30px;
  background: white;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gallery-images_broader {
  flex: 2;
  min-width: 300px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  background: #f8f9fa;
}

/* === ALTERNATIVE LAYOUTS === */
.alternate {
  flex-direction: row-reverse;
}

/* === TEXT GALLERY (INLINE) === */
.text-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 30px 0;
  justify-content: center;
}

.text-gallery-item {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  text-align: center;
}

.text-gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  max-width: 100%;
  background: white;
}

.text-gallery-caption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #777;
  padding: 0 10px;
}

/* === MEDIEN BEREICH === */
.media-section {
  flex: 1;
  min-width: 250px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  background: #f8f9fa;
}

.media-item {
  width: 100%;
  text-align: center;
}

.media-item img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: white;
}

.media-item video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: #000;
}

/* === TYPOGRAPHY === */
h2 {
  font-size: 1.8rem;
  color: #8d000085;
  margin: 40px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
}

h3 {
  font-size: 1.5rem;
  color: #8d000085;
  margin: 35px 0 15px 0;
  border-bottom: 2px solid #eaeaea;
}

h4 {
  font-size: 1.2rem;
  color: #8d000085;
  margin: 25px 0 12px 0;
  border-bottom: 2px solid #eaeaea;
}

h5 {
  font-size: 1.5rem;
  color: #d266a4;
  margin: 25px 0 15px 0;
}

p {
  margin-bottom: 20px;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
}

ul, ol {
  margin: 15px 0;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
  color: #555;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 2px solid #cecac8;
  margin: 30px 0;
}

/* === ARTIKEL UND ABSCHNITTE === */
.abschnitt {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 20px auto;
  font-size: 13pt;
  max-width: 1200px;
  border-radius: 8px;
  width: calc(100% - 40px);
}

.artikel {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 25px;
  margin: 25px auto;
  font-size: 13pt;
  max-width: 1200px;
  border-radius: 8px;
  width: calc(100% - 40px);
}

.news {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #ddd;
  margin: 20px auto;
  max-width: 1200px;
  border-radius: 8px;
  width: calc(100% - 40px);
}

.abschnitt img,
.artikel img,
.news img {
  float: right;
  width: 300px;
  height: 300px;
  padding: 10px;
  margin: 0 0 20px 20px;
  object-fit: contain;
  max-width: 100%;
  border-radius: 8px;
}

/* === SPEZIAL-INHALTE === */
.formula {
  background-color: #f0f7ff;
  padding: 20px;
  margin: 25px 0;
  border-radius: 5px;
  font-family: "Cambria", "Times New Roman", serif;
  text-align: center;
  border-left: 5px solid #5c0e2e;
  color: #222;
  font-size: 1.1rem;
}

.formula-inline {
  font-family: "Cambria", "Times New Roman", serif;
  font-style: italic;
  background-color: #f0f7ff;
  padding: 2px 8px;
  border-radius: 4px;
  color: #222;
  font-weight: 500;
}

.code-block {
  background-color: #f8f9fa;
  border-left: 5px solid #5c0e2e;
  padding: 20px;
  margin: 25px 0;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.95rem;
  white-space: pre-wrap;
  overflow-x: auto;
  border-radius: 0 5px 5px 0;
  color: #333;
  line-height: 1.4;
}

.code-block:hover {
  background-color: #f0f2f5;
}

.note {
  background-color: #fffde7;
  border-left: 5px solid #ffd54f;
  padding: 20px;
  margin: 25px 0;
  border-radius: 0 5px 5px 0;
}

.note strong {
  color: #8d000085;
}

.calculation-chain {
  background-color: #7512383b;
  padding: 25px;
  border-radius: 5px;
  margin: 30px 0;
  border-left: 5px solid #7512383b;
}

.calculation-chain ol {
  margin: 15px 0;
  padding-left: 25px;
}

.calculation-chain li {
  margin-bottom: 15px;
  padding-left: 8px;
  color: #751238e0;
  font-weight: 500;
}

/* === LIGHTBOX === */
.lightbox {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain;
  animation: zoom 0.3s;
}

.lightbox-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-size: 1.2rem;
}

.lightbox-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 10001;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}

/* === FOOTER === */
.footer {
  background-color: #5c0e2e;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  margin: 40px auto 0 auto;
  max-width: 1200px;
  width: calc(100% - 40px);
  border-radius: 10px 10px 0 0;
}

.footer p {
  margin: 10px 0;
  font-size: 0.9rem;
  opacity: 0.9;
  color: white;
}

.footer a {
  font-size: 21px;
  color: #a8d8ff;
  transition: color 0.3s;
  text-decoration: none;
}

.footer a:hover {
  color: #ffffff;
}

.footer img {
  margin: 20px 0;
  max-width: 200px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
  /* NAVBAR MOBILE */
  .navbar {
    width: calc(100% - 20px);
    padding: 8px 15px;
    margin: 0 auto;
  }
  
  .logo img {
    width: 180px;
    height: 60px;
  }
  
  .menu {
    display: none;
    position: absolute;
    background-color: #5c0e2e;
    right: 0;
    left: 0;
    text-align: center;
    padding: 16px 0;
    top: 100%;
    z-index: 1000;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  }

  .menu li {
    display: block;
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .menu li:last-child {
    border-bottom: none;
  }

  .menu li + li {
    margin-top: 0;
  }

  input[type=checkbox]:checked ~ .menu {
    display: block;
  }

  .hamburger {
    display: block;
  }

  .dropdown {
    position: relative;
    width: 90%;
    margin: 10px auto 0 auto;
    box-shadow: none;
    background-color: rgba(0,0,0,0.2);
  }
  
  /* ALLE CONTAINER auf Mobile */
  .gallery-container,
  .abschnitt,
  .artikel,
  .news,
  .footer {
    width: calc(100% - 20px);
    margin: 15px auto;
  }

  /* GALLERY MOBILE */
  .gallery-container {
    flex-direction: column;
    padding: 15px;
    margin: 20px auto;
  }

  .gallery-text,
  .gallery-images,
  .gallery-text-images_broader,
  .gallery-images_broader {
    flex: none;
    width: 100%;
    padding: 20px;
    min-width: 100%;
  }

  .image-with-caption,
  .image-with-caption_broader {
    flex: 1 1 100%;
    min-width: 100%;
    margin-bottom: 20px;
  }

  .image-with-caption img {
    height: 250px;
  }
  
  .image-with-caption_broader img {
    height: 300px;
  }

  /* ARTIKEL BILDER MOBILE */
  .abschnitt img,
  .artikel img,
  .news img {
    float: none;
    width: 100%;
    height: auto;
    max-width: 300px;
    margin: 0 auto 20px auto;
    display: block;
    padding: 0;
  }

  /* TEXT GALLERY MOBILE */
  .text-gallery {
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
  }
  
  .text-gallery-item {
    min-width: 100%;
    max-width: 100%;
  }
  
  .text-gallery-item img {
    height: 200px;
  }
  
  /* LIGHTBOX MOBILE */
  .lightbox-content {
    width: 95%;
  }
  
  .lightbox-close {
    top: 10px;
    right: 20px;
    font-size: 30px;
  }
  
  /* TYPOGRAPHY MOBILE */
  h2 {
    font-size: 1.6rem;
    margin: 30px 0 15px 0;
  }
  
  h3 {
    font-size: 1.3rem;
    margin: 25px 0 12px 0;
  }
  
  h4 {
    font-size: 1.1rem;
  }
  
  p {
    font-size: 1rem;
  }
  
  /* TABELLEN MOBILE */
  .table-container {
    margin: 15px 0;
  }
  
  th, td {
    padding: 10px 8px;
    font-size: 0.9rem;
    min-width: 120px;
  }
}

/* === DESKTOP OPTIMIERUNGEN === */
@media (min-width: 769px) and (max-width: 1200px) {
  .navbar {
    width: calc(100% - 60px);
    max-width: 1100px;
  }
  
  .gallery-container,
  .abschnitt,
  .artikel,
  .news,
  .footer {
    width: calc(100% - 60px);
    max-width: 1100px;
  }
}

@media (min-width: 1201px) {
  .navbar {
    width: calc(100% - 100px);
    max-width: 1200px;
  }
  
  .gallery-container,
  .abschnitt,
  .artikel,
  .news,
  .footer {
    width: calc(100% - 100px);
    max-width: 1200px;
  }
}

/* === PRINT STYLES === */
@media print {
  .navbar,
  .footer,
  .lightbox {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000 !important;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .gallery-container {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
    break-inside: avoid;
  }
  
  .gallery-text,
  .gallery-images {
    page-break-inside: avoid;
  }
  
  .artikel, .abschnitt, .news {
    break-inside: avoid;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    font-weight: normal;
  }
}


/* === NAVIGATION FIX - DROPDOWN PROBLEM === */

/* Navbar komplett von globalen Regeln isolieren */
.navbar,
.navbar *,
.nav-links,
.nav-links *,
.menu,
.menu *,
.services,
.services *,
.dropdown,
.dropdown * {
  box-sizing: border-box;
}

/* Navbar selbst */
.navbar {
  position: relative !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  background-color: #5c0e2e !important;
  color: #fff !important;
  font-family: Century, serif !important;
  font-size: 16pt !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
  width: calc(100% - 40px) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Dropdown-Menü spezifisch fixen */
.services {
  position: relative !important;
  margin: 0 !important;
  padding: 8px 12px !important;
}

.dropdown {
  background-color: #5c0e2e !important;
  padding: 0.8em 0 !important;
  position: absolute !important;
  display: none !important;
  border-radius: 10px !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important;
  min-width: 200px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
  margin: 0 !important;
}

.dropdown li {
  padding: 8px 15px !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  margin: 0 !important;
  list-style: none !important;
  display: block !important;
}

/* Hover-Effekt für Dropdown */
.services:hover .dropdown {
  display: block !important;
}

/* Mobile-Anpassungen */
@media (max-width: 768px) {
  .dropdown {
    position: relative !important;
    width: 90% !important;
    margin: 10px auto 0 auto !important;
    box-shadow: none !important;
    background-color: rgba(0,0,0,0.2) !important;
    display: none !important;
  }
  
  .services:hover .dropdown {
    display: none !important; /* Auf Mobile kein Hover */
  }
  
  /* Wenn Mobile-Menü geöffnet ist */
  input[type=checkbox]:checked ~ .menu .dropdown {
    display: block !important;
  }
}

/* === KORREKTUR: ÜBERSCHRIFTEN AUSSERHALB VON TABELLEN === */

/* 1. ALLE Überschriften außerhalb von Tabellen links ausrichten */
.gallery-text h2,
.gallery-text h3,
.gallery-text h4,
.gallery-text h5,
.gallery-text h6,
.artikel h2,
.artikel h3, 
.artikel h4,
.artikel h5,
.artikel h6,
.abschnitt h2,
.abschnitt h3,
.abschnitt h4, 
.abschnitt h5,
.abschnitt h6,
.news h2,
.news h3,
.news h4,
.news h5,
.news h6 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

/* 2. Speziell für h2 mit der unteren Linie */
.gallery-text h2,
.artikel h2,
.abschnitt h2,
.news h2 {
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 10px;
  text-align: left !important;
  width: 100%;
  display: block;
}

/* 3. Sicherstellen, dass Text in Containern links ausgerichtet ist */
.gallery-text p,
.artikel p,
.abschnitt p,
.news p,
.gallery-text ul,
.gallery-text ol,
.artikel ul,
.artikel ol {
  text-align: left !important;
}

/* 4. Falls es einen zentrierenden Elterneffekt gibt */
.gallery-text,
.artikel,
.abschnitt,
.news {
  text-align: left !important;
}

/* 5. Speziell für Listen */
.gallery-text li,
.artikel li,
.abschnitt li,
.news li {
  text-align: left !important;
  margin-left: 0;
}