/* --- MENÜ ZENTRIERUNG (MUSS IN ZEILE 1 STEHEN!) --- */

/* 1. Haupt-Container (GridColumn_8) als Flexbox */
#GridColumn_8 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 2. Menü-Wrapper - darf nicht 100% breit sein */
#Container_Menu_Droplist_1 {
    width: auto !important;
    display: block !important;
}

/* 3. Die Navigation */
#CONT_dropline_Container_Menu_Droplist_1 {
    display: block !important;
    width: auto !important;
}

/* 4. Die Liste (ul) - Hier passiert die Magie */
#CONT_dropline_Container_Menu_Droplist_1 > ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important; /* Falls es zu breit wird */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
}

/* 5. Die Menüpunkte (li) */
#CONT_dropline_Container_Menu_Droplist_1 > ul > li {
    float: none !important;
    display: block !important; /* Block verhält sich in Flexbox brav */
    margin: 0 2px !important;
}

/* --- TAB DESIGN (Reparatur für aktiven Tab) --- */
#CONT_dropline_Container_Menu_Droplist_1 > ul > li.selected {
    background-color: #ffffff !important;
    border-top: 3px solid #c4c94d !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: -1px !important;
}

/* Der weiße Streifen (Pflaster) */
#CONT_dropline_Container_Menu_Droplist_1 > ul > li.selected::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background-color: #ffffff !important;
    z-index: 102 !important;
}

/* --- SUBMENÜ ZENTRIERUNG (GridColumn_4) --- */
/* Bitte direkt unter den Code für das Hauptmenü (ganz oben) einfügen! */

#GridColumn_4 {
    display: flex !important;
    justify-content: center !important; /* Ab in die Mitte */
    align-items: center !important;     /* Vertikal mittig */
    width: 100% !important;
    float: none !important;
}

/* Die Liste im Submenü */
#GridColumn_4 ul,
#GridColumn_4 .menu {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;         /* Umbruch erlauben, falls es zu viele sind */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    float: none !important;
}

/* Die Einträge (li) */
#GridColumn_4 li {
    float: none !important;
    display: block !important;          /* Verhalten in der Flexbox */
    margin: 0 10px !important;          /* Etwas mehr Luft zwischen den Punkten */
}

/* Optional: Links etwas schöner machen, falls nötig */
#GridColumn_4 li a {
    display: block !important;
    white-space: nowrap !important;
}



/* --- HEADER WHITE FIX (Targeting #GridRow) --- */

/* 1. Den Hintergrund des GridRow weiß färben */
#GridRow {
    background-color: #f6f6f6 !important;
    background-image: none !important;
    border-bottom: 1px solid #e0e0e0 !important; /* Die feine Linie unten */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; /* Leichter Schatten */
}

/* 2. Innere Container transparent schalten */
/* WICHTIG: Damit nicht ein innerer Kasten das Weiß wieder überdeckt */
#GridRow .ix-grid-column,
#GridRow .ix-grid-row,
#Raster_Logo_Actions {
    background: transparent !important;
    border: none !important;
}

/* 3. Schriftfarbe dunkel machen (Damit man sie auf Weiß lesen kann) */
/* Wir zielen auf alle Links und Texte INNERHALB von #GridRow */
#GridRow a,
#GridRow span,
#GridRow h1,
#GridRow h2,
#GridRow .ix-nav-item a {
    color: #333333 !important;   /* Dunkelgrau */
    text-shadow: none !important;
    font-weight: 500 !important;
}

/* 4. Hover-Effekt für Links (Blau) */
#GridRow a:hover {
    color: #005a9c !important;
    text-decoration: none !important;
}



/* --- MENÜS ZENTRIEREN --- */

/* 1. HAUPTMENÜ (Obere Zeile: Home, Zeit, Projekte...) */
#Container_Navigation_Top,
.upMenuTop,
#Container_Navigation_Top_Content {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Das ist der Schlüssel: Mittig! */
    align-items: center !important;
}

/* 2. UNTERMENÜ (Graue Zeile: Projekte lfd. Jahr, Ökonomie...) */
/* Wir suchen den Container für das Sub-Menü. Oft heißt er _Sub oder _Path */
#Container_Navigation_Sub,
#Container_Navigation_Path,
.upMenuSub,
#Container_ContentMenu {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Auch hier: Mittig! */
    align-items: center !important;

    /* Optional: Falls der graue Balken links/rechts abreißt, färben wir ihn durchgehend */
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* 3. FEINSCHLIFF: ABSTÄNDE */
/* Damit die Menüpunkte nicht zu eng kleben */
.ix-nav-item {
    margin: 0 10px !important; /* Links und rechts etwas Luft */
}




/*
 * Including font SparkasseWeb
 * -------------------------- */
@font-face {
	font-family: 'SparkasseWeb';
	src: url('../fonts/SparkasseWeb/Sparkasse_web_Bd.woff');
	src: url('../fonts/SparkasseWeb/Sparkasse_web_Bd.woff') format('woff'),url('../fonts/SparkasseWeb/Sparkasse_web_Bdlt.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'SparkasseWeb';
	src: url('../fonts/SparkasseWeb/Sparkasse_web_Rg.eot');
	src: url('../fonts/SparkasseWeb/Sparkasse_web_Rg.eot') format('embedded-opentype'), url('../fonts/SparkasseWeb/Sparkasse_web_Rg.woff') format('woff'), url('../fonts/SparkasseWeb/Sparkasse_web_Rg.ttf') format('truetype'), url('../fonts/SparkasseWeb/Sparkasse_web_Rg.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

.tinymce-required {
	border-bottom: 1px dashed #c4c94d!important;
}

/*
 * Textbox styling for tel:
 */
div.Container_ResponsiveForm.ix-large-label-left input[type="tel"] {
    display: inline-block;
    min-width: initial;
    width: 85%;
}

div.Container_ResponsiveForm.ix-medium-label-left input[type="tel"] {
    display: inline-block;
    min-width: initial;
    width: 85%;
}

div.Container_ResponsiveForm.ix-small-label-left input[type="tel"] {
    display: inline-block;
    min-width: initial;
    width: 85%;
}

/*
 * Style for disabled Buttons
 */
input[type="button" i]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Misc Styles
 */
div[data-control-type="upTextareaVControl"].Text_Standard p>img{
	max-width:100%;
	height: auto;
}

div.image-wrapper {
	overflow: hidden;
	box-shadow: 0 0 4px #e0e0e0;
	background-color: #f0f0f0;
	height: calc(100% - 10px);
}

.TT_Title span {
    padding-right: 15px;
}

.shapedtable-styled .ShapTab_RowEven_BG:hover .Text_Standard {
	color: #ffffff;
}
.shapedtable-styled .ShapTab_RowOdd_BG:hover .Text_Standard {
	color: #ffffff;
}

/* Fix Button in Statistik App */
.guid-6CBFDDA200D7E54B97C4AE56DA2CF6672DE8A9C7 {
    margin-top: 5px !important;
}


/*
 * Read / unread styles.
 */
.bmReadAckBtn {
	width:16px;
	height:16px;
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-image:url('../../../images/assets/fontawesome icons/check-double.png');
}

.bmReadAckBtn:hover {
	background-image:url('../../../images/assets/fontawesome icons hover/check-double.png');
}

.bmUnreadAckBtn {
	width:16px;
	height:16px;
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-image:url('../../../images/assets/fontawesome icons/bell.png');
}

.bmUnreadAckBtn:hover {
	background-image:url('../../../images/assets/fontawesome icons hover/bell.png');
}

.shaped-table .bmEntryReadFreeTable {
	display: inline-block;
}

div.bmEntryReadHeader > div.bmEntryReadContainer{
    float: none!important;
}



div.bmEntryReadContainerWrapper > a {
    display: inline;
}




/*
 * #################### BEGINN UNIQUE - Hack ####################
 */
#CONT_dropdown ul li:hover {
	border-left: 3px solid #c4c94d;
}

#CONT_dropdown li:hover > a {
	color: #424f62;
}
.Container_Group_Rounded_Corners {
	background-color: #f4f4f4;
	margin: 20px 0;
	padding: 20px;
	position: relative;
	box-shadow: 1px 1px 3px rgba(100, 100, 100, 0.6);
}
.Container_Group_Rounded_Corners .Text_Label {
	font-weight: bold;
}
.Text_Comment {
	background-color: #cccccc;
}
#ShowNotificationIconContainer
{
	position: absolute;
	right: 85px;
	top: 25px;
	z-index: 1;
}
#ShowNotificationsContainer .notifications-container .show-notifications-link
{
	color: #FFFFFF;
}
#ShowNotificationsContainer .notifications-container .show-notifications-link #notification-icon
{
	font-size: 26px;
	position: relative;
	color: #909090;
}
#ShowNotificationsContainer .notifications-container .show-notifications-link #notification-icon #number-of-notifications
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #ffffff;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
#ShowNotificationsContainer .notifications-container .show-notifications-link #notification-icon.has-unread-notifications
{
	color: #C4C94D;
}
/*
 * #################### ENDE UNIQUE - Hack ####################
 *
 *
 */

/* =================================================================
 * MASTER FIX: UNIFORM LIGHT BACKGROUND & TRANSPARENT MENU
 * ================================================================= */

/* --- 1. HINTERGRUND (Einheitlich & Hell) --- */
/* Wir setzen HTML, Body und Container auf dieselbe Farbe (#f9f9f9). */
/* Damit verschwindet der "Rahmen-Effekt" komplett. */
html,
body,
.ix-layout-container,
#ix-container,
.portal-content-wrapper,
.ix-form-container {
    background-color: #ffffff !important; /* Sehr helles Grau/Weiß */
    background-image: none !important;
}


/* --- 4. DIE KARTEN (Modals) --- */
.portlet, .card, .container-fluid, .Container_Group_Rounded_Corners {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: none !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04), 0 12px 24px rgba(0,0,0,0.06) !important;
}
.portlet-title, .card-header {
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 15px 25px !important;
    font-weight: 700 !important;
    color: #424f62 !important;
}


/* --- 5. BUTTONS & INPUTS --- */
.btn, .button, input[type="submit"] {
    background-color: #424f62 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    border: none !important;
    height: 40px !important;
    padding: 0 20px !important;
    font-weight: 600 !important;
}
.btn:hover, input[type="submit"]:hover {
    background-color: #c4c94d !important;
    cursor: pointer;
}
input[type="text"], input[type="password"], select {
    border: 1px solid #e0e0e0 !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
}


/* --- FINALE MENÜ-KORREKTUR (Droplist) v3 --- */

/* 1. Standard-Zustand: Weißer Hintergrund, Blaue Schrift */
#Container_Menu_Droplist_1 .menu .label {
    background: #f6f6f6 !important;               /* Hintergrund Weiß */
    transition: none !important;                  /* Keine Animationen */
    border-right: 1px solid #e0e0e0 !important;   /* Feine graue Linie rechts */
    border-left: 0px !important;                  /* Links keine Linie */
    margin-right: 0px !important;                 /* Abstände entfernen */
    border-bottom: 1px solid #eeeeee !important;  /* Feine Linie unten */
}

/* 2. Schriftfarbe allgemein (Dunkelblau) */
#Container_Menu_Droplist_1 .menu .link,
#Container_Menu_Droplist_1 .menu .text,
#Container_Menu_Droplist_1 .menu .smi {
    color: #424f62 !important;       /* Intrexx-Dunkelblau */
    text-decoration: none !important;
}

/* 3. Letzten Menüpunkt korrigieren (Linie rechts entfernen) */
#Container_Menu_Droplist_1 .menu .item:last-child .label {
    border-right: none !important;
}

/* 4. Hover-Zustand (Maus drüber) -> Hintergrund #f9f9f9 */
#Container_Menu_Droplist_1 .menu .label:hover {
    background: #f9f9f9 !important;  /* Dein gewünschtes Hellgrau */
}
/* Textfarbe beim Hovern (Gelb/Grün - oder du kannst hier auch #424f62 lassen) */
#Container_Menu_Droplist_1 .menu .label:hover .link,
#Container_Menu_Droplist_1 .menu .label:hover .text {
    color: #c4c94d !important;
}

/* 5. Aktiver/Ausgewählter Zustand -> Hintergrund #f9f9f9 */
#Container_Menu_Droplist_1 .menu .input:checked + .label,
#Container_Menu_Droplist_1 .menu .item.selected > .label {
    background: #ffffff !important;   /* Dein gewünschtes Hellgrau */
    box-shadow: inset 0 3px 0 0 #c4c94d !important; /* Farbiger Balken oben */
}

/* 6. Icons ausblenden */
#Container_Menu_Droplist_1 .menu .image {
    display: none !important;
}

/* --- ENDE --- */


/* --- NEWS PORTLET: HERO STYLE v2 --- */

/* 1. Den ÄUSSEREN Rahmen (Portlet) randlos machen */
/* Das ist der entscheidende Fix für den weißen Rand */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 {
    padding: 0 !important;
}

/* 2. Header ausblenden (falls noch vorhanden) */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 .portletHeader {
    display: none !important;
}

/* 3. Das Bild styling (Hero Image) */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 img {
    width: 100% !important;
    display: block !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    object-fit: cover !important;
}

/* 4. Die Liste der News darunter wieder mit Abstand versehen */
/* Da wir oben ALLES auf 0 gesetzt haben, müssen wir hier Luft reinbringen */
#ID_shapedtablebase9CD6D5CA_records {
    padding: 20px !important; /* Abstand links/rechts/unten für die Liste */
}

/* 5. Korrektur falls das Hero-Bild Teil der Liste ist */
/* Wir ziehen das erste Element (das Bild) wieder an die Ränder, falls Schritt 4 es eindrückt */
#ID_shapedtablebase9CD6D5CA_records > div:first-child {
    margin: -20px -20px 20px -20px !important; /* Negative Margins ziehen es nach außen */
    width: calc(100% + 40px) !important;       /* Kompensiert das Padding */
}

/* --- ENDE NEWS PORTLET --- */



/* --- SEITENHINTERGRUND BLAU FÄRBEN (Final) --- */

/* 1. Äußerer Hintergrund: Blau */
body,
#Container_Wrapper,
#Container_1,
#Container_AppMain {
    background-color: #ffffff !important; /* Dein Blau */
    background-image: none !important;
}

/* 2. Innere Container: Transparent (damit das Blau durchscheint) */
/* Hier habe ich #Container_Portal hinzugefügt! */
#Container_Stage,
#Container_Portal,
div.portalsite,
.ix-layout-container {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;

}
/* --- ENDE HINTERGRUND --- */

/* --- MODERN PORTLET HEADERS --- */
.portletHeader {
    background: transparent !important; /* Kein Hintergrund-Balken */
    border: none !important;            /* Kein Rahmen */
    border-bottom: 2px solid #eee !important; /* Nur eine feine Linie unten */
    padding-left: 0 !important;         /* Text linksbündig ohne Abstand */
}

.portletHeader h2 {
    color: #333 !important;             /* Dunkles Grau statt Schwarz */
    font-size: 1.2rem !important;
    text-transform: uppercase !important; /* Optional: Alles GROSS schreiben */
    letter-spacing: 1px !important;       /* Buchstaben etwas spationieren */
    margin-bottom: 10px !important;
}

/* --- BILDER SOFT LOOK --- */
/* Alle Bilder in Portlets leicht abrunden */
.portlet img {
    border-radius: 8px !important;
    /* Optional: Leichter Schatten für Bilder */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* --- MENÜ HOVER EFFEKT --- */
/* Wenn man über einen NICHT ausgewählten Punkt fährt */
#CONT_dropline_Container_Menu_Droplist_1 > ul > li:not(.selected):hover {
    background-color: #f9f9f9 !important; /* Ganz leichtes Grau */
    border-radius: 4px !important;
    cursor: pointer !important;
    /* Kleiner Zoom-Effekt beim Text */
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* --- FINALER RETTUNGSVERSUCH: SLIDER + GRID + TEXT FIX --- */
/* Portlet ID: B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 */



/* 3. DIE NEWS-KARTEN (LKW, Mann, etc.) */
/* Jetzt floaten wir nur die wirklichen News-Einträge */
#ID_simplegroup60AAA264 div[data-ix-control="record"],
#ID_simplegroupF2E9D704 div[data-ix-control="record"] {
  
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
}

/* Jede 2. Karte rechtsbündig (kein Margin) */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"]:nth-of-type(2n) {
    margin-right: 0 !important;
}
/* Jede ungerade Karte (ab der 3.) muss clearen, damit das Raster sauber bleibt */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"]:nth-of-type(2n+1) {
    clear: left !important;
}

/* 4. DAS INNERE RASTER (Bild & Text) */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] .ix-grid-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important; /* WICHTIG: Auto statt 100% */
}

/* 5. DAS BILD (Oben) */
/* Wir zwingen die Spalte auf 100% Breite */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] .ix-grid-column:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* Das Bild selbst */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] img {
    width: 100% !important;
    height:  auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px 8px 0 0 !important; /* Oben abrunden */
}

/* 6. DER TEXT (Unten) - HIER WAR DER FEHLER */
/* Wir zwingen die Text-Spalte, sichtbar zu sein und Platz einzunehmen */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] .ix-grid-column:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 20px !important;
    height: auto !important;      /* Automatische Höhe */
    display: block !important;    /* Sichtbarkeit erzwingen */
    visibility: visible !important;
}

/* Textumbruch erzwingen */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] p,
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"] .Text_Standard {
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
}

/* 7. CLEANUP */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 .bmEntryReadContainerWrapper a {
    padding: 20px 0px 20px 20px;
}
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 .bmEntryReadContainerWrapper a img {
display:none!important;
}

.guid-07B67A58A4C257750EC5275843180A8E82B361EA div#table-record:first-child,
.guid-71D02C1BB0ADDFEE6A45E181F0711C90DF4C66A3 div#table-record:first-child {
	margin-top:0!important;
}
[data-appguid="3B865CEB65DB79F9F2FBC775EB653886C4BDD518"] .shapedtable-records>div {
    padding: revert!important;
}

#ID_shapedtablebase5BBAFCBC_records {
	display: grid;
    /* grid-row: 2; */
    grid-template-columns: auto auto;
    gap: 10px;
}

.guid-6101A363A97678E97C1D96F062E2A3AF30EAC090 span { 
color:#424f62;	
}


/* --- FIX NUR FÜR DAS ERSTE ELEMENT (HERO TEXT) --- */
#ID_Portlet_B908EFDE24DFE54CFAEF43F0E4BE0D8E4D9DFD39 div[data-ix-control="record"]:first-child .ix-grid-column:last-child {
    width: 90% !important;          /* Hier setzen wir deine 90% */
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 20px !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
}