/* =================================================================
   MAIN STYLESHEET - OPTIMIERT F?R RESPONSIVE DESIGN
   Basis: 16px Standard, responsive bis zu 18px auf gro?en Displays
   Mobile First Approach mit Media Queries
================================================================= */

:root {
  /* --- Standard font-Size (wird von clamp angepasst) --- */
	--font-size-base: clamp(14px, 1.2vw, 18px);
	--line-height-base: 1.55;
  
	--user_gruppe_kd: #EFEFEF;
	--user_gruppe_txt_kd:#000;
	
	--user_gruppe_archiv:#404040;
	--user_gruppe_txt_archiv:#FFF;
	
	--user_gruppe_admin: #ea5f8a;
	--user_gruppe_txt_admin:#FFF;
	
	--user_gruppe_verwaltung: #ea9b5f;
	--user_gruppe_txt_verwaltung:#FFF;
	
	--user_gruppe_aussteller: #6192a3;
	--user_gruppe_txt_aussteller:#FFF;
	
	--user_gruppe_sponsor: #66b8d9;
	--user_gruppe_txt_sponsor:#FFF;	
	
	--user_gruppe_referent: #83b123;
	--user_gruppe_txt_referent:#FFF;
	--auto-text-auf-kundenfarbe: oklch(from var(--kundenfarbe) clamp(0, calc((l - 0.68) * -1000), 1) 0 0); 
}

html, body {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 160%;
  /* height: auto !important;
  min-height: auto !important;
  */
}

P {
  line-height: 160%;
}

VIDEO {
  max-width: 100%;
}



#veranstaltungsdetails{	
	float:left;
	width:60%;
	max-width:60%;
	
}
#event_referierende{
	float:right;
	width:39%;
	max-width:39%
}
.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
}

.note-editor .layout-table td {
  border: 1px dashed #bbb;
}

.layout-table td {
  border: none;
}

.table-header-modern {    
	background:var(--dm-inaktiv-hell);
	/*
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, #efefef, #ffffff),#f3f5f8);
*/
    font-weight: 600;
    font-size: 14px;
    color: #2a2f35;

    padding: 10px 14px;
    border-bottom: 2px solid #e3e6eb;

    /* moderne Ecken oben */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    /* dezente Tiefe */
    box-shadow: inset 0 -1px 0 #e5e7ea;
    vertical-align: top;
}

/*  FEIERTAGE */
/* --- Feiertags-Badge (Kurse, Events, Verleih) --- */
.feiertag_badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:color-mix(in srgb, var(--kundenfarbe) 12%, #fff);
	color:color-mix(in srgb, var(--kundenfarbe) 80%, #000);
	border:1px solid color-mix(in srgb, var(--kundenfarbe) 30%, #fff);
	border-radius:999px;
	padding:3px 12px;
	font-family:kundenschrift, Arial, sans-serif;
	font-size:clamp(0.72rem, 0.9vw, 0.9rem);
	font-weight:500;
	line-height:1.4;
}
.feiertag_badge svg{
	width:15px;
	height:15px;
	flex-shrink:0;
	stroke:var(--kundenfarbe);
}



.infobox {
	position:relative;
    text-align: left;
    z-index: 299;
	opacity:1;
}
/* --- Infobox modernisiert --- */
.infobox_karte {
    width: 275px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    overflow: hidden;
    font-size: 13px;
}

.infobox_karte.ib-ausgeblendet { display: none; }

.ib-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.ib-foto {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.ib-kopf-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ib-funktion { font-size: 0.85em; opacity: 0.85; }

.ib-ausblenden {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1em;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.ib-inhalt { padding: 10px 14px 14px; }
.ib-servicetext { margin: 0 0 10px; font-weight: bold; }

.ib-kontaktlink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    text-decoration: none;
    word-break: normal;
    overflow-wrap: anywhere;
}

.ib-kontaktlink svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.ib-qr-zeile {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.ib-qr { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Einblende-Lasche rechts – Gegenstueck zu #dm_einblenden */
#ib_einblenden {
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 14px 4px 14px 6px;
    background: var(--dm-inaktiv-hell);
    color: var(--menue-schriftfarbe);
    border: 1px solid #e0e0e0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    z-index: 100;
    transition: background 0.2s ease, color 0.2s ease, padding-right 0.2s ease;
}
#ib_einblenden.ib-sichtbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ib-einblenden-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 0.25em;
    font-size: 0.85em;
    text-transform: uppercase;
}
#ib_einblenden:hover,
#ib_einblenden:focus-visible {
    background: var(--kundenfarbe);
    color: #fff;
    padding-right: 8px;
}

/* INfobox Ende */

IMG {
  max-width: 100%;
}
/*
nav {
  position:relative;
  min-width: 200px;
  
  float: left;
  border-bottom: 0px solid black;
  height: 100%;
  padding: 0px;
  z-index: 5;
  background:transparent;
}

header {
  padding: 10px;
  padding-top: 20px;
  padding-left: 20px;
  width: 100%;
  height: 150px;
  
}
*/
@keyframes fadeOut {
  from {
    opacity: 1;
    filter: grayscale(0);
  }
  to {
    opacity: 0.25;
    filter: grayscale(100%);
  }
}


.ticket {
  font-family: kundenschrift, Arial, sans-serif;
  color: #000;
}

#seiteninhalt {
  clear: both;
  right: 10px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: 2px;
  background: #fff;  
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;  
  position: relative;
  display: block;
}

#seiteninhalt_abgedockt {
  position: relative;
  top: 0;
  width: 100%;
  background: #FFFFFF;
  padding: 30px;
}

#wrapper {
  width: 100%;
  background: #ffffff;
}





#datenzeile {
  background-color: #ffffff;
}

#datenzeile_nicht_anzeigen {	
  background-color: var(--dm-inaktiv-hell);
  
}

#datenzeile:hover {
/*   background-color: #efefef; */
/*   background: var(--dm-inaktiv-hell); */
   background: var(--heller_hg_kundenfarbe);		    
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.matbib_item {
    background-color: #ffffff;
}

.matbib_item:hover {
    background: var(--heller_hg_kundenfarbe);
    box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

#runde_Ecken {
  border-radius: 6px;
}

#Ecke_links_oben {
  border-top-left-radius: 6px;
}

#Ecke_rechts_oben {
  border-top-right-radius: 6px;
}

#Ecke_rechts_unten {
  border-bottom-right-radius: 30px;
}

#Ecke_links_unten {
  border-bottom-left-radius: 30px;
}

#vertikaler_text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  text-align: center;
}

#desktop_version {
  visibility: hidden;
}

#runde_infobox_rot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 40px;
  height: 40px;
  left: 0px;
  border: 2px solid red;
  border-radius: 20px;
}

#runde_infobox_gruen {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: relative;
  width: 40px;
  height: 40px;
  top: 0px;
  left: 0px;
  border: 2px solid #4A8000;
  border-radius: 20px;
}

#runde_infobox_grau {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: relative;
  width: 40px;
  height: 40px;
  top: 0px;
  left: 0px;
  border: 2px solid #E0E0E0;
  border-radius: 20px;
}

.dashboard {
  

  margin-bottom:16px;
  display:flex; gap:16px; align-items:stretch; flex-wrap:wrap;
}

.dashboard .box {
  flex: 1 1 300px;
}

.statsitik_item {
  font-weight: 500;
  font-size: clamp(18px, 4vw, 2em);
  color: var(--kundenfarbe);
  margin: 0px 0px 1px 0px;
  line-height: var(--line-height-normal);  
  font-family: kundenschrift, Arial, sans-serif;
}

.td_format {
  border-bottom: 1px dashed #808080;
}

.anker_abstand {
  scroll-margin-top: 300px;
}

/* --- ZOOM von BILDERN --- */
div.image {
  overflow: hidden;
}

div.image img {
  width: 100%;
  height: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

div.image img:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

/* --- FORMULAR-ELEMENTE --- */

TEXTAREA {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  padding: 10px 12px;
  margin-top: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  min-height: 120px;
}

fieldset {

  border-style: dashed;
  border-width: 0;
  border-color: transparent;
  margin-bottom: 15px;

}

legend {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  color: #404040;
  font-weight: bold;
}

.zeilenabstand{
	display:block;
	height:5px;
}
label {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: normal;
  color: #404040;
}
#label_abstand{
	display:block;
	padding-top:12px;
}
.nicht_anzeigen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

select {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  height: 46px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid var(--button-grau-border);
  margin-left: 5px;
  margin-bottom:3px;
}

/* --- Orts-Auswahl und Textauswahl f?r Anmeldebest?tigung----------- */

.select-card {
    background: #f8f9fb;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid #e3e6ea;
    max-width: 100%;
    margin-top: 10px;
}

.select-label {
    font-size: 14px;
    font-weight: 600;
    color: #3a3f45;
    margin-bottom: 6px;
    display: block;
}

.select-hint {
    font-size: 13px;
    color: #6b7075;
    margin-top: 8px;
}

.select-multiline {
    appearance: auto !important;
    height: auto !important;
    min-height: 4.8em !important;
    line-height: 1.4 !important;
    padding: 6px 10px !important;
    border: 1px solid #d0d4d9 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    font-size: 15px !important;
    width: 100%;
}



/* ----------------------------- */



#auswahl_links {
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 30px;
}

.reiter {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.reiter_not_selected {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-style: solid;
  border-color: #fff;
  border-width: 2px;
  height: 40px;
}

a.link_in_reiter {
  color: #505050;
  text-decoration: none;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 120%;
}

a.link_in_reiter:hover {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}

/* --- LOGIN --- */
.login-card {
  width: 580px;
  margin: 20px auto;
  padding: 22px;
  padding-top:10px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.kreis {
  border-radius: 50%;
}


/* Kalender-Block */
.kalender_box {
    display: inline-block;
    text-align: center;
    border: 0.5px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    min-width: 64px;
    font-family: inherit;
}

/* Jahr-Bereich (oben) */
.kalender_oben {
    background: #1a3a6b;
    padding: 4px 0;
}

.kalender_oben_schrift {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.05em;
}

/* ?berf?llig-Variante */
.kalender_oben_overdue {
    background: #C32E04;
}

/* Tag-Bereich (mitte) */
.kalender_mitte {
    padding: 6px 12px 2px;
}

.kalender_mitte_schrift {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.1;
}

/* Monat-Bereich (unten) */
.kalender_unten {
    padding: 2px 6px 6px;
}

.kalender_unten_schrift {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Mehrt?gig-Hinweis */
.kalender_mehrtaegig {
    font-size: 10px;
    color: #fff;
    background: #1a5fa8;
    border-radius: 3px;
    padding: 1px 5px;
    display: inline-block;
    margin-top: 2px;
    letter-spacing: 0.03em;
}

/* Ende Kalender */


.schatten {
  -webkit-box-shadow: 5px 10px 50px grey;
  -moz-box-shadow: 5px 10px 50px grey;
  box-shadow: 5px 10px 40px grey;
}

.alt_box {
  background-color: #ffffff;
  border: solid #505050 1px;
  padding: 10px;
  position: absolute;
}

.box {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-right:10px;  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* cursor: pointer; */
}


.box:hover {

    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* KORREKTUR z-index Produktvorschau:
   "transform" erzeugt einen neuen Stapelkontext. Bei <tr class="box"> heisst das:
   sobald die Zeile ueberfahren wird, ist der Tooltip darin eingesperrt und kann
   nicht mehr ueber die NACHFOLGENDEN Zeilen gezeichnet werden - unabhaengig davon,
   wie hoch sein z-index ist (999999 half deshalb nicht).
   Die Zeile selbst muss angehoben werden, damit ihr ganzer Stapelkontext oben liegt. */
tr.box:hover {
    position: relative;
    z-index: 500;
}


a.box:hover {	
  background-color: #f2f2f2;   /* dezentes Hellgrau */
  transform: translateX(3px);  /* leichte Bewegung */
  color: #000;                 /* optional: etwas dunkler */
}


.polaroid {
  background-color: white;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.inhalt {
  font-size: 1.0em;
  color: #505050;
  font-family: kundenschrift, Arial, sans-serif;
}

.rahmen {
  border-color: #6699FF;
}

/* --- BUTTONS (OPTIMIERT) --- */
.button,
a.button,
.button_rot,
a.button_rot,
.button_kundenfarbe,
a.button_kundenfarbe,
.button_grau,
a.button_grau,
.button_normal_backend,
a.button_normal_backend {
  display: inline-block;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(15px, 1.4vw, 19px);

  text-align: center;
  border-radius: 4px;
  
	height: 46px;
	line-height: 46px;	
	padding: 0 18px;  /* nur horizontal */
  
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.button_normal_backend,
a.button_normal_backend {
  line-height: 36px;	
  height: 36px;
  
  
}
.button,
a.button {
  background: linear-gradient(to bottom, var(--button-grau-bg-top), var(--button-grau-bg-bottom));
  color: var(--button-grau-text);
  border: 1px solid var(--button-grau-border);
  margin-left: 5px;
}

.button:hover,
a.button:hover {
  background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
  border-color: #c5c8cc;
  color: var(--button-grau-text);  
  transform: translateY(-1px);
}

.button_rot,
a.button_rot {
  background-color: #ffffff;
  color: #800000;
  border: 1px solid var(--button-rot);
  margin-left: 5px;
}

.button_rot:hover,
a.button_rot:hover {
  background-color: var(--button-rot);
  color: var(--button-rot-text);
  border-color: var(--button-rot);
  transform: translateY(-1px);
}

.button_kundenfarbe,
a.button_kundenfarbe {
  background-color: color-mix(in srgb, var(--kundenfarbe) 15%, white);
  color: color-mix(in srgb, var(--kundenfarbe) 80%, black);
  border: 1px solid var(--kundenfarbe);
  border-radius: 4px;
  padding: 0 18px;
  line-height: 46px;
  height: 46px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  margin-left: 5px;
}

.button_kundenfarbe:hover,
a.button_kundenfarbe:hover {
  background-color: var(--kundenfarbe);
  color: #ffffff;
  border-color: var(--kundenfarbe);
  transform: translateY(-1px);
}

.button_normal_backend,
a.button_normal_backend {
  font-size: clamp(9px, 0.8vw, 12px);
  padding: 6px 10px;
  height: auto;
  border-radius: 4px;
  
  background: linear-gradient(to bottom, var(--button-grau-bg-top), var(--button-grau-bg-bottom));
  color: var(--button-grau-text);
  
  border: 1px solid var(--button-backend-border);
  margin-left: 3px;
}

.button_normal_backend:hover,
a.button_normal_backend:hover {
  background-color: #e5e7eb;
  border-color: #bbb;
  transform: translateY(-1px);
}

.button:focus,
a.button:focus,
.button_rot:focus,
.button_kundenfarbe:focus,
.button_grau:focus,
.button_normal_backend:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 30%, transparent);
}

.button-row {
  display: flex;
  gap: 12px;
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}

a.button_image {
    /* F?r reine Bild-Buttons (Bildgr??e: 34px) */
    clear: both;
    display: inline-block;

    font-family: kundenschrift, Arial, sans-serif;
    text-align: center;

    background-color: #f9fafb;
    border: 1px solid #404040;
    border-radius: 4px; 
    padding-top: 5px;
    margin-left: 5px;
    margin-bottom: 20px;

    height: 46px;
    width: 46px;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


a.button_image:hover {
    background-color: var(--heller_hg_kundenfarbe); /* leichtes Hellgrau */
    border-color: var(--kundenfarbe);        /* etwas weicher */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* dezenter Schatten */
}




/* --- REFERENTEN-CONTAINER --- */
.container_ref {
  display: inline-block;
  float: right;
  position: relative;
  width: 150px;
  height: 200px;
  padding: 5px;
  padding-right: 15px;
  float: right;
}

.container_ref:hover .overlay {
  background: #f9fafb;
  height: 75px;
  opacity: 0.95;
}

.overlay {
  position: absolute;
  bottom: 2px;
  left: 5px;
  right: 0px;
  color: #000000;
  overflow: hidden;
  width: 85%;
  height: 0;
}

.graufilter {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: url(/elements/grayscale.svg#desaturate);
  filter: gray;
  -webkit-filter: grayscale(1);
}

.graufilter:hover {
  filter: grayscale(0%);
  filter: none;
  -webkit-filter: grayscale(0);
}
.icon svg path {
    fill: var(--kundenfarbe);
}
.icon path {
    fill: none !important;
    stroke: var(--kundenfarbe) !important;
}

/* --- INPUT FELDER --- */

input.pflichtfeld {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(13px, 0.9vw, 15px);
  height: 46px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-left: 4px solid var(--pflichtfeld);
  border-radius: 0;
  background-color: #fff;
  transition: all 0.2s ease;
  line-height: 1.4;
}

input.pflichtfeld:hover {
  border-color: #b5b5b5;
}



input.pflichtfeld:focus {
  outline: none;
  border-color: var(--kundenfarbe);
  border-left-color: var(--pflichtfeld);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 30%, transparent);
}

input.eingabefeld {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(13px, 0.9vw, 15px);
  height: 46px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  background-color: #fff;
  transition: all 0.2s ease;
  line-height: 1.4;
  margin-top: 5px;
  margin-bottom: 5px;
}



input.eingabefeld:hover {
  border-color: #b5b5b5;
}

input.eingabefeld:focus {
  outline: none;
  border-color: var(--kundenfarbe);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 30%, transparent);
}

input[type="text"]:not(.eingabefeld):not(.pflichtfeld),
input[type="password"]:not(.eingabefeld):not(.pflichtfeld),
input[type="email"]:not(.eingabefeld):not(.pflichtfeld) {
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: clamp(13px, 0.9vw, 15px);
  height: 46px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  outline: none;
  color: #333;
}

input[type="text"]:not(.eingabefeld):not(.pflichtfeld):hover,
input[type="password"]:not(.eingabefeld):not(.pflichtfeld):hover,
input[type="email"]:not(.eingabefeld):not(.pflichtfeld):hover {
  border-color: #bfc5cc;
}

input[type="text"]:not(.eingabefeld):not(.pflichtfeld):focus,
input[type="password"]:not(.eingabefeld):not(.pflichtfeld):focus,
input[type="email"]:not(.eingabefeld):not(.pflichtfeld):focus {
  border-color: var(--kundenfarbe);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 25%, transparent);
  background-color: #ffffff;
}

input::placeholder {
  color: #404040;
  vertical-align: middle;
  font-size: clamp(12px, 0.8vw, 14px);
}
/* -------- AJAX Suchergebnisse ----*

/* ================================
   AJAX-Suche nach EVENTS ? Ergebniscontainer
   Metallic + Kundenfarbe
   ================================ */

#suche_results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Edler Metallic-Verlauf mit Kundenfarbe */
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--kundenfarbe) 6%, #e9e9e9) 0%,
        #ffffff 45%,
        color-mix(in srgb, var(--kundenfarbe) 10%, #dcdcdc) 100%
    );

    border: 1px solid color-mix(in srgb, var(--kundenfarbe) 25%, #cfcfcf);
    border-radius: 8px;

    padding: 6px 0;
    margin-top: 4px;

    /* Tiefe + Glanzkante */
    box-shadow:
        0 4px 12px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 3px rgba(0,0,0,0.06);

    backdrop-filter: blur(4px);

    display: none;
    z-index: 1000;

    animation: fadeIn 0.15s ease-out;
}


/* ================================
   Ergebniszeilen
   ================================ */

#suche_results .result-item {
    padding: 10px 14px;
    cursor: pointer;

    font-family: kundenschrift, Arial, sans-serif;
    font-size: clamp(0.8rem, 0.35vw + 0.8rem, 1.05rem);
    color: #333;

    transition: background 0.15s ease, color 0.15s ease;
}


/* Hover mit Kundenfarbe */
#suche_results .result-item:hover {
    background: color-mix(in srgb, var(--kundenfarbe) 18%, white);
    color: #000;
}


/* Trennlinien */
#suche_results .result-item + .result-item {
    border-top: 1px solid color-mix(in srgb, var(--kundenfarbe) 12%, #e8e8e8);
}


/* ================================
   Fade-In Animation
   ================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -------------------- */
/* AJAX PLZ Suche */

#plz_results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--kundenfarbe) 6%, #e9e9e9) 0%,
        #ffffff 45%,
        color-mix(in srgb, var(--kundenfarbe) 10%, #dcdcdc) 100%
    );

    border: 1px solid color-mix(in srgb, var(--kundenfarbe) 25%, #cfcfcf);
    border-radius: 8px;

    padding: 6px 0;
    margin-top: 4px;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 3px rgba(0,0,0,0.06);

    backdrop-filter: blur(4px);

    display: none;
    z-index: 1000;

    animation: fadeIn 0.15s ease-out;
}

.plz-item {
    padding: 10px 14px;
    cursor: pointer;
    font-family: kundenschrift, Arial, sans-serif;
    font-size: clamp(0.8rem, 0.35vw + 0.8rem, 1.05rem);
    color: #333;
    transition: background 0.15s ease, color 0.15s ease;
}

.plz-item:hover {
    background: color-mix(in srgb, var(--kundenfarbe) 18%, white);
    color: #000;
}

.plz-item + .plz-item {
    border-top: 1px solid color-mix(in srgb, var(--kundenfarbe) 12%, #e8e8e8);
}

.plz-wrapper { position: relative; }
/* #plz_results { position: absolute; top: 100%; } */


/* -------------------- */

fieldset {
  /* border-color: #f9fafb; */
}

.shop_einkaufsliste {
  position: fixed;
  width: 18%;
  height: 650px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  top: 215px;
  margin-left: 6px;
}

.shop_einkaufsliste_bild {
  position: fixed;
  width: 50px;
  height: 50px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  top: 250px;
  left: 30px;
}

.infobox_export {
  position: fixed;
  width: 600px;
  height: 480px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  bottom: 100px;
  right: 20px;
  z-index: 90;
}

.infobox_oben {
    position: fixed;
    top: 175px;
    right: 5px;
    z-index: 30;
}

.infobox_unten {
    position: fixed;
    bottom: 20px;
    right: 5px;
    z-index: 30;
}


/* --- TOOLTIPS --- */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 520px;
  background-color: #fff;
  text-align: left;
  padding: 15px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #505050;
  position: absolute;
  top: 40px;
  left: -20px;
  z-index: 1;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: -5px;
  right: 92%;
  margin-top: -7px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent #ff0000 transparent transparent;
  rotate: 90deg;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  float: left;
}

/* --- RADIOBUTTONS und CHECKBOXEN --- */
input[type="radio"] {
  width: 1.25em;
  height: 1.25em;
  border-radius: 10%;
  box-shadow: inset 1em 1em var(--form-control-color);
}

.checkboxgruppe label {
  position: relative;
  display: inline-block;
  width: 2.5em;    /* 5em / 2 */
  height: 1.75em;  /* 3.5em / 2 */
}
.checkboxgruppe .slider {
  position: absolute;
  cursor: pointer;
  
  
  
  top: 0.75em;     /* 1.5em / 2 */
  left: 0em;
  width: 2em;      /* 4em / 2 */
  height: 1em;     /* 2em / 2 */
  border-radius: 0.55em; /* 1.1em / 2 */
  
  background-color: #c32e04;
  transition: all 0.3s ease-in-out;
  
}
.checkboxgruppe .slider:before {
	position: absolute;
  content: "";
  height: 0.8em;   /* 1.6em / 2 */
  width: 0.8em;    /* 1.6em / 2 */
  left: 0.1em;     /* 0.2em / 2 */
  bottom: 0.1em;   /* 0.2em / 2 */
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.checkboxgruppe input {
  display: none;
}
.checkboxgruppe input:checked + .slider {
  background-color: #4A8000;
}
.checkboxgruppe input:checked + .slider:before {
  transform: translateX(0.95em); /* 1.9em / 2 */
}



input.pin {
  font-family: kundenschrift, Arial, sans-serif;
  height: 80px;
  font-size: clamp(24px, 3vw, 42px);
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  text-align: center;
  width: 300px;
  padding: 10px;
  color: #505050;
  font-weight: bold;
  
}
input.pin::placeholder {
  font-size: 20px; /* oder jede andere Gr??e */
  font-weight: normal; /* optional */
  color: #909090; /* optional */
}



/* --- PRODUKTBILD ZOOM --- */
.produktbild {
  position: relative;
  display: inline-block;
  
}
.produktbild .zoom_produktbild {
  font-family: kundenschrift, Arial, sans-serif;
  visibility: hidden;
  opacity: 0;
  width: 350px;
  max-width: 80vw;
  background-color: #FFFFFF;
  text-align: left;
  padding: 16px;
  border: 0.5px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 999999;
  top: -70px;
  left: 25px;
  transition: opacity 0.15s ease, visibility 0.15s;
}
.produktbild:hover .zoom_produktbild {
  visibility: visible;
  opacity: 1;
}
.produktbild .zoom_produktbild::after {
  content: " ";
  position: absolute;
  top: 70px;
  right: 100%;
  margin-top: -7px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent #FFFFFF transparent transparent;
  filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.08));
}

.produktbild:hover .zoom_produktbild {
  visibility: visible;
}


/* ---------------- */
.kanban_vertikale_spalte {
  background: #505050;
  color: #FFF;
  padding-top: 10px;
  letter-spacing: 1px;
  margin-right: 10px;
  text-align: left;
  vertical-align: top;
  font-size: clamp(11px, 0.8vw, 14px);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-lr;
}

/* --- FILE UPLOAD --- */
.drop-container {
  border: 2px dashed #aaa;
  background: #FFF;
  border-radius: 10px;
  height: 300px;
  padding-top: 20px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.drop-container.dragover {
  border-color: #000;
  background: #f9fafb;
}

.drop-container:hover,
.drop-container.hover {
  border-color: #000;
  background: #f9fafb;
}

#ref-profil_links {
  float: left;
  display: inline-block;
  width: 58%;
  padding-right: 10px;
}

#ref-profil_rechts {
  display: block;
  float: right;
  width: 40%;
  min-width: 350px;
  background: #FFF;
  color: #6b7280;
}

/* User_gruppe */
.user_gruppe_kd {	
	background:var(--user_gruppe_kd);
	color:var(--user_gruppe_txt_kd);
}
.user_gruppe_helfer {	
	background:var(--user_gruppe_archiv);
	color:var(--user_gruppe_txt_archiv);
}

.user_gruppe_referent {	
	background:var(--user_gruppe_referent);
	color:var(--user_gruppe_txt_referent);
}
.user_gruppe_sponsor {	
	background:var(--user_gruppe_sponsor);
	color:var(--user_gruppe_txt_sponsor);
}
				
.user_gruppe_aussteller {	
	background:var(--user_gruppe_aussteller);
	color:var(--user_gruppe_txt_aussteller);
}
.user_gruppe_verwaltung {	
	background:var(--user_gruppe_verwaltung);
	color:var(--user_gruppe_txt_verwaltung);
}		
.user_gruppe_admin {	
	background:var(--user_gruppe_admin);
	color:var(--user_gruppe_txt_admin);
}				
.user_gruppe_archiv {
	background:var(--user_gruppe_archiv);
	color:var(--user_gruppe_txt_archiv);
}								
.user_gruppe_span{
	display:inline-block;
	padding:3px;
	padding-left:6px;
	padding-right:6px;
	border-radius:4px;
	min-width:75px;
	white-space:nowrap;
	text-align:center;
	position:relative;top:-5px;
}


/* =================================================================
   RESPONSIVE - MOBILE (max 550px)
================================================================= */

@media all and (max-width: 550px) {

  .logo_db_titel {
    display: none;
  }

 #seiteninhalt{margin-top:0;padding-top:0;}



    #veranstaltungsdetails,
    #event_referierende {
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }



}
/* --- Editor: Responsive Verhalten --- */
@media (max-width: 700px) {
  .layout-table td {
    display: block;
    width: 100% !important;
  }
}

/* =================================================================
   RESPONSIVE - TABLET (850px)
================================================================= */

@media all and (max-width: 850px) {

  
#seiteninhalt{margin-top:20px;padding-right:0;}

 #ref-profil_links {
    width: 100%;
  }

  #ref-profil_rechts {
    width: 100%;
  }
      #veranstaltungsdetails,
    #event_referierende {
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }
	
	#speisebestellung_kd_eingabe{
		margin-top:25px;
		width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
	}
	#speisebestellung_kd_plan{
		width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
	}
	#speisebestellung_kd_btn_save{
		position:relative;
		top:0;
	}
  
}

/* =================================================================
   RESPONSIVE - DESKTOP (min 1320px)
================================================================= */

@media all and (min-width: 1320px) {

  #desktop_version {
    display: flex;
    position: fixed;
    left: 0;
    top: 175px;
    bottom: 20px;          /* neu ? ersetzt height: 70% */
    width: 340px;
    text-align: left;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #e0e0e0;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 20px;
    visibility: visible;
    overflow-x: hidden;
    overflow-y: auto;
}
  
/* =====================================================
   Desktopmenü  Schnellzugriff-Buttons
   Standard: neutrales Grau (alle Gruppen gleich)
   Aktuelle Gruppe: Kundenfarbe (--kundenfarbe / --heller_hg_kundenfarbe)
   Hover: unver?ndert (transform + shadow)
   ===================================================== */

.dm-linkgruppe-btn {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom:3px;
}

.dm-linkgruppe-btn:hover,
.dm-linkgruppe-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* --- Standard (inaktive Gruppe): Grau --- */
.dm-linkgruppe-icon {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dm-inaktiv-dunkel);
  color: #ffffff;
}

.dm-linkgruppe-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dm-linkgruppe-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: var(--dm-inaktiv-hell);
  color: var(--dm-inaktiv-dunkel);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* --- Aktuell gew?hlte Gruppe: Kundenfarbe ---
   Modifier-Klasse "aktuell" auf das <a class="dm-linkgruppe-btn"> setzen,
   z. B. wenn $openmenue der jeweiligen Gruppe entspricht. */
.dm-linkgruppe-btn.aktuell .dm-linkgruppe-icon {
  background: var(--kundenfarbe);
}

.dm-linkgruppe-btn.aktuell .dm-linkgruppe-label {
  background: var(--dm-inaktiv-dunkel);
  color: var(--dm-inaktiv-hell);
  
}

#desktop_version.dm-ausgeblendet {
    display: none;
}

body.dm-aus #seiteninhalt {
    width: 100%;
}

#dm_einblenden {
    display: none;
    position: fixed;
    left: 0;
    top: 175px;
    padding: 14px 6px 14px 4px;
    background: var(--dm-inaktiv-hell);
    color: var(--menue-schriftfarbe);
    border: 1px solid #e0e0e0;
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    z-index: 100;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

body.dm-aus #dm_einblenden {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dm-einblenden-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    letter-spacing: 0.25em;      /* passt zu deinen Men?-?berschriften */
    font-size: 0.85em;
    text-transform: uppercase;
}

.dm-einblenden-pfeil {
    font-size: 1.1em;
    line-height: 1;
}

#dm_einblenden:hover,
#dm_einblenden:focus-visible {
    background: var(--kundenfarbe);
    color: #fff;
    padding-left: 8px;           /* schiebt sich leicht heraus ? klares "hier klicken"-Signal */
}
  

	

  #seiteninhalt {
	
	clear: both;
    position: relative;
    padding-top: 30px;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: auto;
    width: min(75%, calc(100% - 30px));
    padding-left: 30px;
	
  }

  #seiteninhalt_abgedockt {
    clear: both;
    right: 5px;
    padding-top: 15px;
    padding-left: 50px;
    border-top-left-radius: 20px;
    width: 100%;

  }

  
}

/* =================================================================
   RESPONSIVE - LARGE DESKTOP (min 1921px)
================================================================= */

@media all and (min-width: 1921px) {
  .shop_einkaufsliste {
    display: block;
  }

  .shop_einkaufsliste_bild {
    display: block;
  }

  #seiteninhalt {
    clear: both;
    position: relative;
    padding-top: 30px;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: auto;
    width: 80%;
    min-width: 980px;
    padding-left: 40px;
    /* padding-bottom: 200px; */
  }

  #seiteninhalt_abgedockt {
    clear: both;
    position: relative;
    padding-top: 30px;
    margin-bottom: auto;
    margin-right: 10px;
    margin-left: auto;
    width: 100%;
    min-width: 980px;
    padding-left: 40px;
    padding-bottom: 200px;
  }
 #desktop_version{width:17%;}

}



/* =================================================================
   RESPONSIVE - TABLET WIDTH (max 1319px)
================================================================= */

@media all and (max-width: 1319px) {
  .shop_einkaufsliste {
    display: none;
  }

  .shop_einkaufsliste_bild {
    display: none;
  }

  h1 {
    margin-top: 10px;
  }
	/* 
	#seiteninhalt{margin-top:0;padding-top:0;}
	*/
  #seiteninhalt_abgedockt {
    position: relative;
    width: 100%;
    background: #FFF;
    padding: 30px;
  }

}

/* =================================================================
   PRINT STYLES
================================================================= */

@page {
  size: A4;
  margin: 2mm;
}

@media print {
  header {
    /* display: none; */
  }


  .button {
    display: none;
  }

  #banner_anzeigen {
    display: none;
  }

  #nichtdrucken {
    display: none;
  }

  .pagebreak {
    clear: both;
    page-break-after: always;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .a4-page {
    width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}