/* kunden.css */

:root {
	--templatefarbe_hex: #004876 !important;
	--templatefarbe_rgb: 0,72,118 !important;
	--akzentfarbe_hex: var(--templatefarbe_hex) !important;
	--akzentfarbe_rgb: var(--templatefarbe_rgb) !important;
	--textfarbe_hex: #030303 !important;
    --untermenutextfarbe_hex: var(--textfarbe_hex) !important;
	--buttonfarbe_hex: var(--akzentfarbe_hex) !important;
	--buttontextfarbe_hex: #fff !important;
	--buttonfarbe_hell_hex: var(--akzentfarbe_hex) !important;
	--buttonhintergrundfarbe_hell_hex: #f2f2f2 !important;	
	--buttontextfarbe_hell_hex: var(--textfarbe_hex) !important;
	--hinweisboxfarbe_rgb: var(--templatefarbe_rgb) !important;
	--hinweisboxtextfarbe_hex: #fff !important;
	--welcomeboxhintergrundfarbe_rgb: var(--templatefarbe_rgb)  !important;
	--welcomeboxtextfarbe_hex: #fff !important;
	--welcomeboxbuttonfarbe_hex: #333 !important;
	--welcomeboxbuttonhoverfarbe_hex: #444 !important;
	--welcomeboxbuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;
	--infobarhintergrundfarbe_hex: #444443 !important;
	--infobarhintergrundfarbe_rgb: 68,68,67 !important;
	--infobartextfarbe_hex: #fcfcfc !important;
	--contactbartextfarbe_hex: var(--welcomeboxtextfarbe_hex) !important;
	--shortbartextfarbe_hex: var(--buttontextfarbe_hex) !important;
	--footerhintergrundfarbe_hex: var(--infobarhintergrundfarbe_hex) !important;
	--footertextfarbe_hex: var(--infobartextfarbe_hex) !important;
	--hintergrundfarbe_hex: #ffffff !important;
	--hintergrundfarbe_rgb: 255,255,255 !important;
	--rahmenhintergrundfarbe_hex: #ffffff !important;
	--rahmenhintergrundfarbe_grau_hex: #ededed !important;
	--rahmenhintergrundfarbe_dunkel_hex: #444445 !important;
	--menuhintergrundfarbe_hex: var(--hintergrundfarbe_hex);
	--menuhintergrundfarbe_rgb: var(--hintergrundfarbe_rgb);
	--menubuttonfarbe_hex: var(--akzentfarbe_hex) !important;
	--menutextfarbe_hex: var(--textfarbe_hex) !important;
	--mobilmenuhintergrundfarbe_hex: #fff !important;
	--mobilmenuhintergrundfarbe_sub_hex: var(--mobilmenuhintergrundfarbe_hex) !important;
	--mobilmenuhintergrundfarbe_sub_rgb: var(--mobilmenuhintergrundfarbe_rgb) !important;	
	--mobilmenuhintergrundfarbe_sub1_rgba: 150,150,150,0.1 !important;
	--mobilmenuhintergrundfarbe_sub2_rgba: 150,150,150,0.15 !important;
	--mobilmenuhintergrundfarbe_sub3_rgba: 150,150,150,0.2 !important;
	--mobilmenuhintergrundfarbe_sub4_rgba: 150,150,150,0.25 !important;
	--mobilmenutextfarbe_hex: var(--textfarbe_hex) !important;
	--mobilmenubuttonfarbe_hex: var(--templatefarbe_hex) !important;
	--mobilmenubuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;	
	--welcomecards_textfarbe_hex: var(--textfarbe_hex) !important;
	--welcomecards_hintergrundfarbe_hex: var(--hintergrundfarbe_hex) !important;	
	--highlightboxhintergrundfarbe_rgb: 250,250,250 !important;	
	--productpreviewhintergrundfarbe_links_hex: var(--rahmenhintergrundfarbe_hex) !important;	
	--productpreviewhintergrundfarbe_rechts_hex: var(--rahmenhintergrundfarbe_grau_hex);
	--bgfarbe_hex: var(--akzentfarbe_hex);
	--bgfarbe_text_hex: var(--buttontextfarbe_hex);
	--bg-section-hellgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-grau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-dunkelgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-farbe1_hex: var(--templatefarbe_hex);
	--bg-section-farbe2_hex: var(--templatefarbe_hex);
	--bg-section-farbe3_hex: var(--templatefarbe_hex);
	--iconshome_invertiert_bg_hex: var(--akzentfarbe_hex);	
	--iconshome_invertiert_text_hex: var(--buttontextfarbe_hex) !important;		
	--kachelboxenfarbe_rgb: 255,255,255 !important;
	--winkelfarbe_rgb: var(--highlightboxhintergrundfarbe_rgb) !important;
	--boxfarbe_hex: #efefef !important;
	--claimslidefarbe_hex: var(--templatefarbe_hex) !important;
	--claimboxinnerfarbe_hex: #fff !important;
	--claimboxtextfarbe_hex: var(--akzentfarbe_hex) !important;	
	--boxverlauf_dunkel_rgb: 240,240,240 !important;		
	--boxverlauf_hell_rgb: 255,255,255 !important;
	--erfal_farbe: #ef6d00 !important;
	--erfal_farbe_rgb: 239,109,0 !important;
	--erfal_raumausstatter_farbe: #ef6d00 !important;
	--erfal_raumausstatter_farbe_rgb: 239,109,0 !important;
	--feba_farbe: #023e72 !important;
	--feba_farbe_rgb: 2,62,114 !important;
	--fensterfachbetriebe_farbe: #464646 !important;
	--fensterfachbetriebe_farbe_rgb: 70,70,70 !important;
	--kneer_suedfenster_farbe: #5aaf24 !important;
	--kneer_suedfenster_farbe_rgb: 90,175,36 !important;
	--markilux_farbe: #e20018 !important;
	--markilux_farbe_rgb: 226,0,26 !important;
	--neutral_farbe: #464646 !important;
	--neutral_farbe_rgb: 70,70,70 !important;
	--rehau_farbe: #d2346e !important;
	--rehau_farbe_rgb: 210,52,110 !important;
	--roma_farbe: #dd7907 !important;
	--roma_farbe_rgb: 221,121,7 !important;
	--terrassendaecher_farbe: #464646 !important;
	--terrassendaecher_farbe_rgb: 70,70,70 !important;
	--weru_farbe: #fffe00 !important;
	--weru_farbe_rgb: 255,254,0 !important;
	--windor_farbe: #e3010f !important;	
	--windor_farbe_rgb: 227,1,15 !important;
	--erfal_template: #ee7101 !important;
	--erfal_template_rgb: 238,113,1!important;
	--erfal-raumausstatter_template: #ee7101 !important;
	--erfal-raumausstatter_template_rgb: 238,113,1 !important;
	--feba_template: #014073 !important;
	--feba_template_rgb: 1,64,115 !important;
	--fensterfachbetriebe_template: #f5c800 !important;
	--fensterfachbetriebe_template_rgb: 245,200,0 !important;
	--kneer_suedfenster_template: #63b332 !important;
	--kneer_suedfenster_template_rgb: 99,179,50 !important;
	--markilux_template: #e2001a !important;
	--markilux_template_rgb: 226,0,26 !important;
	--neutral_template: #464646 !important;
	--neutral_template_rgb: 70,70,70 !important;
	--rehau_template: #4fc1e5 !important;
	--rehau_template_rgb: 79,193,229 !important;
	--roma_template: #ee7b1d !important;
	--roma_template_rgb: 238,123,29 !important;
	--terrassendaecher_template: #f5c800 !important;
	--terrassendaecher_template_rgb: 245,200,0 !important;
	--weru_template: #fffe00 !important;
	--weru_template_rgb: 255,254,0 !important;
	--windor_template: #ed0022 !important;	
	--windor_template_rgb: 237,0,34 !important;	
}

.koop-farbe {
	color: var(--templatefarbe_hex) !important;
}
.koop-farbe-rgb {
	color: rgb(var(--templatefarbe_rgb)) !important;
}
.koop-bg-farbe {
	background-color: var(--templatefarbe_hex) !important;
}
.koop-bg-farbe-rgb {
	background-color: rgb(var(--templatefarbe_rgb)) !important;
}
.erfal-template .bg-gradient,
.erfal-raumausstatter-template .bg-gradient,
.feba-template .bg-gradient,
.fensterfachbetriebe-template .bg-gradient,
.kneer-suedfenster-template .bg-gradient,
.markilux-template .bg-gradient,
.neutral-template .bg-gradient,
.rehau-template .bg-gradient,
.roma-template .bg-gradient,
.terrassendaecher-template .bg-gradient,
.weru-template .bg-gradient,
.windor-template .bg-gradient,
.bg-gradient {
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) -20%, rgba(var(--templatefarbe_rgb),1) 50%) !important;
}




/* kundenspezifische Ergänzungen */


.bg-gradient {
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) -20%, rgba(var(--templatefarbe_rgb),1) 50%) !important;
}



.akkordeon-details details {
    padding: 0.5rem 1rem;
    overflow: hidden;
    border: 1px solid var(--templatefarbe_hex);
    margin-bottom: 1em;
}
.akkordeon-details summary {
    cursor: pointer;
    font-weight: bold;
    line-height: 1.3;
    margin-left: 1rem;
    list-style-position: outside;
    font-size: 1.33em;
    line-height: 1.3;
}
.akkordeon-details summary::marker {
    font-size: 0.75em;
}
.akkordeon-details summary:hover {
    color: var(--templatefarbe_hex);
}
.akkordeon-details .content {
    padding: 1em 0 0 1em;
}




<style>

.scroll-x-wrapper {
    overflow-x: auto;
    width: 100%;
}

.table-with-hover-effect {

    --FG-COLOR: color-mix(in srgb, var(--templatefarbe_hex), white 75%);
    --FG-COLOR-FOR-ODD-ROWS: color-mix(in srgb, var(--templatefarbe_hex), white 80%);

    --BG-COLOR: color-mix(in srgb, var(--templatefarbe_hex), black 45%);
    --BG-COLOR-FOR-ODD-ROWS: color-mix(in srgb, var(--templatefarbe_hex), black 25%);

    --FG-COLOR-WHEN-HOVERING: color-mix(in srgb, var(--templatefarbe_hex), black 45%);
    --BG-COLOR-WHEN-HOVERING: color-mix(in srgb, var(--templatefarbe_hex), white 75%);

    --FG-COLOR-WHEN-SELECTED: color-mix(in srgb, var(--templatefarbe_hex), black 75%);
    --BG-COLOR-WHEN-SELECTED: color-mix(in srgb, var(--templatefarbe_hex), white 95%);

    width: 100%;
    margin-block: 0.5rem;
    border-collapse: collapse;
    color: var(--FG-COLOR, #fff);
    background-color: var(--BG-COLOR, #444);
}


/* Andere Farben für nicht-geradzahlige Zeilen */

.table-with-hover-effect tbody tr:nth-child(odd) {
    color: var(--FG-COLOR-FOR-ODD-ROWS, #fff);
    background-color: var(--BG-COLOR-FOR-ODD-ROWS, #666);
}


/* Einzelne Tabellenzellen */

.table-with-hover-effect th,
.table-with-hover-effect td {
    border: 1px solid var(--FG-COLOR-FOR-ODD-ROWS, #fff);
    padding: 0.5em 1em;
    text-align: left;
}


/* Rechts und links keine Ränder */

.table-with-hover-effect th:first-child,
.table-with-hover-effect td:first-child {
    border-left: none;
}

.table-with-hover-effect th:last-child,
.table-with-hover-effect td:last-child {
    border-right: none;
}


/* Hover Farben */

.table-with-hover-effect tbody tr:hover {
    color: var(--FG-COLOR-WHEN-HOVERING, #000);
    background-color: var(--BG-COLOR-WHEN-HOVERING, #ddd);
}


/* Farben für markierten Text */

.table-with-hover-effect th::selection,
.table-with-hover-effect td::selection {
    color: var(--FG-COLOR-WHEN-SELECTED, #000);
    background-color: var(--BG-COLOR-WHEN-SELECTED, #ddd);
}



</style>
































