/*				COLOR SWITCHER / css script	

				is a module which offers you some buttons to 	
				easily switch between different color modes 
				via stylesheets.  
				
				it also includes a preloader for your custom 
				setted theme colors to prevent visual breaks 
				between the color change. 
				
Contents:		• Theme Switcher - Colored buttons  
				• Anti Flash - preloads theme colors  
				• Transitions – Body Theme 
				• Dark Mode - @ Media 		
				
				------------------------------------------------------
				Version:	4,0		*	2026 05 25 
----------------------------------------------------------------------
  							JHM */

  
/*	ANTI FLASH - Preloading background colors.  
	Theme-Klasse sitzt kurz auf html bis JS body.class einsetzt 
	Colors comme -- bg primaries  ------------------------------------
	-chamois medium: 3E2022	medium dark: 817B73 */
 
	html.theme-paper		{ background-color: #D6D5CB !important; }
	/*	former 3E2022 		  RAL Grauweiss		#D6D5CB  ~	*/
	html.theme-chamois		{ background-color: #817B73 !important; }
	/*	former 8b8577 		  RAL Perlmausgrau	#817B73  ~	*/
	html.theme-cartonbleu	{ background-color: #5B686D !important; }
	/*	former 6a7080		  RAL Blaugrau		#5B686D  ok	*/
	html.theme-syringia		{ background-color: #6E6387 !important; }
	/*	former 2a2035 		  RAL Perlviolett	#6E6387  ~	*/
	html.theme-smaragd		{ background-color: #7C765A	!important; }
	/*	former 2a3828		  RAL Schilfgrün	#7C765A  ~	*/
	html.theme-syntax		{ background-color: #0F3052 !important; }
	/*	former 1d2230		  RAL Perlnachtblau	#0F3052  ~	*/
	html.theme-oldwood		{ background-color: #4C4A44 !important; }
	/*	former 2a2418		  RAL Umbragrau		#4C4A44  ~	*/
	html.theme-nightgreen	{ background-color: #2C3222 !important; }
	/*	former 0a0806		  RAL Flaschengrün	#2C3222  ~	*/
	html.theme-submarine	{ background-color: #36342A !important; }
	/*	former 0a0806 		  RAL Braungrün		#3E2022  ~	*/
	html.theme-dark			{ background-color: #45494E !important; }
	/*	former 1b1c1d		  RAL Grapitgrau	#45494E  ~	*/
	
	/*						  ------------------------------------ */
	
	

	/*	Switcher - Button colors	*/
 
	.theme-btn[data-theme="paper"]		{ background-color: #F1EDE1; } 
	/*	former E5E2DB					  RAL Reinweiss		  ok */ 
	.theme-btn[data-theme="chamois"]	{ background-color: #E3D9C7; } 
	/*	former E6D2B5					  RAL Perlweiss		  ok */ 
	.theme-btn[data-theme="cartonbleu"]	{ background-color: #979392; } 
	/*	former 7AADAC					  RAL Platingrau	  ok */ 
	.theme-btn[data-theme="syringia"]	{ background-color: #9773b0; } 
	/*	former 4D6F39		  			  RAL open		  	   ~ */
	.theme-btn[data-theme="smaragd"]	{ background-color: #60993B; } 
	/*	former 00B51B		  			  RAL Gelbgrün		  ok */
	.theme-btn[data-theme="syntax"]		{ background-color: #1F3855; } 
	/*	former 252a3a					  RAL Saphirblau	*/ 
	.theme-btn[data-theme="oldwood"]	{ background-color: #4c3d22; } 
	/*	former 1b1c1d					  transparent	–  –  ok */ 
	.theme-btn[data-theme="nightgreen"]	{ background-color: #4D6F39; } 
	/*	former 4D6F39		  			  RAL open		  	   ~ */
	.theme-btn[data-theme="submarine"]	{ background-color: #861A22; } 
	/*	former 903020					  RAL Rubinrot		  ok */ 
	.theme-btn[data-theme="dark"]		{ background-color: transparent; } 
	/*	former 1b1c1d					  transparent	–  –  ok */ 



 
 
 	/*	Transitions	- Color easing  */  			 
 
	body.theme-paper,		body.theme-chamois,  
	body.theme-cartonbleu,	body.theme-syringia,	
	body.theme-smaragd,		body.theme-syntax,
	body.theme-oldwood,		body.theme-nightgreen,
	body.theme-submarine,	body.theme-dark 
	
	{	transition:
        background-color 1.1s ease,
        color 0.0s ease;
	}

	body.theme-paper .hentry,			body.theme-paper .sidebar, 
	body.theme-chamois .hentry,			body.theme-chamois .sidebar,
	body.theme-cartonbleu .hentry,		body.theme-cartonbleu .sidebar,
	body.theme-syringia .hentry,		body.theme-syringia .sidebar,
	body.theme-smaragd .hentry,			body.theme-smaragd .sidebar,
	body.theme-syntax .hentry,			body.theme-syntax .sidebar,
	body.theme-oldwood .hentry,			body.theme-oldwood .sidebar,
	body.theme-nightgreen .hentry,		body.theme-nightgreen .sidebar, 
	body.theme-submarine .hentry,		body.theme-submarine .sidebar,
	body.theme-dark .hentry,			body.theme-dark .sidebar,
	
	body.theme-paper .post,				body.theme-chamois .post,
	body.theme-cartonbleu .post,		body.theme-smaragd .post,
	body.theme-syringia .post,			body.theme-syntax .post,
	body.theme-oldwood .post,			body.theme-nightgreen .post,
	body.theme-submarine .post,			body.theme-dark .post,

	body.theme-paper .head-mast,		body.theme-chamois .head-mast,
	body.theme-cartonbleu .head-mast,	body.theme-smaragd .head-mast,
	body.theme-syringia .head-mast,		body.theme-syntax .head-mast,
	body.theme-oldwood .head-mast,		body.theme-nightgreen .head-mast,
	body.theme-submarine .head-mast,	body.theme-dark .head-mast,

	body.theme-paper .footer-info,		body.theme-chamois .footer-info,
	body.theme-cartonbleu .footer-info,	body.theme-syringia .footer-info,
	body.theme-smaragd .footer-info,	body.theme-syntax .footer-info,
	body.theme-oldwood .footer-info,	
	body.theme-nightgreen .footer-info,
	body.theme-submarine .footer-info,	
	body.theme-dark .footer-info
	
	{   transition:
        background-color 0.0s ease,
        color 0.0s ease;
	}





	/*	Switcher - Button styles	*/

	.haey-theme-switcher {
    position: fixed;
    right: 28px;
    bottom: 14vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    z-index: 500;
	}
 
	.theme-btn {
    width: 10px;
    height: 10px;
    border-radius: 100%;    /* former 70%  */
    border: 1px solid rgba(128,128,128,1.0);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
	}
 
	.theme-btn:hover {
    transform: scale(2.0);
    border-color: rgba(128,128,128,0.9);
	}
 
	.theme-btn.active {
    border-color: rgba(128,128,128,1.9);
    transform: scale(1.33);
	}


	
/*  Colored Buttons | 807 | Pennants   */

@media (max-width: 807px) {

    .head-mast {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 400;
    }

    #page,
    .site-content-wrap {
        padding-top: 164px;             /*  = .head-mast height  */
    }

    .haey-theme-switcher {
        flex-direction: row;
        position: fixed;
        top: 164px;                     /*  = .head-mast height  */
        bottom: auto;
        right: 0;                       left: 0;
        width: 100%;
        justify-content: center;
        gap: 12px;
        padding: 0;
        background-color:               transparent;
        backdrop-filter:                none;
        -webkit-backdrop-filter:        none;
        border-bottom:                  none;
        z-index: 500;
    }

.theme-btn {
        width: 28px;
        height: 38px;
        border-radius: 0;
        border: none;
        opacity: 0.72;
        margin: 0;
        flex-shrink: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
        transition: opacity 0.15s ease, transform 0.15s ease;
        transform-origin: top center;   /* ← wächst nach unten, bleibt oben bündig */
    }

    .theme-btn:hover {
        opacity: 1.0;
        transform: none;
    }


.theme-btn.active {
        opacity: 1.0;
        transform: scaleY(1.3);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 65%, 0 100%);
    }

    /* direkte Nachbarn */
    .theme-btn:has(+ .theme-btn.active),
    .theme-btn.active + .theme-btn {
        transform: scaleY(1.15);
        opacity: 0.88;
    }

    /* zweite Nachbarn */
    .theme-btn:has(+ .theme-btn + .theme-btn.active),
    .theme-btn.active + .theme-btn + .theme-btn {
        transform: scaleY(1.07);
        opacity: 0.82;
    }

    /* dritte Nachbarn */
    .theme-btn:has(+ .theme-btn + .theme-btn + .theme-btn.active),
    .theme-btn.active + .theme-btn + .theme-btn + .theme-btn {
        transform: scaleY(1.03);
        opacity: 0.78;
    }
}                                       /*  end @media 807px  */






	/*	Colored Buttons | 500 | Smartphones | Pennants   */  

@media (max-width: 500px) {
    .haey-theme-switcher {
        flex-direction: row;
        position: fixed;
        top: 0;               bottom: auto;
        left: 0;              right: 0;
        width: 100%;
        gap: 0;
        padding: 0;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(255,255,255,0.10);
        z-index: 500;
    }
    .theme-btn {
        flex: 1;              /* 10 Buttons teilen Breite gleichmäßig */
        height: 26px;
        border-radius: 0;
        border: none;
        opacity: 0.88;
        margin: 0;
        transform: none;
    }
}



 
 

/* -------------------------------------------------------------------
	DARK MODE - Header + Footer 
   ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    .head-mast {
        background-color: #111213 !important;
    }
    .site-title,
    .site-title a {
        color: #d6d6d6 !important;
    }
    .site-description {
        color: #707070 !important;
    }
    .footer-info {
        background-color: #111213 !important;
        color: #707070 !important;
    }
    .footer-info a {
        color: #909090 !important;
    }
    .footer-info a:hover {
        color: #ffffff !important;
    }
	}
 
 
 
	
/* 		----------------------------------------------------------------------
   		end of the stylesheet •	COLOR SWITCHER  says goodbye	*/