/* Hack icon into page and list */
.flux-collapse {
    margin-top: calc(var(--pagemodule-grid-spacing) * 0.5);
}

.flux-collapse > .t3-grid-container {
    background: light-dark(rgba(210, 213, 194, 0.8), rgba(70, 75, 60, 0.8));
    --pagemodule-element-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.7));
}

.flux-collapse > .t3-grid-container .flux-collapse > .t3-grid-container {
    background: light-dark(rgba(194, 213, 211, 0.8), rgba(50, 70, 68, 0.8));
    --pagemodule-element-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.7));

}

.flux-collapse > .t3-grid-container .flux-collapse > .t3-grid-container .flux-collapse > .t3-grid-container {
    background: light-dark(rgba(205, 194, 213, 0.8), rgba(65, 55, 75, 0.8));
    --pagemodule-element-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.7));

}

.flux-collapse .t3-page-column-header {
    margin: 0;
    margin-inline-end: calc(var(--pagemodule-grid-inner-spacing));
}

.flux-collapse .t3-page-columns td[data-colpos] > .t3-page-ce {
    margin-left: 0;
    margin-right: 0;
}

.flux-collapse .t3-page-columns td[data-colpos] {
    padding-right: var(--pagemodule-grid-inner-spacing);
}

.flux-collapse .t3-page-columns td[data-colpos]:last-of-type {
    padding-right: 0;
}

.flux-collapse .t3-page-columns td[data-colpos] > [data-colpos] > div {
    margin-left: 0;
    margin-right: 0;
}

.t3-page-columns .t3-page-columns > tbody > tr + tr > td {
    border-top: solid light-dark(rgba(155, 155, 155, 0.5), rgba(70, 70, 70, 0.5)) 1px;
    padding-top: var(--pagemodule-grid-spacing);
}

.flux-grid-column > .t3-grid-cell {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fc-preview-reset {
    display: block;
    font-size: 0;
    margin-bottom: 8px;
}

.fc-preview-image-ul {
    display: inline-block;
    list-style: none;
    padding: 2px;
    margin: 5px 0 0;
    background-color: light-dark(#e0e0e0, #282828);
    border: 0;
    border-radius: 2px;
}

.fc-preview-image-li {
    display: inline-block;
    padding: 2px;
    margin: 0;
}

.fc-preview-image-bg {
    display: inline-block;
    background: light-dark(#fff, #222);
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-preview-image {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-right: 5px;
    width: 50px;
    height: 50px;
}

.fc-cropped-image-cropped {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100px;
    height: 100px;
}

.fc-td {
    width: 100%;
}

.fc-th {
    width: 20%;
    min-width: 150px;
}

table.fc-info > thead > tr > th {
    white-space: normal;
}

.t3-page-ce .t3-page-ce-header-icons-left {
    line-height: 24px;
}

.t3-page-ce .t3-page-ce-header-icons-left > a {
    padding: 0;
}

.t3-page-ce .t3-page-ce-header-icons-left > a .icon-size-small {
    height: 24px;
    width: 24px;
    line-height: 24px;
}

.t3-page-ce-body .t3-grid-cell {
    background-color: transparent;
    border-bottom: 1px solid light-dark(rgba(205, 205, 205, 0.5), rgba(100, 100, 100, 0.5));
    border-right: 1px solid light-dark(rgba(155, 155, 155, 0.5), rgba(70, 70, 70, 0.5));
}

.t3-page-ce-body .t3-grid-cell:last-child {
    border-right: 0;
}

/* --- CSS für Content Element Toggler --- */

/* Style für die individuellen Toggle-Buttons */
.backend-element-toggle-button {
    cursor: pointer;
    /* Ggf. weitere Anpassungen hier */
}

/* Style für den globalen Toggle-Button */
.backend-toggle-all-button {
    cursor: pointer;
    /* Ggf. weitere Anpassungen hier */
}

/* Optionale visuelle Kennzeichnung für eingeklappte Elemente */
.t3-page-ce.element-collapsed {
    /* z.B. einen leichten Rahmen oben, um zu zeigen, dass etwas da ist */
    /* border-top: 2px dashed #ccc; */
    /* margin-bottom: 5px; */ /* Etwas Abstand, wenn eingeklappt */
}

/* Sicherstellen, dass der Header sichtbar bleibt (sollte Standard sein) */
.t3-page-ce .t3-page-ce-header {
    /* Normalerweise nicht nötig, aber zur Sicherheit */
    /* display: block !important; */ /* TYPO3 v13 scheint flex zu nutzen, also eher nicht überschreiben */
}

/* Der Body wird per JS ein-/ausgeblendet (display: none/block) */
.t3-page-ce.element-collapsed .t3-page-ce-body {
    /* display: none; Wird durch JS gesteuert, keine CSS-Regel nötig */
}

/* --- Ende CSS für Content Element Toggler --- */

/* --- CSS für Grid Column Toggler --- */

/* Style für die individuellen Spalten-Toggle-Buttons */
.backend-column-toggle-button {
    cursor: pointer;
    /* Optional: Anpassungen für Größe, Farbe etc. */
}

/* Style für den globalen Spalten-Toggle-Button */
.backend-toggle-all-columns-button {
    cursor: pointer;
    /* Optional: Anpassungen */
}

/* Versteckt den Inhalt von eingeklappten Spalten (gesteuert durch JS) */
/* Kein spezielles CSS nötig, da JS 'display: none/'' setzt */
/* td.t3js-page-column.column-collapsed > *:not(.t3-page-column-header) { */
/* display: none; */ /* Wird durch JS erledigt */
/* } */

/* Optional: Visuelles Feedback für eingeklappte Spalten */
/* td.t3js-page-column.column-collapsed { */
/*    background-color: #f8f8f8;  */
/* } */

td.t3js-page-column.column-collapsed {
    /* Schachbrettmuster: transparent und 20% Schwarz (rgba(0, 0, 0, 0.2)) */
    /* Quadratgröße: 10x10 Pixel */

    /* Erzeugt das Muster durch Überlagerung von zwei linearen Gradienten */
    background-image: /* Erzeugt Streifen von 20% Schwarz und Transparent */ linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
        /* Erzeugt die gleichen Streifen, wird aber versetzt positioniert */ linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%);

    /* Die Größe der Mustereinheit ist doppelt so groß wie die gewünschte Quadratgröße */
    background-size: 20px 20px; /* 2 * 10px */

    /* Versetzt die zweite Gradientenebene um die Größe eines Quadrats (10px), */
    /* um das Schachbrettmuster zu erzeugen */
    background-position: 0 0, 10px 10px;
}

.flux-collapse td.t3js-page-column.column-collapsed > .t3-page-column-header {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

}

/* Verstecke den Marker */
.data-highlight-marker {
    display: none !important; /* Wichtig, um Inline-Style zu überschreiben */
}

/* Markierung für das gesamte Element (via data-Attribut) */
[data-highlight-color="blue"] > .t3-page-ce-element, /* Direktes Kind Element */
[data-highlight-color="blue"].t3-page-ce-element /* Falls Attribut am Wrapper selbst ist */
{
    background-color: light-dark(rgba(0, 123, 255, 0.15), rgba(0, 123, 255, 0.05)) !important;
    border-left: 5px solid light-dark(rgba(0, 123, 255, 0.6), rgba(0, 123, 255, 0.4)) !important;
}

[data-highlight-color="green"] > .t3-page-ce-element,
[data-highlight-color="green"].t3-page-ce-element {
    background-color: light-dark(rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.05)) !important;
    border-left: 5px solid light-dark(rgba(40, 167, 69, 0.6), rgba(40, 167, 69, 0.4)) !important;
}

[data-highlight-color="yellow"] > .t3-page-ce-element,
[data-highlight-color="yellow"].t3-page-ce-element {
    background-color: light-dark(rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05)) !important;
    border-left: 5px solid light-dark(rgba(255, 193, 7, 0.6), rgba(255, 193, 7, 0.4)) !important;
}

[data-highlight-color="red"] > .t3-page-ce-element,
[data-highlight-color="red"].t3-page-ce-element {
    background-color: light-dark(rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05)) !important;
    border-left: 5px solid light-dark(rgba(220, 53, 69, 0.6), rgba(220, 53, 69, 0.4)) !important;
}


/* Alternative: Nur den Header färben (falls du das data-Attribut im Hook um den Header legst) */
/*
.t3-page-ce-header [data-highlight-color="blue"] > div > .t3-page-ce-header-icons-right,
.t3-page-ce-header [data-highlight-color="blue"] > div > .t3-page-ce-header-text {
    background-color: rgba(0, 123, 255, 0.2) !important;
}
.t3-page-ce-header [data-highlight-color="green"] > div > .t3-page-ce-header-icons-right,
.t3-page-ce-header [data-highlight-color="green"] > div > .t3-page-ce-header-text {
    background-color: rgba(40, 167, 69, 0.2) !important;
}
*/