/* Project Page Styles */
.mainContent {
  min-height: 100vh;
  background-color: #ffffff;
}

.contentContainer {
  max-width: 1416px;
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  margin: 40px 0;
  padding: 0;
}

/* Abwechselnde Hintergründe - Startet mit weiß, dann hellblau */
/* Hero-Section wird übersprungen, daher starten wir mit even für erste Projekt-Section */
.section:nth-child(even) {
  background-color: #f4f9ff;
  padding: 40px 0;
  margin: 40px 0;
  border-radius: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: hidden;
}

.section:nth-child(even) .contentContainer {
  max-width: 1416px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Ungerade Sections (inkl. Hero) haben weißen Hintergrund */
.section:nth-child(odd) {
  background-color: #ffffff;
  padding: 40px 0;
  margin: 40px 0;
}

.projectHeader {
  background: linear-gradient(135deg, #E30A1D, #c0091a);
  color: white;
  padding: 30px 40px;
  text-align: center;
}

.projectTitle {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.projectDate {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  opacity: 0.9;
  font-style: italic;
}

.textImageSection {
  display: block;
  padding: 40px 0;
  overflow: visible;
  width: 100%;
  min-height: 0;
}

/* Design-Vorlagen */
.designTextLeftImageRight {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
}

.designTextLeftImageRight .textContent {
  flex: 1;
}

.designTextLeftImageRight .imageContent {
  flex: 1;
  text-align: center;
}

.designTextRightImageLeft {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
  flex-direction: row;
}

.designTextRightImageLeft .textContent {
  flex: 1;
  order: 2; /* Text kommt nach dem Bild (rechts) */
}

.designTextRightImageLeft .imageContent {
  flex: 1;
  text-align: center;
  order: 1; /* Bild kommt vor dem Text (links) */
}

.designTextTopImageBottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 0;
}

.designTextTopImageBottom .textContent {
  width: 100%;
}

.designTextTopImageBottom .imageContent {
  width: 100%;
  text-align: center;
}

.designImageTopTextBottom {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px 0;
}

.designImageTopTextBottom .textContent {
  width: 100%;
}

.designImageTopTextBottom .imageContent {
  width: 100%;
  text-align: center;
}

.designTextOnly {
  padding: 40px 0;
}

.designTextOnly .textContent {
  width: 100%;
}

.designImageOnly {
  padding: 40px 0;
}

.designImageOnly .imageContent {
  width: 100%;
  text-align: center;
}

/* Wenn nur Text ohne Bilder, kann Flexbox verwendet werden */
.textImageSection:has(.imageContent) {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
}

.textContent {
  /* Wenn Parent Flexbox ist, flex: 1 */
  flex: 1;
  /* Wenn Parent Block ist, normale Block-Darstellung */
  display: block;
  /* Wichtig: Text soll um Float-Bilder fließen können */
  min-width: 0;
  width: 100%;
  /* Container soll Textfluss ermöglichen - KEIN overflow: hidden */
  overflow: visible;
  /* Container soll nicht den Textfluss blockieren */
  position: relative;
  /* Sicherstellen dass Text um Float-Bilder fließt */
  min-height: 0;
  /* Hintergrund transparent, damit er zur Section passt */
  background: transparent;
}

.imageContent {
  flex: 1;
  text-align: center;
}

.projectImage {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.projectDescription {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
  /* Text soll um Float-Bilder fließen können */
  width: 100%;
  overflow: visible;
  /* Wichtig: Container soll Textfluss ermöglichen */
  display: block;
  position: relative;
  /* Sicherstellen dass Text um Float-Bilder fließt */
  min-height: 0;
  /* Hintergrund transparent, damit er zur Section passt */
  background: transparent;
}

/* CKEditor Content Styles für Projekt-Beschreibungen */
.projectDescription p,
.projectDescription .projectDescription,
.detailItem p.projectDescription,
.detailItem p {
  margin-bottom: 1rem;
  color: #333;
  line-height: 1.6;
  /* Text soll um Float-Bilder fließen - KEIN clear */
  clear: none !important;
  overflow: visible !important;
  /* Hintergrund transparent */
  background: transparent;
}

.projectDescription h2,
.projectDescription h3,
.projectDescription h4 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  color: #2a2f43;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  /* Überschriften sollen um Float-Bilder fließen können */
  clear: none;
  overflow: visible;
  /* Hintergrund transparent */
  background: transparent;
}

.projectDescription h2 {
  font-size: 1.5rem;
}

.projectDescription h3 {
  font-size: 1.25rem;
}

.projectDescription h4 {
  font-size: 1.1rem;
}

.projectDescription strong {
  font-weight: 600;
  color: #2a2f43;
}

/* Bilder im CKEditor-Content - Größe und Styles aus CKEditor übernehmen */
.projectDescription img {
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  /* Standard: max-width nur wenn keine inline-Styles vorhanden */
  /* WICHTIG: Inline-Styles haben höchste Priorität, werden nicht überschrieben */
  /* max-width wird nur für Bilder ohne width-Style gesetzt */
}

/* Bilder OHNE width-Style: max-width setzen */
.projectDescription img:not([style*="width"]) {
  max-width: 100%;
  height: auto;
}

/* Wenn width/height inline gesetzt sind, diese respektieren - keine Überschreibung */
.projectDescription img[style*="width"],
.projectDescription img[style*="height"] {
  /* Inline-Styles haben automatisch höchste Priorität in CSS */
  /* max-width nur entfernen wenn explizit width gesetzt */
}

/* Figure-Elemente respektieren ihre inline-Styles */
.projectDescription figure[style*="width"],
.projectDescription figure[style*="height"] {
  /* Inline-Styles haben Priorität */
}

/* CKEditor figure-Elemente */
.projectDescription figure,
.detailItem figure,
.projectDetails figure {
  margin: 1rem 0;
  display: block;
  clear: none !important;
}

.projectDescription figure.image,
.detailItem figure.image,
.projectDetails figure.image {
  margin: 1rem 0;
  display: block;
  clear: none !important;
}

/* Figure mit width/height Styles respektieren - auch verschachtelt */
.projectDescription figure[style*="width"],
.projectDescription figure[style*="height"],
.detailItem figure[style*="width"],
.detailItem figure[style*="height"],
.projectDetails figure[style*="width"],
.projectDetails figure[style*="height"] {
  max-width: none !important;
}

/* Bilder innerhalb von figure-Elementen - Größe respektieren */
.projectDescription figure.image img,
.detailItem figure.image img,
.projectDetails figure.image img {
  max-width: none;
}

/* Wenn img direkt width/height hat, diese respektieren */
.projectDescription figure.image img[style*="width"],
.projectDescription figure.image img[style*="height"],
.detailItem figure.image img[style*="width"],
.detailItem figure.image img[style*="height"],
.projectDetails figure.image img[style*="width"],
.projectDetails figure.image img[style*="height"] {
  max-width: none !important;
}

/* ============================================
   Rechts ausgerichtete Bilder - Float-Regeln
   ============================================ */

/* Alle figure.image.image-style-side Elemente - universell gültig */
/* WICHTIG: Diese Regeln müssen die höchste Spezifität haben */
figure.image.image-style-side,
figure.image.image-style-side.image_resized,
.projectDescription figure.image.image-style-side,
.projectDescription figure.image.image-style-side.image_resized,
.detailItem figure.image.image-style-side,
.detailItem figure.image.image-style-side.image_resized,
.projectDetails figure.image.image-style-side,
.projectDetails figure.image.image-style-side.image_resized,
.textContent figure.image.image-style-side,
.textContent figure.image.image-style-side.image_resized,
.textImageSection figure.image.image-style-side,
.textImageSection figure.image.image-style-side.image_resized {
  float: right !important;
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  max-width: none !important;
  clear: none !important;
  shape-outside: margin-box !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Bilder innerhalb von figure-Elementen */
figure.image.image-style-side img,
figure.image.image-style-side.image_resized img,
.projectDescription figure.image.image-style-side img,
.detailItem figure.image.image-style-side img,
.projectDetails figure.image.image-style-side img {
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  display: block;
}

.projectDescription img[style*="float: right"],
.projectDescription img[style*="float:right"],
.projectDescription img[style*="float: right;"],
.projectDescription img[style*="float:right;"] {
  float: right !important;
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  max-width: none !important;
  clear: none !important;
  shape-outside: margin-box;
}

/* Links ausgerichtete Bilder */
.projectDescription figure.image.image-style-side-left {
  float: left !important;
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  max-width: none !important;
  clear: none !important;
}

.projectDescription figure.image.image-style-side-left img {
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  display: block;
  /* width/height aus inline-Styles respektieren */
}

.projectDescription img[style*="float: left"],
.projectDescription img[style*="float:left"],
.projectDescription img[style*="float: left;"],
.projectDescription img[style*="float:left;"] {
  float: left !important;
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  max-width: none !important;
  clear: none !important;
}

/* Block-Bilder (volle Breite) */
.projectDescription figure.image.image-style-block {
  display: block !important;
  margin: 1.5rem auto !important;
  float: none !important;
  max-width: 100% !important;
}

.projectDescription figure.image.image-style-block img {
  display: block !important;
  margin: 0 !important;
  float: none !important;
  max-width: 100% !important;
}

.projectDescription img[style*="display: block"] {
  display: block !important;
  margin: 1.5rem auto !important;
  float: none !important;
}

/* Inline-Bilder (Standard) */
.projectDescription figure.image.image-style-inline {
  display: inline-block;
  margin: 0.5rem;
  float: none;
}

.projectDescription figure.image.image-style-inline img {
  display: inline-block;
  margin: 0;
  float: none;
}

/* Listen */
.projectDescription ul,
.projectDescription ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.projectDescription li {
  margin-bottom: 0.5rem;
}

/* Links */
.projectDescription a {
  color: #E30A1D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.projectDescription a:hover {
  color: #c0091a;
  text-decoration: underline;
}

/* Tabellen */
.projectDescription table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.projectDescription table th,
.projectDescription table td {
  padding: 0.75rem;
  border: 1px solid #ddd;
  text-align: left;
}

.projectDescription table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2a2f43;
}

/* Clearfix für Float-Elemente - nur am Ende */
.projectDescription::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   WICHTIG: Textfluss um Float-Bilder ermöglichen
   ============================================ */

/* Alle direkten Kinder von projectDescription */
.projectDescription > * {
  clear: none !important;
  overflow: visible !important;
  /* Hintergrund transparent */
  background: transparent;
}

/* Alle Absätze (auch verschachtelte) - WICHTIG für Textfluss */
.projectDescription p,
.detailItem p,
.projectDetails p,
.detailItem p.projectDescription {
  clear: none !important;
  overflow: visible !important;
  /* Sicherstellen dass Text um Float-Bilder fließt */
  display: block;
}

/* Alle Divs (auch verschachtelte) */
.projectDescription div,
.detailItem div,
.projectDetails div {
  clear: none !important;
  overflow: visible !important;
  /* Container sollen Textfluss ermöglichen */
  display: block;
}

/* Nur der allerletzte Absatz soll clear haben */
.projectDescription > p:last-of-type:last-child {
  clear: both;
}

/* Überschriften sollen um Float-Bilder fließen können */
/* Nur wenn Überschrift direkt vor Float-Bild steht, könnte clear helfen */
.projectDescription > h2:first-child,
.projectDescription > h3:first-child,
.projectDescription > h4:first-child {
  /* clear: both entfernt - Überschriften sollen auch um Bilder fließen */
  clear: none;
}

/* Responsive: Bilder auf mobilen Geräten nicht floaten */
@media (max-width: 768px) {
  .projectDescription img[style*="float"],
  .projectDescription figure.image.image-style-side,
  .projectDescription figure.image.image-style-side-left {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 1rem auto;
  }
  
  .projectDescription figure.image.image-style-side img,
  .projectDescription figure.image.image-style-side-left img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ============================================
   Container für Textfluss konfigurieren
   ============================================ */

.projectDetails {
  margin-top: 30px;
  clear: none !important;
  overflow: visible !important;
  width: 100%;
  display: block;
}

.detailItem {
  margin-bottom: 10px;
  padding: 5px 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
  clear: none !important;
  overflow: visible !important;
  width: 100%;
  display: block;
  /* Container soll Textfluss um Float-Bilder ermöglichen */
  position: relative;
}

.detailItem.highlight {
  background: transparent;
  border-left-color: transparent;
}

.detailItem strong {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2a2f43;
  display: block;
  margin-bottom: 5px;
}

.detailItem p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.95rem;
  color: #666;
  margin: 0;
}

/* Service Features Section */

.sectionTitle {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #2a2f43;
  text-align: left;
  margin: 0 0 20px 0;
  position: relative;
  max-width: 1416px;
  width: 100%;
  padding: 0;
}

.sectionTitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background-color: #E30A1D;
  z-index: -1;
}

/* Spezielle Klasse für H2 mit linker Linie */
.leftLineTitle.sectionTitle::before {
  content: '' !important;
  position: absolute !important;
  left: calc(-50vw + 50%) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: calc(50vw - 50% - 40px) !important;
  height: 2px !important;
  background-color: #E30A1D !important;
  z-index: 10 !important;
  display: block !important;
}

.featureDescription {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 30px;
  text-align: left;
}

.featureItem {
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-left: none;
}

.featureTitle {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #2a2f43;
  margin-bottom: 10px;
}

.featureItem p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* Manufacturer Section */
.manufacturerSection {
  background: white;
  margin: 60px 0;
  padding: 40px 0;
}

/* Contact Section */
.contactFormContainer {
  max-width: 600px;
  margin: 0 auto;
}

.formRow {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.formGroup {
  flex: 1;
  margin-bottom: 20px;
}

.halfWidth {
  flex: 1;
}

.formGroup label {
  display: block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2a2f43;
  margin-bottom: 8px;
}

.formGroup input,
.formGroup textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.formGroup input:focus,
.formGroup textarea:focus {
  outline: none;
  border-color: #E30A1D;
}

.checkboxGroup {
  margin: 20px 0;
}

.checkboxLabel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  cursor: pointer;
}

.checkboxLabel input[type="checkbox"] {
  width: auto;
  margin: 0;
  margin-top: 2px;
}

.checkboxText {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9rem;
  color: #333;
  line-height: 1.4;
}

.privacyGroup {
  margin: 20px 0;
  padding: 20px;
  background: #fff3cd;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

.submitButton {
  width: 100%;
  padding: 15px 30px;
  background: #E30A1D;
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submitButton:hover {
  background: #c0091a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .leftLineTitle.sectionTitle::before {
    display: none !important;
  }

  .textImageSection {
    flex-direction: column;
    gap: 20px;
  }

  .contentContainer {
    padding: 0 16px;
  }

  .textImageSection,
  .designTextLeftImageRight,
  .designTextRightImageLeft,
  .designTextTopImageBottom,
  .designImageTopTextBottom,
  .designTextOnly,
  .designImageOnly {
    padding: 24px 0;
  }

  .section:nth-child(even),
  .section:nth-child(odd) {
    width: 100%;
    margin-left: 0;
  }
  
  .formRow {
    flex-direction: column;
    gap: 0;
  }
  
  .sectionTitle {
    font-size: 32px;
  }
  
  .contentContainer {
    padding: 0 20px;
  }
  
  .leftLineTitle.sectionTitle::before {
    width: calc(50vw - 50% - 20px) !important;
  }
}