/*
 * FlexiPage Standard-Theme
 *
 * Zentrale Darstellung der öffentlichen FlexiPage.
 * Alle Farben, Schriftarten, Größen und Abstände werden
 * über CSS-Variablen am .fp-page-Element gesteuert.
 */

:root {
    --fp-primary: #2563eb;
    --fp-secondary: #0f172a;
    --fp-accent: #38bdf8;

    --fp-bg: #f4f7fb;
    --fp-surface: #ffffff;
    --fp-surface-soft: #f8fafc;
    --fp-info-bg: #f1f5f9;

    --fp-line: #e2e8f0;

    --fp-ink: #172033;
    --fp-heading: #0f172a;
    --fp-soft: #64748b;
    --fp-link: #2563eb;

    --fp-footer-bg: #0f172a;
    --fp-footer-text: #cbd5e1;

    --fp-hero-bg: #ffffff;
    --fp-hero-text: #0f172a;

    --fp-font-body:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --fp-font-heading:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --fp-font-size-base: 17px;
    --fp-font-size-small: 13px;
    --fp-font-size-hero: 78px;
    --fp-font-size-section: 64px;
    --fp-font-size-card: 17px;

    --fp-line-height: 1.6;

    --fp-heading-weight: 400;
    --fp-heading-spacing: -0.04em;

    --fp-wide-width: 1336px;
    --fp-content-width: 1110px;
    --fp-page-padding: 72px;
    --fp-section-spacing: 120px;

    --fp-card-radius: 0px;
    --fp-button-radius: 0px;
    --fp-theme-shadow: none;

    --fp-logo-width: 190px;
    --fp-logo-height: 56px;

    --fp-hero-height: 720px;
    --fp-hero-image-width: 39vw;
    --fp-hero-image-opacity: 0.92;
    --fp-hero-image-grayscale: 1;

    --fp-progress: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--fp-bg);
}

.fp-template-standard,
.fp-template-standard * {
    box-sizing: border-box;
}

.fp-template-standard {
    min-height: 100vh;

    color: var(--fp-ink);
    background: var(--fp-bg);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-base);
    font-weight: 400;
    line-height: var(--fp-line-height);
    letter-spacing: -0.01em;
}

.fp-template-standard button,
.fp-template-standard input,
.fp-template-standard textarea,
.fp-template-standard select {
    font: inherit;
}

.fp-template-standard a {
    color: var(--fp-link);
}

.fp-template-standard .fp-frame {
    width: min(
        calc(100% - (var(--fp-page-padding) * 2)),
        var(--fp-wide-width)
    );

    margin-inline: auto;
}

.fp-template-standard .fp-frame--content {
    width: min(
        calc(100% - (var(--fp-page-padding) * 2)),
        var(--fp-content-width)
    );
}

/* =========================================================
   Header
   ========================================================= */

.fp-template-standard .fp-site-header {
    position: absolute;
    z-index: 30;
    inset: 0 0 auto;

    color: var(--fp-hero-text);
    background: transparent;
}

.fp-template-standard .fp-site-header__inner {
    min-height: 104px;
    padding-top: 30px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

/* =========================================================
   Logo / Wordmark
   ========================================================= */

.fp-template-standard .fp-wordmark {
    min-width: 0;

    width: min(
        var(--fp-logo-width),
        42vw
    );

    height: var(--fp-logo-height);

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    overflow: visible;

    color: var(--fp-hero-text);

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: var(--fp-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;

    text-decoration: none;
    text-transform: uppercase;
}

.fp-template-standard .fp-wordmark:hover,
.fp-template-standard .fp-wordmark:focus,
.fp-template-standard .fp-wordmark:active {
    color: var(--fp-hero-text);

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}

.fp-template-standard .fp-wordmark img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: left center;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    filter: none !important;
    mix-blend-mode: normal !important;

    opacity: 1 !important;
    transform: none !important;
}

.fp-template-standard .fp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: var(--fp-hero-text);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.035em;

    text-decoration: none;
}

.fp-template-standard .fp-nav-link::after {
    width: 20px;
    height: 2px;

    content: "";

    background: var(--fp-primary);
}

.fp-template-standard .fp-site-header__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.fp-template-standard .fp-lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fp-template-standard .fp-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    padding: 4px 6px;

    border-radius: 999px;

    color: var(--fp-hero-text);
    opacity: 0.55;

    font-family: var(--fp-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;

    text-decoration: none;
    text-transform: uppercase;

    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.fp-template-standard .fp-lang-link:hover {
    opacity: 0.85;
}

.fp-template-standard .fp-lang-link--active {
    background: color-mix(in srgb, var(--fp-hero-text) 14%, transparent);
    opacity: 1;
}

/* =========================================================
   Hero
   ========================================================= */

.fp-template-standard .fp-hero {
    position: relative;

    min-height: var(--fp-hero-height);

    overflow: hidden;

    color: var(--fp-hero-text);
    background: var(--fp-hero-bg);

    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-hero::after {
    position: absolute;
    inset: auto 0 0;

    height: 4px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--fp-primary),
            var(--fp-accent)
        );

    opacity: 0.9;
}

.fp-template-standard .fp-hero__inner {
    position: relative;
    z-index: 2;

    min-height: var(--fp-hero-height);
}

.fp-template-standard .fp-hero__content {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;

    width: min(650px, 48vw);

    transform: translateY(-42%);
}

.fp-template-standard .fp-hero__configuration-visual {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: clamp(48px, 7vw, 140px);

    width: min(
        var(--fp-hero-image-width),
        720px
    );

    transform: translateY(-36%);

    pointer-events: none;

    opacity: var(--fp-hero-image-opacity);
}

.fp-template-standard .fp-hero__configuration-visual img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        grayscale(
            var(--fp-hero-image-grayscale)
        );
}

.fp-template-standard .fp-hero__drawing {
    display: none !important;
}

.fp-template-standard .fp-kicker {
    margin: 0 0 30px;

    color: var(--fp-primary);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.fp-template-standard .fp-kicker span {
    margin-inline: 12px;
    color: var(--fp-accent);
}

.fp-template-standard .fp-statement {
    max-width: 680px;
    margin: 0;

    color: var(--fp-hero-text);

    font-family: var(--fp-font-heading);

    font-size:
        clamp(
            38px,
            5vw,
            var(--fp-font-size-hero)
        );

    font-weight: var(--fp-heading-weight);
    line-height: 1.02;
    letter-spacing: var(--fp-heading-spacing);
}

.fp-template-standard .fp-hero__lead {
    max-width: 560px;
    margin: 28px 0 0;

    color:
        color-mix(
            in srgb,
            var(--fp-hero-text) 72%,
            transparent
        );

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-base);
    line-height: var(--fp-line-height);
}

.fp-template-standard .fp-hero__date {
    margin: 34px 0 0;

    display: flex;
    align-items: center;
    gap: 18px;

    color:
        color-mix(
            in srgb,
            var(--fp-hero-text) 66%,
            transparent
        );

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 500;
    letter-spacing: 0.035em;
}

.fp-template-standard .fp-hero__date span {
    width: 28px;
    height: 2px;

    background: var(--fp-primary);
}

.fp-template-standard.fp-hero-align-center
.fp-hero__content {
    left: 50%;

    width: min(780px, 82vw);

    text-align: center;

    transform: translate(-50%, -42%);
}

.fp-template-standard.fp-hero-align-center
.fp-hero__lead {
    margin-inline: auto;
}

.fp-template-standard.fp-hero-align-center
.fp-hero__date {
    justify-content: center;
}

.fp-template-standard.fp-hero-align-center
.fp-hero__configuration-visual {
    left: 50%;
    right: auto;

    opacity:
        calc(
            var(--fp-hero-image-opacity) * 0.16
        );

    transform: translate(-50%, -36%);
}

/* =========================================================
   Allgemeine Bereiche
   ========================================================= */

.fp-template-standard .fp-status-section,
.fp-template-standard .fp-section {
    padding:
        var(--fp-section-spacing)
        0;

    color: var(--fp-ink);
    background: var(--fp-surface);

    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-section-head {
    max-width: 780px;
    margin-bottom: 72px;
}

.fp-template-standard .fp-section-head h2 {
    max-width: 780px;
    margin: 0;

    color: var(--fp-heading);

    font-family: var(--fp-font-heading);

    font-size:
        clamp(
            28px,
            5vw,
            var(--fp-font-size-section)
        );

    font-weight: var(--fp-heading-weight);
    line-height: 1.02;
    letter-spacing: var(--fp-heading-spacing);
}

.fp-template-standard .fp-section-head
p:not(.fp-kicker) {
    max-width: 650px;
    margin: 24px 0 0;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-base);
    line-height: var(--fp-line-height);
}

/* =========================================================
   Fortschritt
   ========================================================= */

.fp-template-standard .fp-stepper {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    padding-top: 18px;
}

.fp-template-standard .fp-stepper__line,
.fp-template-standard .fp-stepper__fill {
    position: absolute;
    top: 31px;
    left: calc(100% / 10);

    height: 2px;
}

.fp-template-standard .fp-stepper__line {
    right: calc(100% / 10);
    background: var(--fp-line);
}

.fp-template-standard .fp-stepper__fill {
    width:
        calc(
            (100% - (100% / 5)) *
            var(--fp-progress) / 100
        );

    max-width:
        calc(
            100% - (100% / 5)
        );

    background: var(--fp-primary);
}

.fp-template-standard .fp-standalone-progress {
    margin: 4px 0 28px;
}

.fp-template-standard .fp-standalone-progress__track {
    width: 100%;
    height: var(--fp-standalone-progress-height, 8px);

    background: var(--fp-line);
    border-radius: 999px;

    overflow: hidden;
}

.fp-template-standard .fp-standalone-progress__fill {
    height: 100%;

    background: var(--fp-standalone-progress-color, var(--fp-primary));
    border-radius: 999px;

    transition: width 0.8s ease;
}

.fp-template-standard .fp-step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.fp-template-standard .fp-step__dot {
    position: relative;

    width: 27px;
    height: 27px;
    margin-bottom: 22px;

    background: var(--fp-surface);

    border: 2px solid var(--fp-line);
    border-radius: 50%;
}

.fp-template-standard .fp-step--done
.fp-step__dot,
.fp-template-standard .fp-step--current
.fp-step__dot {
    border-color: var(--fp-primary);
}

.fp-template-standard .fp-step--done
.fp-step__dot::after {
    position: absolute;
    inset: 6px;

    content: "";

    background: var(--fp-primary);

    border-radius: 50%;
}

.fp-template-standard .fp-step--current
.fp-step__dot::after {
    position: absolute;
    inset: 4px;

    content: "";

    border: 2px solid var(--fp-accent);
    border-radius: 50%;
}

.fp-template-standard .fp-step__name {
    color: var(--fp-ink);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-card);
    font-weight: 600;
    line-height: 1.3;
}

.fp-template-standard .fp-step__date {
    min-height: 16px;
    margin-top: 7px;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);

    font-size:
        calc(
            var(--fp-font-size-small) - 1px
        );

    line-height: 1.3;
    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.fp-template-standard .fp-step--future
.fp-step__name,
.fp-template-standard .fp-step--future
.fp-step__date {
    color:
        color-mix(
            in srgb,
            var(--fp-soft) 62%,
            transparent
        );
}

/* =========================================================
   Hinweisbereich
   ========================================================= */

.fp-template-standard .fp-info-strip {
    padding: 90px 0;

    color: var(--fp-ink);
    background: var(--fp-info-bg);

    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-info-strip
.fp-frame {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.75fr)
        minmax(0, 1fr);

    gap: 90px;
    align-items: start;
}

.fp-template-standard .fp-info-strip__big {
    margin: 0;

    color: var(--fp-heading);

    font-family: var(--fp-font-heading);

    font-size:
        clamp(
            38px,
            5vw,
            var(--fp-font-size-section)
        );

    font-weight: var(--fp-heading-weight);
    line-height: 0.98;
    letter-spacing: var(--fp-heading-spacing);
}

.fp-template-standard .fp-info-strip
p:not(.fp-kicker):not(.fp-info-strip__big) {
    max-width: 650px;
    margin: 45px 0 0;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-base);
    line-height: var(--fp-line-height);
}

/* =========================================================
   Listen und Reihen
   ========================================================= */

.fp-template-standard .fp-rows,
.fp-template-standard .fp-item-list,
.fp-template-standard .fp-doc-list {
    border-top: 1px solid var(--fp-line);
}

.fp-template-standard .fp-row {
    width: 100%;
    padding: 22px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    color: inherit;
    text-align: left;

    background: transparent;

    border: 0;
    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-row--button {
    cursor: pointer;
}

.fp-template-standard .fp-row__title {
    color: var(--fp-heading);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-card);
    font-weight: 600;
    line-height: 1.35;
}

.fp-template-standard .fp-row__meta {
    margin-top: 6px;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    line-height: 1.4;
}

.fp-template-standard .fp-inline-button {
    padding: 8px 14px;

    color: #ffffff;
    background: var(--fp-primary);

    border: 1px solid var(--fp-primary);
    border-radius: var(--fp-button-radius);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.fp-template-standard .fp-inline-button:hover,
.fp-template-standard .fp-inline-button:focus-visible {
    color: #ffffff;

    background: var(--fp-secondary);
    border-color: var(--fp-secondary);
}

/* =========================================================
   Artikel
   ========================================================= */

.fp-template-standard .fp-item {
    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-item--child {
    background: var(--fp-surface-soft);
}

.fp-template-standard .fp-item__button {
    width: 100%;
    padding: 18px 0;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        100px
        130px
        34px;

    gap: 24px;
    align-items: center;

    color: inherit;
    text-align: left;

    background: transparent;
    border: 0;

    cursor: pointer;
}

.fp-template-standard .fp-item--child
.fp-item__button {
    padding-left: 48px;
}

.fp-template-standard .fp-item__visual {
    width: 56px;
    height: 56px;

    display: block;
    overflow: hidden;

    background: var(--fp-surface-soft);

    border: 1px solid var(--fp-line);
    border-radius: var(--fp-card-radius);
}

.fp-template-standard .fp-item__visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.fp-template-standard .fp-item__main {
    min-width: 0;
    display: block;
}

.fp-template-standard .fp-item__title {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--fp-heading);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-card);
    font-weight: 600;
    line-height: 1.3;
}

.fp-template-standard .fp-pill {
    padding: 3px 8px;

    display: inline-flex;

    color: var(--fp-secondary);

    background:
        color-mix(
            in srgb,
            var(--fp-accent) 16%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--fp-accent) 50%,
            var(--fp-line)
        );

    border-radius: 999px;

    font-family: var(--fp-font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;

    text-transform: uppercase;
    white-space: nowrap;
}

.fp-template-standard .fp-item__meta,
.fp-template-standard .fp-item__desc {
    display: block;
    margin-top: 4px;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    line-height: 1.4;
}

.fp-template-standard .fp-item__desc {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-template-standard .fp-item__qty,
.fp-template-standard .fp-item__price {
    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);

    text-align: right;
}

.fp-template-standard .fp-item__arrow,
.fp-template-standard .fp-doc__arrow {
    color: var(--fp-primary);

    font-size: 22px;
    line-height: 1;

    text-align: right;
}

/* =========================================================
   Fakten
   ========================================================= */

.fp-template-standard .fp-facts__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 110px;
}

.fp-template-standard .fp-fact-text {
    margin: 0;

    color: var(--fp-ink);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-base);
    line-height: var(--fp-line-height);
}

/* =========================================================
   Dokumente
   ========================================================= */

.fp-template-standard .fp-doc-groups {
    display: grid;
    gap: 54px;
}

.fp-template-standard .fp-doc-group__title {
    margin: 0 0 11px;

    color: var(--fp-primary);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 700;
    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.fp-template-standard .fp-doc-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.fp-template-standard .fp-doc {
    width: 100%;
    padding: 21px 0;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        180px
        34px;

    gap: 24px;
    align-items: center;

    color: inherit;
    text-align: left;

    background: transparent;

    border: 0;
    border-bottom: 1px solid var(--fp-line);

    cursor: pointer;
}

.fp-template-standard .fp-doc:hover
.fp-doc__title,
.fp-template-standard .fp-doc:focus-visible
.fp-doc__title {
    color: var(--fp-primary);
}

.fp-template-standard .fp-doc--disabled {
    opacity: 0.55;
    cursor: default;
}

.fp-template-standard .fp-doc__icon {
    color: var(--fp-accent);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.fp-template-standard .fp-doc__title {
    overflow: hidden;

    color: var(--fp-heading);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-card);
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-template-standard .fp-doc__meta {
    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);

    text-align: right;
}

/* =========================================================
   Kontakt
   ========================================================= */

.fp-template-standard .fp-contact__row {
    padding-top: 44px;

    display: flex;
    align-items: center;
    gap: 34px;

    border-top: 1px solid var(--fp-line);
}

.fp-template-standard .fp-contact__avatar {
    width: 106px;
    height: 106px;
    flex: 0 0 106px;

    object-fit: cover;

    background: var(--fp-surface-soft);

    border: 2px solid var(--fp-accent);
    border-radius: var(--fp-card-radius);
}

.fp-template-standard
.fp-contact__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--fp-primary);

    font-family: var(--fp-font-heading);
    font-size: 48px;
    font-weight: var(--fp-heading-weight);
}

.fp-template-standard .fp-contact__name {
    margin: 0;

    color: var(--fp-heading);

    font-family: var(--fp-font-heading);

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    font-weight: var(--fp-heading-weight);
    line-height: 1;
    letter-spacing: var(--fp-heading-spacing);
}

.fp-template-standard .fp-contact__role {
    margin: 10px 0 0;

    color: var(--fp-soft);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
}

.fp-template-standard .fp-contact__links {
    margin-top: 20px;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.fp-template-standard .fp-contact__links a {
    padding-bottom: 3px;

    color: var(--fp-link);

    font-family: var(--fp-font-body);
    font-weight: 600;

    text-decoration: none;

    border-bottom: 1px solid currentColor;
}

/* =========================================================
   Footer
   ========================================================= */

.fp-template-standard .fp-site-footer {
    padding: 38px 0;

    color: var(--fp-footer-text);
    background: var(--fp-footer-bg);

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--fp-footer-text) 20%,
            transparent
        );

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.fp-template-standard .fp-empty {
    color: var(--fp-soft);
    font-family: var(--fp-font-body);
}

/* =========================================================
   Modale Fenster
   ========================================================= */

.fp-template-standard .modal-content,
.fp-template-standard .fp-detail-modal
.modal-content,
.fp-template-standard
.fp-iframe-modal-content {
    color: var(--fp-ink);
    background: var(--fp-surface);

    border: 1px solid var(--fp-line);
    border-radius: var(--fp-card-radius);


    box-shadow: var(--fp-theme-shadow);
}

.fp-template-standard .fp-detail-modal
.modal-header,
.fp-template-standard
.fp-document-modal-header {
    padding: 24px 30px;

    background: var(--fp-surface);

    border-bottom: 1px solid var(--fp-line);
}

.fp-template-standard .fp-detail-modal
.modal-title,
.fp-template-standard
.fp-document-modal-title {
    margin: 0;

    color: var(--fp-heading);

    font-family: var(--fp-font-heading);

    font-size:
        clamp(
            28px,
            3vw,
            42px
        );

    font-weight: var(--fp-heading-weight);
    line-height: 1.08;
    letter-spacing: var(--fp-heading-spacing);
}

.fp-template-standard .fp-detail-modal
.modal-body {
    padding: 30px;
}

.fp-template-standard .fp-article-image,
.fp-template-standard
.fp-article-placeholder {
    width: 100%;
    min-height: 270px;

    object-fit: cover;

    color: var(--fp-soft);
    background: var(--fp-surface-soft);

    border: 1px solid var(--fp-line);
    border-radius: var(--fp-card-radius);
}

.fp-template-standard
.fp-article-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-template-standard .fp-detail-list dt,
.fp-template-standard .fp-description {
    color: var(--fp-soft);
    font-family: var(--fp-font-body);
}

.fp-template-standard .fp-detail-list dd {
    margin-bottom: 12px;
    color: var(--fp-ink);
}

.fp-template-standard .fp-description {
    line-height: var(--fp-line-height);
}

.fp-template-standard
.fp-iframe-modal-dialog {
    width:
        min(
            1280px,
            calc(100vw - 28px)
        );

    max-width:
        min(
            1280px,
            calc(100vw - 28px)
        );
}

.fp-template-standard
.fp-iframe-modal-content {
    height: min(92vh, 980px);
    min-height: 680px;

    overflow: hidden;
}

.fp-template-standard
.fp-document-modal-header {
    min-height: 104px;
    padding: 24px 28px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

.fp-template-standard
.fp-document-modal-title-wrap {
    min-width: 0;
    max-width: calc(100% - 220px);

    flex: 1 1 auto;
}

.fp-template-standard
.fp-document-modal-kicker {
    margin: 0 0 8px;

    color: var(--fp-primary);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    text-transform: uppercase;
    white-space: nowrap;
}

.fp-template-standard
.fp-document-modal-title {
    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-template-standard
.fp-document-modal-actions {
    padding-top: 11px;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;

    flex: 0 0 auto;
}

.fp-template-standard
.fp-document-modal-external {
    padding: 10px 13px;

    color: #ffffff;
    background: var(--fp-primary);

    border: 1px solid var(--fp-primary);
    border-radius: var(--fp-button-radius);

    font-family: var(--fp-font-body);
    font-size: var(--fp-font-size-small);
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

.fp-template-standard
.fp-document-modal-close {
    position: static !important;

    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0 !important;

    opacity: 0.65;

    background-size: 14px;
}

.fp-template-standard
.fp-document-modal-close:hover {
    opacity: 1;
}

.fp-template-standard
.fp-document-modal-body {
    padding: 0;

    overflow: hidden;

    background: var(--fp-surface-soft);
}

.fp-template-standard
.fp-iframe-modal-frame {
    width: 100%;
    height: 100%;
    min-height: 610px;

    display: block;

    background: var(--fp-surface-soft);

    border: 0;
}

.fp-template-standard
.fp-external-notice {
    min-height: 520px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--fp-ink);
}

.fp-template-standard
.fp-external-notice.d-none {
    display: none !important;
}

.fp-template-standard .min-w-0 {
    min-width: 0;
}

/* =========================================================
   Kartenmodus
   ========================================================= */

.fp-template-standard.fp-section-style-cards {
    padding: 24px 0;
    background: var(--fp-bg);
}

.fp-template-standard.fp-section-style-cards
.fp-hero,
.fp-template-standard.fp-section-style-cards
.fp-status-section,
.fp-template-standard.fp-section-style-cards
.fp-section,
.fp-template-standard.fp-section-style-cards
.fp-info-strip {
    width:
        min(
            calc(
                100% -
                (var(--fp-page-padding) * 2)
            ),
            var(--fp-wide-width)
        );

    margin: 0 auto 24px;

    overflow: hidden;

    border: 1px solid var(--fp-line);
    border-radius: var(--fp-card-radius);

    box-shadow: var(--fp-theme-shadow);
}

.fp-template-standard.fp-section-style-cards
.fp-site-header {
    position: relative;
}

.fp-template-standard.fp-section-style-cards
.fp-site-header__inner {
    min-height: 88px;
    padding-top: 0;

    align-items: center;
}

.fp-template-standard.fp-section-style-cards
.fp-wordmark,
.fp-template-standard.fp-section-style-cards
.fp-nav-link {
    color: var(--fp-heading);
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1100px) {
    .fp-template-standard .fp-frame,
    .fp-template-standard
    .fp-frame--content {
        width:
            min(
                calc(100% - 64px),
                var(--fp-content-width)
            );
    }

    .fp-template-standard
    .fp-hero__content {
        width: min(600px, 55vw);
    }

    .fp-template-standard
    .fp-hero__configuration-visual {
        right: 36px;
        width: min(44vw, 560px);
    }
}

/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 820px) {
    .fp-template-standard .fp-frame,
    .fp-template-standard
    .fp-frame--content {
        width:
            min(
                calc(100% - 36px),
                var(--fp-content-width)
            );
    }

    .fp-template-standard
    .fp-site-header__inner {
        min-height: 82px;
        padding-top: 24px;
    }

    .fp-template-standard .fp-wordmark {
        width: min(
            var(--fp-logo-width),
            180px
        );

        height: min(
            var(--fp-logo-height),
            46px
        );
    }

    .fp-template-standard .fp-hero,
    .fp-template-standard
    .fp-hero__inner {
        min-height:
            min(
                var(--fp-hero-height),
                680px
            );
    }

    .fp-template-standard
    .fp-hero__content,
    .fp-template-standard.fp-hero-align-center
    .fp-hero__content {
        top: 56%;
        left: 0;

        width: 100%;

        text-align: left;

        transform: translateY(-50%);
    }

    .fp-template-standard
    .fp-hero__configuration-visual,
    .fp-template-standard.fp-hero-align-center
    .fp-hero__configuration-visual {
        top: 34%;
        right: -24vw;
        left: auto;

        width: 94vw;

        opacity:
            calc(
                var(--fp-hero-image-opacity) *
                0.22
            );

        transform: translateY(-50%);
    }

    .fp-template-standard
    .fp-statement {
        font-size:
            min(
                var(--fp-font-size-hero),
                68px
            );
    }

    .fp-template-standard
    .fp-hero__date {
        display: block;
    }

    .fp-template-standard
    .fp-hero__date span {
        display: block;
        margin: 11px 0;
    }

    .fp-template-standard
    .fp-status-section,
    .fp-template-standard
    .fp-section {
        padding:
            max(
                64px,
                calc(
                    var(--fp-section-spacing) *
                    0.64
                )
            )
            0;
    }

    .fp-template-standard
    .fp-section-head {
        margin-bottom: 46px;
    }

    .fp-template-standard
    .fp-stepper {
        display: block;
        padding-top: 0;
    }

    .fp-template-standard
    .fp-stepper__line,
    .fp-template-standard
    .fp-stepper__fill {
        display: none;
    }

    .fp-template-standard .fp-step {
        position: relative;

        padding-bottom: 30px;

        display: grid;
        grid-template-columns:
            28px
            minmax(0, 1fr);

        gap: 18px;
        align-items: start;

        text-align: left;
    }

    .fp-template-standard
    .fp-step:not(:last-child)::before {
        position: absolute;
        top: 27px;
        bottom: 0;
        left: 13px;

        width: 2px;

        content: "";

        background: var(--fp-line);
    }

    .fp-template-standard
    .fp-step--done:not(:last-child)::before {
        background: var(--fp-primary);
    }

    .fp-template-standard
    .fp-step__dot {
        margin: 0;
    }

    .fp-template-standard
    .fp-info-strip {
        padding: 70px 0;
    }

    .fp-template-standard
    .fp-info-strip .fp-frame {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .fp-template-standard
    .fp-info-strip
    p:not(.fp-kicker):not(.fp-info-strip__big) {
        margin: 0;
    }

    .fp-template-standard
    .fp-item__button {
        padding: 17px 0;

        grid-template-columns:
            56px
            minmax(0, 1fr)
            28px;

        gap: 16px;
    }

    .fp-template-standard
    .fp-item--child
    .fp-item__button {
        padding-left: 26px;
    }

    .fp-template-standard
    .fp-item__qty,
    .fp-template-standard
    .fp-item__price {
        grid-column: 2;
        text-align: left;
    }

    .fp-template-standard
    .fp-item__price {
        margin-top: -8px;
    }

    .fp-template-standard
    .fp-item__arrow {
        grid-column: 3;
        grid-row: 1;
    }

    .fp-template-standard .fp-doc {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            28px;

        gap: 16px;
    }

    .fp-template-standard
    .fp-doc__meta {
        grid-column: 2;
        grid-row: 2;

        text-align: left;
    }

    .fp-template-standard
    .fp-doc__arrow {
        grid-column: 3;
        grid-row: 1;
    }

    .fp-template-standard
    .fp-facts__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .fp-template-standard
    .fp-document-modal-external {
        display: none !important;
    }
}

/* =========================================================
   Kleine Smartphones
   ========================================================= */

@media (max-width: 520px) {
    .fp-template-standard .fp-frame,
    .fp-template-standard
    .fp-frame--content {
        width: calc(100% - 28px);
    }

    .fp-template-standard
    .fp-site-header__inner {
        min-height: 68px;
        padding-top: 18px;
    }

    .fp-template-standard .fp-wordmark {
        width: min(
            var(--fp-logo-width),
            150px
        );

        height: min(
            var(--fp-logo-height),
            40px
        );

        font-size: 14px;
    }

    .fp-template-standard
    .fp-nav-link {
        display: none;
    }

    .fp-template-standard .fp-hero,
    .fp-template-standard
    .fp-hero__inner {
        min-height:
            min(
                var(--fp-hero-height),
                640px
            );
    }

    .fp-template-standard
    .fp-hero__content {
        top: 57%;
    }

    .fp-template-standard
    .fp-hero__configuration-visual {
        top: 32%;
        right: -54vw;

        width: 135vw;

        opacity:
            calc(
                var(--fp-hero-image-opacity) *
                0.16
            );
    }

    .fp-template-standard .fp-kicker {
        margin-bottom: 24px;

        font-size: 11px;
        letter-spacing: 0.14em;
    }

    .fp-template-standard
    .fp-statement {
        font-size:
            min(
                var(--fp-font-size-hero),
                48px
            );
    }

    .fp-template-standard
    .fp-hero__lead {
        margin-top: 22px;

        font-size:
            min(
                var(--fp-font-size-base),
                16px
            );
    }

    .fp-template-standard
    .fp-section-head h2 {
        font-size:
            min(
                var(--fp-font-size-section),
                40px
            );
    }

    .fp-template-standard
    .fp-info-strip__big {
        font-size:
            min(
                var(--fp-font-size-section),
                46px
            );
    }

    .fp-template-standard .fp-row {
        display: block;
    }

    .fp-template-standard .fp-row
    .fp-inline-button {
        margin-top: 16px;
        display: inline-flex;
    }

    .fp-template-standard
    .fp-contact__row {
        align-items: flex-start;
        gap: 20px;
    }

    .fp-template-standard
    .fp-contact__avatar {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .fp-template-standard
    .fp-contact__links {
        display: block;
    }

    .fp-template-standard
    .fp-contact__links a {
        margin: 8px 14px 0 0;
        display: inline-block;
    }

    .fp-template-standard
    .fp-iframe-modal-dialog {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        margin: 6px auto;
    }

    .fp-template-standard
    .fp-iframe-modal-content {
        height: calc(100vh - 12px);
        min-height: 0;
    }

    .fp-template-standard
    .fp-document-modal-title {
        max-width: 54vw;
        font-size: 24px;
    }

    .fp-template-standard
    .fp-iframe-modal-frame {
        min-height: 0;
    }
}

.fp-template-standard .fp-wordmark {
    min-width: 0;

    width: min(
        var(--fp-logo-width, 190px),
        42vw
    );

    height: var(--fp-logo-height, 56px);

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    overflow: visible;

    color: var(--fp-hero-text);
    background: transparent;

    border: 0;
    box-shadow: none;

    font-family: var(--fp-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;

    text-decoration: none;
    text-transform: uppercase;
}

.fp-template-standard .fp-wordmark__logo {
    width: 100%;
    height: 100%;

    display: block;

    background-color: transparent;
    background-image: var(--fp-logo-image);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;

    border: 0;
    box-shadow: none;

    filter: none !important;
    mix-blend-mode: normal !important;

    opacity: 1 !important;
}

.fp-template-standard .fp-wordmark__text {
    color: inherit;
}

/* =========================================================
   Definitiver Logo-Reset
   Das Firmenlogo darf niemals von Hero-/Bildfiltern betroffen sein.
   ========================================================= */

@media (min-width: 821px) {
    .fp-template-standard .fp-site-header,
    .fp-template-standard .fp-site-header__inner,
    .fp-template-standard .fp-brand,
    .fp-template-standard .fp-brand__media,
    .fp-template-standard .fp-brand__object,
    .fp-template-standard .fp-wordmark,
    .fp-template-standard .fp-wordmark img,
    .fp-template-standard .fp-wordmark__logo {
        filter: none !important;
        -webkit-filter: none !important;

        mix-blend-mode: normal !important;
        background-blend-mode: normal !important;

        opacity: 1 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        mask: none !important;
        -webkit-mask: none !important;

        box-shadow: none !important;
    }

    .fp-template-standard .fp-brand,
    .fp-template-standard .fp-brand__media,
    .fp-template-standard .fp-brand__object,
    .fp-template-standard .fp-wordmark,
    .fp-template-standard .fp-wordmark img,
    .fp-template-standard .fp-wordmark__logo {
        background-color: transparent !important;
        background-blend-mode: normal !important;
    }

    .fp-template-standard .fp-brand__object,
    .fp-template-standard .fp-wordmark img {
        color-scheme: normal !important;
        forced-color-adjust: none !important;
    }
}

/*
 * Filter ausschließlich auf das optionale Projektbild begrenzen.
 * Keine allgemeine Bildregel verwenden.
 */
.fp-template-standard
.fp-hero__configuration-visual
> img {
    filter:
        grayscale(
            var(--fp-hero-image-grayscale, 1)
        ) !important;

    -webkit-filter:
        grayscale(
            var(--fp-hero-image-grayscale, 1)
        ) !important;

    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* =========================================================
   Async Loading / Skeletons
   ========================================================= */

.fp-page--async [aria-busy="true"] {
    min-height: 220px;
}

.fp-skeleton {
    position: relative;
    display: block;
    overflow: hidden;

    background:
        color-mix(
            in srgb,
            var(--fp-line) 62%,
            var(--fp-surface)
        );

    border-radius: 4px;
}

.fp-skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.7),
            transparent
        );

    animation:
        fpSkeletonShimmer
        1.35s
        infinite;
}

@keyframes fpSkeletonShimmer {
    100% {
        transform: translateX(100%);
    }
}

.fp-skeleton--kicker {
    width: 130px;
    height: 12px;
    margin-bottom: 20px;
}

.fp-skeleton--headline {
    width: min(520px, 80%);
    height: 52px;
    margin-bottom: 18px;
}

.fp-skeleton--text {
    width: min(680px, 90%);
    height: 18px;
}

.fp-skeleton--date {
    width: 320px;
    max-width: 100%;
    height: 18px;
}

.fp-skeleton--info {
    width: 240px;
    height: 38px;
    margin-top: 14px;
}

.fp-skeleton-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
    margin-top: 48px;
}

.fp-skeleton--step {
    height: 76px;
}

.fp-skeleton-list {
    display: grid;
    gap: 1px;

    background: var(--fp-line);
    border: 1px solid var(--fp-line);
}

.fp-skeleton-row {
    min-height: 130px;
    padding: 24px;

    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
    align-items: center;

    background: var(--fp-surface);
}

.fp-skeleton-row--document {
    min-height: 90px;
    grid-template-columns: 54px minmax(0, 1fr);
}

.fp-skeleton--image {
    width: 96px;
    height: 82px;
}

.fp-skeleton--document-icon {
    width: 46px;
    height: 46px;
}

.fp-skeleton--row-title {
    width: min(340px, 70%);
    height: 18px;
    margin-bottom: 12px;
}

.fp-skeleton--row-text {
    width: min(520px, 90%);
    height: 13px;
}

.fp-async-error__box {
    padding: 28px;

    display: flex;
    gap: 20px;
    align-items: flex-start;

    background: var(--fp-surface);
    border: 1px solid var(--fp-line);
}

.fp-async-error__icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: var(--fp-primary);
    background: var(--fp-info-bg);

    border-radius: 50%;

    font-weight: 700;
}

.fp-async-error h2 {
    margin: 0 0 8px;

    font-family: var(--fp-font-heading);
    font-size: 22px;
}

.fp-async-error p {
    margin: 0;
    color: var(--fp-soft);
}

.fp-brand {
    width: auto;
    height: auto;

    max-width: min(
        var(--fp-logo-width, 190px),
        42vw
    );

    max-height: var(--fp-logo-height, 56px);

    display: inline-flex;
    align-items: center;

    filter: none !important;
    -webkit-filter: none !important;

    mix-blend-mode: normal !important;
    text-decoration: none;
}

.fp-brand__image {
    width: auto !important;
    height: auto !important;

    max-width: min(
        var(--fp-logo-width, 190px),
        42vw
    ) !important;

    max-height: var(--fp-logo-height, 56px) !important;

    display: block;

    object-fit: contain !important;
    object-position: left center;

    filter: none !important;
    -webkit-filter: none !important;

    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

.fp-brand__text {
    color: var(--fp-hero-text);

    font-family: var(--fp-font-heading);
    font-weight: 700;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

@media (max-width: 820px) {
    .fp-skeleton-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fp-skeleton--step {
        height: 58px;
    }

    .fp-skeleton-row {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 18px;
    }

    .fp-skeleton--image {
        width: 72px;
        height: 66px;
    }

    .fp-brand,
    .fp-brand__image {
        max-width: 180px !important;
        max-height: 46px !important;
    }
}

@media (max-width: 520px) {
    .fp-skeleton--headline {
        height: 38px;
    }

    .fp-skeleton-row {
        padding: 18px;
    }

    .fp-brand,
    .fp-brand__image {
        max-width: 150px !important;
        max-height: 40px !important;
    }
}