comand-component-library 4.0.1 → 4.0.2

package/dist/style.css

@@ -1 +1 @@
-.iconify{font-size:var(--icon-size);vertical-align:text-bottom;&+span,span&+{margin-left:calc(var(--default-margin) / 2)}}.edit-component-wrapper{border:.1rem dashed transparent;transition:var(--default-transition);display:block}.edit-component-wrapper:hover,.edit-component-wrapper:active,.edit-component-wrapper:focus{border-color:var(--primary-color);background:hsla(0deg,0%,100%,.1);transition:var(--default-transition)}.edit-component-wrapper:focus,.edit-component-wrapper.active{border-style:solid;border-color:var(--primary-color)}.edit-component-wrapper:focus .action-buttons,.edit-component-wrapper.active .action-buttons{opacity:1;transition:var(--default-transition)}.edit-component-wrapper.highlight{border-color:var(--hyperlink-color-highlighted);border-style:dotted}.edit-component-wrapper .cmd-headline{margin:0}.edit-component-wrapper .component-name{display:none;position:absolute;left:auto;right:10rem;font-style:italic;z-index:10;padding:.2rem;background:var(--primary-color)}.edit-component-wrapper.active .component-name{display:block}.edit-component-wrapper .action-buttons{--action-buttons-size: 3.6rem;transition:var(--default-transition);gap:0;position:absolute;top:-1.8rem;right:.8rem;z-index:1;margin:0}.edit-component-wrapper .action-buttons li:nth-child(odd){top:0}.edit-component-wrapper .action-buttons li:nth-child(even){top:-1.6rem}.edit-component-wrapper .action-buttons li:nth-child(5){right:0}.edit-component-wrapper .action-buttons li:nth-child(4){right:calc(var(--action-buttons-size) * -.25)}.edit-component-wrapper .action-buttons li:nth-child(3){right:calc(var(--action-buttons-size) * -.5)}.edit-component-wrapper .action-buttons li:nth-child(2){right:calc(var(--action-buttons-size) * -.75)}.edit-component-wrapper .action-buttons li:nth-child(1){right:calc(var(--action-buttons-size) * -1)}.edit-component-wrapper .edit-items .action-buttons{gap:var(--default-gap-third);top:-2.3rem;left:0;right:auto;flex-wrap:nowrap;border-bottom:0;backdrop-filter:grayscale(1) brightness(1.5) blur(2rem) opacity(85%);border-radius:.5rem}.edit-component-wrapper .edit-items .action-buttons li{top:0;right:0;left:auto}.edit-component-wrapper .edit-items .action-buttons li:nth-child(5){right:0}.edit-component-wrapper .edit-items .action-buttons li:nth-child(4){right:var(--icon-font-size)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(3){right:calc(var(--icon-font-size) * 2)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(2){right:calc(var(--icon-font-size) * 3)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(1){right:calc(var(--icon-font-size) * 4)}.edit-component-wrapper .edit-items .action-buttons li a.button{border-radius:var(--full-circle);font-size:1rem;display:block;padding:.5rem;background:var(--button-background-color)}.edit-component-wrapper .edit-items .action-buttons li a.button:before{content:"";font-size:1rem}.edit-component-wrapper .edit-items .action-buttons li a.button span[class*=icon-]{font-size:var(--icon-size-small);position:relative;top:0;left:0;transform:none}.edit-component-wrapper .edit-items .action-buttons li a.button.primary{background:var(--primary-color)}.edit-component-wrapper .edit-items.active{background:var(--pure-white)}.edit-component-wrapper:not(.edit-items)>ul>li a.button{background:none!important}ul.edit-component-wrapper{border:0}ul.edit-component-wrapper>li{list-style-type:none;margin:0}ul.edit-component-wrapper>li.action-buttons-wrapper{display:flex;justify-content:flex-end;padding-top:.1rem}ul.edit-component-wrapper>li.action-buttons-wrapper .action-buttons{position:relative;top:auto}ul.edit-component-wrapper>li.item-wrapper{border:.1rem dashed transparent;transition:var(--default-transition)}ul.edit-component-wrapper>li.item-wrapper:hover,ul.edit-component-wrapper>li.item-wrapper:active,ul.edit-component-wrapper>li.item-wrapper:focus{border-color:var(--primary-color);background:hsla(0deg,0%,100%,.1);transition:var(--default-transition)}ul.edit-component-wrapper>li.item-wrapper:focus,ul.edit-component-wrapper>li.item-wrapper.active{border-style:solid;border-color:var(--primary-color)}ul.edit-component-wrapper>li.item-wrapper:focus .action-buttons,ul.edit-component-wrapper>li.item-wrapper.active .action-buttons{opacity:1;transition:var(--default-transition)}.cmd-headline{margin-bottom:var(--default-margin);gap:calc(var(--default-gap) / 2);&.text-center>*{text-align:center}&.text-right>*{text-align:right}&.has-pre-headline-text{text-align:inherit;> *:first-child {display: flex; align-items: flex-start; span[class*="icon"] {bottom: .2rem;}} &.text-center {> *:first-child {justify-content: center;}} &.text-right {> *:first-child {justify-content: flex-end;}} &.text-right > * {text-align: right;} &:has(h1) span[class*="icon"] {font-size: calc(var(--headline-font-size-h1) * 1.6);} &:has(h2) span[class*="icon"] {font-size: calc(var(--headline-font-size-h2) * 1.8);} &:has(h3) span[class*="icon"] {font-size: calc(var(--headline-font-size-h3) * 1.9);} &:has(h4) span[class*="icon"] {font-size: calc(var(--headline-font-size-h4) * 2);} &:has(h5) span[class*="icon"] {font-size: calc(var(--headline-font-size-h5) * 2.1);} &:has(h6) span[class*="icon"] {font-size: calc(var(--headline-font-size-h6) * 2.2);} .pre-headline-text-wrapper {display: flex; flex-direction: column;} .pre-headline-text {font-size: var(--default-font-size); font-weight: var(--font-weight-normal); line-height: 1;} &:has(h4,h5,h6) .pre-headline-text {font-size: var(--font-size-small);} &.has-icon {&.text-center {justify-content: center; * {text-align: left;}} &.text-right {justify-content: flex-end; * {text-align: left;}}}}p {margin-bottom: 0;} h1,h2,h3,h4,h5,h6 {margin: 0; &:only-child {flex: none; width: 100%;}}}.edit-mode label.headline{input {padding: 0; height: auto; font-weight: var(--headline-font-weight);} &.h1 input {font-size: var(--headline-font-size-h1); text-transform: var(--headline-text-transform);} &.h2 input {font-size: var(--headline-font-size-h2);} &.h3 input {font-size: var(--headline-font-size-h3);} &.h4 input {font-size: var(--headline-font-size-h4);} &.h5 input {font-size: var(--headline-font-size-h5);} &.h6 input {font-size: var(--headline-font-size-h6);}}.cmd-tooltip{padding:.6rem .7rem .4rem;line-height:100%;font-size:var(--font-size-small);position:fixed;background:var(--color-scheme-background-color);z-index:100;border:var(--default-border);border-color:#3e3f41;border-right-color:#cececf;border-bottom-color:#cececf;display:flex;flex-direction:column;.headline-wrapper {display: flex; a {margin-left: auto; [class*="icon-"] {padding-left: 1rem; font-size: var(--font-size-small);}}}}@-moz-document url-prefix(){.cmd-tooltip{font-size:1.3rem;border-color:#757575}}.cmd-list-of-requirements{dl {.error { --status-color: var(--error-color); [class*="icon-"] { color: var(--status-color); } } .warning { --status-color: var(--warning-color); } .success { --status-color: var(--success-color) !important; [class*="icon-"] { color: var(--status-color); } } .info { --status-color: var(--info-color); } dt {color: var(--status-color);} [class*="icon-"] {color: var(--status-color);} & ~ a {display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;}}}.cmd-form-element{input + .place-inside {left: auto; right: .5rem} &.has-state,& + .cmd-tooltip {::placeholder {color: var(--status-color);} span {color: var(--status-color); &.place-inside { --status-color: var(--error-color); }}} :is(input[type="checkbox"],input[type="radio"]):checked {~ .label-text span {color: var(--hyperlink-color);}} &.inline {& > span {& > a:not(.button) {margin-left: calc(var(--default-margin) / 2);}}} .search-field-wrapper {margin: 0; a {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); z-index: 100; // set styles to avoid overwriting by has-state-colors &.button {span {color: var(--color-scheme-background-color);} &:hover,&:active,&:focus {span {color: var(--color-scheme-text-color);}}}} input:not(:only-child) {border-top-right-radius: 0; border-bottom-right-radius: 0;} a.button {right: 0; & + a {right: 5rem;}}} .place-inside {+ .search-field-wrapper {input {padding-left: calc(var(--default-padding) * 3);}}} .characters-left-wrapper {margin-top: calc(var(--default-margin) / 2); display: block; span:not(:only-child):first-child {margin-right: calc(var(--default-margin) / 2); color: var(--color-scheme-text-color);} .characters-left {color: var(--color-scheme-text-color); &.error {color: var(--error-color);}}}}.cmd-address-data{dl {grid-row-gap: calc(var(--default-gap) / 2); dt {display: flex; top: .2rem; &.address {align-self: flex-start; [class*="icon"]:only-child {line-height: var(--line-height);}}}} ul {gap: calc(var(--default-gap) / 2); margin-left: 0; li {margin-left: 0; list-style: none;}} .edit-component-wrapper {dl {margin-bottom: 0;}}}.edit-component-wrapper .cmd-address-data address{display:flex;flex-direction:column;gap:calc(var(--default-gap) / 2);dt {min-width: 2.5rem;}}.cmd-bank-account-data{dd {display: flex; gap: calc(var(--default-gap) / 2); > span {&:first-child {white-space: nowrap;}}}}.cmd-image{img {display: block;} &.text-center {figcaption {text-align: center;}} &.text-right {figcaption {text-align: right;}} .drop-area {border: 0; align-items: center; justify-content: center; padding: 0; > [class*="icon"] {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 10rem; color: var(--pure-white); text-shadow: var(--text-shadow); z-index: 10;} img {opacity: .7; transition: var(--default-transition); &:hover,:active,:focus {opacity: 1; transition: var(--default-transition);} &:not([src]) {display: block; width: 100%; min-height: 30rem;}}}}.edit-mode .edit-component-wrapper .cmd-image{label.edit-mode input {padding: calc(var(--default-padding) / 2);}}.cmd-slide-button.button{font-size:2rem;z-index:10;height:100%;position:absolute;display:flex;justify-content:center;text-decoration:none;border:0;outline:0}.cmd-slide-button.button span{align-self:center}.cmd-slide-button.button.prev{left:0;top:0}.cmd-slide-button.button.next{right:0;top:0}.cmd-slide-button.button.up,.cmd-slide-button.button.down{width:100%;height:auto;left:0;top:0}.cmd-slide-button.button.down{bottom:0;top:auto}@media only screen and (max-width: 600px){.cmd-slide-button.button{width:auto}}.cmd-thumbnail-scroller{display:inline-flex;flex-direction:column;gap:var(--default-gap);width:100%;&.full-width:not(.vertical){display:flex;> div {width: 100%;}}> .inner-thumbnail-wrapper {border-radius: var(--border-radius); padding: calc(var(--default-padding) * 2); padding-top: 0; margin: 0 auto; border: var(--default-border); background: var(--color-scheme-background-color); overflow: hidden; > ul {overflow: hidden; margin: 0; display: flex; gap: var(--grid-gap); justify-content: space-between; width: 100%; > li {align-self: center; list-style-type: none; margin: 0; margin-top: 2rem; flex: none; img {border-radius: var(--border-radius); min-width: 15rem; max-height: 10rem;} a {display: block; text-align: center; &.active {color: var(--pure-white); span,span[class*="icon"] {color: inherit} figcaption {opacity: 1;}} &:has(img) {padding: 0;} &:hover,&:active,&:focus {&.active {figcaption {color: var(--hyperlink-color);}}}} .image-wrapper {min-width: 11.1rem;}}}} &.vertical {width: auto; .inner-thumbnail-wrapper {display: inline-flex; left: 50%; height: 75rem; transform: translateX(-50%); > ul {width: auto; display: flex; flex-direction: column; [class*="switch-button-"] {width: 100%; height: auto; &::before {transform: rotate(90deg); display: inline-block; margin: 0 auto;}}} .slide-button-next {top: auto; bottom: 0;}}} &.gallery-scroller {max-width: var(--max-width); left: 0; right: 0; position: fixed; bottom: var(--default-margin); margin: auto; display: table; li {a {color: var(--color-scheme-text-color); text-decoration: none; &.active {img {border-color: var(--primary-color);} figcaption {color: var(--primary-color);}} &:not(.active) {img {border: var(--default-border); opacity: var(--reduced-opacity);} figcaption {text-decoration: none;}} &:hover,&:active,&:focus {figcaption {color: var(--primary-color);} img {border-color: var(--primary-color); opacity: 1;}}}}} &.large-icons {li a {display: flex; flex-direction: column; gap: calc(var(--default-gap) / 4); text-decoration: none; align-items: center; justify-content: center; span {margin: 0;} [class*="icon-"] {font-size: 5rem;}}}}@media only screen and (max-width: 1023px){.cmd-thumbnail-scroller>ul>li{flex:none}.cmd-thumbnail-scroller>ul>li img{max-height:7rem}.cmd-thumbnail-scroller img{width:auto}.cmd-thumbnail-scroller.gallery-scroller{max-width:calc(100% - var(--default-margin) * 3);display:flex}}@container (width <= 600px){.cmd-thumbnail-scroller{display:block}}.cmd-fancybox{z-index:500;flex-direction:column;padding:var(--default-padding);min-width:30vw;min-height:30vh;background:var(--pure-white);border-radius:var(--border-radius);overflow:hidden;gap:calc(var(--default-gap) / 2);&.image-gallery{margin-top:calc(var(--default-margin) * 2)}&[open]{display:flex}&.show-overlay::backdrop{--reduced-opacity: .75;background:rgba(0,0,0,var(--reduced-opacity))}> header {display: flex;} .cmd-cookie-disclaimer {padding: 0;} > .grayscale {filter: grayscale(1);} &.image {.outer-content-wrapper {max-height: none;} img {display: block; margin: 0 auto;} figcaption {text-align: center;}} .inner-thumbnail-wrapper li {figure {opacity: .8;} &.active {figure {opacity: 1;} img {border-color: var(--hyperlink-color-highlighted);} a {color: var(--hyperlink-color-highlighted);}}} > header {justify-content: space-between; > .cmd-headline {max-width: 80%; flex-shrink: 1; margin-bottom: 0;} > .button-wrapper {flex-shrink: 0; flex-direction: row; align-items: flex-start; gap: calc(var(--default-gap) / 2); margin-left: auto; > .button {display: block; border: var(--default-border); padding: .2rem; min-width: 0; min-height: 0; &[class*="print"] > [class*="icon-"] {color: var(--text-color);} &.print-grayscale {background: linear-gradient(135deg,var(--medium-gray) 0%,var(--medium-gray) 50%,var(--pure-white) 50%,var(--pure-white) 100%);} &.print-color {background: linear-gradient(135deg,#009fe3 0%,#009fe3 25%,#e6007e 25%,#e6007e 50%,#ffed00 50%,#ffed00 50%,#ffed00 75%,var(--medium-gray) 75%,var(--medium-gray) 100%);} &:hover,&:active,&:focus {border: var(--primary-border); background: var(--pure-white); [class*="icon-"] {color: var(--primary-color);}}}}} > footer {margin-top: auto; justify-content: flex-end;} .outer-content-wrapper {max-height: 85vh; overflow-x: hidden; max-width: var(--max-width); .content {> img,> video {&:only-child {margin: auto; max-height: 80vmin; max-width: 80vmax;}} figcaption {font-size: 2rem; padding: calc(var(--default-padding) / 2) 0;}}}}@media only screen and (max-width: 1023px){.cmd-fancybox .outer-content-wrapper .content>img:only-child,.cmd-fancybox .outer-content-wrapper .content>video:only-child{margin:auto;max-height:60vmin}.cmd-fancybox>header{flex-direction:row}.cmd-fancybox>header .button:not(#close-dialog){display:none}}@media only screen and (max-width: 600px){.cmd-fancybox .outer-content-wrapper .content>img:only-child,.cmd-fancybox .outer-content-wrapper .content>video:only-child{max-height:50vmin}.cmd-fancybox [class*=switch-button-]{width:3rem}.cmd-fancybox [class*=switch-button-]:before{margin:0;top:40%}}@media only screen and (max-width: 1023px){dialog{margin-top:var(--default-margin)}}.cmd-list-of-links{> ul {flex-direction: column; gap: calc(var(--default-gap) / 2); margin: 0; li {list-style: none; margin-left: 0;}} &.horizontal {> ul {gap: var(--default-gap); flex-direction: row; > li {flex: none; display: flex;} &.align-center {justify-content: center;} &.align-right {justify-content: flex-end;} &.stretch {justify-content: space-around;}}} &.large-icons {li a {display: flex; flex-direction: column; gap: calc(var(--default-gap) / 4); text-decoration: none; align-items: center; justify-content: center; span {margin: 0;} [class*="icon-"] {font-size: 5rem;}}}}.cmd-box{display:inline-flex;flex-direction:column;padding:0;align-self:start;&.stretch-horizontally{display:flex;width:100%}&.stretch-vertically{height:100%}.box-header .cmd-headline {margin-bottom: 0;} &.collapsible {a.box-header {justify-content: space-between; background: var(--hyperlink-color); &:hover,&:active,&:focus {background: var(--pure-white); * {color: var(--hyperlink-color);}}}} .box-body {.allow-scroll {overflow-y: auto;}} &.content {> * {*:last-child {margin-bottom: 0;}} &.open {> .box-header {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}} > .box-header {display: flex; align-items: center; border-radius: var(--border-radius); padding: calc(var(--default-padding) / 2) var(--default-padding); background: var(--secondary-color); color: var(--pure-white); text-decoration: none; > .cmd-custom-headline {margin-bottom: 0;} * {color: var(--pure-white); margin-bottom: 0;} > .toggle-icon {margin-left: auto;} > .toggle-icon,.toggle-icon > [class*="icon-"] {font-size: var(--font-size-small);}} .box-body {flex-grow: 1; border-top: var(--default-border); p.cutoff-text {padding: var(--default-padding); margin: 0; overflow: hidden; height: calc(var(--line-of-text-height) * var(--2b11644a)); &.fade-last-line::after {content: ""; width: 100%; position: absolute; left: 0; bottom: 0; height: calc(var(--line-of-text-height) * 3); background: linear-gradient(to bottom,transparent 0%,var(--default-background-color) 100%);} &.show-text {height: auto;} & + a {border-top: var(--default-border); display: block; padding: var(--default-padding); margin: 0;}} img {display: block; border-radius: 0;} .navigation {margin: 0; height: 100%; li {list-style-type: none; margin: 0; a {display: block; padding: var(--default-padding); text-decoration: none; border-bottom: var(--default-border); &:hover,&:active,&:focus {background: var(--primary-color); color: var(--pure-white);}} &:last-child {a {border: 0;}}}}} .box-footer {border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding: var(--default-padding); border-top: var(--default-border);}} &.product,&.user {> div {> .cmd-custom-headline {margin-top: var(--default-margin); justify-content: center;}}} &.product {text-decoration: none; overflow: hidden; [class*="ribbon"] {position: absolute; z-index: 10; overflow: hidden; width: 10rem; height: 10rem; top: 0; left: 0; span {position: absolute; display: block; transform: rotate(-45deg); width: 100%; top: 15%; left: -25%; background: var(--error-color); font-weight: bold; color: var(--pure-white); text-transform: uppercase; text-align: center;}} .ribbon-discount {left: auto; right: 0; span {transform: rotate(45deg); right: -20%; left: auto; background: green;}} > .box-header {> img,> div {display: table; margin: 0 auto;} img {border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;} figcaption {font-size: 2rem; font-weight: bold; padding-top: var(--default-padding)}} .box-body {flex-grow: 1; > * {text-align: center;} .price {font-size: 1.8rem; font-weight: bold; span:last-child {margin-left: calc(var(--default-margin) / 2);}}} &:hover,&:active,&:focus {border-color: var(--hyperlink-color-highlighted);}} &.user {> .box-header { --icon-size: 6rem; padding: var(--default-padding); .cmd-headline { > * { display: block; text-align: center; } } img, > div:first-child > [class*="icon-"] { display: table; margin: 0 auto var(--default-margin) auto; padding: calc(var(--default-padding) * 3); border-radius: var(--full-circle); background: var(--primary-color); color: var(--pure-white); & + p, & + figcaption { margin: 0 auto; text-align: center; font-weight: bold; font-size: 2rem; } } img { padding: 0; width: calc(var(--icon-size) * 2); aspect-ratio: 1/1; } > div:first-child > [class*="icon-"] { font-size: var(--icon-size); } } .box-body {flex-grow: 1; p {text-align: center; font-weight: bold; &:last-child {margin-bottom: 0;} &.description {font-weight: normal;}}} .box-footer {margin-top: auto; border-top: var(--default-border); .cmd-list-of-links {ul {width: 100%; margin-bottom: 0; li {flex: 1; a {flex: 1; padding: var(--default-padding); text-align: center; background: var(--color-scheme-background-color); border-left: var(--default-border);} &:hover,&:active,&:focus {a {background: var(--primary-color); color: var(--pure-white); span,[class*="icon-"] {color: var(--pure-white);}}} &:first-child {a {border: 0;}}}}}} &.row-view {[class*="icon"] { --icon-size: 3rem; } .box-header > div:first-child > [class*="icon-"] {padding: calc(var(--default-padding) * 1.5);} .box-body p {text-align: left;} .box-footer {border: 0; .cmd-list-of-links {background: none; ul,ul * {border: 0; background: inherit;}}}}}}.cmd-box-wrapper{display:flex;flex-direction:column;gap:calc(var(--default-gap) / 2);&:not(:first-child){margin-top:calc(var(--default-margin) * 2)}> .headline-wrapper {align-items: center; justify-content: space-between;} .options-wrapper {flex: none;} > .flex-container {> .cmd-headline {margin: 0;} &.stretch-boxes-vertically {.stretch-vertically {align-self: stretch; height: auto;}}} .inner-box-wrapper > *{flex: none; flex-grow: 1; flex-basis: min-content;} .row-view {flex-direction: column; p.cutoff-text {height: auto; &.fade-last-line::after {background: none;}} .cmd-box.user {flex-direction: row; padding: var(--default-padding); align-items: center; .box-footer {margin-top: 0;}}} > .grid-container-create-columns {grid-template-columns: repeat(var(--4018ee97),minmax(0,1fr)); &.row-view {grid-template-columns: repeat(1,minmax(0,1fr));}}}@media only screen and (max-width: 1023px){.cmd-box-wrapper>.grid-container-create-columns{grid-template-columns:repeat(var(--762870ce),minmax(0,1fr))}}@media only screen and (max-width: 600px){.cmd-box-wrapper>.grid-container-create-columns{grid-template-columns:repeat(var(--4080c863),minmax(0,1fr))}}.cmd-breadcrumbs{display:flex;margin:0;li {display: inherit; align-items: center; list-style-type: none; margin: 0; > span {padding: 0 calc(var(--default-padding) / 2);} &:first-child {margin-right: calc(var(--default-margin) / 2);} &:last-child {> span {display: none;}} a {display: inherit; align-items: inherit; text-decoration: none; &:hover,&:active,&:focus {text-decoration: underline;}}}}.cmd-company-logo{img {display: block; max-height: 10rem;} > a {display: block; img {border: 0;}}}@media only screen and (max-width: 1023px){.cmd-company-logo img{max-width:100%;max-height:7.5rem}}.cmd-container{min-height:5rem}.cmd-cookie-disclaimer{width:100%;padding:var(--default-padding);padding-right:calc(var(--default-padding) * 2);z-index:100;bottom:0;top:auto;.cmd-box {.box-header {padding: 0; padding-right: var(--default-padding); justify-content: unset; label {padding: calc(var(--default-padding) / 2) var(--default-padding); &.disabled {.label-text span {color: var(--pure-white) !important;}} & + .toggle-icon {padding: calc(var(--default-padding) / 2) var(--default-padding); width: 100%; justify-content: flex-end; text-align: right;}} &:hover,&:active,&:focus {background: var(--hyperlink-color); label.disabled .label-text span {color: var(--disabled-color) !important;}}} .box-body {padding: var(--default-padding);}} h1 {text-align: center;} .button {margin: 0 auto;} > p {text-align: center;} #form-cookies {margin-bottom: var(--default-margin);} p {a {text-decoration: underline; &:hover,&:active,&:focus {text-decoration: none;}}}}.cmd-copyright-information{background:var(--text-color);border-top:var(--border-width) var(--border-style) var(--pure-white);text-align:center;padding:var(--default-padding);a {text-decoration: none; color: var(--pure-white); &:hover,&:active,&:focus {text-decoration: underline; color: var(--pure-white);}}}.cmd-fake-select{align-self:flex-end;border-radius:var(--border-radius)}.cmd-fake-select>span:first-child a{align-self:flex-end}.cmd-fake-select>ul{height:var(--input-height);margin:0;display:block;min-width:0;box-shadow:none;border-radius:var(--border-radius)}.cmd-fake-select>ul>li{height:100%}.cmd-fake-select>ul>li:first-child>a{height:inherit;border:var(--default-border);background:var(--color-scheme-background-color);color:var(--color-scheme-text-color)}.cmd-fake-select>ul>li:first-child>a span,.cmd-fake-select>ul>li:first-child>a [class*=icon]{color:var(--color-scheme-text-color)}.cmd-fake-select>ul>li:first-child>a .option-name{text-overflow:ellipsis;overflow:hidden}.cmd-fake-select>ul>li:first-child>a>[class*=icon-]:last-child{margin-left:auto;font-size:var(--icon-size-small)}.cmd-fake-select>ul>li:first-child>a:hover,.cmd-fake-select>ul>li:first-child>a:active,.cmd-fake-select>ul>li:first-child>a:focus{background:var(--pure-white);border-color:var(--primary-color)}.cmd-fake-select>ul>li:first-child>a:hover span,.cmd-fake-select>ul>li:first-child>a:hover [class*=icon],.cmd-fake-select>ul>li:first-child>a:active span,.cmd-fake-select>ul>li:first-child>a:active [class*=icon],.cmd-fake-select>ul>li:first-child>a:focus span,.cmd-fake-select>ul>li:first-child>a:focus [class*=icon]{color:var(--hyperlink-color)}.cmd-fake-select>ul.open{border-bottom:0}.cmd-fake-select>ul.open>li:first-child>a{border-color:var(--primary-color)}.cmd-fake-select li{margin-left:0;list-style:none}.cmd-fake-select li a,.cmd-fake-select li a:visited{display:flex;align-items:center;padding:.8rem .7rem .7rem;outline:none;border-bottom:var(--default-border);text-decoration:none}.cmd-fake-select li a:hover,.cmd-fake-select li a:active,.cmd-fake-select li a:focus,.cmd-fake-select li a:visited:hover,.cmd-fake-select li a:visited:active,.cmd-fake-select li a:visited:focus{background:var(--primary-color)}.cmd-fake-select li a:hover span,.cmd-fake-select li a:hover [class*=icon],.cmd-fake-select li a:active span,.cmd-fake-select li a:active [class*=icon],.cmd-fake-select li a:focus span,.cmd-fake-select li a:focus [class*=icon],.cmd-fake-select li a:visited:hover span,.cmd-fake-select li a:visited:hover [class*=icon],.cmd-fake-select li a:visited:active span,.cmd-fake-select li a:visited:active [class*=icon],.cmd-fake-select li a:visited:focus span,.cmd-fake-select li a:visited:focus [class*=icon]{color:var(--pure-white)}.cmd-fake-select li a span:first-child,.cmd-fake-select li a span:nth-child(2),.cmd-fake-select li a:visited span:first-child,.cmd-fake-select li a:visited span:nth-child(2){border:0}.cmd-fake-select li a img.flag,.cmd-fake-select li a:visited img.flag{margin:0 calc(var(--default-margin) / 2) 0 0}.cmd-fake-select li a.active,.cmd-fake-select li a:visited.active{background:var(--light-gray)}.cmd-fake-select li a.active span,.cmd-fake-select li a:visited.active span{color:var(--hyperlink-color)}.cmd-fake-select li a.active:hover,.cmd-fake-select li a.active:active,.cmd-fake-select li a.active:focus,.cmd-fake-select li a:visited.active:hover,.cmd-fake-select li a:visited.active:active,.cmd-fake-select li a:visited.active:focus{background:var(--primary-color)}.cmd-fake-select li a.active:hover span,.cmd-fake-select li a.active:hover [class*=icon],.cmd-fake-select li a.active:active span,.cmd-fake-select li a.active:active [class*=icon],.cmd-fake-select li a.active:focus span,.cmd-fake-select li a.active:focus [class*=icon],.cmd-fake-select li a:visited.active:hover span,.cmd-fake-select li a:visited.active:hover [class*=icon],.cmd-fake-select li a:visited.active:active span,.cmd-fake-select li a:visited.active:active [class*=icon],.cmd-fake-select li a:visited.active:focus span,.cmd-fake-select li a:visited.active:focus [class*=icon]{color:var(--pure-white)}.cmd-fake-select li label{display:flex}.cmd-fake-select li span{white-space:nowrap}.cmd-fake-select li ul{position:absolute;list-style:none;z-index:10;min-width:100%;margin:0;border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);background:var(--color-scheme-background-color);border:var(--primary-border)}.cmd-fake-select li ul li:last-child a{border-bottom:0}.cmd-fake-select li ul.custom-fake-select-content{padding:var(--default-padding)}.cmd-fake-select li ul.custom-fake-select-content img{display:block}.cmd-fake-select li ul.checkbox-options li{padding:calc(var(--default-padding) / 2)}.cmd-fake-select li ul.checkbox-options li.select-all-options{border-top:var(--primary-border);padding:0}.cmd-fake-select.has-state.label>ul>li>a{border-color:var(--status-color)}.cmd-fake-select.has-state.label>ul>li>a>span,.cmd-fake-select.has-state.label>ul>li>a [class*=icon-]{color:var(--status-color)}.cmd-fake-select.has-state.label>ul>li>a:hover,.cmd-fake-select.has-state.label>ul>li>a:active,.cmd-fake-select.has-state.label>ul>li>a:focus{background:var(--color-scheme-background-color)}.cmd-fake-select.has-state.label>ul>li>a:hover span,.cmd-fake-select.has-state.label>ul>li>a:active span,.cmd-fake-select.has-state.label>ul>li>a:focus span{color:var(--status-color)}.cmd-fake-select.disabled>ul>li>a{color:var(--disabled-color);border-color:var(--disabled-color);background:var(--disabled-background-color)}.cmd-fake-select.disabled>ul>li>a span{color:var(--disabled-color)}.cmd-fake-select.disabled>ul>li>a:hover,.cmd-fake-select.disabled>ul>li>a:active,.cmd-fake-select.disabled>ul>li>a:focus{cursor:not-allowed;color:var(--disabled-color);border-color:var(--disabled-color);background:var(--disabled-background-color)}.cmd-fake-select.disabled>ul>li>a:hover span,.cmd-fake-select.disabled>ul>li>a:active span,.cmd-fake-select.disabled>ul>li>a:focus span{color:var(--disabled-color)}.cmd-fake-select.error a:hover img.flag,.cmd-fake-select.error a:focus img.flag,.cmd-fake-select.error a:active img.flag,.cmd-fake-select.disabled a:hover img.flag,.cmd-fake-select.disabled a:focus img.flag,.cmd-fake-select.disabled a:active img.flag{border-color:var(--border-color)}.cmd-fake-select.color li a{gap:calc(var(--default-gap) / 2)}.cmd-fake-select.color li a>span:first-child{width:1.5rem;aspect-ratio:1/1;border:var(--default-border)}.cmd-fake-select.color li a>span:first-child[style=""]{display:none}.cmd-form{&:not([data-use-validation="true"]){label.error :where(::placeholder,select option:first-child),:where(input,select,textarea):invalid:focus {color: var(--error-color);} :where(input,select,textarea):valid:focus[required],select:invalid:focus[required] option:not(:first-child) {color: var(--success-color);}}&.error{fieldset,*:invalid {border-color: var(--error-color);}}.button,.button:last-child {margin-left: auto;}}.cmd-form-filters{display:flex;margin:0;li {list-style-type: none; margin-left: 0; margin-right: var(--default-margin); border: var(--default-border); background: var(--pure-white); font-size: var(--font-size-small); &:hover,&:active,&:focus {border-color: var(--primary-color);} a {padding: calc(var(--default-padding) / 2); display: flex; align-items: center; text-decoration: none;} &:last-of-type {margin-right: 0;} [class*="icon-"] {font-size: var(--icon-size-small);}}}.cmd-google-maps{border:var(--default-border)}.cmd-image-gallery{> .cmd-headline,> input.edit-mode,> .edit-component-wrapper {grid-column: span var(--grid-columns); margin-bottom: 0;} .image-wrapper {align-self: center; justify-self: center; grid-column: span var(--grid-small-span); width: 100%; min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode img {border: var(--default-border); border-radius: var(--border-radius); max-height: 30rem;} figcaption {padding: calc(var(--default-padding) / 2);} &:hover,&:active,&:focus {text-decoration: none; img {border: var(--primary-border);}} & + .pager {margin-top: calc(var(--default-margin) * 2);}}}.cmd-imagezoom{overflow:hidden;.zoom-container {display: block !important; overflow: hidden; > img {max-width: none;}} .zoom-overlay {position: absolute; display: none; pointer-events: none; background: var(--primary-color); opacity: var(--reduced-opacity);}}.cmd-input-group{&.inline{display:flex;gap:var(--default-gap)}&.toggle-switch{display:block}.label-text {display: inline-flex; > span + a [class*="icon-"] {margin-left: calc(var(--default-margin) / 2);}} &.has-state {label {color: var(--status-color);} &.multiple-switch {label {border-color: var(--status-color);}}}}.cmd-login-form{.option-wrapper {align-items: center; > a:not(.button) {display: flex; align-items: center; text-decoration: none; flex: none;} > .button {margin-left: auto;}}}.cmd-main-navigation{&.hide-sub-navigation{ul {ul {display: none;}}}nav {.stretch-items {> li {flex: 1}} > ul {> li {.close-nav {display: none;} &.open {> ul {display: block; > li {&.open {> ul {display: block;}}}}}}} + div {display: none;}} .fade-enter-active,.fade-leave-active {left: 0;} .fade-enter,.fade-leave-to {left: -100%;} header nav > ul,header nav > ul > li {border: 0;}}.off-canvas-right{#toggle-offcanvas {margin-right: 0; margin-left: auto;}}#toggle-offcanvas{margin-left:0;display:none}@media only screen and (max-width: 1023px){.cmd-main-navigation#main-navigation-wrapper{--nav-transition: all .5s linear;display:flex;background:none;border:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0 var(--default-padding);transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) #toggle-offcanvas{display:flex;margin-bottom:0;width:auto}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas nav{height:100%;background:var(--default-background);left:0;opacity:1;padding:0!important;transition:var(--nav-transition);border-right:var(--default-border);display:block}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas.show-content-overlay nav:before{content:"";position:fixed;width:100%;top:0;left:0;height:100dvh;display:block;background:var(--pure-black-reduced-opacity)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas.show-content-overlay nav ul{z-index:1000;height:100%}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav{position:fixed;top:0;left:-100%;width:auto;height:100dvh;opacity:0;z-index:1000;transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul{flex-direction:column;position:relative;left:0;border:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li{border-bottom:var(--default-border);border-right:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav{display:block;border-bottom:var(--default-border)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a{display:flex;align-items:center}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a span{font-weight:var(--font-weight-bold)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a span[class*=icon-]{font-size:var(--font-size-small)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav>a{text-align:left}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):hover>ul,.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):active>ul,.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):focus>ul{display:none}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li:not(:first-child){border-top:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li:last-child{border-bottom:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li>a{padding-left:calc(var(--default-margin) * 2)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li>a span+[class*=icon-]:before{display:inline-block;transform:rotate(0)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li ul li a{padding-left:calc(var(--default-margin) * 4)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.open>a span+[class*=icon-]:before{display:inline-block;transform:rotate(-180deg)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.open>ul{height:auto;display:block;opacity:1;transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).off-canvas-right.open-off-canvas nav{right:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).off-canvas-right nav{right:-100%;left:auto}}.cmd-multistep-form-progress-bar{display:flex;justify-content:space-around;border:var(--default-border);margin:0;border-radius:var(--default-border-radius);&.use-gap{border:0;gap:var(--default-gap);li {border: var(--default-border) !important; border-radius: var(--default-border-radius); a,a.active {border: 0; border-radius: inherit; :is(span,[class*="icon-"]) + [class*="icon-"]:last-child {border: 0; right: -1rem; background: none;}} a {:is(span,[class*="icon-"]) + [class*="icon-"]:last-child {color: var(--default-text-color) !important;}}}}li {display: flex; flex: 1; list-style-type: none; margin: 0; &:first-child,&:first-child > a {border-top-left-radius: inherit; border-bottom-left-radius: inherit;} &:last-child,&:last-child > a {border-top-right-radius: inherit; border-bottom-right-radius: inherit;} a {display: flex; text-decoration: none; padding: var(--default-padding); align-items: center; justify-content: center; width: 100%; background: var(--primary-color-reduced-opacity); :is(span,[class*="icon-"]) {color: var(--pure-white); & + [class*="icon-"] {&:last-child {border: var(--default-border); border-radius: var(--full-circle); background: var(--pure-white); color: var(--text-color); margin: 0; position: absolute; right: 0; transform: translateX(50%); padding: calc(var(--default-padding) / 2); display: flex; justify-content: center; z-index: 1; &::before {font-size: var(--font-size-small);}}}} &:hover,&:active,&:focus {background: var(--primary-color); :is(span,[class*="icon-"]) {color: var(--pure-white);} .number {color: var(--primary-color);}} .number {margin-right: calc(var(--default-margin) / 2); line-height: 100%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--full-circle); border: var(--default-border); border-color: var(--pure-white); background: var(--pure-white); color: var(--primary-color-reduced-opacity);}} &:not(:first-child) {border-left: .2rem solid var(--border-color);} &:last-child {a {[class*="icon-"] {&:last-of-type {display: none;}}}} &.active {a {background: var(--primary-color); span,[class*="icon-"] {color: var(--pure-white);} &:hover,&:active,&:focus {span,[class*="icon-"] {color: var(--pure-white); & + [class*="icon-"] {&:last-child {color: var(--text-color);}}}}} .number {background: var(--pure-white); border-color: var(--pure-white); color: var(--primary-color) !important;} & ~ li {background: var(--default-background-color); border-left-color: var(--border-color); a {background: none; color: var(--color-scheme-text-color); span,span[class*="color"] {color: inherit; & + [class*="icon-"] {&:last-child {border-color: var(--border-color); color: var(--pure-white); background: var(--secondary-color);}}} &:hover,&:active,&:focus {span,[class*="icon-"] {&:not(:last-child) {color: var(--primary-color);}} .number {border-color: var(--primary-color);}}} .number {background: none; border-color: var(--border-color);}} & + li {border-left-color: var(--border-color);}}}}@media only screen and (width < 600px){.cmd-multistep-form-progress-bar{flex-direction:column}.cmd-multistep-form-progress-bar li:not(:last-child){border-bottom:var(--default-border)}.cmd-multistep-form-progress-bar li a :is(span,[class*=icon-])+[class*=icon-]:last-child{left:auto;right:auto;bottom:0;transform:translateY(50%)}.cmd-multistep-form-progress-bar li a :is(span,[class*=icon-])+[class*=icon-]:last-child:before{transform:rotate(90deg)}.cmd-multistep-form-progress-bar li.active~li{border-left:0;border-bottom-color:var(--border-color)}}.edit-mode-opening-hours-item{dt {min-width: 3ch;} .am-wrapper,.pm-wrapper {align-items: center; gap: calc(var(--default-gap) / 2);} label {max-width: 11rem;} .input-wrapper {width: 11rem;}}.cmd-opening-hours{> a,> span {padding: calc(var(--default-padding) / 2); font-weight: bold; display: table; margin-bottom: var(--default-margin); color: var(--pure-white); background: var(--success-color); &.closed {background: var(--error-color);}} > a {&:hover,&:active,&:focus {text-decoration: underline; color: var(--pure-white);}} span.pm {margin-left: var(--default-margin);} p:last-child {margin: 0;} .edit-component-wrapper {dl {margin-bottom: 0;}}}.edit-component-wrapper .cmd-opening-hours{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--default-gap) / 2);dt {min-width: 2.5rem;}}.cmd-pager{display:flex;justify-content:space-between;button,.button {float: none; margin: 0; span {align-self: center;}} a {display: flex; align-items: center; text-decoration: none; &:hover,&:active,&:focus {cursor: pointer;} &:last-of-type {> [class*="icon-"] {margin-right: 0;}} > [class*="icon-"] {font-size: var(--icon-size-small);}} .page-index {a:not(.button) {padding: 0 calc(var(--default-padding) / 2);}}}@media only screen and (max-width: 1023px){.cmd-pager>a.button span{margin:0}.cmd-pager>a.button span:not([class*=icon]){display:none}}@media only screen and (max-width: 1023px) and (max-width: 600px){.cmd-pager .button{width:auto}.cmd-pager .page-index .flex-container{flex-direction:row}}.cmd-progressbar{.progressbar {display: table; & > span {position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;}}}.cmd-sidebar{display:flex;height:100%;&.box{padding:0}.cmd-box-wrapper > .grid-container-create-columns {grid-template-columns: repeat(1,minmax(0,1fr));} .cmd-box {border-left: 0; border-right: 0;} .inner-sidebar-wrapper {flex: 1; display: flex; flex-direction: column; .cmd-headline.sidebar-main-headline {padding: var(--default-padding); margin: 0;}} .open-slot-wrapper {flex: 1;} & > a {display: flex; flex: none; text-decoration: none; padding: calc(var(--default-padding) / 2); align-items: center; border-left: var(--default-border);} &.collapse-to-right {flex-direction: row-reverse; border-right: 0; > a {border-right: var(--default-border);}}}.cmd-site-footer{padding:var(--grid-gap) 0;border-top:var(--default-border);background:var(--default-background-color);footer {max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 var(--default-padding);} &.sticky {top: auto; bottom: 0;} .cmd-switch-language {width: 100%; flex: none;}}@media only screen and (max-width: 1023px){.cmd-site-footer footer li{margin-bottom:calc(var(--default-margin) * 2)}}@media only screen and (max-width: 1023px) and (max-width: 600px){.cmd-site-footer a{text-decoration:underline}.cmd-site-footer a:active{text-decoration:none}.cmd-site-footer h4,.cmd-site-footer h5,.cmd-site-footer h6{margin-top:var(--default-margin)}}.cmd-site-header{grid-area:site-header;display:flex;flex-direction:column;border-bottom:var(--default-border);background:var(--color-scheme-background-color)}.cmd-site-header.sticky{position:sticky;z-index:300}.cmd-site-header header,.cmd-site-header .cmd-main-navigation nav,.cmd-site-header .cmd-list-of-links{max-width:var(--max-width);width:100%;margin:0 auto;padding:0 var(--default-padding)}.cmd-site-header .cmd-main-navigation nav{width:auto}.cmd-site-header .top-header .cmd-list-of-links{padding-top:calc(var(--default-padding) / 2);padding-bottom:calc(var(--default-padding) / 2)}.cmd-site-header #main-navigation-wrapper{grid-column:span var(--grid-columns);border-bottom:0}.cmd-site-header>.cmd-main-navigation#main-navigation-wrapper:last-child{border-bottom:0}.cmd-site-header header{padding-top:calc(var(--default-padding) * 2);padding-bottom:calc(var(--default-padding) * 2)}.cmd-site-header header.has-navigation{grid-template-rows:1fr min-content;grid-template-areas:"company-logo" "main-navigation";padding-bottom:0}.cmd-site-header header.flex-container{width:100%}.cmd-site-header header.flex-container .cmd-company-logo{grid-area:company-logo;flex:none}.cmd-site-header header .cmd-main-navigation nav{padding:0}.cmd-site-header header .cmd-main-navigation,.cmd-site-header header nav ul li{border-bottom:0}.cmd-site-header.navigation-inline header.has-navigation{grid-template-rows:1fr;grid-template-areas:"company-logo main-navigation";padding-bottom:calc(var(--default-padding) * 2)}.cmd-site-header.navigation-inline header .cmd-company-logo{grid-area:company-logo;grid-column:span var(--grid-small-span)}.cmd-site-header.navigation-inline header #main-navigation-wrapper{grid-area:main-navigation;display:flex;align-items:center;justify-content:flex-end;grid-column:span var(--grid-large-span)}.cmd-site-header.navigation-inline header #main-navigation-wrapper:not(.persist-on-mobile){padding-left:0!important}.cmd-site-header.navigation-inline.off-canvas-right header.has-navigation{grid-template-areas:"company-logo main-navigation"}@media only screen and (max-width: 1023px){.cmd-site-header header{grid-auto-rows:auto}.cmd-site-header header .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0}.cmd-site-header.navigation-inline .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding-left:var(--default-padding)}.cmd-site-header.navigation-inline.off-canvas-right .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0}}@media only screen and (max-width: 600px){.cmd-site-header{gap:calc(var(--default-gap) / 2)}.cmd-site-header .top-header .cmd-list-of-links{padding:0}.cmd-site-header .cmd-company-logo{margin:0 auto}.cmd-site-header.navigation-inline header .cmd-company-logo,.cmd-site-header.navigation-inline header #main-navigation-wrapper{grid-column:span calc(var(--grid-small-span) / 2)}}.cmd-box-site-search{flex-wrap:nowrap}.cmd-box-site-search>a [class*=icon]{font-size:var(--icon-size-small)}.cmd-box-site-search button{align-self:flex-end}@media only screen and (max-width: 600px){.cmd-box-site-search{flex-wrap:nowrap}}.cmd-slideshow{figure a,img {display: block; text-decoration: none; margin: 0 auto;} figcaption {width: 100%; display: block; text-align: center; bottom: 0; padding: var(--default-padding); line-height: 100%; font-size: 3rem; color: var(--pure-white); background: var(--primary-color);} .inner-slideshow-wrapper {display: flex; justify-content: center; > a:not(.button) {text-decoration: none; figcaption {border: var(--primary-border); &:hover,&:active,&:focus {background: var(--pure-white); color: var(--hyperlink-color);}}} figure {width: 100%; margin: 0;} .slot-wrapper {padding: calc(var(--default-padding) * 5); width: 100%; min-height: 50rem; background-repeat: no-repeat; background-position: top center; display: flex; justify-content: center; align-content: center; .box {align-self: flex-start;}} .image-wrapper {width: 100%; min-width: 11.1rem; min-height: 50rem;} > ol {display: flex; margin: 0 auto; position: absolute; left: 5.5rem; top: .5rem; gap: calc(var(--default-gap) / 2); li {padding: .2rem; list-style-type: none; margin: 0; border: var(--default-border-reduced-opacity); border-radius: var(--full-circle); background: var(--light-gray); a {display: block; width: 1rem; height: 1rem; border-radius: var(--full-circle);} &:hover,&:active,&:focus,&.active {border-color: var(--hyperlink-color); a {background: var(--pure-white); transition: var(--default-transition);}}} &.bottom {position: relative; justify-content: center; left: unset; top: unset; li {border-color: var(--primary-color); &:hover,&:active,&:focus,&.active {border-color: var(--primary-color); background: var(--pure-white); a {background: var(--primary-color);}}}} &.vertical {flex-direction: column;}} > .item-counter {position: absolute; top: .5rem; right: 5.5rem; padding: 0 .2rem; border-radius: var(--border-radius); background: var(--pure-white-reduced-opacity);}}}.edit-mode .cmd-slideshow .image-wrapper.edit-items{padding:0;margin-top:2rem;label.edit-mode input {font-size: 3rem;}}@media only screen and (max-width: 1023px){.cmd-slideshow figcaption{font-size:2rem}}[id^=social-network]{background:var(--social-network-color);border-color:var(--social-network-color)}[id^=social-network]>span{color:var(--pure-white)}[id^=social-network]:hover,[id^=social-network]:active,[id^=social-network]:focus{color:var(--pure-white)}[id^=social-network]:hover>span,[id^=social-network]:active>span,[id^=social-network]:focus>span{color:var(--social-network-color)}#social-network-facebook{--social-network-color: #3c5a99}#social-network-twitter{--social-network-color: #6bacde}#social-network-xing{--social-network-color: #007575}#social-network-linkedin{--social-network-color: #0077b5}.cmd-social-networks{display:flex;flex-direction:column;gap:var(--default-gap);container-type:inline-size}.cmd-social-networks .cmd-headline{margin:0}.cmd-social-networks .button-wrapper{flex-direction:row;flex:none;margin:0;gap:calc(var(--default-gap) / 2)}.cmd-social-networks .button-wrapper .button{padding:calc(var(--default-padding) / 2) var(--default-padding);gap:calc(var(--default-gap) / 2);outline:0}.cmd-social-networks .button-wrapper .button span{margin:0}.cmd-social-networks .button-wrapper .button:first-of-type{margin:0}.cmd-social-networks .button-wrapper .button.text-align-right{flex-direction:row-reverse}.cmd-social-networks .button-wrapper.no-gap li .button{border-radius:0}.cmd-social-networks .button-wrapper.no-gap li:first-of-type .button{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.cmd-social-networks .button-wrapper.no-gap li:last-of-type .button{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.cmd-social-networks li{list-style-type:none;margin:0}.cmd-social-networks.align-right .share-button-wrapper{justify-content:flex-end}.cmd-social-networks.align-center .cmd-headline>*{text-align:center}.cmd-social-networks.align-center .toggle-switch{margin:auto}.cmd-social-networks.align-center .share-button-wrapper{justify-content:center}.cmd-social-networks.align-right .cmd-headline>*{text-align:right}.cmd-social-networks.align-right .toggle-switch{margin-left:auto}.cmd-social-networks.align-right .button-wrapper{justify-content:flex-end}.cmd-social-networks.stretch .button-wrapper li{flex:1}.cmd-social-networks.stretch .button-wrapper li .button{display:flex}.cmd-social-networks a:last-of-type{margin-right:0}.cmd-social-networks [id^=social-network]{background:var(--social-network-color);border-color:var(--social-network-color)}.cmd-social-networks [id^=social-network]>span{color:var(--pure-white)}.cmd-social-networks [id^=social-network]:hover,.cmd-social-networks [id^=social-network]:active,.cmd-social-networks [id^=social-network]:focus{color:var(--pure-white)}.cmd-social-networks [id^=social-network]:hover>span,.cmd-social-networks [id^=social-network]:active>span,.cmd-social-networks [id^=social-network]:focus>span{color:var(--social-network-color)}.cmd-social-networks #social-network-facebook{--social-network-color: #3c5a99}.cmd-social-networks #social-network-twitter{--social-network-color: #6bacde}.cmd-social-networks #social-network-xing{--social-network-color: #007575}.cmd-social-networks #social-network-linkedin{--social-network-color: #0077b5}@container (max-width: 600px){.button-wrapper .button{flex:none;width:auto!important}.button-wrapper .button [class*=icon-]+span{display:none}}.cmd-switch-language{ul {display: flex; gap: calc(var(--default-gap) / 2); margin: 0; li {list-style-type: none; margin: 0; a:not([class*="active"]) {filter: contrast(.5); &:hover,&:focus,&:active {filter: none;}}}}}.cmd-system-message{display:inline-flex;margin:var(--default-margin) 0;align-items:center;> :last-child {margin-bottom: 0;} ul {display: flex; flex-direction: column; li {margin-left: 0;}} > a:not(.button) {display: flex; position: absolute; width: auto; top: .5rem; right: .5rem; text-decoration: none; z-index: 100; line-height: 1; background: var(--pure-white); border-radius: var(--full-circle); [class*="icon-"] {color: var(--default-text-color);} &:hover,&:active,&:focus {background: none; [class*="icon-"] {color: var(--pure-white);}}} &.warning {> a:not(.button) {border-color: var(--default-text-color); [class*="icon-"] {color: var(--default-text-color);} &:hover,&:active,&:focus {border-color: var(--hyperlink-color); [class*="icon-"] {color: var(--pure-white);}}}}}.cmd-table-wrapper{display:inline-flex;flex-direction:column;max-width:100%;margin-bottom:var(--default-margin);gap:calc(var(--default-margin) / 2);&.collapsed,&.full-width{overflow:hidden;table {th {white-space: normal;}}}> .button-wrapper {right: 0; z-index: 100; gap: calc(var(--default-gap) / 2); .button {padding: 0; min-width: 2rem; min-height: 2rem; [class*="icon-"] {font-size: var(--icon-size-small);}}} .cmd-slide-button {display: none;} .inner-wrapper {display: flex; overflow-x: auto; width: 100%; .cmd-slide-button {left: 0; &:last-child {right: 0; left: auto;}} table {table-layout: fixed; margin: 0; th {a[class*="icon-"] {&,&:hover,&:active,&:focus {font-size: var(--icon-size-small); color: var(--pure-white);}}}}} &.has-caption {flex-direction: row; .button-wrapper {position: absolute;} table {margin-top: calc(var(--default-margin) / 2);}} &.has-overflow {.cmd-slide-button {display: flex;}}}.cmd-tabs{> ul {margin: 0; display: flex; > li {z-index: 10; margin-left: 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); list-style-type: none; background: var(--color-scheme-background-color); a {display: flex; align-items: center; justify-content: center; padding: var(--default-padding); border: var(--default-border); border-bottom: 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); text-decoration: none; &:hover,&:active,&:focus {cursor: pointer; color: var(--hyperlink-color-highlighted); border-color: var(--hyperlink-color); span,[class*="icon-"] {color: inherit;}}} &.active {span,[class*="icon-"] {color: var(--pure-white);} &:hover,&:active {a,a:focus {color: var(--hyperlink-color); background: var(--pure-white); span,[class*="icon-"] {color: var(--hyperlink-color-highlighted);}}} a:focus {color: var(--pure-white); span,span[class*="icon-"],.iconify {color: inherit !important;}}}} &.stretch-tabs {> li {flex: 1; text-align: center;} > div {border-top-right-radius: 0;}}} .headline {margin-top: 0;} > div {padding: var(--default-padding); border: var(--primary-border); border-radius: var(--border-radius); background: var(--color-scheme-background-color); border-top-left-radius: 0; > div {*:last-child {margin-bottom: 0;}}}}.edit-mode .cmd-text-image-block textarea{width:100%}.cmd-toggle-dark-mode{&.styled-layout{input { --dark-blue: hsl(195, 96%, 45%); --medium-blue: hsl(194, 97%, 39%); --light-blue: hsl(195, 97%, 76%); background: linear-gradient(to bottom, var(--dark-blue) 0%, var(--light-blue) 67%); border-color: var(--medium-blue); &::after { --yellow-hue: 60; --yellow-saturation: 100%; --yellow-lightness: 76.7%; background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%); border-color: transparent; box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)); } } &.dark-mode {input {background: var(--color-scheme-background-color); border-color: var(--color-scheme-text-color); &::before { --size: 1.2rem; content: ""; width: var(--size); aspect-ratio: 1/1; background: var(--color-scheme-background-color); border-radius: var(--full-circle); position: absolute; top: 0; right: calc(var(--size) / 2); transform: translateY(15%); z-index: 100; transition: var(--default-transition); } &::after {background: radial-gradient(ellipse at center,var(--pure-white) 50%,var(--medium-gray) 100%); border-color: transparent; box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue),var(--pure-white-saturation),var(--pure-white-lightness),.3);}} .label-text {span {color: var(--color-scheme-text-color);}}}}}.cmd-upload-form{.cmd-custom-headline {margin: 0; justify-content: center;} .box {background: var(--color-scheme-background-color); dl {justify-content: center; text-align: left; .list-of-file-extensions {display: table; > li:only-child {list-style-type: none; margin: 0;}}}} .total-files {> * {white-space: nowrap; &:not(a) {font-weight: bold;}}} [class*="list-of-file"] {max-height: 10rem; overflow-x: hidden; overflow-y: auto; border: var(--default-border); padding: var(--default-padding); margin: 0; > li {flex-wrap: nowrap; .progressbar {display: table; align-self: center; progress {&[value] {background: var(--color-scheme-background-color); &::-moz-progress-bar {border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); background: var(--primary-color);}}} & > span {position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; display: table; top: .2rem; padding: .1rem .2rem; line-height: 100%; background: var(--color-scheme-background-color);}}}} .list-files-wrapper {justify-content: center; align-items: center; .list-of-files {display: inline-flex; flex-direction: column; gap: calc(var(--default-gap) / 2); li {list-style-type: none; margin-left: 0; gap: calc(var(--default-gap) / 2); > a:hover,a:active,a:focus {~ * {color: var(--hyperlink-color-highlighted);}}} & + a {display: table; margin: 0 auto;}} hr {width: 100%;}} p {&.text-drag-and-drop {&.disabled {background: none !important;}}} .button.upload {align-self: center; & ~ p {& > * {display: block;}}} .error {color: var(--error-color);} & + .cmd-form-element {display: none;} .drop-area,&.drop-area {border: var(--default-border); border-style: dashed; background: var(--color-scheme-background-color); padding: var(--default-padding); text-align: center; &.allow-drop {border-style: solid;} > [class*="icon-"] {font-size: 5rem;}} &.box {display: inline-flex; flex-direction: column; background: var(--default-background-color); text-decoration: none; text-align: center; padding: var(--default-padding); span {margin: 0; &[class*="icon-"] {font-size: 5rem;}}}}.cmd-width-limitation-wrapper{> * {max-width: var(--max-width); margin: 0 auto; padding: var(--default-padding);} &.sticky {position: sticky; left: 0; right: 0; top: 0;}}
+.iconify{font-size:var(--icon-size);vertical-align:text-bottom;&+span,span&+{margin-left:calc(var(--default-margin) / 2)}}.edit-component-wrapper{border:.1rem dashed transparent;transition:var(--default-transition);display:block}.edit-component-wrapper:hover,.edit-component-wrapper:active,.edit-component-wrapper:focus{border-color:var(--primary-color);background:hsla(0deg,0%,100%,.1);transition:var(--default-transition)}.edit-component-wrapper:focus,.edit-component-wrapper.active{border-style:solid;border-color:var(--primary-color)}.edit-component-wrapper:focus .action-buttons,.edit-component-wrapper.active .action-buttons{opacity:1;transition:var(--default-transition)}.edit-component-wrapper.highlight{border-color:var(--hyperlink-color-highlighted);border-style:dotted}.edit-component-wrapper .cmd-headline{margin:0}.edit-component-wrapper .component-name{display:none;position:absolute;left:auto;right:10rem;font-style:italic;z-index:10;padding:.2rem;background:var(--primary-color)}.edit-component-wrapper.active .component-name{display:block}.edit-component-wrapper .action-buttons{--action-buttons-size: 3.6rem;transition:var(--default-transition);gap:0;position:absolute;top:-1.8rem;right:.8rem;z-index:1;margin:0}.edit-component-wrapper .action-buttons li:nth-child(odd){top:0}.edit-component-wrapper .action-buttons li:nth-child(even){top:-1.6rem}.edit-component-wrapper .action-buttons li:nth-child(5){right:0}.edit-component-wrapper .action-buttons li:nth-child(4){right:calc(var(--action-buttons-size) * -.25)}.edit-component-wrapper .action-buttons li:nth-child(3){right:calc(var(--action-buttons-size) * -.5)}.edit-component-wrapper .action-buttons li:nth-child(2){right:calc(var(--action-buttons-size) * -.75)}.edit-component-wrapper .action-buttons li:nth-child(1){right:calc(var(--action-buttons-size) * -1)}.edit-component-wrapper .edit-items .action-buttons{gap:var(--default-gap-third);top:-2.3rem;left:0;right:auto;flex-wrap:nowrap;border-bottom:0;backdrop-filter:grayscale(1) brightness(1.5) blur(2rem) opacity(85%);border-radius:.5rem}.edit-component-wrapper .edit-items .action-buttons li{top:0;right:0;left:auto}.edit-component-wrapper .edit-items .action-buttons li:nth-child(5){right:0}.edit-component-wrapper .edit-items .action-buttons li:nth-child(4){right:var(--icon-font-size)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(3){right:calc(var(--icon-font-size) * 2)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(2){right:calc(var(--icon-font-size) * 3)}.edit-component-wrapper .edit-items .action-buttons li:nth-child(1){right:calc(var(--icon-font-size) * 4)}.edit-component-wrapper .edit-items .action-buttons li a.button{border-radius:var(--full-circle);font-size:1rem;display:block;padding:.5rem;background:var(--button-background-color)}.edit-component-wrapper .edit-items .action-buttons li a.button:before{content:"";font-size:1rem}.edit-component-wrapper .edit-items .action-buttons li a.button span[class*=icon-]{font-size:var(--icon-size-small);position:relative;top:0;left:0;transform:none}.edit-component-wrapper .edit-items .action-buttons li a.button.primary{background:var(--primary-color)}.edit-component-wrapper .edit-items.active{background:var(--pure-white)}.edit-component-wrapper:not(.edit-items)>ul>li a.button{background:none!important}ul.edit-component-wrapper{border:0}ul.edit-component-wrapper>li{list-style-type:none;margin:0}ul.edit-component-wrapper>li.action-buttons-wrapper{display:flex;justify-content:flex-end;padding-top:.1rem}ul.edit-component-wrapper>li.action-buttons-wrapper .action-buttons{position:relative;top:auto}ul.edit-component-wrapper>li.item-wrapper{border:.1rem dashed transparent;transition:var(--default-transition)}ul.edit-component-wrapper>li.item-wrapper:hover,ul.edit-component-wrapper>li.item-wrapper:active,ul.edit-component-wrapper>li.item-wrapper:focus{border-color:var(--primary-color);background:hsla(0deg,0%,100%,.1);transition:var(--default-transition)}ul.edit-component-wrapper>li.item-wrapper:focus,ul.edit-component-wrapper>li.item-wrapper.active{border-style:solid;border-color:var(--primary-color)}ul.edit-component-wrapper>li.item-wrapper:focus .action-buttons,ul.edit-component-wrapper>li.item-wrapper.active .action-buttons{opacity:1;transition:var(--default-transition)}.cmd-headline{margin-bottom:var(--default-margin);gap:calc(var(--default-gap) / 2);&.text-center>*{text-align:center}&.text-right>*{text-align:right}&.has-pre-headline-text{text-align:inherit;> *:first-child {display: flex; align-items: flex-start; span[class*="icon"] {bottom: .2rem;}} &.text-center {> *:first-child {justify-content: center;}} &.text-right {> *:first-child {justify-content: flex-end;}} &.text-right > * {text-align: right;} &:has(h1) span[class*="icon"] {font-size: calc(var(--headline-font-size-h1) * 1.6);} &:has(h2) span[class*="icon"] {font-size: calc(var(--headline-font-size-h2) * 1.8);} &:has(h3) span[class*="icon"] {font-size: calc(var(--headline-font-size-h3) * 1.9);} &:has(h4) span[class*="icon"] {font-size: calc(var(--headline-font-size-h4) * 2);} &:has(h5) span[class*="icon"] {font-size: calc(var(--headline-font-size-h5) * 2.1);} &:has(h6) span[class*="icon"] {font-size: calc(var(--headline-font-size-h6) * 2.2);} .pre-headline-text-wrapper {display: flex; flex-direction: column;} .pre-headline-text {font-size: var(--default-font-size); font-weight: var(--font-weight-normal); line-height: 1;} &:has(h4,h5,h6) .pre-headline-text {font-size: var(--font-size-small);} &.has-icon {&.text-center {justify-content: center; * {text-align: left;}} &.text-right {justify-content: flex-end; * {text-align: left;}}}}p {margin-bottom: 0;} h1,h2,h3,h4,h5,h6 {margin: 0; &:only-child {flex: none; width: 100%;}}}.edit-mode label.headline{input {padding: 0; height: auto; font-weight: var(--headline-font-weight);} &.h1 input {font-size: var(--headline-font-size-h1); text-transform: var(--headline-text-transform);} &.h2 input {font-size: var(--headline-font-size-h2);} &.h3 input {font-size: var(--headline-font-size-h3);} &.h4 input {font-size: var(--headline-font-size-h4);} &.h5 input {font-size: var(--headline-font-size-h5);} &.h6 input {font-size: var(--headline-font-size-h6);}}.cmd-tooltip{padding:.6rem .7rem .4rem;line-height:100%;font-size:var(--font-size-small);position:fixed;background:var(--color-scheme-background-color);z-index:100;border:var(--default-border);border-color:#3e3f41;border-right-color:#cececf;border-bottom-color:#cececf;display:flex;flex-direction:column;.headline-wrapper {display: flex; a {margin-left: auto; [class*="icon-"] {padding-left: 1rem; font-size: var(--font-size-small);}}}}@-moz-document url-prefix(){.cmd-tooltip{font-size:1.3rem;border-color:#757575}}.cmd-list-of-requirements{dl {.error { --status-color: var(--error-color); [class*="icon-"] { color: var(--status-color); } } .warning { --status-color: var(--warning-color); } .success { --status-color: var(--success-color) !important; [class*="icon-"] { color: var(--status-color); } } .info { --status-color: var(--info-color); } dt {color: var(--status-color);} [class*="icon-"] {color: var(--status-color);} & ~ a {display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;}}}.cmd-form-element{input + .place-inside {left: auto; right: .5rem} &.has-state,& + .cmd-tooltip {::placeholder {color: var(--status-color);} span {color: var(--status-color); &.place-inside { --status-color: var(--error-color); }}} :is(input[type="checkbox"],input[type="radio"]):checked {~ .label-text span {color: var(--hyperlink-color);}} &.inline {& > span {& > a:not(.button) {margin-left: calc(var(--default-margin) / 2);}}} .search-field-wrapper {margin: 0; a {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); z-index: 100; // set styles to avoid overwriting by has-state-colors &.button {span {color: var(--color-scheme-background-color);} &:hover,&:active,&:focus {span {color: var(--color-scheme-text-color);}}}} input:not(:only-child) {border-top-right-radius: 0; border-bottom-right-radius: 0;} a.button {right: 0; & + a {right: 5rem;}}} .place-inside {+ .search-field-wrapper {input {padding-left: calc(var(--default-padding) * 3);}}} .characters-left-wrapper {margin-top: calc(var(--default-margin) / 2); display: block; span:not(:only-child):first-child {margin-right: calc(var(--default-margin) / 2); color: var(--color-scheme-text-color);} .characters-left {color: var(--color-scheme-text-color); &.error {color: var(--error-color);}}}}.cmd-address-data{dl {grid-row-gap: calc(var(--default-gap) / 2); dt {display: flex; top: .2rem; &.address {align-self: flex-start; [class*="icon"]:only-child {line-height: var(--line-height);}}}} ul {gap: calc(var(--default-gap) / 2); margin-left: 0; li {margin-left: 0; list-style: none;}} .edit-component-wrapper {dl {margin-bottom: 0;}}}.edit-component-wrapper .cmd-address-data address{display:flex;flex-direction:column;gap:calc(var(--default-gap) / 2);dt {min-width: 2.5rem;}}.cmd-bank-account-data{dd {display: flex; gap: calc(var(--default-gap) / 2); > span {&:first-child {white-space: nowrap;}}}}.cmd-image{img {display: block;} &.text-center {figcaption {text-align: center;}} &.text-right {figcaption {text-align: right;}} .drop-area {border: 0; align-items: center; justify-content: center; padding: 0; > [class*="icon"] {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 10rem; color: var(--pure-white); text-shadow: var(--text-shadow); z-index: 10;} img {opacity: .7; transition: var(--default-transition); &:hover,:active,:focus {opacity: 1; transition: var(--default-transition);} &:not([src]) {display: block; width: 100%; min-height: 30rem;}}}}.edit-mode .edit-component-wrapper .cmd-image{label.edit-mode input {padding: calc(var(--default-padding) / 2);}}.cmd-slide-button.button{font-size:2rem;z-index:10;height:100%;position:absolute;display:flex;justify-content:center;text-decoration:none;border:0;outline:0}.cmd-slide-button.button span{align-self:center}.cmd-slide-button.button.prev{left:0;top:0}.cmd-slide-button.button.next{right:0;top:0}.cmd-slide-button.button.up,.cmd-slide-button.button.down{width:100%;height:auto;left:0;top:0}.cmd-slide-button.button.down{bottom:0;top:auto}@media only screen and (max-width: 600px){.cmd-slide-button.button{width:auto}}.cmd-thumbnail-scroller{display:inline-flex;flex-direction:column;gap:var(--default-gap);width:100%;&.full-width:not(.vertical){display:flex;> div {width: 100%;}}> .inner-thumbnail-wrapper {border-radius: var(--border-radius); padding: calc(var(--default-padding) * 2); padding-top: 0; margin: 0 auto; border: var(--default-border); background: var(--color-scheme-background-color); overflow: hidden; > ul {overflow: hidden; margin: 0; display: flex; gap: var(--grid-gap); justify-content: space-between; width: 100%; > li {align-self: center; list-style-type: none; margin: 0; margin-top: 2rem; flex: none; img {border-radius: var(--border-radius); min-width: 15rem; max-height: 10rem;} a {display: block; text-align: center; &.active {color: var(--pure-white); span,span[class*="icon"] {color: inherit} figcaption {opacity: 1;}} &:has(img) {padding: 0;} &:hover,&:active,&:focus {&.active {figcaption {color: var(--hyperlink-color);}}}} .image-wrapper {min-width: 11.1rem;}}}} &.vertical {width: auto; .inner-thumbnail-wrapper {display: inline-flex; left: 50%; height: 75rem; transform: translateX(-50%); > ul {width: auto; display: flex; flex-direction: column; [class*="switch-button-"] {width: 100%; height: auto; &::before {transform: rotate(90deg); display: inline-block; margin: 0 auto;}}} .slide-button-next {top: auto; bottom: 0;}}} &.gallery-scroller {max-width: var(--max-width); left: 0; right: 0; position: fixed; bottom: var(--default-margin); margin: auto; display: table; li {a {color: var(--color-scheme-text-color); text-decoration: none; &.active {img {border-color: var(--primary-color);} figcaption {color: var(--primary-color);}} &:not(.active) {img {border: var(--default-border); opacity: var(--reduced-opacity);} figcaption {text-decoration: none;}} &:hover,&:active,&:focus {figcaption {color: var(--primary-color);} img {border-color: var(--primary-color); opacity: 1;}}}}} &.large-icons {li a {display: flex; flex-direction: column; gap: calc(var(--default-gap) / 4); text-decoration: none; align-items: center; justify-content: center; span {margin: 0;} [class*="icon-"] {font-size: 5rem;}}}}@media only screen and (max-width: 1023px){.cmd-thumbnail-scroller>ul>li{flex:none}.cmd-thumbnail-scroller>ul>li img{max-height:7rem}.cmd-thumbnail-scroller img{width:auto}.cmd-thumbnail-scroller.gallery-scroller{max-width:calc(100% - var(--default-margin) * 3);display:flex}}@container (width <= 600px){.cmd-thumbnail-scroller{display:block}}.cmd-fancybox{z-index:500;flex-direction:column;padding:var(--default-padding);min-width:30vw;min-height:30vh;background:var(--pure-white);border-radius:var(--border-radius);overflow:hidden;gap:calc(var(--default-gap) / 2);&.image-gallery{margin-top:calc(var(--default-margin) * 2)}&[open]{display:flex}&.show-overlay::backdrop{--reduced-opacity: .75;background:rgba(0,0,0,var(--reduced-opacity))}> header {display: flex;} .cmd-cookie-disclaimer {padding: 0;} > .grayscale {filter: grayscale(1);} &.image {.outer-content-wrapper {max-height: none;} img {display: block; margin: 0 auto;} figcaption {text-align: center;}} .inner-thumbnail-wrapper li {figure {opacity: .8;} &.active {figure {opacity: 1;} img {border-color: var(--hyperlink-color-highlighted);} a {color: var(--hyperlink-color-highlighted);}}} > header {justify-content: space-between; > .cmd-headline {max-width: 80%; flex-shrink: 1; margin-bottom: 0;} > .button-wrapper {flex-shrink: 0; flex-direction: row; align-items: flex-start; gap: calc(var(--default-gap) / 2); margin-left: auto; > .button {display: block; border: var(--default-border); padding: .2rem; min-width: 0; min-height: 0; &[class*="print"] > [class*="icon-"] {color: var(--text-color);} &.print-grayscale {background: linear-gradient(135deg,var(--medium-gray) 0%,var(--medium-gray) 50%,var(--pure-white) 50%,var(--pure-white) 100%);} &.print-color {background: linear-gradient(135deg,#009fe3 0%,#009fe3 25%,#e6007e 25%,#e6007e 50%,#ffed00 50%,#ffed00 50%,#ffed00 75%,var(--medium-gray) 75%,var(--medium-gray) 100%);} &:hover,&:active,&:focus {border: var(--primary-border); background: var(--pure-white); [class*="icon-"] {color: var(--primary-color);}}}}} > footer {margin-top: auto; justify-content: flex-end;} .outer-content-wrapper {max-height: 85vh; overflow-x: hidden; max-width: var(--max-width); .content {> img,> video {&:only-child {margin: auto; max-height: 80vmin; max-width: 80vmax;}} figcaption {font-size: 2rem; padding: calc(var(--default-padding) / 2) 0;}}}}@media only screen and (max-width: 1023px){.cmd-fancybox .outer-content-wrapper .content>img:only-child,.cmd-fancybox .outer-content-wrapper .content>video:only-child{margin:auto;max-height:60vmin}.cmd-fancybox>header{flex-direction:row}.cmd-fancybox>header .button:not(#close-dialog){display:none}}@media only screen and (max-width: 600px){.cmd-fancybox .outer-content-wrapper .content>img:only-child,.cmd-fancybox .outer-content-wrapper .content>video:only-child{max-height:50vmin}.cmd-fancybox [class*=switch-button-]{width:3rem}.cmd-fancybox [class*=switch-button-]:before{margin:0;top:40%}}@media only screen and (max-width: 1023px){dialog{margin-top:var(--default-margin)}}.cmd-list-of-links{> ul {flex-direction: column; gap: calc(var(--default-gap) / 2); margin: 0; li {list-style: none; margin-left: 0;}} &.horizontal {> ul {gap: var(--default-gap); flex-direction: row; > li {flex: none; display: flex;} &.align-center {justify-content: center;} &.align-right {justify-content: flex-end;} &.stretch {justify-content: space-around;}}} &.large-icons {li a {display: flex; flex-direction: column; gap: calc(var(--default-gap) / 4); text-decoration: none; align-items: center; justify-content: center; span {margin: 0;} [class*="icon-"] {font-size: 5rem;}}}}.cmd-box{display:inline-flex;flex-direction:column;padding:0;align-self:start;&.stretch-horizontally{display:flex;width:100%}&.stretch-vertically{height:100%}.box-header .cmd-headline {margin-bottom: 0;} &.collapsible {a.box-header {justify-content: space-between; background: var(--hyperlink-color); &:hover,&:active,&:focus {background: var(--pure-white); * {color: var(--hyperlink-color);}}}} .box-body {.allow-scroll {overflow-y: auto; max-height: var(--ea5fd23e);}} &.content {> * {*:last-child {margin-bottom: 0;}} &.open {> .box-header {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}} > .box-header {display: flex; align-items: center; border-radius: var(--border-radius); padding: calc(var(--default-padding) / 2) var(--default-padding); background: var(--secondary-color); color: var(--pure-white); text-decoration: none; > .cmd-custom-headline {margin-bottom: 0;} * {color: var(--pure-white); margin-bottom: 0;} > .toggle-icon {margin-left: auto;} > .toggle-icon,.toggle-icon > [class*="icon-"] {font-size: var(--font-size-small);}} .box-body {flex-grow: 1; border-top: var(--default-border); p.cutoff-text {padding: var(--default-padding); margin: 0; overflow: hidden; height: calc(var(--line-of-text-height) * var(--203af1f4)); &.fade-last-line::after {content: ""; width: 100%; position: absolute; left: 0; bottom: 0; height: calc(var(--line-of-text-height) * 3); background: linear-gradient(to bottom,transparent 0%,var(--default-background-color) 100%);} &.show-text {height: auto;} & + a {border-top: var(--default-border); display: block; padding: var(--default-padding); margin: 0;}} img {display: block; border-radius: 0;} .navigation {margin: 0; height: 100%; li {list-style-type: none; margin: 0; a {display: block; padding: var(--default-padding); text-decoration: none; border-bottom: var(--default-border); &:hover,&:active,&:focus {background: var(--primary-color); color: var(--pure-white);}} &:last-child {a {border: 0;}}}}} .box-footer {border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding: var(--default-padding); border-top: var(--default-border);}} &.product,&.user {> div {> .cmd-custom-headline {margin-top: var(--default-margin); justify-content: center;}}} &.product {text-decoration: none; overflow: hidden; [class*="ribbon"] {position: absolute; z-index: 10; overflow: hidden; width: 10rem; height: 10rem; top: 0; left: 0; span {position: absolute; display: block; transform: rotate(-45deg); width: 100%; top: 15%; left: -25%; background: var(--error-color); font-weight: bold; color: var(--pure-white); text-transform: uppercase; text-align: center;}} .ribbon-discount {left: auto; right: 0; span {transform: rotate(45deg); right: -20%; left: auto; background: green;}} > .box-header {> img,> div {display: table; margin: 0 auto;} img {border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;} figcaption {font-size: 2rem; font-weight: bold; padding-top: var(--default-padding)}} .box-body {flex-grow: 1; > * {text-align: center;} .price {font-size: 1.8rem; font-weight: bold; span:last-child {margin-left: calc(var(--default-margin) / 2);}}} &:hover,&:active,&:focus {border-color: var(--hyperlink-color-highlighted);}} &.user {> .box-header { --icon-size: 6rem; padding: var(--default-padding); .cmd-headline { > * { display: block; text-align: center; } } img, > div:first-child > [class*="icon-"] { display: table; margin: 0 auto var(--default-margin) auto; padding: calc(var(--default-padding) * 3); border-radius: var(--full-circle); background: var(--primary-color); color: var(--pure-white); & + p, & + figcaption { margin: 0 auto; text-align: center; font-weight: bold; font-size: 2rem; } } img { padding: 0; width: calc(var(--icon-size) * 2); aspect-ratio: 1/1; } > div:first-child > [class*="icon-"] { font-size: var(--icon-size); } } .box-body {flex-grow: 1; p {text-align: center; font-weight: bold; &:last-child {margin-bottom: 0;} &.description {font-weight: normal;}}} .box-footer {margin-top: auto; border-top: var(--default-border); .cmd-list-of-links {ul {width: 100%; margin-bottom: 0; li {flex: 1; a {flex: 1; padding: var(--default-padding); text-align: center; background: var(--color-scheme-background-color); border-left: var(--default-border);} &:hover,&:active,&:focus {a {background: var(--primary-color); color: var(--pure-white); span,[class*="icon-"] {color: var(--pure-white);}}} &:first-child {a {border: 0;}}}}}} &.row-view {[class*="icon"] { --icon-size: 3rem; } .box-header > div:first-child > [class*="icon-"] {padding: calc(var(--default-padding) * 1.5);} .box-body p {text-align: left;} .box-footer {border: 0; .cmd-list-of-links {background: none; ul,ul * {border: 0; background: inherit;}}}}}}.cmd-box-wrapper{display:flex;flex-direction:column;gap:calc(var(--default-gap) / 2);&:not(:first-child){margin-top:calc(var(--default-margin) * 2)}> .headline-wrapper {align-items: center; justify-content: space-between;} .options-wrapper {flex: none;} > .flex-container {> .cmd-headline {margin: 0;} &.stretch-boxes-vertically {.stretch-vertically {align-self: stretch; height: auto;}}} .inner-box-wrapper > *{flex: none; flex-grow: 1; flex-basis: min-content;} .row-view {flex-direction: column; p.cutoff-text {height: auto; &.fade-last-line::after {background: none;}} .cmd-box.user {flex-direction: row; padding: var(--default-padding); align-items: center; .box-footer {margin-top: 0;}}} > .grid-container-create-columns {grid-template-columns: repeat(var(--4018ee97),minmax(0,1fr)); &.row-view {grid-template-columns: repeat(1,minmax(0,1fr));}}}@media only screen and (max-width: 1023px){.cmd-box-wrapper>.grid-container-create-columns{grid-template-columns:repeat(var(--762870ce),minmax(0,1fr))}}@media only screen and (max-width: 600px){.cmd-box-wrapper>.grid-container-create-columns{grid-template-columns:repeat(var(--4080c863),minmax(0,1fr))}}.cmd-breadcrumbs{display:flex;margin:0;li {display: inherit; align-items: center; list-style-type: none; margin: 0; > span {padding: 0 calc(var(--default-padding) / 2);} &:first-child {margin-right: calc(var(--default-margin) / 2);} &:last-child {> span {display: none;}} a {display: inherit; align-items: inherit; text-decoration: none; &:hover,&:active,&:focus {text-decoration: underline;}}}}.cmd-company-logo{img {display: block; max-height: 10rem;} > a {display: block; img {border: 0;}}}@media only screen and (max-width: 1023px){.cmd-company-logo img{max-width:100%;max-height:7.5rem}}.cmd-container{min-height:5rem}.cmd-cookie-disclaimer{width:100%;padding:var(--default-padding);padding-right:calc(var(--default-padding) * 2);z-index:100;bottom:0;top:auto;.cmd-box {.box-header {padding: 0; padding-right: var(--default-padding); justify-content: unset; label {padding: calc(var(--default-padding) / 2) var(--default-padding); &.disabled {.label-text span {color: var(--pure-white) !important;}} & + .toggle-icon {padding: calc(var(--default-padding) / 2) var(--default-padding); width: 100%; justify-content: flex-end; text-align: right;}} &:hover,&:active,&:focus {background: var(--hyperlink-color); label.disabled .label-text span {color: var(--disabled-color) !important;}}} .box-body {padding: var(--default-padding);}} h1 {text-align: center;} .button {margin: 0 auto;} > p {text-align: center;} #form-cookies {margin-bottom: var(--default-margin);} p {a {text-decoration: underline; &:hover,&:active,&:focus {text-decoration: none;}}}}.cmd-copyright-information{background:var(--text-color);border-top:var(--border-width) var(--border-style) var(--pure-white);text-align:center;padding:var(--default-padding);a {text-decoration: none; color: var(--pure-white); &:hover,&:active,&:focus {text-decoration: underline; color: var(--pure-white);}}}.cmd-fake-select{align-self:flex-end;border-radius:var(--border-radius)}.cmd-fake-select>span:first-child a{align-self:flex-end}.cmd-fake-select>ul{height:var(--input-height);margin:0;display:block;min-width:0;box-shadow:none;border-radius:var(--border-radius)}.cmd-fake-select>ul>li{height:100%}.cmd-fake-select>ul>li:first-child>a{height:inherit;border:var(--default-border);background:var(--color-scheme-background-color);color:var(--color-scheme-text-color)}.cmd-fake-select>ul>li:first-child>a span,.cmd-fake-select>ul>li:first-child>a [class*=icon]{color:var(--color-scheme-text-color)}.cmd-fake-select>ul>li:first-child>a .option-name{text-overflow:ellipsis;overflow:hidden}.cmd-fake-select>ul>li:first-child>a>[class*=icon-]:last-child{margin-left:auto;font-size:var(--icon-size-small)}.cmd-fake-select>ul>li:first-child>a:hover,.cmd-fake-select>ul>li:first-child>a:active,.cmd-fake-select>ul>li:first-child>a:focus{background:var(--pure-white);border-color:var(--primary-color)}.cmd-fake-select>ul>li:first-child>a:hover span,.cmd-fake-select>ul>li:first-child>a:hover [class*=icon],.cmd-fake-select>ul>li:first-child>a:active span,.cmd-fake-select>ul>li:first-child>a:active [class*=icon],.cmd-fake-select>ul>li:first-child>a:focus span,.cmd-fake-select>ul>li:first-child>a:focus [class*=icon]{color:var(--hyperlink-color)}.cmd-fake-select>ul.open{border-bottom:0}.cmd-fake-select>ul.open>li:first-child>a{border-color:var(--primary-color)}.cmd-fake-select li{margin-left:0;list-style:none}.cmd-fake-select li a,.cmd-fake-select li a:visited{display:flex;align-items:center;padding:.8rem .7rem .7rem;outline:none;border-bottom:var(--default-border);text-decoration:none}.cmd-fake-select li a:hover,.cmd-fake-select li a:active,.cmd-fake-select li a:focus,.cmd-fake-select li a:visited:hover,.cmd-fake-select li a:visited:active,.cmd-fake-select li a:visited:focus{background:var(--primary-color)}.cmd-fake-select li a:hover span,.cmd-fake-select li a:hover [class*=icon],.cmd-fake-select li a:active span,.cmd-fake-select li a:active [class*=icon],.cmd-fake-select li a:focus span,.cmd-fake-select li a:focus [class*=icon],.cmd-fake-select li a:visited:hover span,.cmd-fake-select li a:visited:hover [class*=icon],.cmd-fake-select li a:visited:active span,.cmd-fake-select li a:visited:active [class*=icon],.cmd-fake-select li a:visited:focus span,.cmd-fake-select li a:visited:focus [class*=icon]{color:var(--pure-white)}.cmd-fake-select li a span:first-child,.cmd-fake-select li a span:nth-child(2),.cmd-fake-select li a:visited span:first-child,.cmd-fake-select li a:visited span:nth-child(2){border:0}.cmd-fake-select li a img.flag,.cmd-fake-select li a:visited img.flag{margin:0 calc(var(--default-margin) / 2) 0 0}.cmd-fake-select li a.active,.cmd-fake-select li a:visited.active{background:var(--light-gray)}.cmd-fake-select li a.active span,.cmd-fake-select li a:visited.active span{color:var(--hyperlink-color)}.cmd-fake-select li a.active:hover,.cmd-fake-select li a.active:active,.cmd-fake-select li a.active:focus,.cmd-fake-select li a:visited.active:hover,.cmd-fake-select li a:visited.active:active,.cmd-fake-select li a:visited.active:focus{background:var(--primary-color)}.cmd-fake-select li a.active:hover span,.cmd-fake-select li a.active:hover [class*=icon],.cmd-fake-select li a.active:active span,.cmd-fake-select li a.active:active [class*=icon],.cmd-fake-select li a.active:focus span,.cmd-fake-select li a.active:focus [class*=icon],.cmd-fake-select li a:visited.active:hover span,.cmd-fake-select li a:visited.active:hover [class*=icon],.cmd-fake-select li a:visited.active:active span,.cmd-fake-select li a:visited.active:active [class*=icon],.cmd-fake-select li a:visited.active:focus span,.cmd-fake-select li a:visited.active:focus [class*=icon]{color:var(--pure-white)}.cmd-fake-select li label{display:flex}.cmd-fake-select li span{white-space:nowrap}.cmd-fake-select li ul{position:absolute;list-style:none;z-index:10;min-width:100%;margin:0;border-bottom-right-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);background:var(--color-scheme-background-color);border:var(--primary-border)}.cmd-fake-select li ul li:last-child a{border-bottom:0}.cmd-fake-select li ul.custom-fake-select-content{padding:var(--default-padding)}.cmd-fake-select li ul.custom-fake-select-content img{display:block}.cmd-fake-select li ul.checkbox-options li{padding:calc(var(--default-padding) / 2)}.cmd-fake-select li ul.checkbox-options li.select-all-options{border-top:var(--primary-border);padding:0}.cmd-fake-select.has-state.label>ul>li>a{border-color:var(--status-color)}.cmd-fake-select.has-state.label>ul>li>a>span,.cmd-fake-select.has-state.label>ul>li>a [class*=icon-]{color:var(--status-color)}.cmd-fake-select.has-state.label>ul>li>a:hover,.cmd-fake-select.has-state.label>ul>li>a:active,.cmd-fake-select.has-state.label>ul>li>a:focus{background:var(--color-scheme-background-color)}.cmd-fake-select.has-state.label>ul>li>a:hover span,.cmd-fake-select.has-state.label>ul>li>a:active span,.cmd-fake-select.has-state.label>ul>li>a:focus span{color:var(--status-color)}.cmd-fake-select.disabled>ul>li>a{color:var(--disabled-color);border-color:var(--disabled-color);background:var(--disabled-background-color)}.cmd-fake-select.disabled>ul>li>a span{color:var(--disabled-color)}.cmd-fake-select.disabled>ul>li>a:hover,.cmd-fake-select.disabled>ul>li>a:active,.cmd-fake-select.disabled>ul>li>a:focus{cursor:not-allowed;color:var(--disabled-color);border-color:var(--disabled-color);background:var(--disabled-background-color)}.cmd-fake-select.disabled>ul>li>a:hover span,.cmd-fake-select.disabled>ul>li>a:active span,.cmd-fake-select.disabled>ul>li>a:focus span{color:var(--disabled-color)}.cmd-fake-select.error a:hover img.flag,.cmd-fake-select.error a:focus img.flag,.cmd-fake-select.error a:active img.flag,.cmd-fake-select.disabled a:hover img.flag,.cmd-fake-select.disabled a:focus img.flag,.cmd-fake-select.disabled a:active img.flag{border-color:var(--border-color)}.cmd-fake-select.color li a{gap:calc(var(--default-gap) / 2)}.cmd-fake-select.color li a>span:first-child{width:1.5rem;aspect-ratio:1/1;border:var(--default-border)}.cmd-fake-select.color li a>span:first-child[style=""]{display:none}.cmd-form{&:not([data-use-validation="true"]){label.error :where(::placeholder,select option:first-child),:where(input,select,textarea):invalid:focus {color: var(--error-color);} :where(input,select,textarea):valid:focus[required],select:invalid:focus[required] option:not(:first-child) {color: var(--success-color);}}&.error{fieldset,*:invalid {border-color: var(--error-color);}}.button,.button:last-child {margin-left: auto;}}.cmd-form-filters{display:flex;margin:0;li {list-style-type: none; margin-left: 0; margin-right: var(--default-margin); border: var(--default-border); background: var(--pure-white); font-size: var(--font-size-small); &:hover,&:active,&:focus {border-color: var(--primary-color);} a {padding: calc(var(--default-padding) / 2); display: flex; align-items: center; text-decoration: none;} &:last-of-type {margin-right: 0;} [class*="icon-"] {font-size: var(--icon-size-small);}}}.cmd-google-maps{border:var(--default-border)}.cmd-image-gallery{> .cmd-headline,> input.edit-mode,> .edit-component-wrapper {grid-column: span var(--grid-columns); margin-bottom: 0;} .image-wrapper {align-self: center; justify-self: center; grid-column: span var(--grid-small-span); width: 100%; min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode img {border: var(--default-border); border-radius: var(--border-radius); max-height: 30rem;} figcaption {padding: calc(var(--default-padding) / 2);} &:hover,&:active,&:focus {text-decoration: none; img {border: var(--primary-border);}} & + .pager {margin-top: calc(var(--default-margin) * 2);}}}.cmd-imagezoom{overflow:hidden;.zoom-container {display: block !important; overflow: hidden; > img {max-width: none;}} .zoom-overlay {position: absolute; display: none; pointer-events: none; background: var(--primary-color); opacity: var(--reduced-opacity);}}.cmd-input-group{&.inline{display:flex;gap:var(--default-gap)}&.toggle-switch{display:block}.label-text {display: inline-flex; > span + a [class*="icon-"] {margin-left: calc(var(--default-margin) / 2);}} &.has-state {label {color: var(--status-color);} &.multiple-switch {label {border-color: var(--status-color);}}}}.cmd-login-form{.option-wrapper {align-items: center; > a:not(.button) {display: flex; align-items: center; text-decoration: none; flex: none;} > .button {margin-left: auto;}}}.cmd-main-navigation{&.hide-sub-navigation{ul {ul {display: none;}}}nav {.stretch-items {> li {flex: 1}} > ul {> li {.close-nav {display: none;} &.open {> ul {display: block; > li {&.open {> ul {display: block;}}}}}}} + div {display: none;}} .fade-enter-active,.fade-leave-active {left: 0;} .fade-enter,.fade-leave-to {left: -100%;} header nav > ul,header nav > ul > li {border: 0;}}.off-canvas-right{#toggle-offcanvas {margin-right: 0; margin-left: auto;}}#toggle-offcanvas{margin-left:0;display:none}@media only screen and (max-width: 1023px){.cmd-main-navigation#main-navigation-wrapper{--nav-transition: all .5s linear;display:flex;background:none;border:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0 var(--default-padding);transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) #toggle-offcanvas{display:flex;margin-bottom:0;width:auto}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas nav{height:100%;background:var(--default-background);left:0;opacity:1;padding:0!important;transition:var(--nav-transition);border-right:var(--default-border);display:block}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas.show-content-overlay nav:before{content:"";position:fixed;width:100%;top:0;left:0;height:100dvh;display:block;background:var(--pure-black-reduced-opacity)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).open-off-canvas.show-content-overlay nav ul{z-index:1000;height:100%}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav{position:fixed;top:0;left:-100%;width:auto;height:100dvh;opacity:0;z-index:1000;transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul{flex-direction:column;position:relative;left:0;border:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li{border-bottom:var(--default-border);border-right:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav{display:block;border-bottom:var(--default-border)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a{display:flex;align-items:center}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a span{font-weight:var(--font-weight-bold)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav a span[class*=icon-]{font-size:var(--font-size-small)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.close-nav>a{text-align:left}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):hover>ul,.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):active>ul,.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li:not(.open):focus>ul{display:none}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li:not(:first-child){border-top:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li:last-child{border-bottom:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li>a{padding-left:calc(var(--default-margin) * 2)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li>a span+[class*=icon-]:before{display:inline-block;transform:rotate(0)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li ul li ul li a{padding-left:calc(var(--default-margin) * 4)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.open>a span+[class*=icon-]:before{display:inline-block;transform:rotate(-180deg)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile) nav ul li.open>ul{height:auto;display:block;opacity:1;transition:var(--nav-transition)}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).off-canvas-right.open-off-canvas nav{right:0}.cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile).off-canvas-right nav{right:-100%;left:auto}}.cmd-multistep-form-progress-bar{display:flex;justify-content:space-around;border:var(--default-border);margin:0;border-radius:var(--default-border-radius);&.use-gap{border:0;gap:var(--default-gap);li {border: var(--default-border) !important; border-radius: var(--default-border-radius); a,a.active {border: 0; border-radius: inherit; :is(span,[class*="icon-"]) + [class*="icon-"]:last-child {border: 0; right: -1rem; background: none;}} a {:is(span,[class*="icon-"]) + [class*="icon-"]:last-child {color: var(--default-text-color) !important;}}}}li {display: flex; flex: 1; list-style-type: none; margin: 0; &:first-child,&:first-child > a {border-top-left-radius: inherit; border-bottom-left-radius: inherit;} &:last-child,&:last-child > a {border-top-right-radius: inherit; border-bottom-right-radius: inherit;} a {display: flex; text-decoration: none; padding: var(--default-padding); align-items: center; justify-content: center; width: 100%; background: var(--primary-color-reduced-opacity); :is(span,[class*="icon-"]) {color: var(--pure-white); & + [class*="icon-"] {&:last-child {border: var(--default-border); border-radius: var(--full-circle); background: var(--pure-white); color: var(--text-color); margin: 0; position: absolute; right: 0; transform: translateX(50%); padding: calc(var(--default-padding) / 2); display: flex; justify-content: center; z-index: 1; &::before {font-size: var(--font-size-small);}}}} &:hover,&:active,&:focus {background: var(--primary-color); :is(span,[class*="icon-"]) {color: var(--pure-white);} .number {color: var(--primary-color);}} .number {margin-right: calc(var(--default-margin) / 2); line-height: 100%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--full-circle); border: var(--default-border); border-color: var(--pure-white); background: var(--pure-white); color: var(--primary-color-reduced-opacity);}} &:not(:first-child) {border-left: .2rem solid var(--border-color);} &:last-child {a {[class*="icon-"] {&:last-of-type {display: none;}}}} &.active {a {background: var(--primary-color); span,[class*="icon-"] {color: var(--pure-white);} &:hover,&:active,&:focus {span,[class*="icon-"] {color: var(--pure-white); & + [class*="icon-"] {&:last-child {color: var(--text-color);}}}}} .number {background: var(--pure-white); border-color: var(--pure-white); color: var(--primary-color) !important;} & ~ li {background: var(--default-background-color); border-left-color: var(--border-color); a {background: none; color: var(--color-scheme-text-color); span,span[class*="color"] {color: inherit; & + [class*="icon-"] {&:last-child {border-color: var(--border-color); color: var(--pure-white); background: var(--secondary-color);}}} &:hover,&:active,&:focus {span,[class*="icon-"] {&:not(:last-child) {color: var(--primary-color);}} .number {border-color: var(--primary-color);}}} .number {background: none; border-color: var(--border-color);}} & + li {border-left-color: var(--border-color);}}}}@media only screen and (width < 600px){.cmd-multistep-form-progress-bar{flex-direction:column}.cmd-multistep-form-progress-bar li:not(:last-child){border-bottom:var(--default-border)}.cmd-multistep-form-progress-bar li a :is(span,[class*=icon-])+[class*=icon-]:last-child{left:auto;right:auto;bottom:0;transform:translateY(50%)}.cmd-multistep-form-progress-bar li a :is(span,[class*=icon-])+[class*=icon-]:last-child:before{transform:rotate(90deg)}.cmd-multistep-form-progress-bar li.active~li{border-left:0;border-bottom-color:var(--border-color)}}.edit-mode-opening-hours-item{dt {min-width: 3ch;} .am-wrapper,.pm-wrapper {align-items: center; gap: calc(var(--default-gap) / 2);} label {max-width: 11rem;} .input-wrapper {width: 11rem;}}.cmd-opening-hours{> a,> span {padding: calc(var(--default-padding) / 2); font-weight: bold; display: table; margin-bottom: var(--default-margin); color: var(--pure-white); background: var(--success-color); &.closed {background: var(--error-color);}} > a {&:hover,&:active,&:focus {text-decoration: underline; color: var(--pure-white);}} span.pm {margin-left: var(--default-margin);} p:last-child {margin: 0;} .edit-component-wrapper {dl {margin-bottom: 0;}}}.edit-component-wrapper .cmd-opening-hours{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--default-gap) / 2);dt {min-width: 2.5rem;}}.cmd-pager{display:flex;justify-content:space-between;button,.button {float: none; margin: 0; span {align-self: center;}} a {display: flex; align-items: center; text-decoration: none; &:hover,&:active,&:focus {cursor: pointer;} &:last-of-type {> [class*="icon-"] {margin-right: 0;}} > [class*="icon-"] {font-size: var(--icon-size-small);}} .page-index {a:not(.button) {padding: 0 calc(var(--default-padding) / 2);}}}@media only screen and (max-width: 1023px){.cmd-pager>a.button span{margin:0}.cmd-pager>a.button span:not([class*=icon]){display:none}}@media only screen and (max-width: 1023px) and (max-width: 600px){.cmd-pager .button{width:auto}.cmd-pager .page-index .flex-container{flex-direction:row}}.cmd-progressbar{.progressbar {display: table; & > span {position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;}}}.cmd-sidebar{display:flex;height:100%;&.box{padding:0}.cmd-box-wrapper > .grid-container-create-columns {grid-template-columns: repeat(1,minmax(0,1fr));} .cmd-box {border-left: 0; border-right: 0;} .inner-sidebar-wrapper {flex: 1; display: flex; flex-direction: column; .cmd-headline.sidebar-main-headline {padding: var(--default-padding); margin: 0;}} .open-slot-wrapper {flex: 1;} & > a {display: flex; flex: none; text-decoration: none; padding: calc(var(--default-padding) / 2); align-items: center; border-left: var(--default-border);} &.collapse-to-right {flex-direction: row-reverse; border-right: 0; > a {border-right: var(--default-border);}}}.cmd-site-footer{padding:var(--grid-gap) 0;border-top:var(--default-border);background:var(--default-background-color);footer {max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 var(--default-padding);} &.sticky {top: auto; bottom: 0;} .cmd-switch-language {width: 100%; flex: none;}}@media only screen and (max-width: 1023px){.cmd-site-footer footer li{margin-bottom:calc(var(--default-margin) * 2)}}@media only screen and (max-width: 1023px) and (max-width: 600px){.cmd-site-footer a{text-decoration:underline}.cmd-site-footer a:active{text-decoration:none}.cmd-site-footer h4,.cmd-site-footer h5,.cmd-site-footer h6{margin-top:var(--default-margin)}}.cmd-site-header{grid-area:site-header;display:flex;flex-direction:column;border-bottom:var(--default-border);background:var(--color-scheme-background-color)}.cmd-site-header.sticky{position:sticky;z-index:300}.cmd-site-header header,.cmd-site-header .cmd-main-navigation nav,.cmd-site-header .cmd-list-of-links{max-width:var(--max-width);width:100%;margin:0 auto;padding:0 var(--default-padding)}.cmd-site-header .cmd-main-navigation nav{width:auto}.cmd-site-header .top-header .cmd-list-of-links{padding-top:calc(var(--default-padding) / 2);padding-bottom:calc(var(--default-padding) / 2)}.cmd-site-header #main-navigation-wrapper{grid-column:span var(--grid-columns);border-bottom:0}.cmd-site-header>.cmd-main-navigation#main-navigation-wrapper:last-child{border-bottom:0}.cmd-site-header header{padding-top:calc(var(--default-padding) * 2);padding-bottom:calc(var(--default-padding) * 2);row-gap:0}.cmd-site-header header.has-navigation{grid-template-rows:1fr min-content;grid-template-areas:"company-logo" "main-navigation";padding-bottom:0}.cmd-site-header header.flex-container{width:100%}.cmd-site-header header.flex-container .cmd-company-logo{grid-area:company-logo;flex:none}.cmd-site-header header .cmd-main-navigation nav{padding:0}.cmd-site-header header .cmd-main-navigation,.cmd-site-header header nav ul li{border-bottom:0}.cmd-site-header.navigation-inline header.has-navigation{grid-template-rows:1fr;grid-template-areas:"company-logo main-navigation";padding-bottom:calc(var(--default-padding) * 2)}.cmd-site-header.navigation-inline header .cmd-company-logo{grid-area:company-logo;grid-column:span var(--grid-small-span)}.cmd-site-header.navigation-inline header #main-navigation-wrapper{grid-area:main-navigation;display:flex;align-items:center;justify-content:flex-end;grid-column:span var(--grid-large-span)}.cmd-site-header.navigation-inline header #main-navigation-wrapper:not(.persist-on-mobile){padding-left:0!important}.cmd-site-header.navigation-inline.off-canvas-right header.has-navigation{grid-template-areas:"company-logo main-navigation"}@media only screen and (max-width: 1023px){.cmd-site-header header{grid-auto-rows:auto}.cmd-site-header header .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0}.cmd-site-header.navigation-inline .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding-left:var(--default-padding)}.cmd-site-header.navigation-inline.off-canvas-right .cmd-main-navigation#main-navigation-wrapper:not(.persist-on-mobile){padding:0}}@media only screen and (max-width: 600px){.cmd-site-header{gap:calc(var(--default-gap) / 2)}.cmd-site-header .top-header .cmd-list-of-links{padding:0}.cmd-site-header .cmd-company-logo{margin:0 auto}.cmd-site-header.navigation-inline header .cmd-company-logo,.cmd-site-header.navigation-inline header #main-navigation-wrapper{grid-column:span calc(var(--grid-small-span) / 2)}}.cmd-box-site-search{flex-wrap:nowrap}.cmd-box-site-search>a [class*=icon]{font-size:var(--icon-size-small)}.cmd-box-site-search button{align-self:flex-end}@media only screen and (max-width: 600px){.cmd-box-site-search{flex-wrap:nowrap}}.cmd-slideshow{figure a,img {display: block; text-decoration: none; margin: 0 auto;} figcaption {width: 100%; display: block; text-align: center; bottom: 0; padding: var(--default-padding); line-height: 100%; font-size: 3rem; color: var(--pure-white); background: var(--primary-color);} .inner-slideshow-wrapper {display: flex; justify-content: center; > a:not(.button) {text-decoration: none; figcaption {border: var(--primary-border); &:hover,&:active,&:focus {background: var(--pure-white); color: var(--hyperlink-color);}}} figure {width: 100%; margin: 0;} .slot-wrapper {padding: calc(var(--default-padding) * 5); width: 100%; min-height: 50rem; background-repeat: no-repeat; background-position: top center; display: flex; justify-content: center; align-content: center; .box {align-self: flex-start;}} .image-wrapper {width: 100%; min-width: 11.1rem; min-height: 50rem;} > ol {display: flex; margin: 0 auto; position: absolute; left: 5.5rem; top: .5rem; gap: calc(var(--default-gap) / 2); li {padding: .2rem; list-style-type: none; margin: 0; border: var(--default-border-reduced-opacity); border-radius: var(--full-circle); background: var(--light-gray); a {display: block; width: 1rem; height: 1rem; border-radius: var(--full-circle);} &:hover,&:active,&:focus,&.active {border-color: var(--hyperlink-color); a {background: var(--pure-white); transition: var(--default-transition);}}} &.bottom {position: relative; justify-content: center; left: unset; top: unset; li {border-color: var(--primary-color); &:hover,&:active,&:focus,&.active {border-color: var(--primary-color); background: var(--pure-white); a {background: var(--primary-color);}}}} &.vertical {flex-direction: column;}} > .item-counter {position: absolute; top: .5rem; right: 5.5rem; padding: 0 .2rem; border-radius: var(--border-radius); background: var(--pure-white-reduced-opacity);}}}.edit-mode .cmd-slideshow .image-wrapper.edit-items{padding:0;margin-top:2rem;label.edit-mode input {font-size: 3rem;}}@media only screen and (max-width: 1023px){.cmd-slideshow figcaption{font-size:2rem}}[id^=social-network]{background:var(--social-network-color);border-color:var(--social-network-color)}[id^=social-network]>span{color:var(--pure-white)}[id^=social-network]:hover,[id^=social-network]:active,[id^=social-network]:focus{color:var(--pure-white)}[id^=social-network]:hover>span,[id^=social-network]:active>span,[id^=social-network]:focus>span{color:var(--social-network-color)}#social-network-facebook{--social-network-color: #3c5a99}#social-network-twitter{--social-network-color: #6bacde}#social-network-xing{--social-network-color: #007575}#social-network-linkedin{--social-network-color: #0077b5}.cmd-social-networks{display:flex;flex-direction:column;gap:var(--default-gap);container-type:inline-size}.cmd-social-networks .cmd-headline{margin:0}.cmd-social-networks .button-wrapper{flex-direction:row;flex:none;margin:0;gap:calc(var(--default-gap) / 2)}.cmd-social-networks .button-wrapper .button{padding:calc(var(--default-padding) / 2) var(--default-padding);gap:calc(var(--default-gap) / 2);outline:0}.cmd-social-networks .button-wrapper .button span{margin:0}.cmd-social-networks .button-wrapper .button:first-of-type{margin:0}.cmd-social-networks .button-wrapper .button.text-align-right{flex-direction:row-reverse}.cmd-social-networks .button-wrapper.no-gap li .button{border-radius:0}.cmd-social-networks .button-wrapper.no-gap li:first-of-type .button{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.cmd-social-networks .button-wrapper.no-gap li:last-of-type .button{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.cmd-social-networks li{list-style-type:none;margin:0}.cmd-social-networks.align-right .share-button-wrapper{justify-content:flex-end}.cmd-social-networks.align-center .cmd-headline>*{text-align:center}.cmd-social-networks.align-center .toggle-switch{margin:auto}.cmd-social-networks.align-center .share-button-wrapper{justify-content:center}.cmd-social-networks.align-right .cmd-headline>*{text-align:right}.cmd-social-networks.align-right .toggle-switch{margin-left:auto}.cmd-social-networks.align-right .button-wrapper{justify-content:flex-end}.cmd-social-networks.stretch .button-wrapper li{flex:1}.cmd-social-networks.stretch .button-wrapper li .button{display:flex}.cmd-social-networks a:last-of-type{margin-right:0}.cmd-social-networks [id^=social-network]{background:var(--social-network-color);border-color:var(--social-network-color)}.cmd-social-networks [id^=social-network]>span{color:var(--pure-white)}.cmd-social-networks [id^=social-network]:hover,.cmd-social-networks [id^=social-network]:active,.cmd-social-networks [id^=social-network]:focus{color:var(--pure-white)}.cmd-social-networks [id^=social-network]:hover>span,.cmd-social-networks [id^=social-network]:active>span,.cmd-social-networks [id^=social-network]:focus>span{color:var(--social-network-color)}.cmd-social-networks #social-network-facebook{--social-network-color: #3c5a99}.cmd-social-networks #social-network-twitter{--social-network-color: #6bacde}.cmd-social-networks #social-network-xing{--social-network-color: #007575}.cmd-social-networks #social-network-linkedin{--social-network-color: #0077b5}@container (max-width: 600px){.button-wrapper .button{flex:none;width:auto!important}.button-wrapper .button [class*=icon-]+span{display:none}}.cmd-switch-language{ul {display: flex; gap: calc(var(--default-gap) / 2); margin: 0; li {list-style-type: none; margin: 0; a:not([class*="active"]) {filter: contrast(.5); &:hover,&:focus,&:active {filter: none;}}}}}.cmd-system-message{display:inline-flex;margin:var(--default-margin) 0;align-items:center;> :last-child {margin-bottom: 0;} ul {display: flex; flex-direction: column; li {margin-left: 0;}} > a:not(.button) {display: flex; position: absolute; width: auto; top: .5rem; right: .5rem; text-decoration: none; z-index: 100; line-height: 1; background: var(--pure-white); border-radius: var(--full-circle); [class*="icon-"] {color: var(--default-text-color);} &:hover,&:active,&:focus {background: none; [class*="icon-"] {color: var(--pure-white);}}} &.warning {> a:not(.button) {border-color: var(--default-text-color); [class*="icon-"] {color: var(--default-text-color);} &:hover,&:active,&:focus {border-color: var(--hyperlink-color); [class*="icon-"] {color: var(--pure-white);}}}}}.cmd-table-wrapper{display:inline-flex;flex-direction:column;max-width:100%;margin-bottom:var(--default-margin);gap:calc(var(--default-margin) / 2);&.collapsed,&.full-width{overflow:hidden;table {th {white-space: normal;}}}> .button-wrapper {right: 0; z-index: 100; gap: calc(var(--default-gap) / 2); .button {padding: 0; min-width: 2rem; min-height: 2rem; [class*="icon-"] {font-size: var(--icon-size-small);}}} .cmd-slide-button {display: none;} .inner-wrapper {display: flex; overflow-x: auto; width: 100%; .cmd-slide-button {left: 0; &:last-child {right: 0; left: auto;}} table {table-layout: fixed; margin: 0; th {a[class*="icon-"] {&,&:hover,&:active,&:focus {font-size: var(--icon-size-small); color: var(--pure-white);}}}}} &.has-caption {flex-direction: row; .button-wrapper {position: absolute;} table {margin-top: calc(var(--default-margin) / 2);}} &.has-overflow {.cmd-slide-button {display: flex;}}}.cmd-tabs{> ul {margin: 0; display: flex; > li {z-index: 10; margin-left: 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); list-style-type: none; background: var(--color-scheme-background-color); a {display: flex; align-items: center; justify-content: center; padding: var(--default-padding); border: var(--default-border); border-bottom: 0; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); text-decoration: none; &:hover,&:active,&:focus {cursor: pointer; color: var(--hyperlink-color-highlighted); border-color: var(--hyperlink-color); span,[class*="icon-"] {color: inherit;}}} &.active {span,[class*="icon-"] {color: var(--pure-white);} &:hover,&:active {a,a:focus {color: var(--hyperlink-color); background: var(--pure-white); span,[class*="icon-"] {color: var(--hyperlink-color-highlighted);}}} a:focus {color: var(--pure-white); span,span[class*="icon-"],.iconify {color: inherit !important;}}}} &.stretch-tabs {> li {flex: 1; text-align: center;} > div {border-top-right-radius: 0;}}} .headline {margin-top: 0;} > div {padding: var(--default-padding); border: var(--primary-border); border-radius: var(--border-radius); background: var(--color-scheme-background-color); border-top-left-radius: 0; > div {*:last-child {margin-bottom: 0;}}}}.edit-mode .cmd-text-image-block textarea{width:100%}.cmd-toggle-dark-mode{&.styled-layout{input { --dark-blue: hsl(195, 96%, 45%); --medium-blue: hsl(194, 97%, 39%); --light-blue: hsl(195, 97%, 76%); background: linear-gradient(to bottom, var(--dark-blue) 0%, var(--light-blue) 67%); border-color: var(--medium-blue); &::after { --yellow-hue: 60; --yellow-saturation: 100%; --yellow-lightness: 76.7%; background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%); border-color: transparent; box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)); } } &.dark-mode {input {background: var(--color-scheme-background-color); border-color: var(--color-scheme-text-color); &::before { --size: 1.2rem; content: ""; width: var(--size); aspect-ratio: 1/1; background: var(--color-scheme-background-color); border-radius: var(--full-circle); position: absolute; top: 0; right: calc(var(--size) / 2); transform: translateY(15%); z-index: 100; transition: var(--default-transition); } &::after {background: radial-gradient(ellipse at center,var(--pure-white) 50%,var(--medium-gray) 100%); border-color: transparent; box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue),var(--pure-white-saturation),var(--pure-white-lightness),.3);}} .label-text {span {color: var(--color-scheme-text-color);}}}}}.cmd-upload-form{.cmd-custom-headline {margin: 0; justify-content: center;} .box {background: var(--color-scheme-background-color); dl {justify-content: center; text-align: left; .list-of-file-extensions {display: table; > li:only-child {list-style-type: none; margin: 0;}}}} .total-files {> * {white-space: nowrap; &:not(a) {font-weight: bold;}}} [class*="list-of-file"] {max-height: 10rem; overflow-x: hidden; overflow-y: auto; border: var(--default-border); padding: var(--default-padding); margin: 0; > li {flex-wrap: nowrap; .progressbar {display: table; align-self: center; progress {&[value] {background: var(--color-scheme-background-color); &::-moz-progress-bar {border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); background: var(--primary-color);}}} & > span {position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; display: table; top: .2rem; padding: .1rem .2rem; line-height: 100%; background: var(--color-scheme-background-color);}}}} .list-files-wrapper {justify-content: center; align-items: center; .list-of-files {display: inline-flex; flex-direction: column; gap: calc(var(--default-gap) / 2); li {list-style-type: none; margin-left: 0; gap: calc(var(--default-gap) / 2); > a:hover,a:active,a:focus {~ * {color: var(--hyperlink-color-highlighted);}}} & + a {display: table; margin: 0 auto;}} hr {width: 100%;}} p {&.text-drag-and-drop {&.disabled {background: none !important;}}} .button.upload {align-self: center; & ~ p {& > * {display: block;}}} .error {color: var(--error-color);} & + .cmd-form-element {display: none;} .drop-area,&.drop-area {border: var(--default-border); border-style: dashed; background: var(--color-scheme-background-color); padding: var(--default-padding); text-align: center; &.allow-drop {border-style: solid;} > [class*="icon-"] {font-size: 5rem;}} &.box {display: inline-flex; flex-direction: column; background: var(--default-background-color); text-decoration: none; text-align: center; padding: var(--default-padding); span {margin: 0; &[class*="icon-"] {font-size: 5rem;}}}}.cmd-width-limitation-wrapper{> * {max-width: var(--max-width); margin: 0 auto; padding: var(--default-padding);} &.sticky {position: sticky; left: 0; right: 0; top: 0;}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "private": false,
   "type": "module",
   "scripts": {
@@ -19,7 +19,7 @@
   ],
   "dependencies": {
     "clickout-event": "^1.1.2",
-    "comand-frontend-framework": "^4.0.19",
+    "comand-frontend-framework": "^4.0.20",
     "core-js": "^3.20.1",
     "prismjs": "^1.27.0",
     "vue": "^3.2.31",

package/src/assets/styles/global-styles.scss

@@ -47,23 +47,14 @@ html {
 
 /* ---------------------------------------------- BEGIN COMPONENTS AND GLOBAL STYLES -------------------------------------------------- */
 /* begin styles for main structure --------------------------------------------------------------------------------------------------------------------------------------------------- */
-body {
-    overflow: hidden;
-}
-
 #page-wrapper {
     scroll-padding-top: 10.5rem;
     display: flex;
     flex-direction: column;
     scroll-snap-type: y mandatory;
-    overflow-y: scroll;
     width: 100dvw;
-    height: 100dvh;
+    min-height: 100dvh;
     scroll-behavior: smooth;
-
-    .cmd-site-footer {
-        margin-top: auto;
-    }
 }
 
 #component-library {

package/src/components/CmdBox.vue

@@ -57,7 +57,7 @@
 
         <!-- begin box-body -->
         <div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
-            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}" :style="setMaxBoxBodyHeight">
+            <div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
                 <!-- begin slot 'body' -->
                 <slot name="body">
                     <transition-group :name="toggleTransition">
@@ -488,7 +488,7 @@ export default {
     .box-body {
         .allow-scroll {
             overflow-y: auto;
-            /*max-height: '${this.maxBoxBodyHeight}'*/
+            max-height: v-bind(maxBoxBodyHeight);
         }
     }
 

package/src/components/CmdSiteHeader.vue

@@ -162,6 +162,7 @@ export default {
     header {
         padding-top: calc(var(--default-padding) * 2);
         padding-bottom: calc(var(--default-padding) * 2);
+        row-gap: 0;
 
         &.has-navigation {
             grid-template-rows: 1fr min-content;