/* 
	EINIGE (erprobte) VERFÜGBARE spanS - Links funktionieren
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/playwrite/PlaywriteCU-Variablespan_wght.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/open_sans/static/OpenSans-Regular.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/neuton/Neuton-SC-Regular.ttf") format('truetype');
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/kanit/Kanit-Light.ttf") format('truetype');
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/kanit/Kanit-Regular.ttf") format('truetype'); 
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/dejavu/DejaVuSans-BoldOblique.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/dejavu/DejaVuSerif.ttf") format('truetype'); 
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/dejavu/DejaVuSansMono.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/dejavu/DejaVuSerif-Italic.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/centurygothic/CenturyGothic.ttf") format('truetype'); 
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/centurygothic/CenturyGothic_bold.ttf") format('truetype');  
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/m_plus_1/static/MPLUS1-Regular.ttf") format('truetype');
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/m_plus_1/static/MPLUS1-Light.ttf") format('truetype'); [FAV]
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/grotesque/static/DarkerGrotesque-Regular.ttf") format('truetype');
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/grotesque/static/DarkerGrotesque-Medium.ttf") format('truetype');
	src: url("https://online-kompetenz.de/_Entwicklung/itegon/_spans/grotesque/static/DarkerGrotesque-Bold.ttf") format('truetype');
	*/

@font-face{
  font-family: kundenschrift;
  font-style: normal;
  font-weight: 300;
  src: url("https://www.seminare-und-events.de/online-kompetenz/_fonts/m_plus_1/static/MPLUS1-Regular.ttf") format('truetype');
}

/* =================================================================
   ZENTRALE TYPOGRAFIE-SYSTEM
   Basis: 16px auf Desktop, skaliert mit Viewport
   Alle Größen sind aufeinander abgestimmt
================================================================= */

:root {
  /* --- Basis-Schriftgröße (16px Standard) --- */
  --font-size-base: clamp(14px, 1.2vw, 18px);

  /* --- Schriftgrößen Hierarchie (relativ zu Base) --- */
	--font-size-h1: clamp(22px, 1.9vw, 35px);    /* Große Überschriften */	
	--font-size-h2: clamp(18px, 1.5vw, 26px);      /* Mittlere Überschriften */
	--font-size-h3: clamp(16px, 1.2vw, 22px);    /* Kleine Überschriften */
	--font-size-h4: clamp(14px, 1.1vw, 20px);    /* Sehr kleine Überschriften */
	--kundenfarbe-h1: #25395E;
	--kundenfarbe-h2: #4064A5;
	--kundenfarbe-h3: #404040;
	--kundenfarbe-h4: #25395E;

	--font-size-body: clamp(14px, 1vw, 17px);    /* Fließtext, regulär */
	--font-size-small: clamp(12px, 0.8vw, 15px); /* Kleine Texte */
	--font-size-xsmall: clamp(11px, 0.7vw, 13px); /* Sehr kleine Texte */

  /* --- Zeilenabstände (optimal für Lesbarkeit) --- */
  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-loose: 1.75;

  /* --- Farb-Variablen --- */
  --pflichtfeld: #aa0000;
  --kundenfarbe: #25395E;
  --kundenfarbe_header:#25395E; /* Header rechts oben - neu, da Kundenfarbe nicht immer passte */
  --kundenfarbe-bg-hover: #25395E;
  --kundenfarbe-text-hover: #FFF;
  --heller_hg_kundenfarbe: color-mix(in srgb, var(--kundenfarbe) 10%, white);/* Nicht ändern! */
  --button-rot: #aa0000;
  --button-rot-text: #ffffff;

  --button-grau-bg-top: #ffffff;
  --button-grau-bg-bottom: #f3f4f6;
  --button-grau-text: #333;
  --button-grau-border: #d1d5db;

  --button-backend-bg: #f9fafb;
  --button-backend-border: #404040;
  --button-backend-text: #404040;
  
  /* Desktopmenü */
  --menue-schriftfarbe: #25395E; /* Desktopmenue und horizontales Menue ohne Select) */
  --dm-inaktiv-dunkel: var(--kundenfarbe);
  --dm-inaktiv-hell: color-mix(in srgb, var(--kundenfarbe) 10%, white);/* Nicht ändern! Alt = d */
  
  /* STATISTIK */
  --statistik_farbe0: var(--kundenfarbe);/* Nicht ändern!  alt = g*/
  --statistik_farbe1: color-mix(in srgb, var(--kundenfarbe) 50%, white);/* Nicht ändern! Alt = m */
  --statistik_farbe2: color-mix(in srgb, var(--kundenfarbe) 25%, white);/* Nicht ändern! Alt = w */
  --statistik_farbe3: color-mix(in srgb, var(--kundenfarbe) 10%, white);/* Nicht ändern! Alt = d */
 /* MATBIB */
  --matbib_reserviert: #087d65;
  --matbib_reserviert_txt: #FFF;
  
  --matbib_ausgegeben: #c8502b;
  --matbib_ausgegeben_txt: #FFF;
  
  --matbib_praesenzbestand: var(--dm-inaktiv-hell);
  --matbib_praesenzbestand_txt: #FFF;
    	
	/*  Art der Veranstaltungen */
	--art_event_praesenz_hg: var(--kundenfarbe);
	--art_event_praesenz_txt: #FFF;
		
	--art_event_online_hg: color-mix(in srgb, var(--kundenfarbe) 70%, white);
	--art_event_online_txt: #FFF;
	
	--art_event_hybrid_hg: #505050;
	--art_event_hybrid_txt: #ffffff;
	
		/* TICKETS */
	--ticket-hg: var(--kundenfarbe);
	--ticket-txt: #FFF;
 
}

/* =================================================================
   HEADER
================================================================= */

header {
  border-style: solid;
  border-top-width: 0px;
  border-bottom-color: #F8C00D;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 3px;
  background: #fff;
}




/* =================================================================
   ÜBERSCHRIFTEN (h1-h3)
================================================================= */

h1 {
  color: var(--kundenfarbe-h1);
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-h1);
  font-weight: 600;
  margin-bottom: 0.6em;
  line-height: var(--line-height-tight);
  margin-top: 0.4em;
}

h2 {
  color: var(--kundenfarbe-h2);
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-h2);
  font-weight: 600;
  margin-bottom: 0.5em;
  line-height: var(--line-height-tight);
  margin-top: 0.3em;
}

h3 {
  color: var(--kundenfarbe-h3);
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-h3);
  font-weight: 500;
  margin-bottom: 0.4em;
  line-height: var(--line-height-tight);
  margin-top: 0.2em;
}

h4 {
  color: var(--kundenfarbe-h4);
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-h4);
  font-weight: 500;
  margin-bottom: 0.3em;
  line-height: var(--line-height-tight);
  margin-top: 0.15em;
}

/* =================================================================
   HAUPTTEXT-KLASSEN
================================================================= */

p {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #1f2937;
}

.ueberschrift {
  font-weight: bold;
  font-size: clamp(18px, 1.3vw, 26px);
  color: var(--kundenfarbe);
  margin: 0px 0px 1px 0px;
  line-height: var(--line-height-normal);
  margin-bottom: 30px;
  font-family: kundenschrift, Arial, sans-serif;
}

.ueberschrift_hell {
  font-weight: bold;
  margin-bottom: 30px;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(18px, 1.3vw, 26px);
  color: #ffffff;
  line-height: var(--line-height-normal);
}

/* --- Fließtext Varianten --- */

.fliesstext {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #1f2937;
}

.fliesstext_hell {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #fff;
}

.fliesstext_rot {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #800000;
}

.fliesstext_grau {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #1f2937;
}

.fliesstexttabelle {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #1f2937;
}

.fliesstext_gruen {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  margin-bottom: 1em;
  color: #008800;
}

.textliste {
  text-decoration: none;
  font-size: var(--font-size-small);
  color: #505050;
  font-family: kundenschrift, Arial, sans-serif;
}

.textklein {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-small);
  color: #000000;
  line-height: var(--line-height-normal);
}

.kommentar {
  text-decoration: none;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-xsmall);
  color: #505050;
  line-height: 100%;
}

.fliesstext_backend {
  text-decoration: none;
  color: #505050;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  line-height: var(--line-height-normal);
}

.fliesstext_backend_hell {
  text-decoration: none;
  font-size: clamp(12px, 0.8vw, 15px);
  color: #ffffff;
  font-family: kundenschrift, Arial, sans-serif;
  line-height: var(--line-height-normal);
}

/* =================================================================
   LISTEN
================================================================= */

li {
  font-size: var(--font-size-body);
  padding-left: 1.2rem;
  margin-left: 20px;
  line-height: var(--line-height-normal);
  list-style-image: url("../images/menue_selected.gif");
  padding-bottom: 10px;
}

/* =================================================================
   LINKS
================================================================= */

a {
  font-family: kundenschrift, Arial, sans-serif;   
  font-size: clamp(0.7em, calc(0.95em + 0.5vw), 1.2em);
  color: var(--menue-schriftfarbe);
  
  padding-left:5px;
  padding-right:5px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:visited {
	color: var(--menue-schriftfarbe);
	text-decoration: none;
	font-family: kundenschrift, Arial, sans-serif;
}

a:hover {
	color: var(--kundenfarbe-text-hover);
	background: var(--kundenfarbe-bg-hover);
	text-decoration: none;
	font-family: kundenschrift, Arial, sans-serif;
	border-radius:4px;
}

a:active {
  color: var(--kundenfarbe-text-hover);
  background: var(--kundenfarbe-bg-hover);
  text-decoration: none;
  font-family: kundenschrift, Arial, sans-serif;
}

a:focus {
  color: var(--kundenfarbe-text-hover);
  background: var(--kundenfarbe-bg-hover);
  text-decoration: none;
  font-family: kundenschrift, Arial, sans-serif;
}

/* =================================================================
   MENÜ-STYLES
================================================================= */

.openmenue_header {
  background: var(--kundenfarbe-bg-hover);  
  color: var(--kundenfarbe-text-hover);
  padding-top: 10px;
  padding-bottom:5px;
  letter-spacing: 3px;
  margin-right: 10px;
  text-align: left;
  vertical-align: top;
  font-size: clamp(11px, 1.3vw, 24px);
  writing-mode: vertical-lr;
}

.mnu_selected {
  font-weight: normal;
  /* line-height: var(--line-height-normal); */
  padding-top: 5px;
  padding-bottom: 5px;  
  color: var(--menue-schriftfarbe);
  background: color-mix(in srgb, var(--kundenfarbe) 10%, white);
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem);
}

.auswahl_sub_selected {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem);
  color: var(--menue-schriftfarbe);
  background: color-mix(in srgb, var(--kundenfarbe) 10%, white);
  border-left-style: dashed;
  border-left-width: 1px;
  /* border-left-color: #F8C00D; 
  */
  margin-left: 10px;
  padding-left: 5px;
  font-weight: normal;
  padding-top: 5px;
  padding-bottom: 5px;
}

.auswahl_sub_not_selected {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem);
  
  color: var(--menue-schriftfarbe);
  padding-left: 8px;
  font-weight: normal;
  margin-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left-style: dashed;
  border-left-width: 1px;
  border-left-color: #404040;
}

ul.ullevel1 {
	display:block;
	width:100%;
  padding-right: 0px;
  padding-left: 0px;
  list-style-image: none;
  margin: 0px;  
  font-family: kundenschrift, Arial, sans-serif;
 font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem);
}



ul.ullevel1 li {
  display: block;
  width:100%;
  
  list-style-image: none;
  color: var(--menue-schriftfarbe);
  border-bottom: #EFEFEF 1px solid;
  list-style-type: none;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem); 
}



ul.ullevel1 li a:active,
ul.ullevel1 li a:visited,
ul.ullevel1 li a:link {
  display: block;
  list-style-image: none;
  color: var(--menue-schriftfarbe);
  background-color: transparent;
  text-decoration: none;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  margin-left: 4px;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(0.8rem, 0.4vw + 0.8rem, 1.1rem);

}


ul.ullevel1 li a:hover {
  display: block;
  list-style-image: none;
  color: var(--kundenfarbe-text-hover);
  text-decoration: none;
  
  border-left-style: solid;
  border-left-width: 5px;
  background: var(--kundenfarbe-bg-hover);
  border-left-color: var(--kundenfarbe);
  
}


/* =================================================================
   SPALTEN-LAYOUT
================================================================= */

.startseite_linke_spalte {
  display: inline-block;
  max-width: 65%;
  padding-right: 30px;
  background: #fff;
}

.startseite_rechte_spalte {
  display: inline-block;
  float: right;
  max-width: 25%;
  min-width: 275px;
  padding-left: 15px;
  padding-right: 10px;
  background: #f9fafb;
}

/* =================================================================
   RESPONSIVE - Tablets (max 1000px)
================================================================= */

@media all and (max-width: 1000px) {
  .startseite_linke_spalte {
    clear: both;
    display: block;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .startseite_rechte_spalte {
    clear: both;
    display: block;
    max-width: 100%;
    min-width: 100%;
    margin-top: 30px;
    padding-right: 0;
  }
}

/* =================================================================
   RESPONSIVE - Mobile (max 600px)
================================================================= */

@media all and (max-width: 600px) {
  :root {
    --font-size-h1: clamp(22px, 5vw, 32px);
    --font-size-h2: clamp(18px, 4vw, 28px);
    --font-size-h3: clamp(16px, 3.5vw, 22px);
    --font-size-body: clamp(13px, 1.2vw, 16px);
    --font-size-small: clamp(11px, 1vw, 14px);
  }
}