/* 
AK-CSS-Variables
CSS-Variables wie Farben
Basis sind Slate (=Schiefer) Farben. Das sind Grautöne aus Schwarz und hellem Blau. 
*/  
:root {
  --white: #ffffff;
  --black: #000000;
  /* Primitives - "Slate" */
  --slate-50:  	#f8fafc;
  --slate-100: 	#f1f5f9;
  --slate-200: 	#e2e8f0;
  --slate-300:  #cbd5e1;
  --slate-400: 	#94a3b8;
  --slate-500: 	#64748b;
  --slate-600: 	#475569;
  --slate-800:  #1e293b;
  --slate-900: 	#0f172a;
  
  /* Primitives - "Red" Rose */
  --red-100: 	#ffe4e6; /* background */
  --red-200: 	#fecdd3; /* background */
  --red-300: 	#fb92a0;
  --red-400: 	#f43f5e;
  --red-500:    #e11d48; /* signal icons, text */ 
  --red-600:    #be123c; /* signal icons, text */
  --red-800: 	#9f1239; /* background */
  --red-btn:    var(--red-500); 
  --red-btn-ho: var(--red-600); 


 /* Primitives - Forest Green */
  --green-50:  #f0f9f1; /* Hintergrund für Erfolgsmeldungen */
  --green-100: #dcf0de;
  --green-200: #bbe1c3;
  --green-300: #8ec99b;
  --green-400: #5fb073;
  --green-500: #22c55e; 
  --green-600: #16a34a; /* Die Hauptfarbe (Partner zu red-600) */
  --green-700: #15803d; 
  --green-800: #166534; 
  --green-900: #14532d; 
  --green-btn: var(--green-500); 
  --green-btn-ho: var(--green-700); 

  /* Primitives - Yellow (Professional Slate-Hybrid) */
  --yellow-50:  #fffbeb; 
  --yellow-100: #fef3c7; 
  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b; /* do not user color:white */
  --yellow-600: #d97706; 
  --yellow-700:	#b45309;
  --yellow-900:	#78350f;
  
/* Primitives - slate amber */
--amber-25: #fffaf5;
--amber-50: #fef3e6;
--amber-100:#fde6d2;
--amber-200:#fbdcb7;
--amber-500:#F18A01; /* LeLa LOGO */
--amber-600:#d97706;
--amber-900:#78350f;
--lela-orange: var(--amber-500);

/* Primitives - slate Blue hybrid INFO / AKTION  */
  --blue-50:  #f0f7fa; /* Hintergrund für Info-Boxen */
  --blue-100: #e0eef5; /* Dezente Balken / Details-Hintergrund */
  --blue-200: #bcdceb;
  --blue-300: #8ec2de;
  --blue-400: #5fa7d1;
  --blue-500: #3183b5; 
  --blue-600: #266a94; /* Dein Submit-Button / Primäre Aktion */
  --blue-700: #1e5677; 
  --blue-900: #164059; /* Dunkles Blau für Überschriften (H1, H2) */
  --blue-btn:     var(--blue-500); 
  --blue-btn-ho:  var(--blue-600); 
 
  /* Messages etc. -- obsolete?????? */
  --red-msg:    var(--red-800);
  --yellow-msg: var(--yellow-700);
  --green-msg:  var(--green-700);
  --blue-msg:   var(--blue-700);

  --blue-bar:		var(--blue-500);
  --blue-bar-dark: 	var(--blue-600);
  --lighter-blue:	var(--blue-100);
}

:root{
	/* Semantic: Footer layout elements */
--footer-bg:          var(--slate-800);
--footer-text:        var(--slate-300);
--footer-text-muted:  var(--slate-400);
--footer-title:       var(--slate-50);
--footer-link:        var(--slate-200);
--footer-link-hover:  var(--lela-orange);
--footer-border:      var(--slate-700);
}

:root{
/* Semantic: layout elements */
--bg-page:        var(--slate-50);
--bg-subtle:      var(--slate-100); 
--bg-card:        white;
--bg-highlight:   var(--amber-50);
--text-primary:   var(--slate-700);
--text-secondary: var(--slate-500);
--text-strong:    var(--slate-900);
--text-accent:    var(--blue-500);
--border-default: var(--slate-200); 
--border-subtle:  var(--slate-100);
--border-highlight: var(--amber-100);

  --btn-primary-bg: var(--blue-bar);
  --btn-primary-txt: white;
  --btn-primary-hover: var(--blue-bar-dark);
  --btn-secondary-txt: var(--slate-500); 
  --btn-secondary-hover: var(--slate-800); 

--btn-blue-bg:     var(--blue-bar); 
--btn-blue-ho:     var(--blue-bar-dark);
--btn-send-bg:     var(--amber-500); /* Submit, Form abschicken */ 
--btn-send-ho:     var(--amber-600);
--btn-link-bg:     var(--slate-500); /* Link, Weiter */ 
--btn-link-ho:     var(--slate-600);
--btn-neutral-bg:  var(--slate-500); /* Link, Weiter */ 
--btn-neutral-ho:  var(--slate-700);
--btn-login-bg:    var(--green-btn); 
--btn-login-ho:    var(--green-btn-ho); 
--btn-logout-bg:   var(--red-btn);   
--btn-logout-ho:   var(--red-btn-ho);  
--btn-abort-bg:    var(--red-300);   
--btn-abort-ho:    var(--red-400);  

--sidenav-bg: 		var(--slate-800);
--sidenav-submenu-bg: var(--slate-600);
--sidenav-border: 	var(--slate-900); 
--sidenav-text: 	var(--slate-200);
--sidenav-text-disabled: 	var(--slate-50);
--sidenav-link: 	var(--bg-subtle);
--sidenav-link-hover: 	var(--text-accent);
--sidenav-active: 		var(--text-accent);
--sidenav-font-size:		0.95rem;
--sidenav-submenu-font-size:0.85rem;
--hover-opacity: 0.08;
--sidenav-hover-bg: rgba(49, 131, 181, var(--hover-opacity));
--sidenav-line-height: 1.0;
--sidenav-item-padding: 8px 24px;
}


/* Colors for (flash) Messages */
:root {
  --msg-fatal-bg:       var(--red-200);    
  --msg-fatal-border:   var(--red-600);  
  --msg-fatal-text:     var(--red-800);
  --msg-error-bg:       var(--red-100);    
  --msg-error-border:   var(--red-300);  
  --msg-error-text:     var(--red-800);
  --msg-warning-bg:     var(--yellow-50);
  --msg-warning-border: var(--yellow-200);
  --msg-warning-text:   var(--yellow-700);
  --msg-success-bg:     var(--green-100); 
  --msg-success-border: var(--green-300);  
  --msg-success-text:   var(--green-700); 
  --msg-info-bg:        var(--blue-200);  
  --msg-info-border:    var(--blue-400);  
  --msg-info-text:      var(--blue-600); 
}


/* Colors for Forms */
:root {
  /* Fokus-Variablen für Inputs */
  --form-input-text:     var(--blue-900);
  --input-placeholder:   var(--slate-400);
  --input-bg:            white;

  --disabled-bg:     var(--slate-100);			
  --disabled-text:   var(--slate-400);
  --disabled-border: var(--slate-200);

  --input-focus-ring:   rgba(49, 131, 181, 0.2);

  --form-input-border: var(--blue-bar);
  --form-input-bg: white;
  --form-label:    var(--text-accent);
}
:root{  
/* Colors for Container (=box) */
  --mainblock-bg: 	var(--slate-50);
  --std-border-col: var(--slate-200);
  --box-header: 	var(--blue-bar);
  --box-text: 		var(--slate-600);
  --box-bg-standard:	var(--slate-100);
  --box-bg-special: 	var(--bg-highlight);
  --box-std-border-col:  var(--slate-200);
  --box-spec-border-col: var(--border-highlight);
}
/* Colors for Boxes */
:root {
 --box-info-bg: 	var(--amber-25);
 --box-info-border: var(--amber-200);
 --box-info-text: 	var(--amber-900);
}
:root {
 --box-neutral-bg: 		var(--blue-50);
 --box-neutral-border: 	var(--blue-200);
 --box-neutral-text: 	var(--blue-900);
}
:root {
 --box-thin-border:  1px;
 --box-thick-border: 6px;
}
:root{  
/* Special Colors for Teaser Tiles - not within the color scheme */
/* Olafs colors */
  --bg-teaser-aktuelles: 	#1d7471;
  --bg-teaser-atlas: 		#5ccdc9;
  --bg-teaser-tagung: 		#8bcf5a;
  --bg-teaser-preis: 		#e7003e;
  --bg-teaser-mitgliedschaft: #ff7100;
  --bg-teaser-stammtisch: 	#960028;
  --bg-teaser-schuelerlabore:	#458fbc;
  --bg-teaser-kategorien: 	#1d7471;
  --bg-teaser-netzwerke: 	#009b95;
  --bg-teaser-literatur: 	#87f03c;
  --bg-teaser-oer: 			#ff9540;
  --bg-teaser-online:		#cccccc;
  --bg-teaser-materialien:	#1d7471;
  --bg-teaser-jobs:			#960028;
  --bg-teaser-corona:		#004a8f;
  --bg-teaser-bne:			#005595;
  --bg-teaser-ce:			#dc5d00;
  --bg-teaser-mint-ub:		#5aa47e;
/* LeLa colors*/
  --bg-teaser-projekte:		var(--yellow-600);
  --bg-teaser-publikation:	var(--green-600);
  --bg-teaser-archiv:		var(--slate-400);
/* Fonts */
  --std-font-family: "Century Gothic", AppleGothic, Futura, sans-serif;
  --ss-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --std-font-size:		0.95rem;
  --sm-font-size:		0.85rem;
  --tiny-font-size:		0.75rem;
  --h1-font-size: 		1.8rem;    
  --h2-font-size: 		1.4rem;     
  --h3-font-size: 		1.15rem;    
  --h4-font-size: 		1.0rem;    
  --h1-weight: 		700;    
  --h2-weight: 		600;     
  --h3-weight: 		600;    
  --h4-weight: 		550;    
  --h1-col:		var(--blue-600);
  --h2-col:		var(--blue-700);
  --h3-col:		var(--slate-900);
  --h4-col: 	var(--slate-800);    
  
  --std-line-height: 	1.5;

/* Buttons (responsive; vw=viewport) */
    --transition-speed: 0.2s ease;

/* Schrift: Startet etwas größer, damit man den Effekt sieht */
    --btn-font-size: clamp(0.85rem, 1vw + 0.3rem, 0.95rem); 
    
/* Vertikales Padding: Niedrigerer Idealwert (1vw statt 2vw) */
    --btn-padding-v: clamp(0.35rem, 0.6vw + 0.1rem, 0.7rem);
    
/* Horizontales Padding: Darf ruhig stärker atmen */
    --btn-padding-h: clamp(0.75rem, 1.5vw + 0.2rem, 2rem);
	
/* button border-radius for all */
	--std-border-radius: 7px;
/* label font size */
	--std-label-font-size: 0.95rem;
}
:root {
    --icon-arrow: "➤"; 
}