/* =================================================================
   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: 150%;
  /* height: auto !important;
  min-height: auto !important;
  */
}

P {
  line-height: 150%;
}

VIDEO {
  max-width: 100%;
}

.hauptfeld{
	font-weight:600;
	/* font-size:1.1em; */
	font-style:italic;
}

#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;
}
/* 07.10.2026 Barrierefreiheit: Kopfzellen sind jetzt <th scope="col"> (Screenreader lesen die Spaltenueberschrift zu jeder Zelle).
   th ist im Browser standardmaessig fett und zentriert; hier wie die bisherigen td ausrichten. */
.table-header-modern th { font-weight: inherit; text-align: left; vertical-align: inherit; }
.table-header-modern th[align="right"] { text-align: right; }
.table-header-modern th[align="center"] { text-align: center; }
/* dito fuer die alten Kopfzeilen mit background="images/farbverlauf_tabelle.jpg" (gebuchte Kurse, Historie) */
th[background] { font-weight: normal; text-align: left; }
th[background][align="right"] { text-align: right; }

/*  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: 1px;
  margin-left: auto;
  margin-right: 2px;
  background: #fff;  
  
  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, .datenzeile {
  background-color: #ffffff;
}

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

#datenzeile:hover, .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;
}

/* 07.10.2026: Wrapper der Bausteine Aussteller/Sponsoren/Referierende (nur der Baustein, nicht die ganze Seite).
   block statt inline-block, damit Grid und Floats die volle Breite bekommen. */
.auswahl_links {
  display: 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 (595959 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 {
  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 --- */

/* select.pflichtfeld seit 30.09.2026: Pflicht-Auswahllisten sehen aus wie Pflicht-Eingabefelder */
input.pflichtfeld,
select.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,
select.pflichtfeld:hover {
  border-color: #b5b5b5;
  border-left-color: var(--pflichtfeld);
}



input.pflichtfeld:focus,
select.pflichtfeld:focus {
  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 {
  border-color: var(--kundenfarbe);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 30%, transparent);
}

/* select.eingabefeld / textarea.eingabefeld seit 02.10.2026: bisher unstyled (nur input.eingabefeld
   war erfasst), dadurch wirkten Dropdowns und Mehrzeilenfelder neben den modernisierten
   Eingabefeldern wie native Browser-Defaults. Angleichung an input.eingabefeld. */
select.eingabefeld,
textarea.eingabefeld {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: clamp(13px, 0.9vw, 15px);
  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;
}

select.eingabefeld {
  height: 46px;
}

select.eingabefeld:hover,
textarea.eingabefeld:hover {
  border-color: #b5b5b5;
}

select.eingabefeld:focus,
textarea.eingabefeld:focus {
  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;
  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
   Seit 30.09.2026 zugleich Standard fuer alle AJAX-Vorschlagslisten:
   Container class="ajax-liste", Zeilen class="ajax-treffer"
   (Anzeigen per style.display = "block", die Liste startet ausgeblendet)
   ================================ */

#suche_results,
.ajax-liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Leicht grau hinterlegt (30.09.2026: wie bisher per Inline-Style in der Eventsuche;
       der fruehere Metallic-Verlauf war dort nie sichtbar) */
    background: #efefef;

    border: 1px solid #ccc;
    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,
.ajax-liste .ajax-treffer {
    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 (ajax-treffer--aktiv = per Pfeiltaste markiert) */
#suche_results .result-item:hover,
.ajax-liste .ajax-treffer:hover,
.ajax-liste .ajax-treffer--aktiv {
    background: color-mix(in srgb, var(--kundenfarbe) 18%, white);
    color: #000;
}


/* Trennlinien */
#suche_results .result-item + .result-item,
.ajax-liste .ajax-treffer + .ajax-treffer {
    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: Aussehen kommt seit 30.09.2026 aus .ajax-liste / .ajax-treffer (siehe AJAX-Suche nach EVENTS) */

.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 {
  /* 07.10.2026 Barrierefreiheit (2.1.1): vorher display:none, damit war der Schalter nicht per Tastatur erreichbar.
     Jetzt nur visuell versteckt, bleibt in der Tab-Reihenfolge; Fokusrahmen auf dem Schieber. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.checkboxgruppe input:focus-visible + .slider {
  outline: 2px solid var(--kundenfarbe, #505050);
  outline-offset: 3px;
}
.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: #666; /* 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: 595959;
  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:10px;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;
    flex-direction: column; /* 06.10.2026: Menueliste, Schnellzugriff-Ueberschrift und Buttons sind jetzt drei Kinder, untereinander statt nebeneinander */
    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: 2px;
    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;
    margin-top: 2px;
    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;
  }
}

/* =================================================================
   Kompakte Aufzaehlungen im Backend (z.B. Mailadressen-Listen in der
   Warenkorbadministration). Setzt die grosszuegigen Abstaende der
   globalen li-Regel aus userspezifisch_style.css zurueck.
================================================================= */
ul.mailliste_backend {
  margin: 4px 0 0 0;
  padding-left: 18px;
}

ul.mailliste_backend li {
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 0;
  line-height: var(--line-height-normal, var(--line-height-base));
}

/* Zwei Spalten nebeneinander in Backend-Infoboxen (z.B. Abrechnungsparameter
   der Warenkorbadministration), auf schmalen Bildschirmen untereinander. */
.abrechnung_spalten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}

.abrechnung_spalten > div {
  flex: 1 1 280px;
  min-width: 0;
}

/* Ueberschrift innerhalb solcher Boxen: linksbuendig, ohne Browser-Abstand oben */
h3.box_titel_backend {
  margin: 0 0 6px 0;
  text-align: left;
}

/* =================================================================
   Warenkorbadministration (shop_warenkorb_administrieren.php)
   Praefix wka-*, nutzt vorhandene Buttons und --kundenfarbe
================================================================= */
.wka-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 20px;
  margin-bottom: 18px;
}
.wka-kopf__titel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wka-kopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wka-kopf__aktionen .button,
.wka-kopf__aktionen .button_kundenfarbe { margin-left: 0; }

.wka-box {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.wka-box__mailtext { margin-top: 14px; }
.wka-box__fuss { text-align: right; margin-top: 12px; }

.wka-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.wka-filter select,
.wka-filter input[type="search"] {
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
}
.wka-filter input[type="search"] { flex: 1 1 220px; max-width: 380px; }
a.wka-filter__reset {
  font-size: var(--font-size-small);
  padding: 0;
  font-weight: 400;
}

/* kompakte Variante der vorhandenen Buttons */
.button.wka-btn, a.button.wka-btn,
.button_rot.wka-btn, a.button_rot.wka-btn {
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  margin: 0;
  font-size: var(--font-size-small);
}

.wka-kategorie { margin-bottom: 28px; }
h3.wka-kategorie__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px 0;
  padding: 8px 12px;
  background: #f3f4f6;
  border-left: 4px solid var(--kundenfarbe);
  border-radius: 4px;
}
.wka-kategorie__anzahl {
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 1px 8px;
}

.wka-produkt {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 110px 130px;
  gap: 6px 18px;
  align-items: start;
  padding: 14px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.wka-produkt:hover { background: #fafafa; }

.wka-produkt__bild {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.wka-produkt__bild a { padding: 0; }
.wka-produkt__bild div.image {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
a.wka-produkt__ohnebild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  border: 1px dashed #c5c8cc;
  border-radius: 6px;
  color: #666;
  text-decoration: none;
  font-size: var(--font-size-small);
  font-weight: 400;
}
a.wka-produkt__ohnebild:hover { border-color: var(--kundenfarbe); color: var(--kundenfarbe); }

.wka-produkt__text { font-family: kundenschrift, Arial, sans-serif; }
.wka-produkt__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-body);
  color: #222;
}
.wka-produkt__meta { font-size: var(--font-size-xsmall); color: #6b7280; margin-top: 2px; }
.wka-produkt__beschreibung { font-size: var(--font-size-small); color: #374151; margin-top: 4px; }
.wka-produkt__intern { font-size: var(--font-size-small); color: #800000; margin-top: 4px; }

a.wka-link-klein {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  font-size: var(--font-size-xsmall);
  font-weight: 400;
  color: #555;
  white-space: nowrap;
}

.wka-produkt__preis {
  text-align: right;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  white-space: nowrap;
}
.wka-produkt__preis span {
  display: block;
  font-size: var(--font-size-xsmall);
  color: #6b7280;
}

.wka-produkt__aktionen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wka-produkt--inaktiv { background: #f7f7f7; }
.wka-produkt--inaktiv .wka-produkt__bild,
.wka-produkt--inaktiv .wka-produkt__meta,
.wka-produkt--inaktiv .wka-produkt__beschreibung,
.wka-produkt--inaktiv .wka-produkt__preis { opacity: .55; }

.wka-badge {
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  line-height: 1.5;
  border-radius: 999px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--kundenfarbe) 10%, #fff);
  color: color-mix(in srgb, var(--kundenfarbe) 75%, #000);
  border: 1px solid color-mix(in srgb, var(--kundenfarbe) 30%, #fff);
}
.wka-badge--inaktiv { background: #eee; color: #555; border-color: #ccc; }

.wka-leer { padding: 20px 0; color: #666; }

@media (max-width: 700px) {
  .wka-produkt { grid-template-columns: 64px minmax(0, 1fr); }
  .wka-produkt__bild div.image,
  a.wka-produkt__ohnebild { width: 64px; height: 64px; }
  .wka-produkt__preis { grid-column: 2; text-align: left; }
  .wka-produkt__aktionen { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* --- Warenkorbadministration: Produktformular (Neu + Bearbeiten) --- */
.wka-form { max-width: 860px; }
.wka-form__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.wka-feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-family: kundenschrift, Arial, sans-serif;
}
.wka-feld--voll { grid-column: 1 / -1; }
.wka-feld--paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wka-feld__label {
  font-weight: 600;
  font-size: var(--font-size-small);
  color: #333;
}
.wka-feld__pflicht { color: var(--pflichtfeld); }
.wka-feld__hinweis {
  font-size: var(--font-size-xsmall);
  color: #6b7280;
}
.wka-feld input[type="text"],
.wka-feld select,
.wka-feld textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 40px;
}
.wka-feld textarea { min-height: 84px; resize: vertical; }
.wka-feld__euro { position: relative; display: block; }
/* Selektor so spezifisch wie die globale input-Regel in style.css, damit das Euro-Zeichen Platz hat */
.wka-feld__euro input.wka-feld__preis[type="text"] { padding-right: 30px; text-align: right; }
.wka-feld__euro::after {
  content: "\20AC";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}
.wka-form__fuss {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.wka-form__fuss .button,
.wka-form__fuss .button_kundenfarbe { margin-left: 0; }

@media (max-width: 700px) {
  .wka-form__raster { grid-template-columns: 1fr; }
}

/* --- Warenkorbadministration: Abschnitte in Formularen (z.B. Abrechnungsparameter) --- */
.wka-form__abschnitt { margin-bottom: 26px; }
.wka-form__abschnitt > p.wka-feld__hinweis { margin: 0 0 10px 0; }
.wka-form__gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
}
.wka-feld input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 40px;
}

/* --- Warenkorbadministration: Produktbild hochladen --- */
.wka-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: flex-start;
}
.wka-upload__vorschau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wka-upload__vorschau img,
.wka-upload__leer {
  width: 160px;
  height: 160px;
  box-sizing: border-box;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  object-fit: cover; /* zeigt den mittigen Zuschnitt wie beim Speichern */
}
.wka-upload__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  color: #666;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-small);
}
.wka-upload__vorschau img[hidden],
.wka-upload__leer[hidden] { display: none; }
.wka-upload__auswahl { flex: 1 1 300px; min-width: 0; }
.wka-upload__feld input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 1px dashed #c5c8cc;
  border-radius: 8px;
  background: #fafafa;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-small);
  cursor: pointer;
}
.wka-upload__feld input[type="file"]:hover { border-color: var(--kundenfarbe); }
.wka-upload__feld input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 1px solid var(--button-grau-border);
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--button-grau-bg-top), var(--button-grau-bg-bottom));
  color: var(--button-grau-text);
  font: inherit;
  cursor: pointer;
}
ul.wka-upload__regeln {
  margin: 12px 0 0 0;
  padding-left: 18px;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-small);
  color: #555;
}
ul.wka-upload__regeln li {
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 3px;
  font-size: inherit;
}

/* ====================================================================
   MatBib (matbib.php): Reiter, Abschnittskoepfe und Tabellenkoepfe
   Die Statusfarben kommen weiter aus --matbib_* der Kundendatei, werden
   aber nur als Akzent genutzt. Text bleibt dunkel auf hellem Grund, so
   sind auch sehr helle Kundenfarben (z.B. Praesenzbestand = weiss) lesbar.
================================================================= */
.mb-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 26px 0 0 0;
  padding-left: 4px;
  border-bottom: 1px solid #d1d5db;
}
.mb-reiter__tab,
a.mb-reiter__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 130px;
  padding: 9px 16px;
  margin-bottom: -1px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-bottom-color: #d1d5db;
  border-radius: 8px 8px 0 0;
  color: #555;
  font-family: kundenschrift, Arial, sans-serif;
  font-size: var(--font-size-body);
  font-weight: 400;
  text-decoration: none;
}
a.mb-reiter__tab:hover { background: #e9ebee; color: #222; }
.mb-reiter__tab--aktiv {
  background: #fff;
  color: #222;
  font-weight: 600;
  border-color: #d1d5db;
  border-bottom-color: #fff;
  box-shadow: inset 0 3px 0 var(--mb-farbe);
}
.mb-punkt {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mb-farbe);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); /* feiner Rand, damit auch ein weisser Punkt sichtbar ist */
}
h3.mb-abschnitt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 6px 0;
  padding: 8px 12px;
  background: #f3f4f6;
  border-left: 4px solid var(--mb-farbe);
  border-radius: 4px;
}
/* Sprunglink rechts in der Abschnittsueberschrift (nur bei gestapelter Ansicht, matbib_gruppiert_anzeigen = N) */
h3.mb-abschnitt .mb-abschnitt__sprung {
  margin-left: auto;
  font-size: var(--font-size-small);
  font-weight: 400;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
}
h3.mb-abschnitt .mb-abschnitt__sprung:hover,
h3.mb-abschnitt .mb-abschnitt__sprung:focus {
  background: transparent;
  color: #222;
  text-decoration: underline;
}
tr.mb-kopf td {
  background: #f9fafb;
  border-top: 3px solid var(--mb-farbe);
  border-bottom: 1px solid #e5e7eb;
  padding-top: 6px;
  padding-bottom: 6px;
}
tr.mb-kopf .fliesstext {
  color: #374151;
  font-weight: 600;
  font-size: var(--font-size-small);
}

/* =================================================================
   Benutzerverwaltung (kundendaten.php), Liste
   Praefix bv-*, Rollenfarben weiter ueber user_gruppe_*
================================================================= */
.bv-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 14px;
}
.bv-kopf h1 { margin: 0; }
.bv-kopf__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-kopf__aktionen .button,
.bv-kopf__aktionen .button_kundenfarbe { margin-left: 0; }

.bv-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 22px;
  background: #f5f5f5;
  border-radius: 8px;
}
.bv-filter select,
.bv-filter input.bv-filter__suche {
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
}
.bv-filter input.bv-filter__suche { flex: 1 1 260px; max-width: 420px; }
a.bv-filter__reset { padding: 0; font-size: var(--font-size-small); font-weight: 400; }

.button.bv-btn, a.button.bv-btn, input.button.bv-btn {
  height: 36px;
  line-height: 34px;
  padding: 0 14px;
  margin: 0;
  font-size: var(--font-size-small);
}

.bv-gruppe { margin-bottom: 24px; }
h3.bv-gruppe__titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px 0;
  padding: 7px 12px;
  background: #f3f4f6;
  border-left: 4px solid var(--kundenfarbe);
  border-radius: 4px;
}
.bv-gruppe__anzahl {
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 1px 8px;
}
a.bv-gruppe__export {
  margin-left: auto;
  padding: 0;
  font-size: var(--font-size-xsmall);
  font-weight: 400;
  color: #555;
}

.bv-person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 4px 16px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-family: kundenschrift, Arial, sans-serif;
}
.bv-person:hover { background: #fafafa; }
.bv-person--gesperrt { background: #fbf3f3; }
.bv-person--gesperrt .bv-person__bild div.image,
.bv-person--gesperrt .bv-person__initialen,
.bv-person--gesperrt .bv-person__meta { opacity: .6; }

a.bv-person__bild { padding: 0; text-decoration: none; }
.bv-person__bild div.image {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.bv-person__bild div.image img { height: 44px; object-fit: cover; }
.bv-person__initialen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  font-size: var(--font-size-small);
  font-weight: 600;
}
a.bv-person__bild:hover .bv-person__initialen { background: color-mix(in srgb, var(--kundenfarbe) 15%, #fff); color: var(--kundenfarbe); }

.bv-person__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: var(--font-size-body);
  color: #222;
}
.bv-person__name a { padding: 0; color: inherit; text-decoration: none; font-weight: 400; font-size: inherit; }
/* globalen a:hover (Flaeche in Kundenfarbe) hier neutralisieren, sonst grauer Text auf farbigem Grund */
.bv-person__name a:hover { text-decoration: underline; background: transparent; color: inherit; }
.bv-person__titel, .bv-person__vorsatz { color: #6b7280; font-size: var(--font-size-small); }
.bv-person__meta {
  margin-top: 2px;
  font-size: var(--font-size-xsmall);
  color: #6b7280;
  overflow-wrap: anywhere;
}
.bv-person__meta a { padding: 0; color: inherit; font-size: inherit; font-weight: 400; }
.bv-person__meta a:hover { background: transparent; color: var(--kundenfarbe); text-decoration: underline; }

.bv-badge {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--font-size-xsmall);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.bv-badge.user_gruppe_kd { box-shadow: inset 0 0 0 1px #d1d5db; }
.bv-badge--presse { background: #dea31f; color: #fff; }
.bv-badge--vip { background: #de1f5e; color: #fff; }
.bv-badge--gesperrt { background: #fff; color: #9b1c1c; box-shadow: inset 0 0 0 1px #e8b4b4; }

.bv-person__aktionen { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
a.bv-aktion {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #374151;
  font-size: var(--font-size-xsmall);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
a.bv-aktion:hover { border-color: #9ca3af; background: #f9fafb; }
a.bv-aktion--offen { border-color: #e8b4b4; color: #9b1c1c; background: #fdf2f2; }

a.button_kundenfarbe.bv-person__details {
  height: 34px;
  line-height: 32px;
  padding: 0 14px;
  margin: 0;
  font-size: var(--font-size-small);
}

.bv-blaettern {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}
.bv-blaettern__info { margin-right: auto; font-size: var(--font-size-small); color: #6b7280; font-family: kundenschrift, Arial, sans-serif; }

@media (max-width: 760px) {
  .bv-person { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .bv-person__details { grid-row: 1; grid-column: 3; }
  .bv-person__aktionen { grid-row: 2; grid-column: 2 / -1; justify-content: flex-start; }
}

/* --- Benutzerverwaltung: Detailansicht --- */
.bv-kopf__titel { display: flex; flex-direction: column; gap: 2px; }
.bv-karte {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 18px;
  font-family: kundenschrift, Arial, sans-serif;
}
.bv-karte h3 { margin: 0 0 12px 0; }
.bv-person-karte {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
}
.bv-person-karte .bv-person__aktionen { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.bv-person-karte--gesperrt { background: #fbf3f3; border-color: #e8b4b4; }
h2.bv-person-karte__name { margin: 0 0 6px 0; font-weight: 400; }
.bv-person__bild--gross div.image,
.bv-person__bild--gross .bv-person__initialen { width: 76px; height: 76px; }
.bv-person__bild--gross div.image img { height: 76px; }
.bv-person__bild--gross .bv-person__initialen { font-size: var(--font-size-h3); }
a.bv-aktion--gefahr { border-color: #e8b4b4; color: #9b1c1c; }
a.bv-aktion--gefahr:hover { background: #fdf2f2; border-color: #c0392b; }

.bv-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 18px;
}
.bv-dl {
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: 7px 16px;
  margin: 0;
  font-size: var(--font-size-small);
}
.bv-dl dt { color: #6b7280; }
.bv-dl dd { margin: 0; color: #222; overflow-wrap: anywhere; }
.bv-dl dd a { padding: 0; font-size: inherit; font-weight: 400; }
.bv-social { justify-content: flex-start; margin-top: 12px; }

details.bv-aufklapp { border-top: 1px solid #f0f0f0; padding: 6px 0; }
details.bv-aufklapp summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: var(--font-size-small); font-weight: 600; }
ul.bv-liste { margin: 6px 0 0 0; padding-left: 18px; font-size: var(--font-size-small); }
ul.bv-liste li { margin-left: 0; padding-left: 0; padding-bottom: 3px; font-size: inherit; }
ul.bv-liste li a { padding: 0; font-size: inherit; font-weight: 400; }

table.bv-tabelle { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
table.bv-tabelle th { text-align: left; font-weight: 600; color: #374151; background: #f9fafb; padding: 7px 8px; border-bottom: 1px solid #e5e7eb; }
table.bv-tabelle td { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
table.bv-tabelle .bv-rechts { text-align: right; white-space: nowrap; }

.bv-profil {
  display: grid;
  grid-template-columns: 140px minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.bv-profil__bild { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bv-profil__bild div.image { width: 130px; border-radius: 8px; }
.bv-profil__text { background: #f9fafb; border-radius: 6px; padding: 12px 14px; font-size: var(--font-size-small); line-height: var(--line-height-normal, 1.5); }
.bv-profil__jahr { font-size: var(--font-size-small); }
.bv-profil__bet { margin: 8px 0 0 0; }
.bv-profil__fuss { text-align: right; margin-top: 12px; }

@media (max-width: 760px) {
  .bv-profil { grid-template-columns: 1fr; }
}

/* Benutzerverwaltung: grosse Bildvorschau beim Mouseover (nutzt .produktbild/.zoom_produktbild) */
a.bv-person__bild.produktbild { display: block; }
a.bv-person__bild:hover { background: none; }
.produktbild .zoom_produktbild.bv-zoom { width: 240px; top: -40px; left: 56px; }
.zoom_produktbild.bv-zoom > strong { display: block; margin-bottom: 2px; font-size: var(--font-size-small); color: #222; }
/* Username-Zeile unter dem Namen (18.10.2026): eine Zeile, kleiner Abstand zum Namen, Luft zum Bild */
.zoom_produktbild.bv-zoom .bv-zoom__user { display: block; margin-bottom: 8px; font-size: var(--font-size-small); color: #666; }
.zoom_produktbild.bv-zoom .bv-zoom__user b { font-weight: 600; color: #222; }
.zoom_produktbild.bv-zoom img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; }
.produktbild .zoom_produktbild.bv-zoom::after { top: 52px; }

/* =================================================================
   INFOTEXT AUF DER EINTRITTSKARTE (Seitengruppe INFO_TICKET)
   Gilt im Druck (einlassmgn_druck_eintrittskarte.php) UND im Editor
   (editor.php setzt die Klasse auf die Bearbeitungsflaeche), damit
   man beim Schreiben sieht, was spaeter gedruckt wird.
   Feste Groessen in px statt clamp()/vw: vw bezieht sich beim Drucken
   auf die Papierbreite und liefert dort unvorhersehbare Werte.
   Die !important-Regeln bei .layout-theme ueberschreiben die Inline-
   Styles bereits gespeicherter Boxen (2px Rahmen, 15px Innenabstand).
================================================================= */
.ticket-infotext,
.ed .note-editor .note-editing-area .note-editable.ticket-infotext {
  font-family: kundenschrift, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  color: #1f2937;
}
.ed .note-editor .note-editing-area .note-editable.ticket-infotext {
  max-width: 88mm;              /* Breite des Feldes auf dem Ticket */
}
.ticket-infotext p, .ticket-infotext li, .ticket-infotext td,
.ticket-infotext th, .ticket-infotext div, .ticket-infotext span,
.ticket-infotext blockquote, .ticket-infotext pre {
  font-size: inherit;
  line-height: inherit;
}
.ticket-infotext p { margin: 0 0 0.6em 0; }
.ticket-infotext h1, .ticket-infotext h2, .ticket-infotext h3,
.ticket-infotext h4, .ticket-infotext h5, .ticket-infotext h6,
.ticket-infotext .ticket-zwischentitel {
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.25;
  margin: 0.8em 0 0.3em 0;
  color: inherit;
}
.ticket-zwischentitel { font-weight: bold; }
.ticket-infotext img { max-width: 100%; height: auto; }
.ticket-infotext .layout-theme {
  padding: 2mm 3mm !important;
  margin: 3mm 0 !important;
  border-width: 1px !important;
  border-radius: 4px !important;
}
.ticket-infotext .layout-theme > :last-child { margin-bottom: 0; }


/* =================================================================
   KURSVERWALTUNG: EVENTLISTE (kursverwaltung_aktuell.php, 23.09.2026)
   Zugeklappte Zeile (summary.kv-zeile) + aufgeklappte Eventanzeige
   (.kv-detail). Farben fuer Sichtbarkeit/Hinweise kommen weiterhin
   aus den globalen Parametern (inline), der Rest steht hier.
================================================================= */
.kv-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.kv-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.kv-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kv-anzahl { font-size: var(--font-size-small, 14px); color: #5d5d58; }
.kv-kopf-knoepfe { display: inline-flex; gap: 6px; }
.kv-spalten,
.kv-zeile { display: grid; grid-template-columns: 6px 64px minmax(0, 1fr) 150px 170px 100px 190px 26px; gap: 0 14px; align-items: center; padding-right: 12px; }
.kv-spalten { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b66; margin-top: 4px; }
.kv-ev { background: #fff; border: 1px solid #dcdcd6; border-radius: 10px; overflow: hidden; }
.kv-ev[open] { border: 2px solid #505050; }
.kv-zeile { min-height: 60px; cursor: pointer; list-style: none; }
.kv-zeile::-webkit-details-marker { display: none; }
.kv-zeile::marker { content: ""; }
.kv-zeile:hover { background: #fafaf8; }
.kv-zeile:focus-visible { outline: 3px solid var(--kundenfarbe, #505050); outline-offset: -3px; }
.kv-farbe { align-self: stretch; }
.kv-id { font-weight: 700; font-size: 14px; padding: 2px 6px; border-radius: 4px; justify-self: start; margin-left: 4px; white-space: nowrap; }
.kv-id-gross { font-size: 18px; margin-left: 0; }
.kv-titelzelle { min-width: 0; display: flex; flex-direction: column; }
.kv-t { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222; }
.kv-t-grau { color: #666; }
.kv-s { font-size: 13px; color: #5d5d58; line-height: 1.35; }
.kv-s b { color: #222; }
.kv-rot { color: #b3261e !important; }
.kv-grau { color: #666; }
.kv-gelbtext { color: #8a6400; }
.kv-beleg { display: flex; flex-direction: column; gap: 4px; }
.kv-bar { position: relative; height: 6px; border-radius: 3px; background: #e4e4de; overflow: hidden; }
.kv-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.kv-bar-gross { height: 10px; border-radius: 5px; overflow: visible; }
.kv-bar-gross em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #555; }
.kv-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.kv-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.kv-pill-gross { font-size: 13px; padding: 3px 10px; }
.kv-pill-rot { background: #f3e1df; color: #8a1b0e; }
.kv-pill-gelb { background: #fbefc6; color: #6b4e00; }
.kv-pill-grau { background: #ececE8; color: #444; }
.kv-pfeil { display: flex; color: #666; transition: transform .15s; }
.kv-ev[open] > .kv-zeile .kv-pfeil { transform: rotate(90deg); }

/* Aufgeklappt */
.kv-detail { border-top: 1px solid #dcdcd6; }
.kv-dkopf { display: flex; align-items: stretch; background: #505050; color: #fff; }
.kv-dkopf .kv-farbe { width: 8px; }
.kv-dkopf-titel { flex-grow: 1; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kv-dkopf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kv-dtitel { margin: 0 !important; }
.kv-art > div { width: auto !important; margin: 0 !important; padding: 1px 10px; border-radius: 999px; }
.kv-dzeit { font-size: 14px; color: #e6e6e6; }
.kv-dzeit b { color: #fff; }
.kv-dkopf-links { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px; flex-wrap: wrap; }
.kv-klink, .kv-kicon { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; border: 1px solid #8a8a8a; border-radius: 7px; padding: 6px 10px; font-size: 14px; text-decoration: none; }
.kv-kicon { padding: 6px; }
.kv-klink:hover, .kv-kicon:hover { background: #5f5f5f; border-color: #bbb; }
.kv-klink-rot { border-color: #d98a8a; color: #ffd9d4 !important; }
.kv-klink-aus { color: #d0d0d0 !important; border-style: dashed; cursor: not-allowed; } /* 07.10.2026 Barrierefreiheit: statt opacity .45 (WAVE: Weiss mit 45% Alpha = 2,3:1 auf #505050) */
.kv-klink-aus:hover { background: transparent; border-color: #8a8a8a; }
.kv-ktrenner { width: 1px; height: 28px; background: #777; margin: 0 2px; }
.kv-min { position: relative; height: 14px; font-size: 11px; color: #555; }
.kv-min span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.kv-min span.kv-min-links { transform: none; }
.kv-min span.kv-min-rechts { transform: translateX(-100%); }
.kv-hinweise { padding: 10px 16px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 16px; background: #fdf3f1; border-bottom: 1px solid #f0d2cc; }
.kv-hinweise-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
/* 03.10.2026: Stichtag fuer die automatische Veroeffentlichung (rechts im Hinweisbereich) */
/* 06.10.2026: Box rechts im Hinweisbereich, "Automatisch sichtbar ab" und darunter "Buchbar ab"; Schrift wie .kv-hinweis-rot (14px) */
.kv-sab-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.kv-sab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; font-size: 14px; color: #8a1b0e; }
.kv-sab label { font-weight: 600; white-space: nowrap; }
.kv-sab input[type="date"] { height: 28px; padding: 0 6px; border: 1px solid #d4d4cf; border-radius: 6px; font-size: 13px; background: #fff; color: #333; }
.kv-sab-btn { height: 28px; padding: 0 10px; border: 1px solid #8a8a84; border-radius: 6px; background: #fff; color: #333; font-size: 13px; cursor: pointer; }
.kv-sab-btn:hover { border-color: #333; color: #000; }
.kv-sab-btn { display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none !important; }
a.kv-sab-btn-rot { color: #b3261e !important; border-color: #e5b1a8; }
a.kv-sab-btn-rot:hover { background: #fdf3f1; border-color: #b3261e; }
.kv-hinweise .kv-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.kv-hinweis-rot { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #8a1b0e; }
.kv-dkoerper { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.kv-aktionen { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid #ecece7; }
.kv-gruppe { display: flex; flex-direction: column; gap: 6px; }
.kv-gtitel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b66; }
.kv-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.kv-act { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 84px; min-height: 60px; padding: 6px 4px; box-sizing: border-box; border: 1px solid #d4d4cf; border-radius: 8px; background: #fff; color: #333 !important; font-size: 12px; line-height: 1.15; text-align: center; text-decoration: none !important; }
.kv-act:hover { border-color: #8a8a84; color: #000 !important; }
.kv-act small { font-size: 10px; }
.kv-act-breit { width: 124px; border-color: #8a8a84; }
.kv-act-pflicht { background: #FFC2C2; border-color: #d98a8a; }
.kv-act-hinweis { background: #fbf1cf; }
.kv-act-aus { color: #6f6f6f !important; background: #f7f7f4; border-style: dashed; cursor: not-allowed; } /* 07.10.2026 Barrierefreiheit: statt opacity .45 */
.kv-act-gruen { color: #3f7a12 !important; border-color: #9cc47a; }
.kv-act-rot { color: #b3261e !important; border-color: #e5b1a8; }
.kv-act-neu { border: 2px solid #2f5d8a; color: #2f5d8a !important; }
.kv-verwalten { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px dashed #dcdcd6; padding-top: 12px; }
.kv-klein { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #d4d4cf; border-radius: 7px; background: #fff; color: #333 !important; font-size: 13px; text-decoration: none !important; }
.kv-klein:hover { border-color: #8a8a84; }
.kv-klein-rot { color: #a8200d !important; border-color: #e5b1a8; }
.kv-klein-aus { color: #6f6f6f !important; background: #f7f7f4; border-style: dashed; cursor: not-allowed; } /* 07.10.2026 Barrierefreiheit: statt opacity .45 */
.kv-zahlen { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: #fbfbf9; }
.kv-beleg-gross { display: flex; flex-direction: column; gap: 6px; }
.kv-beleg-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.kv-kz-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kv-kz { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 6px; background: #f1f1ed; }
.kv-kz b { font-size: 18px; line-height: 1.1; }
.kv-kz span { font-size: 12px; color: #5d5d58; }
.kv-kz-summe { background: #eef3e8; }
/* Reservierte Raeume unter dem Bild (30.09.2026) */
.kv-raeume { margin-top: 10px; font-size: 12px; }
.kv-raeume .kv-raum { padding: 3px 0; }
.kv-raeume hr { margin: 0; border: 0; border-top: 1px solid #e3e3df; }
.kv-bild { display: block; width: 160px; aspect-ratio: 2 / 1; border-radius: 6px; overflow: hidden; background: #c8ccd4; text-decoration: none; }
.kv-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kv-bild span { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 12px; color: #444; }

/* Einzeltermine */
.kv-termine { border-top: 1px solid #dcdcd6; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; background: #fafaf8; }
.kv-termine-kopf { display: flex; justify-content: space-between; align-items: center; }
.kv-termine-kopf h3 { margin: 0; font-size: 16px; }
.kv-termine-kopf h3 span { color: #6b6b66; font-weight: 400; }
.kv-reihen { border: 1px solid #dcdcd6; border-radius: 10px; background: #fff; overflow: hidden; }
.kv-reihe-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #f3f3ef; border-bottom: 1px solid #e4e4de; }
.kv-et { display: grid; grid-template-columns: 6px 100px minmax(0, 1fr) 120px 90px 80px 234px; gap: 0 12px; align-items: center; padding: 8px 12px 8px 0; border-bottom: 1px solid #ecece7; }
.kv-et-aus { background: #f3f3f1; }
.kv-et-farbe { align-self: stretch; }
.kv-et-text { font-size: 14px; min-width: 0; }
.kv-et-status { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kv-et-ref { display: flex; }
.kv-et-ref .kv-ref { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; margin-right: -8px; }
.kv-et-akt { display: flex; gap: 4px; justify-content: flex-end; }
.kv-ib { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid #d4d4cf; border-radius: 7px; background: #fff; color: #333 !important; text-decoration: none !important; }
.kv-ib:hover { border-color: #8a8a84; }
.kv-ib-fehlt { border-bottom: 3px solid #C32E04; }
.kv-ib-rot { color: #a8200d !important; }
.kv-ib-hinweis { background: #fbf1cf; }
.kv-ib-plus { background: #eef3e8; color: #3f7a12 !important; }
.kv-ib-platz { display: inline-block; width: 34px; }
.kv-et-warn { padding: 4px 12px; background: #600000; color: #fff; font-size: 13px; text-align: center; }
.kv-et-hinweis { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fbefc6; font-size: 14px; color: #3a2c00; }
.kv-aktualisieren { display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  .kv-spalten { display: none; }
  .kv-zeile { grid-template-columns: 6px 64px minmax(0, 1fr) 26px; row-gap: 4px; padding: 8px 12px 8px 0; }
  .kv-zeile > :nth-child(4), .kv-zeile > :nth-child(5), .kv-zeile > :nth-child(6), .kv-zeile > :nth-child(7) { grid-column: 3; }
  .kv-zeile > .kv-pfeil { grid-column: 4; grid-row: 1; }
  .kv-zeile > .kv-farbe { grid-row: 1 / span 5; }
  .kv-dkoerper { grid-template-columns: 1fr; }
  .kv-aktionen { border-right: 0; }
  .kv-et { grid-template-columns: 6px 1fr; row-gap: 6px; }
  .kv-et > :not(.kv-et-farbe) { grid-column: 2; }
  .kv-et-farbe { grid-row: 1 / span 6; }
  .kv-et-akt { justify-content: flex-start; flex-wrap: wrap; }
}

/* Ticket-Vorschau (einlassmgn_ticket_vorschau.php) */
.tv-seite { background: #f1f1ee; }
.tv { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; padding: 24px; align-items: start; }
.tv-formular { background: #fff; border: 1px solid #dcdcd6; border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.tv-titel { margin: 0; font-size: 22px; }
.tv-unter { margin: 0; font-size: 14px; color: #5d5d58; }
.tv-info { margin: 0; padding: 10px 12px; border-radius: 8px; background: #eef3f8; font-size: 14px; line-height: 1.4; }
.tv-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tv-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #444; }
.tv-felder .tv-chk { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; }
.tv-inhalte { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; border-top: 1px solid #ecece7; padding-top: 12px; }
.tv-inhalte dt { color: #5d5d58; }
.tv-inhalte dd { margin: 0; font-weight: 600; }
.tv-link { margin: 0; font-size: 13px; }
.tv-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tv-ansicht { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tv-blatt { width: 437px; height: 618px; overflow: hidden; border: 1px solid #bbb; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.tv-blatt iframe { width: 794px; height: 1123px; border: 0; transform: scale(.55); transform-origin: 0 0; }
@media (max-width: 1000px) { .tv { grid-template-columns: 1fr; } }

/* =================================================================
   KURSVERWALTUNG: AELTERE VERANSTALTUNGEN (kursverwaltung_historie.php, 23.09.2026)
   Nutzt die kv-... Grundstile der Eventliste, dazu:
================================================================= */
.kh-werkzeuge { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.kh-check { display: inline-flex; gap: 6px; align-items: center; }
.kh-check input { width: 16px; height: 16px; }
.kh-spalten,
.kh-zeile { display: grid; grid-template-columns: 6px 64px minmax(0, 1fr) 130px 120px 300px 118px 34px; gap: 0 14px; align-items: center; padding-right: 12px; }
.kh-spalten { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b66; margin-top: 4px; }
.kh-zeile { position: relative; min-height: 62px; background: #fff; border: 1px solid #dcdcd6; border-radius: 10px; }
.kh-zeile[hidden] { display: none; }
.kh-zeile > .kv-farbe { border-radius: 10px 0 0 10px; }
.kh-nbzelle { display: flex; gap: 6px; flex-wrap: wrap; }
.kh-nb { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 7px; border: 1px solid #d4d4cf; background: #fff; font-size: 13px; color: #333 !important; text-decoration: none !important; white-space: nowrap; }
.kh-ok { color: #3f7a12 !important; border-color: #9cc47a; background: #f3f8ee; }
.kh-offen { color: #a8200d !important; border-color: #e5b1a8; background: #fdf3f1; }
a.kh-nb:hover { filter: brightness(.96); }
.kh-aus { opacity: .5; }
.kh-nurlesen { cursor: default; }
.kh-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.kh-listen { display: flex; gap: 4px; }
.kh-ib-aus { opacity: .4; cursor: not-allowed; }
.kh-menue { position: relative; }
.kh-menue > summary { list-style: none; cursor: pointer; }
.kh-menue > summary::-webkit-details-marker { display: none; }
.kh-menue > summary::marker { content: ""; }
.kh-menue[open] > summary { border-color: #505050; background: #f3f3ef; }
.kh-menue-liste { position: absolute; right: 0; top: 40px; z-index: 50; width: 260px; background: #fff; border: 1px solid #cfcfc9; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; }
.kh-mi { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: #222 !important; text-decoration: none !important; }
a.kh-mi:hover, a.kh-mi:focus-visible { background: #f3f3ef; }
.kh-mi-rot { color: #a8200d !important; }
.kh-mi-aus { color: #6f6f6f !important; cursor: not-allowed; } /* 07.10.2026 Barrierefreiheit: statt opacity .45 */
.kh-sep { height: 1px; background: #ecece7; margin: 4px 6px; }
.kh-keine { margin: 8px 0 0; }
@media (max-width: 1100px) {
  .kh-spalten { display: none; }
  .kh-zeile { grid-template-columns: 6px 64px minmax(0, 1fr) 34px; row-gap: 6px; padding: 8px 12px 8px 0; }
  .kh-zeile > :nth-child(4), .kh-zeile > :nth-child(5), .kh-zeile > :nth-child(6), .kh-zeile > :nth-child(7) { grid-column: 3; }
  .kh-zeile > .kh-menue { grid-column: 4; grid-row: 1; }
  .kh-zeile > .kv-farbe { grid-row: 1 / span 5; }
}

/* =================================================================
   Eventliste / Historie: Hover wie im restlichen itegon (23.09.2026)
   Farben aus den Kundenvariablen --kundenfarbe-bg-hover und
   --kundenfarbe-text-hover (userspezifisch_style.css). Vorher war die
   Schrift beim Hover fest schwarz; bei dunklem Hover-Hintergrund eines
   Kunden war der Knopf dann nicht mehr lesbar.
   Ausgegraute Knoepfe (Spans) reagieren bewusst nicht.
================================================================= */
a.kv-act:hover,
a.kv-klein:hover,
a.kv-ib:hover,
a.kh-nb:hover,
a.kh-mi:hover,
a.kh-mi:focus-visible {
  background: var(--kundenfarbe-bg-hover, #EFEFEF);
  color: var(--kundenfarbe-text-hover, #000) !important;
  border-color: var(--kundenfarbe-text-hover, #8a8a84);
  filter: none;
}

/* =================================================================
   Einzeltermin-Detailansicht (kurse_uebersicht_einzeltermine_profil.php)
   Praefix et-*, eingefuehrt 24.09.2026. Farben ueber --kundenfarbe.
   Schriftgroessen kommen aus den Standardklassen (fliesstext,
   textklein, h1) in userspezifisch_style.css, hier nur Layout.
================================================================= */
.et-detail {
  width: 100%;
  margin: 0 0 30px 0;
}

/* Kopfbereich: Kalenderkachel + Titel + Eckdaten */
.et-kopf {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.et-kopf__kalender { flex-shrink: 0; padding-top: 4px; }
.et-kopf__text { flex: 1; min-width: 0; }
.et-kopf__kurs { color: #6b7280; margin-bottom: 4px; }
.et-kopf__kurs a { color: var(--kundenfarbe, #1a3a6b); }
/* Globale a-Regel (userspezifisch) setzt 5px Innenabstand und eigene
   Schriftgroesse, hier soll die Klasse des Links gelten */
.et-kopf__kurs a,
a.et-ref__bild,
a.et-ref__name,
a.et-ref__mehr { padding-left: 0; padding-right: 0; }
.et-kopf__kurs a { font-size: inherit; }
a.et-ref__bild:hover { background: none; }
.et-titel {
  margin: 0 0 12px 0;
  overflow-wrap: anywhere;
}

/* Eckdaten als Zeile mit Icons */
ul.et-fakten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
ul.et-fakten li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
}
ul.et-fakten svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  fill: none;
  stroke: var(--kundenfarbe, #1a3a6b);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-fakten__zusatz { color: #6b7280; }


/* Aktionsleiste */
.et-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 22px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
/* Zurueck steht als einziger Button rechts */
.et-aktionen a.et-aktionen__zurueck { margin-left: auto; }

/* Breite Ansicht: Inhalt links, Referierende rechts */
.et-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
  grid-template-areas: "inhalt referierende";
  gap: 32px;
  align-items: start;
}
.et-raster > .et-inhalt { grid-area: inhalt; }
.et-raster > .et-referierende { grid-area: referierende; }
.et-raster--einspaltig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "inhalt"; }
.et-inhalt { min-width: 0; overflow-wrap: anywhere; margin-bottom: 0; }
.et-inhalt img { max-width: 100%; height: auto; }
.et-inhalt__leer { color: #6b7280; font-style: italic; }

/* Abschnittsueberschriften "Referierende" / "Beschreibung" (.ueberschrift hat sonst 30px unten) */
.et-detail .et-abschnitt-titel { margin: 0 0 10px 0; }

/* Karte einer referierenden Person */
.et-ref {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.et-ref__bild { flex-shrink: 0; display: block; }
.et-ref__bild div.image {
  width: 90px;
  height: 90px;
  border-radius: 12px;
}
.et-ref__bild div.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.et-ref__text { flex: 1; min-width: 0; }
a.et-ref__name {
  display: block;
  text-decoration: none;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
a.et-ref__name:hover { text-decoration: underline; }
.et-ref__rolle { color: #6b7280; margin-top: 2px; }
.et-ref__kurztext { margin: 8px 0 6px 0; }
a.et-ref__mehr {
  color: var(--kundenfarbe, #1a3a6b);
  text-decoration: none;
}
a.et-ref__mehr:hover { text-decoration: underline; }

/* Schmale Ansicht: einspaltig, Referierende oberhalb des Inhalts
   (steht im HTML ohnehin davor) */
@media (max-width: 900px) {
  .et-raster { display: block; }
  .et-referierende { margin-bottom: 20px; }
}
@media (max-width: 520px) {
  .et-kopf { gap: 12px; }
  ul.et-fakten { flex-direction: column; gap: 6px; }
}

/* Druck / "Als PDF speichern": nur die Detailansicht, einspaltig,
   Referierende oberhalb des Inhalts. :has() greift nur auf Seiten
   mit Einzeltermin-Detail, andere Druckansichten bleiben unberuehrt. */
@media print {
  body:has(.et-detail) > *:not(#wrapper) { display: none !important; }
  body:has(.et-detail) #wrapper > *:not(#seiteninhalt):not(#seiteninhalt_abgedockt) { display: none !important; }
  body:has(.et-detail) #wrapper,
  body:has(.et-detail) #seiteninhalt,
  body:has(.et-detail) #seiteninhalt_abgedockt {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    right: auto !important;     /* #seiteninhalt hat sonst right:10px */
    left: auto !important;
  }
  /* zusaetzlicher Abstand links, damit nichts am Rand abgeschnitten wird */
  .et-detail { padding-left: 5mm; }
  .et-aktionen { display: none !important; }
  .et-detail { margin: 0; }
  .et-raster { display: block; }
  .et-referierende { margin-bottom: 18px; }
  .et-abschnitt-titel { margin-left: 0; padding-left: 0; text-indent: 0; }
  .et-ref { break-inside: avoid; border-color: #ccc; }
  .et-ref__mehr { display: none; }
  .et-titel { color: #000 !important; font-weight: 700 !important; }
  .et-kopf__kurs a { color: #000; text-decoration: none; }
  @page { margin: 15mm; }
}

/* =================================================================
   "Termin folgt" als Pill (24.09.2026)
   Ausgabe ueber termin_folgt_pill() in funktionen.php. Farben kommen
   pro Kunde aus hinweis_hg_farbe (inline), Schrift immer schwarz,
   hier nur die Form.
================================================================= */
.pill-termin-folgt {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.78em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  color: #000;
}
/* Im Kalender-Ersatz der Listenansicht (senkrechter Text) */
#vertikaler_text .pill-termin-folgt { padding: 8px 0; }

/* =================================================================
   Kursverwaltung: parallele Einzeltermine per Drag and Drop (24.09.2026)
   Block = gleiche(s) Datum, Zeit und Gruppe. Griff = Datum/Uhrzeit-Zelle.
================================================================= */
.kv-et-block { position: relative; border-left: 3px solid #dcdcd6; }
.kv-et-griff { cursor: grab; position: relative; padding-left: 16px; }
.kv-et-griff::before { content: "\2807\2807"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #a3a39c; font-size: 12px; letter-spacing: -2px; }
.kv-et-griff:hover::before { color: #505050; }
.kv-et.sortable-ghost { opacity: .4; background: #f3f3ef; }
.kv-et.sortable-chosen { background: #fbfbf8; }
.kv-et-block-info { font-size: 12px; padding: 0 12px; color: #6b6b66; }
.kv-et-block-info:empty { display: none; }
.kv-et-block-ok { color: #2e7d32; padding: 4px 12px; }
.kv-et-block-fehler { color: #a8200d; padding: 4px 12px; }
.kv-termine-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* =====================================================================
   Allgemeines Drag and Drop (SortableJS), 29.09.2026
   z.B. MatBib-Standorte (matbib_inc_ort.php). Griff = Element mit .dnd-griff
===================================================================== */
.dnd-griff { cursor: grab; position: relative; padding-left: 18px !important; }
.dnd-griff::before { content: "\2807\2807"; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: #a3a39c; font-size: 12px; letter-spacing: -2px; }
.dnd-griff:hover::before { color: #505050; }
.dnd-griff:active { cursor: grabbing; }
.dnd-ghost { opacity: .4; background: #f3f3ef !important; }
.dnd-chosen { background: #fbfbf8 !important; }
.dnd-info { font-size: 12px; color: #6b6b66; margin: 4px 0; }
.dnd-info:empty { display: none; }
.dnd-ok { color: #2e7d32; }
.dnd-fehler { color: #a8200d; }

/* =====================================================================
   MatBib Karten (mbr-*), 29.09.2026
   Gemeinsam genutzt von: Ressourcenverwaltung (matbib_stammdaten.php)
   und den Reitern unter goto=matbib (matbib_tabelle_*.php).
   Statusfarbe links ueber --mbr-status (z.B. var(--matbib_reserviert)).
===================================================================== */
.mbr-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 20px;margin-bottom:10px;}
.mbr-kopf h1{margin-bottom:2px;}
.mbr-aktionen{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.mbr-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#f4f4f2;border-radius:10px;padding:10px 14px;margin:10px 0 16px;}
.mbr-filter input[type=text]{min-width:220px;flex:1 1 220px;}
.mbr-filter select{max-width:100%;}
.mbr-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;}
.mbr-leiste-knoepfe{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.mbr-seite{padding:0 8px;}
.mbr-knopf-aus{opacity:.35;pointer-events:none;}
.mbr-liste{display:flex;flex-direction:column;gap:12px;margin:12px 0 16px;}
.mbr-karte{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(180px,28%);gap:14px;background:#fff;border:1px solid #e2e2dc;border-left:4px solid var(--mbr-status, #999);border-radius:10px;padding:12px 14px;}
.mbr-karte--buchung{grid-template-columns:120px minmax(0,1fr) 150px 220px;}
.mbr-karte--kurz{grid-template-columns:120px minmax(0,1fr) 220px;}
.mbr-karte--aus{background:#fafafa;}
.mbr-bild .image{width:120px;height:90px;border-radius:6px;}
.mbr-bild .image img{width:100%;height:100%;object-fit:cover;}
.mbr-bild-leer{display:flex;align-items:center;justify-content:center;width:120px;height:90px;border:1px dashed #c8c8c2;border-radius:6px;color:#666;text-align:center;font-size:12px;}
.mbr-bild-knoepfe{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.mbr-bild-knoepfe a{text-align:center;font-size:12px;}
.mbr-titel{margin:0 0 2px;}
.mbr-nr{color:#6b6b66;}
.mbr-person{margin-top:4px;}
.mbr-beschreibung{margin:6px 0;}
.mbr-bemerkung{margin:6px 0;padding:6px 10px;border-radius:6px;background:color-mix(in srgb, var(--mbr-hinweis, #F8C00D) 12%, white);border-left:3px solid var(--mbr-hinweis, #F8C00D);}
.mbr-knoepfe{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.mbr-badges{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;}
.mbr-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;}
.mbr-badge--warn{background:color-mix(in srgb, #F8C00D 22%, white);color:#6b4d00;}
.mbr-badge--fehler{background:color-mix(in srgb, #c00 12%, white);color:#8a0000;}
.mbr-links{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
.mbr-daten{display:flex;flex-direction:column;gap:2px;}
.mbr-daten-label{color:#6b6b66;display:inline-block;min-width:34px;}
.mbr-daten-ueber{color:#a8200d;font-weight:bold;}
.mbr-fkt{display:flex;flex-direction:column;gap:4px;}
.mbr-fkt > a{text-align:center;}
.mbr-fkt-klein{display:flex;flex-wrap:wrap;gap:4px;}
.mbr-fkt-klein a{flex:1 1 45%;text-align:center;font-size:12px;}
.mbr-betroffen{margin-top:6px;padding:6px 10px;border-radius:6px;border-left:3px solid #a8200d;background:color-mix(in srgb, #a8200d 6%, white);}
.mbr-betroffen div{font-size:12px;}
/* Ressourcenverwaltung kompakt (mbr-karte--stamm, mbr-medien-*), 02.10.2026 - matbib_stammdaten.php
   Bild und Datei werden direkt in der Karte hochgeladen, ersetzt und entfernt (ohne Zwischenseite). */
.mbr-karte--stamm{padding:10px 14px;scroll-margin:90px;transition:box-shadow .4s ease;}
.mbr-karte--neu{box-shadow:0 0 0 3px color-mix(in srgb, var(--kundenfarbe) 45%, white);}
.mbr-karte--laedt .mbr-medien{opacity:.55;pointer-events:none;}
.mbr-titelzeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;}
.mbr-titelzeile .mbr-titel{margin:0;}
.mbr-karte--stamm .mbr-beschreibung{margin:4px 0;}
.mbr-karte--stamm .mbr-knoepfe a{height:34px;line-height:32px;padding:0 12px;font-size:14px;margin-left:0;}
.mbr-medien-bild{position:relative;width:120px;}
.mbr-medien-ziel,a.mbr-medien-ziel{display:block;border-radius:6px;text-decoration:none;}
.mbr-medien-ziel .mbr-bild-leer{cursor:pointer;font-size:14px;}
.mbr-medien-ziel:hover .mbr-bild-leer,.mbr-medien-ziel.mbr-medien--ziehen .mbr-bild-leer{border-color:var(--kundenfarbe);color:var(--kundenfarbe-text-hover);background:var(--kundenfarbe-bg-hover);}
.mbr-medien-ziel.mbr-medien--ziehen{outline:2px dashed var(--kundenfarbe);outline-offset:2px;}
.mbr-medien-x,a.mbr-medien-x{position:absolute;top:4px;right:4px;width:22px;height:22px;line-height:20px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid #c8c8c2;color:#800000;text-align:center;font-size:16px;text-decoration:none;}
.mbr-medien-x:hover,a.mbr-medien-x:hover{background:#a8200d;border-color:#a8200d;color:#fff;}
.mbr-medien-datei{display:flex;gap:4px;margin-top:6px;width:120px;}
.mbr-medien-knopf,a.mbr-medien-knopf{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:26px;min-width:26px;padding:0 6px;box-sizing:border-box;border:1px solid #d5d5cf;border-radius:4px;background:#fff;color:#333;font-size:12px;line-height:1;text-decoration:none;cursor:pointer;}
.mbr-medien-knopf:hover,a.mbr-medien-knopf:hover{border-color:var(--kundenfarbe);background:var(--kundenfarbe-bg-hover);color:var(--kundenfarbe-text-hover);}
.mbr-medien-knopf--datei{flex:1 1 auto;}
.mbr-medien-knopf img{height:18px;width:auto;}
.mbr-medien-knopf.mbr-medien--ziehen{outline:2px dashed var(--kundenfarbe);outline-offset:1px;}
.mbr-medien-knopf--ja,a.mbr-medien-knopf--ja{border-color:#a8200d;color:#800000;}
.mbr-medien-info{grid-column:1 / -1;line-height:26px;}
.mbr-medien-info[hidden]{display:none;}
.mbr-medien-info--fehler{color:#a8200d;}
.mbr-karte--stamm .mbr-links{flex-direction:row;flex-wrap:wrap;gap:4px;}
.mbr-karte--stamm .mbr-links a{height:26px;line-height:24px;padding:0 10px;box-sizing:border-box;}
@media (max-width:900px){
	.mbr-karte,.mbr-karte--buchung,.mbr-karte--kurz{grid-template-columns:1fr;}
}
/* =====================================================================
   MatBib Raumbuchung (rb-*), 29.09.2026 - matbib_raumbuchung.php
===================================================================== */
/* Button "+ Buchung" immer rechtsbuendig, auch wenn der Kopf umbricht (30.09.2026) */
.rb-kopf-aktionen{margin-left:auto;}
/* Raeume an Events und Einzelterminen (30.09.2026): kursverwaltung.php, kursverwaltung_raeume_event.php */
.kv-et-raum{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;margin:10px 0 6px;padding:10px 12px;border:1px solid #e2e2dc;border-radius:8px;background:#fafaf8;}
.kv-et-raum .rb-feld{flex:1 1 240px;}
.kv-et-raum .rb-feld .eingabefeld{width:100%;box-sizing:border-box;}
.kv-et-raum .textklein{flex:1 1 100%;}
.kv-et-raum__text[readonly]{background:#f0f0ec;color:#555;}
.re-raum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:8px 0;border-bottom:1px solid #f0f0ec;}
.re-raum form{margin:0;}
.re-plus{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.re-plus h3{margin:0;}
.rb-formular{background:#fff;border:1px solid #e2e2dc;border-radius:10px;padding:14px 18px;margin:12px 0 20px;display:flex;flex-direction:column;gap:10px;}
.rb-formular h2{margin:0;}
.rb-zeile{display:flex;flex-wrap:wrap;gap:10px 16px;}
.rb-feld{display:flex;flex-direction:column;gap:3px;}
.rb-feld--breit{width:100%;}
.rb-feld--breit .eingabefeld,.rb-feld--breit .pflichtfeld{width:100%;box-sizing:border-box;}
/* Feld "Gebucht fuer" mit Personensuche (30.09.2026) */
.rb-person{position:relative;}
.rb-person__liste{max-height:300px;overflow-y:auto;}
.rb-person__treffer{display:flex;justify-content:space-between;gap:10px;}
.rb-person__treffer small{color:#6b6b66;}
.ajax-liste .rb-person__leer{cursor:default;color:#6b6b66;}
.ajax-liste .rb-person__leer:hover{background:none;}
.rb-knoepfe{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:8px 0 16px;}
.rb-tagleiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 6px;}
.rb-tagwahl{display:inline;margin:0;}
.rb-tagtitel{margin:0 0 0 10px;}
.rb-planaktionen{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:8px 0 0;}
.rb-plan{background:#fff;border:1px solid #e2e2dc;border-radius:10px;padding:8px 12px 12px;margin:8px 0 20px;overflow-x:auto;}
.rb-zeile-plan{display:grid;grid-template-columns:minmax(140px,22%) minmax(420px,1fr);gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid #f0f0ec;}
.rb-zeile-plan--skala{border-bottom:none;padding-bottom:0;}
.rb-ort{margin:10px 0 2px;padding:3px 10px;border-radius:6px;background:var(--kundenfarbe-bg-hover, #eee);color:var(--kundenfarbe-text-hover, #333);font-size:13px;font-weight:600;}
.rb-raumname{line-height:1.25;}
.rb-skala{position:relative;height:18px;font-size:11px;color:#6b6b66;}
.rb-skala span{position:absolute;transform:translateX(-50%);}
.rb-zeitleiste{position:relative;height:34px;background:#f4f7f2;border-radius:6px;overflow:hidden;}
.rb-zeitleiste[data-url]{cursor:copy;}
.rb-zeitleiste[data-url]:hover{background:#eaf1e6;}
.rb-linie{position:absolute;top:0;bottom:0;width:1px;background:#dfe3dc;}
.rb-jetzt{position:absolute;top:0;bottom:0;width:2px;background:#a8200d;z-index:3;}
.rb-block{position:absolute;top:3px;bottom:3px;background:var(--kundenfarbe, #505050);color:#fff;border-radius:4px;overflow:hidden;z-index:2;cursor:default;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.rb-block--verleih{background:repeating-linear-gradient(45deg,#8a8a84,#8a8a84 6px,#a3a39c 6px,#a3a39c 12px);}
.rb-block__text{display:block;padding:0 6px;font-size:11px;line-height:28px;white-space:nowrap;}
.rb-liste{display:flex;flex-direction:column;gap:6px;margin:6px 0 20px;}
.rb-eintrag{display:grid;grid-template-columns:minmax(150px,22%) minmax(150px,24%) 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #e2e2dc;border-left:4px solid var(--kundenfarbe, #505050);border-radius:8px;padding:6px 10px;}
.rb-eintrag--verleih{border-left-color:#8a8a84;}
@media (max-width:800px){
	.rb-eintrag{grid-template-columns:1fr;}
	.rb-zeile-plan{grid-template-columns:1fr;}
}
.rb-block--treffer{outline:3px solid #F8C00D;outline-offset:-3px;}

/* =====================================================================
   Uebersicht Raumbuchung (rbg-*), 30.09.2026 - liste_matbib_raumbuchung_grafisch.php
===================================================================== */
.rbg-filter{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:#efefef;border-radius:8px;padding:14px 16px;margin:10px 0;}
.rbg-filter label{display:inline-flex;align-items:center;gap:6px;}
.rbg-filter select{margin-left:0;}
.rbg-filter__wahl{min-width:280px;}
.rbg-legende{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:8px 0 14px;font-size:13px;}
.rbg-legende span{display:inline-flex;align-items:center;gap:6px;}
.rbg-farbe{display:inline-block;width:16px;height:16px;border-radius:3px;}
.rbg-farbe--event{background:var(--kundenfarbe, #505050);}
.rbg-farbe--buchung{background:#2f7fc1;}
.rbg-farbe--verleih{background:#9a9a94;}
/* Kein eigener Scrollbereich: die Seite scrollt waagerecht, die Raumspalte bleibt stehen (sticky). */
.rbg-scroll{width:max-content;border:1px solid #e2e2dc;border-radius:8px;}
.rbg-tabelle{border-collapse:collapse;font-size:12px;}
.rbg-tabelle th,.rbg-tabelle td{padding:0;border-right:1px solid #ececea;border-bottom:1px solid #ececea;}
.rbg-raumspalte{position:sticky;left:0;z-index:2;background:#fff;min-width:190px;max-width:240px;padding:6px 10px !important;text-align:left;line-height:1.25;}
.rbg-monat{text-align:left;padding:6px 8px !important;font-size:13px;background:#fafaf8;}
.rbg-tag{width:30px;min-width:30px;height:34px;text-align:center;vertical-align:middle;}
th.rbg-tag{display:table-cell;height:auto;padding:3px 0 !important;font-weight:normal;}
th.rbg-tag span{display:block;line-height:1.2;}
.rbg-kw{font-size:10px;color:#666;}
.rbg-so{background:var(--heller_hg_kundenfarbe, #f4f4f2);}
.rbg-heute{box-shadow:inset 0 0 0 2px var(--kundenfarbe, #505050);}
.rbg-leer{background:#fafafa;}
.rbg-ort{background:#f3f3ef !important;font-weight:700;font-size:13px;}
.rbg-ort-rest{background:#f3f3ef;}
.rbg-zelle{display:block;width:100%;height:100%;min-height:30px;position:relative;}
.rbg-fuellung{position:absolute;inset:3px;border-radius:4px;}
/* Versteckte Tooltips nehmen keinen Platz ein (sonst entstehen leere Scrollflaechen) */
.rbg-zelle .tooltiptext{display:none;min-width:240px;text-align:left;z-index:5;}
.rbg-zelle:hover .tooltiptext{display:block;}

/* Druckansicht Raumbuchungen (matbib_raumbuchung_druck.php), 30.09.2026 */
.rbd-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;}
.rbd-leiste .rbd-aktiv{border-color:var(--kundenfarbe, #505050);box-shadow:inset 0 -3px 0 var(--kundenfarbe, #505050);font-weight:700;}
.rbd-leiste__rechts{margin-left:auto;display:flex;gap:6px;}
.rbd-zeitraum{margin-top:0;}
.rbd-tabelle{width:100%;border-collapse:collapse;font-size:14px;}
.rbd-tabelle th,.rbd-tabelle td{text-align:left;vertical-align:top;padding:5px 8px;border-bottom:1px solid #e2e2dc;}
.rbd-tabelle thead th{border-bottom:2px solid #505050;font-size:13px;}
.rbd-tabelle .rbd-tag th{padding-top:14px;background:#f4f4f0;font-size:14px;}
.rbd-zeit{white-space:nowrap;width:1%;}
@media print{
  .rbd-tabelle{font-size:11pt;}
  .rbd-tabelle thead{display:table-header-group;}
  .rbd-tabelle tr{page-break-inside:avoid;}
  .rbd-tabelle .rbd-tag th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* Info und Dokument einer Ressource im Profil (goto=pers), 30.09.2026 */
.mb-res-spalte{text-align:right;white-space:nowrap;}
.mb-res-knoepfe{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;}
a.mb-res-knopf,.mb-res-knopf{display:inline-flex;align-items:center;gap:6px;height:32px;line-height:32px;padding:0 10px;font-size:14px;margin:0;text-decoration:none;text-align:left;}
.mb-res-knopf img{width:20px;height:20px;object-fit:contain;padding:0;}
.mb-res-info{cursor:help;}
.mb-res-info .tooltiptext{left:auto;right:0;top:38px;width:min(420px,80vw);white-space:normal;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.15);}
.mb-res-info .tooltiptext::after{right:14px;}
.mb-res-info:focus .tooltiptext,.mb-res-info:focus-within .tooltiptext{visibility:visible;}

/* Protokollierung: Umschalter Allgemein | MatBib, Filter und Blaettern (30.09.2026) */
.prot-umschalter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.prot-umschalter a{margin-left:0;}
.prot-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px;}
.prot-filter .eingabefeld{flex:1 1 320px;max-width:520px;}
.prot-blaettern{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:12px 0;}

/* =================================================================
   Baustein "Neueste Events" (insert_baustein_neueste.php), 02.10.2026
   Praefix ne-*. Kachel: Kalender (vorhandene kalender_*-Klassen),
   Modul-Chip, Titel, Termin, Art der Veranstaltung.
   Die Farben des Modul-Chips kommen inline aus ver_module
   (farbe_hg / farbe_schrift).
================================================================= */
.ne-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 16px;
  margin: 30px 20px 16px 0;
}

a.ne-karte,
a.ne-karte:link,
a.ne-karte:visited,
a.ne-karte:hover {
  color: #1f2933;
  text-decoration: none;
}

a.ne-karte {
  display: flex;
  gap: 14px;
  box-sizing: border-box;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  font-size: 1rem;
  line-height: 1.3;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.ne-karte:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kundenfarbe) 45%, #fff);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.14);
}

a.ne-karte:focus-visible {
  outline: 3px solid var(--kundenfarbe);
  outline-offset: 2px;
}

/* Kalender: Aussehen kommt aus .kalender_box usw., hier nur die Einbettung */
.ne-datum {
  flex: none;
  align-self: flex-start;
  line-height: 150%;
}

.ne-datum .kalender_box {
  display: block;
  background: #fff;
}

/* Termin steht noch nicht fest: gleiche Groesse, neutrales Kalendersymbol */
.ne-datum--offen {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 64px;
  min-height: 86px;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  background: #f1f3f5;
  color: #5b6470;
}

.ne-inhalt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ne-chip {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: #374151;
  font-size: 0.72em;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* .ueberschrift bringt sonst eigene Groesse, Farbe und 30px Abstand mit */
.ne-karte .ne-titel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-size: 0.9em; /* 04.10.2026: etwas kleiner, damit laengere Titel in die Kachel passen */
  font-weight: 700;
  line-height: 1.3;
  color: #1f2933;
  overflow-wrap: anywhere;
}

.ne-karte .ne-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: auto;
  font-size: 0.82em;
  line-height: 1.5;
  color: #4b5563;
}

.ne-art {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: #374151;
  white-space: nowrap;
}

.ne-art svg {
  flex: none;
}

.ne-pfeil {
  flex: none;
  align-self: center;
  color: color-mix(in srgb, var(--kundenfarbe) 85%, #000);
}

@media (max-width: 480px) {
  .ne-liste { gap: 12px; margin-right: 0; }
  .ne-pfeil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  a.ne-karte { transition: none; }
  a.ne-karte:hover { transform: none; }
}

/* Ergaenzung fuer den Baustein "Last Minute" (insert_baustein_lastminute.php), 02.10.2026 */
.ne-liste--eng {
  margin-top: 10px;
}

/* Buchungsfrist in der Terminzeile
   04.10.2026: kleiner und nicht mehr fett, damit der Text bei allen
   Aufloesungen in die Pille passt */
.ne-frist {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kundenfarbe) 12%, #fff);
  color: color-mix(in srgb, var(--kundenfarbe) 85%, #000);
  font-size: 0.92em;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hinweis in der Terminzeile, wenn der Termin schon begonnen hat (02.10.2026).
   Ersetzt in den Kacheln das rote Jahr des Kalenders. */
.ne-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #c7ccd3;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  white-space: nowrap;
}

.ne-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa1ab;
}

.ne-status--laeuft::before {
  background: #C32E04;
}

/* =================================================================
   Bausteine #FILES_..._# und #IMAGES_..._#
   (insert_baustein_files_images.php), 02.10.2026, Praefix fi-*.
   Kachel: Kuerzel des Dateityps oder Vorschaubild, Beschreibung,
   Typ und Groesse.
================================================================= */
.fi-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
  margin: 16px 0;
}

a.fi-karte,
a.fi-karte:link,
a.fi-karte:visited,
a.fi-karte:hover {
  color: #1f2933;
  text-decoration: none;
}

a.fi-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  font-size: 1rem;
  line-height: 1.3;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.fi-karte:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--kundenfarbe) 45%, #fff);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.14);
}

a.fi-karte:focus-visible {
  outline: 3px solid var(--kundenfarbe);
  outline-offset: 2px;
}

/* Kuerzel des Dateityps, Farbe je Gruppe */
.fi-typ {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #eef1f4;
  color: #374151;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fi-typ--pdf     { background: #fbe9e7; color: #a3271f; }
.fi-typ--text    { background: #e6effa; color: #1d4f80; }
.fi-typ--tabelle { background: #e5f3ea; color: #1e6b3a; }
.fi-typ--folien  { background: #fdeedd; color: #8a4b08; }
.fi-typ--bild    { background: #efe9f7; color: #5b3a8c; }

/* Vorschaubild (div.image liefert overflow und den Zoom beim Ueberfahren) */
.fi-bild {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #eef1f4;
}

div.image.fi-bild img {
  display: block;
  height: 100%;
  object-fit: cover;
}

.fi-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fi-karte .fi-titel {
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2933;
  overflow-wrap: anywhere;
}

.fi-karte .fi-info {
  font-size: 0.75em;
  line-height: 1.4;
  color: #4b5563;
}

.fi-pfeil {
  flex: none;
  color: color-mix(in srgb, var(--kundenfarbe) 85%, #000);
}

@media (prefers-reduced-motion: reduce) {
  a.fi-karte { transition: none; }
  a.fi-karte:hover { transform: none; }
}

/* =================================================================
   Baustein #BILDREIHE_HHH_Ordner_# (insert_baustein_bildreihe.php),
   02.10.2026, Praefix br-*. Einheitliche Kacheln: gleich grosse
   Bildflaeche, Bild vollstaendig eingepasst, darunter Titel, Link
   und Ersteller. --br-hoehe und --br-breite setzt der Baustein
   aus dem HHH-Wert.
================================================================= */
.br-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--br-breite, 200px), 100%), 1fr));
  gap: 16px;
  margin: 16px 0;
}

.br-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.br-karte:hover {
  border-color: color-mix(in srgb, var(--kundenfarbe) 45%, #fff);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.14);
}

.br-karte a.br-link {
  display: block;
}

.br-karte a.br-link:focus-visible {
  outline: 3px solid var(--kundenfarbe);
  outline-offset: -3px;
}

/* Bildflaeche (div.image liefert overflow und den Zoom beim Ueberfahren).
   Das Bild fuellt die Flaeche ganz aus und wird dafuer beschnitten
   (oben buendig, damit bei Hochformaten der Kopf sichtbar bleibt).
   Vollstaendig einpassen statt beschneiden: object-fit: contain */
div.image.br-bild {
  box-sizing: border-box;
  height: var(--br-hoehe, 150px);
  background: #f3f4f6;
}

div.image.br-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Platzhalter fuer fehlende Bilder nicht beschneiden */
div.image.br-bild--fehlt img {
  object-fit: contain;
  object-position: center;
}

div.image.br-bild--fehlt img {
  opacity: 0.45;
}

.br-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 12px;
}

.br-karte .br-titel {
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.3;
  color: #1f2933;
  overflow-wrap: anywhere;
}

.br-karte .br-url {
  font-size: 0.78em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-karte .br-url a {
  color: color-mix(in srgb, var(--kundenfarbe) 85%, #000);
}

.br-karte .br-ersteller {
  font-size: 0.75em;
  line-height: 1.4;
  color: #4b5563;
}

@media (prefers-reduced-motion: reduce) {
  .br-karte { transition: none; }
}

/* =================================================================
   Raumbuchung - Uebersicht fuer Kunden (matbib_raumuebersicht.php),
   02.10.2026, Praefix ru-*. Tagesplan, Formular und Listen nutzen
   die rb-*-Klassen der Verwaltungsseite.
================================================================= */
/* Status "jetzt", Buchen-Knopf und Info unter dem Raumnamen */
/* Der Tagesplan ist hier kein Rollbereich (rb-plan hat overflow-x:auto): sonst ragt die
   Info-Sprechblase unten heraus und der Kasten rollt wie ein eigenes Fenster.
   Dafuer schrumpft die Zeitleiste frei mit, es entsteht nichts Ueberbreites. */
.rb-plan.ru-plan {
  overflow: visible;
}

/* Bild des Raumes links vor dem Raumnamen (02.10.2026), ohne Bild der Platzhalter.
   Gilt fuer beide Tagesplaene: Raumbuchung (Verwaltung) und Raumbuchung - Selfservice. */
.rb-plan--bild .rb-zeile-plan {
  grid-template-columns: 80px minmax(140px, 22%) minmax(420px, 1fr);
}

.ru-plan .rb-zeile-plan {
  grid-template-columns: 80px minmax(140px, 22%) minmax(0, 1fr);
}

.rb-plan .mb-res-bild {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  background: #f3f4f6;
  overflow: hidden;
}

.rb-plan .mb-res-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ru-raumfkt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Info-Sprechblase: oeffnet unter der Knopfzeile nach rechts, buendig mit dem Raumnamen
   (im Profil stehen die Knoepfe rechts, dort oeffnet sie nach links) */
.ru-plan .mb-res-info {
  position: static;
}

.ru-plan .mb-res-info .tooltiptext {
  top: calc(100% + 6px);
  right: auto;
  left: 0;
  box-sizing: border-box;
  width: min(420px, 80vw);
}

.ru-plan .mb-res-info .tooltiptext::after {
  display: none;
}

.ru-status {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: #e5f3ea;
  color: #1e6b3a;
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
}

.ru-status--belegt {
  background: #fbe9e7;
  color: #a3271f;
}

a.button_kundenfarbe.ru-buchen {
  height: auto;
  margin-left: 0;
  padding: 4px 14px;
  font-size: 14px;
  line-height: 1.5;
}

/* Dokument der Ressource nur als Symbol (Tagesplan und Liste der eigenen Buchungen) */
a.mb-res-knopf--symbol {
  padding: 0 7px;
  vertical-align: middle;
}

.ru-liste .rb-eintrag__fkt {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Knoepfe der Tagesleiste und der eigenen Buchungen: auf der Kundenseite groesser als im Backend */
.ru-leiste .button_normal_backend,
.ru-liste .button_normal_backend {
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* eigene Buchung in der Zeitleiste und in der Legende */
.rb-block.ru-block--eigen {
  background: #1e6b3a;
}

.ru-legende {
  margin: -12px 0 20px;
}

.ru-legende__farbe {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px 0 0;
  border-radius: 3px;
  background: var(--kundenfarbe, #505050);
  vertical-align: -1px;
}

.ru-legende__farbe--eigen {
  margin-left: 14px;
  background: #1e6b3a;
}

/* Dauer-Auswahl im Buchungsformular */
.ru-dauer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ru-dauer legend {
  margin-bottom: 3px;
  padding: 0;
}

.ru-dauer label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid #cfd4da;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.ru-dauer input {
  margin: 0;
}

.ru-dauer label:has(input:checked) {
  border-color: var(--kundenfarbe);
  background: color-mix(in srgb, var(--kundenfarbe) 12%, #fff);
  font-weight: 600;
}

.ru-dauer label:focus-within {
  outline: 2px solid var(--kundenfarbe);
  outline-offset: 2px;
}

/* Auf dem Handy: Raumname ueber der Zeitleiste, Liste der eigenen Buchungen einspaltig */
@media (max-width: 800px) {
  /* Bild und Raumname nebeneinander, die Zeitleiste darunter ueber die ganze Breite */
  .rb-plan--bild .rb-zeile-plan,
  .ru-plan .rb-zeile-plan { grid-template-columns: 80px minmax(0, 1fr); gap: 4px 10px; }
  .rb-plan--bild .rb-zeile-plan > .rb-zeitleiste,
  .rb-plan--bild .rb-zeile-plan--skala > .rb-skala { grid-column: 1 / -1; }
  .rb-plan--bild .rb-zeile-plan--skala .rb-raumname,
  .rb-plan--bild .rb-zeile-plan--skala .rb-bildspalte { display: none; }
  .ru-plan .mb-res-info .tooltiptext { width: 100%; }
}

@media (max-width: 640px) {
  .ru-liste .rb-eintrag { grid-template-columns: 1fr; gap: 2px; }
}

/* =================================================================
   Raum buchen per QR-Code (matbib_raum_qr.php), 02.10.2026, Praefix rq-*.
   Das Formular nutzt rb-* und ru-* wie die Seite Raumbuchung - Selfservice.
================================================================= */
/* Zusammenfassung der Anfrage vor dem Bestaetigen */
.rq-daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.rq-daten dt {
  color: #4b5563;
}

.rq-daten dd {
  margin: 0;
}

/* Feld, das Menschen nicht sehen und nur Roboter ausfuellen */
.rq-falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rq-formular input[type="email"] {
  box-sizing: border-box;
  width: 100%;
}

/* Dauer, die gerade nicht mehr passt */
.ru-dauer label:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .rq-formular .rb-knoepfe input[type="submit"] {
    width: 100%;
    margin-left: 0;
  }
}

/* --- Ja/Nein-Pill (04.10.2026): fuer Werte J/JA bzw. N/NEIN, z.B. Konfiguration (goto=param).
   Ausgabe in PHP ueber pa_wert_anzeige() in parameter.php; Klasse ist projektweit nutzbar. --- */
.pill-jn{ display:inline-flex; align-items:center; padding:1px 10px; border-radius:999px; font-size:12px; font-weight:600; font-style:normal; line-height:1.6; white-space:nowrap; }
.pill-jn--ja{   background:#e1f0dc; color:#2f5e14; }
.pill-jn--nein{ background:#f3e1df; color:#8a1b0e; }
.pa-jn{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; }
.pa-jn__opt{ cursor:pointer; display:inline-flex; }
.pa-jn__opt input{ position:absolute; opacity:0; width:0; height:0; }
.pa-jn__opt .pill-jn{ font-size:14px; padding:4px 16px; opacity:.45; border:2px solid transparent; transition:opacity .15s; }
.pa-jn__opt:hover .pill-jn{ opacity:.8; }
.pa-jn__opt input:checked + .pill-jn{ opacity:1; border-color:currentColor; }
.pa-jn__opt input:focus-visible + .pill-jn{ outline:2px solid var(--kundenfarbe); outline-offset:2px; }
.pa-jn__text{ margin-left:8px; color:#666; }

/* =================================================================
   06.10.2026 Barrierefreiheit (WCAG 2.4.7 Fokus sichtbar, 2.4.11 Fokus-Kontrast):
   Tastaturfokus als kraeftiger, dunkler Rahmen, unabhaengig von der Kundenfarbe
   (helle Kundenfarben ergaben mit dem 30%-Schatten keinen erkennbaren Fokus).
   Nur bei Tastaturbedienung (:focus-visible), Mausklick bleibt wie bisher.
   !important, weil einzelne Module den Rahmen per outline:none abschalten.
   ================================================================= */
:root { --fokus-farbe: color-mix(in srgb, var(--kundenfarbe, #505050) 30%, #fff); } /* Egons Wunsch 06.10.2026: Kundenfarbe zu 70% mit Weiss gemischt, weicher "Glow" statt dunklem Rahmen */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--fokus-farbe) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--kundenfarbe, #505050) !important; /* 07.10.2026: 1px volle Kundenfarbe innen + 2px Glow aussen = 3px, erfuellt 2.4.11 */
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 1px; }

/* 06.10.2026 Barrierefreiheit (WCAG 3.3.2): Legende ueber Formularen mit Pflichtfeldern, wird per Skript in index.php eingefuegt */
.pflichtfeld-legende { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; }
.pflichtfeld-legende-balken { display: inline-block; width: 14px; height: 16px; border: 1px solid #d0d0d0; border-left: 4px solid var(--pflichtfeld, #DC220B); background: #fff; box-sizing: border-box; }

/* 06.10.2026 Barrierefreiheit: FAQ-Eintraege klappen ueber einen Button in der h3 auf (statt onclick auf der Tabellenzelle). Der Button sieht aus wie die Ueberschrift. */
.faq-toggle { all: unset; display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
/* 06.10.2026: Pfeil als eigenes Symbol ganz links mit Abstand zum Text (Egons Wunsch); zeigt nach rechts, aufgeklappt nach unten */
.faq-toggle::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: currentColor; opacity: .6; transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>") center/contain no-repeat; }
.faq-toggle:hover::before { opacity: 1; }
.faq-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

/* --- NEWSLETTER-VERSAND: Pakete mit Fortschrittsmarkierung und Inhaltsvorschau --- */
.nl-paket {
  position: relative;
  display: block;
  float: left;
  overflow: hidden;
  margin: 0 6px 12px 0;
}
.nl-paket-titel {
  display: block;
  background: #505050;
  width: 100%;
  padding: 2px 6px;
  box-sizing: border-box;
}
.nl-paket-anzahl {
  font-weight: normal;
  opacity: 0.85;
  font-size: 0.85em;
}
.nl-paket a {
  display: block;
}
/* Balken am unteren Rand, wird nach dem Klick sanft eingeblendet */
.nl-paket-balken {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--kundenfarbe);
  opacity: 0;
  transition: height 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
.nl-paket--uebergeben .nl-paket-balken {
  height: 16%;
  opacity: 0.4;
}
.nl-paket--uebergeben img {
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.nl-fortschritt {
  margin: 0 0 10px 0;
}
.nl-inhalt-wahl {
  margin-bottom: 8px;
}
.nl-vorschau {
  max-width: 900px;
  padding: 12px 16px;
  margin: 8px 0 4px 0;
  border: 1px solid #ccc;
  border-left: 5px solid var(--kundenfarbe);
  background: #fafafa;
  font-family: kundenschrift, Arial, sans-serif;
  color: #454545;
}
details.nl-alternative { margin-top: 12px; border-top: 1px solid #e5e5e5; padding: 8px 0; }
details.nl-alternative summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.nl-alternative summary::-webkit-details-marker { display: none; }
details.nl-alternative summary::before { content: ''; width: 0; height: 0; border-left: 7px solid var(--kundenfarbe); border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform 0.2s ease; }
details.nl-alternative[open] summary::before { transform: rotate(90deg); }
details.nl-alternative summary:focus-visible { outline: 2px solid var(--kundenfarbe); outline-offset: 2px; }

/* --- VERLEIHSYSTEM: Fortschrittsanzeige im Buchungsprozess (matbib_inc_schritte.php) --- */
ol.mb-schritte { display: flex; align-items: stretch; list-style: none; margin: 12px 0 18px 0; padding: 0; max-width: 860px; }
ol.mb-schritte li.mb-schritt { position: relative; flex: 1 1 0; display: flex; flex-direction: column; margin: 0 0 0 44px; padding: 0; background: #3a3a3a; color: #fff; border-radius: 3px; min-height: 110px; font-family: kundenschrift, Arial, sans-serif; }
ol.mb-schritte li.mb-schritt:first-child { margin-left: 0; }
/* Pfeil zwischen den Kacheln */
ol.mb-schritte li.mb-schritt + li.mb-schritt::before { content: ''; position: absolute; left: -35px; top: 50%; width: 26px; height: 22px; transform: translateY(-50%); background: #8a8a8a; clip-path: polygon(0 30%, 55% 30%, 55% 0, 100% 50%, 55% 100%, 55% 70%, 0 70%); }
ol.mb-schritte li.mb-schritt--erledigt + li.mb-schritt::before { background: var(--kundenfarbe); }
.mb-schritt__titel { flex: 1; padding: 14px 14px 8px; font-weight: 700; font-size: 0.95em; line-height: 1.25; }
.mb-schritt__balken { display: block; height: 6px; background: #5a5a5a; overflow: hidden; }
.mb-schritt__balken::after { content: ''; display: block; height: 100%; width: 0; background: var(--kundenfarbe); transition: width 0.6s ease; }
.mb-schritt--erledigt .mb-schritt__balken::after, .mb-schritt--aktiv .mb-schritt__balken::after { width: 100%; }
.mb-schritt__nr { padding: 9px 14px; font-size: 0.8em; color: #ddd; background: #4e4e4e; border-radius: 0 0 3px 3px; }
.mb-schritt__haken { color: var(--kundenfarbe); font-weight: 700; }
.mb-schritt--offen { background: #6a6a6a; }
.mb-schritt--offen .mb-schritt__titel { color: #e6e6e6; font-weight: 600; }
.mb-schritt--offen .mb-schritt__nr { background: #7a7a7a; }
@media (max-width: 600px) {
  ol.mb-schritte li.mb-schritt { margin-left: 22px; min-height: 90px; }
  ol.mb-schritte li.mb-schritt + li.mb-schritt::before { left: -20px; width: 16px; height: 14px; }
  .mb-schritt__titel { font-size: 0.78em; padding: 10px 8px 6px; }
  .mb-schritt__nr { padding: 6px 8px; font-size: 0.72em; }
}

/* --- SPEISEPLAN: Plan kopieren, Wochen-Buttons mit interner Bezeichnung --- */
.button_normal_backend.sp-woche--bezeichnet, a.button_normal_backend.sp-woche--bezeichnet { background: linear-gradient(to bottom, #fff9db, #fff1a8); border-color: #e6cf6a; color: #4a3f00; }
.button_normal_backend.sp-woche--bezeichnet:hover, a.button_normal_backend.sp-woche--bezeichnet:hover { background: #ffeb8c; border-color: #d9bd4f; }
.sp-woche__bezeichnung { font-weight: normal; }
.button_kundenfarbe .sp-woche__bezeichnung { opacity: 0.9; }