/* hero-sections.css - Extracted generic CSS for all hero sections */ /* Replaces per-section inline CSS to improve text-to-code ratio */ /* Kritisches CSS - Sofort laden vor Content */ [data-section-id] .article-content, [data-section-id] .article-title, [data-section-id] .article-subtitle, [data-section-id] .article-text { word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: keep-all !important; hyphens: none !important; -webkit-hyphens: none !important; } /* === HERO SYSTEM INTEGRATION CSS FUER SECTION all === */ /* Wichtig für absolute Positionierung der Social Share Links */ [data-section-id] { position: relative; } [data-section-id] .hero-articles-section, [data-section-id] .hero-gallery-section, [data-section-id] .hero-blog-section, [data-section-id] .hero-contact-section { position: relative; z-index: 10; width: 100%; } /* Social Share Links Styling */ [data-section-id] .hero-social-share { z-index: 100 !important; } @media (max-width: 768px) { [data-section-id] .hero-social-share { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; margin: 15px auto; justify-content: center !important; } } [data-section-id] hr.my-5 { margin: 3rem 0 !important; border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); } /* Dark theme support fuer Trennlinien */ @media (prefers-color-scheme: dark) { [data-section-id] hr.my-5 { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); } } /* Abstand zwischen den verschiedenen Systemen */ [data-section-id] .hero-articles-section + .hero-gallery-section, [data-section-id] .hero-gallery-section + .hero-blog-section, [data-section-id] .hero-articles-section + .hero-blog-section, [data-section-id] .hero-blog-section + .hero-contact-section, [data-section-id] .hero-articles-section + .hero-contact-section, [data-section-id] .hero-gallery-section + .hero-contact-section { margin-top: 2rem; } /* Container-uebergreifende Responsive-Optimierungen */ @media (max-width: 768px) { [data-section-id] hr.my-5 { margin: 2rem 0 !important; } [data-section-id] .hero-articles-section + .hero-gallery-section, [data-section-id] .hero-gallery-section + .hero-blog-section, [data-section-id] .hero-articles-section + .hero-blog-section, [data-section-id] .hero-blog-section + .hero-contact-section, [data-section-id] .hero-articles-section + .hero-contact-section, [data-section-id] .hero-gallery-section + .hero-contact-section { margin-top: 1.5rem; } } /* Editor-Hinweise fuer leere Systeme */ [data-section-id] .empty-system-notice { background: rgba(255,255,255,0.1); border: 2px dashed rgba(255,255,255,0.3); border-radius: 12px; padding: 2rem; text-align: center; color: rgba(255,255,255,0.8); } [data-section-id] .empty-system-notice h4 { color: rgba(255,255,255,0.9); margin-bottom: 1rem; } /* Performance-Optimierung fuer alle Systeme */ [data-section-id] .hero-articles-section, [data-section-id] .hero-gallery-section, [data-section-id] .hero-blog-section, [data-section-id] .hero-contact-section { contain: layout style; will-change: auto; } /* Smooth Transitions fuer System-Wechsel */ [data-section-id] .hero-articles-section, [data-section-id] .hero-gallery-section, [data-section-id] .hero-blog-section, [data-section-id] .hero-contact-section { transition: opacity 0.3s ease, transform 0.3s ease; } /* Konsistente Button-Stile fuer alle Systeme */ [data-section-id] .add-article-section .btn, [data-section-id] .manage-gallery-section .btn, [data-section-id] .hero-blog-section .btn-primary, [data-section-id] .hero-contact-section .btn { border-radius: 8px; font-weight: 500; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } [data-section-id] .add-article-section .btn:hover, [data-section-id] .manage-gallery-section .btn:hover, [data-section-id] .hero-blog-section .btn-primary:hover, [data-section-id] .hero-contact-section .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); } /* === GOOGLE FONTS === */ /* ENTFERNT: @import ist render-blocking! Fonts werden async im geladen */ /* === CUSTOM FONTS - Time Burner & Moonbeam === */ @font-face { font-family: 'Time Burner'; src: url('/fonts/TimeBurner.woff2') format('woff2'), url('/fonts/TimeBurner.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Time Burner'; src: url('/fonts/TimeBurner-Bold.woff2') format('woff2'), url('/fonts/TimeBurner-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Moonbeam'; src: url('/fonts/moonbeam-Regular.woff2') format('woff2'), url('/fonts/moonbeam-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* === ARTIKEL SCROLL ANIMATIONEN - ELEGANTE GESCHWINDIGKEIT === */ /* Animation Base Classes - Langsamer und eleganter */ [data-section-id] .article-item.animate { opacity: 0 !important; transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; will-change: transform, opacity !important; } /* Mobile: Noch langsamer für elegantere Animation */ @media (max-width: 768px) { [data-section-id] .article-item.animate { transition: all 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } } [data-section-id] .article-item.animate.visible { opacity: 1 !important; } /* Fade In Up - Normale Distanz */ [data-section-id] .article-item.animate.fadeInUp { transform: translateY(50px) !important; } [data-section-id] .article-item.animate.fadeInUp.visible { transform: translateY(0) !important; } /* Fade In Left */ [data-section-id] .article-item.animate.fadeInLeft { transform: translateX(-50px) !important; } [data-section-id] .article-item.animate.fadeInLeft.visible { transform: translateX(0) !important; } /* Fade In Right */ [data-section-id] .article-item.animate.fadeInRight { transform: translateX(50px) !important; } [data-section-id] .article-item.animate.fadeInRight.visible { transform: translateX(0) !important; } /* Fade In Down */ [data-section-id] .article-item.animate.fadeInDown { transform: translateY(-50px) !important; } [data-section-id] .article-item.animate.fadeInDown.visible { transform: translateY(0) !important; } /* Zoom In */ [data-section-id] .article-item.animate.zoomIn { transform: scale(0.8) !important; } [data-section-id] .article-item.animate.zoomIn.visible { transform: scale(1) !important; } /* Slide In Up - Etwas mehr Bewegung */ [data-section-id] .article-item.animate.slideInUp { transform: translateY(70px) !important; } [data-section-id] .article-item.animate.slideInUp.visible { transform: translateY(0) !important; } /* Slide In Left */ [data-section-id] .article-item.animate.slideInLeft { transform: translateX(-70px) !important; } [data-section-id] .article-item.animate.slideInLeft.visible { transform: translateX(0) !important; } /* Slide In Right */ [data-section-id] .article-item.animate.slideInRight { transform: translateX(70px) !important; } [data-section-id] .article-item.animate.slideInRight.visible { transform: translateX(0) !important; } /* ALLE anderen CSS-Regeln ueberschreiben */ [data-section-id] .article-item.animate { animation: none !important; transition-delay: 0s !important; } /* Individuelle Delays - Schneller gestaffelt */ [data-section-id] .article-item.animate:nth-child(1).visible { transition-delay: 0.1s !important; } [data-section-id] .article-item.animate:nth-child(2).visible { transition-delay: 0.2s !important; } [data-section-id] .article-item.animate:nth-child(3).visible { transition-delay: 0.3s !important; } [data-section-id] .article-item.animate:nth-child(4).visible { transition-delay: 0.4s !important; } [data-section-id] .article-item.animate:nth-child(5).visible { transition-delay: 0.5s !important; } [data-section-id] .article-item.animate:nth-child(6).visible { transition-delay: 0.6s !important; } [data-section-id] .article-item.animate:nth-child(7).visible { transition-delay: 0.7s !important; } [data-section-id] .article-item.animate:nth-child(8).visible { transition-delay: 0.8s !important; } /* === MODAL LABEL SCHUTZ - UEBERSCHREIBT CMS EINSTELLUNGEN === */ [id^="articleModal-"] .form-label, [id^="articleModal-"] .modal-title, [id^="articleModal-"] label, [id^="articleModal-"] .btn, [id^="articleModal-"] .form-control, [id^="articleModal-"] .form-select, [id^="articleModal-"] small { font-size: 14px !important; font-weight: 400 !important; font-family: system-ui, -apple-system, sans-serif !important; font-style: normal !important; line-height: 1.5 !important; } /* Modal-Titel groesser */ [id^="articleModal-"] .modal-title { font-size: 18px !important; font-weight: 600 !important; } /* Buttons beibehalten */ [id^="articleModal-"] .btn { font-size: 14px !important; font-weight: 500 !important; } /* Form-Controls */ [id^="articleModal-"] .form-control, [id^="articleModal-"] .form-select { font-size: 14px !important; } /* Small-Text */ [id^="articleModal-"] small { font-size: 12px !important; } /* === INFO ICON STYLES FÜR MODAL (wie Top-Header) === */ [id^="articleModal-"] .fa-info-circle { font-size: 14px; margin-left: 5px; cursor: help; color: #6c757d; transition: color 0.2s ease; } [id^="articleModal-"] .fa-info-circle:hover { color: #007bff; } /* === ARTIKEL-GRID CSS FUER HERO SECTION all === */ /* WICHTIG: Alle Standard-Schriftstile UND MARGINS zurücksetzen */ [data-section-id] .article-title, [data-section-id] .article-subtitle, [data-section-id] .article-text { font-style: normal !important; margin-top: 0 !important; } [data-section-id] .articles-grid-container { position: relative; z-index: 10; width: 100%; padding: 0; /* Kein Padding auf Container */ box-sizing: border-box; } [data-section-id] .articles-grid { display: flex; flex-wrap: wrap; margin: 0; /* KEIN negatives Margin */ padding: 0 15px; /* Padding direkt auf Grid */ justify-content: center; /* Grid zentrieren */ box-sizing: border-box; /* RESPONSIVE SCALING FIXES */ transition: none !important; will-change: auto !important; } [data-section-id] .article-item { padding: 0 15px; margin-bottom: var(--hero-uniform-spacing, 30px); /* RESPONSIVE SCALING FIXES */ transition: all 0.1s ease !important; box-sizing: border-box !important; min-width: 0 !important; } [data-section-id] .article-content { border-radius: 8px; padding: 20px; height: 100%; transition: all 0.3s ease; display: flex !important; flex-direction: column !important; /* TEXT OVERFLOW UND WRAP FIXES - Ganze Wörter auf neue Zeile */ word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: keep-all !important; hyphens: none !important; -webkit-hyphens: none !important; overflow: hidden !important; box-sizing: border-box !important; } /* Reihenfolge der Elemente */ [data-section-id] .article-image { order: 1; } [data-section-id] .article-code-before-title { order: 2; } [data-section-id] .article-title { order: 3; } [data-section-id] .article-subtitle { order: 4; } [data-section-id] .article-code-before { order: 5; } [data-section-id] .article-text { order: 6; flex-grow: 1 !important; /* FÜLLT DEN RESTLICHEN PLATZ */ } [data-section-id] .article-code-after { order: 7; } [data-section-id] .article-button { order: 8; margin-top: auto !important; /* DRÜCKT BUTTON NACH UNTEN */ } /* NUR DESKTOP: Synchronisierung nur über flex-grow */ @media (min-width: 769px) { /* Bild Container */ html body [data-section-id] .article-item .article-image { display: flex !important; align-items: center !important; justify-content: center !important; } } /* Standard: Mit Hintergrund und Schatten */ [data-section-id] .article-content:not(.no-background):not(.no-shadow) { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* Mit Hintergrund aber ohne Schatten */ [data-section-id] .article-content:not(.no-background).no-shadow { background: white; box-shadow: none; } /* Ohne Hintergrund aber mit Schatten */ [data-section-id] .article-content.no-background:not(.no-shadow) { background: transparent; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } /* Ohne Hintergrund und ohne Schatten */ [data-section-id] .article-content.no-background.no-shadow { background: transparent; box-shadow: none; } /* Mit Rahmen */ [data-section-id] .article-content.with-border { border: 2px solid #e0e0e0; } /* Kombinationen */ [data-section-id] .article-content.no-background.with-border { border: 2px solid rgba(255,255,255,0.3); } /* === SCHATTEN AUF BILD - RUNDHERUM MIT PLATZ === */ [data-section-id] .article-content.shadow-on-image { overflow: visible !important; } [data-section-id] .article-content.shadow-on-image .article-image { overflow: visible !important; padding: 15px !important; margin: -15px !important; } [data-section-id] .article-content.shadow-on-image .article-image img { box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); transition: box-shadow 0.3s ease; } [data-section-id] .article-content.shadow-on-image:hover .article-image img { box-shadow: 0 0 30px rgba(0, 0, 0, 0.35); } /* === RAHMEN AUF BILD === */ [data-section-id] .article-content.border-on-image .article-image img { border: 2px solid #e0e0e0; border-radius: 0.5rem; } [data-section-id] .article-image { margin-bottom: 15px; border-radius: 6px; overflow: hidden; } [data-section-id] .article-image img { width: 100%; height: 200px; object-fit: cover; } [data-section-id] .article-title { font-size: 1.25rem; font-weight: 600; margin-top: 0 !important; margin-bottom: 10px; color: #333; word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: keep-all !important; hyphens: none !important; -webkit-hyphens: none !important; max-width: 100% !important; } [data-section-id] .article-subtitle { font-size: 1rem; font-weight: 400; margin-top: 0 !important; margin-bottom: 10px; color: #555; /* KEIN font-style mehr - wird individuell per inline-style gesetzt */ word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: keep-all !important; hyphens: none !important; -webkit-hyphens: none !important; max-width: 100% !important; } [data-section-id] .article-text { margin-top: 0 !important; color: #666; line-height: 1.6; word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: keep-all !important; hyphens: none !important; -webkit-hyphens: none !important; max-width: 100% !important; } [data-section-id] .article-custom-code { width: 100%; word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: hidden !important; } /* Alle Code-Bloecke auch mit Text-Wrap */ [data-section-id] .article-code-before-title, [data-section-id] .article-code-before, [data-section-id] .article-code-after { word-wrap: break-word !important; overflow-wrap: break-word !important; overflow: hidden !important; max-width: 100% !important; padding: 0 15px !important; } /* Desktop: Mobile-Layout ausblenden, Desktop-Grid anzeigen */ @media (min-width: 769px) { [data-section-id] .desktop-grid { display: grid !important; } [data-section-id] .mobile-layout { display: none !important; } } /* DESKTOP GROSS (ueber 1024px) - Normale Bootstrap Grid-Klassen */ @media (min-width: 1025px) { [data-section-id] .article-item { /* Bootstrap-Standard wiederherstellen */ flex: unset !important; max-width: unset !important; width: unset !important; } /* Explizite Bootstrap-Klassen fuer grosse Bildschirme */ [data-section-id] .article-item.col-md-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; } [data-section-id] .article-item.col-md-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; } [data-section-id] .article-item.col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; } [data-section-id] .article-item.col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } [data-section-id] .article-item.col-md-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; } [data-section-id] .article-item.col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; } [data-section-id] .article-item.col-md-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; } [data-section-id] .article-item.col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; } [data-section-id] .article-item.col-md-9 { flex: 0 0 75% !important; max-width: 75% !important; } [data-section-id] .article-item.col-md-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; } [data-section-id] .article-item.col-md-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; } [data-section-id] .article-item.col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; } } /* TABLET RESPONSIVE - 2 SPALTEN MAXIMUM */ @media (max-width: 1024px) and (min-width: 769px) { [data-section-id] .article-item.col-md-1, [data-section-id] .article-item.col-md-2, [data-section-id] .article-item.col-md-3, [data-section-id] .article-item.col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; min-width: 0 !important; transform: translateZ(0) !important; } [data-section-id] .article-item.col-md-5, [data-section-id] .article-item.col-md-6, [data-section-id] .article-item.col-md-7, [data-section-id] .article-item.col-md-8, [data-section-id] .article-item.col-md-9, [data-section-id] .article-item.col-md-10, [data-section-id] .article-item.col-md-11, [data-section-id] .article-item.col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; transform: translateZ(0) !important; } /* Force Repaint beim Resize */ [data-section-id] .articles-grid { contain: layout !important; } } /* TABLETS - Hochformat und Querformat (768px - 1024px) */ @media (min-width: 768px) and (max-width: 1024px) { [data-section-id] .articles-grid-container { padding: 0 !important; box-sizing: border-box !important; width: 100% !important; } [data-section-id] .articles-grid { justify-content: center !important; margin: 0 !important; /* KEIN negatives Margin auf Tablet */ padding: 0 15px !important; width: 100% !important; box-sizing: border-box !important; } /* Artikel auf Tablet */ [data-section-id] .article-item { box-sizing: border-box !important; padding: 0 10px !important; } } /* KLEINE TABLETS UND GROSSE SMARTPHONES - 1 SPALTE */ @media (max-width: 768px) and (min-width: 481px) { [data-section-id] .article-item { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: var(--hero-uniform-spacing, 25px); } [data-section-id] .article-content { padding: 20px 15px; } } /* Mobile Responsive - EINFACH */ @media (max-width: 768px) { [data-section-id] .article-item { margin-bottom: var(--hero-uniform-spacing-mobile, 20px); } /* KOMMENTAR: margin-top für first-child auch mobile entfernt */ [data-section-id] .article-content { padding: 15px 50px; } /* Mobile: Artikel Bilder - Standard-Hoehe nur als Fallback, individuelle Hoehen werden per Artikel-CSS ueberschrieben */ [data-section-id] .article-image img { height: 150px; /* Fallback-Wert */ } /* Mobile: Desktop-Grid ausblenden, Mobile-Layout anzeigen */ [data-section-id] .desktop-grid { display: none !important; } [data-section-id] .mobile-layout { display: block !important; } [data-section-id] .mobile-image, [data-section-id] .mobile-text { margin-bottom: 15px; } /* Mobile: Bild-Container konsistent */ [data-section-id] .mobile-image .article-image img { width: 100% !important; height: 150px !important; object-fit: cover !important; display: block !important; } [data-section-id] .mobile-image .article-image { text-align: center !important; } /* Mobile: Bild-Container in mobile immer zentriert */ [data-section-id] .text-image-grid .article-image, [data-section-id] .article-image { text-align: center !important; } /* Mobile: Buttons nicht volle Breite */ [data-section-id] .article-button { display: inline-block !important; } [data-section-id] .article-button .btn { display: inline-block !important; width: auto !important; max-width: none !important; } /* Mobile: CSS Grid Layouts zu Block umwandeln */ [data-section-id] .text-image-grid { display: block !important; gap: 0 !important; } [data-section-id] .text-image-grid .text-section, [data-section-id] .text-image-grid .image-section { margin-bottom: 15px !important; } /* Mobile: Bild bei Grid-Layouts IMMER oben */ [data-section-id] .text-image-grid .image-section { order: 1 !important; } [data-section-id] .text-image-grid .text-section { order: 2 !important; } /* Mobile: Normale Artikel (ohne Grid) - Korrekte Reihenfolge fuer alle Elemente */ [data-section-id] .article-content { display: flex !important; flex-direction: column !important; } /* 1. Bild (falls vorhanden) */ [data-section-id] .article-image { order: 1 !important; } /* 2. Code vor Titel */ [data-section-id] .article-code-before-title { order: 2 !important; } /* 3. Titel */ [data-section-id] .article-title { order: 3 !important; } /* 4. Untertitel */ [data-section-id] .article-subtitle { order: 4 !important; } /* 5. Code vor Text */ [data-section-id] .article-code-before { order: 5 !important; } /* 6. Text */ [data-section-id] .article-text { order: 6 !important; } /* 7. Code nach Text */ [data-section-id] .article-code-after { order: 7 !important; } /* 8. Button am Ende */ [data-section-id] .article-button { order: 8 !important; } } /* === NUCLEAR OPTION - MOBILE CSS (extracted from generateMinimalMobileCSS) === */ /* NUCLEAR OPTION - HIGHEST SPECIFICITY FOR THEME.CSS.PHP OVERRIDE */ @media (max-width: 768px) { /* Box-Sizing Fix */ html body main [data-section-id] *, html body main [data-section-id] *::before, html body main [data-section-id] *::after { box-sizing: border-box !important; } /* Container mit höchster Spezifität gegen theme.css.php */ html body main [data-section-id] .container, html body main [data-section-id] .container-fluid { padding-left: 10px !important; padding-right: 10px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* Articles Grid Container */ html body main [data-section-id] .hero-articles-section .articles-grid-container { padding: 0 !important; margin: 0 !important; width: 100% !important; } /* Bootstrap Row komplett überschreiben */ html body main [data-section-id] .hero-articles-section .articles-grid.row { display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* ALLE Bootstrap Columns zu Block-Level - ABER NUR WENN SICHTBAR */ /* GEÄNDERT: Kein Default order mehr setzen um Mobile Order zu ermöglichen! */ html body main [data-section-id] .hero-articles-section .article-item:not(.d-none):not(.d-md-none) { width: 100% !important; padding: 0 !important; margin: 0 0 15px 0 !important; display: block !important; position: static !important; left: auto !important; right: auto !important; float: none !important; flex: none !important; /* ENTFERNT: order: 999 !important; - Damit Mobile Order funktioniert */ } /* SICHTBARKEITS-ÜBERRIDES - HÖCHSTE SPEZIFITÄT */ /* Komplett versteckte Artikel */ html body main [data-section-id] .hero-articles-section .article-item.d-none { display: none !important; } /* Nur-Desktop-Artikel (in Mobile versteckt) */ html body main [data-section-id] .hero-articles-section .article-item.d-none.d-md-block { display: none !important; } /* Nur-Mobile-Artikel (in Mobile sichtbar) */ html body main [data-section-id] .hero-articles-section .article-item.d-block.d-md-none { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 0 15px 0 !important; } /* Artikel Content - KEIN padding-top hier, wird pro Artikel gesetzt! */ html body main [data-section-id] .hero-articles-section .article-content { margin: 0 !important; padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 15px !important; /* padding-top wird NICHT gesetzt - kommt vom artikel-spezifischen CSS */ width: 100% !important; } /* Artikel Bilder - KEINE feste Höhe mehr, wird pro Artikel gesteuert */ /* html body main [data-section-id] .hero-articles-section .article-image img { height: 150px !important; } - ENTFERNT */ /* CSS Grid Layouts zu Block umwandeln */ html body main [data-section-id] .hero-articles-section .text-image-grid { display: block !important; gap: 0 !important; } html body main [data-section-id] .hero-articles-section .text-image-grid .text-section, html body main [data-section-id] .hero-articles-section .text-image-grid .image-section { margin-bottom: 15px !important; } /* Mobile: Bild immer zuerst anzeigen */ html body main [data-section-id] .hero-articles-section .text-image-grid .image-section { order: -1 !important; } /* Bild-Container in mobile immer zentriert */ html body main [data-section-id] .hero-articles-section .text-image-grid .article-image { text-align: center !important; } /* SLIDER NAVIGATION VERSTECKEN */ html body main [data-section-id] [class*='-arrow'], html body main [data-section-id] [class*='-dot'], html body main [data-section-id] [class*='-dots'], html body main [data-section-id] button[class*='arrow'], html body main [data-section-id] .slider-arrow, html body main [data-section-id] .slider-arrows, html body main [data-section-id] .slider-dots, html body main [data-section-id] .slider-nav, html body main [data-section-id] .slider-pagination, html body main [data-section-id] button[onclick*='prevSlide'], html body main [data-section-id] button[onclick*='nextSlide'], html body main [data-section-id] button[onclick*='slider'], html body main [data-section-id] button[onclick*='goToSlide'] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* === ARTICLE GRID BASE CSS (extracted from renderArticlesGrid Block 1) === */ /* MINIMALES Basis-CSS - Artikel-spezifisches CSS hat Priorität */ [data-section-id] .article-image { display: flex; align-items: center; background: transparent; } /* Bild-Link Styling - KEIN Hover-Effekt */ [data-section-id] .image-link-wrapper { display: inline-block; text-decoration: none; cursor: pointer; } [data-section-id] .image-link-wrapper img { display: block; } /* MOBILE AUSRICHTUNG über data-attribute - HÖCHSTE PRIORITÄT */ @media (max-width: 768px) { [data-section-id] .article-image[data-mobile-align=\"left\"] { justify-content: flex-start !important; } [data-section-id] .article-image[data-mobile-align=\"center\"] { justify-content: center !important; } [data-section-id] .article-image[data-mobile-align=\"right\"] { justify-content: flex-end !important; } } /* Kein width, kein justify-content - alles artikel-spezifisch! */