/**
 * Copyright (c) 2024 carlsmeedia digital - design - print - seo
 * Alle Rechte vorbehalten.
 * 
 * WYSIWYG Editor Frontend Styles
 * Styles für die Anzeige der WYSIWYG-Elemente im Frontend
 * WICHTIG: Diese Datei muss NACH den Template-CSS-Dateien geladen werden!
 */

/* CardGrid Mobile Fix - MUSS nach allen CSS-Dateien kommen */
.card-grid-mobile-fix {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 30px !important;
}

@media screen and (max-width: 1200px) {
    .card-grid-mobile-fix,
    .page-element-cards-grid .card-grid-mobile-fix,
    .page-element.page-element-cards-grid .card-grid-mobile-fix,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid > .news-grid,
    div.page-element.page-element-cards-grid > div.news-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 25px !important;
    }
}

@media screen and (max-width: 768px) {
    /* SEHR SPEZIFISCH: Überschreibe ALLE anderen Regeln */
    .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix.news-grid,
    .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid > .news-grid,
    div.page-element.page-element-cards-grid > div.news-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

@media screen and (max-width: 480px) {
    .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix.news-grid,
    .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid > .news-grid,
    div.page-element.page-element-cards-grid > div.news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Medien (Bilder, Videos) */
.wysiwyg-media {
    position: relative;
    margin: 15px 0;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.wysiwyg-media img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wysiwyg-media.wysiwyg-video {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: visible;
    display: inline-block;
    margin: 15px 0;
    line-height: 0 !important; /* Verhindert zusätzlichen Platz */
    vertical-align: top;
    max-width: 100%;
    font-size: 0; /* Verhindert zusätzlichen Platz durch Schriftgröße */
}

/* Für iframe-Videos (YouTube, Vimeo) - responsive mit Aspect-Ratio */
.wysiwyg-media.wysiwyg-video:has(iframe),
.wysiwyg-media.wysiwyg-video[data-video-type="youtube"],
.wysiwyg-media.wysiwyg-video[data-video-type="vimeo"] {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden;
}

.wysiwyg-media.wysiwyg-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Für HTML5-Videos - normale Darstellung mit Steuerung direkt unter dem Video */
.wysiwyg-media.wysiwyg-video video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: #000;
    vertical-align: top;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border: none !important;
    outline: none !important;
    position: relative !important; /* NICHT absolute */
}

/* Stelle sicher, dass der Container genau so hoch ist wie das Video */
.wysiwyg-media.wysiwyg-video:has(video),
.wysiwyg-media.wysiwyg-video video {
    height: auto !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

/* Entferne position: absolute von HTML5-Videos */
.wysiwyg-media.wysiwyg-video video[style*="position: absolute"],
.wysiwyg-media.wysiwyg-video video[style*="position:absolute"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* Video-Steuerung direkt am Video - kein zusätzlicher Platz */
.wysiwyg-media.wysiwyg-video video::-webkit-media-controls-panel {
    background-color: rgba(0, 0, 0, 0.8);
}

.wysiwyg-media.wysiwyg-video video::-webkit-media-controls-enclosure {
    background-color: transparent;
    overflow: visible;
}

/* Stelle sicher, dass die Steuerung Teil des Video-Elements ist */
.wysiwyg-media.wysiwyg-video video::-webkit-media-controls {
    display: flex;
    position: relative;
}

/* Firefox Video-Steuerung */
.wysiwyg-media.wysiwyg-video video::-moz-media-controls {
    display: block;
}

/* Entferne zusätzlichen Abstand um das Video */
.wysiwyg-media.wysiwyg-video video::before,
.wysiwyg-media.wysiwyg-video video::after {
    content: none;
    display: none;
}

/* Überschreibe inline-Styles für Videos - wichtig für Frontend */
.wysiwyg-media.wysiwyg-video video[style*="position: absolute"],
.wysiwyg-media.wysiwyg-video video[style*="position:absolute"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Stelle sicher, dass Container-Höhe = Video-Höhe */
.wysiwyg-media.wysiwyg-video:not(:has(iframe)):not([data-video-type]) {
    height: auto !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

/* Für alle Video-Container ohne iframe */
.wysiwyg-media.wysiwyg-video video {
    max-height: none !important;
}

/* Ausrichtung - Links umlaufend */
.wysiwyg-media[style*="float: left"],
.wysiwyg-media[style*="float:left"] {
    float: left;
    margin: 0 15px 15px 0;
    max-width: 50%;
    clear: none;
}

.wysiwyg-media[style*="float: left"] video,
.wysiwyg-media[style*="float:left"] video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ausrichtung - Rechts umlaufend */
.wysiwyg-media[style*="float: right"],
.wysiwyg-media[style*="float:right"] {
    float: right;
    margin: 0 0 15px 15px;
    max-width: 50%;
    clear: none;
}

.wysiwyg-media[style*="float: right"] video,
.wysiwyg-media[style*="float:right"] video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ausrichtung - Mittig */
.wysiwyg-media[style*="margin: 0 auto"],
.wysiwyg-media[style*="margin:0 auto"] {
    display: block;
    margin: 15px auto;
    clear: both;
}

.wysiwyg-media[style*="margin: 0 auto"] video,
.wysiwyg-media[style*="margin:0 auto"] video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Ausrichtung - Volle Breite */
.wysiwyg-media[style*="width: 100%"],
.wysiwyg-media[style*="width:100%"] {
    width: 100% !important;
    display: block;
    margin: 15px 0;
    clear: both;
}

.wysiwyg-media[style*="width: 100%"] video,
.wysiwyg-media[style*="width:100%"] video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Buttons */
.wysiwyg-button {
    display: inline-block;
    padding: 10px 20px;
    background: var(--primary, #667eea);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    margin: 5px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
}

.wysiwyg-button:hover {
    background: var(--primary-dark, #5568d3);
    color: white;
    text-decoration: none;
}

/* Cards verwenden jetzt die news-card Klasse aus frontend.css */
/* Stelle sicher, dass news-grid auch in WYSIWYG-Content horizontal angeordnet wird */
/* WICHTIG: Diese Regeln müssen nach frontend.css geladen werden! */

/* Verwende die gleichen Klassen wie in page.php: page-content wysiwyg-content */
/* Diese Regeln gelten für alle Content-Container - AUSSER CardGrid */
.wysiwyg-content .news-grid:not(.card-grid-mobile-fix),
.page-content .news-grid:not(.card-grid-mobile-fix),
.article-content .news-grid:not(.card-grid-mobile-fix),
.career-content .news-grid:not(.card-grid-mobile-fix) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
    gap: 40px !important;
    margin: 30px 0 60px 0 !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    /* Alle Cards im Grid haben die gleiche Höhe (höchste Card bestimmt Höhe) */
}

/* WICHTIG: div.news-grid - NUR display, KEINE grid-template-columns hier! */
/* grid-template-columns wird nur in den spezifischen Containern gesetzt */
div.news-grid:not(.card-grid-mobile-fix) {
    display: grid !important;
    /* KEINE grid-template-columns hier - wird von den Container-Regeln oben gesetzt */
}

/* AUSSCHLUSS: CardGrid darf NICHT von der Regel oben betroffen sein - EXPLIZIT AUSSCHLIESSEN */
.page-element-cards-grid .news-grid,
.page-element.page-element-cards-grid .news-grid,
.page-element-cards-grid > .news-grid,
.page-element.page-element-cards-grid > .news-grid {
    /* Diese werden von der Regel unten überschrieben - KEINE grid-template-columns hier! */
    display: grid !important;
}

/* KRITISCH: Spezielle Regel für CardGrid - responsive von Anfang an - HÖCHSTE SPEZIFITÄT */
.page-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
.page-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
.wysiwyg-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
.wysiwyg-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
.card-grid-mobile-fix,
.page-element.page-element-cards-grid > .news-grid,
.page-element-cards-grid > .news-grid,
.page-element-cards-grid .news-grid,
div.page-element.page-element-cards-grid > div.news-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 30px !important;
    margin: 30px 0 60px 0 !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Stelle sicher, dass Grid-Items nicht untereinander sind */
.wysiwyg-content .news-grid > .news-card,
.page-content .news-grid > .news-card,
.article-content .news-grid > .news-card,
.career-content .news-grid > .news-card,
.news-grid > .news-card {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Stelle sicher, dass news-card und news-image/news-content korrekt funktionieren */
.wysiwyg-content .news-card,
.page-content .news-card,
.article-content .news-card,
.career-content .news-card,
div.news-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    /* Card passt sich der Grid-Höhe an, alle Cards im Grid haben gleiche Höhe */
    align-items: stretch !important;
    /* WICHTIG: Card-Breite aus Backend (inline-Style) wird übernommen, nicht überschrieben */
    /* width wird aus inline-Style übernommen, wenn vorhanden */
}

.wysiwyg-content .news-image,
.page-content .news-image,
.article-content .news-image,
.career-content .news-image,
.news-image {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    position: relative !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    /* Bild-Container passt sich dem Bild/Icon an, kein Hintergrund */
}

/* Icon-Container mit Kreis */
.wysiwyg-content .news-image:has(i),
.page-content .news-image:has(i),
.article-content .news-image:has(i),
.career-content .news-image:has(i),
.news-image:has(i) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    background: transparent !important;
}

.wysiwyg-content .news-image:has(i)::before,
.page-content .news-image:has(i)::before,
.article-content .news-image:has(i)::before,
.career-content .news-image:has(i)::before,
.news-image:has(i)::before {
    content: '' !important;
    position: absolute !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: #0066cc !important;
    z-index: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* Kreis mittig unter dem Icon */
}

.wysiwyg-content .news-image i,
.page-content .news-image i,
.article-content .news-image i,
.career-content .news-image i,
.news-image i {
    position: relative !important;
    z-index: 1 !important;
    color: white !important;
    font-size: 40px !important;
    font-style: normal !important;
}

/* Bild ohne Hintergrund */
.wysiwyg-content .news-image:has(img),
.page-content .news-image:has(img),
.article-content .news-image:has(img),
.career-content .news-image:has(img),
.news-image:has(img) {
    padding: 0 !important;
    background: transparent !important;
}

/* Bilder in Cards: Passt sich dem Bild an */
.wysiwyg-content .news-card .news-image img,
.page-content .news-card .news-image img,
.article-content .news-card .news-image img,
.career-content .news-card .news-image img,
div.news-card div.news-image img,
.news-card .news-image img,
.news-image img,
img[src].news-image,
div.news-image > img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box !important;
}

/* Andere Bilder (nicht in Cards) können weiterhin angepasst werden */
/* Normale Bildbehandlung für Bilder außerhalb von Cards bleibt unverändert */

.wysiwyg-content .news-content,
.page-content .news-content,
.article-content .news-content,
.career-content .news-content,
.news-content {
    padding: 0 15px 4px !important;
    margin-top: -45px !important;
    text-align: center !important;
    flex: 1 !important;
    /* Content-Bereich füllt verbleibende Höhe, damit alle Cards gleich hoch sind */
    display: flex !important;
    flex-direction: column !important;
}

/* Buttons in Cards auf gleicher Höhe */
.wysiwyg-content .news-content .wysiwyg-button,
.page-content .news-content .wysiwyg-button,
.article-content .news-content .wysiwyg-button,
.career-content .news-content .wysiwyg-button,
.news-content .wysiwyg-button {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

/* Buttons in Cards auf gleicher Höhe */
.wysiwyg-content .news-content .wysiwyg-button,
.page-content .news-content .wysiwyg-button,
.article-content .news-content .wysiwyg-button,
.career-content .news-content .wysiwyg-button,
.news-content .wysiwyg-button {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

/* Card Positionierung - für news-card Klasse */
/* WICHTIG: Card-Breite aus Backend (inline-Style) wird übernommen */
.news-card[style*="float: left"],
.news-card[style*="float:left"] {
    float: left;
    margin: 0 15px 15px 0;
}

.news-card[style*="float: right"],
.news-card[style*="float:right"] {
    float: right;
    margin: 0 0 15px 15px;
}

.news-card[style*="margin: 0 auto"],
.news-card[style*="margin:0 auto"] {
    display: block;
    margin: 15px auto;
    clear: both;
}

.news-card[style*="width: 100%"],
.news-card[style*="width:100%"] {
    width: 100% !important;
    display: block;
    margin: 15px 0;
    clear: both;
}

/* Card-Breite aus inline-Style übernehmen (aus Backend) */
/* Die Breite wird direkt aus dem inline-Style übernommen, keine zusätzlichen CSS-Regeln nötig */

/* Card Grid verwendet jetzt die news-grid Klasse aus frontend.css - keine eigenen Styles nötig */
/* Alte wysiwyg-card-grid Styles entfernt - verwende news-grid aus frontend.css */

/* Video Consent Overlay (GDPR) */
.video-consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.video-consent-overlay p {
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    max-width: 500px;
}

.video-consent-overlay button {
    padding: 12px 24px;
    background: var(--primary, #667eea);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.video-consent-overlay button:hover {
    background: var(--primary-dark, #5568d3);
}

/* Responsive - für news-card und news-grid */
/* Ab 1200px: Cards beginnen einzurücken */
@media (max-width: 1200px) {
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid .news-grid,
    .card-grid-mobile-fix {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 25px !important;
    }
}

@media (max-width: 768px) {
    .wysiwyg-content .news-grid:not(.card-grid-mobile-fix):not(.page-element-cards-grid .news-grid),
    .page-content .news-grid:not(.card-grid-mobile-fix):not(.page-element-cards-grid .news-grid),
    .article-content .news-grid:not(.card-grid-mobile-fix):not(.page-element-cards-grid .news-grid),
    .career-content .news-grid:not(.card-grid-mobile-fix):not(.page-element-cards-grid .news-grid) {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* CardGrid: ZWINGEND untereinander auf Mobile - HÖCHSTE PRIORITÄT */
    .page-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix,
    .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid > .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid .card-grid-mobile-fix,
    .page-element.page-element-cards-grid .card-grid-mobile-fix,
    div.page-element-cards-grid div.news-grid,
    div.page-element.page-element-cards-grid div.news-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .wysiwyg-media[style*="float: left"],
    .wysiwyg-media[style*="float:left"],
    .wysiwyg-media[style*="float: right"],
    .wysiwyg-media[style*="float:right"] {
        float: none;
        margin: 15px 0;
        max-width: 100%;
    }
    
    .news-card[style*="float: left"],
    .news-card[style*="float:left"],
    .news-card[style*="float: right"],
    .news-card[style*="float:right"] {
        float: none;
        margin: 15px 0;
        max-width: 100%;
    }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {
    .page-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix,
    .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid > .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid .card-grid-mobile-fix,
    .page-element.page-element-cards-grid .card-grid-mobile-fix {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Clearfix für umlaufende Elemente */
.wysiwyg-content::after,
.article-content::after,
.career-content::after,
.page-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Formatierung für Absätze und Text-Elemente im WYSIWYG-Content */
.wysiwyg-content p,
.page-content.wysiwyg-content p {
    margin: 1em 0;
    line-height: 1.6;
    display: block;
}

.wysiwyg-content p:first-child,
.page-content.wysiwyg-content p:first-child {
    margin-top: 0;
}

.wysiwyg-content p:last-child,
.page-content.wysiwyg-content p:last-child {
    margin-bottom: 0;
}

/* Formatierung für Überschriften */
.wysiwyg-content h2,
.page-content.wysiwyg-content h2 {
    margin: 1.5em 0 0.5em 0;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.3;
    display: block;
}

.wysiwyg-content h3,
.page-content.wysiwyg-content h3 {
    margin: 1.3em 0 0.5em 0;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
}

.wysiwyg-content h4,
.page-content.wysiwyg-content h4 {
    margin: 1.2em 0 0.5em 0;
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
}

/* Formatierung für Listen */
.wysiwyg-content ul,
.wysiwyg-content ol,
.page-content.wysiwyg-content ul,
.page-content.wysiwyg-content ol {
    margin: 1em 0;
    padding-left: 2em;
    display: block;
}

.wysiwyg-content li,
.page-content.wysiwyg-content li {
    margin: 0.5em 0;
    display: list-item;
}

/* Formatierung für Text-Formatierungen */
.wysiwyg-content strong,
.wysiwyg-content b,
.page-content.wysiwyg-content strong,
.page-content.wysiwyg-content b {
    font-weight: 700;
    display: inline;
}

.wysiwyg-content em,
.wysiwyg-content i,
.page-content.wysiwyg-content em,
.page-content.wysiwyg-content i {
    font-style: italic;
    display: inline;
}

.wysiwyg-content u,
.page-content.wysiwyg-content u {
    text-decoration: underline;
    display: inline;
}

.wysiwyg-content s,
.page-content.wysiwyg-content s {
    text-decoration: line-through;
    display: inline;
}

/* Zeilenumbrüche */
.wysiwyg-content br,
.page-content.wysiwyg-content br {
    display: block;
    margin: 0.5em 0;
    content: "";
}

/* Div-Container */
.wysiwyg-content div,
.page-content.wysiwyg-content div {
    display: block;
    margin: 1em 0;
}

/* ============================================
   KRITISCH: CardGrid Responsive Fix
   Diese Regeln MÜSSEN am Ende stehen und haben höchste Priorität
   ============================================ */

/* Basis-Regel für CardGrid - responsive von Anfang an */
.card-grid-mobile-fix,
.page-element.page-element-cards-grid .news-grid,
.page-element-cards-grid .news-grid,
.page-element.page-element-cards-grid > .news-grid,
.page-element-cards-grid > .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Mobile: Zwingend untereinander ab 768px - SEHR SPEZIFISCH */
@media screen and (max-width: 768px) {
    /* Überschreibe ALLE anderen Regeln für CardGrid - HÖCHSTE SPEZIFITÄT */
    .page-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix.news-grid,
    .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid > .news-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* Sehr kleine Bildschirme: Zwingend untereinander ab 480px - HÖCHSTE SPEZIFITÄT */
@media screen and (max-width: 480px) {
    .page-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .wysiwyg-content .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .page-element-cards-grid > .news-grid.card-grid-mobile-fix,
    .card-grid-mobile-fix.news-grid,
    .news-grid.card-grid-mobile-fix,
    .page-element.page-element-cards-grid .news-grid,
    .page-element-cards-grid .news-grid,
    .page-element.page-element-cards-grid > .news-grid,
    .page-element-cards-grid > .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}