/* @group Figma */
/* ✨ Primitives - Mode 1 */
:root {
--color-blue-100: rgba(236, 238, 242, 1);
--color-blue-200: rgba(177, 192, 206, 1);
--color-blue-300: rgba(118, 145, 169, 1);
--color-blue-400: rgba(59, 99, 133, 1);
--color-blue-500: rgba(0, 52, 96, 1); /*Brand-Base + Functional-Royal-Base*/
--color-blue-600: rgba(0, 47, 86, 1);
--color-blue-700: rgba(0, 40, 74, 1);
--color-blue-800: rgba(0, 33, 61, 1);
--color-blue-900: rgba(0, 23, 43, 1);
--color-terra-100: rgba(251, 236, 232, 1);
--color-terra-200: rgba(250, 203, 189, 1);
--color-terra-300: rgba(238, 151, 126, 1);
--color-terra-400: rgba(222, 108, 82, 1);
--color-terra-500: rgba(190, 60, 35, 1);
--color-terra-600: rgba(175, 58, 34, 1);
--color-terra-700: rgba(144, 50, 30, 1);
--color-terra-800: rgba(115, 42, 26, 1);
--color-terra-900: rgba(86, 34, 22, 1);
--color-teal-100: rgba(225, 236, 236, 1);
--color-teal-200: rgba(208, 222, 222, 1);
--color-teal-300: rgba(139, 181, 182, 1);
--color-teal-400: rgba(69, 140, 142, 1);
--color-teal-500: rgba(0, 99, 102, 1);
--color-teal-600: rgba(0, 89, 92, 1);
--color-teal-700: rgba(0, 81, 83, 1);
--color-teal-800: rgba(0, 66, 68, 1);
--color-teal-900: rgba(0, 47, 48, 1);
--color-amber-100: rgba(255, 237, 225, 1);
--color-amber-200: rgba(253, 220, 198, 1);
--color-amber-300: rgba(254, 183, 136, 1);
--color-amber-400: rgba(247, 146, 71, 1);
--color-amber-500: rgba(209, 108, 0, 1);
--color-amber-600: rgba(183, 94, 0, 1);
--color-amber-700: rgba(167, 86, 0, 1);
--color-amber-800: rgba(137, 70, 0, 1);
--color-amber-900: rgba(97, 49, 0, 1);
--color-green-100: rgba(217, 236, 224, 1);
--color-green-200: rgba(179, 216, 193, 1);
--color-green-300: rgba(140, 197, 164, 1);
--color-green-400: rgba(100, 178, 135, 1);
--color-green-500: rgba(54, 158, 108, 1);
--color-green-600: rgba(41, 122, 83, 1);
--color-green-700: rgba(32, 95, 65, 1);
--color-green-800: rgba(23, 67, 46, 1);
--color-green-900: rgba(13, 43, 29, 1);
--color-red-100: rgba(249, 202, 202, 1);
--color-red-200: rgba(244, 158, 158, 1);
--color-red-300: rgba(240, 114, 114, 1);
--color-red-400: rgba(235, 70, 70, 1);
--color-red-500: rgba(230, 26, 26, 1);
--color-red-600: rgba(186, 21, 21, 1);
--color-red-700: rgba(142, 16, 16, 1);
--color-red-800: rgba(98, 11, 11, 1);
--color-red-900: rgba(53, 6, 6, 1);
--color-yellow-100: rgba(255, 232, 153, 1);
--color-yellow-200: rgba(254, 221, 102, 1);
--color-yellow-300: rgba(254, 215, 77, 1);
--color-yellow-400: rgba(254, 198, 0, 1);
--color-yellow-500: rgba(247, 184, 33, 1);
--color-yellow-600: rgba(246, 176, 9, 1);
--color-yellow-700: rgba(222, 158, 8, 1);
--color-yellow-800: rgba(197, 141, 7, 1);
--color-yellow-900: rgba(168, 120, 6, 1);
--color-azure-100: rgba(225, 236, 255, 1);
--color-azure-200: rgba(190, 216, 255, 1);
--color-azure-300: rgba(102, 153, 255, 1);
--color-azure-400: rgba(55, 104, 251, 1);
--color-azure-500: rgba(56, 43, 240, 1);
--color-azure-600: rgba(50, 38, 215, 1);
--color-azure-700: rgba(43, 33, 186, 1);
--color-azure-800: rgba(35, 27, 152, 1);
--color-azure-900: rgba(25, 19, 107, 1);
--color-grey-100: rgba(245, 245, 245, 1);
--color-grey-200: rgba(225, 225, 225, 1);
--color-grey-300: rgba(204, 204, 204, 1);
--color-grey-400: rgba(154, 154, 154, 1);
--color-grey-500: rgba(140, 140, 140, 1); /*Functional-Pigeon-Base*/
--color-grey-600: rgba(117, 117, 117, 1);
--color-grey-700: rgba(88, 88, 88, 1);
--color-grey-800: rgba(67, 67, 67, 1);
--color-grey-900: rgba(40, 40, 40, 1);
--color-silver-100: rgba(251, 252, 252, 1);
--color-silver-200: rgba(246, 248, 249, 1);
--color-silver-300: rgba(236, 240, 243, 1);
--color-silver-400: rgba(227, 233, 237, 1);
--color-silver-500: rgba(211, 221, 228, 1);
--color-silver-600: rgba(199, 208, 215, 1);
--color-silver-700: rgba(172, 180, 186, 1);
--color-silver-800: rgba(141, 147, 152, 1);
--color-silver-900: rgba(99, 104, 107, 1);
--color-pigeon-100: rgba(241, 243, 246, 1);
--color-black-1000: rgba(32, 32, 32, 1);
--color-white-0: rgba(255, 255, 255, 1);
--color-pigeon-200: rgba(235, 238, 242, 1);
--color-pigeon-300: rgba(214, 221, 228, 1);
--color-pigeon-400: rgba(191, 201, 214, 1);
--color-pigeon-500: rgba(148, 168, 190, 1);
--color-pigeon-600: rgba(139, 158, 179, 1);
--color-pigeon-700: rgba(121, 137, 155, 1);
--color-pigeon-800: rgba(99, 112, 127, 1);
--color-pigeon-900: rgba(70, 79, 90, 1);
--font-family-nuernberger-text: NuernbergerText;
--font-family-nuernberger-image: NuernbergerImage;
--font-family-mono: Roboto Mono;
--unit-0: 0px;
--unit-1: 1px;
--unit-2: 2px;
--unit-4: 4px;
--unit-6: 6px;
--unit-8: 8px;
--unit-10: 10px;
--unit-12: 12px;
--unit-14: 14px;
--unit-16: 16px;
--unit-18: 18px;
--unit-20: 20px;
--unit-22: 22px;
--unit-24: 24px;
--unit-26: 26px;
--unit-28: 28px;
--unit-32: 32px;
--unit-36: 36px;
--unit-40: 40px;
--unit-44: 44px;
--unit-48: 48px;
--unit-56: 56px;
--unit-64: 64px;
--unit-72: 72px;
--unit-80: 80px;
--unit-88: 88px;
--unit-96: 96px;
--unit-120: 120px;
--unit-160: 160px;
--unit-unlimited: 9999px;
--font-size-12: var(--unit-12);
--font-size-14: var(--unit-14);
--font-size-16: var(--unit-16);
--font-size-18: var(--unit-18);
--font-size-20: var(--unit-20);
--font-size-24: var(--unit-24);
--font-size-28: var(--unit-28);
--font-size-32: var(--unit-32);
--font-size-36: var(--unit-36);
--font-size-40: var(--unit-40);
--font-size-48: var(--unit-48);
--font-size-64: var(--unit-64);
--font-size-80: var(--unit-80);
--font-weight-bold: 600;
--font-line-height-0: var(--unit-0);
--font-line-height-14: var(--unit-14);
--font-line-height-16: var(--unit-16);
--font-line-height-18: var(--unit-18);
--font-line-height-20: var(--unit-20);
--font-line-height-22: var(--unit-22);
--font-line-height-24: var(--unit-24);
--font-line-height-26: var(--unit-26);
--font-line-height-28: var(--unit-28);
--font-line-height-32: var(--unit-32);
--font-line-height-36: var(--unit-36);
--font-line-height-40: var(--unit-40);
--font-line-height-44: var(--unit-44);
--font-line-height-48: var(--unit-48);
--font-line-height-56: var(--unit-56);
--font-line-height-72: var(--unit-72);
--font-line-height-88: var(--unit-88);
--font-weight-regular: 400;
--font-letter-spacing-0: 0px;
}
/* Typography - Mode 1 */
:root {
--display-l-font-family: var(--font-family-nuernberger-image);
--display-l-font-weight-regular: var(--font-weight-regular);
--display-l-font-weight-bold: var(--font-weight-bold);
--display-l-font-size: var(--font-size-80);
--display-l-line-height: var(--font-line-height-88);
--display-l-letter-spacing: var(--font-letter-spacing-0);
--display-m-font-family: var(--font-family-nuernberger-image);
--display-m-font-weight-regular: var(--font-weight-regular);
--display-m-font-weight-bold: var(--font-weight-bold);
--display-m-font-size: var(--font-size-64);
--display-m-line-height: var(--font-line-height-72);
--display-m-letter-spacing: var(--font-letter-spacing-0);
--display-s-font-family: var(--font-family-nuernberger-image);
--display-s-font-weight-regular: var(--font-weight-regular);
--display-s-font-weight-bold: var(--font-weight-bold);
--display-s-font-size: var(--font-size-48);
--display-s-line-height: var(--font-line-height-56);
--display-s-letter-spacing: var(--font-letter-spacing-0);
--heading-xxl-font-family: var(--font-family-nuernberger-image);
--heading-xxl-font-weight-regular: var(--font-weight-regular);
--heading-xxl-font-weight-bold: var(--font-weight-bold);
--heading-xxl-font-size: var(--font-size-40);
--heading-xxl-line-height: var(--font-line-height-48);
--heading-xxl-letter-spacing: var(--font-letter-spacing-0);
--heading-xl-font-family: var(--font-family-nuernberger-image);
--heading-xl-font-weight-regular: var(--font-weight-regular);
--heading-xl-font-weight-bold: var(--font-weight-bold);
--heading-xl-font-size: var(--font-size-36);
--heading-xl-line-height: var(--font-line-height-44);
--heading-xl-letter-spacing: var(--font-letter-spacing-0);
--heading-l-font-family: var(--font-family-nuernberger-image);
--heading-l-font-weight-regular: var(--font-weight-regular);
--heading-l-font-weight-bold: var(--font-weight-bold);
--heading-l-font-size: var(--font-size-32);
--heading-l-line-height: var(--font-line-height-40);
--heading-l-letter-spacing: var(--font-letter-spacing-0);
--heading-m-font-family: var(--font-family-nuernberger-image);
--heading-m-font-weight-regular: var(--font-weight-regular);
--heading-m-font-weight-bold: var(--font-weight-bold);
--heading-m-font-size: var(--font-size-28);
--heading-m-line-height: var(--font-line-height-36);
--heading-m-letter-spacing: var(--font-letter-spacing-0);
--heading-s-font-family: var(--font-family-nuernberger-image);
--heading-s-font-weight-regular: var(--font-weight-regular);
--heading-s-font-weight-bold: var(--font-weight-bold);
--heading-s-font-size: var(--font-size-24);
--heading-s-line-height: var(--font-line-height-32);
--heading-s-letter-spacing: var(--font-letter-spacing-0);
--heading-xs-font-family: var(--font-family-nuernberger-image);
--heading-xs-font-weight-regular: var(--font-weight-regular);
--heading-xs-font-weight-bold: var(--font-weight-bold);
--heading-xs-font-size: var(--font-size-20);
--heading-xs-line-height: var(--font-line-height-28);
--heading-xs-letter-spacing: var(--font-letter-spacing-0);
--paragraph-l-font-family: var(--font-family-nuernberger-text);
--paragraph-l-font-weight-regular: var(--font-weight-regular);
--paragraph-l-font-weight-bold: var(--font-weight-bold);
--paragraph-l-font-size: var(--font-size-18);
--paragraph-l-line-height: var(--font-line-height-26);
--paragraph-l-letter-spacing: var(--font-letter-spacing-0);
--paragraph-m-font-family: var(--font-family-nuernberger-text);
--paragraph-m-font-weight-regular: var(--font-weight-regular);
--paragraph-m-font-weight-bold: var(--font-weight-bold);
--paragraph-m-font-size: var(--font-size-16);
--paragraph-m-line-height: var(--font-line-height-24);
--paragraph-m-letter-spacing: var(--font-letter-spacing-0);
--paragraph-s-font-family: var(--font-family-nuernberger-text);
--paragraph-s-font-weight-regular: var(--font-weight-regular);
--paragraph-s-font-weight-bold: var(--font-weight-bold);
--paragraph-s-font-size: var(--font-size-14);
--paragraph-s-line-height: var(--font-line-height-20);
--paragraph-s-letter-spacing: var(--font-letter-spacing-0);
--paragraph-xs-font-family: var(--font-family-nuernberger-text);
--paragraph-xs-font-weight-regular: var(--font-weight-regular);
--paragraph-xs-font-weight-bold: var(--font-weight-bold);
--paragraph-xs-font-size: var(--font-size-12);
--paragraph-xs-line-height: var(--font-line-height-18);
--paragraph-xs-letter-spacing: var(--font-letter-spacing-0);
--label-xl-font-family: var(--font-family-nuernberger-image);
--label-xl-font-weight: var(--font-weight-bold);
--label-xl-font-size: var(--font-size-20);
--label-xl-line-height: var(--font-line-height-24);
--label-xl-letter-spacing: var(--font-letter-spacing-0);
--label-l-font-family: var(--font-family-nuernberger-image);
--label-l-font-weight: var(--font-weight-bold);
--label-l-font-size: var(--font-size-18);
--label-l-line-height: var(--font-line-height-24);
--label-l-letter-spacing: var(--font-letter-spacing-0);
--label-m-font-family: var(--font-family-nuernberger-image);
--label-m-font-weight: var(--font-weight-bold);
--label-m-font-size: var(--font-size-16);
--label-m-line-height: var(--font-line-height-24);
--label-m-letter-spacing: var(--font-letter-spacing-0);
--label-s-font-family: var(--font-family-nuernberger-image);
--label-s-font-weight: var(--font-weight-bold);
--label-s-font-size: var(--font-size-14);
--label-s-line-height: var(--font-line-height-24);
--label-s-letter-spacing: var(--font-letter-spacing-0);
--link-xl-font-family: var(--font-family-nuernberger-image);
--link-xl-font-weight-regular: var(--font-weight-regular);
--link-xl-font-weight-bold: var(--font-weight-bold);
--link-xl-font-size: var(--font-size-20);
--link-xl-line-height: var(--font-line-height-24);
--link-xl-letter-spacing: var(--font-letter-spacing-0);
--link-l-font-family: var(--font-family-nuernberger-image);
--link-l-font-weight-regular: var(--font-weight-regular);
--link-l-font-weight-bold: var(--font-weight-bold);
--link-l-font-size: var(--font-size-18);
--link-l-line-height: var(--font-line-height-24);
--link-l-letter-spacing: var(--font-letter-spacing-0);
--link-m-font-family: var(--font-family-nuernberger-image);
--link-m-font-weight-regular: var(--font-weight-regular);
--link-m-font-weight-bold: var(--font-weight-bold);
--link-m-font-size: var(--font-size-16);
--link-m-line-height: var(--font-line-height-24);
--link-m-letter-spacing: var(--font-letter-spacing-0);
--link-s-font-family: var(--font-family-nuernberger-image);
--link-s-font-weight-regular: var(--font-weight-regular);
--link-s-font-weight-bold: var(--font-weight-bold);
--link-s-font-size: var(--font-size-14);
--link-s-line-height: var(--font-line-height-20);
--link-s-letter-spacing: var(--font-letter-spacing-0);
--code-l-font-family: var(--font-family-mono);
--code-l-font-weight-regular: var(--font-weight-regular);
--code-l-font-weight-bold: var(--font-weight-bold);
--code-l-font-size: var(--font-size-18);
--code-l-line-height: var(--font-line-height-26);
--code-l-letter-spacing: var(--font-letter-spacing-0);
--code-m-font-family: var(--font-family-mono);
--code-m-font-weight-regular: var(--font-weight-regular);
--code-m-font-weight-bold: var(--font-weight-bold);
--code-m-font-size: var(--font-size-16);
--code-m-line-height: var(--font-line-height-24);
--code-m-letter-spacing: var(--font-letter-spacing-0);
--code-s-font-family: var(--font-family-mono);
--code-s-font-weight-regular: var(--font-weight-regular);
--code-s-font-weight-bold: var(--font-weight-bold);
--code-s-font-size: var(--font-size-14);
--code-s-line-height: var(--font-line-height-20);
--code-s-letter-spacing: var(--font-letter-spacing-0);
--code-xs-font-family: var(--font-family-mono);
--code-xs-font-weight-regular: var(--font-weight-regular);
--code-xs-font-weight-bold: var(--font-weight-bold);
--code-xs-font-size: var(--font-size-12);
--code-xs-line-height: var(--font-line-height-18);
--code-xs-letter-spacing: var(--font-letter-spacing-0);
}
/* Dimension - Mode 1 */
:root {
--spacing-0: var(--unit-0);
--spacing-2: var(--unit-2);
--spacing-4: var(--unit-4);
--spacing-8: var(--unit-8);
--spacing-12: var(--unit-12);
--spacing-14: var(--unit-14);
--spacing-16: var(--unit-16);
--spacing-20: var(--unit-20);
--spacing-24: var(--unit-24);
--spacing-32: var(--unit-32);
--spacing-40: var(--unit-40);
--spacing-48: var(--unit-48);
--spacing-56: var(--unit-56);
--spacing-64: var(--unit-64);
--spacing-72: var(--unit-72);
--spacing-80: var(--unit-80);
--spacing-96: var(--unit-96);
--spacing-120: var(--unit-120);
}
/* Radius - Mode 1 */
:root {
--none: var(--unit-0);
--xs: var(--unit-4);
--s: var(--unit-8);
--m: var(--unit-12);
--l: var(--unit-16);
--xl: var(--unit-24);
--full: var(--unit-unlimited);
}
/* Color - Light */
:root {
--action-disabled: var(--color-grey-200);
--action-focus: var(--color-azure-500);
--action-primary-base: var(--color-terra-500);
--action-primary-hover: var(--color-terra-600);
--action-primary-pressed: var(--color-terra-700);
--action-secondary-base: var(--color-blue-500);
--action-secondary-hover: var(--color-blue-600);
--action-secondary-pressed: var(--color-blue-700);
--background-base: var(--color-white-0);
--background-subtle: var(--color-grey-100);
--background-muted: var(--color-blue-100);
--background-brand: var(--color-blue-500);
--border-base: var(--color-grey-500);
--border-brand: var(--color-blue-500);
--border-subtle: var(--color-grey-200);
--border-muted: var(--color-pigeon-400);
--border-disabled: var(--color-grey-200);
--border-action-primary-base: var(--color-terra-500);
--border-action-primary-hover: var(--color-terra-600);
--border-action-primary-pressed: var(--color-terra-700);
--border-action-secondary-base: var(--color-blue-500);
--border-action-secondary-hover: var(--color-blue-600);
--border-action-secondary-pressed: var(--color-blue-700);
--feedback-success-base: var(--color-green-600);
--feedback-success-muted: var(--color-green-100);
--feedback-error-base: var(--color-red-500);
--feedback-error-muted: var(--color-red-100);
--feedback-warning-base: var(--color-amber-500);
--feedback-warning-muted: var(--color-amber-100);
--feedback-info-base: var(--color-azure-500);
--feedback-info-muted: var(--color-azure-100);
--surface-base: var(--color-white-0);
--surface-subtle: var(--color-grey-100);
--surface-muted: var(--color-pigeon-200);
--surface-disabled: var(--color-grey-100);
--text-base: var(--color-grey-900);
--text-brand: var(--color-blue-500);
--text-subtle: var(--color-grey-700);
--text-muted: var(--color-blue-400);
--text-inverse: var(--color-white-0);
--text-disabled: var(--color-grey-300);
--text-on-action-primary: var(--color-white-0);
--text-on-action-primary-disabled: var(--color-grey-300);
--text-action-primary-base: var(--color-terra-500);
--text-action-primary-hover: var(--color-terra-600);
--text-action-primary-pressed: var(--color-terra-700);
--text-action-secondary-base: var(--color-blue-500);
--text-action-secondary-hover: var(--color-blue-600);
--text-action-secondary-pressed: var(--color-blue-700);
}
/* Global contrast */
html, body {
font-size: 16px;
}
/*body {*/
/* --Brand-Base: #003460; !*erledigt*!*/
/* --Functional-Royal-Base: #003460; !*erledigt*!*/
/* --Functional-Pigeon-Base: #8C8C8C; !*--color-grey-500 wird für Background-Werte noch verwendet*!*/
/* --Functional-Pigeon-Light: #BFCFD9; !*Farbe nicht in DS -->--surface-muted*!*/
/* --Functional-Pigeon-Dark: #9CB0C1; !*Farbe nicht in DS-->--surface-muted*!*/
/* --Functional-Coral-Base: #FF7C6B; !*Farbe nicht in DS -->*!*/
/* --Functional-Coral-Light: #FF9585; !*Farbe nicht in DS-->*!*/
/* --Functional-Coral-Dark: #FF6652; !*Farbe nicht in DS-->*!*/
/* --Greys-White-Base: #FFFFFF; !*--color-white-0*!*/
/* --Greys-Silver-Base: #EAEAEA; !*Farbe nicht in DS -->--surface-subtle*!*/
/* --Greys-Doctor-Base: #F5F5F5; !*--color-grey-100 -->--surface-subtle*!*/
/* --Signal-Success-Base: #00C565; !*Farbe nicht in DS*!*/
/* --Signal-Success-Light: #C7FFDD; !*Farbe nicht in DS*!*/
/* --Signal-Danger-Base: #E61A1A; !*--color-red-500*!*/
/* --Signal-Danger-Light: #FFDADC; !*Farbe nicht in DS*!*/
/* --Signal-Info-Base: #382BF0; !*Farbe nicht in DS*!*/
/* --Signal-Info-Light: #E6EFFE; !*Farbe nicht in DS*!*/
/* --Azure-500: #382BF0; !*--color-azure-500*!*/
/* --Fieldset-BG: #F8FAFD; !*Farbe nicht in DS*!*/
/* --Terra-500: #CF4226; !*Farbe nicht in DS*!*/
/* --Terra-600: #AF3A22; !*--color-terra-600*!*/
/* --Terra-700: #90321E; !*--color-terra-700*!*/
/* font-size: 1rem;*/
/*}*/
.container-fluid.grey {
background: var(--surface-subtle);
}
/* Sonst Inhalt zu weit links */
@media screen and (min-width: 1200px) and (max-width: 1589px) {
.container-fluid .offCanvasContent {
width: 100%;
}
}
.mainDS {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
}
.panelDS {
padding: 2.75rem 3.5rem 3.5rem 3.5rem;
border-radius: 8px;
border: 1px solid var(--border-base);
background: var(--background-base);
}
.mainUCDS {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
background: var(--surface-base);
}
.panelUCDS {
padding: 2.75rem 3.5rem 3.5rem 3.5rem;
border-radius: 8px;
}
.link.skip-link {
margin: 7px auto 7px 7px;
}
.infoBoxDS {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
padding: 1rem;
border-radius: 4px;
border: 1px solid var(--border-base, #C9CCCF);
background: var(--surface-subtle);
}
/* Remove margin and padding from list */
ul.infoBox {
margin: 0 0px 0px -1.5625rem;
}
.leftDS {
text-align: left;
}
.centerDS {
text-align: center;
}
.rightDS {
text-align: right;
}
input.form-controlDS, textarea.form-controlDS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
display: flex;
width: 100%;
padding: 1rem;
align-items: flex-start;
align-self: stretch;
border-radius: var(--xs);
border: 1px solid var(--border-base);
background: var(--surface-base);
}
/* Blauer Rand bei focus */
input.form-controlDS:focus-visible, textarea.form-controlDS:focus-visible {
box-shadow: 0 0 0 5px var(--feedback-success-muted);
outline-style: solid;
outline-color: var(--action-focus);
}
/* CheckBox-K�stchen positionieren */
input.widthCBSingleDS {
width: 14px;
}
/* Roter Rand bei Fehler */
input.errorBorderDS, select.errorBorderDS, textarea.errorBorderDS {
border: 1px solid var(--feedback-error-base);
}
.bottomSpace8DS {
margin-bottom: 0.5rem;
}
.bottomSpace16DS {
margin-bottom: 1rem;
}
.bottomSpace24DS {
margin-bottom: 1.5rem;
}
.bottomSpace32DS {
margin-bottom: 2rem;
}
.bottomSpace40DS {
margin-bottom: 2.5rem;
}
.bottomSpace48DS {
margin-bottom: 3rem;
}
.bottomSpace56DS {
margin-bottom: 3.5rem;
}
.bottomSpace64DS {
margin-bottom: 4rem;
}
.bottomSpace80DS {
margin-bottom: 5rem;
}
.topSpace8DS {
margin-top: 0.5rem;
}
.topSpace16DS {
margin-top: 1rem;
}
.topSpace24DS {
margin-top: 1.5rem;
}
.topSpace32DS {
margin-top: 2rem;
}
.topSpace40DS {
margin-top: 2.5rem;
}
.topSpace48DS {
margin-top: 3rem;
}
.topSpace56DS {
margin-top: 3.5rem;
}
.topSpace64DS {
margin-top: 4rem;
}
.topSpace80DS {
margin-top: 5rem;
}
.leftSpace8DS {
margin-left: 0.5rem;
}
.leftright0DS {
margin-left: 0px;
margin-right: 0px;
}
.btn-specialDS {
color: var(--text-on-action-primary);
text-align: center;
font-family: 'NuernbergerImage', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: 1rem; /* 100% */
display: flex;
height: 60px;
padding: 1.25rem;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 4px;
background: var(--action-primary-base);
border: none;
}
.btn-specialDS:hover {
border: 0;
background: var(--action-primary-base);
}
.btn-specialDS:active, .btn-specialDS:focus, .btn-specialDS:focus-visible
{
background: var(--action-primary-pressed);
outline: 2px solid var(--action-focus);
}
a.btnFakeDS:hover, .btnFakeDS:active, btnFakeDS:focus, btnFakeDS:focus-visible
{
color: var(--text-on-action-primary);
text-decoration: none;
}
a.colorRedDS:hover {
color: var(--action-primary-hover);
}
a.colorRedDS:active, a.colorRedDS:focus, a.colorRedDS:focus-visible {
color: var(--action-primary-pressed);
}
a:focus-visible {
outline: 2px solid var(--action-focus);
}
.linkInside16DS {
font-family: 'NuernbergerImage', sans-serif;
font-size: 1rem;
font-style: normal;
line-height: 1.375rem;
}
.linkInside18DS {
color: var(--text-action-primary-base);
font-family: 'NuernbergerImage', sans-serif;
font-size: 1.125rem;
font-style: normal;
line-height: 1.5rem;
}
.colorRedDS {
color: var(--text-action-primary-base);
}
.colorRedSignalDS {
color: var(--feedback-error-base);
}
.colorGreenSignalDS {
color: var(--feedback-success-base);
}
.colorBlueSignalDS {
color: var(--feedback-info-base);
}
.msg12DS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 0.75rem;
font-style: normal;
line-height: 1.125rem;
}
.msg14DS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 0.875rem;
font-style: normal;
line-height: 1.25rem;
}
.msgDS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
}
.msg18DS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1.125rem;
font-style: normal;
line-height: 1.625rem;
}
.msg24DS {
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1.5rem;
font-style: normal;
line-height: 2rem;
}
/* CheckBox: Text neben K�stchen positionieren */
.posCBSingleDS {
position: relative;
top: -17px;
left: 22px;
}
.boldDS {
font-weight: bold;
}
.ffNueImageDS {
font-family: 'NuernbergerImage', sans-serif;
}
/*
.inputErrorIcon {
display: block;
color: var(--feedback-error-base);
position: absolute;
top: 47px;
right: 12px;
height: 0px;
width: 34px;
line-height: 0.9375rem;
text-align: center;
font-size: 1.5em;
}
*/
.inputErrorIcon {
position: absolute;
right: 1rem;
top: 2.625rem;
}
.inputErrorMsg {
align-self: stretch;
color: var(--feedback-error-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 0.75rem;
font-style: normal;
font-weight: 700;
line-height: 1.125rem;
position: relative;
margin-top: 0.5rem;
width: 100%;
}
.topErrorMsgMinus12 {
top: -12px;
}
.gentleFlex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
.btnTxtDS {
margin-left: 0.625rem;
vertical-align: middle;
}
.spacingPhone {
margin-left: 0px;
vertical-align: middle;
}
.spacingHome {
margin-left: 0.375rem;
vertical-align: middle;
}
.iconDS {
color: var(--text-on-action-primary);
position: relative;
left: 0px;
top: 0px;
}
/* Button mit Icon : siehe auswahlnectbrief.xhtml */
.faBtnDS {
display: inline-block;
/* falsche Definition - wann kommt dieser Button vor -WG*/ /*TODO*/
font: normal normal 24px/34px 'FontAwesome', sans-serif;
font-size: 22px;
font-size: 1.375rem;
text-rendering: auto;
}
.btnInside16DS {
color: var(--text-on-action-primary);
font-family: 'NuernbergerImage', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: 1rem; /* 100% */
padding-left: 1.875rem;
}
.footerEasyDS {
color: var(--surface-subtle);
margin-bottom: 3.125rem;
}
.txtLinkDS {
text-decoration: underline;
}
.alert-dangerDS {
background-color: var(--feedback-error-muted);
color: var(--feedback-error-base);
border: 1px solid var(--feedback-error-base);
border-radius: 4px;
font-family: "NuernbergerText";
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
padding: 1rem;
}
.alert-successDS {
background-color: var(--feedback-success-muted);
border-color: var(--border-base);
}
.alert-infoDS {
background-color: var(--background-base);
border-color: var(--feedback-info-base);
}
.errorMessageDS {
}
.errorMessageDS .fa-times-circle, .errorMessageDS .fa-check-circle,
.errorMessageDS .fa-info-circle {
font-size: 1.5em;/* Parent - Element ? - /* TODO */
font-size: 1.5rem; /*TODO*/
}
.posMsgDS {
margin-top: -1.5625rem;
margin-bottom: 0px;
}
/*p, ul, li, blockquote, h1, h2, h3, h4, h5, h6 {*/
/* color: var(--text-base);*/
/*}*/
.post-box__txt .fake-btn {
display: inline-block;
background: var(--action-primary-base);
color: var(--text-on-action-primary);
font-weight: 700;
border: 0;
border-radius: 4px;
text-align: center;
padding: 0.75rem 1.125rem;
-webkit-transition: all .3s;
transition: all .3s;
cursor: pointer;
text-decoration: none;
font-family: 'NuernbergerImage', sans-serif;
}
.post-box__txt .fake-btn:hover {
border: 0;
background: var(--action-primary-hover);
}
.post-box__txt .fake-btn:active, .post-box__txt .fake-btn:focus,
.post-box__txt .fake-btn:focus-visible {
background: var(--action-primary-pressed);
outline: 2px solid var(--action-focus);
}
.buttonUCContainerDS {
display: flex;
align-items: stretch;
justify-content: space-between;
}
.btnSDS {
display: block;
padding: 0.75rem;
color: var(--text-on-action-primary);
font-family: 'NuernbergerImage', sans-serif;
font-size: 0.875rem;
font-style: normal;
font-weight: bold;
line-height: 0.875rem;
border-radius: 4px;
background: var(--background-base);
border: 0;
}
.btnMDS {
color: var(--text-on-action-primary);
font-family: 'NuernbergerImage', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: bold;
line-height: 1rem;
width: 112px;
height: 56px;
border-radius: 4px;
background: var(--action-primary-base);
border: 0;
}
.btnSDS:active, .btnSDS:focus, .btnSDS:focus-visible {
background: var(--background-subtle);
outline: 2px solid var(--action-focus);
}
.btnMDS:hover {
/* border: 0px solid var(--Functional-Coral-Light, #FF9585);*/
background: var(--action-primary-hover);
}
.btnMDS:active, .btnMDS:focus, .btnMDS:focus-visible {
background: var(--action-primary-pressed);
outline: 2px solid var(--action-focus);
}
.btnSecondary {
background: var(--action-secondary-base);
}
.btnSecondary:hover {
background: var(--action-secondary-hover);
}
.btnSecondary:focus {
background: var(--background-base);
outline: 2px solid var(--action-focus);
}
.btnSecondary:active, .btnSecondary:focus-visible {
background: var(--action-secondary-pressed);
outline: 2px solid var(--action-focus);
}
/* Legend nach DS */
/*legend {*/
/* margin-bottom: 1rem;*/
/* font-size: 1.25rem;*/
/* color: var(--text-base);*/
/* border-bottom: none;*/
/* font-family: 'NuernbergerText', sans-serif;*/
/* font-weight: bold;*/
/*}*/
.flex {
display: flex;
gap: 2rem;
align-items:center;
}
.flexCol {
display: flex;
gap: 1.5rem;
flex-direction: column;
}
.fileListText {
flex-grow: 1;
flex-basis: auto;
}
.flex-panel {
display: flex;
flex-direction: column;
gap: var(--spacing-56);
border: 1px solid var(--border-subtle);
border-radius: var(--l);
background-color: var(--surface-base);
padding: var(--spacing-24);
}
.page-header {
margin-top: 0;
margin-bottom: 0;
}
.outputtext-greetings {
display: block;
}
.outputtext-name {
display: block;
}
.page-header {
color: var(--text-brand);
border: none;
}
.page-header h1 {
margin: 0;
padding-bottom: var(--spacing-24);
}
.page-header h1 span {
display: block;
}
.page-header a {
display: inline;
}
/* TEST */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
/*body p,*/
p {
margin: 0;
padding: 0;
}
ul, dl, ol {
list-style: none;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
background-color: var(--background-subtle);
align-items: stretch;
gap: var(--spacing-48);
min-height: 100dvh;
min-width: 375px;
}
body:has(.skip-link:focus-visible) .skip-link {
margin-bottom: calc(-1* var(--spacing-40));
}
@media (width < 768px) {
body:has(.skip-link:focus-visible) .mobile-nav {
margin-top: var(--spacing-40);
}
/*body:has(.navbar-collapse.collapse.in) {*/
/* overflow: hidden;*/
/*}*/
body:has(.burger-menu[aria-expanded="true"]) {
overflow: hidden;
}
}
/*Content-Container Start*/
.content-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1170px;
}
/*Content-Container Ende*/
/*Header Start*/
header {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-base);
border-bottom: 1px solid var(--border-muted);
}
header > .content-container {
padding: var(--spacing-16);
}
header > .content-container:not(.firstPage) {
padding-bottom: 0;
}
@media (width < 768px) {
header > .content-container:not(.firstPage) {
min-height: var(--spacing-80);
}
}
.header-logo-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.logout-link {
padding: var(--spacing-12);
max-width: max-content;
}
/*Header Ende*/
main.content-container {
align-self: center;
gap: var(--spacing-56);
padding: 0 var(--spacing-16);
}
@media (width < 620px) {
main.content-container {
padding: 0;
}
.banner-container,
.mobile-margin {
padding: 0 var(--spacing-16);
}
.flex-panel {
padding: 1rem;
}
}
/*Welcome-Container Start*/
.welcome-container span {
display: block;
}
.welcome-container .mailbox {
margin-top: var(--spacing-12);
}
.welcome-container .notification {
margin-top: var(--spacing-24);
}
/*Welcome-Container Ende*/
.top-service-vertrag-container {
border: 1px solid var(--border-subtle);
border-radius: 1rem;
background-color: var(--background-base);
}
/*Top-Services-Container Start*/
.top-services-container {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.services__container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(252px, calc(25% - 1.25rem * 3 / 4)));
gap: 1.25rem;
}
@media (width < 620px) {
.services__container {
grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
}
.link.service-link {
--link-border-color: var(--border-muted);
align-items: center;
gap: var(--spacing-8);
border: 2px solid var(--link-border-color, var(--border-muted));
border-radius: var(--s);
padding: var(--spacing-8) var(--spacing-12);
}
.link.service-link:hover {
--link-border-color: var(--border-action-primary-hover);
}
.link.service-link:active {
--link-border-color: var(--border-action-primary-pressed);
}
.link.service-link > span {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.link.service-link .link-icon-before {
box-sizing: content-box;
padding: var(--spacing-8);
margin: var(--spacing-4) 0;
border-radius: 48px;
background-color: var(--surface-muted);
}
.link.service-link .link-icon-after {
color: var(--action-primary-base);
margin-left: auto;
}
/*Top-Services-Container Ende*/
/*Verträge-Container Start*/
.vertraege-container {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.vertraege__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.link.vertraege__vertrag-item {
--link-border-color: var(--border-muted);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
padding: 1rem;
border: 2px solid var(--link-border-color, var(--border-muted));
border-radius: var(--s);
}
.link.vertraege__vertrag-item:hover,
.link.vertraege__vertrag-item:active {
text-decoration: none;
}
.vertraege__vertrag-item .link {
padding: var(--spacing-8) 0;
min-width: max-content;
}
.vertraege__vertrag-item:hover .link,
.vertraege__vertrag-item:active .link {
text-decoration: underline;
}
@media (width < 620px) {
.link.vertraege__vertrag-item {
flex-direction: column;
align-items: start;
}
}
.vertraege__vertrag-details {
display: flex;
flex-direction: column;
align-items: start;
gap: var(--spacing-8);
}
.vertraege-optionen > li {
display: inline-block;
margin-right: 1rem;
}
.vertraege-optionen .link {
padding: var(--spacing-12) 0;
}
.tarif-info-container {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.tarif-info-container > p {
margin-top: var(--spacing-8);
}
.tarif-info-container > *:first-child {
margin-top: 0;
}
.tarif-info-container > ul {
list-style: initial;
}
.tarif-info-container > ul li {
display: flex;
gap: 0.25rem;
line-height: 1.5rem;
}
.tarif-info-container > ul li > svg {
flex-shrink: 0;
color: var(--feedback-success-base);
width: var(--spacing-24);
height: var(--spacing-24);
}
/*Verträge-Container Ende*/
/*Footer Start*/
footer {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-base);
margin-top: auto;
}
.footer__container {
align-items: center;
padding: var(--spacing-32) var(--spacing-16);
gap: var(--spacing-16);
}
.footer__list {
display: flex;
gap: var(--spacing-16);
}
@media (width < 620px) {
.footer__list {
flex-direction: column;
align-items: center;
}
}
/*Footer Ende*/
/*!*Footer Start alte Version mit mehr Breakpoints*!*/
/*footer {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* background-color: var(--background-base);*/
/* margin-top: auto;*/
/*}*/
/*.footer__container {*/
/* flex-direction: row;*/
/* align-items: center;*/
/* padding: var(--spacing-32) var(--spacing-16);*/
/*}*/
/*.footer__container > form {*/
/* flex-basis: 50%;*/
/*}*/
/*.footer__list {*/
/* display: flex;*/
/* gap: var(--spacing-16);*/
/*}*/
/*.footer__image {*/
/* transform: translateX(-50%);*/
/*}*/
/*@media (width < 1024px) {*/
/* .footer__container{*/
/* flex-direction: column;*/
/* align-items: center;*/
/* gap: var(--spacing-16);*/
/* }*/
/* .footer__image {*/
/* transform: none;*/
/* }*/
/*}*/
/*@media (width < 620px) {*/
/* .footer__list {*/
/* flex-direction: column;*/
/* align-items: center;*/
/* }*/
/*}*/
/*!*Footer Ende alte Version mit mehr Breakpoints*!*/
/*Kontakt Start*/
.contact-container > .headline {
align-self: center;
}
.contact-list {
display: flex;
gap: 1.5rem;
}
.contact-list > li {
flex-basis: 100%;
}
.link.contact-link {
--link-border-color: var(--border-muted);
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid var(--link-border-color);
border-radius: var(--s);
background-color: var(--background-base);
padding: 1.5rem;
gap: 0.5rem;
text-align: center;
height: 100%;
}
.contact-link .link,
.contact-link .link {
text-decoration: underline;
}
.link.contact-link:hover {
--link-border-color: var(--border-action-primary-hover);
}
.link.contact-link:active {
--link-border-color: var(--border-action-primary-pressed);
}
.link.contact-link:hover,
.link.contact-link:active {
text-decoration: none;
}
.link.contact-link:hover .link,
.link.contact-link:active .link {
text-decoration: none;
}
.link.contact-link .contact-link-icon {
box-sizing: content-box;
padding: 10px;
border-radius: 100%;
color: var(--text-brand);
background-color: var(--surface-muted);
width: 28px;
height: 28px;
}
.contact-link .paragraph {
margin-top: auto;
}
@media (width < 1024px) {
.contact-container {
align-items: center;
padding: 0 2rem;
}
.contact-list {
flex-direction: column;
width: 100%;
max-width: 500px;
}
}
/*Kontakt Ende*/
/*Link Start*/
.link {
display: flex;
gap: var(--spacing-4);
text-decoration: none;
border-radius: var(--xs);
font-family: var(--link-font-family);
font-size: var(--link-font-size);
font-weight: var(--link-font-weight, var(--font-weight-regular));
line-height: var(--link-line-height); /* 144.444% */
letter-spacing: var(--link-letter-spacing);
}
.link-inline {
display: inline-flex;
}
/*Focus-Zeug wegen Bootstrap*/
.link:focus {
text-decoration: none;
}
.link-bold {
--link-font-weight: var(--font-weight-bold);
}
/*Focus-Zeug wegen Bootstrap*/
.link-underline, .link-underline:focus {
text-decoration: underline;
}
.link:hover {
text-decoration: underline;
}
.link-underline:hover {
text-decoration: none;
}
.link:focus-visible {
outline: 3px solid var(--action-focus);
/*Sollte eigentlich in .link, geht nicht wegen bootstrap Müll*/
outline-offset: var(--spacing-4);
}
/*@supports not selector(:focus-visible) {*/
/* .link:focus {*/
/* outline: 3px solid var(--action-focus);*/
/* outline-offset: var(--spacing-4);*/
/* }*/
/*}*/
.link:disabled {
--link-border-color: var(--border-disabled);
--link-background-color: var(--surface-disabled);
/*passt evtl. noch nicht*/
color: var(--text-disabled);
pointer-events: none;
}
.link > svg {
width: var(--link-line-height);
height: var(--link-line-height);
flex-shrink: 0;
}
.link-s {
--link-font-family: var(--link-s-font-family);
--link-font-size: var(--link-s-font-size);
--link-line-height: var(--link-s-line-height); /* 144.444% */
--link-letter-spacing: var(--link-s-letter-spacing);
}
.link-m {
--link-font-family: var(--link-m-font-family);
--link-font-size: var(--link-m-font-size);
--link-line-height: var(--link-m-line-height); /* 144.444% */
--link-letter-spacing: var(--link-m-letter-spacing);
}
.link-l {
--link-font-family: var(--link-l-font-family);
--link-font-size: var(--link-l-font-size);
--link-line-height: var(--link-l-line-height); /* 144.444% */
--link-letter-spacing: var(--link-l-letter-spacing);
}
.link-primary {
--link-border-color: var(--border-action-primary-base);
color: var(--text-action-primary-base);
}
/*Focus-Zeug wegen Bootstrap*/
.link-primary:focus {
color: var(--text-action-primary-base);
}
.link-primary:hover {
--link-border-color: var(--border-action-primary-hover);
color: var(--text-action-primary-hover);
}
.link-primary:active {
--link-border-color: var(--border-action-primary-pressed);
color: var(--text-action-primary-pressed);
}
.link-secondary {
--link-border-color: var(--border-action-secondary-base);
color: var(--text-action-secondary-base);
}
/*Focus-Zeug wegen Bootstrap*/
.link-secondary:focus {
color: var(--text-action-secondary-base);
}
.link-secondary:hover {
--link-border-color: var(--border-action-secondary-hover);
color: var(--text-action-secondary-hover);
}
.link-secondary:active {
--link-border-color: var(--border-action-secondary-pressed);
color: var(--text-action-secondary-pressed);
}
.link-button {
align-items: center;
padding: var(--spacing-12);
border: 2px solid var(--link-border-color, var(--border-muted));
background-color: var(--link-background-color, var(--background-base)) ;
}
/*@media (width < 620px) {*/
/* a:link.link-l, a:visited.link-l {*/
/* --link-font-family: var(--link-m-font-family);*/
/* --link-font-size: var(--link-m-font-size);*/
/* --link-line-height: var(--link-m-line-height); !* 144.444% *! */
/* }*/
/*}*/
/*Link Ende*/
/*Button Start*/
.button {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-4);
border-radius: var(--xs);
border: 2px solid var(--button-border-color);
/*outline-offset: var(--spacing-4);*/
background: var(--button-background);
padding: var(--button-padding);
min-width: var(--button-min-width);
color: var(--button-color);
font-family: var(--button-font-family);
font-size: var(--button-font-size);
line-height: var(--button-line-height);
letter-spacing: var(--button-letter-spacing);
font-weight: var(--font-weight-bold);
text-decoration: none;
cursor: pointer;
}
.button-solid {
--button-color: var(--text-on-action-primary);
--button-border-color: var(--border-action-primary-base);
--button-background: var(--action-primary-base);
}
.button-outline {
--button-color: var(--text-action-primary-base);
--button-border-color: var(--border-action-primary-base);
--button-background: transparent;
}
.button-text {
--button-color: var(--text-action-primary-base);
--button-border-color: transparent;
--button-background: transparent;
}
.button-l {
--button-padding: var(--spacing-20);
--button-min-width: 128px;
--button-font-family: var(--label-xl-font-family);
--button-font-size: var(--label-xl-font-size);
--button-line-height: var(--label-xl-line-height);
--button-letter-spacing: var(--label-xl-letter-spacing);
}
.button-m {
--button-padding: var(--spacing-16);
--button-min-width: 112px;
--button-font-family: var(--label-l-font-family);
--button-font-size: var(--label-l-font-size);
--button-line-height: var(--label-l-line-height);
--button-letter-spacing: var(--label-l-letter-spacing);
}
.button-s {
--button-padding: var(--spacing-12);
--button-min-width: 96px;
--button-font-family: var(--label-m-font-family);
--button-font-size: var(--label-m-font-size);
--button-line-height: var(--label-m-line-height);
--button-letter-spacing: var(--label-m-letter-spacing);
}
.button-inline {
display: inline-flex;
}
.button:focus-visible {
outline: 3px solid var(--action-focus);
/*Sollte eigentlich in .link, geht nicht wegen bootstrap Müll*/
outline-offset: var(--spacing-4);
}
/*Focus-Zeug wegen Bootstrap*/
.button:focus {
color: var(--button-color);
text-decoration: none;
}
.button:not(.button-text):hover {
--button-color: var(--text-on-action-primary);
--button-border-color: var(--border-action-primary-hover);
--button-background: var(--action-primary-hover);
/*Hover-Zeug wegen Bootstrap bei */
color: var(--button-color);
text-decoration: none;
}
.button-text:hover {
--button-color: var(--text-action-primary-hover);
text-decoration: underline 2px;
text-underline-offset: 6px;
/*Hover-Zeug wegen Bootstrap bei */
color: var(--button-color);
}
.button:not(.button-text):active {
--button-color: var(--text-on-action-primary);
--button-border-color: var(--border-action-primary-pressed);
--button-background: var(--action-primary-pressed);
}
.button-text:active {
--button-color: var(--text-action-primary-pressed);
}
.button:not(.button-text):disabled {
--button-color: var(--text-on-action-primary-disabled);
--button-border-color: var(--border-disabled);
--button-background: var(--action-disabled);
pointer-events: none;
}
.button-text:disabled {
--button-color: var(--text-on-action-primary-disabled);
pointer-events: none;
}
.button > svg {
width: var(--button-line-height);
height: var(--button-line-height);
flex-shrink: 0;
}
/*Button Ende*/
/* Legend-Reset Start */
legend {
width: auto;
color: var(--text-brand);
border: none;
margin: 0;
padding: 0;
}
/* Legend-Reset Ende */
/*Headline Start*/
.headline {
font-style: normal;
font-weight: var(--heading-font-weight, var(--font-weight-bold));
}
.headline-regular {
--heading-font-weight: var(--font-weight-regular)
}
.headline-xs {
/* Heading/XS */
font-family: var(--heading-xs-font-family);
font-size: var(--heading-xs-font-size);
line-height: var(--heading-xs-line-height); /* 140% */
letter-spacing: var(--heading-xs-letter-spacing);
}
.headline-s {
/* Heading/S */
font-family: var(--heading-s-font-family);
font-size: var(--heading-s-font-size);
line-height: var(--heading-s-line-height); /* 140% */
letter-spacing: var(--heading-s-letter-spacing);
}
.headline-m {
/* Heading/M */
font-family: var(--heading-m-font-family);
font-size: var(--heading-m-font-size);
line-height: var(--heading-m-line-height); /* 140% */
letter-spacing: var(--heading-m-letter-spacing);
}
.headline-l {
/* Heading/L */
font-family: var(--heading-l-font-family);
font-size: var(--heading-l-font-size);
line-height: var(--heading-l-line-height); /* 140% */
letter-spacing: var(--heading-l-letter-spacing);
}
.headline-xl {
/* Heading/XL */
font-family: var(--heading-xl-font-family);
font-size: var(--heading-xl-font-size);
line-height: var(--heading-xl-line-height); /* 140% */
letter-spacing: var(--heading-xl-letter-spacing);
}
.headline-xxl {
/* Heading/XXL */
font-family: var(--heading-xxl-font-family);
font-size: var(--heading-xxl-font-size);
line-height: var(--heading-xxl-line-height); /* 140% */
letter-spacing: var(--heading-xxl-letter-spacing);
}
/*Headline Ende*/
/*Label Start*/
/*Reset wegen Bootstrap*/
.label {
all: initial;
}
.label {
font-family: var(--label-font-family);
font-size: var(--label-font-size);
font-weight: var(--label-font-weight, var(--font-weight-bold));
line-height: var(--label-line-height);
letter-spacing: var(--label-letter-spacing);
}
.label-regular {
--label-font-weight: var(--font-weight-regular)
}
.label-s {
/* Label/S */
--label-font-family: var(--label-s-font-family);
--label-font-size: var(--label-s-font-size);
--label-line-height: var(--label-s-line-height); /* 144.444% */
--label-letter-spacing: var(--label-s-letter-spacing);
}
.label-m {
/* Label/M */
--label-font-family: var(--label-m-font-family);
--label-font-size: var(--label-m-font-size);
--label-line-height: var(--label-m-line-height); /* 144.444% */
--label-letter-spacing: var(--label-m-letter-spacing);
}
.label-l {
/* Label/L */
--label-font-family: var(--label-l-font-family);
--label-font-size: var(--label-l-font-size);
--label-line-height: var(--label-l-line-height); /* 144.444% */
--label-letter-spacing: var(--label-l-letter-spacing);
}
.label-xl {
/* Label/XL */
--label-font-family: var(--label-xl-font-family);
--label-font-size: var(--label-xl-font-size);
--label-line-height: var(--label-xl-line-height); /* 144.444% */
--label-letter-spacing: var(--label-xl-letter-spacing);
}
/*Badge Start*/
.label-badge {
padding: var(--spacing-4) var(--spacing-8);
border-radius: var(--full);
}
.label-badge:has(> svg) {
display: flex;
flex-direction: row;
gap: var(--spacing-8);
}
.label-badge > svg {
width: var(--label-line-height);
height: var(--label-line-height);
flex-shrink: 0;
}
.label-badge-info {
color: var(--feedback-info-base);
background: var(--feedback-info-muted);
}
.label-badge-success {
color: var(--feedback-success-base);
background: var(--feedback-success-muted);
}
.label-badge-warning {
color: var(--feedback-warning-base);
background: var(--feedback-warning-muted);
}
.label-badge-error {
color: var(--feedback-error-base);
background: var(--feedback-error-muted);
}
.label-badge-brand {
color: var(--text-brand);
background: var(--background-base);
}
/*Badge Ende*/
/*Label Ende*/
/*Paragraph Start*/
.paragraph {
font-style: normal;
font-weight: var(--paragraph-font-weight, var(--font-weight-regular));
}
.paragraph-color-feedback-success-base{
color: var(--feedback-success-base);
}
.paragraph-bold {
--paragraph-font-weight: var(--font-weight-bold)
}
.paragraph-s {
/* Paragraph/S */
font-family: var(--paragraph-s-font-family);
font-size: var(--paragraph-s-font-size);
line-height: var(--paragraph-s-line-height); /* 150% */
letter-spacing: var(--paragraph-s-letter-spacing);
}
.paragraph-m {
/* Paragraph/M */
font-family: var(--paragraph-m-font-family);
font-size: var(--paragraph-m-font-size);
line-height: var(--paragraph-m-line-height); /* 150% */
letter-spacing: var(--paragraph-m-letter-spacing);
}
.paragraph-l {
/* Paragraph/L */
font-family: var(--paragraph-l-font-family);
font-size: var(--paragraph-l-font-size);
line-height: var(--paragraph-l-line-height); /* 150% */
letter-spacing: var(--paragraph-l-letter-spacing);
}
/*Paragraph Ende*/
/*LI Start*/
.li-style-type-disc-inside{
list-style-type: disc;
list-style-position: inside;
}
/*LI Ende*/
/*Colors Start*/
.color--text-base {
color: var(--text-base);
}
.color--text-subtle {
color: var(--text-subtle);
}
.color--text-muted {
color: var(--text-muted);
}
.color--text-brand {
color: var(--text-brand);
}
.color--text-action-primary-base{
color: var(--text-action-primary-base);
}
.color--text-disabled {
color: var(--text-disabled);
}
/*Colors Ende*/
/*Background Start*/
.background--surface-base {
background: var(--surface-base);
}
.background--surface-muted {
background: var(--surface-muted);
}
.background--surface-subtle {
background: var(--surface-subtle);
}
.background--surface-disabled {
background: var(--surface-disabled);
}
/*Background Ende*/
/*Notifications Start*/
.notification {
display: flex;
gap: 0.5rem;
padding: 1rem;
border-radius: 4px;
border: 1px solid transparent;
}
.notification > svg {
color: var(--background-base);
padding: var(--spacing-4);
border-radius: var(--full);
width: var(--heading-xs-line-height);
height: var(--heading-xs-line-height);
flex-shrink: 0;
}
.notification > .notification-content {
display: flex;
flex-direction: column;
align-items: start;
/*gap: 0.5rem;*/
}
.notification-info {
color: var(--feedback-info-base);
border-color: var(--feedback-info-base);
background-color: var(--feedback-info-muted);
}
.notification-info > svg {
background-color: var(--feedback-info-base);
}
.notification-info .notification-header {
color: var(--feedback-info-base);
}
.notification-warning {
color: var(--feedback-warning-base);
border-color: var(--feedback-warning-base);
background-color: var(--feedback-warning-muted);
}
.notification-warning > svg {
background-color: var(--feedback-warning-base);
}
.notification-warning .notification-header {
color: var(--feedback-warning-base);
}
.notification-success {
color: var(--feedback-success-base);
border-color: var(--feedback-success-base);
background-color: var(--feedback-success-muted);
}
.notification-success > svg {
background-color: var(--feedback-success-base);
}
.notification-success .notification-header {
color: var(--feedback-success-base);
}
.notification-error {
color: var(--feedback-error-base);
border-color: var(--feedback-error-base);
background-color: var(--feedback-error-muted);
}
.notification-error > svg {
background-color: var(--feedback-error-base);
}
.notification-error .notification-header {
color: var(--feedback-error-base);
}
/*Notifications Ende*/
/*Accordion Start*/
.accordion-multi-container {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
border: 2px solid var(--border-muted);
border-radius: var(--s);
background: var(--surface-muted);
}
.accordion-multi-container > .panel {
margin: initial;
box-shadow: none;
/*all: unset;*/
}
.accordion-multi-container > .accordion-container {
border: none;
/*border-radius: initial;*/
}
.accordion-container {
border: 2px solid var(--border-muted);
border-radius: var(--s);
background: var(--background-base);
}
.accordion-header {
padding: var(--spacing-4);
}
.accordion-trigger {
display: flex;
align-items: start;
gap: var(--spacing-12);
padding: var(--spacing-12);
border-radius: var(--s);
background: none;
width: 100%;
text-align: start;
color: var(--text-action-secondary-base);
font-family: var(--heading-xs-font-family);
font-size: var(--heading-xs-font-size);
font-style: normal;
font-weight: var(--heading-xs-font-weight-bold);
line-height: var(--heading-xs-line-height); /* 140% */
letter-spacing: var(--heading-xs-letter-spacing);
}
.accordion-trigger:hover {
background-color: var(--background-subtle);
color: var(--text-action-secondary-hover);
text-decoration: underline;
}
/*Todo: falls badge ohne underline sein soll dann underline nur auf .accordion-title-text*/
/*dafür muss der Text in einen span mit class .accordion-title-text*/
/*.accordion-trigger:hover .accordion-title {*/
/* text-decoration: underline;*/
/*}*/
.accordion-trigger:hover > svg {
color: var(--text-action-primary-hover);
}
.accordion-trigger:hover > svg.accordion-minus {
border-color: var(--border-action-primary-hover);
}
.accordion-trigger:active {
color: var(--text-action-secondary-pressed);
}
.accordion-trigger:active > svg {
color: var(--text-action-primary-pressed);
}
.accordion-trigger:active > svg.accordion-minus {
border-color: var(--border-action-primary-pressed);
}
.accordion-trigger:focus-visible {
outline: 3px solid var(--action-focus);
outline-offset: -2px;
}
.accordion-trigger:disabled {
/*passt evtl. noch nicht*/
color: var(--text-disabled);
pointer-events: none;
}
.accordion-trigger:disabled > svg {
color: var(--text-disabled);
}
.accordion-trigger:disabled > svg.accordion-minus {
border-color: var(--border-disabled);
}
.accordion-trigger > svg {
color: var(--text-action-primary-base);
margin-left: auto;
width: 28px;
height: 28px;
border-radius: var(--xs);
border: 1px solid transparent;
flex-shrink: 0;
}
.accordion-title {
display: flex;
flex-wrap: wrap;
align-items: start;
gap: var(--spacing-12);
}
/*badge höhe ist problematisch, weil höher als text*/
/*margin-top: -2px; wenn badge draußen*/
/*ggf. text mit margin höher machen*/
.accordion-trigger .label-badge {
margin-top: -2px;
}
.accordion-trigger.collapsed > svg.accordion-minus {
display: none;
}
.accordion-trigger:not(.collapsed) > svg:not(.accordion-minus) {
display: none;
}
.accordion-trigger > svg.accordion-minus {
border-color: var(--border-action-primary-base);
}
.accordion-panel {
--max-content-width: 1052px;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-8) var(--spacing-16) var(--spacing-16) var(--spacing-16);
}
/*Accordion Ende*/
/* Tabs Start*/
.tabs-container {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
border-radius: var(--l);
}
.tabs-container.tabs-inner {
gap: var(--spacing-16);
padding: var(--spacing-16);
background: var(--background-muted);
}
.tabs-container.tabs-inner .tablist-container {
padding: initial;
gap: var(--spacing-12);
border: none;
background: none;
}
.tabs-container.tabs-inner .tab-trigger {
font-family: var(--label-m-font-family);
font-size: var(--label-m-font-size);
font-weight: var(--label-m-font-weight);
line-height: var(--label-m-line-height);
letter-spacing: var(--label-m-letter-spacing);
padding: var(--spacing-12);
border-color: var(--text-on-action-primary);
}
.tabs-container.tabs-inner .tab-content {
padding: initial;
border: none;
background: none;
}
.tablist-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-16);
padding: var(--spacing-16);
border: 1px solid var(--border-subtle);
border-radius: var(--l);
background: var(--background-base);
}
.tablist-container li {
flex-grow: 1;
}
.tab-trigger {
color: var(--text-action-primary-base);
font-family: var(--label-xl-font-family);
font-size: var(--label-xl-font-size);
font-style: normal;
font-weight: var(--label-xl-font-weight);
line-height: var(--label-xl-line-height); /* 150% */
letter-spacing: var(--label-xl-letter-spacing);
padding: var(--spacing-20);
border: 2px solid var(--border-subtle);
border-radius: var(--s);
background: none;
width: 100%;
}
.tablist-container li.active .tab-trigger {
color: var(--text-on-action-primary);
border-color: var(--border-action-primary-base);
background-color: var(--action-primary-base);
}
/* States Start*/
.tab-trigger:focus-visible {
outline: 3px solid var(--action-focus);
outline-offset: var(--spacing-4);
}
.tablist-container li .tab-trigger:disabled {
/*passt evtl. noch nicht*/
color: var(--text-on-action-primary-disabled);
border-color: var(--border-disabled);
background-color: var(--action-disabled);
pointer-events: none;
}
.tablist-container li.active .tab-trigger:hover {
border-color: var(--border-action-primary-hover);
background: var(--action-primary-hover);
}
.tablist-container li.active .tab-trigger:active {
border-color: var(--border-action-primary-pressed);
background: var(--action-primary-pressed);
}
.tablist-container li:not(.active) .tab-trigger:hover {
color: var(--text-action-primary-hover);
text-decoration: underline;
}
.tablist-container li:not(.active) .tab-trigger:active {
color: var(--text-action-primary-pressed);
text-decoration: underline;
}
/* States Ende*/
.tab-content,
.panel-content {
display: flex;
flex-direction: column;
padding: var(--spacing-24) var(--spacing-16);
border: 1px solid var(--border-subtle);
border-radius: var(--l);
background: var(--background-base);
}
/*Tabs Ende*/
/*Table Start*/
.base-table {
position: relative;
color: var(--text-brand);
border-collapse: collapse;
background: var(--background-base);
}
.base-table.col-1-text-align--right tr > *:nth-child(1),
.base-table.col-2-text-align--right tr > *:nth-child(2),
.base-table.col-3-text-align--right tr > *:nth-child(3),
.base-table.col-4-text-align--right tr > *:nth-child(4),
.base-table.col-5-text-align--right tr > *:nth-child(5),
.base-table.col-6-text-align--right tr > *:nth-child(6),
.base-table.col-7-text-align--right tr > *:nth-child(7),
.base-table.col-8-text-align--right tr > *:nth-child(8) {
text-align: right;
}
.base-table caption {
font-family: var(--heading-s-font-family);
font-size: var(--heading-s-font-size);
font-style: normal;
font-weight: var(--heading-font-weight, var(--font-weight-bold));
line-height: var(--heading-s-line-height); /* 140% */
letter-spacing: var(--heading-s-letter-spacing);
margin-bottom: 0.5rem;
}
.base-table tr {
vertical-align: top;
border-bottom: 1px solid var(--border-base);
}
.base-table th,
.base-table td {
font-family: var(--paragraph-m-font-family);
font-size: var(--paragraph-m-font-size);
font-style: normal;
line-height: var(--paragraph-m-line-height); /* 150% */
letter-spacing: var(--paragraph-m-letter-spacing);
padding: var(--spacing-12) var(--spacing-16);
}
.base-table th {
font-weight: var(--paragraph-m-font-weight-bold);
}
.base-table td {
font-weight: var(--paragraph-m-font-weight-regular);
}
/*wegen svg*/
.base-table svg {
color: var(--feedback-success-base);
width: var(--paragraph-m-line-height);
height: var(--paragraph-m-line-height);
flex-shrink: 0;
}
.base-table th span:has(svg) {
display: flex;
gap: var(--spacing-4);
}
/*wegen svg*/
.base-table th[aria-hidden="true"] {
display: none;
}
@media (width < 768px) {
.base-table thead {
position: absolute;
transform: scale(0);
overflow: hidden;
}
.base-table tbody tr {
display: flex;
flex-wrap: wrap;
/*align-items: start;*/
padding: var(--spacing-8);
gap: var(--spacing-4);
}
.base-table tbody tr th:first-child {
flex: 0 0 100%;
}
.base-table th,
.base-table td {
padding: 0;
}
.base-table th[aria-hidden="true"],
.base-table th[aria-hidden="true"] + td {
font-family: var(--paragraph-s-font-family);
font-size: var(--paragraph-s-font-size);
line-height: var(--paragraph-s-line-height); /* 150% */
letter-spacing: var(--paragraph-s-letter-spacing);
}
.base-table th[aria-hidden="true"] {
display: initial;
flex: 1 1 calc(48% - var(--spacing-2));
text-align: left;
}
.base-table th[aria-hidden="true"] + td {
/*flex: 1 1 calc(52% - var(--spacing-2));*/
text-align: right;
}
/*.base-table.v-2 th,*/
/*.base-table.v-2 td {*/
/* padding: 0;*/
/*}*/
/*.base-table.v-2 tr {*/
/* display: flex;*/
/* flex-wrap: wrap;*/
/* padding: var(--spacing-8);*/
/*}*/
/*.base-table.v-2 thead tr th:first-child {*/
/* !*display: none;*!*/
/* transform: scale(0);*/
/* position: absolute;*/
/* overflow: hidden;*/
/*}*/
/*!*.base-table.v-2thead tr th:first-child,*!*/
/*.base-table.v-2 tbody tr th {*/
/* display: block;*/
/* flex: 0 0 100%;*/
/* text-align: center;*/
/*}*/
/*.base-table.v-2 tbody tr th {*/
/* display: flex;*/
/* flex: 0 0 100%;*/
/* justify-content: center;*/
/*}*/
/*.base-table.v-2 tbody tr td {*/
/* text-align: center;*/
/*}*/
/*.base-table.v-2.col-1-text-align--right tr > *:nth-child(1),*/
/*.base-table.v-2.col-2-text-align--right tr > *:nth-child(2),*/
/*.base-table.v-2.col-3-text-align--right tr > *:nth-child(3),*/
/*.base-table.v-2.col-4-text-align--right tr > *:nth-child(4),*/
/*.base-table.v-2.col-5-text-align--right tr > *:nth-child(5),*/
/*.base-table.v-2.col-6-text-align--right tr > *:nth-child(6),*/
/*.base-table.v-2.col-7-text-align--right tr > *:nth-child(7),*/
/*.base-table.v-2.col-8-text-align--right tr > *:nth-child(8) {*/
/* text-align: center;*/
/*}*/
/*.base-table.v-2 thead tr th:not(:first-child),*/
/*.base-table.v-2 tbody tr td {*/
/* display: block;*/
/* flex: 0 0 50%;*/
/* text-align: center;*/
/*}*/
/*.base-table.v-2 tbody {*/
/* display: grid;*/
/* !*grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));*!*/
/* gap: var(--spacing-4);*/
/*}*/
}
/*Table Ende*/
/*Flex Start*/
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-space-between {
justify-content: space-between;
}
.flex-center{
justify-content: center;
align-content: center;
align-items: center;
}
.flex--align-items--center{
align-items: center;
}
.flex-wrap--wrap {
flex-wrap: wrap;
}
/*Flex Ende*/
/*Display Start*/
.display-block {
display: block;
}
/*Display Ende*/
/*Sonstiges Start*/
.center-self {
margin: 0 auto;
}
/* Margin start */
.margin--0 { margin: 0;}
.margin--32 { margin: var(--spacing-32); }
.margin-top--0 { margin-top: var(--spacing-0); }
.margin-top-2 { margin-top: var(--spacing-2); }
.margin-top--4 { margin-top: var(--spacing-4); }
.margin-top--8 { margin-top: var(--spacing-8); }
.margin-top--12 { margin-top: var(--spacing-12); }
.margin-top--16 { margin-top: var(--spacing-16); }
.margin-top--20 { margin-top: var(--spacing-20); }
.margin-top--24 { margin-top: var(--spacing-24); }
.margin-top--32 { margin-top: var(--spacing-32); }
.margin-top--40 { margin-top: var(--spacing-40); }
.margin-top--48 { margin-top: var(--spacing-48); }
.margin-top--56 { margin-top: var(--spacing-56); }
.margin-top--64 { margin-top: var(--spacing-64); }
.margin-top--72 { margin-top: var(--spacing-72); }
.margin-top--80 { margin-top: var(--spacing-80); }
.margin-top--96 { margin-top: var(--spacing-96); }
.margin-top--120 { margin-top: var(--spacing-120); }
.margin-bottom--0 { margin-bottom: var(--spacing-0); }
.margin-bottom-2 { margin-bottom: var(--spacing-2); }
.margin-bottom--4 { margin-bottom: var(--spacing-4); }
.margin-bottom--8 { margin-bottom: var(--spacing-8); }
.margin-bottom--12 { margin-bottom: var(--spacing-12); }
.margin-bottom--16 { margin-bottom: var(--spacing-16); }
.margin-bottom--20 { margin-bottom: var(--spacing-20); }
.margin-bottom--24 { margin-bottom: var(--spacing-24); }
.margin-bottom--32 { margin-bottom: var(--spacing-32); }
.margin-bottom--40 { margin-bottom: var(--spacing-40); }
.margin-bottom--48 { margin-bottom: var(--spacing-48); }
.margin-bottom--56 { margin-bottom: var(--spacing-56); }
.margin-bottom--64 { margin-bottom: var(--spacing-64); }
.margin-bottom--72 { margin-bottom: var(--spacing-72); }
.margin-bottom--80 { margin-bottom: var(--spacing-80); }
.margin-bottom--96 { margin-bottom: var(--spacing-96); }
.margin-bottom--120 { margin-bottom: var(--spacing-120); }
.-margin-top--16 { margin-top: calc(var(--spacing-16) * -1); }
.margin-left--8 { margin-left: var(--spacing-8); }
/* Margin end */
/* Padding start */
.padding--0 { padding: var(--spacing-0); }
.padding--2 { padding: var(--spacing-2); }
.padding--4 { padding: var(--spacing-4); }
.padding--8 { padding: var(--spacing-8); }
.padding--12 { padding: var(--spacing-12); }
.padding--14 { padding: var(--spacing-14); }
.padding--16 { padding: var(--spacing-16); }
.padding--20 { padding: var(--spacing-20); }
.padding--24 { padding: var(--spacing-24); }
.padding--32 { padding: var(--spacing-32); }
.padding--40 { padding: var(--spacing-40); }
.padding--48 { padding: var(--spacing-48); }
.padding--56 { padding: var(--spacing-56); }
.padding--64 { padding: var(--spacing-64); }
.padding--72 { padding: var(--spacing-72); }
.padding--80 { padding: var(--spacing-80); }
.padding--96 { padding: var(--spacing-96); }
.padding--120 { padding: var(--spacing-120); }
.padding-x--0 { padding-inline: var(--spacing-0); }
.padding-x--2 { padding-inline: var(--spacing-2); }
.padding-x--4 { padding-inline: var(--spacing-4); }
.padding-x--8 { padding-inline: var(--spacing-8); }
.padding-x--12 { padding-inline: var(--spacing-12); }
.padding-x--14 { padding-inline: var(--spacing-14); }
.padding-x--16 { padding-inline: var(--spacing-16); }
.padding-x--20 { padding-inline: var(--spacing-20); }
.padding-x--24 { padding-inline: var(--spacing-24); }
.padding-x--32 { padding-inline: var(--spacing-32); }
.padding-x--40 { padding-inline: var(--spacing-40); }
.padding-x--48 { padding-inline: var(--spacing-48); }
.padding-x--56 { padding-inline: var(--spacing-56); }
.padding-x--64 { padding-inline: var(--spacing-64); }
.padding-x--72 { padding-inline: var(--spacing-72); }
.padding-x--80 { padding-inline: var(--spacing-80); }
.padding-x--96 { padding-inline: var(--spacing-96); }
.padding-x--120 { padding-inline: var(--spacing-120); }
.padding-y--0 { padding-block: var(--spacing-0); }
.padding-y--2 { padding-block: var(--spacing-2); }
.padding-y--4 { padding-block: var(--spacing-4); }
.padding-y--8 { padding-block: var(--spacing-8); }
.padding-y--12 { padding-block: var(--spacing-12); }
.padding-y--14 { padding-block: var(--spacing-14); }
.padding-y--16 { padding-block: var(--spacing-16); }
.padding-y--20 { padding-block: var(--spacing-20); }
.padding-y--24 { padding-block: var(--spacing-24); }
.padding-y--32 { padding-block: var(--spacing-32); }
.padding-y--40 { padding-block: var(--spacing-40); }
.padding-y--48 { padding-block: var(--spacing-48); }
.padding-y--56 { padding-block: var(--spacing-56); }
.padding-y--64 { padding-block: var(--spacing-64); }
.padding-y--72 { padding-block: var(--spacing-72); }
.padding-y--80 { padding-block: var(--spacing-80); }
.padding-y--96 { padding-block: var(--spacing-96); }
.padding-y--120 { padding-block: var(--spacing-120); }
.padding-left--12 { padding-left: var(--spacing-12); }
.padding-right--4 { padding-right: var(--spacing-4); }
/* Padding end */
.align-self--center {
align-self: center;
}
.align-self--start {
align-self: start;
}
.align-items--start {
align-items: start;
}
.align-items--center {
align-items: center;
}
.gap--4 {
gap: var(--spacing-4);
}
.gap--8 {
gap: var(--spacing-8)
}
.gap--12 {
gap: var(--spacing-12)
}
.gap--16 {
gap: var(--spacing-16)
}
.gap--20 {
gap: var(--spacing-20)
}
.gap--24 {
gap: var(--spacing-24)
}
.gap--32 {
gap: var(--spacing-32)
}
.gap--40 {
gap: var(--spacing-40)
}
.border-radius--s {
border-radius: var(--s);
}
.border-radius--m {
border-radius: var(--m);
}
.border-radius--l {
border-radius: var(--l);
}
.border--subtle {
border: 1px solid var(--border-subtle);
}
.w-100 {
width: 100%;
}
.overflow-wrap--anywhere {
overflow-wrap: anywhere;
}
/*Sonstiges Ende*/
/*Vertragsdetails Start*/
.section-container {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
/*.loader anschauen*/
.section-container .loader {
margin: var(--spacing-32);
align-self: center;
}
/*flex mit festen Breiten für 5, 4, 3, 2 Spalten erstellen*/
/*.flex-container {*/
/* display: flex;*/
/* flex-direction: column;*/
/* gap: var(--spacing-8);*/
/* padding: var(--spacing-16);*/
/* border-radius: var(--s);*/
/* background: var(--surface-subtle);*/
/*}*/
.grid-container {
--grid-container-padding: var(--container-padding, var(--spacing-16));
--max-grid-content-width: calc(var(--max-content-width, 1088px) - 2 * var(--grid-container-padding));
display: grid;
gap: 1rem;
color: var(--text-brand);
padding: var(--grid-container-padding);
border-radius: var(--s);
background: var(--surface-subtle);
}
.grid-container.grid-container-white {
background: var(--surface-base);
}
.grid-container dt {
font-style: normal;
font-weight: var(--font-weight-bold);
font-family: var(--label-m-font-family);
font-size: var(--label-m-font-size);
line-height: var(--label-m-line-height); /* 150% */
letter-spacing: var(--label-m-letter-spacing);
/*word-wrap: break-word;*/
}
.grid-container dd {
font-style: normal;
font-weight: var(--font-weight-regular);
font-family: var(--paragraph-m-font-family);
font-size: var(--paragraph-m-font-size);
line-height: var(--paragraph-m-line-height); /* 150% */
letter-spacing: var(--paragraph-m-letter-spacing);
word-wrap: break-word;
}
/*hier ist min = max, da geht auch flex*/
/*grid-container min berechnen mit --var, die wegen der paddings unterschiedlich gesetzt werden muss*/
/*.grid-container.grid-container-5 {*/
/* grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 5 - 1rem * 4 / 5), calc(100% / 5 - 1rem * 4 / 5)));*/
/*}*/
/*.grid-container.grid-container-4 {*/
/* grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 4 - 1rem * 3 / 4), calc(100% / 4 - 1rem * 3 / 4)));*/
/*}*/
/*.grid-container.grid-container-3 {*/
/* grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 3 - 1rem * 2 / 3), calc(100% / 3 - 1rem * 2 / 3)));*/
/*}*/
.grid-container.grid-container-5 {
grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 5 - 1rem * 4 / 5), 1fr));
}
.grid-container.grid-container-4 {
grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 4 - 1rem * 3 / 4), 1fr));
}
.grid-container.grid-container-3 {
grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-grid-content-width) / 3 - 1rem * 2 / 3), 1fr));
}
/*@media (width < 474px) {*/
/* .grid-container {*/
/* display: flex;*/
/* flex-direction: column;*/
/* }*/
/*}*/
/*Vertragsdetails Ende*/
/*Schaden & Leistung Start*/
.schadenliste-item {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding: var(--spacing-8) var(--spacing-12);
border-bottom: 1px solid var(--border-muted);
}
.schadenliste-item > div {
display: flex;
gap: var(--spacing-32);
justify-content: space-between;
align-items: baseline;
}
.schadenliste-item h3 {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
align-items: baseline;
}
@media (width < 620px) {
.schadenliste-item > div {
flex-direction: column-reverse;
gap: var(--spacing-8);
}
}
/*Schaden & Leistung Ende*/
.jsf-select-boolean-checkbox-container{
display: flex;
align-items: center;
gap:0.5rem;
color: var(--text-brand);
}
.checkboxDS label{
font-family: var(--label-l-font-family);
font-size: var(--label-l-font-size);
font-style: normal;
font-weight: var(--label-l-font-weight);
line-height: var(--label-l-line-height);
letter-spacing: var(--label-l-letter-spacing);
color: var(--text-brand);
}
.checkboxDS input{
border-radius: var(--xs);
border: 1px solid var(--border-base);
background: var(--surface-base);
color: var(--text-brand);
}
.usecase-container{
display: flex;
flex-direction: column;
gap: var(--spacing-12);
padding: var(--spacing-32) var(--spacing-80) var(--spacing-64) var(--spacing-80);
border-radius: var(--s);
border: 1px solid var(--border-subtle);
background: var(--background-base);
color: var(--text-brand);
}
@media (width < 768px) {
.usecase-container {
padding-left: var(--spacing-48);
padding-right: var(--spacing-48);
}
}
@media (width < 579px) {
.usecase-container {
padding-left: var(--spacing-16);
padding-right: var(--spacing-16);
}
}
/*.usecase-container * {
margin: 0;
padding: 0;
}*/
.usecase-container__header{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-8);
}
.text-align-center{
text-align: center;
}
.usecase-container .p-s{
font-family: var(--paragraph-s-font-family);
font-size: var(--paragraph-s-font-size);
font-weight: var(--paragraph-s-font-weight-bold);
line-height: var(--paragraph-s-line-height);
}
.usecase-container .p-m{
font-family: var(--paragraph-m-font-family);
font-size: var(--paragraph-m-font-size);
font-weight: var(--paragraph-m-font-weight-regular);
line-height: var(--paragraph-m-line-height);
}
/* Label-Reset Start */
.usecase-container label {
display: inline;
color: var(--text-brand);
text-align: initial;
vertical-align: initial;
border-radius: initial;
}
/* Label-Reset Ende */
.usecase-container__formular{
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
}
.usecase-container__formular__absenden{
display: flex;
justify-content: center;
width: 100%;
}
.usecase-container__formular__absenden-button{
align-self: center;
color: var(--text-on-action-primary);
font-family: 'NuernbergerImage', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: bold;
line-height: 1rem;
min-width: 112px;
min-height: 56px;
padding: var(--spacing-16);
border-radius: 4px;
background: var(--action-primary-base);
border: 0;
}
.service-overview__container{
display: flex;
gap: 2rem;
width: 100%;
flex-wrap: wrap;
}
.service-overview__container-item{
display: flex;
flex: 1 0 31%;
flex-direction: column;
gap: 1rem;
min-width: fit-content;
}
.service-overview__container-item>ul{
display: flex;
flex-direction: column;
gap: 1rem;
}
.input-container{
display: flex;
flex-direction: column;
gap: var(--spacing-32);
margin-top: var(--spacing-8);
}
.input-container > div:empty {
margin: calc(var(--spacing-16) * -1);
}
/* Start Kupo-Button */
.kupo-button{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: var(--xs);
align-self: flex-start;
font-weight: var(--font-weight-bold);
text-decoration: none;
}
.kupo-button-s{
padding: var(--spacing-12);
min-width: 6rem;
}
.kupo-button-m{
padding: var(--spacing-16);
min-width: 7rem;
}
.kupo-button-l{
padding: var(--spacing-20);
min-width: 8rem;
}
.kupo-button-primary{
background-color: var(--action-primary-base);
color: var(--text-on-action-primary);
}
.kupo-button-s .kupo-button-icon-before{
width: 1rem;
height: 1rem;
}
.kupo-button-primary-outlined:focus{
text-decoration: none;
}
.kupo-button-primary-outlined,
.kupo-button-primary-outlined:focus
{
border: 2px solid var(--action-primary-base);
color: var(--text-action-primary-base);
background-color: var(--background-base);
}
.kupo-button-primary-outlined:hover,
.kupo-button-primary-outlined:hover *
{
color: var(--text-on-action-primary);
background-color: var(--action-primary-hover);
text-decoration: none;
}
.kupo-button-primary-outlined:active,
.kupo-button-primary-outlined:active *
{
color: var(--text-on-action-primary);
background-color: var(--action-primary-pressed);
text-decoration: none;
}
.kupo-button-primary-outlined:focus-visible,
.kupo-button-primary-outlined:focus-visible *
{
color: var(--text-action-primary-base);
background-color: var(--background-base);
text-decoration: none;
outline-offset: 3px;
outline-color: var(--action-focus);
}
/*
Ein CommandLink, also im HTML ein a Tag kann keinen disabeld Zustand annehmen.
Für diesen Fall funktioniert :disabled nicht und man benötigt eine separate Klasse.
*/
.kupo-button-primary-outlined-disabled,
.kupo-button-primary-outlined-disabled *,
.kupo-button-primary-outlined:disabled,
.kupo-button-primary-outlined:disabled *{
color: var(--text-on-action-primary-disabled);
background-color: var(--action-disabled);
text-decoration: none;
}
/* Ende Kupo-Button */
/* Start Kupo-Select */
.kupo-select {
padding: var(--spacing-16);
gap: var(--spacing-8);
border-radius: var(--xs);
border: 1px solid var(--border-base);
appearance: base-select;
background: var(--surface-base);
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
display: flex;
width: 100%;
align-items: flex-start;
align-self: stretch;
}
.kupo-select:hover {
background: var(--surface-muted);
}
.kupo-select:open {
background: var(--surface-muted);
border: 1px solid var(--border-brand);
}
/* Ende Kupo-Select */
/* Start Kupo-Radio-Button */
.kupo-yes-no-radio {
/*display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-8);
color: var(--text-base);
font-family: 'NuernbergerText', sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;*/
}
.kupo-yes-no-radio table {
display: flex;
flex-grow: 1;
}
.kupo-yes-no-radio tbody {
display: flex;
flex-grow: 1;
}
.kupo-yes-no-radio tr {
display: flex;
flex-grow: 1;
gap: var(--spacing-16);
}
.kupo-yes-no-radio td {
display: flex;
flex-grow: 1;
}
.kupo-yes-no-radio input {
position: absolute;
align-self: center;
margin-top: -7px;
margin-left: var(--spacing-20);
border-color: var(--border-base);
z-index: 1;
}
.kupo-yes-no-radio input:checked {
border-color: var(--action-primary-base);
}
.kupo-yes-no-radio label {
display: flex;
flex-grow: 1;
padding-left: var(--spacing-56);
padding-top: var(--spacing-16);
padding-bottom: var(--spacing-16);
font-weight: var(--font-weight-bold);
font-family: var(--paragraph-l-font-family), serif;
font-size: var(--paragraph-l-font-size);
line-height: var(--paragraph-l-line-height); /* 150% */
letter-spacing: var(--paragraph-l-letter-spacing);
border: 1px solid var(--border-base);
border-radius: var(--xs);
cursor: pointer;
z-index: 2;
}
.kupo-yes-no-radio label:hover {
border: 1px solid var(--border-action-primary-hover);
}
/* Ende Kupo-Radio-Button */
.container-100{
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: var(--spacing-16) var(--spacing-8);
align-items: center;
align-self: stretch;
border-radius: var(--s);
}
.container-100.bg-muted{
background: var(--background-muted);
}
.container-100.bg-muted *{
background: var(--background-muted);
}
#wertauskunftAktuell{
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
/* File Input Start*/
input[type=file]::file-selector-button {
display: none;
}
input[type=file]::file-selector-button:focus-visible {
outline: 3px solid var(--action-focus);
outline-offset: var(--spacing-4);
}
/* File Input End */
@media (width < 768px) {
#wertauskunftAktuell .base-table tbody tr {
display: table-row;
}
}