{"theme":{"palette":{"primary":{"50":"#F7FBFD","100":"#EDF9FF","200":"#D9F1FC","300":"#ADDFF7","400":"#65C8F7","500":"#039BE5","600":"#0F5B99","700":"#28527D","800":"#1B3855","900":"#152B42","main":"#222222FF","contrastText":"#FFFFFF"},"secondary":{"50":"#FBE8E6","100":"#FFCABA","200":"#FFA78E","300":"#FF8461","500":"#FF6A3F","600":"#F44719","main":"#222222","contrastText":"#FFFFFF"},"success":{"50":"#DFF4EC","100":"#B1E4D0","200":"#7AD3B2","500":"#13BB89","main":"#13BB89","contrastText":"#FFFFFF"},"info":{"50":"#DEF4FF","100":"#ACE2FF","200":"#70CFFF","500":"#26BCFC","main":"#26BCFC","contrastText":"#172B4D"},"warning":{"50":"#FFF4DF","100":"#FFE3B0","200":"#FFD17C","500":"#FFBF44","main":"#FFBF44","contrastText":"#172B4D"},"error":{"100":"#FFC9CF","200":"#FB9393","300":"#F46668","500":"#FF3A3F","main":"#DD2525FF","contrastText":"#FFFFFF"},"focus":{"100":"#CBC0F7","200":"#A797F2","300":"#806CEF","500":"#5B4CEC","main":"#5B4CEC","dark":"#5B4CEC","contrastText":"#FFFFFF"},"accent1":{"50":"#FBE8E6","100":"#FFCABA","200":"#FFA78E","300":"#FF8461","500":"#FF6A3F","600":"#F44719","main":"#FF6A3F","contrastText":"#FFFFFF"},"accent2":{"50":"#E5F7FB","100":"#BEECF6","200":"#99E0EF","300":"#77D4E7","400":"#62CBE2","500":"#59C3DC","main":"#99E0EF","contrastText":"#172B4D"},"tertiary":{"50":"#E5F7FB","100":"#BEECF6","200":"#99E0EF","300":"#77D4E7","400":"#62CBE2","500":"#59C3DC","main":"#99E0EF","contrastText":"#172B4D"},"grey":{"10":"#FCFEFF","20":"#F5F7FA","30":"#EDF2F7","40":"#E6EEF7","50":"#DEEAF7","60":"#D5E1ED","70":"#C5D0DB","80":"#AFBCC9","90":"#9DADBD","100":"#8C9DAD","200":"#7E8D9C","300":"#6F7C8A","400":"#596775","500":"#505E6B","600":"#44525E","700":"#35434F","800":"#27333D","900":"#263847","A100":"#D5D5D5","A200":"#AAAAAA","A400":"#616161","A700":"#303030"},"action":{"active":"#324C66","hover":"#EFF5FA","selected":"#324C66","selectedText":"#ffffff","disabled":"#E6EEF7","focus":"#324C66"},"background":{"default":"#FFFFFFFF"},"text":{"primary":"#222222FF","secondary":"#222222FF"},"divider":"#DEEAF7"},"typography":{"fontWeightRegular":400,"fontWeightBold":600,"fontSize":14,"fontFamily":"arial","h1":{"fontSize":"32px","@media (max-width:600px)":{"fontSize":"24px","fontWeight":600,"marginLeft":"24px"},"color":"#222222FF"},"h2":{"fontSize":"24px","@media (max-width:600px)":{"fontSize":"20px","fontWeight":600},"color":"#222222FF"},"h3":{"@media (max-width:600px)":{"fontSize":"40px"},"color":"#222222FF"},"h4":{"color":"#222222FF"},"h5":{"color":"#222222FF"},"h6":{"color":"#222222FF"},"subtitle1":{"fontSize":16,"lineHeight":"150%"},"subtitle2":{"fontSize":14,"lineHeight":"150%"},"body1":{"color":"#222222FF"},"body2":{"fontSize":"14px","lineHeight":"157%","color":"#222222FF"},"button":{"fontSize":16,"textTransform":"none","height":"48px"},"caption":{"fontSize":"12px","lineHeight":"150%","color":"#222222FF"},"overline":{"fontSize":12,"lineHeight":"150%","textTransform":"uppercase"},"fontSource":[{"fontFamily":"arial","fontStyle":"regular","fontDisplay":"swap","fontWeight":400,"src":"url('https://go.epilot.cloud/designs/20000602/font/arial.ttf')"}]},"spacing":4,"shape":{"borderRadius":4},"muiProps":{"MuiCard":{"elevation":1},"MuiAppBar":{"elevation":0,"position":"static","square":true}},"muiOverrides":{"MuiTabs":{"root":{"minHeight":40,"overflow":"visible"},"flexContainer":{"marginTop":"8px","& .Mui-selected path":{"fill":"#222222FF"}}},"MuiTabPanel":{"root":{"padding":0,"& .MuiPaper-root":{"borderRadius":"0px 4px 4px 4px"}}},"MuiToggleButton":{"root":{"fontWeight":600,"backgroundColor":"#ffffff","color":"#222222FF","borderColor":"#C5D0DB !important","height":"32px","&:hover":{"backgroundColor":"#ffffff"},"&$selected":{"backgroundColor":"#222222FF !important","borderColor":"#222222FF !important","borderRight":"1px solid #222222FF !important","&:hover":{"backgroundColor":"#222222FF"},"& .MuiToggleButton-label":{"color":"#ffffff"}},"&$disabled":{"backgroundColor":"#E6EEF7","& .MuiToggleButton-label":{"color":"#8C9DAD"}}}},"MuiAutocomplete":{"listbox":{"& li[aria-selected='true']":{"color":"#ffffff"}},"inputRoot":{"&[class*='MuiFilledInput-root']":{"padding":"0 !important"}}},"MuiCardContent":{"root":{"padding":"24px","&:last-child":{"paddingBottom":"24px"}}},"MuiInputBase":{"input":{"boxSizing":"border-box","padding":"22px 12px 6px !important","height":"48px","color":"#222222FF"}},"MuiAppBar":{"colorPrimary":{"backgroundColor":"#ffffffFF"}},"MuiPaper":{"root":{"backgroundColor":"#FFFFFFFF"}},"MuiFormLabel":{"root":{"whiteSpace":"nowrap","overflow":"hidden","textOverflow":"ellipsis"}},"MuiFormHelperText":{"root":{"whiteSpace":"nowrap"}}},"breakpoints":{"values":{"xs":0,"sm":600,"md":900,"lg":1200,"xl":1920}}},"design":{"id":"cc91e33a-cbc3-459a-8410-0426fa6c6e03","style_name":"Stuttgart Netze","style":{"logo":{"main":{"s3_object_key":"designs/20000602/logo/logo_sn_mit-subline_rgb.jpg","name":"logo_sn_mit-subline_rgb.jpg","url":"https://go.epilot.cloud/designs/20000602/logo/logo_sn_mit-subline_rgb.jpg"}},"palette":{"error":"#DD2525FF","navbar":"#ffffffFF","primary":"#222222FF","background":"#FFFFFFFF","secondary":"#222222","paper":"#FFFFFFFF"},"typography":{"font":{"font_family":"arial","urls":[{"url":"https://go.epilot.cloud/designs/20000602/font/arial.ttf","type":"TTF"}],"font_weight_bold":"600","font_id":"arial","font_name":"arial","font_weight_regular":"400","font_weight_medium":"500"},"secondary":"#222222FF","primary":"#222222FF"}},"journey_design_tokens":{"summary_card_background":"#FFFFFF","button_height":60,"accent_color":"#222222FF","coupon":"#DD2525FF","datepicker_border_radius":4,"switch_border_radius":9999,"switch_unchecked_bg":"#D0D8DB","card_variant":"outlined","link_color":"#222222FF","logo_size":60,"toggle_selected_text":"#222222","toggle_hover_bg":"#BEBEBD","switch_unchecked_color":"#A7A7A7","radio_unchecked_color":"#666666","input_height":60,"checkbox_unchecked_color":"#666666","toggle_selected_bg":"#EAEAEA","toggle_hover_text":"#222222","button_outlined_hover_bg":"#F1F3F3","custom_css":":root {\n  --dark-grey: #222222;\n  --lightest-grey: #F1F3F3;\n  --border-grey: #D0D8DB;\n  --gradient-brand: linear-gradient(90deg, #01AAD8 0%, #019F67 100%);\n  --font-basic: Arial, sans-serif;\n  --accent-color: var(--dark-grey);\n  --sws-icon-size: 24px;\n  --concorde-button-shadow-hover: none;\n  --primary-hover-bg-color: #ffffff;\n  --concorde-text-base: 1.125rem;\n  --concorde-text-2xl: 2.625rem;\n  --button-border-radius: 40px;\n  --button-border-color: var(--dark-grey);\n  --button-border-radius-choice: 30px;\n  --input-font-size: 16px;\n  --input-height: 60px;\n  \n}\n\n/* Custom font */\n@font-face {\n  font-family: 'FrutigerBold';\n  src: url('https://go.epilot.cloud/designs/16581838/font/frutiger-bold.woff2');\n  font-weight: normal;\n  font-style: normal;\n}\n\n.Concorde-Typography__Heading {\n  font-family: 'FrutigerBold', Arial, sans-serif;\n  line-height: 1.1;\n  margin-block: calc(var(--concorde-spacing) * 4);\n}\n\n/** Typography **/\n\nblockquote {\n  font-style: italic;\n  background-color: var(--lightest-grey);\n  padding: calc(var(--concorde-spacing) * 4);\n  border-radius: 4px;\n  margin-left: 0;\n}\n\n/** Progess bar, uses brand gradient **/\n\n.Concorde-LinearProgress {\n  background: var(--lightest-grey);\n  margin-top: 0;\n}\n\n.Concorde-LinearProgress__Indicator  {\n background: var(--gradient-brand);\n}\n\n/** Buttons **/\n\n/** Primary Button: Outline **/\n\n.Concorde-Button__Primary {\n  --primary-hover-bg-color: #ffffff;\n  background: #fff;\n  color: var(--dark-grey);\n  border: 2px solid var(--button-border-color);\n  font-family: var(--font-basic);\n \n  &:hover {\n    border: 2px solid var(--button-border-color);\n    background: var(--dark-grey);\n    color: #ffffff;\n    box-shadow: none;\n    font-family: var(--font-basic);\n  }\n\n   &[aria-checked=\"true\"] {\n    font-family: var(--font-basic);\n   }\n\n  &:not(.Concorde-ToggleButton) {\n    border-radius: var(--button-border-radius);\n    font-size: 18px;\n    flex-basis: auto;\n    padding-left:calc(var(--concorde-spacing) * 10);\n    padding-right:calc(var(--concorde-spacing) * 10);\n    max-width:50%;\n    &:hover {\n      border-radius: var(--button-border-radius);\n      border-color: var(--accent-color);\n      color: var(--accent-color);\n      background: var(--dark-grey);\n      color: #ffffff;\n    }\n  }\n}\n\n/** Product Tile **/ \n\n[class^=\"Concorde-ProductTile _innerTile\"] {\n    box-shadow: none;\n    border: 2px solid var(--border-grey);\n    &:hover {\n      box-shadow: none;\n      cursor: pointer;\n    }\n}\n\n/** Single Choice Buttons **/\n\n.Concorde-SingleChoice-Block *:not('.Concorde-SingleChoice-Dropdown-Block') .Concorde-Button {\n  justify-content: flex-start;\n  padding: calc(var(--concorde-spacing) * 4);\n  .Concorde-Button__Label {\n    display: flex;\n    gap: var(--concorde-spacing);\n    &:before {\n      content:'';\n      width: 24px;\n      height: 24px;\n      display: block;\n      border: 1px solid var(--button-border-color);\n      border-radius: 100%;\n    } \n    \n  }\n  &[aria-checked=\"true\"] {\n    background: none;\n    outline-color:  var(--accent-color);\n    border-color: var(--accent-color);\n    .Concorde-Button__Label {\n      &:before {\n        background-color: var(--accent-color);\n        border: 6px solid white;\n        box-shadow: 0px 0px 0px 2px var(--accent-color);\n      }   \n    }\n  }\n}\n/**** Multiple Choice Buttons ****/\n\n.Concorde-MultipleChoice-Block .Concorde-Button{  \n  justify-content: flex-start;\n  background: none;\n  padding: calc(var(--concorde-spacing) * 4);\n  &[aria-selected=\"true\"] {\n    outline-color: var(--accent-color);\n    border-color: var(--accent-color);\n  }\n  .Concorde-Icon {\n      width: var(--sws-icon-size);\n      height: var(--sws-icon-size);\n      font-size: var(--sws-icon-size);\n  }\n\n  &[aria-selected=\"true\"] {\n     .Concorde-Icon {\n        color: var(--accent-color);\n     }\n  }\n}\n\n\n.Concorde-Button__Outlined[aria-checked=\"true\"],\n.Concorde-Button__Outlined[aria-selected=\"true\"] {\n  outline-color: var(--accent-color) !important;\n  border-color: var(--accent-color) !important;\n  /*background: transparent !important;*/\n  --active-color: var(--accent-color);\n}\n\n/** Disable expand buttons **/\n.Concorde-Button__Outlined [class*=\"_expandButton\"] {\n  width: 0 !important;\n  height: 0 !important;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/** Change order of icon + text in outlined button **/\n.Concorde-Button__Outlined[class*=\"_choiceButtonRoot\"] {\n    display: flex;\n    flex-direction: column-reverse;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--input-font-size);\n    min-height: var(--input-height);\n\n  /** Choose left-aligned text and icon first **/\n  &:has(.Concorde-Icon) {\n    flex-direction: row-reverse;\n    justify-content: flex-end;\n    align-items: flex-start;\n    text-align: left;\n    padding-top: calc(var(--concorde-spacing) * 3.5);\n    padding-bottom: calc(var(--concorde-spacing) * 3.5);\n    min-height: var(--input-height);\n  }\n\n  &[class*=\"_imageButton\"] {\n    flex-direction: column-reverse;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  /** Stronger visual active state of selected button **/\n  &[class*=\"_buttonActive\"] {\n    box-shadow: 0 0 1px 1px #000;\n  }\n\n  /** Improve word-breaking **/\n  hyphens: auto;\n  hyphenate-limit-chars: 6 3 3;\n\n  .Concorde-Icon {\n    order: 1;\n  }\n\n [class*=\"_labelContainer\"] {\n   flex-direction: row-reverse;\n  .Concorde-Button__Label {\n     order: 1;\n  }\n  .Concorde-Icon {\n    order: 2\n  }\n }\n  \n  [class*=\"_iconContainer\"] {\n    max-width: var(--input-height);\n    flex-shrink: 0;\n\n    [class*=\"_iconImage\"] {\n      max-width: 100%;\n      max-height: 100%\n    }\n  }\n\n  &[class*=\"_hyperlinkButton\"] {\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: calc(var(--concorde-spacing) * 2);\n  } \n}\n\n/** Toggle **/\n\n.Concorde-Switch__Root {\n  border: none;\n  \n  > span > span {      \n    width: 20px;\n    height: 20px;\n  }\n  \n  &[data-state=\"checked\"] {\n     background-color: var(--border-grey);\n    > span {\n      background-color: var(--accent-color);\n      transform: translate(24px);\n      width: 20px;\n      height: 20px;\n      > span {\n        color: var(--accent-color);\n        width: 20px;\n        height: 20px;        \n      }\n    }\n  }  \n}\n\n\n.Concorde-ToggleGroup .Concorde-ToggleButton {\n  &:hover {\n    border-bottom: 2px solid var(--button-border-color)\n  }\n}\n\n/** Checkbox - vertical alignment top **/\n.Concorde-Checkbox {\n  align-items: flex-start;\n}\n\n/** Input and label sizes **/\n.Concorde-Input__Input, [class*=\"_label\"], .Concorde-ToggleGroupItem {\n  font-size: var(--input-font-size);\n}\n\n.Concorde-Switch__Label {\n  font-size: 18px;\n}\n\n[class*=\"_label-focused\"], \n[class*=\"_label-valued\"],\n.Concorde-Textarea [class*=\"_label\"] {\n  font-size: var(--label-font-size);\n}\n\n\n/** Confirmation Icon - Reduce height **/\n.Concorde-SuccessConfirmation-Block svg {\n  max-width: var(--input-height);\n  max-height: var(--input-height);\n}\n\n/** Links always underlined **/\n.Concorde-Typography a, .Concorde-Link {\n  text-decoration: underline;\n  &:hover {\n    text-decoration: none;\n  }\n}\n                         \n/** User Summary **/\n.Concorde-UserInputSummary-Block\n{\n  > div [class^=\"_card\"] {\n    border: 1px solid var(--concorde-input-border-color);\n      \n    [class*=\"_editButton\"] {\n        font-size: 16px;\n        font-weight: 600;\n    }\n    \n    > div {\n      border-top: 1px solid var(--concorde-input-border-color);\n      padding-top: calc(var(--concorde-spacing) * 3);\n\n      &:first-of-type {\n        border-top: none;\n      }\n\n      p[class^=\"_blockName_\"] {\n        font-size: var(--concorde-text-base);\n      }      \n    }\n  }\n}\n","input_border_color":"#D0D8DB","card_border_color":"#FFFFFF","link_hover_color":"#222222","button_border_radius":4},"last_modified_at":"2026-09-16T09:02:10.736Z"}}