:root {
	--global_padding: 1rem;
	--global_small_padding: 0.5rem;
	--hmkb_red: #dc3135;
}


.ticket_card_rendered {
  padding: 1rem 3.6rem 3rem 2rem;
  max-width: 60ch;
/*  background: rgba( 255,255,255,0.9 );*/
}

.hmkb_red {
	color: var( --hmkb_red );
}

.source_container .ticket_card_rendered {
	max-width: none;
}

.ticket_card_rendered pre {
	margin: 0;
	tab-size: 2;
}

.no_margin {
	margin: 0;
}

.ticket_card_rendered figure {
	background: rgba( 0, 0, 0, 0.08 );
	margin: 0;
	margin-bottom: 1rem;
}

.ticket_card_rendered figcaption {
	padding: var(--global_small_padding);
}

.ticket_card_rendered h2 {
	font-size: 2.2rem;
	margin: 0.3rem 0 0 0.2rem;
	padding: 0 0 0 0.5rem!important;
  border-left: 0.6rem solid hsl( 150, 90%, 70% );
}

.ticket_card_rendered .media {
	width: 100%;
	height: auto;
}

.ticket_card_rendered .ticket_item {
	margin-left: 1.8rem;
	margin-top:  0.16rem;
}

.ticket_card_rendered table.ticket_item {
	width: calc( 100% - 1.8rem );
}

.ticket_card_rendered ul.ticket_item {
	margin-left: 2.4rem;
}


.ticket_card_rendered figure pre {
	padding: 0;
}

.ticket_card_rendered .icons.small {
	width: 1rem;
}

.ticket_card_rendered small {
	color: #999;
}


.save_message {
	animation: boing 0.12s alternate 4 ease-out;
}


.empty_ticket .save_message {
	display: none;
}

.ticket_card_preview .ticket_card_rendered {
	position: absolute;
	z-index: 999;
	transition: all 0.3s ease-out;
	transform: translateX( 200vw ) scale(2);
	opacity: 0;
	min-width: 40ch;
}

.ticket_card_preview:hover .ticket_card_rendered {
	transition: all 0.3s ease-out;
	transform: translateX( 0 ) scale(1);
	opacity: 1;
}


#admin_preview_content .ticket_card_rendered {
	width: calc( 200% - 4rem );
	transform: scale( 0.5 );
	transform-origin: top left;
}

dl.sub-container {
	position: relative;
}


.smartcard_preview_container {
	position: absolute;
  z-index: 99;
  top: 0.6rem;
  left: 0.9rem;
  background: rgba(255,255,255,0.8);
  transform: scale(0.03) rotate(-3deg);
  transform-origin: top left;
  box-shadow: 0 1rem 9rem 2rem rgb(0 0 0 / 30%);
  transition: all 0.2s ease-out;
  pointer-events: none;
}

.active > dt > .smartcard_preview_container {
	opacity: 0;
	transform: scale(0.3) rotate(0deg) translateY(30vh) translateX(4vw);
}


.icons {
	width: 2rem;
	height: auto;
	margin-right: 0.16rem;
}

.icons.small {
	width: 1.3rem;
}


.ticket_card_rendered ul {
	list-style: none;	
}

.ticket_card_rendered li {
	margin-bottom: 0;
}


.ticket_card_rendered li::before {
  content: "\25B6";
  color: rgba(0,0,0,0.3);
  display: inline-block;
  width: 0.6rem;
  margin-left: -0.9rem;
  margin-right: 0.3rem;
  font-size: 11px;
}


.ticket_card_rendered .content.flex {
	display: block;
}

.source_container .ticket_card_rendered .content.flex {
	display: flex;
}

.content.flex .column {
	width: 48%;
}

#admin_preview_content .content.flex .column {
	width: 100%;
}

#tickets .content.flex .column {
	width: auto;
}


#tickets .ghost.move {
	display: none!important;
}


#tickets .wrapper_beispiele_card {
	display: none!important;
}

#help_container .ticket_card_rendered,
#ticket_temp .ticket_card_rendered {
	display: none;
}


.save_and_hide_container {
	display: none;
}

#ticket_temp .save_and_hide_container {
	display: inline-block;
}


.acf-field .qr_code {
	width: 2rem;
  height: 2rem;
  margin: 0;
  line-height: 1;
  padding: 0.6rem;
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.3s ease-out;
}

.acf-field .qr_code:hover {
	background-color:  hsl(150, 90%, 72%);
}

/*#ticket_temp button.accordion {
	width: calc( 100% - 10rem);
}*/

#user_lerngruppen_repeater td {
	vertical-align: middle;
}


#qrcode_wrapper {
	background-color: #fff;
	box-shadow: 0 0 2rem rgba(0,0,0,0.6);
	left: 50%;
	padding: 2rem;
	position: fixed;
	top: 300vh;
	transform: translateX( -50% ) scale(3);
	z-index: 99;
	transition: all 0.4s ease-out;
}

#qrcode_wrapper h1 {
	color: hsl( 150, 90%, 42% );
}

#qrcode_wrapper h2 {
	color: hsl( 170, 90%, 42% );
}

#qrcode_wrapper.active {
	transform: translateX( -50% ) scale(1);
	top: 3rem;
}

#qrcode {
	width: 76vh;
	height: 76vh;
}

#qrcode img {
	width: auto;
	height: 100%;
}

.acf-table > thead > tr > th {
  border-color: rgba(0,0,0,0.16);
  border-width: 0 0 1px 1px;
  font-weight: bold;
  color: #555;
  background: rgba(0,0,0,0.3);
}


/* TOC – Bootstrap/Apple-inspiriert, clean & sticky-optional */
/* Basis: 1rem (typisch 16px). Alle px-Werte -> rem harmonisiert. */

.hmkb_toc {
  background: #fff;
  border-radius: 0.75rem;                  /* 12px */
  padding: 0.875rem 0.875rem 0.625rem;     /* 14px 14px 10px */
  margin: 0 0 1.125rem 0;                  /* 18px */
  background: #eee;
  box-shadow: var(--layer1);
  width: auto;
  display: inline-block;
}

.hmkb_toc__title {
  font-size: 1rem;                     /* 14px */
  font-weight: 700;
  letter-spacing: 0.0125rem;               /* 0.2px */
  margin: 0 0 0.625rem 0;                  /* 10px */
  color: #000;
}

.hmkb_toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hmkb_toc__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;                           /* 10px */
  padding: 0.23rem;                 /* 8px 4px */
}

.hmkb_toc__item:first-child {
  border-top: 0;
}

/* Bubble-Zahl */
.hmkb_toc__bubble {
  flex: 0 0 auto;
  min-width: 1.625rem;                     /* 26px */
  height: 1rem;                            /* bleibt 1rem */
  padding: 0.25rem 0.5rem;                       /* 8px */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--hmkb_blue);
  font-family: monospace;
  font-size: 1rem;                      /* sinnvoll innerhalb 1rem Höhe */
  font-weight: 700;
  line-height: 1;                          /* saubere vertikale Zentrierung */
  color: #fff;
}

.entry-content h1 {
	font-size: 4.2rem;
	color: var(--hmkb_blue);
	margin-bottom: 0;
}

.screen-reader-shortcut {
	display: none;
}


/* Optional: aktiver Zustand (falls du später per JS eine active-Klasse setzt) */
.hmkb_toc__item.is_active .hmkb_toc__link {
  color: var(--hmkb_blue);
  font-weight: 700;
}


/* Smooth scroll (global) */
html {
  scroll-behavior: smooth;
}

/* Optional: falls du einen festen Header hast (z.B. WP Sticky Menü) */
:root {
  --hmkb_scroll_offset: 4rem; /* anpassen */
}
h2[id] {
  scroll-margin-top: var(--hmkb_scroll_offset);
}