/* Theme Name: Flash dh child
 description: >-
   A child theme of the Twenty Fifteen default WordPress theme
 Author: John Doe
 Template: flash
 Version: 1.0.0
*/




@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');


@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@1,600&display=swap');


:root {
    --w: 680px;
    --h: 460px;
    --gold: #ffd76a;
    --gold-2: #ffb300;
    --bg: #0c0f17;
}

/* =================================================
   1) NUR auf bestimmter Landing sichtbar
   ================================================= */

.menu-item-kostenlos-only,
.menu-item-lebenslauf-only,
.menu-item-bewerbung-only {
    display: none !important;
}

.landing-kostenlos .menu-item-kostenlos-only,
.landing-lebenslauf .menu-item-lebenslauf-only,
.landing-bewerbung .menu-item-bewerbung-only {
    display: block !important;
}

.eco .is-top,
.top .is-eco {
    display: none !important;
}

.eco .is-eco,
.top .is-top {
    display: initial !important;
}

.debug-fp-badge {
	display: inline-block;
	background: var(--secondary-color);
	color: #fff;
	border-radius: 999px;
	padding: 3px 8px 3px 8px;
	font-size: 0.9em;
	line-height: 0.9;
	box-sizing: border-box;
	white-space: nowrap;
	pointer-events: auto;
	cursor: pointer;
}
.assist_preview .ap-field-head i {
    padding: 6px;
    color: #666;
    background: #ccc;
    margin: 0 6px 0 0;
    height: 1em;
    width: 1em;
    text-align: center;
    border-radius: 2px;
}

#shortcut_mydocuments {
    text-decoration: none;
}



.top .assist_preview .eco-left {
    background-color: var(--secondary-color);
}

.top .assist_preview .button-primary,
.top .assist_preview input:checked+.track {
    background-color: var(--secondary-color);
}

.top .assist_preview .ap-switch-gender[data-gender="m"] .track {
    background-color: lightblue;
}

.top .assist_preview .button-primary.mute {
    background-color: var(--text-color);
}

/* =================================================
   2) Überall sichtbar – außer auf bestimmter Landing
   ================================================= */

.menu-item-hide-on-kostenlos,
.menu-item-hide-on-lebenslauf,
.menu-item-hide-on-bewerbung {
    display: block !important;
}

@media (max-width:1220px) {

    .landing-kostenlos .menu-item-hide-on-kostenlos,
    .landing-lebenslauf .menu-item-hide-on-lebenslauf,
    .landing-bewerbung .menu-item-hide-on-bewerbung {
        display: none !important;
    }

}

.hotline .ap-icon {
    padding: 6px;
    color: var(--accent-color);
    background-color: #ccc;
    border-radius: 3px;
    display: flex;
    align-self: ;
    align-content: inherit;
    margin: 0 0.5em 0 0;
}


.ap-stars-stage {
    position: absolute;
    width: 100%;
    height: 50%;
    border-radius: 16px;
    top: -20%;
    /* left: -28%; */
    pointer-events: none;
    overflow: clip;
    contain: paint;
}

.ap-stars-emitter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    top: 100px;
}



.ap-stars-tip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 54px;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: var(--gold);
    text-shadow:
        0 0 6px rgba(255, 215, 106, 0.9),
        0 0 18px rgba(255, 179, 0, 0.55);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}


.ap-stars-textline {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #e7e9f7;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 45px rgba(0, 0, 0, 0.65);
}




.ap-stars-star {
    position: absolute;
    top: 0;
    left: 0;
    offset-rotate: 0deg;
    will-change: offset-distance, transform, opacity, filter;
    opacity: 0;
    filter:
        drop-shadow(0 0 6px rgba(255, 179, 0, 0.85)) drop-shadow(0 0 16px rgba(255, 215, 106, 0.75));
    animation:
        travel var(--dur, 2200ms) linear var(--delay, 0ms) infinite,
        twinkle var(--twinkleDur, 1300ms) ease-in-out calc(var(--delay, 0ms) / 2) infinite;
}

.ap-stars-star::before {
    content: "✦";
    display: block;
    font-size: var(--size, 11px);
    line-height: 1;
    color: var(--gold);
    text-shadow:
        0 0 2px var(--gold-2),
        0 0 10px rgba(255, 179, 0, 0.65),
        0 0 18px rgba(255, 214, 102, 0.55);
}


@keyframes travel {
    0% {
        opacity: 0;
        offset-distance: 0%;
        transform: scale(1) translateZ(0);
    }

    8% {
        opacity: 0.7;
    }

    55% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        offset-distance: 100%;
        transform: scale(0.6) translateZ(0);
    }
}

@keyframes twinkle {
    0% {
        filter: drop-shadow(0 0 3px rgba(255, 179, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 215, 106, 0.7));
        transform: translateZ(0) scale(1);
    }

    27% {
        transform: translateZ(0) scale(1.12);
    }

    33% {
        filter: drop-shadow(0 0 2px rgba(255, 179, 0, 0.5)) drop-shadow(0 0 6px rgba(255, 215, 106, 0.45));
    }

    61% {
        transform: translateZ(0) scale(0.96);
    }

    79% {
        filter: drop-shadow(0 0 5px rgba(255, 179, 0, 0.95)) drop-shadow(0 0 14px rgba(255, 215, 106, 0.9));
    }

    100% {
        transform: translateZ(0) scale(1);
    }
}

/* Pfade (Bögen) 
    über display abschaltbar
*/
.ap-stars-ray1 {
    offset-path: path("M 40 62 C 53.6 51.8 73.5 44.5 88.9 35.2 S 120 27.6 129.4 43 S 156 33.3 165.4 48.7 S 189.5 32.4 198.9 47.8 S 223 31.5 232.4 46.9 S 251.7 33.8 265.3 23.6");
}

.ap-stars-ray2 {
    display: none;
    offset-path: path("M 40 62 C 73.5 44.5 131.2 27.3 166.9 21.8 S 229.1 6.7 247.8 37.5 S 285 5.2 313.6 -9");
}

.ap-stars-ray3 {
    display: none;
    offset-path: path("M 40 62 C 82.3 37.6 162 8.6 206.7 7.3 S 277.4 -25.9 305.2 9.1 S 344.5 -27.7 375.3 -46.5");
}

.ap-stars-ray4 {
    offset-path: path("M 40 62 C 87.1 50.9 175.9 26.1 229.1 6.7 S 322.1 -27.1 340.8 3.7 S 392.8 -60.4 436.9 -84");
}

.ap-stars-ray5 {
    display: none;
    offset-path: path("M 40 62 C 104.6 37 215.8 11.6 278 -3.6 S 375.3 -46.5 412.1 -7.2 S 468.3 -80.3 516.6 -113");
}

.ap-stars-rayL1 {
    display: none;
    offset-path: path("M 40 62 C 61.2 82.9 116.1 130.6 156.6 138.4 S 227.9 127.6 246.6 158.4 S 276.8 117.3 307.6 98.5");
}

.ap-stars-rayL2 {
    display: none;
    offset-path: path("M 40 62 C 66 96.2 137.9 107.6 173.5 102.2 S 244.8 91.3 263.5 122.1 S 306.4 53.8 341.4 26");
}



.ap-stars-star {
    --dur: 2600ms;
    --size: 10px;
    --twinkleDur: 1200ms;
}

.ap-stars-star:nth-child(5n) {
    --size: 9px;
    --dur: 2500ms;
}

.ap-stars-star:nth-child(7n) {
    --size: 8px;
    --dur: 2350ms;
}

.ap-stars-star:nth-child(9n) {
    --size: 12px;
    --dur: 2750ms;
}

.ap-stars-star:nth-child(11n) {
    --size: 7px;
    --dur: 2200ms;
}

.ap-stars-star:nth-child(13n) {
    --size: 6px;
    --dur: 2100ms;
}

.ap-stars-star:nth-child(2n+1) {
    --delay: 60ms;
}

.ap-stars-star:nth-child(3n+2) {
    --delay: 180ms;
}

.ap-stars-star:nth-child(4n+1) {
    --delay: 320ms;
}

.ap-stars-star:nth-child(6n+3) {
    --delay: 480ms;
}

.ap-stars-star:nth-child(8n+5) {
    --delay: 640ms;
}

.ap-stars-star:nth-child(10n+7) {
    --delay: 820ms;
}


.ap-stars-halo {
    position: absolute;
    top: 4%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    background:
        radial-gradient(closest-side, rgba(255, 215, 106, 0.35), rgba(255, 215, 106, 0.0) 70%);
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.6;
    animation: pulse 2200ms ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.55;
    }

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: 0.75;
    }
}

.ap-stars-glow-floor {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 70%;
    height: 30px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(255, 215, 106, 0.25), transparent 70%);
    filter: blur(8px);
    opacity: 0.6;
    pointer-events: none;
}


@media (max-width: 720px) {
    :root {
        --w: 92vw;
        --h: 64vh;
    }

    .ap-stars-textline {
        font-size: 7.2vw;
    }

}


.ap-stars--half .ap-stars-star:nth-child(2n) {
    display: none;
}


.ap-stars--third .ap-stars-star:not(:nth-child(3n)) {
    display: none;
}


.ap-stars--slow .ap-stars-star {
    --dur: calc(var(--dur, 2200ms) * 1.5);
    --twinkleDur: calc(var(--twinkleDur, 1300ms) * 1.5);
}


.ap-stars--slower .ap-stars-star {
    --dur: calc(var(--dur, 2200ms) * 2);
    --twinkleDur: calc(var(--twinkleDur, 1300ms) * 2);
}

.assist_preview {
    box-sizing: border-box;
    border-radius: 16px;
    font-size: 14px;
    border: 1px solid #ddd;
    width: auto;
    background: var(--background-color);

    aspect-ratio: 1 / 1.414;
    margin: 3em;
    color: #444;

    align-self: first baseline;
    align-content: start;
    align-items: inherit;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    box-shadow: 0 12px 36px rgba(69, 69, 69, 0.3);

}

.assist_preview .anschreiben {
    padding: 8% 13%;
    color: transparent;
    transition: color 0.4s ease;
}
.assist_preview.assist_preview_ready .anschreiben {
    color: #444;
}

.assist_preview.startbox-assist-preview .anschreiben.startbox-anschreiben-fade {
    position: relative;
    max-height: 30em;
    overflow: hidden;
}

.assist_preview.startbox-assist-preview .anschreiben.startbox-anschreiben-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6em;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.assist_preview.startbox-assist-preview {
    aspect-ratio: auto;
    height: 44em;
}

.assist_preview.startbox-assist-preview .entry {
    top: 50%;
    transform: translate(-50%, -50%);
}

.ap-form-grid textarea,
.ap-form-grid select,
.ap-form-grid input:not([type]),
.ap-form-grid input[type=text],
.ap-form-grid input[type=email] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: #fff;
    padding: 2px 6px 2px 6px;
    font-size: 16px;
    border-radius: 0;
    box-shadow: unset !important;

    border: 0px;
    width: 100%;
}



.assist_preview-sender,
.assist_preview-recipient {}

.assist_preview-datum {
    text-align: right;
}

.assist_preview-subject {
    font-weight: 700;
}

.assist_preview-greeting,
.assist_preview-paragraph,
.assist_preview-closing,
.assist_preview-signature {}

.assist_preview-name,
.assist_preview-address,
.assist_preview-city,
.assist_preview-email,
.assist_preview-phone,
.assist_preview-company,
.assist_preview-contact,
.assist_preview-street,
.assist_preview-location {}

:root {
    --w: 48px;
    --h: 18px;
    --thumb: 16px;
    --green: var(--primary-color);
    --gray: #d6d6d6;
    --transition: 200ms cubic-bezier(.4, .4, .25, 1.2);
}

.ap-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin: 1em 0 0 0;
    gap: .5rem;
}

.ap-small .ap-form-grid {
    margin: 0.25em 0 0 0;
    gap: .25rem;
}

.ap-field {
    display: flex;
    flex-direction: column;
    margin: 1em 0 0 0;
}


.ap-field label {
    font-weight: bold;
    margin-bottom: .3rem;
    font-size: 14px;
    min-height: 18px;

    display: flex;

    align-items: flex-end;

}

.ap-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ap-field input {
    padding: .4rem .6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: .5rem;
    user-select: none;
}

.switch input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.track {
    position: relative;
    width: var(--w);
    height: var(--h);
    background: var(--gray);
    border-radius: 999px;
    transition: background var(--transition), box-shadow var(--transition);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 2px rgba(0, 0, 0, 0.15);
}

.thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #e6e6e6 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: transform var(--transition);
}

input:checked+.track {
    background: var(--primary-color);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

input:checked+.track .thumb {
    transform: translateX(calc(var(--w) - var(--thumb) - 4px));
}

.switch input:focus-visible+.track {
    outline: none;
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.4);
}

.upload-area {
    margin: 0;
    cursor: pointer;
}

.upload-input {
    display: none;
}

.upload-status {
    margin-top: .25rem;
}

.upload-empty {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.upload-selected {
    display: none;

}

.upload-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--accent-color);
    color: #fff;
    border-radius: 3px;
    padding: .25rem .6rem;
    vertical-align: middle;
}

.upload-filename {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-chip-reset {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.upload-hint {
    margin-top: .25rem;
    opacity: .8;
}




.ap-chev-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: .75rem;
}

.ap-chev-icons {
    display: inline-flex;
    gap: .25rem;
}


.ap-chev-icons {
    font-size: 1.25em;
}


.ap-chev-header .ap-more {
    display: inline-block !important;
}

.ap-chev-header .ap-less {
    display: none !important;
}


.ap-chev-header:has(.ap-chev-toggle:checked) .ap-more {
    display: none !important;
}

.ap-chev-header:has(.ap-chev-toggle:checked) .ap-less {
    display: inline-block !important;
}



.ap-chev-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}


.ap-chev-header:has(.ap-chev-toggle:checked)+.ap-chev-content {
    max-height: 1000px;
}




.ap-switch-labeled {
    position: relative;
}

.ap-switch-labeled .track {
    overflow: visible;
    position: relative;
    font: 600 10px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #333;
}

.ap-switch-labeled .track::before,
.ap-switch-labeled .track::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: opacity var(--transition);
}

.ap-switch-labeled .track::before {
    content: "AUS";
    left: calc(var(--thumb) + 4px);
    color: #555;
    opacity: 1;
}

.ap-switch-labeled .track::after {
    content: "AN";
    right: calc(var(--thumb) + 8px);
    color: #fff;
    opacity: 0;
}

.ap-switch-labeled input:checked+.track::before {
    opacity: 0;
}


.ap-switch-gender .track {

    position: relative;
}

.ap-switch-gender[data-gender="w"] .track {
    background-color: pink;
}

.ap-switch-gender[data-gender="m"] .track {
    background-color: lightblue;
}


.ap-switch-gender .track::before,
.ap-switch-gender .track::after {

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.03em;

    pointer-events: none;

    opacity: 0.4;

    transition: opacity 0.2s ease;
}


.ap-switch-gender .track::before {

    content: "M";

    left: 6px;
    color: #000;
}


.ap-switch-gender .track::after {

    content: "W";

    right: 4px;
    color: #000;
}


.ap-switch-gender .thumb {}


.ap-switch-gender[data-gender="neutral"] .thumb {

    left: 34%;
}


.ap-switch-gender[data-gender="m"] .thumb {}


.ap-switch-gender[data-gender="w"] .thumb {}


.ap-switch-gender[data-gender="neutral"] .track::before,
.ap-switch-gender[data-gender="neutral"] .track::after {

    opacity: 0.6;
}


.ap-switch-gender[data-gender="m"] .track::before {

    opacity: 1 !important;
}


.ap-switch-gender[data-gender="m"] .track::after {

    opacity: 0 !important;
}


.ap-switch-gender[data-gender="w"] .track::before {

    opacity: 0.2;
}


.ap-switch-gender[data-gender="w"] .track::after {

    opacity: 1;
}


.ap-toggle-field:has(.switch input:not(:checked))>.ap-field-head+.ap-disappear {
    display: none;
    pointer-events: none;
    opacity: .5;
    background: #f4f4f4;
}


.ap-toggle-field>.ap-appear {
    display: none;
}


.ap-toggle-field:has(.switch input:not(:checked))>.ap-appear {
    display: block;
}


.ap-toggle-field:has(.switch input:not(:checked)) .switch {
    pointer-events: auto;
}

.ap-switch-labeled input:checked+.track::after {
    opacity: 1;
}

@media (max-width: 700px) {
    .ap-form-grid {
        margin: 1em 0 0 0;
        grid-template-columns: 1fr;
    }
}


@media (max-width: 1220px) {
    .assist_preview {
        margin: 1em 2em;
    }

    body {
        margin: 2.5em 1em !important;

    }

    section,
    footer {
        margin: 0 -1em !important;

    }
}


.nice h2,
.nice h3,
.nice h4 {
    color: var(--accent-color);
    margin: 1em 0;
}

.nice .toc a {
    color: inherit;
    text-decoration: none;
}

.nice .example {
    font-style: italic;
    font-weight: bold;
    color: #666;

}

.nice .toc li {
    margin-top: 0.5em;
}

.nice .text p {
    margin: 1em 0;
    line-height: 1.5em;
    font-size: 16px;
}

/* Listen im Hub-Content typografisch an den Fließtext anpassen */
.nice .text ul,
.nice .text ol,
.nice .text .eg-content-list {
    margin: 2em 0 2em 0;
    line-height: 1.5em;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.45);
    padding: 1em;
    border-radius: 6px;
}

/* Ungeordnete Listen als Spiegelstrich-Liste darstellen */
.nice .text ul,
.nice .text ul.eg-content-list {
    list-style: none;
    padding-left: 1em;
}

/* Ordered Lists behalten Nummern und bekommen sauberen Einzug */
.nice .text ol,
.nice .text ol.eg-content-list {
    list-style: decimal;
    padding: 1em 1em 1em 2.5em !important;
}

/* Jeder Listeneintrag bekommt den geforderten Abstand nach unten */
.nice .text li,
.nice .text .eg-content-list li {
    margin: 0 0 0.5em 0;
    line-height: 1.5em;
    font-size: 16px;
}

/* Tabellenzellen im EG-Content immer oben links ausrichten. */
.nice .text table th,
.nice .text table td {
    vertical-align: top;
    text-align: left;
}

/* Spiegelstrich visuell hervorheben */
.nice .text ul li,
.nice .text ul.eg-content-list li {
    position: relative;
    padding-left: 1.1em;
}

/* Spiegelstrich vor jedem UL-Listenelement einfügen */
.nice .text ul li::before,
.nice .text ul.eg-content-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: inherit;
    font-weight: 400;
}


.nice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
}

.nice .text {
    grid-column: 1;
    grid-row: 1;
}


.nice .toc li.active {
    background: #eee;
    color: var(--accent-color);
    font-weight: bold;
    padding: 4px;
}

.nice .toc {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 80px);
    overflow: auto;
    z-index: 2;
    background: #fff;
    padding: 1em;
    font-size: 14px;
    border: 1px dotted #333;

}

@media (max-width: 600px) {
    .nice {
        display: block;
    }

    .nice .toc {
        position: static;
        max-height: none;
        margin-bottom: 1rem;
    }
}

.ll-card {
    position: relative;
    overflow: hidden;
    margin: 2em 0;
}

.ll-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    padding: 0.6em 0.8em;
    font-weight: 600;
    font-size: 1em;
}

.ll-link {
    display: inline-block;
    margin-left: 0.8em;
    font-weight: 400;
    text-decoration: underline;
    color: #b4dcf0;
}

.ll-link:hover {
    color: #fff;
}


.ll-card img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 1px 0 #b4dcf0) drop-shadow(4px 8px 8px #b4dcf0);
    height: auto;
    margin: 0 0 2em 0;
}


.ll-overlay-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    text-align: center;
}


.ll-spinner {
    width: 10em;
    height: 10em;
    border: .8em solid rgba(0, 0, 0, .15);
    border-top: .8em solid var(--primary-color);
    border-radius: 50%;
    animation: llspin 1s linear infinite;
    margin-bottom: .8em;
}


.ll-spinner-textwrap {
    background: var(--primary-color);
    padding: .6em 1em;
    border-radius: .4em;
    max-width: 90%;
    font-size: 1rem;
    color: #fff;
    margin-top: 1em;

}

.ll-check-overlay-spinner-fixed {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 2147483600;
    text-align: center;
}

.ll-check-spinner-clone {
    width: 10em;
    height: 10em;
    border: .8em solid rgba(0, 0, 0, .15);
    border-top: .8em solid var(--primary-color);
    border-radius: 50%;
    animation: llspin 1s linear infinite;
    margin-bottom: .8em;
}

.ll-check-spinner-textwrap-clone {
    background: var(--primary-color);
    padding: .6em 1em;
    border-radius: .4em;
    max-width: 90%;
    font-size: 1rem;
    color: #fff;
    margin-top: 1em;
}

.ll-check-spinner-subline {
    display: inline-block;
    margin-top: .2em;
    font-size: .92em;
}

.ll-check-spinner-box {
    min-height: 7em;
}

.ll-check-modal-shell {
    margin: 0.4em 0;
}

.ll-check-modal-headline {
    margin: 0 0 0.6em 0;
}

.ll-check-modal-body {
    line-height: 1.45;
    text-align: left;
    padding: 0.25em 0;
}

.ll-check-modal-status {
    margin: 0;
    text-align: center;
    font-weight: 700;
    color: #333;
}

.ll-check-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding-top: 0.7em;
}

.ll-check-modal-actions .button-primary {
    margin-top: 0 !important;
}

.ll-check-confirm-body {
    text-align: center;
}

.ll-check-confirm-badge-wrap {
    text-align: center;
}

.ll-check-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.88rem;
    line-height: 1.2;
}

.ll-check-table th,
.ll-check-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: top;
    text-align: left;
}

.ll-check-table th {
    border-bottom: 1px solid #d8d8d8;
    font-weight: 700;
}

.ll-check-table .is-center {
    text-align: center;
    white-space: nowrap;
}

.ll-check-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.28em;
    height: 1.28em;
    border-radius: 999px;
    color: #fff;
    font-size: 0.9em;
    margin-left: 0.3em;
}

.ll-check-count {
    display: inline-block;
    min-width: 1.2em;
}

.ll-check-why-list {
    margin: 0;
    padding-left: 1em;
}

.ll-check-why-list li {
    margin: 0;
    padding: 0;
}

.ll-check-table-scroll {
    max-height: 22em;
    overflow: auto;
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0.2em;
}

.ll-check-json-block {
    margin: 0.2em 0 0;
    padding: 0.35em 0.45em;
    background: #f6f6f6;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82em;
    line-height: 1.25;
}

.ll-check-json-block-modal {
    text-align: left;
    max-height: 18em;
    overflow: auto;
}

.ll-check-validation-ok {
    color: #2b8a3e;
    text-align: left;
    margin-bottom: 0.5em;
}

.ll-check-validation-warn {
    color: #b2002d;
    text-align: left;
    margin-bottom: 0.5em;
}

.modal .modal-content.tc-opts {
    width: min(520px, calc(100vw - 2em));
    max-width: 520px;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0 auto;
}

/* Helle Dialoge im transparenten Modal-Container bekommen weißen Hintergrund */
.modal .modal-content.tc-opts > div:not(.modal_dark) {
    background: #fff;
    padding: 1em;
    border-radius: 6px;
}

.modal #universalModalLebenslaufCheck>div,
.modal #universalModalLebenslaufCheckDebugDetail>div,
.modal #universalModalLebenslaufCheckConfirm>div,
.modal .fk-detail-section>div {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.modal .ll-check-modal-headline {
    background: none;
    box-shadow: none;
    color: #fff;
    font-family: inherit !important;
    padding: 0;
    margin-bottom: 0.8em;
}

.modal .ll-check-modal-body.hint-area {
    border: 0;
    box-shadow: none;
    padding: 0;
    color: #fff;
}

.modal .ll-check-modal-status,
.modal #universalModalLebenslaufCheckErrors,
.modal #universalModalLebenslaufCheckSummary,
.modal #universalModalLebenslaufCheckChanges,
.modal #universalModalLebenslaufCheckInfo,
.modal #universalModalLebenslaufCheckDebug,
.modal #universalModalLebenslaufCheckDetailreport,
.modal_dark p,
.modal_dark b,
.modal_dark li,
.modal_dark label {
    color: #fff;
    font-size: 0.9em;
}

.modal_dark a {
    color: #fff;
    text-decoration: underline;
}

.modal input:checked+.track {
    background: var(--secondary-color);
}

.modal .ll-check-json-block {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Nur die 3 neuen Lebenslauf-Tipp-Dialoge */
#universalModalLebenslaufCheckBox,
#universalModalLebenslaufCheckDebugDetailBox,
#universalModalLebenslaufCheckConfirmBox,
#universalModalFreikontingentDetailsBox,
.fk-detail-section > div {
    position: relative;
}

#button_universal_lebenslauf_check_close_x,
#button_universal_lebenslauf_check_debug_close_x,
#button_universal_freikontingent_close_x,
.fk_modal_close.close-a {
    float: right;
    z-index: 10;
    line-height: 0.7;
    color: #fff;
    cursor: pointer;
    font-size: 28px;
}

#button_universal_lebenslauf_check_confirm_close {
    float: right;
    line-height: 1;
    color: #fff;
}


.ll-check-dialog-title {
    font-weight: 700;
    text-align: left;
    margin: 0 2em 0.65em 0;
}

#universalModalLebenslaufCheck input:checked+.track,
#universalModalLebenslaufCheckConfirm input:checked+.track {
    background: var(--secondary-color);
}

.modal .ll-check-table {
    table-layout: fixed;
    background: transparent;
    color: #fff;
}

.modal .ll-check-table th,
.modal .ll-check-table td {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.modal .ll-check-table-detail th:nth-child(1),
.modal .ll-check-table-detail td:nth-child(1) {
    width: 34%;
}

.modal .ll-check-table-detail th:nth-child(3),
.modal .ll-check-table-detail td:nth-child(3),
.modal .ll-check-table-kurz th:nth-child(2),
.modal .ll-check-table-kurz td:nth-child(2) {
    width: 4.4em;
    white-space: nowrap;
}

.modal .ll-check-table .is-center {
    text-align: center;
}

.modal .ll-check-col-status .ll-check-status-icon {
    margin-left: 0;
}

.modal .ll-check-col-status .ll-check-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.28em;
    height: 1.28em;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 1;
}

.modal.ll-check-theme .ll-check-table-scroll {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.modal .fk-detail-section .ll-check-table {
    table-layout: auto;
}

/* Common Modal – wiederverwendbare Bausteine fuer modale Dialoge */
.common-modal-container {
    max-width: 700px;
    margin: auto;
    padding: 1.5em;
    font-size: 14px;
}
.common-modal-header {
    background: var(--accent-color);
    color: #fff;
    border-radius: 6px;
    padding: 6px 6px 6px 10px;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.common-modal-close {
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    padding: 0 0.2em;
}
.common-modal-text {
    line-height: 1.5;
    margin-bottom: 0.5em;
    padding: 6px;
}
.common-modal-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 0.75em;
}
.common-modal-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    padding: 0.6em 0.8em;
    background: #f0f6ff;
    color: #333;
    border-radius: 6px;
    line-height: 1.6;
}
.common-modal-step > span:last-child {
    flex: 1;
}
.common-modal-step-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.15em;
}
.common-modal-accent-link {
    background: var(--accent-color);
    color: #fff;
    border-radius: 6px;
    padding: 3px 6px;
    white-space: nowrap;
    text-decoration: none;
}
.common-modal-accent-badge {
    background: var(--accent-color);
    color: #fff;
    border-radius: 6px;
    padding: 3px 6px;
}
.common-modal-btn-full {
    width: 100%;
}

.modal .fk-detail-section .ll-check-table-scroll {
    border-top: 0;
    border-bottom: 0;
}

.modal .fk-detail-section .ll-check-table tr:last-child td {
    border-bottom: 0;
}

.modal #universalModalLebenslaufCheckDebugDetail .ll-check-copy-scroll {
    max-height: 16em;
    overflow: auto;
}

.modal #universalModalLebenslaufCheckDebugDetail .ll-check-copy-button {
    margin-top: 0.45em !important;
}

.modal #universalModalLebenslaufCheckDebugDetail .ll-check-why-list {
    max-height: 9em;
    overflow: auto;
    padding-right: 0.35em;
}

.modal #universalModalLebenslaufCheckRawJson {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#universalModalLebenslaufCheck .button-primary.mute,
#universalModalLebenslaufCheckDebugDetail .button-primary.mute,
#universalModalLebenslaufCheckConfirm .button-primary.mute,
.fk-detail-section .button-primary.mute {
    background-color: var(--text-color);
    color: #fff;
}

.modal .ll-check-ki-tipps-intro {
    margin: 0 0 0.6em 0;
    text-align: left;
    font-weight: normal;
}

.modal .ll-check-hinweis {
    margin: 1em 0;
    text-align: left;
    font-size: 0.9em;
}

#universalModalLebenslaufCheck .button-primary.mute,
#universalModalLebenslaufCheckDebugDetail .button-primary.mute,
#universalModalLebenslaufCheckConfirm .button-primary.mute,
.fk-detail-section .button-primary.mute {
    background: #fff;
    color: #333;
}

@keyframes llspin {
    to {
        transform: rotate(360deg);
    }
}


.upload-drop {
    margin-top: 4em;
    margin-bottom: -1em;
    border: 2px dashed var(--primary-color);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: rgba(255, 255, 255, 0.95);

}

.cv-drop-selection {
    color: var(--primary-color);
    font-weight: bold;
}

.upload-drop.drag {
    border-color: #333;
    background: #fafafa;
}

.upload-drop input[type="file"] {
    display: none;
}

.ll-preinit-dummy {
    left: 33%;
    width: 33%;
    height: auto;
    margin-top: 5em;
}

/*
.text-content.text-content-divider {
    height: 280px;
}

@media (max-width: 768px) {.text-content.text-content-divider {
        height: 280px;
    }
}
@media (max-width: 430px) {.text-content.text-content-divider {
        height: 380px;
    }
}*/

.cta-row .link-slider-cta i.fa,
.cta-row .button-slider-cta i.fa {
    width: 1em;

    min-width: 1em;
    display: inline-block;
}

.notice-box {
    line-height: 1.5em;
}

.bg-eco {
    background: linear-gradient(45deg, #000, #216b65, #000) !important;
    color: #fff !important;
}

.bg-top {
    background: linear-gradient(45deg, #000, #e60069, #000) !important;
    color: #fff !important
}

.undeco {
    text-decoration: none;
    color: inherit;
}

.product-info {
    display: inline-block;
    width: 100%;
}

.topteaser {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

.icon-link {
    float: right;
    color: #666;
}

*[id] {
    scroll-margin-top: 60px;
}

.drop-shadow {
    filter: drop-shadow(0 1px 0 #b4dcf0) drop-shadow(4px 8px 8px #b4dcf0);
}


.hl-icon {
    filter: drop-shadow(0 1px 0 #b4dcf0) drop-shadow(4px 8px 8px #b4dcf0);
    border-radius: 0 !important;
    border-bottom-right-radius: 24px !important;
    border: 2px dotted #ccc;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    padding: .5em;
    display: block;

    box-sizing: border-box;

    margin: 0;
    flex: 0 0 5em;

}



.hl-box {
    padding: 30px;
    background: var(--background-color, #f9f9f9);
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 0 0 15px 0;
    box-shadow:
        inset 5px 0 8px -5px rgba(180, 220, 240, 1),
        inset 0 5px 8px -5px rgba(180, 220, 240, 1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;

    text-decoration: none;
    color: inherit;
}


.hl-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.ll-card,
.hl-card {
    flex: 0 0 100%;
}

@media (min-width:700px) {

    .ll-card,
    .hl-card {
        flex: 0 0 calc((100% - 24px)/2);
    }
}

@media (min-width:1100px) {

    .ll-card,
    .hl-card {
        flex: 0 0 calc((100% - 48px)/3);
    }
}


.hl-card {
    display: block;
    position: relative;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, 0) 60%),
        #fff;
    border-radius: 0;
    border-bottom-right-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .06),
        0 8px 20px rgba(0, 0, 0, .06);
    transform-origin: 50% 70%;
    transform: perspective(1200px) rotateX(.5deg) rotateY(-3deg) rotateZ(.08deg);
    transition: transform .18s ease, box-shadow .18s ease;
    backface-visibility: hidden;
}

.hl-card:hover {
    transform: perspective(1200px) rotateX(.4deg) rotateY(-1.5deg) rotateZ(.06deg) translateY(-1px);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .08),
        0 14px 28px rgba(0, 0, 0, .10);
}


.hl-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12%;
    right: 12%;
    height: 18px;
    margin-top: 8px;
    background: radial-gradient(50% 60% at 50% 40%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(8px);
    opacity: .6;
    pointer-events: none;
    z-index: -1;
}


.hl-top {
    display: flex;

    align-items: center;
    gap: 20px;
    min-height: 5em;

    box-sizing: border-box;
}

/ .hl-bottom {
    display: block;
    margin-top: 10px;
}

.hl-text {
    margin: 2em 0 0 0;
    text-align: left;
}



html {
    scroll-behavior: smooth;
}

.hl-imagecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    border-radius: 0;
    border-bottom-right-radius: 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0.05) 60%), #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .08);
    transform-origin: 50% 70%;
    transform: perspective(1100px) rotateX(.4deg) rotateY(-2deg);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}

.hl-imagecard.top {
    background: linear-gradient(180deg, rgb(204, 0, 92) 0%, rgba(115, 115, 115, 0.09) 60%), #fff;
}

.hl-ecosym {
    padding: 0 0 1em 0;
    text-align: center;
}

.hl-topsym {
    padding: 0 0 1em 0;
    text-align: center;
}

.hl-imagecard:hover {
    transform: perspective(1100px) rotateX(.2deg) rotateY(-1deg) translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08), 0 16px 30px rgba(0, 0, 0, .12);
}




.hl-icon {
    flex: 0 0 auto;
}

.hl-content {
    flex: 1 1 auto;
    display: block;
}

.hl-hd {
    align-self: end;
    margin-bottom: 0.5em;
    line-height: unset;
}

.hl-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.hl-tag {
    display: flex;
    align-items: flex-start;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.6em;
    padding: 0.5em 0.8em;
    margin: 0.35em 0;
    box-sizing: border-box;
}

.hl-tag i {
    color: var(--accent-color);
    margin-right: 0.6em;
    font-size: 1.1em;
    flex-shrink: 0;
}

.hl-tag span {
    flex: 1;
    line-height: 1.4;
    white-space: normal;
}


.hl-imagecard-title {
    margin: 0;
    text-transform: uppercase;
    color: #333;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.top .hl-imagecard-title {
    color: #fff;
}

.hl-imagecard img {
    width: 80%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 1px 0 #b4dcf0) drop-shadow(4px 8px 8px #b4dcf0);
    height: auto;
}


.hl-card u {
    color: #999;
    display: block;
    margin-top: 1em;
    text-underline-offset: 3px;
    float: right;
    font-size: 14px;
}

article.hl-card.is-target u,
article.hl-card:target u {
    color: var(--primary-color);
}

article.is-target,
article:target {
    outline: 2px solid var(--primary-color);
    background: #f9f9ff;
    scroll-margin-top: 80px;
}


.testimonials-container {
    display: flex;
    gap: 24px;
}



.lebenslauf-karussell-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    user-select: none;
    margin: 2rem 0;
    isolation: isolate;
}

.lebenslauf-karussell-liste {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    --karte-breite: 300px;
    --karte-hoehe: calc(var(--karte-breite) * 297 / 210);
    min-height: calc(var(--karte-hoehe) + 140px);
}

.lebenslauf-karussell-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 280ms ease, opacity 200ms ease;
    will-change: transform, opacity, z-index;
    width: 300px;
}


.lebenslauf-slide-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: var(--accent-color);
    color: #fff;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

.card-header-top.lebenslauf-slide-head {

    background: var(--secondary-color);

}

.lebenslauf-karussell-karte {
    position: relative;
    width: 300px;
    height: calc(300px * 297 / 210);
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.lebenslauf-karussell-a4 {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgb(180, 220, 240);
}

.lebenslauf-karussell-vorschau {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}


.lebenslauf-karussell-overlay-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 2222222222;
}

.lebenslauf-karussell-overlay-icon {
    font-size: 60px;
    line-height: 1;
    display: block;
}

.lebenslauf-karussell-overlay-button-links {
    left: 8px;
}

.lebenslauf-karussell-overlay-button-rechts {
    right: 8px;
}



.lebenslauf-dreifach-ueberlagerung-gesamt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2147483600;


    --karte-breite-px: 300;
    --karte-hoehe-px: 424;
    --side-gap: 24px;

    --mobile-top-height: 20em;
    --mobile-bottom-height: 20em;
    --mobile-gap-top: 16px;
    --mobile-gap-bottom: 16px;
}


.lebenslauf-platzhalter-ueber-aktiver-karte {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--karte-breite-px) * 1px);
    height: calc(var(--karte-hoehe-px) * 1px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Head/Btn werden durch Slide-Head + echten Button abgedeckt;
   hier kein sichtbarer Content nötig – nur Klick-Button bleibt. */
.lebenslauf-platzhalter-head {
    display: none;
}

.lebenslauf-platzhalter-mittelbereich-klickdurchlass {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lebenslauf-karussell-auswaehlen {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 140%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    padding: 0.5em 1em;
    color: #fff;
    background: var(--primary-color);
    cursor: pointer;
    z-index: 3001;
    font-weight: bold;
    border-color: #eee;
    border-radius: 0;
    border-bottom-right-radius: 16px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    white-space: nowrap;
    padding: 10px 20px;
}



/* Desktop: links/rechts – 100% Kartenhöhe; Breite = Restschirm abzüglich Rand.
   Positionen werden von JS gesetzt (left/top/width/height). */
.lebenslauf-informationsbereich-links,
.lebenslauf-informationsbereich-rechts {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    justify-content: center;

    gap: 16px;
    pointer-events: none;

    opacity: 1;
    transition: opacity 420ms ease;
}

.card-top .lebenslauf-informationsbereich-rechts .lebenslauf-info-karte {
    background: linear-gradient(225deg, rgb(230, 0, 104) 10%, #333 100%);

}

.card-top .lebenslauf-informationsbereich-links .lebenslauf-info-karte {
    background: linear-gradient(45deg, rgb(230, 0, 104) 10%, #333 100%);

}

.lebenslauf-informationsbereich-rechts .lebenslauf-info-karte {
    background: linear-gradient(225deg, #666 0%, #333 100%)
}

.lebenslauf-informationsbereich-links .lebenslauf-info-karte {
    background: linear-gradient(45deg, #666 0%, #333 100%)
}

.lebenslauf-info-karte i.fa {
    background: #000;
    padding: 3px 6px;

    font-size: 1.25em;
    border-radius: 4px;
}


@media (max-width: 768px) {

    .lebenslauf-informationsbereich-links,
    .lebenslauf-informationsbereich-rechts {
        left: calc(50% - (var(--karte-breite-px) * 1px)/2);
        width: calc(var(--karte-breite-px) * 1px);
    }

    .card-top .lebenslauf-informationsbereich-links .lebenslauf-info-karte {
        background: linear-gradient(225deg, rgb(230, 0, 104) 10%, #333 100%);

    }

    .card-top .lebenslauf-informationsbereich-rechts .lebenslauf-info-karte {
        background: linear-gradient(45deg, rgb(230, 0, 104) 10%, #333 100%);

    }

}


.lebenslauf-info-karte {
    position: relative;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;

    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    transform: translateZ(0);
    opacity: 1;
    transition: opacity 420ms ease, transform .2s ease;
}

.lebenslauf-info-karte:hover {
    transform: scale(1.05);
}

.lebenslauf-info-karte.ist-versteckt {
    opacity: 0.01;
}


.lebenslauf-karussell-verbinder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2147483647;

    transform: translateZ(9999px);
    opacity: 0;
    transition: opacity 200ms ease;
}


.heading-tag {
    color: #fff;
    padding: 6px 4em 4px 4em;
    border-radius: 0;
    background: linear-gradient(45deg, #000, #216b65, #000);
}

.top.heading-tag {
    background: linear-gradient(45deg, #000, #e60069, #000);
}


.tiles,
.tiles-grey {
    position: relative;
    isolation: isolate;
}

.tiles::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/bg_icon_smi.png");
    background-repeat: space;

    background-position: center;
    background-size: 64px;

    opacity: 0.25;

    pointer-events: none;
    z-index: 0;

}

.tiles-grey::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/bg_icon_smig.png");
    background-repeat: space;

    background-position: center;
    background-size: 64px;

    opacity: 0.25;

    pointer-events: none;
    z-index: 0;

}

.tiles>*,
.tiles-grey>* {
    position: relative;
    z-index: 1;
}

.burger-menu-nav {
    position: relative;
    display: flex;
    align-items: center;
}

.burger-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

/* Menüeinträge als Anker für mehrstufige Dropdowns positionieren. */
.burger-menu-list li {
    position: relative;
}

.burger-menu-list a {
    display: block;
    padding: 6px 10px;
    text-decoration: none;
    color: var(--text-color)
}

/* Untermenüs standardmäßig ausblenden und als Dropdown-Panel vorbereiten. */
.burger-menu-list .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0;
    min-width: 260px;
    width: max-content;
    max-width: calc(100vw - 24px);
    font-size: 13px;
    overflow: visible;
    text-align: left;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    z-index: 20;
}

/* Dropdown-Links bei Platzmangel wortweise umbrechen, nicht zeichenweise. */
.burger-menu-list .sub-menu a {
    padding: 4px 8px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.35;
}

/* Erste Dropdown-Ebene unter dem Hauptpunkt platzieren. */
.burger-menu-list>li>.sub-menu,
.burger-menu-list>li>div.eg-nav-with-children>.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    font-size: 16px;
}

/* Desktop: Erste Ebene explizit nach rechts öffnen. */
.burger-menu-list > li.eg-open-right > .sub-menu,
.burger-menu-list > li > div.eg-nav-with-children.eg-open-right > .sub-menu {
    left: 0;
    right: auto;
}

/* Desktop: Erste Ebene bei Platzmangel nach links öffnen. */
.burger-menu-list > li.eg-open-left > .sub-menu,
.burger-menu-list > li > div.eg-nav-with-children.eg-open-left > .sub-menu {
    left: auto;
    right: 0;
}

/* Dritte Ebene rechts neben der zweiten Ebene platzieren. */
.burger-menu-list .sub-menu .sub-menu.sub-menu-right {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 260px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Desktop: Dritte Ebene explizit nach rechts öffnen. */
.burger-menu-list .sub-menu li.eg-open-right > .sub-menu.sub-menu-right {
    left: 100%;
    right: auto;
}

/* Desktop: Dritte Ebene bei Platzmangel nach links öffnen. */
.burger-menu-list .sub-menu li.eg-open-left > .sub-menu.sub-menu-right {
    left: auto;
    right: 100%;
}

/* Zwischen linker und rechter Ebene eine unsichtbare Hover-Brücke schaffen. */
.burger-menu-list .sub-menu .menu-item-has-children {
    padding-right: 14px;
}

/* Hover-Brücke als aktiver Bereich rechts vom Eintrag ausdehnen. */
.burger-menu-list .sub-menu .menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    width: 14px;
    height: 100%;
}

/* Links öffnende Ebenen bekommen die Hover-Brücke auf der linken Seite. */
.burger-menu-list .sub-menu .menu-item-has-children.eg-open-left {
    padding-right: 0;
    padding-left: 14px;
}

/* Rechtsseitige Hover-Brücke bei links öffnenden Ebenen deaktivieren. */
.burger-menu-list .sub-menu .menu-item-has-children.eg-open-left::after {
    display: none;
}

/* Linke Hover-Brücke für links öffnende Ebenen aktivieren. */
.burger-menu-list .sub-menu .menu-item-has-children.eg-open-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 100%;
}

/* Untermenüs bei Hover oder Fokus innerhalb des Knotens öffnen. Auch für Span-Container innerhalb von LI (Badge-Trennung). */
.burger-menu-list li:hover>.sub-menu,
.burger-menu-list li:focus-within>.sub-menu,
.burger-menu-list div.eg-nav-with-children:hover>.sub-menu,
.burger-menu-list div.eg-nav-with-children:focus-within>.sub-menu {
    display: block;
}


.burger-menu-toggle {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    position: relative;

    margin-left: 8px;

    margin-top: -2px;

    font-size: 24px;

    color: var(--accent-color);

    margin-right: 0;
}

/* Leere Badges immer verstecken, gefuellte per Default anzeigen. */
.eg-fk-badge:empty {
    display: none;
}
.eg-fk-badge:not(:empty) {
    display: inline-block;
}
/* Burger-Badge auf Desktop immer verstecken. */
.burger-menu-nav > .eg-fk-badge {
    display: none;
}

.burger-menu-toggle i {
    pointer-events: none;
}


@media (min-width: 961px) {
    .burger-menu-toggle {
        display: none;
    }


    .burger-menu-list {
        display: flex;
        gap: 20px;
        align-items: center;
    }
}


@media (max-width: 960px) {
    /* Burger-Badge sichtbar neben dem Burger-Icon, Desktop-Badge verstecken. */
    .burger-menu-nav > .eg-fk-badge:not(:empty) {
        display: inline-block;
    }
    .eg-badge-host .eg-fk-badge {
        display: none;
    }

    .burger-menu-list {
        display: none;
        flex-direction: column;
        gap: 0;
    }

    /* Bewerbung-Eintrag im Burger zentriert wie alle anderen darstellen. */
    .burger-menu-list > li.eg-badge-host {
        display: block !important;
        text-align: center;
    }

    .burger-menu-checkbox:checked~.burger-menu-list {
        display: flex;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 8px;
        border-radius: 0;
        min-width: 200px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        text-align: center;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        z-index: 10;
    }

    /* Untermenüs im Burger standardmäßig versteckt, per Tap aufklappbar. */
    .burger-menu-list .sub-menu,
    .burger-menu-list>li>.sub-menu,
    .burger-menu-list>li>div.eg-nav-with-children>.sub-menu,
    .burger-menu-list .sub-menu .sub-menu.sub-menu-right {
        display: none;
        position: static;
        min-width: 0;
        max-height: none;
        overflow: visible;
        margin: 2px 0;
        padding: 2px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Aufgeklapptes Untermenü per Toggle-Klasse anzeigen. */
    .burger-menu-list li.eg-mobile-open > .sub-menu,
    .burger-menu-list div.eg-nav-with-children.eg-mobile-open > .sub-menu,
    .burger-menu-list li.eg-mobile-open > .sub-menu.sub-menu-right {
        display: block;
    }

    /* Hover-basiertes Öffnen im Burger deaktivieren. */
    .burger-menu-list li:hover > .sub-menu,
    .burger-menu-list li:focus-within > .sub-menu,
    .burger-menu-list div.eg-nav-with-children:hover > .sub-menu,
    .burger-menu-list div.eg-nav-with-children:focus-within > .sub-menu {
        display: none;
    }
    .burger-menu-list li.eg-mobile-open:hover > .sub-menu,
    .burger-menu-list div.eg-nav-with-children.eg-mobile-open:hover > .sub-menu {
        display: block;
    }

    /* Chevron im Burger nach unten, bei offenem Menü nach oben rotieren. */
    .burger-menu-list > li.eg-nav-with-children > a::after,
    .burger-menu-list > li > div.eg-nav-with-children > a::after {
        transition: transform 0.2s ease;
    }
    .burger-menu-list > li.eg-nav-with-children.eg-mobile-open > a::after,
    .burger-menu-list > li > div.eg-nav-with-children.eg-mobile-open > a::after {
        transform: rotate(180deg);
    }

    /* Links im Burger-Menü kompakt halten, damit viele Hub-Seiten lesbar bleiben. */
    .burger-menu-list .sub-menu a {
        padding: 5px 8px;
        line-height: 1.35;
        white-space: normal;
    }
}


:root {
    --primary-fire-color: #ffcc33;

    --secondary-fire-color: #ff6633;

    --tertiary-fire-color: #cc0000;

}

.legal-link {
    text-decoration: underline;
    text-decoration-color: #999;

    text-underline-offset: 2px;

    text-decoration-thickness: 1px;

    color: inherit;

}

.softbutton {
    min-width: 100px;
    text-align: center;
    cursor: pointer;
    padding: 1em 0.25em;
}

.softbutton-wrapper {
    display: flex;
    gap: 1em;
    justify-content: center;
    padding: 1em !important;
}


.sticky-wrapper {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 7.5em;

    transition: all 0.5s ease;
    z-index: 1000;
}


.sticky-wrapper.expanded {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
}


.navigation-preview-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;

}


.navigation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
    z-index: 2;

}


.overlay-button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.navigation-title {
    padding: 0 0 0.5em 0;
}

.navigation-preview-container {
    max-height: 100vh;
    overflow-y: auto;
}

.navigation-number {
    font-size: 2em;
    font-weight: bold;
}

.navigation-preview-nav {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;
    position: relative;
}

.navigation-preview-arrow {
    font-size: 3rem;
    background: var(--secondary-color);
    color: #fff;
    padding: 0.25em 0;
    border-radius: 9px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    transition: transform 0.3s ease;
    border: 1px solid var(--primary-color);
    width: 100%;
}

.scroll-hint-text {
    font-size: 0.9rem;
    color: white;
    margin-bottom: 0.3em;
    font-weight: bold;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes arrow-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(var(--bounce-distance, 10px));
    }
}

.animate-arrow {
    color: white !important;
    animation: arrow-bounce 2s infinite;
}

.blink {
    animation: blink 0.75s infinite;
}

.navigation-preview-item {
    background: white;
    aspect-ratio: 1 / 1;

    min-width: 7em;
    padding: 0.25em;
    text-align: center;
    cursor: pointer;
    border: 5px solid transparent;
    font-size: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navigation-preview-item.active {
    border-color: var(--secondary-color);
}

.highlighted {
    outline: 4px solid var(--secondary-color);
}

#doc_manager_editor_preview span {
    display: inline-block;
}

.extra-info {
    margin-top: 1em;
    background: var(--background-color);
    padding: 0.5em;
    color: #333;
    text-align: center;
    line-height: 1.5em;
    box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px
}

.helpdesk-phone {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 0.5em;
}

.p1min,
.p2min {
    background-color: var(--error-color);
    color: #000;
    padding: 1px 12px 1px 12px;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    width: 5em;
}

.download_free {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.editor_caption {
    margin: 2em 0 1em 0.5em;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.close-text-editor {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background: var(--text-color);
    color: var(--background-color);
    border-radius: 6px;
    width: 1em;
    height: 1em;
    font-size: 1.5em;
    cursor: pointer;
}

.frage {
    margin: 1em 0.5em 1em 0.5em;
    line-height: 1.5em;
    color: var(--secondary-color);
    font-weight: bold;
}

#fragen-container p {
    margin: 0.5em;
}

.frage_robot {
    max-width: 10em;
    height: auto;
}

.preview_coach ul {
    font-weight: bold;
}

.preview_coach ol {
    font-weight: normal;
}

.preview_coach ol,
.preview_coach ul {
    padding: 1em 1em 0 1em;
}

.preview_coach li {
    padding: 0.5em 0 0 0;
}

.bold-underline {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 3px;

    text-underline-offset: 2px;

}

.underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;

    text-underline-offset: 2px;

}

.underline.thick {
    text-decoration-thickness: 2px;
}

.fetch_status_flex-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

.fetch_status_status-item {
    width: 120px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background: #f9f9f9;
}

.fetch_status_icon {
    font-size: 50px;
    margin-bottom: 10px;
}

.fetch_status_name {
    font-weight: bold;
    margin-bottom: 5px;
}

.fetch_status_duration {
    font-size: 16px;
    color: #555;
}


.inline-flame {
    display: inline-block;
    font-size: 2em;

    background: linear-gradient(0deg, var(--tertiary-fire-color), var(--secondary-fire-color), var(--primary-fire-color));
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: flameGradient 1s infinite alternate ease-in-out, flameHeight 1s infinite ease-in-out;
    transform-origin: bottom center;

    vertical-align: bottom;

}


@keyframes flameGradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}


@keyframes flameHeight {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.85);

    }

    100% {
        transform: scaleY(1);
    }
}

.triangle-badge-small::after {
    content: '\f005';
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    right: 3px;
    color: white;
    font-size: 12px;
    z-index: 2;
}

.triangle-badge-small::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 30px solid var(--secondary-color);
    border-left: 30px solid transparent;
    z-index: 1;
}

.round-image {
    max-width: 15em;

    max-height: 15em;

    border-radius: 50%;

    object-fit: cover;


}

.form-label {
    display: flex;
    align-items: center;
}

.form-icon {
    background: var(--primary-color);
    padding: 6px;
    float: left;
    margin-right: 1em;
    color: white;
    border-radius: 6px;
    width: 1em;
    text-align: center;
}

.sl {
    list-style: none;
    padding-left: 0;
    margin: 1.5em 0 2em 0;
}

.sl li {
    position: relative;
    padding-left: 1.2em;

    margin-top: 0.5em;
}

.sl ul li::before {
    content: "–";

    position: absolute;
    left: 0;
    top: 0;
}

.testimonial {
    flex: 1;

    max-width: 350px;
    padding: 30px;
    background: #f9f9f9;
    background: var(--background-color);
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 0 0 15px 0;
    box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px rgba(180, 220, 240, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial .pic {
    width: 10em;
    height: 10em;
    border-radius: 50%;
    margin-bottom: 1.5em;
}

.testimonial-content {
    text-align: left;
}

.statement {
    font-size: 1rem;
    font-style: italic;
    margin-bottom: 10px;
}

.name {
    font-weight: normal;
    color: #333;
}



@media (max-width: 768px) {
    .sticky-wrapper {
        width: 6em;
    }

    .softbutton {
        min-width: unset;
        scale: 0.9;
        padding: 1em !important;
    }

    .softbutton-wrapper {
        /*gap: 0;
            justify-content: left;
            */
        padding: 1em !important;
    }

    .navigation-preview-item {
        font-size: 9px;
    }

    .testimonials-headlines {
        text-align: center;
    }

    .testimonials-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .testimonial {
        text-align: left;
        align-items: center;
    }

    .testimonial img {
        margin-right: 15px;
        margin-bottom: 0;
    }

    .testimonial-content {
        text-align: left;
    }
}

.multi-image {
    display: inline-flex;
    align-items: flex-end;
}

.multi-image img {
    max-width: 350px;
}

.multi-image .front {
    z-index: 200;
}

.multi-image .back {
    z-index: 100;
}

.multi-image .secondary {
    margin-left: -35%;
}

.multi-image .smaller {
    scale: 0.8;
    transform-origin: bottom;
}

.multi-image .larger {
    scale: 1.2;
    transform-origin: bottom;
}

.center-container {
    display: flex;

    justify-content: center;
    align-items: center;
    position: relative;

}

.video {
    max-width: 768px;

    width: 100%;

}

.play-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

    width: 120px;

    height: 120px;

    background-color: rgba(230, 0, 104, 0.8);

    z-index: 10;

    cursor: pointer;
    opacity: 1;

    transition: opacity 0.3s ease;

}

.play-button::before {
    content: '';

    display: block;
    width: 0;

    height: 0;

    border-style: solid;

    border-width: 18px 0 18px 30px;

    border-color: transparent transparent transparent white;

    position: absolute;

    left: 50%;

    top: 50%;

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

}

.play-button.hidden {
    opacity: 0;

    pointer-events: none;

}

.video {
    max-width: 100%;
    width: 100%;
}

.card-icon {
    border: 1px solid #333;
    border-bottom-right-radius: 9px;
    padding: 0.25em;
    color: #999;
}

div.product-category {
    font-family: 'Montserrat' !important;
    color: #fff;
    background-color: #216b65;
    margin: 2em 0 1em 0;
    padding: 0.25em 0 0.25em;
    box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4),

        inset 0 5px 8px -5px rgba(0, 0, 0, 0.4);
    background: linear-gradient(45deg, #fff, #000, #fff);
}

h3.product-detail {
    text-align: center;
    font: inherit;
}

.card-icon-small {
    border: 1px solid #fff;
    border-bottom-right-radius: 6px;
    padding: 0.25em;
    color: #fff;
}

.data_notice {
    width: 100%;
    min-height: 2em;
    margin: 1em 1em 1em 1em;
    text-align: center;
    color: #999;
    line-height: 1.5em;
}

li.info-circle {
    list-style: none;

    position: relative;

    padding-left: 25px;

}

li.info-circle::before {
    content: "\f05a";

    font-family: "FontAwesome";

    position: absolute;
    left: 0;

    top: 10px;
    transform: translateY(-50%);

    font-size: 14px;

    color: #007bff;

}

.save_notice {
    width: 100%;
    border-radius: 6px;
    padding: 6px 12px 6px 12px;
    border: 1px solid var(--text-color);


}

.link-to-button,
.rate-button,
.rate-button-checkout {
    font-size: .8em;
    background-color: var(--accent-color);
    font-weight: bold;
    display: inline-block;
    color: white;
    cursor: pointer;
    border-radius: 6px;

    padding: 10px 15px;
    text-transform: uppercase;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
}

.helpdesk-image {
    aspect-ratio: 4 / 3;
    width: 80%;
    height: auto;
}

td.helpdesk {
    display: flex;
    justify-content: center;
}

.lebenslauf_tipp {
    line-height: 1.75em;
    background-color: #fff;
    padding: 1em;
    border-radius: 8px;
}

.tab-hint {
    padding: 0.1em 0.25em 0.15em 0.25em;
    border: 1px solid var(--primary-color);
    color: #fff;
    border-radius: 3px;
    background: var(--primary-color);
    margin: 0 0.25em 0 0.25em;
    white-space: nowrap;
}


.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}


.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);

    border-top: 5px solid #fff;

    border-radius: 50%;
    animation: spin 1s linear infinite;
}


button[disabled] {
    background-color: #ccc;

    color: #888;

    cursor: not-allowed;

    opacity: 0.7;

}






.flat-gauge {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;

    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;

    box-sizing: border-box;

    height: 27px;
    position: relative;
    overflow: visible;

}





.flat-scale {
    position: absolute;
    inset: 0;
    display: flex;
    box-sizing: border-box;
}

.flat-scale-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.flat-scale-label {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    opacity: .8;
    color: #333;
    margin-bottom: 4px;
    font-family: "Open Sans";
    height: 100%;
    padding: 0 1em;
}

.flat-scale-line {
    width: 1px;
    height: 66%;

    background: red;
    align-self: end;
}

.area-low {
    background-color: #ddd;
}

.area-ok {
    background-color: #fff;
}

.area-high {
    background-color: greenyellow;
}




.flat-needle {
    width: 7px;
    height: 22px;
    background: var(--secondary-color);

    border-top-left-radius: 100%;
    border-top-right-radius: 5px;

    position: absolute;
    bottom: -4px;
    left: 0;

    transform: translateX(var(--position, 0px));
    transform-origin: bottom center;

    transition: transform 1s ease-in-out;
    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}

.flat-needle.pendulum {
    animation: flat-pendulum 1s infinite;
}

@keyframes flat-pendulum {
    0% {
        transform: translateX(calc(var(--position, 0px) - 5px));
    }

    50% {
        transform: translateX(calc(var(--position, 0px) + 5px));
    }

    100% {
        transform: translateX(calc(var(--position, 0px) - 5px));
    }
}


.gauge_limit-outer {
    position: absolute;

    height: 100%;

}

.gauge_limit-inner {
    text-align: left;
    position: relative;
    border-left: 4px solid var(--secondary-color);

    width: 100px;
    height: 70px;
    margin-top: 0.2em;
    margin-left: 7.9em;
    transform: rotate(28deg);
    z-index: 100;
}

.tab-hint-active {
    background-color: #ddd;
    color: #333;
    font-weight: bold;
    padding: 0.1em 0.25em 0.15em 0.25em;
    border: 1 px solid #ddd
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bubble {
    position: absolute;
    background-color: var(--gold-2);
    color: #333;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 5px;
    white-space: normal;

    overflow-wrap: break-word;

    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    top: unset;

    left: 0;

}

.bubble::after {
    content: '';
    position: absolute;
    top: 100%;

    left: 10px;

    border-width: 8px;

    border-style: solid;
    border-color: var(--gold-2) transparent transparent transparent;

}

.close-icon {
    position: absolute;

    top: 5px;

    right: 5px;

    margin-left: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.close-icon:hover {
    opacity: 1;
}









.cv-base table.ht {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.cv-base table.st {
    width: 100%;
    border-collapse: collapse;
}

.cv-base td.ht {
    vertical-align: top;
    border-collapse: collapse;
}

.cv-base td.ht-ml {
    vertical-align: top;
    border-collapse: collapse;
}

.cv-base .spacer-left {
    margin-left: 0.25em;
}

.cv-base h1 {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14pt;
    padding: 0 !important;
    margin: 0 !important;
}

.cv-base h2 {
    padding: 3px 0 3px 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10pt;
    font-weight: normal;
    margin-bottom: 1em;
}

.cv-base .liste {
    text-transform: uppercase;
    color: #999;
    font-weight: bold;
}

.cv-base .liste-accent {
    font-family: 'Crimson Text', serif;
    font-size: 12pt;
    line-height: 1.25em;
}

.cv-base .spacer-xl-top {
    margin-top: 2em;
}

.cv-base .spacer-xl-bottom {
    margin-bottom: 2em;
}

.cv-base td,
.cv-base h2 {
    font-family: 'Open Sans', sans-serif;
}

.cv-base .cv-section {
    margin-bottom: 2em !important;
}

.cv-base .cv-detail {
    margin-bottom: 1em;
}

.cv-base ul {
    list-style: none;
    padding: 0;
}

.cv-base li {
    padding: 0.2em 0 0 1em;
    position: relative;
}

.cv-base ul li::before {
    content: "–";
    position: absolute;
    left: 0;
}

.Xklassisch div.chapter {
    padding-left: 1em;
}

.cv-base td {
    font-size: 9pt;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    vertical-align: top;
}

.cv-base td.subtable-value {
    font-size: 9pt;

    text-transform: uppercase;
}

.cv-base td.subtable-icon {
    vertical-align: top;
}

.cv-base .font-secondary {
    font-family: 'Crimson Text', serif;
    font-weight: bold;
    font-size: 1.5em;
}

.cv-base table {
    width: 100%;
}

.cv-base .subtable {
    height: 100%;
}

.cv-base .cv-table-wrapper {
    width: 2em;

    vertical-align: top;
    height: 100%;
}

.cv-base .cv-inner-table {
    height: auto;

    box-sizing: border-box;

    height: 100%;
}

.cv-base .cv-circle-cell {
    color: #666;
    line-height: 0.5em;
    padding-top: 0.5em;
    height: 1%;
}

.cv-base .cv-empty-cell {

    empty-cells: show;
    width: 0.29em;

    height: 99%;
}

.cv-base td.arbeitgeber {
    padding-top: 0.5em;
    line-height: 0.5em;
}

.cv-base td.arbeitgeber-website {
    padding-top: 0;
}

.cv-base td.arbeitgeber-aufgaben {
    padding-top: 0.75em;
}

.cv-base .cv-border-cell {
    height: 99% !important;
    border-left: 1px solid #666;
}

.cv-base .cv-content-cell {
    height: 1%;
    vertical-align: top;
}


.cv-base .skill {
    display: inline-block;
    width: 1.2em;

    height: 0.3em;

    background: #444;

    border: 2px solid #444;
    vertical-align: middle;

}

.cv-base .skill-o {
    display: inline-block;
    width: 1.4em;
    height: 0.5em;
    border: 1px solid #444;
    background: transparent;
    vertical-align: middle;
}


.cv-base .editor_preview_photo_container {
    aspect-ratio: 1 / 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}











.keon h2 {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    color: #666;
}

.keon .cv-header {
    margin-bottom: 1.5em;
}

.keon .head-right {
    text-align: right;
}

.keon .contact-line {
    font-size: 9pt;
    text-transform: none;
}

.keon .place {
    text-align: right;
    white-space: nowrap;
}





.keon .parent {
    width: 100%;
}

.keon .parent::after {
    content: "";
    display: block;
    clear: both;
}

.keon .parent .subdiv {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-right: 16px;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
}

.keon .parent .subdiv .value {
    margin-left: auto;
    white-space: nowrap;
    text-align: right;
}

.keon .parent [style*="font-size"] {
    font-size: inherit !important;
}



.keon .cv-section h2 {
    border: 0;
    border-bottom: 1px solid #666;
    padding: 3px 0 !important;

    margin: 0 0 1em 0;
    text-align: left;
}


.maren td.ht-ml {
    padding-left: 2em;
}

.maren h2 {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    color: #666;
}


.solin td.ht {
    height: 82em;
}

.solin td.ht-ml {
    padding: 1em 1em 1em 1em;
    background-color: #eee;
}

.solin h2 {
    background: #666;
    color: #fff;
}

.solin .editor_preview_photo_container {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0%;
    margin-left: 2em;
    margin-right: 2em;
}


.aven td.ht {
    height: 82em;
    border-right: 1px soild #ccc;
    padding-right: 2em;
}

.aven td.ht-ml {
    padding: 0em 1em 1em 1em;
    background-color: #fff;
}

.aven h2 {
    border-bottom: 1px solid #ccc;
}

.aven .editor_preview_photo_container {
    background-color: #eee;
    border: 0;
    border-radius: 0%;
    margin-left: 0em;

    width: 100%;
}


.rilo td.ht {
    height: 82em;
    border-right: 0px solid #ccc;
    padding-right: 2em;
}

.rilo td.ht-ml {
    padding: 1em 1em 1em 1em;
    background-color: #fff;
}

.rilo h2 {
    background: #eee;


}

.rilo .editor_preview_photo_container {
    background-color: #eee;
    border: 0;
    border-radius: 0%;
    margin-left: 0em;

    width: 100%;
}


.taro td.ht {
    height: 82em;
    border-right: 0px solid #ccc;
    padding-right: 2em;
}

.taro td.ht-ml {
    padding: 1em 1em 1em 1em;
    background-color: #e8e8e8;
}

.taro h2 {
    border-bottom: 1px solid #ccc;
}

.taro .editor_preview_photo_container {
    background-color: #eee;
    border: 0;
    border-radius: 50%;
    margin-left: 1em;
    margin-right: 1em;

}


.klassisch3 td.ht {
    height: 82em;
    border-right: 1px solid #ccc;
    padding-right: 2em;
}

.klassisch3 td.ht-ml {
    padding: 1em 1em 1em 1em;
    background-color: #e8e8e8;
}

.klassisch3 h2 {
    border-bottom: 1px solid #ccc;
}

.klassisch3 .editor_preview_photo_container {
    background-color: #eee;
    border: 0;
    border-radius: 50%;
    margin-left: 1em;
    margin-right: 1em;

}




.heller {
    color: #999;
}

.spacer-left {
    margin-left: 0.25em;
}

.doc_manager_thumbnail {
    flex: 1 1 calc(33.33% - 10px);

    max-width: 120px;

    aspect-ratio: 1 / 1.414;

    padding: 1em 0.5em;

    box-sizing: border-box;

    background-color: #f9f9f9;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}

.div_main_document_container {
    width: 100%;
    justify-content: center;
}

.div_main_document_container_inner {
    width: 100%;
}

.ql-toolbar.ql-snow {
    border: 1px dashed #666 !important;
    border-radius: 6px;
    padding: 0.75em !important;
}

.ql-container.ql-snow {
    border: 0 !important;
    padding: 1em 0;
}

.doc_manager_thumbnail_large {
    flex: 1 1 100%;

    aspect-ratio: 1 / 1.414;

    padding: 8% 13%;

    box-sizing: border-box;

    background-color: #f9f9f9;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}

.doc_manager_thumbnail img {
    object-fit: fill;
    /*max-height: 100% !important;
    width: 200% !important;*/
}


.doc_manager_new {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-size: 0.8em;
}


.doc_manager_new>i {
    margin-bottom: 0.25em;
    color: #999;
}

.test {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 2.6rem;
    color: #1F251F;
    word-break: break-word;
}

body {
    margin: 0;
    margin-top: 3em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400 !important;
    background-color: var(--background-color);
    accent-color: var(--primary-color);
    color: var(--text-color);
}

.text_editor_preview_buttons {
    width: 100%;
}

.doc_manager_text_editor_container {
    width: 100%;
}

.doc_manager_text_editor_preview {
    box-sizing: border-box;
    border-radius: 12px;
    padding: 5% 10%;
    border: 1px solid #ccc;
    width: 100%;
    background: var(--background-color);
    min-height: 20em;
}

.doc_manager_editor_controls {
    padding-right: 1em;
    max-width: 33%;
    min-width: 24em;
    overflow: auto;
    padding-bottom: 2em;
    box-sizing: border-box;
}

.text_editor_preview_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}


.editor-category_container {
    padding: 1em 0 0 0;
}


.editor-record {
    display: flex;
    flex-direction: row;

    align-items: flex-start;

    padding: 1em 0 0 0;
}

.editor-record_multi {
    border-top: 1px solid var(--primary-color);
    margin-top: 1em;
}


.editor-field_row {
    display: flex;
    flex-direction: row;

    width: 100%;
}


.editor-field {
    margin-right: 8px;
}


.editor-drag_handle {
    display: inline-block;
    padding: 5px;
    background-color: var(--background-color);

    color: #333;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 0.75em;
    align-self: flex-start;

}


.editor-main_field_container {
    display: flex;
    align-items: center;

}


.editor-chevron_container {
    cursor: pointer;
    margin-right: 8px;
    align-self: flex-start;

}


.editor-delete_record_btn {
    margin-left: 10px;
    align-self: flex-start;

}

.editor-add_record_btn {
    margin-top: 1em;
    align-self: flex-start;
    width: 100%;

}

.editor-help_icon {
    position: relative;

    cursor: pointer;
}


.editor-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);

    color: #fff;
    padding: 1em;

    border-radius: 4px;
    font-size: 0.85em;
    z-index: 999;
    white-space: normal;

    display: inline-block;
    top: 100%;

    left: 0;

    margin-top: 10px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    word-wrap: break-word;

    transform: translateX(-10px);

    z-index: 999;
}


.editor-help_icon {
    margin-left: 5px;
    cursor: pointer;
}


.editor-top_controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.editor-field_display_container.collapsed {
    display: none;
}

.editor-field input {
    margin-top: 0.25em;
}

.editor-row {
    display: flex;
    width: 100%;
    flex-direction: column;

}

.editor-nav_button {
    width: 100%;
}

.editor-field_wrapper {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 10px;
    width: 100%;
    margin-top: 0em;
}

.editor-category_container button {
    background-color: var(--text-color);
}

.editor-toggle_optional_silent,
.editor-nav_button {
    background-color: #999 !important;
    color: var(--background-color) !important;
}


.editor-header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white;
    padding: 0.25em 1em;
    margin-bottom: 1em;

}

.editor-header_container_collapsed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 8px 8px 8px #cbced1, -8px -8px 8px white;
    padding: 0.25em 1em;
}

.editor-header {
    flex: 1;
    cursor: pointer;
}

.editor-chevron {
    cursor: pointer;
    margin-left: 10px;
    padding: 5px;
}


.editor_photo_container {
    display: flex;
    justify-content: center;

    align-items: center;

    margin-top: 10px;

}


.editor_photo_wrapper {
    display: flex;
    align-items: center;
    position: relative;

}


.editor_photo_upload_field {
    width: 150px;

    height: 150px;
    background-color: #f0f0f0;

    border: 2px solid #ccc;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;

}

.editor_preview_photo_container {

    aspect-ratio: 1 / 1;

    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-left: 2em;
    margin-right: 2em;
}


.editor_photo_placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;

    background-position: center;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.editor_photo_placeholder i {
    font-size: 75px;

    color: #aaa;

}

.editor_preview_photo_container i {
    font-size: 8em;

    color: #aaa;

}

.editor_preview_foto {
    background-position: center;
    background-repeat: no-repeat;
}


.editor_photo_delete_button {
    width: 40px;

    height: 40px;
    background-color: var(--text-color);

    border: none;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;

    right: -50px;

    top: 50%;

    transform: translateY(-50%);
}

.editor_photo_delete_button i {
    font-size: 20px;

    color: #fff;

}


.collapsed {
    display: none;
}

.div_success {
    margin: 0.5em 0 1em 0;
    text-align: center;
}

#success_1 {
    font-size: 1em;
    font-weight: bold;
}

.ql-editor {
    font-size: 18px;
    font-family: Nunito;
}

.doc_manager_text_editor_preview,
#doc_manager_text_editor .ql-editor {
    font-size: 18px;
    font-family: "Open Sans";
}

.ql-editor ul ul li::before {
    font-size: 1.5em;
    line-height: 0.5;
    vertical-align: top;
    margin-right: 0.2em;
    margin-top: 0.15em;
}


.ql-editor ul {
    line-height: 1.2;
    padding-left: 1em;

}

.ql-editor ul li {
    margin-left: -1em;

}







.form-category {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
}

.handle {
    cursor: move;
    color: #888;
}

.grid-container.allowed-drop {
    cursor: move;
}

.grid-container.not-allowed-drop {
    cursor: not-allowed;
}

.highlight-eco {
    background-color: var(--accent-color);
    color: white;
    font-weight: bold !important;
    white-space: nowrap;
    padding: 0px 8px;
    border-radius: 4px;
}

.highlight-top {
    background-color: var(--secondary-color);
    color: white;
    font-weight: bold !important;
    white-space: nowrap;
    padding: 0px 8px;
    border-radius: 4px;
}


.triangle-badge {
    position: relative;
}


.triangle-badge::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 44px solid var(--secondary-color);
    border-left: 44px solid transparent;
    z-index: 1;
}


.triangle-badge::after {
    content: '\f005';

    font-family: FontAwesome;

    position: absolute;
    top: 4px;
    right: 5px;
    color: white;

    font-size: 18px;
    z-index: 2;

}

#section-slider .tab_container {
    box-shadow: 0 0 24px rgba(180, 220, 240, 1);
    margin: 0 0 -20px 0;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
}

#section-slider .slider-tab {
    width: 100%;
    flex: 1;
    padding-right: 1em;
    padding-left: 1em;
    align-self: end;


}

#section-slider .slider-tab.active {
    padding-bottom: 0px;
    border-left: 1px solid silver;
    border-right: 1px solid silver;

}

#section-slider .slider-tab:not(.active) .img {
    filter: saturate(60%)
}

#section-slider .slider-tab.active td.text h2 {
    font-weight: bold;
}

#section-slider .slider-tab:not(.active) td.text h2 {
    font-weight: normal;
}

#section-slider table {
    border-collapse: collapse;
    border: 0;
    margin-right: 1em;
    padding-right: 1em;

}

#section-slider .slider-tab:not(.active) {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 50%), white;
}

#section-slider .slider-tab.active {
    background: white;
}

#section-slider .img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 0 12px rgba(180, 220, 240, 1);
    margin: 6px;
}

#section-slider .img1 {
    position: absolute;
    width: 240px;
    height: auto;
    top: -15px;
    left: -30px;
    rotate: -7deg;

}

#section-slider .img2 {
    position: absolute;
    width: 240px;
    height: auto;
    top: -12px;
    left: -115px;
    rotate: 5deg;
}

#section-slider .img3 {
    position: absolute;
    width: 240px;
    height: auto;
    left: -80px;
    top: -5px;
}

#section-slider td {
    vertical-align: middle;

}

#section-slider h2 {
    line-height: 1.15em;
    font-size: 1.25em;
}

#section-slider td.text {
    padding-left: 10px;
    line-height: 0.75em;
}

#section-slider .tab_container-tab.active {
    color: #333;

    font-weight: bold !important;
    box-shadow: none;

}

#section-slider .tab_container-tab:not(.active) {
    background-color: rgb(0, 94, 255);

}

#section-slider .tab_container-tab:not(.active)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    pointer-events: none;
}

#section-slider .tab_container-tab.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;

    pointer-events: none;
}

.tab_container {
    margin-top: -4em;
    display: flex;
    flex-wrap: wrap;
}

.tab_container-tab {
    font-family: 'Montserrat' !important;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 0.75em;
    flex: 1;
    white-space: nowrap;

    cursor: pointer;
    font-weight: normal !important;
    position: relative;

}

.tab_container-tab.active {
    color: #333;

    font-weight: bold !important;
    box-shadow: none;

}

.tab_container-tab:not(.active) {
    background-color: rgb(0, 94, 255);

}

.tab_container-tab:not(.active)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.tab_container-tab.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;

    pointer-events: none;
}


.doc_manager_document_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;



}

.cat-documents .doc_manager_document_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: center !important;
    justify-content: space-between;
}


.doc_manager_document_item {
    width: 360px;



    box-sizing: border-box;
}


.doc_manager_content_container {
    display: flex;
    align-items: center;
    padding: 4px;

}


.doc_manager_content_container_large {
    position: relative;
    align-items: center;
    overflow: hidden;
}

ul.teaser {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    padding: 0;
    margin-bottom: 1em;
}

ul.teaser li {
    background: #fff;
    color: #666;

    border-radius: 2px;
    margin-bottom: 0.25em;
    padding-right: 0.5em;
    box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1), inset 0 5px 8px -5px rgba(180, 220, 240, 1);
    white-space: nowrap;
}

.teaser_icon {
    width: 1em;
    text-align: center;
    margin: 0 0.25em 0 -1px;
    border-radius: 4px;
    background: var(--secondary-color);
    color: #fff;
    padding: 4px;
}

.teaser_icon_eco {
    width: 1em;
    text-align: center;
    margin: 0 0.25em 0 -1px;
    border-radius: 4px;
    background: var(--accent-color);
    color: #fff;
    padding: 4px;
}

/* Ziel: Standardtitel im Teaser immer sichtbar halten, solange kein KI-Lebenslauf-Marker aktiv ist. */
.kaufen-teaser-title-default {
    display: inline;
}

/* Ziel: KI-Lebenslauf-Titel standardmäßig ausblenden und nur markerbasiert einblenden. */
.kaufen-teaser-title-kilebenslauf {
    display: none;
}

/* Ziel: Marker "KI-Lebenslauf" blendet Standardtitel aus, damit kein falscher Pakettext sichtbar ist. */
.doc_manager_content_container_large.marker_kilebenslauf .kaufen-teaser-title-default {
    display: none;
}

/* Ziel: Marker "KI-Lebenslauf" zeigt den passenden Titel an. */
.doc_manager_content_container_large.marker_kilebenslauf .kaufen-teaser-title-kilebenslauf {
    display: inline;
}

/* Ziel: Beim KI-Lebenslauf die nur für Anschreiben gedachten Teaserpunkte ausblenden. */
.doc_manager_content_container_large.marker_kilebenslauf .kaufen-teaser-item-default {
    display: none;
}

.doc_manager_document_item_large {
    width: 100%;
}



@media (min-width: 1024px) {
    .cat-documents .doc_manager_document_grid {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        align-items: unset;
    }

    .cat-documents .doc_manager_document_item_large {

        width: 60%;
    }

    .doc_manager_document_item_large {

        width: 48%;
    }
}

.doc_manager_document_info_preview_open,
.doc_manager_document_info_large_mini {
    position: absolute;
    top: 1em;
    left: 50%;
    transform: translate(-50%, 1em);
    z-index: 2;
    border-radius: 5px;
    padding: 0.25em 1em;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.doc_manager_document_info_large {
    min-width: 275px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;


}

.assist_preview .entry {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    box-shadow: 0 12px 24px rgba(69, 69, 69, 0.8);
    transform: translateX(-50%);
}

.doc_manager_thumbnail_large {
    flex-shrink: 0;
    width: 100%;

    position: relative;
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 8px;

    overflow: hidden;
    cursor: pointer;

    display: inline-block;


}

.noevents {

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    pointer-events: none;
}

.noselect {

    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}


.doc_manager_thumbnail,
.doc_manager_thumbnail_placeholder {
    flex-shrink: 0;
    width: 120px;
    height: 169px;

    position: relative;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 6px;

    overflow: hidden;
    cursor: pointer;
}


.doc_manager_new_document_item .doc_manager_thumbnail_placeholder {
    border: 2px dashed #ccc;
    border-radius: 6px;
}

.doc_manager_thumbnail_placeholder::before {
    content: '';
    display: block;
    padding-top: 141.42%;

}


.doc_manager_thumbnail_plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 48px;

    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.doc_manager_thumbnail_plus i {
    font-size: 24px;
    color: #fff;
}


.doc_manager_document_info,
.doc_manager_document_info_preview {
    flex-grow: 1;
    padding-left: 10px;
    box-sizing: border-box;
}


.doc_manager_document_info_preview .doc_manager_document_name {
    font-weight: normal;
    margin: 0;
}


.doc_manager_document_info_preview .doc_manager_document_typ {
    font-weight: bold;
    margin: 0;
}

.doc_manager_document_info .doc_manager_document_name {
    font-weight: bold;
    margin: 0;
}

.doc_manager_document_info .doc_manager_document_typ {
    font-weight: normal;
    margin: 0;
}


.doc_manager_document_timestamp {
    font-size: 0.9em;
    color: #666;
    margin: 5px 0;
}


.doc_manager_document_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


.doc_manager_document_actions a {
    flex: 1 1 auto;
    text-decoration: none;
    color: var(--text-color);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;

}


.doc_manager_document_actions button.primary-button {
    width: 100%;

    margin-top: 5px;

}


.doc_manager_document_actions a i,
.doc_manager_document_actions button i {
    margin-right: 5px;
}

.doc_manager_editor_controls_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    gap: 1rem;

}

.doc_manager_editor_preview {
    background-color: #fff;
    border-radius: 12px;
    padding: 2em;
    border: 1px solid #ccc;

}


@media (min-width: 768px) {



    .doc_manager_small {
        display: none !important;
    }

    .doc_manager_large {
        display: inherit !important;
    }

    .doc_manager_editor_controls {
        flex: 0 0 33%;
    }

    .doc_manager_editor_preview {
        background: var(--background-color);
        min-height: 20em;
    }

    .doc_manager_editor_preview_container {
        flex: 1;
        overflow: hidden;
    }
}

@media (max-width: 767px) {

    .assist_preview {
        border-radius: 6px;
        margin: 0 2em;
    }

    .assist_preview .anschreiben {
        margin: unset;

    }

    .assist_preview .entry {
        top: 1%;
        position: relative;
        border-radius: 0;
    }

    .assist_preview.startbox-assist-preview .entry {
        top: 25%;
    }

    @keyframes arrow-bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(var(--bounce-distance, 10px));
        }
    }

    .doc_manager_small {
        display: inherit !important;
    }

    .doc_manager_large {
        display: none !important;
    }

    .doc_manager_editor_controls {
        order: 2;
        width: 100%;
        max-width: unset !important;
    }

    .doc_manager_editor_preview_container {
        order: 1;
        width: 100%;
    }

    .doc_manager_editor_preview {
        background: var(--background-color);
        min-height: 20em;
    }

    #section-slider .slider-tab.active {
        order: 1;
    }

    .tab_container-tab.active {
        order: 1;
    }

}


.doc_manager_create_button {
    margin-top: 10px;
}


#doc_manager_sorting_bar {
    margin-bottom: 20px;
    justify-content: center;
}

.doc_manager_sort_button {
    background-color: transparent;
    padding: 2px 6px;
    border: 1px solid var(--text-color);
    font: inherit;
    cursor: pointer;
    margin-right: 10px;
    color: #333;
}

.doc_manager_sort_button i {
    margin-left: 5px;
}


#doc_manager_editor_controls .doc_manager_editor_controls_container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#doc_manager_editor_controls #doc_manager_document_name_input {
    flex-grow: 1;
}

#doc_manager_editor_controls .doc_manager_editor_controls_buttons {
    display: flex;
    gap: 5px;
    margin-top: 1em;
}

#doc_manager_editor_controls .doc_manager_editor_controls_buttons button {
    flex-shrink: 0;
}


button {
    display: inline-block;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;

}


button .fa-plus {
    background-color: #fff;
    color: var(--primary-color);
    border-radius: 50%;
    padding: 5px;
}

h1,
h2,
h3,
h4,
button {
    font-family: Montserrat;
}

input,
textarea,
select {
    font-family: Nunito !important;
}


:root {
    --background-color: #fff;
    --text-color: #333;
    --primary-color: #005eff;
    --accent-color: #216b65;
    --secondary-color: #e60068;
    --error-color: #ffa91f;
    ;

    /*
    --gauge-color-1: #E84C3D;
    --gauge-color-2: #e67e22;
    --gauge-color-3: #f1c40f;
    --gauge-color-4: #9baa1e;
    --gauge-color-5: #1eaa59;
    */

    --gauge-color-1: #aaa;
    --gauge-color-2: #fff;
    --gauge-color-3: #fff;
    --gauge-color-4: #216b65;
    --gauge-color-5: #216b65;
}

.people-container {
    display: flex;
    justify-content: space-between;
}

.people-box {
    text-align: center;
    align-content: center;
}

a.hotline {

    color: white !important;
    font-family: Nunito;
    font-weight: bold;
    text-decoration: none;

}

li.hotline {
    background: var(--accent-color);
    padding: 5px 10px;
    border-bottom-right-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.hspecials {
    display: flex;
    align-items: center;
    gap: 10px;

    list-style-type: none;
    padding: 0;
    margin: 0;
}

.hspecials li {
    display: inline-block;
}

.hspecials li.hspecials-hide {
    display: inline-block;
}

a.hr {
    font-family: Nunito;
    color: var(--background-color) !important;
    font-weight: bold;
}

li.hr {
    background-color: var(--secondary-color);
    padding: 5px 10px;
}


@media (max-width: 768px) {
    .hspecials {
        flex-direction: column;
        gap: 5px;

    }

    .hspecials li.hspecials-hide {
        display: none;

    }

    .hspecials li {
        width: 100%;

        text-align: center;

    }

    li.hr {
        padding: 2px 10px;
    }

    li.hotline {
        padding: 2px 10px;
    }
}

.theater {
    padding: 20px 0 60px 0;
}

.centered_notice {
    width: 100%;
    height: 10em;
    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

}

section.bye {
    box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4), inset 0 5px 8px -5px rgba(0, 0, 0, 0.4);
    margin-bottom: -4em;
    background: linear-gradient(45deg, #000, #216b65, #000);
    padding: 20px !important;

}

h1,
h2,
h3,
h4,
section,
div {
    scroll-margin-top: 60px;
}


#content h1 {
    margin-top: 0;
}

.bye-container {


    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    gap: 20px;

}

.bye-box {
    flex: 1 1 calc(50% - 20px);

    max-width: calc(50% - 20px);

    background: linear-gradient(30deg, #ffffff, #eeeeee);
    border-bottom-right-radius: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.bye-box-pulse {
    background-color: #ffcc00;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulse 3.7s ease-out infinite;
    animation-delay: 0s;
    animation-delay: 1s;
}

.bye-box-hover-zoom:hover {
    transform: scale(1.05);
}

.bye-box-content {
    display: flex;
    padding: 20px;
    flex-wrap: wrap;

}

.bye-image-container {
    flex: 1;
    width: 33.333%;
    padding-right: 10px;
}

.pr {
    padding-right: 10px;
}

.pl {
    padding-left: 10px;
}

.bye-image-container {
    flex: 1;
    width: 33.333%;
}

.bye-image-container img {
    width: 100%;
    height: auto;
}

.bye-text-container {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bye-text-container h2 {
    margin: 0;
    font-size: 1.5em;
}

.bye-text-container p {
    margin: 0;
    color: #555;
}

@media (max-width: 768px) {
    .bye-box {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .bye-box-content {
        flex-direction: column;

    }

    .bye-image-container,
    .bye-text-container {
        width: 100%;

    }

    .pl {
        padding-top: 12px;
        padding-left: 0;
    }

    .hl-imagecard-title {}
}

.codeModal-input {
    height: 50px !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    border-radius: 0 !important;
    border: 1px solid #333 !important;
    padding: 4px !important;
    margin: 0 1px;
}


.blockquote {
    margin: 3em 0 3em 0;
    padding: 20px 40px 20px;
    position: relative;
    background-color: var(--background-color);
    border-radius: 1em;
}

.blockquote p {
    font-family: "Merriweather";
    font-size: 1.25em;
    font-weight: normal;
    font-style: italic;
    text-align: center;
    padding-top: 1em;
    color: var(--accent-color)
}

.blockquote:before {
    position: absolute;
    font-family: 'FontAwesome';
    font-style: italic;
    top: 10;
    content: "\f10d";
    font-size: 3em;
    color: var(--accent-color);

}

.report-procon-image-container img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%);

}

.report-procon-column h3 {
    background-color: #333;
    color: #fff;
    padding: 0 12px;
    margin: -20px -20px 20px -20px;

    position: relative;

    box-shadow: 5px 5px 10px rgba(180, 220, 240, 0.5);

}

.report-procon-column ul {
    list-style: none;
    padding: 0;
}

.report-procon-column ul li {
    margin: 5px 0;
}

.report-procon-pro ul li:before {
    content: "\f058";

    font-family: FontAwesome;
    color: var(--accent-color);
    margin-right: 10px;
}

.report-procon-contra ul li:before {
    content: "\f057";

    font-family: FontAwesome;
    color: var(--secondary-color);
    margin-right: 10px;
}

@media (max-width: 768px) {}

img.teaser-image {
    width: 75%;
    height: auto;
}

.button-inverse {
    background-color: var(--background-color);
    color: #333;
    padding: 0 12px 0 12px;
    margin-right: 6px;
    border-bottom-right-radius: 6px;
    font-weight: normal;
}

.version-info {
    float: right;
    font-size: 12px;
    color: #aaa;
}

.legal p {
    margin: 0.75em 0;
}

.uni-container {
    display: block;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;


}

.uni-box-colorful {
    border-radius: 6px;
    color: var(--background-color);
    padding: 20px;
    line-height: 1.5em;
}

.uni-box-1 {
    flex: 1;

}

.uni-box-2 {
    flex: 0;

}



@media (max-width: 600px) {
    .uni-container {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 10px;


    }

    .uni-box {
        text-align: center;
        padding: 20px;
    }
}

.wrapper {
    display: flex;
    margin: 0 auto;


    border-radius: 6px;

}

.heart {
    margin: 0 8px;
    display: inline-block;
    animation: simplePulse ease-in-out 1.1s infinite;
}

.gauge {
    font-family: Arial, Helvetica, sans-serif;
    background: #e7e7e7;
    border-top: 2px solid #ccc;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    position: relative;
    overflow: hidden;

    -webkit-transform-style: flat;
    -webkit-transform: translateZ(0px);
}

.gauge.min-scaled {
    transform: scale(0.5);
}

.gauge-center {
    content: '';
    color: #fff;
    width: 60%;
    height: 60%;
    background: #15222E;
    border-radius: 100px 100px 0 0;
    position: absolute;
    box-shadow: 0 -13px 15px -10px rgba(0, 0, 0, 0.28);
    right: 21%;
    bottom: 0;
    color: #fff;
}

.gauge-center::before {
    content: 'Qualität';
    font-size: 1em;
    width: 100%;
    padding: 18px 0 0 0;
    text-align: center;
    float: left;
    -webkit-font-smoothing: antialiased;
}

.gauge-center::after {
    content: 'Anschreiben';
    width: 100%;
    float: left;
    opacitY: .6;
    text-align: center;
}

.needle,
.needle2 {
    width: 78px;
    height: 7px;
    background: #15222E;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 5px;
    position: absolute;
    bottom: 4px;
    left: 20px;
    transform-origin: 100% 4px;
    transform: rotate(0deg);
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.38);
    transition: transform 1s ease-in-out;
}

.needle.pendulum,
.needle2.pendulum {
    animation: pendulum 1s infinite;
}

@keyframes pendulum {
    0% {
        transform: rotate(calc(var(--rotation) - 5deg));
    }

    50% {
        transform: rotate(calc(var(--rotation) + 5deg));
    }

    100% {
        transform: rotate(calc(var(--rotation) - 5deg));
    }
}

.slice-colors .st {
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 0;
    border-bottom: 80px solid #000;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.slice-colors .st.slice-item:nth-child(1) {

    border-bottom-color: var(--gauge-color-1);

    left: -2px;
}

.slice-colors .st.slice-item:nth-child(2) {
    border-bottom-color: var(--gauge-color-2);
    transform: rotate(135deg);
    transform-origin: right;
    top: 12px;
    left: -65px;
}

.slice-colors .st.slice-item:nth-child(3) {
    border-bottom-color: var(--gauge-color-3);
    transform: rotate(179deg);
    transform-origin: right;
    top: -20px;
    left: -62px;
    border-bottom-width: 90px;
    border-left-width: 45px;
    border-right-width: 45px;
    width: 18px;
}

.slice-colors .st.slice-item:nth-child(4) {
    border-bottom-color: var(--gauge-color-4);

    transform: rotate(219deg);
    transform-origin: right;
    top: -23px;
    left: 43px;
}

.slice-colors .st.slice-item:nth-child(5) {
    border-bottom-color: var(--gauge-color-5);
    transform: rotate(240deg);
    transform-origin: right;
    right: 52px;
}

@-webkit-keyframes speed {
    0% {
        transform: rotate(0);
    }

    40% {
        transform: rotate(90deg);
    }

    55% {
        transform: rotate(80deg);
    }

    75% {
        transform: rotate(90deg);
    }
}

@-webkit-keyframes simplePulse {
    from {
        opacity: .4;
    }

    to {
        opacity: .98;
    }
}

.slide_bewerbung,
.slide_lebenslauf {
    cursor: pointer;
}

.cta-row a,
#section-slider a,
#section-products a {

    text-decoration: none;
    color: inherit;

}

.article h2,
.article h3,
.article h4 {

    margin: 4em 1em 0 0;
    font-family: Merriweather;

}

.article a {

    color: var(--accent-color) !important;


}

.article p {
    margin-top: 2em;
    line-height: 1.8em;

}

.article .left {
    display: inline-block;
    width: 70%;
    text-align: left;
}

.article .right {
    display: inline-block;
    width: 30%;
    text-align: right;
}

.article .left-footer {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

.article .price-card {
    max-width: unset;
}

.article .right-footer {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

@keyframes pulse {

    0%,
    20% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1);
    }

    90%,
    100% {
        transform: scale(1.01);
    }
}

.pulse {
    animation: pulse 3.7s ease-out infinite;
    animation-delay: 1s;
}

.flag-icon {
    width: 20px;
    height: 15px;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 6px;
    scale: 0.8;
}

.flag-icon-de {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23cc2b1d%22 d=%22M1 11H31V21H1z%22%3E%3C/path%3E%3Cpath d=%22M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z%22%3E%3C/path%3E%3Cpath d=%22M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 16 24)%22 fill=%22%23f8d147%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E');
}

.flag-icon-gb {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Crect x=%221%22 y=%224%22 width=%2230%22 height=%2224%22 rx=%224%22 ry=%224%22 fill=%22%23071b65%22%3E%3C/rect%3E%3Cpath d=%22M5.101,4h-.101c-1.981,0-3.615,1.444-3.933,3.334L26.899,28h.101c1.981,0,3.615-1.444,3.933-3.334L5.101,4Z%22 fill=%22%23fff%22%3E%3C/path%3E%3Cpath d=%22M22.25,19h-2.5l9.934,7.947c.387-.353,.704-.777,.929-1.257l-8.363-6.691Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M1.387,6.309l8.363,6.691h2.5L2.316,5.053c-.387,.353-.704,.777-.929,1.257Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M5,28h.101L30.933,7.334c-.318-1.891-1.952-3.334-3.933-3.334h-.101L1.067,24.666c.318,1.891,1.952,3.334,3.933,3.334Z%22 fill=%22%23fff%22%3E%3C/path%3E%3Crect x=%2213%22 y=%224%22 width=%226%22 height=%2224%22 fill=%22%23fff%22%3E%3C/rect%3E%3Crect x=%221%22 y=%2213%22 width=%2230%22 height=%226%22 fill=%22%23fff%22%3E%3C/rect%3E%3Crect x=%2214%22 y=%224%22 width=%224%22 height=%2224%22 fill=%22%23b92932%22%3E%3C/rect%3E%3Crect x=%2214%22 y=%221%22 width=%224%22 height=%2230%22 transform=%22translate(32) rotate(90)%22 fill=%22%23b92932%22%3E%3C/rect%3E%3Cpath d=%22M28.222,4.21l-9.222,7.376v1.414h.75l9.943-7.94c-.419-.384-.918-.671-1.471-.85Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M2.328,26.957c.414,.374,.904,.656,1.447,.832l9.225-7.38v-1.408h-.75L2.328,26.957Z%22 fill=%22%23b92932%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E');
}

.flag-icon-us {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Crect x=%221%22 y=%224%22 width=%2230%22 height=%2224%22 rx=%224%22 ry=%224%22 fill=%22%23fff%22%3E%3C/rect%3E%3Cpath d=%22M1.638,5.846H30.362c-.711-1.108-1.947-1.846-3.362-1.846H5c-1.414,0-2.65,.738-3.362,1.846Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M2.03,7.692c-.008,.103-.03,.202-.03,.308v1.539H31v-1.539c0-.105-.022-.204-.03-.308H2.03Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M2 11.385H31V13.231H2z%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M2 15.077H31V16.923H2z%22%3E%3C/path%3E%3Cpath fill=%22%23a62842%22 d=%22M1 18.769H31V20.615H1z%22%3E%3C/path%3E%3Cpath d=%22M1,24c0,.105,.023,.204,.031,.308H30.969c.008-.103,.031-.202,.031-.308v-1.539H1v1.539Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M30.362,26.154H1.638c.711,1.108,1.947,1.846,3.362,1.846H27c1.414,0,2.65-.738,3.362-1.846Z%22 fill=%22%23a62842%22%3E%3C/path%3E%3Cpath d=%22M5,4h11v12.923H1V8c0-2.208,1.792-4,4-4Z%22 fill=%22%23102d5e%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 7.463L5.193 7.033 4.462 7.033 4.236 6.338 4.01 7.033 3.279 7.033 3.87 7.463 3.644 8.158 4.236 7.729 4.827 8.158 4.601 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 7.463L8.172 7.033 7.441 7.033 7.215 6.338 6.989 7.033 6.258 7.033 6.849 7.463 6.623 8.158 7.215 7.729 7.806 8.158 7.58 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 7.463L11.151 7.033 10.42 7.033 10.194 6.338 9.968 7.033 9.237 7.033 9.828 7.463 9.603 8.158 10.194 7.729 10.785 8.158 10.56 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M6.066 9.283L6.658 8.854 5.927 8.854 5.701 8.158 5.475 8.854 4.744 8.854 5.335 9.283 5.109 9.979 5.701 9.549 6.292 9.979 6.066 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M9.046 9.283L9.637 8.854 8.906 8.854 8.68 8.158 8.454 8.854 7.723 8.854 8.314 9.283 8.089 9.979 8.68 9.549 9.271 9.979 9.046 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M12.025 9.283L12.616 8.854 11.885 8.854 11.659 8.158 11.433 8.854 10.702 8.854 11.294 9.283 11.068 9.979 11.659 9.549 12.251 9.979 12.025 9.283z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M6.066 12.924L6.658 12.494 5.927 12.494 5.701 11.799 5.475 12.494 4.744 12.494 5.335 12.924 5.109 13.619 5.701 13.19 6.292 13.619 6.066 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M9.046 12.924L9.637 12.494 8.906 12.494 8.68 11.799 8.454 12.494 7.723 12.494 8.314 12.924 8.089 13.619 8.68 13.19 9.271 13.619 9.046 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M12.025 12.924L12.616 12.494 11.885 12.494 11.659 11.799 11.433 12.494 10.702 12.494 11.294 12.924 11.068 13.619 11.659 13.19 12.251 13.619 12.025 12.924z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 7.463L14.13 7.033 13.399 7.033 13.173 6.338 12.947 7.033 12.216 7.033 12.808 7.463 12.582 8.158 13.173 7.729 13.765 8.158 13.539 7.463z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 11.104L5.193 10.674 4.462 10.674 4.236 9.979 4.01 10.674 3.279 10.674 3.87 11.104 3.644 11.799 4.236 11.369 4.827 11.799 4.601 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 11.104L8.172 10.674 7.441 10.674 7.215 9.979 6.989 10.674 6.258 10.674 6.849 11.104 6.623 11.799 7.215 11.369 7.806 11.799 7.58 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 11.104L11.151 10.674 10.42 10.674 10.194 9.979 9.968 10.674 9.237 10.674 9.828 11.104 9.603 11.799 10.194 11.369 10.785 11.799 10.56 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 11.104L14.13 10.674 13.399 10.674 13.173 9.979 12.947 10.674 12.216 10.674 12.808 11.104 12.582 11.799 13.173 11.369 13.765 11.799 13.539 11.104z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M4.601 14.744L5.193 14.315 4.462 14.315 4.236 13.619 4.01 14.315 3.279 14.315 3.87 14.744 3.644 15.44 4.236 15.01 4.827 15.44 4.601 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M7.58 14.744L8.172 14.315 7.441 14.315 7.215 13.619 6.989 14.315 6.258 14.315 6.849 14.744 6.623 15.44 7.215 15.01 7.806 15.44 7.58 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M10.56 14.744L11.151 14.315 10.42 14.315 10.194 13.619 9.968 14.315 9.237 14.315 9.828 14.744 9.603 15.44 10.194 15.01 10.785 15.44 10.56 14.744z%22%3E%3C/path%3E%3Cpath fill=%22%23fff%22 d=%22M13.539 14.744L14.13 14.315 13.399 14.315 13.173 13.619 12.947 14.315 12.216 14.315 12.808 14.744 12.582 15.44 13.173 15.01 13.765 15.44 13.539 14.744z%22%3E%3C/path%3E%3C/svg%3E');
}

.flag-icon-fr {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23fff%22 d=%22M10 4H22V28H10z%22%3E%3C/path%3E%3Cpath d=%22M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 fill=%22%23092050%22%3E%3C/path%3E%3Cpath d=%22M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 26 16)%22 fill=%22%23be2a2c%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E');
}

.flag-icon-it {
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath fill=%22%23fff%22 d=%22M10 4H22V28H10z%22%3E%3C/path%3E%3Cpath d=%22M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 fill=%22%2341914d%22%3E%3C/path%3E%3Cpath d=%22M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z%22 transform=%22rotate(180 26 16)%22 fill=%22%23bf393b%22%3E%3C/path%3E%3Cpath d=%22M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z%22 opacity=%22.15%22%3E%3C/path%3E%3Cpath d=%22M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z%22 fill=%22%23fff%22 opacity=%22.2%22%3E%3C/path%3E%3C/svg%3E');
}


.hint-area ul ul {
    margin-left: 2em;
    background-color: var(--background-color);
    border-radius: 6px;
    padding: 0.5em;
    border-radius: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #555;
    padding: 8px 24px;
    margin: 4px;
    box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4), inset 0 5px 4px -5px rgba(0, 0, 0, 0.4);
}

.hint-area ul {
    margin-top: 1em;
}

.hint-area ul>li {
    margin-top: 0.75em;
}

.hint-area ul>li ul li {
    margin-top: 0.25em;
}

p {
    margin: 0;
    line-height: 1.4;
}

.table-container {
    display: block;
    margin: 1em auto;
}

.flex-table:first-of-type .flex-row {
    background: #666;
    color: white;


}

.first {
    font-weight: bold;
}

.flag-icon {
    margin: -1px 0 0 0;
}

.flex-table {
    display: flex;
    flex-flow: row wrap;
    transition: 0.5s;
}

.flex-table.row:nth-child(odd) .flex-row {
    background: #ddd;
}

.flex-table:hover {
    background: #F5F5F5;
    transition: 500ms;
}

.flex-row {
    box-sizing: border-box;
    width: calc(100% / 3);
    text-align: center;
    vertical-align: middle;
    padding: 0.5em 0.5em;
}

.logo-text {
    max-height: 1em;
    vertical-align: sub;
    background: white;
    padding-left: 2px;
    margin-right: 0.25em;
    width: auto;
}

.comp-headline {
    color: white !important;
    background-color: #333 !important;
}

.bkicm {
    color: var(--accent-color);
    margin-bottom: .5em;
}

.rowspan {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
}

.column {
    display: flex;
    flex-flow: column wrap;
    width: 75%;
    padding: 0;
}

.column .flex-row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 0;
    border: 0;

}

.column .flex-row:hover {
    background: #F5F5F5;
    transition: 500ms;
}

.dti-iv {
    height: 3em;
    width: 3em;
    margin-top: 1em;
    border: 1px solid #999;

    border-bottom-right-radius: 1em;
    padding: 0.5em;
    background: linear-gradient(30deg, #ccc, #fff, #ccc);
    fill: #999;
    background: var(--background-color);
    border: 1px solid #ddd;
    border-radius: 0 0 15px 0;
    box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1),

        inset 0 5px 8px -5px rgba(180, 220, 240, 1);
}

.svg-button {
    border: 0;
    background: none;
    cursor: pointer;

}

.button-preview-nav.preview-active {
    background-color: var(--text-color) !important;
    color: white !important;
}

.button-preview-nav {
    background-color: white;
    color: var(--text-color);
    cursor: pointer;
    border: 0;
    padding: 6px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
}

.button-slider-cta {
    background-color: var(--primary-color);
    color: white !important;
    /*
    color: var(--primary-color) !important;
    cursor: pointer;
    */
    border: 0;
    padding: 6px 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
    border-radius: 6px;
    font-size: 14px;
    border: 2px solid var(--primary-color);
}

i.link-slider-cta {
    transform: scaleY(-1);
    display: inline-block;
    margin-top: -6px;
    color: var(--primary-color);
}

a.link-slider-cta span {
    font-weight: normal;
    color: var(--primary-color);
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.button-primary {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    border: 0;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
}

.kaufen_form .button-primary {
    background-color: var(--secondary-color);
    color: var(--background-color);
    font-family: inherit;
}

.kaufen_form a {
    color: var(--background-color);
}

.button-document-actions {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    border: 0;
    margin-top: 6px;
    padding: 10px 15px;
    font-weight: bold;
    font-family: inherit;
    box-shadow: unset !important;
}

button.silent {
    background: none;
    color: var(--text-color);
    cursor: pointer;
    border: 1px solid var(--text-color);
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
}

.kaufen_form button.silent {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: inherit;
    border: 1px solid var(--background-color);
}

button.download_wait {
    background-color: var(--background-color);
    border: 4px dashed var(--error-color);
    color: #333;
}

.mute {
    background-color: var(--text-color);
    font-weight: normal;
}

.label {
    padding-left: 24px;
}

label {
    line-height: 1.5em;
}

.full-width {
    box-sizing: border-box;
    width: 100%;
}

.form-area {
    position: relative;
    padding: 20px 6px;
    box-sizing: border-box;
}

td.plz {
    max-width: 5em;
}

input.plz {
    text-align: center;
}

.kaufen_form label {
    line-height: 1em;
}

.kaufen_form textarea,
.kaufen_form select,
.kaufen_form input:not([type]),
.kaufen_form input[type=text],
.kaufen_form input[type=email] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: #fff;
    padding: 0 6px 0 6px;
    font-size: 16px;
    border-radius: 3px;
    box-shadow: unset !important;

    border: 0px;
    width: 100%;
    border: 1px solid var(--secondary-color)
}

textarea,
select,
input:not([type]),
input[type=text],
input[type=email] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: #fff;
    padding: 5px 10px 5px 10px;
    font-size: 18px;
    border-radius: 6px;
    box-shadow: inset 3px 3px 3px #cbced1, inset -6px -6px 6px #fff;
    border: 0px;
    width: 100%;
    border: 1px solid var(--primary-color)
}

textarea {
    padding: 20px;
}

#checkout {
    min-height: 27em;
}

.spickzettel {
    display: inline-block;
    font-weight: bold;
    border: 1px solid #000;
    border-bottom-right-radius: 0.5em;
    color: e60068;
    padding: 0 8px;
    margin: 0.25em 0.25em 0 0.25em;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.5);

}

.small {
    font-size: 12px;
}

.center {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.right {
    float: right;
}

.left {
    float: left;
}

.checkout-nav {
    height: 2em;
}

.mobile-show {
    display: none;
}

.mobile-hide {
    display: inline-block;
}

.tablet-hide {
    display: none;
}

.desktop-show {
    display: none;
}

h2,
h3 {
    padding: 0;
    margin: 0;
    line-height: 1.5em;
}

li div {
    flex-grow: 1;

    white-space: normal;

}

.flex {
    display: flex;
}

ul {
    list-style: none;

    padding: 0;

    margin: 0;

}

ol {
    list-style: decimal !important;
    padding-left: 1em !important;
    margin: 0 !important;
}

ol>li {
    padding-left: 0 !important;
}


ol>li[data-list="bullet"] {
    list-style: none !important;
    margin-left: -1em !important;
}

ol>li[data-list="bullet"] {
    list-style: none !important;

}

ol>li[data-list="bullet"]::before {
    content: "–";
}



div.price-card ul li {
    display: flex;

    align-items: flex-start;

    padding: 6px 10px;

    white-space: nowrap;

}

div.price-card.eco-flex ul li i.fa-check-circle {
    color: var(--accent-color);

}

li i {
    margin-top: 2px;

    flex-shrink: 0;

}

.image-half-width {
    max-width: 50%;
}

.link {
    text-decoration: none;
    hyphens: auto;
    color: inherit;
}

.spacer-right {
    padding-right: 12px;
}

.free {
    background: linear-gradient(30deg, #fff, #e2f3ff, #fff);
    padding: 1em;
    flex: 1 1 0px;
}

.landing-kostenlos .pricing-overview .pricing-table,
.landing-lebenslauf .pricing-overview .pricing-table {

    grid-template-columns: 1fr 1fr 1fr;
}

.landing-kostenlos.no-eco .pricing-overview .pricing-table,
.landing-lebenslauf.no-eco .pricing-overview .pricing-table {

    grid-template-columns: 1fr 1fr;
}

.landing-bewerbung .pricing-overview .pricing-table {

    grid-template-columns: 1fr 1fr;
}

/* 
LANDING KOSTENLOS
LINKE KARTEN 
*/

.landing-kostenlos #card-eco-bewerbung,
.landing-kostenlos #overview-card-eco-bewerbung {
    align-self: end;
    justify-self: end;
}

.landing-kostenlos #card-eco-lebenslauf,
.landing-kostenlos #overview-card-eco-lebenslauf {
    align-self: start;
    justify-self: end;
}

.landing-bewerbung .price-card:nth-child(3) {
    align-self: end;
    justify-self: end;
}

.landing-bewerbung #overview-card-top-single {
    grid-column: 2;
    align-self: center;
    justify-self: start;
}

.landing-lebenslauf .price-card:nth-child(3) {
    align-self: end;
    justify-self: end;
}

.landing-lebenslauf #overview-card-top-single {
    align-self: center;
    justify-self: start;
}

.landing-lebenslauf.no-eco #overview-card-top-single {
    align-self: center;
    justify-self: start;
    grid-column: 2;
}


.landing-kostenlos #overview-card-top-single {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-kostenlos #overview-card-top-package {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-kostenlos.no-eco #overview-card-top-single {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
}

.landing-kostenlos.no-eco #overview-card-top-package {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-bewerbung #card-top-lebenslauf {
    align-self: center;
    justify-self: end;
}

.landing-bewerbung .price-card:nth-child(2) {
    align-self: start;
    justify-self: end;
}


.landing-bewerbung .pricing-overview .price-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-lebenslauf .price-card:nth-child(1) {
    align-self: end;
    justify-self: end;
}

.landing-lebenslauf #card-eco-lebenslauf {
    align-self: center;
    justify-self: end;
}


.landing-lebenslauf .pricing-overview .price-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-kostenlos .pricing-table {
    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap: 20px;
    justify-content: center;

    align-items: center;

    width: 100%;
}

.landing-kostenlos.no-eco .pricing-table {
    grid-template-columns: 1fr;
}

.landing-bewerbung .pricing-table {
    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap: 20px;
    justify-content: center;

    align-items: center;

    width: 100%;
}

.landing-lebenslauf .pricing-table {
    display: grid;
    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto auto;

    gap: 20px;
    justify-content: center;

    align-items: center;

    width: 100%;
}

.landing-lebenslauf.no-eco .pricing-table {
    display: grid;
    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

    gap: 20px;
    justify-content: center;

    align-items: center;

    width: 100%;
}

.landing-kostenlos #card-top-bewerbung {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
}

.landing-bewerbung #card-top-bewerbung {
    grid-column: 2;
    align-self: center;
    justify-self: start;
}

.landing-kostenlos.no-eco #card-top-bewerbung {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
}

.landing-kostenlos #overview-card-top-package {

    justify-self: center;

}

.landing-kostenlos.no-eco .price-card:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: start;
}

.landing-kostenlos.no-eco #overview-card-top-package {

    justify-self: end;

}

.landing-bewerbung .price-card:nth-child(3) {
    grid-column: 1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;
}

.landing-bewerbung .pricing-overview .price-card:nth-child(2) {

    grid-column: 1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;
}

.landing-bewerbung .pricing-overview #overview-card-top-package {

    grid-column: 1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;/
}

.landing-lebenslauf #card-top-lebenslauf {
    grid-column: 2;
    align-self: center;
    justify-self: start;
}

.landing-lebenslauf.no-eco #card-top-lebenslauf {
    grid-column: 1;
    align-self: center;
    justify-self: center;
}

.landing-lebenslauf .pricing-overview .price-card:nth-child(2) {

    grid-column: 1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;
}

.landing-lebenslauf .pricing-overview #overview-card-top-package {

    grid-column: 2;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: start;/
}

.landing-lebenslauf.no-eco .pricing-overview #overview-card-top-package {

    grid-column: 1;
    grid-row: 1 / 2;
    align-self: center;
    justify-self: end;/
}

.price-card {
    width: 80%;
    background: var(--background-color);
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 0 0 15px 0;
    /*box-shadow: inset 5px 0 8px -5px rgba(180, 220, 240, 1),
            inset 0 5px 8px -5px rgba(180, 220, 240, 1);*/
    padding: 20px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: s_packe-between;
    justify-self: center;

    box-shadow: 0 6px 16px rgb(180, 220, 240);
}

.price-card h2 {
    text-align: center;
    color: var(--text-color);
}

.price-card ul {
    list-style: none;
    padding: 0;
}

.price-card li {
    padding: 6px 10px;
    background-color: var(--background-color);
}

.price-card li:nth-child(even) {
    background-color: #eee;
}

.tc-opts ul {
    list-style: none;
    padding: 0;
}

.tc-opts li {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 10px;
}

.tc-opts .odd {
    background-color: #eee;
}

.price-card .fa-icon {
    color: #555;
    margin-right: 10px;
}

.price-footer {
    font-size: 1.2em;
    text-align: center;
    margin-top: 20px;
}

.price-footer span {
    font-size: 0.8em;
}

.ap-upload-wrapper {
    background: rgba(255, 255, 255, 1);
    padding: 6px;
    border-radius: 2px;
}

.ap-upload-area {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 1.2em;
    border: 2px dashed var(--primary-color);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    font-family: Nunito;
    color: #333;
}

.ap-upload-area:hover {
    border-color: #666;
    background: #f8f8f8;
}

.ap-upload-area.dragover {
    border-color: #0073e6;
    background: #eef6ff;
}

.ap-upload-text {
    font-weight: normal;
}


.site-header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: all 0.3s ease;

}

.site-header.scrolled {
    height: 60px;

    background-color: #f8f8f8;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}

.container {
    padding-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 30px;
    width: auto;
}

.header-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.header-nav li {
    margin-left: 20px;
}

.header-nav a {
    text-decoration: none;
    color: var(--text-color);
}

#bottom-footer {
    margin-top: 5em;
    padding: 20px;
    background: linear-gradient(30deg, #000, #333, #666);
    box-sizing: border-box;
}

.footer-links {
    white-space: nowrap;
    margin: 0.5em;
    line-height: 2em;
}

#bottom-footer .copyright-text {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

#bottom-footer a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.text-block {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex !important;
    justify-content: center;
    align-items: end;
}

#scroll-up {
    background-color: var(--primary-color);
    border-radius: 3px;
    bottom: 20px;
    color: #fff;
    display: none;
    padding: 10px 16px;
    position: fixed;
    opacity: 0.5;
    z-index: 9999;
    filter: alpha(opacity=50);
    right: 20px;
}

.swiper-button-next,
.swiper-button-prev {
    box-sizing: border-box;
    top: var(--swiper-navigation-top-offset, 60%) !important;

}

.swiper {
    width: 100%;
    height: 100%;
    background-color: #fff;
    ;
}

.swiper-slide h3 {
    margin: 1em 0 1em 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: var(--background-color);
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 50px 0 50px 0;

}

.swiper-pagination {
    position: relative !important;
    margin-top: -70px;
}

.autoplay-progress {
    position: relative;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary-color);
    float: right;
    margin: -24px 0 0 -30px;
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--primary-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}


.slide {
    display: flex;
    justify-content: space-between;

    align-items: center;
    flex-wrap: nowrap;

    width: 90%;
}

.text-block-content {

    flex: 2;
    text-align: left;
}

.text-block-image {
    flex: 1;
}

.ll-preview {

    transform: rotate(-10deg);


    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);


    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 50%;
    padding: 1em;
}

.text-content {

    flex: 1;
    text-align: left;
    padding-left: 80px;
}

.text-content-vv {

    flex: 1;
    text-align: left;
    padding-right: 80px;
}

.image-content {
    flex: 1;
    padding-right: 80px;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    display: flex;
}

.image-content-vv {
    flex: 1;
    padding-left: 0px;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    display: flex;
}

.slider-image {
    width: 100%;

    height: auto;

}


.tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}


.tab {
    flex: 1 1 auto;

    padding: 10px 0 10px 10px;
    margin: 2px;
    background-color: var(--background-color);
    color: var(--text-color);
    text-align: left;
    font-weight: normal;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);

    box-shadow:
        inset 5px 0 8px -5px rgba(0, 0, 0, 0.4),

        inset 0 5px 8px -5px rgba(0, 0, 0, 0.4);

}


.tab-number {
    float: left;

    min-width: 1.5em;
    color: white;
    background-color: var(--text-color);
    border-bottom-right-radius: 5px;

    text-align: center;
    margin-right: 0.5em;
    font-weight: bold;
}


.tab.active {
    font-weight: bold;
    color: var(--text-color);
}


.tab.active .tab-number {
    background-color: var(--accent-color);
    font-weight: bold;
}

.generator-headline {
    font-family: 'Montserrat' !important;
    color: #fff;
    background-color: #216b65;
    padding: 10px 20px;
    box-shadow: inset 5px 0 8px -5px rgba(0, 0, 0, 0.4),

        inset 0 5px 8px -5px rgba(0, 0, 0, 0.4);
    margin-bottom: 0.75em;
    background: linear-gradient(45deg, #000, #216b65, #000);
}

.radius {
    border-bottom-right-radius: 16px;
}

section {
    padding: 4em 20px;
    margin-top: 5em;
    box-sizing: border-box;
}

/* Hub-Seiten: Erste Section direkt unter dem Header kompakt halten. */
.eg-hub-page705 > section:first-of-type {
    margin-top: 1em !important;
    padding-top: 1em !important;
}

.info.section-slider-spacing {
    padding: 0;
    margin: 2em 0 5em 0;
}

.best-option {
    width: 100%;
    background-color: var(--text-color);
    color: white;
    text-align: center;
    padding: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

.white {

    background-color: #ddd;
    background: linear-gradient(-45deg, white 0%, #ddd 25%, white 100%);


    box-shadow: 0 12px 24px rgba(220, 220, 220, 1);
    border-top: 1px solid #eee;
}

.grey {
    background-color: #ddd;
    background: linear-gradient(90deg, #fff 10%, #ddd 60%, #fff 90%);


    box-shadow: 0 12px 24px rgba(180, 220, 240, 1);

}

.bold {
    font-weight: bold;
}

.hint-area {
    border-radius: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #555;

    padding: 8px 24px;
    box-shadow: inset 5px 0 4px -5px rgba(0, 0, 0, 0.4),

        inset 0 5px 4px -5px rgba(0, 0, 0, 0.4);
}

.fe {
    border-bottom: 6px solid var(--error-color) !important;
}


.fep {
    border: 2px solid var(--error-color) !important;


}

.fehler {


    border: 6px solid var(--error-color);
    text-align: center;
    padding: 1.25rem;
    margin: 2rem auto;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;


}

.fehler_alt {

    border: 6px solid var(--error-color);
    border-radius: 12px;
    padding: 12px;
    margin: 4px;
    color: white;
    margin: 8px 0 8px 0;

}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
}

.cta-row .btn {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .8em 1.1em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
}


.btn-accent {
    background: #fff;
    color: #111;
    border-color: #111;
}

.cta-sep {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    opacity: .7;
}

@media (max-width:640px) {
    .cta-row {
        flex-direction: column;

        align-items: center;

        justify-content: center;

    }

    .cta-row .btn {
        width: 100%;
        max-width: 320px;

        justify-content: center;

    }

    .cta-sep {
        display: none;

    }
}




.chevron-heading {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 20px;
    margin: 36px 0 24px 0;
}


.chevron-icon::before {
    position: absolute;
    left: 0;
    font-size: 16px;
    transition: transform 0.3s ease;
    color: var(--primary-color);
    margin-top: -13px;
}


.content {
    display: none;
    padding: 6px 20px;
}


.chevron-heading.active .chevron-icon::before {
    transform: rotate(180deg);

}

.radio-wrapper input[type="radio"] {
    transform: scale(1.1);

    appearance: none;
    width: 20px;
    height: 20px;
    box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px white;
    border-radius: 50%;

    position: relative;
    background: #fff;
    border: 2px solid var(--primary-color);
}

.radio-wrapper input[type="checkbox"] {
    transform: scale(1.1);

    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    position: relative;
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.kaufen_form .radio-wrapper input[type="checkbox"]:checked,
.kaufen_form .radio-wrapper input[type="checkbox"],
.kaufen_form .radio-wrapper input[type="radio"] {
    box-shadow: unset;
    border: 2px solid var(--secondary-color);
}

.kaufen_form .radio-wrapper {
    margin-right: 4px;
}

.kaufen_form .radio-wrapper input[type="checkbox"]:checked {
    background-color: var(--secondary-color);
}

.radio-wrapper input[type="checkbox"]:checked {
    box-shadow: unset;
    background: var(--primary-color);
}

.radio-wrapper input[type="checkbox"] {
    box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px white;
    background: #fff;
}


input[type="checkbox"]:checked::before {
    content: '';
    width: 5px;
    height: 10px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    top: 0px;
    left: 4px;
    transform: rotate(45deg);
}


input[type="radio"]:checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);

    border-radius: 50%;

    position: absolute;
    top: 3px;
    left: 3px;
}

.radio-container {
    display: flex;
    align-items: flex-start;
}

.radio-wrapper {
    margin-right: 20px;

}

.text-area-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.25em;
    flex-grow: 1;

}

.a {
    padding: 10px;
}

.spacer-lg-top {
    margin-top: 12px;
}

.spacer-xl-top {
    margin-top: 24px;
}

.spacer-top {
    margin-top: 6px;
}

.spacer-xl-bottom {
    margin-bottom: 24px;
}

.spacer-lg-bottom {
    margin-bottom: 12px;
}

.spacer-bottom {
    margin-bottom: 6px;
}

.black {
    color: var(--text-color);
}

#progressBar {
    width: 90%;
    margin-left: 5%;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    position: relative;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

#progress {
    width: 0;
    height: 30px;
    background: repeating-linear-gradient(-45deg,
            #ffffff,
            #ffffff 10px,
            #216b65 10px,
            #216b65 20px);
    text-align: center;
    line-height: 30px;
    color: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) inset;
}

#percentage {
    font-size: 1.5em;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    line-height: 30px;
    z-index: 2;
    width: 5em;
    background: linear-gradient(to right, transparent, white 1em, rgba(255, 255, 255, 0.8) 2em, rgba(255, 255, 255, 0.8) 3em, white 4em, transparent 5em);
    padding: 0 10px;
}

.eco-left {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    padding: 0 0.25em;
    background-color: var(--accent-color);
    color: #fff;
    font-weight: bold;
}

.eco-right {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-bottom-right-radius: 6px;
    padding: 0 0.5em 0 0.25em;
    background-color: var(--background-color);
    color: var(--text-color);
    font-weight: normal;
}

.top-chance-container {
    white-space: nowrap;
}

.top-chance-left {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    padding: 0 0.25em;
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: bold;
}

.top-chance-middle {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 0 0.25em;
    background-color: var(--background-color);
    color: var(--text-color);
    font-weight: bold;
}

.top-chance-right {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-bottom-right-radius: 6px;
    padding: 0 0.5em 0 0.25em;
    background-color: var(--background-color);
    color: var(--text-color);
    font-weight: normal;
}

.top-chance-container_m {
    margin-right: 0.5em;
    padding: 0;
    padding-right: 0.25em;
    padding-bottom: 0.1em;
    border: 1px solid #666;
    background-color: var(--background-color);
    border-bottom-right-radius: 12px;

}

.top-chance-left_m {
    background-color: var(--secondary-color);

    color: #fff;
    padding-left: 3px;

    padding-right: 0.25em;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    height: 100%;

}

.top-chance-middle_m {
    background-color: var(--background-color);
    color: var(--text-color);
    padding-left: 0.25em;
    padding-right: 0.25em;

    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    height: 100%;

}

.top-chance-right_m {
    font-weight: normal;
    padding-right: 0.5em;

    background-color: var(--background-color);
    color: var(--text-color);
    display: inline-block;
    vertical-align: middle;

    height: 100%;


}

.tlm {
    display: inline-flex;
}

.tlbt {
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
}

.lkit {
    color: #fff;
    padding-top: 0.25em;
    padding-bottom: 0.25em;

    padding-left: 0.25em;
    font-weight: normal;
}

.bkio {
    border: 0px solid #fff;
    border-radius: 2em;
    display: inline-block;
    padding: 0em;
    background-color: var(--secondary-color);
    margin-right: 0em;
}

.tch {
    vertical-align: middle;
    padding: 0.4em;
}

.pink {
    color: var(--secondary-color);
}

.pink-bg {
    background-color: var(--secondary-color) !important;

}

.person {
    width: 30px;
    height: 30px;
    margin: 6px 0 0 -16px;
    fill: var(--gauge-color-1);
}

.person-i {
    width: 40px;
    height: 40px;
    margin: 6px 0 0 -16px;
    fill: var(--secondary-color);
}

.green {
    color: var(--accent-color);
}

.blue {
    color: var(--primary-color);
}

.ldet {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 0.25em 0.5em 0.25em 0.25em;
    border-bottom-right-radius: 0.5em;
    border: 1px solid #000;
    border-left: 0;
    font-weight: bold;
}

.eco {
    font-size: 16px;
}

.top-chance-height {
    height: 50px;
    padding-top: 14px;
}

.frage {
    margin-top: 0.25em;
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.svg-button {
    flex: 1;

}

.middle-buttons {
    display: flex;
    flex-grow: 2;
    justify-content: flex-start;
    gap: 10px;
}

.middle-button {
    flex: 1;
}

button.small {
    padding: 6px 12px;
}

.tool-button {
    background-color: var(--text-color);
    flex: 1 1 auto;
    justify-content: center;
}

@media (max-width: 768px) {
    .doc_manager_document_item_large {

        width: 100%;
    }


    .cat-documents .doc_manager_document_grid {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        align-items: center;
        justify-content: center !important;
        justify-content: space-between;
    }

    .doc_manager_document_info_large {
        position: relative;
        min-width: unset;
        width: 100%;
        top: unser;
        left: unset;
        transform: unset;
        border-radius: unset;
        box-shadow: unset;
        margin-top: -10em;

        background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 20%);
        padding: 4em 2em 2em 2em;
        color: #fff;
        box-sizing: border-box;
    }

    .rate-button-checkout {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
    }
}

.navigation_chevron {
    width: 3em;
    height: 3em;
    display: inline-block;
    vertical-align: middle;
}

.teaser_blurred {
    color: transparent;
    text-shadow: 0 0 6px #000;
}

.cover_offer {
    position: absolute;
    height: auto;
    left: 50%;
    min-width: 25em;
    max-width: 30em;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.75);
    margin: -45em auto auto auto;
    display: block;
    z-index: 999;
    box-shadow: 0 12px 24px rgba(180, 220, 240, 1);

}

.pd,
.ps {
    vertical-align: top;
}

.discount_banner {
    padding: 1em;
}

.payment_methods {
    display: flex;
    background-color: #fff;
    margin: 0.5em 0 -0.25em 0;
    justify-content: center;
    padding: 0.25em 0 0.25em 0;
    border-ik: 5px;
}

.checkout_tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.premium {
    background: linear-gradient(30deg, #fff, #e2f3ff, #fff);
    padding: 1em;
    flex: 1 1 0px;

}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-a {

    cursor: pointer;
    color: #aaa;
    font-size: 28px;
    float: left;

}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.ersparnis {
    background: var(--secondary-color);
    color: white;
    font-weight: bold !important;
    white-space: nowrap;
    padding: 0px 8px;



}

.google-container {
    display: flex;
    height: 4em;
    margin: 2em 0 0.5em 0;
}

.google-logo {
    width: 2em;
    height: 2em;
}

.google-text {
    display: flex;
    flex-direction: column;
    margin: 0 0.5em;
    height: 100%;
    line-height: 1;
}

.google-title {
    font-family: 'Google Sans', 'Roboto', sans-serif;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
}

.google-stars {
    font-size: 0.8em;
    margin: 0;
    padding: 0;
}

.google-footer {
    font-size: 13px;
    color: #555;
    margin-top: 0.5em;
    line-height: 1.25em;
}

.lu {
    text-decoration: underline !important;
    color: inherit !important;
    font-size: 12px !important;
}

.highlight {
    background: var(--accent-color);
    color: white;
    font-weight: bold !important;
    white-space: nowrap;
    padding: 0px 8px 2px 8px;



}

.discount_bg_free {
    background-color: #e2f3ff;
    border-bottom-right-radius: 1em;
}

.discount_bg {
    background-color: #ffc792;
    padding: 1em;
    border-bottom-right-radius: 1em;
}

.tab_premium {
    background: linear-gradient(30deg, #ccc, #333, #ccc);
    flex: 1;
    padding: 0.5em 0 0.5em 0;
    font-weight: normal;
    height: 16px;
}

.tab_premium_sel {
    background-color: #216b65;
    flex: 1;
    padding: 0.25em 0 0.25em 0;
    font-weight: bold;
}

.tab_to_premium {
    background: linear-gradient(30deg, #666, #999, #333);
    flex: 1;
    padding: 0.75em 0 0.75em 0;
    font-weight: bold;
}

.fragen-preview {
    max-height: 5em;
    overflow: auto;
}


textarea.teaser_preview {
    box-shadow: unset !important;
    border: 2px solid var(--primary-color);
}

.teaser_preview {
    background-color: white;
    overflow-y: auto;
    color: #666;
    border: 1px solid #ccc;
    padding: 1em;
    margin-bottom: 1em;
    height: 75em;
    box-shadow: brown;
    border-radius: 0px;
    line-height: 25px;
    padding: 64px;
    font-family: 'Open Sans';
    font-size: 18px;
}

.clock-svg {
    display: block;
}

.circle {
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background-color: #ccc;
    border: 1px solid;

}

#arc {
    fill: var(--primary-color)
}

.upgrade {
    cursor: pointer;
}

.dti-right-premium-sm {
    margin: 0;
    float: left;
    width: 3em;
    margin-right: 16px;
    border: 1.5px solid #999;
    padding: 0.3em;
}

.goodies {
    float: left;
    text-align: left;
    width: 100%;
    font-size: 16px;
    margin-top: 1em;
}

.super-goodie-text-diff {
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 0em 1em 0em 1em;
    text-align: left;
    display: inline-block;
    width: 100%;
}

.price_d_free {
    font-weight: bold;
    color: #fff;
    background-color: #666;
    border-bottom-right-radius: 0.5em;
    padding: 2px 12px;
    white-space: nowrap;
    line-height: 1.9em;

}

.slot_reserved {
    width: 100%;
    background-color: var(--text-color);
    color: white;
    font: inherit;
    line-height: 1.25em;
    border: 0;
    font-weight: normal;
    padding: 4px;

}

.small {
    font-size: 14px;
}

td.coc2 {
    border: none;
    vertical-align: top;
    padding: 0 !important;
    border: none;
    font-size: 0.75em !important;
}

td.coc3 {
    border: none;
    vertical-align: top;
    margin-top: 0 !important;
}

td.coc3 label {
    margin: 0em;
    font-weight: normal;
}


#frageTextContainer {
    display: flex;
    align-items: center;

    min-height: 2em;

}

.nosidemargin {
    margin-left: 0 !important;
}

.offer-table {}

.offer-row {
    display: flex;
    align-items: center;
}

.offer-radio-wrapper {
    flex: 0 0 5%;
    padding: 2px 4px;
}

.offer-content {
    flex: 1;
    text-align: left;
}

.offer-price {
    flex: 0 0 10%;
    padding: 2px 4px;
    ;
    text-align: right;
    white-space: nowrap;

}

.price-right {
    float: right;
    white-space: nowrap;

}

.line-higher {
    line-height: 1.5em;
}

@media all and (min-width: 1024px) {
    .tablet-hide {
        display: none;
    }

    .desktop-show {
        display: inline-block;
    }

    .desktop-hide {
        display: none;
    }

    .discount_text_free {
        display: flex;
        flex-direction: row;
    }

}

.cent {
    font-size: 0.9em;

    vertical-align: 0.1em;
}


@media (max-width: 767px) {
    .cover_offer {
        position: relative;

        top: auto;
        left: auto;
        transform: none;

        margin-top: 10px;

        min-width: unset;
    }

    .discount_banner {
        padding: 0;
    }

    .landing-kostenlos .pricing-overview .pricing-table,
    .landing-kostenlos .pricing-table {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }

    .landing-bewerbung .pricing-overview .pricing-table,
    .landing-bewerbung .pricing-table {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }

    .landing-lebenslauf .pricing-overview .pricing-table,
    .landing-lebenslauf .pricing-table {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }

    .price-card {
        width: 100% !important;
        grid-column: 1 !important;
        grid-row: auto !important;
        justify-self: center !important;
    }

    .desktop-show {
        display: none;
    }

    .desktop-hide {
        display: inline-block;
    }

    .tablet-hide {
        display: none;
    }

    .slide-mobile-up {
        margin-top: -6em;
        padding-top: 4px;
        background: linear-gradient(to bottom,

                rgba(255, 255, 255, 0.7),

                #ffffff 33%);

    }

    .slide {
        flex-direction: column;
        text-align: center;
    }

    .text-block {
        flex-direction: column;
        text-align: center;
    }

    .text-content,
    .image-content {
        flex: 1 1 100%;
    }

    .image-content {
        order: 1;
        padding-right: 0px;
    }

    .multi-image {
        padding: 0 15% 0 15%;
    }

    .google-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 4em;
        margin: 2em 0 0.5em 0;
    }

    .ll-preview {

        transform: rotate(-10deg);


        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);


        transition: transform 0.3s ease, box-shadow 0.3s ease;
        max-height: 450px;
        padding: 1em;
        margin-bottom: 1.5em;

    }

    .image-content-vv {
        order: 1;
        padding-right: 0px;
    }

    .text-content {
        order: 2;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    .text-content-vv {
        order: 2;
        padding-left: 10px;
        text-align: center;
        padding-right: 10px;
    }

    .text-content-divider {
        box-shadow: inset 0 5px 8px -5px rgba(180, 220, 240, 1);
        padding: 1em;
    }

    .text-block-content,
    .text-block-image {
        flex: 1 1 100%;
    }

    .text-block-content,
    .text-block-image {
        flex: 1 1 100%;
    }

    .text-block-image {
        order: 1;
        padding-right: 0px;
        padding-top: 20px;
    }

    .image-half-width-mobile {
        max-width: 50%;
    }

    .mobile-center {
        text-align: center;
    }

    .frage {
        margin-top: 0.5em;
    }

    .teaser_preview {
        height: 50em;
        line-height: 18px;
        padding: 24px;
        font-family: 'Open Sans';
        font-size: 14px;
    }

    .flowersm {
        padding-bottom: 0.3em;
    }

    .flex-row {
        width: calc(100% / 2);
    }

    .flex-row.first {
        width: 100%;
        font-weight: bold;
    }

    .column {
        width: 100%;
    }

    .image-half-width-tablet {
        max-width: 60%;


    }

    .slider-image {
        width: 70%;

        height: auto;

    }

}


@media (max-width: 430px) {

      .ap-stars-stage {
        top: -20%;
    }
    .assist_preview {
        margin: 0;
    }

    .assist_preview .anschreiben {
        padding: 5%;
        border-radius: 6px;
    }



    .google-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 8em;
        margin: 2em 0 0.5em 0;
    }

    .data_notice {
        width: unset;
    }

    section {
        padding: 0;
        margin-top: 5em;
        box-sizing: border-box;
    }

    .doc_manager_editor_controls {
        padding-right: 1em;
        max-width: 33%;
        min-width: 100%;

        overflow: auto;
        padding-bottom: 2em;
    }

    .swiper-slide {
        padding: 25px 0 25px 0;
    }

    li.hotline {
        font-size: 12px;
        padding: 2px 6px 2px 2px;
    }

    .hspecials {
        padding: 2px;
    }

    .burger-menu-toggle {
        margin-left: 0px;
        margin-right: 0px;
    }

    #content h1 {
        margin-top: 0;
        padding: 0;
        font-size: 1.5em;

    }

    .uni-box {
        padding: 0px;
    }

    .site-header {
        padding: 2px;
        justify-content: space-around;
    }

    .image-half-width-tablet {
        max-width: 100%;
    }

    .slide-mobile-up {
        margin-top: -3em;
        padding-top: 4px;
        background: linear-gradient(to bottom,

                rgba(255, 255, 255, 0.7),

                #ffffff 33%);

    }

    .ll-preview {

        transform: rotate(-10deg);


        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);


        transition: transform 0.3s ease, box-shadow 0.3s ease;
        max-height: 300px;
        padding: 1em;

    }

    .free-area {
        float: right;
        min-width: 50%;

    }

    .goodies {
        float: left;
        text-align: left;
        width: 100%;
        margin-top: 0.5em;
    }

    .super-goodie-text-diff {

        padding: 0em 0.25em 0em 0.25em;
    }

    .free {
        padding: 0.5em;

    }

    .free-area {
        float: right;
        min-width: 50%;

    }

    .bkicm {
        margin-bottom: .5em;
    }

    .desktop-show {
        display: none;
    }

    .desktop-hide {
        display: inline-block;
    }

    .top-chance-container {
        display: block;
        margin-top: 4px;
    }

    .logo img {
        height: 30px;
    }

    .header-nav ul {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 10px;
    }

    .header-nav li {
        margin: 0;
    }

    .text-content,
    .text-content-vv {
        padding: 10px;
        font-size: 14px;
    }

    .image-content img {
        padding-right: 0px;
    }

    .text-block-content,
    .text-block-image {
        flex: 1 1 100%;
    }

    .text-block-image {
        order: 1;
        padding-right: 0px;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    }

    .text-area-wrapper {
        display: block;
        width: 100%;
        margin-right: 0;
        padding-right: 0;
    }

    .text-area-wrapper p,
    .text-area-wrapper textarea {
        text-align: left;
        margin-left: 0;
        padding: 6px 18px;
    }

    .image-half-width-mobile {
        max-width: 40%;
    }

    .mobile-center {
        text-align: center;
    }

    .frage {
        margin-top: 0.5em;
    }

    .free {
        padding: 0.5em;
    }

    .super-goodie-text-diff {
        padding: 0em 0.25em 0em 0.25em;
    }

    div.premium,
    div.express {
        padding: 0.5em;
    }

    div.express {
        padding: 0.25em 0.5em 0.1em 0.2em;
    }

    .checkout_tabs {
        display: flex;
        background-color: #fff;
        justify-content: space-evenly;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }


    .navigation_preview {
        margin: 0;
    }
}

.nowrap {
    white-space: nowrap;
}





.slot_wrapper {
    display: flex;
    flex-wrap: nowrap;

    justify-content: space-evenly;
    width: 100%;
}

.debug {
    position: fixed;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.3);
    font-family: monospace;
    font-size: 1.6rem;
}

.slots {
    position: relative;
    width: 140px;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(180, 220, 240, 1);
    border-bottom: 1px solid rgba(180, 220, 240, 1);
    box-shadow: -2px 2px 3px rgba(180, 220, 240, 1);
    border-radius: 3px;
}

.slots::before,
.slots::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 10px;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.5);
}

.slots::before {
    left: 0;
    transform: translate(-200%, -50%);
}

.slots::after {
    right: 0;
    transform: translate(200%, -50%);
}

@-webkit-keyframes win1 {
    0% {
        background: linear-gradient(45deg, orange 0%, yellow 100%);
        box-shadow: 0 0 80px orange;
    }

    100% {
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

@keyframes win1 {
    0% {
        background: linear-gradient(45deg, orange 0%, yellow 100%);
        box-shadow: 0 0 80px orange;
    }

    100% {
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

@-webkit-keyframes win2 {
    0% {
        background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
        box-shadow: 0 0 80px lightgreen;
    }

    100% {
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

@keyframes win2 {
    0% {
        background: linear-gradient(45deg, lightblue 0%, lightgreen 100%);
        box-shadow: 0 0 80px lightgreen;
    }

    100% {
        background: linear-gradient(45deg, grey 0%, lightgrey 100%);
        box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3);
    }
}

.slots.win1 {
    -webkit-animation: win1 200ms steps(2, end) infinite;
    animation: win1 200ms steps(2, end) infinite;
}

.slots.win2 {
    -webkit-animation: win2 200ms steps(2, end) infinite;
    animation: win2 200ms steps(2, end) infinite;
}

.slots .reel {
    position: relative;
    width: 40px;
    height: 120px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    background-image: url(/slotreel.webp);
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: 40px;
}

.slots .reel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
    box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
}

.slots p {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, calc(100% + 30px));
    text-align: center;
    font-size: 0.8rem;
    color: #444;
}

.slots p a {
    color: red;
    font-weight: 700;
}


.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.7);



    display: flex;
    align-items: center;

    justify-content: center;

}

.kaufen_spinner {
    background: linear-gradient(30deg, #fff, #eee, #fff);
    background-color: #e2f3ff;
    border-bottom-right-radius: 1em;
    padding: 1em;

}

.kaufen {
    background: linear-gradient(30deg, #fff, #e2f3ff, #fff);
    background-color: #e2f3ff;
    border-bottom-right-radius: 1em;
    padding: 1em;

}

.kaufen_outer {
    min-width: 275px;
    max-width: 345px;
    padding: 1em;
    border-radius: 6px;
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.kaufen_hint {
    background-color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.5em;
    border: radius 6px;
    text-align: center;
}


.modal-content {
    width: 80%;
    max-width: 400px;
    min-height: 150px;
    background: #fff;
    padding: 1em;
    box-shadow: 0 12px 24px rgba(180, 220, 240, 1);

}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.inline-accordion,
.inline-accordion li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.inline-accordion {
    margin: 0 0 1em 0;
}

.inline-accordion ul {
    list-style: none;
    padding: 0.5em 0.5em;
}



.inline-accordion details summary::-webkit-details-marker {
    display: none;
}


.inline-accordion details summary::marker {
    display: none;
}


.inline-accordion details summary {
    cursor: pointer;
    color: inherit;
    background: none;
}

.inline-accordion details summary:hover {
    color: inherit;
    background: none;
}


details>summary {
    list-style: none;
    border-top: 1px solid #eee;
    padding: 0.25em;
}


details>summary::-webkit-details-marker {
    display: none;
}


.inline-accordion details>summary::before {
    font-family: FontAwesome;
    content: "\f13a";

    margin-right: .4em;
}

.inline-accordion details[open]>summary::before {
    content: "\f139";

}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion:hover,
.accordion.active {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.upper-case {
    text-transform: uppercase;
}

.editor_preview_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.editor_preview_button {
    flex-grow: 1;
    flex-basis: auto;
    padding: 10px;
    background-color: var(--text-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.editor_preview_button i {
    margin-right: 5px;
}

.c-bn:not(#s-c-bn) {
    background-color: var(--cc-btn-primary-hover-bg) !important;
    color: #fff !important;
}

:root {
    --cc-bg: #bbb;
    --cc-text: #222;
    --cc-btn-primary-bg: #216b65;
    --cc-btn-primary-text: #fff;
    --cc-btn-primary-hover-bg: #1d2e38;
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #d8e0e6;
    --cc-toggle-bg-off: #919ea6;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #d5dee2;
    --cc-toggle-knob-bg: #fff;
    --cc-toggle-knob-icon-color: #ecf2fa;
    --cc-block-text: var(--cc-text);
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-cookie-category-block-bg-hover: #e9eff4;
    --cc-section-border: #f1f3f5;
    --cc-cookie-table-border: #e9edf2;
    --cc-overlay-bg: rgba(4, 6, 8, .85);
    --cc-webkit-scrollbar-bg: #cfd5db;
    --cc-webkit-scrollbar-bg-hover: #9199a0
}

.cc_div *,
.cc_div :after,
.cc_div :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: none;
    font-style: inherit;
    font-variant: normal;
    font-weight: inherit;
    font-family: inherit;
    line-height: 1.2;
    font-size: 1em;
    transition: none;
    animation: none;
    margin: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: unset;
    color: inherit;
    background: 0 0;
    border: none;
    box-shadow: none;
    text-decoration: none;
    text-align: left;
    visibility: unset
}

#c-ttl,
#s-bl td:before,
#s-ttl,
.cc_div .b-tl,
.cc_div .c-bn {
    font-weight: 600
}

#cm,
#s-bl .act .b-acc,
#s-inr,
.cc_div .b-tl,
.cc_div .c-bl {
    border-radius: .35em
}

.cc_div a,
.cc_div button,
.cc_div input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.cc_div a {
    border-bottom: 1px solid
}

.cc_div a:hover {
    text-decoration: none;
    border-color: transparent
}

#cm-ov,
#cs-ov,
.c--anim #cm,
.c--anim #s-cnt,
.c--anim #s-inr {
    transition: visibility .25s linear, opacity .25s ease, transform .25s ease !important
}

.c--anim .c-bn {
    transition: background-color .25s ease !important
}

.c--anim #cm.bar.slide,
.c--anim .bar.slide #s-inr {
    transition: visibility .4s ease, opacity .4s ease, transform .4s ease !important
}

.c--anim #cm.bar.slide+#cm-ov,
.c--anim .bar.slide+#cs-ov {
    transition: visibility .4s ease, opacity .4s ease, transform .4s ease !important
}

#cm.bar.slide,
.cc_div .bar.slide #s-inr {
    transform: translateX(100%);
    opacity: 1
}

#cm.bar.top.slide,
.cc_div .bar.left.slide #s-inr {
    transform: translateX(-100%);
    opacity: 1
}

#cm.slide,
.cc_div .slide #s-inr {
    transform: translateY(1.6em)
}

#cm.top.slide {
    transform: translateY(-1.6em)
}

#cm.bar.slide {
    transform: translateY(100%)
}

#cm.bar.top.slide {
    transform: translateY(-100%)
}

.show--consent .c--anim #cm,
.show--consent .c--anim #cm.bar,
.show--settings .c--anim #s-inr,
.show--settings .c--anim .bar.slide #s-inr {
    opacity: 1;
    transform: scale(1);
    visibility: visible !important
}

.show--settings .c--anim #s-cnt {
    visibility: visible !important
}

.force--consent.show--consent .c--anim #cm-ov,
.show--settings .c--anim #cs-ov {
    visibility: visible !important;
    opacity: 1 !important
}

#cm {
    font-family: inherit;
    padding: 1.05em 2.1em 1.5em 2.1em;
    position: fixed;
    z-index: 1;
    background: #fff;
    background: var(--cc-bg);
    max-width: 25em;
    width: 100%;
    bottom: 1.25em;
    right: 1.25em;
    box-shadow: 0 .625em 1.875em #000;
    box-shadow: 0 .625em 1.875em rgba(2, 2, 3, .28);
    opacity: 0;
    visibility: hidden;
    transform: scale(.95);
    line-height: initial
}

#c-ttl {
    margin: 0 0 .7em 0;
    font-size: 1.05em
}

#c-txt {
    margin-bottom: 1.4em;
    font-size: .9em;
    line-height: 1.5em
}

.cc_div .c-bn {
    color: #40505a;
    color: var(--cc-btn-secondary-text);
    background: #e5ebef;
    background: var(--cc-btn-secondary-bg);
    padding: 1em 1.7em;
    display: inline-block;
    cursor: pointer;
    font-size: .82em;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-align: center;
    border-radius: 4px
}

#cm .c-bn {
    width: 48.5%
}

#c-bns button+button,
#s-c-bn,
#s-cnt button+button {
    float: right
}

#s-cnt #s-rall-bn {
    float: none;
    margin-left: 1em
}

#cm .c_link:active,
#cm .c_link:hover,
#s-c-bn:active,
#s-c-bn:hover,
#s-cnt button+button:active,
#s-cnt button+button:hover {
    background: #d8e0e6;
    background: var(--cc-btn-secondary-hover-bg)
}

#s-cnt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    display: table;
    height: 100%;
    visibility: hidden
}

#s-bl {
    outline: 0
}

#s-bl .title {
    margin-top: 1.4em
}

#s-bl .title:first-child {
    margin-top: 0
}

#s-bl .b-bn {
    margin-top: 0
}

#s-bl .b-acc .p {
    margin-top: 0;
    padding: 1em
}

#s-cnt .b-bn .b-tl {
    display: block;
    font-family: inherit;
    font-size: .95em;
    width: 100%;
    cursor: pointer;
    position: relative;
    padding: 1.3em 6.4em 1.3em 2.7em;
    background: 0 0;
    transition: background-color .25s ease
}

#s-cnt .act .b-bn .b-tl {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

#s-cnt .b-bn .b-tl:active,
#s-cnt .b-bn .b-tl:hover {
    background: #e9eff4;
    background: var(--cc-cookie-category-block-bg-hover)
}

#s-bl .b-bn {
    position: relative
}

#s-bl .c-bl {
    padding: 1em;
    margin-bottom: .5em;
    border: 1px solid #f1f3f5;
    border-color: var(--cc-section-border);
    transition: background-color .25s ease
}

#s-bl .c-bl:hover {
    background: #f0f4f7;
    background: var(--cc-cookie-category-block-bg)
}

#s-bl .c-bl:last-child {
    margin-bottom: .5em
}

#s-bl .c-bl:first-child {
    transition: none;
    padding: 0;
    margin-top: 0;
    border: none;
    margin-bottom: 2em
}

#s-bl .c-bl:first-child:hover {
    background: 0 0;
    background: unset
}

#s-bl .c-bl.b-ex {
    margin-top: 2em;
    padding: 0;
    border: none;
    background: #f0f4f7;
    background: var(--cc-cookie-category-block-bg);
    transition: none
}

#s-bl .c-bl.b-ex+.c-bl {
    margin-top: 2em
}

#s-bl .c-bl.b-ex+.c-bl.b-ex {
    margin-top: 0
}

#s-bl .c-bl.b-ex:first-child {
    margin-bottom: 1em
}

#s-bl .c-bl.b-ex:first-child {
    margin-bottom: .5em
}

#s-bl .b-acc {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    margin-bottom: 0;
    display: none
}

#s-bl .act .b-acc {
    max-height: 100%;
    display: block;
    overflow: hidden
}

#s-cnt .p {
    font-size: .9em;
    line-height: 1.5em;
    margin-top: 1em;
    color: #2d4156;
    color: var(--cc-block-text)
}

.cc_div .c-tgl:disabled {
    cursor: not-allowed
}

#c-vln {
    display: table-cell;
    vertical-align: middle;
    position: relative
}

#cs {
    padding: 0 1.7em;
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%
}

#s-inr {
    height: 100%;
    position: relative;
    max-width: 45em;
    margin: 0 auto;
    transform: scale(.96);
    opacity: 0;
    padding-top: 5.125em;
    padding-bottom: 4.75em;
    position: relative;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    box-shadow: rgba(3, 6, 9, .26) 0 13px 27px -5px
}

#s-bns,
#s-hdr,
#s-inr {
    background: #fff;
    background: var(--cc-bg)
}

#s-bl {
    overflow-y: auto;
    overflow-y: overlay;
    overflow-x: hidden;
    height: 100%;
    padding: 1.5em 2.5em;
    display: block;
    width: 100%
}

#s-bns {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em 2.5em;
    border-top: 1px solid #f1f3f5;
    border-color: var(--cc-section-border);
    height: 4.75em
}

.cc_div .cc-link {
    color: #253b48;
    color: var(--cc-btn-primary-bg);
    border-bottom: 1px solid #253b48;
    border-color: var(--cc-btn-primary-bg);
    display: inline;
    padding-bottom: 0;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600
}

.cc_div .cc-link:active,
.cc_div .cc-link:hover {
    border-color: transparent
}

#c-bns button:first-child,
#s-bns button:first-child {
    color: #fff;
    color: var(--cc-btn-primary-text);
    background: #253b48;
    background: var(--cc-btn-primary-bg)
}

.cc_div .c-tgl:checked~.c-tg {
    background: #253b48;
    background: var(--cc-toggle-bg-on)
}

#c-bns button:first-child:active,
#c-bns button:first-child:hover,
#s-bns button:first-child:active,
#s-bns button:first-child:hover {
    background: #1d2e38;
    background: var(--cc-btn-primary-hover-bg)
}

#s-hdr {
    position: absolute;
    top: 0;
    width: 100%;
    display: table;
    padding: 0 2.5em;
    height: 5.125em;
    vertical-align: middle;
    z-index: 2;
    border-bottom: 1px solid #f1f3f5;
    border-color: var(--cc-section-border)
}

#s-ttl {
    display: table-cell;
    vertical-align: middle;
    font-size: 1em
}

#s-c-bn {
    padding: 0;
    width: 1.7em;
    height: 1.7em;
    font-size: 1.515em;
    margin: 0;
    font-weight: initial;
    position: relative
}

#s-c-bnc {
    display: table-cell;
    vertical-align: middle
}

.cc_div span.t-lb {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    overflow: hidden
}

#c_policy__text {
    height: 31.25em;
    overflow-y: auto;
    margin-top: 1.25em
}

#c-s-in {
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    height: 100%;
    height: calc(100% - 2.5em);
    max-height: 37.5em
}

#s-bl::-webkit-scrollbar {
    width: .9em;
    height: 100%;
    background: 0 0;
    border-radius: 0 .25em .25em 0
}

#s-bl::-webkit-scrollbar-thumb {
    border: .25em solid var(--cc-bg);
    background: #cfd5db;
    background: var(--cc-webkit-scrollbar-bg);
    border-radius: 100em
}

#s-bl::-webkit-scrollbar-thumb:hover {
    background: #9199a0;
    background: var(--cc-webkit-scrollbar-bg-hover)
}

#s-bl::-webkit-scrollbar-button {
    width: 10px;
    height: 5px
}

.cc_div .b-tg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    margin: auto;
    right: 1.2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle
}

.cc_div .c-tgl {
    position: absolute;
    cursor: pointer;
    display: block;
    top: 0;
    left: 0
}

.cc_div .b-tg .c-tg {
    position: absolute;
    overflow: hidden;
    background: #919ea6;
    background: var(--cc-toggle-bg-off);
    transition: background-color .25s ease;
    pointer-events: none
}

.cc_div .b-tg,
.cc_div .b-tg .c-tg,
.cc_div .c-tgl,
.cc_div span.t-lb {
    width: 3.6em;
    height: 1.6em;
    border-radius: 4em
}

.cc_div .b-tg .c-tg.c-ro {
    cursor: not-allowed
}

.cc_div .c-tgl~.c-tg.c-ro {
    background: #d5dee2;
    background: var(--cc-toggle-bg-readonly)
}

.cc_div .c-tgl~.c-tg.c-ro:after {
    box-shadow: none
}

.cc_div .b-tg .c-tg:after {
    content: "";
    position: absolute;
    left: .24em;
    top: .25em;
    width: 1.1em;
    height: 1.1em;
    border: none;
    box-sizing: content-box;
    background: #fff;
    background: var(--cc-toggle-knob-bg);
    box-shadow: 0 1px 2px rgba(24, 32, 35, .36);
    transition: transform .25s ease;
    border-radius: 100%
}

.cc_div .c-tgl:checked~.c-tg:after {
    transform: translateX(1.95em)
}

#s-bl table,
#s-bl td,
#s-bl th {
    border: none
}

#s-bl tbody tr {
    transition: background-color .25s ease
}

#s-bl tbody tr:hover {
    background: #e9eff4;
    background: var(--cc-cookie-category-block-bg-hover)
}

#s-bl table {
    text-align: left;
    border-collapse: collapse;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden
}

#s-bl td,
#s-bl th {
    padding: .8em .625em;
    text-align: left;
    vertical-align: top;
    font-size: .8em;
    padding-left: 1.2em
}

#s-bl th {
    font-family: inherit;
    padding: 1.2em 1.2em
}

#s-bl thead tr:first-child {
    border-bottom: 1px solid #e9edf2;
    border-color: var(--cc-cookie-table-border)
}

.force--consent #cs,
.force--consent #s-cnt {
    width: 100vw
}

#cm-ov,
#cs-ov {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
    background: #070707;
    background: rgba(4, 6, 8, .85);
    background: var(--cc-overlay-bg);
    display: none;
    transition: none
}

.c--anim #cs-ov,
.force--consent .c--anim #cm-ov,
.force--consent.show--consent #cm-ov,
.show--settings #cs-ov {
    display: block
}

#cs-ov {
    z-index: 2
}

.force--consent .cc_div {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    width: 100vw;
    visibility: hidden;
    transition: visibility .25s linear
}

.force--consent.show--consent .c--anim .cc_div,
.force--consent.show--settings .c--anim .cc_div {
    visibility: visible
}

.force--consent #cm {
    position: absolute
}

.force--consent #cm.bar {
    width: 100vw;
    max-width: 100vw
}

html.force--consent.show--consent,
html.force--consent.show--settings {
    overflow-y: hidden !important
}

html.force--consent,
html.force--consent body {
    height: auto !important;
    overflow-x: hidden !important
}

.cc_div .act .b-bn .b-tl::before,
.cc_div .b-bn .b-tl::before {
    border: solid #2d4156;
    border-color: var(--cc-btn-secondary-text);
    border-width: 0 2px 2px 0;
    padding: .2em;
    display: inline-block;
    position: absolute;
    content: '';
    margin-right: 15px;
    position: absolute;
    transform: translateY(-50%) rotate(45deg);
    left: 1.2em;
    top: 50%
}

.cc_div .act .b-bn .b-tl::before {
    transform: translateY(-20%) rotate(225deg)
}

.cc_div .on-i::before {
    border: solid #fff;
    border-color: var(--cc-toggle-knob-icon-color);
    border-width: 0 2px 2px 0;
    padding: .13em;
    display: inline-block;
    padding-bottom: .55em;
    content: '';
    margin: 0 auto;
    transform: rotate(45deg);
    margin-top: .31em;
    margin-left: .1em
}

#s-c-bn::after,
#s-c-bn::before {
    content: '';
    position: absolute;
    left: .82em;
    top: .58em;
    height: .6em;
    width: 1.5px;
    background: #444d53;
    background: var(--cc-btn-secondary-text);
    transform: rotate(45deg);
    border-radius: 1em;
    margin: 0 auto
}

#s-c-bn::after {
    transform: rotate(-45deg)
}

.cc_div .off-i,
.cc_div .on-i {
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    display: block;
    text-align: center;
    transition: opacity .25s ease
}

.cc_div .on-i {
    left: 0;
    opacity: 0
}

.cc_div .off-i::after,
.cc_div .off-i::before {
    right: .84em;
    top: .4em;
    content: ' ';
    height: .85em;
    width: .09375em;
    display: block;
    background: #cdd6dc;
    background: var(--cc-toggle-knob-icon-color);
    margin: 0 auto;
    position: absolute;
    transform-origin: center
}

.cc_div .off-i::before {
    transform: rotate(45deg)
}

.cc_div .off-i::after {
    transform: rotate(-45deg)
}

.cc_div .c-tgl:checked~.c-tg .on-i {
    opacity: 1
}

.cc_div .c-tgl:checked~.c-tg .off-i {
    opacity: 0
}

#cm.cloud {
    max-width: 50em;
    margin: 0 auto;
    text-align: center;
    left: 1.25em;
    right: 1.25em;
    overflow: hidden;
    padding: 1.3em 2.4em;
    width: unset
}

.cc_div .cloud #c-inr {
    display: table;
    width: 100%
}

.cc_div .cloud #c-inr-i {
    width: 70%;
    display: table-cell;
    vertical-align: top;
    padding-right: 2.4em
}

.cc_div .cloud #c-txt {
    margin-bottom: 0;
    font-size: .85em
}

.cc_div .cloud #c-bns {
    min-width: 170px;
    display: table-cell;
    vertical-align: middle
}

#cm.cloud .c-bn {
    margin: .625em 0 0 0;
    width: 100%
}

#cm.cloud .c-bn:first-child {
    margin: 0
}

#cm.cloud.left {
    margin-right: 1.25em
}

#cm.cloud.right {
    margin-left: 1.25em
}

#cm.bar {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    position: fixed;
    padding: 2em
}

#cm.bar #c-inr {
    max-width: 32em;
    margin: 0 auto
}

#cm.bar #c-bns {
    max-width: 540px
}

#cm.bar #cs {
    padding: 0
}

.cc_div .bar #c-s-in {
    top: 0;
    transform: none;
    height: 100%;
    max-height: 100%
}

.cc_div .bar #s-bl,
.cc_div .bar #s-bns,
.cc_div .bar #s-hdr {
    padding-left: 1.8em;
    padding-right: 1.8em
}

.cc_div .bar #cs {
    padding: 0
}

.cc_div .bar #s-inr {
    margin: 0;
    margin-left: auto;
    margin-right: 0;
    border-radius: 0;
    max-width: 32em
}

.cc_div .bar.left #s-inr {
    margin-left: 0;
    margin-right: auto
}

.cc_div .bar #s-bl table,
.cc_div .bar #s-bl tbody,
.cc_div .bar #s-bl td,
.cc_div .bar #s-bl th,
.cc_div .bar #s-bl thead,
.cc_div .bar #s-bl tr,
.cc_div .bar #s-cnt {
    display: block
}

.cc_div .bar #s-bl thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px
}

.cc_div .bar #s-bl tr {
    border-top: 1px solid #e3e7ed;
    border-color: var(--cc-cookie-table-border)
}

.cc_div .bar #s-bl td {
    border: none;
    position: relative;
    padding-left: 35%
}

.cc_div .bar #s-bl td:before {
    position: absolute;
    left: 1em;
    padding-right: .625em;
    white-space: nowrap;
    content: attr(data-column);
    color: #000;
    color: var(--cc-text);
    overflow: hidden;
    text-overflow: ellipsis
}

#cm.top {
    bottom: auto;
    top: 1.25em
}

#cm.left {
    right: auto;
    left: 1.25em
}

#cm.right {
    left: auto;
    right: 1.25em
}

#cm.bar.left,
#cm.bar.right {
    left: 0;
    right: 0
}

#cm.bar.top {
    top: 0
}

@media screen and (max-width:688px) {

    #cm,
    #cm.cloud,
    #cm.left,
    #cm.right {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 1.6em !important;
        right: 0;
        left: 0;
        bottom: 0;
        border-radius: 0;
        display: block
    }

    .force--consent #cm,
    .force--consent #cm.cloud {
        width: 100vw;
        max-width: 100vw
    }

    #cm.top {
        top: 0;
        bottom: unset
    }

    #cm.bottom {
        bottom: 0;
        top: unset
    }

    .cc_div .cloud #c-txt {
        font-size: .9em
    }

    #cm.cloud .c-bn {
        font-size: .85em
    }

    #s-bns,
    .cc_div .bar #s-bns {
        padding: 1em 1.3em
    }

    .cc_div .bar #s-inr {
        max-width: 100%;
        width: 100%
    }

    .cc_div .cloud #c-inr-i {
        padding-right: 0
    }

    #cs {
        border-radius: 0;
        padding: 0
    }

    #c-s-in {
        max-height: 100%;
        height: 100%;
        top: 0;
        transform: none
    }

    .cc_div .b-tg {
        font-size: 1.1em;
        right: .9em
    }

    #s-inr {
        margin: 0;
        padding-bottom: 7.9em;
        border-radius: unset
    }

    #s-bns {
        height: 7.9em
    }

    #s-bl,
    .cc_div .bar #s-bl {
        padding: 1.3em
    }

    #s-hdr,
    .cc_div .bar #s-hdr {
        padding: 0 1.3em
    }

    #s-bl table {
        width: 100%
    }

    #s-inr.bns-t {
        padding-bottom: 10.5em
    }

    .bns-t #s-bns {
        height: 10.5em
    }

    .cc_div .bns-t .c-bn {
        font-size: .83em;
        padding: .9em 1.6em
    }

    #s-cnt .b-bn .b-tl {
        padding-top: 1.2em;
        padding-bottom: 1.2em
    }

    #s-bl table,
    #s-bl tbody,
    #s-bl td,
    #s-bl th,
    #s-bl thead,
    #s-bl tr,
    #s-cnt {
        display: block
    }

    #s-bl thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px
    }

    #s-bl tr {
        border-top: 1px solid #e3e7ed;
        border-color: var(--cc-cookie-table-border)
    }

    #s-bl td {
        border: none;
        position: relative;
        padding-left: 35%
    }

    #s-bl td:before {
        position: absolute;
        left: 1em;
        padding-right: .625em;
        white-space: nowrap;
        content: attr(data-column);
        color: #000;
        color: var(--cc-text);
        overflow: hidden;
        text-overflow: ellipsis
    }

    #cm .c-bn,
    .cc_div .c-bn {
        width: 100%;
        margin-right: 0
    }

    #s-cnt #s-rall-bn {
        margin-left: 0
    }

    #c-bns button+button,
    #s-cnt button+button {
        margin-top: .625em;
        float: unset
    }

    #cm.cloud {
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%
    }

    #cm.cloud.left,
    #cm.cloud.right {
        margin: 0
    }

    .cc_div .cloud #c-bns,
    .cc_div .cloud #c-inr,
    .cc_div .cloud #c-inr-i {
        display: block;
        width: auto;
        min-width: unset
    }

    .cc_div .cloud #c-txt {
        margin-bottom: 1.625em
    }
}

.cc_div.ie #c-vln {
    height: 100%;
    padding-top: 5.62em
}

.cc_div.ie .bar #c-vln {
    padding-top: 0
}

.cc_div.ie #cs {
    max-height: 37.5em;
    position: relative;
    top: 0;
    margin-top: -5.625em
}

.cc_div.ie .bar #cs {
    margin-top: 0;
    max-height: 100%
}

.cc_div.ie #cm {
    border: 1px solid #dee6e9
}

.cc_div.ie #c-s-in {
    top: 0
}

.cc_div.ie .b-tg {
    padding-left: 1em;
    margin-bottom: .7em
}

.cc_div.ie .c-tgl:checked~.c-tg:after {
    left: 1.95em
}

.cc_div.ie #s-bl table {
    overflow: auto
}

.cc_div.ie .b-tg .c-tg {
    display: none
}

.cc_div.ie .c-tgl {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .2em;
    height: auto
}

.cc_div.ie #s-cnt .b-bn .b-tl {
    padding: 1.3em 6.4em 1.3em 1.4em
}

.cc_div.ie .bar #s-bl td:before {
    display: none
}

.cc_div.ie .bar #s-bl td {
    padding: .8em .625em .8em 1.2em
}

.cc_div.ie .bar #s-bl thead tr {
    position: relative
}

.cc_div.ie .b-tg .t-lb {
    filter: alpha(opacity=0);
}

.cc_div.ie #cm-ov,
.cc_div.ie #cs-ov {
    filter: alpha(opacity=80);
}

/* Hub-Links: Farbe vom Elternelement erben, dezente Unterstreichung. Gilt überall wo class="hub-link" gesetzt ist. */
a.hub-link,
.hl-text a, .hl-hd a, .hl-content a, .hl-imagecard-title a,
.text-block-content a[data-scroll], .content-visible a[data-scroll],
.testimonial-content a[data-scroll], .statement a[data-scroll] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
/* Submenü-Punkte mit eigenem Untermenü bekommen ein ausgefülltes Dreieck rechts. */
.sub-menu > li.eg-nav-with-children > a {
    display: flex;
    align-items: center;
}
.sub-menu > li.eg-nav-with-children > a::after {
    content: "\f0da";
    font-family: FontAwesome;
    margin-left: auto;
    padding-left: 8px;
    font-size: 1.2em;
    color: var(--accent-color);
}

/* Top-Level-Navigationspunkte mit Untermenü bekommen ein Dreieck nach unten. */
.burger-menu-list > li.eg-nav-with-children > a::after,
.burger-menu-list > li > div.eg-nav-with-children > a::after {
    content: "\f0d7";
    font-family: FontAwesome;
    margin-left: 8px;
    font-size: 1em;
    color: #666;
}

/* Kategorie-Label im Dropdown-Menü: Invers, volle Breite, Akzentfarbe als Hintergrund. */
.sub-menu li.menu-category-label {
    pointer-events: none;
    padding: 6px 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    background: var(--accent-color);
    margin: 12px 0 0;
}
.sub-menu li.menu-category-label:first-child {
    margin-top: 0;
}
/* Fetter Teil der Menüpunkte (vor dem Doppelpunkt) in gedämpftem Grau. */
.sub-menu li a strong {
    color: #666;
}

a.hub-link:hover,
.hl-text a:hover, .hl-hd a:hover, .hl-content a:hover, .hl-imagecard-title a:hover,
.text-block-content a[data-scroll]:hover, .content-visible a[data-scroll]:hover,
.testimonial-content a[data-scroll]:hover, .statement a[data-scroll]:hover {
    opacity: .75;
}