/* stylelint-disable */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* stylelint-enable */
/*
    Hauptfarben

    __Hinweise__:
    - Die Schwarz-Weiß Töne können über die Variable ```__color``` angesprochen werden
    - Dabei ist es vorgesehen die Variable nicht direkt zu verwenden, sondern eine
      neue aus dem jeweiligen Wert zu erzeugen

    $color-interaction - Interaktionsfarbe
    $color-interaction-light - Interaktionsfarbe (light)
    $color-success - Statusfarbe - Erfolg
    $color-success-dark - Statusfarbe - Erfolg (dark)
    $color-warning - Statusfarbe - Warnung
    $color-warning-light - Statusfarbe - Warnung (light)
    $color-error - Statusfarbe - Fehler
    $color-hint - Statusfarbe - Hinweis
    $color-disabled - Deaktiviertes Element
    $color-existingData - Übernommene Daten
    $color-active - Aktives / ausgewähltes Element
    $color-text - Standardschriftfarbe
    $color-inputBorder - Feldrahmen
    $color-formBackground - Hintergrundfarbe 1
    $color-infoBackground - Hintergrundfarbe 2
    $color-app - Appcolor
    $color-app-dark - Appcolor dunkel

    markup:
    <div class="colorWrapper">
         <div class="color--{{modifier_class}}"></div>
    </div>

    Styleguide ###basics.hauptfarben###
    */
:root {
  --color-triple0: #000;
  --color-triple8: #080808;
  --color-triple28: #1c1c1c;
  --color-triple44: #2c2c2c;
  --color-triple48: #303030;
  --color-triple51: #333;
  --color-triple63: #3f3f3f;
  --color-triple72: #484848;
  --color-triple93: #5d5d5d;
  --color-triple102: #666;
  --color-triple114: #727272;
  --color-triple148: #949494;
  --color-triple153: #999;
  --color-triple178: #b2b2b2;
  --color-triple200: #c8c8c8;
  --color-triple204: #ccc;
  --color-triple221: #ddd;
  --color-triple230: #e6e6e6;
  --color-triple242: #f2f2f2;
  --color-triple248: #f8f8f8;
  --color-triple255: #fff;
  --color-app: #2c5198;
  --color-app-dark: #093587;
  --color-interaction: #0056cc;
  --color-interaction-light: #006bff;
  --color-error: #cf4821;
  --color-success: #4bbf92;
  --color-success-dark: #1f8e77;
  --color-warning: #fbb03b;
  --color-warning-light: #feee00;
  --color-hint: #727272;
  --color-disabled: #b2b2b2;
  --color-existingData: #bfdfea;
  --color-existingData-text: #006d97;
  --color-existingData-light: #cfe7f0;
  --color-active: #2c5198;
  --color-active-dark: #093587;
  --color-source-any-foreground: #9f5600;
  --color-source-any-background: #fee7c9;
  --color-source-any-foreground--inverted: #9f5600;
  --color-source-profile-foreground: #45367a;
  --color-source-profile-background: #cac6d9;
  --color-source-profile-foreground--inverted: #45367a;
  --color-source-submission-foreground: #91176c;
  --color-source-submission-background: #dcb9d1;
  --color-source-submission-foreground--inverted: #91176c;
  --color-source-report-foreground: #625510;
  --color-source-report-background: #cfcab0;
  --color-source-report-foreground--inverted: #625510;
  --color-source-receipt-foreground: #135b4b;
  --color-source-receipt-background: #b8cdc8;
  --color-source-receipt-foreground--inverted: #135b4b;
  --color-text: #333;
  --color-text-light: #fff;
  --color-text-dark: #333;
  --color-formBackground: #f2f2f2;
  --color-infoBackground: #f8f8f8;
  --color-bodyBackground: #fff;
  --color-HtmlBackground: #333;
  --color-inputBackground: #fff;
  --color-inputBorder: #c8c8c8;
  --color-shadow: rgba(51,51,51,0.75);
  --color-shadow-light: rgba(0,0,0,0.25);
  --color-backdrop: rgba(51,51,51,0.5);
  --color-skipBackground: #333;
  --color-skipFont: #fff;
  --color-app-eop: #94c502;
  --url-backgroundHeadStartpage: url("../img/startpage-heading_mup.jpg");
  --url-backgroundHeadStartpage--small: url("../img/startpage-heading-small_mup.jpg");
  --url-linkZoom: url("../img/link_zoom--invert-on-transparent_mup.svg");
  --url-linkExtern: url("../img/link_extern--invert-on-transparent_mup.svg");
  --url-linkExternWhite: url("../img/link_extern--white-on-transparent.svg");
  --url-linkMailto: url("../img/link_mailto--invert-on-transparent_mup.svg");
}
body,
button,
input,
optgroup,
select,
textarea {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
h1,
h2,
.interactive,
.interactive-icon,
.table td,
.table-wrap td,
.interactive-help,
.interactive-meta-icon,
.toc__innerItems a,
.breadcrumb__crumb,
.validation-error,
.formItem__fieldItem .formItem__passwordMeterScoreHint h3,
.table-collapse td,
.table-collapse tbody td .table-collapse__cellTitle,
.aside__title,
.aside__subtitle,
.attachments__fontReset,
.definitionBox__key,
.definitionBox--normalFontWeight .definitionBox__value,
.formNavigation--subPages .formNavigation__item,
.header__maintitle--regular,
.panel__itemValue,
.panel__itemMainText,
.interactive-print,
.interactive-receipt,
.interactive-sourced {
  font-weight: 400;
  font-style: normal;
}
em,
.definitionBox__valueExtra,
.header__italic,
.dialog-tax-id .panel__itemDescription,
.dialog-tax-id__helpertext,
.dialog-tax-office__helpertext,
.file-upload__placeholder {
  font-weight: 400;
  font-style: italic;
}
h3,
h6,
._helper-infoEmphasize,
._helper-semiBold,
._helper-buttonGroupTitle,
.figure--emphasize .figure__text,
.figure figcaption,
a,
.toggleBox--light > .toggleBox__head,
.toggleBox--small > .toggleBox__head,
.alignment--borderBox h2,
.alignment__leftGroup--borderBox h2,
.alignment__rightGroup--borderBox h2,
.alignment__centerGroup--borderBox h2,
.interactive--\@inline,
.interactive-icon--\@inline,
.interactive-help--\@inline,
.interactive-meta-icon--\@inline,
.icondefinition__title,
.validationResultsList__page li,
.formItem--login > .formItem__wrapper label,
.formItem__lnr,
.table-collapse tbody .table-collapse__toggleWrapper,
.aside h3,
.aside h4,
.aside h5,
.aside .interactive--link,
.aside h2,
.formNavigation__item,
.formProgressNav__time strong,
.header__autoLogout strong,
.matrix .formItem__legend,
.panel__itemValue,
.panel__itemMainText,
.panel__lnr,
.panel--overview .panel__itemDescription,
.panel--overview .panel__itemContent,
.panel--center .panel__itemHint,
.tags__tag--highlight .tags__tagText,
.tad__title,
.toggleBox-hide-list__head,
.dialog-tax-id__taxIdLnr,
.file-chooser__label,
.file-tree__rootPath,
.file-upload__label,
.global-help__blockTitle,
.global-help__blockTitle .interactive,
.global-help .toggleBox__head,
.interactive-print--\@inline,
.interactive-receipt--\@inline,
.interactive-sourced--\@inline,
.sidebar__content .tabBar__content h3,
.sidebar__content .tabBar__content h4,
.sidebar__content .tabBar__content h5,
.startpage__heroActionText,
.mzb__cell--sourced .mzb__cellContent--edit,
.mzb__cell--nr .mzb__cellContent--edit,
.validationResultsList .toggleBox__head {
  font-weight: 600;
  font-style: normal;
}
h4,
h5,
.formBox--simple .formBox__title,
.toc__list a,
.messageBox__title,
.modal:not(.modal--full) .formItem__legend,
.page-form__treeHeader h2,
.validation-error__label,
.formItem__legend,
.attachments__legend,
.definitionBox__value,
.footer .interactive,
.footer .interactive-icon,
.header__maintitle,
.panel__itemDescription,
.pagination__currentpages,
.toggleList > .toggleList__list > .toggleList__item > .toggleList__header,
.dialog-tax-id__helpertext.-filled,
.global-help:not(.global-help--full) .formItem__legend,
.global-help__block > .interactive,
.global-search:not(.global-search--full) .formItem__legend,
.global-search__itemHead a,
.global-search__itemCrumb,
.login-box__title,
.login-box__title--complete,
.matrix__labelsItem {
  font-weight: 700;
  font-style: normal;
}
/*
Schriftarten und Schriftschnitte

__Verhalten der Schriftart:__
- Hat das Zielsystem die Schriftart bereits vorinstalliert, wird die Schrift nicht vom Server geladen
- In der ```@font-face``` sind die gängigsten Schriftformate in einer festgelegten Reihenfolge deklariert (woff2, woff, ttf)
- Dabei ist die Reihenfolge so gewählt, das die aktuellsten Formate zuerst deklariert sind
- Sobald der Browser ein kompatibles Format erkennt, wird dieses verwendet und die weiteren Formate werden ignoriert
- Die Schriftart besitzt mehrere Schriftschnitte die in verschiedenen Schriftarten eingebunden sind
- Der Schriftschnitt wird nur heruntergeladen sobald er mindestens einmal im CSS Verwendung findet
- __Wichtig__: Dadurch wird die ```font.styl``` in der ```common.styl``` eingebunden. Im Zusammenspiel mit Platzhaltern
   stehen deshalb die CSS Deklarationen im Stylesheet weit oben. Somit wird der Download zeitnah begonnen
- Der jeweilige Schriftschnitt kann im Stylus per ```@extends $placeholder``` verwendet werden
- Die Vorgehensweise ermöglicht das Einsparen von Codezeilen, da die Selektoren kommasepariert verkettet werden

__Schriftgröße:__
- Spezifische Schriftgrößen sind direkt an Überschriften, Formularfelder usw. gesetzt
- Die Standardschriftgröße für alle anderen Elemente sind am body hinterlegt

Sollten weitere Schriftformate oder Schriftschnitte benötigt werden, liegen diese unter:
https://svncvs.mgm-edv.de/repos/elsterportal/trunk/ux/eop_relaunch_2017/komponenten-design/Design

regular - Open Sans regular
italic - Open Sans italic
semibold - Open Sans semibold
bold - Open Sans bold

markup:
<div class="fontWrapper">
    <p class="font--{{modifier_class}}">Open Sans Ää Öö Üü ß µ</p>
</div>

Styleguide ###basics.schriftschnitte###
*/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("fonts/opensans/open-sans-v13-latin-regular.woff2") format('woff2'), url("fonts/opensans/open-sans-v13-latin-regular.woff") format('woff') /* Modern Browsers */;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/opensans/open-sans-v13-latin-italic.woff2") format('woff2'), url("fonts/opensans/open-sans-v13-latin-italic.woff") format('woff') /* Modern Browsers */;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url("fonts/opensans/open-sans-v13-latin-600.woff2") format('woff2'), url("fonts/opensans/open-sans-v13-latin-600.woff") format('woff') /* Modern Browsers */;
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url("fonts/opensans/open-sans-v13-latin-700.woff2") format('woff2'), url("fonts/opensans/open-sans-v13-latin-700.woff") format('woff') /* Modern Browsers */;
}
@keyframes animation_rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
Erzeugt einen einfachen Pfeil nach oben

options - Die Optionen bestehen aus die Größe in PX und die Farbe.
 */
/*
Erzeugt einen einfachen Pfeil nach unten

options - Die Optionen bestehen aus die Größe in PX und die Farbe.
 */
/*
Erzeugt einen einfachen Pfeil nach rechts

options - Die Optionen bestehen aus die Größe in PX und die Farbe.
 */
/*
Erzeugt einen einfachen Pfeil nach links

options - Die Optionen bestehen aus die Größe in PX und die Farbe.
 */
/*
Überschriften

Folgende Überschriften werden im Portal verwendet

Um eine Überschrift besonders hervozuheben, existiert die Klassse .headlineEmphasize. Diese setzt unterhalb der Überschrift eine Border in der entsprechenden App-Farbe.

markup:
<h1>Überschrift 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.</p>
<h2>Überschrift 2</h2>
<p>Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.</p><p></p>
<h3>Überschrift 3</h3>
<p>Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.</p><p></p>
<h4>Überschrift 4</h4>
<p>Phasellus interdum massa ante, ac placerat felis ultricies at. Fusce vulputate, odio sed convallis laoreet, tortor orci venenatis massa, a placerat ligula nisl vitae felis. In pellentesque ornare eleifend. Suspendisse potenti. </p><p></p>
<h5>Überschrift 5</h5>
<p>Quisque eget mauris enim.</p>
<h2 class="headlineEmphasize">Hervorgehobenen Überschrift</h2>


Styleguide ###basics.ueberschriften###
*/
* {
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
  background-color: var(--color-HtmlBackground);
}
body {
  color: var(--color-text);
  background-color: var(--color-bodyBackground);
}
body {
  line-height: 1.35;
}
h1 {
  line-height: 1.35;
}
h2,
.panel__itemValue,
.panel__itemMainText {
  line-height: 1.35;
}
h3 {
  line-height: 1.35;
}
h4 {
  line-height: 1.35;
}
h5 {
  line-height: 1.35;
}
p {
  line-height: 1.35;
}
ul {
  line-height: 1.35;
}
button {
  line-height: 1.35;
}
input {
  line-height: 1.35;
}
optgroup {
  line-height: 1.35;
}
select {
  line-height: 1.35;
}
textarea {
  line-height: 1.35;
}
h1 {
  font-size: 1.25rem;
}
h2,
.panel__itemValue,
.panel__itemMainText {
  font-size: 1.12rem;
}
h3 {
  font-size: 1rem;
}
h4 {
  font-size: 1rem;
}
h5 {
  font-size: 0.87rem;
}
h6 {
  font-size: 0.87rem;
}
input {
  font-size: 1rem;
}
select {
  font-size: 1rem;
}
datalist {
  font-size: 1rem;
}
label,
.dialog-tax-id__taxIdLabel,
.dialog-tax-id .panel__itemKey {
  font-size: 0.75rem;
}
body {
  font-size: 0.87rem;
}
h1 {
  margin-top: 1.62rem;
}
h2,
.panel__itemValue,
.panel__itemMainText {
  margin-top: 1.5rem;
}
h3 {
  margin-top: 1.37rem;
}
h4 {
  margin-top: 1.12rem;
}
h5 {
  margin-top: 1rem;
}
h6 {
  margin-top: 0.87rem;
}
p {
  margin-top: 0rem;
}
li {
  margin-top: 0rem;
}
h1 {
  margin-bottom: 0.75rem;
}
h2,
.panel__itemValue,
.panel__itemMainText {
  margin-bottom: 0.5rem;
}
h3 {
  margin-bottom: 0.5rem;
}
h4 {
  margin-bottom: 0.5rem;
}
h5 {
  margin-bottom: 0.25rem;
}
h6 {
  margin-bottom: 0.25rem;
}
p {
  margin-bottom: 0.5rem;
}
li {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 60rem), print {
  h1 {
    font-size: 1.87rem;
  }
  h2,
  .panel__itemValue,
  .panel__itemMainText {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  h4 {
    font-size: 1.12rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 1rem;
  }
  label,
  .dialog-tax-id__taxIdLabel,
  .dialog-tax-id .panel__itemKey {
    font-size: 0.87rem;
  }
  body {
    font-size: 1rem;
  }
  h1 {
    margin-top: 2.62rem;
  }
  h2,
  .panel__itemValue,
  .panel__itemMainText {
    margin-top: 2rem;
  }
  h3 {
    margin-top: 1.75rem;
  }
  h4 {
    margin-top: 1.12rem;
  }
  h5 {
    margin-top: 1rem;
  }
  h6 {
    margin-top: 1rem;
  }
  p {
    margin-top: 0rem;
  }
  li {
    margin-top: 0rem;
  }
  h1 {
    margin-bottom: 1rem;
  }
  h2,
  .panel__itemValue,
  .panel__itemMainText {
    margin-bottom: 0.5rem;
  }
  h3 {
    margin-bottom: 0.5rem;
  }
  h4 {
    margin-bottom: 0.5rem;
  }
  h5 {
    margin-bottom: 0.25rem;
  }
  h6 {
    margin-bottom: 0.25rem;
  }
  p {
    margin-bottom: 0.5rem;
  }
  li {
    margin-bottom: 0.5rem;
  }
}
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
textarea {
  resize: vertical;
}
.headlineEmphasize {
  padding-bottom: 0.25rem;
  border-bottom-width: 0.25rem;
  border-bottom-style: solid;
}
abbr[title] {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  text-decoration: none;
}
[tabindex="-1"] {
  outline: none;
}
.dark.firefox {
  scrollbar-color: #646464 #3e3e3e;
}
.dark.windows.edge.blink ::-webkit-scrollbar,
.dark.linux.edge.blink ::-webkit-scrollbar,
.dark.windows.chrome ::-webkit-scrollbar,
.dark.linux.chrome ::-webkit-scrollbar {
  width: 17px;
  height: 17px;
  background: #3e3e3e;
}
.dark.windows.edge.blink ::-webkit-scrollbar-thumb,
.dark.linux.edge.blink ::-webkit-scrollbar-thumb,
.dark.windows.chrome ::-webkit-scrollbar-thumb,
.dark.linux.chrome ::-webkit-scrollbar-thumb {
  background: #646464;
  border: 2px solid #3e3e3e;
}
.dark.windows.edge.blink ::-webkit-scrollbar-thumb:hover,
.dark.linux.edge.blink ::-webkit-scrollbar-thumb:hover,
.dark.windows.chrome ::-webkit-scrollbar-thumb:hover,
.dark.linux.chrome ::-webkit-scrollbar-thumb:hover {
  background: #8d8d8d;
}
.dark.windows.edge.blink ::-webkit-scrollbar-thumb:active,
.dark.linux.edge.blink ::-webkit-scrollbar-thumb:active,
.dark.windows.chrome ::-webkit-scrollbar-thumb:active,
.dark.linux.chrome ::-webkit-scrollbar-thumb:active {
  background: #b6b6b6;
}
.devmode,
.analysemodus,
.hauptverwaltermode {
  background: #c66;
  color: #fff;
  padding: 0.5rem 2rem 0.25rem;
  font-size: 0.75rem;
  border-top: 1px dotted #fff;
}
.no-js .accordion .accordion__head {
  position: relative;
}
.no-js .accordion .accordion__headButton {
  padding-left: 21px;
}
.no-js .accordion .accordion__headButton .icon {
  display: none;
}
.no-js .accordion .accordion__headInput {
  flex-shrink: 0;
  display: inline-block;
  position: absolute;
  margin-left: 0;
}
.no-js .accordion.accordion--simple .accordion__headButton,
.no-js .accordion.accordion--compact .accordion__headButton,
.no-js .accordion.accordion--primary .accordion__headButton {
  padding-left: 25px;
}
.no-js .accordion .accordion__item--opened .accordion__headButton {
  cursor: text;
  color: var(--color-app-dark);
}
.no-js .accordion .accordion__item--opened .accordion__headButton:focus {
  outline: none;
}
.no-js .accordion .accordion__item--opened .accordion__headButton:focus,
.no-js .accordion .accordion__item--opened .accordion__headButton:hover {
  text-decoration: none;
}
.no-js .accordion.accordion--compact .accordion__item--opened {
  border: 1px solid var(--color-app);
}
.no-js .accordion.accordion--primary .accordion__item--opened .accordion__head {
  background-color: var(--color-app-dark);
}
.no-js .accordion.accordion--primary .accordion__item--opened .accordion__headButton {
  color: var(--color-text-light);
}
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment {
  display: block;
  width: auto;
}
_:-ms-fullscreen .interactive-icon__text,
:root.no-js .alignment .interactive-icon__text {
  max-width: 368px;
}
_:-ms-fullscreen,
:root.ie .alignment {
  display: block;
  width: auto;
}
_:-ms-fullscreen .interactive-icon__text,
:root.ie .alignment .interactive-icon__text {
  max-width: 368px;
}
/* stylelint-enable */
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment--iconLeft {
  display: flex;
}
_:-ms-fullscreen,
:root.ie .alignment--iconLeft {
  display: flex;
}
/* stylelint-enable */
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment--iconRight {
  display: flex;
}
_:-ms-fullscreen,
:root.ie .alignment--iconRight {
  display: flex;
}
/* stylelint-enable */
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment__leftGroup {
  display: block;
}
_:-ms-fullscreen,
:root.ie .alignment__leftGroup {
  display: block;
}
/* stylelint-enable */
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment__centerGroup {
  display: block;
}
_:-ms-fullscreen,
:root.ie .alignment__centerGroup {
  display: block;
}
/* stylelint-enable */
/* stylelint-disable */
_:-ms-fullscreen,
:root.no-js .alignment__rightGroup {
  display: block;
}
_:-ms-fullscreen,
:root.ie .alignment__rightGroup {
  display: block;
}
/* stylelint-enable */
.ie .definitionBox {
  max-width: 90vw;
}
.ie .footer a[href^="http://"] .footer__certificateItemText,
.ie .footer .interactive[href^="http://"] .footer__certificateItemText,
.ie .footer a[href^="https://"] .footer__certificateItemText,
.ie .footer .interactive[href^="https://"] .footer__certificateItemText {
  align-items: inherit;
}
.ie .footer a[href^="http://"] .footer__certificateItemText span[lang]::after,
.ie .footer .interactive[href^="http://"] .footer__certificateItemText span[lang]::after,
.ie .footer a[href^="https://"] .footer__certificateItemText span[lang]::after,
.ie .footer .interactive[href^="https://"] .footer__certificateItemText span[lang]::after {
  content: " ";
}
.no-js .formItem__metaBarComputation,
.no-js .formItem__metaBarCarryOver {
  display: none;
}
.ie .formItem__field--select {
  padding: 5px 6px;
}
.ie .formItem__field--textarea----valid {
  box-shadow: none !important;
}
.ie .formItem__wrapper {
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: 100%;
}
.ie .formItem__line {
  flex-basis: 100%;
}
.ie .formItem .validationError {
  flex-basis: 100%;
}
.ie .formItem--layout_0-100 .ie__line {
  flex-basis: 96%;
}
.ie .formProgressNav {
  align-items: flex-end;
}
.ie .header__heading {
  padding-top: 4px;
}
.no-js .header {
  height: auto;
}
.no-js .header__heading .no-js__navOpen {
  display: none;
}
.no-js .header__content {
  display: flex;
  position: static;
  box-shadow: none;
}
.no-js .header__content > * {
  padding: 0;
  border: 0;
  margin-right: 8px;
}
.no-js .header__content .iframe {
  display: none;
}
.no-js .header__toggle {
  display: none;
}
.no-js .icondefinition__item--hidden {
  display: block;
}
.no-js .icondefinition .interactive {
  display: none;
}
.ie .interactive[href^="http://"],
.ie .interactive-icon[href^="http://"],
.ie .interactive-help[href^="http://"],
.ie .interactive-meta-icon[href^="http://"],
.ie .interactive-print[href^="http://"],
.ie .interactive-receipt[href^="http://"],
.ie .interactive-sourced[href^="http://"],
.ie .interactive[href^="https://"],
.ie .interactive-icon[href^="https://"],
.ie .interactive-help[href^="https://"],
.ie .interactive-meta-icon[href^="https://"],
.ie .interactive-print[href^="https://"],
.ie .interactive-receipt[href^="https://"],
.ie .interactive-sourced[href^="https://"],
.ie .interactive[href^="mailto:"],
.ie .interactive-icon[href^="mailto:"],
.ie .interactive-help[href^="mailto:"],
.ie .interactive-meta-icon[href^="mailto:"],
.ie .interactive-print[href^="mailto:"],
.ie .interactive-receipt[href^="mailto:"],
.ie .interactive-sourced[href^="mailto:"] {
  width: auto;
}
.ie .page-form__treeWrapper .page-form__tree {
  box-shadow: 2px 1px 2px 0 rgba(51,51,51,0.75);
}
.ie .page-form__treeWrapper .page-form__tree::before {
  display: none;
}
.ie .page-form__content {
  box-shadow: -2px 1px 2px 0 rgba(51,51,51,0.75);
}
.ie .page-form__content::before {
  display: none;
}
.no-js .page-default__body {
  flex-wrap: wrap;
}
.no-js .page-default__menu {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
}
@media screen and (min-width: 1280px) {
  .no-js .page-default__body {
    flex-wrap: nowrap;
  }
  .no-js .page-default__menu {
    max-width: 320px;
  }
}
.no-js .page-form__root {
  flex-direction: column;
}
.no-js .page-form__treeWrapper,
.no-js .page-form__contentWrapper {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}
.no-js .page-form__tree {
  min-width: 0;
  width: 100%;
}
.ie .matrix .formItem__labelItem .interactive-help {
  margin-bottom: 0;
}
.ie .messageBox--loading .icon__svg::before {
  content: url("../img/star_white.png");
  margin: 0;
}
.ie .modal__wrapper,
.ie .global-help__wrapper,
.ie .global-search__wrapper {
  max-height: none;
}
.no-js .modal:target,
.no-js .global-help:target,
.no-js .global-search:target,
.no-js .modal--openOnLoad,
.no-js .global-help--openOnLoad,
.no-js .global-search--openOnLoad {
  display: flex;
}
.no-js .modal__close,
.no-js .global-help__close,
.no-js .global-search__close {
  display: none;
}
.ie .mzb.mzb--separate-collapse [data-mzb-row="readonly"] td {
  box-shadow: none !important;
}
.ie .mzb [data-mzb-row="edit"] td {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 0 -8px 0 0 var(--color-app);
}
.ie .mzb [data-mzb-row="edit"] td:first-child {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), -8px 8px 0 0 var(--color-app), -8px -8px 0 0 var(--color-app);
}
.ie .mzb [data-mzb-row="edit"] td:last-child {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 8px 8px 0 0 var(--color-app), 8px -8px 0 0 var(--color-app);
}
.ie .mzb [data-mzb-row="edit"] td.mzb__cell--combined {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 8px 8px 0 0 var(--color-app), 8px -8px 0 0 var(--color-app), -8px 8px 0 0 var(--color-app), -8px -8px 0 0 var(--color-app);
}
.ie .mzb [data-mzb-row="readonly"].mzb__row--error {
  outline: none;
  box-shadow: 0 0 0 8px var(--color-error);
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error {
  box-shadow: none;
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td {
  box-shadow: 0 4px 0 var(--color-error), 0 -4px 0 var(--color-error), 0 -4px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td:first-child {
  box-shadow: 0 4px 0 var(--color-error), 0 -4px 0 var(--color-error), -4px 4px 0 0 var(--color-error), -4px -4px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td:last-child {
  box-shadow: 0 4px 0 var(--color-error), 0 -4px 0 var(--color-error), 4px 4px 0 0 var(--color-error), 4px -4px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td.mzb__cell--combined {
  box-shadow: 0 4px 0 var(--color-error), 0 -4px 0 var(--color-error), 4px 4px 0 0 var(--color-error), 4px -4px 0 0 var(--color-error), -4px 4px 0 0 var(--color-error), -4px -4px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate-collapse [data-mzb-row="readonly"].mzb__row--error {
  outline: 4px solid var(--color-error);
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 0 -8px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td:first-child {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), -8px 8px 0 0 var(--color-error), -8px -8px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td:last-child {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 8px 8px 0 0 var(--color-error), 8px -8px 0 0 var(--color-error);
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td.mzb__cell--combined {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 8px 8px 0 0 var(--color-error), 8px -8px 0 0 var(--color-error), -8px 8px 0 0 var(--color-error), -8px -8px 0 0 var(--color-error);
}
.ie .mzb[data-mzb-entries="0"] .mzb__addEntry:not(.mzb__addEntry--edit) td {
  box-shadow: none !important;
}
.ie .mzb--separate .mzb__addEntry--empty td {
  box-shadow: 0 4px 0 var(--color-app), 0 -4px 0 var(--color-app), 0 -4px 0 0 var(--color-app);
}
.ie .mzb--separate .mzb__addEntry--empty td:first-child {
  box-shadow: 0 4px 0 var(--color-app), 0 -4px 0 var(--color-app), -4px 4px 0 0 var(--color-app), -4px -4px 0 0 var(--color-app);
}
.ie .mzb--separate .mzb__addEntry--empty td:last-child {
  box-shadow: 0 4px 0 var(--color-app), 0 -4px 0 var(--color-app), 4px 4px 0 0 var(--color-app), 4px -4px 0 0 var(--color-app);
}
.ie .mzb--separate .mzb__addEntry--empty td.mzb__cell--combined {
  box-shadow: 0 4px 0 var(--color-app), 0 -4px 0 var(--color-app), 4px 4px 0 0 var(--color-app), 4px -4px 0 0 var(--color-app), -4px 4px 0 0 var(--color-app), -4px -4px 0 0 var(--color-app);
}
.no-js .mzb tr.mzb__addEntry {
  display: table-row;
}
.no-js .mzb [data-mzb-row="edit"] td {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 0 -8px 0 0 var(--color-app);
}
.no-js .mzb [data-mzb-row="edit"] td:first-child {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), -8px 8px 0 0 var(--color-app), -8px -8px 0 0 var(--color-app);
}
.no-js .mzb [data-mzb-row="edit"] td:last-child {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 8px 8px 0 0 var(--color-app), 8px -8px 0 0 var(--color-app);
}
.no-js .mzb [data-mzb-row="edit"] td.mzb__cell--combined {
  box-shadow: 0 8px 0 var(--color-app), 0 -8px 0 var(--color-app), 8px 8px 0 0 var(--color-app), 8px -8px 0 0 var(--color-app), -8px 8px 0 0 var(--color-app), -8px -8px 0 0 var(--color-app);
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 0 -8px 0 0 var(--color-error);
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td:first-child {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), -8px 8px 0 0 var(--color-error), -8px -8px 0 0 var(--color-error);
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td:last-child {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 8px 8px 0 0 var(--color-error), 8px -8px 0 0 var(--color-error);
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td.mzb__cell--combined {
  box-shadow: 0 8px 0 var(--color-error), 0 -8px 0 var(--color-error), 8px 8px 0 0 var(--color-error), 8px -8px 0 0 var(--color-error), -8px 8px 0 0 var(--color-error), -8px -8px 0 0 var(--color-error);
}
.no-js .mzb__footerAddBtn {
  display: none;
}
.no-js .mzb--separate .mzb__footerAddBtn {
  display: block;
}
.no-js .nav {
  position: static;
  background: none;
}
.no-js .nav__triggerstate {
  display: none;
}
.no-js .nav__wrapper {
  visibility: visible;
  transform: none;
}
.no-js .nav__item[data-selector="interactive.nav.elsterwebLogout"] {
  display: none;
}
.ie .panel--layout_0_100 .panel__item,
.ie .panel--layout_0_100 .panel__itemContent {
  display: inline-block;
}
.no-js .tabBar----active,
.no-js .tabbarCollapse----active,
.no-js .tabbar-collapse-fetch----active {
  list-style: none;
  display: inline-block;
  position: relative;
  border: 1px solid var(--color-triple221);
  margin-right: 4px;
}
.no-js .tabBar----active .interactive,
.no-js .tabbarCollapse----active .interactive,
.no-js .tabbar-collapse-fetch----active .interactive {
  background-color: var(--color-triple248);
  border-radius: 0;
  padding: 4px 8px;
  color: var(--color-interaction);
}
.no-js .tabBar----active .interactive:hover,
.no-js .tabbarCollapse----active .interactive:hover,
.no-js .tabbar-collapse-fetch----active .interactive:hover {
  background-color: var(--color-triple230);
  text-decoration: underline;
}
.no-js .tabBar----active .interactive:focus,
.no-js .tabbarCollapse----active .interactive:focus,
.no-js .tabbar-collapse-fetch----active .interactive:focus {
  text-decoration: underline;
}
.no-js .tabbarCollapse__head,
.no-js .tabbar-collapse-fetch__head {
  display: block;
  border: 1px solid var(--color-triple221);
}
.no-js .tabbarCollapse__head .interactive,
.no-js .tabbar-collapse-fetch__head .interactive {
  background: var(--color-bodyBackground);
}
.no-js .tabbarCollapse----active .interactive,
.no-js .tabbar-collapse-fetch----active .interactive {
  color: var(--color-interaction);
  padding-top: 4px;
  padding-bottom: 4px;
}
.ie .table-wrap td .interactive[href^="http://"],
.ie .table-wrap td .interactive[href^="https://"] {
  display: inline-flex;
}
.ie .table-collapse td .alignment--iconLeft > *:last-child {
  flex: 0 1 auto;
}
.ie .table-collapse:not(.table-collapse--fixed) ._helper-hyphens {
  word-break: break-all;
}
.no-js .table-collapse .table-collapse__row--hidden,
.no-js .table-collapse .table-collapse__row--details {
  display: block;
}
.no-js .table-collapse .table-collapse__toggleWrapper {
  display: none;
}
.ie .tile .interactive[href^="http://"],
.ie .tile-deluxe .interactive[href^="http://"],
.ie .tile a[href^="http://"],
.ie .tile-deluxe a[href^="http://"],
.ie .tile .interactive[href^="https://"],
.ie .tile-deluxe .interactive[href^="https://"],
.ie .tile a[href^="https://"],
.ie .tile-deluxe a[href^="https://"] {
  width: 100%;
}
.ie .timeline__triggerstate {
  cursor: default;
}
.ie .timeline--opened .timeline__groups {
  cursor: default;
}
.no-js .timeline {
  background: transparent;
  width: 100%;
}
.no-js .timeline__wrapper {
  box-shadow: none;
}
.no-js .timeline__triggerstate {
  display: none;
}
.no-js .timeline__text {
  font-size: 16px;
}
.no-js .timeline__list--dl .no-js__text {
  display: inline;
}
.no-js .toggleBox--closed.toggleBox--compact {
  border-color: var(--color-interaction);
}
.no-js .toggleBox--closed .toggleBox__content {
  display: block;
}
.no-js .toggleBox--compact .toggleBox__headButton {
  outline: none;
}
.no-js .toggleBox-hide-list__head {
  display: none;
}
.no-js .toggleBox-hide-list__content {
  display: block;
}
.no-js .toggleBox-hide-list--active .toggleBox-hide-list__content,
.no-js .toggleBox-hide-list--idle .toggleBox-hide-list__content {
  display: block;
}
.no-js .toggleList__list {
  display: block;
}
.no-js .toggleList__item--list .toggleList__header:hover {
  text-decoration: none;
  cursor: default;
}
.no-js .toggleList .icon {
  display: none;
}
.toggleList [data-transform-toggle-list] {
  display: flex;
}
.no-js .treeView__item--heading:hover {
  background-color: inherit;
  text-decoration: none;
}
.no-js .treeView__innerItems {
  display: block;
}
.ie .validation-error {
  flex-basis: 100%;
}
.ie .validation-error--mzb {
  outline: 2px solid var(--color-error);
}
.no-js .videoPlayer video {
  visibility: visible;
  max-width: 100%;
}
.no-js .videoPlayer__videoWrapper {
  border: initial;
}
.no-js .videoPlayer__videoWrapper:hover .videoPlayer__videoWrapper__controls {
  display: none;
}
.no-js .file-chooser .file-chooser__inputSubmit {
  display: none;
}
.no-js .file-upload .interactive,
.no-js .file-upload__inputSubmit,
.no-js .file-upload__fileName {
  display: none;
}
.no-js .file-upload__inputFile {
  display: inline;
}
.ie .global-help__block .interactive {
  display: inline !important;
}
.ie .global-help__listItem .interactive-icon--\@inline {
  display: inline;
}
.no-js .interactive-print {
  display: none;
}
.no-js ._helper-hiddenNoScript {
  display: none;
}
.no-js ._helper-hiddenScript {
  display: block !important;
}
.no-js ._helper-hiddenScript--flex {
  display: flex !important;
}
.no-js .modal_nojs {
  max-width: 866px;
  margin: 0 auto;
}
.no-js .modal_nojs .global-help,
.no-js .modal_nojs .global-search {
  position: static;
  display: block;
  background: none;
  height: auto;
  z-index: auto;
}
.no-js .modal_nojs.page-default__body {
  border: none;
}
.ie .startpage-account .alignment__item.width100 {
  flex-basis: 100%;
}
.ie wbr::after {
  content: '\00200B';
}
.ie input::-ms-clear {
  display: none;
}
@media screen and (min-width: 480px) {
  /* stylelint-disable */
  _:-ms-fullscreen,
  :root.no-js .alignment {
    display: flex;
  }
  _:-ms-fullscreen .interactive-icon__text,
  :root.no-js .alignment .interactive-icon__text {
    max-width: 176px;
  }
  _:-ms-fullscreen,
  :root.ie .alignment {
    display: flex;
  }
  _:-ms-fullscreen .interactive-icon__text,
  :root.ie .alignment .interactive-icon__text {
    max-width: 176px;
  }
  /* stylelint-enable */
  /* stylelint-disable */
  _:-ms-fullscreen,
  :root.no-js .alignment__leftGroup {
    display: flex;
  }
  _:-ms-fullscreen,
  :root.ie .alignment__leftGroup {
    display: flex;
  }
  /* stylelint-enable */
  /* stylelint-disable */
  _:-ms-fullscreen,
  :root.no-js .alignment__centerGroup {
    display: flex;
  }
  _:-ms-fullscreen,
  :root.ie .alignment__centerGroup {
    display: flex;
  }
  /* stylelint-enable */
  /* stylelint-disable */
  _:-ms-fullscreen,
  :root.no-js .alignment__rightGroup {
    display: flex;
  }
  _:-ms-fullscreen,
  :root.ie .alignment__rightGroup {
    display: flex;
  }
  /* stylelint-enable */
  /* stylelint-disable */
  _:-ms-fullscreen,
  :root.no-js .alignment img {
    width: 100%;
  }
  _:-ms-fullscreen,
  :root.ie .alignment img {
    width: 100%;
  }
  /* stylelint-enable */
  .no-js .header .iframe {
    width: 302px;
  }
  .no-js .header----loggedIn {
    width: 302px;
  }
  .ie .searchField__submit .interactive-icon {
    display: block;
  }
  .ie .searchField--header .searchField__submit .interactive-icon--primary {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .no-js .accordion .accordion__head {
    display: flex;
    align-items: baseline;
  }
  .no-js .accordion .accordion__headInput {
    left: 2px;
  }
  .no-js .accordion .accordion__headButton {
    padding-left: 2.5%;
    flex-basis: 100%;
  }
  .no-js .accordion.accordion--simple .accordion__headInput,
  .no-js .accordion.accordion--primary .accordion__headInput {
    top: 12px;
    left: 1%;
  }
  .no-js .accordion.accordion--simple .accordion__headButton,
  .no-js .accordion.accordion--primary .accordion__headButton {
    padding-left: 3%;
  }
  .no-js .accordion.accordion--compact .accordion__headInput {
    top: 22px;
    left: 2.5%;
  }
  .no-js .accordion.accordion--compact .accordion__headButton {
    padding-left: 5%;
  }
  /* stylelint-disable */
  _:-ms-fullscreen .interactive-icon__text,
  :root.no-js .alignment .interactive-icon__text {
    max-width: 368px;
  }
  _:-ms-fullscreen .interactive-icon__text,
  :root.ie .alignment .interactive-icon__text {
    max-width: 368px;
  }
  /* stylelint-enable */
  .ie .definitionBox {
    max-width: none;
  }
  .no-js .table-collapse .table-collapse__row--hidden {
    display: table-row;
  }
}
@media screen and (min-width: 1280px) {
  .no-js .header .iframe {
    width: 300px;
  }
  .no-js .header----loggedIn {
    width: 264px;
  }
  .ie .header__userName {
    height: 40px;
  }
  .ie .header__userName .interactive-icon {
    display: inline-block;
  }
  .ie .header .darkmodeToggle .interactive-icon {
    display: block;
  }
}
@media screen and (min-width: 1680px) {
  .ie .header__search {
    margin-bottom: 1px;
  }
  .ie .searchField--header .searchField__submit .interactive-icon--primary {
    display: block;
  }
}
@media screen and (max-width: 959px) {
  .ie .formItem .formItem__wrapper {
    flex-basis: auto;
  }
  .ie .mzb [data-mzb-row="edit"] td {
    box-shadow: none !important;
  }
  .ie .mzb [data-mzb-row="readonly"].mzb__row--error {
    outline: 4px solid var(--color-error);
  }
  .ie .mzb.mzb--separate [data-mzb-row="readonly"] td {
    box-shadow: none !important;
  }
  .ie .mzb--inline .formItem__wrapper {
    flex-direction: row;
  }
  .ie .panel__itemContent {
    display: inline;
  }
}
.ie .header {
  border-bottom: 1px solid #94c502;
}
.ie .header__maintitle {
  color: #94c502;
}
.ie .footer {
  border-top: 1px solid #94c502;
}
.ie .page-default__body,
.ie .messageBox,
.ie .tile,
.ie .tile-deluxe,
.ie .file-upload__fileName,
.ie .login-box,
.ie .accordion__item,
.ie .toggleBox {
  border: 1px solid #ddd;
}
.ie .table-collapse th,
.ie .table-collapse td {
  border-bottom: 1px solid #ddd;
}
.ie .nav__wrapper {
  border-right: 1px solid #ddd;
}
.ie .nav__wrapper > .nav__list {
  border-bottom: 1px solid #ddd;
}
.ie .nav__item--subnav {
  border-top: 1px solid #ddd;
}
.ie .page-default__aside,
.ie .sidebar,
.ie .formItem,
.ie .mzb,
.ie .attachments th,
.ie .attachments td,
.ie .panel__item,
.ie .global-help .alignment__item,
.ie .timeline,
.ie .timeline__wrapper {
  background-color: #f8f8f8;
}
.ie .page-form__tree {
  border-right: 1px solid #ddd;
  background-color: #f8f8f8;
}
.ie .page-form__content {
  border-left: 1px solid #ddd;
  background-color: #fff;
}
.ie .mzb [data-mzb-row],
.ie .autoSuggest__suggestions,
.ie .nav,
.ie .header__content {
  background-color: #fff;
}
.ie .modal,
.ie .global-help {
  background-color: rgba(51,51,51,0.5);
}
.ie .modal__wrapper,
.ie .global-help__wrapper {
  background-color: #fff;
}
.ie .interactive,
.ie .interactive-icon {
  color: #006d97;
}
.ie .interactive--primary,
.ie .interactive-icon--primary,
.ie .interactive--invert,
.ie .interactive-icon--invert {
  border: 1px solid #006d97;
}
.ie .interactive--primary,
.ie .interactive-icon--primary {
  background-color: #007fad;
  color: #fff;
}
/*
Hilfs-CSS-Klassen

Dieses Modul umfasst häufig verwendete Hilfsklassen, welche im gesamten Portal (EOP, BOP) verwendet werdnen können.
Es stehen folgende Modifier zur Verfügung welche dann zusammengesetzt werden z.B. zu *._helper-invisible* :

invisible - Elemente werden versteckt (trotzdem gerendert) notwendig für Screenreader
visible - Elemente werden sichtbar
hidden - Elemente werden nicht gerendert (via Display none)
advice - Hinweistexte
error - Fehlertexte (TODO: Design)
float--right - Positionierung Rechts via float (TODO: Positionierung via flex)
float--left - Positionierung Links via float (TODO: Positionierung via flex)
italic - kursiver Text
empty - kursiv Text für Leer-Hinweise wie z.B. keine Einträge vorhanden
fixed - Elemente mit fixer Position
center - Positionierung zentriert
right - Positionierung rechts
marginLeft-8 - Außenabstand nach links 8px
marginLeft-16 - Außenabstand nach links 16px
marginTop - Außenabstand nach oben
marginTop-12 - Außenabstand nach oben 12px
marginTop-0 - kein Außenabstand nach oben
marginBottom - Außenabstand nach unten
marginBottom-8 - Außenabstand nach unten 8px
marginBottom-0 - kein Außenabstand nach unten
iconLeft - die Größe des linken Icons verändert sich nicht
infoEmpty - Infotexte: zentriert, kursiv und grauer Hintergrund
infoEmphasize - zentrierter Text mit durch größerer Schriftgröße hervorgehobenen Text auf hellgrauem Hintergrund
noBackground - entfernt die Hintergrundfarbe
subTitle - Teilüberschrift, Text wird größer und erzeugt einen Zeilenumbruch
existingData - Hintergrund-Farbe Hellblau
semiBold - hervorgehobener Text
hyphens - Wenn der Text zu lang ist für die Zeile, wird das letzte Wort mit Bindestrich getrennt. Fallback = break-word (das zu lange Wort wird, ohne Bindestrich, getrennt)
breakAll - Wenn der Text zu lang ist für die Zeile, wird das letzte Wort getrennt in die nächste Zeile weiter geschrieben (ohne Bindestrich)
hiddenScript - Text (Script) wird nicht gerendert (via display:none)
hiddenScript--flex - Text (Script) wird nicht gerendert (via display:none)
maximize - die Schriftgröße wird um 25 Prozent für die meisten Elemente vergrößert
hiddenNoScript - Inhalt (Script) wird verdeckt (via display:none)

markup:
<div class="_helper-{{modifier_class}}">_helper-{{modifier_class}}</div>

Styleguide ###basics.helper###
*/
._helper-advice,
._helper-infoEmpty,
._helper-infoEmphasize,
.filter__noResults {
  background: var(--color-infoBackground);
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
}
._helper-error {
  color: var(--color-error);
}
._helper-float--right {
  float: right;
}
._helper-float--left {
  float: left;
}
._helper-invisible,
.interactive-icon--only .interactive-icon__text,
.interactive-help--only .interactive-help__text,
.interactive-help__text,
.interactive-meta-icon--only .interactive-meta-icon__text,
.formItem__lnrDescription,
.formItem__fieldItem .interactive-meta-icon__text,
.attachments__labelGroup--hidden,
.searchField__label,
.searchField--header .interactive-icon__text,
.searchField--iconOnly .interactive-icon__text,
.filter__label,
.matrix .formItem__fieldItem .interactive-meta-icon__text,
.interactive-receipt--only .interactive-receipt__text,
.interactive-sourced--only .interactive-sourced__text,
.interactive-sourced__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
._helper-visible,
.formItem__fieldItem--size-xxl .interactive-meta-icon__text,
.formItem__fieldItem--size-xxxl .interactive-meta-icon__text,
.formItem__fieldItem--size-xxxxl .interactive-meta-icon__text,
.formItem__fieldItem--size-xxxxxl .interactive-meta-icon__text {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto;
  overflow: visible;
}
._helper-hidden {
  display: none !important;
}
._helper-italic,
._helper-empty,
._helper-infoEmpty,
.filter__noResults {
  font-style: italic;
}
._helper-fixed {
  position: fixed;
  left: 0;
  right: 0;
}
._helper-center,
._helper-infoEmpty,
._helper-infoEmphasize,
.filter__noResults,
.panel--center .panel__item {
  text-align: center;
}
._helper-right {
  text-align: right;
}
._helper-marginLeft-8,
._helper-margin-8 {
  margin-left: 0.5rem;
}
._helper-marginLeft-16 {
  margin-left: 1rem;
}
._helper-marginTop {
  margin-top: 1rem;
}
._helper-marginTop-8,
._helper-margin-8 {
  margin-top: 0.5rem;
}
._helper-marginTop-12 {
  margin-top: 0.75rem;
}
._helper-marginTop-0 {
  margin-top: 0;
}
._helper-marginRight-8,
._helper-margin-8 {
  margin-right: 0.5rem;
}
._helper-marginBottom {
  margin-bottom: 1rem;
}
._helper-marginBottom-8,
._helper-margin-8 {
  margin-bottom: 0.5rem;
}
._helper-marginBottom-0 {
  margin-bottom: 0 !important;
}
._helper-padding-8 {
  padding: 0.5rem;
}
._helper-iconLeft {
  display: flex;
}
._helper-iconLeft .icon {
  flex-shrink: 0;
}
._helper-iconLeft > *:last-child {
  flex: 1 1 100%;
}
._helper-infoEmphasize {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}
._helper-subTitle {
  display: block;
  font-size: 1rem;
}
._helper-existingData {
  background-color: var(--color-existingData-light);
  border-bottom: 1px dashed var(--color-existingData-light);
}
._helper-noBackground {
  background: transparent;
}
._helper-hyphens {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  ._helper-hyphens {
    word-break: break-word;
  }
}
.android.chrome ._helper-hyphens {
  word-break: break-word;
}
._helper-hiddenScript,
._helper-hiddenScript--flex {
  display: none !important;
}
._helper-breakAll {
  word-break: break-all;
}
._helper-maximize * {
  font-size: 1.25rem;
}
._helper-maximize span > .accordion__title,
._helper-maximize tr {
  font-size: 1.25em;
}
._helper-maximize span > .accordion__title *,
._helper-maximize tr * {
  font-size: 1em !important;
}
._helper-maximize h1 {
  font-size: 2.8rem;
}
._helper-maximize h2 {
  font-size: 1.9rem;
}
._helper-maximize h3 {
  font-size: 1.6rem;
}
._helper-maximize h4 {
  font-size: 1.45rem;
}
._helper-maximize h5 {
  font-size: 1.36rem;
}
._helper-maximize h6 {
  font-size: 1.3rem;
}
._helper-buttonGroupTitle {
  font-size: 0.87rem;
  border-bottom: 1px solid var(--color-triple178);
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}
._helper-truncate,
.interactive--truncate,
.interactive-icon--truncate,
.interactive-icon--truncate .interactive-icon__text,
.interactive-help--truncate,
.interactive-help--truncate .interactive-help__text,
.interactive-meta-icon--truncate,
.interactive-meta-icon--truncate .interactive-meta-icon__text,
.breadcrumb__listItem,
.breadcrumb__link,
.page-form__treeHeaderTitle,
.page-form__treeWrapper--opened .page-form__treeHeaderTitle,
.formItem__field--multiLevelSelect,
.tags__tagText,
.thumbnail__head .thumbnail__titleText,
.interactive-print--truncate,
.interactive-receipt--truncate,
.interactive-receipt--truncate .interactive-receipt__text,
.interactive-sourced--truncate,
.interactive-sourced--truncate .interactive-sourced__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
body {
  animation-name: default;
  animation-duration: 0.001s;
  content: 'default';
}
@media screen and (min-width: 20rem), print {
  body {
    animation-name: "min";
    content: 'min';
  }
}
@media screen and (min-width: 30rem), print {
  body {
    animation-name: xs;
    content: 'xs';
  }
}
@media screen and (min-width: 48rem), print {
  body {
    animation-name: small;
    content: 'small';
  }
}
@media screen and (min-width: 60rem), print {
  body {
    animation-name: content;
    content: 'content';
  }
}
@media screen and (min-width: 60rem), print {
  body {
    animation-name: medium;
    content: 'medium';
  }
}
@media screen and (min-width: 80rem), print {
  body {
    animation-name: large;
    content: 'large';
  }
}
@media screen and (min-width: 105rem), print {
  body {
    animation-name: xl;
    content: 'xl';
  }
}
@media screen and (min-width: 120rem), print {
  body {
    animation-name: max;
    content: 'max(a, b)';
  }
}
@keyframes default {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes min {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes xs {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes small {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes content {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes medium {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes large {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes xl {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
/*
Die globalen Schatten für Komponenten

markup:
<div style="margin: 20px; height: 100px; width: 100px; display block; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 8px 16px 16px"></div>
<div style="margin: 20px; height: 100px; width: 100px; display block; box-shadow: 0 0 1.5rem var(--color-shadow-light);"></div>

Styleguide ###basics.shadows###
*/
/*
Basics

In diesem Abschnitt werden alle grundlegenden Styles für das ElsterOnline Portal und das BZSt-Online Portal definiert. Zu den grundlegenden
Styles gehören unter anderem Überschriften, Paragraphen, Inputs, Links etc.

Styleguide ###basics###
*/
/*
Interaktive Elemente

Links, Buttons, Inputs und alle weiteren Arten von Custom-Buttons

Styleguide ###interaktiveElemente###
*/
/*
Formularelemente

Übersicht über die Formularelemente in ELSTER

Styleguide ###formularElemente###
*/
/*
Portalrahmen

Elemente und Komponenten welche für den Portalrahmen genutzt werden.

Styleguide ###portalrahmen###
*/
/*
Squads

Beschreibung genereller Squads

Styleguide ###squads###
*/
/*
Cores

Beschreibung genereller Cores

Styleguide ###cores###
*/
.svg-accessibility_form::before {
  margin: -2px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-accessibility_form--disabled::before {
  margin: -2px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-accessibility_form--hov-foc::before {
  margin: -2px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-accessibility_form--invert::before {
  margin: -2px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-accessibility_form--invert-disabled::before {
  margin: -36px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-add::before {
  margin: -36px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-add--disabled::before {
  margin: -36px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-add--invert::before {
  margin: -36px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-add--invert-disabled::before {
  margin: -2px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-apply::before {
  margin: -36px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-apply--disabled::before {
  margin: -2px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-apply--invert::before {
  margin: -36px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-apply--invert-disabled::before {
  margin: -70px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-apply--triple51-on-triple248::before {
  margin: -70px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow::before {
  margin: -70px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow--disabled::before {
  margin: -70px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow--invert::before {
  margin: -70px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow--invert-disabled::before {
  margin: -70px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow--invert-triple248::before {
  margin: -2px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow--triple51-on-triple248::before {
  margin: -36px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-triple248::before {
  margin: -70px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice-blue::before {
  margin: -104px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice-triple242::before {
  margin: -104px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice-triple248::before {
  margin: -104px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice-white::before {
  margin: -104px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice_small-triple242::before {
  margin: -104px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice_small-triple248::before {
  margin: -104px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow-twice_small-white::before {
  margin: -104px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_back::before {
  margin: -2px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_dark::before {
  margin: -36px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_grey--invert::before {
  margin: -70px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small::before {
  margin: -104px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--disabled::before {
  margin: -2px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--invert::before {
  margin: -36px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--invert-disabled::before {
  margin: -70px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--invert-triple221::before {
  margin: -104px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--invert-triple242::before {
  margin: -138px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small--invert-triple248::before {
  margin: -138px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small_dark::before {
  margin: -138px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-arrow_small_grey--invert::before {
  margin: -138px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-attachments::before {
  margin: -138px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-attachments--disabled::before {
  margin: -138px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-attachments--hov-foc::before {
  margin: -138px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-attachments--invert::before {
  margin: -138px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-attachments--invert-disabled::before {
  margin: -138px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-audio--invert::before {
  margin: -2px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen::before {
  margin: -36px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen--disabled::before {
  margin: -70px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen--filled--invert::before {
  margin: -104px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen--invert::before {
  margin: -138px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen--invert-triple248::before {
  margin: -2px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzergruppen_mup::before {
  margin: -36px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzerkontoservice::before {
  margin: -70px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzerkontoservice--disabled::before {
  margin: -104px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-benutzerkontoservice_mup::before {
  margin: -138px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-calc::before {
  margin: -172px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-calc--disabled::before {
  margin: -172px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-calc--invert::before {
  margin: -172px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-calc--invert-disabled::before {
  margin: -172px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-calc--triple51-on-triple248::before {
  margin: -172px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-carryover::before {
  margin: -172px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-carryover--triple51-on-triple248::before {
  margin: -172px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-chain_linked::before {
  margin: -172px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-chain_linked--invert-on-triple248::before {
  margin: -172px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-chain_unlinked--invert::before {
  margin: -172px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_circle::before {
  margin: -172px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_circle-triple248::before {
  margin: -2px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle::before {
  margin: -36px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle--disabled::before {
  margin: -70px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle--invert::before {
  margin: -104px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle--invert-disabled::before {
  margin: -138px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle--invert-triple242::before {
  margin: -172px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_nocircle--triple51-on-triple248::before {
  margin: -206px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_open::before {
  margin: -206px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_open--invert::before {
  margin: -206px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_open--invert-disabled::before {
  margin: -206px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_open--invert-on-transparent::before {
  margin: -206px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_open--invert-triple242::before {
  margin: -206px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-close_small--invert-on-transparent::before {
  margin: -206px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-correct_mup::before {
  margin: -206px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-correct_triple114-on-transparent::before {
  margin: -206px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-correct_triple51-on-transparent::before {
  margin: -206px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-correct_white-on-transparent::before {
  margin: -206px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-counterclockwise--invert::before {
  margin: -206px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-create_account::before {
  margin: -2px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-create_account--disabled::before {
  margin: -36px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-create_account--invert::before {
  margin: -70px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-create_account--invert-disabled::before {
  margin: -104px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-data-existing::before {
  margin: -138px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-data_acquisition::before {
  margin: -172px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-data_acquisition--disabled::before {
  margin: -206px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-data_acquisition--invert::before {
  margin: -2px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-data_acquisition--invert-disabled::before {
  margin: -36px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-data_acquisition--triple51-on-triple248::before {
  margin: -70px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-date-picker::before {
  margin: -104px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-date-picker--disabled::before {
  margin: -138px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-date-picker--invert::before {
  margin: -172px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-date-picker--invert-disabled::before {
  margin: -206px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-date-picker--invert-on-triple221::before {
  margin: -240px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-delete::before {
  margin: -240px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-delete--disabled::before {
  margin: -240px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-delete--invert::before {
  margin: -240px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-delete--invert-disabled::before {
  margin: -240px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-delete--triple51-on-triple248::before {
  margin: -240px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-desktop_24-triple51-on-white::before {
  margin: -240px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv::before {
  margin: -240px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv_new::before {
  margin: -240px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv_new--disabled::before {
  margin: -240px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv_new--hov-foc::before {
  margin: -240px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv_new--invert::before {
  margin: -240px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-csv_new--invert-disabled::before {
  margin: -240px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html::before {
  margin: -240px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html_new::before {
  margin: -2px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html_new--disabled::before {
  margin: -36px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html_new--hov-foc::before {
  margin: -70px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html_new--invert::before {
  margin: -104px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-html_new--invert-disabled::before {
  margin: -138px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log::before {
  margin: -172px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log_new::before {
  margin: -206px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log_new--disabled::before {
  margin: -240px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log_new--hov-foc::before {
  margin: -2px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log_new--invert::before {
  margin: -36px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-log_new--invert-disabled::before {
  margin: -70px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf::before {
  margin: -104px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new::before {
  margin: -138px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new--disabled::before {
  margin: -172px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new--hov-foc::before {
  margin: -206px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new--invert::before {
  margin: -240px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new--invert-disabled::before {
  margin: -274px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-pdf_new--triple51-on-triple248::before {
  margin: -274px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip::before {
  margin: -274px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip_new::before {
  margin: -274px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip_new--disabled::before {
  margin: -274px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip_new--hov-foc::before {
  margin: -274px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip_new--invert::before {
  margin: -274px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-doctype-zip_new--invert-disabled::before {
  margin: -274px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file::before {
  margin: -274px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file--disabled::before {
  margin: -274px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file--hov-foc::before {
  margin: -274px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file--invert::before {
  margin: -274px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file--invert-disabled::before {
  margin: -274px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-download_file--triple51-on-triple248::before {
  margin: -274px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit::before {
  margin: -274px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit--disabled::before {
  margin: -274px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit--invert::before {
  margin: -2px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit--invert-disabled::before {
  margin: -36px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_comb::before {
  margin: -70px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_comb--disabled::before {
  margin: -104px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_comb--invert::before {
  margin: -138px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_comb--invert-disabled::before {
  margin: -172px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_sep::before {
  margin: -206px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_sep--disabled::before {
  margin: -240px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_sep--invert::before {
  margin: -274px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-edit_sep--invert-disabled::before {
  margin: -308px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-elster_transfer_logo::before {
  margin: -308px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-elster_transfer_nav::before {
  margin: -308px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-erfolgreich_uebermittelt::before {
  margin: -308px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-error::before {
  margin: -308px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye--invert::before {
  margin: -308px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye--invert-disabled::before {
  margin: -308px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye--invert-on-triple242::before {
  margin: -308px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye-crossed-out--invert::before {
  margin: -308px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye-crossed-out--invert-disabled::before {
  margin: -308px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-eye-crossed-out--invert-on-triple242::before {
  margin: -308px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-figure_zoom::before {
  margin: -308px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-figure_zoom_minus::before {
  margin: -308px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-fitToContent::before {
  margin: -308px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-form_new_24::before {
  margin: -308px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-formulare_leistungen::before {
  margin: -308px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-formulare_leistungen_mup::before {
  margin: -308px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-glossary_context::before {
  margin: -2px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-help::before {
  margin: -36px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-help_context::before {
  margin: -70px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-help_nav::before {
  margin: -104px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-hint-invert-on-triple221::before {
  margin: -138px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-hint-white-on-triple114::before {
  margin: -172px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-home::before {
  margin: -206px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-home_breadcrumb::before {
  margin: -240px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-home_h1::before {
  margin: -274px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-import--on-white::before {
  margin: -308px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-in_progress::before {
  margin: -2px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-info_mup::before {
  margin: -36px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-jumpmarker::before {
  margin: -70px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-jumpmarker--disabled::before {
  margin: -104px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-jumpmarker--invert::before {
  margin: -138px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-jumpmarker--invert-disabled::before {
  margin: -172px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-jumpmarker-triple248--invert::before {
  margin: -206px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-kontrastModus::before {
  margin: -240px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-language::before {
  margin: -274px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-language--disabled::before {
  margin: -308px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-language--invert::before {
  margin: -342px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-language--invert-disabled::before {
  margin: -342px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-letter-registration::before {
  margin: -342px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-letter-triple248::before {
  margin: -342px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-letter-triple248_mup::before {
  margin: -342px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-link_extern--invert-on-transparent::before {
  margin: -342px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-link_extern--white-on-transparent::before {
  margin: -342px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-link_mailto--invert-on-transparent::before {
  margin: -342px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-link_mailto--white-on-transparent::before {
  margin: -342px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_elstersmart_24::before {
  margin: -342px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_elstersmart_24--disabled-triple248::before {
  margin: -342px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_elstersmart_24--invert-on-transparent::before {
  margin: -342px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_elstersmart_24-triple248::before {
  margin: -342px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_elstersmart_24_mup::before {
  margin: -342px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_nav::before {
  margin: -342px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_npa_24::before {
  margin: -342px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_npa_24--disabled-triple248::before {
  margin: -342px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_npa_24-triple248::before {
  margin: -342px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_npa_24_mup::before {
  margin: -342px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_seccard_24::before {
  margin: -2px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_seccard_24--disabled-triple248::before {
  margin: -36px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_seccard_24-triple248::before {
  margin: -70px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_seccard_24_mup::before {
  margin: -104px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_secstick_24::before {
  margin: -138px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_secstick_24--disabled-triple248::before {
  margin: -172px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_secstick_24-triple248::before {
  margin: -206px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_secstick_24_mup::before {
  margin: -240px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_softpse_24::before {
  margin: -274px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_softpse_24--disabled-triple248::before {
  margin: -308px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_softpse_24-triple248::before {
  margin: -342px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-log_softpse_24_mup::before {
  margin: -2px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-login::before {
  margin: -36px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-login--disabled::before {
  margin: -70px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-login--invert::before {
  margin: -104px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-login--invert-disabled::before {
  margin: -138px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-logo_npa::before {
  margin: -172px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-logout--on-white::before {
  margin: -206px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-mail-registration::before {
  margin: -240px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-mail-triple248::before {
  margin: -274px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-mail-triple248_mup::before {
  margin: -308px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-mail_close::before {
  margin: -342px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-mail_open::before {
  margin: -376px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-maintenance::before {
  margin: -376px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-mein_elster::before {
  margin: -376px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-mein_elster_mup::before {
  margin: -376px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-menu::before {
  margin: -376px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-menu--on-white::before {
  margin: -376px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-menu-blue::before {
  margin: -376px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-message-error::before {
  margin: -376px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-message-hint::before {
  margin: -376px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-edit::before {
  margin: -376px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-edit--disabled::before {
  margin: -376px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-edit_mup::before {
  margin: -376px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-send::before {
  margin: -376px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-send--disabled::before {
  margin: -376px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-send_mup::before {
  margin: -376px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-validate::before {
  margin: -376px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-validate--disabled::before {
  margin: -376px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-mode-validate_mup::before {
  margin: -376px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-more::before {
  margin: -376px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-more_mup--current::before {
  margin: -376px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_carryOver::before {
  margin: -376px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_divide::before {
  margin: -2px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_equals::before {
  margin: -36px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_minus::before {
  margin: -70px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_plus::before {
  margin: -104px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_plus_minus::before {
  margin: -138px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-operator_times::before {
  margin: -172px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_jump::before {
  margin: -206px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_jump--disabled::before {
  margin: -240px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_jump--invert::before {
  margin: -274px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_jump--invert-disabled::before {
  margin: -308px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_step::before {
  margin: -342px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_step--disabled::before {
  margin: -376px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_step--invert::before {
  margin: -2px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-pagination_step--invert-disabled::before {
  margin: -36px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-print::before {
  margin: -70px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-print--disabled::before {
  margin: -104px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-print--invert::before {
  margin: -138px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-print--invert-disabled::before {
  margin: -172px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-print--triple51-on-triple248::before {
  margin: -206px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-required_field-triple221::before {
  margin: -240px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-required_field-white::before {
  margin: -274px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-reset_view::before {
  margin: -308px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-rueckmeldung_eingegangen::before {
  margin: -342px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-search::before {
  margin: -376px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-search--disabled::before {
  margin: -410px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-search--invert::before {
  margin: -410px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-search--invert-disabled::before {
  margin: -410px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-search_in_form::before {
  margin: -410px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-search_in_form--disabled::before {
  margin: -410px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-search_in_form--invert::before {
  margin: -410px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-search_in_form--invert-disabled::before {
  margin: -410px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-smartphone_24-trible51-on-white::before {
  margin: -410px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_any::before {
  margin: -410px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_any--inverted::before {
  margin: -410px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_profile::before {
  margin: -410px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_profile--inverted::before {
  margin: -410px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_receipt::before {
  margin: -410px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_receipt--inverted::before {
  margin: -410px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_report::before {
  margin: -410px 0px 0px -282px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_report--inverted::before {
  margin: -410px 0px 0px -302px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_submission::before {
  margin: -410px 0px 0px -322px;
  content: url("svg/sprite_mup.svg");
}
.svg-source_submission--inverted::before {
  margin: -410px 0px 0px -342px;
  content: url("svg/sprite_mup.svg");
}
.svg-square::before {
  margin: -410px 0px 0px -362px;
  content: url("svg/sprite_mup.svg");
}
.svg-star_black::before {
  margin: -410px 0px 0px -382px;
  content: url("svg/sprite_mup.svg");
}
.svg-star_mup::before {
  margin: -410px 0px 0px -402px;
  content: url("svg/sprite_mup.svg");
}
.svg-star_white::before {
  margin: -410px 0px 0px -422px;
  content: url("svg/sprite_mup.svg");
}
.svg-success_mup::before {
  margin: -410px 0px 0px -442px;
  content: url("svg/sprite_mup.svg");
}
.svg-table_view::before {
  margin: -2px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-table_view--disabled::before {
  margin: -36px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-table_view--on-triple230::before {
  margin: -70px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-thumbnail_loadfail::before {
  margin: -104px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-thumbnail_view::before {
  margin: -138px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-thumbnail_view--disabled::before {
  margin: -172px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-thumbnail_view--on-triple230::before {
  margin: -206px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-triangle--triple51-on-white::before {
  margin: -240px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-triangle-triple242::before {
  margin: -274px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-triangle_down-black::before {
  margin: -308px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-twitter::before {
  margin: -342px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-ueber_elster::before {
  margin: -376px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-ueber_elster_mup::before {
  margin: -410px 0px 0px -462px;
  content: url("svg/sprite_mup.svg");
}
.svg-undo--invert::before {
  margin: -444px 0px 0px -2px;
  content: url("svg/sprite_mup.svg");
}
.svg-undo--triple51-on-triple248::before {
  margin: -444px 0px 0px -22px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-audio--white-on-triple63::before {
  margin: -444px 0px 0px -42px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-fullscreen--white-on-triple63::before {
  margin: -444px 0px 0px -62px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-minimize--white-on-triple63::before {
  margin: -444px 0px 0px -82px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-mute--white-on-triple63::before {
  margin: -444px 0px 0px -102px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-pause--white-on-triple63::before {
  margin: -444px 0px 0px -122px;
  content: url("svg/sprite_mup.svg");
}
.svg-videoplayer-play--white-on-triple63::before {
  margin: -444px 0px 0px -142px;
  content: url("svg/sprite_mup.svg");
}
.svg-warning::before {
  margin: -444px 0px 0px -162px;
  content: url("svg/sprite_mup.svg");
}
.svg-warning-light::before {
  margin: -444px 0px 0px -182px;
  content: url("svg/sprite_mup.svg");
}
.svg-warning-triple221::before {
  margin: -444px 0px 0px -202px;
  content: url("svg/sprite_mup.svg");
}
.svg-warning-triple248::before {
  margin: -444px 0px 0px -222px;
  content: url("svg/sprite_mup.svg");
}
.svg-weitere_softwareprodukte::before {
  margin: -444px 0px 0px -242px;
  content: url("svg/sprite_mup.svg");
}
.svg-weitere_softwareprodukte_mup::before {
  margin: -444px 0px 0px -262px;
  content: url("svg/sprite_mup.svg");
}
/*
Figure

Das Figure besteht aus einem Rahmen und einer optionalen Bildunterschrift. In diesem Rahmen kann sich entweder ein Bild
oder ein Text befinden. Das Bild benötigt einen alt-text und kann optional einen title-Text besitzen.
Der Text kann optional mit dem Modifier emphasize (am figure-Element) hervorgehoben werden.

markup: demo.figure.html

Styleguide ###basics.figure###
*/
.figure {
  margin: 0;
}
.figure__image {
  border: 1px solid var(--color-triple230);
  background-color: var(--color-bodyBackground);
  text-align: center;
}
.figure__image--noBorder {
  border: none;
  background-color: transparent;
  padding: 0.5rem;
}
.figure--emphasize .figure__image {
  background-color: var(--color-triple242);
  border: 1px solid var(--color-triple221);
  padding: 0.5rem;
}
.figure__text {
  display: inline-block;
  padding: 0.75rem 0.5rem;
}
.figure--emphasize .figure__text {
  color: var(--color-app-dark);
  font-size: 3.5rem;
}
.figure img,
.figure canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.figure--notCentered img,
.figure--notCentered canvas {
  margin: 0;
}
.figure figcaption {
  margin-top: 0.12rem;
  text-align: left;
  font-size: 0.81rem;
}
[data-selector="figure-zoom"] a[data-selector^="interactive"] .figure__image,
a[href^="https://"] .figure__image,
a[href^="http://"] .figure__image {
  border: 1px solid var(--color-interaction);
  padding: 0.5rem 0.5rem 0;
}
[data-selector="figure-zoom"] a[data-selector^="interactive"] .figure__image::after,
a[href^="https://"] .figure__image::after,
a[href^="http://"] .figure__image::after {
  content: var(--url-linkExtern);
  width: 1rem;
  height: 1rem;
  display: block;
  margin-left: auto;
  padding: 0.25rem 0;
}
[data-selector="figure-zoom"] a[data-selector^="interactive"] .figure__image::after {
  content: var(--url-linkZoom);
}
.firefox .figure--fixESR img {
  width: 100%;
}
/*
Links

Links im Portal für Texte.
__Hinweis__
> Sobald ein Link Funktionalität abseits der Standardaktion implementiert
sollte die interactive Komponente verwendet werden

markup: demo.a.html

Styleguide ###cores.a###
 */
a {
  text-decoration: none;
  color: var(--color-interaction);
}
a:hover,
a:focus {
  text-decoration: underline;
}
a:hover {
  outline: 0;
}
a:focus {
  outline: 1px dotted var(--color-interaction);
}
a[href^="http://"]::after,
a[href^="https://"]::after {
  content: var(--url-linkExtern);
  padding-left: 0.25rem;
}
a[href^="http://"][class*="noExternImg"]::after,
a[href^="https://"][class*="noExternImg"]::after {
  display: none;
}
a[href*=".pdf"]::after {
  content: " (PDF)";
}
a[href*=".xls"]::after,
a[href*=".xlsm"]::after {
  content: " (XLS)";
}
a[href*=".pdf"]::after,
a[href*=".xls"]::after,
a[href*=".xlsm"]::after {
  margin-right: 0.25rem;
  padding-left: 0;
  width: auto;
  height: auto;
}
a[href^="mailto:"]::after {
  content: var(--url-linkMailto);
  padding-left: 0.25rem;
}
/*
Accordion

Ein Akkordion kann immer NUR ein Element des Akkordions offen zeigen. Es ist also immmer nur ein Inhalt sichtbar. Das
Root Akkordion DIV muss eindeutig durch einen *data-selector* und der Klasse .accordion ausgezeichnet werden.

Es gibt zwei unterschiedliche Markups: .accordion\__head besteht aus einem Label und einem Input. In diesem Fall
handelt es sich um ein Formularelement und der User trifft beim Ausklappen eine Auswahl. Oder der .accordion\__head
besteht nur aus einem DIV. In diesem Fall verhält sich die Komponente wie ein Akkrodion, ist aber
kein Formularelement und benötigt damit keine Radio-Buttons.
Hierfür wird das Attribut noInput = true gesetzt.

Die Items bestehen immer aus .accordion\__head und .accordion\__content wobei der Head die zugehörige route via
*data-content-route* zugewiesen wird. Diese Route muss am content als *data-content-view* Attribut vorhanden sein.
Die data-selectoren für head und content benutzen den root selektor und stellen jeweils nur "route." (content) und
"interactive." (head) vorran. Entscheidend für initial geöffnete content Blöcke ist das attribut *data-opened="true"*
(content).
Das Akkordion benutzt den content-router.js und könnte auch von jedem anderen interaktiven Element geschaltet werden.
Notwendig dafür ist das Attribut *data-content-route* z.B: data-content-route="view.0"

Via JavaScript kann über die Instanz eines Akkordions ein spezifischer Inhalt geöffnet werden. Siehe dazu:
https://svncvs.mgm-edv.de/repos/elsterportal/trunk/FrontendRelaunch/doc/es-doc/function/index.html#static-function-accordion

Das Akkordion erbt das Styling von der ToggleBox.
- default: kein modifier: Box initial geschlossen
- simple - Akkordion mit grüner Border-Top im Content
- compact - Akkordion mit blauem Rahmen, grauem Head, weißem Content
- primary - Akkordion mit blauem Head, grauem Content
- displayInput - Für eine noch bessere Benutzerführung werden bei dem Accordion die vorhandenen Radiobuttons angezeigt.
So wird dem Benutzer visuell dargestellt, dass er mit dem Aufklappen eine Auswahl getroffen hat. Diese Variante hat zur
Folge, dass das geöffnete Element ausgegraut dargestellt wird und sich nicht mehr schließen lässt.

markup: demo.accordion.html

Styleguide ###interaktiveElemente.accordion###
*/
/*
ToggleBox

Eine toggleBox ist ein Block, welcher aus einem Kopf- und einem Inhaltsbereich besteht. Der Kopfbereich ist klickbar und
öffnet bzw. schließt den Inhaltsbereich. Der klickbare Header ist einem Link nachempfunden ist aber im Markup keiner.
Damit er tabbar ist, wurde der tabindex auf 0 gesetzt. Für die Barrierefreiheit wurde ein unsichtbares Span mit einer
Handlungsanweisung hinuzgefügt. Dem Kopfbereich kann ein Text oder ein gesamtes Mixin übergeben werden. Es kann auch
ein Link im Kopfbbereich verwendet werden. Der Inhalt wird einfach durch einen Block gesetzt.
- default: kein modifier: Box initial geöffnet
- closed - toggleBox initial geschlossen (aber geöffnet falls JS deaktiviert ist)
- simple - toggleBox ohne Rahmen und Abständen, mit grauem Head und weißem Content
- light - toggleBox ohne Rahmen, mit hellgrauem Head und weißem Content
- compact - toggleBox mit blauem Rahmen, grauem Head, weißem Content
- primary - toggleBox mit blauem Head, grauem Content
- small - toggleBox mit kleinerer Schriftgröße, schwarzem Pfeil

Für Elemente, die im Content-Bereich die volle Breite einnehmen sollen, existiert der Modifier **--noMargin**.

markup: demo.toggleBox.html

Styleguide ###interaktiveElemente.toggleBox###
*/
/*
Icons

Icons im Portal werden via SVG Sprite eingebunden. Dazu zählen nicht die Inhaltsgrafiken, welche weiterhin
als .png eingebungen werden können. Icons haben eine Basisgröße von 16x16px und können skaliert werden (siehe Modifier).
Es gibt ein automatisch generiertes SVG-Sprite, aus der via CSS Klassen die Icons angezeigt werden können. SVG Dateien
können einfach im Pfad "app/globals/media/svg" gespeichert werden und ein automatischer Buildprozess erstellt generisch
die SVG Sprites und die zugehörigen CSS Klassen für Stylus.

Icons können allein stehen oder in Buttons als Interaktive Elemente verwendet werden. Für die Verwendung
in Interactives siehe Block "Interactive".

> ***Wichtig***:
> Wenn Icons als alleinstehende Interaktive Elemente verwendet werden, benötigen sie ein
> Fallback Element, welches die Bedeutung diese Elements wiederspiegelt falls CSS deaktiviert
> wird. Ein möglicher Fallback ist ein ```<img src="#" title="Was macht das Icon" alt="Icon-Datei-Name">``` Tag
> welches bei aktviertem CSS ausgeblendet ist.

Die Icon SVGs werden als SVG-Sprite via CSS eingebunden. Daher ist es wichtig folgende Barriere-
freiheitsanforderungen einzuhalten:
- Abstände innerhalb des Icons in px (wegen 200% Textzoom)
- Einbindung der Sprite via CSS mit ::before Pseudo Element (sonst nicht sichbar bei benutzerdefinierten Farben)
- Icons benötigen aus Barrierefreiheitsgründen immer Hintergrundfarben (benutzerdefinierte Farben im Browser - Kontrast)
- Browserkompatibilität und Barrierfreiheitsanforderungen an SVGs unter https://wiki.mgm-tp.com/confluence/x/XKbjBQ


markup: demo.icon.html

Styleguide ###basics.icon###
*/
.icon {
  height: 16px;
  width: 16px;
  display: inline-flex;
  display: -ms-inline-grid;
  cursor: default;
  overflow: hidden;
  line-height: 1rem;
  font-size: 1rem;
}
.icon::before {
  content: "";
}
.icon__svg {
  display: inline-block;
  color: rgba(0,0,0,0);
  white-space: nowrap;
  transform-origin: left top;
}
.icon__svg::before {
  display: inline-block;
  width: 16px;
  height: 30px;
}
.icon--1\.5x {
  width: 24px;
  height: 24px;
}
.icon--1\.5x .icon__svg {
  transform: scale(1.5);
}
.icon--2x {
  width: 32px;
  height: 32px;
}
.icon--2x .icon__svg {
  transform: scale(2);
}
.icon--2\.5x {
  width: 40px;
  height: 40px;
}
.icon--2\.5x .icon__svg {
  transform: scale(2.5);
}
.icon--3x {
  width: 48px;
  height: 48px;
}
.icon--3x .icon__svg {
  transform: scale(3);
}
.icon--4x {
  width: 64px;
  height: 64px;
}
.icon--4x .icon__svg {
  transform: scale(4);
}
.icon--5x {
  width: 80px;
  height: 80px;
}
.icon--5x .icon__svg {
  transform: scale(5);
}
.icon--6x {
  width: 96px;
  height: 96px;
}
.icon--6x .icon__svg {
  transform: scale(6);
}
.icon--8x {
  width: 128px;
  height: 128px;
}
.icon--8x .icon__svg {
  transform: scale(8);
}
.icon--10x {
  width: 160px;
  height: 160px;
}
.icon--10x .icon__svg {
  transform: scale(10);
}
.icon--12x {
  width: 192px;
  height: 192px;
}
.icon--12x .icon__svg {
  transform: scale(12);
}
.icon--rotate90 {
  transform: inherit;
  transform: rotate(90deg);
  transform-origin: center;
}
.icon--rotate180 {
  transform: inherit;
  transform: rotate(180deg);
  transform-origin: center;
}
.icon--rotate270 {
  transform: inherit;
  transform: rotate(270deg);
  transform-origin: center;
}
.safari.macos .icon .icon__svg,
.ios.iphone .icon .icon__svg,
.ios.ipad .icon .icon__svg {
  width: inherit;
  height: inherit;
  overflow: inherit;
}
/*
Icons: Rotations

Icons können einfach rotiert werden. Das ist vorallem für Pfeile oder Richtungsgrafiken von Vorteil. Die Rotation wird
via Modifier Klasse definiert. Folgende Rotationen werden unterstützt:

90 - 90° Winkel
180 - 180° Winkel
270 - 270° Winkel

markup: demo.icon.rotation.html

Styleguide ###basics.icon.rotation###
*/
/*
Icons: Sprite

Alle Icons des generierten Sprites.

> !!! Bitte dieses Markup nicht verwenden! Dient nur der Übersicht !!!

markup: demo.icon.sprite.html

Styleguide ###basics.icon.sprite###
*/
.toggleBox {
  margin-bottom: 0.31rem;
}
.toggleBox__head,
.accordion__head {
  display: block;
  cursor: pointer;
  color: var(--color-interaction);
  font-size: 0.87rem;
}
.toggleBox__head .icon,
.accordion__head .icon {
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}
.toggleBox__headButton,
.accordion__headButton {
  display: flex;
  padding-left: 0.25rem;
}
.toggleBox__headButton:focus,
.accordion__headButton:focus {
  outline: 1px dotted var(--color-interaction);
}
.toggleBox__headButton:focus,
.accordion__headButton:focus,
.toggleBox__headButton:hover,
.accordion__headButton:hover {
  text-decoration: underline;
}
.toggleBox__headButton .toggleBox__mainTitle,
.accordion__headButton .accordion__mainTitle,
.accordion__head .accordion__mainTitle {
  padding-right: 0.5rem;
}
.toggleBox__headButton .toggleBox__subTitle,
.accordion__headButton .accordion__subTitle,
.accordion__head .accordion__subTitle {
  font-size: 0.75rem;
}
.toggleBox--closed .toggleBox__content {
  display: none;
}
.toggleBox--simple > .toggleBox__head,
.accordion--simple .accordion__head {
  background: var(--color-triple242);
}
.toggleBox--simple.toggleBox--closed {
  border-bottom: 2px solid var(--color-bodyBackground);
}
.toggleBox--simple > .toggleBox__content,
.accordion--simple .accordion__content {
  padding-left: 0;
  padding-right: 0;
}
.toggleBox--light > .toggleBox__head {
  background: var(--color-triple248);
}
.toggleBox--light > .toggleBox__content {
  line-height: 1.15;
}
.toggleBox--compact,
.accordion--compact .accordion__item {
  border: 1px solid var(--color-interaction);
}
.toggleBox--compact.toggleBox--closed,
.accordion--compact .accordion__item.accordion--compact .accordion__item--closed {
  border-color: transparent;
}
.toggleBox--compact.toggleBox--closed .toggleBox__headButton,
.accordion--compact .accordion__item.accordion--compact .accordion__item--closed .accordion--compact .accordion__item__headButton {
  outline: 1px solid var(--color-interaction);
}
.toggleBox--compact.toggleBox--closed .toggleBox__headButton:focus,
.accordion--compact .accordion__item.accordion--compact .accordion__item--closed .accordion--compact .accordion__item__headButton:focus {
  outline: 1px dotted var(--color-interaction);
}
.toggleBox--compact > .toggleBox__head,
.accordion--compact .accordion__item > .accordion--compact .accordion__item__head,
.accordion--compact .accordion__head {
  background-color: var(--color-infoBackground);
}
.toggleBox--compact > .toggleBox__headButton,
.accordion--compact .accordion__item > .accordion--compact .accordion__item__headButton,
.accordion--compact .accordion__headButton {
  padding-right: 0.25rem;
}
.toggleBox--compact > .toggleBox__content,
.accordion--compact .accordion__item > .accordion--compact .accordion__item__content,
.accordion--compact .accordion__content {
  padding-top: 0.5rem;
}
.toggleBox--primary,
.accordion--primary .accordion__item {
  background-color: var(--color-formBackground);
}
.toggleBox--primary > .toggleBox__head,
.accordion--primary .accordion__item > .accordion--primary .accordion__item__head,
.accordion--primary .accordion__head {
  background-color: var(--color-interaction-light);
  color: var(--color-text-light);
}
.toggleBox--primary > .toggleBox__headButton,
.accordion--primary .accordion__item > .accordion--primary .accordion__item__headButton,
.accordion--primary .accordion__headButton {
  padding-right: 0.25rem;
}
.toggleBox--small > .toggleBox__head {
  color: var(--color-text);
  font-size: 0.87rem;
}
.toggleBox--small > .toggleBox__head .icon {
  margin-top: 0;
}
.toggleBox--simple .toggleBox__headButton,
.toggleBox--light .toggleBox__headButton,
.toggleBox--compact .toggleBox__headButton,
.toggleBox--primary .toggleBox__headButton,
.accordion--compact .accordion__item .accordion--compact .accordion__item__headButton,
.accordion--primary .accordion__item .accordion--primary .accordion__item__headButton,
.accordion--simple .accordion__headButton,
.accordion--compact .accordion__headButton,
.accordion--primary .accordion__headButton {
  font-size: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.toggleBox--primary > .toggleBox__content .formItem,
.accordion--primary .accordion__item > .accordion--primary .accordion__item__content .formItem,
.accordion--primary .accordion__content .formItem {
  padding-left: 0;
  padding-right: 0;
}
.toggleBox--primary > .toggleBox__content .formItem.toggleBox--noMargin,
.accordion--primary .accordion__item > .accordion--primary .accordion__item__content .formItem.toggleBox--noMargin,
.accordion--primary .accordion__content .formItem.toggleBox--noMargin {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: transparent;
}
.toggleBox--small > .toggleBox__content {
  font-size: 0.87rem;
}
.toggleBox__content,
.accordion__content {
  padding: 0.25rem 0.5rem 0.5rem 1.31rem;
}
.toggleBox__content .toggleBox--noMargin,
.accordion__content .accordion__content--noMargin,
.accordion__content .accordion--noMargin {
  margin-left: -1.31rem;
  margin-right: -0.5rem;
}
/*
FormBox

Mithilfe der FormBox Komponente können FormItems gruppiert werden. Es kann optional eine Überschrift für die FormBox
festgelegt werden.

Wenn eine Legende (*formbox__legend*) angegeben wird, __muss__ das aria-label-Attribut mit dem selben Text wie in der
Legende am Hauptelement (*formBox*) angegeben werden.

markup: demo.formBox.html

Styleguide ###formularElemente.formBox###
*/
.formBox {
  margin-bottom: 2rem;
}
.formBox__title {
  padding-bottom: 0.25rem;
  border-bottom: 4px solid var(--color-app);
  margin-bottom: 0.5rem;
}
.formBox__title--noBorder {
  border-bottom: none;
}
.formBox__body {
  position: relative;
}
.formBox__legend {
  margin-bottom: 0.5rem;
}
.formBox--simple .formBox__title {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1rem;
}
.formBox--tinyTitle h1.formBox__title {
  font-size: 0.87rem;
  font-weight: bold;
  border-bottom: 4px solid var(--color-app);
  border-bottom-width: 2px;
}
h4.formBox__title,
h5.formBox__title {
  border-bottom: 4px solid var(--color-app);
  border-bottom-width: 2px;
}
.accordion {
  --color-head--opened: var(--color-active-dark);
  --color-head--primary--opened: var(--color-text-light);
}
.dark .accordion {
  --color-head--opened: #94c502;
}
.dark .accordion {
  --color-head--primary--opened: #000;
}
.accordion__item,
.tabbarCollapse__item,
.tabbar-collapse-fetch__item {
  margin-bottom: 3px;
}
.accordion__headInput {
  display: none;
}
.accordion__content:empty {
  display: none;
}
.accordion__content .formBox:last-child {
  margin-bottom: 0;
}
.accordion--simple .accordion__content .accordion--noMargin {
  margin-left: 0;
  margin-right: 0;
}
.accordion__headInput {
  top: 5px;
  left: 4px;
}
.accordion--simple .accordion__headInput,
.accordion--compact .accordion__headInput,
.accordion--primary .accordion__headInput {
  top: 9px;
  left: 8px;
}
.accordion--displayInput .accordion__head {
  position: relative;
}
.accordion--displayInput .accordion__headButton {
  padding-left: 1.31rem;
}
.accordion--displayInput .accordion__headButton .icon {
  display: none;
}
.accordion--displayInput .accordion__headInput {
  flex-shrink: 0;
  display: inline-block;
  position: absolute;
  margin-left: 0;
}
.accordion--displayInput.accordion--simple .accordion__headButton,
.accordion--displayInput.accordion--compact .accordion__headButton,
.accordion--displayInput.accordion--primary .accordion__headButton {
  padding-left: 1.56rem;
}
.accordion--displayInput .accordion__item--opened .accordion__headButton {
  cursor: text;
  color: var(--color-head--opened);
}
.accordion--displayInput .accordion__item--opened .accordion__headButton:focus {
  outline: none;
}
.accordion--displayInput .accordion__item--opened .accordion__headButton:focus,
.accordion--displayInput .accordion__item--opened .accordion__headButton:hover {
  text-decoration: none;
}
.accordion--displayInput.accordion--compact .accordion__item--opened {
  border: 1px solid var(--color-active);
}
.accordion--displayInput.accordion--primary .accordion__item--opened .accordion__head {
  background-color: var(--color-active-dark);
}
.accordion--displayInput.accordion--primary .accordion__item--opened .accordion__headButton {
  color: var(--color-head--primary--opened);
}
.ios .accordion.accordion--displayInput .accordion__title,
.android .accordion.accordion--displayInput .accordion__title,
.macos .accordion.accordion--displayInput .accordion__title {
  padding-left: 0.25rem;
}
.android .accordion.accordion--displayInput .accordion__headInput {
  top: 2px;
}
.android .accordion.accordion--displayInput.accordion--simple .accordion__headInput,
.android .accordion.accordion--displayInput.accordion--compact .accordion__headInput,
.android .accordion.accordion--displayInput.accordion--primary .accordion__headInput {
  top: 6px;
}
/*
Alignment

Mithilfe der Alignment Komponente können Elemente nebeneinander innerhalb einer Reihe ausgerichtet werden.
Zur besseren Darstellung im Styleguide wurde den Bestandteilen des Alignments border und padding hinzugefügt.

Es wird unterschieden zwischen der einfachen Anordnung und der Anordnung in Gruppen.

#### Einfache Anordnung
Die einfache Anordnung besteht aus der Klasse .alignment mit beliebig darin liegenden .alignment__item.
Die Items nehmen sich im Desktop-Layout soviel Platz wie sie benötigen. Im mobilen Layout werden die Items untereinander
dargestellt und nehmen jeweils die volle Breite ein.

#### Gruppen Anordnung
Mögliche Gruppen und deren Ausrichtung sind:
- **alignmentLeftGroup** Alle inneren Elemente werden horizontal links ausgerichtet, vertikal oben
- **alignmentRightGroup** Alle inneren Elemente werden horizontal rechts ausgerichtet, vertikal oben
- **alignmentCenterGroup** Alle inneren Elemente werden sowohl horizontal als auch vertikal mittig ausgerichtet

Gruppen werden im Desktop Layout nebeneinander und im mobilen Layout untereinander dargestellt.
Die Ausrichtung ihrer Items bleibt immer erhalten.

#### Modifier
Das .alignment besitzt folgende Modifier
- **--spaced** Die Items werden gleichmäßig innerhalb des Alignments verteilt.
- **--growEqual** Die Items teilen sich gleichmäßig auf und wachsen auf die volle Breite des Alignments.
- **--buttonGroup** Das Alignment bekommt eine margin-top von 32px und die Items nehmen sich nur so viel Platz wie sie benötigen.
- **--iconLeft** Das Alignment bleibt immer nebeneinander angeordnet. Ein AlignmentItem mit Icon schrumpft nicht. Das letzte AligmentItem nimmt den restlichen Platz.
- **--iconRight** Das Alignment bleibt immer nebeneinander angeordnet. Ein AlignmentItem mit Icon schrumpft nicht. Das erste AlignmentItem nimmt sich den restlichen Platz.
- **--borderBox** Das Alignment wird mit einem dünnem Rahmen versehen, AlignmentItems nehmen volle Breite ein, Figures sind rahmenlos, h2-Überschriften semibold und in $color-app-dark.


Das .alignment__item besitzt folgende Modifier
- **--leftMargin** Das Item bekommt eine margin-left von 32px
- **--leftMargin-16** Das Item bekommt eine margin-left von 16px
- **--leftMargin-8** Das Item bekommt eine margin-left von 8px
- **--bottomMargin-0 Das Item bekommt eine margin-Bottom von 0
- **--center** Das Item wird trotz Gruppenausrichtung im Desktop-Layout vertikal und im mobilen Layout horizontal zentriert ausgerichtet
- **--bottom** Das Item wird trotz Gruppenausrichtung im Desktop-Layout vertikal nach unten und im mobilen Layout horizontal der Gruppenausrichtung ausgerichtet
- **--baseline** Das Item wird trotz Gruppenausrichtung im Desktop-Layout an der Baseline des Textes ausgerichtet
- **--grow** Das Item wächst auf die volle Breite
- **--noShrink** Das Item schrumpft nicht mehr

Die Gruppen .alignment\__leftGroup, .alignment\__rightGroup und .alignment\__centerGroup besitzen folgende Modifier
- **--leftMargin** Die Gruppe bekommt eine margin-left von 32px
- **--leftMargin-16** Die Gruppe bekommt eine margin-left von 16px
- **--leftMargin-8** Die Gruppe bekommt eine margin-left von 8px
- **--top** Die Items der Gruppe werden vertikal nach oben ausgerichtet
- **--bottom** Die Items der Gruppe werden vertikal nach unten ausgerichtet
- **--baseline** Die Items der Gruppe werden an der Baseline des Textes ausgerichtet
- **--borderBox** Das Alignment wird mit einem dünnem Rahmen versehen, aufeinander folgende Boxen haben einen Abstand zueinander, Figures sind rahmenlos, h2-Überschriften semibold und in $color-app-dark.

markup: demo.alignment.html

Styleguide ###basics.alignment###
*/
.alignment {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.alignment--iconLeft {
  flex-direction: row;
}
.alignment--iconLeft .icon {
  flex-shrink: 0;
}
.alignment--iconLeft > *:last-child {
  flex: 1 0 0px;
}
.alignment--iconRight {
  flex-direction: row;
}
.alignment--iconRight .icon {
  flex-shrink: 0;
}
.alignment--iconRight > *:first-child {
  flex: 1 0 0px;
}
.alignment--buttonGroup,
.alignment--buttonGroupCenter {
  margin-top: 1rem;
}
.alignment--buttonGroup .alignment__rightGroup,
.alignment--buttonGroupCenter .alignment__rightGroup {
  align-items: flex-start;
}
.alignment--buttonGroup {
  align-items: flex-start;
}
.alignment--buttonGroupCenter {
  align-items: center;
}
.alignment--borderBox {
  border: 1px solid var(--color-triple221);
  padding: 0.75rem 1rem 0.25rem;
  margin-bottom: 1rem;
}
.alignment--borderBox:last-child {
  margin-bottom: 1rem;
}
.alignment--borderBox h1:first-child,
.alignment--borderBox h3:first-child {
  margin-top: 0;
}
.alignment--borderBox h2 {
  margin-top: 0.25rem;
  color: var(--color-app-dark);
}
.alignment--borderBox .figure {
  margin-bottom: 0.5rem;
}
.alignment--borderBox .figure__image {
  border: none;
  background: none;
}
.alignment--borderBox > .alignment__item {
  flex-grow: 1;
}
.alignment--growEqual > .alignment__item {
  min-width: 0;
}
.alignment .icon__svg {
  display: block;
}
.alignment__leftGroup {
  align-items: flex-start;
}
.alignment__rightGroup {
  align-items: flex-end;
}
.alignment__centerGroup {
  align-items: center;
}
.alignment__item {
  flex: 0 1 auto;
}
.alignment__item--center {
  align-self: center;
}
.alignment__item--noShrink {
  flex-shrink: 0;
}
.alignment__item--grow {
  flex-grow: 1;
}
.alignment__item,
.alignment__leftGroup,
.alignment__rightGroup,
.alignment__centerGroup {
  margin-bottom: 0.5rem;
}
.alignment__item:last-child,
.alignment__leftGroup:last-child,
.alignment__rightGroup:last-child,
.alignment__centerGroup:last-child,
.alignment__item--bottomMargin-0,
.alignment__leftGroup--bottomMargin-0,
.alignment__rightGroup--bottomMargin-0,
.alignment__centerGroup--bottomMargin-0 {
  margin-bottom: 0;
}
.alignment__leftGroup,
.alignment__rightGroup,
.alignment__centerGroup {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
}
.alignment__leftGroup--borderBox,
.alignment__rightGroup--borderBox,
.alignment__centerGroup--borderBox {
  border: 1px solid var(--color-triple221);
  padding: 0.75rem 1rem 0.25rem;
  margin-bottom: 1rem;
}
.alignment__leftGroup--borderBox:last-child,
.alignment__rightGroup--borderBox:last-child,
.alignment__centerGroup--borderBox:last-child {
  margin-bottom: 1rem;
}
.alignment__leftGroup--borderBox h1:first-child,
.alignment__rightGroup--borderBox h1:first-child,
.alignment__centerGroup--borderBox h1:first-child,
.alignment__leftGroup--borderBox h3:first-child,
.alignment__rightGroup--borderBox h3:first-child,
.alignment__centerGroup--borderBox h3:first-child {
  margin-top: 0;
}
.alignment__leftGroup--borderBox h2,
.alignment__rightGroup--borderBox h2,
.alignment__centerGroup--borderBox h2 {
  margin-top: 0.25rem;
  color: var(--color-app-dark);
}
.alignment__leftGroup--borderBox .figure,
.alignment__rightGroup--borderBox .figure,
.alignment__centerGroup--borderBox .figure {
  margin-bottom: 0.5rem;
}
.alignment__leftGroup--borderBox .figure__image,
.alignment__rightGroup--borderBox .figure__image,
.alignment__centerGroup--borderBox .figure__image {
  border: none;
  background: none;
}
/*
Interactive

Interactive Content umfasst Elemente, die dem Anwender eine Interaktionsmöglichkeit
bieten. Dazu gehören die Elemente a (wenn es ein Hyperlink ist), audio (wenn das
Element über das controls-Attribut Kontrollfunktionen anbietet), button, details,
embed, iframe, img (in Verbindung mit dem usemap-Attribut, also als verweissensitive
Grafik), input (solange es kein hidden-Element ist), keygen, label, menu (wenn es als
Typ »Toolbar« definiert), object (wenn es verweissensitiv ist), select, textarea und
video (wenn das Element über das controls-Attribut Kontrollfunktionen anbietet).

Es ist zu beachten, dass das Attribut *disabled* für Buttons abhängig vom modifier gesetzt wird.
Dadurch sind die Buttons im Styleguide via Tab anspringbar, jedoch nicht in der normalen Verwendung.

__interactive mit Bestätigungsmodal__

Dieses Interactive unterbricht das eigentliche Klick-Event und öffnet ein Modal als Zwischenschritt. Dort muss die Aktion zuerst bestätigt werden,
bevor die eigentliche Klick-Funktion wieder durchgeführt wird. Funktioniert nur mit Buttons die Browser Funktionen verwenden wie z.B.
ein Formular Submit-Button. Buttons mit JavaScript-Funktionalität können so nicht unterbrochen werden. Für die Funktion wird ein Bestätigungsmodal und
folgende HTML-Attribute an dem interactive benötigt:
- "data-selector": "interactive.needs-confirmation" || "interactive-icon.needs-confirmation" || "interactive.name.bla.needs-confirmation"
- "data-confirm-modal": "modal.testname"

Das Modal benötigt einen Bestätigen Button mit "data-selector": "interactive.modal.confirm" und
einen Abbrechen Button mit "data-selector":"interactive.modal.cancel"

__Umgang Modifier__
1. Modifier mit jeweiliger Designvariante auswählen (bspw. primary)
1. _Optional:_ als __@inline__ oder __@block__ deklarieren, andernfalls greift das responsive Standardverhalten
1. _Hinweis:_ Befindet sich in der Klasse ein Modifier mit __@__, so wird das Standard responsive Verhalten ingnoriert.

primary - primär
invert - sekundar
disabled - deaktiviert
invertDisabled - deaktiviert und sekundär
base - base (transparenter Hintergrund)
baseDisabled - base und deaktiviert
truncate - nimmt die volle Breite ein, wenn der Platz nicht ausreicht wird der Text mit "..." abgekürzt
@block - Interactive ist Block-Element
@inline - Interactive ist Inline-Element
plainDisabled - deaktiviert (nur interactive, kein primary, base oder invert)


markup: demo.interactive.html

Styleguide ###interaktiveElemente.interactive###
*/
.interactive,
.interactive-icon,
.interactive-help,
.interactive-meta-icon,
.interactive-print,
.interactive-receipt,
.interactive-sourced {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-interaction);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  width: 100%;
  display: block;
}
.interactive:hover,
.interactive-icon:hover,
.interactive-help:hover,
.interactive-meta-icon:hover,
.interactive-print:hover,
.interactive-receipt:hover,
.interactive-sourced:hover,
.interactive:focus,
.interactive-icon:focus,
.interactive-help:focus,
.interactive-meta-icon:focus,
.interactive-print:focus,
.interactive-receipt:focus,
.interactive-sourced:focus {
  text-decoration: underline;
}
.interactive--base,
.interactive-icon--base,
.interactive-help--base,
.interactive-meta-icon--base,
.interactive-print--base,
.interactive-receipt--base,
.interactive-sourced--base,
.interactive--invert,
.interactive--primary,
.interactive--disabled,
.interactive--baseDisabled,
.interactive--invertDisabled,
.interactive-icon--invert,
.interactive-icon--primary,
.interactive-icon--disabled,
.interactive-icon--baseDisabled,
.interactive-icon--invertDisabled,
.interactive-help,
.interactive-help--invert,
.interactive-help--primary,
.interactive-help--disabled,
.interactive-help--baseDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon,
.interactive-meta-icon--invert,
.interactive-meta-icon--primary,
.interactive-meta-icon--disabled,
.interactive-meta-icon--baseDisabled,
.interactive-meta-icon--invertDisabled,
.interactive-print--invert,
.interactive-print--primary,
.interactive-print--disabled,
.interactive-print--baseDisabled,
.interactive-print--invertDisabled,
.interactive-print,
.interactive-receipt,
.interactive-receipt--invert,
.interactive-receipt--primary,
.interactive-receipt--disabled,
.interactive-receipt--baseDisabled,
.interactive-receipt--invertDisabled,
.interactive-sourced,
.interactive-sourced--invert,
.interactive-sourced--primary,
.interactive-sourced--disabled,
.interactive-sourced--baseDisabled,
.interactive-sourced--invertDisabled {
  padding: 0.5rem 0.93rem;
  border-radius: 0.18rem;
  border: 1px solid transparent;
  text-align: center;
  background-color: transparent;
  color: var(--color-interaction);
}
a.interactive--base[href^="http://"]::after,
a.interactive-icon--base[href^="http://"]::after,
a.interactive-help--base[href^="http://"]::after,
a.interactive-meta-icon--base[href^="http://"]::after,
a.interactive-print--base[href^="http://"]::after,
a.interactive-receipt--base[href^="http://"]::after,
a.interactive-sourced--base[href^="http://"]::after,
a.interactive--invert[href^="http://"]::after,
a.interactive--primary[href^="http://"]::after,
a.interactive--disabled[href^="http://"]::after,
a.interactive--baseDisabled[href^="http://"]::after,
a.interactive--invertDisabled[href^="http://"]::after,
a.interactive-icon--invert[href^="http://"]::after,
a.interactive-icon--primary[href^="http://"]::after,
a.interactive-icon--disabled[href^="http://"]::after,
a.interactive-icon--baseDisabled[href^="http://"]::after,
a.interactive-icon--invertDisabled[href^="http://"]::after,
a.interactive-help[href^="http://"]::after,
a.interactive-help--invert[href^="http://"]::after,
a.interactive-help--primary[href^="http://"]::after,
a.interactive-help--disabled[href^="http://"]::after,
a.interactive-help--baseDisabled[href^="http://"]::after,
a.interactive-help--invertDisabled[href^="http://"]::after,
a.interactive-meta-icon[href^="http://"]::after,
a.interactive-meta-icon--invert[href^="http://"]::after,
a.interactive-meta-icon--primary[href^="http://"]::after,
a.interactive-meta-icon--disabled[href^="http://"]::after,
a.interactive-meta-icon--baseDisabled[href^="http://"]::after,
a.interactive-meta-icon--invertDisabled[href^="http://"]::after,
a.interactive-print--invert[href^="http://"]::after,
a.interactive-print--primary[href^="http://"]::after,
a.interactive-print--disabled[href^="http://"]::after,
a.interactive-print--baseDisabled[href^="http://"]::after,
a.interactive-print--invertDisabled[href^="http://"]::after,
a.interactive-print[href^="http://"]::after,
a.interactive-receipt[href^="http://"]::after,
a.interactive-receipt--invert[href^="http://"]::after,
a.interactive-receipt--primary[href^="http://"]::after,
a.interactive-receipt--disabled[href^="http://"]::after,
a.interactive-receipt--baseDisabled[href^="http://"]::after,
a.interactive-receipt--invertDisabled[href^="http://"]::after,
a.interactive-sourced[href^="http://"]::after,
a.interactive-sourced--invert[href^="http://"]::after,
a.interactive-sourced--primary[href^="http://"]::after,
a.interactive-sourced--disabled[href^="http://"]::after,
a.interactive-sourced--baseDisabled[href^="http://"]::after,
a.interactive-sourced--invertDisabled[href^="http://"]::after,
a.interactive--base[href^="https://"]::after,
a.interactive-icon--base[href^="https://"]::after,
a.interactive-help--base[href^="https://"]::after,
a.interactive-meta-icon--base[href^="https://"]::after,
a.interactive-print--base[href^="https://"]::after,
a.interactive-receipt--base[href^="https://"]::after,
a.interactive-sourced--base[href^="https://"]::after,
a.interactive--invert[href^="https://"]::after,
a.interactive--primary[href^="https://"]::after,
a.interactive--disabled[href^="https://"]::after,
a.interactive--baseDisabled[href^="https://"]::after,
a.interactive--invertDisabled[href^="https://"]::after,
a.interactive-icon--invert[href^="https://"]::after,
a.interactive-icon--primary[href^="https://"]::after,
a.interactive-icon--disabled[href^="https://"]::after,
a.interactive-icon--baseDisabled[href^="https://"]::after,
a.interactive-icon--invertDisabled[href^="https://"]::after,
a.interactive-help[href^="https://"]::after,
a.interactive-help--invert[href^="https://"]::after,
a.interactive-help--primary[href^="https://"]::after,
a.interactive-help--disabled[href^="https://"]::after,
a.interactive-help--baseDisabled[href^="https://"]::after,
a.interactive-help--invertDisabled[href^="https://"]::after,
a.interactive-meta-icon[href^="https://"]::after,
a.interactive-meta-icon--invert[href^="https://"]::after,
a.interactive-meta-icon--primary[href^="https://"]::after,
a.interactive-meta-icon--disabled[href^="https://"]::after,
a.interactive-meta-icon--baseDisabled[href^="https://"]::after,
a.interactive-meta-icon--invertDisabled[href^="https://"]::after,
a.interactive-print--invert[href^="https://"]::after,
a.interactive-print--primary[href^="https://"]::after,
a.interactive-print--disabled[href^="https://"]::after,
a.interactive-print--baseDisabled[href^="https://"]::after,
a.interactive-print--invertDisabled[href^="https://"]::after,
a.interactive-print[href^="https://"]::after,
a.interactive-receipt[href^="https://"]::after,
a.interactive-receipt--invert[href^="https://"]::after,
a.interactive-receipt--primary[href^="https://"]::after,
a.interactive-receipt--disabled[href^="https://"]::after,
a.interactive-receipt--baseDisabled[href^="https://"]::after,
a.interactive-receipt--invertDisabled[href^="https://"]::after,
a.interactive-sourced[href^="https://"]::after,
a.interactive-sourced--invert[href^="https://"]::after,
a.interactive-sourced--primary[href^="https://"]::after,
a.interactive-sourced--disabled[href^="https://"]::after,
a.interactive-sourced--baseDisabled[href^="https://"]::after,
a.interactive-sourced--invertDisabled[href^="https://"]::after {
  content: url("../img/link_extern--white-on-transparent.svg");
}
a.interactive--base[href^="mailto:"]::after,
a.interactive-icon--base[href^="mailto:"]::after,
a.interactive-help--base[href^="mailto:"]::after,
a.interactive-meta-icon--base[href^="mailto:"]::after,
a.interactive-print--base[href^="mailto:"]::after,
a.interactive-receipt--base[href^="mailto:"]::after,
a.interactive-sourced--base[href^="mailto:"]::after,
a.interactive--invert[href^="mailto:"]::after,
a.interactive--primary[href^="mailto:"]::after,
a.interactive--disabled[href^="mailto:"]::after,
a.interactive--baseDisabled[href^="mailto:"]::after,
a.interactive--invertDisabled[href^="mailto:"]::after,
a.interactive-icon--invert[href^="mailto:"]::after,
a.interactive-icon--primary[href^="mailto:"]::after,
a.interactive-icon--disabled[href^="mailto:"]::after,
a.interactive-icon--baseDisabled[href^="mailto:"]::after,
a.interactive-icon--invertDisabled[href^="mailto:"]::after,
a.interactive-help[href^="mailto:"]::after,
a.interactive-help--invert[href^="mailto:"]::after,
a.interactive-help--primary[href^="mailto:"]::after,
a.interactive-help--disabled[href^="mailto:"]::after,
a.interactive-help--baseDisabled[href^="mailto:"]::after,
a.interactive-help--invertDisabled[href^="mailto:"]::after,
a.interactive-meta-icon[href^="mailto:"]::after,
a.interactive-meta-icon--invert[href^="mailto:"]::after,
a.interactive-meta-icon--primary[href^="mailto:"]::after,
a.interactive-meta-icon--disabled[href^="mailto:"]::after,
a.interactive-meta-icon--baseDisabled[href^="mailto:"]::after,
a.interactive-meta-icon--invertDisabled[href^="mailto:"]::after,
a.interactive-print--invert[href^="mailto:"]::after,
a.interactive-print--primary[href^="mailto:"]::after,
a.interactive-print--disabled[href^="mailto:"]::after,
a.interactive-print--baseDisabled[href^="mailto:"]::after,
a.interactive-print--invertDisabled[href^="mailto:"]::after,
a.interactive-print[href^="mailto:"]::after,
a.interactive-receipt[href^="mailto:"]::after,
a.interactive-receipt--invert[href^="mailto:"]::after,
a.interactive-receipt--primary[href^="mailto:"]::after,
a.interactive-receipt--disabled[href^="mailto:"]::after,
a.interactive-receipt--baseDisabled[href^="mailto:"]::after,
a.interactive-receipt--invertDisabled[href^="mailto:"]::after,
a.interactive-sourced[href^="mailto:"]::after,
a.interactive-sourced--invert[href^="mailto:"]::after,
a.interactive-sourced--primary[href^="mailto:"]::after,
a.interactive-sourced--disabled[href^="mailto:"]::after,
a.interactive-sourced--baseDisabled[href^="mailto:"]::after,
a.interactive-sourced--invertDisabled[href^="mailto:"]::after {
  content: url("../img/link_mailto--white-on-transparent.svg");
}
.interactive--base:focus,
.interactive-icon--base:focus,
.interactive-help--base:focus,
.interactive-meta-icon--base:focus,
.interactive-print--base:focus,
.interactive-receipt--base:focus,
.interactive-sourced--base:focus,
.interactive--invert:focus,
.interactive--primary:focus,
.interactive--disabled:focus,
.interactive--baseDisabled:focus,
.interactive--invertDisabled:focus,
.interactive-icon--invert:focus,
.interactive-icon--primary:focus,
.interactive-icon--disabled:focus,
.interactive-icon--baseDisabled:focus,
.interactive-icon--invertDisabled:focus,
.interactive-help:focus,
.interactive-help--invert:focus,
.interactive-help--primary:focus,
.interactive-help--disabled:focus,
.interactive-help--baseDisabled:focus,
.interactive-help--invertDisabled:focus,
.interactive-meta-icon:focus,
.interactive-meta-icon--invert:focus,
.interactive-meta-icon--primary:focus,
.interactive-meta-icon--disabled:focus,
.interactive-meta-icon--baseDisabled:focus,
.interactive-meta-icon--invertDisabled:focus,
.interactive-print--invert:focus,
.interactive-print--primary:focus,
.interactive-print--disabled:focus,
.interactive-print--baseDisabled:focus,
.interactive-print--invertDisabled:focus,
.interactive-print:focus,
.interactive-receipt:focus,
.interactive-receipt--invert:focus,
.interactive-receipt--primary:focus,
.interactive-receipt--disabled:focus,
.interactive-receipt--baseDisabled:focus,
.interactive-receipt--invertDisabled:focus,
.interactive-sourced:focus,
.interactive-sourced--invert:focus,
.interactive-sourced--primary:focus,
.interactive-sourced--disabled:focus,
.interactive-sourced--baseDisabled:focus,
.interactive-sourced--invertDisabled:focus,
.login-box .interactive-icon--base:focus {
  border-style: dotted;
  border-color: var(--color-interaction);
  outline: 0;
}
.interactive--invert,
.interactive-icon--invert,
.interactive-help--invert,
.interactive-meta-icon--invert,
.interactive-print--invert,
.interactive-receipt--invert,
.interactive-sourced--invert,
.interactive-print {
  background-color: var(--color-bodyBackground);
  border-color: var(--color-interaction);
}
.interactive--primary,
.interactive-icon--primary,
.interactive-help--primary,
.interactive-meta-icon--primary,
.interactive-print--primary,
.interactive-receipt--primary,
.interactive-sourced--primary,
.interactive-help,
.interactive-meta-icon,
.interactive-receipt,
.interactive-sourced {
  background-color: var(--color-interaction-light);
  border-color: var(--color-interaction-light);
  color: var(--color-text-light);
}
.interactive--primary:focus,
.interactive-icon--primary:focus,
.interactive-help--primary:focus,
.interactive-meta-icon--primary:focus,
.interactive-print--primary:focus,
.interactive-receipt--primary:focus,
.interactive-sourced--primary:focus,
.interactive-help:focus,
.interactive-meta-icon:focus,
.interactive-receipt:focus,
.interactive-sourced:focus {
  border-color: var(--color-bodyBackground);
  border-style: dotted;
}
.interactive--disabled,
.interactive-icon--disabled,
.interactive-help--disabled,
.interactive-meta-icon--disabled,
.interactive-print--disabled,
.interactive-receipt--disabled,
.interactive-sourced--disabled,
.interactive--baseDisabled,
.interactive--invertDisabled,
.interactive-icon--baseDisabled,
.interactive-icon--invertDisabled,
.interactive-help--baseDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon--baseDisabled,
.interactive-meta-icon--invertDisabled,
.interactive-print--baseDisabled,
.interactive-print--invertDisabled,
.interactive-receipt--baseDisabled,
.interactive-receipt--invertDisabled,
.interactive-sourced--baseDisabled,
.interactive-sourced--invertDisabled {
  background-color: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-bodyBackground);
}
.interactive--baseDisabled,
.interactive-icon--baseDisabled,
.interactive-help--baseDisabled,
.interactive-meta-icon--baseDisabled,
.interactive-print--baseDisabled,
.interactive-receipt--baseDisabled,
.interactive-sourced--baseDisabled,
.interactive--invertDisabled,
.interactive-icon--invertDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon--invertDisabled,
.interactive-print--invertDisabled,
.interactive-receipt--invertDisabled,
.interactive-sourced--invertDisabled {
  background-color: var(--color-triple242);
  border-color: var(--color-triple242);
  color: var(--color-disabled);
}
.interactive--invertDisabled,
.interactive-icon--invertDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon--invertDisabled,
.interactive-print--invertDisabled,
.interactive-receipt--invertDisabled,
.interactive-sourced--invertDisabled {
  border-color: var(--color-disabled);
}
.interactive--plainDisabled,
.interactive-icon--plainDisabled,
.interactive-help--plainDisabled,
.interactive-meta-icon--plainDisabled,
.interactive-print--plainDisabled,
.interactive-receipt--plainDisabled,
.interactive-sourced--plainDisabled {
  text-align: left;
  color: var(--color-disabled);
}
.interactive--disabled.interactive.interactive--disabled.interactive--disabled.interactive,
.interactive-icon--disabled.interactive-icon.interactive-icon--disabled.interactive-icon--disabled.interactive-icon,
.interactive-help--disabled.interactive-help.interactive-help--disabled.interactive-help--disabled.interactive-help,
.interactive-meta-icon--disabled.interactive-meta-icon.interactive-meta-icon--disabled.interactive-meta-icon--disabled.interactive-meta-icon,
.interactive-print--disabled.interactive-print.interactive-print--disabled.interactive-print--disabled.interactive-print,
.interactive-receipt--disabled.interactive-receipt.interactive-receipt--disabled.interactive-receipt--disabled.interactive-receipt,
.interactive-sourced--disabled.interactive-sourced.interactive-sourced--disabled.interactive-sourced--disabled.interactive-sourced,
.interactive--baseDisabled.interactive.interactive--baseDisabled.interactive--baseDisabled.interactive,
.interactive-icon--baseDisabled.interactive-icon.interactive-icon--baseDisabled.interactive-icon--baseDisabled.interactive-icon,
.interactive-help--baseDisabled.interactive-help.interactive-help--baseDisabled.interactive-help--baseDisabled.interactive-help,
.interactive-meta-icon--baseDisabled.interactive-meta-icon.interactive-meta-icon--baseDisabled.interactive-meta-icon--baseDisabled.interactive-meta-icon,
.interactive-print--baseDisabled.interactive-print.interactive-print--baseDisabled.interactive-print--baseDisabled.interactive-print,
.interactive-receipt--baseDisabled.interactive-receipt.interactive-receipt--baseDisabled.interactive-receipt--baseDisabled.interactive-receipt,
.interactive-sourced--baseDisabled.interactive-sourced.interactive-sourced--baseDisabled.interactive-sourced--baseDisabled.interactive-sourced,
.interactive--invertDisabled.interactive.interactive--invertDisabled.interactive--invertDisabled.interactive,
.interactive-icon--invertDisabled.interactive-icon.interactive-icon--invertDisabled.interactive-icon--invertDisabled.interactive-icon,
.interactive-help--invertDisabled.interactive-help.interactive-help--invertDisabled.interactive-help--invertDisabled.interactive-help,
.interactive-meta-icon--invertDisabled.interactive-meta-icon.interactive-meta-icon--invertDisabled.interactive-meta-icon--invertDisabled.interactive-meta-icon,
.interactive-print--invertDisabled.interactive-print.interactive-print--invertDisabled.interactive-print--invertDisabled.interactive-print,
.interactive-receipt--invertDisabled.interactive-receipt.interactive-receipt--invertDisabled.interactive-receipt--invertDisabled.interactive-receipt,
.interactive-sourced--invertDisabled.interactive-sourced.interactive-sourced--invertDisabled.interactive-sourced--invertDisabled.interactive-sourced,
.interactive--plainDisabled.interactive.interactive--plainDisabled.interactive--plainDisabled.interactive,
.interactive-icon--plainDisabled.interactive-icon.interactive-icon--plainDisabled.interactive-icon--plainDisabled.interactive-icon,
.interactive-help--plainDisabled.interactive-help.interactive-help--plainDisabled.interactive-help--plainDisabled.interactive-help,
.interactive-meta-icon--plainDisabled.interactive-meta-icon.interactive-meta-icon--plainDisabled.interactive-meta-icon--plainDisabled.interactive-meta-icon,
.interactive-print--plainDisabled.interactive-print.interactive-print--plainDisabled.interactive-print--plainDisabled.interactive-print,
.interactive-receipt--plainDisabled.interactive-receipt.interactive-receipt--plainDisabled.interactive-receipt--plainDisabled.interactive-receipt,
.interactive-sourced--plainDisabled.interactive-sourced.interactive-sourced--plainDisabled.interactive-sourced--plainDisabled.interactive-sourced {
  cursor: default;
  text-decoration: none;
}
.interactive-icon.interactive-icon--only.interactive-icon--invertDisabled.interactive-icon--invert,
.interactive-icon-icon.interactive-icon-icon--only.interactive-icon-icon--invertDisabled.interactive-icon-icon--invert,
.interactive-help-icon.interactive-help-icon--only.interactive-help-icon--invertDisabled.interactive-help-icon--invert,
.interactive-meta-icon-icon.interactive-meta-icon-icon--only.interactive-meta-icon-icon--invertDisabled.interactive-meta-icon-icon--invert,
.interactive-print-icon.interactive-print-icon--only.interactive-print-icon--invertDisabled.interactive-print-icon--invert,
.interactive-receipt-icon.interactive-receipt-icon--only.interactive-receipt-icon--invertDisabled.interactive-receipt-icon--invert,
.interactive-sourced-icon.interactive-sourced-icon--only.interactive-sourced-icon--invertDisabled.interactive-sourced-icon--invert {
  border-color: inherit;
  border-radius: 0.18rem;
}
.interactive-icon.interactive-icon--only.interactive-icon--invertDisabled.interactive-icon--rounded,
.interactive-icon-icon.interactive-icon-icon--only.interactive-icon-icon--invertDisabled.interactive-icon-icon--rounded,
.interactive-help-icon.interactive-help-icon--only.interactive-help-icon--invertDisabled.interactive-help-icon--rounded,
.interactive-meta-icon-icon.interactive-meta-icon-icon--only.interactive-meta-icon-icon--invertDisabled.interactive-meta-icon-icon--rounded,
.interactive-print-icon.interactive-print-icon--only.interactive-print-icon--invertDisabled.interactive-print-icon--rounded,
.interactive-receipt-icon.interactive-receipt-icon--only.interactive-receipt-icon--invertDisabled.interactive-receipt-icon--rounded,
.interactive-sourced-icon.interactive-sourced-icon--only.interactive-sourced-icon--invertDisabled.interactive-sourced-icon--rounded {
  border-radius: 50%;
}
.interactive--cornered,
.interactive-icon--cornered,
.interactive-help--cornered,
.interactive-meta-icon--cornered,
.interactive-print--cornered,
.interactive-receipt--cornered,
.interactive-sourced--cornered,
.interactive-meta-icon {
  border-radius: 0;
}
.interactive--truncate,
.interactive-icon--truncate,
.interactive-help--truncate,
.interactive-meta-icon--truncate,
.interactive-print--truncate,
.interactive-receipt--truncate,
.interactive-sourced--truncate {
  max-width: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
a.interactive--truncate[href^="http://"],
a.interactive-icon--truncate[href^="http://"],
a.interactive-help--truncate[href^="http://"],
a.interactive-meta-icon--truncate[href^="http://"],
a.interactive-print--truncate[href^="http://"],
a.interactive-receipt--truncate[href^="http://"],
a.interactive-sourced--truncate[href^="http://"],
a.interactive--truncate[href^="https://"],
a.interactive-icon--truncate[href^="https://"],
a.interactive-help--truncate[href^="https://"],
a.interactive-meta-icon--truncate[href^="https://"],
a.interactive-print--truncate[href^="https://"],
a.interactive-receipt--truncate[href^="https://"],
a.interactive-sourced--truncate[href^="https://"] {
  padding-right: 1.25rem;
}
a.interactive--truncate[href^="http://"]::after,
a.interactive-icon--truncate[href^="http://"]::after,
a.interactive-help--truncate[href^="http://"]::after,
a.interactive-meta-icon--truncate[href^="http://"]::after,
a.interactive-print--truncate[href^="http://"]::after,
a.interactive-receipt--truncate[href^="http://"]::after,
a.interactive-sourced--truncate[href^="http://"]::after,
a.interactive--truncate[href^="https://"]::after,
a.interactive-icon--truncate[href^="https://"]::after,
a.interactive-help--truncate[href^="https://"]::after,
a.interactive-meta-icon--truncate[href^="https://"]::after,
a.interactive-print--truncate[href^="https://"]::after,
a.interactive-receipt--truncate[href^="https://"]::after,
a.interactive-sourced--truncate[href^="https://"]::after {
  display: none;
}
a.interactive--truncate[href^="http://"]::before,
a.interactive-icon--truncate[href^="http://"]::before,
a.interactive-help--truncate[href^="http://"]::before,
a.interactive-meta-icon--truncate[href^="http://"]::before,
a.interactive-print--truncate[href^="http://"]::before,
a.interactive-receipt--truncate[href^="http://"]::before,
a.interactive-sourced--truncate[href^="http://"]::before,
a.interactive--truncate[href^="https://"]::before,
a.interactive-icon--truncate[href^="https://"]::before,
a.interactive-help--truncate[href^="https://"]::before,
a.interactive-meta-icon--truncate[href^="https://"]::before,
a.interactive-print--truncate[href^="https://"]::before,
a.interactive-receipt--truncate[href^="https://"]::before,
a.interactive-sourced--truncate[href^="https://"]::before {
  content: var(--url-linkExtern);
  float: right;
  margin-right: -1.25rem;
}
a.interactive--truncate[href^="mailto:"]::after,
a.interactive-icon--truncate[href^="mailto:"]::after,
a.interactive-help--truncate[href^="mailto:"]::after,
a.interactive-meta-icon--truncate[href^="mailto:"]::after,
a.interactive-print--truncate[href^="mailto:"]::after,
a.interactive-receipt--truncate[href^="mailto:"]::after,
a.interactive-sourced--truncate[href^="mailto:"]::after {
  display: none;
}
a.interactive--truncate[href^="mailto:"]::before,
a.interactive-icon--truncate[href^="mailto:"]::before,
a.interactive-help--truncate[href^="mailto:"]::before,
a.interactive-meta-icon--truncate[href^="mailto:"]::before,
a.interactive-print--truncate[href^="mailto:"]::before,
a.interactive-receipt--truncate[href^="mailto:"]::before,
a.interactive-sourced--truncate[href^="mailto:"]::before {
  content: var(--url-linkMailto);
  float: right;
  margin-right: -1.25rem;
}
.interactive--\@visited,
.interactive-icon--\@visited,
.interactive-help--\@visited,
.interactive-meta-icon--\@visited,
.interactive-print--\@visited,
.interactive-receipt--\@visited,
.interactive-sourced--\@visited {
  font-weight: normal;
}
.interactive--\@inline,
.interactive-icon--\@inline,
.interactive-help--\@inline,
.interactive-meta-icon--\@inline,
.interactive-print--\@inline,
.interactive-receipt--\@inline,
.interactive-sourced--\@inline {
  width: auto;
  display: inline-block;
}
.interactive--\@block,
.interactive-icon--\@block,
.interactive-help--\@block,
.interactive-meta-icon--\@block,
.interactive-print--\@block,
.interactive-receipt--\@block,
.interactive-sourced--\@block {
  width: 100%;
  display: block;
}
.edge.edgehtml .interactive[href^="http://"],
.edge.edgehtml .interactive[href^="https://"],
.edge.edgehtml .interactive[href^="mailto:"] {
  width: auto;
}
/*
Interactive Icon

Alle Eigenschaften sind von dem Basisblock __interactive__ abgeleitet.

Um zwischen verschiedenen Icons zu wechseln (bspw. beim hovern), kann dem Interactive-Icon das ```data-icons``` Attribut gegeben werden.
Dieses Attribut muss ein JSON-String sein, in dem ein Standard-Icon (```default```) sowie optional die Zustände der
Icons für den aktiven (```active```) und inaktiven (```inactive```) Zustand festgelegt werden.
In den Zuständen werden die Namen der Icons für die ```base```- sowie die ```hover```-Variante
festgelegt. Die ```hover```-Variante ist hierbei optional.

#### Für IE11
Button mit dem langen Wording, die in Alignment Komponente angeordnet sind, brechen in IE11 anders um.
Button werden immer rechts oder links platziert, statt ganze freie Breite von der Seite zu besetzen. Beispiele befinden sich in der Alignment Sektion


reverse - Für verlinkten Blockinhalt
centered - Icon und Text zentriert
only - Nur Icon
vertical-center - Vertical zentrierte Ausrichtung
flush - kein Abstand nach links

markup: demo.interactive.icon.html

Styleguide ###interaktiveElemente.interactive.icon###
*/
/*
Interactive Icon Only


only - Nur Icon
rounded - Abgerundetete Ecken (nur in Verbindung mit only)
cornered - Keine abgerundeten Ecken (nur in Verbindung mit only)

markup: demo.interactive.icononly.html

Styleguide ###interaktiveElemente.interactive.icononly###
*/
.interactive-icon--only.interactive-icon--primary:hover,
.interactive-icon--only.interactive-icon--invert:hover,
.interactive-help--only.interactive-help--primary:hover,
.interactive-help--only.interactive-help--invert:hover,
.interactive-meta-icon--only.interactive-meta-icon--primary:hover,
.interactive-meta-icon--only.interactive-meta-icon--invert:hover,
.interactive-receipt--only.interactive-receipt--primary:hover,
.interactive-receipt--only.interactive-receipt--invert:hover,
.interactive-sourced--only.interactive-sourced--primary:hover,
.interactive-sourced--only.interactive-sourced--invert:hover,
.interactive-icon--only.interactive-icon--primary:active,
.interactive-icon--only.interactive-icon--invert:active,
.interactive-help--only.interactive-help--primary:active,
.interactive-help--only.interactive-help--invert:active,
.interactive-meta-icon--only.interactive-meta-icon--primary:active,
.interactive-meta-icon--only.interactive-meta-icon--invert:active,
.interactive-receipt--only.interactive-receipt--primary:active,
.interactive-receipt--only.interactive-receipt--invert:active,
.interactive-sourced--only.interactive-sourced--primary:active,
.interactive-sourced--only.interactive-sourced--invert:active {
  border-radius: 50%;
}
.interactive-icon--only.interactive-icon--primary:focus,
.interactive-icon--only.interactive-icon--invert:focus,
.interactive-help--only.interactive-help--primary:focus,
.interactive-help--only.interactive-help--invert:focus,
.interactive-meta-icon--only.interactive-meta-icon--primary:focus,
.interactive-meta-icon--only.interactive-meta-icon--invert:focus,
.interactive-receipt--only.interactive-receipt--primary:focus,
.interactive-receipt--only.interactive-receipt--invert:focus,
.interactive-sourced--only.interactive-sourced--primary:focus,
.interactive-sourced--only.interactive-sourced--invert:focus {
  outline: 1px dotted var(--color-interaction);
  border-style: solid;
  border-radius: 50%;
}
.interactive-icon--rounded.interactive-icon--invert:hover,
.interactive-icon--rounded.interactive-icon--primary:hover,
.interactive-help--rounded.interactive-help--invert:hover,
.interactive-help--rounded.interactive-help--primary:hover,
.interactive-help:hover,
.interactive-meta-icon--rounded.interactive-meta-icon--invert:hover,
.interactive-meta-icon--rounded.interactive-meta-icon--primary:hover,
.interactive-receipt--rounded.interactive-receipt--invert:hover,
.interactive-receipt--rounded.interactive-receipt--primary:hover,
.interactive-sourced--rounded.interactive-sourced--invert:hover,
.interactive-sourced--rounded.interactive-sourced--primary:hover,
.interactive-sourced:hover,
.interactive-icon--rounded.interactive-icon--invert:focus,
.interactive-icon--rounded.interactive-icon--primary:focus,
.interactive-help--rounded.interactive-help--invert:focus,
.interactive-help--rounded.interactive-help--primary:focus,
.interactive-help:focus,
.interactive-meta-icon--rounded.interactive-meta-icon--invert:focus,
.interactive-meta-icon--rounded.interactive-meta-icon--primary:focus,
.interactive-receipt--rounded.interactive-receipt--invert:focus,
.interactive-receipt--rounded.interactive-receipt--primary:focus,
.interactive-sourced--rounded.interactive-sourced--invert:focus,
.interactive-sourced--rounded.interactive-sourced--primary:focus,
.interactive-sourced:focus {
  border-radius: 0.18rem;
  border-color: transparent;
}
.interactive-help:focus,
.interactive-sourced:focus {
  border-color: var(--color-bodyBackground);
}
.interactive-icon,
.interactive-help,
.interactive-meta-icon,
.interactive-receipt,
.interactive-sourced {
  padding-left: 0.5rem;
  text-align: left;
}
a.interactive-icon[href^="http://"]::after,
a.interactive-help[href^="http://"]::after,
a.interactive-meta-icon[href^="http://"]::after,
a.interactive-receipt[href^="http://"]::after,
a.interactive-sourced[href^="http://"]::after,
a.interactive-icon[href^="https://"]::after,
a.interactive-help[href^="https://"]::after,
a.interactive-meta-icon[href^="https://"]::after,
a.interactive-receipt[href^="https://"]::after,
a.interactive-sourced[href^="https://"]::after {
  display: none;
}
a.interactive-icon[href^="http://"] .interactive-icon__wrap::after,
a.interactive-help[href^="http://"] .interactive-help__wrap::after,
a.interactive-meta-icon[href^="http://"] .interactive-meta-icon__wrap::after,
a.interactive-receipt[href^="http://"] .interactive-receipt__wrap::after,
a.interactive-sourced[href^="http://"] .interactive-sourced__wrap::after,
a.interactive-icon[href^="https://"] .interactive-icon__wrap::after,
a.interactive-help[href^="https://"] .interactive-help__wrap::after,
a.interactive-meta-icon[href^="https://"] .interactive-meta-icon__wrap::after,
a.interactive-receipt[href^="https://"] .interactive-receipt__wrap::after,
a.interactive-sourced[href^="https://"] .interactive-sourced__wrap::after {
  content: var(--url-linkExtern);
  padding-left: 0.25rem;
}
a.interactive-icon[href^="mailto:"]::after,
a.interactive-help[href^="mailto:"]::after,
a.interactive-meta-icon[href^="mailto:"]::after,
a.interactive-receipt[href^="mailto:"]::after,
a.interactive-sourced[href^="mailto:"]::after {
  display: none;
}
a.interactive-icon[href^="mailto:"] .interactive-icon__wrap::after,
a.interactive-help[href^="mailto:"] .interactive-help__wrap::after,
a.interactive-meta-icon[href^="mailto:"] .interactive-meta-icon__wrap::after,
a.interactive-receipt[href^="mailto:"] .interactive-receipt__wrap::after,
a.interactive-sourced[href^="mailto:"] .interactive-sourced__wrap::after {
  content: var(--url-linkMailto);
  padding-left: 0.25rem;
}
.interactive-icon__wrap,
.interactive-help__wrap,
.interactive-meta-icon__wrap,
.interactive-receipt__wrap,
.interactive-sourced__wrap {
  display: flex;
  align-items: flex-start;
}
.interactive-icon--reverse,
.interactive-help--reverse,
.interactive-meta-icon--reverse,
.interactive-receipt--reverse,
.interactive-sourced--reverse {
  padding-left: 0.93rem;
  padding-right: 0.5rem;
  text-align: right;
}
.interactive-icon--reverse .interactive-icon__wrap .icon,
.interactive-help--reverse .interactive-help__wrap .icon,
.interactive-meta-icon--reverse .interactive-meta-icon__wrap .icon,
.interactive-receipt--reverse .interactive-receipt__wrap .icon,
.interactive-sourced--reverse .interactive-sourced__wrap .icon {
  order: 1;
}
.interactive-icon--reverse .interactive-icon__text,
.interactive-help--reverse .interactive-help__text,
.interactive-meta-icon--reverse .interactive-meta-icon__text,
.interactive-receipt--reverse .interactive-receipt__text,
.interactive-sourced--reverse .interactive-sourced__text {
  margin-left: 0;
  margin-right: 0.37rem;
}
.interactive-icon--centered .interactive-icon__wrap,
.interactive-help--centered .interactive-help__wrap,
.interactive-meta-icon--centered .interactive-meta-icon__wrap,
.interactive-receipt--centered .interactive-receipt__wrap,
.interactive-sourced--centered .interactive-sourced__wrap {
  justify-content: center;
}
.interactive-icon--only,
.interactive-help--only,
.interactive-meta-icon--only,
.interactive-receipt--only,
.interactive-sourced--only,
.interactive-help,
.interactive-receipt,
.interactive-sourced {
  padding: 0.5rem;
  transition: border-radius 0.25s ease-in;
  width: auto;
  display: inline-block;
}
.interactive-icon--rounded,
.interactive-help--rounded,
.interactive-meta-icon--rounded,
.interactive-receipt--rounded,
.interactive-sourced--rounded,
.interactive-help,
.interactive-sourced {
  border-radius: 50%;
}
.interactive-icon--cornered,
.interactive-help--cornered,
.interactive-meta-icon--cornered,
.interactive-receipt--cornered,
.interactive-sourced--cornered,
.interactive-meta-icon {
  border-radius: 0;
}
.interactive-icon--truncate .interactive-icon__text,
.interactive-help--truncate .interactive-help__text,
.interactive-meta-icon--truncate .interactive-meta-icon__text,
.interactive-receipt--truncate .interactive-receipt__text,
.interactive-sourced--truncate .interactive-sourced__text {
  max-width: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
a.interactive-icon--truncate[href^="http://"]::before,
a.interactive-help--truncate[href^="http://"]::before,
a.interactive-meta-icon--truncate[href^="http://"]::before,
a.interactive-receipt--truncate[href^="http://"]::before,
a.interactive-sourced--truncate[href^="http://"]::before,
a.interactive-icon--truncate[href^="https://"]::before,
a.interactive-help--truncate[href^="https://"]::before,
a.interactive-meta-icon--truncate[href^="https://"]::before,
a.interactive-receipt--truncate[href^="https://"]::before,
a.interactive-sourced--truncate[href^="https://"]::before {
  display: none;
}
a.interactive-icon--truncate[href^="mailto:"]::before,
a.interactive-help--truncate[href^="mailto:"]::before,
a.interactive-meta-icon--truncate[href^="mailto:"]::before,
a.interactive-receipt--truncate[href^="mailto:"]::before,
a.interactive-sourced--truncate[href^="mailto:"]::before {
  display: none;
}
.interactive-icon--flush,
.interactive-help--flush,
.interactive-meta-icon--flush,
.interactive-receipt--flush,
.interactive-sourced--flush {
  padding-left: 0;
}
.interactive-icon--only.interactive-icon--invert:hover,
.interactive-help--only.interactive-help--invert:hover,
.interactive-meta-icon--only.interactive-meta-icon--invert:hover,
.interactive-receipt--only.interactive-receipt--invert:hover,
.interactive-sourced--only.interactive-sourced--invert:hover {
  border-color: var(--color-interaction);
}
.interactive-icon--no-padding,
.interactive-help--no-padding,
.interactive-meta-icon--no-padding,
.interactive-receipt--no-padding,
.interactive-sourced--no-padding,
.interactive-help,
.interactive-meta-icon,
.interactive-sourced {
  padding: 0;
}
.interactive-icon--vertical-center .interactive-icon__wrap,
.interactive-help--vertical-center .interactive-help__wrap,
.interactive-meta-icon--vertical-center .interactive-meta-icon__wrap,
.interactive-receipt--vertical-center .interactive-receipt__wrap,
.interactive-sourced--vertical-center .interactive-sourced__wrap {
  align-items: center;
}
.interactive-icon__text,
.interactive-help__text,
.interactive-meta-icon__text,
.interactive-receipt__text,
.interactive-sourced__text {
  margin-left: 0.37rem;
}
.interactive-icon__icon,
.interactive-help__icon,
.interactive-meta-icon__icon,
.interactive-receipt__icon,
.interactive-sourced__icon {
  display: flex;
  flex-shrink: 0;
  pointer-events: none;
  margin-top: 0.06rem;
}
.interactive-icon__icon--title,
.interactive-help__icon--title,
.interactive-meta-icon__icon--title,
.interactive-receipt__icon--title,
.interactive-sourced__icon--title {
  pointer-events: all;
}
.interactive-icon .icon__svg,
.interactive-help .icon__svg,
.interactive-meta-icon .icon__svg,
.interactive-receipt .icon__svg,
.interactive-sourced .icon__svg,
.interactive-icon .icon__svg::before,
.interactive-help .icon__svg::before,
.interactive-meta-icon .icon__svg::before,
.interactive-receipt .icon__svg::before,
.interactive-sourced .icon__svg::before {
  display: block;
}
/*
Tabelle - CMS

Die Tabelle besteht mindestens aus den Tabellenkopftiteln und dem Tabelleninhalt.

markup: demo.table.html

Styleguide ###basics.table###
*/
.table__el,
.table-wrap__el,
.table-collapse__el {
  border-collapse: collapse;
  width: 100%;
}
.table__caption,
.table-wrap__caption,
.table-collapse__caption {
  text-align: left;
}
.table table,
.table-wrap table,
.table-collapse table {
  border-collapse: collapse;
}
.table td,
.table-wrap td,
.table-collapse td,
.table th,
.table-wrap th,
.table-collapse th {
  padding: 0.5rem;
}
.table th,
.table-wrap th,
.table-collapse th {
  padding-bottom: 0.75rem;
  font-size: 0.87rem;
  text-align: left;
  border-top: 3px solid var(--color-triple248);
  border-bottom: 3px solid var(--color-triple248);
}
.table td,
.table-wrap td,
.table-collapse td {
  border-top: 3px solid var(--color-bodyBackground);
  background-color: var(--color-triple248);
}
.table td ul,
.table-wrap td ul,
.table-collapse td ul {
  margin: 0 auto;
  padding-left: 1rem;
}
.table thead,
.table-wrap thead,
.table-collapse thead,
.table tbody,
.table-wrap tbody,
.table-collapse tbody {
  font-size: 0.87rem;
}
.table thead th,
.table-wrap thead th,
.table-collapse thead th {
  border-top: 1px solid var(--color-triple178);
  box-shadow: inset 0 -4px 0 0 var(--color-triple178);
}
.table tbody,
.table-wrap tbody,
.table-collapse tbody {
  vertical-align: top;
}
.firefox .table-wrap td .interactive[href^="http://"],
.edge.edgehtml .table-wrap td .interactive[href^="http://"],
.firefox .table-wrap td .interactive[href^="https://"],
.edge.edgehtml .table-wrap td .interactive[href^="https://"] {
  display: inline-flex;
}
/*
Tabelle - Collapse

Die Tabellenzellen können aus Text oder weiteren Mixins bestehen.
Eine Tabelle kann auch alternative Tabellenkopftitel für die mobile Ansicht entgegen nehmen.


__Erzeugen einer responsiven Tabelle__:
- Jedes ```td``` Element im Tabellenkörper benötigt ein data-rwd Attribut mit dazugehörigen Text
- __ --> __ Der übergebene Text wird in der mobilen Ansicht ausgegeben

- In TDs und THs können Inhalte mit dem Modifier **.table-collapse--txtRight** rechts oder **.table-collapse--txtCenter** zentriert ausgerichtet werden. Default-Einstellung ist links.
- THs können den Modifier **.table-collapse--width-100** erhalten, so dass diese Spalte den meisten Platz innerhalb der Tabelle bekommt.
- mit Hilfe des Modifiers **.table-collapse--fixed** und den TH-Klassen **.table-collapse__thWidth-{width}** können Spalten festgelegte Breiten bekommen, welche sich in der Summe 100% teilen.


__Tabelle - Collapse mit Selektion-Aktionen__

Jede Aktion kann 3 verschiedene Modale haben: Kein Element ausgewählt, 1 Element ausgewählt, 2+ Elemente ausgewählt.
Der Titel von jedem Modal kann geändert werden. Achtung: wenn ein Button den Titel eines Modals verändert, bleibt dieser verändert!
Wenn also 2 Buttons das gleiche Modal verwenden und einer der Buttons den Titel verändert, sollte der zweite Button den Titel wieder zurücksetzen.

Ein Button der mit Selektierten Items arbeitet, braucht den data-selector="interactive.tableCollapse.selection*".
Ein Button dessen Aktion vorher bestätigt werden muss, wie z.B. Löschen, braucht das Attribut "data-needs-confirmation"="true".
Daraus entstehen 8 Konfigurationsparameter für jeden Aktions-Button:

Pflicht:
- "data-selector"="interactive.tableCollapse.selection"

Optional:
- "data-modal-single-selection"="Beispiel modal-data-selector"
- "data-modal-no-selection"="Beispiel modal-data-selector"
- "data-modal-multi-selection"="Beispiel modal-data-selector"
- "data-modal-single-selection-title"="Beispiel Modal Titel"
- "data-modal-no-selection-title"="Beispiel Modal Titel"
- "data-modal-multi-selection-title"="Beispiel Modal Titel"
- "data-needs-confirmation"="true"

Wenn es Standard-Modale gibt, die für jede Aktion gleich sind, wie z.B. Kein Element ausgewählt, können die Modal-Selektoren weggelassen werden.
In dem Fall muss das entsprechende Modal mit einem der Standard-Selektoren anfangen:
- data-selector="modal.singleSelection"
- data-selector="modal.noSelection"
- data-selector="modal.multiSelection"

Multi-Selection Modale
- Wenn mehr als ein Element ausgewählt ist, kann die Anzahl der ausgewählten Elemente angezeigt werden. Für die Anzeige in dem Modal, kann ein Element
(z.B. span) mit data-selector="_modal.confirmSelection.selectedCounter" verwendet werden. Der entsprechende Wert wird aus dem Element mit
data-selector="_tableCollapse.selectedRowsCounter" ausgelesen.

markup: demo.table-collapse.html

Styleguide ###basics.table.tableCollapse###
*/
/*
Interactive Help

Interactive zum Öffnen der kontextsensitiven Hilfe
#### Ausprägungen
- Hilfe als Icon
- Glossar als Icon

#### Funktionsweise
- Der data-selector ```interactive.help.open``` dient zur Deklaraion der Komponenten API
- Die Komponente löst ein Event aus, das zum Öffnen der kontextsensitiven Hilfe in der Sidebar führt.
- Im Datenattribut ```data-url``` ist der jeweilige Endpoint hinterlegt, an dem ein GET Request ausgelöst wird.
- Die Daten aus der Antwort werden in den Inhaltsbereich der Kontexthilfe gerendert.
- Ohne JavaScript erfolgt ein Routing zum href-Attribut

Im Styleguide geht die Anfrage gegen eine statische HTML Seite (misc/assets/contexthelp.html)

markup: demo.interactive-help.html

Styleguide ###squads.interactiveHelp###
*/
.interactive-help,
.interactive-sourced {
  vertical-align: sub;
  margin-right: 0.12rem;
  margin-left: 0.12rem;
}
.interactive-help .icon,
.interactive-sourced .icon {
  margin-top: 0;
}
h1 .interactive-help,
h1 .interactive-sourced,
h2 .interactive-help,
h2 .interactive-sourced,
h3 .interactive-help,
h3 .interactive-sourced,
h4 .interactive-help,
h4 .interactive-sourced,
h5 .interactive-help,
h5 .interactive-sourced {
  margin-left: 0.25rem;
}
h1 .interactive-help,
h1 .interactive-sourced,
h2 .interactive-help,
h2 .interactive-sourced {
  vertical-align: baseline;
}
h1 .interactive-help,
h1 .interactive-sourced {
  padding: 0.06rem;
}
/*
Interactive Meta Icon

Interactive Icons für die Metabar in FormItem

markup: demo.interactive-meta-icon.html


Styleguide ###squads.interactiveMetaIcon###
*/
.interactive-meta-icon {
  padding-right: 0.31rem;
}
.interactive-meta-icon__text {
  margin-left: 0.12rem;
  font-size: 0.75rem;
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.toc__listItem {
  padding-top: 0.25rem;
}
.toc__listItem > a {
  margin-left: 1rem;
}
.toc__listItem ._helper-iconLeft > *:last-child {
  flex: 0 1 auto;
}
.toc__innerItems {
  list-style: none;
  padding-left: 1rem;
}
.toc__innerItems--closed {
  display: none;
}
.toc__innerItems a {
  font-weight: normal;
}
.toc a {
  font-size: 0.87rem;
  color: var(--color-text);
  position: relative;
  display: inline-block;
}
.toc .icon {
  cursor: pointer;
}
.toc .icon:focus {
  outline: 1px dotted var(--color-interaction);
}
.toc .icon + a {
  left: 0;
}
/*
Icon Definition List

Liste bestehend aus einem umschließenden div-Tag mit dem Data-Selector "icondefinition".
Die Definitionsliste besteht einem dl-Tag und einem oder mehreren **icondefinition__item**. Diese Item müssen aus einem dt-tag
und einem darauffolgenden dd-Tag bestehen.

Wenn Items versteckt werden sollen, muss die Klasse **icondefinition__item--hidden** an das Item zusätzlich gesetzt werden.
Zum Wiedereinblenden wird ein Link mit Data-Selector "interactive.icondefintion.show" benötigt, der im o.g. umschließenden div-Tag
liegt.

markup: demo.icondefinition.html

Styleguide ###basics.icondefinition###
*/
.icondefinition__title {
  display: block;
  margin-bottom: 0.5rem;
  margin-top: 0;
  font-size: 0.81rem;
}
.icondefinition__list {
  margin: 0;
}
.icondefinition__item {
  display: flex;
  margin: 0 0 0.25rem;
}
.icondefinition__item--hidden {
  display: none;
}
.icondefinition__item--a11yBorder .icondefinition__text {
  border-bottom: 1px dashed var(--color-bodyBackground);
}
.icondefinition__icon {
  flex-shrink: 0;
}
.icondefinition__data {
  margin: 0;
  font-size: 0.81rem;
}
.icondefinition__text {
  margin-left: 0.5rem;
}
.icondefinition .interactive {
  margin-left: 0.5rem;
  font-size: 0.81rem;
}
/*
ValidationResultsList

Fehler- bzw. Hinweisliste im Prüfungsmodus nach durchgeführter Prüfung. Im Navigationsbereich enthält diese Liste einen Navigationsbaum-
artige Hierachie mit Links zu den Teilseiten welche fehlerhaft sind. Im Inhaltsbereich fungiert diese ValidationResultsList als Liste von
Sprungmarken zu den fehlerhaften Feldern auf dem angezeigten Formular.

Bei vorliegenden Hinweisen im Navigationsbereich muss im Inhaltsbereich eine Warning-MessageBox angezeigt werden,
die auf die Navigation auf der linken Seite verweist.

markup: demo.validationResultsList.html

Styleguide ###formularElemente.validationResultsList###
*/
.validationResultsList {
  list-style: none;
  text-decoration: none;
  padding-left: 0;
}
.validationResultsList ul {
  list-style: none;
}
.validationResultsList__item {
  border-bottom: 1px solid var(--color-triple200);
  padding-bottom: 0.5rem;
}
.validationResultsList__item:last-child {
  border: 0;
  padding: 0;
}
.validationResultsList__heading {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 0.25rem;
}
.validationResultsList__heading .icon {
  margin-right: 0.5rem;
  margin-top: 0.18rem;
}
.validationResultsList .icon {
  flex: 0 0 auto;
  margin-top: 0.18rem;
}
.validationResultsList__button,
.validationResultsList__message {
  flex: 1 1 0%;
}
.validationResultsList .interactive {
  font-size: 0.87rem;
  padding: 0.12rem;
}
.validationResultsList__targets {
  padding-left: 1.5rem;
}
.validationResultsList__targets ul {
  padding-left: 0;
}
.validationResultsList__targets,
.validationResultsList__page {
  margin-top: 0.5rem;
}
.validationResultsList__targetsItem--current .interactive,
.validationResultsList__pageItem--current .interactive {
  background: var(--color-active);
  border-bottom: 2px solid var(--color-active);
  padding-bottom: 0;
  color: var(--color-text-dark);
}
.validationResultsList__targets li,
.validationResultsList__page li {
  margin-bottom: 0.25rem;
}
.validationResultsList__targetsItem {
  padding-bottom: 0.5rem;
}
.validationResultsList__targetsItem:last-child {
  padding: 0;
}
.validationResultsList__groupName {
  font-size: 0.75rem;
}
.validationResultsList__page li {
  display: flex;
}
.validationResultsList .toggleBox__head {
  font-size: 0.93rem;
}
.validationResultsList .toggleBox__content {
  background: transparent;
  padding-bottom: 0;
}
.validationResultsList .toggleBox .validationResultsList__targets {
  padding-left: 0;
}
/*
MessageBox

Die MessageBox besitzt folgende Modifier, die mit folgenden Icons als Standard genutzt werden:
- messagebox--success
    - Erfolg
    - Icon: success_bop oder success_eop
- messagebox--successTile
    - Erfolg (nur in der Tile-Komponente)
    - Icon: apply
- messagebox--successThumbnail
    - Erfolg (nur in der Thumbnail-Komponente)
    - Icon: correct_eop
- messagebox--error
    - Fehler
    - Icon: message-error
- messagebox--warning
    - Warnung
    - Icon: warning
- messagebox--hint
    - Hinweis (Info)
    - Icon: hint-white-on-triple114
- messagebox--hintTile
    - Hinweis (Info)
    - Icon: hint-invert-on-triple221
- messagebox--loading
    - Ladenachricht
    - Icon: star_white
- messagebox--hidden
    - zusätzlicher Modifier zu allen anderen
    - versteckt, kann über die MessageBox API via messagebox.show() wieder angezeigt werden


markup: demo.messageBox.html

Styleguide ###basics.messageBox###
*/
.messageBox {
  --color-hintTitle: var(--color-hint);
  --color-warningTitle: var(--color-text);
  --color-errorTitle: var(--color-error);
  --color-tileSuccessTitle: var(--color-interaction-light);
  border: 1px solid;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
  align-items: flex-start;
  background-color: var(--color-bodyBackground);
}
.dark .messageBox {
  --color-hintTitle: #b2b2b2;
}
.dark .messageBox {
  --color-warningTitle: var(--color-warning);
}
.dark .messageBox {
  --color-errorTitle: var(--color-text);
}
.dark .messageBox {
  --color-tileSuccessTitle: var(--color-interaction);
}
.messageBox__iconWrapper {
  order: 1;
  background: var(--color-hint);
  padding: 0.25rem;
  flex-shrink: 0;
}
.messageBox__content {
  order: 2;
  padding: 0.25rem 0.5rem;
  justify-content: flex-start;
  flex: 1 0 0px;
  word-break: break-word;
}
.messageBox__content > *:first-child {
  margin-top: 0;
}
.messageBox__content > *:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}
.messageBox__content .alignment--buttonGroup:last-child {
  margin-bottom: 0.5rem;
}
.messageBox__content ul,
.messageBox__content ol {
  padding-left: 1.5rem;
}
.messageBox--hint,
.messageBox--loading {
  border-color: var(--color-hint);
}
.messageBox--hint .messageBox__iconWrapper,
.messageBox--loading .messageBox__iconWrapper {
  background: var(--color-hint);
}
.messageBox--hint .messageBox__title,
.messageBox--loading .messageBox__title {
  color: var(--color-hintTitle);
}
.messageBox--hintTile {
  border-color: var(--color-triple221);
}
.messageBox--hintTile .messageBox__iconWrapper {
  background: var(--color-triple221);
}
.messageBox--hintTile .messageBox__title {
  color: var(--color-triple221);
}
.messageBox--loading .messageBox__iconWrapper .icon {
  transform-origin: 50% 53%;
  animation: animation_rotate 2s linear infinite;
}
.messageBox--error {
  border-color: var(--color-error);
}
.messageBox--error .messageBox__iconWrapper {
  background: var(--color-error);
}
.messageBox--error .messageBox__title {
  color: var(--color-errorTitle);
}
.messageBox--success {
  border-color: var(--color-success);
}
.messageBox--success .messageBox__iconWrapper {
  background: var(--color-success);
}
.messageBox--success .messageBox__title {
  color: var(--color-success-dark);
}
.messageBox--successTile {
  border-color: var(--color-interaction-light);
}
.messageBox--successTile .messageBox__iconWrapper {
  background: var(--color-interaction-light);
}
.messageBox--successTile .messageBox__title {
  color: var(--color-tileSuccessTitle);
}
.messageBox--successThumbnail {
  border-color: var(--color-app-dark);
}
.messageBox--successThumbnail .messageBox__iconWrapper {
  background: var(--color-app-dark);
}
.messageBox--successThumbnail .messageBox__title {
  color: var(--color-thumbnailSuccessTitle);
}
.messageBox--warning {
  border-color: var(--color-warning);
}
.messageBox--warning .messageBox__iconWrapper {
  background: var(--color-warning);
}
.messageBox--warning .messageBox__title {
  color: var(--color-warningTitle);
}
.messageBox__title {
  color: var(--color-text);
  margin: 0;
  font-size: 0.87rem;
  padding-bottom: 0.18rem;
}
.messageBox .validationResultsList {
  padding: 0;
  margin-left: 0;
}
.messageBox--hidden {
  display: none;
}
/*
Breadcrumb

Brotkrümelnavigation bestehend aus einem festen Startelement und beliebig vielen "Brotkrümeln", getrennt durch eine vorangestellte spitze Klammer.

Das letzte Element (die aktuelle Seitenbezeichnung) wird im mobilen Layout ausgeblendet und im Desktop Layout als Text gerendert.

markup: demo.breadcrumb.html

Styleguide ###interaktiveElemente.breadcrumb###
*/
.breadcrumb {
  font-size: 0.81rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;
}
.breadcrumb__body {
  width: 100%;
}
.breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}
.breadcrumb__listItem {
  list-style: none;
  white-space: nowrap;
  min-width: 1.37rem;
}
.breadcrumb__listItem--truncate {
  min-width: 2.5rem;
}
.breadcrumb__listItem--omitted {
  min-width: 2rem;
}
.breadcrumb__listItem--omitted .icon {
  margin-right: 2px;
}
.breadcrumb__listItem:last-child {
  display: none;
}
.breadcrumb__crumb {
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  display: inline-flex;
  min-height: 1.25rem;
}
a.breadcrumb__crumb,
button.breadcrumb__crumb {
  color: var(--color-interaction);
}
a.breadcrumb__crumb:hover,
button.breadcrumb__crumb:hover {
  cursor: pointer;
  text-decoration: underline;
}
a.breadcrumb__crumb:hover .icon,
button.breadcrumb__crumb:hover .icon {
  cursor: pointer;
}
a.breadcrumb__crumb:focus,
button.breadcrumb__crumb:focus {
  border: 1px dotted var(--color-interaction);
}
.breadcrumb__icon {
  margin: 0 1px;
}
.breadcrumb .icon {
  position: relative;
  top: 0.18rem;
}
.breadcrumb__spacer {
  visibility: hidden;
  padding-left: 1.25rem;
  height: 1px;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.breadcrumb__link {
  padding: 1px 0 0;
}
.breadcrumb__link + .breadcrumb__link {
  padding-left: 0.125rem;
}
.breadcrumb--hidden\@min {
  display: none;
}
.breadcrumb--invisible {
  visibility: hidden;
}
.breadcrumb--levels,
.breadcrumb--levels .breadcrumb__crumb {
  height: 1.5rem;
}
.breadcrumb--levels .breadcrumb__crumb {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, fit-content(100%));
  overflow: hidden;
}
.breadcrumb--levels .breadcrumb__list {
  flex-wrap: nowrap;
}
.breadcrumb--levels .breadcrumb__list .breadcrumb__listItem:last-child {
  display: block;
}
.breadcrumb--level4 .breadcrumb__listItem {
  max-width: 33.333333333333336%;
}
.breadcrumb--level5 .breadcrumb__listItem {
  max-width: 33.333333333333336%;
}
.safari .breadcrumb__crumb {
  display: flex;
}
/*
Counter

Ein Counter, der die Anzahl von Fehlern oder Hinweisen im
Prüfungsmodus bei eingeklappter Fehlerliste darstellt.

Modifier counter--warning zur Darstellung von Hinweisen

markup: demo.counter.html

Styleguide ###formularElemente.counter###
*/
.counter {
  background: var(--color-error);
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0 0.31rem;
  border-radius: 1rem;
  position: absolute;
  z-index: 1;
  margin: 1px 0 0 1px;
}
.counter--warning {
  background: var(--color-warning);
  color: var(--color-text-dark);
}
/*
Layout

__Das Portal besitzt folgende Layouts (nur im Vollbild sichtbar):__
- _default:_      Standard Layout     - Templatedatei: ```default.layout.pug```
- _lightbox:_      Lightbox Layout    - Templatedatei: ```lightbox-layout.pug```
- _form:_         Formular Layout     - Templatedatei: ```form.layout.pug```

__Hinweis__:
- Beim Formular und Lightbox Layout wird im ```page-body``` mixin das root als ```form```-Element gerendert
- Die Templates vererben die spezifischen Layouts und können somit in die Views verwendet werden
- In der ```base.pug``` ist ein ```block definelayout``` deklariert, der dazu verwendet werden kann weitere
  Konfigurationen in den jeweiligen Views festzulegen (bspw. attributes für das Block Element)
- Dafür muss in der jeweiligen View der ```block definelayout``` erneut aufgerufen werden

__Darüber hinaus besitzen das Standard- und das Formularlayout im Inhaltsbereich folgende Untertypen:__
-   _default:_    Einspaltig
-   _aside:_      Zweispaltig
-   _extended:_  Einspaltig volle Breite

__Vorgehensweise zum Erstellen einer View__:
1. Template erstellen
1. Template erbt von einem Layout
    1. ```block``` als Platzhalter erstellen
    1. _Optional_: Standardverhalten für Platzhalter treffen
    1. _Optional_: definelayout überschreiben per Neudeklaration des ```block definelayout```
1. View erstellen und Platzhalter mit Inhalt befüllen
1. View erbt vom Template

__Vorgehensweise zur Adaption des responsiven States__:
1. Stylus mixin per ```@require``` in das Layout importieren
1. Media Query im Layout definieren und im gewünschten Layout platzieren
    - ```.page``` - Für alle Layouts
    - ```.page-(default,lightbox,form)``` - Spezifisches Layout

__Für die unsichtbaren Sprungmarken (Barrierefreiheit) müssen im default- und form-Layout folgende IDs gesetzt werden__:
- Inhaltsbereich: id="main"
- Navigation: id="nav"
- Footer: id="footer"

markup: demo.layout.html

Styleguide ###portalrahmen.layout###
*/
/*
Modal

Das Modal **.modal** teilt sich dabei in drei Bereiche **.modal\__header**, **.modal\__content** und **.modal\__footer**, welche in den
Wrapper **.modal\__wrapper** eingeschlossen sind (grauer, nicht klickbarer Hintergrund).
Die Verwendung wird weiter unten im Abschnitt "Einbindung des Modalen Dialoges" beschrieben.
Für den modalen Dialog gibt es neben der Standard-Ausprägung eine Variante mit dem Modifier ".modal--full". Zu beachten ist, dass sich
die beiden Varianten bezüglich der Platzierung der Überschrift im Markup unterscheiden (siehe Beispiele). Während bei der Standard-Variante
der Modal Titel beim Scrollen verschwindet, bleibt er bei der "modal-full" Variante fix im Header Bereich stehen.

Die "modal-full" Variante besitzt einen Schließen Button am oberen rechten Rand und unterscheidet sich somit im Markup von der Standard-Variante.
Falls **.modal\__header** eine `h1`, als Child Element **.modal\__headerTitle** implementiert, ist diese antabbar und erhält initial den Focus. In den Modal-Body **.modal\__content**
lassen sich neben Paragraphen auch Bilder einfügen. Die Hervorhebung von Text
innerhalb des Inhaltsbereiches wird per `strong` Element vorgenommen.

Des Weiteren gibt es folgende Block-Modifier:

* `.modal--preview` für Vorschau-Dialogfenster.
* `.modal--no-pointer` für Dialogfenster ohne Pointer-Ereignisse.
* `.modal--full` für randabfallende Dialogfenster bezüglich der Höhe.
* `.modal--wide` für breitere Dialogfenster (Höhe passt sich weiterhin dem Inhalt an).

Der Inhaltsbereich des Modals besitzt drei verschiedene relative Breiten die für die Breakpoints
"desktop" und "mobile" definiert sind. Die Höhe des Inhaltsbereich richtet sich relativ nach der Viewport-Höhe. Sobald diese
überschritten wird, erscheint ein vertikaler Scrollbalken. Da der Scrollbalken aber nur
für den Bereich **.modal\__content** definiert wird, bleibt der **.modal\__header** und **.modal\__footer** hiervon unberührt.
Hierdurch wird garantiert, dass dieser für den Nutzer immer sichtbar bleibt.
Eine Besonderheit ist, dass das Modal nach dem Öffnen den Focus für antabbare Elemente innerhalb des Modalen Dialoges sperrt, so dass Elemente
außerhalb nicht angesprungen werden können. Dieser Focus-Trap wird nach dem Schließen des Modals wieder aufgehoben. Standardmäßig aktiviert.

### Einbindung des Modalen Dialoges

Nach Import des Moduls und Ausführen des Default Function Exports steht ein Service-Object zur Verfügung. Die Default Function
registriert alle modalen Dialoge einer Seite sowie die zugehörigen Click-Handler, so dass diese Elemente per Click das Modal öffnen.
Das Service-Object bietet die Möglichkeit gezielt einzelne Instanzen modaler Dialoge zurückzugeben. Hierfür steht die `get()` Methode zur Verfügung,
welche einen data-selector Wert des jeweiligen modalen Dialoges benötigt.

Generell lässt sich das Modal mit JS mit den folgenden Möglichkeiten **öffnen**:
- per automatisch registrierten Click-Handler
- per `open()` Methode der jeweiligen Instanz eines modalen Dialoges
- mit Hilfe des CSS-Modifiers "modal--openOnLoad" nach initialen Laden der Seite (WICHTIG: NUR EIN MODALER DIALOG AUF DER AKTUELLEN SEITE DARF DIESEN MODIFIER BESITZEN)
- per benutzerdefinierten Element, welches einen Click-Handler mit Hilfe der Instanz Methode `setControlElement()` registriert

Das Modal lässt sich wie folgt **schließen**:
- per automatisch registrierten Click-Handler (in einigen Modalen befindet sich ein Button X zum Schließen oder der Hintergrund kann angeklickt werden)
- per `close()` Methode der jeweiligen Instanz eines modalen Dialoges
- mithilfe eines Interactives mit dem Attribut `data-selector="interactive.modal.close"`

### Bestätigungsdialoge

Um die Nutzung von simplen Modalen zur Bestätigung einer Aktion zu vereinfachen, kann die Methode `confirm()` des Modals
verwendet werden. Die Methode gibt ein Promise zurück, das mit `true` aufgelöst wird, sobald der Nutzer den Button zur Bestätigung
klickt (`data-selector="interactive.modal.confirm"`). Der Promise wird mit `false` aufgelöst, wenn der Nutzer den Abbrechen-Button
klickt (`data-selector="interactive.modal.cancel"`).

markup: demo.modal.html

Styleguide ###interaktiveElemente.modal###
*/
.modal,
.global-help,
.global-search {
  position: fixed;
  background: var(--color-backdrop);
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
  flex-direction: column;
  z-index: 300;
}
.modal__wrapper,
.global-help__wrapper,
.global-search__wrapper,
.page-lightbox__root {
  position: relative;
  background: var(--color-bodyBackground);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.modal__header,
.global-help__header,
.global-search__header,
.modal__content,
.global-help__content,
.global-search__content {
  padding: 1rem;
}
.modal__title,
.global-help__title,
.global-search__title,
.modal__content,
.global-help__content,
.global-search__content {
  outline: none;
}
.modal__title,
.global-help__title,
.global-search__title {
  font-size: 1.5rem;
  margin: 16px 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-triple200);
}
.modal__title:first-child,
.global-help__title:first-child,
.global-search__title:first-child {
  margin-top: 0;
}
.modal__content,
.global-help__content,
.global-search__content {
  overflow: auto;
  font-size: 14px;
}
.modal__content .figure__image,
.global-help__content .figure__image,
.global-search__content .figure__image {
  margin-bottom: 0.5rem;
}
.modal__content ul,
.global-help__content ul,
.global-search__content ul {
  padding-left: inherit;
  margin-bottom: 0;
}
.modal__content ul + strong,
.global-help__content ul + strong,
.global-search__content ul + strong {
  display: inline-block;
  margin-top: 0.5rem;
}
.modal__content li .interactive--\@inline,
.global-help__content li .interactive--\@inline,
.global-search__content li .interactive--\@inline {
  display: inline;
}
.modal__content > h1,
.global-help__content > h1,
.global-search__content > h1 {
  margin-top: 0;
}
.modal__loadingBox,
.global-help__loadingBox,
.global-search__loadingBox {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__loadingBox .messageBox,
.global-help__loadingBox .messageBox,
.global-search__loadingBox .messageBox {
  background: var(--color-bodyBackground);
}
.modal__loadingBox .messageBox__content,
.global-help__loadingBox .messageBox__content,
.global-search__loadingBox .messageBox__content {
  flex: 1 0 0px;
}
.modal__close,
.global-help__close,
.global-search__close,
.page-lightbox__close {
  position: absolute;
  top: 0.37rem;
  right: 0.37rem;
  cursor: pointer;
  padding: 0.25rem;
}
.modal__close:hover,
.global-help__close:hover,
.global-search__close:hover,
.page-lightbox__close:hover,
.modal__close:focus,
.global-help__close:focus,
.global-search__close:focus,
.page-lightbox__close:focus {
  text-decoration: none;
}
.modal__footer,
.global-help__footer,
.global-search__footer {
  padding: 0.75rem 1rem;
  text-align: center;
  background-color: var(--color-infoBackground);
  flex-shrink: 0;
  margin-top: auto;
}
.modal__footer .alignment ~ .alignment,
.global-help__footer .alignment ~ .alignment,
.global-search__footer .alignment ~ .alignment {
  margin-top: 0.5rem;
}
.modal__footer .alignment .interactive:not(:first-child),
.global-help__footer .alignment .interactive:not(:first-child),
.global-search__footer .alignment .interactive:not(:first-child) {
  margin-top: 0.5rem;
}
.modal__footer .alignment--buttonGroup,
.global-help__footer .alignment--buttonGroup,
.global-search__footer .alignment--buttonGroup {
  flex-direction: row;
  margin-top: 0;
}
.modal__footer .alignment--buttonGroup .alignment__leftGroup + .alignment__rightGroup,
.global-help__footer .alignment--buttonGroup .alignment__leftGroup + .alignment__rightGroup,
.global-search__footer .alignment--buttonGroup .alignment__leftGroup + .alignment__rightGroup {
  margin-left: 0.5rem;
  margin-top: 0;
}
.modal__footer .alignment__rightGroup,
.global-help__footer .alignment__rightGroup,
.global-search__footer .alignment__rightGroup {
  align-items: flex-end;
}
.modal__footer .messageBox,
.global-help__footer .messageBox,
.global-search__footer .messageBox {
  text-align: start;
}
.modal--full .modal__content,
.global-help--full .global-help__content,
.global-search--full .global-search__content {
  margin-top: 2.25rem;
}
.modal--full .modal__header + .modal__content,
.global-help--full .global-help__header + .global-help__content,
.global-search--full .global-search__header + .global-search__content {
  margin-top: 0;
}
.modal--full .modal__wrapper,
.global-help--full .global-help__wrapper,
.global-search--full .global-search__wrapper {
  max-height: 100%;
  height: 100%;
}
@media all and (-ms-high-contrast: none) {
  .modal--full *::-ms-backdrop,
  .global-help--full *::-ms-backdrop,
  .global-search--full *::-ms-backdrop,
  .modal--full .modal--full__wrapper,
  .global-help--full .global-help--full__wrapper,
  .global-search--full .global-search--full__wrapper {
    max-height: auto;
  }
}
.modal--no-pointer,
.global-help--no-pointer,
.global-search--no-pointer {
  pointer-events: all;
}
.modal--no-pointer .modal__wrapper,
.global-help--no-pointer .global-help__wrapper,
.global-search--no-pointer .global-search__wrapper {
  pointer-events: none;
}
.modal--no-pointer .modal__content,
.global-help--no-pointer .global-help__content,
.global-search--no-pointer .global-search__content {
  pointer-events: none;
}
.modal--no-pointer .modal__footer,
.global-help--no-pointer .global-help__footer,
.global-search--no-pointer .global-search__footer {
  pointer-events: auto;
}
.modal--preview,
.global-help--preview,
.global-search--preview {
  background-color: rgba(0,0,0,0.75);
}
.modal--preview .modal__wrapper,
.global-help--preview .global-help__wrapper,
.global-search--preview .global-search__wrapper {
  width: auto;
  position: initial;
  background: transparent;
  height: -webkit-min-content;
  height: min-content;
}
.modal--preview .modal__content,
.global-help--preview .global-help__content,
.global-search--preview .global-search__content {
  overflow: unset;
  padding: 0;
  background: transparent;
  height: -webkit-min-content;
  height: min-content;
}
.modal--preview .modal__content img,
.global-help--preview .global-help__content img,
.global-search--preview .global-search__content img,
.modal--preview .modal__content canvas,
.global-help--preview .global-help__content canvas,
.global-search--preview .global-search__content canvas {
  max-width: calc(100vw - 6rem - 2px);
  max-height: calc(100vh - 6rem - 2px);
}
.modal--preview .modal__footer,
.global-help--preview .global-help__footer,
.global-search--preview .global-search__footer {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: transparent;
}
.modal .messageBox,
.global-help .messageBox,
.global-search .messageBox {
  margin-bottom: 1rem;
}
.modal:not(.modal--full) .formItem,
.global-help:not(.global-help--full) .formItem,
.global-search:not(.global-search--full) .formItem {
  content: "formItem.mobile";
  padding: 0.5rem;
  align-items: stretch;
  background: var(--color-triple242);
  flex-direction: column;
}
.modal:not(.modal--full) .formItem .formItem__labelGroup,
.global-help:not(.global-help--full) .formItem .formItem__labelGroup,
.global-search:not(.global-search--full) .formItem .formItem__labelGroup {
  flex-basis: 100%;
}
.modal:not(.modal--full) .formItem .formItem__fieldGroup,
.global-help:not(.global-help--full) .formItem .formItem__fieldGroup,
.global-search:not(.global-search--full) .formItem .formItem__fieldGroup {
  flex-basis: 100%;
}
.modal:not(.modal--full) .formItem--login,
.global-help:not(.global-help--full) .formItem--login,
.global-search:not(.global-search--full) .formItem--login {
  padding: 0;
  background-color: var(--color-inputBackground);
}
.modal:not(.modal--full) .formItem__lnr,
.global-help:not(.global-help--full) .formItem__lnr,
.global-search:not(.global-search--full) .formItem__lnr {
  background-color: var(--color-triple242);
  width: auto;
  justify-content: flex-start;
  padding: 0;
}
.modal:not(.modal--full) .formItem__lnrDescription,
.global-help:not(.global-help--full) .formItem__lnrDescription,
.global-search:not(.global-search--full) .formItem__lnrDescription {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto;
  overflow: visible;
}
.modal:not(.modal--full) .formItem__line,
.global-help:not(.global-help--full) .formItem__line,
.global-search:not(.global-search--full) .formItem__line {
  flex-wrap: wrap;
  padding: 0;
}
.modal:not(.modal--full) .formItem__line + .modal:not(.modal--full) .formItem__line,
.global-help:not(.global-help--full) .formItem__line + .global-help:not(.global-help--full) .formItem__line,
.global-search:not(.global-search--full) .formItem__line + .global-search:not(.global-search--full) .formItem__line {
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}
.modal:not(.modal--full) .formItem__line--alternateOrder,
.global-help:not(.global-help--full) .formItem__line--alternateOrder,
.global-search:not(.global-search--full) .formItem__line--alternateOrder {
  flex-wrap: nowrap;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: flex-start;
  margin-left: 0;
}
.modal:not(.modal--full) .formItem__line--alternateOrder .formItem__labelGroup,
.global-help:not(.global-help--full) .formItem__line--alternateOrder .formItem__labelGroup,
.global-search:not(.global-search--full) .formItem__line--alternateOrder .formItem__labelGroup {
  flex-basis: auto;
}
.modal:not(.modal--full) .formItem__line--alternateOrder .formItem__fieldGroup,
.global-help:not(.global-help--full) .formItem__line--alternateOrder .formItem__fieldGroup,
.global-search:not(.global-search--full) .formItem__line--alternateOrder .formItem__fieldGroup {
  flex-basis: auto;
}
.modal:not(.modal--full) .formItem__line--alternateOrder .modal__label,
.global-help:not(.global-help--full) .formItem__line--alternateOrder .global-help__label,
.global-search:not(.global-search--full) .formItem__line--alternateOrder .global-search__label {
  font-size: inherit;
}
.modal:not(.modal--full) .formItem__line--alternateOrder .modal__fieldGroup,
.global-help:not(.global-help--full) .formItem__line--alternateOrder .global-help__fieldGroup,
.global-search:not(.global-search--full) .formItem__line--alternateOrder .global-search__fieldGroup {
  margin-left: 0.25rem;
  margin-right: 0.75rem;
}
.modal:not(.modal--full) .formItem__line--alternateOrder .modal__labelGroup,
.global-help:not(.global-help--full) .formItem__line--alternateOrder .global-help__labelGroup,
.global-search:not(.global-search--full) .formItem__line--alternateOrder .global-search__labelGroup {
  flex-basis: 100%;
}
.modal:not(.modal--full) .formItem__fieldGroup,
.global-help:not(.global-help--full) .formItem__fieldGroup,
.global-search:not(.global-search--full) .formItem__fieldGroup {
  flex-wrap: wrap;
}
.modal:not(.modal--full) .formItem__labelGroup,
.global-help:not(.global-help--full) .formItem__labelGroup,
.global-search:not(.global-search--full) .formItem__labelGroup {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
}
.modal:not(.modal--full) .formItem__labelGroup > .formItem__labelItem:not(:only-child),
.global-help:not(.global-help--full) .formItem__labelGroup > .formItem__labelItem:not(:only-child),
.global-search:not(.global-search--full) .formItem__labelGroup > .formItem__labelItem:not(:only-child) {
  display: none;
}
.modal:not(.modal--full) .formItem__labelItem,
.global-help:not(.global-help--full) .formItem__labelItem,
.global-search:not(.global-search--full) .formItem__labelItem {
  text-align: left;
}
.modal:not(.modal--full) .formItem__labelItem:not(:only-child):not(:last-child):not(._helper-invisible)::after,
.global-help:not(.global-help--full) .formItem__labelItem:not(:only-child):not(:last-child):not(._helper-invisible)::after,
.global-search:not(.global-search--full) .formItem__labelItem:not(:only-child):not(:last-child):not(._helper-invisible)::after {
  content: ' ';
}
.modal:not(.modal--full) .formItem__fieldItem:not(:only-child):not(:last-child),
.global-help:not(.global-help--full) .formItem__fieldItem:not(:only-child):not(:last-child),
.global-search:not(.global-search--full) .formItem__fieldItem:not(:only-child):not(:last-child) {
  margin-right: 0.31rem;
  margin-bottom: 0.93rem;
}
.modal:not(.modal--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible),
.global-help:not(.global-help--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible),
.global-search:not(.global-search--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) {
  display: block;
  width: 100%;
  padding-left: 0;
}
.modal:not(.modal--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) > .modal__label,
.global-help:not(.global-help--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) > .global-help__label,
.global-search:not(.global-search--full) .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) > .global-search__label {
  display: block;
}
.modal:not(.modal--full) .formItem__fieldItem,
.global-help:not(.global-help--full) .formItem__fieldItem,
.global-search:not(.global-search--full) .formItem__fieldItem {
  flex-shrink: 1;
}
.modal:not(.modal--full) .formItem__legend,
.global-help:not(.global-help--full) .formItem__legend,
.global-search:not(.global-search--full) .formItem__legend {
  padding: 0.25rem 0;
}
.modal:not(.modal--full) .formItem__legend + .modal__line--alternateOrder,
.global-help:not(.global-help--full) .formItem__legend + .global-help__line--alternateOrder,
.global-search:not(.global-search--full) .formItem__legend + .global-search__line--alternateOrder {
  border: none;
}
.modal:not(.modal--full) .formItem__field--checkbox,
.global-help:not(.global-help--full) .formItem__field--checkbox,
.global-search:not(.global-search--full) .formItem__field--checkbox,
.modal:not(.modal--full) .formItem__field--radio,
.global-help:not(.global-help--full) .formItem__field--radio,
.global-search:not(.global-search--full) .formItem__field--radio {
  transform: none;
}
.modal:not(.modal--full) .formItem__field--textarea-large,
.global-help:not(.global-help--full) .formItem__field--textarea-large,
.global-search:not(.global-search--full) .formItem__field--textarea-large {
  height: 9.37rem;
}
.modal:not(.modal--full) .formItem__tooltip,
.global-help:not(.global-help--full) .formItem__tooltip,
.global-search:not(.global-search--full) .formItem__tooltip {
  top: auto;
  bottom: -1.44rem;
}
.modal:not(.modal--full) .formItem__tooltip::before,
.global-help:not(.global-help--full) .formItem__tooltip::before,
.global-search:not(.global-search--full) .formItem__tooltip::before,
.modal:not(.modal--full) .formItem__tooltip::after,
.global-help:not(.global-help--full) .formItem__tooltip::after,
.global-search:not(.global-search--full) .formItem__tooltip::after {
  top: auto;
  bottom: 100%;
  border-color: transparent;
}
.modal:not(.modal--full) .formItem__tooltip::before,
.global-help:not(.global-help--full) .formItem__tooltip::before,
.global-search:not(.global-search--full) .formItem__tooltip::before {
  border-bottom-color: var(--color-inputBorder);
}
.modal:not(.modal--full) .formItem__tooltip::after,
.global-help:not(.global-help--full) .formItem__tooltip::after,
.global-search:not(.global-search--full) .formItem__tooltip::after {
  border-bottom-color: var(--color-tooltipBackground);
}
.modal:not(.modal--full) .formItem--layout_0-100 .modal__line,
.global-help:not(.global-help--full) .formItem--layout_0-100 .global-help__line,
.global-search:not(.global-search--full) .formItem--layout_0-100 .global-search__line {
  padding-left: 0;
}
.modal:not(.modal--full) .formItem--layout_0-100 .modal__labelGroup,
.global-help:not(.global-help--full) .formItem--layout_0-100 .global-help__labelGroup,
.global-search:not(.global-search--full) .formItem--layout_0-100 .global-search__labelGroup,
.modal:not(.modal--full) .formItem--layout_0-100 .modal__fieldGroup,
.global-help:not(.global-help--full) .formItem--layout_0-100 .global-help__fieldGroup,
.global-search:not(.global-search--full) .formItem--layout_0-100 .global-search__fieldGroup {
  flex-basis: auto;
}
.modal:not(.modal--full) .formItem--layout_0-100 .modal__fieldItem,
.global-help:not(.global-help--full) .formItem--layout_0-100 .global-help__fieldItem,
.global-search:not(.global-search--full) .formItem--layout_0-100 .global-search__fieldItem {
  padding-right: 0;
  flex: 1 0 auto;
}
.edge.edgehtml .modal:not(.modal--full) .formItem .formItem__fieldItem--size-xxxxl,
.edge.edgehtml .global-help:not(.global-help--full) .formItem .formItem__fieldItem--size-xxxxl,
.edge.edgehtml .global-search:not(.global-search--full) .formItem .formItem__fieldItem--size-xxxxl,
.edge.edgehtml .modal:not(.modal--full) .formItem .formItem__fieldItem--size-xxxxxl,
.edge.edgehtml .global-help:not(.global-help--full) .formItem .formItem__fieldItem--size-xxxxxl,
.edge.edgehtml .global-search:not(.global-search--full) .formItem .formItem__fieldItem--size-xxxxxl {
  flex-basis: auto;
}
[data-selector="modal.standard.sessionTimeoutWarning"] {
  z-index: 310;
}
[data-selector="modal.standard.sessionabgelaufen"] {
  z-index: 320;
}
/*
Layout: Lightbox

markup: demo.layout.lightbox.html

Styleguide ###portalrahmen.layout.layoutLightbox###
*/
/*
Layout: Form

markup: demo.layout.form.html

Styleguide ###portalrahmen.layout.layoutForm###
*/
/*
Layout: Form ohne Treeview

markup: demo.layout.form-noTree.html

Styleguide ###portalrahmen.layout.layoutFormNoTree###
*/
.page {
  min-width: 20rem;
  margin: 0 auto;
  background-color: var(--color-bodyBackground);
  position: relative;
}
.page--default {
  animation-duration: 0.001s;
  animation-duration: 0.001s;
  animation-duration: 0.001s;
  animation-duration: 0.001s;
  overflow-x: hidden;
}
@media screen and (min-width: 0), print {
  .page--default {
    animation-name: "page--default__zeroToMin";
    content: 'page--default__zeroToMin';
  }
}
@keyframes page--default__zeroToMin {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 60rem), print {
  .page--default {
    animation-name: "page--default__min";
    content: 'page--default__min';
  }
}
@keyframes page--default__min {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 80rem), print {
  .page--default {
    animation-name: "page--default__mid";
    content: 'page--default__mid';
  }
}
@keyframes page--default__mid {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 100rem), print {
  .page--default {
    animation-name: "page--default__max";
    content: 'page--default__max';
  }
}
@keyframes page--default__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
.page--form {
  animation-duration: 0.001s;
  animation-duration: 0.001s;
  animation-duration: 0.001s;
  animation-duration: 0.001s;
}
@media screen and (min-width: 0), print {
  .page--form {
    animation-name: "page--form__zeroToMin";
    content: 'page--form__zeroToMin';
  }
}
@keyframes page--form__zeroToMin {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 60rem), print {
  .page--form {
    animation-name: "page--form__min";
    content: 'page--form__min';
  }
}
@keyframes page--form__min {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 80rem), print {
  .page--form {
    animation-name: "page--form__mid";
    content: 'page--form__mid';
  }
}
@keyframes page--form__mid {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@media screen and (min-width: 127.81rem), print {
  .page--form {
    animation-name: "page--form__max";
    content: 'page--form__max';
  }
}
@keyframes page--form__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
.page--lightbox {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.page--lightbox .page__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.page__header {
  content: "";
}
.page__footer {
  content: "";
}
.page-default__row {
  display: flex;
  flex-direction: column;
}
.page-default__main,
.page-default__aside {
  max-width: 52.62rem;
}
.page-default__main {
  min-height: 1px;
}
.page-default__main--extended {
  max-width: none;
}
.page-default__aside {
  background: var(--color-triple248);
}
@media screen and (min-width: 100rem), print {
  .page-default__row {
    flex-direction: row;
    align-items: flex-start;
  }
  .page-default__main {
    flex: 1 0 100%;
  }
  .page-default__aside {
    flex: 1 1 0px;
  }
}
.page-default__body {
  margin: 0 auto;
  display: flex;
  max-width: 100rem;
}
.page-default__menu {
  max-width: 2.5rem;
  display: none;
}
.page-default__root {
  flex: 1 0 0px;
}
.page-default__root {
  padding: 1.5rem 1rem 2rem;
  min-height: 36.56rem;
  overflow-x: auto;
}
.page-default__main {
  z-index: 1;
}
.page-default__main > h2:first-child {
  margin-top: 0;
}
.page-default__aside {
  padding: 1rem;
  margin: 1rem 0;
}
@media screen and (min-width: 80rem), print {
  .page-default__body {
    border: 1px solid var(--color-triple221);
    margin: 0.93rem;
  }
  .page-default__menu {
    display: flex;
    max-width: 20rem;
    margin-right: 1rem;
  }
  .page-default__root {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
  }
}
@media screen and (min-width: 100rem), print {
  .page-default__body {
    margin: 1.93rem auto;
    margin-bottom: 1.93rem auto;
  }
  .page-default__menu {
    min-width: 17.5rem;
    margin-right: 1.5rem;
  }
  .page-default__main--extended {
    padding-right: 0;
    margin-bottom: 1.5rem;
  }
  .page-default__main--extended .breadcrumb:only-child {
    margin-bottom: 0;
  }
  .page-default__aside {
    margin: 0 0 0 1.5rem;
    padding: 1.5rem;
  }
  .page-default__aside:only-child {
    margin-left: 0;
  }
}
.page-lightbox__row {
  display: flex;
  flex-direction: column;
}
.page-lightbox__main,
.page-lightbox__aside {
  max-width: 52.62rem;
}
.page-lightbox__main {
  min-height: 1px;
}
.page-lightbox__main--extended {
  max-width: none;
}
.page-lightbox__aside {
  background: var(--color-triple248);
}
@media screen and (min-width: 100rem), print {
  .page-lightbox__row {
    flex-direction: row;
    align-items: flex-start;
  }
  .page-lightbox__main {
    flex: 1 0 100%;
  }
  .page-lightbox__aside {
    flex: 1 1 0px;
  }
}
.page-lightbox__row {
  margin-bottom: 2.5rem;
}
.page-lightbox__main {
  max-width: none;
}
.page-lightbox__body {
  position: fixed;
  background: var(--color-backdrop);
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  z-index: 1;
}
.page-lightbox__root {
  padding: 1rem;
  max-width: 127.81rem;
  width: 100%;
  height: 100%;
}
.page-lightbox__header {
  margin-bottom: 1rem;
}
.page-lightbox__header h1:first-of-type {
  margin: 0.5rem 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-triple221);
}
.page-lightbox__header .formBox {
  margin: 0;
  padding: 0;
}
.page-lightbox__contentWrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}
.page-lightbox__menu {
  margin-left: 0;
  margin-bottom: 1rem;
  background: var(--color-formBackground);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.page-lightbox__content {
  max-width: none;
  flex-grow: 1;
}
@media screen and (min-width: 60rem), print {
  .page-lightbox__root {
    padding: 1.5rem;
  }
  .page-lightbox__menu {
    padding: 1rem;
  }
  .page-lightbox__header {
    border-bottom: 1px solid var(--color-triple221);
    padding-bottom: 0.5rem;
  }
  .page-lightbox__header h1:first-of-type {
    display: inline-block;
    margin: 0 2.5rem 0 0;
    padding: 0;
    border: none;
  }
  .page-lightbox__header .formBox {
    display: inline-block;
  }
}
@media screen and (min-width: 100rem), print {
  .page-lightbox__body {
    padding: 0 1rem;
  }
  .page-lightbox__root {
    margin: 0 auto;
    padding: 1rem 2.5rem 0;
  }
  .page-lightbox__contentWrapper {
    flex-direction: row;
  }
  .page-lightbox__menu {
    margin-right: 2.5rem;
    margin-bottom: 0;
    width: 20rem;
    max-width: 20rem;
    flex-shrink: 0;
  }
  .page-lightbox__menu,
  .page-lightbox__content {
    overflow: auto;
  }
}
.page-form {
  position: relative;
}
.page-form__row {
  display: flex;
  flex-direction: column;
}
.page-form__main,
.page-form__aside {
  max-width: 52.62rem;
}
.page-form__main {
  min-height: 1px;
}
.page-form__main--extended {
  max-width: none;
}
.page-form__aside {
  background: var(--color-triple248);
}
@media screen and (min-width: 80rem), print {
  .page-form__row {
    flex-direction: row;
    align-items: flex-start;
  }
  .page-form__main {
    flex: 1 0 100%;
  }
  .page-form__aside {
    flex: 1 1 0px;
  }
}
.page-form__userinfo {
  content: "";
}
.page-form__progress {
  content: "";
}
.page-form__stickyLine {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 215;
  margin-top: -10px;
  border-bottom: 10px solid var(--color-app);
}
.page-form__root {
  display: flex;
  justify-content: center;
}
.page-form__root .lug {
  height: 48px;
  width: 48px;
  padding: 0.62rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  border: 6px solid var(--color-formBackground);
}
.page-form__root .lug .icon {
  cursor: pointer;
  align-self: center;
}
.page-form__treeWrapper {
  width: 0;
  flex: 1 1 auto;
}
.page-form__contentWrapper {
  margin-left: 2rem;
  width: calc(100% - (2rem + 0.5rem));
  position: relative;
  flex: 0 0 auto;
}
.page-form__body {
  max-width: 127.81rem;
  margin: 0 auto;
}
.page-form__treeWrapper,
.page-form__contentWrapper {
  display: flex;
}
.page-form__tree {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-formBackground);
  width: 3.25rem;
  border-right: 1px solid var(--color-triple221);
}
.page-form__treeWrapper {
  z-index: 210;
}
.page-form__treeWrapper--opened .page-form__tree {
  width: 100vw;
}
.page-form__treeWrapper--opened .page-form__treeHeader h2 {
  display: flex;
  max-width: calc(100% - 3rem);
}
.page-form__treeWrapper--opened .page-form__treeHeaderTitle {
  display: inline-block;
}
.page-form__treeWrapper--opened .page-form__treeHeaderPeriod {
  margin-left: 0.5rem;
}
.page-form__treeWrapper--opened .page-form__treeContent {
  display: block;
}
.page-form__treeWrapper--opened .page-form__treeFooter {
  flex: 0 0 auto;
}
.page-form__treeWrapper--opened .page-form__treeHeader {
  padding-left: 0.5rem;
}
.page-form__treeWrapper--opened .counter {
  display: none;
}
.page-form__treeTop {
  flex: 1 1 auto;
}
.page-form__treeStickyTop {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  display: flex;
  flex-direction: column;
  min-height: 3rem;
}
.page-form__treeHeader {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  height: 3.06rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-triple221);
  background: var(--color-formBackground);
  color: var(--color-triple102);
}
.page-form__treeHeader h2 {
  display: none;
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}
.page-form__treeHeader .lug {
  background: var(--color-interaction-light);
  visibility: visible;
}
.page-form__treeHeader .lug .icon {
  transform: rotate(180deg);
}
.page-form__treeContent {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
}
.page-form__treeFooter {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
}
.page-form__tree .alignment--buttonGroup {
  margin-top: 1rem;
}
.page-form__tree .alignment__item--a11yBorder .alignment__text {
  border-bottom: 1px dashed var(--color-formBackground);
}
.page-form__tree .toc {
  margin-bottom: 2rem;
}
.page-form__tree .messageBox {
  background: var(--color-formBackground);
}
.page-form__content {
  --scroll-offset-top: -10px;
  position: relative;
  padding: 1rem 0.5rem 0.5rem 1.5rem;
  width: 100%;
  background: var(--color-bodyBackground);
  border-right: none;
}
.page-form__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 100%;
  box-shadow: 0 0 2.5rem var(--color-shadow-light);
  -webkit-clip-path: inset(0 100% 0 -200%);
          clip-path: inset(0 100% 0 -200%);
}
.page-form__contentLugWrapper {
  display: none;
}
.page-form__content .lug {
  background: var(--color-interaction-light);
  transform: translateX(-1.5rem);
}
.page-form__aside {
  padding: 1rem;
  margin: 1rem 0;
}
.page-form__aside .icondefinition__item--a11yBorder .icondefinition__text {
  border-bottom: 1px dashed var(--color-triple248);
}
.edge.blink .page-form__treeContent,
.chrome .page-form__treeContent {
  transform: translateZ(0);
}
.edge.edgehtml .page-form__treeWrapper--opened .page-form__tree::before {
  box-shadow: none;
  background: linear-gradient(to right, var(--color-shadow) -100%, transparent 100%);
  width: 1.25rem;
  right: -1.25rem;
}
.edge.edgehtml .page-form__content::before {
  box-shadow: none;
  background: linear-gradient(to left, var(--color-shadow) -100%, transparent 100%);
  width: 1.25rem;
  left: -1.25rem;
}
@media screen and (min-width: 0) and (max-width: 30rem) {
  .page-form {
    content: "layout.form.min";
  }
}
@media screen and (min-width: 30rem), print {
  .page-form__treeWrapper--opened .page-form__tree {
    width: 26.75rem;
    border-right: none;
  }
  .page-form__treeWrapper--opened .page-form__tree::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 100%;
    box-shadow: 0 0 2.5rem var(--color-shadow-light);
    -webkit-clip-path: inset(0 -200% 0 100%);
            clip-path: inset(0 -200% 0 100%);
  }
  .page-form__treeWrapper--opened .page-form__tree .lug {
    transform: translateX(24px);
  }
  .page-form__treeWrapper--opened .page-form__tree .counter {
    display: none;
  }
  .page-form__treeWrapper--opened .page-form__treeFooter {
    border-right: none;
  }
  .page-form__root {
    min-height: 39.68rem;
  }
}
@media screen and (min-width: 48rem), print {
  .page-form__treeWrapper--opened .page-form__tree {
    width: 44.75rem;
  }
  .page-form__main {
    overflow-x: visible;
  }
  .page-form__root {
    min-height: 40.81rem;
  }
}
@media screen and (min-width: 60rem), print {
  .page-form__treeWrapper--opened .page-form__treeHeader {
    padding-left: 1rem;
  }
  .page-form__treeContent {
    padding: 0 1rem 1rem;
  }
  .page-form__content {
    padding: 1.5rem 1rem 1rem 1.5rem;
  }
  .page-form__root {
    min-height: 40.93rem;
  }
  .safari .page-form__root {
    min-height: 57.62rem;
  }
}
@media screen and (min-width: 80rem), print {
  .page-form__treeWrapper--opened .page-form__treeHeader {
    padding-left: 1.5rem;
  }
  .page-form__treeContent {
    padding: 0 1.5rem 1.5rem;
  }
  .page-form__content {
    padding: 2rem 1.5rem 1.5rem 2.5rem;
  }
  .page-form__main {
    margin-right: 1.5rem;
  }
  .page-form__main--extended {
    margin-right: 0;
  }
  .page-form__aside {
    padding: 1.5rem;
    margin: 0;
  }
  .page-form__root {
    min-height: 50.43rem;
  }
  .safari .page-form__root {
    min-height: 40.43rem;
  }
}
@media screen and (min-width: 105rem), print {
  .page-form__root {
    content: "layout.form.desktop";
  }
  .page-form__treeWrapper {
    z-index: auto;
  }
  .page-form__treeWrapper .counter {
    display: none;
  }
  .page-form__treeWrapper--opened {
    z-index: 210;
  }
  .page-form__treeWrapper .page-form__tree {
    width: 48.62rem;
  }
  .page-form__treeHeader {
    padding-left: 1.5rem;
  }
  .page-form__treeHeader h2 {
    display: flex;
    max-width: calc(100vw - 80rem - 4.5rem);
  }
  .page-form__treeHeaderTitle {
    display: inline-block;
  }
  .page-form__treeHeaderPeriod {
    margin-left: 0.5rem;
  }
  .page-form__treeContent {
    display: block;
  }
  .page-form__treeFooter {
    flex: 0 0 auto;
  }
  .page-form__contentWrapper {
    width: 80rem;
  }
  .page-form__content {
    padding-left: 3.5rem;
    padding-right: 2rem;
  }
  .page-form__contentLugWrapper {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    height: 48px;
    width: 48px;
    margin-top: -2rem;
    margin-bottom: -1rem;
    margin-left: -3.5rem;
  }
  .page-form__content .lug {
    border-color: var(--color-bodyBackground);
  }
}
@media screen and (min-width: 127.81rem), print {
  .page-form__treeWrapper {
    z-index: 210;
  }
  .page-form__treeWrapper .page-form__tree {
    border-right: 1px solid var(--color-triple221);
  }
  .page-form__treeWrapper .page-form__treeHeader h2 {
    max-width: 100%;
    padding-right: 2rem;
  }
  .page-form__treeWrapper .page-form__tree::before {
    display: none;
  }
  .page-form__contentWrapper {
    margin-left: 0;
  }
  .page-form__content::before {
    display: none;
  }
  .page-form__contentLugWrapper {
    display: none;
  }
  .page .page-form__root .lug {
    display: none;
  }
}
.page {
  content: "";
}
.__localDev table {
  background: var(--color-bodyBackground);
}
/*
Validation-Error

Die clientseitige Validierung überprüft Formatfehler und markiert ein fehlerhaftes Feld unterhalb mit einem Fehlertext.
Bei Klick auf den Fehlertext wird zum fehlerhaften Feld gesprungen.

Dies ist eine reine JavaScript Funktionalität.

markup: demo.validation-error.html

Styleguide ###formularElemente.validationError###
*/
.validation-error {
  background-color: var(--color-error);
  color: var(--color-text-light);
  padding: 0.5rem;
  display: block;
}
.formItem__line + .validation-error {
  margin-top: 0.5rem;
}
.validation-error--mzb {
  box-shadow: 0 0 0 0.56rem var(--color-error);
  padding: 0;
  margin: 0;
}
.ios .validation-error--mzb,
.safari .validation-error--mzb {
  box-shadow: 0 0 0 0.62rem var(--color-error);
}
/*
Quelldefinition

Beschreibung der Quellangabe.

*/
.definitionSource {
  width: 14.43rem;
  font-weight: bold;
  line-height: 1.35;
  padding: 0.25rem 1.25rem 0.25rem 0.25rem;
  margin: 0;
  display: flex;
  color: var(--color-triple44);
  font-size: 0.87rem;
}
.definitionSource__icon {
  padding: 1px 0.5rem 0 0;
}
.definitionSource__description {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
  margin: 0;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .definitionSource__description {
    word-break: break-word;
  }
}
.android.chrome .definitionSource__description {
  word-break: break-word;
}
.definitionSource em {
  display: block;
  font-weight: normal;
}
.definitionSource--any em {
  color: var(--color-source-any-foreground--inverted);
}
.definitionSource--profile em {
  color: var(--color-source-profile-foreground--inverted);
}
.definitionSource--submission em {
  color: var(--color-source-submission-foreground--inverted);
}
.definitionSource--report em {
  color: var(--color-source-report-foreground--inverted);
}
.definitionSource--receipt em {
  color: var(--color-source-receipt-foreground--inverted);
}
/*
Flyout

Ein Container, der von einem anderen Element abzweigt, ohne einen Effekt auf den Textfluss zu haben.

Styleguide ###interaktiveElemente.flyout###
*/
/*
Flyout Base

Styleguide ###interaktiveElemente.flyout.base###
*/
.flyout {
  position: absolute;
  display: block;
  pointer-events: none;
  width: 20rem;
  z-index: 300;
  line-height: 0;
}
.flyout__outer {
  pointer-events: all;
  max-height: 23.75rem;
  display: inline-block;
  overflow-x: hidden;
  overflow-y: auto;
  border: 4px solid var(--color-bodyBackground);
  outline: 1px solid var(--color-triple204);
  background: var(--color-bodyBackground);
}
.flyout__inner {
  background: var(--color-bodyBackground);
  text-align: left;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.35;
}
.firefox .flyout__inner {
  margin-right: 1.06rem;
}
.flyout__list {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}
.flyout__item {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  display: block;
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-bottom: 1px solid var(--color-triple204);
  line-height: 1.35;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .flyout__item {
    word-break: break-word;
  }
}
.android.chrome .flyout__item {
  word-break: break-word;
}
.flyout__item:last-child {
  border-bottom: none;
}
.flyout__footer {
  display: none;
  padding: 0.93rem;
  background-color: var(--color-triple248);
}
.flyout__footer .interactive {
  width: auto;
}
.flyout .icondefinition {
  padding: 1.5rem;
}
/*
Flyout Base Visibility

markup: demo/demo.flyout.base.visibility.html

Styleguide ###interaktiveElemente.flyout.base.visibility###
*/
.flyout.flyout--hidden {
  display: none;
}
/*
Flyout Base Position

markup: demo/demo.flyout.base.position.html

Styleguide ###interaktiveElemente.flyout.base.position###
*/
.flyout--bottom {
  top: 100%;
}
.flyout--top {
  bottom: 100%;
}
.flyout--right {
  left: 0;
  right: auto;
}
.flyout--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}
.flyout--left {
  left: auto;
  right: 0;
  text-align: right;
}
/*
Flyout Base Trigger

markup: demo/demo.flyout.base.trigger.html

Styleguide ###interaktiveElemente.flyout.base.trigger###
*/
.flyout .flyout__outer {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 8px 16px 16px;
}
.flyout.flyout--bottom::before,
.flyout.flyout--bottom::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout.flyout--bottom {
  padding-top: 10px;
}
.flyout.flyout--bottom::before,
.flyout.flyout--bottom::after {
  top: 4px;
}
.flyout.flyout--bottom::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple204);
}
.flyout.flyout--bottom::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple255);
  top: 5px;
}
.flyout.flyout--bottom.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout.flyout--bottom.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout.flyout--bottom.flyout--right::before {
  right: auto;
  left: 11px;
}
.flyout.flyout--bottom.flyout--right::after {
  right: auto;
  left: 11px;
}
.flyout.flyout--bottom.flyout--left::before {
  left: auto;
  right: 11px;
}
.flyout.flyout--bottom.flyout--left::after {
  left: auto;
  right: 11px;
}
.flyout.flyout--top::before,
.flyout.flyout--top::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout.flyout--top {
  padding-bottom: 10px;
}
.flyout.flyout--top::before,
.flyout.flyout--top::after {
  bottom: 4px;
}
.flyout.flyout--top::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple204);
}
.flyout.flyout--top::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple255);
  bottom: 5px;
}
.flyout.flyout--top.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout.flyout--top.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout.flyout--top.flyout--right::before {
  right: auto;
  left: 11px;
}
.flyout.flyout--top.flyout--right::after {
  right: auto;
  left: 11px;
}
.flyout.flyout--top.flyout--left::before {
  left: auto;
  right: 11px;
}
.flyout.flyout--top.flyout--left::after {
  left: auto;
  right: 11px;
}
.flyout--trigger\@16 .flyout__outer {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 8px 16px 16px;
}
.flyout--trigger\@16.flyout--bottom::before,
.flyout--trigger\@16.flyout--bottom::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout--trigger\@16.flyout--bottom {
  padding-top: 10px;
}
.flyout--trigger\@16.flyout--bottom::before,
.flyout--trigger\@16.flyout--bottom::after {
  top: 4px;
}
.flyout--trigger\@16.flyout--bottom::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple204);
}
.flyout--trigger\@16.flyout--bottom::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple255);
  top: 5px;
}
.flyout--trigger\@16.flyout--bottom.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@16.flyout--bottom.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@16.flyout--bottom.flyout--right::before {
  right: auto;
  left: 5px;
}
.flyout--trigger\@16.flyout--bottom.flyout--right::after {
  right: auto;
  left: 5px;
}
.flyout--trigger\@16.flyout--bottom.flyout--left::before {
  left: auto;
  right: 5px;
}
.flyout--trigger\@16.flyout--bottom.flyout--left::after {
  left: auto;
  right: 5px;
}
.flyout--trigger\@16.flyout--top::before,
.flyout--trigger\@16.flyout--top::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout--trigger\@16.flyout--top {
  padding-bottom: 10px;
}
.flyout--trigger\@16.flyout--top::before,
.flyout--trigger\@16.flyout--top::after {
  bottom: 4px;
}
.flyout--trigger\@16.flyout--top::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple204);
}
.flyout--trigger\@16.flyout--top::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple255);
  bottom: 5px;
}
.flyout--trigger\@16.flyout--top.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@16.flyout--top.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@16.flyout--top.flyout--right::before {
  right: auto;
  left: 5px;
}
.flyout--trigger\@16.flyout--top.flyout--right::after {
  right: auto;
  left: 5px;
}
.flyout--trigger\@16.flyout--top.flyout--left::before {
  left: auto;
  right: 5px;
}
.flyout--trigger\@16.flyout--top.flyout--left::after {
  left: auto;
  right: 5px;
}
.flyout--trigger\@12 .flyout__outer {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 8px 16px 16px;
}
.flyout--trigger\@12.flyout--bottom::before,
.flyout--trigger\@12.flyout--bottom::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout--trigger\@12.flyout--bottom {
  padding-top: 10px;
}
.flyout--trigger\@12.flyout--bottom::before,
.flyout--trigger\@12.flyout--bottom::after {
  top: 4px;
}
.flyout--trigger\@12.flyout--bottom::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple204);
}
.flyout--trigger\@12.flyout--bottom::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-triple255);
  top: 5px;
}
.flyout--trigger\@12.flyout--bottom.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@12.flyout--bottom.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@12.flyout--bottom.flyout--right::before {
  right: auto;
  left: 1px;
}
.flyout--trigger\@12.flyout--bottom.flyout--right::after {
  right: auto;
  left: 1px;
}
.flyout--trigger\@12.flyout--bottom.flyout--left::before {
  left: auto;
  right: 1px;
}
.flyout--trigger\@12.flyout--bottom.flyout--left::after {
  left: auto;
  right: 1px;
}
.flyout--trigger\@12.flyout--top::before,
.flyout--trigger\@12.flyout--top::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.flyout--trigger\@12.flyout--top {
  padding-bottom: 10px;
}
.flyout--trigger\@12.flyout--top::before,
.flyout--trigger\@12.flyout--top::after {
  bottom: 4px;
}
.flyout--trigger\@12.flyout--top::before {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple204);
}
.flyout--trigger\@12.flyout--top::after {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-triple255);
  bottom: 5px;
}
.flyout--trigger\@12.flyout--top.flyout--center::before {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@12.flyout--top.flyout--center::after {
  margin-left: 50%;
  left: -6px;
}
.flyout--trigger\@12.flyout--top.flyout--right::before {
  right: auto;
  left: 1px;
}
.flyout--trigger\@12.flyout--top.flyout--right::after {
  right: auto;
  left: 1px;
}
.flyout--trigger\@12.flyout--top.flyout--left::before {
  left: auto;
  right: 1px;
}
.flyout--trigger\@12.flyout--top.flyout--left::after {
  left: auto;
  right: 1px;
}
/*
Flyout Base Internal Scroll

Für Kind-Elemente bzw. Blöcke, die selbst eine Scroll-Option besitzen.

Styleguide ###interaktiveElemente.flyout.base.internalScroll###
*/
.flyout--internalScroll {
  width: 22.12rem;
}
.flyout--internalScroll .flyout__outer {
  border-width: 0;
  max-height: 31rem;
}
.flyout--internalScroll .flyout__inner {
  margin-right: 0;
  line-height: 0;
}
/*
Flyout Base Randfälle

markup: demo/demo.flyout.base.edgeCases.html

Styleguide ###interaktiveElemente.flyout.base.edgeCases###
*/
/*
Flyout Light Box

markup: demo/demo.flyout.lightBox.html

Styleguide ###interaktiveElemente.flyout.lightBox###
*/
/*
Form Item

Ein FormItem entspricht einer Zeile in einem Formularblock. Jede Zeile kann dabei aus einem oder mehreren Input-Elementen sowie
zugehörigen Labels bestehen. Für jedes Input können einzeln die folgenden Größen festgelegt werden:

#### Feldgrößen
- s - small
- m - medium
- l - large
- xl - extra large
- xxl - extra extra large
- xxxl - extra extra extra large

Zusätzlich kann das Größen-Verhältnis zwischen Label und Input Feld definiert werden. Hierfür stehen die folgenden Optionen zur Verfügung:

#### Layoutgrößen (Verhältnis Label : Feldtyp)
- 0 : 100
- 20 : 80
- 30 : 70
- 40 : 60
- 50 : 50
- 60 : 40
- 70 : 30
- 80 : 20
- 90 : 10

WICHTIG: Die Layoutgrößen gelten nicht für die Input-Typen "radio" und "checkbox"

In der mobilen Darstellung werden die Layoutgrößen vernachlässigt, da dort das Label immer über dem
jeweiligen Input-Typ (welcher eine Breite von 100% besitzt)
platziert ist.

Für die Typen des Input-Elementes stehen folgende Typen zur Verfügung:

#### Feldtypen
- input (inkl. type attr)
- select
- textarea
- checkbox

Die Zeilennummer kann für jedes Form-Item definiert werden. Wichtig ist hierbei, auch das nötige
Markup in das FormItem einzufügen.

Wird ein "Berechnen" oder "Übertragen" Button in der Metabar eingefügt, muss für die rechte Textausrichtung
innerhalb des zugehörigen ".formItem\__field" auf diesem Element der Modifier ".formItem\__field--numberValue" hinzugefügt werden.

Pflichtfelder lassen sich über ARIA (aria-required: true) kennzeichnen.
Zusätzlich wird noch in der Metabar das Pflichtfeldsternchen gesetzt.

Bei Checkbox-oder Radio-Gruppen wird ARIA nicht gesetzt.

#### Modifier
- emphasize - Große Schrift und grüne Textfarbe für Input-Elemente

#### Attribute für die input-Elemente
- data-no-confirm-leaving - Mit diesem Attribut kann das Input von der Überprüfung ausgeschlossen werden, die das Modal
"modal.standard.verlassenbestaetigen" öffnet.

markup: demo.formItem.html

Styleguide ###formularElemente.formItem###
*/
/*

Input

markup: demo.formItem.input.html

Styleguide ###formularElemente.formItem.input###

*/
/*

Input mit Tooltips

markup: demo.formItem.tooltip.html

Styleguide ###formularElemente.formItem.tooltip###

*/
/*

Textarea

markup: demo.formItem.textarea.html

Styleguide ###formularElemente.formItem.textarea###

*/
/*

Select

markup: demo.formItem.select.html

Styleguide ###formularElemente.formItem.select###

*/
/*

Checkbox Radio

markup: demo.formItem.checkboxRadio.html

Styleguide ###formularElemente.formItem.checkboxRadio###

*/
/*

MultiLevelSelect-Element zur hierarchischen Auswahl von Optionen.

Die entsprechenden Select-Elemente werden über asynchrone Updates nachgeladen.
Hierfür hat das MultiLevelSelect ein verstecktes Text-Input, dessen Wert bei Aktualisierung
der Select-Elemente geändert wird. Die Asynchronen Updates hören auf die Änderung dieses versteckten Text-Inputs.

markup: demo.formItem.multiLevelSelect.html

Styleguide ###formularElemente.formItem.multiLevelSelect###

*/
/*

Datepicker

Ein Steuerelement, bestehend aus einem Kalender und einem Flyout, zur Auswahl eines Datums über die grafische
Benutzeroberfläche.

markup: demo.formItem.datepickerBase.html

Styleguide ###formularElemente.formItem.baseDatepicker###

*/
/*

Range Datepicker

Eine modifizierte Ausprägung des Datepickers, zur Darstellung von Zeitspannen

markup: demo.formItem.datepickerRange.html

Styleguide ###formularElemente.formItem.rangeDatepicker###

*/
/*

File

Dateiauswahl

markup: demo.formItem.file.html

Styleguide ###formularElemente.formItem.file###

*/
/*

File Extended

Erweiterung der Dateiauswahl. Bei Klick auf den Auswählen-Button wird ein Modal geöffnet,
in dem der Nutzer sich zwischen der klassischen Dateiauswahl und der Belegauswahl aus der Belegverwaltung
entscheiden kann.

markup: demo.formItem.fileExtended.html

Styleguide ###formularElemente.formItem.fileExtended###

*/
/*

Input

markup: demo.input.html

Styleguide ###cores.input###

*/
/*

Textarea

markup: demo.textarea.html

Styleguide ###cores.textarea###

*/
/*

Select

markup: demo.select.html

Styleguide ###cores.select###

*/
/*

Meta

markup: demo.meta.html

Styleguide ###cores.meta###

*/
.formItem {
  --color-tooltipBackground: #fff9d1;
  --prefix-width: 0;
  display: flex;
  margin-bottom: 0.18rem;
  color: var(--color-text);
  background-color: var(--color-infoBackground);
}
.dark .formItem {
  --color-tooltipBackground: #000;
}
.formItem .formItem__labelGroup {
  flex-grow: 1;
  flex-basis: 0;
}
.formItem--layout_20-80 .formItem__fieldGroup {
  flex-basis: 41.3rem;
}
.formItem--layout_30-70 .formItem__fieldGroup {
  flex-basis: 36.13rem;
}
.formItem--layout_40-60 .formItem__fieldGroup {
  flex-basis: 30.97rem;
}
.formItem--layout_50-50 .formItem__fieldGroup {
  flex-basis: 25.81rem;
}
.formItem--layout_60-40 .formItem__fieldGroup {
  flex-basis: 20.65rem;
}
.formItem--layout_70-30 .formItem__fieldGroup {
  flex-basis: 15.48rem;
}
.formItem--layout_80-20 .formItem__fieldGroup {
  flex-basis: 10.32rem;
}
.formItem--layout_90-10 .formItem__fieldGroup {
  flex-basis: 5.16rem;
}
.formItem--layout_0-100 .formItem__line {
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 1rem;
  flex: 1 0 auto;
}
.formItem--layout_0-100 .formItem__labelGroup {
  flex-shrink: 0;
  text-align: left;
  margin-left: 0;
  justify-content: flex-start;
  flex-basis: auto;
}
.formItem--layout_0-100 .formItem__fieldGroup {
  flex-basis: auto;
  flex-direction: column;
}
.formItem--layout_0-100 .formItem__fieldItem {
  flex: 1 0 auto;
  width: auto;
}
.formItem--layout_0-100 .formItem__fieldItem:not(:last-child) {
  margin-bottom: 0.5rem;
}
.formItem--layout_0-100 .formItem__tooltip {
  top: auto;
  bottom: -1.44rem;
}
.formItem--layout_0-100 .formItem__tooltip::before,
.formItem--layout_0-100 .formItem__tooltip::after {
  top: auto;
  bottom: 100%;
  border-color: transparent;
}
.formItem--layout_0-100 .formItem__tooltip::before {
  border-bottom-color: var(--color-inputBorder);
}
.formItem--layout_0-100 .formItem__tooltip::after {
  border-bottom-color: var(--color-tooltipBackground);
}
.formItem--login {
  padding: 0;
  background-color: var(--color-inputBackground);
}
.formItem--login > .formItem__wrapper {
  background-color: var(--color-bodyBackground);
}
.formItem--login .formItem__line {
  padding: 0;
}
.formItem--login .formItem__fieldItem {
  margin: 0;
}
.formItem--emphasize input {
  font-size: 3.5rem;
  color: var(--color-app-dark);
}
.formItem__labelItem:not(:only-child):not(._helper-invisible) {
  padding-left: 0.5rem;
  position: relative;
}
.formItem__labelItem:not(:only-child):not(._helper-invisible):first-child {
  padding-left: 0;
}
.formItem__labelItem:not(:only-child):not(._helper-invisible)::after {
  content: ', ';
  position: relative;
  left: 0;
  z-index: 1;
}
.formItem__labelItem:not(:only-child):not(._helper-invisible).formItem__labelItem--onlyVisibleChild::after,
.formItem__labelItem:not(:only-child):not(._helper-invisible):last-child::after {
  content: '';
}
.formItem__labelItem._helper-invisible + .formItem__fieldItem {
  margin-left: 0.31rem;
}
.formItem__fieldItem {
  margin-right: 0.31rem;
}
.formItem__fieldGroup > .formItem__labelItem {
  display: none;
}
.formItem__fieldGroup > .formItem__labelItem > .formItem__label {
  display: none;
}
.formItem__lnr {
  font-size: 0.75rem;
  color: var(--color-triple114);
  min-width: 2.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 0.5rem;
  padding-top: 1.06rem;
}
.formItem__wrapper {
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
  background-color: var(--color-triple242);
}
.formItem__metaBar {
  background: var(--color-triple221);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--color-triple204);
  flex-flow: row;
  border-top: 0;
  min-height: 1.68rem;
}
.formItem__metaBarDatepicker,
.formItem__metaBarComputation,
.formItem__metaBarCarryOver,
.formItem__metaBarAutoCalculationInactive,
.formItem__metaBarHelp {
  order: -1;
}
.formItem__metaBarSourced {
  order: 1;
}
.formItem__metaBarRightContainer,
.formItem__metaBarLeftContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0.25rem;
}
.formItem__metaBarRightContainer > *,
.formItem__metaBarLeftContainer > * {
  display: flex;
  margin: 0.25rem 3px;
}
.formItem__metaBarRightContainer > .formItem__metaBarDatepicker,
.formItem__metaBarLeftContainer > .formItem__metaBarDatepicker {
  margin-left: 2px;
  margin-right: 2px;
}
.formItem__metaBarRightContainer > .formItem__metaBarKeyFigure,
.formItem__metaBarLeftContainer > .formItem__metaBarKeyFigure,
.formItem__metaBarRightContainer > .formItem__metaBarHelp,
.formItem__metaBarLeftContainer > .formItem__metaBarHelp,
.formItem__metaBarRightContainer > .formItem__metaBarSourced,
.formItem__metaBarLeftContainer > .formItem__metaBarSourced {
  margin-left: 2px;
  margin-right: 2px;
}
.formItem__metaBarRightContainer {
  max-width: 40%;
  justify-content: right;
  flex-flow: row-reverse;
}
.formItem__metaBarRightContainer:first-child {
  margin-left: auto;
}
.formItem__metaBarRightContainer > .formItem__metaBarSourced {
  margin-right: 0.12rem;
}
.formItem__metaBarKeyFigure {
  font-size: 0.68rem;
  color: var(--color-triple72);
  padding: 0 0.12rem;
}
.formItem__metaBarComputation .interactive-icon {
  border: 0;
  font-size: 0.68rem;
}
.formItem__metaBarComputation--withText .interactive-icon {
  padding-right: 0.31rem;
}
.formItem__line {
  display: flex;
  flex-grow: 1;
  padding: 0.5rem 1rem 0.5rem 0;
}
.formItem__line + .formItem__line {
  border-top: 2px solid var(--color-bodyBackground);
}
.formItem__line--alternateOrder {
  align-items: flex-start;
  padding-left: 1.25rem;
}
.formItem__line--alternateOrder .formItem__fieldGroup {
  flex-basis: auto;
  margin-right: 0.75rem;
}
.formItem__line--alternateOrder .formItem__labelGroup {
  margin-right: 0;
  margin-left: 0;
  flex-basis: 100%;
  flex-grow: 0;
  justify-content: flex-start;
  padding-top: 0;
}
.formItem__line--alternateOrder .formItem__labelItem {
  text-align: left;
}
.formItem__line--alternateOrder .formItem__metaBar {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.31rem;
  display: inline-flex;
  min-height: inherit;
}
.formItem__line--alternateOrder .formItem__metaBarKeyFigure {
  background: var(--color-triple221);
  line-height: 1.4;
}
.formItem__line--alternateOrder .formItem__metaBarRequiredField {
  display: block;
}
.formItem__line--alternateOrder .formItem__metaBarLeftContainer,
.formItem__line--alternateOrder .formItem__metaBarRightContainer {
  min-height: unset;
}
.formItem__line--alternateOrder .formItem__metaBarLeftContainer {
  padding: 0;
}
.formItem__legend + .formItem__line--alternateOrder {
  border-top: 2px solid var(--color-bodyBackground);
}
.formItem__legend .formItem__metaBarRequiredField {
  display: block;
}
.formItem__legend .formItem__metaBarLeftContainer {
  margin-right: 0.25rem;
}
.formItem__labelGroup,
.formItem__fieldGroup {
  display: flex;
}
.formItem__labelGroup {
  justify-content: flex-end;
  margin-right: 1rem;
  margin-left: 1rem;
  padding-top: 0.5rem;
  flex-wrap: wrap;
}
.formItem__labelItem {
  text-align: right;
}
.formItem__label + .interactive-help {
  vertical-align: text-bottom;
}
.formItem__fieldItem {
  position: relative;
  width: 100%;
}
.formItem__fieldItem--size-s {
  flex-basis: 4.84rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-m {
  flex-basis: 10.01rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-l {
  flex-basis: 15.17rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-xl {
  flex-basis: 20.33rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-xxl {
  flex-basis: 25.5rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-xxxl {
  flex-basis: 30.66rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-xxxxl {
  flex-basis: 35.82rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-xxxxxl {
  flex-basis: 40.98rem;
  flex-shrink: 0;
}
.formItem__fieldItem--size-s .formItem__metaBar {
  flex-flow: column;
}
.formItem__fieldItem--size-s .formItem__metaBarRightContainer,
.formItem__fieldItem--size-s .formItem__metaBarLeftContainer {
  padding: 0;
  max-width: none;
}
.formItem__fieldItem--size-s .formItem__metaBarRightContainer > .formItem__metaBarDatepicker,
.formItem__fieldItem--size-s .formItem__metaBarLeftContainer > .formItem__metaBarDatepicker {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.formItem__fieldItem .interactive-meta-icon {
  padding: 0;
  width: 1.18rem;
}
.formItem__fieldItem--size-xxl .interactive-meta-icon,
.formItem__fieldItem--size-xxxl .interactive-meta-icon,
.formItem__fieldItem--size-xxxxl .interactive-meta-icon,
.formItem__fieldItem--size-xxxxxl .interactive-meta-icon {
  padding-right: 2px;
  width: auto;
}
.formItem__fieldItem .formItem__passwordMeterScoreBar {
  width: 83.33%;
}
.formItem__fieldItem .formItem__passwordMeterScoreHint {
  padding: 0.5rem;
  border: 1px solid var(--color-inputBorder);
  font-size: 0.87rem;
  color: var(--color-triple51);
}
.formItem__fieldItem .formItem__passwordMeterScoreHint ul {
  list-style: square;
  padding: 0 1.12rem;
}
.formItem__fieldItem .formItem__passwordMeterScoreHint h3 {
  margin-top: 0;
}
.formItem__fieldItem .formItem__passwordMeterScoreHint--empty {
  display: none;
}
.formItem__fieldItem[data-score-level='0'] .formItem__passwordMeterScoreBar {
  width: 66.66%;
}
.formItem__fieldItem[data-score-level='1'] .formItem__passwordMeterScoreBar {
  width: 50%;
}
.formItem__fieldItem[data-score-level='2'] .formItem__passwordMeterScoreBar {
  width: 33.33%;
}
.formItem__fieldItem[data-score-level='3'] .formItem__passwordMeterScoreBar {
  width: 16.66%;
}
.formItem__fieldItem[data-score-level='4'] .formItem__passwordMeterScoreBar {
  width: 0;
}
.formItem__fieldItem--file {
  min-height: 2.25rem;
}
.formItem__field {
  width: 100%;
  border: 1px solid var(--color-inputBorder);
  padding: 0.37rem 0.5rem;
  display: block;
  background-color: var(--color-inputBackground);
  color: var(--color-text);
  border-radius: 0;
}
.formItem__field--numberValue {
  text-align: right;
}
.formItem__field--checkbox,
.formItem__field--radio {
  width: auto;
  transform: translateY(5px);
}
.macos.safari .formItem__field--checkbox,
.macos.safari .formItem__field--radio {
  width: 1.12rem;
  height: 1.12rem;
}
.formItem__field--checkbox.formItem__field:invalid,
.formItem__field--radio.formItem__field:invalid,
.formItem__field--checkbox.formItem__field--invalid,
.formItem__field--radio.formItem__field--invalid {
  outline: 0.25rem solid var(--color-error);
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field:invalid:focus,
.formItem__field--radio.formItem__field:invalid:focus,
.formItem__field--checkbox.formItem__field--invalid:focus,
.formItem__field--radio.formItem__field--invalid:focus {
  box-shadow: 0 0 0 4px var(--color-error);
  outline: none;
}
.safari .formItem__field--checkbox.formItem__field:invalid:focus,
.safari .formItem__field--radio.formItem__field:invalid:focus,
.safari .formItem__field--checkbox.formItem__field--invalid:focus,
.safari .formItem__field--radio.formItem__field--invalid:focus {
  outline: 0.25rem double var(--color-error);
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field--marked,
.formItem__field--radio.formItem__field--marked {
  outline: 0.25rem solid var(--color-warning);
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field--marked:focus,
.formItem__field--radio.formItem__field--marked:focus {
  box-shadow: 0 0 0 4px var(--color-warning);
  outline: none;
}
.safari .formItem__field--checkbox.formItem__field--marked:focus,
.safari .formItem__field--radio.formItem__field--marked:focus {
  outline: 0.25rem double var(--color-warning);
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field:focus,
.formItem__field--radio.formItem__field:focus {
  outline: 1px dotted var(--color-triple0);
}
.formItem__field--textarea {
  -webkit-overflow-scrolling: touch;
  min-height: 2.18rem;
}
.ie .formItem__field--textarea----valid {
  box-shadow: none !important;
}
.formItem__field--textarea-min-medium {
  min-height: 10.25rem;
}
.formItem__field--textarea-large {
  height: 15.62rem;
}
.formItem__field--select,
.formItem__field--multiLevelSelect,
.formItem__field--text {
  min-height: 2.25rem;
}
.formItem__field--text,
.formItem__field--textarea,
.formItem__field--input,
.formItem__field--password {
  -webkit-appearance: none;
}
.formItem__field--password {
  padding-right: 2rem;
}
.formItem__field--select,
.formItem__field--multiLevelSelect {
  padding: 0.25rem 0.25rem 0.31rem;
}
.formItem__field--multiLevelSelect:not(.formItem__field--multiLevelSelect:first-of-type) {
  margin-top: 0.5rem;
}
.formItem__field--multiLevelSelectHidden {
  display: none;
}
.formItem__field--file,
.formItem__field--fileExtended {
  display: none;
}
.formItem__field--invalid,
.formItem__field:invalid,
.formItem__field--marked,
.formItem__field--allocated,
.objectField__field--invalid,
.objectField__field--marked,
.formItem__fieldItem--receipt-allocated .formItem__field--text,
.formItem__fieldItem--receipt-allocated .formItem__field--textarea,
.formItem__fieldItem--receipt-allocated .interactive-receipt {
  border-bottom: 0;
  margin-bottom: 0.25rem;
  outline: none;
}
.formItem__field--invalid,
.formItem__field:invalid,
.objectField__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error);
}
.formItem__field--marked,
.objectField__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning);
}
.formItem__field--allocated,
.formItem__fieldItem--receipt-allocated .formItem__field--text,
.formItem__fieldItem--receipt-allocated .formItem__field--textarea,
.formItem__fieldItem--receipt-allocated .interactive-receipt {
  border: 0;
  box-shadow: 0 0 0 0.25rem var(--color-active);
}
.formItem__field:focus {
  outline: 1px dotted var(--color-triple0);
}
.formItem__field::-webkit-input-placeholder {
  font-style: italic;
  color: var(--color-triple114);
}
.formItem__field::-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
  opacity: 1;
}
.formItem__field:-ms-input-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.formItem__field:-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.formItem__field[readonly],
.formItem__field[disabled],
.labelInput input[readonly],
.labelInput input[disabled] {
  background-color: var(--color-triple242);
  color: var(--color-triple93);
}
.formItem__field[disabled],
.labelInput input[disabled] {
  -webkit-text-fill-color: var(--color-triple93);
  -webkit-opacity: 1;
}
.formItem__field--uppercase {
  text-transform: uppercase;
}
.formItem__fieldLimit {
  font-size: 0.75rem;
  color: var(--color-triple63);
  margin-top: 0.25rem;
}
.formItem__fieldIcon {
  display: block;
}
.formItem__fieldIconAnchor {
  width: auto;
  display: inline-block;
  padding: 0.18rem 0.37rem;
  font-size: 0.62rem;
}
.formItem__fieldIconAnchor > span {
  pointer-events: none;
  cursor: pointer;
}
.formItem__fieldIconAnchor--filled {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.formItem__fieldIconAnchor--hidden {
  display: none;
}
.formItem__metaBar .formItem__fieldIcon {
  position: relative;
  line-height: 0;
}
.formItem__metaBar .formItem__fieldIconAnchor {
  padding: 0;
}
.formItem__metaBar .formItem__fieldIcon .flyout--right::before,
.formItem__metaBar .formItem__fieldIcon .flyout--right::after {
  left: 2px;
}
.formItem__metaBar .formItem__fieldIcon .flyout--left::before,
.formItem__metaBar .formItem__fieldIcon .flyout--left::after {
  right: 2px;
}
.formItem__fieldIconList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1px;
  right: 1px;
  height: 2.12rem;
}
.formItem__fieldIconList--left {
  right: auto;
  left: 0;
}
.formItem__fieldIconList--alignTop {
  height: 2.12rem;
  align-items: flex-start;
  top: 0;
}
.formItem__fieldIconList > div {
  padding-left: 0;
}
.formItem__error {
  color: var(--color-error);
  font-size: 0.75rem;
  display: none;
}
.formItem__operator,
.formItem__prefix,
.formItem__carryOver {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: 0.56rem;
  height: 1rem;
}
.formItem__operator {
  width: 1rem;
  left: 1px;
}
.formItem__operator ~ .formItem__field {
  padding-left: 1.5rem;
  box-shadow: inset 17px 0 0 var(--color-triple221);
}
.formItem__operator ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error), inset 17px 0 0 var(--color-triple221);
}
.formItem__operator ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning), inset 17px 0 0 var(--color-triple221);
}
.formItem__carryOver {
  right: 1px;
}
.formItem__carryOver ~ .formItem__field {
  padding-right: 1.5rem;
  box-shadow: inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error), inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning), inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset 17px 0 0 var(--color-triple221), inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error), inset 17px 0 0 var(--color-triple221), inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning), inset 17px 0 0 var(--color-triple221), inset -1.07rem 0 0 var(--color-triple221);
}
.formItem__prefix {
  background: var(--color-triple242);
  color: var(--color-triple51);
  left: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
}
.formItem__prefix ~ .formItem__field {
  padding-left: calc(var(--prefix-width) + 0.87rem);
  box-shadow: inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__prefix ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error), inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__prefix ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning), inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__prefix ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset -1.07rem 0 0 var(--color-triple221), inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__prefix ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-error), inset -1.07rem 0 0 var(--color-triple221), inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__prefix ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem var(--color-warning), inset -1.07rem 0 0 var(--color-triple221), inset calc(var(--prefix-width) + 0.37rem) 0 0 var(--color-triple242);
}
.formItem__legend {
  padding: 0.87rem 0 0.62rem 1rem;
  background-color: var(--color-triple242);
}
.formItem__legend .formItem__metaBar {
  display: inline-flex;
  background: none;
  padding: 0;
  margin-left: 0.5rem;
  border: 0;
  min-height: auto;
}
.formItem__legend .formItem__metaBarKeyFigure {
  background-color: var(--color-triple221);
  line-height: 1.4;
}
.formItem__help,
.formItem__alternateOrder {
  padding-right: 0.12rem;
}
.formItem__help > .interactive-icon,
.formItem__alternateOrder > .interactive-icon {
  vertical-align: bottom;
}
.formItem__help:first-child,
.formItem__alternateOrder:first-child {
  margin-left: 1rem;
}
.formItem__help:last-child,
.formItem__alternateOrder:last-child {
  padding-right: 0.5rem;
}
.formItem__tooltip {
  display: none;
  font-size: 0.75rem;
  position: absolute;
  top: -1.5rem;
  z-index: 300;
  background-color: var(--color-tooltipBackground);
  padding: 0.12rem 0.25rem;
  border: 1px solid var(--color-inputBorder);
  white-space: nowrap;
  cursor: default;
}
.formItem__tooltip::before,
.formItem__tooltip::after {
  content: " ";
  top: 100%;
  left: 5px;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.formItem__tooltip::before {
  border-top-color: var(--color-inputBorder);
  border-width: 8px;
  margin: 0 -1px;
}
.formItem__tooltip::after {
  border-top-color: var(--color-tooltipBackground);
  border-width: 7px;
}
.formItem__tooltip--right {
  right: 0;
}
.formItem__tooltip--right::before,
.formItem__tooltip--right::after {
  left: auto;
  right: 5px;
}
.formItem__tooltip--show {
  display: block;
}
.formItem__tooltip--hide {
  display: none;
}
.formItem__passwordMeterScore {
  height: 8px;
  margin-top: 2px;
  background: linear-gradient(to right, var(--color-error), var(--color-warning-light), var(--color-success-dark));
  display: flex;
  justify-content: flex-end;
}
.formItem__passwordMeterScoreBar {
  height: 100%;
  background: var(--color-formBackground);
}
.formItem__sourced .formItem__field,
.formItem__sourced .formItem__field.formItem__field--select,
.macos .formItem__sourced .formItem__field,
.macos .formItem__sourced .formItem__field.formItem__field--select {
  padding-left: 1.25rem;
}
.formItem__datepicker .formItem__field {
  padding-left: 2.18rem;
}
.formItem__datepicker .formItem__field[disabled],
.formItem__datepicker .formItem__field[readonly] {
  padding-left: 0.5rem;
}
.formItem__datepicker.formItem__sourced .formItem__fieldIconList--left {
  margin-left: 0.87rem;
}
.formItem__datepicker.formItem__sourced .formItem__fieldIconList--left:first-child {
  margin-left: 0;
}
.formItem__datepicker.formItem__sourced .formItem__field {
  padding-left: 3.06rem;
}
.formItem__datepicker.formItem__sourced .formItem__field[disabled],
.formItem__datepicker.formItem__sourced .formItem__field[readonly] {
  padding-left: 1.25rem;
}
.formItem__fileInfo {
  display: none;
}
.edge.edgehtml .formItem__field--select,
.edge.edgehtml .formItem__field--multiLevelSelect {
  padding: 0.31rem 0.37rem;
}
.firefox .formItem__field--select,
.firefox .formItem__field--multiLevelSelect {
  -moz-appearance: none;
  padding: 0.43rem 1.25rem 0.25rem 0.25rem;
  background-image: url("../img/triangle_down-black.svg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}
.dark.firefox .formItem__field--select,
.dark.firefox .formItem__field--multiLevelSelect {
  background-image: url("../img/triangle_down-black--dark.svg");
}
.firefox .formItem__field--select[readonly],
.firefox .formItem__field--multiLevelSelect[readonly],
.firefox .formItem__field--select[disabled],
.firefox .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242.svg");
}
.dark.firefox .formItem__field--select[readonly],
.dark.firefox .formItem__field--multiLevelSelect[readonly],
.dark.firefox .formItem__field--select[disabled],
.dark.firefox .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242--dark.svg");
}
.firefox.mobile .formItem__field--radio,
.firefox.mobile .formItem__field--checkbox {
  transform: translateY(3px);
  padding: 1px;
}
.firefox.mobile .formItem__field--radio {
  border-radius: 50%;
}
.macos .formItem__field--select,
.ios .formItem__field--select,
.macos .formItem__field--multiLevelSelect,
.ios .formItem__field--multiLevelSelect {
  -webkit-appearance: none;
  padding: 0.37rem 1.25rem 0.37rem 0.5rem;
  background-image: url("../img/triangle_down-black.svg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}
.dark.macos .formItem__field--select,
.dark.ios .formItem__field--select,
.dark.macos .formItem__field--multiLevelSelect,
.dark.ios .formItem__field--multiLevelSelect {
  background-image: url("../img/triangle_down-black--dark.svg");
}
.macos .formItem__field--select[readonly],
.ios .formItem__field--select[readonly],
.macos .formItem__field--multiLevelSelect[readonly],
.ios .formItem__field--multiLevelSelect[readonly],
.macos .formItem__field--select[disabled],
.ios .formItem__field--select[disabled],
.macos .formItem__field--multiLevelSelect[disabled],
.ios .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242.svg");
}
.dark.macos .formItem__field--select[readonly],
.dark.ios .formItem__field--select[readonly],
.dark.macos .formItem__field--multiLevelSelect[readonly],
.dark.ios .formItem__field--multiLevelSelect[readonly],
.dark.macos .formItem__field--select[disabled],
.dark.ios .formItem__field--select[disabled],
.dark.macos .formItem__field--multiLevelSelect[disabled],
.dark.ios .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242--dark.svg");
}
.ios .formItem__field--select,
.ios .formItem__field--multiLevelSelect {
  padding: 0.43rem 1.25rem 0.43rem 0.5rem;
}
.safari.desktop .formItem__field--select,
.safari.desktop .formItem__field--multiLevelSelect {
  padding: 0.37rem 1.25rem 0.43rem 0.5rem;
}
.linux .formItem__field--select,
.linux .formItem__field--multiLevelSelect {
  -moz-appearance: none;
  padding: 0.31rem 0.25rem 0.25rem;
  background-image: url("../img/triangle_down-black.svg");
  background-position: right;
  background-repeat: no-repeat;
  background-size: 1.25rem;
}
.dark.linux .formItem__field--select,
.dark.linux .formItem__field--multiLevelSelect {
  background-image: url("../img/triangle_down-black--dark.svg");
}
.linux .formItem__field--select[readonly],
.linux .formItem__field--multiLevelSelect[readonly],
.linux .formItem__field--select[disabled],
.linux .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242.svg");
}
.dark.linux .formItem__field--select[readonly],
.dark.linux .formItem__field--multiLevelSelect[readonly],
.dark.linux .formItem__field--select[disabled],
.dark.linux .formItem__field--multiLevelSelect[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242--dark.svg");
}
/*
LabelInput

Kombinationen aus Label und sowohl innen- als auch außenliegendem Input Feld.

Anmerkung: Fehlerhafte Eingaben werden trotz fehlendem formItem durch die Klasse formItem__field--invalid rot markiert.

markup: demo.labelInput.html

Styleguide ###formularElemente.labelInput###
*/
.labelInput input {
  font-size: 0.87rem;
  width: 100%;
  padding: 0.37rem 0.5rem;
  border: 1px solid var(--color-inputBorder);
  margin-right: 1rem;
  background-color: var(--color-inputBackground);
  color: var(--color-text);
}
.labelInput input[type="text"] {
  border-radius: 0;
  -webkit-appearance: none;
}
.labelInput input[type="checkbox"],
.labelInput input[type="radio"] {
  margin-right: 0.75rem;
  width: auto;
  transform: translateY(2px);
}
.labelInput input:focus {
  outline: 1px dotted var(--color-triple0);
}
.labelInput label {
  width: 100%;
  font-size: 0.75rem;
}
.labelInput input[type="checkbox"]:not(:first-child),
.labelInput input[type="radio"]:not(:first-child) {
  margin: 0 0 0 0.75rem;
}
.labelInput__text > input {
  margin: 0 0 0 1rem;
}
.table-collapse table {
  border-collapse: separate;
  border-spacing: 0;
}
.table-collapse thead {
  display: none;
}
.table-collapse thead .interactive-icon {
  padding: 0.5rem;
  margin: -4px -8px;
}
.table-collapse thead .interactive-icon__text {
  text-align: left;
}
.table-collapse th {
  border-top: 0;
  border-bottom: 3px solid var(--color-bodyBackground);
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .table-collapse th {
    word-break: break-word;
  }
}
.android.chrome .table-collapse th {
  word-break: break-word;
}
.table-collapse th > .interactive-icon {
  display: inline-flex;
}
.table-collapse tbody td {
  display: block;
  border-top: none;
  text-align: left;
  font-weight: bold;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .table-collapse tbody td {
    word-break: break-word;
  }
}
.android.chrome .table-collapse tbody td {
  word-break: break-word;
}
.table-collapse tbody td .table-collapse__cellTitle {
  font-size: 0.75rem;
  display: block;
}
.table-collapse tbody td:last-child {
  border-bottom: 3px solid var(--color-bodyBackground);
  padding-bottom: 0.31rem;
}
.table-collapse tbody .table-collapse__row--highlight td {
  border-left: 0.25rem solid var(--color-active);
  border-right: 0.25rem solid var(--color-active);
  padding-left: 0.25rem;
}
.table-collapse tbody .table-collapse__row--highlight td:last-child {
  border-bottom: 0.25rem solid var(--color-active);
}
.table-collapse tbody .table-collapse__row--highlight td:first-child {
  border-top: 0.25rem solid var(--color-active);
}
.table-collapse tbody .table-collapse__row--highlight + .table-collapse__row td:first-child {
  border-top: 3px solid var(--color-bodyBackground);
}
.table-collapse tbody .table-collapse__row--hidden {
  display: none;
}
.table-collapse tbody .table-collapse__row--spacing-6 td:last-child {
  border-bottom: 0.37rem solid var(--color-bodyBackground);
}
.table-collapse tbody .table-collapse__row .panel {
  margin-top: 0.25rem;
  background-color: var(--color-triple204);
  margin-left: 1rem;
}
.table-collapse tbody .table-collapse__row .panel__item {
  margin-bottom: 0.0625rem;
}
.table-collapse tbody .table-collapse__row .panel__item:last-child {
  margin-bottom: 0;
}
.table-collapse tbody .table-collapse__row a[data-selector="_table-collapse.interactive.showDetails"] {
  padding-left: 0;
}
.table-collapse tbody .table-collapse__toggleWrapper {
  border-top: 1px solid var(--color-triple204);
  border-bottom: 1px solid var(--color-triple204);
}
.table-collapse tr .labelInput__text {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto;
  overflow: visible;
}
.table-collapse__el {
  border-collapse: separate;
  border-spacing: 0;
}
.table-collapse__footer {
  padding: 0.5rem;
  background-color: var(--color-triple248);
}
.table-collapse__footer .alignment--buttonGroup {
  margin-top: 0;
}
.table-collapse__footer .interactive-icon--only {
  margin-bottom: 0.18rem;
}
.table-collapse__selectAll {
  display: inline-block;
}
.table-collapse--width-100 {
  width: 100%;
}
.table-collapse--overSize {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-collapse--wrapContent tbody td {
  word-break: break-all;
}
.table-collapse ._helper-infoEmpty {
  font-weight: normal;
}
.edge.edgehtml .table-collapse td .alignment--iconLeft > *:last-child {
  flex: 0 1 auto;
}
.edge.edgehtml .table-collapse:not(.table-collapse--fixed) ._helper-hyphens {
  word-break: break-all;
}
/*
Aside

Die Komponente Aside kann eine Haupt- und eine Unterüberschrift besitzen.
Ihr Inhalt kann aus Fließtext, Listen, Tabellen, Bildern mit Bildunterschriften (siehe figure) und Bildern, die sich
im Modal öffnen lassen (siehe figure-zoom), bestehen.

Wenn die Bildschirmauflösung mindestens 1600px beträgt, wird das Aside in der SLIM-Variante im Reservebereich platziert.
Ist die Bildschirmauflösung kleiner als 1600px, wird das Aside unterhalb des Seiteninhaltes oder Rows platziert, wobei
ein extra Padding hinzugefügt wird. Bei Bildschirmauflösungen kleiner als 480px wird das Aside wieder SLIM dargestellt.

markup: demo.aside.html

Styleguide ###portalrahmen.aside###
*/
.aside {
  color: var(--color-triple114);
  font-size: 0.87rem;
}
.aside h1,
.aside h2,
.aside h3 {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 0.25rem;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .aside h1,
  .aside h2,
  .aside h3 {
    word-break: break-word;
  }
}
.android.chrome .aside h1,
.android.chrome .aside h2,
.android.chrome .aside h3 {
  word-break: break-word;
}
.aside h1:first-child,
.aside h2:first-child,
.aside h3:first-child {
  margin-top: 0;
}
.aside h1 {
  font-size: 1.5rem;
}
.aside h2 {
  font-size: 1.25rem;
  margin-top: 1.12rem;
}
.aside h3 {
  font-size: 0.87rem;
  margin-top: 1rem;
}
.aside h4,
.aside h5 {
  font-size: 14px;
}
.aside ul {
  list-style: square;
}
.aside ul,
.aside ol {
  margin: 0 0 0.68rem;
  padding: 0 1.12rem;
}
.aside ul li,
.aside ol li {
  margin: 0;
}
.aside ul li:not(:last-child),
.aside ol li:not(:last-child) {
  padding-bottom: 0.62rem;
}
.aside .figure {
  margin-bottom: 1.25rem;
}
.aside > *:last-child {
  margin-bottom: 0;
}
.aside > *:first-child {
  margin-top: 0;
}
.aside h1 {
  font-size: 1.12rem;
}
.aside h2 {
  font-size: 1rem;
}
.aside .table th,
.aside .table-wrap th,
.aside .table td,
.aside .table-wrap td {
  padding: 0.25rem;
}
.aside .table th,
.aside .table-wrap th {
  padding-bottom: 0.43rem;
  box-shadow: inset 0 -4px 0 0 var(--color-triple178);
}
.aside .table tr:last-child td,
.aside .table-wrap tr:last-child td {
  border-bottom: 3px solid var(--color-bodyBackground);
}
.aside .table-collapse th,
.aside .table-collapse td {
  padding: 0.25rem;
}
.aside .table-collapse tr:last-child td {
  border-bottom: 0;
}
.aside .table-collapse th {
  padding-bottom: 0.43rem;
}
@media screen and (min-width: 100rem), print {
  .firefox .aside .figure img {
    width: 100%;
  }
}
/*
Attachments - Anlagenauswahl

Kreuztabelle bestehend aus Checkbox-LabelInputs.

Es existieren drei Arten an Attachments-Tabellen.
- die dreispaltige Tabelle ohne Thema
- die dreispaltige Tabelle mit Thema in der ersten Zelle, die mit der Zusatzklasse attachments__labelGroupItem--topic ausgezeichnet ist
- die einspaltige Tabelle ohne sichtbaren Tabellenkopf

markup: demo.attachments.html

Styleguide ###formularElemente.attachments###
*/
.attachments {
  --color-legendBackground: rgba(0,0,0,0.08);
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.dark .attachments {
  --color-legendBackground: rgba(255,255,255,0.08);
}
.attachments__labelGroupItem {
  vertical-align: bottom;
  font-size: 0.87rem;
  display: none;
}
.attachments__labelGroupItem--topic {
  display: table-cell;
  text-align: left;
}
.attachments__labelGroupItem--hidden {
  font-size: 0;
}
.attachments__legend {
  padding: 0.5rem;
  display: block;
  text-align: left;
  font-size: 0.87rem;
}
.attachments__legendText {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}
.attachments__legendText abbr {
  border-bottom: none;
}
.attachments__lineItem {
  padding: 0.5rem;
  display: block;
  min-width: 4.5rem;
}
.attachments__lineItem--empty {
  display: none;
}
.attachments tbody .attachments__line {
  background: var(--color-triple242);
  border-top: 3px solid var(--color-bodyBackground);
}
/*
AutoSuggest

Input-Element, das während der Eingabe Vorschläge anzeigt.

__Data-Attribute__
- ```data-source```: ID eines DOM-Elements, das die Daten der Vorschläge enthält (Pflichtangabe)
- ```data-max-suggestions```: Maximale Anzahl an Vorschlägen, die gleichzeitig gerendert werden
- ```data-min-characters```: Mindestanzahl an Zeichen, die eingegeben werden muss, damit Vorschläge angezeigt werden
- ```data-separator```: Trennzeichen zum Ermitteln der Suchwörter

Es wird immer nur nach dem Beginn der Vorschläge gesucht. Durch das Trennzeichen in ```data-separator``` lassen sich Vorschläge
in mehrere Suchwörter aufteilen, deren Beginn dann ebenfalls durchsucht wird.
Mit dem Trennzeichen "-" kann z.B. der Vorschlag "12345 - Bremen" sowohl mit "123" als auch mit "Bre" gefunden werden.

#### AutoSuggest-Select

Variante, bei der nur aus den Vorschlägen gewählt werden kann. Andere Eingaben sind nicht möglich.
Der Schlüsselwert des ausgewählten Vorschlags wird in einem versteckten Input-Feld eingetragen.

__Data-Attribute (zusätzlich zu den oben angegebenen)__
- ```data-closed-enumeration="true"```: mach aus dem AutoSuggest ein AutoSuggest-Select
- ```data-autosuggest-hidden```: ID des versteckten Input-Feldes, in dem der Schlüsselwert des ausgewählten Vorschlags eingetragen wird

markup: demo.autoSuggest.html

Styleguide ###formularElemente.autoSuggest###
*/
.autoSuggest__announce {
  height: 20px;
}
.autoSuggest__suggestionWrapper {
  position: relative;
  top: 0;
  left: 0;
}
.autoSuggest__suggestions {
  width: 100%;
  max-height: 12.5rem;
  overflow: auto;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-inputBorder);
  background-color: var(--color-bodyBackground);
  z-index: 200;
}
.autoSuggest__suggestions--overlap {
  top: 0;
  left: 0;
  position: absolute;
}
.autoSuggest__suggestionItem,
.autoSuggest__noResults {
  margin: 0;
  padding: 0.37rem 0.5rem;
}
.autoSuggest__suggestionItem {
  cursor: pointer;
}
.autoSuggest__suggestionItem.autoSuggest__highlight {
  background-color: var(--color-interaction-light);
  color: var(--color-text-light);
}
.autoSuggest__noResults {
  cursor: default;
  font-style: italic;
  color: var(--color-triple93);
}
.autoSuggest__dropDownButton {
  position: absolute;
  top: 0;
  right: 1px;
  cursor: pointer;
  border: 1px solid transparent;
}
.autoSuggest__dropDownButton span.icon {
  margin-top: 0.25rem;
  cursor: pointer;
}
.autoSuggest__field[disabled] + .autoSuggest__dropDownButton,
.autoSuggest__field[readonly] + .autoSuggest__dropDownButton {
  display: none;
}
.autoSuggest__field {
  padding-right: 1.56rem;
}
.autoSuggest__field:not([disabled]):not([readonly]):focus::-ms-input-placeholder {
  color: transparent;
}
.autoSuggest__field:not([disabled]):not([readonly]):focus::placeholder {
  color: transparent;
}
/*
Calendar

Ein Steuerelement zur vereinfachten Eingabe eines Datums in der Benutzeroberfläche. Es unterstützt die Auswahl des
Datums durch Darstellung der auszuwählenden Einheit (Jahr, Monat oder Tag) in einem Raster. Zu den auszuwählenden
Einheiten kann, durch vorangestellte Kontrollelemente, navigiert werden.

Die Raster-Ansicht hat drei modifizierende CSS-Klassen `calendar--year`, `calendar--month` und `calendar--day`, analog
der auszuwählenden Einheit. Diese werden Abhängig vom Eingabeformat (z. B.: "TT.MM.JJJJ") automatisch ermittelt. Weitere
Vorbedingungen, wie die initiale Ansicht beim Öffnen des Kalenders, werden ebenfalls anhand des Eingabeformats ermittelt.

markup: demo.calendar.html

Styleguide ###interaktiveElemente.calendar###
*/
/*
Calendar basic styling
*/
.calendar {
  border: 1px solid var(--color-triple148);
  height: 22.25rem;
  width: 22.12rem;
  display: inline-block;
}
.calendar__body {
  display: block;
  padding: 1rem 0 0 1.5rem;
  overflow-y: auto;
  height: 18.75rem;
}
.calendar__list {
  width: 19.12rem;
  list-style: none;
  padding: 0 0 1.5rem;
  margin: 0;
  display: inline-grid;
  grid-gap: 0.25rem;
  column-gap: 0.25rem;
  row-gap: 0.25rem;
  justify-items: center;
  align-items: center;
}
.calendar__item {
  height: 100%;
  width: 100%;
  margin: 0;
}
.calendar--range {
  height: 26rem;
}
.calendar--day .calendar__list {
  grid-template-areas: "weekday weekday weekday weekday weekday weekend weekend";
  grid-template-columns: repeat(7, 2.5rem);
  grid-auto-rows: 2.5rem;
}
.calendar--month .calendar__list {
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 3.87rem;
}
.calendar--year .calendar__list {
  grid-template-columns: repeat(5, auto);
  grid-auto-rows: 3.62rem;
}
.calendar--flyout {
  border: none;
}
/*
Calendar header styling
*/
.calendar__header {
  height: 3.37rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
}
.calendar__header .interactive {
  padding-left: 2px;
  padding-right: 2px;
}
.calendar__title,
.calendar__navigation {
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  height: 3.37rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-triple148);
}
.calendar__navigation {
  text-align: right;
  width: 100%;
  justify-content: flex-end;
}
/*
Calendar switch styling
*/
.calendar__rangeTabs .interactive {
  min-width: 50%;
  text-align: left;
  border-radius: 0;
  height: 3.75rem;
  padding-left: 1rem;
  padding-right: 1.5rem;
  font-size: 0.93rem;
  font-weight: normal;
  border-bottom: 1px solid var(--color-triple148);
  background: var(--color-triple248);
  border-left: 1px solid var(--color-triple148);
  width: auto;
  display: inline-block;
}
.calendar__rangeTabs .interactive small {
  font-size: 0.81rem;
  color: var(--color-triple114);
}
.calendar__rangeTabs .interactive:first-child {
  border-left: none;
  padding-left: 1.5rem;
  padding-right: 1rem;
}
.calendar__rangeTabs .interactive:hover,
.calendar__rangeTabs .interactive:focus {
  background: var(--color-triple230);
  text-decoration: none;
}
.calendar__rangeTabs .interactive:hover span,
.calendar__rangeTabs .interactive:focus span {
  text-decoration: underline;
}
.calendar__rangeTabs .interactive[disabled] {
  border-bottom: transparent;
  color: var(--color-triple114);
}
.calendar__rangeTabs .interactive[disabled],
.calendar__rangeTabs .interactive[disabled]:hover,
.calendar__rangeTabs .interactive[disabled]:focus {
  background: transparent;
}
.calendar__rangeTabs .interactive[disabled] span,
.calendar__rangeTabs .interactive[disabled]:hover span,
.calendar__rangeTabs .interactive[disabled]:focus span {
  text-decoration: none;
}
/*
Calendar Tile

Styleguide ###interaktiveElemente.calendarTile###
*/
/*
Calendar Tile: Vor- oder Nachmonat Modifier

selected - Der selektierte Zustand.

markup: demo.calendarTile.beforeOrAfterMonth.html

Styleguide ###interaktiveElemente.calendarTile.beforeOrAfterMonth###
*/
.calendarTile--beforeOrAfterMonth {
  background: var(--color-triple248);
  border-color: var(--color-triple200);
  color: var(--color-interaction);
}
.calendarTile--beforeOrAfterMonth .calendarTile--focus,
.calendarTile--beforeOrAfterMonth:focus {
  border-color: var(--color-interaction);
  border-style: dotted;
  text-decoration: underline;
}
.calendarTile--beforeOrAfterMonth .calendarTile--hover,
.calendarTile--beforeOrAfterMonth:hover {
  border-color: var(--color-interaction);
  text-decoration: underline;
  border-style: solid;
}
/*
Calendar Tile: Heute Modifier

selected - Der selektierte Zustand.

markup: demo.calendarTile.today.html

Styleguide ###interaktiveElemente.calendarTile.today###
*/
.calendarTile--today {
  background-color: transparent;
  border-color: var(--color-triple153);
  font-weight: bold;
}
/*
Calendar Tile: Aktueller Monat Modifier

selected - Der selektierte Zustand.
withinSelected - Der Zustand zwischen zwei selektierten Elementen.

markup: demo.calendarTile.currentMonth.html

Styleguide ###interaktiveElemente.calendarTile.currentMonth###
*/
.calendarTile--currentMonth {
  background-color: transparent;
  border-color: var(--color-triple221);
}
/*
Calendar Tile: Base Modifier

day - Darstellung von Tagen.
month - Darstellung von Monaten.
year - Darstellung von Jahren.

markup: ./demo/demo.calendarTile.base.html

Styleguide ###interaktiveElemente.calendarTile.base###
*/
.calendarTile {
  --borderColor-calendarTile--baseSelected: var(--color-active);
  --borderColor-calendarTile--baseFocus: #000;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  padding: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--color-interaction);
  cursor: pointer;
}
.dark .calendarTile {
  --borderColor-calendarTile--baseSelected: var(--color-active-dark);
}
.dark .calendarTile {
  --borderColor-calendarTile--baseFocus: var(--color-interaction);
}
.calendarTile__inner {
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  padding: 5px;
}
.calendarTile,
.calendarTile:focus {
  outline: none;
}
.calendarTile,
.calendarTile--day {
  font-size: 1rem;
}
.calendarTile .calendarTile__inner,
.calendarTile--day .calendarTile__inner {
  min-height: 2.12rem;
  min-width: 2.12rem;
}
.calendarTile--month {
  width: 100%;
  font-size: 0.87rem;
}
.calendarTile--month .calendarTile__inner {
  min-height: 3.5rem;
}
.calendarTile--year {
  width: 100%;
  font-size: 0.87rem;
}
.calendarTile--year .calendarTile__inner {
  min-height: 3.25rem;
}
.calendarTile--focus,
.calendarTile:focus {
  border-color: var(--borderColor-calendarTile--baseFocus);
  border-style: dotted;
  text-decoration: underline;
}
.calendarTile--hover,
.calendarTile:hover {
  border-color: var(--color-interaction);
  text-decoration: underline;
  border-style: solid;
}
.calendarTile--disabled,
.calendarTile--disabled:hover,
.calendarTile--disabled:focus {
  background: var(--color-triple242);
  border-color: var(--color-triple178);
  border-style: solid;
  text-decoration: none;
  color: var(--color-triple178);
  cursor: default;
}
.calendarTile--selected {
  color: var(--color-interaction);
  border-width: 3px;
  border-color: var(--borderColor-calendarTile--baseSelected);
  padding: 0;
}
.calendarTile--focus.calendarTile--selected,
.calendarTile--selected:focus {
  border-style: dotted;
  text-decoration: underline;
  border-color: var(--color-interaction);
}
.calendarTile--hover.calendarTile--selected,
.calendarTile--selected:hover {
  text-decoration: underline;
  border-style: solid;
  border-color: var(--color-interaction);
}
.calendarTile--disabled.calendarTile--selected,
.calendarTile--disabled.calendarTile--selected:hover,
.calendarTile--disabled.calendarTile--selected:focus {
  background: var(--color-triple242);
  border-style: solid;
  text-decoration: none;
  color: var(--color-triple178);
  border-color: var(--color-triple178);
}
.calendarTile--withinSelected {
  color: var(--color-interaction);
  border-color: var(--borderColor-calendarTile--baseSelected);
  padding: 1px;
}
.calendarTile--withinSelected .calendarTile__inner {
  border: 1px solid var(--borderColor-calendarTile--baseSelected);
}
.calendarTile--withinSelected .calendarTile__inner,
.calendarTile--day.calendarTile--withinSelected .calendarTile__inner {
  min-height: 2.25rem;
  min-width: 2.25rem;
}
.calendarTile--month.calendarTile--withinSelected .calendarTile__inner {
  min-height: 3.62rem;
}
.calendarTile--year.calendarTile--withinSelected .calendarTile__inner {
  min-height: 3.37rem;
}
.calendarTile--focus.calendarTile--withinSelected,
.calendarTile--withinSelected:focus {
  border-color: var(--color-interaction);
  border-style: dotted;
  text-decoration: underline;
}
.calendarTile--hover.calendarTile--withinSelected,
.calendarTile--withinSelected:hover {
  border-color: var(--color-interaction);
  text-decoration: underline;
  border-style: solid;
}
.calendarTile--disabled.calendarTile--withinSelected,
.calendarTile--disabled.calendarTile--withinSelected:hover,
.calendarTile--disabled.calendarTile--withinSelected:focus {
  background: var(--color-triple242);
  border-style: solid;
  text-decoration: none;
  color: var(--color-triple178);
}
.calendarTile--disabled.calendarTile--withinSelected,
.calendarTile--disabled.calendarTile--withinSelected:hover,
.calendarTile--disabled.calendarTile--withinSelected:focus,
.calendarTile--disabled.calendarTile--withinSelected .calendarTile__inner,
.calendarTile--disabled.calendarTile--withinSelected:hover .calendarTile__inner,
.calendarTile--disabled.calendarTile--withinSelected:focus .calendarTile__inner {
  border-color: var(--color-triple178);
}
/*
Darkmode-Toggle

Interaktives Element zum Ein- und Ausschalten des Kontrastmodus.

markup: demo.darkmodeToggle.html

Styleguide ###interaktiveElemente.darkmodeToggle###
*/
.darkmodeToggle .interactive-icon {
  border-color: var(--color-bodyBackground);
}
/*
DefinitionBox

Mithilfe der DefinitionBox Komponente können Wertepaare dargestellt werden. Optional kann eine Überschrift angezeigt werden.

Im Gegensatz zur Listenvariante des Panels hat eine DefinitionBox keinen hellgrauen Hintergrund und sie kann verschachtelt
werden, sodass in der Desktop-Ansicht bis zu vier DefinitionBoxen nebeneinander stehen können.

Für die definitionBox__list können die Layouts 30-70 oder 70-30 alternativ zum Standard-Layout (50-50) verwendet werden.

#### Modifier
Die .definitionBox besitzt folgende Modifier
- **--normalFontWeight** Werte in der rechten Spalte werden nicht in bold hervorgehoben
- **--block** im Content enthaltene Elemente werden untereinander dargestellt, statt nebeneinander
- **--noHighlight** Überschrift wird grau unterstrichen

Der .definitionBox__list besitzt folgende Modifier
- **--alignLeft** setzt die linke Spalte auf linksbündig
- **--layout-?-?** passt die Breite der beiden Spalten in der Liste an

Der .definitionBox__value besitzt folgende Modifier
- **--new** kennzeichnet den Wert als "neu". Dadurch wird der Wert grün hervorgehoben.

markup: demo.definitionBox.html

Styleguide ###basics.definitionBox###
*/
.definitionBox {
  margin-bottom: 1rem;
  overflow: hidden;
}
.definitionBox:last-child {
  margin-bottom: 0;
}
.definitionBox__title {
  border-bottom: 4px solid var(--color-app);
}
h3.definitionBox__title {
  border-bottom-width: 2px;
}
.definitionBox__title:first-child {
  margin-top: 0;
}
.definitionBox__content {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1rem;
}
.definitionBox__content > * {
  flex: 1 1 15.62rem;
  margin-right: 1rem;
}
.definitionBox__list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  font-size: 0.87rem;
  margin-top: 0;
  margin-bottom: 0;
}
.definitionBox__list--layout_30-70 .definitionBox__key {
  width: 30%;
}
.definitionBox__list--layout_30-70 .definitionBox__value {
  width: 70%;
}
.definitionBox__list--layout_70-30 .definitionBox__key {
  width: 70%;
}
.definitionBox__list--layout_70-30 .definitionBox__value {
  width: 30%;
}
.definitionBox__list--alignLeft .definitionBox__key {
  text-align: left;
}
.definitionBox__key,
.definitionBox__value {
  flex: 1 0 auto;
  margin-bottom: 0.5rem;
  width: 50%;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .definitionBox__key,
  .definitionBox__value {
    word-break: break-word;
  }
}
.android.chrome .definitionBox__key,
.android.chrome .definitionBox__value {
  word-break: break-word;
}
.definitionBox__key--new,
.definitionBox__value--new {
  color: var(--color-success-dark);
}
.definitionBox__key {
  text-align: right;
  padding-right: 1rem;
}
.definitionBox__value {
  margin-left: 0;
}
.definitionBox--block .definitionBox__content {
  display: block;
}
.definitionBox--noHighlight .definitionBox__title {
  border-color: var(--color-hint);
}
/*
Filter-AllForms

Filter speziell für die Seite "Alle Formulare".

Die Formulare sind in Toggleboxen gruppiert, die bei einer Übereinstimmung aufgeklappt werden.
Außerdem werden Texte aus Überschriften beim Filtern einbezogen.
Zusätzlich zu den Formularnamen und Gruppennamen kann auch nach der Abkürzung des Formulars gesucht werden.
Diese wird aus der verlinkten URL ermittelt.

markup: demo.filter-allForms.html

Styleguide ###interaktiveElemente.filter.filterAllForms###
*/
/*
Search Field

Ein Suchfeld besitzt zwei verschiedene Markup Varianten:

- Default (mit Label/Input)
- Header (mit Label/Input und zwei Interactive-Icons)

Als Root-Element wird bei Einsatz im Header das FORM Tag verwendet. Befindet sich das Suchfeld so schon innerhalb eines Form-Tags wird
als Root Element ein DIV Tag verwendet.

Ohne Modifier bei der Default-Variante spannt sich das Suchfeld über die gesamte Breite des Parent Elementes.
Folgende Modifier gibt es:

HEADER-BEREICH

* **desktop**  Breite festgesetzt auf 184px
* **mobile**  Submit Button Icon only

Modifier:

* **sized**  Breite festgesetzt auf 212px
* **iconOnly**  Icon ohne Text

markup: demo.searchField.html

Styleguide ###interaktiveElemente.searchField###
*/
.searchField__submit,
.searchField__submit .interactive-icon--primary:hover,
.searchField__submit .interactive-icon--primary:focus {
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.searchField {
  display: flex;
  flex-shrink: 0;
}
.searchField__input {
  width: 100%;
  background: var(--color-inputBackground);
  color: var(--color-triple51);
  border: 1px solid var(--color-triple178);
  border-radius: 0;
  -webkit-appearance: none;
  border-right: 0;
  padding: 0 0.5rem 0 1rem;
}
.searchField__input:focus {
  outline: 1px dotted var(--color-triple0);
}
.searchField__input::-webkit-input-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.searchField__input::-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
  opacity: 1;
}
.searchField__input:-ms-input-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.searchField__input:-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.searchField__submit {
  height: 2.25rem;
}
.searchField__submit .interactive-icon {
  padding: 0.5rem;
  height: 2.25rem;
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.searchField__submit .interactive-icon__wrap {
  justify-content: center;
}
.searchField__submit .interactive-icon--primary:hover,
.searchField__submit .interactive-icon--primary:focus {
  border-color: var(--color-text-light);
  border-style: dotted;
  outline: none;
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.searchField__submit .interactive-icon--base:hover,
.searchField__submit .interactive-icon--base:focus {
  border-radius: 3px;
}
.searchField--header .searchField__input {
  width: 11.5rem;
}
.searchField--header .searchField__input,
.searchField--header .searchField__label {
  display: none;
}
.searchField--header .searchField__submit .interactive-icon--primary {
  display: none;
}
.searchField--sized .searchField__input {
  width: 13.25rem;
}
/*
Filter

Der Filter durchsucht eine vorgegebene Menge an Elementen nach einem oder mehreren Tags.
Die Tags können vom Nutzer mithilfe eines Input-Feldes hinzugefügt werden. Nach einem Klick auf "Filtern" werden
nur noch die Elemente angezeigt, die **alle** Tags beinhalten.

Sollten keine Ergebnisse gefunden werden, wird ein entsprechender Hinweis angezeigt.

__Filter serverseitig__

Der Filter kann mit einer serverseitigen Filterfunktion arbeiten, indem ein verstecktes Input und ein versteckter Button in den Filter eingebaut werden.
- Der Button benötigt folgendes HTML Attribut: data-selector='interactive.filter.submitButton'
- Das Input benötigt folgendes HTML Attribut: data-selector='_filter.submitInput'

Wenn der Filter durch eine der Filter Aktionen ausgelöst wird, werden die Tags im JSON Format {"tags":["tag1","tag2"]} in das versteckte Input geschrieben.
Anschließend wird der submitInput-Button via JavaScript geklickt. Um dem Anwender zu signalisieren, dass er warten muss bis die Seite neu geladen wurde,
wird per JS ein Loading-Modal angezeigt.

Damit sich, beim Betreten der Seite, der Filter mit dem gefiltertem String aufbauen kann, muss dieser String im gleichen JSON Format im sichtbaren Filter-Input
stehen und nicht im verstecktem submitInput. Daraus baut der Filter dann wieder die Tags und löscht den String aus dem Input.

Filter-Input vom Seite-Verlassen bestätigen Modal ausschließen: Wenn Änderungen am Filter-Input das Modal nicht triggern sollen,
kann das HTML-Attribut data-no-confirm-leaving verwendet werden.

markup: demo.filter.html

Styleguide ###interaktiveElemente.filter###
*/
.filter {
  background-color: var(--color-formBackground);
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.filter__searchWrapper {
  display: flex;
  flex-wrap: wrap;
}
.filter__searchInput {
  flex-basis: 100%;
}
.filter__input {
  width: 100%;
  background: var(--color-inputBackground);
  color: var(--color-triple51);
  border: 1px solid var(--color-triple178);
  border-radius: 0;
  -webkit-appearance: none;
  height: 2.5rem;
  padding: 0.12rem 0.5rem 0.12rem 1rem;
}
.filter__input:focus {
  outline: 1px dotted var(--color-triple0);
}
.filter__input::-webkit-input-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.filter__input::-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
  opacity: 1;
}
.filter__input:-ms-input-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.filter__input:-moz-placeholder {
  color: var(--color-triple114);
  font-style: italic;
}
.filter__addTagButton,
.filter__clearButton {
  margin: 0.5rem 0.5rem 0 0;
}
.filter__tagWrapper {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-inputBorder);
  margin-top: 0.75rem;
}
.filter__tag {
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--color-inputBackground);
  font-size: 0.87rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0.5rem 0 0;
}
.filter__tagText {
  padding: 0.5rem;
}
.filter .filter__tag .interactive-icon--only {
  width: 34px;
}
.filter__noResults {
  color: var(--color-triple51);
  background: var(--color-formBackground);
  margin: 0.5rem -0.5rem 0;
  border-top: 0.5rem solid var(--color-bodyBackground);
  padding: 0.75rem 0;
}
.filter__hidden {
  display: none !important;
}
/*
Flyout Wrapper

Begrenzt die absolute Positionierung des Flyouts.

absolute - Ein flyoutWrapper, der absolut positioniert ist und die komplette Höhe einnimmt

*/
.flyoutWrapper {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.flyoutWrapper--absolute {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
/*
Footer

Der Footer besteht aus zwei Reihen.

Die erste Reihe beinhaltet Informationslinks, wobei der Link zu Twitter und die Copyright-Information ein
vorangestelltes Icon besitzen. Der Text der Copyright-Information wird in Großbuchstaben angezeigt.

Die zweite Reihe des Footers besteht aus Linkgruppen, die jeweils in einer Liste angezeigt werden.

markup: demo.footer.html

Styleguide ###portalrahmen.footer###
*/
.footer {
  --color-footerPermanent: var(--color-triple51);
  --color-footerTemporary: var(--color-triple72);
  --color-font: var(--color-triple221);
  --color-certificateLinkBackground: var(--color-bodyBackground);
  --color-fontHeading: var(--color-triple242);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--color-app);
}
.dark .footer {
  --color-footerPermanent: #000;
}
.dark .footer {
  --color-footerTemporary: #222;
}
.dark .footer {
  --color-font: #ddd;
}
.dark .footer {
  --color-certificateLinkBackground: #fff;
}
.dark .footer {
  --color-fontHeading: #f2f2f2;
}
.footer ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}
.footer ul li {
  margin: 0;
}
.footer__oneThird,
.footer__twoThirds {
  flex: 1 1 100%;
}
.footer__oneThird .alignment__item {
  margin-bottom: 0;
}
.footer__temporary {
  background-color: var(--color-footerTemporary);
}
.footer__temporaryContent {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  color: var(--color-font);
  max-width: 120rem;
  margin: 0 auto;
}
.footer__infoText a {
  color: var(--color-text-light);
  font-weight: normal;
  display: block;
}
.footer__infoText a:focus {
  outline-color: var(--color-text-light);
}
.footer__infoText li {
  padding-bottom: 1rem;
}
.footer__infoText .alignment {
  flex-direction: column;
}
.footer__infoText,
.footer__certificates,
.footer__copyright {
  padding: 2rem 1rem;
}
.footer__infoText,
.footer__infoGroup,
.footer__helpGroup {
  border-bottom: 1px solid var(--color-triple114);
}
.footer__infoGroup {
  padding: 2rem 0.5rem;
}
.footer__helpGroup {
  padding: 1.5rem 0.5rem 2rem;
}
.footer__heading {
  font-size: 1.5rem;
  color: var(--color-fontHeading);
  padding-bottom: 1rem;
}
.footer__heading--main {
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.footer__heading--main .icon {
  margin-right: 0.5rem;
}
.footer__heading h2 {
  margin-top: 0;
  margin-bottom: 0;
}
.footer__linkItem a {
  position: relative;
}
.footer__linkItem--active a::before {
  content: '';
  top: 0;
  left: -0.5rem;
  width: 0.25rem;
  height: 100%;
  background: var(--color-text-light);
  position: absolute;
}
.footer__certificatesList {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.footer__certificateItem + .footer__certificateItem {
  margin-top: 0.5rem;
}
.footer .footer__certificateItem {
  display: flex;
  min-height: 8.12rem;
}
.footer .footer__certificateItem .interactive {
  min-height: 4.5rem;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 0;
  color: var(--color-interaction);
  font-weight: normal;
  background: var(--color-certificateLinkBackground);
}
.footer .footer__certificateItem .interactive:focus {
  outline: 1px dotted var(--color-text-light);
}
.footer .footer__certificateItem a[href^="http://"]::after,
.footer .footer__certificateItem .interactive[href^="http://"]::after,
.footer .footer__certificateItem a[href^="https://"]::after,
.footer .footer__certificateItem .interactive[href^="https://"]::after {
  display: none;
}
.footer .footer__certificateItem a[href^="http://"] .footer__certificateItemImg .figure__image::after,
.footer .footer__certificateItem .interactive[href^="http://"] .footer__certificateItemImg .figure__image::after,
.footer .footer__certificateItem a[href^="https://"] .footer__certificateItemImg .figure__image::after,
.footer .footer__certificateItem .interactive[href^="https://"] .footer__certificateItemImg .figure__image::after {
  display: none;
}
.footer .footer__certificateItem a[href^="http://"] .footer__certificateItemText,
.footer .footer__certificateItem .interactive[href^="http://"] .footer__certificateItemText,
.footer .footer__certificateItem a[href^="https://"] .footer__certificateItemText,
.footer .footer__certificateItem .interactive[href^="https://"] .footer__certificateItemText {
  flex-direction: column;
}
.footer .footer__certificateItem a[href^="http://"] .footer__certificateItemExternLinkImage::after,
.footer .footer__certificateItem .interactive[href^="http://"] .footer__certificateItemExternLinkImage::after,
.footer .footer__certificateItem a[href^="https://"] .footer__certificateItemExternLinkImage::after,
.footer .footer__certificateItem .interactive[href^="https://"] .footer__certificateItemExternLinkImage::after {
  content: var(--url-linkExtern);
  padding-left: 0.18rem;
}
.footer .footer__certificateItemText,
.footer .footer__certificateItemImg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 100%;
  padding: 1rem;
}
.footer .footer__certificateItemImg .figure {
  width: 100%;
}
.footer .footer__certificateItemImg .figure__image {
  margin: 0 auto;
  border: 0;
  max-width: 12.5rem;
  background: var(--color-certificateLinkBackground);
}
.footer .footer__certificateItemImg .figure__image img {
  max-width: 100%;
  max-height: 5rem;
}
.footer .footer__certificateItemText {
  background: var(--color-triple242);
  padding: 1rem;
  font-size: 0.87rem;
  text-align: center;
}
.footer__permanent {
  background: var(--color-footerPermanent);
}
.footer__permanentContent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: row wrap;
  color: var(--color-font);
  max-width: 120rem;
  margin: 0 auto;
}
.footer__permanentContent--empty {
  height: 3rem;
}
.footer__infoGroup,
.footer__helpGroup,
.footer__copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__infoGroup > li,
.footer__helpGroup > li,
.footer__copyright > li {
  flex: 1 1 100%;
}
.footer__copyright {
  text-transform: uppercase;
}
.footer__copyright .icon {
  margin-right: 0.5rem;
}
.footer__portalId {
  padding-left: 2rem;
}
.footer .interactive {
  padding: 0.5rem;
  color: var(--color-text-light);
  text-align: left;
}
.footer .interactive:focus {
  border-color: var(--color-text-light);
}
.footer a[href^="http://"] .interactive-icon__wrap::after,
.footer .interactive-icon[href^="http://"] .interactive-icon__wrap::after,
.footer a[href^="https://"] .interactive-icon__wrap::after,
.footer .interactive-icon[href^="https://"] .interactive-icon__wrap::after {
  content: url("../img/link_extern--white-on-transparent.svg");
}
.footer .interactive-icon {
  color: var(--color-text-light);
}
.footer .interactive-icon:focus {
  border-color: var(--color-text-light);
}
.footer__helpTitle {
  padding: 2rem 1rem 0;
}
.edge.edgehtml .footer a[href^="http://"] .footer__certificateItemText::after,
.firefox .footer a[href^="http://"] .footer__certificateItemText::after,
.edge.edgehtml .footer .interactive[href^="http://"] .footer__certificateItemText::after,
.firefox .footer .interactive[href^="http://"] .footer__certificateItemText::after,
.edge.edgehtml .footer a[href^="https://"] .footer__certificateItemText::after,
.firefox .footer a[href^="https://"] .footer__certificateItemText::after,
.edge.edgehtml .footer .interactive[href^="https://"] .footer__certificateItemText::after,
.firefox .footer .interactive[href^="https://"] .footer__certificateItemText::after {
  width: 18px;
  height: 23px;
}
/*
TreeView

Im Navigationsbaum können Anlagen bzw. logischen Gruppierungen auf- und zugeklappt werden können. Die Pfeile vor den Listeneinträgen
dienen nur zum Öffnen und Schließen der einzelnen Ebenen des Navigationsbaumes.

Der Navigationsbaum ist als eine UL umgesetzt welche durch die CSS-Klasse **.treeView** erweitert wird. Als Listenelemente LI stehen
drei Arten der Darstellung zur Verfügung: Anlagen (**.treeView__appendix**), Logische Gruppierungen (**.treeView__logicalGroup**) und
Teilseiten (**.treeView__page**). Mehrzeilenblöcke auf der gleichen Ebene wie Teilseiten werden wie Logische Gruppierungen eingebunden.

Anlagen können per Click auf den vorangestellten Pfeil oder durch den Click auf den Text des Eintrages geöffnet werden, Logische Gruppierungen
durch den vorangestellten Pfeil sowie den nachfolgenden Text. Die Pfeile selbst (ein Anchor-Tag mit der CSS-Klasse **.treeView__toggle** und einem Image als einziges Child-Element)
werden per JavaScript beim initialen Laden des Navigationsbaumes für Listeneinträge eingefügt, die als Child-Element eine weitere UL mit CSS-Klasse **.treeView__innerItems**
enthalten. Dies hat den Hintergrund, dass bei ausgeschaltetem JavaScript der Baum komplett aufgeklappt dargestellt wird und die Pfeile somit überflüssig
sind. Teilseiten verfügen über keinen vorgestellten Pfeil und werden stattdessen mit einem Bullet (CSS-Klasse **.treeView__toggle--none**) ausgezeichnet.

Die Clickbaren Texteinträge der Anlagen und Teilseiten sind als Buttons implementiert und besitzen die folgenden CSS-Klassen **.treeView__item** und **.treeView__item--button**.
Es werden Buttons verwendet, damit es auch bei ausgeschaltetem JavaScript möglich ist, bei Click auf einen Eintrag des Navigationsbaumes Formulardaten an den Server zu senden.

Die Texteinträge der logischen Gruppierungen können zwar geclickt werden und toggeln je nach Verfügbarkeit auch Child-Listeneinträge, allerdings verlinken die Texteinträge
nicht auf eine eigene Seite, sondern besitzen lediglich die gleiche Funktionalität wie das Toggle-Icon.


markup: demo.treeView.html

Styleguide ###interaktiveElemente.treeView###
*/
.treeView {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  margin-bottom: 2rem;
}
.treeView__title {
  margin-top: 0.5rem;
}
.treeView__list {
  padding: 0;
  background: var(--color-formBackground);
  border-bottom: 2px solid var(--color-bodyBackground);
}
.treeView__list > .treeView__listItem--page {
  margin-top: 0;
  margin-bottom: 0;
  border-top: 2px solid var(--color-bodyBackground);
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
}
.treeView__listItem {
  list-style: none;
  margin-bottom: 0.12rem;
}
.treeView__listItem:last-child {
  margin-bottom: 0;
}
.treeView__listItem--appendix {
  margin-top: 0;
  margin-bottom: 0;
  border-top: 2px solid var(--color-bodyBackground);
  padding: 0.12rem 0;
}
.treeView__listItem--logicalGroup {
  cursor: default;
}
.treeView__row {
  display: flex;
}
.treeView__item,
.formNavigation__item {
  word-break: break-word;
  font-size: 0.87rem;
  min-height: 1.75rem;
  margin-left: 0.18rem;
  padding: 0.31rem;
}
.treeView__item--button,
.formNavigation__item--button,
.formNavigation__item {
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: normal;
  color: var(--color-text);
}
.treeView__item--heading,
.formNavigation__item--heading {
  font-style: italic;
}
.treeView__item--bold,
.formNavigation__item--bold {
  font-weight: bold;
}
.treeView__item:focus,
.formNavigation__item:focus,
.treeView__item:hover,
.formNavigation__item:hover {
  text-decoration: underline;
}
.treeView__item:focus:not(.treeView__item--current),
.formNavigation__item:focus:not(.formNavigation__item--current),
.treeView__item:hover:not(.treeView__item--current),
.formNavigation__item:hover:not(.formNavigation__item--current),
.treeView__item:focus.treeView__item--current.treeView__item--existingData,
.formNavigation__item:focus.formNavigation__item--current.formNavigation__item--existingData,
.treeView__item:hover.treeView__item--current.treeView__item--existingData,
.formNavigation__item:hover.formNavigation__item--current.formNavigation__item--existingData {
  background: var(--color-bodyBackground);
  color: var(--color-text);
}
.treeView__item:focus,
.formNavigation__item:focus {
  outline: 1px dotted var(--color-text);
}
.treeView__item--existingData,
.formNavigation__item--existingData {
  background: var(--color-existingData);
  border-bottom: 1px dashed var(--color-existingData);
  padding-bottom: 0.25rem;
}
.treeView__item--existingData:focus,
.formNavigation__item--existingData:focus {
  outline: 1px dotted var(--color-text);
}
.treeView__item--existingData:focus,
.formNavigation__item--existingData:focus,
.treeView__item--existingData:hover,
.formNavigation__item--existingData:hover {
  border-bottom: 0;
  padding-bottom: 0.31rem;
}
.treeView__item--current,
.formNavigation__item--current {
  background: var(--color-active);
  color: var(--color-text-dark);
  border-bottom: 3px solid var(--color-active);
  padding-bottom: 1px;
}
.treeView__innerItems {
  display: none;
  margin-bottom: 0;
  margin-top: 0.12rem;
  padding: 0;
}
.treeView__innerItems > .treeView__listItem--appendix {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.treeView__innerItems--open {
  display: block;
}
.treeView__review,
.formNavigation__review {
  display: inline-block;
  height: 16px;
  min-width: 16px;
  margin-top: 0.31rem;
  margin-bottom: 0.31rem;
}
.treeView__toggle {
  display: inline-block;
  margin-left: 0.18rem;
  padding-top: 0.31rem;
  min-width: 16px;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
.treeView__toggle:focus {
  outline: 1px dotted var(--color-text);
}
.treeView__toggle:hover:not(.treeView__toggle--none),
.treeView__toggle:active:not(.treeView__toggle--none) {
  outline: 1px dotted var(--color-text);
}
.treeView__toggle--open .icon {
  transform: rotate(90deg);
}
/*
Formularseitennavigation

Die Formularseitennavigation gliedert sich in die Darstellung der Anlagenübersicht und die Darstellung der Auswahlseiten.
Für die Darstellung der Auswahlseiten muss dem Root Element der Modifier ".formNavigation--subPages" hinzugefügt werden. Auch unterscheidet
sich das Markup eines ListItems aufgrund der zusätzlichen Anzeige eines Bullets im Desktop State.

markup: demo.formNavigation.html

Styleguide ###interaktiveElemente.formNavigation###
*/
.formNavigation {
  --color-existingData-text: var(--color-interaction);
}
.dark .formNavigation {
  --color-existingData-text: #fff;
}
.formNavigation__title {
  border-bottom: 4px solid var(--color-app);
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.formNavigation__list {
  padding-left: 0;
  margin-top: 0;
}
.formNavigation__listItem {
  list-style: none;
  display: flex;
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 4px;
}
.formNavigation__listItem:not(:last-child) {
  border-bottom: 2px solid var(--color-triple242);
}
.formNavigation__bullet {
  padding-top: 0.31rem;
  display: none;
}
.formNavigation__item {
  margin-left: 0.25rem;
  padding: 0.12rem;
  color: var(--color-interaction);
}
.formNavigation__item--existingData {
  background-color: var(--color-existingData-light);
  color: var(--color-existingData-text);
}
.formNavigation__item:first-child {
  margin-left: 1.25rem;
}
.formNavigation__item:hover {
  text-decoration: underline;
  outline: none;
}
.formNavigation__item:focus {
  outline: 1px dotted var(--color-interaction);
}
.formNavigation--subPages .formNavigation__listItem {
  border-bottom: none;
}
.formNavigation--subPages .formNavigation__bullet:first-child + .formNavigation__item {
  margin-left: 1.25rem;
}
/*
FormProgressNav

Zeigt den Fortschritt der Steuererklärung als Navigationsschritte via Buttons an.
Der aktive Navigationsschritt besitzt als Hintergrundfarbe die AppColor.

Alle Navigationsschritte können einzeln als **inaktiv** gekennzeichnet werden und sind in diesem Fall dann ein
div-Element und nicht anklickbar.

markup: demo.formProgressNav.html

Styleguide ###formularElemente.formProgressNav###
*/
.formProgressNav__edit,
.formProgressNav__validate,
.formProgressNav__send {
  border: 4px solid var(--color-bodyBackground);
  border-left: 0;
  display: flex;
  background: var(--color-interaction-light);
  color: var(--color-text-light);
  flex-shrink: 0;
}
.formProgressNav__edit:last-child,
.formProgressNav__validate:last-child,
.formProgressNav__send:last-child {
  border-right: 0;
}
.formProgressNav__edit .interactive-icon,
.formProgressNav__validate .interactive-icon,
.formProgressNav__send .interactive-icon {
  padding: 0.5rem;
  color: currentColor;
}
.formProgressNav__edit .interactive-icon:focus,
.formProgressNav__validate .interactive-icon:focus,
.formProgressNav__send .interactive-icon:focus {
  outline: 1px dotted var(--color-interaction);
}
.formProgressNav__edit .interactive-icon__wrap,
.formProgressNav__validate .interactive-icon__wrap,
.formProgressNav__send .interactive-icon__wrap {
  align-items: center;
}
.formProgressNav__edit .interactive-icon__icon,
.formProgressNav__validate .interactive-icon__icon,
.formProgressNav__send .interactive-icon__icon {
  margin-top: 0;
}
.formProgressNav__edit .interactive-icon__text,
.formProgressNav__validate .interactive-icon__text,
.formProgressNav__send .interactive-icon__text {
  margin-left: 0.5rem;
}
.formProgressNav__edit--current,
.formProgressNav__validate--current,
.formProgressNav__send--current {
  background: var(--color-active);
  border-top: 0;
  border-bottom: 0;
  color: var(--color-text-dark);
}
.formProgressNav__edit--current .interactive-icon,
.formProgressNav__validate--current .interactive-icon,
.formProgressNav__send--current .interactive-icon {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.formProgressNav__edit--current .interactive-icon__wrap,
.formProgressNav__validate--current .interactive-icon__wrap,
.formProgressNav__send--current .interactive-icon__wrap {
  justify-content: center;
}
.formProgressNav__edit--current .interactive-icon__text,
.formProgressNav__validate--current .interactive-icon__text,
.formProgressNav__send--current .interactive-icon__text {
  font-weight: 600;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.formProgressNav__edit--current .interactive-icon:focus,
.formProgressNav__validate--current .interactive-icon:focus,
.formProgressNav__send--current .interactive-icon:focus {
  outline-color: currentColor;
}
.formProgressNav__edit--disabled,
.formProgressNav__validate--disabled,
.formProgressNav__send--disabled {
  background: var(--color-disabled);
  pointer-events: none;
}
.formProgressNav__title,
.formProgressNav__subTitle {
  font-size: 0.87rem;
  display: block;
}
.formProgressNav {
  border-bottom: 10px solid var(--color-active);
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  padding-top: 0.5rem;
}
.formProgressNav__steps {
  position: relative;
  display: flex;
  padding-left: 0.5rem;
}
.formProgressNav__subTitle {
  font-size: 0.68rem;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.formProgressNav__content {
  padding: 0.5rem;
  padding-top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.formProgressNav__time {
  font-size: 0.75rem;
  color: var(--color-triple114);
  line-height: 1.25;
  margin-left: 0.5rem;
  width: 9.37rem;
}
.formProgressNav__time strong {
  color: var(--color-text);
}
.formProgressNav__time,
.formProgressNav__save {
  flex: 0 1 auto;
}
/*
Header


Der Header besteht aus mehreren Einzelteilen, die über das Konfigurationsobjekt hinzugefügt werden können.
Feste Bestandteile sind:
- __header_\_heading__ Titel und Subtitel der Seite
- __header_\_content__ Alle Elemente, die im mobile Menu liegen

#### header__heading
- __header_\_title__ ELSTER/BZSt Titel und Subtitel
- __header_\_help__ Hilfe
- __header_\_search__ Suche
- __header_\_toggle__ ToggleButton für das mobile Menu

#### header__content
- __languageToggle__ Sprachauswahl (bisher nur BOP)
- __darkmodeToggle__ Kontrastmoduswechsel (bisher nur EOP)
- __header_\_register__ Benutzerkonto erstellen Link
- __header_\_userName__ Benutzername Link
- __header_\_logout__ Logout Link
- __header_\_autoLogout__ Text für das automatische Logout

### Kombinationen des Headers
- __nicht eingeloggt__
    - Startseite und öffentliche Inhaltsseiten: *register + login (beide aktiv)*
    - Registrierung: *register + login (beide disabled)*
    - Login-Seite: *register(aktiv) + login(disabled)*
- __eingeloggt__
    - Startseite und private Inhaltsseiten: *userName + logout*
    - Formular: *userName + logout + autoLogout*

markup: demo.header.html

Styleguide ###portalrahmen.header###
*/
/*
LanguageToggle

Im mobilen Layout (xs und sm) werden nur auswählbare Sprachen untereinander angezeigt.

Im Desktop-Layout (ab m) wird die ausgewählte Sprachen neben den auswählbaren Sprachen als Abkürzung angezeigt, wobei
die ausgewählte Sprache __keine__ Verlinkung besitzt.

markup: demo.languageToggle.html

Styleguide ###portalrahmen.languageToggle###
*/
.languageToggle {
  display: block;
}
.languageToggle__list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: block;
}
.languageToggle__item {
  display: block;
}
.languageToggle__item--longTitle {
  display: block;
  text-transform: capitalize;
}
.languageToggle__item--shortTitle {
  display: none;
}
.languageToggle .languageToggle__item--shortTitle + .icon {
  display: none;
}
.header {
  --header__color-subtitle: var(--color-triple114);
  --header__color-area: var(--color-triple221);
  border-bottom: 1px solid var(--color-app);
}
.dark .header {
  --header__color-subtitle: #ccc;
}
.dark .header {
  --header__color-area: #555;
}
.header__contentGroup {
  display: flex;
  flex-direction: column;
  min-height: 3rem;
  justify-content: center;
  max-width: 120rem;
  margin: 0 auto;
}
.header__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem;
}
.header__heading .header__navOpen {
  margin-right: 0.5rem;
}
.header__title {
  margin: 0;
  margin-right: auto;
  flex: 0 0 auto;
}
.header__title .interactive:hover .header__maintitle,
.header__title .interactive:focus .header__maintitle {
  text-decoration: underline;
}
.header__title--bop {
  margin-right: 0;
}
.header__title--mup .interactive {
  text-decoration: none;
}
.header__title--mup .header__subtitle--eop {
  display: none;
}
.header__title--mup .header__maintitle--eop {
  color: var(--color-app-eop);
}
.header__title--etr .icon {
  transform: scale(2) translateY(-1px);
}
.header__title--etr .header__maintitle {
  margin-left: 0.5rem;
}
.header__title--right {
  margin-right: 0;
}
.header__maintitle {
  color: var(--color-app);
  font-size: 1.62rem;
  display: inline-block;
}
.header__maintitle--mup {
  color: var(--color-app-dark);
  margin-left: 0;
  max-width: 8rem;
  font-size: 0.9rem;
  line-height: 1rem;
  font-weight: 600;
}
.header__subtitle {
  display: none;
}
.header__subtitle--mup {
  margin-right: 0;
  font-size: 1.25rem;
  height: 1.75rem;
  top: -1.38rem;
}
.header__italic {
  color: var(--header__color-subtitle);
  text-transform: none;
}
.header__bopWappen {
  flex: 0 0 auto;
  margin-right: auto;
  margin-top: -1rem;
  height: 1rem;
  margin-left: 0.5rem;
}
.header__bopWappen .icon {
  margin-right: 1rem;
}
.header__help,
.header__search,
.header__toggle {
  flex: 0 0 auto;
}
.header__help,
.header__search {
  margin-right: 1rem;
}
.header__help .interactive-icon {
  height: 40px;
  padding-left: 0.5rem;
}
.header__help .interactive-icon__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.header__content {
  display: none;
  position: absolute;
  top: 48px;
  width: 100%;
  max-height: 100%;
  height: auto;
  background: var(--color-bodyBackground);
  padding: 0.5rem;
  box-shadow: 0 2px 2px 0 var(--color-shadow);
  z-index: 220;
}
.header__content > * {
  padding: 0.5rem 0;
  border-bottom: 1px solid #d3d3d3;
}
.header__content > *:first-child {
  padding-top: 0;
}
.header__content > *:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.header__content .iframe {
  border: 0;
  height: 6rem;
  width: 100%;
  display: block;
  margin: auto;
}
.header__autoLogout {
  font-size: 0.75rem;
  color: var(--color-triple114);
  line-height: 1.25;
  margin-left: 0.5rem;
  width: 9.37rem;
  margin-left: 0;
}
.header__autoLogout strong {
  color: var(--color-text);
}
.header--opened .header__content {
  display: flex;
  flex-direction: column;
}
.ios .header__help,
.ios .header__search {
  margin-right: 0.5rem;
}
/*
Auswahlliste

Ein Steuerelement zur Darstellung von durch den Benutzer auswählbaren Einträgen in Listenform. Diese können ohne
dynamische Funktionalität genutzt werden oder ein gegebenes Eingabefeld befüllen.

Styleguide ###interaktiveElemente.listbox###
*/
/*
Auswahlliste: Base

markup: demo/demo.listbox.base.html

Styleguide ###interaktiveElemente.listbox.base###
*/
.listbox__head {
  padding: 0.31rem 0.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--color-infoBackground);
  min-height: 1.5rem;
  font-size: 0.75rem;
}
.listbox__body {
  list-style: none;
  padding: 0;
  margin: 0;
}
.listbox__item {
  margin: 0;
  padding: 1px;
}
.listbox__button {
  padding: 0.31rem 0.5rem;
  min-height: 1.87rem;
  display: block;
  font-size: 1rem;
  line-height: 1.31rem;
  font-weight: bold;
  width: 100%;
  text-align: left;
  background: var(--color-bodyBackground);
  color: var(--color-text);
  border: 0;
}
.listbox__button:hover {
  color: var(--color-text-light);
  background-color: var(--color-interaction-light);
}
.listbox__button:focus,
.listbox__button:focus ~ .listbox__label {
  outline: 1px dotted var(--color-triple0);
}
.listbox__button--checked {
  font-weight: normal;
}
.listbox__item--extra {
  border-top: 1px solid var(--color-inputBorder);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.listbox__item--extra ~ .listbox__item--extra {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.listbox__hint {
  margin: 0;
  padding: 0.37rem 0.5rem;
  cursor: default;
  font-style: italic;
  color: var(--color-triple93);
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/*
Auswahlliste: Leer

markup: demo/demo.listbox.empty.html

Styleguide ###interaktiveElemente.listbox.empty###
*/
.listbox__empty {
  padding: 0.31rem 0.5rem;
  min-height: 1.87rem;
  display: block;
  font-size: 1rem;
  line-height: 1.31rem;
  color: var(--color-hint);
}
/*
Auswahlliste: Overflow

markup: demo/demo.listbox.overflow.html

Styleguide ###interaktiveElemente.listbox.overflow###
*/
.listbox {
  overflow: auto;
  max-height: 8rem;
}
.listbox--large {
  max-height: 16rem;
}
/*
Matrix

| Abhängigkeiten |
| ------ |
| formBox |
| formItem |

Die Matrix besteht aus einer Formbox, ein oder zwei *matrix_labelGroup*, die die Labels und die Spaltennummer beinhalten
und beliebig vielen in der Matrix liegenden FormItems.

Die *matrix_labelGroup* kann den Modifier *--hyphens* besitzen, sodass alle Wörter umgebrochen werden.

Wenn in einem FormItem(Zeile) für eine Spalte kein Feld benötigt wird, soll der FormItem-Modifier
*formItem\__fieldItem formItem\__fieldItem--empty* genutzt werden. Somit ist gewährleistet, dass die Zelle dieselbe
Formatierung besitzt, aber im mobilen Layout nicht angezeigt wird.
Um der Zeile eine Beschreibung hinzuzufügen soll in der ersten Zelle statt empty der FormItem-Modifier
*formItem\__fieldItem formItem\__fieldItem--rowText* genutzt werden.

Besonderheit an den FormItems in der Matrix ist die Legende (*formItem__legend*), die anstatt der *formItem__labelGroup*
genutzt wird. Mit ihrer Angabe müssen die Attribute __role= "form"__ und __aria-label = LEGENDENTEXT__ an die
*formItem__line* angefügt werden.

#### Desktop

Die Legende steht überhalb der Inputfelder(*formItem__fieldGroup*).
Bei 1- und 2-spaltigen Matrizen kann Mithilfe des Matrix-Modifiers *--right-align*
die Legende links stehen bleiben, aber die Inputfelder rechts platziert werden.
Empfehlenswert ist die Verwendung von *--right-align* nur bei kurzen Labeltexten.


#### Mobile

Im mobilen Layout werden alle *matrix_labelGroup* ausgeblendet. Die Legenden werden bei allen Matrizen überhalb der Inputfelder
angezeigt. Die Labels(*formItem__labelItem*) in der *formItem__fieldGroup* werden nun jeweils überhalb der Inputfelder angezeigt.

Enthält die Matrize eine Spaltennummer so muss dem ```label``` Element ein data-rwd Attribut mit der entsprechenden Spaltennummer hinzugefügt werden.
Besitzt ein Element aus der Matrix-LabelGroup eine Kontexthilfe, muss diese in das mobile Label übernommen werden.

markup: demo.matrix.html

Styleguide ###formularElemente.matrix###
*/
.matrix__lnr {
  min-width: 2.25rem;
}
.matrix__labelGroup {
  display: none;
}
.matrix .formBox__title {
  background: none;
  color: var(--color-text);
}
.matrix .formItem + .formItem {
  border-top: 2px solid var(--color-bodyBackground);
}
.matrix .formItem {
  margin: 0;
}
.matrix .formItem__labelGroup {
  display: none;
}
.matrix .formItem__fieldItem--empty {
  display: none;
}
.matrix .formItem__fieldItem .interactive-meta-icon {
  padding: 0;
}
.matrix .formItem__line {
  flex-wrap: wrap;
  padding-right: 0;
}
.matrix .formItem__legend,
.matrix .formItem__fieldGroup {
  flex: 1 1 auto;
}
.matrix .formItem__fieldGroup {
  padding-top: 0.5rem;
}
.matrix .formItem__legend {
  padding-bottom: 0.12rem;
  border-bottom: 1px dotted var(--color-triple178);
  line-height: inherit;
  min-height: auto;
  font-size: 0.87rem;
}
.matrix .formItem__label::after {
  content: attr(data-rwd);
}
.matrix .formItem__labelItem .interactive-help {
  margin-left: 0.25rem;
  margin-bottom: 0.25rem;
}
.matrix--eXML .matrix__labelGroup {
  background: var(--color-triple242);
  padding: 0 0.5rem;
}
.matrix--eXML .formItem {
  padding: 0 0.5rem;
  background: var(--color-triple242);
}
.matrix--eXML .formItem__lnr {
  background: var(--color-triple248);
}
.matrix--eXML .formItem__wrapper {
  background: var(--color-triple255);
}
.matrix--eXML .formItem + .formItem {
  border-top: 2px solid var(--color-triple242);
}
.matrix--eXML .formItem:last-child {
  padding-bottom: 8px;
}
/*
Panel

Das Panel orientiert sich am formItem und besitzt die gleichen Layoutaufteilungen. Es kann für readonly Anzeigen
genutzt werden. Beispielverwendung ist die Sendeseite in einem Formular. Optional kann eine Zeilennummer mitgegeben werden.

Das responsive Verhalten orientiert sich ebenfalls am formItem. Die Name-Value Anzeige wird serialisiert untereinander
angezeigt.

Die möglichen Layoutkombinationen erstrecken sich von 10-90 bis 90-10. Dabei muss bei der Verwendung auf
ausreichend Platz für die Inhalte geachtet werden.

Für den Type Box können feste Breiten von 100px bis 700px angegeben werden (in 50er Schritten).

Der Typ Center zentriert Textelemente. Er kann einen Hinweis- und Haupttext haben.
Zusätzlich kann der Modifier success gesetzt werden, der die Umrandung des Panel-Item
und die Schrift des Hinweistextes in die Erfolgsfarbe setzt.

markup: demo.panel.html

Styleguide ###formularElemente.panel###
*/
.panel {
  margin-bottom: 1.25rem;
}
.panel--layout_0-100 .panel__itemContent {
  flex-direction: column;
}
.panel--layout_0-100 .panel__itemKey,
.panel--layout_0-100 .panel__itemDescription {
  width: 100%;
}
.panel--layout_0-100 .panel__itemKey {
  text-align: left;
  margin-bottom: 0.25rem;
}
.panel .panel__itemKey {
  flex-grow: 1;
  flex-basis: 0;
}
.panel--layout_10-90 .panel__itemDescription {
  flex-basis: 46.46rem;
}
.panel--layout_20-80 .panel__itemDescription {
  flex-basis: 41.3rem;
}
.panel--layout_30-70 .panel__itemDescription {
  flex-basis: 36.13rem;
}
.panel--layout_40-60 .panel__itemDescription {
  flex-basis: 30.97rem;
}
.panel--layout_50-50 .panel__itemDescription {
  flex-basis: 25.81rem;
}
.panel--layout_60-40 .panel__itemDescription {
  flex-basis: 20.65rem;
}
.panel--layout_70-30 .panel__itemDescription {
  flex-basis: 15.48rem;
}
.panel--layout_80-20 .panel__itemDescription {
  flex-basis: 10.32rem;
}
.panel--layout_90-10 .panel__itemDescription {
  flex-basis: 5.16rem;
}
.panel--list {
  display: flex;
  background-color: var(--color-bodyBackground);
  flex-direction: column;
}
.panel__item {
  margin-bottom: 2px;
  background: var(--color-formBackground);
  display: flex;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 0.87rem;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .panel__item {
    word-break: break-word;
  }
}
.android.chrome .panel__item {
  word-break: break-word;
}
.panel__itemKey {
  text-align: right;
  padding-right: 1rem;
  width: 44%;
}
.panel__itemDescription {
  width: 56%;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .panel__itemDescription {
    word-break: break-word;
  }
}
.android.chrome .panel__itemDescription {
  word-break: break-word;
}
.panel__itemDescription--wrap {
  white-space: pre-wrap;
}
.panel__itemValue {
  margin-top: 0.5rem;
  display: inline-block;
}
.panel__itemValue--highlight {
  color: var(--color-app-dark);
}
.panel__itemMainText {
  margin-top: 0;
}
.panel__lnr + .panel__itemContent {
  margin-left: 0;
}
.panel__itemContent {
  padding: 0.25rem 1rem 0.25rem 0;
  display: inline-flex;
  align-items: baseline;
  width: 100%;
  margin-left: 2.25rem;
}
.panel__lnr {
  font-size: 0.75rem;
  color: var(--color-triple114);
  background-color: var(--color-triple248);
  min-width: 2.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 0.5rem;
  padding-top: 0.37rem;
}
.panel__lnrDescription {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.panel--overview h2 {
  margin-top: 0;
}
.panel--overview .panel__item {
  width: 100%;
  display: block;
  background: var(--color-triple248);
  padding: 1rem;
}
.panel--overview .panel__itemDescription {
  display: inline;
  margin-right: 0.62rem;
}
.panel--overview .panel__itemContent {
  display: block;
  margin: 0 0 2rem;
  padding: 0;
}
.panel--text,
.panel--box,
.panel--center {
  display: flex;
  flex-wrap: wrap;
}
.panel--text .panel__item,
.panel--box .panel__item,
.panel--center .panel__item {
  padding-left: 5rem;
  width: 100%;
}
.panel--box .panel__item,
.panel--center .panel__item {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-triple221);
}
.panel--box-100 .panel__item,
.panel--center-100 .panel__item {
  width: 100px;
}
.panel--box-150 .panel__item,
.panel--center-150 .panel__item {
  width: 150px;
}
.panel--box-200 .panel__item,
.panel--center-200 .panel__item {
  width: 200px;
}
.panel--box-250 .panel__item,
.panel--center-250 .panel__item {
  width: 250px;
}
.panel--box-300 .panel__item,
.panel--center-300 .panel__item {
  width: 300px;
}
.panel--box-350 .panel__item,
.panel--center-350 .panel__item {
  width: 350px;
}
.panel--box-400 .panel__item,
.panel--center-400 .panel__item {
  width: 400px;
}
.panel--box-450 .panel__item,
.panel--center-450 .panel__item {
  width: 450px;
}
.panel--box-500 .panel__item,
.panel--center-500 .panel__item {
  width: 500px;
}
.panel--box-550 .panel__item,
.panel--center-550 .panel__item {
  width: 550px;
}
.panel--box-600 .panel__item,
.panel--center-600 .panel__item {
  width: 600px;
}
.panel--box-650 .panel__item,
.panel--center-650 .panel__item {
  width: 650px;
}
.panel--box-700 .panel__item,
.panel--center-700 .panel__item {
  width: 700px;
}
.panel--highlight .panel__item {
  background-color: var(--color-app-dark);
  color: var(--color-text-light);
  border: none;
}
.panel--center .panel__item {
  padding: 2rem;
}
.panel--center .panel__itemHint {
  margin-top: -1.25rem;
}
.panel--center .panel__item--success {
  border: 2px solid var(--color-success);
}
.panel--center .panel__item--success .panel__itemHint {
  color: var(--color-success-dark);
}
.edge.edgehtml .panel__item {
  word-break: break-all;
}
.edge.edgehtml .panel--box .panel__item {
  word-break: initial;
}
/*
 Mehrzeilenblock (MZB)

| Abhängigkeiten |
| ------ |
| alignment |
| formItem |
| icon |
| interactive |
| toggleBox |

### Beschreibung

 Es gibt 3 Arten von Mehrzeilern: **inline**, **kombinierte** und **getrennte** Mehrzeiler. Außerdem gibt es eine **dynamische
 Variante** des Inline- und kombinierten MZBs. Ein Mehrzeilenblock besteht aus einer ToggleBox, welche als Gruppierung dient,
 falls die Anzahl der Einträge einen bestimmten Wert überschreitet z.B. 10.

 Mehrzeiler sind als Tabellen im Markup ausgezeichnet und verhalten sich responsive indem sie zu serialisierten Reihen
 umbrechen, wenn die Breite kleiner wird.

 Unter der Mehrzeilenblocktabelle existiert eine Button Leiste für die Aktionen:
 **Eintrag hinzufügen** und **alle Einträge löschen**

 Die Art des Mehrzeilers wird am root div Element via:

 `data-mzb-type="inline"`

 `data-mzb-type="combined"`

 `data-mzb-type="separate"`

 `data-mzb-type="dynamicInline"`

 `data-mzb-type="dynamicCombined"`

 gekennzeichnet.
 Des Weiteren beschreibt ```data-mzb-entries="5"``` die Anzahl der übernommenen Einträge und ```data-selector="mzb.inline.est.ID"```
 identifiziert den Mehrzeiler im JS. Über diesen Selector kann der Mehrzeiler auch im JS von anderen Modulen verwendet werden.

 Wenn der MZB noch keine Einträge besitzt, ist der erste Eintrag als "neuer Eintrag" Maske" offen, wird aber erst als
 Eintrag gezählt, wenn Angaben gemacht und abgesendet wurden. Bis dahin ist data-mzb-entries noch 0.

 Eine Mehrzeilentabelle besteht aus Einträgen (TR), welche den Zustand *edit* oder *readonly* annehmen können. Dieser
 Zeilenzustand wird über das data-attribut `data-mzb-row="edit"` oder `data-mzb-row="readonly"` ausgezeichnet.
 Das Umschalten zwischen *edit* und *readonly* Modus wird realisiert durch das *Anzeigen* und *Verstecken* von TDs innerhalb
 einer TR. Die Unterscheidung der TDs wird durch die CSS Klassen *mzb__cell--edit* und *mzb__cell--readonly* realisiert, wobei
 bei *inline* MZBs die Umschaltung innerhalb einer Zelle durch *mzb__cellContent--readonly* und *mzb__cellContent--edit*
 erreicht wird.

 Es können mehrere Mehrzeilenblöcke, auch verschiedener Arten, auf einer Seite existieren.

 Um bestimmte Spaltenbreiten festzulegen, gibt es verschiedene *.mzb__col* Klassen Modifier:
 `.mzb__col--10` bis `.mzb__col--90` welche sich in der Summe 100% teilen. Darauf muss bei der Umsetzung
 geachtet werden, dass eine Spalte ausreichen breit für ihren Inhalt ist und insgesamt nicht über 100% genommen wird.

```
<colgroup>
  <col class="mzb__col--nr">
  <col class="mzb__col--15">
  <col class="mzb__col--15">
  <col class="mzb__col--70">
  <col class="mzb__col--buttons">
 </colgroup>```

 Die Anzahl der col groups wird im folgenden spezifisch für combined sowie für inline MZBs erläutert.

##### Inline MZB
 * colgroups entsprechen der Anzahl der Labels im *readonly* Modus + 1 Spalte für Zeilennummer und 1 Spalte für Buttons +
   1 Extra-Spalte für die Bearbeitung, welche ausgeblendet ist.
 * THs
   - 1 unsichtbares TH "Einträge"
   - X sichtbare THs für die einzelnen Felder
   - 1 unsichtbare TH "Bearbeitung" für die Buttons
 * TDs in einer TR
   - 1 sichtbares TD für die Eintragsnummer
   - X TDs für die einzelnen Felder
   - 1 sichtbares TD für die Buttons

##### Kombinierter MZB
 * colgroups entsprechen der Anzahl der Labels im *readonly* Modus + 1 Spalten für Zeilennummer und 1 Spalte für Buttons + 1 unsichtbare Spalte für die combined Variante
   welche sich via *span="Z"* über die gesamte Zeile erstrecken soll und via "_helper-hidden" ausgeblendet ist.
 * THs in TR
   - 1 unsichtbares TH "Einträge"
   - X sichtbare THs für die einzelnen Felder
   - 1 unsichtbare TH "Bearbeitung" für die Buttons
   - Z unsichtbare (display none) THs analog zum <col span="Z" ...>
 * TDs in TR
   - 1 sichtbares TD für die Zeilennummer
   - X sichtbare TDs für die einzelnen Felder
   - 1 sichtbares TD für die Bearbeitungsbuttons
   - 1 unsichtbares TH mit colspan="Z" für den Inhalt

 Der Inhalt eines kombinierten MZBs wird im Edit-Modus angezeigt.

### Anforderungen
#### ohne JavaScript
 * "neuer Eintrag Maske" ist letzte Zeile im MZB und wird immer standardmäßig gerendert (außer im getrennten MB) und
 * angezeigt (initial Zustand sowie bei existierenden Einträgen)
 * Button "weitere Daten hinzufügen" wird via CSS ausgeblendet bei deaktiviertem JS
 * sobald eine Zeile im Editierzustand ist, wird die "neuer Eintrag hinzufügen" Maske inkl. "weitere Daten hinzufügen Button" ausgeblendet
 * alle Buttons: edit, delete, confirm, add, deleteAll lösen einen form-submit aus
 * inputs werden als disabled gerendert, es sei denn die Zeile ist initial im edit Modus oder es ist die "neuer Eintrag" Maske
 * inputs der "neuen Eintrag Maske" werden via JavaScript disabled, damit ohne JS Einträge möglich sind
 * Gruppierungen sind offen

#### mit JavaScript
 * letzte Zeile (neuer Eintrag Maske) wird ausgeblendet, sobald min ein Eintrag existiert
 * *Weitere Daten hinzufügen* Button wird deaktiviert, wenn keine Einträge oder Einträge im Editierzustand sind
 * die Buttons *delete*, *deleteAll* und *confirm* (falls sich Eingaben geändert haben) lösen einen form-submit aus
 * Button *weitere Daten hinzufügen* zeigt die letzte Zeile im MZB (neuer Eintrag Maske) an
 * letzte Gruppierung immer automatisch geöffnet

#### Allgemein
 * *Alle Einträge löschen* Button wird deaktivert, wenn sich eine Zeile im Editiermodus befindet
 * es darf sich pro MZB immer nur eine Zeile im Editierzustand befinden
 * die Seite darf vom Nutzer nicht verlassen werden, wenn noch ein Eintrag unbestätigt ist (Editierzustand bei min. 1 MZB)
 * Enter Taste im Edit Mode soll zu einer Datenübername des Eintrages führen

#### Unterschiede

|    Merkmal    |                          inline                         |                                        combined                                        |                 separate                 |
|:-------------:|:-------------------------------------------------------:|:--------------------------------------------------------------------------------------:|:----------------------------------------:|
|     Inhalt    | Jeder Representant wird innerhalb einer TD umgeschalten | Wird als Inhaltsblock untereinander als eine große Spalte in der gesamten TR angezeigt | Wird auf einer separaten Seite angezeigt |
|  Felderarten  |                        nur Inputs                       |                                            *                                           |                     *                    |
| Anzahl Felder |                          max. 3                         |                                       unbegrenzt                                       |                unbegrenzt                |

> Das role="article" Attribut darf nur ausgezeichnet sein, wenn der Tabellen Header nicht zu sehen ist: also mobile und bei getrennten MZBs mit mehr als 3 Spalten (collapse)

Styleguide ###formularElemente.mzb###

*/
/*
ObjectField

Komponente zur Darstellung eines ausgewählten Elements (z.B. einer Datei).
Der Name des ausgewählten Elements wird links im Rahmen angezeigt. Rechts befindet sich ein Button zum Ändern der Auswahl.
Wenn ein Element ausgewählt ist, wird ein "x"-Icon angezeigt, das bei Klick die Auswahl wieder zurücksetzt.

markup: demo.objectField.html

Styleguide ###formularElemente.objectField###
*/
.objectField {
  display: grid;
  grid-template-columns: auto -webkit-max-content;
  grid-template-columns: auto max-content;
  grid-gap: 0.31rem;
}
.objectField .interactive {
  padding-top: 0.37rem;
  padding-bottom: 0.37rem;
}
.objectField__field {
  position: relative;
  display: block;
  border: 1px solid var(--color-inputBorder);
  padding: 0.37rem 0.5rem;
  background-color: var(--color-formBackground);
  font-size: 1rem;
  line-height: 1.35;
  min-height: 2.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.objectField--empty .objectField__field {
  font-style: italic;
  color: var(--color-triple178);
}
.objectField--filled .objectField__field {
  padding-right: 2rem;
}
.objectField__field .interactive-icon {
  position: absolute;
  top: 1px;
  right: 1px;
}
.mzb .toggleBox__content {
  border: none;
  padding: 0;
  margin: 0;
}
.mzb table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  font-size: 0.87rem;
  line-height: 135%;
  width: 100%;
  table-layout: fixed;
}
.mzb table .interactive-icon {
  font-size: 1rem;
}
.mzb table thead th {
  vertical-align: bottom;
  text-align: left;
  padding: 0.5rem;
}
.mzb table tr {
  outline: 8px solid transparent;
}
.mzb table tr[data-mzb-row="edit"].mzb__row--show {
  display: table-row;
}
.mzb table tr[data-mzb-row="edit"] .mzb__cell--nr,
.mzb table tr[data-mzb-row="edit"] .mzb__cell--sourced {
  background: var(--color-triple248);
}
.mzb table tr[data-mzb-row="edit"] .mzb__cell--sourced > * {
  display: none;
}
.mzb table tr[data-mzb-row="edit"] .mzb__cell--nr {
  color: var(--color-triple114);
  border-right: 0.5rem solid var(--color-bodyBackground);
}
.mzb table tr[data-mzb-modified][data-mzb-row="readonly"]:not(.mzb__row--error):focus {
  outline: 2px solid var(--color-active);
}
.mzb .formBox {
  margin-bottom: 0;
}
.mzb--inline tr.mzb__addEntry:nth-child(n+2),
.mzb--combined tr.mzb__addEntry:nth-child(n+2) {
  display: none;
}
.mzb--inline tr.mzb__addEntry.mzb__addEntry--edit,
.mzb--combined tr.mzb__addEntry.mzb__addEntry--edit {
  display: table-row;
}
.mzb [data-mzb-row] {
  background-color: var(--color-bodyBackground);
}
.mzb__head {
  background-color: var(--color-triple242);
}
.mzb--combined[data-mzb-entries="0"] thead {
  display: none;
}
.mzb--inline,
.mzb--combined {
  padding-top: 0.5rem;
  background-color: var(--color-triple242);
}
.mzb--inline .toggleBox,
.mzb--combined .toggleBox {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mzb--inline .toggleBox--primary,
.mzb--combined .toggleBox--primary {
  background: var(--color-triple221);
}
.mzb--inline .toggleBox .mzb__groupContent,
.mzb--combined .toggleBox .mzb__groupContent {
  padding: 0 0.5rem 0 0;
}
.mzb--inline .toggleBox .mzb__groupContent,
.mzb--combined .toggleBox .mzb__groupContent,
.mzb--inline .toggleBox .mzb__head,
.mzb--combined .toggleBox .mzb__head {
  background: transparent;
}
.mzb--separate .panel {
  margin: 0;
}
.mzb--separate .panel .panel__item {
  background-color: inherit;
}
.mzb--separate .mzb__addEntry--empty {
  outline: 4px solid var(--color-active);
}
.mzb--separate .mzb__addEntry--empty .messageBox {
  margin-bottom: 0;
  border: none;
}
.mzb--separate-collapse table {
  width: 100%;
}
.mzb--separate-collapse thead,
.mzb--separate-collapse colgroup {
  display: none;
}
.mzb--separate-collapse tr {
  position: relative;
  display: block;
  margin-bottom: 0.25rem;
}
.mzb--separate-collapse .mzb__cellNumberAdditional {
  display: inline;
}
.mzb--separate-collapse td.mzb__cell {
  display: block;
}
.mzb--separate-collapse td.mzb__cell--separate {
  padding-top: 0;
  padding-bottom: 0;
}
.mzb--separate-collapse td.mzb__cell--separate .mzb__cellContent--edit {
  display: block;
}
.mzb--separate-collapse td.mzb__cell--separate .mzb__cellContent--readonly {
  display: none;
}
.mzb--separate-collapse td.mzb__cell--sourced .mzb__cellContent--edit:not(:last-child),
.mzb--separate-collapse td.mzb__cell--nr .mzb__cellContent--edit:not(:last-child) {
  display: block;
}
.mzb--separate-collapse td.mzb__cell--sourced .mzb__cellContent--readonly:first-child,
.mzb--separate-collapse td.mzb__cell--nr .mzb__cellContent--readonly:first-child {
  font-weight: bold;
  text-align: left;
}
.mzb--separate-collapse td.mzb__cell--buttons {
  text-align: left;
}
.mzb.mzb--dynamic [data-mzb-row="edit"] {
  outline: none;
}
.mzb.mzb--dynamic[data-mzb-entries="1"] .mzb__cell--buttons .mzb__cellContent--edit,
.mzb.mzb--dynamic[data-mzb-entries="1"] .mzb__combinedContentHeadButton {
  display: none;
}
.mzb.mzb--dynamic.mzb--combined thead {
  display: none;
}
.mzb [data-mzb-row="readonly"] .mzb__cellContent--edit,
.mzb [data-mzb-row="readonly"] .mzb__cell--edit {
  display: none;
}
.mzb [data-mzb-row="edit"] {
  outline: 8px solid var(--color-active);
  z-index: 2;
}
.mzb--reducedLayer [data-mzb-row="edit"] {
  z-index: auto;
}
.mzb [data-mzb-row="edit"] .mzb__cellContent--readonly,
.mzb [data-mzb-row="edit"] .mzb__cell--readonly {
  display: none;
}
.mzb [data-mzb-row="edit"] .mzb__cellContent--inline,
.mzb [data-mzb-row="edit"] .mzb__cell--inline {
  padding-left: 0;
}
.mzb [data-mzb-row="edit"].mzb__row--error,
.mzb [data-mzb-row="readonly"].mzb__row--error {
  outline: 8px solid var(--color-error);
  z-index: 1;
}
.mzb [data-mzb-row="edit"] + .mzb__row--error {
  outline: none;
  box-shadow: 0 0 0 8px var(--color-error);
}
.safari .mzb [data-mzb-row="edit"] + .mzb__row--error {
  filter: drop-shadow(8px 0 0 var(--color-error)) drop-shadow(-8px 0 0 var(--color-error)) drop-shadow(0 8px 0 var(--color-error));
}
.mzb[data-mzb-entries="0"] .mzb__groupContent {
  padding-top: 0;
}
.mzb[data-mzb-entries="0"] [data-selector="interactive.mzb.delete"] {
  display: none;
}
.mzb[data-mzb-entries="0"] .mzb__addEntry:not(.mzb__addEntry--edit) {
  outline: none;
}
.mzb__footerButtons {
  padding: 1rem 0;
}
.mzb__footerAddBtn {
  display: block;
}
.mzb__groupContent {
  padding: 0 0.5rem;
  background-color: var(--color-triple242);
}
.mzb__cellNumberAdditional {
  display: none;
}
.mzb__cell {
  vertical-align: top;
  padding: 0.5rem;
}
.safari .mzb__cell {
  outline: 8px solid transparent;
}
.mzb__cell:not(.mzb__cell--nr) .mzb__cellContent--readonly {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .mzb__cell:not(.mzb__cell--nr) .mzb__cellContent--readonly {
    word-break: break-word;
  }
}
.android.chrome .mzb__cell:not(.mzb__cell--nr) .mzb__cellContent--readonly {
  word-break: break-word;
}
.mzb__cell--sourced .mzb__cellContent,
.mzb__cell--nr .mzb__cellContent {
  text-align: right;
}
.mzb__cell--sourced .mzb__cellContent--edit,
.mzb__cell--nr .mzb__cellContent--edit {
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: normal;
}
.mzb__cell--sourced .mzb__cellContent--readonly,
.mzb__cell--nr .mzb__cellContent--readonly {
  font-weight: bold;
}
.mzb__cell--sourced {
  padding: 0;
  position: relative;
}
.mzb__cell--nr {
  min-width: 3.12rem;
}
.mzb__cell--inline .formItem__line {
  padding: 0;
}
.mzb__cell--inline .formItem__wrapper {
  background-color: var(--color-bodyBackground);
  flex-direction: inherit;
}
.mzb__cell--separate .panel__itemDescription > ul,
.mzb__cell--separate .mzb__cellContent--readonly > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.mzb__cell--separate .panel__itemDescription > ul > li,
.mzb__cell--separate .mzb__cellContent--readonly > ul > li {
  margin-top: 0;
}
.mzb__cell--separate .panel__itemDescription > ul ul,
.mzb__cell--separate .mzb__cellContent--readonly > ul ul {
  padding-left: 1.5rem;
}
.mzb__cell--separate .panel--layout_10-90 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 10%;
}
.mzb__cell--separate .panel--layout_10-90 .panel__itemDescription {
  flex-basis: auto;
  width: 90%;
}
.mzb__cell--separate .panel--layout_20-80 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 20%;
}
.mzb__cell--separate .panel--layout_20-80 .panel__itemDescription {
  flex-basis: auto;
  width: 80%;
}
.mzb__cell--separate .panel--layout_30-70 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 30%;
}
.mzb__cell--separate .panel--layout_30-70 .panel__itemDescription {
  flex-basis: auto;
  width: 70%;
}
.mzb__cell--separate .panel--layout_40-60 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 40%;
}
.mzb__cell--separate .panel--layout_40-60 .panel__itemDescription {
  flex-basis: auto;
  width: 60%;
}
.mzb__cell--separate .panel--layout_50-50 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 50%;
}
.mzb__cell--separate .panel--layout_50-50 .panel__itemDescription {
  flex-basis: auto;
  width: 50%;
}
.mzb__cell--separate .panel--layout_60-40 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 60%;
}
.mzb__cell--separate .panel--layout_60-40 .panel__itemDescription {
  flex-basis: auto;
  width: 40%;
}
.mzb__cell--separate .panel--layout_70-30 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 70%;
}
.mzb__cell--separate .panel--layout_70-30 .panel__itemDescription {
  flex-basis: auto;
  width: 30%;
}
.mzb__cell--separate .panel--layout_80-20 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 80%;
}
.mzb__cell--separate .panel--layout_80-20 .panel__itemDescription {
  flex-basis: auto;
  width: 20%;
}
.mzb__cell--separate .panel--layout_90-10 .panel__itemKey {
  flex-grow: 0;
  flex-basis: auto;
  width: 90%;
}
.mzb__cell--separate .panel--layout_90-10 .panel__itemDescription {
  flex-basis: auto;
  width: 10%;
}
.mzb__cell--separate .panel__itemContent {
  margin-left: 0;
}
.mzb__cell--buttons {
  text-align: right;
  min-width: 5.62rem;
  padding-right: 0.5rem;
}
.mzb__cell--buttons .mzb__cellContent--readonly {
  padding-top: 0;
  padding-left: 0;
}
.mzb__cellContent--readonly {
  padding-top: 0.5rem;
  padding-left: 0.06rem;
}
.mzb__cellContent--label {
  display: none;
}
.mzb__cellContent .formItem,
.mzb__cellContent .formItem__wrapper {
  padding: 0;
  margin: 0;
}
.mzb__cellContent .formItem__wrapper,
.mzb__cellContent .formItem__line {
  width: 100%;
}
.mzb__cellContent .formItem__labelGroup {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.mzb__combinedContentHead {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  font-weight: bold;
}
.mzb__combinedContentHeadEntry {
  display: inline-block;
  align-self: center;
}
.mzb__combinedContentHeadButton {
  display: inline-block;
  align-self: center;
}
.mzb__combinedContentBody {
  padding: 0;
}
.mzb__combinedContentBody .formBox {
  padding-bottom: 0.32rem;
}
.mzb__info {
  background-color: var(--color-bodyBackground);
  font-style: italic;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}
.mzb__col {
  width: 100%;
}
.mzb__col--90 {
  width: 90%;
}
.mzb__col--80 {
  width: 80%;
}
.mzb__col--75 {
  width: 75%;
}
.mzb__col--70 {
  width: 70%;
}
.mzb__col--66 {
  width: 66%;
}
.mzb__col--60 {
  width: 60%;
}
.mzb__col--50 {
  width: 50%;
}
.mzb__col--40 {
  width: 40%;
}
.mzb__col--33 {
  width: 33%;
}
.mzb__col--30 {
  width: 30%;
}
.mzb__col--25 {
  width: 25%;
}
.mzb__col--20 {
  width: 20%;
}
.mzb__col--15 {
  width: 15%;
}
.mzb__col--10 {
  width: 10%;
}
.mzb__col--sourced {
  width: 0.87rem;
}
.mzb__col--nr {
  width: 3.12rem;
}
.mzb__col--buttons {
  width: 5.62rem;
}
.mzb__format {
  display: block;
}
.mzb + .matrix {
  margin-top: 0.12rem;
}
.mzb + .formBox {
  margin-top: 0.18rem;
}
.mzb .objectField .interactive {
  font-size: 1rem;
}
/*
Inline Mehrzeilenblock (MZB)

Der Inline Mehrzeilenblock bietet eine Bearbeitung einer Zeile des Mehrzeilenblocks innerhalb der Zeile. Dafür
wird zwischen edit und readonly gewechselt.

markup: demo.mzb.inline.html

Styleguide ###formularElemente.mzb.inline###

*/
/*
Kombinierter Mehrzeilenblock (MZB)

Der Kombinierte Mehrzeilenblock bietet eine Bearbeitung einer Zeile des Mehrzeilenblocks als zusammenhängenden Block in
einer Tabellenspalte welche sich über die gesamte Tabellenbreite erstreckt. Dafür wird ebenfalls zwischen edit und
readonly gewechselt.

markup: demo.mzb.combined.html

Styleguide ###formularElemente.mzb.combined###

*/
/*
Getrennter Mehrzeilenblock (MZB)

Der getrennte Mehrzeilenblock bietet eine Bearbeitung einer Zeile via Link auf einer neuen (getrennten) Formularseite.
Es wird nur die readonly Darstellung gerendert. Getrennte Mehrzeiler mit bis zu 3 Spalten werden als Tabelle dargestellt.
Mehr als 3 Einträgen werden in der Collapse Darstellung analog zur mobilen Ansicht gerendert.

markup: demo.mzb.separate.html

Styleguide ###formularElemente.mzb.separate###

*/
/*
Dynamischer Mehrzeilenblock (MZB)

Im dynamischen Mehrzeilenblock können Zeilen client-seitig hinzugefügt und entfernt werden. Zeilen können nicht einzeln
bestätigt werden und werden daher nur im Editiermodus angezeigt. Sowohl Inline- als auch kombinierte MZBs können dynamisch
sein, die entsprechenden MZB-Typen heißen:

`data-mzb-type="dynamicInline"`

`data-mzb-type="dynamicCombined"`

Um neue MZB-Zeilen anlegen zu können, wird eine Zeilenvorlage benötigt. Diese wird im `<template>`-Tag definiert.
`name`-Attribute und IDs von Inputs in der Vorlage sollten den Platzhalter `${index}` beinhalten,
der beim Anlegen einer Zeile automatisch ersetzt wird.

*Hinweis:*

AutoSuggest-Felder und Beleg-Verknüpfungen werden noch nicht im dynamischen MZB unterstützt.

markup: demo.mzb.dynamic.html

Styleguide ###formularElemente.mzb.dynamic###
 */
/*
MZB Tile (Kachel)

Die Mehrzeilenblöcke mit semantischem Index sind getrennte oder kombinierte Mehrzeilenblöcke,
die auf maximal 3 Elemente beschränkt sind.
Die Einträge dieses MZBs werden MZB Tile genannt und haben folgende Funktionen: Neu anlegen, Bearbeiten und Löschen.

Das MZB Tile ist grundsätzlich als div aufgebaut, da das MZB Tile Löschen-Buttons beinhaltet.
Damit das MZB Tile die Funktionalität von zwei Buttons beinhalten kann, muss folgender Aufbau immer vorhanden sein:

Hierfür muss als erstes Kindelement ein div-Tag mit der Klasse `.mzbTile__hiddenButton` eingefügt werden.
Der Bearbeiten-Button benötigt den `data-selector="interactive.mzbTile.hiddenSubmit"`. Die Funktion des Bearbeitens wird
ausgelöst mit dem div mit `data-selector="interactive.mzbTile.link"` und der Klasse `.mzbTile__link`.

Somit wird gewährleistet, dass auf Klick der Hauptkachel die Funktionalität des versteckten Buttons aufgerufen wird.
Der Button für das Löschen ist ein echtes button-Tag.

### Kombinierter MZB als Kachel
Beim kombinierten MZB lässt sich die Kachel auf- und zuklappen. Je nach Zustand ist immer nur eine der beiden divs mit den Klassen
`.mzbTile__content--readonly` und `.mzbTile__content--edit` sichtbar.
Das Verhalten beim Anlegen, Löschen und Bearbeiten eines Eintrags entspricht dem einer Zeile im kombinierten MZB.

### Interaktives Verhalten
* verlinkt ist das komplette MZB Tile, wobei der versteckte Button ausgelöst wird
* es gibt einen zusätzlichen Löschen-Button

### Neu Anlegen
Ein noch leerer MZB mit semantischem Index besitzt nur ein Aktion, die über den versteckten Button ausgeführt wird.

### Hinzugefügt
Ein hinzugefügter MZB mit semantischem Index kann mit oder ohne Repräsentanten dargestellt werden.
Die Repräsentanten sind im optionalen `.mzbTile__content` als Panel mit Typ List einzufügen. Es muss kein Layout
für das Panel festgelegt werden, da dieses immer über das MZB Tile umgebrochen wird.

### Anordnung
Für die Anordnung nebeneinander soll ein Alignment mit Modifier `--growEqual` genutzt werden. Die MZB Tiles sollen in zwei
Alignment Items liegen, um ein zweispaltiges Layout darzustellen. Das zweite Alignment Item soll den Modifier `--leftMargin16`
erhalten. Diese Anordnung wird nur für getrennte MZB-Kacheln verwendet. Kombinierte MZB-Kacheln werden in voller Breite
untereinander angeordnet.

markup: demo.mzbTile.html

Styleguide ###formularElemente.mzbTile###
*/
.mzbTile {
  margin-bottom: 1rem;
  border: 1px dashed var(--color-triple178);
  background: var(--color-bodyBackground);
}
.mzbTile__link:hover,
.mzbTile__link:focus {
  text-decoration: none;
  cursor: pointer;
}
.mzbTile__link:hover .mzbTile__head,
.mzbTile__link:focus .mzbTile__head {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-triple102);
          text-decoration-color: var(--color-triple102);
}
.mzbTile__link:hover .mzbTile__icon:not(.mzbTile__icon----delete),
.mzbTile__link:focus .mzbTile__icon:not(.mzbTile__icon----delete) {
  border-radius: 3px;
}
.mzbTile__link:focus {
  outline: 1px dotted var(--color-interaction);
  outline-offset: 1px;
}
.mzbTile__hiddenButton {
  display: none;
}
.mzbTile__head {
  padding: calc(1rem - 1px);
  background: var(--color-formBackground);
  font-size: 1.12rem;
  display: flex;
  align-items: center;
  min-height: 4rem;
}
.mzbTile__headTitle {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-right: 1rem;
  flex: 1 0 0;
  color: var(--color-triple102);
  font-style: italic;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .mzbTile__headTitle {
    word-break: break-word;
  }
}
.android.chrome .mzbTile__headTitle {
  word-break: break-word;
}
.mzbTile__headIcons {
  flex: 0 0 auto;
  display: flex;
}
.mzbTile[data-mzb-row='readonly'] .mzbTile__headIcons--edit {
  display: none;
}
.mzbTile[data-mzb-row='edit'] .mzbTile__headIcons--readonly {
  display: none;
}
.mzbTile__headIcons .mzbTile__icon {
  background: var(--color-interaction-light);
  padding: 0.31rem 0.5rem 0.12rem;
  border: 1px solid var(--color-interaction-light);
  border-radius: 50%;
  transition: border-radius 0.25s ease-in;
}
.mzbTile__headIcons .mzbTile__icon .icon {
  cursor: pointer;
}
.mzbTile__headIcons .mzbTile__icon + .interactive-icon {
  margin-left: 0.5rem;
}
.mzbTile__content {
  color: var(--color-text);
}
.mzbTile__content--readonly {
  padding: 1rem;
}
.mzbTile[data-mzb-row='edit'] .mzbTile__content--readonly {
  display: none;
}
.mzbTile__content--readonly .panel {
  align-items: stretch;
  flex-direction: column;
  margin: 0;
}
.mzbTile__content--readonly .panel .panel__itemKey {
  flex-basis: 100%;
}
.mzbTile__content--readonly .panel .panel__itemDescription {
  flex-basis: 100%;
}
.mzbTile__content--readonly .panel--overview .panel__itemContent {
  margin: 0 0 1.5rem;
}
.mzbTile__content--readonly .panel__lnr {
  background-color: var(--color-triple242);
  width: auto;
  justify-content: flex-start;
  padding-top: 0;
}
.mzbTile__content--readonly .panel__lnrDescription {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto;
  overflow: visible;
}
.mzbTile__content--readonly .panel--list .panel__item {
  padding: 0.5rem;
  flex-direction: column;
}
.mzbTile__content--readonly .panel--list .panel__itemKey,
.mzbTile__content--readonly .panel--list .panel__itemDescription {
  width: 100%;
}
.mzbTile__content--readonly .panel--list .panel__itemKey {
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.25;
}
.mzbTile__content--readonly .panel--list .panel__itemContent {
  padding: 0;
  flex-direction: column;
  margin-left: 0;
}
.mzbTile__content--readonly .panel--list .panel__item {
  background: var(--color-bodyBackground);
  padding: 0;
  margin-bottom: 0;
}
.mzbTile__content--readonly .panel--list .panel__item + .panel__item {
  padding-top: 0.5rem;
}
.mzbTile__content--edit {
  padding: 1rem 0.5rem 2rem;
}
.mzbTile[data-mzb-row='readonly'] .mzbTile__content--edit {
  display: none;
}
.mzbTile__content--edit .formBox {
  margin-bottom: 0.87rem;
}
.mzbTile--primary {
  border: 1px solid var(--color-interaction-light);
}
.mzbTile--primary .mzbTile__head {
  background: var(--color-interaction-light);
}
.mzbTile--primary .mzbTile__headTitle {
  color: var(--color-text-light);
  font-style: normal;
}
.mzbTile--primary .mzbTile__headIcons .mzbTile__icon {
  background: var(--color-bodyBackground);
  border-color: var(--color-bodyBackground);
}
.mzbTile--primary .mzbTile__headIcons .interactive-icon {
  border: 1px solid var(--color-text-light);
}
.mzbTile--primary .mzbTile__headIcons .interactive-icon:hover,
.mzbTile--primary .mzbTile__headIcons .interactive-icon:focus {
  border-radius: 0.18rem;
  outline-color: var(--color-text-light);
}
.mzbTile--primary .mzbTile__link:hover .mzbTile__head,
.mzbTile--primary .mzbTile__link:focus .mzbTile__head {
  -webkit-text-decoration-color: var(--color-text-light);
          text-decoration-color: var(--color-text-light);
}
.mzbTile--error {
  border-color: var(--color-error);
}
.mzbTile--error .mzbTile__head {
  outline: 0.5rem solid var(--color-error);
  outline-offset: calc(-0.5rem + 1px);
}
.mzbTile--error.mzbTile--primary .mzbTile__head {
  background: var(--color-error);
  outline: 1px solid var(--color-bodyBackground);
}
.mzbTile----deleteHover .mzbTile__headTitle {
  text-decoration: underline;
}
.mzbTile----deleteHover .mzbTile__icon {
  border-radius: 50% !important;
}
/*
Navigation

Beliebig verschachtelbare Navigation, die das Menü in einem &lt;nav&gt; Element mit verschachtelten &lt;ul&gt; darstellt.

Das __nav__ Mixin wird innerhalb eines eigenen Navigationsmixins verwendet.
Hierbei wird dem eigenen Naviagtionsmixin nur ein __type__ über das Konfigurationsobjekt übermittelt, mit dem das __nav__ Mixin
bestimmt, welche Links aktiv sind.

markup: demo.nav.html

Styleguide ###portalrahmen.navigation###
*/
.nav {
  position: absolute;
  height: 100%;
  width: 100%;
  background: var(--color-triple248);
  cursor: pointer;
  display: flex;
  flex-direction: column-reverse;
  z-index: 210;
}
.nav__wrapper {
  min-width: 17.5rem;
  background: var(--color-bodyBackground);
  height: calc(100% - 2.5rem);
  box-shadow: none;
  transform: translateX(-280px);
  visibility: hidden;
  z-index: 1;
}
.nav .interactive {
  text-align: left;
  border-radius: 0;
}
.nav .interactive-icon {
  border-radius: 0;
}
.nav--opened {
  top: 0;
  width: auto;
}
.nav--opened .nav__wrapper {
  box-shadow: 2px 1px 2px 0 var(--color-shadow);
  visibility: visible;
  transform: none;
}
.nav--opened .nav__triggerstate {
  min-width: 17.5rem;
  box-shadow: 2px 2px 2px 0 var(--color-shadow);
}
.nav--opened .nav__title {
  display: block;
}
.nav__triggerstate {
  cursor: default;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--color-triple248);
  height: 2.5rem;
  min-width: 0;
  box-shadow: none;
  z-index: 0;
}
.nav__triggerstate .nav__close {
  font-size: 0.87rem;
}
.nav__title {
  display: none;
  text-transform: uppercase;
  padding-left: 0.62rem;
}
.nav__wrapper > .nav__list {
  border-bottom: 1px solid var(--color-triple221);
}
.nav__list {
  cursor: default;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  display: block;
  background: var(--color-bodyBackground);
}
.nav__item {
  margin: 0;
}
.nav__item .interactive-icon {
  padding: 0.31rem 0.62rem;
}
.nav__item .interactive-icon__text {
  height: 2rem;
  display: flex;
  align-items: center;
  margin-left: 0.31rem;
}
.nav__item .interactive-icon__icon {
  margin: 0.5rem;
}
.nav__item .nav__itemFirst {
  padding-left: 1.12rem;
}
.nav__item--subnav {
  border-top: 1px solid var(--color-triple221);
}
.nav__item--subnav > .nav__list {
  font-size: 0.87rem;
  display: none;
}
.nav__item--subnav > .nav__list .interactive {
  padding: 0.5rem;
  padding-left: 2.93rem;
}
.nav__item--active > .interactive-icon {
  box-shadow: inset 0.25rem 0 0 var(--color-active);
  border-left: 0;
  color: var(--color-active-dark);
}
.nav__item--active > .interactive-icon .interactive-icon__text {
  color: var(--color-active-dark);
}
.nav__item--active > .interactive {
  box-shadow: inset 0.25rem 0 0 var(--color-active);
  border-left: 0;
  color: var(--color-active-dark);
}
.nav__item--open {
  margin-bottom: 0.87rem;
}
.nav__item--open > .nav__list {
  display: block;
}
.nav__item .iframe {
  border: 0;
  border-top: 1px solid var(--color-triple221);
  height: 2.25rem;
  width: 100%;
}
.nav__item[data-selector="interactive.nav.elsterwebLogout"] {
  height: 2.25rem;
}
/*
Pagination

Die Seitennavigation besteht aus zwei Icon-Buttons links, dem Text für die Seitennummer und zwei Icon-Buttons rechts.
Die Seitennavigation bleibt immer zentriert, wobei der Text für die Seitenummer im mobilen Layout umbricht.

markup: demo.pagination.html

Styleguide ###basics.pagination###
*/
.pagination {
  margin: 0.5rem 0;
}
.pagination .alignment__item {
  display: flex;
  align-items: center;
}
.pagination .interactive-icon + .interactive-icon {
  margin-left: 0.5rem;
}
.pagination__pagenumber {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1rem;
  text-align: center;
}
.pagination__currentpages,
.pagination__allpages {
  flex: 0 1 auto;
}
.pagination__pagesize {
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}
.pagination__pagesize .formItem {
  background: none;
  padding-top: 0;
}
.pagination__pagesize .formItem__wrapper {
  background: none;
}
.pagination__pagesize .formItem__line {
  padding-top: 0;
  flex-wrap: nowrap;
}
.pagination__pagesize .formItem__labelGroup {
  margin-right: 0.5rem;
}
.pagination__pagesizeHiddenButton {
  display: none;
}
/*
Thumbnail

### Aufbau
Das Thumbnail besteht aus drei Hauptbestandteilen: Head, Content und Action. Es besitzt die Variante in der Belegverwaltung/Sidebar
und die Variante im Feld-Flyout.

Der Head ist ein Button beinhaltet immer einen titleText, das vorangestellte Icon ist optional.

Der Content besteht aus drei Bereichen: Bild, Tag-Liste (siehe tags) und optionales ContextMenu (siehe contextMenu).
Bei dem Bild wird kein data-dark-src angegeben, da diese Bilder vom Nutzer sind.
In der Tag-Liste sollen insgesamt maximal 6 Tags angezeigt werden.
Bei mehr als 5 Tags werden die ersten 5 Tags und zusätzlich dazu ein "Alle" Tag mit dem Tag-Modifier highlight angezeigt.

Das ContextMenu ist optional, da es in der Variante für das Feld-Flyout nicht benötigt wird.

Im Flyout und in der Sidebar werden zur besseren Übersicht tags und ContextMenu weggelassen.

#### Aktionen
Bei jeder Aktion soll ein <span class="_helper-invisible"> mit dem Namen aus dem Head des Thumbnails dem Text des Aktionsbuttons/-links
vorangestellt werden.
Der Bereich Action kennt zwei Varianten: verknüpft und losgelöst.
##### Verknüpft
Verknüpfte Belege werden in der Belegverwaltung als MessageBox mit einem interactive--@inline "Im Formular anzeigen" als Aktion dargestellt.
Die MessageBox besitzt den Modifier "successThumbnail" mit dem Icon "correct_eop".
Verknüpfte Belege werden im Feld-Flyout als .interactive--invert "Verknüpfung lösen" dargestellt.
##### Losgelöst
Lösgelöste Belege werden in der Belegverwaltung als interactive--primary "Mit Formular verknüpfen" als Aktion dargestellt.

### Anordnung
Die Thumbnails sollen in Tiles-Wrapper verwendet werden.

markup: demo.thumbnail.html

Styleguide ###squads.thumbnail###
*/
/*
Tags

Tags sind dafür da, um einzelne oder mehrere Stichworte darzustellen. Die Tag-Liste hat die role="list" und die Tags die role="listitem".
Die Liste wird immer benötigt, auch wenn nur ein Stichwort benötigt wird.
Die Liste der Tags kann horizontal (default) oder vertikal (Modifier vertical) dargestellt werden.
Alle Tags besitzen den versteckten Text "Stichwort". Die einzelnen Tags selbst besitzen folgende Modifier:
- empty
- highlight

markup: demo.tags.html

Styleguide ###basics.tags###
*/
.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tags__tag {
  display: inline-flex;
  background: var(--color-triple255);
  max-width: 100%;
  min-height: 1.5rem;
  align-self: flex-start;
  align-items: center;
  border-radius: 0.75rem;
  border: 1px solid var(--color-triple221);
  opacity: 1;
  margin: 0 0.25rem 0.25rem 0;
}
.tags__tagText {
  color: var(--color-triple114);
  font-size: 13px;
  padding: 0 0.5rem;
  white-space: nowrap;
}
.tags__tag--empty {
  background: var(--color-warning);
  border: var(--color-warning);
}
.tags__tag--empty .tags__tagText {
  color: var(--color-text);
}
.tags__tag--highlight .tags__tagText {
  color: var(--color-interaction-light);
}
.tags__tag--highlight:hover,
.tags__tag--highlight:focus {
  outline: none;
  text-decoration: underline;
}
.tags--vertical {
  flex-direction: column;
}
.tags--vertical .tags__tag:not(:last-child) {
  margin-right: 0;
  margin-bottom: 0.25rem;
}
.thumbnail {
  min-width: 16.5rem;
  width: 100%;
  margin-left: 0.75rem;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.thumbnail__box {
  border: 1px solid var(--color-triple221);
}
.thumbnail__box:hover {
  border-color: var(--color-interaction);
}
.thumbnail__box--noLink:hover {
  border-color: var(--color-triple221);
}
.thumbnail__box--noLink .thumbnail__link,
.thumbnail__box--noLink .thumbnail__content {
  cursor: default;
}
.thumbnail--focus .thumbnail__box,
.thumbnail__box:hover .thumbnail__box {
  border-color: var(--color-interaction);
  outline: 1px dotted var(--color-interaction);
}
.thumbnail--focus .thumbnail__link,
.thumbnail__box:hover .thumbnail__link {
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.thumbnail--focus .thumbnail__title,
.thumbnail__box:hover .thumbnail__title {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-interaction);
          text-decoration-color: var(--color-interaction);
}
.thumbnail--focus .thumbnail__image img,
.thumbnail__box:hover .thumbnail__image img {
  transform: scale(2.2);
  transform-origin: top center;
  object-position: top center;
}
.thumbnail--focus .tags__tag:not(.tags__tag--highlight),
.thumbnail__box:hover .tags__tag:not(.tags__tag--highlight) {
  max-width: 0;
  opacity: 0;
}
.thumbnail__head {
  display: flex;
  align-items: center;
  background: var(--color-triple255);
  height: 3.12rem;
}
.thumbnail__head .thumbnail__title {
  display: flex;
  flex-direction: row;
  color: var(--color-interaction);
  padding: 0.25rem 0.5rem;
}
.thumbnail__head .thumbnail__titleText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .thumbnail__head .thumbnail__titleText {
    word-break: break-word;
  }
}
.android.chrome .thumbnail__head .thumbnail__titleText {
  word-break: break-word;
}
.thumbnail__head .thumbnail__title .icon {
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.thumbnail__content {
  position: relative;
  cursor: pointer;
}
.thumbnail__preview {
  background: rgba(114,114,114,0.2);
}
.thumbnail__image {
  overflow: hidden;
  height: 11.5rem;
}
.thumbnail__image img {
  width: 100%;
  height: 11.5rem;
  object-fit: scale-down;
  object-position: center;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.1));
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform object-position;
}
.thumbnail__image--empty {
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumbnail .tags {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  width: calc(100% - (3 * 0.5rem) - 34px);
}
.thumbnail .tags__tag {
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: max-width, opacity;
}
.thumbnail__contextMenu {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
}
.thumbnail__action .messageBox {
  margin-bottom: 0;
}
/*
Pullout

Ein UI-Element, das suggeriert, dass man es aus einem anderen Element herausziehen kann.

Styleguide ###interaktiveElemente.pullout###
*/
/*
Pullout: Base

Diese Ausprägung der Komponente ist abstrakt und sollte nicht genutzt werden. Bitte beachten, dass Änderungen an dieser
Komponente einen Effekt auf alle konkreten Ausprägungen hat.

markup: demo/demo.pullout.base.html

Styleguide ###interaktiveElemente.pullout.base###
*/
/*
Pullout: Receipt

Diese Variante der Komponente ist eine konkrete Ausprägung des Pullout-Base und kann im Kontext einer Beleg-Aktion
genutzt werden.

markup: demo/demo.pullout.receipt.html

Styleguide ###interaktiveElemente.pullout.receipt###
*/
.pullout {
  height: 0rem;
  position: relative;
  z-index: 2;
}
.pullout,
.pullout__inner {
  display: block;
}
.pullout__inner {
  box-shadow: rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 8px 8px, rgba(0, 0, 0, 0.07) 8px 16px 16px;
  position: absolute;
  width: 17.5rem;
  border: 1px solid var(--color-inputBorder);
  background-color: var(--color-bodyBackground);
}
.pullout__body {
  max-height: 30rem;
  overflow: hidden auto;
}
.pullout__trigger {
  width: 100%;
  overflow: hidden;
  display: inline-flex;
}
.pullout__trigger .interactive-icon:not([class*="@"]) {
  width: 100%;
  height: 2rem;
  padding: 0;
  text-align: center;
  display: inline-flex;
  position: relative;
  outline: none;
  align-content: center;
  align-items: center;
  background-color: var(--color-triple248);
}
.pullout__trigger .interactive-icon:not([class*="@"]):focus {
  border: 1px dotted var(--color-triple0);
}
.pullout__trigger .interactive-icon:not([class*="@"]):hover {
  border: 1px solid var(--color-interaction);
}
.pullout__trigger .interactive-icon__wrap {
  margin: 0 auto;
  display: inline-flex;
  flex-flow: column;
  align-items: center;
}
.pullout__trigger .interactive-icon__icon {
  margin: 0;
}
.pullout__trigger .interactive-icon__text {
  display: none;
}
.pullout__collapsed > em,
.pullout__expanded > em {
  min-height: 2rem;
  padding-top: 4px;
  display: block;
  text-align: center;
  color: var(--color-inputBorder);
}
.pullout__expanded,
.pullout__footer {
  background: var(--color-triple248);
}
.pullout__expanded {
  padding: 0.5rem;
  display: none;
}
.pullout__expanded .thumbnail {
  margin: 0;
}
.pullout--hidden .pullout__inner {
  display: none;
}
.pullout__collapsed .messageBox {
  margin: 0.5rem;
}
.pullout--collapsed .pullout__inner {
  display: block;
}
.pullout--expanded .pullout__expanded {
  display: block;
}
.pullout--expanded .pullout__trigger {
  display: none;
}
.formItem__fieldItem--receipt-disconnected .pullout {
  display: none;
}
.formItem__fieldItem--receipt-editing.formItem__fieldItem--receipt-disconnected,
.formItem__fieldItem--receipt-editing.formItem__fieldItem--receipt-disconnected:not(:only-child):not(:last-child) {
  margin-right: 2.62rem;
}
/*
Resizer

Ein UI-Element, das ermöglicht, das beinhaltende Element zu verkleinern und zu vergrößern. Die Funktion kann über die Maus an der Ecke des jeweiligen Elements
ausgelöst werden, sofern dieses `absolut` oder `fixed` positioniert ist.
*/
.resizer {
  z-index: 1;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  line-height: 1;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.resizer--left.resizer--top,
.resizer--right.resizer--bottom {
  cursor: nw-resize;
}
.resizer--right.resizer--top,
.resizer--left.resizer--bottom {
  cursor: ne-resize;
}
.resizer--top {
  top: -1.25rem;
}
.resizer--right {
  right: -1.25rem;
}
.resizer--bottom {
  bottom: -1.25rem;
}
.resizer--left {
  left: -1.25rem;
}
.mobile .resizer {
  display: none;
}
/*
ScrollArea

Scrollbares DIV für lange Texte wie zum Beispiel die Lizenzverträge.
Wird auch im Tree des Formularbereichs verwendet.
Unter Verwendung der Modifier "--fadeTop" und "--fadeBottom" kann ein Fading-Effekt erzeugt werden.

markup: demo.scrollArea.html

Styleguide ###basics.scrollArea###
*/
.scrollArea {
  overflow: auto;
}
.scrollArea--fadeTop {
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 3rem), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
          mask: linear-gradient(to bottom, transparent 0, #000 3rem), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
}
.scrollArea--fadeBottom {
  -webkit-mask: linear-gradient(to top, transparent 0, #000 3rem), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
          mask: linear-gradient(to top, transparent 0, #000 3rem), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
}
.scrollArea--fadeTop.scrollArea--fadeBottom {
  -webkit-mask: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
          mask: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%), linear-gradient(to left, #000 0, #000 1.25rem, transparent 2.5rem);
}
.mobile .scrollArea--fadeTop,
.tablet .scrollArea--fadeTop {
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 3rem);
          mask: linear-gradient(to bottom, transparent 0, #000 3rem);
}
.mobile .scrollArea--fadeBottom,
.tablet .scrollArea--fadeBottom {
  -webkit-mask: linear-gradient(to top, transparent 0, #000 3rem);
          mask: linear-gradient(to top, transparent 0, #000 3rem);
}
.mobile .scrollArea--fadeTop.scrollArea--fadeBottom,
.tablet .scrollArea--fadeTop.scrollArea--fadeBottom {
  -webkit-mask: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%);
          mask: linear-gradient(to bottom, transparent 0, black 3rem, black calc(100% - 3rem), transparent 100%);
}
/*
SkipLinks

Diese Sprungmarken sind für den vereinfachten Zugriff auf die verschiedenen Bereiche der Seite vorgesehen.
Hierbei sollen die SkipLinks auf jeder Seite am Anfang des .page__header eingebunden werden.
Die folgenenden Sprungmarken sind verfügbar:
* #nav - springt/öffnet bei Enter oder mit ALT + 1 in der mobilen Ansicht die Hauptnavigation
* #main - springt/öffnet bei Enter oder mit ALT + 2 den Hauptcontent-Bereich
* #footer - springt bei Enter oder mit ALT + 3 zum Footer

Wenn JavaSript deaktiviert ist, fungieren die Links wie normale Sprungmarken.

Erreichbar sind die SkipLinks übers Tabben.

markup: demo.skipLinks.html

Styleguide ###interaktiveElemente.skipLinks###
*/
.skipLinks {
  position: absolute;
  top: 0;
  left: -9999px;
  height: 1px;
  z-index: 300;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.skipLinks .skip {
  position: absolute;
  top: 0;
  left: -9999px;
  height: 1px;
  width: 1px;
}
.skipLinks .skip:focus {
  top: 0;
  left: 9999px;
  outline: 0 none;
  position: absolute;
  width: 100%;
  height: auto;
  color: var(--color-skipFont);
  background: var(--color-skipBackground);
  padding: 0.25rem 0;
  text-align: center;
  text-decoration: none;
}
/*
TabBar

Ein TabBar besteht aus einer Tab-Leiste in der einzelne Tabs als interaktive Elemente platziert sind und mehreren
Inhaltscontainern, welche via Ein- und Ausblenden durch die Tabs geschaltet werden. Eine TabBar muss zwingend Inhalte
via JavaScript steuern können, ansonsten ist es kein TabBar Block, sondern eher eine Navigation via Links/Buttons
(siehe formProgressNav). Standardmäßig ist immer der erste Tab
der aktive Tab. Es gibt die Möglichkeit via JavaScript auf die entsprechende TabBar-Instanz zuzugreifen und zu steuern.
Via Markup kann der standardmäßig aktive Tab durch die Klasse *tabBar__tab--active* am Tab ```<li data-selector="tabs.tab">```
gesetzt werden. Ebenfalls können über Markup alle Tabs deaktiviert werden außer dem aktiven Tab, wenn der aktive Tab
angegeben wird.

Um innerhalb des Tabs Icons vor dem Text anzuzeigen, wird ein interactive-icon mit einem ```data-icons``` Attribut verwendet.
Für einen Tab mit Icon muss mindestens ein default-Icon in der ```base```-Variante definiert sein.
Das default-Icon in der ```base```-Variante wird auch dann genutzt, wenn ein Tab disabled ist.
Optional können Icons für den Zustand ```active``` und ```inactive``` jeweils in den Varianten ```base``` und optional ```hover```
definiert werden (s. Interaktive Icon).

Zusammenfassung:
- Tabs sollen aktiven Status anzeigen
- Bei deaktiviertem JS werden alle Tab Inhalte serialisiert offen angezeigt und via Anchor anspringbar
- Bei deaktiviertem CSS wird eine Überschrift für jeden Inhalt angezeigt

markup: demo.tabBar.html

Styleguide ###interaktiveElemente.tabBar###
*/
.tabBar__tabs,
.tabbarCollapse__tabs,
.tabbar-collapse-fetch__tabs,
.login-box__linkBar {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
  border-bottom: 0.25rem solid var(--color-active);
}
.tabBar__tab,
.tabbarCollapse__tab,
.tabbar-collapse-fetch__tab,
.login-box__link {
  list-style: none;
  display: flex;
  position: relative;
  background-color: var(--color-triple248);
  border: 1px solid var(--color-triple221);
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}
.tabBar__tab .interactive,
.tabbarCollapse__tab .interactive,
.tabbar-collapse-fetch__tab .interactive,
.login-box__link .interactive {
  border-radius: 0;
  padding: 0.25rem 0.5rem;
}
.tabBar__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.tabbarCollapse__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.tabbar-collapse-fetch__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.login-box__link .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover {
  background-color: var(--color-triple230);
  text-decoration: underline;
}
.tabBar__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.tabbarCollapse__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.tabbar-collapse-fetch__tab .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.login-box__link .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus {
  text-decoration: underline;
}
.tabBar__tab .interactive-icon[data-icons],
.tabbarCollapse__tab .interactive-icon[data-icons],
.tabbar-collapse-fetch__tab .interactive-icon[data-icons],
.login-box__link .interactive-icon[data-icons] {
  border-radius: 0;
  padding: 0.25rem 0.5rem;
}
.tabBar__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.tabbarCollapse__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.tabbar-collapse-fetch__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.login-box__link .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover {
  background-color: var(--color-triple230);
  text-decoration: underline;
}
.tabBar__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.tabbarCollapse__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.tabbar-collapse-fetch__tab .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.login-box__link .interactive-icon[data-icons]:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus {
  text-decoration: underline;
}
.tabBar__tab--closable .interactive,
.tabbarCollapse__tab--closable .interactive,
.tabbar-collapse-fetch__tab--closable .interactive,
.login-box__link--closable .interactive {
  padding-right: 2.12rem;
}
.tabBar__tab--closable .interactive-icon[data-icons],
.tabbarCollapse__tab--closable .interactive-icon[data-icons],
.tabbar-collapse-fetch__tab--closable .interactive-icon[data-icons],
.login-box__link--closable .interactive-icon[data-icons] {
  padding-right: 2rem;
}
.tabBar__tab--closable .interactive-icon[data-icons] + .interactive-icon--only,
.tabbarCollapse__tab--closable .interactive-icon[data-icons] + .interactive-icon--only,
.tabbar-collapse-fetch__tab--closable .interactive-icon[data-icons] + .interactive-icon--only,
.login-box__link--closable .interactive-icon[data-icons] + .interactive-icon--only {
  margin-right: 0.12rem;
}
.tabBar__tab--closable .interactive-icon,
.tabbarCollapse__tab--closable .interactive-icon,
.tabbar-collapse-fetch__tab--closable .interactive-icon,
.login-box__link--closable .interactive-icon {
  background-color: transparent;
  border-radius: 0;
}
.tabBar__tab--closable .interactive-icon:hover,
.tabbarCollapse__tab--closable .interactive-icon:hover,
.tabbar-collapse-fetch__tab--closable .interactive-icon:hover,
.login-box__link--closable .interactive-icon:hover {
  background-color: var(--color-triple230);
}
.tabBar__tab--closable .interactive-icon--only,
.tabbarCollapse__tab--closable .interactive-icon--only,
.tabbar-collapse-fetch__tab--closable .interactive-icon--only,
.login-box__link--closable .interactive-icon--only {
  padding: 0.37rem;
  margin-left: -2rem;
}
.tabBar----active,
.tabbarCollapse----active,
.tabbar-collapse-fetch----active {
  background-color: var(--color-bodyBackground);
}
.tabBar----active .interactive,
.tabbarCollapse----active .interactive,
.tabbar-collapse-fetch----active .interactive {
  color: var(--color-active-dark);
}
.tabBar----active .interactive:hover,
.tabbarCollapse----active .interactive:hover,
.tabbar-collapse-fetch----active .interactive:hover,
.tabBar----active .interactive:focus,
.tabbarCollapse----active .interactive:focus,
.tabbar-collapse-fetch----active .interactive:focus {
  text-decoration: none;
}
.tabBar----active .interactive-icon[data-icons],
.tabbarCollapse----active .interactive-icon[data-icons],
.tabbar-collapse-fetch----active .interactive-icon[data-icons] {
  color: var(--color-active-dark);
}
.tabBar----active .interactive-icon[data-icons]:hover,
.tabbarCollapse----active .interactive-icon[data-icons]:hover,
.tabbar-collapse-fetch----active .interactive-icon[data-icons]:hover,
.tabBar----active .interactive-icon[data-icons]:focus,
.tabbarCollapse----active .interactive-icon[data-icons]:focus,
.tabbar-collapse-fetch----active .interactive-icon[data-icons]:focus {
  text-decoration: none;
}
.tabBar__content,
.tabbarCollapse__content,
.tabbar-collapse-fetch__content {
  padding-top: 0.25rem;
  display: none;
}
.tabBar__content .thumbnail,
.tabbarCollapse__content .thumbnail,
.tabbar-collapse-fetch__content .thumbnail {
  margin-left: 0;
}
/*
TabBar-Collapse

Diese Komponente ist sowohl eine TabBar als auch ein Accordion.
Einzige Besonderheit ist das dass aktive Element wieder geschlossen werden kann per Benutzereingabe.
Die für die TabBar notwendige Funktionalität ist per JavaScript umgesetzt. Das beeinhaltet auch das Klonen der
interaktiven Elemente.

Die Ausprägungen kommen wie folgt vor:

- __Mobil:__ Accordion
- __Desktop:__ TabBar

markup: demo.tabbar-collapse.html

Styleguide ###interaktiveElemente.tabBar.collapse###
*/
.tabbarCollapse__tabs,
.tabbar-collapse-fetch__tabs {
  display: none;
}
.tabbarCollapse__item:last-child,
.tabbar-collapse-fetch__item:last-child {
  margin-bottom: 0;
}
.tabbarCollapse__head,
.tabbar-collapse-fetch__head,
.tabbarCollapse__content,
.tabbar-collapse-fetch__content {
  border: 1px solid var(--color-triple221);
}
.tabbarCollapse__head,
.tabbar-collapse-fetch__head {
  cursor: default;
}
.tabbarCollapse__head:hover,
.tabbar-collapse-fetch__head:hover {
  text-decoration: none;
}
.tabbarCollapse__head .interactive,
.tabbar-collapse-fetch__head .interactive {
  text-align: left;
  border-radius: 0;
  padding: 0.25rem 0.5rem;
}
.tabbarCollapse__head .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover,
.tabbar-collapse-fetch__head .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):hover {
  background-color: var(--color-triple230);
  text-decoration: underline;
}
.tabbarCollapse__head .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus,
.tabbar-collapse-fetch__head .interactive:not(.interactive--baseDisabled):not(.interactive-icon--baseDisabled):focus {
  text-decoration: underline;
}
.tabbarCollapse----active,
.tabbar-collapse-fetch----active {
  border-bottom: 0.25rem solid var(--color-active);
}
.tabbarCollapse__content,
.tabbar-collapse-fetch__content {
  padding: 0.5rem;
}
/*
Tad

Tad Element (title and description) besteht aus einer Überschrift, die immer semibold ist,
und Beschreibung, die kleinere Schriftgröße hat, und ist immer unten platziert

Die Beschreibung ist optional.


markup: demo.tad.html

Styleguide ###basics.tad###
*/
.tad {
  font-size: 0.75rem;
  display: block;
}
.tad__title {
  font-size: 0.87rem;
  margin-bottom: 0;
  display: block;
}
/*
Tile-Deluxe

| Abhängigkeiten |
| ------ |
| interactive |
| icon |
| tile |

Tile-Deluxe ist eine Spezialisierung des Blocks Tile. Es erbt das grundsätzliche Markup und die Styles. Es gibt 2
Varianten: Standard und Primary. Beide Varianten enthalten einen zusätzlichen Footer inkl. einem runden Icon, welches
die jeweilige Aktion verdeutlichen soll.

Tile-Deluxe kann wie Tile in einem Tiles Wrapper zusammen mit anderen Tiles oder Tile-Deluxes serialisiert werden.

### Tile-Deluxe als Button
Dies kann genauso umgesetzt werden wie beim Tile.

markup: demo.tile-deluxe.html

disabled - nicht verlinkte Tile

Styleguide ###interaktiveElemente.tileDeluxe###
 */
/*
Tile

| Abhängigkeiten |
| ------ |
| interactive |
| icon |

Ein Tile ist eine Kachel und besteht aus einem Head und einem Body wobei der Body optional ist.

Dieses Tile ist die Basis für Tile-Deluxe und kann zusammen mit Tiles-Wrapper in einer dynamisch angepassten
Reihe dargestellt werden. Der Inhalt im Head kann beliebig sein mit Ausnahmen von Links. Rechts neben dem Head
Inhalt wird ein Pfeil dargestellt. Die gesamte Kachel wird als Link gerendert und muss somit ein href besitzen.

> Damit Tiles mobile untereinander dargestellt werden, müssen sie in einem Tiles-Wrapper gerendert werden.

### Kachel als Button
Es ist möglich, dass eine Kachel die Funktionalität eines Buttons übernimmt. Hierfür muss als erstes Kindelement ein
div-Tag mit der Klasse .tile__hiddenButton eingefügt werden. In diesem div-Tag kann optional ein eigenes form-Tag genutzt werden.
Der Button benötigt den data-selector="interactive.tile.hiddenSubmit". Das Markup der Kachel als a-Tag bleibt erhalten und
wird via JavaScript unterbunden (der href der Kachel sollte auf "#" stehen).


### Interaktives Verhalten
* verlinkt ist immer die komplette Kachel
* innerhalb der Kachel kann es keine einzelnen Links geben

### Responsives Verhalten
* Mobile: Tiles haben eine flexible Höhe
* Desktop: innerhalb einer Zeile, haben die Tiles die Höhe der höchsten Kachel

fullWidth - Tile erstreckt sich über die ganze Breite des tileWrappers
disabled - nicht verlinkte Tile

markup: demo.tile.html

Styleguide ###interaktiveElemente.tile###
*/
.tile,
.tile-deluxe {
  background-color: var(--color-infoBackground);
  flex-grow: 1;
  flex-basis: 18.75rem;
  margin-left: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
}
.tile h1,
.tile-deluxe h1,
.tile h2,
.tile-deluxe h2,
.tile h3,
.tile-deluxe h3,
.tile h4,
.tile-deluxe h4,
.tile h5,
.tile-deluxe h5 {
  margin: 0;
}
.tile .icon,
.tile-deluxe .icon {
  cursor: pointer;
}
.tile .interactive,
.tile-deluxe .interactive {
  border: 1px solid var(--color-interaction);
  border-radius: 1px;
  display: flex;
  flex-direction: column;
}
.tile .interactive:hover,
.tile-deluxe .interactive:hover,
.tile .interactive:focus,
.tile-deluxe .interactive:focus {
  text-decoration: none;
}
.tile .interactive:hover .tile__footer,
.tile-deluxe .interactive:hover .tile-deluxe__footer,
.tile .interactive:focus .tile__footer,
.tile-deluxe .interactive:focus .tile-deluxe__footer,
.tile .interactive:hover .tile__head,
.tile-deluxe .interactive:hover .tile-deluxe__head,
.tile .interactive:focus .tile__head,
.tile-deluxe .interactive:focus .tile-deluxe__head,
.tile .interactive:hover .tile__footer span,
.tile-deluxe .interactive:hover .tile-deluxe__footer span,
.tile .interactive:focus .tile__footer span,
.tile-deluxe .interactive:focus .tile-deluxe__footer span,
.tile .interactive:hover .tile__head span,
.tile-deluxe .interactive:hover .tile-deluxe__head span,
.tile .interactive:focus .tile__head span,
.tile-deluxe .interactive:focus .tile-deluxe__head span,
.tile .interactive:hover .tile__footer abbr,
.tile-deluxe .interactive:hover .tile-deluxe__footer abbr,
.tile .interactive:focus .tile__footer abbr,
.tile-deluxe .interactive:focus .tile-deluxe__footer abbr,
.tile .interactive:hover .tile__head abbr,
.tile-deluxe .interactive:hover .tile-deluxe__head abbr,
.tile .interactive:focus .tile__head abbr,
.tile-deluxe .interactive:focus .tile-deluxe__head abbr,
.tile .interactive:hover .tile__footer div,
.tile-deluxe .interactive:hover .tile-deluxe__footer div,
.tile .interactive:focus .tile__footer div,
.tile-deluxe .interactive:focus .tile-deluxe__footer div,
.tile .interactive:hover .tile__head div,
.tile-deluxe .interactive:hover .tile-deluxe__head div,
.tile .interactive:focus .tile__head div,
.tile-deluxe .interactive:focus .tile-deluxe__head div {
  text-decoration: underline;
}
.tile .interactive:focus,
.tile-deluxe .interactive:focus {
  border-style: dotted;
  outline: 1px dotted var(--color-interaction);
}
.tile .interactive[href^="http://"]::after,
.tile-deluxe .interactive[href^="http://"]::after,
.tile .interactive[href^="https://"]::after,
.tile-deluxe .interactive[href^="https://"]::after {
  display: none;
}
.tile .interactive[href^="http://"] h2 > span:first-child,
.tile-deluxe .interactive[href^="http://"] h2 > span:first-child,
.tile .interactive[href^="https://"] h2 > span:first-child,
.tile-deluxe .interactive[href^="https://"] h2 > span:first-child {
  position: relative;
  width: 100%;
  padding-right: 3rem;
}
.tile .interactive[href^="http://"] h2 > span:first-child::after,
.tile-deluxe .interactive[href^="http://"] h2 > span:first-child::after,
.tile .interactive[href^="https://"] h2 > span:first-child::after,
.tile-deluxe .interactive[href^="https://"] h2 > span:first-child::after {
  content: var(--url-linkExtern);
  position: absolute;
  top: 0;
  right: 0.5rem;
}
.edge.edgehtml .tile .interactive[href^="http://"],
.edge.edgehtml .tile-deluxe .interactive[href^="http://"],
.edge.edgehtml .tile .interactive[href^="https://"],
.edge.edgehtml .tile-deluxe .interactive[href^="https://"] {
  width: 100%;
}
.tile a[href^="http://"]::after,
.tile-deluxe a[href^="http://"]::after,
.tile a[href^="https://"]::after,
.tile-deluxe a[href^="https://"]::after {
  display: none;
}
.tile a[href^="http://"] h2 > span:first-child,
.tile-deluxe a[href^="http://"] h2 > span:first-child,
.tile a[href^="https://"] h2 > span:first-child,
.tile-deluxe a[href^="https://"] h2 > span:first-child {
  position: relative;
  width: 100%;
  padding-right: 3rem;
}
.tile a[href^="http://"] h2 > span:first-child::after,
.tile-deluxe a[href^="http://"] h2 > span:first-child::after,
.tile a[href^="https://"] h2 > span:first-child::after,
.tile-deluxe a[href^="https://"] h2 > span:first-child::after {
  content: var(--url-linkExtern);
  position: absolute;
  top: 0;
  right: 0.5rem;
}
.edge.edgehtml .tile a[href^="http://"],
.edge.edgehtml .tile-deluxe a[href^="http://"],
.edge.edgehtml .tile a[href^="https://"],
.edge.edgehtml .tile-deluxe a[href^="https://"] {
  width: 100%;
}
.tile__hiddenButton,
.tile-deluxe__hiddenButton {
  display: none;
}
.tile__head,
.tile-deluxe__head {
  font-weight: bold;
  padding: 1rem;
}
.tile__head h1,
.tile-deluxe__head h1,
.tile__head h2,
.tile-deluxe__head h2,
.tile__head h3,
.tile-deluxe__head h3 {
  display: flex;
  align-items: center;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .tile__head h1,
  .tile-deluxe__head h1,
  .tile__head h2,
  .tile-deluxe__head h2,
  .tile__head h3,
  .tile-deluxe__head h3 {
    word-break: break-word;
  }
}
.android.chrome .tile__head h1,
.android.chrome .tile-deluxe__head h1,
.android.chrome .tile__head h2,
.android.chrome .tile-deluxe__head h2,
.android.chrome .tile__head h3,
.android.chrome .tile-deluxe__head h3 {
  word-break: break-word;
}
.tile__head h1 .icon,
.tile-deluxe__head h1 .icon,
.tile__head h2 .icon,
.tile-deluxe__head h2 .icon,
.tile__head h3 .icon,
.tile-deluxe__head h3 .icon {
  flex-shrink: 0;
  margin: 0 0.62rem;
  vertical-align: middle;
}
.tile__head h1 > span,
.tile-deluxe__head h1 > span,
.tile__head h2 > span,
.tile-deluxe__head h2 > span,
.tile__head h3 > span,
.tile-deluxe__head h3 > span,
.tile__head h1 abbr,
.tile-deluxe__head h1 abbr,
.tile__head h2 abbr,
.tile-deluxe__head h2 abbr,
.tile__head h3 abbr,
.tile-deluxe__head h3 abbr {
  display: inline-block;
  vertical-align: baseline;
}
.tile__head h1 > span:not(.icon) .icon:first-child,
.tile-deluxe__head h1 > span:not(.icon) .icon:first-child,
.tile__head h2 > span:not(.icon) .icon:first-child,
.tile-deluxe__head h2 > span:not(.icon) .icon:first-child,
.tile__head h3 > span:not(.icon) .icon:first-child,
.tile-deluxe__head h3 > span:not(.icon) .icon:first-child {
  margin-left: 0;
}
.tile__head h1 > span:not(.icon) .icon:last-child,
.tile-deluxe__head h1 > span:not(.icon) .icon:last-child,
.tile__head h2 > span:not(.icon) .icon:last-child,
.tile-deluxe__head h2 > span:not(.icon) .icon:last-child,
.tile__head h3 > span:not(.icon) .icon:last-child,
.tile-deluxe__head h3 > span:not(.icon) .icon:last-child {
  margin-left: 0.62rem;
}
.tile__body,
.tile-deluxe__body {
  padding: 0 1rem 1rem;
  flex-grow: 1;
  flex-basis: auto;
  font-size: 0.87rem;
}
.tile__body p,
.tile-deluxe__body p {
  margin-bottom: 0.5rem;
}
.tile__bodyDataWrapper,
.tile-deluxe__bodyDataWrapper {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}
.tile__bodyDataRow,
.tile-deluxe__bodyDataRow {
  display: table-row;
}
.tile__bodyData,
.tile-deluxe__bodyData {
  display: table-cell;
  vertical-align: baseline;
  padding-bottom: 0.5rem;
}
.tile__bodyData--number,
.tile-deluxe__bodyData--number {
  font-size: 1.5rem;
  text-align: right;
  min-width: 2.5rem;
  padding-right: 0.5rem;
}
.tile--fullWidth,
.tile-deluxe--fullWidth {
  flex-basis: auto;
}
.tile--disabled .interactive,
.tile-deluxe--disabled .interactive {
  background: var(--color-triple248);
  border: 1px solid var(--color-triple221);
  color: var(--color-triple114);
}
.tile--disabled .interactive:hover .tile__footer,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__footer,
.tile--disabled .interactive:focus .tile__footer,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__footer,
.tile--disabled .interactive:hover .tile__head,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__head,
.tile--disabled .interactive:focus .tile__head,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__head,
.tile--disabled .interactive:hover .tile__footer span,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__footer span,
.tile--disabled .interactive:focus .tile__footer span,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__footer span,
.tile--disabled .interactive:hover .tile__head span,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__head span,
.tile--disabled .interactive:focus .tile__head span,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__head span,
.tile--disabled .interactive:hover .tile__footer abbr,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__footer abbr,
.tile--disabled .interactive:focus .tile__footer abbr,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__footer abbr,
.tile--disabled .interactive:hover .tile__head abbr,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__head abbr,
.tile--disabled .interactive:focus .tile__head abbr,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__head abbr,
.tile--disabled .interactive:hover .tile__footer div,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__footer div,
.tile--disabled .interactive:focus .tile__footer div,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__footer div,
.tile--disabled .interactive:hover .tile__head div,
.tile-deluxe--disabled .interactive:hover .tile-deluxe__head div,
.tile--disabled .interactive:focus .tile__head div,
.tile-deluxe--disabled .interactive:focus .tile-deluxe__head div {
  text-decoration: none;
}
.tile--disabled .interactive.interactive--invertDisabled,
.tile-deluxe--disabled .interactive.interactive--invertDisabled {
  text-align: left;
}
.tile--disabled .interactive.interactive--plainDisabled,
.tile-deluxe--disabled .interactive.interactive--plainDisabled {
  color: var(--color-triple114);
}
.tile--disabled .messageBox,
.tile-deluxe--disabled .messageBox {
  margin-bottom: 0;
}
.tile--disabled .tile__head h1 > span:not(.icon) .icon:first-child,
.tile-deluxe--disabled .tile-deluxe__head h1 > span:not(.icon) .icon:first-child,
.tile--disabled .tile__head h2 > span:not(.icon) .icon:first-child,
.tile-deluxe--disabled .tile-deluxe__head h2 > span:not(.icon) .icon:first-child,
.tile--disabled .tile__head h3 > span:not(.icon) .icon:first-child,
.tile-deluxe--disabled .tile-deluxe__head h3 > span:not(.icon) .icon:first-child {
  margin-left: 0;
}
.tile-deluxe {
  --color-background--primary: var(--color-interaction);
}
.dark .tile-deluxe {
  --color-background--primary: #006d97;
}
.tile-deluxe .interactive[href^="http://"]::after,
.tile-deluxe .interactive[href^="https://"]::after {
  display: none;
}
.tile-deluxe .interactive[href^="http://"] h2 > span:first-child,
.tile-deluxe .interactive[href^="https://"] h2 > span:first-child {
  position: relative;
  width: 100%;
  padding-right: 3.62rem;
}
.tile-deluxe .interactive[href^="http://"] h2 > span:first-child::after,
.tile-deluxe .interactive[href^="https://"] h2 > span:first-child::after {
  content: var(--url-linkExtern);
  position: absolute;
  top: 0;
  right: 1.25rem;
}
.edge.edgehtml .tile-deluxe .interactive[href^="http://"],
.edge.edgehtml .tile-deluxe .interactive[href^="https://"] {
  width: 100%;
}
.tile-deluxe--primary {
  background-color: var(--color-background--primary);
}
.tile-deluxe--primary .interactive {
  color: var(--color-text-light);
}
.tile-deluxe--primary .interactive[href^="http://"]::after,
.tile-deluxe--primary .interactive[href^="https://"]::after {
  display: none;
}
.tile-deluxe--primary .interactive[href^="http://"] h2 > span:first-child,
.tile-deluxe--primary .interactive[href^="https://"] h2 > span:first-child {
  position: relative;
  width: 100%;
  padding-right: 3.62rem;
}
.tile-deluxe--primary .interactive[href^="http://"] h2 > span:first-child::after,
.tile-deluxe--primary .interactive[href^="https://"] h2 > span:first-child::after {
  content: var(--url-linkExternWhite);
  position: absolute;
  top: 0;
  right: 1.25rem;
}
.edge.edgehtml .tile-deluxe--primary .interactive[href^="http://"],
.edge.edgehtml .tile-deluxe--primary .interactive[href^="https://"] {
  width: 100%;
}
.tile-deluxe--primary .interactive:focus {
  border-color: var(--color-text-light);
}
.tile-deluxe--primary .tile-deluxe__footer {
  border-top: none;
  background-color: var(--color-interaction-light);
}
.tile-deluxe--primary .tile-deluxe__icon {
  background-color: var(--color-bodyBackground);
}
.tile-deluxe__body {
  padding-bottom: 1.25rem;
}
.tile-deluxe__footer {
  border-top: 1px solid var(--color-triple221);
  padding: 1rem;
  display: flex;
  align-items: center;
  background-color: var(--color-bodyBackground);
  position: relative;
  height: 3.68rem;
  margin-bottom: 0.06rem;
}
.tile-deluxe__icon {
  position: absolute;
  top: 0;
  right: 1.25rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--color-interaction-light);
  display: inline-block;
  padding: 10px 10px 5px;
}
.tile-deluxe__icon .icon {
  cursor: pointer;
}
.tile-deluxe--disabled .interactive {
  padding: 0;
}
.tile-deluxe--disabled .interactive--disabled {
  background: var(--color-triple248);
  border: 1px solid var(--color-triple221);
  color: var(--color-triple114);
}
.tile-deluxe--disabled .tile-deluxe__footer {
  color: var(--color-triple178);
  background: none;
  border: 0;
}
.tile-deluxe--disabled .tile-deluxe__icon {
  background: none;
}
.tile-deluxe--disabled .messageBox {
  margin-bottom: 0;
}
/*
Tiles-Wrapper

| Abhängigkeiten (optional, da wrapper)|
| ------ |
| interactive (optional)|
| icon (optional)|
| tile (optional)|
| tile-deluxe (optional)|

Wird zur Gruppierung von diversen Tiles via Flex Container genutzt. Tiles innerhalb eines Tile-Wrapper verhalten sich
responsive und stellen sich untereinander dar, falls die Breite nicht mehr ausreicht um die Basisbreite eines Tiles
darzustellen.

markup: demo.tiles-wrapper.html

Styleguide ###interaktiveElemente.tilesWrapper###
*/
.tiles-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-left: -0.63rem;
}
/*
Timeline

Eine Timeline besteht aus einer Überschrift und einzelnen Schritten.
Wenn keiner der Schritte angefangen wurde, kann eine Timeline den Zustand "underway" besitzen, sodass diese nur mit halber Deckkraft dargestellt wird.
Die Schritte einer Timeline besitzen zwei Varianten:

#### Progress
Ein Progress besteht aus zusammenhängenden Schritten. Jeder dieser Schritte kann einen der folgenden Zustände besitzen:
- "2" abgeschlossener Schritt
- "1" aktueller Schritt
- "0" nicht abgearbeiteter Schritt

#### Defintion List
Eine Definition List stellt Schritte dar, die vom Nutzer selbst nicht abgearbeitet werden können, wie z.B. Versand einer Aktivierungs-ID per Mail.
Diese Schritte werden mit einem Icon bildlich unterstützt.

markup: demo.timeline.html

Styleguide ###basics.timeline###
*/
.timeline {
  background: var(--color-infoBackground);
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  z-index: 210;
}
.timeline--reducedLayer {
  z-index: 1;
}
.timeline__wrapper {
  min-width: 0;
  background: var(--color-infoBackground);
  box-shadow: none;
  flex: 1;
  cursor: pointer;
}
.timeline__triggerstate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-infoBackground);
  cursor: auto;
}
.timeline__triggerstate .timeline__toggle {
  padding: 0.62rem;
}
.timeline__title {
  display: none;
  text-transform: uppercase;
  padding-left: 8.25px;
}
.timeline__heading {
  font-size: 0;
  margin: 0;
  display: block;
  padding-left: 2.87rem;
  margin-bottom: 0.87rem;
  position: relative;
}
.timeline__heading::before {
  position: absolute;
  display: inline-block;
  content: " ";
  background: var(--color-triple221);
  width: 4px;
  left: 14px;
  height: calc(100% + 0.87rem);
}
.timeline__heading {
  min-height: 1.5rem;
}
.timeline__text {
  min-height: 1.25rem;
}
.timeline__groups {
  padding: 1rem 1rem 2rem 0.25rem;
  margin: 0;
}
.timeline__group {
  margin-bottom: 2.37rem;
  color: var(--color-triple114);
  list-style: none;
  padding: 0;
}
.timeline__group--underway {
  color: var(--color-triple51);
}
.timeline__group:first-child .timeline__heading::before {
  display: none;
}
.timeline__group:last-child {
  margin-bottom: 0;
}
.timeline__group:last-child .timeline__list::before {
  height: 100%;
}
.timeline__group:last-child .timeline__item:last-child::before {
  top: auto;
  bottom: 0;
}
.timeline__item:not(:last-child) {
  margin: 0 0 1.12rem;
}
.timeline__item {
  color: var(--color-triple114);
  margin: 0;
  font-size: 0;
}
.timeline__item--active {
  color: var(--color-active-dark);
}
.timeline__item--done {
  color: var(--color-triple51);
}
.timeline__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline__list::before {
  position: absolute;
  display: inline-block;
  content: " ";
  background: var(--color-triple221);
  width: 4px;
  left: 14px;
  height: calc(100% + 2.37rem + 1px);
}
.timeline__list--progress .timeline__item {
  position: relative;
  padding-left: 2.87rem;
}
.timeline__list--progress .timeline__item::before {
  position: absolute;
  display: inline-block;
  content: " ";
  left: 8px;
  top: 0;
  border-radius: 50%;
  background: var(--color-bodyBackground);
  width: 8px;
  height: 8px;
  border: 4px solid var(--color-triple178);
}
.timeline__list--progress .timeline__item--active::before {
  width: 24px;
  height: 24px;
  box-shadow: 0 0 0 4px var(--color-bodyBackground) inset;
  background: var(--color-active-dark);
  border: 4px solid var(--color-active);
  left: 0;
  top: -5px;
}
.timeline__list--progress .timeline__item--done::before {
  background: var(--color-triple93);
  border-color: var(--color-triple93);
}
.timeline__list--only-child::before {
  height: 0;
}
.timeline__list--dl .timeline__item {
  display: flex;
  align-items: center;
  margin-bottom: 0.31rem;
}
.timeline__list--dl .icon {
  flex: 0 0 auto;
  cursor: pointer;
  display: flex;
}
.timeline__list--dl .icon + .timeline__text {
  flex: 1 1 0px;
  padding-left: 0.87rem;
  display: none;
}
.timeline--opened .timeline__wrapper {
  min-width: 17.5rem;
  box-shadow: 2px 1px 2px 0 var(--color-shadow);
}
.timeline--opened .timeline__item {
  font-size: 0.87rem;
}
.timeline--opened .timeline__title {
  display: block;
}
.timeline--opened .timeline__groups {
  cursor: auto;
}
.timeline--opened .timeline__heading {
  font-size: 1.12rem;
}
.timeline--opened .timeline__list--dl .icon {
  cursor: auto;
}
.timeline--opened .timeline__list--dl .timeline__text {
  display: inline;
}
.edge.edgehtml .timeline__triggerstate {
  cursor: default;
}
.edge.edgehtml .timeline--opened .timeline__groups {
  cursor: default;
}
.safari .timeline {
  flex-basis: 0px;
  flex-grow: 1;
  height: auto;
}
/*
ToggleBoxHideList

Die ToggleBoxHideList ist eine vereinfachte Form der ToggleBox. Sie besteht ebenfalls aus einem Kopf- und einem
Inhaltsbereich. Der Kopfbereich ist klickbar und öffnet bzw. schließt den Inhaltsbereich.

Mit Hilfe dieser Komponente soll es möglich sein, eine Liste von Einträgen z.B. innerhalb einer Tabellenzeile anzuzeigen.
Nur wenn die Anzahl der Listeneinträge einen bestimmten Wert "toggleThreshold" (default: 4) übersteigt, soll die
Liste eingeklappt und der Kopfbereich angezeigt werden.


markup: demo.toggleBox-hide-list.html

Styleguide ###interaktiveElemente.toggleBoxHideList###
*/
.toggleBox-hide-list__head {
  font-size: 0.87rem;
  cursor: pointer;
  color: var(--color-interaction);
  display: none;
}
.toggleBox-hide-list__head:focus {
  outline: 1px dotted var(--color-interaction);
}
.toggleBox-hide-list__head:focus,
.toggleBox-hide-list__head:hover {
  text-decoration: underline;
}
.toggleBox-hide-list__head .icon {
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.18rem;
}
.toggleBox-hide-list .toggleBox-hide-list__content {
  display: none;
}
.toggleBox-hide-list--active .toggleBox-hide-list__head {
  display: flex;
}
.toggleBox-hide-list--active .toggleBox-hide-list__content {
  display: block;
}
.toggleBox-hide-list--idle .toggleBox-hide-list__content {
  display: block;
}
.toggleBox-hide-list--closed .toggleBox-hide-list__content {
  display: none;
}
/*
ToggleList

In dieser Komponente wird ein aufklappbarer Baum (verschachtelte Liste) angezeigt, wobei jedes Listenelement optional
mit einem Radio-Button erweitert werden kann. Es ist nicht kombinierbar mit anderern FormItem-Komponenten.

markup: demo.toggleList.html

Styleguide ###interaktiveElemente.toggleList###
*/
.toggleList__title {
  border-bottom: 0.25rem solid var(--color-app);
  font-size: 1.25rem;
  margin-bottom: 0.62rem;
}
.toggleList__title .icon {
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.toggleList__header {
  position: relative;
  margin: 2px 0;
}
.toggleList__control {
  background: var(--color-triple242);
  position: absolute;
  width: 2.25rem;
  min-height: 2.25rem;
  left: -2.38rem;
  height: 100%;
  display: flex;
}
.toggleList__label {
  cursor: pointer;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}
.toggleList__label:hover {
  background: var(--color-triple221);
}
.toggleList > .toggleList__list > .toggleList__item {
  position: relative;
  padding-left: 2.25rem;
}
.toggleList__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.toggleList__list .icon {
  flex-shrink: 0;
  margin-left: -1rem;
}
.toggleList__text {
  font-size: 0.87rem;
}
.toggleList__item {
  margin: 0;
}
.toggleList__item--list > .toggleList__list {
  display: none;
}
.toggleList__item--list > .toggleList__header:hover {
  text-decoration: underline;
  cursor: pointer;
}
.toggleList--\@open > .toggleList__list {
  display: block;
}
.toggleList--\@open > .toggleList__header .icon {
  transform: rotate(90deg);
}
.toggleList__textWrapper {
  min-height: 2.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  background: var(--color-triple242);
  display: flex;
}
.toggleList__textWrapper:focus {
  outline: 1px dotted var(--color-app-dark);
}
.toggleList__input {
  cursor: pointer;
  position: relative;
}
.toggleList__input:focus + .toggleList__outline {
  outline: 1px dotted var(--color-interaction);
}
.toggleList__outline {
  position: absolute;
  width: 100%;
  height: 100%;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
}
[data-transform-toggle-list] {
  display: none;
}
/*
Transformable

Diese Komponente ist eine abstrakte Komponente und benötigt einen Squad zu Instanziierung. Die Instanzen können ihren
Inhalt durch CSS-Transformation manipulieren, z. B. Skalieren und Verschieben.

Durch das Hinzufügen des Attributs `data-enabled` wird der Aktivierungsschritt übersprungen und das Element lässt sich
sofort transformieren.

markup: demo.transformable.html

Styleguide ###interaktiveElemente.transformable###
*/
.transformable {
  text-align: center;
  pointer-events: none;
  display: block;
}
.transformable__content {
  display: inline-block;
  margin: auto;
  text-align: left;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
}
.transformable__content--movable {
  cursor: grab;
}
.transformable__content--moving {
  cursor: grabbing;
}
.transformable__content > * {
  pointer-events: none;
}
.transformable__controls {
  pointer-events: auto;
  padding: 1rem;
}
.mobile .transformable__controls {
  display: none;
}
/*
Video Player

Der Video Player ist ein benutzerdefinierter Aufsatz für den standardmäßigen HTML5-Player. Bei diesem Player werden
eigene Icons verwendet, wodurch CSP-Verletzungen vermieden werden können.

Die Komponente wird Client-seitig erzeugt und ist somit nur bei aktiviertem JavaScript verfügbar.

Der Player hat derzeitig folgende Funktionen:
 - Abspielen/Pausieren
 - Vollbildmodus an/aus
 - Lautstärkeregelung und Stummschalten
 - Zu einer beliebigen Stelle des Videos springen
 - Timer
 - Anzeige eines Video-Titels
 - Ladeanimation
 - Ausblenden der Bedienelemente wenn Nutzer während des Abspielens nicht interagiert
 - Tastaturbedienung
 - Fokus-Trap im Vollbildmodus

Bekannte Einschränkungen:
 - (iOS) Safari: Videos werden standardmäßig im nativen Vollbildmodus abgespielt
   -> Native UI kann nicht angepasst oder ausgeblendet werden
   -> Für iOS < 11 wird die Komponente nicht initialisiert, da die UI keine CSP-Probleme zu haben scheint und sonst
      zu viele Änderungen bei zu wenig Verwendern notwendig wären
   -> Für iOS >= 11 wird die Komponente zwar initialisiert, aber der native Vollbildmodus beibehalten
   -> Da Play automatisch den Vollbildmodus aktiviert, wird der Fullscreen-Button ausgeblendet
 - Safari: Scheinbar wird (außer einmal zu Beginn) kein "waiting"-Event gefeuert, wenn das Video für das weitere
   Abspielen erst buffern muss. Folglich lässt sich in dem Fall keine Ladeanimation anzeigen.

markup: demo.videoPlayer.html

Styleguide ###interaktiveElemente.videoPlayer###
*/
.videoPlayer {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.videoPlayer video {
  visibility: hidden;
  max-width: 100%;
}
.videoPlayer .videoPlayer__video {
  visibility: visible;
}
.videoPlayer__video {
  max-width: 100%;
  min-width: 16rem;
}
.videoPlayer__videoWrapper {
  display: inline-block;
  background: var(--color-bodyBackground);
  border: solid 1px #e6e6e6;
  position: relative;
  font-size: 0;
  max-width: 100%;
}
.videoPlayer__videoCaption {
  width: 100%;
  font-size: 1rem;
  color: #fff;
  background-color: rgba(63,63,63,0.9);
  position: absolute;
  top: 0;
  padding: 0.25rem 0.5rem;
  opacity: 1;
  transition: opacity 0s linear 0s;
}
.videoPlayer__controls {
  display: flex;
  background: #3f3f3f;
  padding: 0.25rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  box-shadow: 0 -2px 2px rgba(63,63,63,0.5);
  opacity: 1;
  transition: opacity 0s linear 0s;
}
.videoPlayer__controls .interactive-icon {
  padding: 0.25rem;
}
.videoPlayer__controls .interactive-icon:focus {
  outline: none;
  border-color: #fff;
}
.videoPlayer__progress {
  align-self: center;
  flex-grow: 1;
  display: flex;
  margin: 0 0.25rem;
}
.videoPlayer__progressBar {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 0.25rem;
  background: #e6e6e6;
  color: var(--color-interaction-light);
  cursor: pointer;
  height: 0.5rem;
  flex-grow: 1;
  align-self: center;
  width: auto;
  overflow: hidden;
}
.videoPlayer__progressBar::-webkit-progress-bar {
  background: #e6e6e6;
  border-radius: 0.25rem;
}
.videoPlayer__progressBar::-webkit-progress-value {
  background: var(--color-interaction-light);
  border-radius: 0.25rem;
}
.videoPlayer__progressBar::-moz-progress-bar {
  background: var(--color-interaction-light);
  outline: solid 1px #3f3f3f;
}
.videoPlayer__time {
  display: inline-block;
  color: #fff;
  margin-left: 0.25rem;
  align-self: center;
  font-size: 0.62rem;
}
.videoPlayer__timeSeparator,
.videoPlayer__timeDuration {
  opacity: 0.75;
}
.videoPlayer__volume {
  display: flex;
  margin: 0 0.25rem;
}
.videoPlayer__volumeSlider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  align-self: center;
  background: transparent;
  width: 6.25rem;
  display: none;
  padding: 0;
}
.videoPlayer__volumeSlider:focus {
  border: 1px dotted #fff;
  outline: none;
}
.videoPlayer__volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 0.75rem;
  width: 0.75rem;
  border: none;
  border-radius: 0.37rem;
  background: #fff;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000, 0 0 1px #000;
  margin-top: -0.25rem;
}
.videoPlayer__volumeSlider::-moz-range-thumb {
  height: 0.75rem;
  width: 0.75rem;
  border: none;
  border-radius: 0.37rem;
  background: #fff;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000, 0 0 1px #000;
  border: solid 1px #080808;
}
.videoPlayer__volumeSlider::-ms-thumb {
  height: 0.75rem;
  width: 0.75rem;
  border: none;
  border-radius: 0.37rem;
  background: #fff;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000, 0 0 1px #000;
}
.videoPlayer__volumeSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  border-radius: 0.12rem;
  cursor: pointer;
  background: #080808;
}
.videoPlayer__volumeSlider::-moz-range-track {
  width: 100%;
  height: 0.25rem;
  border-radius: 0.12rem;
  cursor: pointer;
  background: #080808;
  outline: solid 1px #3f3f3f;
}
.videoPlayer__volumeSlider::-moz-range-progress {
  background: #fff;
  height: 0.25rem;
  border-radius: 0.25rem;
  box-sizing: content-box;
  cursor: pointer;
}
.videoPlayer__volumeSlider::-ms-track {
  width: 100%;
  height: 0.25rem;
  border-radius: 0.12rem;
  cursor: pointer;
  background: #080808;
  background: transparent;
  border-color: transparent;
  border-width: 0.25rem 0;
  color: transparent;
}
.videoPlayer__volumeSlider::-ms-fill-lower {
  background: #fff;
}
.videoPlayer__volumeSlider::-ms-fill-upper {
  background: #080808;
}
.videoPlayer[data-user-inactive] .videoPlayer__videoWrapper .videoPlayer__videoCaption,
.videoPlayer[data-user-inactive] .videoPlayer__videoWrapper .videoPlayer__controls {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.videoPlayer[data-fullscreen] {
  max-width: 100%;
}
.videoPlayer[data-fullscreen] .videoPlayer__video {
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.videoPlayer[data-fullscreen] .videoPlayer__videoWrapper {
  border: none;
  height: 100%;
  width: 100%;
}
.videoPlayer[data-fullscreen] .videoPlayer__videoCaption {
  font-size: 1.25rem;
  top: -1px;
}
.videoPlayer[data-fullscreen] .videoPlayer__controls {
  bottom: -1px;
}
.videoPlayer[data-fullscreen] .videoPlayer__time {
  font-size: 0.75rem;
}
.videoPlayer[data-fullscreen] .videoPlayer__volumeSlider {
  display: block;
}
.videoPlayer[data-fullscreen] .videoPlayer__overlay {
  padding: 0.75rem;
}
.videoPlayer[data-fullscreen][data-user-inactive] .videoPlayer__videoWrapper {
  cursor: none;
}
.videoPlayer__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3f3f3f;
  opacity: 0.9;
  border-radius: 0.25rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
}
.videoPlayer__overlayPlay,
.videoPlayer__overlayLoad {
  display: none;
  position: relative;
}
.videoPlayer__overlayPlay {
  height: auto;
  width: auto;
  padding: 0.5rem;
  margin: 0;
}
.videoPlayer__overlayPlay:focus {
  outline: none;
  border-color: #fff;
}
.videoPlayer__overlayLoad {
  height: 2.5rem;
  width: 2.5rem;
  margin: 0.5rem;
}
.videoPlayer__overlayLoad div {
  height: 100%;
  width: 100%;
  border: 0.18rem solid transparent;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  animation: animation_rotate 1.8s ease infinite;
}
.videoPlayer__overlayLoad div:nth-child(1) {
  animation-delay: -0.5s;
}
.videoPlayer__overlayLoad div:nth-child(2) {
  animation-delay: -0.4s;
}
.videoPlayer__overlayLoad div:nth-child(3) {
  animation-delay: -0.3s;
}
.videoPlayer__overlayLoad div:nth-child(4) {
  animation-delay: -0.2s;
}
.videoPlayer__overlayLoad div:nth-child(5) {
  animation-delay: -0.1s;
}
.edge.blink .videoPlayer__videoWrapper,
.chrome .videoPlayer__videoWrapper {
  max-width: 99.9%;
  padding-bottom: 1px;
}
.safari .videoPlayer:-webkit-full-screen {
  background-color: #000;
  height: 100%;
  width: 100%;
}
.edge.edgehtml .videoPlayer__volumeSlider::-ms-thumb {
  margin-bottom: -0.25rem;
}
/*
Captcha

Anzeige eines Sicherheitstest-Bildes mit entsprechender Audio-Version mit Aktualisierfunktion und Eingabefeld für den Sicherheitstest.

markup: demo.captcha-form.html

Styleguide ###squads.captchaform###
*/
.captcha-form__row {
  background: var(--color-triple242);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
}
.captcha-form .alignment {
  padding-bottom: 0.5rem;
}
.captcha-form .figure__image {
  background-color: transparent;
}
/*
Context Menu

Ein Kontext- oder Popup-Menü öffnet ein Flyout mit weiteren Auswahlmöglichkeiten, die im aktuellen Zustand der Anwendung
 verfügbar sind. Diese Auswahlmöglichkeiten beziehen sich in der Regel auf das optisch zugehörige Objekt.

Styleguide ###squads.contextMenu###
*/
/*
Context Menu Base

markup: demo/demo.contextMenu.base.html

Styleguide ###squads.contextMenu.base###
*/
.contextMenu {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.contextMenu__trigger,
.contextMenu__container {
  display: block;
}
.contextMenu .interactive {
  text-align: left;
  line-height: 1.4;
}
.contextMenu .interactive-icon {
  line-height: 1.4;
}
.contextMenu__trigger .interactive-icon.interactive-icon--baseDisabled.interactive-icon--baseDisabled.interactive-icon--baseDisabled {
  cursor: pointer;
}
.contextMenu--loading {
  height: 34px;
  width: 34px;
  visibility: hidden;
  overflow: hidden;
}
/*
Context Menu Info

markup: demo/demo.contextMenu.info.html

Styleguide ###squads.contextMenu.info###
*/
/*
Kombinierter-Profil-Auswahl-Dialog


| Abhängigkeiten |
| ------ |
| accordion |
| dialog-profile (Profil-Auswahl-Dialog) |
| dialog-other-profile (Fremdes-Profil-Auswahl-Dialog)|

Der kombinierte-Profil-Auswahl-Dialog besteht aus einem geschlossenen Accordion mit Radio-FormItems als Steuerelemente.

Der Inhalt des ersten Accordion-Items besteht aus dem Squad Profil-Auswahl-Dialog.

Der Inhalt des zweiten Accordion-Items besteht aus dem Squad Fremdes-Profil-Auswahl-Dialog.

markup: demo.dialog-combined-profile.html

Styleguide ###squads.dialogtax.dialogcombinedprofile###
*/
.dialog-combined-profile .formBox {
  margin-bottom: 0;
}
/*
Fremdes-Profil-Auswahl-Dialog

| Abhängigkeiten |
| ------ |
| formItem |
| profile-dialog (Profil-Auswahl-Dialog) |
| modal (wenn "Profil löschen"-Aktion aktiv) |

Falls kein Profil vorhanden: Meldung "Kein Profil vorhanden" wird angezeigt. Die Selectbox besitzt keine weiteren Optionen und es existiert
kein Konfigurationsobjekt.

Falls mindestens ein Profil vorhanden: Dropdown-Liste mit allen Profilen. Die Default-Option lautet "Profil auswählen".
Darunter erscheinen repräsentative Felder für das gewählte Profil (profile-dialog).

Das Interactive "Profil löschen" kann optional angezeigt werden. Bei Klick öffnet sich ein Bestätigungsmodal.
Außerdem kann das Interactive "Mein Profil verwenden" optional ausgeblendet werden.

Das Konfigurationsobjekt muss an einem Element mit der ID __other-profile-dialog.config__ in __data-config__ liegen.

In der Konfiguration kann für jedes Profil die Eigenschaft __deletionIsNotPossibleReason__ festgelegt werden.
Dadurch wird beim Klick auf das Interactive "Profil löschen" ein Hinweismodal eingeblendet. Die Eigenschaft muss der
ID des Modals entsprechen.

Wenn JavaScript deaktiviert ist, wird eine zusätzliche Zeile mit einem Aktualisieren-Button angezeigt.

markup: demo.dialog-other-profile.html

Styleguide ###squads.dialogtax.dialogotherprofile###
*/
.dialog-other-profile__new {
  margin-bottom: 0.5rem;
}
.dialog-other-profile__new .interactive {
  margin-right: 0.5rem;
}
.dialog-other-profile__refreshButton {
  margin-top: 0.5rem;
}
/*
Profil-Auswahl-Dialog

| Abhängigkeiten |
| ------ |
| interactive |
| panel |

Repräsentative Felder aus "Mein Profil" bzw. einem Profil werden als read-only Felder dargestellt.
* Bearbeiten - Führt zur Seite "Mein Profil" - Dort kann der Benutzer seine Angaben ändern und anschließend wird zurück zu dieser Seite weitergeleitet
* Übernehmen - Führt die Datenübernahme aus "Mein Profil" durch

markup: demo.dialog-profile.html

Styleguide ###squads.dialogtax.dialogprofile###
*/
/*
Steuernummerndialog mit Neuaufnahme

| Abhängigkeiten |
| ------ |
| dialog-tax-id (Steuernummerndialog)|
| dialog-tax-office (Finanzamtdialog)|

Steuernummerndialog mit Neuaufnahme bestehend aus geschlossenem Accordion mit Radio-FormItems als Steuerelemente.
Der Accordioninhalt besteht aus Steuernummerndialog und Finanzamtdialog.

markup: demo.dialog-tax-id-with-new-entry.html

Styleguide ###squads.dialogtax.dialogtaxidwithnewentry###
*/
/*
Übersicht aller Dialoge zur Datenübernahme aus einem Profil

Styleguide ###squads.dialogtax###
*/
/*
Steuernummerndialog

| Abhängigkeiten |
| ------ |
| formItem |
| interactive |
| formBox |
| panel |
| labelInput |

Das Trennzeichen für die Steuernummer wird über die Klasse __tax-id\_\_delimiter__ am __formItem\_\_fieldItem__
über JavaScript hinzugefügt.

Das Konfigurationsobjekt muss an einem Element mit der ID __tax-id.config__ in __data-config__ liegen.

Wenn JavaScript deaktiviert ist, wird eine zusätzliche Zeile mit einem Aktualisieren-Button angezeigt.

Optional können ein Titel zur FormBox für den Steuernummerndialog angezeigt oder der Hilfelink zur Steuernummer ausgeblendet werden.

Im BOP existieren Sonderfälle, in denen Bayern als Preset vorgegeben wird. Darin werden ausschließlich die Steuernummern
selbst benötigt. Um das zu erreichen erhält __dialog-tax-id__ die zusätzliche Klasse __dialog-tax-id--preset__.

markup: demo.dialog-tax-id.html

Styleguide ###squads.dialogtax.dialogtaxid###
*/
.dialog-tax-id .flyoutWrapper--absolute {
  padding-bottom: 2px;
}
.dialog-tax-id__taxId {
  display: flex;
  flex-direction: column;
  background: var(--color-formBackground);
  padding: 0.5rem;
  margin-bottom: 3px;
}
.dialog-tax-id__taxId .interactive-icon {
  margin-top: 0.5rem;
  padding: 0.5rem 0;
}
.dialog-tax-id__taxIdLabel,
.dialog-tax-id__taxIdFields {
  flex-basis: 100%;
}
.dialog-tax-id__taxIdLnr {
  font-size: 0.75rem;
  color: var(--color-triple114);
  background-color: var(--color-formBackground);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  padding-right: 0.5rem;
  padding-top: 0;
}
.dialog-tax-id__taxIdLnrDescription {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  -webkit-clip-path: none;
          clip-path: none;
  clip: auto;
  overflow: visible;
}
.dialog-tax-id .labelInput {
  display: inline;
}
.dialog-tax-id .labelInput label {
  width: auto;
}
.dialog-tax-id .labelInput input {
  width: 5rem;
  font-size: 1rem;
}
.dialog-tax-id .labelInput input[maxlength="2"] {
  width: 2.5rem;
}
.dialog-tax-id .labelInput input[maxlength="3"] {
  width: 3rem;
}
.dialog-tax-id .labelInput input[maxlength="4"] {
  width: 3.5rem;
}
.dialog-tax-id .labelInput input[maxlength="5"] {
  width: 4rem;
}
.dialog-tax-id .labelInput input:not(:first-child) {
  margin: 0;
}
.dialog-tax-id .labelInput.dialog-tax-id__delimiter::before {
  content: '/';
}
.dialog-tax-id .panel {
  margin: 0;
}
.dialog-tax-id .panel__itemContent {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: 0;
  width: 100%;
}
.dialog-tax-id__helpertext {
  font-size: 0.87rem;
}
.dialog-tax-id .formBox {
  margin: 0;
}
.dialog-tax-id--sourced .formBox__body {
  padding-left: 1rem;
}
.dialog-tax-id--preset .formItem {
  display: none;
}
.dialog-tax-id--preset .panel {
  display: none;
}
.edge.edgehtml .labelInput input[maxlength="4"] {
  width: 4rem;
}
.edge.edgehtml .labelInput input[maxlength="5"] {
  width: 4.5rem;
}
.safari .labelInput input[maxlength="5"] {
  width: 4.25rem;
}
/*
Finanzamtdialog

| Abhängigkeiten |
| ------ |
| formItem |
| interactive |
| formBox |

Das Konfigurationsobjekt muss an einem Element mit der ID __tax-office.config__ in __data-config__ liegen.

Wenn JavaScript deaktiviert ist, wird eine zusätzliche Zeile mit einem Aktualisieren-Button angezeigt.

Optional kann ein Titel zur FormBox für den Finanzamtdialog angezeigt werden.

markup: demo.dialog-tax-office.html

Styleguide ###squads.dialogtax.dialogtaxoffice###
*/
.dialog-tax-office .formBox {
  margin: 0;
}
.dialog-tax-office .formItem__line {
  align-items: baseline;
}
.dialog-tax-office .formItem__fieldGroup {
  flex-wrap: wrap;
}
.dialog-tax-office .formItem .dialog-tax-office__helpertext,
.dialog-tax-office .formItem .dialog-tax-office__helperlink {
  flex: 1 0 100%;
}
.dialog-tax-office .formItem .interactive-icon {
  margin-top: 0.5rem;
  padding: 0.5rem 0;
}
.dialog-tax-office__helpertext {
  font-size: 0.87rem;
}
/*
Figure-Zoom

Der Figure-Zoom ist eine zusammengesetzte Komponente, welche die Teilkomponenten Transformable, Interactive Modal, Modal
sowie die Figure miteinander vereint. Der Benutzer soll hierdurch die Möglichkeit erhalten, Abbildungen in einer größeren
Darstellung zu betrachten. Des Weiteren hat er die Option die Darstellung zu manipulieren, um eine bestmögliche Benutzer-
erfahrung zu gewährleisten.

markup: demo.figure-zoom.html

Styleguide ###squads.figureZoom###

*/
/*
File-Chooser

Interaktives Element zur Auswahl einer Datei aus einer hierarchischen Liste mit aufklappbaren Ordnern.
Ein Modifier "--form" existiert, um die Dateiauswahl passend zu FormItems zu gestalten.
Der Modifier "--invalid" markiert die Eingabe als fehlerhaft.

markup: demo.file-chooser.html

Styleguide ###squads.fileChooser###
*/
.file-chooser__label {
  display: block;
  margin-bottom: 0.25rem;
}
.file-chooser__filePath {
  border: 1px solid var(--color-inputBorder);
  background-color: var(--color-bodyBackground);
  width: 100%;
  padding: 0.37rem 0.5rem;
  word-break: break-all;
  font-size: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.file-chooser__filePath[readonly],
.file-chooser__filePath[disabled] {
  background-color: var(--color-triple242);
  color: var(--color-triple93);
}
.file-chooser__filePath:focus {
  outline: 1px dotted var(--color-triple0);
}
.file-chooser__wrapper {
  margin-bottom: 0.25rem;
}
.file-chooser--form {
  padding: 0.5rem;
  background: var(--color-formBackground);
  margin-bottom: 3px;
}
.file-chooser--form .file-chooser__wrapper {
  margin-bottom: 0;
}
.file-chooser--invalid .file-chooser__filePath {
  border-bottom: 0;
  box-shadow: 0 0.25rem 0 0 var(--color-error);
}
/*
File-Tree

Element zur Auswahl einer Datei aus einer hierarchischen Liste mit aufklappbaren Ordnern.
Der Inhalt des Elements wird im Modal des FileChoosers client-seitig aufgebaut.

markup: demo.file-tree.html

Styleguide ###squads.fileTree###
*/
.file-tree__content .toggleBox {
  margin-bottom: 0;
}
.file-tree__content .toggleBox__content {
  padding-bottom: 0;
}
.file-tree__content ul {
  list-style: none;
  padding-left: 0;
}
.file-tree__content ul li {
  margin-bottom: 0;
  padding: 0.25rem;
}
.file-tree__content ul li.file-tree__fileLink {
  margin-left: 1.25rem;
  font-size: 0.87rem;
  cursor: pointer;
}
.file-tree__content ul li.file-tree__fileLink:hover {
  background-color: var(--color-formBackground);
}
.file-tree__content ul li.file-tree__fileLink--active,
.file-tree__content ul li.file-tree__fileLink--active:hover {
  background-color: var(--color-active);
}
/*
File-Upload

Interaktives Element für das Hochladen einer Datei.

Ein Modifier "--form" existiert, um den Dateiupload passend zu FormItems zu gestalten.

Der Modifier "--invalid" markiert die Eingabe als fehlerhaft.

Mithilfe des Modifiers "--messageBoxBelow" können die MessageBoxen unterhalb des File-Uploads angezeigt werden,
statt oberhalb.

markup: demo.file-upload.html

Styleguide ###squads.fileUpload###
*/
.file-upload__label {
  display: block;
  margin-bottom: 0.25rem;
}
.file-upload__inputFile {
  display: none;
}
.file-upload__fileName {
  position: relative;
  border: 1px solid var(--color-inputBorder);
  background-color: var(--color-triple242);
  padding: 0.37rem 1.5rem 0.37rem 0.5rem;
  word-break: break-all;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
.file-upload__fileName .file-upload__clear {
  position: absolute;
  right: 0;
}
.file-upload__fileName .file-upload__clear a {
  display: block;
  padding: 0.25rem;
  line-height: 0;
}
.file-upload__fileName .file-upload__clear a > span {
  cursor: pointer;
}
.file-upload__wrapper {
  margin-bottom: 0.25rem;
}
.file-upload__placeholder {
  color: var(--color-triple178);
}
.file-upload .interactive {
  margin-top: 0.25rem;
}
.file-upload--form {
  padding: 0.5rem;
  background: var(--color-triple242);
  margin-bottom: 3px;
}
.file-upload--form .messageBox {
  margin-bottom: 1rem;
}
.file-upload--form .file-upload__wrapper {
  margin-bottom: 0;
}
.file-upload--invalid .file-upload__fileName {
  border-bottom: 0;
  box-shadow: 0 0.25rem 0 0 var(--color-error);
}
.file-upload--invalid .interactive {
  margin-top: 0.5rem;
}
.file-upload--messageBoxBelow .messageBox {
  margin-top: 1rem;
  margin-bottom: 0;
}
.global-chatOverlay {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bodyBackground);
  height: 40rem;
  max-height: 100%;
  width: 30rem;
  position: fixed;
  bottom: 0;
  right: 1rem;
  touch-action: none;
  z-index: 290;
  box-shadow: 0 0 1.5rem var(--color-shadow-light);
}
.global-chatOverlay--hidden {
  display: none;
}
.global-chatOverlay--minimized {
  height: auto;
  width: auto;
}
.global-chatOverlay--minimized .global-chatOverlay__header {
  cursor: pointer;
}
.global-chatOverlay--minimized .global-chatOverlay__headingIcon .icon {
  cursor: pointer;
}
.global-chatOverlay--minimized .global-chatOverlay__content,
.global-chatOverlay--minimized .global-chatOverlay__controls {
  display: none;
}
.global-chatOverlay--minimized .resizer {
  display: none;
}
.global-chatOverlay--dragged .global-chatOverlay__header {
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: grabbing;
}
.global-chatOverlay--dragged .global-chatOverlay__headingIcon .icon {
  cursor: grabbing;
}
.global-chatOverlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  padding: 0.5rem;
  z-index: 1;
  border-bottom: 1px solid var(--color-triple178);
  cursor: grab;
}
.global-chatOverlay__heading {
  display: flex;
  align-items: center;
  width: 6.5rem;
}
.global-chatOverlay__headingIcon {
  height: 2.62rem;
  width: 2.62rem;
  margin-right: 0.5rem;
}
.global-chatOverlay__headingIcon .icon {
  cursor: grab;
}
.global-chatOverlay__headingIcon .icon--2\.5x {
  height: 2.62rem;
  width: 2.62rem;
}
.global-chatOverlay__headingText {
  font-size: 1.5rem;
}
.global-chatOverlay__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 5rem;
}
.global-chatOverlay__controls .interactive-icon {
  padding: 0.25rem;
}
.global-chatOverlay__controls .interactive-icon:not(:last-child) {
  margin-right: 0.75rem;
}
.global-chatOverlay__content {
  flex-grow: 1;
  height: calc(100% - 3.5rem);
}
.global-chatOverlay__content .messageBox {
  margin: 1rem;
}
.global-chatOverlay__content .amsel-chat .a12-chat-container-wrapper > .a12-contentbox > .a12-contentbox__header {
  margin-top: -3.5rem;
}
.global-chatOverlay__content .amsel-chat .a12-chat-container-wrapper > .a12-contentbox > .a12-contentbox__header .a12-contentbox__addon {
  z-index: 1;
  position: relative;
  left: 6.5rem;
}
.global-chatOverlay__content .amsel-chat .a12-chat-container-modal--fitToParent {
  transform: unset;
}
.global-chatOverlay__content .amsel-chat .a12-chat-data-privacy-box {
  height: 100%;
  top: 0;
}
.global-chatOverlay__content.amsel-chat-ecb51 .a12-chat-data-privacy-box {
  height: calc(100% - 3.5rem);
  top: 3.5rem;
}
.a12-portal .a12-modalOverlay,
.dark .a12-portal .a12-modalOverlay,
.a12-portal .a12-attached-portal,
.dark .a12-portal .a12-attached-portal,
.a12-portal .a12-loading__outerOverlay--global,
.dark .a12-portal .a12-loading__outerOverlay--global {
  z-index: 300;
  position: fixed;
}
/*
Globale Hilfe

Das Hilfe-Modal, welches von überall zugängig ist und dem Nutzer auf grundlegende Fragen Antworten gibt.

Modal besteht aus dem Header (mit fester Überschrift und Suchfeld), Untertitel und Alignment(rechte und linke Gruppen).
Alignment-Gruppe enthält Alignment-Block, und der seinerseits - verlinkten Überschrifte, die zum Globale Hilfe Subpage führen.

markup: demo.global-help.html

Styleguide ###squads.globalhelp###
*/
.global-help .global-help__header {
  display: flex;
  flex-direction: column-reverse;
  flex-shrink: 0;
  padding: 1.25rem 0 0.5rem;
}
.global-help .global-help__title {
  margin: 2rem 0 0;
  border-bottom: none;
}
.global-help .global-help__subTitle {
  margin: 0 0 0.31rem;
}
.global-help .global-help__nav {
  padding-bottom: 0.62rem;
}
.global-help .global-help__content {
  padding: 0.5rem 1.25rem;
  margin-top: 0;
}
.global-help__block > .interactive {
  padding-bottom: 0.25rem;
}
.global-help__blockTitle {
  border-bottom: 1px solid var(--color-triple178);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
  margin-top: 0.75rem;
}
.global-help__blockTitle--onlyTitle {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.global-help__block + .global-help__block {
  margin-top: 2rem;
}
.global-help__list {
  margin-bottom: 0;
  margin-top: 0.37rem;
}
.global-help__listItem {
  list-style: none;
}
.global-help__listItem:last-child {
  margin-bottom: 0;
}
.global-help__listItem .interactive-icon {
  padding-left: 0;
}
.global-help__overview {
  background: var(--color-triple242);
  padding: 0.62rem;
  margin-bottom: 2rem;
}
.global-help__overview .global-help__subTitle {
  margin: 0;
}
.global-help__overview .global-help__list {
  margin-top: 0.75rem;
  padding-left: 0;
}
.global-help__fixedHeader {
  height: 3.5rem;
  background-color: var(--color-bodyBackground);
  transition: 0.5s box-shadow, 0.5s background-color;
  flex: 0 0 auto;
  z-index: 1;
}
.global-help__fixedHeader--scrolled {
  background-color: var(--color-infoBackground);
  box-shadow: 0 8px 10px -10px var(--color-shadow);
}
.global-help .breadcrumb {
  margin-bottom: 0.25rem;
}
.global-help .breadcrumb__listItem:last-child {
  display: inline;
}
.global-help .alignment {
  text-align: left;
  align-items: stretch;
  flex-direction: column;
}
.global-help .alignment__leftGroup:not(:only-child) {
  max-width: none;
}
.global-help .alignment__leftGroup {
  flex-direction: column;
}
.global-help .alignment__leftGroup:not(:last-child) {
  margin-bottom: 0.87rem;
}
.global-help .alignment__leftGroup .alignment__item:not(:last-child) {
  margin-right: 0;
}
.global-help .alignment__item {
  flex: 1 1 auto;
  padding: 0 0.75rem 0.75rem;
  background: var(--color-triple242);
  width: 100%;
  margin-bottom: 0;
}
.global-help .alignment__item + .alignment__item {
  margin-top: 0.87rem;
}
.global-help .toggleBox {
  margin-bottom: 0.5rem;
}
.global-help .toggleBox__head {
  font-size: 1rem;
}
.global-help .toggleBox__content {
  padding-bottom: 0.18rem;
}
.global-help .searchField {
  position: absolute;
  top: 1.75rem;
  left: 1.25rem;
  z-index: 2;
  padding-top: 0.5rem;
}
.global-help__backTo {
  margin-right: 0.25rem;
}
.global-help .global-help__close {
  z-index: 2;
}
.global-help .global-help__entry--highlight {
  --scroll-offset-top: -8px;
}
.global-help .global-help__entry--highlight.toggleBox {
  outline: 4px solid var(--color-active);
  padding: 0.5rem 0.5rem 0.5rem 0;
}
.global-receipt.modal--full .modal__wrapper {
  width: 80rem;
  max-width: 100vw;
}
.global-receipt.modal--full .modal__content {
  z-index: 1;
  margin: 0;
  padding: 0;
}
.global-receipt.modal--full .modal__loadingBox {
  z-index: 2;
}
.global-receipt.modal--full.global-receipt--error .modal__content {
  margin-top: 2.25rem;
  padding: 1rem 2.5rem;
}
/*
Globale Suche

Die globale Suche besteht aus einer festen Überschrift, dem Suchfeld und einer Tabbar-Collapse mit drei festgelegtem Tabs.
Die Inhalte der Tabs sind Listen, wobei die Listenelemente aus einer verlinkten Überschrift, dem Teasertext und
einer nicht verlinkten Brotkrümelnavigation besteht.

Je Tab-Inhalt existiert eine Pagination.

markup: demo.global-search.html

Styleguide ###squads.globalsearch###
*/
.global-search h1 {
  border: 0;
  margin-top: 0;
}
.global-search__header {
  padding: 0 0 1rem;
}
.global-search__title {
  margin-bottom: 0;
}
.global-search__content {
  padding: 0 1rem 1rem;
}
.global-search .tabbarCollapse {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.global-search__results {
  list-style: none;
  padding: 0;
  margin: 0;
}
.global-search__item {
  margin-bottom: 1.5rem;
}
.global-search__item:first-child {
  margin-top: 0;
}
.global-search__itemHead,
.global-search__itemContent {
  padding-bottom: 0.5rem;
}
.global-search__itemCrumb {
  font-size: 0.75rem;
}
/*
Import

Das Import Element ist ein Squad und besteht aus einer Togglebox, die folgende Elemente/Komponenten beinhaltet:
* eine noscript-MessageBox
* eine Legende
* ein FileUpload-Element
* ein Alignment mit Button

Bei Fehlern beim Import wird eine entsprechende MessageBox, ein Inputfeld (für den Dateinnamen der kommentierten Datei) und ein Alignment mit Button angezeigt.

markup: demo.import.html

Styleguide ###squads.import###
*/
.import {
  margin-bottom: 1rem;
}
.import__legend {
  margin-bottom: 2rem;
}
.import .file-upload .messageBox {
  margin-bottom: 1rem;
}
.import .messageBox {
  margin-bottom: 0;
}
.import .messageBox + .messageBox {
  margin-top: 0.5rem;
}
/*
Interactive Fetch

Ruft eine Quelle ab und injiziert die Antwort in einem {@link PugMixinFetchTarget}. Anschließend wird der eingefügte
Quellcode instantiiert, zum Beispiel als Modal.

markup: demo.interactive-fetch.html

Styleguide ###squads.interactiveFetch###
*/
/*
Interactive Modal

Interactive zum Öffnen von modalen Dialogen
#### Ausprägungen
- Alle möglichen Kombinationen aus Interactives und Interactive-Icons

#### Funktionsweise
- Der data-selector ```interactive.modal.open``` dient zur Deklaraion der Komponenten API
- Im Datenattribut ```data-related.modal``` ist der data-selector des Zielmodals notiert
- Die Komponente löst ein Event zum jeweiligen Rootelement des zugehörigen modalen Dialog aus
- Ohne JavaScript wird das Hashfragment des href verwendet

markup: demo.interactive-modal.html

Styleguide ###squads.interactiveModal###
*/
/*
Interactive Print

Druckbutton

markup: demo.interactive-print.html

Styleguide ###squads.interactivePrint###
*/
.interactive-print {
  width: auto;
  display: inline-block;
}
/*
Interactive Receipt
*/
.formItem__fieldItem--receipt .interactive-receipt:focus,
.formItem__fieldItem--receipt .interactive-receipt:hover {
  border-radius: 0 10px 10px 0;
}
.formItem__fieldItem--receipt .interactive-receipt {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: -2.25rem;
  padding-left: 0.68rem;
  padding-bottom: 0.56rem;
  border-radius: 0 2px 2px 0;
  border-left: none;
  -webkit-clip-path: inset(-4px -4px -4px 0);
          clip-path: inset(-4px -4px -4px 0);
}
.formItem__fieldItem--receipt-editing .formItem__field--text,
.formItem__fieldItem--receipt-editing .interactive-receipt {
  outline: 1px dotted var(--color-triple0);
}
.formItem__fieldItem--receipt-editing .interactive-receipt {
  display: inline-block;
}
.formItem__fieldItem--receipt-connected .interactive-receipt {
  display: none;
}
/*
Interactive Sourced

Ein interactives Element dass, die Quelle eines FormItem mit vorausgefüllten Inhalt, in einem Flyout darstellt.

any - Multi Quellen für MZB
profile - Profil
submission - Frühere Abgabe
report - Bescheinigung
receipt - Individueller Beleg.

markup: demo.interactive-sourced.html

Styleguide ###squads.interactiveSourced###
*/
.interactive-sourced {
  border-color: transparent;
}
.interactive-sourced__wrap {
  pointer-events: none;
}
.formItem__metaBar .interactive-sourced {
  margin-right: 1px;
  margin-left: 1px;
}
.interactive-sourced:focus,
.interactive-sourced.interactive-sourced--expanded {
  border-color: currentColor;
  border-style: dotted;
}
.interactive-sourced.interactive-sourced--expanded {
  background: currentColor;
}
.interactive-sourced--hidden {
  visibility: hidden;
}
.interactive-sourced--skyscraper {
  height: 2.125rem;
  width: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  border-radius: 0;
  overflow: hidden;
}
.ios .interactive-sourced--skyscraper {
  height: 2.18rem;
}
.interactive-sourced--skyscraper:focus,
.interactive-sourced--skyscraper:hover {
  border-radius: 0;
  border-color: transparent;
  outline-width: 1px;
  outline-color: currentColor;
}
.interactive-sourced--skyscraper:focus {
  outline-style: dotted;
}
.interactive-sourced--skyscraper:hover {
  outline-style: solid;
}
.interactive-sourced.interactive-sourced--multiLine {
  height: 100%;
  align-items: flex-start;
  padding-top: 3px;
  margin: 0;
}
.interactive-sourced--any {
  color: var(--color-source-any-foreground);
  background-color: var(--color-source-any-background);
}
.dark .interactive-sourced--any.interactive-sourced--expanded {
  background-color: var(--color-source-any-foreground--inverted);
}
.interactive-sourced--profile {
  color: var(--color-source-profile-foreground);
  background-color: var(--color-source-profile-background);
}
.dark .interactive-sourced--profile.interactive-sourced--expanded {
  background-color: var(--color-source-profile-foreground--inverted);
}
.interactive-sourced--submission {
  color: var(--color-source-submission-foreground);
  background-color: var(--color-source-submission-background);
}
.dark .interactive-sourced--submission.interactive-sourced--expanded {
  background-color: var(--color-source-submission-foreground--inverted);
}
.interactive-sourced--report {
  color: var(--color-source-report-foreground);
  background-color: var(--color-source-report-background);
}
.dark .interactive-sourced--report.interactive-sourced--expanded {
  background-color: var(--color-source-report-foreground--inverted);
}
.interactive-sourced--receipt {
  color: var(--color-source-receipt-foreground);
  background-color: var(--color-source-receipt-background);
}
.dark .interactive-sourced--receipt.interactive-sourced--expanded {
  background-color: var(--color-source-receipt-foreground--inverted);
}
/*
License ScrollArea

Scrollbares DIV für Lizenzverträge.

markup: demo.licenseScrollArea.html

Styleguide ###squads.licenseScrollArea###
*/
.licenseScrollArea {
  display: flex;
  height: 31.25rem;
  background-color: var(--color-infoBackground);
}
.licenseScrollArea .scrollArea {
  padding: 1.5rem;
}
.licenseScrollArea a .nolink {
  word-break: break-all;
  display: inline-block;
}
/*
Login-Box


#### Design
Die Login-Box ist ein Squad der aus 5 Varianten besteht.
Optisch sieht die Login-Box aus wie ein TabBar aus, ist es jedoch nicht.
Die LoginBox besteht aus einer LinkBar und einem Contentbereich, die im Desktop Layout nebeneinander dargestellt sind.

Die LinkBar besteht aus einer Liste mit 5 Links, die ein vorangestelltes Icon besitzen. Wenn ein Listenelement aktiv ist,
besitzt es die Klasse *.login-box__link--active* und das Icon besitzt die Endung *_eop* bzw *_bop* statt *-triple248*.

Im mobilen Layout werden nur die Icons der LinkBar-Links angezeigt und der Contentbreich wird unterhalb der LinkBar dargestellt.

Es gibt die Möglichkeit, dass nur einer der "Tabs" aktiv ist während alle anderen "deaktiviert" sind. Hierbei ist zu beachten,
dass die "deaktivierten Tabs" das Icon mit der Endung "--disabled-triple248" besitzen und das Interactive disabled ist.

Bei einer LoginBox ohne LinkBar, muss der Modifier "--noLinkBar" verwendet werden, damit die Border des content-Bereichs komplett angezeigt wird.

#### Fehlermeldungen
In den "Tabs" Zertifikatsdatei und "Mobiles Login" existieren versteckte MessageBoxen, die für die Fehlermeldungen genutzt werden sollen.
Diese MessageBoxen stehen immer im Content-Bereich gleich unter der ersten Überschrift (H2).

#### Mobiles Login
Mobiles Login besitzt zwei Schritte, die im Pug mit **cfg.elsterSmartStep** unterschieden werden. Die TAN 2 wird in einem Panel
dargestellt.

### Mobile
- Wenn unter mobilen Endgeräten die Login-Seite betreten wird, soll der "Tab" Mobiles Login aktiv sein. Das Akkordion ist intial mit der ersten Auswahl geöffnet.
- Wird der dritte Schritt im TAN-Verfahren angezeigt, soll das Akkordion initial mit der zweiten Auswahl geöffnet sein.
- Wird mobil trotzdem Zertifikatsdatei ausgewählt, dann wird eine MessageBox angezeigt.

markup: demo.login-box.html

Styleguide ###squads.loginbox###
*/
.login-box {
  display: flex;
  flex-direction: column;
}
.login-box .interactive-icon {
  background: var(--color-triple248);
}
.login-box .interactive-icon__text {
  display: none;
}
.login-box .interactive-icon--base {
  padding: 0.5rem;
}
.login-box__link {
  margin-bottom: 0;
}
.login-box__link:last-child {
  margin-right: 0;
}
.login-box__link--active {
  margin-bottom: 0;
  border-bottom-color: var(--color-bodyBackground);
}
.login-box__link--active .interactive-icon {
  background: var(--color-bodyBackground);
  padding: 0.75rem;
}
.login-box__title--complete {
  color: var(--color-success-dark);
}
.login-box__content {
  border: 1px solid var(--color-triple221);
  border-top: 0;
  padding: 1rem 0.5rem 0.5rem;
}
.login-box__content h2 {
  margin-top: 0;
}
.login-box__box {
  padding: 1rem 1.5rem;
  border: 1px solid var(--color-triple221);
  margin-bottom: 1rem;
}
.login-box .panel__itemDescription {
  font-size: 1.5rem;
  width: 80%;
}
.login-box__certificateForm__lost {
  margin: 0.62rem 0;
}
.login-box .file-upload {
  margin-bottom: 1rem;
}
.login-box__footnotes {
  border-top: 1px solid var(--color-triple221);
  padding-top: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.87rem;
  color: var(--color-triple114);
}
.login-box--noLinkBar .login-box__content {
  border-top: 1px solid var(--color-triple221);
}
/*
Pagination-Container

Der Pagination-Container gruppiert die Einträge innerhalb von ToggleBoxen. Anschließend werden diese auf
Seiten innerhalb des Containers aufgeteilt. Gibt es mehr als eine Seite, wird der Container mit einer
Paginierung versehen, um zwischen ihnen zu navigieren. So lassen sich viele Einträge auf wenig Raum
zusammenfassen.

Über HTML-Attribute am Container können die Intervalle und das Aussehen der ToggleBoxen beeinflusst werden:
- data-group-item-interval    - Bestimmt, wie viele Einträge in einer Gruppe zusammengefasst werden (Default: 10)
- data-page-item-interval     - Bestimmt, wie viele ToggleBoxen auf einer Seite zusammengefasst werden (Default: 10)
- data-togglebox-modifier     - Definiert die Ausprägung der ToggleBoxen (Default: simple, closed)

markup: demo.pagination-container.html

Styleguide ###squads.paginationContainer###
*/
.paginationContainer .toggleBox__content {
  padding: 1rem;
}
.paginationContainer .paginationContainer {
  margin-top: 1rem;
}
.paginationContainer__page {
  display: none;
}
.paginationContainer__page--active {
  display: block;
}
/*
    Receipt-Filter

    Ein Filter für die serverseitige Filterung von Belegen in der Belegverwaltung

    markup: demo.receipt-filter.html

    Styleguide ###squads.receiptFilter###
 */
.receipt-filter .formItem {
  margin-bottom: 0;
  padding-left: 0;
}
.receipt-filter .formItem__line {
  padding-left: 0;
  padding-right: 0;
}
/*
    Receipt-Management

    Inhaltsbereich der Belegverwaltung mit einer Thumbnail- und Tabellenansicht.

    markup: demo.receipt-management.html

    Styleguide ###squads.receiptManagement###
 */
.receipt-management__thumbnailViewSort {
  margin-bottom: 1rem;
}
.receipt-management__thumbnailViewSort .formItem {
  padding: 0;
  background: none;
}
.receipt-management__thumbnailViewSort .formItem__wrapper {
  background: none;
}
.receipt-management__thumbnailViewSort .formItem__line {
  padding: 0;
  padding-right: 1.5rem;
  margin: 0;
}
.receipt-management .tabBar__content {
  padding: 0 0.5rem;
}
.receipt-management .tabBar__content h2:first-of-type {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
.receipt-management .tiles-wrapper {
  margin-left: -0.5rem;
}
.receipt-management .thumbnail {
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}
/*
Sidebar

Die Komponente besteht aus einem Container (ehemals *Kontexthilfe*) und einer darin befindlichen TabBar.
Der Container kann ein- und ausgeblendet sowie in der Breite angepasst werden. Die TabBar beinhaltet je
nach Bedarf Inhalte für die kontextsensitive Hilfe, das Passwort-Meter oder den Kontaktfinder. Bei mehreren
Tabs passt sich die Breite der Sidebar automatisch an.

Siehe ebenfalls: Interactive-Help

markup: demo.sidebar.html

Styleguide ###squads.sidebar###
*/
.sidebar__hide,
.sidebar__toggleWidth {
  position: absolute;
  top: 0.93rem;
}
.sidebar {
  position: fixed;
  height: 100%;
  width: 100%;
  display: none;
  top: 0;
  right: 0;
  background: var(--color-triple248);
  padding: 1rem 0 0;
  text-align: left;
  box-shadow: 0 0 1.5rem var(--color-shadow-light);
  z-index: 230;
}
.sidebar__hide {
  right: 0;
}
.sidebar__toggleWidth {
  left: 0;
  display: none;
}
.sidebar__content {
  height: 100%;
}
.sidebar__content .tabBar {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sidebar__content .tabBar__tabs {
  padding: 0 2.12rem 0 1.5rem;
}
.sidebar__content .tabBar__content {
  height: 100%;
  padding: 1.5rem;
  overflow: auto;
  color: var(--color-triple114);
  font-size: 0.87rem;
}
.sidebar__content .tabBar__content h1,
.sidebar__content .tabBar__content h2,
.sidebar__content .tabBar__content h3 {
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 0.25rem;
}
@supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
  .sidebar__content .tabBar__content h1,
  .sidebar__content .tabBar__content h2,
  .sidebar__content .tabBar__content h3 {
    word-break: break-word;
  }
}
.android.chrome .sidebar__content .tabBar__content h1,
.android.chrome .sidebar__content .tabBar__content h2,
.android.chrome .sidebar__content .tabBar__content h3 {
  word-break: break-word;
}
.sidebar__content .tabBar__content h1:first-child,
.sidebar__content .tabBar__content h2:first-child,
.sidebar__content .tabBar__content h3:first-child {
  margin-top: 0;
}
.sidebar__content .tabBar__content h1 {
  font-size: 1.5rem;
}
.sidebar__content .tabBar__content h2 {
  font-size: 1.25rem;
  margin-top: 1.12rem;
}
.sidebar__content .tabBar__content h3 {
  font-size: 0.87rem;
  margin-top: 1rem;
}
.sidebar__content .tabBar__content h4,
.sidebar__content .tabBar__content h5 {
  font-size: 14px;
}
.sidebar__content .tabBar__content ul {
  list-style: square;
}
.sidebar__content .tabBar__content ul,
.sidebar__content .tabBar__content ol {
  margin: 0 0 0.68rem;
  padding: 0 1.12rem;
}
.sidebar__content .tabBar__content ul li,
.sidebar__content .tabBar__content ol li {
  margin: 0;
}
.sidebar__content .tabBar__content ul li:not(:last-child),
.sidebar__content .tabBar__content ol li:not(:last-child) {
  padding-bottom: 0.62rem;
}
.sidebar .table th,
.sidebar .table-wrap th,
.sidebar .table td,
.sidebar .table-wrap td {
  padding: 0.25rem;
}
.sidebar .table th,
.sidebar .table-wrap th {
  padding-bottom: 0.43rem;
  box-shadow: inset 0 -4px 0 0 var(--color-triple178);
}
.sidebar .table tr:last-child td,
.sidebar .table-wrap tr:last-child td {
  border-bottom: 3px solid var(--color-bodyBackground);
}
.sidebar .table-collapse th,
.sidebar .table-collapse td {
  padding: 0.25rem;
}
.sidebar .table-collapse tr:last-child td {
  border-bottom: 0;
}
.sidebar .table-collapse th {
  padding-bottom: 0.43rem;
}
.sidebar__tabContent--receipt h1 {
  margin-top: 1rem;
}
.sidebar__tabContent--receipt .labelInput {
  margin: 1rem 0;
}
.sidebar__tabContent--receipt .toggleBox__content {
  padding-left: 0.62rem;
}
.sidebar__tabContent--receipt .panel {
  margin: 1.5rem 0 1rem;
}
.sidebar__tabContent--receipt .panel__item {
  background: none;
  padding: 1rem;
}
.sidebar__tabContent--receipt .panel__item p {
  margin-bottom: 1rem;
}
.sidebar__tabContent--receipt .panel__item p:last-child {
  margin-bottom: 0;
}
.sidebar__tabContent--receipt .panel__itemMainText {
  font-size: 1.25rem;
}
.chrome .sidebar h1,
.edge.edgehtml .sidebar h1,
.chrome .sidebar h2,
.edge.edgehtml .sidebar h2,
.chrome .sidebar h3,
.edge.edgehtml .sidebar h3 {
  word-break: normal;
  overflow-wrap: break-word;
}
/*
Taskleiste

Dieses Squad repräsentiert ein spezifisches Menü zur Bearbeitung von Formularen.

markup: demo.taskBar.html

Styleguide ###squads.taskBar###
*/
/*
Taskleiste basic styling
*/
.taskBar {
  background: var(--color-formBackground);
  border-top: 1px solid var(--color-triple221);
}
.taskBar__item {
  display: none;
  text-align: center;
}
.taskBar--vertical {
  padding: 0.25rem 0;
}
.taskBar--vertical .taskBar__item--visible\@vertical {
  padding: 0.25rem 2px;
  display: block;
}
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--top {
  bottom: 0;
  top: auto;
  padding-bottom: 0;
  left: 2.68rem;
  text-align: left;
}
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom::after,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--top::after,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom::before,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--top::before {
  margin-left: 0;
  transform: rotate(90deg);
  left: -0.63rem;
  bottom: 0.87rem;
  top: auto;
}
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom::after,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--top::after {
  left: -0.5rem;
}
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom::after,
.taskBar--vertical .taskBar__item--visible\@vertical .flyout--bottom::before {
  transform: rotate(-90deg);
}
.taskBar--horizontal {
  padding: 0 0.25rem;
}
@media screen and (min-width: 60rem), print {
  .page-layout-dashboard__sub {
    width: 18.75rem;
  }
}
.dashboard .tileItem {
  margin: 0 0.31rem 0.31rem 0;
}
.dashboard__header {
  content: "";
}
.dashboard__content {
  display: block;
  margin-bottom: 1.25rem;
}
.dashboard__flexItemLeft {
  flex-basis: 30%;
}
.dashboard__flexItemRight {
  flex-basis: 70%;
  flex-grow: 1;
}
.dashboard__formulareSection {
  margin: 0;
  padding-left: 0;
  padding-right: 0.62rem;
  list-style: none;
  word-break: break-word;
}
.dashboard__formulareSectionHeading {
  margin-bottom: 0.62rem;
}
.dashboard__formulareSectionItem {
  margin: 0;
  padding-bottom: 0.31rem;
}
.dashboard__formulare .toggleBox__title {
  font-weight: 600;
}
.dashboard__formulare .toggleBox .dashboard__formulareSection {
  padding: 0.25rem 0.62rem 0 0;
}
.dashboard__formulare .toggleBox .dashboard__formulareSectionItem {
  padding-bottom: 0.5rem;
}
.dashboard__formulare .toggleBox .dashboard__formulareSectionItem a {
  font-weight: normal;
}
@media screen and (min-width: 30rem), print {
  .dashboard .tile__head {
    padding: 1rem;
  }
  .dashboard .tile__body {
    padding: 0 1rem 1rem;
  }
}
.error-page {
  padding-top: 1.5rem;
}
.error-page .footer {
  margin-top: 1.5rem;
  border-top: none;
}
.error-page .footer .footer__permanent,
.error-page .footer .footer__twoThirds {
  justify-content: flex-end;
}
.error-page .footer .footer__twoThirds {
  flex: 0 1 auto;
}
.error-page__content {
  padding: 0 1rem;
}
.error-page__title {
  text-align: center;
  color: var(--color-app);
}
.error-page__subtitle {
  display: block;
  font-size: 3.75rem;
  line-height: 3.75rem;
}
.error-page__text {
  text-align: center;
  margin: 2.5rem auto;
  max-width: 56.25rem;
}
.error-page--elsterweb .error-page__title {
  color: var(--color-app-dark);
}
.error-page .page-default__root {
  padding: 0;
}
.error-page .page-default__body {
  margin-top: 0;
}
@media screen and (min-width: 60rem), print {
  .error-page__content {
    margin: 5rem 1.5rem;
    padding: 0;
  }
  .error-page__subtitle {
    font-size: 7.5rem;
    line-height: 6.62rem;
  }
}
.form-noTree .page-form__contentWrapper {
  margin-left: 0;
  flex: 1 1 auto;
}
.form-noTree .page-form__content {
  padding: 1rem 0.5rem 0.5rem;
}
.form-noTree .page-form__content::before {
  display: none;
}
@media screen and (min-width: 48rem), print {
  .form-noTree .page-form__content {
    padding: 1rem 1.5rem;
  }
}
@media screen and (min-width: 80rem), print {
  .form-noTree .page-form__contentWrapper {
    padding: 1.5rem;
    max-width: 100rem;
  }
  .form-noTree .page-form__content {
    border: 1px solid var(--color-triple221);
    padding: 3rem;
  }
  .form-noTree .page-form__content h1 {
    margin-top: 0;
  }
}
.maintenance-page .footer {
  margin-top: 1.5rem;
  border-top: none;
}
.maintenance-page .footer .footer__permanentContent {
  justify-content: flex-end;
}
.maintenance-page .footer .footer__twoThirds {
  flex: 0 1 auto;
}
.maintenance-page__content {
  margin: 5rem 1.5rem;
}
.maintenance-page__icon {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.maintenance-page__heading {
  text-align: center;
  color: var(--color-app-dark);
  font-size: 2rem;
  margin: 2.5rem auto 1rem;
}
.maintenance-page__text {
  font-weight: bolder;
  font-size: 1rem;
  text-align: center;
  margin: 0 auto;
  max-width: 37.5rem;
}
.maintenance-page .page-default__root {
  padding: 0;
}
.maintenance-page .page-default__body {
  border: none;
  margin-top: 0;
}
@media screen and (min-width: 60rem), print {
  .maintenance-page__content {
    transform: translateY(80px);
  }
  .maintenance-page__icon .icon {
    transform: scale(2) translateY(-12%);
  }
}
.register .page-default__menu {
  display: block;
  min-width: 2.5rem;
}
.register .page-default__root {
  overflow-x: visible;
}
.register__activationHeading {
  text-align: center;
}
.register__activationOptions {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
}
.register__activationOptionsRow {
  display: table-row;
}
.register__activationOptionsCell {
  display: table-cell;
  padding: 10px;
  width: 50%;
  border: 1px solid #dcdcdc;
  font-size: 12px;
  vertical-align: top;
}
@media screen and (max-width: 480px) {
  .register__activationOptionsCell {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}
.register__activation .icondefinition {
  font-size: 12px;
  padding: 10px;
}
.register__activation .alignment__leftGroup--leftMargin {
  max-width: none !important;
}
.safari .register .page-default__menu {
  display: flex;
}
.startpage .page-default__root {
  padding-top: 2.5rem;
}
@media screen and (min-width: 48rem), print {
  .startpage .page-default__root {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}
.startpage .page-default__row {
  margin-bottom: 1.25rem;
}
.startpage .page-default__aside ul {
  list-style: none;
  padding: 0;
}
.startpage .page-default__aside .figure {
  margin-bottom: 0;
}
.startpage .page-default__aside .figure__image {
  border: 0;
  background-color: transparent;
}
.startpage__contents h1,
.startpage__contents h2 {
  margin-top: 0;
  color: var(--color-app-dark);
}
.startpage__teaser {
  margin-bottom: 2rem;
}
@media screen and (min-width: 60rem), print {
  .startpage__teaser {
    margin-bottom: 3rem;
  }
}
.startpage__hero {
  color: #333;
  background-image: var(--url-backgroundHeadStartpage--small);
  background-repeat: repeat;
  background-position: 50% 0;
  border-bottom: 8px solid var(--color-app);
  border-top: 8px solid var(--color-app);
}
@media screen and (min-width: 80rem), print {
  .startpage__hero {
    background-image: var(--url-backgroundHeadStartpage);
  }
}
.startpage__hero h1 {
  margin: 0 0 0.25rem;
  padding: 1rem 1rem 0.25rem;
  text-align: center;
  font-size: 1.37rem;
}
@media screen and (min-width: 30rem), print {
  .startpage__hero h1 {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 60rem), print {
  .startpage__hero h1 {
    padding-top: 3.12rem;
    font-size: 2.25rem;
  }
}
.startpage__hero h1 .icon {
  font-size: medium;
  text-align: left;
  transform: translateY(-0.5rem);
}
@media screen and (min-width: 60rem), print {
  .startpage__hero h1 .icon {
    transform: translateY(-1.5rem) scale(2);
    margin-left: 0.75rem;
  }
}
.startpage__hero h2 {
  margin-top: 0;
  text-align: center;
  padding: 0 1rem;
  margin-bottom: 1.5rem;
}
.startpage__heroList {
  display: none;
}
@media screen and (min-width: 48rem), print {
  .startpage__heroList {
    display: block;
    background: rgba(0,30,46,0.68);
    color: #fff;
  }
  .startpage__heroList ul {
    max-width: 120rem;
    margin: 0 auto;
    display: flex;
    padding: 1rem 3.5rem;
    flex-wrap: wrap;
    list-style: none;
  }
}
.startpage__hero li {
  flex: 1 1 auto;
  padding: 0 0 0.25rem;
  text-align: center;
}
.startpage__hero li:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 30rem), print {
  .startpage__hero li {
    flex: 1 0 18.75rem;
    padding: 0 1rem 0.25rem;
  }
}
@media screen and (min-width: 60rem), print {
  .startpage__hero li {
    padding: 0 1rem;
  }
}
.startpage__hero li .icon {
  text-align: left;
}
.startpage__hero li a {
  color: #fff;
  text-decoration: underline;
}
.startpage__hero li a:hover,
.startpage__hero li a:focus {
  outline: 1px dotted #fff;
}
.startpage .startpage__heroButtons {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 60rem), print {
  .startpage .startpage__heroButtons {
    margin-bottom: 2.5rem;
  }
}
.startpage .startpage__heroButtons ._helper-center {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 30rem), print {
  .startpage .startpage__heroButtons ._helper-center:last-child {
    padding-left: 1rem;
    border-left: 1px solid var(--color-app);
    margin-left: 0;
  }
  .startpage .startpage__heroButtons ._helper-center:first-child {
    margin-right: 16px;
  }
}
.startpage__heroActionText {
  display: none;
}
@media screen and (min-width: 30rem), print {
  .startpage__heroActionText {
    display: block;
    font-size: 0.87rem;
    margin-bottom: 0.25rem;
  }
}
@media screen and (min-width: 60rem), print {
  .startpage__heroActionText {
    font-size: 1.12rem;
    margin-bottom: 0.5rem;
  }
}
@media screen and (min-width: 60rem) and (max-width: 100rem) {
  .startpage-account .page-default__main,
  .startpage-account .page-default__aside {
    align-self: center;
    min-width: 52.62rem;
  }
}
.startpage-account .alignment__item.width100 {
  width: 100%;
  display: block;
}
.startpage-account .alignment__item.width100 .figure__image {
  max-width: 17.5rem;
  margin: 0 auto;
}
.startpage .alignment__leftGroup--leftMargin {
  margin-left: 0;
}
.firefox .startpage-account .alignment .figure img {
  width: 100%;
}
.edge.edgehtml input::-ms-clear {
  display: none;
}
@media screen and (max-width: 20rem) {
  .formProgressNav__edit--disabled .formProgressNav__title,
  .formProgressNav__edit--disabled + .formProgressNav__validate--disabled .formProgressNav__title,
  .formProgressNav__validate--disabled + .formProgressNav__send--disabled .formProgressNav__title {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 30rem) {
  .global-chatOverlay {
    height: 100%;
    width: 100%;
    right: 0;
  }
  .global-chatOverlay .global-chatOverlay__header {
    cursor: default;
  }
  .global-chatOverlay .global-chatOverlay__heading {
    width: 2rem;
  }
  .global-chatOverlay .global-chatOverlay__headingIcon .icon {
    cursor: default;
  }
  .global-chatOverlay .global-chatOverlay__headingText {
    display: none;
  }
  .global-chatOverlay--minimized {
    height: auto;
    width: auto;
    border-radius: 1.81rem;
    right: 1rem;
    bottom: 1rem;
    background-color: transparent;
  }
  .global-chatOverlay--minimized .global-chatOverlay__header {
    padding: 0;
    border-bottom: 0;
    cursor: pointer;
  }
  .global-chatOverlay--minimized .global-chatOverlay__heading {
    width: auto;
  }
  .global-chatOverlay--minimized .global-chatOverlay__headingIcon {
    height: 3.5rem;
    width: 3.5rem;
    margin: 0;
  }
  .global-chatOverlay--minimized .global-chatOverlay__headingIcon .icon {
    cursor: pointer;
  }
  .global-chatOverlay--minimized .global-chatOverlay__headingIcon .icon--2\.5x {
    height: 3.5rem;
    width: 3.5rem;
  }
  .global-chatOverlay--minimized .global-chatOverlay__headingIcon .icon--2\.5x .icon__svg {
    transform: scale(3.5);
  }
  .global-chatOverlay--minimized .global-chatOverlay__headingText {
    display: none;
  }
  .global-chatOverlay .global-chatOverlay__content .amsel-chat .a12-chat-container-wrapper > .a12-contentbox > .a12-contentbox__header .a12-contentbox__addon {
    left: 2rem;
  }
  .global-help .searchField--sized .searchField__input {
    width: 11.5rem;
  }
  .flyout--lightBox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    pointer-events: all;
    align-items: center;
    justify-content: center;
    display: flex;
    transform: translateX(0);
  }
  .flyout--lightBox .definitionSource {
    padding: 1.37rem 1rem;
  }
  .flyout.flyout--lightBox::before,
  .flyout.flyout--lightBox::after {
    display: none;
  }
  .flyout--lightBox .flyout__outer {
    position: fixed;
  }
  .flyout--lightBox .flyout__inner {
    margin-right: 0;
  }
  .flyout--lightBox .flyout__footer {
    display: block;
  }
  .taskBar .flyout {
    max-width: 16.25rem;
  }
  .taskBar--horizontal {
    padding: 0.25rem 0;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical {
    padding: 0.5rem 0.25rem;
    display: inline-block;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom {
    top: 100%;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top {
    bottom: 100%;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--right {
    left: 0;
    right: auto;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--left {
    left: auto;
    right: 0;
    text-align: right;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top {
    top: auto;
    bottom: 2.68rem;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::after {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top {
    padding-bottom: 10px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::after {
    bottom: 4px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple204);
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple255);
    bottom: 5px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--center::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--center::before {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--center::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--center::after {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--right::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--right::before {
    right: auto;
    left: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--right::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--right::after {
    right: auto;
    left: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--left::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--left::before {
    left: auto;
    right: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom.flyout--left::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top.flyout--left::after {
    left: auto;
    right: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--top::before {
    transform: rotate(0deg);
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before {
    border-bottom: none;
    top: auto;
    bottom: 4px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--bottom::before {
    bottom: 3px;
  }
  .taskBar--horizontal .taskBar__item--visible\@vertical .flyout--right {
    text-align: left;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal:not(.taskBar__item--visible\@vertical) {
    display: none;
  }
  .taskBar--vertical .taskBar__item--visible\@vertical .flyout--top .flyout--center {
    left: 2.68rem;
  }
  .modal__loadingBox {
    width: 20rem;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
@media screen and (min-width: 30rem), print {
  .breadcrumb--hidden\@min {
    display: block;
  }
  .interactive:not([class*='@']) {
    width: auto;
    display: inline-block;
  }
  .interactive-icon:not([class*='@']) {
    width: auto;
    display: inline-block;
  }
  .alignment {
    flex-direction: row;
  }
  .alignment--spaced {
    justify-content: space-between;
  }
  .alignment--buttonGroup .alignment__centerGroup {
    align-items: center;
  }
  .alignment--growEqual {
    flex-direction: column;
  }
  .alignment--growEqual > .alignment__leftGroup > .alignment__item,
  .alignment--growEqual > .alignment__rightGroup > .alignment__item,
  .alignment--growEqual > .alignment__centerGroup > .alignment__item,
  .alignment--growEqual > .alignment__item {
    flex: 1 1 0;
  }
  .alignment--growEqual > .alignment__leftGroup > .alignment__item--leftMargin-8,
  .alignment--growEqual > .alignment__rightGroup > .alignment__item--leftMargin-8,
  .alignment--growEqual > .alignment__centerGroup > .alignment__item--leftMargin-8,
  .alignment--growEqual > .alignment__item--leftMargin-8,
  .alignment--growEqual > .alignment__leftGroup > .alignment__item--leftMargin-16,
  .alignment--growEqual > .alignment__rightGroup > .alignment__item--leftMargin-16,
  .alignment--growEqual > .alignment__centerGroup > .alignment__item--leftMargin-16,
  .alignment--growEqual > .alignment__item--leftMargin-16 {
    margin-left: 0;
  }
  .alignment__leftGroup,
  .alignment__rightGroup,
  .alignment__centerGroup {
    flex: 1 1 0;
    flex-direction: row;
  }
  .alignment__leftGroup.alignment__leftGroup--borderBox,
  .alignment__rightGroup.alignment__rightGroup--borderBox,
  .alignment__centerGroup.alignment__centerGroup--borderBox {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .alignment__leftGroup {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .alignment__rightGroup {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .alignment__centerGroup {
    justify-content: center;
    align-items: center;
  }
  .alignment__leftGroup--top,
  .alignment__rightGroup--top,
  .alignment__centerGroup--top {
    align-items: flex-start;
  }
  .alignment__leftGroup--bottom,
  .alignment__rightGroup--bottom,
  .alignment__centerGroup--bottom {
    align-items: flex-end;
  }
  .alignment__leftGroup--baseline,
  .alignment__rightGroup--baseline,
  .alignment__centerGroup--baseline {
    align-items: baseline;
  }
  .alignment__leftGroup--leftMargin,
  .alignment__rightGroup--leftMargin,
  .alignment__centerGroup--leftMargin {
    margin-left: 2rem;
  }
  .alignment__leftGroup--leftMargin-16,
  .alignment__rightGroup--leftMargin-16,
  .alignment__centerGroup--leftMargin-16 {
    margin-left: 1rem;
  }
  .alignment__leftGroup--leftMargin-8,
  .alignment__rightGroup--leftMargin-8,
  .alignment__centerGroup--leftMargin-8 {
    margin-left: 0.5rem;
  }
  .alignment__leftGroup:not(:only-child),
  .alignment__rightGroup:not(:only-child),
  .alignment__centerGroup:not(:only-child) {
    max-width: 50%;
  }
  .alignment__rightGroup > .alignment__item:not(:first-child),
  .alignment__centerGroup > .alignment__item:not(:first-child) {
    margin-left: 0.5rem;
  }
  .alignment__leftGroup > .alignment__item:not(:last-child) {
    margin-right: 0.5rem;
  }
  .alignment--buttonGroup,
  .alignment--buttonGroupCenter {
    margin-top: 2rem;
    margin-bottom: -0.5rem;
  }
  .alignment--buttonGroup .alignment__item,
  .alignment--buttonGroupCenter .alignment__item {
    margin-bottom: 0.5rem;
  }
  .alignment__item--leftMargin {
    margin-left: 2rem;
  }
  .alignment__item--leftMargin-16 {
    margin-left: 1rem;
  }
  .alignment__item--leftMargin-8 {
    margin-left: 0.5rem;
  }
  .alignment__item--bottom {
    align-self: flex-end;
  }
  .alignment__item--baseline {
    align-self: baseline;
  }
  .alignment__item--right {
    margin-left: auto;
  }
  .alignment__item,
  .alignment__leftGroup,
  .alignment__rightGroup,
  .alignment__centerGroup {
    margin-bottom: 0;
  }
  .startpage-account .alignment .alignment__leftGroup--leftMargin {
    margin-left: 1.5rem;
  }
  .treeView__listItem {
    padding-left: 1rem;
  }
  .treeView__listItem > ul {
    margin-left: 0.18rem;
  }
  .toc {
    display: block;
  }
  .toc__heading {
    font-size: 1.5rem;
  }
  .messageBox {
    margin-bottom: 2rem;
    margin-top: 0;
  }
  .messageBox__iconWrapper {
    padding: 0.62rem;
    width: 2.25rem;
    height: 2.37rem;
  }
  .messageBox__content {
    padding: 0.5rem 1rem;
  }
  .messageBox__title {
    font-size: 1rem;
    padding-bottom: 0.5rem;
  }
  .modal {
    padding: 3rem;
  }
  .modal__wrapper {
    width: 28.75rem;
    height: auto;
  }
  .linux .modal__wrapper {
    width: 29rem;
  }
  .linux .modal--preview .modal__wrapper {
    width: 100%;
  }
  .linux .modal--preview .modal__wrapper {
    width: auto;
  }
  .modal--full {
    padding: 0;
  }
  .modal--full .modal__wrapper {
    width: 54.12rem;
    max-width: 100%;
  }
  .modal--full .modal__content,
  .modal--full .modal__header {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .modal--wide {
    padding: 3rem 0;
  }
  .modal--wide .modal__wrapper {
    width: 54.62rem;
    max-width: 100%;
  }
  .global-help {
    padding: 3rem;
  }
  .global-help__wrapper {
    width: 28.75rem;
    height: auto;
  }
  .linux .global-help__wrapper {
    width: 29rem;
  }
  .linux .global-help--preview .global-help__wrapper {
    width: 100%;
  }
  .linux .global-help--preview .global-help__wrapper {
    width: auto;
  }
  .global-help--full {
    padding: 0;
  }
  .global-help--full .global-help__wrapper {
    width: 54.12rem;
    max-width: 100%;
  }
  .global-help--full .global-help__content,
  .global-help--full .global-help__header {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .global-help--wide {
    padding: 3rem 0;
  }
  .global-help--wide .global-help__wrapper {
    width: 54.62rem;
    max-width: 100%;
  }
  .global-help .global-help__header {
    padding: 0;
  }
  .global-help .global-help__title {
    margin: 2.62rem 0 0;
    font-size: 2rem;
    padding-bottom: 1rem;
  }
  .global-help .global-help__subTitle {
    font-size: 1.5rem;
  }
  .global-help__block + .global-help__block {
    margin-top: 3rem;
  }
  .global-help__overview {
    padding: 2.5rem;
    margin-bottom: 3rem;
  }
  .global-help .interactive-icon__icon {
    margin-top: 0;
  }
  .global-help__item {
    padding-top: 3.12rem;
  }
  .global-help .alignment {
    flex-direction: row;
    align-items: flex-start;
  }
  .global-help .alignment__leftGroup {
    max-width: none;
  }
  .global-help .alignment__leftGroup:first-child {
    flex: 3 1 0px;
  }
  .global-help .alignment__leftGroup:last-child {
    flex: 2 1 0px;
  }
  .global-help .alignment__leftGroup + .alignment__leftGroup {
    margin-left: 0.87rem;
  }
  .global-help .alignment__item {
    padding: 0 1rem 1rem;
  }
  .global-help .searchField {
    left: 2.5rem;
  }
  .sidebar {
    --max-width: 21.87rem;
    min-width: 21.87rem;
    max-width: var(--max-width);
    width: auto;
  }
  .sidebar--maximize {
    max-width: 100%;
  }
  .sidebar__content .tabBar__tabs {
    padding: 0 2.37rem;
  }
  .sidebar__toggleWidth {
    display: flex;
  }
  .sidebar__toggleWidth,
  .sidebar__hide {
    top: 1.18rem;
  }
  .sidebar .tabBar__tab {
    margin-bottom: 0;
  }
  .sidebar .tabBar__tab .interactive {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sidebar .tabBar__tab .interactive-icon[data-icons] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sidebar .tabBar__tab--closable .interactive {
    padding-right: 2.37rem;
  }
  .sidebar .tabBar__tab--closable .interactive-icon[data-icons] {
    padding-right: 2.12rem;
  }
  .sidebar .tabBar__tab--closable .interactive-icon[data-icons] + .interactive-icon--only {
    margin-right: 0.25rem;
    margin-left: -2.13rem;
  }
  .sidebar .tabBar__tab--closable .interactive-icon--only {
    margin-left: -2.13rem;
  }
  .sidebar .tabBar__content .thumbnail {
    margin-left: 0.75rem;
  }
  .sidebar .tabBar----active {
    border-bottom: 0;
  }
  .sidebar .tabBar----active .interactive {
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .sidebar .tabBar----active .interactive-icon[data-icons] {
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .header__heading {
    padding: 0.25rem 1rem;
  }
  .header__navOpen {
    margin-left: -0.5rem;
  }
  .header__content {
    position: absolute;
    right: 0;
    width: auto;
    padding: 1rem;
  }
  .header__content .iframe {
    height: 6rem;
    width: 13.75rem;
  }
  .header__content .iframe----loggedIn {
    width: 8.75rem;
  }
  .header__title--mup .header__maintitle--eop {
    display: inline-block;
  }
  .header__maintitle {
    margin: 0 0.5rem;
  }
  .header__maintitle--mup {
    max-width: 9.68rem;
    font-size: 1.12rem;
    line-height: 1.12rem;
    margin-left: 0;
  }
  .mzb__footerButtons {
    padding-bottom: 0.5rem;
  }
  .mzb__footerButtons .alignment__item {
    margin-bottom: 0.5rem;
  }
  .nav__wrapper {
    max-width: 20rem;
  }
  .videoPlayer {
    content: "videoPlayer.desktop";
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__videoCaption {
    font-size: 1.25rem;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__time {
    font-size: 0.75rem;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__volumeSlider {
    display: block;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__overlay {
    padding: 0.75rem;
  }
  .filter {
    padding-top: 0;
  }
  .filter__searchInput {
    flex: 0 1 18.75rem;
    margin-top: 0.5rem;
  }
  .filter__buttonWrapper {
    margin-top: 0.5rem;
  }
  .filter__clearButton {
    font-size: 1rem;
    margin: 0;
  }
  .filter__addTagButton {
    font-size: 1rem;
    margin: 0 0.5rem;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal {
    padding: 0.5rem 0.25rem;
    display: inline-block;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom {
    top: 100%;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top {
    bottom: 100%;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--right {
    left: 0;
    right: auto;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--left {
    left: auto;
    right: 0;
    text-align: right;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top {
    top: auto;
    bottom: 2.68rem;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::after {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top {
    padding-bottom: 10px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::after {
    bottom: 4px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple204);
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple255);
    bottom: 5px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--center::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--center::before {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--center::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--center::after {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--right::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--right::before {
    right: auto;
    left: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--right::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--right::after {
    right: auto;
    left: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--left::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--left::before {
    left: auto;
    right: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom.flyout--left::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top.flyout--left::after {
    left: auto;
    right: 11px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--top::before {
    transform: rotate(0deg);
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before {
    border-bottom: none;
    top: auto;
    bottom: 4px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--bottom::before {
    bottom: 3px;
  }
  .taskBar--horizontal .taskBar__item--visible\@horizontal .flyout--right {
    text-align: left;
  }
}
@media screen and (max-width: 48rem) {
  .edge.edgehtml .formItem .formItem__fieldItem--size-xxl,
  .edge.edgehtml .formItem .formItem__fieldItem--size-xxxl {
    flex-basis: auto;
  }
  .panel--box .panel__item,
  .panel--center .panel__item {
    width: 100%;
  }
  .objectField {
    grid-template-columns: auto;
  }
  .objectField .interactive {
    max-width: -webkit-max-content;
    max-width: max-content;
  }
}
@media screen and (min-width: 48rem), print {
  .formProgressNav .interactive-icon {
    padding: 0.75rem 1rem;
  }
  .formProgressNav .interactive-icon__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
    margin-left: 0.5rem;
  }
  .formProgressNav__steps {
    padding-left: 1.5rem;
  }
  .formProgressNav__subTitle {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
  }
  .formProgressNav__title {
    font-size: 1rem;
  }
  .formProgressNav__content {
    flex-grow: 1;
    padding-left: 0;
    padding-right: 0;
  }
  .formProgressNav__content__time,
  .formProgressNav__content__save {
    padding: 0;
  }
  .formProgressNav__time {
    margin-left: 1rem;
    margin-right: 4rem;
    flex-basis: 9.37rem;
  }
  .global-search__item:first-child {
    margin-top: 1rem;
  }
  .alignment--buttonGroup .alignment__leftGroup,
  .alignment--buttonGroup .alignment__rightGroup {
    flex-basis: auto;
    max-width: none;
  }
  .alignment--growEqual {
    flex-direction: row;
  }
  .alignment--growEqual .alignment__item--leftMargin-8 {
    margin-left: 0.5rem;
  }
  .alignment--growEqual .alignment__item--leftMargin-16 {
    margin-left: 1rem;
  }
  .tabbarCollapse,
  .tabbar-collapse-fetch {
    content: "tabbarCollapse.desktop";
  }
  .tabbarCollapse__tabs,
  .tabbar-collapse-fetch__tabs {
    display: flex;
  }
  .tabbarCollapse__tab:last-child,
  .tabbar-collapse-fetch__tab:last-child {
    margin-right: 0;
  }
  .tabbarCollapse__head,
  .tabbar-collapse-fetch__head {
    display: none;
  }
  .tabbarCollapse__content,
  .tabbar-collapse-fetch__content {
    padding-left: 0;
    padding-right: 0;
    border: none;
  }
  .tabbarCollapse__item,
  .tabbar-collapse-fetch__item {
    margin-bottom: 0;
  }
  .tabbarCollapse----active,
  .tabbar-collapse-fetch----active {
    border-bottom: 1px solid var(--color-triple221);
  }
  .footer__infoText {
    flex: 0 1 auto;
    border-bottom: none;
  }
  .footer__certificates {
    flex: 1 1 0px;
  }
  .footer__certificateItem {
    width: 25rem;
  }
  .footer__infoGroup,
  .footer__helpGroup {
    padding: 1rem 0.5rem;
  }
  .footer__infoGroup > li,
  .footer__helpGroup > li,
  .footer__copyright > li {
    flex: 0 1 auto;
  }
  .footer__infoGroup > li:not(:last-child),
  .footer__helpGroup > li:not(:last-child),
  .footer__copyright > li:not(:last-child) {
    padding-right: 0.75rem;
  }
  .footer__helpTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    -webkit-clip-path: inset(100%);
            clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
}
@media screen and (max-width: 59.94rem) {
  .formItem {
    content: "formItem.mobile";
    padding: 0.5rem;
    align-items: stretch;
    background: var(--color-formBackground);
    flex-direction: column;
  }
  .formItem .formItem__labelGroup {
    flex-basis: 100%;
  }
  .formItem .formItem__fieldGroup {
    flex-basis: 100%;
  }
  .formItem--login {
    padding: 0;
    background-color: var(--color-formBackground);
  }
  .formItem__lnr {
    background-color: var(--color-formBackground);
    width: auto;
    justify-content: flex-start;
    padding: 0;
  }
  .formItem__lnrDescription {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
  }
  .formItem__line {
    flex-wrap: wrap;
    padding: 0;
  }
  .formItem__line + .formItem__line {
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
  .formItem__line--alternateOrder {
    flex-wrap: nowrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
    margin-left: 0;
  }
  .formItem__line--alternateOrder .formItem__labelGroup {
    flex-basis: auto;
  }
  .formItem__line--alternateOrder .formItem__fieldGroup {
    flex-basis: auto;
  }
  .formItem__line--alternateOrder .formItem__label {
    font-size: inherit;
  }
  .formItem__line--alternateOrder .formItem__fieldGroup {
    margin-left: 0.25rem;
    margin-right: 0.75rem;
  }
  .formItem__line--alternateOrder .formItem__labelGroup {
    flex-basis: 100%;
  }
  .formItem__fieldGroup {
    flex-wrap: wrap;
  }
  .formItem__labelGroup {
    justify-content: flex-start;
    margin-right: 0;
    margin-left: 0;
    padding-top: 0;
  }
  .formItem__labelGroup > .formItem__labelItem:not(:only-child) {
    display: none;
  }
  .formItem__labelItem {
    text-align: left;
  }
  .formItem__labelItem:not(:only-child):not(:last-child):not(._helper-invisible)::after {
    content: ' ';
  }
  .formItem__fieldItem:not(:only-child):not(:last-child) {
    margin-right: 0.31rem;
    margin-bottom: 0.93rem;
  }
  .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) {
    display: block;
    width: 100%;
    padding-left: 0;
  }
  .formItem__fieldGroup > .formItem__labelItem:not(._helper-invisible) > .formItem__label {
    display: block;
  }
  .formItem__fieldItem {
    flex-shrink: 1;
  }
  .formItem__legend {
    padding: 0.25rem 0;
  }
  .formItem__legend + .formItem__line--alternateOrder {
    border: none;
  }
  .formItem__field--checkbox,
  .formItem__field--radio {
    transform: none;
  }
  .formItem__field--textarea-large {
    height: 9.37rem;
  }
  .formItem__tooltip {
    top: auto;
    bottom: -1.44rem;
  }
  .formItem__tooltip::before,
  .formItem__tooltip::after {
    top: auto;
    bottom: 100%;
    border-color: transparent;
  }
  .formItem__tooltip::before {
    border-bottom-color: var(--color-inputBorder);
  }
  .formItem__tooltip::after {
    border-bottom-color: var(--color-tooltipBackground);
  }
  .formItem--layout_0-100 .formItem__line {
    padding-left: 0;
  }
  .formItem--layout_0-100 .formItem__labelGroup,
  .formItem--layout_0-100 .formItem__fieldGroup {
    flex-basis: auto;
  }
  .formItem--layout_0-100 .formItem__fieldItem {
    padding-right: 0;
    flex: 1 0 auto;
  }
  .edge.edgehtml .formItem .formItem__fieldItem--size-xxxxl,
  .edge.edgehtml .formItem .formItem__fieldItem--size-xxxxxl {
    flex-basis: auto;
  }
  .mzb {
    content: "mzb.desktop";
  }
  .mzb table .interactive-icon {
    font-size: 0.87rem;
  }
  .mzb table thead,
  .mzb table col {
    display: none;
  }
  .mzb table td {
    display: block;
  }
  .mzb table tr {
    position: relative;
    display: block;
    margin-bottom: 0.25rem;
  }
  .mzb table tr[data-mzb-row="edit"].mzb__row--show {
    display: block;
  }
  .mzb table tr[data-mzb-row="edit"] .mzb__cell--sourced,
  .mzb table tr[data-mzb-row="edit"] .mzb__cell--nr {
    background: transparent;
    color: inherit;
    border-right: none;
  }
  .mzb table tr[data-invalid-for] {
    margin-bottom: 0.5rem;
  }
  .mzb [data-mzb-row="edit"] .mzb__cellContent--label {
    display: none;
  }
  .mzb [data-mzb-row="edit"] .mzb__cell--sourced .mzb__cellContent--readonly,
  .mzb [data-mzb-row="edit"] .mzb__cell--nr .mzb__cellContent--readonly {
    display: block;
  }
  .mzb [data-mzb-row="edit"] .mzb__cell--inline {
    padding-left: 0.5rem;
  }
  .mzb [data-mzb-row="readonly"] td .mzb__cellContent--edit:not(:last-child) {
    display: block;
  }
  .mzb [data-mzb-row="readonly"] td .mzb__cellContent--edit:not(:last-child) .formItem__fieldGroup {
    display: none;
  }
  .mzb [data-mzb-row="readonly"] td.mzb__cell--separate .mzb__cellContent--edit {
    display: block;
  }
  .mzb [data-mzb-row="readonly"] td.mzb__cell--separate .mzb__cellContent--readonly {
    display: none;
  }
  .mzb__cellNumberAdditional {
    display: inline;
  }
  .mzb__cellContent {
    padding: 0;
  }
  .mzb__cellContent--readonly {
    font-weight: bold;
  }
  .mzb__cellContent--edit {
    font-size: 0.75rem;
  }
  .mzb__cellContent--label {
    display: block;
    font-size: 0.75rem;
    line-height: 135%;
  }
  .mzb__cellContent .formItem__labelGroup {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
    background-color: var(--color-bodyBackground);
  }
  .mzb__combinedContentHead {
    padding-top: 0.5rem;
  }
  .mzb__combinedContentBody .formItem {
    padding: 0;
  }
  .mzb__combinedContentBody .formItem__wrapper,
  .mzb__combinedContentBody .formItem__lnr {
    background: var(--color-bodyBackground);
  }
  .mzb__cell {
    padding-bottom: 1rem;
  }
  .mzb__cell--sourced,
  .mzb__cell--nr {
    padding-top: 1rem;
    padding-bottom: 0;
    font-weight: normal;
  }
  .mzb__cell--sourced .mzb__cellContent,
  .mzb__cell--nr .mzb__cellContent {
    text-align: left;
  }
  .mzb__cell--sourced .mzb__cellContent--readonly,
  .mzb__cell--nr .mzb__cellContent--readonly {
    padding-bottom: 0.5rem;
  }
  .mzb__cell--sourced .mzb__cellContent--edit,
  .mzb__cell--nr .mzb__cellContent--edit {
    font-size: 0.75rem;
    line-height: 135%;
    color: var(--color-triple114);
    padding-bottom: 0;
  }
  .mzb__cell--sourced {
    position: absolute;
    right: 0;
    padding: 1rem;
  }
  .mzb__cell--sourced + .mzb__cell--nr {
    padding-right: 2rem;
  }
  .mzb__cell--inline,
  .mzb__cell--combined {
    padding-top: 0;
  }
  .mzb__cell--buttons {
    text-align: left;
  }
  .mzb__cell--separate {
    padding-top: 0;
  }
  .mzb__cell--separate .panel .panel__itemKey,
  .mzb__cell--separate .panel .panel__itemDescription {
    flex-basis: 100%;
    width: 100%;
  }
  .mzb__cell--separate .panel__item {
    width: 100%;
    margin-bottom: 0;
  }
  .mzb__cell--separate .panel__itemDescription {
    font-size: 0.87rem;
  }
  .mzb__cell--separate .panel--list .panel__item {
    padding-left: 0;
    padding-right: 0;
  }
  .mzb .toggleBox .mzb__groupContent {
    padding-left: 0.5rem;
  }
  .mzb .objectField .interactive {
    font-size: 0.87rem;
  }
  .panel {
    align-items: stretch;
    flex-direction: column;
  }
  .panel .panel__itemKey {
    flex-basis: 100%;
  }
  .panel .panel__itemDescription {
    flex-basis: 100%;
  }
  .panel--overview .panel__itemContent {
    margin: 0 0 1.5rem;
  }
  .panel__lnr {
    background-color: var(--color-triple242);
    width: auto;
    justify-content: flex-start;
    padding-top: 0;
  }
  .panel__lnrDescription {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
  }
  .panel--list .panel__item {
    padding: 0.5rem;
    flex-direction: column;
  }
  .panel--list .panel__itemKey,
  .panel--list .panel__itemDescription {
    width: 100%;
  }
  .panel--list .panel__itemKey {
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.25;
  }
  .panel--list .panel__itemContent {
    padding: 0;
    flex-direction: column;
    margin-left: 0;
  }
}
@media screen and (min-width: 60rem), print {
  .global-search {
    padding: 3rem;
  }
  .global-search__wrapper {
    width: 28.75rem;
    height: auto;
  }
  .linux .global-search__wrapper {
    width: 29rem;
  }
  .linux .global-search--preview .global-search__wrapper {
    width: 100%;
  }
  .linux .global-search--preview .global-search__wrapper {
    width: auto;
  }
  .global-search--full {
    padding: 0;
  }
  .global-search--full .global-search__wrapper {
    width: 54.12rem;
    max-width: 100%;
  }
  .global-search--full .global-search__content,
  .global-search--full .global-search__header {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .global-search--wide {
    padding: 3rem 0;
  }
  .global-search--wide .global-search__wrapper {
    width: 54.62rem;
    max-width: 100%;
  }
  .global-search .global-search__header {
    padding: 0 0 2rem;
  }
  .global-search .global-search__title {
    font-size: 2rem;
  }
  .global-search__content {
    padding: 0 2.5rem 2.5rem;
  }
  .global-search .searchField {
    background: var(--color-formBackground);
    padding: 2.5rem;
  }
  .global-search .tabbarCollapse {
    margin-top: 2rem;
  }
  .global-search__item {
    margin-bottom: 2rem;
  }
  .global-search__item:first-child {
    margin-top: 1.5rem;
  }
  .global-search__itemHead {
    font-size: 1rem;
  }
  .captcha-form__row {
    padding-left: 20.62rem;
  }
  .captcha-form .figure img {
    width: auto;
    margin: 0;
  }
  .matrix__labelGroup {
    display: flex;
    background: var(--color-triple221);
  }
  .matrix__labelGroup--hyphens {
    -ms-hyphens: auto;
        hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  @supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
    .matrix__labelGroup--hyphens {
      word-break: break-word;
    }
  }
  .android.chrome .matrix__labelGroup--hyphens {
    word-break: break-word;
  }
  .matrix__labels {
    display: flex;
    flex: 1 1 auto;
  }
  .matrix__labelsItem {
    -ms-hyphens: auto;
        hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.87rem;
    width: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  @supports not (((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) or (-webkit-hyphens: auto)) {
    .matrix__labelsItem {
      word-break: break-word;
    }
  }
  .android.chrome .matrix__labelsItem {
    word-break: break-word;
  }
  .matrix .formItem {
    border-top: 2px solid var(--color-bodyBackground);
  }
  .matrix .formItem__wrapper {
    flex: 1 0 0px;
  }
  .matrix .formItem__fieldItem--empty {
    display: block;
  }
  .matrix .formItem__fieldItem--rowText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding-right: 0.5rem;
    font-size: 0.87rem;
  }
  .matrix .formItem__fieldGroup {
    padding: 0.5rem;
  }
  .matrix .formItem__legend {
    margin: 0.5rem;
    margin-bottom: 0;
    margin-top: 0.12rem;
    padding-left: 0;
    flex: 1 1 auto;
  }
  .matrix .formItem__line {
    padding-top: 0;
    padding-bottom: 0;
  }
  .matrix--right-align .matrix__labels {
    justify-content: flex-end;
  }
  .matrix--right-align .matrix__labelsItem {
    width: 12.5rem;
  }
  .matrix--right-align .formItem__fieldGroup {
    flex: 0 1 auto;
  }
  .matrix--right-align .formItem__fieldItem {
    width: 12rem;
  }
  .matrix--right-align .formItem__line {
    justify-content: flex-end;
  }
  .matrix--eXML .formItem {
    border-top: 2px solid var(--color-triple242);
  }
  .firefox .matrix .formItem__field--select {
    padding: 0.25rem 0.25rem 0.31rem;
  }
  .edge.edgehtml .matrix__labelGroup--hyphens {
    word-break: break-all;
  }
  ._helper-marginTop {
    margin-top: 2rem;
  }
  ._helper-marginBottom {
    margin-bottom: 2rem;
  }
  ._helper-subTitle {
    font-size: 1.25rem;
  }
  .footer {
    content: "desktop";
  }
  .footer__certificatesList {
    flex-flow: wrap row;
  }
  .footer__certificateItem {
    width: 20rem;
  }
  ul li.footer__certificateItem {
    margin: 0 1rem 1rem 0;
  }
  .footer__certificateItem + .footer__certificateItem {
    margin: 0 1rem 1rem 0;
  }
  .breadcrumb__listItem:last-child {
    display: block;
  }
  .searchField .searchField__submit .interactive-icon {
    width: auto;
  }
  .attachments__labelGroup {
    display: table-header-group;
  }
  .attachments__labelGroupItem {
    display: table-cell;
    padding: 0.5rem;
  }
  .attachments__labelGroupItem:not(:first-child),
  .attachments__labelGroupItem--topic {
    background: var(--color-formBackground);
  }
  .attachments__legend {
    background: var(--color-legendBackground);
  }
  .attachments tbody .attachments__line:nth-child(odd) {
    background: var(--color-triple248);
  }
  .attachments__legend,
  .attachments__lineItem {
    display: table-cell;
  }
  .attachments__legend {
    width: 40%;
  }
  .attachments .labelInput label {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
  }
  .attachments .labelInput label:hover {
    background: var(--color-legendBackground);
    cursor: pointer;
  }
  .attachments .labelInput input {
    margin: 0;
  }
  .attachments .labelInput__text {
    display: none;
  }
  .labelInput input {
    width: auto;
  }
  .labelInput label {
    font-size: 0.87rem;
  }
  .labelInput input:not(:first-child) {
    margin: 0 0 0 1rem;
  }
  .tile__head {
    padding: 1rem;
  }
  .tile__body {
    padding: 0 1rem 1rem;
  }
  .tile-deluxe__head,
  .tile-deluxe__footer {
    padding: 1rem;
  }
  .tile-deluxe__body {
    padding: 0 1rem 1.25rem;
  }
  .dialog-tax-id__taxId {
    flex-direction: row;
    padding: 0;
  }
  .dialog-tax-id__taxIdContent {
    display: inline-flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: baseline;
    padding: 0.5rem 1rem 0.5rem 0;
  }
  .dialog-tax-id--layout_20-80 .dialog-tax-id__taxIdFields {
    flex-basis: 41.3rem;
  }
  .dialog-tax-id--layout_30-70 .dialog-tax-id__taxIdFields {
    flex-basis: 36.13rem;
  }
  .dialog-tax-id--layout_40-60 .dialog-tax-id__taxIdFields {
    flex-basis: 30.97rem;
  }
  .dialog-tax-id--layout_50-50 .dialog-tax-id__taxIdFields {
    flex-basis: 25.81rem;
  }
  .dialog-tax-id__taxIdLabel {
    flex-grow: 1;
    flex-basis: 0;
    padding-right: 1rem;
    text-align: right;
  }
  .dialog-tax-id__taxIdFields {
    flex-basis: 36.12rem;
  }
  .dialog-tax-id__taxIdLnr {
    width: 2.25rem;
    background-color: var(--color-infoBackground);
    justify-content: flex-end;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
  }
  .dialog-tax-id__taxIdLnrDescription {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    -webkit-clip-path: inset(100%);
            clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  .dialog-tax-id .panel__lnr {
    padding-top: 1.12rem;
  }
  .formNavigation__list {
    padding-left: 0.5rem;
  }
  .formNavigation__listItem {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .formNavigation__item {
    margin-left: 1rem;
    font-size: 1rem;
  }
  .formNavigation__item:only-child {
    margin-left: 2rem;
  }
  .formNavigation--subPages .formNavigation__listItem {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .formNavigation--subPages .formNavigation__listItem:first-child {
    padding-top: 0.5rem;
  }
  .formNavigation--subPages .formNavigation__item {
    margin-left: 0;
  }
  .formNavigation--subPages .formNavigation__bullet {
    display: inline;
    margin-left: 1rem;
    margin-right: 0.12rem;
  }
  .formNavigation--subPages .formNavigation__bullet:first-child {
    margin-left: 2rem;
  }
  .formNavigation--subPages .formNavigation__bullet:first-child + .formNavigation__item {
    margin-left: 0;
  }
  .pagination__pagenumber {
    flex-direction: row;
  }
  .pagination__currentpages {
    margin-right: 3px;
  }
  .toggleBox__headButton,
  .accordion__headButton {
    font-size: 1rem;
  }
  .toggleBox__headButton .toggleBox__subTitle,
  .accordion__head .accordion__subTitle {
    font-size: 0.87rem;
  }
  .toggleBox--primary > .toggleBox__content .formItem,
  .accordion--primary .accordion__content .formItem {
    margin-right: 0;
  }
  .toggleBox--primary > .toggleBox__content .formItem--layout_0-100 .formItem__line,
  .accordion--primary .accordion__content .formItem--layout_0-100 .formItem__line {
    padding-left: 0;
    padding-right: 0;
  }
  .toggleBox--primary > .toggleBox__content .formItem--layout_0-100 .formItem__fieldItem,
  .accordion--primary .accordion__content .formItem--layout_0-100 .formItem__fieldItem {
    padding-right: 0;
  }
  .toggleBox--compact .toggleBox__headButton,
  .accordion--compact .accordion__headButton {
    padding: 1rem;
    font-size: 1.12rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .toggleBox--simple .toggleBox__headButton,
  .toggleBox--light .toggleBox__headButton,
  .toggleBox--primary .toggleBox__headButton,
  .accordion--simple .accordion__headButton,
  .accordion--primary .accordion__headButton {
    padding: 0.5rem 0;
  }
  .toggleBox--small .toggleBox__headButton {
    font-size: 0.87rem;
  }
  .toggleBox--simple .toggleBox__headButton .icon,
  .toggleBox--light .toggleBox__headButton .icon,
  .toggleBox--compact .toggleBox__headButton .icon,
  .toggleBox--primary .toggleBox__headButton .icon,
  .accordion--simple .accordion__headButton .icon,
  .accordion--compact .accordion__headButton .icon,
  .accordion--primary .accordion__headButton .icon {
    margin-right: 0.75rem;
    transform: scale(1.5) translate(25%, 0);
  }
  .toggleBox--simple .toggleBox__headButton .icon--rotate90,
  .toggleBox--light .toggleBox__headButton .icon--rotate90,
  .toggleBox--compact .toggleBox__headButton .icon--rotate90,
  .toggleBox--primary .toggleBox__headButton .icon--rotate90,
  .accordion--simple .accordion__headButton .icon--rotate90,
  .accordion--compact .accordion__headButton .icon--rotate90,
  .accordion--primary .accordion__headButton .icon--rotate90 {
    transform: rotate(90deg) scale(1.5) translate(0%, -25%);
  }
  .toggleBox--primary > .toggleBox__content,
  .accordion--primary .accordion__content {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .toggleBox--compact > .toggleBox__content,
  .accordion--compact .accordion__content {
    padding: 1rem 1rem 1rem 2.75rem;
  }
  .toggleBox--noMargin,
  .accordion--compact .accordion__content--noMargin {
    margin-left: -2.75rem;
    margin-right: -1rem;
  }
  .toggleBox--primary > .toggleBox__content,
  .accordion--primary .accordion__content {
    padding-left: 1.75rem;
  }
  .toggleBox--noMargin,
  .accordion--primary .accordion__content--noMargin {
    margin-left: -1.75rem;
    margin-right: -0.5rem;
  }
  .toggleList .toggleList__item .toggleList__textWrapper {
    padding-left: 28px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 44px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 60px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 76px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 92px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 108px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 124px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 140px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 156px;
  }
  .toggleList .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__item .toggleList__textWrapper {
    padding-left: 172px;
  }
  .toggleList__textWrapper {
    padding-right: 1rem;
  }
  .accordion--displayInput .accordion__head {
    display: flex;
    align-items: baseline;
  }
  .accordion--displayInput .accordion__headInput {
    left: 2px;
  }
  .accordion--displayInput .accordion__headButton {
    padding-left: 2.5%;
    flex-basis: 100%;
  }
  .accordion--displayInput.accordion--simple .accordion__headInput,
  .accordion--displayInput.accordion--primary .accordion__headInput {
    top: 12px;
    left: 1%;
  }
  .accordion--displayInput.accordion--simple .accordion__headButton,
  .accordion--displayInput.accordion--primary .accordion__headButton {
    padding-left: 3%;
  }
  .accordion--displayInput.accordion--compact .accordion__headInput {
    top: 22px;
    left: 2.5%;
  }
  .accordion--displayInput.accordion--compact .accordion__headButton {
    padding-left: 5%;
  }
  .android .accordion.accordion--displayInput .accordion__headInput {
    top: 10px;
  }
  .android .accordion.accordion--displayInput.accordion--simple .accordion__headInput,
  .android .accordion.accordion--displayInput.accordion--compact .accordion__headInput,
  .android .accordion.accordion--displayInput.accordion--primary .accordion__headInput {
    top: 18px;
  }
  .login-box {
    flex-direction: row;
  }
  .login-box__linkBar {
    flex: 1 0 0px;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-triple248);
    border: 1px solid var(--color-triple221);
  }
  .login-box .interactive-icon {
    padding: 1rem;
  }
  .login-box .interactive-icon__icon {
    transform: scale(1.5) translateX(25%);
    margin-right: 1.5rem;
  }
  .login-box .interactive-icon__text {
    display: block;
    padding-top: 0.25rem;
  }
  .login-box__link {
    border: 0;
    margin: 0;
    border-bottom: 1px solid var(--color-triple221);
  }
  .login-box__link--active {
    background: var(--color-bodyBackground);
    border-left: 0.25rem solid var(--color-active);
    box-shadow: 2px 0 0 0 var(--color-bodyBackground);
  }
  .login-box__link--active .interactive-icon {
    color: var(--color-active-dark);
  }
  .login-box__link--active .interactive-icon__wrap {
    margin-left: -0.25rem;
  }
  .login-box__content {
    flex: 2 0 0px;
    border: 1px solid var(--color-triple221);
    border-left: 0;
    padding: 2.5rem;
    padding-bottom: 16px;
  }
  .login-box__footnotes {
    margin-top: 3.5rem;
  }
  .login-box--noLinkBar .login-box__content {
    border-left: 1px solid var(--color-triple221);
  }
  .file-chooser__filePath {
    margin-right: 0.25rem;
    margin-bottom: 0;
    flex-basis: 100%;
  }
  .file-chooser__wrapper {
    display: flex;
    align-items: stretch;
    margin: 0.25rem 0 0.5rem;
  }
  .file-chooser .interactive {
    margin-top: 0;
  }
  .file-upload__fileName {
    margin-right: 0.25rem;
    flex-basis: 100%;
  }
  .file-upload__wrapper {
    display: flex;
    align-items: stretch;
    margin: 0.25rem 0 0.5rem;
  }
  .file-upload .interactive {
    margin-top: 0;
  }
  .sidebar {
    --max-width: 21.87rem;
  }
  .sidebar.sidebar .sidebar__hide .interactive-icon__icon {
    margin-top: 0;
  }
  .sidebar--maximize {
    max-width: 51.62rem;
  }
  .interactive-icon__icon {
    margin-top: 0.18rem;
  }
  .interactive-icon--only .interactive-icon__icon {
    margin-top: 0;
  }
  .table-collapse {
    content: "tableCollapse.desktop";
  }
  .table-collapse thead {
    display: table-header-group;
  }
  .table-collapse tbody td {
    border-bottom: 3px solid var(--color-bodyBackground);
    display: table-cell;
    padding: 0.5rem;
    font-weight: normal;
  }
  .table-collapse tbody td .table-collapse__cellTitle {
    display: none;
  }
  .table-collapse tbody .table-collapse__row--highlight td {
    border-top: 0.25rem solid var(--color-active);
    border-bottom: 0.25rem solid var(--color-active);
    border-right: 0;
    border-left: 0;
    padding-left: 0.5rem;
  }
  .table-collapse tbody .table-collapse__row--highlight td:last-child {
    border-right: 0.25rem solid var(--color-active);
  }
  .table-collapse tbody .table-collapse__row--highlight td:first-child {
    border-left: 0.25rem solid var(--color-active);
  }
  .table-collapse tbody .table-collapse__row--highlight td .labelInput label {
    padding-left: 0.37rem;
  }
  .table-collapse tbody .table-collapse__row--highlight + .table-collapse__row td {
    border-top: 3px solid var(--color-bodyBackground);
  }
  .table-collapse tbody .table-collapse__row--open td {
    border-bottom: none;
  }
  .table-collapse tbody .table-collapse__row--details .table-collapse__cell--gapRight {
    border-top: none;
    background-color: var(--color-triple248);
  }
  .table-collapse tbody .table-collapse__row--details td {
    background-color: var(--color-triple242);
    border-top: 1px solid var(--color-triple204);
    border-bottom: 3px solid var(--color-bodyBackground);
    padding-left: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.81rem;
  }
  .table-collapse tbody .table-collapse__row--spacing-6 td {
    border-bottom: 0.37rem solid var(--color-bodyBackground);
  }
  .table-collapse tbody .table-collapse__cell--gapRight {
    border-right: 3px solid var(--color-bodyBackground);
  }
  .table-collapse tbody .table-collapse__toggleWrapper {
    border: none;
  }
  .table-collapse tbody .table-collapse__toggleWrapper .interactive-icon {
    margin-top: -0.5rem;
    margin-left: auto;
    padding: 0.5rem;
  }
  .table-collapse tbody .table-collapse__toggleWrapper .interactive-icon .interactive-icon__text {
    display: none;
  }
  .table-collapse tbody .table-collapse__toggleWrapper--alwaysShowText .interactive-icon {
    margin-left: 0;
  }
  .table-collapse tbody .table-collapse__toggleWrapper--alwaysShowText .interactive-icon .interactive-icon__text {
    display: block;
  }
  .table-collapse td.table-collapse--txtRight,
  .table-collapse th.table-collapse--txtRight {
    text-align: right;
  }
  .table-collapse td.table-collapse--txtCenter,
  .table-collapse th.table-collapse--txtCenter {
    text-align: center;
  }
  .table-collapse .labelInput label {
    width: 2rem;
    padding-left: 0.62rem;
    display: inline-block;
  }
  .table-collapse .labelInput label:hover {
    background: rgba(0,0,0,0.08);
    cursor: pointer;
  }
  .table-collapse .labelInput input {
    margin: 0;
  }
  .table-collapse tr .interactive-icon__icon {
    margin-top: 0.06rem;
  }
  .table-collapse tr .interactive-icon--only {
    margin-bottom: 0.18rem;
  }
  .table-collapse tr .labelInput__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    -webkit-clip-path: inset(100%);
            clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }
  .table-collapse__selectAll {
    display: none;
  }
  .table-collapse--fixed .table-collapse__thWidth-1 {
    width: 1%;
  }
  .table-collapse--fixed .table-collapse__thWidth-2 {
    width: 2%;
  }
  .table-collapse--fixed .table-collapse__thWidth-3 {
    width: 3%;
  }
  .table-collapse--fixed .table-collapse__thWidth-4 {
    width: 4%;
  }
  .table-collapse--fixed .table-collapse__thWidth-5 {
    width: 5%;
  }
  .table-collapse--fixed .table-collapse__thWidth-6 {
    width: 6%;
  }
  .table-collapse--fixed .table-collapse__thWidth-7 {
    width: 7%;
  }
  .table-collapse--fixed .table-collapse__thWidth-8 {
    width: 8%;
  }
  .table-collapse--fixed .table-collapse__thWidth-9 {
    width: 9%;
  }
  .table-collapse--fixed .table-collapse__thWidth-10 {
    width: 10%;
  }
  .table-collapse--fixed .table-collapse__thWidth-11 {
    width: 11%;
  }
  .table-collapse--fixed .table-collapse__thWidth-12 {
    width: 12%;
  }
  .table-collapse--fixed .table-collapse__thWidth-13 {
    width: 13%;
  }
  .table-collapse--fixed .table-collapse__thWidth-14 {
    width: 14%;
  }
  .table-collapse--fixed .table-collapse__thWidth-15 {
    width: 15%;
  }
  .table-collapse--fixed .table-collapse__thWidth-16 {
    width: 16%;
  }
  .table-collapse--fixed .table-collapse__thWidth-17 {
    width: 17%;
  }
  .table-collapse--fixed .table-collapse__thWidth-18 {
    width: 18%;
  }
  .table-collapse--fixed .table-collapse__thWidth-19 {
    width: 19%;
  }
  .table-collapse--fixed .table-collapse__thWidth-20 {
    width: 20%;
  }
  .table-collapse--fixed .table-collapse__thWidth-21 {
    width: 21%;
  }
  .table-collapse--fixed .table-collapse__thWidth-22 {
    width: 22%;
  }
  .table-collapse--fixed .table-collapse__thWidth-23 {
    width: 23%;
  }
  .table-collapse--fixed .table-collapse__thWidth-24 {
    width: 24%;
  }
  .table-collapse--fixed .table-collapse__thWidth-25 {
    width: 25%;
  }
  .table-collapse--fixed .table-collapse__thWidth-26 {
    width: 26%;
  }
  .table-collapse--fixed .table-collapse__thWidth-27 {
    width: 27%;
  }
  .table-collapse--fixed .table-collapse__thWidth-28 {
    width: 28%;
  }
  .table-collapse--fixed .table-collapse__thWidth-29 {
    width: 29%;
  }
  .table-collapse--fixed .table-collapse__thWidth-30 {
    width: 30%;
  }
  .table-collapse--fixed .table-collapse__thWidth-31 {
    width: 31%;
  }
  .table-collapse--fixed .table-collapse__thWidth-32 {
    width: 32%;
  }
  .table-collapse--fixed .table-collapse__thWidth-33 {
    width: 33%;
  }
  .table-collapse--fixed .table-collapse__thWidth-34 {
    width: 34%;
  }
  .table-collapse--fixed .table-collapse__thWidth-35 {
    width: 35%;
  }
  .table-collapse--fixed .table-collapse__thWidth-36 {
    width: 36%;
  }
  .table-collapse--fixed .table-collapse__thWidth-37 {
    width: 37%;
  }
  .table-collapse--fixed .table-collapse__thWidth-38 {
    width: 38%;
  }
  .table-collapse--fixed .table-collapse__thWidth-39 {
    width: 39%;
  }
  .table-collapse--fixed .table-collapse__thWidth-40 {
    width: 40%;
  }
  .table-collapse--fixed .table-collapse__thWidth-41 {
    width: 41%;
  }
  .table-collapse--fixed .table-collapse__thWidth-42 {
    width: 42%;
  }
  .table-collapse--fixed .table-collapse__thWidth-43 {
    width: 43%;
  }
  .table-collapse--fixed .table-collapse__thWidth-44 {
    width: 44%;
  }
  .table-collapse--fixed .table-collapse__thWidth-45 {
    width: 45%;
  }
  .table-collapse--fixed .table-collapse__thWidth-46 {
    width: 46%;
  }
  .table-collapse--fixed .table-collapse__thWidth-47 {
    width: 47%;
  }
  .table-collapse--fixed .table-collapse__thWidth-48 {
    width: 48%;
  }
  .table-collapse--fixed .table-collapse__thWidth-49 {
    width: 49%;
  }
  .table-collapse--fixed .table-collapse__thWidth-50 {
    width: 50%;
  }
  .table-collapse--fixed .table-collapse__thWidth-51 {
    width: 51%;
  }
  .table-collapse--fixed .table-collapse__thWidth-52 {
    width: 52%;
  }
  .table-collapse--fixed .table-collapse__thWidth-53 {
    width: 53%;
  }
  .table-collapse--fixed .table-collapse__thWidth-54 {
    width: 54%;
  }
  .table-collapse--fixed .table-collapse__thWidth-55 {
    width: 55%;
  }
  .table-collapse--fixed .table-collapse__thWidth-56 {
    width: 56%;
  }
  .table-collapse--fixed .table-collapse__thWidth-57 {
    width: 57%;
  }
  .table-collapse--fixed .table-collapse__thWidth-58 {
    width: 58%;
  }
  .table-collapse--fixed .table-collapse__thWidth-59 {
    width: 59%;
  }
  .table-collapse--fixed .table-collapse__thWidth-60 {
    width: 60%;
  }
  .table-collapse--fixed .table-collapse__thWidth-61 {
    width: 61%;
  }
  .table-collapse--fixed .table-collapse__thWidth-62 {
    width: 62%;
  }
  .table-collapse--fixed .table-collapse__thWidth-63 {
    width: 63%;
  }
  .table-collapse--fixed .table-collapse__thWidth-64 {
    width: 64%;
  }
  .table-collapse--fixed .table-collapse__thWidth-65 {
    width: 65%;
  }
  .table-collapse--fixed .table-collapse__thWidth-66 {
    width: 66%;
  }
  .table-collapse--fixed .table-collapse__thWidth-67 {
    width: 67%;
  }
  .table-collapse--fixed .table-collapse__thWidth-68 {
    width: 68%;
  }
  .table-collapse--fixed .table-collapse__thWidth-69 {
    width: 69%;
  }
  .table-collapse--fixed .table-collapse__thWidth-70 {
    width: 70%;
  }
  .table-collapse--fixed .table-collapse__thWidth-71 {
    width: 71%;
  }
  .table-collapse--fixed .table-collapse__thWidth-72 {
    width: 72%;
  }
  .table-collapse--fixed .table-collapse__thWidth-73 {
    width: 73%;
  }
  .table-collapse--fixed .table-collapse__thWidth-74 {
    width: 74%;
  }
  .table-collapse--fixed .table-collapse__thWidth-75 {
    width: 75%;
  }
  .table-collapse--fixed .table-collapse__thWidth-76 {
    width: 76%;
  }
  .table-collapse--fixed .table-collapse__thWidth-77 {
    width: 77%;
  }
  .table-collapse--fixed .table-collapse__thWidth-78 {
    width: 78%;
  }
  .table-collapse--fixed .table-collapse__thWidth-79 {
    width: 79%;
  }
  .table-collapse--fixed .table-collapse__thWidth-80 {
    width: 80%;
  }
  .table-collapse--fixed .table-collapse__thWidth-81 {
    width: 81%;
  }
  .table-collapse--fixed .table-collapse__thWidth-82 {
    width: 82%;
  }
  .table-collapse--fixed .table-collapse__thWidth-83 {
    width: 83%;
  }
  .table-collapse--fixed .table-collapse__thWidth-84 {
    width: 84%;
  }
  .table-collapse--fixed .table-collapse__thWidth-85 {
    width: 85%;
  }
  .table-collapse--fixed .table-collapse__thWidth-86 {
    width: 86%;
  }
  .table-collapse--fixed .table-collapse__thWidth-87 {
    width: 87%;
  }
  .table-collapse--fixed .table-collapse__thWidth-88 {
    width: 88%;
  }
  .table-collapse--fixed .table-collapse__thWidth-89 {
    width: 89%;
  }
  .table-collapse--fixed .table-collapse__thWidth-90 {
    width: 90%;
  }
  .table-collapse--fixed .table-collapse__thWidth-91 {
    width: 91%;
  }
  .table-collapse--fixed .table-collapse__thWidth-92 {
    width: 92%;
  }
  .table-collapse--fixed .table-collapse__thWidth-93 {
    width: 93%;
  }
  .table-collapse--fixed .table-collapse__thWidth-94 {
    width: 94%;
  }
  .table-collapse--fixed .table-collapse__thWidth-95 {
    width: 95%;
  }
  .table-collapse--fixed .table-collapse__thWidth-96 {
    width: 96%;
  }
  .table-collapse--fixed .table-collapse__thWidth-97 {
    width: 97%;
  }
  .table-collapse--fixed .table-collapse__thWidth-98 {
    width: 98%;
  }
  .table-collapse--fixed .table-collapse__thWidth-99 {
    width: 99%;
  }
  .table-collapse--fixed .table-collapse__thWidth-100 {
    width: 100%;
  }
  .table-collapse--fixed .table-collapse__el {
    table-layout: fixed;
  }
  .validation-error {
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
  }
  .formItem__line + .validation-error {
    margin-top: 0;
  }
  .validation-error:last-child {
    margin-bottom: 0.5rem;
  }
  .validation-error--mzb {
    padding: 0;
    margin: 0;
  }
  .validation-error--mzb:last-child {
    margin-bottom: 0;
  }
  .tabBar__tab,
  .tabbarCollapse__tab,
  .tabbar-collapse-fetch__tab {
    margin-bottom: 0;
  }
  .tabBar__tab .interactive,
  .tabbarCollapse__tab .interactive,
  .tabbar-collapse-fetch__tab .interactive {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tabBar__tab .interactive-icon[data-icons],
  .tabbarCollapse__tab .interactive-icon[data-icons],
  .tabbar-collapse-fetch__tab .interactive-icon[data-icons] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .tabBar__tab--closable .interactive,
  .tabbarCollapse__tab--closable .interactive,
  .tabbar-collapse-fetch__tab--closable .interactive {
    padding-right: 2.37rem;
  }
  .tabBar__tab--closable .interactive-icon[data-icons],
  .tabbarCollapse__tab--closable .interactive-icon[data-icons],
  .tabbar-collapse-fetch__tab--closable .interactive-icon[data-icons] {
    padding-right: 2.12rem;
  }
  .tabBar__tab--closable .interactive-icon[data-icons] + .interactive-icon--only,
  .tabbarCollapse__tab--closable .interactive-icon[data-icons] + .interactive-icon--only,
  .tabbar-collapse-fetch__tab--closable .interactive-icon[data-icons] + .interactive-icon--only {
    margin-right: 0.25rem;
    margin-left: -2.13rem;
  }
  .tabBar__tab--closable .interactive-icon--only,
  .tabbarCollapse__tab--closable .interactive-icon--only,
  .tabbar-collapse-fetch__tab--closable .interactive-icon--only {
    margin-left: -2.13rem;
  }
  .tabBar__content .thumbnail,
  .tabbarCollapse__content .thumbnail,
  .tabbar-collapse-fetch__content .thumbnail {
    margin-left: 0.75rem;
  }
  .tabBar----active,
  .tabbarCollapse----active,
  .tabbar-collapse-fetch----active {
    border-bottom: 0;
  }
  .tabBar----active .interactive,
  .tabbarCollapse----active .interactive,
  .tabbar-collapse-fetch----active .interactive {
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .tabBar----active .interactive-icon[data-icons],
  .tabbarCollapse----active .interactive-icon[data-icons],
  .tabbar-collapse-fetch----active .interactive-icon[data-icons] {
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .tabbarCollapse,
  .tabbar-collapse-fetch {
    content: "tabbarCollapse.desktop";
  }
  .tabbarCollapse__tabs,
  .tabbar-collapse-fetch__tabs {
    display: flex;
  }
  .tabbarCollapse__tab:last-child,
  .tabbar-collapse-fetch__tab:last-child {
    margin-right: 0;
  }
  .tabbarCollapse__head,
  .tabbar-collapse-fetch__head {
    display: none;
  }
  .tabbarCollapse__content,
  .tabbar-collapse-fetch__content {
    padding-left: 0;
    padding-right: 0;
    border: none;
  }
  .tabbarCollapse__item,
  .tabbar-collapse-fetch__item {
    margin-bottom: 0;
  }
  .tabbarCollapse----active,
  .tabbar-collapse-fetch----active {
    border-bottom: 0;
  }
  .definitionBox__content {
    margin-right: -2rem;
  }
  .definitionBox__content > * {
    margin-right: 2rem;
  }
  .validationResultsList {
    content: "validationResultsList.desktop";
    padding: 1rem 2rem 1rem 0;
  }
  .validationResultsList .toggleBox {
    margin-left: 1.5rem;
  }
  .formBox--tinyTitle h1.formBox__title {
    font-size: 1rem;
  }
  h1 .interactive-help,
  h2 .interactive-help,
  h3 .interactive-help,
  h4 .interactive-help {
    vertical-align: baseline;
  }
  h1 .interactive-help {
    padding: 0.25rem;
  }
  h2 .interactive-help {
    padding: 0.06rem;
  }
  .interactive-sourced--skyscraper\@desktop {
    height: 2.125rem;
    width: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
    border-radius: 0;
    overflow: hidden;
  }
  .ios .interactive-sourced--skyscraper\@desktop {
    height: 2.18rem;
  }
  .interactive-sourced--skyscraper\@desktop:focus,
  .interactive-sourced--skyscraper\@desktop:hover {
    border-radius: 0;
    border-color: transparent;
    outline-width: 1px;
    outline-color: currentColor;
  }
  .interactive-sourced--skyscraper\@desktop:focus {
    outline-style: dotted;
  }
  .interactive-sourced--skyscraper\@desktop:hover {
    outline-style: solid;
  }
  .interactive-sourced--multiLine\@desktop {
    height: 100%;
    align-items: flex-start;
    padding-top: 3px;
    margin: 0;
    padding-top: 1rem;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom::before,
  .flyout--trigger\@12\@desktop.flyout--bottom::after {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom {
    padding-top: 10px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom::before,
  .flyout--trigger\@12\@desktop.flyout--bottom::after {
    top: 4px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-triple204);
  }
  .flyout--trigger\@12\@desktop.flyout--bottom::after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-triple255);
    top: 5px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--center::before {
    margin-left: 50%;
    left: -6px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--center::after {
    margin-left: 50%;
    left: -6px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--right::before {
    right: auto;
    left: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--right::after {
    right: auto;
    left: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--left::before {
    left: auto;
    right: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--bottom.flyout--left::after {
    left: auto;
    right: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--top::before,
  .flyout--trigger\@12\@desktop.flyout--top::after {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .flyout--trigger\@12\@desktop.flyout--top {
    padding-bottom: 10px;
  }
  .flyout--trigger\@12\@desktop.flyout--top::before,
  .flyout--trigger\@12\@desktop.flyout--top::after {
    bottom: 4px;
  }
  .flyout--trigger\@12\@desktop.flyout--top::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple204);
  }
  .flyout--trigger\@12\@desktop.flyout--top::after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple255);
    bottom: 5px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--center::before {
    margin-left: 50%;
    left: -6px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--center::after {
    margin-left: 50%;
    left: -6px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--right::before {
    right: auto;
    left: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--right::after {
    right: auto;
    left: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--left::before {
    left: auto;
    right: 1px;
  }
  .flyout--trigger\@12\@desktop.flyout--top.flyout--left::after {
    left: auto;
    right: 1px;
  }
  .flyoutWrapper--absolute\@desktop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  }
  .icon--h1 {
    width: 24px;
    height: 24px;
  }
  .icon--h1 .icon__svg {
    transform: scale(1.5);
  }
  .formItem__fieldItem:last-child .pullout__inner {
    right: 0;
    left: auto;
  }
  .formItem__fieldItem--receipt-editing.formItem__fieldItem--receipt-disconnected,
  .formItem__fieldItem--receipt-editing.formItem__fieldItem--receipt-disconnected:not(:only-child):not(:last-child) {
    margin-right: 0.31rem;
  }
  .mzb--inline .formItem__fieldItem:last-child .pullout__inner {
    right: auto;
    left: 0;
  }
  .mzb--inline .mzb__cell:nth-last-child(2) .formItem__fieldItem .pullout__inner {
    right: 0;
    left: auto;
  }
  .thumbnail {
    width: 16.5rem;
  }
  .receipt-filter__top {
    max-width: 20rem;
  }
  .receipt-management__thumbnailViewSort {
    margin-bottom: 1rem;
  }
  .receipt-management .tabBar__content {
    padding: 0;
  }
  .receipt-management .tabBar__content h2:first-of-type {
    margin: 1.5rem 0;
  }
  .receipt-management .thumbnail {
    margin-left: 0.5rem;
    margin-bottom: 1rem;
  }
}
@media screen and (min-width: 80rem), print {
  .edgehtml .page-form__aside .aside {
    width: 15.62rem;
  }
  .header__contentGroup {
    content: "header.desktop";
    flex-direction: row;
    align-items: flex-end;
    padding-right: 4rem;
    padding-left: 3.5rem;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .header__heading {
    flex: 1 0 auto;
    align-items: flex-end;
    border-bottom: none;
    padding: 0;
  }
  .header__heading--empty {
    height: 3rem;
  }
  .header__heading .header__navOpen {
    display: none;
  }
  .header__help {
    margin-right: 1rem;
  }
  .header__help .interactive-icon {
    display: inline-flex;
    padding-bottom: 0.37rem;
  }
  .header__help .interactive-icon__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    -webkit-clip-path: none;
            clip-path: none;
    clip: auto;
    overflow: visible;
    margin-right: 0.37rem;
  }
  .header__search {
    margin-right: 1rem;
    margin-bottom: 3px;
  }
  .header__content {
    display: flex;
    box-shadow: none;
    flex: 0 0 auto;
    padding: 0;
    position: static;
    z-index: auto;
  }
  .header__content > * {
    padding: 0;
    border: 0;
    flex: 0 0 auto;
  }
  .header__content .iframe {
    height: 2.5rem;
    width: 18.25rem;
  }
  .header__content .iframe----loggedIn {
    width: 16.5rem;
  }
  .header__content--etr .icon {
    transform: scale(4) translateY(-2px);
  }
  .header__content--etr .header__maintitle {
    margin-left: 1.75rem;
  }
  .header__title--mup .header__subtitle--eop {
    display: inline-block;
  }
  .header__maintitle {
    font-size: 3rem;
    line-height: 1;
  }
  .header__maintitle--mup {
    max-width: 11.56rem;
    font-size: 1.27rem;
    line-height: 1.37rem;
    font-weight: 700;
  }
  .header__subtitle {
    color: var(--header__color-subtitle);
    display: inline-block;
    font-size: 1.12rem;
    position: relative;
    top: -1.25rem;
    box-shadow: 0 16px 0 var(--header__color-area);
    margin-right: 0.5rem;
  }
  .header__subtitle--mup {
    margin-right: 0;
    font-size: 1.15rem;
    height: 1.75rem;
    top: -1.4rem;
  }
  .edge.blink .header__subtitle--mup,
  .chrome .header__subtitle--mup {
    margin-right: 0;
    font-size: 1.15rem;
    height: 1.6rem;
    top: -1.35rem;
  }
  .header__bopWappen {
    height: 2.5rem;
    margin-left: 1rem;
  }
  .header__bopWappen .icon {
    margin-right: 1rem;
  }
  .header__toggle {
    display: none;
  }
  .header__autoLogout {
    margin-left: 1rem;
    flex-shrink: 1;
    align-self: center;
  }
  .header__userName {
    margin-right: 0.5rem;
  }
  .header__userName .interactive-icon {
    display: inline-flex;
  }
  .header .languageToggle {
    margin-right: 1rem;
    height: 40px;
  }
  .header .darkmodeToggle {
    margin-right: 1rem;
  }
  .header .darkmodeToggle .interactive-icon {
    height: 40px;
  }
  .header__register {
    margin-right: 0.5rem;
  }
  .header__register .interactive {
    height: 40px;
  }
  .header__login .interactive,
  .header__userName .interactive,
  .header__logout .interactive,
  .header__login .interactive-icon,
  .header__userName .interactive-icon,
  .header__logout .interactive-icon {
    height: 40px;
  }
  .header--opened .header__content {
    flex-direction: row;
  }
  .darkmodeToggle .interactive-icon {
    width: 2.43rem;
    height: 2.43rem;
    border-color: var(--color-interaction);
    padding-right: 0.5rem;
  }
  .darkmodeToggle .interactive-icon__icon {
    margin-left: 2px;
  }
  .darkmodeToggle .interactive-icon__text {
    display: none;
  }
  .languageToggle {
    display: inline;
  }
  .languageToggle__list {
    display: inline;
  }
  .languageToggle__item {
    display: inline;
    position: relative;
  }
  .languageToggle__item--longTitle {
    display: none;
  }
  .languageToggle__item .interactive-icon {
    width: auto;
    padding: 0;
  }
  .languageToggle__item .interactive-icon__wrap {
    display: inline-block;
  }
  .languageToggle__item .interactive-icon .icon {
    display: none;
  }
  .languageToggle__item--shortTitle {
    display: inline-flex;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
  }
  .languageToggle .languageToggle__item--shortTitle + .icon {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
  }
  .ios .languageToggle .languageToggle__item--shortTitle + .icon,
  .macos.safari .languageToggle .languageToggle__item--shortTitle + .icon,
  .android.mobile .languageToggle .languageToggle__item--shortTitle + .icon {
    display: inline-flex;
  }
  .languageToggle__item:not(:first-child)::before {
    content: "|";
    color: var(--color-triple178);
  }
  .languageToggle abbr[title] {
    border-bottom: 0;
  }
  .languageToggle .interactive-icon:hover abbr[title],
  .languageToggle .interactive-icon:focus abbr[title] {
    text-decoration: underline;
  }
  .timeline {
    width: auto;
    content: "timeline.desktop";
    cursor: default;
    z-index: auto;
  }
  .timeline__wrapper {
    height: auto;
    box-shadow: none;
    cursor: default;
    min-width: 17.5rem;
  }
  .timeline__triggerstate {
    display: none;
  }
  .timeline__groups {
    padding: 2rem 1rem;
  }
  .timeline__heading {
    font-size: 1.5rem;
  }
  .timeline__item {
    font-size: 1rem;
  }
  .timeline--opened .timeline__wrapper {
    box-shadow: none;
  }
  .timeline--opened .timeline__heading {
    min-height: auto;
    font-size: 1.5rem;
  }
  .timeline--opened .timeline__text {
    font-size: 1rem;
  }
  .nav {
    content: "nav.desktop";
    position: static;
    background: none;
    cursor: default;
    z-index: auto;
  }
  .nav__wrapper {
    height: 100%;
    min-width: 20rem;
    visibility: visible;
    transform: none;
  }
  .nav__triggerstate {
    display: none;
  }
  .nav__wrapper > .nav__list {
    border: 1px solid var(--color-triple221);
  }
  .nav__list {
    font-size: 1.12rem;
  }
  .nav__item .interactive-icon {
    padding: 0.93rem;
  }
  .nav__item .interactive-icon__text {
    margin-left: 1.93rem;
  }
  .nav__item .interactive-icon__icon {
    margin: 0;
    transform: scale(2) translate(25%, 25%);
  }
  .nav__item .nav__itemFirst {
    padding: 0.93rem;
  }
  .nav__item--subnav > .nav__list {
    font-size: 0.87rem;
  }
  .nav__item--subnav > .nav__list .interactive {
    padding-left: 3.86rem;
    padding-right: 1rem;
  }
  .nav--opened .nav__wrapper {
    box-shadow: none;
  }
  .footer {
    border-width: 8px;
  }
  .footer__oneThird {
    flex: 1 1 0px;
  }
  .footer__twoThirds {
    flex: 2 1 0px;
  }
  .footer__infoText {
    padding: 3rem 0 3rem 3rem;
  }
  .footer__infoText .alignment {
    flex-direction: row;
  }
  .footer__certificates {
    padding: 3rem;
  }
  .footer__certificateItem {
    width: 17.18rem;
  }
  .footer__permanent .footer__oneThird {
    padding: 1rem 0 1rem 3rem;
  }
  .footer__permanent .footer__twoThirds {
    padding: 1rem 3rem;
    display: flex;
    align-items: flex-start;
  }
  .footer__infoGroup,
  .footer__helpGroup {
    border: 0;
    margin-left: -0.94rem;
  }
  .footer__infoGroup,
  .footer__helpGroup,
  .footer__copyright {
    padding: 0;
  }
  .footer__copyright {
    flex: 0 0 auto;
    padding-left: 3rem;
  }
  .footer__copyright:only-child {
    margin-left: auto;
  }
  .footer__infoText {
    border: none;
  }
  .footer .interactive {
    padding: 0.5rem 1rem;
  }
}
@media screen and (min-width: 100rem), print {
  .timeline {
    border-right: 1px solid var(--color-triple221);
  }
  .timeline .timeline {
    width: auto;
    content: "timeline.desktop";
    cursor: default;
    z-index: auto;
  }
  .timeline .timeline__wrapper {
    height: auto;
    box-shadow: none;
    cursor: default;
    min-width: 17.5rem;
  }
  .timeline .timeline__triggerstate {
    display: none;
  }
  .timeline .timeline__groups {
    padding: 2rem 1rem;
  }
  .timeline .timeline__heading {
    font-size: 1.5rem;
  }
  .timeline .timeline__item {
    font-size: 1rem;
  }
  .timeline .timeline--opened .timeline__wrapper {
    box-shadow: none;
  }
  .timeline .timeline--opened .timeline__heading {
    min-height: auto;
    font-size: 1.5rem;
  }
  .timeline .timeline--opened .timeline__text {
    font-size: 1rem;
  }
  .nav .nav {
    content: "nav.desktop";
    position: static;
    background: none;
    cursor: default;
    z-index: auto;
  }
  .nav .nav__wrapper {
    height: 100%;
    min-width: 20rem;
    visibility: visible;
    transform: none;
  }
  .nav .nav__triggerstate {
    display: none;
  }
  .nav .nav__wrapper > .nav .nav__list {
    border: 1px solid var(--color-triple221);
  }
  .nav .nav__list {
    font-size: 1.12rem;
  }
  .nav .nav__item .interactive-icon {
    padding: 0.93rem;
  }
  .nav .nav__item .interactive-icon__text {
    margin-left: 1.93rem;
  }
  .nav .nav__item .interactive-icon__icon {
    margin: 0;
    transform: scale(2) translate(25%, 25%);
  }
  .nav .nav__item .nav__itemFirst {
    padding: 0.93rem;
  }
  .nav .nav__item--subnav > .nav__list {
    font-size: 0.87rem;
  }
  .nav .nav__item--subnav > .nav__list .interactive {
    padding-left: 3.86rem;
    padding-right: 1rem;
  }
  .nav .nav--opened .nav__wrapper {
    box-shadow: none;
  }
  .nav__wrapper {
    border-right: 1px solid var(--color-triple221);
  }
  .nav__wrapper > .nav__list {
    border: 0;
    border-bottom: 1px solid var(--color-triple221);
  }
  .videoPlayer {
    content: "videoPlayer.desktopLarge";
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__videoCaption {
    font-size: 1.25rem;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__time {
    font-size: 0.75rem;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__volumeSlider {
    display: block;
  }
  .videoPlayer:not(.videoPlayer--small) .videoPlayer__overlay {
    padding: 0.75rem;
  }
  .receipt-filter__top {
    max-width: none;
  }
  .receipt-management .tabBar__content {
    padding: 2rem 0;
  }
}
@media screen and (min-width: 105rem), print {
  .edgehtml .page-form__aside .aside {
    width: 17.37rem;
  }
  .searchField--header .searchField__input {
    height: 40px;
  }
  .searchField--header .searchField__input,
  .searchField--header .searchField__label {
    display: inline;
  }
  .searchField--header .searchField__submit .interactive-icon {
    height: 40px;
  }
  .searchField--header .searchField__submit .interactive-icon--primary {
    display: block;
  }
  .searchField--header .searchField__submit .interactive-icon--base {
    display: none;
  }
  .header__search {
    margin-right: 8rem;
    margin-bottom: 0;
  }
  .taskBar--vertical {
    padding: 0 0.25rem;
  }
  .taskBar--vertical .taskBar__item--visible\@vertical {
    display: none;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal {
    padding: 0.5rem 0.25rem;
    display: inline-block;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom {
    top: 100%;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top {
    bottom: 100%;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--right {
    left: 0;
    right: auto;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--center {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--left {
    left: auto;
    right: 0;
    text-align: right;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top {
    top: auto;
    bottom: 2.68rem;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::after {
    content: "";
    display: inline-block;
    position: absolute;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top {
    padding-bottom: 10px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::after {
    bottom: 4px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple204);
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::after {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-triple255);
    bottom: 5px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--center::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--center::before {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--center::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--center::after {
    margin-left: 50%;
    left: -6px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--right::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--right::before {
    right: auto;
    left: 11px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--right::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--right::after {
    right: auto;
    left: 11px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--left::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--left::before {
    left: auto;
    right: 11px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom.flyout--left::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top.flyout--left::after {
    left: auto;
    right: 11px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--top::before {
    transform: rotate(0deg);
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::after,
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before {
    border-bottom: none;
    top: auto;
    bottom: 4px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--bottom::before {
    bottom: 3px;
  }
  .taskBar--vertical .taskBar__item--visible\@horizontal .flyout--right {
    text-align: left;
  }
}
.startpage .figure {
  display: flex;
  flex-direction: column;
}
.startpage .figure__image {
  order: 1;
}
.startpage .figure figcaption {
  order: 0;
  background: rgba(90,88,75,0.7);
  padding: 0.5rem;
  color: #fff;
  position: relative;
  top: 33px;
}
.startpage__hero {
  border-bottom: 0;
  background-position: 50% 50%;
  border-top: 3px solid var(--color-app);
}
.startpage__hero h1 {
  padding-top: 1rem;
}
.startpage__heroButtons {
  padding-bottom: 1.25rem;
}
@media screen and (min-width: 60rem), print {
  .startpage__hero {
    background-image: var(--url-backgroundHeadStartpage);
  }
}
@media screen and (min-width: 48rem), print {
  .startpage__hero h1 {
    padding-top: 2.25rem;
  }
}
.startpage__heroList {
  background-color: rgba(44,81,152,0.8);
}
.footer__temporary {
  background-color: var(--color-app);
}
.headlineEmphasize {
  border-bottom-color: var(--color-app);
}
.feedbackBanner {
  background: #00364f;
  color: #fff;
  font-size: 0.87rem;
  padding: 0.75rem 3.5rem;
}
.feedbackBanner a {
  --url-linkMailto: url("../img/link_mailto--white-on-transparent.svg");
  color: #fff;
}