/* vendors */
/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}
/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}
/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  word-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  -o-tab-size: 4;
     tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}
/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}
/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}
/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}
/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
:where(nav li)::before {
  content: "\200B";
  float: left;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(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.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}
/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}
/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}
/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}
/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}
/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}
/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  border: 1px solid #a0a0a0;
}
/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}
/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style upload buttons 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 styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}
:where(dialog:not([open])) {
  display: none;
}
/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}
/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy="true" i]) {
  cursor: progress;
}
/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
:where([aria-controls]) {
  cursor: pointer;
}
/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}
/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden="false" i][hidden]) {
  display: inline;
  display: initial;
}
:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
/* configs */
/* -----------------------------------------------------------------------------

Spacing Declarations

----------------------------------------------------------------------------- */
:root {
	/* = 2px @ 16px body font-size */
	/* = 4px @ 16px body font-size */
	/* = 8px @ 16px body font-size */
	/* = 16px @ 16px body font-size */
	/* = 32px @ 16px body font-size */
	/* = 64px @ 16px body font-size */
	/* = 96px @ 16px body font-size */
	/* = 128px @ 16px body font-size */
}
/* -----------------------------------------------------------------------------

Lost Grid Settings

https://lostgrid.org/docs.html#global-grid-settings

----------------------------------------------------------------------------- */
/* var(--space-l) + 8px */
:root {
	/* main and brand colors  */

	/* base brand colors — identisch zur Website (../website theme.css):
	   Indigo als Brand (seit 2026-07 das dunkle indigo-900), Slate-Neutrale,
	   Emerald/Amber/Rot als Status. */

	/* standards */
	/* can be set as brand variables if suiting */

	/* semantic tokens (Website-Vokabular, 1:1 aus theme.css) */ /* indigo-800, auf der dunklen Fläche heller */

	/* Headlines sind tiefes Indigo, nie reines Schwarz (Brand-Voice). */

	/* Fokus-Ring in Brand-Farbe (rgba statt color-mix — alte PostCSS-Pipeline) */

	/* Radii (App-rem = 10px Basis, daher px statt Website-rem) */

	/* Elevation */

	/* Motion — nur Farb-Properties animieren (nie `all`) */

	/* Typo-Akzent */

	/* tints & shades */

	/* darken */
	/* lighten */

	/* darken */
	/* lighten */

	/* darken */

	/* lighten */

	/* darken */
	/* lighten */

	/* darken */
	/* lighten */

	/* darken */
	/* lighten */

	/* darken */
	/* lighten */

	/* project specific additionals */



  /*Farben ================================*/
  /*orange      warning*/
  /*rot         error*/

  /*orange      Wert etwas zu alt*/
  /*rot         Wert viel zu alt*/

  /*grau        temp value*/
  /*gelb         geschätzter Wert weil Datenlücke*/

  /*blau        manuell eingegeben*/
  /*lila        calculated*/



}
/* -----------------------------------------------------------------------------

Font-Integrations

Fonts (@fontsource-Subsets, self-hosted):

	"Inter"      400 / 500 / 600 / 700 / 800  — UI + Fließtext + Tabellen (nüchtern, tnum)
	"Fira Sans"  400 / 500 / 600 / 700 / 800  — Headlines + Logo (Website-Brand)
	"Fira Code"  500 / 600                    — technische Akzente (IDs, Zahlen)

Latin deckt DE ab (ä/ö/ü/ß in U+0000-00FF); latin-ext lädt nur bei Bedarf
(unicode-range).

----------------------------------------------------------------------------- */
/* Inter — latin */
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-800-normal.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Inter — latin-ext */
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-ext-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	src: url('/fonts/inter-latin-ext-800-normal.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fira Sans — latin */
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-800-normal.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fira Sans — latin-ext */
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-ext-400-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-ext-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-ext-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-ext-700-normal.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('/fonts/fira-sans-latin-ext-800-normal.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fira Code — latin */
@font-face {
	font-family: 'Fira Code';
	src: url('/fonts/fira-code-latin-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Fira Code';
	src: url('/fonts/fira-code-latin-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fira Code — latin-ext */
@font-face {
	font-family: 'Fira Code';
	src: url('/fonts/fira-code-latin-ext-500-normal.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Fira Code';
	src: url('/fonts/fira-code-latin-ext-600-normal.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* -----------------------------------------------------------------------------

Typography

----------------------------------------------------------------------------- */
:root {
	/* font-family with font-stack: Inter für UI/Body/Tabellen (nüchtern, daten-
	   tauglich), Fira Sans nur für Headlines (--f-heading, Website-Brand),
	   Fira Code für technische Akzente. */

	/* font-weights (Fira Sans: 400/500/600/700/800) */
}
html {
	font-size: 10px;
	line-height: 1;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #0f172a;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body {
	/* Ein Tick kleiner als mit Texta (18-20px): Inter hat eine größere x-Höhe
	   und wirkt bei gleicher px-Größe größer. */
	font-size: calc(1.6rem + 0.19999999999999996 * ((100vw - 36rem) / 92));
}
@media (max-width: 400px) {
body {
		hyphens: auto;
}
	}
@media screen and (min-width: 1280px) {
  body {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 360px) {
  body {
    font-size: 1.6rem;
  }
}
strong {
	font-weight: 700;
}
small {
	font-size: 80%;
}
em {
	font-style: italic;
}
p {
	line-height: 1.4;
	margin-bottom: 3.2rem;
	margin-top: 1.6rem;
	/*text-remove-gap: both;*/
	max-width: 87.5rem;
	/* to keep full-width text readable */
}
p:last-child {
		margin-bottom: 1.6rem;
		margin-top: 1.6rem;
	}
address {
	font-style: normal;
}
ul{
  margin-bottom: 30px;
}
ul li{
    margin-bottom: 15px;
  }
ul li:last-child{
  margin-bottom: 0;
     }
.mute{
	color: #94a3b8;
}
/* Secondary text — dimmed foreground colour for captions / helper copy. */
.text-secondary {
	color: #475569;
}
/* Hint — smaller type for captions / helper lines. */
.hint {
	font-size: .85em;
}
.fa-2x.fa-stack{
	font-size: 0.5em;

}
i {
	vertical-align: middle;
}
/* -----------------------------------------------------------------------------

Z-Indeces

----------------------------------------------------------------------------- */
:root {


	/* .header-page elements */
}
/* -----------------------------------------------------------------------------

Default Transition Timings

----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------

Keyframe Animations

----------------------------------------------------------------------------- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}
@keyframes livePulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.45;
	}
}
/* Applied by livePoll.js (data-live-pulse) to the element(s) a live feed
   reports as actively being worked on — e.g. the entity-type row a push job
   is currently writing. Pulses AND bolds so the active row stands out even
   with the animation paused (reduced-motion, background tab). */
.live-pulse {
	animation: livePulse 1.2s ease-in-out infinite;
	font-weight: 700;
}
/* templates */
*::-moz-selection {
		color: #FFF;
		background: #312e81;
	}
*::selection {
		color: #FFF;
		background: #312e81;
	}
body {
	/* footer always on bottom */
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #f8fafc;
	color: #0f172a;
}
body > main {
    margin: 20px;
		flex: 1 1 auto;
		position: relative;
		z-index: 10;
	}
figure {
	margin: 0;
}
section {
	position: relative;
}
/* error ------------------------------------------- */
small.error,
.error{
  color: #dc2626 !important;
}
small.error svg,.error svg{
    width: 15px;
    height: 15px;
    margin-right: 10px;
  }
small.error{
  display: inline-block;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
/* success ------------------------------------------- */
small.success,
.success{
  color: #059669 !important;
}
small.success svg,.success svg{
    width: 15px;
    height: 15px;
    margin-right: 10px;
  }
small.success{
  display: inline-block;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.warn,
.warning{
	color: #d97706 !important;
}
.mute{
	color: #94a3b8 !important;
}
.manual_edit{
	color: #4338ca;
}
.fw-font{
	font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* components */
/* FORMS -------------------------------------------------------------------- */
input,
select,
textarea {
	padding: 14px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	color: #0f172a;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.8rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease;
}
input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
		color: #94a3b8;
	}
input::placeholder, select::placeholder, textarea::placeholder {
		color: #94a3b8;
	}
input:focus, select:focus, textarea:focus {
		outline: none;
		border-color: #312e81;
		box-shadow: 0 0 0 3px rgba(49, 46, 129, 0.22);
	}
select {
	-webkit-appearance: none;
}
select option:disabled {
			color: rgb(128, 128, 128);
		}
textarea {
	resize: none;
	padding: 15px;
}
fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
form:after {
		content: " ";
		display: table;
		clear: both;
	}
input[type=submit] {
	white-space: normal;
	background: #312e81;
	color: #FFF;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	padding: 1.6rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
input[type=submit]:hover {
		background: #3730a3;
	}
input[type=submit]:active {
		background: #4338ca;
	}
input[type=checkbox],
input[type=radio] {
	margin-right: 15px;
}
/* Range slider sits below its label with a little breathing room. */
input[type=range] {
	margin-top: 8px;
}
/* Small explanatory hint under a form field. */
.form_field_wrapper .field-hint {
	font-size: .85em;
	margin-top: .3em;
}
/* Provider-defaults note (IMAP target edit): shown when a provider preset loads. */
.provider-note {
	background: #ecfdf5;
	border-left: 3px solid #059669;
	padding: .5em .75em;
	margin: 1em 0;
	font-size: .85em;
}
/* form formrow styling ------------------------------------------- */
.form_field_group {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 30px 30px;

	/*width: 100%;*/
	position: relative;
	margin-bottom: 30px;
}
.form_field_group:last-child {
		margin-bottom: 0;
	}
.form_field_group label {
		position: relative;
		/*width: 100%;*/
	}
.form_field_group .form_field_wrapper {
		flex: 1 1 auto;
		position: relative;
		min-height: 44px;
	}
.form_field_group .form_field_wrapper:not(.has_checkbox) {
			width: 100%;
		}
.form_field_group .form_field_wrapper:not(.has_checkbox) input,
			.form_field_group .form_field_wrapper:not(.has_checkbox) select,
			.form_field_group .form_field_wrapper:not(.has_checkbox) textarea {
				width: 100%;
			}
/*margin-bottom: 30px;*/
.form_field_group .form_field_wrapper textarea {
			height: 215px;
		}
.form_field_group input[type=submit] {
		margin: 0;
		padding: 12px;
	}
.form_field_group input[type=radio] {
		width: auto !important;
		width: initial !important;
	}
/* slide in labels ------------------------------------------- */
.navo_label_slide_in {
	position: relative;
}
.navo_label_slide_in label {
	/*display: none;*/
}
.form_field_wrapper {
	position: relative;
}
.form_field_wrapper label.form_field_label {
		position: absolute;
		top: -0.5rem;
		left: -1.2rem;
		margin: 15px;
		padding: 0.5rem;
		text-indent: 8px;
		font-size: 80%;
		color: #312e81;
		background: rgba(0, 45, 92, 0.9);

		pointer-events: none !important;
		display: inline-block;
		background: #FFF;
		line-height: 1;

		transition: all 125ms ease-in-out;
	}
.form_field_wrapper.form_field_filled label.form_field_label,
	.form_field_wrapper input:focus ~ label.form_field_label,
	.form_field_wrapper textarea:focus + label.form_field_label,
	.form_field_wrapper input[placeholder] ~ label.form_field_label,
	.form_field_wrapper textarea[placeholder] ~ label.form_field_label,
	.form_field_wrapper input[type="date"] ~ label.form_field_label,
	.form_field_wrapper input[type="time"] ~ label.form_field_label,
	.form_field_wrapper input[type="datetime-local"] ~ label.form_field_label
	{
		font-size: 75%;
		top: -2.5rem;
	}
/* error ------------------------------------------- */
label.error {
	color: #dc2626;
}
label.error svg {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}
input.error,
select.error,
textarea.error {
	border-bottom: 1px solid #dc2626;
}
select.error + small.error {
	margin-top: -1px;
}
.error-list small {
	color: #dc2626;
	background: 0 none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
input[type="submit"],
button[type="submit"] {
	position: relative;
}
input[type="submit"]:before, button[type="submit"]:before {
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -11px;
		width: 16px;
		height: 16px;
		border: 4px solid #FFF;
		border-left-color: transparent;
		border-radius: 50%;
		opacity: 0;
		transition-duration: .5s;
		transition-property: opacity;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-name: rotate;
		animation-timing-function: linear;
	}
input[type="submit"]:after, button[type="submit"]:after {
		content: '';
		display: inline-block;
		height: 100%;
		width: 0px;
		transition-delay: .5s;
		transition-duration: .75s;
		transition-property: width;
	}
input[type="submit"][disabled], button[type="submit"][disabled] {
		pointer-events: none;
		cursor: not-allowed;
	}
input[type="submit"][disabled]:not(.expand), button[type="submit"][disabled]:not(.expand) {
			text-align: left;
		}
input[type="submit"][disabled]:before, button[type="submit"][disabled]:before {
			transition-delay: .5s;
			transition-duration: 1s;
			opacity: 1;
		}
input[type="submit"][disabled]:after, button[type="submit"][disabled]:after {
			transition-delay: 0s;
			width: 32px;
		}
.temp_checkbox_deactivate_field {
	opacity: 0;
	display: block;
	position: absolute;
	width: 0;
	height: 0;
}
.form_details_collapsable {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-content: flex-end;
	gap: 30px 30px;
}
.form_details_collapsable .form_details_collapsable_btn {
		flex: 1 1 auto;
	}
.form_details_collapsable .form_details_collapsable_btn:after {
			clear: both;
			content: " ";
		}
/* Changelog (correction_backlog) */
.correction_backlog {
	margin-top: 30px;
	border-top: 1px solid #e2e8f0;
	padding-top: 10px;
}
.correction_backlog h3 {
		margin-bottom: 10px;
	}
.correction_backlog .correction_backlog_timestamp {
		white-space: nowrap;
		font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}
.correction_backlog .correction_backlog_by {
		color: #64748b;
		white-space: nowrap;
	}
.correction_backlog .correction_backlog_field {
		font-weight: 700;
		white-space: nowrap;
	}
.correction_backlog .correction_backlog_old {
		font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		color: #94a3b8;
		-webkit-text-decoration: line-through;
		text-decoration: line-through;
	}
.correction_backlog .correction_backlog_arrow {
		text-align: center;
		color: #94a3b8;
		width: 1%;
	}
.correction_backlog .correction_backlog_new {
		font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-weight: 700;
	}
button,
.btn {
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #FFF;
	background: #312e81;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.2s ease;
	font-weight: 600;
	padding: 1.6rem 1.6rem;
	cursor: pointer;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: 8px;

}
button:hover, .btn:hover {
		color: #FFF;
		background: #3730a3;
	}
button:active, .btn:active {
		background: #4338ca;
	}
button:focus-visible, .btn:focus-visible {
		outline: 2px solid #312e81;
		outline-offset: 2px;
	}
button.big, .btn.big {
		padding: 3.2rem 6.4rem;
		font-size: 130%;
	}
button.small, .btn.small {
		padding: 0.8rem;
		font-size: 80%;
	}
button span, .btn span {
		/*text-remove-gap: both;*/
	}
button.ghost, .btn.ghost {
		color: #0f172a;
		background: #FFF;
		border: 1px solid #cbd5e1;

	}
button.ghost:hover, .btn.ghost:hover {
			color: #312e81;
			background: #eef2ff;
			border-color: #312e81;
		}
button.ghost:active, .btn.ghost:active {
			background: #eef2ff;
			border-color: #3730a3;
		}
button strong, .btn strong {
		font-weight: 800;
	}
button.extra, .btn.extra {
		background-image: url('/img/icon-chevron-right.svg');
		background-position: 100% center;
		background-repeat: no-repeat;
		background-size: 0;
	}
button.extra span, .btn.extra span {
			transition: transform 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
		}
button.extra:hover, .btn.extra:hover {
			background-position: 95% center;
			background-size: 50px;
		}
button.extra:hover span, .btn.extra:hover span {
				transform: translateX(-5%);
			}
button.extra strong, .btn.extra strong {
			text-transform: uppercase;
			font-size: 110%;
		}
h1,
h2,
h3,
h4 {
	margin: 0 0 3.2rem;
	padding: 0;
	/* Headlines bleiben in der Website-Brand-Schrift (Fira Sans); Body/Tabellen
	   laufen in Inter. */
	font-family: 'Fira Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	/* Website-Brand-Voice: Headlines tiefes Indigo, nie Schwarz; leicht enger. */
	color: #312e81;
	letter-spacing: -0.02em;
	/*text-remove-gap: both;*/
}
h1 {
	font-size: calc(4.0rem + 1.2000000000000002 * ((100vw - 42rem) / 86));
	margin-bottom: 6.4rem;
}
@media screen and (min-width: 1280px) {
  h1 {
    font-size: 5.2rem;
  }
}
@media screen and (max-width: 420px) {
  h1 {
    font-size: 4.0rem;
  }
}
h2 {
	font-size: calc(2.8rem + 0.40000000000000036 * ((100vw - 42rem) / 86));
}
@media screen and (min-width: 1280px) {
  h2 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 420px) {
  h2 {
    font-size: 2.8rem;
  }
}
h3 {
	font-size: calc(2.4rem + 0.3999999999999999 * ((100vw - 42rem) / 86));
}
@media screen and (min-width: 1280px) {
  h3 {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 420px) {
  h3 {
    font-size: 2.4rem;
  }
}
h4 {
	font-size: calc(1.8rem + 0.5999999999999999 * ((100vw - 42rem) / 86));
}
@media screen and (min-width: 1280px) {
  h4 {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 420px) {
  h4 {
    font-size: 1.8rem;
  }
}
.action_headline{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.action_headline h1,
  .action_headline h2,
  .action_headline h3,
  .action_headline h4 {
    margin-bottom: 0;
  }
h1 small{
    font-size: 20px;
    line-height: 20px;
  }
a {
	-webkit-text-decoration: none;
	text-decoration: none;
	color: #312e81;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
a:hover {
		color: #3730a3;
	}
table{
  /* Inter-Tabellenziffern: gleiche Ziffernbreite, Zahlenspalten fluchten. */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
table tr th,
    table tr td {
      vertical-align: middle;
      padding: 10px;
      text-align: right;
      border: 1px solid #e2e8f0;
    }
table tr th{
      font-weight: 700;
      white-space: nowrap;
    }
/* Textspalten immer linksbündig; für explizit numerische Tabellen
       die Klasse .numeric an table (oder .right an td) setzen. */
table tr th.left, table tr td.left { text-align: left; }
table tr:nth-child(even){
       background: rgba(241,245,249,0.6);
    }
table tr.spacer{
      height: 90px;
      }
table tr.header{
       background: rgba(226,232,240,0.95);
     }
table.list tr th,
table.list tr td {
  text-align: left;
}
/* Zahlen / IDs / Datum / Keys: rechtsbündig + monospace.
   Greift automatisch bei <code> (IDs, UUIDs, Hashes) und <time> (Datumswerte).
   Für Zahlen-Spalten ohne <code>: table.list td.num verwenden. */
table.list tr td code,
table.list tr td time,
table.list tr td.num {
  display: block;
  text-align: right;
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  font-size: 0.9em;
}
table.list tr th.num {
  text-align: right;
}
.yearly_values{
	background: rgba(241,245,249, 0.8);
	border-top: 2px solid rgba(15,23,42, 0.75);
	border-bottom: 2px solid rgba(15,23,42, 0.1);
}
.table_wrapper {
	position: relative;
	overflow: auto;
	max-height: calc(100vh - 220px);
	width: 100%;
	border: 1px solid #e2e8f0;
}
table {
	border-collapse: separate;
	border-spacing: 0;
	width: auto; /* Erlaubt der Tabelle, ihre natürliche Breite anzunehmen */
	min-width: 100%;
}
th, td {
	/*border: 1px solid var(--border-primary);*/
	/*padding: 8px;*/
	/*text-align: left;*/
	/*background-color: white; !* Hintergrund für alle Zellen *!*/
}
/* Fixer Header-Bereich */
thead {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: #f1f5f9;
}
/*thead tr th {*/
/*	background-color: var(--bg-tertiary);*/
/*	border: 1px solid #333333;*/
/*}*/
/* Border nur rechts und unten für alle inneren Zellen */
thead th:not(:last-child) {
	border-right: 1px solid #cbd5e1;
}
thead tr:not(:last-child) th {
	border-bottom: 1px solid #cbd5e1;
}
td.border-right{
	border-right: 1px solid #cbd5e1;
}
td.border-bottom{
	border-bottom: 1px solid #cbd5e1;
}
/* Sticky linke Spalte */
.sticky-column {
	position: sticky;
	left: 0;
	background-color: #f8fafc;
	z-index: 5;
	border-right: 1px solid #cbd5e1;
}
/* Wenn Header und sticky Spalte sich überschneiden */
thead .sticky-column {
	z-index: 25; /* Höher als andere sticky Elemente */
}
/* Sticky columns 2-4. We derive `left` from the previous sticky
   columns' --sticky-w / --sticky-w-2 CSS custom properties so pages
   only need to set column widths once (via min/max-width or --sticky-w)
   instead of guessing pixel offsets per page. */
.sticky-column-2 {
	position: sticky;
	left: 0;
	background-color: #f8fafc;
	z-index: 5;
	border-right: 1px solid #e2e8f0;
}
.sticky-column-3 {
	position: sticky;
	left: 0;
	background-color: #f8fafc;
	z-index: 5;
	border-right: 1px solid #e2e8f0;
}
.sticky-column-4 {
	position: sticky;
	background-color: #f8fafc;
	z-index: 5;
	border-right: 2px solid #cbd5e1;
}
/* Header sticky columns 2-4 */
thead .sticky-column-2 { z-index: 25; }
thead .sticky-column-3 { z-index: 25; }
thead .sticky-column-4 { z-index: 25; }
/* Year row sticky columns 2-4 */
.year-row .sticky-column-2,
.year-row .sticky-column-3,
.year-row .sticky-column-4 {
	background-color: #1e293b;
	color: #fff;
}
/* Row hover for sticky columns */
tr:hover .sticky-column,
tr:hover .sticky-column-2,
tr:hover .sticky-column-3,
tr:hover .sticky-column-4 {
	background-color: #eef2ff;
}
/* Jahreszeilen - normale Anzeige */
.year-row td {
	color: #FFFFFF;
	background-color: #1e293b;
	font-weight: 700;
}
/* Jahreszeilen - sticky first cell */
.year-row .sticky-column {
	position: sticky;
	left: 0;
	color: #FFFFFF;
	background-color: #1e293b;
	z-index: 5;
}
/* Sticky Jahreszeilen am oberen Rand */
.year-sticky {
	position: sticky;
	top: 123px; /* Wird per JS an Header-Höhe angepasst */
	z-index: 15;
	color: #FFFFFF;
	background-color: #1e293b;
}
tr.year-summary > th, tr.year-summary td{
		background: #cbd5e1;
		border-top: 1px dashed #475569;
	}
/* Grundstil für die Zusammenfassungszeile mit dunklerem Hintergrund */
tr.summary {
	background: linear-gradient(to bottom, rgba(203, 213, 225, 0.95) 0%, rgba(226, 232, 240, 0.95) 50%);
	font-weight: 500;
}
/* Subtile Schattierung für besseren Kontrast */
tr.summary td, tr.summary th {
	padding-top: 12px;
	padding-bottom: 12px;
	border-top: 4px double #94a3b8;
	color: #0f172a;
}
/* Sortierbare Tabellen */
table.sortable thead th {
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}
table.sortable thead th[colspan] {
	cursor: default;
}
table.sortable thead th.sort-asc::after {
	content: ' ↑';
}
table.sortable thead th.sort-desc::after {
	content: ' ↓';
}
table.sortable thead th:hover {
	background-color: #e2e8f0;
}
table.sortable thead th .sort-num {
	font-size: 10px;
	vertical-align: super;
	margin-left: 2px;
	color: #64748b;
}
.card_list,
.card_list_horizontal,
.card_list_micro{
	padding-left: 0;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	/*align-content: stretch;*/
	/*align-items: stretch;*/
	justify-content: space-between;
	gap: 30px 30px;
	/*justify-content: flex-start;*/
}
.card_list .card, .card_list_horizontal .card, .card_list_micro .card {
		flex: 1 1 auto;
	}
.card_list_horizontal {
	flex-direction: row;
}
.card_list_micro{
	gap: 30px 30px;
}
.card_list_micro .card {
		flex: 1 1 auto;
	}
.card_single_container{
  border: 1px solid #e2e8f0;
  padding: 15px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
}
.card{
  display:block;
  /*margin-bottom: 30px;*/
}
.card > .card_headline{
      font-weight: 700;
      color: #312e81;
      border-top: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
      border-left: 1px solid #e2e8f0;
      padding: 15px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      align-content: space-between;
      align-items: center;
		background-color: #ffffff;
  }
.card > .card_content{
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      border-right: 1px solid #e2e8f0;
      border-left: 1px solid #e2e8f0;
      padding: 15px;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
		background-color: #ffffff;
  }
.card > .card_content.overflow_scroll{
	max-height: 400px;
	overflow-y:auto;
	 }
.card h3{
      /*border-top: 1px solid #efefef;*/
      background: #f1f5f9;
      background: linear-gradient(180deg, rgba(241,245,249,1) 0%, rgba(248,250,252,0) 100%);
      padding-top: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      font-weight: 400;
      text-align: center;
      font-size: 80%;
  }
.card h3:first-child{
         /*border-top: none;*/
         /*padding-top: 0;*/
         margin-top: 0;
     }
.card  ul{
     list-style-type: none;
     padding-left: 15px;
     list-style-type: disc;
  }
.card  ul li{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        /*align-content: space-between;*/
        align-items: center;
    }
.card  ul li i.fas{
            width: 20px;
            margin-right: 5px;
            text-align: center;
        }
.card  ul li.user{
            justify-content: flex-start;
         }
.card  ul li.user img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
                margin-right: 30px;
            }
.card .card_content > ul.button_list{
      padding: 15px;
      display:flex;
      flex-direction: row;
      justify-content: flex-start;
      /*align-content:;*/
      align-items: flex-start;
      flex-wrap: wrap;
    }
.card .card_content > ul.button_list > li > a.btn {
            display:block;
            margin-right: 15px;
            /*margin-bottom: 15px;*/
          }
/*a.card{*/
/*  border: 1px solid #BC4C0F;*/
/*  &:hover {*/
/*     background: #BC4C0F;*/
/*     border: 1px solid #BC4C0F;*/
/*     color: #FFFFFF;*/
/*   }*/
/*}*/
.card_list_micro .card{

	  }
/* Disabled field styling - grayed out but links still work */
.disabled-field {
	opacity: 0.5;
}
.disabled-field a {
		color: #94a3b8;
	}
.disabled-field .fw-font {
		color: #94a3b8;
	}
.disabled-field i {
		color: #94a3b8;
	}
/* modules */
body > header nav.primary ul {
			display: flex;
			margin: 0;
		}
body > header nav.primary ul li {
				margin: 0 10px;
			}
ul.breadcrumb {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	margin-left: 7px;
}
ul.breadcrumb li {
		list-style-type: '>';
		padding: 0 15px 0 15px;
		margin-right: 15px;
	}
body > footer {
	background: #f1f5f9;
	border-top: 1px solid #e2e8f0;
    padding: 0 45px;
	display:none;
}
body > footer address {
        padding: 15px;
    }
body > footer address > div > div > span{
          display:block;
          margin-bottom: 5px;
          margin-bottom: 5px;
        }
body > footer ul{
        /*padding: 15px;*/
        display:flex;
        flex-direction: row;
        list-style-type: none;
        justify-content: flex-end;
        margin-bottom: 0;
    }
body > footer ul li{
            /*flex: 1 1 auto;*/
            margin-right: 30px;
        }
body > footer ul li:last-of-type{
                margin-right: 0;
            }
body.page-login > footer {
	display:block;
}
body > header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px;
  /* Website-Look: heller Header mit feiner Trennlinie statt Schwarz. */
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  /*margin-bottom: 45px;*/
}
body > header .logo{
      display:block;
      /* Logo is a wide wordmark (svg viewBox 360x56). Size it by HEIGHT so it
         stays legible regardless of the header's flex align-items (previously
         it was stretched to header height; align-items:center collapsed it). */
  }
body > header .logo svg{
          display:block;
          height: 28px;
          width: auto;
      }
/* Primary nav: lay out the direct <a> buttons with consistent spacing
     (they are not in a ul/li, so rely on flex gap, not source whitespace). */
body > header nav.primary{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap: 10px;
  }
body > header nav.primary .nav-sep{ margin:0; color: #94a3b8; }
body > header nav.primary .nav-group-label{ color: #64748b; }
/* Right-hand info area: project select + logout, spaced apart. */
body > header .info{
      display:flex;
      align-items:center;
      gap: 18px;
  }
body > header .info .project-select-nav{
          padding: 4px 8px;
      }
.flex_block_wrapper{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex_block_wrapper > * {
    flex: 1 1 450px;
    margin-right: 30px;
    margin-bottom: 30px;
  }
/* page specific styles */
body.page-404 {
}
body.page-home {

}
.projects_list{
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;

}
.projects_list > .card{
	flex: 0 0 450px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	}
.projects_list > .card:last-child{
		   margin-bottom: 15px;
	   }
/*background: #FFFFFF;*/
/*border-radius: 5px;*/
.projects_list > .card > .card_headline,
	.projects_list > .card > .card_content{
		/*border: none;*/

	  }
.projects_list > .card > .card_content{
		  flex: 1 1 100%;
	  }
.project_component_list_preview{
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.component_preview{
	border: 1px solid #e2e8f0;
	padding: 15px;
	padding-bottom: 25px;
	position: relative;
	overflow: hidden;
}
.component_preview.shimmer::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 40%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 60%, transparent 100%);
	background-size: 200% 100%;
	animation: shimmer 2s ease-in-out infinite;
	pointer-events: none;
}
@keyframes shimmer{
	0%{ background-position: 100% 0; }
	100%{ background-position: -100% 0; }
}
/* Efficiency preview */
.efficiency-preview {
	font-size: 11px;
	color: #475569;
	margin-top: 4px;
}
/* Overhaul progress bar */
.overhaul-progress-container {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 18px;
	background: #f1f5f9;
	overflow: hidden;
}
.overhaul-progress-bar {
	height: 100%;
	background: #059669;
	transition: width 0.3s ease;
}
.overhaul-progress-container.overhaul-warning .overhaul-progress-bar {
	background: #d97706;
}
.overhaul-progress-container.overhaul-critical .overhaul-progress-bar {
	background: #dc2626;
}
.overhaul-progress-container.overhaul-unverified .overhaul-progress-bar {
	background: #94a3b8;
}
.overhaul-progress-container.overhaul-unverified .overhaul-progress-text {
	color: #64748b;
}
.overhaul-progress-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 10px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
}
/* ---------------------------------------------------------------------------
   Project / user administration pages (projects, project, project-new,
   project-select, users, user-edit). Consistent vertical rhythm + button
   spacing — inline elements need real gaps, not source whitespace.
   --------------------------------------------------------------------------- */
article.projects-admin,
article.project-detail,
article.project-new,
article.project-select,
article.users-admin,
article.user-edit {
	padding: 24px;

	/* Title row: heading left, primary action right, space between. */
}
article.projects-admin > .page-head, article.project-detail > .page-head, article.project-new > .page-head, article.project-select > .page-head, article.users-admin > .page-head, article.user-edit > .page-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 28px;
	}
/* Each section stacked with breathing room (fixes buttons hugging the
	   heading on /project). */
article.projects-admin > section, article.project-detail > section, article.project-new > section, article.project-select > section, article.users-admin > section, article.user-edit > section {
		margin-bottom: 32px;
	}
article.projects-admin h2, article.project-detail h2, article.project-new h2, article.project-select h2, article.users-admin h2, article.user-edit h2 {
		margin: 8px 0 16px;
	}
/* Button groups (action cells, form footers) sit side by side with gap. */
article.projects-admin .table_wrapper td .btn,
	article.project-detail .table_wrapper td .btn,
	article.project-new .table_wrapper td .btn,
	article.project-select .table_wrapper td .btn,
	article.users-admin .table_wrapper td .btn,
	article.user-edit .table_wrapper td .btn,
	article.projects-admin form .btn,
	article.project-detail form .btn,
	article.project-new form .btn,
	article.project-select form .btn,
	article.users-admin form .btn,
	article.user-edit form .btn,
	article.projects-admin form input[type="submit"],
	article.project-detail form input[type="submit"],
	article.project-new form input[type="submit"],
	article.project-select form input[type="submit"],
	article.users-admin form input[type="submit"],
	article.user-edit form input[type="submit"] {
		margin-right: 8px;
	}
/* Action cells with several buttons: flex so they space evenly and wrap. */
article.projects-admin td:last-child, article.project-detail td:last-child, article.project-new td:last-child, article.project-select td:last-child, article.users-admin td:last-child, article.user-edit td:last-child {
		white-space: nowrap;
	}
/* Form submit spacing from the fields above it. */
article.projects-admin form input[type="submit"], article.project-detail form input[type="submit"], article.project-new form input[type="submit"], article.project-select form input[type="submit"], article.users-admin form input[type="submit"], article.user-edit form input[type="submit"] {
		margin-top: 12px;
	}
/* Discovery pool overview — a total being recounted.
   The number STAYS readable and pulses instead of being replaced by a spinner:
   the old value is still the best information available until the new one
   lands, and swapping it for "…" threw it away for the whole (EXO-slow) run.
   The row's refresh button is hidden while this class is set (.is-recounting
   on the cell), so a second click can't queue a duplicate recount. */
.pool-total-val.is-recounting {
	animation: totalPulse 1.1s ease-in-out infinite;
}
@keyframes totalPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}
/* The row's refresh/fetch button sits in the NEXT <td>, NOT inside
   .pool-total-cell — so it carries the class itself (set by poolTotals.js via
   its data-entity), it cannot be reached with a descendant selector.
   visibility (not display) keeps the column width stable while it is away. */
.btn.is-recounting {
	visibility: hidden;
}
/* Discovery pool overview — the two column-header buttons ("in scope" and
   "Total" recounts). Icon-only, so they need real breathing room from the
   label; an HTML newline collapses to a single space, which reads as if the
   glyph were glued to the word. */
.pool-header-btn {
	margin-left: .6em;
	font-weight: 400;
}