/*
 * @de.elster.portal/frontend
 * Frontend Vorgaben für das ElsterOnline- und das BZSt-Portal
 *
 * @version 48.0.0-5
 * @date Tue Jun 09 2020 09:22:35 GMT+0200 (GMT+02:00)
 * @revision eb53b1fd9bfb1900a41a32c33f785bdc263da616
 *
 * ========================================================================== */
/* stylelint-disable */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

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

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

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

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 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
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * 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 style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

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

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

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

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

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 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 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

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

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 and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

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

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

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

template {
  display: none;
}

/* Hidden
   ========================================================================== */

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

[hidden] {
  display: none;
}

/* stylelint-enable */
/*
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/open-sans-v13-latin-regular.woff2") format('woff2'), url("fonts/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/open-sans-v13-latin-italic.woff2") format('woff2'), url("fonts/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/open-sans-v13-latin-600.woff2") format('woff2'), url("fonts/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/open-sans-v13-latin-700.woff2") format('woff2'), url("fonts/open-sans-v13-latin-700.woff") format('woff') /* Modern Browsers */;
}
body,
button,
input,
optgroup,
select,
textarea {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
h1,
h2,
.interactive,
.interactive-icon,
.interactive-help,
.interactive-meta-icon,
.toc__innerItems a,
.breadcrumb a,
.validation-error,
.header__maintitle--regular {
  font-weight: 400;
  font-style: normal;
}
em,
.header__italic {
  font-weight: 400;
  font-style: italic;
}
h3,
h6,
._helper-infoEmphasize,
._helper-semiBold,
._helper-buttonGroupTitle,
.figure--emphasize .figure__text,
.figure figcaption,
.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,
a,
.icondefinition__title,
.toggleBox--small .toggleBox__head,
.validationResultsList__page li,
.formItem--login > .formItem__wrapper label,
.formItem__lnr {
  font-weight: 600;
  font-style: normal;
}
h4,
h5,
.toc__list a,
.messageBox__title,
.validation-error__label,
.formItem__legend,
.footer .interactive,
.footer .interactive-icon,
.header__maintitle {
  font-weight: 700;
  font-style: normal;
}
/*
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
- Farben werden mit der Notation ```$color-``` erzeugt

$color-interaction - Interaktionsfarbe
$color-interaction-light - Interaktionsfarbe (light)
$color-error - Statusfarbe - Fehler
$color-text - Standardschriftfarbe
$color-inputBorder - Tabellenkopf
$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###
*/
@-webkit-keyframes animation_rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes animation_rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
Ü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: #fff;
}
@media screen and (min-width: 48rem), print {
  html {
    background-color: #333;
  }
}
body {
  color: #333;
  background-color: #fff;
}
body {
  line-height: 1.35;
}
h1 {
  line-height: 1.35;
}
h2 {
  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 {
  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 {
  font-size: 0.75rem;
}
body {
  font-size: 0.87rem;
}
h1 {
  margin-top: 1.62rem;
}
h2 {
  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 {
  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: 2.25rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.25rem;
  }
  h4 {
    font-size: 1.12rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 1rem;
  }
  label {
    font-size: 0.87rem;
  }
  body {
    font-size: 1rem;
  }
  h1 {
    margin-top: 2.62rem;
  }
  h2 {
    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 {
    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;
}
@media screen {
  .dark body {
    opacity: 0;
  }
}
.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: #618101;
}
.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 #94c502;
}
.no-js .accordion.accordion--primary .accordion__item--opened .accordion__head {
  background-color: #618101;
}
.no-js .accordion.accordion--primary .accordion__item--opened .accordion__headButton {
  color: #fff;
}
/* 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 */
.no-js .contexthelp {
  display: block;
  position: static;
  height: auto;
  width: 100%;
  padding: 10px;
  max-width: none;
}
.no-js .contexthelp__toggleWidth,
.no-js .contexthelp__close {
  display: none;
}
.no-js .contexthelp__content {
  overflow: hidden;
  border-top: none;
}
.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[href^="https://"],
.ie .interactive-icon[href^="https://"],
.ie .interactive-help[href^="https://"],
.ie .interactive-meta-icon[href^="https://"],
.ie .interactive[href^="mailto:"],
.ie .interactive-icon[href^="mailto:"],
.ie .interactive-help[href^="mailto:"],
.ie .interactive-meta-icon[href^="mailto:"] {
  width: auto;
}
.ie .page-form__contentWrapper {
  min-height: 787px;
}
.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 {
  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 #94c502, 0 -8px 0 #94c502, 0 -8px 0 0 #94c502;
}
.ie .mzb [data-mzb-row="edit"] td:first-child {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, -8px 8px 0 0 #94c502, -8px -8px 0 0 #94c502;
}
.ie .mzb [data-mzb-row="edit"] td:last-child {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, 8px 8px 0 0 #94c502, 8px -8px 0 0 #94c502;
}
.ie .mzb [data-mzb-row="edit"] td.mzb__cell--combined {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, 8px 8px 0 0 #94c502, 8px -8px 0 0 #94c502, -8px 8px 0 0 #94c502, -8px -8px 0 0 #94c502;
}
.ie .mzb [data-mzb-row="readonly"].mzb__row--error {
  outline: none;
  box-shadow: 0 0 0 8px #cf4821;
}
.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 #cf4821, 0 -4px 0 #cf4821, 0 -4px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td:first-child {
  box-shadow: 0 4px 0 #cf4821, 0 -4px 0 #cf4821, -4px 4px 0 0 #cf4821, -4px -4px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate [data-mzb-row="readonly"].mzb__row--error td:last-child {
  box-shadow: 0 4px 0 #cf4821, 0 -4px 0 #cf4821, 4px 4px 0 0 #cf4821, 4px -4px 0 0 #cf4821;
}
.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 #cf4821, 0 -4px 0 #cf4821, 4px 4px 0 0 #cf4821, 4px -4px 0 0 #cf4821, -4px 4px 0 0 #cf4821, -4px -4px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="readonly"] .mzb.mzb--separate-collapse [data-mzb-row="readonly"].mzb__row--error {
  outline: 4px solid #cf4821;
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 0 -8px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td:first-child {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, -8px 8px 0 0 #cf4821, -8px -8px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td:last-child {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 8px 8px 0 0 #cf4821, 8px -8px 0 0 #cf4821;
}
.ie .mzb [data-mzb-row="edit"].mzb__row--error td.mzb__cell--combined {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 8px 8px 0 0 #cf4821, 8px -8px 0 0 #cf4821, -8px 8px 0 0 #cf4821, -8px -8px 0 0 #cf4821;
}
.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 #94c502, 0 -4px 0 #94c502, 0 -4px 0 0 #94c502;
}
.ie .mzb--separate .mzb__addEntry--empty td:first-child {
  box-shadow: 0 4px 0 #94c502, 0 -4px 0 #94c502, -4px 4px 0 0 #94c502, -4px -4px 0 0 #94c502;
}
.ie .mzb--separate .mzb__addEntry--empty td:last-child {
  box-shadow: 0 4px 0 #94c502, 0 -4px 0 #94c502, 4px 4px 0 0 #94c502, 4px -4px 0 0 #94c502;
}
.ie .mzb--separate .mzb__addEntry--empty td.mzb__cell--combined {
  box-shadow: 0 4px 0 #94c502, 0 -4px 0 #94c502, 4px 4px 0 0 #94c502, 4px -4px 0 0 #94c502, -4px 4px 0 0 #94c502, -4px -4px 0 0 #94c502;
}
.no-js .mzb tr.mzb__addEntry {
  display: table-row;
}
.no-js .mzb [data-mzb-row="edit"] td {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, 0 -8px 0 0 #94c502;
}
.no-js .mzb [data-mzb-row="edit"] td:first-child {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, -8px 8px 0 0 #94c502, -8px -8px 0 0 #94c502;
}
.no-js .mzb [data-mzb-row="edit"] td:last-child {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, 8px 8px 0 0 #94c502, 8px -8px 0 0 #94c502;
}
.no-js .mzb [data-mzb-row="edit"] td.mzb__cell--combined {
  box-shadow: 0 8px 0 #94c502, 0 -8px 0 #94c502, 8px 8px 0 0 #94c502, 8px -8px 0 0 #94c502, -8px 8px 0 0 #94c502, -8px -8px 0 0 #94c502;
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 0 -8px 0 0 #cf4821;
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td:first-child {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, -8px 8px 0 0 #cf4821, -8px -8px 0 0 #cf4821;
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td:last-child {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 8px 8px 0 0 #cf4821, 8px -8px 0 0 #cf4821;
}
.no-js .mzb [data-mzb-row="edit"].mzb__row--error td.mzb__cell--combined {
  box-shadow: 0 8px 0 #cf4821, 0 -8px 0 #cf4821, 8px 8px 0 0 #cf4821, 8px -8px 0 0 #cf4821, -8px 8px 0 0 #cf4821, -8px -8px 0 0 #cf4821;
}
.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 {
  list-style: none;
  display: inline-block;
  position: relative;
  border: 1px solid #ddd;
  margin-right: 4px;
}
.no-js .tabBar----active .interactive {
  background-color: #f8f8f8;
  border-radius: 0;
  padding: 4px 8px;
  color: #006d97;
}
.no-js .tabBar----active .interactive:hover {
  background-color: #e6e6e6;
  text-decoration: underline;
}
.no-js .tabBar----active .interactive:focus {
  text-decoration: underline;
}
.no-js .tabbarCollapse__head {
  display: block;
  border: 1px solid #ddd;
}
.no-js .tabbarCollapse__head .interactive {
  background: #fff;
}
.no-js .tabbarCollapse----active .interactive {
  color: #006d97;
  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 a[href^="http://"],
.ie .tile .interactive[href^="https://"],
.ie .tile 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: #006d97;
}
.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 #cf4821;
}
.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 #cf4821;
  }
  .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;
  }
}
/*
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)
empty - kursiv Text für Leer-Hinweise wie z.B. keine Einträge vorhanden
fixed - Elemente mit fixer Position
center - Positionierung zentriert
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 {
  background: #f8f8f8;
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
}
._helper-error {
  color: #cf4821;
}
._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--size-m .interactive-meta-icon__text,
.formItem__fieldItem--size-s .interactive-meta-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;
}
._helper-visible {
  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-empty,
._helper-infoEmpty {
  font-style: italic;
}
._helper-fixed {
  position: fixed;
  left: 0;
  right: 0;
}
._helper-center,
._helper-infoEmpty,
._helper-infoEmphasize {
  text-align: center;
}
._helper-marginLeft-8 {
  margin-left: 0.5rem;
}
._helper-marginLeft-16 {
  margin-left: 1rem;
}
._helper-marginTop {
  margin-top: 1rem;
}
._helper-marginTop-12 {
  margin-top: 0.75rem;
}
._helper-marginTop-0 {
  margin-top: 0;
}
._helper-marginBottom {
  margin-bottom: 1rem;
}
._helper-marginBottom-8 {
  margin-bottom: 0.5rem;
}
._helper-marginBottom-0 {
  margin-bottom: 0 !important;
}
._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: #cfe7f0;
  border-bottom: 1px dashed #cfe7f0;
}
._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 #b2b2b2;
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}
body {
  -webkit-animation-name: default;
          animation-name: default;
  -webkit-animation-duration: 0.001s;
          animation-duration: 0.001s;
  content: 'default';
}
@media screen and (min-width: 20rem), print {
  body {
    -webkit-animation-name: "min";
            animation-name: "min";
    content: 'min';
  }
}
@media screen and (min-width: 30rem), print {
  body {
    -webkit-animation-name: xs;
            animation-name: xs;
    content: 'xs';
  }
}
@media screen and (min-width: 48rem), print {
  body {
    -webkit-animation-name: small;
            animation-name: small;
    content: 'small';
  }
}
@media screen and (min-width: 60rem), print {
  body {
    -webkit-animation-name: content;
            animation-name: content;
    content: 'content';
  }
}
@media screen and (min-width: 60rem), print {
  body {
    -webkit-animation-name: medium;
            animation-name: medium;
    content: 'medium';
  }
}
@media screen and (min-width: 80rem), print {
  body {
    -webkit-animation-name: large;
            animation-name: large;
    content: 'large';
  }
}
@media screen and (min-width: 105rem), print {
  body {
    -webkit-animation-name: xl;
            animation-name: xl;
    content: 'xl';
  }
}
@media screen and (min-width: 120rem), print {
  body {
    -webkit-animation-name: max;
            animation-name: max;
    content: 'max(a, b)';
  }
}
@-webkit-keyframes default {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes default {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@-webkit-keyframes min {
  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);
  }
}
@-webkit-keyframes xs {
  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);
  }
}
@-webkit-keyframes small {
  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);
  }
}
@-webkit-keyframes content {
  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);
  }
}
@-webkit-keyframes medium {
  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);
  }
}
@-webkit-keyframes large {
  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);
  }
}
@-webkit-keyframes xl {
  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);
  }
}
@-webkit-keyframes max {
  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);
  }
}
/*
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 -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-accessibility_form--disabled::before {
  margin: -138px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-accessibility_form--hov-foc::before {
  margin: -2px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-accessibility_form--invert::before {
  margin: -2px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-accessibility_form--invert-disabled::before {
  margin: -36px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-add::before {
  margin: -36px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-add--disabled::before {
  margin: -36px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-add--invert::before {
  margin: -36px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-add--invert-disabled::before {
  margin: -2px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-apply::before {
  margin: -36px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-apply--disabled::before {
  margin: -2px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-apply--invert::before {
  margin: -36px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-apply--invert-disabled::before {
  margin: -70px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-apply--triple51-on-triple248::before {
  margin: -70px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow::before {
  margin: -70px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow--disabled::before {
  margin: -70px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow--invert::before {
  margin: -70px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow--invert-disabled::before {
  margin: -70px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow--invert-triple248::before {
  margin: -2px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow--triple51-on-triple248::before {
  margin: -36px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-triple248::before {
  margin: -70px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice-triple242::before {
  margin: -104px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice-triple248::before {
  margin: -104px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice-white::before {
  margin: -104px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice_small-triple242::before {
  margin: -104px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice_small-triple248::before {
  margin: -104px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow-twice_small-white::before {
  margin: -104px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_back::before {
  margin: -104px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_dark::before {
  margin: -2px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_grey--invert::before {
  margin: -36px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small::before {
  margin: -70px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small--disabled::before {
  margin: -104px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small--invert::before {
  margin: -2px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small--invert-disabled::before {
  margin: -36px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small--invert-triple242::before {
  margin: -70px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small--invert-triple248::before {
  margin: -104px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small_dark::before {
  margin: -138px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-arrow_small_grey--invert::before {
  margin: -138px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-attachments::before {
  margin: -138px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-attachments--disabled::before {
  margin: -138px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-attachments--hov-foc::before {
  margin: -138px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-attachments--invert::before {
  margin: -138px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-attachments--invert-disabled::before {
  margin: -138px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-audio--invert::before {
  margin: -138px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen::before {
  margin: -138px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen--disabled::before {
  margin: -2px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen--filled--invert::before {
  margin: -36px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen--invert::before {
  margin: -70px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen--invert-triple248::before {
  margin: -104px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzergruppen_eop::before {
  margin: -138px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzerkontoservice::before {
  margin: -2px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-benutzerkontoservice_eop::before {
  margin: -36px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-calc::before {
  margin: -70px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-calc--disabled::before {
  margin: -104px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-calc--invert::before {
  margin: -138px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-calc--invert-disabled::before {
  margin: -172px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-calc--triple51-on-triple248::before {
  margin: -172px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-carryover::before {
  margin: -172px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-carryover--triple51-on-triple248::before {
  margin: -172px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_circle::before {
  margin: -172px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_circle-triple248::before {
  margin: -172px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle::before {
  margin: -172px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle--disabled::before {
  margin: -172px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle--invert::before {
  margin: -172px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle--invert-disabled::before {
  margin: -172px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle--invert-triple242::before {
  margin: -172px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_nocircle--triple51-on-triple248::before {
  margin: -2px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_open--invert::before {
  margin: -36px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_open--invert-disabled::before {
  margin: -70px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-close_open--invert-triple242::before {
  margin: -104px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-correct_eop::before {
  margin: -138px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-correct_triple114-on-transparent::before {
  margin: -172px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-correct_triple51-on-transparent::before {
  margin: -206px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-correct_white-on-transparent::before {
  margin: -206px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-counterclockwise--invert::before {
  margin: -206px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-create_account::before {
  margin: -206px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-create_account--disabled::before {
  margin: -206px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-create_account--invert::before {
  margin: -206px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-create_account--invert-disabled::before {
  margin: -206px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data-existing::before {
  margin: -206px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data_acquisition::before {
  margin: -206px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data_acquisition--disabled::before {
  margin: -206px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data_acquisition--invert::before {
  margin: -206px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data_acquisition--invert-disabled::before {
  margin: -206px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-data_acquisition--triple51-on-triple248::before {
  margin: -2px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-delete::before {
  margin: -36px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-delete--disabled::before {
  margin: -70px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-delete--invert::before {
  margin: -104px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-delete--invert-disabled::before {
  margin: -138px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-delete--triple51-on-triple248::before {
  margin: -172px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-desktop_24-triple51-on-white::before {
  margin: -206px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv::before {
  margin: -2px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv_new::before {
  margin: -36px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv_new--disabled::before {
  margin: -70px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv_new--hov-foc::before {
  margin: -104px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv_new--invert::before {
  margin: -138px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-csv_new--invert-disabled::before {
  margin: -172px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html::before {
  margin: -206px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html_new::before {
  margin: -240px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html_new--disabled::before {
  margin: -240px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html_new--hov-foc::before {
  margin: -240px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html_new--invert::before {
  margin: -240px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-html_new--invert-disabled::before {
  margin: -240px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log::before {
  margin: -240px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log_new::before {
  margin: -240px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log_new--disabled::before {
  margin: -240px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log_new--hov-foc::before {
  margin: -240px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log_new--invert::before {
  margin: -240px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-log_new--invert-disabled::before {
  margin: -240px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf::before {
  margin: -240px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new::before {
  margin: -240px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new--disabled::before {
  margin: -240px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new--hov-foc::before {
  margin: -2px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new--invert::before {
  margin: -36px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new--invert-disabled::before {
  margin: -70px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-pdf_new--triple51-on-triple248::before {
  margin: -104px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip::before {
  margin: -138px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip_new::before {
  margin: -172px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip_new--disabled::before {
  margin: -206px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip_new--hov-foc::before {
  margin: -240px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip_new--invert::before {
  margin: -2px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-doctype-zip_new--invert-disabled::before {
  margin: -36px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file::before {
  margin: -70px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file--disabled::before {
  margin: -104px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file--hov-foc::before {
  margin: -138px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file--invert::before {
  margin: -172px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file--invert-disabled::before {
  margin: -206px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-download_file--triple51-on-triple248::before {
  margin: -240px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit::before {
  margin: -274px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit--disabled::before {
  margin: -274px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit--invert::before {
  margin: -274px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit--invert-disabled::before {
  margin: -274px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_comb::before {
  margin: -274px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_comb--disabled::before {
  margin: -274px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_comb--invert::before {
  margin: -274px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_comb--invert-disabled::before {
  margin: -274px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_sep::before {
  margin: -274px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_sep--disabled::before {
  margin: -274px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_sep--invert::before {
  margin: -274px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-edit_sep--invert-disabled::before {
  margin: -274px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-elster_transfer_logo::before {
  margin: -274px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-elster_transfer_nav::before {
  margin: -274px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-elster_transfer_nav_eop::before {
  margin: -274px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-erfolgreich_uebermittelt::before {
  margin: -274px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-error::before {
  margin: -2px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye--invert::before {
  margin: -36px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye--invert-disabled::before {
  margin: -70px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye--invert-on-triple242::before {
  margin: -104px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye-crossed-out--invert::before {
  margin: -2px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye-crossed-out--invert-disabled::before {
  margin: -172px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-eye-crossed-out--invert-on-triple242::before {
  margin: -206px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-figure_zoom::before {
  margin: -240px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-figure_zoom_minus::before {
  margin: -274px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-fitToContent::before {
  margin: -308px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-form_new_24::before {
  margin: -308px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-formulare_leistungen::before {
  margin: -308px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-formulare_leistungen_eop::before {
  margin: -308px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-glossary_context::before {
  margin: -308px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-help::before {
  margin: -308px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-help_context::before {
  margin: -308px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-help_nav::before {
  margin: -308px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-help_nav_eop::before {
  margin: -308px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-hint-invert-on-triple221::before {
  margin: -308px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-hint-white-on-triple114::before {
  margin: -308px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-home::before {
  margin: -308px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-home_eop::before {
  margin: -308px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-import--on-white::before {
  margin: -308px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-in_progress::before {
  margin: -308px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-jumpmarker::before {
  margin: -308px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-jumpmarker--disabled::before {
  margin: -308px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-jumpmarker--invert::before {
  margin: -2px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-jumpmarker--invert-disabled::before {
  margin: -36px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-jumpmarker-triple248--invert::before {
  margin: -70px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-kontrastModus::before {
  margin: -104px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-lang_selected_eop::before {
  margin: -138px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-language::before {
  margin: -172px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-language--disabled::before {
  margin: -206px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-language--invert::before {
  margin: -240px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-language--invert-disabled::before {
  margin: -274px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-letter-registration::before {
  margin: -308px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-letter-triple248::before {
  margin: -2px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-letter-triple248_eop::before {
  margin: -36px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-link_extern--invert-on-transparent::before {
  margin: -70px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-link_extern--white-on-transparent::before {
  margin: -104px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-link_mailto--invert-on-transparent::before {
  margin: -138px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-link_mailto--white-on-transparent::before {
  margin: -172px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_elstersmart_24::before {
  margin: -206px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_elstersmart_24--disabled-triple248::before {
  margin: -240px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_elstersmart_24--invert-on-transparent::before {
  margin: -274px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_elstersmart_24-triple248::before {
  margin: -308px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_elstersmart_24_eop::before {
  margin: -342px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_nav::before {
  margin: -342px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_nav_eop::before {
  margin: -342px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_npa_24::before {
  margin: -342px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_npa_24--disabled-triple248::before {
  margin: -342px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_npa_24-triple248::before {
  margin: -342px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_npa_24_eop::before {
  margin: -342px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_seccard_24::before {
  margin: -342px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_seccard_24--disabled-triple248::before {
  margin: -342px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_seccard_24-triple248::before {
  margin: -342px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_seccard_24_eop::before {
  margin: -342px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_secstick_24::before {
  margin: -342px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_secstick_24--disabled-triple248::before {
  margin: -342px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_secstick_24-triple248::before {
  margin: -342px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_secstick_24_eop::before {
  margin: -342px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_softpse_24::before {
  margin: -342px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_softpse_24--disabled-triple248::before {
  margin: -342px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_softpse_24-triple248::before {
  margin: -342px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-log_softpse_24_eop::before {
  margin: -342px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-login::before {
  margin: -2px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-login--disabled::before {
  margin: -36px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-login--invert::before {
  margin: -70px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-login--invert-disabled::before {
  margin: -104px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-logo_npa::before {
  margin: -138px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-logout--on-white::before {
  margin: -172px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mail-registration::before {
  margin: -206px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mail-triple248::before {
  margin: -240px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mail-triple248_eop::before {
  margin: -274px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mail_close::before {
  margin: -308px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mail_open::before {
  margin: -342px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-maintenance::before {
  margin: -2px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mein_elster::before {
  margin: -36px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mein_elster_eop::before {
  margin: -70px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-menu::before {
  margin: -104px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-menu--on-white::before {
  margin: -138px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-message-error::before {
  margin: -172px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-message-hint::before {
  margin: -206px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-edit::before {
  margin: -240px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-edit--disabled::before {
  margin: -274px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-edit_eop::before {
  margin: -308px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-send::before {
  margin: -342px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-send--disabled::before {
  margin: -376px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-send_eop::before {
  margin: -376px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-validate::before {
  margin: -376px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-validate--disabled::before {
  margin: -376px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-mode-validate_eop::before {
  margin: -376px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-more::before {
  margin: -376px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-more_bop--current::before {
  margin: -376px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-more_eop--current::before {
  margin: -376px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_carryOver::before {
  margin: -376px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_divide::before {
  margin: -376px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_equals::before {
  margin: -376px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_minus::before {
  margin: -376px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_plus::before {
  margin: -376px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_plus_minus::before {
  margin: -376px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-operator_times::before {
  margin: -376px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_jump::before {
  margin: -376px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_jump--disabled::before {
  margin: -376px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_jump--invert::before {
  margin: -376px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_jump--invert-disabled::before {
  margin: -376px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_step::before {
  margin: -376px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_step--disabled::before {
  margin: -376px 0px 0px -402px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_step--invert::before {
  margin: -2px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-pagination_step--invert-disabled::before {
  margin: -36px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-print::before {
  margin: -70px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-print--disabled::before {
  margin: -104px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-print--invert::before {
  margin: -138px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-print--invert-disabled::before {
  margin: -172px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-print--triple51-on-triple248::before {
  margin: -206px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-required_field-triple221::before {
  margin: -240px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-required_field-white::before {
  margin: -274px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-rueckmeldung_eingegangen::before {
  margin: -308px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search::before {
  margin: -342px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search--disabled::before {
  margin: -376px 0px 0px -422px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search--invert::before {
  margin: -2px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search--invert-disabled::before {
  margin: -36px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search_in_form::before {
  margin: -70px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search_in_form--disabled::before {
  margin: -104px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search_in_form--invert::before {
  margin: -138px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-search_in_form--invert-disabled::before {
  margin: -172px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-smartphone_24-trible51-on-white::before {
  margin: -206px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-square::before {
  margin: -240px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-star_black::before {
  margin: -274px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-star_eop::before {
  margin: -308px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-star_white::before {
  margin: -342px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-success_eop::before {
  margin: -376px 0px 0px -442px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-triangle--triple51-on-white::before {
  margin: -410px 0px 0px -2px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-triangle-triple242::before {
  margin: -410px 0px 0px -22px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-triangle_down-black::before {
  margin: -410px 0px 0px -42px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-twitter::before {
  margin: -410px 0px 0px -62px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-ueber_elster::before {
  margin: -410px 0px 0px -82px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-ueber_elster_eop::before {
  margin: -410px 0px 0px -102px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-undo--invert::before {
  margin: -410px 0px 0px -122px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-undo--triple51-on-triple248::before {
  margin: -410px 0px 0px -142px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-audio--white-on-triple63::before {
  margin: -410px 0px 0px -162px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-fullscreen--white-on-triple63::before {
  margin: -410px 0px 0px -182px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-minimize--white-on-triple63::before {
  margin: -410px 0px 0px -202px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-mute--white-on-triple63::before {
  margin: -410px 0px 0px -222px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-pause--white-on-triple63::before {
  margin: -410px 0px 0px -242px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-videoplayer-play--white-on-triple63::before {
  margin: -410px 0px 0px -262px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-warning::before {
  margin: -410px 0px 0px -282px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-warning-light::before {
  margin: -410px 0px 0px -302px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-warning-triple221::before {
  margin: -410px 0px 0px -322px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-warning-triple248::before {
  margin: -410px 0px 0px -342px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-weitere_softwareprodukte::before {
  margin: -410px 0px 0px -362px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
.svg-weitere_softwareprodukte_eop::before {
  margin: -410px 0px 0px -382px;
  content: url("svg/sprite_eop.svg");
  display: inline-block;
  width: 16px;
  height: 30px;
}
/*
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--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;
}
.icon::before {
  content: "";
}
.icon__svg {
  display: inline-block;
  color: rgba(0,0,0,0);
  white-space: nowrap;
  transform-origin: left top;
}
.icon__fallback,
.icon > img {
  display: none;
}
.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--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);
}
/*
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###
*/
/*
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 #e6e6e6;
  background-color: #fff;
  text-align: center;
}
.figure__image--noBorder {
  border: none;
  background-color: transparent;
  padding: 0.5rem;
}
.figure--emphasize .figure__image {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 0.5rem;
}
.figure__text {
  display: inline-block;
  padding: 0.75rem 0.5rem;
}
.figure--emphasize .figure__text {
  color: #618101;
  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 0;
}
.figure figcaption {
  margin-top: 0.12rem;
  text-align: left;
  font-size: 0.81rem;
}
a[href^="https://"] .figure__image,
a[href^="http://"] .figure__image {
  border: 1px solid #006d97;
  padding: 0.5rem 0.5rem 0;
}
a[href^="https://"] .figure__image::after,
a[href^="http://"] .figure__image::after {
  content: url("../img/link_extern--invert-on-transparent.svg");
  width: 1rem;
  height: 1rem;
  display: block;
  margin-left: auto;
  padding: 0.25rem 0;
}
.firefox .figure--fixESR img {
  width: 100%;
}
/*
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

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 .alignment__leftGroup + .alignment__rightGroup,
.alignment--buttonGroupCenter .alignment__leftGroup + .alignment__rightGroup {
  margin-top: 0.5rem;
}
.alignment--buttonGroup {
  align-items: flex-start;
}
.alignment--buttonGroupCenter {
  align-items: center;
}
.alignment--borderBox {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem 0.25rem;
  margin-bottom: 1rem;
}
.alignment--borderBox.alignment--borderBox {
  margin-bottom: 1rem;
}
.alignment--borderBox h1:first-child,
.alignment--borderBox h3:first-child {
  margin-top: 0;
}
.alignment--borderBox h2 {
  margin-top: 0.25rem;
  color: #618101;
}
.alignment--borderBox .figure {
  margin-bottom: 0.5rem;
}
.alignment--borderBox .figure__image {
  border: none;
  background: none;
}
.alignment--borderBox > .alignment__item {
  flex-grow: 1;
}
.alignment .icon__svg {
  display: block;
}
.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 #ddd;
  padding: 0.75rem 1rem 0.25rem;
  margin-bottom: 1rem;
}
.alignment__leftGroup--borderBox.alignment__leftGroup--borderBox,
.alignment__rightGroup--borderBox.alignment__rightGroup--borderBox,
.alignment__centerGroup--borderBox.alignment__centerGroup--borderBox {
  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: #618101;
}
.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;
}
.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:not(:last-child) .alignment__item:not(.alignment__item--bottomMargin-0),
.alignment__leftGroup:not(:last-child) .alignment__leftGroup:not(.alignment__leftGroup--bottomMargin-0),
.alignment__rightGroup:not(:last-child) .alignment__rightGroup:not(.alignment__rightGroup--bottomMargin-0),
.alignment__centerGroup:not(:last-child) .alignment__centerGroup:not(.alignment__centerGroup--bottomMargin-0) {
  margin-bottom: 0.5rem;
}
.alignment--buttonGroup .alignment__item:not(:last-child) {
  margin-bottom: 0.5rem;
}
/*
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.

__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
@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 {
  border: 0;
  padding: 0;
  background: none;
  color: #006d97;
  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:focus,
.interactive-icon:focus,
.interactive-help:focus,
.interactive-meta-icon:focus {
  text-decoration: underline;
}
.interactive--base,
.interactive-icon--base,
.interactive-help--base,
.interactive-meta-icon--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 {
  padding: 0.5rem 0.93rem;
  border-radius: 0.18rem;
  border: 1px solid transparent;
  text-align: center;
  background-color: transparent;
  color: #006d97;
}
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--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--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--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 {
  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--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 {
  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--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 {
  border-style: dotted;
  border-color: #006d97;
  outline: 0;
}
.interactive--invert,
.interactive-icon--invert,
.interactive-help--invert,
.interactive-meta-icon--invert {
  background-color: #fff;
  border-color: #006d97;
}
.interactive--primary,
.interactive-icon--primary,
.interactive-help--primary,
.interactive-meta-icon--primary,
.interactive-help,
.interactive-meta-icon {
  background-color: #007fad;
  border-color: #007fad;
  color: #fff;
}
.interactive--primary:focus,
.interactive-icon--primary:focus,
.interactive-help--primary:focus,
.interactive-meta-icon--primary:focus,
.interactive-help:focus,
.interactive-meta-icon:focus {
  border-color: #fff;
  border-style: dotted;
}
.interactive--disabled,
.interactive-icon--disabled,
.interactive-help--disabled,
.interactive-meta-icon--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 {
  background-color: #b2b2b2;
  border-color: #b2b2b2;
  color: #fff;
}
.interactive--baseDisabled,
.interactive-icon--baseDisabled,
.interactive-help--baseDisabled,
.interactive-meta-icon--baseDisabled,
.interactive--invertDisabled,
.interactive-icon--invertDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon--invertDisabled {
  background-color: #f2f2f2;
  border-color: #f2f2f2;
  color: #b2b2b2;
}
.interactive--invertDisabled,
.interactive-icon--invertDisabled,
.interactive-help--invertDisabled,
.interactive-meta-icon--invertDisabled {
  border-color: #b2b2b2;
}
.interactive--plainDisabled,
.interactive-icon--plainDisabled,
.interactive-help--plainDisabled,
.interactive-meta-icon--plainDisabled {
  text-align: left;
  color: #b2b2b2;
}
.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--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--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--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 {
  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 {
  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 {
  border-radius: 50%;
}
.interactive--cornered,
.interactive-icon--cornered,
.interactive-help--cornered,
.interactive-meta-icon--cornered,
.interactive-meta-icon {
  border-radius: 0;
}
.interactive--\@visited,
.interactive-icon--\@visited,
.interactive-help--\@visited,
.interactive-meta-icon--\@visited {
  font-weight: normal;
}
.interactive--\@inline,
.interactive-icon--\@inline,
.interactive-help--\@inline,
.interactive-meta-icon--\@inline {
  width: auto;
  display: inline-block;
}
.interactive--\@block,
.interactive-icon--\@block,
.interactive-help--\@block,
.interactive-meta-icon--\@block {
  width: 100%;
  display: block;
}
.edge .interactive[href^="http://"],
.edge .interactive[href^="https://"],
.edge .interactive[href^="mailto:"] {
  width: auto;
}
/*
Interactive Icon

Alle Eigenschaften sind von dem Basisblock __interactive__ abgeleitet.

#### 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
only - Nur Icon
vertical-center - Vertical zentrierte Ausrichtung

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-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 {
  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 {
  outline: 1px dotted #006d97;
  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-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 {
  border-radius: 0.18rem;
  border-color: transparent;
}
.interactive-help:focus {
  border-color: #fff;
}
.interactive-icon,
.interactive-help,
.interactive-meta-icon {
  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-icon[href^="https://"]::after,
a.interactive-help[href^="https://"]::after,
a.interactive-meta-icon[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-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 {
  content: url("../img/link_extern--invert-on-transparent.svg");
  padding-left: 0.25rem;
}
a.interactive-icon[href^="mailto:"]::after,
a.interactive-help[href^="mailto:"]::after,
a.interactive-meta-icon[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 {
  content: url("../img/link_mailto--invert-on-transparent.svg");
  padding-left: 0.25rem;
}
.interactive-icon__wrap,
.interactive-help__wrap,
.interactive-meta-icon__wrap {
  display: flex;
  align-items: flex-start;
}
.interactive-icon--reverse,
.interactive-help--reverse,
.interactive-meta-icon--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 {
  order: 1;
}
.interactive-icon--reverse .interactive-icon__text,
.interactive-help--reverse .interactive-help__text,
.interactive-meta-icon--reverse .interactive-meta-icon__text {
  margin-left: 0;
  margin-right: 0.37rem;
}
.interactive-icon--only,
.interactive-help--only,
.interactive-meta-icon--only,
.interactive-help {
  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-help {
  border-radius: 50%;
}
.interactive-icon--cornered,
.interactive-help--cornered,
.interactive-meta-icon--cornered,
.interactive-meta-icon {
  border-radius: 0;
}
.interactive-icon--only.interactive-icon--invert:hover,
.interactive-help--only.interactive-help--invert:hover,
.interactive-meta-icon--only.interactive-meta-icon--invert:hover {
  border-color: #006d97;
}
.interactive-icon--no-padding,
.interactive-help--no-padding,
.interactive-meta-icon--no-padding,
.interactive-help,
.interactive-meta-icon {
  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 {
  align-items: center;
}
.interactive-icon__text,
.interactive-help__text,
.interactive-meta-icon__text {
  margin-left: 0.37rem;
}
.interactive-icon__icon,
.interactive-help__icon,
.interactive-meta-icon__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 {
  pointer-events: all;
}
.interactive-icon .icon__svg,
.interactive-help .icon__svg,
.interactive-meta-icon .icon__svg,
.interactive-icon .icon__svg::before,
.interactive-help .icon__svg::before,
.interactive-meta-icon .icon__svg::before {
  display: block;
}
/*
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 zum jeweiligen Rootelement der Kontextsensitiven Hilfe.
- Im Datenattribut ```data-url``` ist der jeweilige Endpoint hinterlegt, an dem ein GET Request ausgelöst wird.

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

markup: demo.interactive-help.html

Styleguide ###squads.interactiveHelp###
*/
.interactive-help {
  vertical-align: sub;
  margin-right: 0.12rem;
  margin-left: 0.12rem;
}
.interactive-help .icon {
  margin-top: 0;
}
h1 .interactive-help,
h2 .interactive-help,
h3 .interactive-help,
h4 .interactive-help,
h5 .interactive-help {
  margin-left: 0.25rem;
}
h1 .interactive-help,
h2 .interactive-help {
  vertical-align: baseline;
}
h1 .interactive-help {
  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;
}
/*
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: #006d97;
}
a:hover,
a:focus {
  text-decoration: underline;
}
a:hover {
  outline: 0;
}
a:focus {
  outline: 1px dotted #006d97;
}
a[href^="http://"]::after,
a[href^="https://"]::after {
  content: url("../img/link_extern--invert-on-transparent.svg");
  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: url("../img/link_mailto--invert-on-transparent.svg");
  padding-left: 0.25rem;
}
.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: #333;
  position: relative;
  display: inline-block;
}
.toc .icon {
  cursor: pointer;
}
.toc .icon:focus {
  outline: 1px dotted #006d97;
}
.toc .icon + a {
  left: 0;
}
.toc__back::after {
  content: "";
  background: url("../img/jumpmarker--invert.svg") right 0 no-repeat;
  background-size: 1rem;
  display: inline-block;
  height: 1rem;
  margin-left: 0.5rem;
  transform: rotate(180deg);
  width: 1rem;
}
/*
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 #fff;
}
.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;
}
/*
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
- 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###
*/
.toggleBox {
  margin-bottom: 0.31rem;
}
.toggleBox__head {
  display: block;
  cursor: pointer;
  color: #006d97;
  font-size: 0.87rem;
}
.toggleBox__head .icon {
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}
.toggleBox__headButton {
  display: flex;
  padding-left: 0.25rem;
}
.toggleBox__headButton:focus {
  outline: 1px dotted #006d97;
}
.toggleBox__headButton:focus,
.toggleBox__headButton:hover {
  text-decoration: underline;
}
.toggleBox__headButton .toggleBox__mainTitle {
  padding-right: 0.5rem;
}
.toggleBox__headButton .toggleBox__subTitle {
  font-size: 0.75rem;
}
.toggleBox--closed .toggleBox__content {
  display: none;
}
.toggleBox--simple .toggleBox__head {
  background: #f2f2f2;
}
.toggleBox--simple.toggleBox--closed {
  border-bottom: 2px solid #fff;
}
.toggleBox--simple .toggleBox__content {
  padding-left: 0;
  padding-right: 0;
}
.toggleBox--compact {
  border: 1px solid #006d97;
}
.toggleBox--compact.toggleBox--closed {
  border-color: transparent;
}
.toggleBox--compact.toggleBox--closed .toggleBox__headButton {
  outline: 1px solid #006d97;
}
.toggleBox--compact.toggleBox--closed .toggleBox__headButton:focus {
  outline: 1px dotted #006d97;
}
.toggleBox--compact .toggleBox__head {
  background-color: #f8f8f8;
}
.toggleBox--compact .toggleBox__headButton {
  padding-right: 0.25rem;
}
.toggleBox--compact .toggleBox__content {
  padding-top: 0.5rem;
}
.toggleBox--primary {
  background-color: #f2f2f2;
}
.toggleBox--primary .toggleBox__head {
  background-color: #007fad;
  color: #fff;
}
.toggleBox--primary .toggleBox__headButton {
  padding-right: 0.25rem;
}
.toggleBox--small .toggleBox__head {
  color: #333;
  font-size: 0.87rem;
}
.toggleBox--small .toggleBox__head .icon {
  margin-top: 0;
}
.toggleBox--simple .toggleBox__headButton,
.toggleBox--compact .toggleBox__headButton,
.toggleBox--primary .toggleBox__headButton {
  font-size: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.toggleBox--small .toggleBox__content {
  font-size: 0.87rem;
}
.toggleBox__content {
  padding: 0.25rem 0.5rem 0.5rem 1.31rem;
}
.toggleBox__content .toggleBox--noMargin {
  margin-left: -1.31rem;
  margin-right: -0.5rem;
}
/*
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 #c8c8c8;
  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: #94c502;
  border-bottom: 2px solid #94c502;
  padding-bottom: 0;
  color: #333;
}
.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--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 {
  border: 1px solid;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
  align-items: flex-start;
  background-color: #fff;
}
.messageBox__iconWrapper {
  order: 1;
  background: #727272;
  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: #727272;
}
.messageBox--hint .messageBox__iconWrapper,
.messageBox--loading .messageBox__iconWrapper {
  background: #727272;
}
.messageBox--hint .messageBox__title,
.messageBox--loading .messageBox__title {
  color: #727272;
}
.messageBox--hintTile {
  border-color: #ddd;
}
.messageBox--hintTile .messageBox__iconWrapper {
  background: #ddd;
}
.messageBox--hintTile .messageBox__title {
  color: #ddd;
}
.messageBox--loading .messageBox__iconWrapper .icon {
  transform-origin: 50% 53%;
  -webkit-animation: animation_rotate 2s linear infinite;
          animation: animation_rotate 2s linear infinite;
}
.messageBox--error {
  border-color: #cf4821;
}
.messageBox--error .messageBox__iconWrapper {
  background: #cf4821;
}
.messageBox--error .messageBox__title {
  color: #cf4821;
}
.messageBox--success {
  border-color: #94c502;
}
.messageBox--success .messageBox__iconWrapper {
  background: #94c502;
}
.messageBox--success .messageBox__title {
  color: #618101;
}
.messageBox--successTile {
  border-color: #007fad;
}
.messageBox--successTile .messageBox__iconWrapper {
  background: #007fad;
}
.messageBox--successTile .messageBox__title {
  color: #007fad;
}
.messageBox--warning {
  border-color: #fbb03b;
}
.messageBox--warning .messageBox__iconWrapper {
  background: #fbb03b;
}
.messageBox--warning .messageBox__title {
  color: #333;
}
.messageBox__title {
  color: #333;
  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 duch 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;
}
.breadcrumb__list {
  padding-left: 0;
  margin: 0;
}
.breadcrumb__listItem {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0;
}
.breadcrumb__listItem:last-child {
  display: none;
}
.breadcrumb .icon {
  position: relative;
  top: 0.18rem;
}
.breadcrumb a {
  padding: 0.25rem 0;
  border: 1px solid transparent;
  display: inline;
}
.breadcrumb a:focus {
  border: 1px dotted #006d97;
}
/*
Layout

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

__Hinweis__:
- Beim Formular 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,form)``` - Spezifisches Layout

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

markup: demo.layout.html

Styleguide ###portalrahmen.layout###
*/
/*
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: #fff;
  position: relative;
}
.page--default {
  -webkit-animation-duration: 0.001s;
          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 {
    -webkit-animation-name: "page--default__zeroToMin";
            animation-name: "page--default__zeroToMin";
    content: 'page--default__zeroToMin';
  }
}
@-webkit-keyframes page--default__zeroToMin {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--default__min";
            animation-name: "page--default__min";
    content: 'page--default__min';
  }
}
@-webkit-keyframes page--default__min {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--default__mid";
            animation-name: "page--default__mid";
    content: 'page--default__mid';
  }
}
@-webkit-keyframes page--default__mid {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--default__max";
            animation-name: "page--default__max";
    content: 'page--default__max';
  }
}
@-webkit-keyframes page--default__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes page--default__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
.page--form {
  -webkit-animation-duration: 0.001s;
          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 {
    -webkit-animation-name: "page--form__zeroToMin";
            animation-name: "page--form__zeroToMin";
    content: 'page--form__zeroToMin';
  }
}
@-webkit-keyframes page--form__zeroToMin {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--form__min";
            animation-name: "page--form__min";
    content: 'page--form__min';
  }
}
@-webkit-keyframes page--form__min {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--form__mid";
            animation-name: "page--form__mid";
    content: 'page--form__mid';
  }
}
@-webkit-keyframes page--form__mid {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@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 {
    -webkit-animation-name: "page--form__max";
            animation-name: "page--form__max";
    content: 'page--form__max';
  }
}
@-webkit-keyframes page--form__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
@keyframes page--form__max {
  from {
    clip: rect(1px, auto, auto, auto);
  }
  to {
    clip: rect(0px, auto, auto, auto);
  }
}
.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: #f8f8f8;
}
@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 0;
}
.page-default__root {
  padding: 1.5rem 1rem 2rem;
  min-height: 36.56rem;
  overflow-x: auto;
}
.page-default__main {
  z-index: 1;
}
.page-default__main .messageBox:last-child {
  margin-bottom: 0;
}
.page-default__aside {
  padding: 1rem;
  margin: 1rem 0;
}
@media screen and (min-width: 80rem), print {
  .page-default__body {
    border: 1px solid #ddd;
    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-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: #f8f8f8;
}
@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__root {
  display: flex;
  justify-content: center;
}
.page-form__treeWrapper {
  min-width: 0;
}
.page-form__contentWrapper {
  margin-left: 2rem;
  min-width: calc(100% - (2rem + 0.5rem));
  position: relative;
}
.page-form__main {
  overflow-x: auto;
}
.page-form__body {
  max-width: 127.81rem;
  margin: 0 auto;
}
.page-form__contentWrapper,
.page-form__treeWrapper {
  display: flex;
  width: 100%;
}
.page-form__tree,
.page-form__content {
  padding: 1rem 0.5rem 0.5rem;
  position: relative;
}
.page-form__tree {
  background: #f2f2f2;
  min-width: 16.75rem;
  box-shadow: 2px 1px 2px 0 rgba(51,51,51,0.75);
}
.page-form__tree .alignment--buttonGroup {
  margin-top: 1rem;
}
.page-form__tree .icondefinition {
  margin-top: 2rem;
}
.page-form__tree .icondefinition__item--a11yBorder .icondefinition__text {
  border-bottom: 1px dashed #f2f2f2;
}
.page-form__tree .toc {
  margin-bottom: 2rem;
}
.page-form__content {
  padding-left: 1.5rem;
  min-width: 100%;
  background: #fff;
  box-shadow: -2px 1px 2px 0 rgba(51,51,51,0.75);
}
.page-form__aside {
  padding: 1rem;
  margin: 1rem 0;
}
.page-form__aside .icondefinition__item--a11yBorder .icondefinition__text {
  border-bottom: 1px dashed #f8f8f8;
}
@media screen and (min-width: 30rem), print {
  .page-form__tree {
    min-width: 26.75rem;
  }
  .page-form__root {
    min-height: 39.68rem;
  }
}
@media screen and (min-width: 48rem), print {
  .page-form__tree {
    min-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__root {
    min-height: 40.93rem;
  }
  .safari .page-form__root {
    min-height: 57.62rem;
  }
}
@media screen and (min-width: 80rem), print {
  .page-form__root {
    min-height: 50.43rem;
  }
  .safari .page-form__root {
    min-height: 40.43rem;
  }
}
@media screen and (min-width: 60rem), print {
  .page-form__tree,
  .page-form__content {
    padding: 1.5rem 1rem 1rem;
  }
  .page-form__content {
    padding-left: 1.5rem;
  }
}
@media screen and (min-width: 80rem), print {
  .page-form__contentWrapper {
    min-width: 76.75rem;
  }
  .page-form__tree {
    padding: 1.5rem;
  }
  .page-form__tree {
    min-width: 48.62rem;
  }
  .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;
  }
}
@media screen and (min-width: 105rem), print {
  .page-form__contentWrapper {
    min-width: 80rem;
  }
  .page-form__content {
    padding-left: 3.5rem;
    padding-right: 2rem;
  }
}
@media screen and (min-width: 127.81rem), print {
  .page-form__contentWrapper {
    margin-left: 0;
  }
}
.page .lug {
  position: absolute;
  height: 48px;
  width: 24px;
  content: " ";
  cursor: pointer;
  display: flex;
  z-index: 1;
}
.page .lug--content {
  border-radius: 48px 0 0 48px;
  left: -24px;
  background: #fff;
  box-shadow: -2px 0 1px 0 rgba(51,51,51,0.75);
}
.page .lug--content .icon {
  transform: translateX(100%);
  cursor: pointer;
  align-self: center;
}
.page .lug--tree {
  border-radius: 0 48px 48px 0;
  left: 100%;
  background: #f2f2f2;
  box-shadow: 2px 0 2px 0 rgba(51,51,51,0.75);
}
.page .lug--tree .icon {
  transform: translateX(-50%) rotate(180deg);
  cursor: pointer;
  align-self: center;
}
.page {
  content: "";
}
.__localDev table {
  background: #fff;
}
/*
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: #cf4821;
  color: #fff;
  padding: 0.5rem;
  display: block;
}
.formItem__line + .validation-error {
  margin-top: 0.5rem;
}
.validation-error--mzb {
  box-shadow: 0 0 0 0.56rem #cf4821;
  padding: 0;
  margin: 0;
}
.ios .validation-error--mzb,
.safari .validation-error--mzb {
  box-shadow: 0 0 0 0.62rem #cf4821;
}
/*
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
- select

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


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###

*/
/*

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 {
  display: flex;
  margin-bottom: 0.18rem;
  color: #333;
  background-color: #f8f8f8;
}
.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--login {
  padding: 0;
  background-color: #fff;
}
.formItem--login > .formItem__wrapper {
  background-color: #fff;
}
.formItem--login .formItem__line {
  padding: 0;
}
.formItem--login .formItem__fieldItem {
  margin: 0;
}
.formItem--emphasize input {
  font-size: 3.5rem;
  color: #618101;
}
.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: #727272;
  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: #f2f2f2;
}
.formItem__metaBar {
  background: #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-top: 0;
  padding: 0.25rem 0.5rem;
  min-height: 1.75rem;
}
.formItem__metaBarRightContainer,
.formItem__metaBarLeftContainer {
  display: flex;
  align-items: center;
}
.formItem__metaBarRightContainer > *,
.formItem__metaBarLeftContainer > * {
  display: flex;
}
.formItem__metaBarRightContainer > :not(:last-child),
.formItem__metaBarLeftContainer > :not(:last-child) {
  margin-right: 0.62rem;
}
.formItem__metaBarRightContainer:first-child {
  margin-left: auto;
}
.formItem__metaBarKeyFigure {
  font-size: 0.68rem;
  color: #484848;
  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 #fff;
}
.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: #ddd;
  line-height: 1.4;
}
.formItem__line--alternateOrder .formItem__metaBarRequiredField {
  display: block;
}
.formItem__line--alternateOrder .formItem__metaBarLeftContainer {
  margin-right: 0.25rem;
}
.formItem__legend + .formItem__line--alternateOrder {
  border-top: 2px solid #fff;
}
.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-m .interactive-meta-icon,
.formItem__fieldItem--size-s .interactive-meta-icon {
  padding: 0;
}
.formItem__fieldItem[data-score-level] .formItem__passwordMeterHint {
  display: block;
}
.formItem__fieldItem[data-score-level='0'] .formItem__passwordMeterHint {
  background: #fbb03b;
}
.formItem__fieldItem[data-score-level='0'] .formItem__passwordMeterScoreBar {
  width: 20%;
  background: #fbb03b;
}
.formItem__fieldItem[data-score-level='1'] .formItem__passwordMeterHint {
  background: #fbb03b;
}
.formItem__fieldItem[data-score-level='1'] .formItem__passwordMeterScoreBar {
  width: 40%;
  background: #fbb03b;
}
.formItem__fieldItem[data-score-level='2'] .formItem__passwordMeterHint {
  background: #feee00;
}
.formItem__fieldItem[data-score-level='2'] .formItem__passwordMeterScoreBar {
  width: 60%;
  background: #feee00;
}
.formItem__fieldItem[data-score-level='3'] .formItem__passwordMeterHint {
  background: #feee00;
}
.formItem__fieldItem[data-score-level='3'] .formItem__passwordMeterScoreBar {
  width: 80%;
  background: #feee00;
}
.formItem__fieldItem[data-score-level='4'] .formItem__passwordMeterHint {
  background: #94c502;
}
.formItem__fieldItem[data-score-level='4'] .formItem__passwordMeterScoreBar {
  width: 100%;
  background: #94c502;
}
.formItem__field {
  width: 100%;
  border: 1px solid #c8c8c8;
  padding: 0.37rem 0.5rem;
  display: block;
  background-color: #fff;
  color: #333;
  border-radius: 0;
}
.formItem__field--numberValue {
  text-align: right;
}
.formItem__field--checkbox,
.formItem__field--radio {
  width: auto;
  transform: translateY(5px);
}
.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 #cf4821;
  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 #cf4821;
  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 #cf4821;
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field--marked,
.formItem__field--radio.formItem__field--marked {
  outline: 0.25rem solid #fbb03b;
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field--marked:focus,
.formItem__field--radio.formItem__field--marked:focus {
  box-shadow: 0 0 0 4px #fbb03b;
  outline: none;
}
.safari .formItem__field--checkbox.formItem__field--marked:focus,
.safari .formItem__field--radio.formItem__field--marked:focus {
  outline: 0.25rem double #fbb03b;
  box-shadow: none;
}
.formItem__field--checkbox.formItem__field:focus,
.formItem__field--radio.formItem__field:focus {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.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--textarea[maxlength="500"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="500"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="501"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="502"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="503"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="504"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="505"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="506"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="507"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="508"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="509"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="510"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="511"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="512"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="513"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="514"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="515"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="516"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="517"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="518"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="519"] {
  min-height: 10.25rem;
}
.safari .formItem__field--textarea[maxlength="520"] {
  min-height: 10.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 {
  padding: 0.25rem 0.25rem 0.31rem;
}
.formItem__field--invalid,
.formItem__field:invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821;
  border-bottom: 0;
  margin-bottom: 0.25rem;
  outline: none;
}
.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b;
  border-bottom: 0;
  margin-bottom: 0.25rem;
  outline: none;
}
.formItem__field:focus {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
.formItem__field::-webkit-input-placeholder {
  font-style: italic;
  color: #727272;
}
.formItem__field::-moz-placeholder {
  color: #727272;
  font-style: italic;
  opacity: 1;
}
.formItem__field:-ms-input-placeholder {
  color: #727272;
  font-style: italic;
}
.formItem__field:-moz-placeholder {
  color: #727272;
  font-style: italic;
}
.formItem__field[readonly],
.formItem__field[disabled] {
  background-color: #f2f2f2;
  color: #5d5d5d;
}
.formItem__field[disabled] {
  -webkit-text-fill-color: #5d5d5d;
  -webkit-opacity: 1;
}
.formItem__field--uppercase {
  text-transform: uppercase;
}
.formItem__fieldLimit {
  font-size: 0.75rem;
  color: #3f3f3f;
  margin-top: 0.25rem;
}
.formItem__fieldIcon {
  display: block;
}
.formItem__fieldIcon a {
  display: block;
  padding: 2px 2px 1px;
  font-size: 0.62rem;
}
.formItem__fieldIcon a > span {
  cursor: pointer;
}
.formItem__fieldIconList {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1px;
  right: 1px;
  height: 2.06rem;
}
.formItem__fieldIconList > div {
  margin-left: 2px;
}
.formItem__error {
  color: #cf4821;
  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 #ddd;
}
.formItem__operator ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset 17px 0 0 #ddd;
}
.formItem__operator ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset 17px 0 0 #ddd;
}
.formItem__carryOver {
  right: 1px;
}
.formItem__carryOver ~ .formItem__field {
  padding-right: 1.5rem;
  box-shadow: inset -1.07rem 0 0 #ddd;
}
.formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset -1.07rem 0 0 #ddd;
}
.formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset -1.07rem 0 0 #ddd;
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset 17px 0 0 #ddd, inset -1.07rem 0 0 #ddd;
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset 17px 0 0 #ddd, inset -1.07rem 0 0 #ddd;
}
.formItem__operator ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset 17px 0 0 #ddd, inset -1.07rem 0 0 #ddd;
}
.formItem__prefix {
  background: #f2f2f2;
  color: #333;
  left: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.6;
}
.formItem__prefix--2 ~ .formItem__field {
  padding-left: 1.62rem;
  box-shadow: inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--2 ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--2 ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--2 ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset -1.07rem 0 0 #ddd, inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--2 ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset -1.07rem 0 0 #ddd, inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--2 ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset -1.07rem 0 0 #ddd, inset 1.37rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__field {
  padding-left: 2.25rem;
  box-shadow: inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset -1.07rem 0 0 #ddd, inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset -1.07rem 0 0 #ddd, inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--3 ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset -1.07rem 0 0 #ddd, inset 2rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__field {
  padding-left: 2.87rem;
  box-shadow: inset 2.62rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset 2.62rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset 2.62rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__carryOver ~ .formItem__field {
  box-shadow: inset -1.07rem 0 0 #ddd, inset 2.62rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__carryOver ~ .formItem__field.formItem__field--invalid {
  box-shadow: 0 0.25rem 0 -0.01rem #cf4821, inset -1.07rem 0 0 #ddd, inset 2.62rem 0 0 #f2f2f2;
}
.formItem__prefix--4 ~ .formItem__carryOver ~ .formItem__field.formItem__field--marked {
  box-shadow: 0 0.25rem 0 -0.01rem #fbb03b, inset -1.07rem 0 0 #ddd, inset 2.62rem 0 0 #f2f2f2;
}
.formItem__legend {
  padding: 0.87rem 0 0.62rem 1rem;
  background-color: #f2f2f2;
}
.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: #ddd;
  line-height: 1.4;
}
.formItem__help {
  margin-left: 1rem;
  padding-right: 0.5rem;
}
.formItem__help > .interactive-icon {
  vertical-align: bottom;
}
.formItem__tooltip {
  display: none;
  font-size: 0.75rem;
  position: absolute;
  top: -1.5rem;
  z-index: 300;
  background-color: #fff9d1;
  padding: 0.12rem 0.25rem;
  border: 1px solid #c8c8c8;
  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: #c8c8c8;
  border-width: 8px;
  margin: 0 -1px;
}
.formItem__tooltip::after {
  border-top-color: #fff9d1;
  border-width: 7px;
}
.formItem__tooltip--right {
  right: 0;
}
.formItem__tooltip--right::before,
.formItem__tooltip--right::after {
  left: auto;
  right: 5px;
}
.formItem__passwordMeter .formItem__field {
  padding-right: 4rem;
}
.formItem__passwordMeterHint {
  display: none;
  cursor: pointer;
  border: 2px solid #006d97;
}
.formItem__passwordMeterScore {
  height: 8px;
  width: 100%;
  margin-top: 2px;
  background: #999;
}
.formItem__passwordMeterScoreBar {
  height: 100%;
  width: 0;
}
.chrome .formItem__passwordMeterHint a {
  padding-bottom: 0;
}
.edge .formItem__field--select {
  padding: 0.31rem 0.37rem;
}
.firefox .formItem__field--select {
  padding: 0.25rem;
}
.firefox .formItem__field--select:focus {
  outline: none;
}
.firefox.mobile .formItem__field--radio,
.firefox.mobile .formItem__field--checkbox {
  transform: translateY(3px);
  padding: 1px;
}
.firefox.mobile .formItem__field--radio {
  border-radius: 50%;
}
.mac .formItem__field--select,
.ios .formItem__field--select {
  -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;
}
.mac .formItem__field--select[readonly],
.ios .formItem__field--select[readonly],
.mac .formItem__field--select[disabled],
.ios .formItem__field--select[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242.svg");
}
.ios .formItem__field--select {
  padding: 0.43rem 1.25rem 0.43rem 0.5rem;
}
.safari.desktop .formItem__field--select {
  padding: 0.37rem 1.25rem 0.43rem 0.5rem;
}
.linux .formItem__field--select {
  -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;
}
.linux .formItem__field--select[readonly],
.linux .formItem__field--select[disabled] {
  background-image: url("../img/triangle_down-triple93-on-triple242.svg");
}
/*
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 {
  display: flex;
  flex-direction: column;
  border-top: 4px solid #94c502;
}
.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: #484848;
}
.footer__temporaryContent {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  color: #ddd;
  max-width: 120rem;
  margin: 0 auto;
}
.footer__infoText a {
  color: #fff;
  font-weight: normal;
  display: block;
}
.footer__infoText a:focus {
  outline-color: #fff;
}
.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 #727272;
}
.footer__infoGroup {
  padding: 2rem 0.5rem;
}
.footer__helpGroup {
  padding: 1.5rem 0.5rem 2rem;
}
.footer__heading {
  font-size: 1.5rem;
  color: #f2f2f2;
  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: #fff;
  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: #006d97;
  font-weight: normal;
  background: #fff;
}
.footer .footer__certificateItem .interactive:focus {
  outline: 1px dotted #fff;
}
.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: url("../img/link_extern--invert-on-transparent.svg");
  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: #fff;
}
.footer .footer__certificateItemImg .figure__image img {
  max-width: 100%;
  max-height: 5rem;
}
.footer .footer__certificateItemText {
  background: #f2f2f2;
  padding: 1rem;
  font-size: 0.87rem;
  text-align: center;
}
.footer__permanent {
  background: #333;
}
.footer__permanentContent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: row wrap;
  color: #ddd;
  max-width: 120rem;
  margin: 0 auto;
}
.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: #fff;
  text-align: left;
}
.footer .interactive:focus {
  border-color: #fff;
}
.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: #fff;
}
.footer .interactive-icon:focus {
  border-color: #fff;
}
.footer__helpTitle {
  padding: 2rem 1rem 0;
}
.edge .footer a[href^="http://"] .footer__certificateItemText::after,
.firefox .footer a[href^="http://"] .footer__certificateItemText::after,
.edge .footer .interactive[href^="http://"] .footer__certificateItemText::after,
.firefox .footer .interactive[href^="http://"] .footer__certificateItemText::after,
.edge .footer a[href^="https://"] .footer__certificateItemText::after,
.firefox .footer a[href^="https://"] .footer__certificateItemText::after,
.edge .footer .interactive[href^="https://"] .footer__certificateItemText::after,
.firefox .footer .interactive[href^="https://"] .footer__certificateItemText::after {
  width: 18px;
  height: 23px;
}
/*
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;
}
/*
Darkmode-Toggle

Interaktives Element zum Ein- und Ausschalten des Kontrastmodus.

markup: demo.darkmodeToggle.html

Styleguide ###interaktiveElemente.darkmodeToggle###
*/
.darkmodeToggle .interactive-icon {
  border-color: #fff;
}
.header {
  border-bottom: 1px solid #94c502;
}
.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--etr .icon {
  transform: scale(2) translateY(-1px);
}
.header__title--etr .header__maintitle {
  margin-left: 0.5rem;
}
.header__maintitle {
  color: #94c502;
  font-size: 1.62rem;
  display: inline-block;
}
.header__subtitle {
  display: none;
}
.header__italic {
  color: #727272;
  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: #fff;
  padding: 0.5rem;
  box-shadow: 0 2px 2px 0 rgba(51,51,51,0.75);
  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 {
  margin-left: 0;
}
.header--opened .header__content {
  display: flex;
  flex-direction: column;
}
.ios .header__help,
.ios .header__search {
  margin-right: 0.5rem;
}
@media screen and (min-width: 30rem), print {
  .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 .alignment__item {
    flex: 1 1 0;
  }
  .alignment__leftGroup,
  .alignment__rightGroup,
  .alignment__centerGroup {
    flex: 1 1 0;
    flex-direction: row;
  }
  .alignment .alignment__leftGroup.alignment__leftGroup--borderBox,
  .alignment .alignment__rightGroup.alignment__rightGroup--borderBox,
  .alignment .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;
  }
  .alignment--buttonGroup .alignment__leftGroup + .alignment__rightGroup,
  .alignment--buttonGroupCenter .alignment__leftGroup + .alignment__rightGroup {
    margin-top: 0;
  }
  .alignment--buttonGroup .alignment__item:not(:last-child) {
    margin-bottom: 0;
  }
  .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 .alignment__item,
  .alignment .alignment__leftGroup,
  .alignment .alignment__rightGroup,
  .alignment .alignment__centerGroup {
    margin-bottom: 0;
  }
  .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;
  }
  .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__maintitle {
    margin: 0 0.5rem;
  }
}
@media screen and (max-width: 48rem) {
  .edge .formItem .formItem__fieldItem--size-xxl,
  .edge .formItem .formItem__fieldItem--size-xxxl {
    flex-basis: auto;
  }
}
@media screen and (min-width: 48rem), print {
  .alignment--buttonGroup .alignment__leftGroup,
  .alignment--buttonGroup .alignment__rightGroup {
    flex-basis: auto;
    max-width: none;
  }
  .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: #f2f2f2;
    flex-direction: column;
  }
  .formItem .formItem__labelGroup {
    flex-basis: 100%;
  }
  .formItem .formItem__fieldGroup {
    flex-basis: 100%;
  }
  .formItem--login {
    padding: 0;
    background-color: #fff;
  }
  .formItem__lnr {
    background-color: #f2f2f2;
    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__metaBar {
    padding: 0.5rem;
    min-height: 2.12rem;
  }
  .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: #c8c8c8;
  }
  .formItem__tooltip::after {
    border-bottom-color: #fff9d1;
  }
  .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 .formItem .formItem__fieldItem--size-xxxxl,
  .edge .formItem .formItem__fieldItem--size-xxxxxl {
    flex-basis: auto;
  }
}
@media screen and (min-width: 60rem), print {
  ._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;
  }
  .interactive-icon__icon {
    margin-top: 0.18rem;
  }
  .interactive-icon--only .interactive-icon__icon {
    margin-top: 0;
  }
  .alignment--buttonGroup .alignment__item:not(:last-child),
  .alignment--buttonGroupCenter .alignment__item:not(:last-child) {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 80rem), print {
  .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 .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__title--etr .icon {
    transform: scale(4) translateY(-2px);
  }
  .header__title--etr .header__maintitle {
    margin-left: 1.75rem;
  }
  .header__maintitle {
    font-size: 3rem;
    line-height: 1;
  }
  .header__subtitle {
    color: #727272;
    display: inline-block;
    font-size: 1.12rem;
    position: relative;
    top: -1.25rem;
    box-shadow: 0 16px 0 #ddd;
    margin-right: 0.5rem;
  }
  .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;
  }
  .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: 105rem), print {
  .header__search {
    margin-right: 8rem;
    margin-bottom: 0;
  }
}
html {
  background-color: #333;
}
.tokenServer .header__maintitle {
  text-transform: uppercase;
}
.tokenServer .header__content {
  align-items: center;
}
.tokenServer .header #username {
  font-weight: bold;
}
.tokenServer .page-default__row {
  flex-direction: column;
  align-items: center;
}
.tokenServer #warningMessageBox {
  margin-top: 8px;
}
.tokenServer__form {
  background-color: #f2f2f2;
  padding: 16px;
  min-width: 350px;
}
.tokenServer__form .formItem {
  background-color: inherit;
}
.tokenServer__form .formItem__wrapper {
  background-color: inherit;
}
.tokenServer__form .formItem__line {
  padding: 0;
}
.tokenServer__form .formItem__fieldItem {
  margin: 0;
}
.tokenServer__form .formItem--login {
  background-color: inherit;
}
.tokenServer #errorMessageBox {
  display: none;
}
.tokenServer #loginButton {
  margin-top: 16px;
}