--vaadin-* namespaces;project-own tokens are prefixed --maombi-* and may be overridden per company via [data-company="DGN"|"MEDISIGN"]. - Breakpoints: 48em (~768px,phone/tablet) and 64em (~1024px,tablet/desktop). Media queries live in the RESPONSIVE section at the end of this file. - No inline getStyle().set(...) in Java — styling belongs here. ========================================================================== */ html{--aura-background-color: #f8f9fa;--aura-accent-color: rgb(0,135,170);--aura-font-family: Dejavu Sans,sans-serif;--vaadin-input-field-required-indicator-color: red;--maombi-primary-color: rgb(0,135,170);--maombi-primary-color-hover: rgb(0,100,120);--maombi-header-background: #e3f2fd;--maombi-header-stripe-background: #e3f2fd;--maombi-info-box-background: #ffebee;--maombi-footer-background: #3c4650}[data-company="MEDISIGN"]{--aura-accent-color: #FF4500;--vaadin-input-field-required-indicator-color: red;--maombi-primary-color: rgb(245,130,30);--maombi-primary-color-hover: rgb(220,110,20);--maombi-header-background: rgb(255,243,233);--maombi-header-stripe-background: rgb(255,243,233);--maombi-info-box-background: #ffebee;--maombi-footer-background: rgb(120,120,120);--vaadin-card-background: var(--maombi-header-background);--vaadin-avatar-background: var(--maombi-primary-color)}[data-company="DGN"]{--aura-accent-color: rgb(0,135,170);--vaadin-input-field-required-indicator-color: blue;--maombi-primary-color: rgb(0,135,170);--maombi-primary-color-hover: rgb(0,100,120);--maombi-header-background: #e3f2fd;--maombi-header-stripe-background: #e3f2fd;--maombi-info-box-background: #ffebee;--maombi-footer-background: #3c4650;--vaadin-card-background: var(--maombi-header-background);--vaadin-avatar-background: var(--maombi-primary-color)}vaadin-card{background-color: var(--maombi-header-background)}vaadin-avatar::part(title){color: white;background-color: var(--aura-accent-color)}vaadin-button{background-color: var(--maombi-primary-color) !important;color: white !important}vaadin-menu-bar-button{background-color: var(--maombi-primary-color) !important;color: white !important}.row-green{background-color: #e0ffe0 !important}vaadin-grid::part(selected-row){background-color: #e8f5e9 !important}vaadin-grid::part(error-row){background-color: #ffe3e3 !important}.header{background: var(--maombi-header-background);position: sticky;top: 5px;z-index: 99}.header h1{font-size: clamp(1.2rem,4vw,2rem)}.header-actions{flex-wrap: wrap;justify-content: flex-end}.header-stripe{background: var(--maombi-header-stripe-background) url('/images/headerstripe.png') repeat-x;position: sticky;top: 0;z-index: 100;height: 9px}.main-logo{margin-right: 2rem;cursor: pointer}.user-label{margin-top: 0.5rem;font-weight: bold;color: var(--vaadin-text-color-secondary);text-align: right}.content-container{overflow-x: hidden;overflow-y: auto;min-height: 0;padding: 1rem;width: 100%;height: 100%;align-items: center}.main-content{flex: 1 1 0;min-width: 0;overflow-x: auto;width: 100%;height: 100%}.info-box{background-color: var(--maombi-info-box-background,var(--aura-accent-color));padding: 1rem 2rem;border-radius: 12px;margin: 1rem 0;box-shadow: 0 2px 8px rgba(0,0,0,0.08);color: var(--vaadin-text-color,#222);font-size: 1.1rem;min-width: 200px;max-width: 600px;display: block;flex-shrink: 0}.main-footer{background: var(--maombi-footer-background,#3c4650);color: #fff;padding: 1rem;position: sticky;bottom: 0;z-index: 100;width: 100%;justify-content: space-between;display: flex}.footer-left{display: inline-flex;align-items: center;gap: 0.4rem}.footer-link{color: #fff;font-weight: bold;text-decoration: underline;margin-left: 1.5rem}.footer-right{margin-right: 2rem;display: flex;gap: 1.5rem}.footer-icon{color: #fff;cursor: pointer}.changelog-help-button{display: inline-flex;align-items: center;justify-content: center;width: 1.4em;height: 1.4em;border-radius: 999px;border: 1px solid currentColor;font-size: 0.85em;font-weight: 700;line-height: 1;cursor: pointer;user-select: none}.changelog-help-button:hover{background: rgba(255,255,255,0.15)}.mainview-clickable-area{cursor: pointer;background-color: var(--maombi-primary-color);border-radius: 16px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);padding: 2.5rem 1.5rem;margin-top: 10vh;max-width: 500px}.mainview-clickable-area:hover{background-color: var(--maombi-primary-color-hover)}.mainview-clickable-area h1,.mainview-text,.mainview-link{color: white}.mainview-text{font-size: 1rem}.mainview-shop-link{color: white;background-color: rgb(140,190,50);text-decoration: none;padding: 0.5rem 1rem;font-weight: bold;font-size: 1.2rem}.search-field-box{background-color: var(--maombi-header-background);border-radius: 16px}.auth-card{width: 100%;max-width: 520px;background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1)}.auth-card--wide{max-width: 600px}.auth-card--narrow{max-width: 420px}.auth-logo{display: block;margin: 0 auto 16px auto}.auth-spacing-top{margin-top: 16px}.auth-hint{font-size: var(--aura-font-size-s);color: var(--vaadin-text-color-secondary)}.auth-hint-left{text-align: left;width: 100%;display: block}.wizard-main{display: flex;width: 100%;height: 100%;padding: var(--vaadin-padding-m,1rem);box-sizing: border-box}.wizard-content{flex: 1 1 0;min-width: 0}.wizard-card-preview{position: relative;width: 320px;max-width: 100%;height: auto;margin-bottom: 24px}.wizard-card-preview img{display: block;width: 100%;height: auto}.wizard-card-preview-printline{position: absolute;left: 11.5%;bottom: 28%;color: #333;font-size: 0.8em;font-family: roboto;opacity: 0.7;pointer-events: none;text-align: left}.wizard-instruction-card{width: 100%;max-width: 500px}.wizard-stepper{display: flex;flex-direction: column;align-items: center;width: 180px;flex-shrink: 0;padding: var(--vaadin-padding,1rem);border-right: 1px solid var(--vaadin-border-color-secondary)}.wizard-stepper-product{color: var(--vaadin-text-color-secondary);font-size: 1.1em;font-weight: bold;margin-bottom: 12px;display: block;text-align: center}.wizard-stepper-item{display: flex;flex-direction: column;align-items: center;position: relative}.wizard-stepper-circle{width: 44px;height: 44px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 16px;border: 3px solid var(--vaadin-border-color-secondary);box-shadow: var(--aura-shadow-xs,0 2px 4px rgba(0,0,0,0.1));z-index: 2}.wizard-stepper-circle--done{--aura-accent-color: var(--aura-green);background: var(--aura-green);color: var(--aura-accent-contrast-color,white);border-color: var(--aura-green)}.wizard-stepper-circle--active{background: var(--aura-accent-color);color: var(--aura-accent-contrast-color,white);border-color: var(--aura-accent-color);box-shadow: 0 0 0 4px color-mix(in srgb,var(--aura-accent-color) 15%,transparent)}.wizard-stepper-circle--pending{background: var(--aura-background-color);color: var(--vaadin-text-color-secondary);border-color: var(--vaadin-border-color-secondary)}.wizard-stepper-label{font-size: var(--aura-font-size-s);text-align: center;padding: 4px 8px}.wizard-stepper-line{position: absolute;top: 44px;bottom: -28px;width: 3px;background: var(--vaadin-border-color-secondary);left: 50%;transform: translateX(-50%)}.wizard-important-note{margin-bottom: 1em}.wizard-important-note-label{color: var(--aura-red-text,var(--aura-red));font-weight: bold}.wizard-field-note{margin-top: 10px}.wizard-form-hint{color: var(--vaadin-text-color-secondary);margin-bottom: 16px;display: block}.wizard-section-headline{margin-top: 1em}.wizard-section-info{margin-bottom: 1em}.wizard-section-checkbox{margin: 16px 0 8px 0}.wizard-section-checkbox-row{margin: 8px 0 8px 0}.wizard-consent-form{margin-top: 20px}.overview-actions{background: transparent;height: auto;padding: 0;margin: 0}.overview-card-mobile{display: flex;flex-direction: column;gap: 0.15rem;padding: 0.6rem 0.75rem;margin: 0.4rem 0;border: 1px solid var(--vaadin-border-color-secondary);border-radius: var(--vaadin-radius-l);background: var(--aura-surface-color);white-space: normal}.overview-card-mobile-product{font-weight: 600}.overview-card-mobile-status{font-size: var(--aura-font-size-s)}.overview-card-mobile-number{color: var(--vaadin-text-color-secondary);font-size: var(--aura-font-size-s)}.overview-card-mobile .overview-actions{margin-top: 0.25rem;justify-content: flex-end}.overviewcard{background: lightgray;border: 1px solid #e0e0e0;border-radius: 10px;box-shadow: 0 2px 8px 0 #e0e0e0;padding: 1.2em;margin-bottom: 1em}.overviewcardrow{display: flex;align-items: center;margin-bottom: 0.2em}.overviewcardrowlabel{font-weight: bold;min-width: 180px;display: inline-block}.overviewcardrowvalue{margin-left: 1em}.step-card{border: 1px solid #e0e0e0;border-radius: 12px;padding: 24px;margin-bottom: 18px;background: #e3f2fd;width: 100%}.step-card-avatar{background: #1976d2;color: white;border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 1.2em}.step-card-content{margin-top: 12px;width: 100%}.special-card{border-radius: 12px;padding: 24px;margin-bottom: 18px;border: 2px solid;width: 100%}.special-card-red{background: #ffcdd2;border-color: #b71c1c}.special-card-yellow{background: #fff9c4;border-color: #000000}.special-card-message{font-size: 1.1em;color: inherit}.special-card-reset-btn{margin-top: 24px}.hotline-hotline-number{font-size: 2em;font-weight: bold;display: block;margin-top: 0.3em}.hotline-letter-address{text-align: center;color: #b71c1c;font-size: 1.5em;font-weight: bold;margin-top: 12px}.admin-details-root{padding: 2em;gap: 0.6em}.admin-details-content-host{padding-top: 0.6rem}.admin-details-tab-page{gap: 0.5rem}.admin-details-summary{margin-bottom: 0.2em}.admin-details-meta{flex-wrap: wrap}.admin-details-meta-badge{background: var(--vaadin-background-container);border-radius: 999px;padding: 0.4rem 1rem;font-size: var(--aura-font-size-l)}.admin-details-status-badge{border-radius: 999px;padding: 0.4rem 1rem;font-size: var(--aura-font-size-l);font-weight: 600}.admin-details-status-badge--success{background: var(--aura-green);color: white}.admin-details-status-badge--error{background: var(--aura-red);color: white}.admin-details-status-badge--primary{background: var(--aura-accent-color);color: var(--aura-accent-contrast-color,white)}.admin-details-status-badge--warning{background: var(--aura-orange);color: black}.admin-details-status-badge--unknown{background: color-mix(in srgb,var(--vaadin-text-color) 50%,transparent);color: white}.admin-details-section{margin: 0}.admin-details-section>vaadin-details-summary,.admin-details-section>[slot="summary"],.admin-details-section::part(summary),.admin-details-section::part(summary-content){font-weight: 700;font-size: var(--aura-font-size-l)}.admin-details-tabs vaadin-tab{font-size: var(--aura-font-size-xl);font-weight: 600}.admin-details-form{--vaadin-form-item-label-width: 14em;row-gap: 0.15rem;column-gap: 1rem}.admin-details-form-value{white-space: pre-wrap;font-size: var(--aura-font-size-s)}.admin-details-cert-badge{display: inline-block;border-radius: 999px;padding: 0.15rem 0.55rem;font-size: var(--aura-font-size-s);font-weight: 600}.admin-details-cert-badge--success{color: var(--aura-green);background: color-mix(in srgb,var(--aura-green) 12%,transparent);border: 1px solid var(--aura-green)}.admin-details-cert-badge--error{color: var(--aura-red);background: color-mix(in srgb,var(--aura-red) 12%,transparent);border: 1px solid var(--aura-red)}.admin-details-cert-badge--primary{color: var(--aura-accent-color);background: color-mix(in srgb,var(--aura-accent-color) 12%,transparent);border: 1px solid var(--aura-accent-color)}.admin-details-cert-badge--warning{color: var(--aura-orange-text,var(--aura-orange));background: color-mix(in srgb,var(--aura-orange) 12%,transparent);border: 1px solid var(--aura-orange-text,var(--aura-orange))}.admin-details-cert-badge--neutral{color: var(--vaadin-text-color);background: color-mix(in srgb,var(--vaadin-text-color) 10%,transparent);border: 1px solid var(--vaadin-text-color)}.admin-details-ocsp-button{white-space: nowrap}.admin-details-document-viewer{min-height: 70vh}.admin-details-grid,.admin-details-grid::part(row),.admin-details-grid::part(cell){background: transparent}.changelog-content{font-family: var(--aura-font-family);font-size: var(--aura-font-size-s);line-height: 1.5;overflow-y: auto;max-height: 60vh;padding-right: 0.5rem}.changelog-content h1{font-size: var(--aura-font-size-xl);margin: 0 0 0.6rem}.changelog-content h2{font-size: var(--aura-font-size-l);margin: 1.2rem 0 0.4rem;padding-bottom: 0.2rem;border-bottom: 1px solid var(--vaadin-border-color-secondary)}.changelog-content h3{font-size: var(--aura-font-size-m);font-weight: 600;margin: 0.8rem 0 0.3rem;color: var(--vaadin-text-color-secondary)}.changelog-content ul{margin: 0.2rem 0 0.6rem;padding-left: 1.4rem}.changelog-content li{margin-bottom: 0.2rem}.changelog-content p{margin: 0.4rem 0}.changelog-content code{background: var(--vaadin-background-container);border-radius: 3px;padding: 0.05rem 0.3rem;font-size: 0.9em}.production-response-body{width: 100%;height: 100%;display: flex;flex-direction: column;gap: 0.4rem}.production-response-meta-label{font-weight: 600;color: var(--vaadin-text-color-secondary);min-width: 9em;display: inline-block}.production-response-content{flex: 1;overflow: auto;background: var(--vaadin-background-container);border: 1px solid var(--vaadin-border-color-secondary);border-radius: var(--vaadin-radius-m);padding: 0.6rem 0.8rem;font-size: var(--aura-font-size-s);white-space: pre-wrap;word-break: break-word;margin: 0.4rem 0 0}.express-badge{background-color: var(--aura-red,#d32f2f);color: #fff;border-radius: 999px;padding: 0.15rem 0.6rem;font-weight: 700;font-size: var(--aura-font-size-xs,0.75rem);letter-spacing: 0.03em}canvas.hiddenCanvasElement{display: none}@media (max-width: 48em){.main-logo{margin-right: 0.75rem}.content-container{padding: 0.5rem}.main-footer{flex-direction: column;align-items: center;gap: 0.5rem;text-align: center}.footer-right{margin-right: 0;flex-wrap: wrap;justify-content: center;gap: 1rem}.footer-link{margin-left: 0}.mainview-clickable-area{margin-top: 2vh}.wizard-view,.wizard-view .wizard-view-inner{padding: 0}.wizard-main{flex-direction: column;height: auto;padding: 0.25rem 0.25rem 0.5rem}.wizard-stepper{flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: flex-start;width: 100%;gap: 2px;padding: 0.5rem 0.25rem;border-right: none;border-bottom: 1px solid var(--vaadin-border-color-secondary);margin-bottom: 0.5rem}.wizard-stepper-product{flex-basis: 100%;margin-bottom: 4px}.wizard-stepper-circle{width: 32px;height: 32px;font-size: 13px;border-width: 2px}.wizard-stepper-label{display: none;font-size: var(--aura-font-size-xs);padding: 2px 4px}.wizard-stepper-circle--active + .wizard-stepper-label{display: block}.wizard-stepper-line{display: none}.overview-grid::part(header-cell){display: none}}