/* ============================================================
   TYPO3 DCE: Kompetenzen Box (V2) - FUSION
   ============================================================ */

/* --- 1. Der Container --- */
.dce_competencies_v2 .content {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;       /* Umbruch erlaubt */
    justify-content: center; /* Zentriert, falls Platz übrig ist */
}

/* --- 2. Das Item (Basis-Design) --- */
.dce_competencies_v2 .content .item {
    display: flex;        /* Damit wir Inhalte zentrieren können */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    padding: 2rem;        /* Etwas weniger Padding, damit Text Platz hat */
    box-sizing: border-box; /* Wichtig! */
    transition: all 0.3s; /* Weiches Überblenden */
    
    /* Standard-Hintergrund (wird durch Farben überschrieben) */
    background: #fff; 
    
    flex-grow: 0;   /* Nicht mehr wachsen! */
    flex-shrink: 0; /* Nicht schrumpfen! */
}

/* Link soll die ganze Box füllen */
.dce_competencies_v2 .content .item a {
    text-decoration: none;
    display: block;
    width: 100%;
    color: inherit; /* Farbe vom Eltern-Element erben */
}

/* --- 3. Die Größen (FIXED) --- */

/* Würfel */
.dce_competencies_v2 .format-square {
    width: 280px;          /* Harte Breite erzwingen */
    height: 280px;         /* Harte Höhe erzwingen */
    flex: 0 0 280px;       /* Nicht wachsen, nicht schrumpfen, Basis 280px */
}

/* Breites Rechteck */
.dce_competencies_v2 .format-wide {
    width: 580px;          /* Harte Breite */
    height: 280px;         /* Gleiche Höhe wie Würfel */
    flex: 0 0 580px;
}

/* Sicherheitsnetz: Wenn Inhalt zu groß ist, nicht explodieren */
.dce_competencies_v2 .content .item {
    overflow: hidden; /* Was nicht passt, wird abgeschnitten (oder use scroll) */
}


/* --- 4. Die Inhalte (Bild & Text aus altem CSS) --- */

.dce_competencies_v2 .content .item img {
	height: 5rem;
	width: auto;
	margin-bottom: 1rem;
	transition: all 0.3s;
	transform: scale(1.0);
	width: 100%;
	height: 100%;
}

.dce_competencies_v2 .content .item span {
    display: block;
    font-weight: 900;
    padding-top: 0.5rem;
    font-size: 1.1rem; /* Lesbarkeit */
}


/* --- 5. Hover Effekte (Animationen) --- */

/* Bild zoomt beim Drüberfahren */
.dce_competencies_v2 .content .item:hover img {
    transform: scale(1.2); /* Dezent vergrößern */
}


/* --- 6. Farb-Varianten (Hier überschreiben wir alles) --- */

/* Magenta */
.magenta-bg {
    background-color: #E6007E !important;
    color: #ffffff !important;
}
/* Bei Magenta soll auch der Hover weiß bleiben */
.magenta-bg:hover span {
    color: #ffffff !important; 
}

/* Orange */
.orange-bg {
    background-color: #F39200 !important;
    color: #ffffff !important;
}
.orange-bg:hover span {
    color: #ffffff !important;
}
/* Blau */
.blue-bg {
  	background-color: #233e63 !important;
  	color: #ffffff !important;
}
/* Weiß (Hier greift der alte Brand-Color Hover) */
.white-bg {
    background-color: #ffffff !important;
    color: #333333 !important;
}
/* Nur bei weißem Hintergrund wird der Text beim Hover farbig (wie früher) */
.white-bg:hover span {
    color: var(--brand-color, #E6007E); /* Fallback auf Magenta falls Variable fehlt */
}

/* ============================================================
   NEUE MODI (Layout-Varianten)
   ============================================================ */

/* --- MODE: HEADLINE (Für die pinke "STARTE DEINE ZUKUNFT" Box) --- */
.mode-headline {
    align-items: flex-start !important; /* Alles nach links schieben */
    text-align: left !important;        /* Text linksbündig */
    padding: 3rem !important;           /* Mehr Platz */
  	font-size: 2.5rem;
}

/* Wenn Checkbox aktiviert */
.font-small .mode-headline span {
    font-size: 1.6rem !important; /* Deutlich kleiner */
}

/* Icon verstecken */
.mode-headline img {
    display: none !important;
}

/* Text riesig machen */
.mode-headline span {
    /* 1. Silbentrennung aktivieren (ganz wichtig bei "Kaufmännische") */
    hyphens: auto;
    word-break: break-word; 
    
    /* 2. Fluid Typography */
    /* Syntax: clamp(MINDESTENS, IDEALWERT, HÖCHSTENS); */
    font-size: clamp(1.5rem, 3vw, 2.5rem); 
    
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 800;
    color: inherit;
    /* Optional: Falls es immer noch zu viel ist, "..." anzeigen statt abschneiden */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Erlaubt max 4 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* --- MODE: TEXT (Optimiert) --- */
.mode-text {
    align-items: flex-start !important;
    text-align: left !important;
    
    /* 1. Weniger Padding! 2.5rem war Verschwendung bei fester Box-Größe */
    padding: 1.5rem !important; 
    
    /* Falls der Text trotzdem zu lang ist -> Scrollbar (aber hübsch) */
    overflow-y: auto !important; 
    
    /* Optional: Scrollbar verstecken (für cleanen Look), Scrollen geht trotzdem */
    scrollbar-width: thin; 
}

.mode-text span {
    /* 2. Etwas kleinere Basis-Schriftgröße für Fließtext */
    font-size: 1rem !important; 
    line-height: 1.4;
    font-weight: 400 !important;
    
    /* Silbentrennung ist hier Pflicht! */
    hyphens: auto; 
}

/* Icon verstecken */
.mode-text img {
    display: none !important;
}


/* --- MODE: STANDARD (Das hast du schon, hier nur zur Sicherheit) --- */
/* --- MODE: STANDARD (Optimiert) --- */
.mode-standard {
    padding: 1rem !important; /* Platz sparen */
}

.mode-standard span {
    /* Silbentrennung, damit "Systemintegration" umbricht */
    hyphens: auto;
    word-wrap: break-word;
    
    /* Fluid Type: Zwischen 1rem und 1.2rem, je nach Platz */
    font-size: clamp(1rem, 5cqw, 1.2rem); 
}

/* === GLOBALE HELFER === */

/* Wenn Checkbox gesetzt -> Text im TEXT-Modus kleiner */
.font-small.mode-text span {
    font-size: 0.85rem !important; /* Ganz klein für Notfälle */
}

/* Wenn Checkbox gesetzt -> Text im HEADLINE-Modus kleiner */
.font-small.mode-headline span {
    font-size: 1.5rem !important; /* Statt riesig */
}

/* Wenn Checkbox gesetzt -> Text im STANDARD-Modus kleiner */
.font-small.mode-standard span {
    font-size: 0.9rem !important;
}

/* ============================================================
   MODE: NUR BILD (Zentriert & Vollflächig)
   ============================================================ */

/* 1. Die Box selbst vorbereiten */
/* Container randlos machen */
.mode-image-only {
    padding: 0 !important; 
    overflow: hidden;      
}

/* Bild perfekt einpassen */
.mode-image-only img.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Das verhindert Verzerrungen! */
    display: block;    
    margin: 0 !important; 
    transform: none !important;
}

/* Optional: Wenn du auch bei diesem Bild einen Zoom-Effekt beim Hover willst */
.mode-image-only:hover img.img-cover {
     transform: scale(1.05) !important; /* Ein leichter Zoom */
     transition: transform 0.3s ease-in-out;
}