canvas.signature-pad {
  border: 1px solid darkgrey;
}

.email_req_table canvas.signature-pad {
  flex-grow: 1;
  box-sizing: border-box;
}

.email_req_table .contact_row:has(canvas.signature-pad) > span {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5em;
}

.email_req_table .signature-pad-reset {
  flex-grow: 0;
  flex-shrink: 0;
}

/*  LC STYLES */

.lcms_default_theme.lcms_wrap {
	border: 6px solid #fff;
    box-shadow: 0 -1px 7px rgba(0, 0, 0, 0.3);
}


/* slide type */
.lcms_default_theme .lcms_slide[data-type="image"] .lcms_content {
	bottom: 0;
	left: 0;
	right: 0;
	padding: 13px 20px;
	background: rgba(20, 20, 20, 0.7);
	color: #fff;
	font-size: 1em;
	line-height: 1.2em;
}
.lcms_default_theme .lcms_slide[data-type="video"] .lcms_content,
.lcms_default_theme .lcms_slide[data-type="iframe"] .lcms_content {
	background: #222;
}
.lcms_default_theme .lcms_slide[data-type="mixed"] .lcms_content {
    padding: 25px;
	background: rgba(20, 20, 20, 0.5);
    color: #fdfdfd;
}


/* default CSS3 loader */
.lcms_default_theme .lcms_loader:before,
.lcms_default_theme .lcms_loader:after {
	content: "";
	position: absolute;
	height: 0px;
	width: 0px;
	top: 50%;
	left: 50%;
	margin-top: 0;
	margin-left: 0;	
	border-radius: 50%;
	animation: lcms_bt_loader 2s infinite ease-in-out;
}
.lcms_default_theme .lcms_loader:before {
	z-index: 100; 
	background: #555;
	background: rgba(50, 50, 50, 0.4);
}
.lcms_default_theme .lcms_loader:after {
	z-index: 110; 
	background: #777;
	background: rgba(70, 70, 70, 0.4);
	animation-delay: -1s;
}
@keyframes lcms_bt_loader {
	0% { width: 0; height: 0; margin-top: 0; margin-left: 0; }
	50% { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; }
	100% { width: 0; height: 0; margin-top: 0; margin-left: 0; }
}


/* default navigation style */
.lcms_default_theme.lcms_default_theme .lcms_nav,
.lcms_default_theme .lcms_play {
	top: 10px;
	left: 10px;
	opacity: 0;
	transition: all .2s ease-in .5s;
	transform: scale(0.8);
}
.lcms_default_theme.lcms_wrap:not(.lcms_already_hovered) .lcms_nav,
.lcms_default_theme.lcms_wrap:not(.lcms_already_hovered) .lcms_play,
.lcms_default_theme.lcms_wrap:hover .lcms_nav,
.lcms_default_theme.lcms_wrap:hover .lcms_play,
.lcms_default_theme.lcms_wrap:focus-within .lcms_nav,
.lcms_default_theme.lcms_wrap:focus-within .lcms_play {
	opacity: 1;
	transition: all .2s ease-in 0s;
	transform: scale(1);
}
@media screen and (max-width: 1024px) { 
    .lcms_default_theme.lcms_wrap .lcms_nav,
    .lcms_default_theme.lcms_wrap .lcms_play {
        opacity: 1;
        transition: all .2s ease-in 0s;
        transform: scale(1);
    }
}
.lcms_default_theme .lcms_nav *,
.lcms_default_theme .lcms_play span {
	display: inline-block;
	float: left;
	cursor: pointer;
	width: 27px;
	height: 27px;
	background: #fff;
	text-align: center;
	overflow: hidden;
	border-radius: 3px;
	vertical-align: top;
	box-shadow: 0 0 2px rgba(0,0,0, 0.1);
	transition: all .2s ease-in;
}
.lcms_default_theme .lcms_nav > *:not(.lcms_disabled_btn):hover,
.lcms_default_theme .lcms_play span:not(.lcms_disabled_btn):hover {
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
.lcms_default_theme .lcms_prev {
	margin-right: 4px;
}


/* icons */
.lcms_default_theme .lcms_prev:before,
.lcms_default_theme .lcms_next:before,
.lcms_default_theme .lcms_play *:before {
    content: "";
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center;
    display: block;
    height: 100%;
    opacity: 0.6;
    transition: opacity .2s linear;
}
.lcms_default_theme .lcms_prev:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLWxlZnQiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1jaGV2cm9uLWxlZnQgZmEtdy0xMCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNC41MiAyMzkuMDNMMjI4Ljg3IDQ0LjY5YzkuMzctOS4zNyAyNC41Ny05LjM3IDMzLjk0IDBsMjIuNjcgMjIuNjdjOS4zNiA5LjM2IDkuMzcgMjQuNTIuMDQgMzMuOUwxMzEuNDkgMjU2bDE1NC4wMiAxNTQuNzVjOS4zNCA5LjM4IDkuMzIgMjQuNTQtLjA0IDMzLjlsLTIyLjY3IDIyLjY3Yy05LjM3IDkuMzctMjQuNTcgOS4zNy0zMy45NCAwTDM0LjUyIDI3Mi45N2MtOS4zNy05LjM3LTkuMzctMjQuNTcgMC0zMy45NHoiPjwvcGF0aD48L3N2Zz4=);
}
.lcms_default_theme .lcms_next:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLXJpZ2h0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hldnJvbi1yaWdodCBmYS13LTEwIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTI4NS40NzYgMjcyLjk3MUw5MS4xMzIgNDY3LjMxNGMtOS4zNzMgOS4zNzMtMjQuNTY5IDkuMzczLTMzLjk0MSAwbC0yMi42NjctMjIuNjY3Yy05LjM1Ny05LjM1Ny05LjM3NS0yNC41MjItLjA0LTMzLjkwMUwxODguNTA1IDI1NiAzNC40ODQgMTAxLjI1NWMtOS4zMzUtOS4zNzktOS4zMTctMjQuNTQ0LjA0LTMzLjkwMWwyMi42NjctMjIuNjY3YzkuMzczLTkuMzczIDI0LjU2OS05LjM3MyAzMy45NDEgMEwyODUuNDc1IDIzOS4wM2M5LjM3MyA5LjM3MiA5LjM3MyAyNC41NjguMDAxIDMzLjk0MXoiPjwvcGF0aD48L3N2Zz4=);
}
.lcms_default_theme .lcms_play *:before {
    background-size: 9px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJwbGF5IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtcGxheSBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQyNC40IDIxNC43TDcyLjQgNi42QzQzLjgtMTAuMyAwIDYuMSAwIDQ3LjlWNDY0YzAgMzcuNSA0MC43IDYwLjEgNzIuNCA0MS4zbDM1Mi0yMDhjMzEuNC0xOC41IDMxLjUtNjQuMSAwLTgyLjZ6Ij48L3BhdGg+PC9zdmc+);
}
.lcms_default_theme .lcms_play.lcms_pause *:before {
    background-size: 11px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJwYXVzZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLXBhdXNlIGZhLXctMTQiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTQ0IDQ3OUg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWNzljMC0yNi41IDIxLjUtNDggNDgtNDhoOTZjMjYuNSAwIDQ4IDIxLjUgNDggNDh2MzUyYzAgMjYuNS0yMS41IDQ4LTQ4IDQ4em0zMDQtNDhWNzljMC0yNi41LTIxLjUtNDgtNDgtNDhoLTk2Yy0yNi41IDAtNDggMjEuNS00OCA0OHYzNTJjMCAyNi41IDIxLjUgNDggNDggNDhoOTZjMjYuNSAwIDQ4LTIxLjUgNDgtNDh6Ij48L3BhdGg+PC9zdmc+) !important;
}
.lcms_default_theme .lcms_disabled_btn:before {
	opacity: 0.35;	
}
.lcms_default_theme .lcms_prev:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_next:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_play *:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_prev:not(.lcms_disabled_btn):focus:before,
.lcms_default_theme .lcms_next:not(.lcms_disabled_btn):focus:before,
.lcms_default_theme .lcms_play *:not(.lcms_disabled_btn):focus:before{
    opacity: .9;
}


/* default nav dots */
.lcms_default_theme .lcms_nav_dots span {
	border-radius: 50%;
	background: transparent;
	border: 2px solid #777;
	display: inline-block;
	height: 13px;
	width: 13px;	
	margin: 0 6px;
	cursor: pointer;
	transition: all .3s ease;
}
.lcms_default_theme .lcms_nav_dots span:not(.lcms_sel_dot):hover {	
	box-shadow: 0 -9px 0 0 #999 inset;
}
.lcms_default_theme .lcms_nav_dots span.lcms_sel_dot {
	box-shadow: 0 -9px 0 0 #cfcfcf inset;
}


/* default play/pause style */
.lcms_default_theme .lcms_play {
	right: 10px;	
	left: auto;
}


#mobile-picture-slide, .mobile-picture-slide {
  width: 100%;
  height: 58vw;
  margin-bottom:50px;
}
#desktop-picture-slide, .desktop-picture-slide {
  width: 100%;
  height: 58%;
  margin-bottom:50px;
}
.mobile-picture-slide-image-title-wrapper, .desktop-picture-slide-image-title-wrapper {
  display: none;
}
.mobile-picture-slide-image-title-wrapper .mobile-pic-ds-slide-title,
.desktop-picture-slide-image-title-wrapper .desktop-pic-ds-slide-title {
  display: none;
}
.mobile-picture-slide:is(.text_under_picture, .pic_downloadable) .lcms_nav_dots,
.desktop-picture-slide:is(.text_under_picture, .pic_downloadable) .lcms_nav_dots {
  bottom: -65px;
}
.mobile-picture-slide:not(.text_under_picture, .pic_downloadable) .text-under-picture-title,
.desktop-picture-slide:not(.text_under_picture, .pic_downloadable) .text-under-picture-title {
  display: none;
}
.mobile-picture-slide .text-under-picture-title,
.desktop-picture-slide .text-under-picture-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -35px;
  text-align: center;
}
.lcms_default_theme .lcms_nav {
  display: flex;
  flex-direction: row;
  right: 10px;
  bottom: 10px;
  align-items: center;
  justify-content: space-between;
}
.lcms_default_theme.lcms_default_theme .lcms_nav * {
  float: unset;
  display: block;
}
.lcms_wrap.lcms_default_theme.lcms_default_theme .lcms_nav {
  /* always display arrows */
  opacity: 1;
  transform: scale(1);
}

.lcms_wrap :is(.lcms_nav, .lcms_nav_dots, .lcms_play) {
  z-index:99;
}
.lcms_default_theme.lcms_wrap {
  border:0;
}

.details_content {
  --details-slide-transition-duration: 800ms;
  overflow-y: hidden;
  transition: grid-template-rows var(--details-slide-transition-duration) ease-out;

  /* hack to animate height */
  display: grid;
  grid-template-rows: 0fr;
}

.details_content > * {
  /* needs to be here so the animation hack works, otherwise grid-template-rows: 0fr; is ignored */
  overflow: hidden;
}

.details_content.slide-open {
  /* hack to animate height */
  transition: grid-template-rows var(--details-slide-transition-duration) ease-in;
  grid-template-rows: 1fr;
}

.details-main-button:empty {
  display: none;
}

.special-price-meta {
  margin-top: 4px;
  font-size: 90%;
}

.special-price-meta .special-price-end {
  display: block;
}

.special-price-meta .special-price-countdown {
  display: block;
  font-weight: bold;
}

.cookie-consent-button {
  border-radius: 50%;
  background-color: #ffffff;
  cursor: pointer;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MHB4Ig0KCSBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkViZW5lXzEiPg0KPC9nPg0KPGcgaWQ9IkViZW5lXzIiPg0KCTxwYXRoIGZpbGw9IiMxRDFEMUIiIGQ9Ik0yOC4xNzYsMTEuNjcyYy03LjM3NSwwLjU1Ny04Ljc3MS01LjI0Mi03LjYyOC03LjcxM2gtMi42NmwtNC4wOCwxLjA5M2wtMy42NTgsMi4xMTJMNy4xNjQsMTAuMTUNCgkJbC0yLjExMiwzLjY1OGwtMS4wOTMsNC4wNzl2NC4yMjRsMS4wOTMsNC4wOGwyLjExMiwzLjY1OGwyLjk4NywyLjk4NmwzLjY1OCwyLjExMWw0LjA4LDEuMDk0aDQuMjI0bDQuMDc5LTEuMDk0bDMuNjU4LTIuMTExDQoJCWwyLjk4Ni0yLjk4NmwyLjExMi0zLjY1OGwxLjA5My00LjA4di0zLjA2OUMyNy42NzYsMjAuNTk3LDI4LjE3NiwxMS42NzIsMjguMTc2LDExLjY3MnogTTEzLjE1MSwyOC4zNTMNCgkJYy0xLjA4NCwwLTEuOTYzLTAuODgtMS45NjMtMS45NjRzMC44NzktMS45NjMsMS45NjMtMS45NjNzMS45NjMsMC44NzksMS45NjMsMS45NjNTMTQuMjM1LDI4LjM1MywxMy4xNTEsMjguMzUzeiBNMTQuNDgxLDE1LjYzMg0KCQljLTEuMDg0LDAtMS45NjMtMC44NzktMS45NjMtMS45NjNjMC0xLjA4NSwwLjg3OS0xLjk2NCwxLjk2My0xLjk2NGMxLjA4NCwwLDEuOTYzLDAuODc5LDEuOTYzLDEuOTY0DQoJCUMxNi40NDQsMTQuNzUzLDE1LjU2NSwxNS42MzIsMTQuNDgxLDE1LjYzMnogTTI2LjM5NywyNS4wNzVjLTEuMDg0LDAtMS45NjMtMC44OC0xLjk2My0xLjk2M2MwLTEuMDg0LDAuODc5LTEuOTYzLDEuOTYzLTEuOTYzDQoJCXMxLjk2MywwLjg3OSwxLjk2MywxLjk2M0MyOC4zNiwyNC4xOTUsMjcuNDgxLDI1LjA3NSwyNi4zOTcsMjUuMDc1eiIvPg0KPC9nPg0KPGcgaWQ9IkViZW5lXzMiPg0KPC9nPg0KPC9zdmc+DQo=);
  background-size: 100% 100%;
}

.cookie-consent-button-small {
  width: 2rem;
  height: 2rem;
  line-height: 2em;
}

#cookie-consent-button {
  width: 60px;
  height:60px;
  position:fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999980;
}

.cookie-consent-banner-button > .cookie-consent-button {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.cookie-consent-banner-button > * {
  vertical-align: middle;
}

body:is(.has-captcha, .show-cookie-consent-button, .privacy, .admin-login) #cookie-consent-button {
  display: block;
}

.cookie-consent-banner {
  box-sizing: border-box;
  width: 100%;
  z-index: 9999990;
  background-color: #efefef;
  position:fixed;
  left: 0;
  bottom: 0;
  min-height: 150px;
  color: #3e3d40;
  margin: 0;
  padding: 5px 25px 25px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.cookie-consent-banner button, .cookie-consent-settings button {
  color: #B50000;  /*#e5352d;*/
  cursor: pointer;
}

.cookie-consent-banner a, .cookie-consent-banner a:link, .cookie-consent-banner a:visited, .cookie-consent-settings a, .cookie-consent-settings a:link, .cookie-consent-settings a:visited {
  color: #B50000;
}

.cookie-consent-banner a:hover, .cookie-consent-settings a:hover {
  color: #3e3d40;
}

.cookie-consent-banner-text {
  padding-top:10px;
  max-width: 1050px;
  color: #444444;
}

.cookie-consent-banner-buttons {
  max-width: 1050px;
  text-align: center;
  font-size: 20px;
  padding-top: 15px;
  margin-top: auto;
  margin-bottom: 0;
}

.cookie-consent-banner-button {
  font-size: 15px;
  border: none;
  display: block;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  background: none;
}

.cookie-consent-settings {
  box-sizing: border-box;
  background-color: #efefef;
  width: 100vw;
  max-height: 600px;
  height: 70vh;
  position:fixed;
  left: 0;
  bottom: 0;
  z-index: 9999995;
  color: #3e3d40;
  padding: 8px;
  border: lightgrey solid 1px;
  display: flex;
  flex-direction: column;
}

.cookie-consent-settings * {
  box-sizing: border-box;
}

.cookie-consent-settings-title {
  color: #3e3d40;
  font-size: 22px;
}

.cookie-consent-cookie-area {
  overflow-y: scroll;
  margin-bottom: 0;
  flex-grow: 1;
  margin-top: 10px;
  padding-bottom: 5px;
}

.cookie-consent-cookie {
  padding-top: 5px;
  padding-bottom: 5px;
}

.cookie-consent-settings-footer {
  margin-bottom: 0;
  margin-top: 5px;
  display: flex;
  flex-direction: row;
}

.cookie-consent-settings-footer-links {
  margin-left: 0;
  margin-right: auto;
}

.cookie-consent-settings-button-area {
  margin-right: 0;
  margin-left: auto;
}

.cookie-consent-settings-button  {
  background-color: #d9dadb;
  border: 1px solid black;
  min-height: 30px;
  min-width: 150px;
  border-radius: 5px;
  box-sizing: border-box;
  text-transform: uppercase;
}

.cookie-consent-details-link {
  padding-left: 34px;
}

.cookie-consent-details {
  position: relative;
  background: #ffffff;
  width:100%;
  padding: 5px 5px 5px 40px;
  margin-top: 5px;
  color: #030303;
}

.cookie-consent-details a:hover {
  color: #030303;
}

.cookie-consent-details > label {
  font-size: 16px;
}

.cookie-consent-details > p {
  margin-bottom: 15px;
}

.cookie-consent-close-button {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 30px;
  line-height: 14px;
  z-index: 1;
  cursor: pointer;
}

.cookie-consent-settings-close-button, .cookie-consent-settings-close-button:hover {
  position: absolute;
  right: 8px;
  top: 10px;
  font-size: 45px;
  line-height: 14px;
  z-index: 1;
  cursor: pointer;
}

.cookie-consent-setting-entry {
  margin-bottom: 20px;
}

.cookie-consent-introtext {
  padding-top:8px;
}

.cookie-consent-close-button,
.cookie-consent-settings-close-button {
  padding: 0 5px 5px 20px;
}


/* prevent cookie banner overlapping imprint and privacy policy */
body.privacy #col3_content, body.imprint #col3_content {
  padding-bottom: 200px;
}

.cookie-consent-details .checkmark {
  background-color: #eee;
}

#cookie-consent-detail-essential a,
#cookie-consent-detail-marketing a,
#cookie-consent-detail-functional a {
  word-wrap: break-word;
}

@media only screen and (min-device-width: 40em) {
  .cookie-consent-banner {
    padding: 5px 20px 10px;
    border-radius: 20px;
    width: 80vw;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 50px;
    min-height: 0;
    justify-content: center;
  }

  .cookie-consent-banner-button {
    margin-left: 0;
  }

  .cookie-consent-banner-buttons {
    margin-bottom: auto;
  }

  .cookie-consent-banner-button > .cookie-consent-button {
    width: 30px;
    height: 30px;
  }

  .cookie-consent-settings {
    width: 300px;
    height: 600px;
    left: 20px;
    bottom: 95px;
    border-radius: 15px;
  }
}

@media only screen and (min-width: 40em) {
  .cookie-consent-banner {
    flex-direction: row;
  }

  .cookie-consent-banner-buttons {
    margin-left: 50px;
  }
}

.dataset-popup {
  position: fixed;
  margin-left: auto;
  margin-right: auto;

  padding: 5px 20px 10px;
  border-radius: 20px;

  background-color: #ffffff;
  border-width: 3px;
  border-color: black;
  border-style: solid;

  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.dataset-popup-content > ul > li {
  list-style-type: none;
  margin-left: 0;
}

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) YAML core stylesheet
 * (de) YAML Basis-Stylesheet
 *
 * Don't make any changes in this file!
 * Your changes should be placed in any css-file in your own stylesheet folder.
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.6
 * @revision        $Revision: 202 $
 * @lastmodified    $Date: 2008-06-07 14:29:18 +0200 (Sa, 07 Jun 2008) $
 */

@media all
{
 /*------------------------------------------------------------------------------------------------------*/

 /**
  * @section browser reset
  * @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
  */

  /* (en) Global reset of paddings and margins for all HTML elements */
  /* (de) Globales Zurücksetzen der Innen- und Außenabstände für alle HTML-Elemente */
  * { margin:0; padding: 0; }

  /* (en) Correction: margin/padding reset caused too small select boxes. */
  /* (de) Korrektur: Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
  option { padding-left: 0.4em; }

 /**
  * (en) Global fix of the Italics bugs in IE 5.x and IE 6
  * (de) Globale Korrektur des Italics Bugs des IE 5.x und IE 6
  *
  * @bugfix
  * @affected   IE 5.x/Win, IE6
  * @css-for    IE 5.x/Win, IE6
  * @valid      yes
  */
  * html body * { overflow:visible; }
  * html iframe, * html frame { overflow:auto; }
  * html frameset { overflow:hidden; }

  /* (en) Forcing vertical scrollbars in Netscape, Firefox and Safari browsers */
  /* (de) Erzwingen vertikaler Scrollbalken in Netscape, Firefox und Safari Browsern */
  html { height: 100%; margin-bottom: 1px; }
  body {
    /* (en) Fix for rounding errors when scaling font sizes in older versions of Opera browser */
    /* (de) Beseitigung von Rundungsfehler beim Skalieren von Schriftgrößen in älteren Opera Versionen */
    font-size: 100.01%;

    /* (en) Standard values for colors and text alignment */
    /* (de) Vorgabe der Standardfarben und Textausrichtung */
    color: #000;
    background: #fff;
    text-align: left;
  }

  /* (en) Clear borders for <fieldset> and <img> elements */
  /* (de) Rahmen für <fieldset> und <img> Elemente löschen */
  fieldset, img { border: 0 solid; }

  /* (en) new standard values for lists, blockquote and cite */
  /* (de) Neue Standardwerte für Listen & Zitate */
  ul, ol, dl { margin: 0 0 1em 1em }
  li { margin-left: 1.5em; line-height: 1.5em; }

  dt { font-weight: bold; }
  dd { margin: 0 0 1em 2em; }

  blockquote { margin: 0 0 1em 1.5em; }

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

 /**
  * @section base layout | Basis Layout
  * @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
  *
  * |-------------------------------|
  * | #header                       |
  * |-------------------------------|
  * | #col1   | #col3     | #col2   |
  * | 200 px  | flexible  | 200px   |
  * |-------------------------------|
  * | #footer                       |
  * |-------------------------------|
  */

  #header { position:relative; }

  /* (en) Text Alignment for #topnav content */
  /* (de) Textausrichtung für #topnav Inhalte */
  #topnav { text-align: right; } 

  /* (en) Absolute positioning only within #header */
  /* (de) Absolute Positionierung erfolgt nur innerhalb von #header */
  #header #topnav {
    position:absolute;
    top: 10px;
    right: 10px;
  }

  /* (en) Backup for correct positioning */
  /* (de) Absicherung korrekte Positionierung */
  #header, #nav, #main, #footer { clear:both; }

  /* (en/de) Standard: 200 Pixel */
  #col1 { float: left; width: 200px }
  /* (en/de) Standard: 200 Pixel */
  #col2 { float:right; width: 200px }
  /* (en) Standard: center column with flexible width */
  /* (de) Standard: Flexible mittlere Spalte */
  #col3 { width:auto; margin: 0 200px }

  /* (en) Preparation for absolute positioning within content columns */
  /* (de) Vorbereitung für absolute Positionierungen innerhalb der Inhaltsspalten */
  #col1_content, #col2_content, #col3_content { position:relative; }

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

 /**
  * @section generic classes for layout switching | Generische Klassen zur Layoutumschaltung
  * @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
  *
  * .hidecol1 -> 2-column-layout (using #col2 and #col3)
  * .hidecol2 -> 2-column-layout (using #col1 and #col3)
  * .hideboth -> single-column-layout (using #col3)
  */

  .hideboth #col3 { margin-left: 0; margin-right: 0; }
  .hidecol1 #col3 { margin-left: 0; margin-right: 200px; }
  .hidecol2 #col3 { margin-left: 200px; margin-right: 0; }

  .hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }

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

 /**
  * @section clearing methods
  * @see     http://yaml.de/en/documentation/basics/general.html
  */

  /* (en) clearfix method for clearing floats */
  /* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
   .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  /* (en) essential for Safari browser !! */
  /* (de) Diese Angabe benötigt der Safari-Browser zwingend !! */
  .clearfix { display: block; }

  /* (en) overflow method for clearing floats */
  /* (de) Overflow-Methode zum Clearen der Float-Umgebungen */
  .floatbox { overflow:hidden; }

  /* (en) IE-Clearing: Only used in Internet Explorer, switched on in iehacks.css */
  /* (de) IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
  #ie_clearing { display: none; }

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

 /**
  * @section subtemplates
  * @see     http://www.yaml.de/en/documentation/practice/subtemplates.html
  */

  .subcolumns { width: 100%; overflow:hidden; }

  /* (en) alternative class for optional support of old Mozilla/Netscape browers */
  /* (de) Alternative Klasse zur optionalen Unterstützung alter Mozilla/Netscape-Brower */
  .subcolumns_oldgecko { width: 100%; float:left; }

  .c50l, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; }
  .c50r, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; margin-left: -5px; }

  .c25l, .c25r { width: 25%; }
  .c33l, .c33r { width: 33.333% !important; }
  .c50l, .c50r { width: 50%; }
  .c66l, .c66r { width: 66.666%; }
  .c75l, .c75r { width: 75%; }
  .c38l, .c38r { width: 38.2%; }
  .c62l, .c62r { width: 61.8%; }

  .subc  { padding: 0 0.5em; }
  .subcl { padding: 0 1em 0 0; }
  .subcr { padding: 0 0 0 1em; }

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

 /**
  * @section hidden elements | Versteckte Elemente
  * @see     http://www.yaml.de/en/documentation/basics/skip-links.html
  *
  * (en) skip links and hidden content
  * (de) Skip-Links und versteckte Inhalte
  */

  /* (en) classes for invisible elements in the base layout */
  /* (de) Klassen für unsichtbare Elemente im Basislayout */
  .skip, .hideme, .print {
    position: absolute;
    top: -1000em;
    left: -1000em;
    height: 1px;
    width: 1px;
  }

  /* (en) make skip links visible when using tab navigation */
  /* (de) Skip-Links für Tab-Navigation sichtbar schalten */
  .skip:focus, .skip:active {
    position: static;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
  }
}

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Horizontal list navigation "Shiny Buttons"
 * (de) Horizontale Navigationsliste "Shiny Buttons"
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.6
 * @revision        $Revision: 202 $
 * @lastmodified    $Date: 2008-06-07 14:29:18 +0200 (Sa, 07 Jun 2008) $
 */

@media all
{
  #nav_main {
    /* (en) containing floats in IE */
    /* (de) Einfassen der Floats im IE */
    width: 100%;
    overflow: hidden;
    /* (en) containing floats in all other browsers */
    /* (de) Einfassen der Floats in allen anderen Browsern */
    float: left;
    display: inline;
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    border-top: 1px #333 solid;
    border-bottom: 1px #333 solid;
    line-height: 0;
  }

  #nav_main ul {
    border-left: 1px #aaa solid;
    border-right: 1px #fff solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    margin: 0;
    /* (en) Left margin of the first button  */
    /* (de) Abstand des ersten Buttons vom linken Rand  */
    margin-left: 50px;
    padding: 0;
  }

  #nav_main ul li {
    border-left: 1px #fff solid;
    border-right: 1px #aaa solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  #nav_main ul li a,
  #nav_main ul li strong {
    display: block;
    margin: 0;
  }

  #nav_main ul li a:focus,
  #nav_main ul li a:hover,
  #nav_main ul li a:active  {  text-decoration: none; }

  #nav_main ul li#current {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: #272727 url(data:image/gif;base64,R0lGODlhQABQANUAABISEhgYGBYWFg4ODhQUFBAQED8/Px8fH1VVVSQkJERERFBQUDAwMExMTDQ0ND09PTMzMyoqKhsbGyIiIiEhIVhYWEpKSkZGRkBAQDs7OzY2NjIyMi8vLy0tLSYmJh0dHRoaGlNTU1RUVEJCQigoKDg4OFZWVkVFRVdXV1JSUk5OTk9PT01NTUtLS0lJSUdHR0FBQTw8PDo6OlFRUTk5OTc3NzU1NTExMS4uLiwsLB4eHisrKykpKScnJyMjI0hISCH5BAAAAAAALAAAAABAAFAAAAb/wIFwSCwaj8ikcslsOp/QqHRKrVqHhax2y+16v+AwGEAum8/otHrNbrvf8Lh8Tq/b7/gyYc/v+/+AgYKDggKGh4iJiouMjY6PkJGSk4wBlpeYmZqbnJ2en6ChoqOkpaanliCqq6ytrq+wsbKxErW2t7i5uru8vb6/wMHCux/FxsfIycrLzM3MOtDR0tPU1dbX2NcH29zd3t/g4eLj5OXm5+jhFOvs7e7v8PHy8/IT9vf4+fr7/P3+/T4CChxIsKDBgwgTIkzAsKHDhxAjSpxIsaLFixgzSvTAsaPHjyBDihxJcmSPkyhTqlzJsqXLly5JyJxJs6bNmzhz6szJo6fP/59AgwodSrQo0QhIkypdyrSp06dQn+6YSrWq1atYs2rdqjWH169gw4odS7as2bId0qpdy7at27dw48LFQbeu3bt48+rdy3cvh7+AAwseTLiw4cOGGShezLix48eQI0uOfKOy5cuYM2vezLkz5w2gQ4seTbq06dOoT0NYzbq169ewY8ueLduB7du4c+vezbu37942ggsfTry48ePIkyPXwLy58+fQo0ufTn16jevYs2vfzr279+/eS4gfT768+fPo06tPT6O9+/fw48ufT78+fRn48+vfz7+///8A/pfBgAQWaOCBCCao4IIKxuDggxBGKOGEFFZoYYUPZKjhhhx26P/hhyCGCKIBJJZo4okopqjiiiy26OKLMMaoIgY01mjjjTjmqOOOPO4Iw49ABinkkEQWaeSRRo6g5JJMNunkk1BGKWWUClRp5ZVYZqnlllx26eWXYIYp5pYnlGnmmWimqeaabLbJ5gVwxinnnHTWaeedeN75wp589unnn4AGKuiggv5g6KGIJqrooow26mijLkQq6aSUVmrppZhmiqkFnHbq6aeghirqqKSO2sKpqKaq6qqsturqq642IOustNZq66245qprriz06uuvwAYr7LDEFkusCsgmq+yyzDbr7LPQPrvCtNRWa+212Gar7bbaLuDtt+CGK+645JZr7rnopqt57rrkzuDuu/DGK++89NZrb70p5Kvvvvz26++/AAcMcAgEF2zwwQgnrPDCDC8swsMQRyzxxBRXbPHFFiOg8cYcd+zxxyCHLPLIJJds8skgm6Dyyiy37PLLMMcsc8wo1GzzzTjnrPPOPPfMcwVABy300EQXbfTRSB8dBAA7) repeat-x center right;
    border-left: 1px #444 solid;
    border-right: 1px #888 solid;
  }

  #nav_main ul li#current strong,
  #nav_main ul li#current a,
  #nav_main ul li#current a:focus,
  #nav_main ul li#current a:hover,
  #nav_main ul li#current a:active { background: transparent; color: #fff; text-decoration: none; }
}

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Vertical list navigation "vlist"
 * (de) Vertikale Navigationsliste "vlist"
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.6
 * @revision        $Revision: 202 $
 * @lastmodified    $Date: 2008-06-07 14:29:18 +0200 (Sa, 07 Jun 2008) $
 */

@media all
{
  #submenu {
    width: 100%;
    overflow: hidden;
    margin: 2.4em 0 1.5em 0;
    list-style-type: none;
    border-top: 2px #ddd solid;
    border-bottom: 2px #ddd solid;
  }

  #submenu ul { list-style-type: none; margin:0; padding: 0; }
  #submenu li { float:left; width: 100%; margin:0; padding: 0; }

  #submenu a,
  #submenu strong {
    display:block;
    border-bottom: 1px #eee solid;
  }

  /* Menu Title */
  #submenu li#title {
    width: 90%;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    color: #444;
    background-color: #fff;
    border-bottom: 4px #888 solid;
  }

  #submenu li span {
    display:block;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    border-bottom: 1px #ddd solid;
  }

  /* Level 1 */
  #submenu li#active,
  #submenu li strong {
    width: 90%;
    padding: 3px 0px 3px 10%;
    font-weight: bold;
    color: #fff;
    background-color:#aab;
    border-bottom: 1px #eee solid;
  }


  /* Level 2 */
  #submenu li ul li a,
  #submenu li ul li#active,
  #submenu li ul li strong,
  #submenu li ul li span { width: 80%; padding-left: 20%; }

  /* Level 3 */
  #submenu li ul li ul li a,
  #submenu li ul li ul li#active,
  #submenu li ul li ul li strong,
  #submenu li ul li ul li span { width: 70%; padding-left: 30%; }


  /* Level 4 */
  #submenu li ul li ul li ul li a,
  #submenu li ul li ul li ul li#active,
  #submenu li ul li ul li ul li strong,
  #submenu li ul li ul li ul li span { width: 60%; padding-left: 40%; }

}
@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Template for designing a screen layout
 * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
 *
 * @copyright       Copyright 2005-2008, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.0.6
 * @revision        $Revision: 202 $
 * @lastmodified    $Date: 2008-06-07 14:29:18 +0200 (Sa, 07 Jun 2008) $
 */

@media screen, projection
{
 /*------------------------------------------------------------------------------------------------------*/

 /**
  * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
  *
  * @section layout-basics
  */

  /* Page margins and background | Randbereiche & Seitenhintergrund */
  body {  }

  /* Layout: Width, Background, Border | Layout: Breite, Hintergrund, Rahmen */
  #page_margins {  }
  #page{  }

  /* Design of the Main Layout Elements | Gestaltung der Hauptelemente des Layouts */
  #header {  }
  #topnav {  }

  #main {  }

  #footer {  }

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

 /**
  * Formatting of the Content Area | Formatierung der Inhaltsbereichs
  *
  * @section layout-main
  */

  #col1 {  }
  #col1_content {  }

  #col2 {  }
  #col2_content {  }

  #col3 {  }
  #col3_content {  }


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

 /**
  * Design of Additional Layout Elements | Gestaltung weiterer Layoutelemente
  *
  * @section layout-misc
  */


}


body#hugerte {
  padding: 10px;
  min-width: unset;
  width: unset;
}

body#hugerte h1 {
  font-size: 20pt;
}

html {
  min-height: 100dvh;
}

body.flexbox-mod {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  #button_pic_container,
  #page_margins,
  #page,
  #col3 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  #col3_content {
    flex-grow: 1;
    margin-left: 0;
    margin-right: 0;
  }

  #main {
    flex-grow: 1;
    display: grid;
    grid-template-columns: max-content auto max-content;
    grid-template-areas: "col1 col3 col2";
  }

  #col1 {
    grid-area: col1;
  }
flexbox_mod
  #col2 {
    grid-area: col2;
  }

  #col3 {
    grid-area: col3;
  }
}

/* Breadcrumb trail inserted by the {#breadcrumbs} placeholder.
   Every item is a wrapper span around its link, so the separator generated by
   ::after is not part of the link and is therefore not clickable. */
.breadcrumbs {
  display: inline;
  --breadcrumbs-separator: " » ";
}

/* Override --breadcrumbs-separator to change the separator. Do not replace
   this rule with a broad .breadcrumbs-item::after override: that would also
   match the last crumb, which must stay separator-free. */
.breadcrumbs-item:not(:last-child)::after {
  content: var(--breadcrumbs-separator, " » ");
  white-space: pre;
}

nav.header-nav #nav_main {
  overflow: visible;
}

nav.header-nav ul.menu-hierarchy-level > li {
  anchor-scope: --header-nav-parent;
}

/** I need higher specificity here to overwrite other css **/
nav.header-nav #nav_main ul.menu-hierarchy-level {
  display: none;
  margin-top: 0;
  float: unset;
}
nav.header-nav #nav_main ul.menu-hierarchy-level li {
  float: unset;
  display: block;
}
nav.header-nav #nav_main ul.menu-hierarchy-level.top-level {
  display: flex;
  position: static;
  margin-top: 1rem;
}

nav.header-nav .topnav_wrapper {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "--topnav-left --topnav-right";
  gap: 3rem;
  grid-auto-flow: dense row;
  flex-shrink: 0;
  contain: layout;
}

nav.header-nav .topnav_wrapper:has(> .toplogo-right) {
  grid-template-columns: 1fr min-content;
}

nav.header-nav .topnav_wrapper:has(> .toplogo-right) ul.top-level {
  justify-self: start;
}

nav.header-nav .toplogo-left {
  justify-self: start;
  grid-column: --topnav-left;
}

nav.header-nav .toplogo-right {
  justify-self: end;
  grid-column: --topnav-right;
}

nav.header-nav ul.menu-hierarchy-level {
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  height: fit-content;
  position-anchor: --header-nav-parent;

  position-try: --parent-left, --maximum-right;
}

/* category or sub-category that is hovered over */
nav.header-nav #nav_main ul.menu-hierarchy-level > li:hover > ul.menu-hierarchy-level,
/* active category if no other is hovered */
nav.header-nav #nav_main .top-level:not(:has(:hover)):not(:hover) ul.menu-hierarchy-level:has(.subbutton_active)
{
  display: flex;
}

nav.header-nav ul.menu-hierarchy-level.top-level {
  anchor-name: --header-nav-toplevel;
  justify-self: end;
  overflow-x: clip;
}

@position-try --parent-left {
  left: anchor(--header-nav-parent left);
  right: unset;
}

@position-try --maximum-right {
  right: anchor(--header-nav-toplevel right);
  left: unset;
}




#footer {
  position: static;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background:transparent;
  color:#888888;
  overflow: hidden;
  border-color:#AAAAAA;
  font-size:12px;
  font-weight:lighter;

  a {
    border-left:1px solid;
    padding:12px 0 0 5px;
    line-height:14px;
  }

  div {
    margin-top: 2px;
  }

  .subcolumns {
    position: relative;
    left: -50%;
  }

  .footer_table {
    margin-top:4px;
  }
}

#footer2 {
  overflow: hidden;

  .footer_content {
    padding:5px;
  }
}

.reset-password-form {
  margin-left: 0;
}

.registration-form {
  &.desktop-registration-form {
    margin: 3px;
  }

  input:is([type="text"], [type="number"], [type="password"], [type="tel"], [type="email"]), textarea, select {
    width: 100%;
    box-sizing: border-box;
  }

  .email_frame_bg td:has(.email_req_table_mobile) {
    padding: 0;
  }

  .email_req_table_mobile {
    width: 100%;
  }

  input.customer-zip {
    width: 100px;
  }
}

.shop-customer-extra-field {
  textarea:is(&) {
    min-height: 15em;
  }

  width: 100%;
}

.mobile-body {
  .new_costumer,
  .registered_costumer,
  #sendpw_form
  {
    width: 100%;

    input:is([type="text"], [type="number"], [type="password"], [type="tel"], [type="email"]), textarea, select {
      width: 100%;
    }
  }

  #sendpw_form table {
    width: 100%;
  }
}

.userorders {
  .data_table td {
    padding: 0.25em;
  }

  .cancellation-button {
    font-weight: bold;
    display: inline-block;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 0.25em;
  }
}

.cancellation-form {
  padding: 1em;

  .contact-mail-notice {
    font-size: smaller;
  }

  div:has(> .contact-mail-notice) {
    text-align: right;
  }
}



.shop-cancellation-button {
  position: absolute;
  right: 2em;
  top: max(5em, 20vh);
  z-index: 100;
}

:is(.shop-cancellation-button form) {
  width: fit-content;
}

:is(.shop-cancellation-button button) {
  border: 2px solid #000;
  padding: 0.5em;
  border-radius: 10px;
  font-weight: bold;
  opacity: 0.85;
}





.grid-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 0.5em;

  * {
    box-sizing: border-box;
  }

  label {
    font-weight: bold;

    &:has(+ [required])::after {
      content: "*";
      color: red;
      margin-left: 0.25em;
    }
  }

  & > .full-width {
    grid-column: 1 / -1;
  }

  textarea {
    width: 100%;
    min-height: 20ch;
  }

  .invalid:is(textarea, input, select) {
    outline: red 2px solid;
  }
}

@media (min-width: 600px) {
  .grid-form {
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 2fr);
  }
}



/** Pure-CSS smooth scrolling with scroll-overhang compensation:
    --nav-offset is set per page from the layout's "Scroll-Überhang-Kompensierung"
    (overlay_offset), or measured from the compiled nav by ui/nav-offset. */
html, body {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-offset, 0px);
}

.hidden {
  display: none;
}

.fake-link {
  cursor: pointer;
}




dialog {
  position: relative;
  border-radius: 5px;
  margin: auto;
  padding: 10px;
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

dialog > header {
  display: flex;
  gap: 1em;
  align-items: center;
}

dialog > header:has(> form[method="dialog"]:only-child) {
  float: right;
}

dialog > header > h2 {
  margin: 0;
}

dialog > header form {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}

dialog .close-button {
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  font-size: 40px;
}

dialog .close-button:focus-visible {
  outline: none;
}



dialog .share-list > ul li {
  list-style: none;
}

:is(.dataset-share-button, dialog .share-button) {
  background: transparent;
  border-radius: 5px;
  border: solid 2px var(--share-button-border-color);
  padding: 0.5em;
  cursor: pointer;
  text-decoration: none;
  color: var(--share-button-color);
}

dialog .share-button {
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-top: 0.25em;
  text-align: center;
}

:is(.dataset-share-button, dialog .share-button):link {
  color: var(--share-button-color);
}
:is(.dataset-share-button, dialog .share-button):visited {
  color: var(--share-button-color);
}

:is(.dataset-share-button, dialog .share-button):hover {
  background: rgba(0, 0, 0, 0.1);
}

:is(.dataset-share-button, dialog .share-button):active {
  background: rgba(0, 0, 0, 0.25);
}

dialog .share-button-whatsapp .fa-whatsapp {
  color: #25D366;
}

.dataset-share-modal {
  width: 100vw;
  margin-bottom: 0;
  margin-top: auto;
  min-height: 50vh;
}

@property --share-button-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #777777;
}

@property --share-button-border-color {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0,.5);
}


/*# sourceMappingURL=frontendDesktop.8427979d07d94d66a990.css.map*/