/**
 * TRIGONUS Leipzig 2026
 * Lead-design stylesheet aligned with the existing QNG/Pfungstadt landing page.
 *
 * Public URL:
 * /landingpages_jae/leipzig_2026/assets/css/leipzig-2026.css
 */

.leipzig-2026 {
    --trigonus-blue: #11368a;
    --trigonus-blue-hover: #123c99;
    --trigonus-blue-panel: #24499f;
    --trigonus-blue-light: #3e6ece;
    --trigonus-blue-muted: #8b9fc9;
    --trigonus-neutral: #f0f2f7;
    --trigonus-neutral-light: #f8f9fb;
    --trigonus-border: #dfe4ee;
    --trigonus-text: #333333;
    --trigonus-muted: #687184;
    --trigonus-white: #ffffff;
    color: var(--trigonus-text);
    line-height: 1.65;
}

.leipzig-2026 *,
.leipzig-2026 *::before,
.leipzig-2026 *::after {
    box-sizing: border-box;
}

.leipzig-2026 h1,
.leipzig-2026 h2,
.leipzig-2026 h3,
.leipzig-2026 h4,
.leipzig-2026 h5,
.leipzig-2026 h6 {
    color: var(--trigonus-blue);
    font-family: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
}

.leipzig-2026 p {
    margin-top: 0;
}

.leipzig-2026 a {
    color: var(--trigonus-blue);
}

.leipzig-2026 img {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-hero {
    padding: 58px 0 52px;
    background: var(--trigonus-white);
    border-top: 5px solid var(--trigonus-blue);
    border-bottom: 1px solid var(--trigonus-border);
}

.leipzig-2026 .lp-hero-copy {
    max-width: 1040px;
}

.leipzig-2026 .lp-kicker,
.leipzig-2026 .lp-section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--trigonus-blue-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.leipzig-2026 .lp-hero h1 {
    max-width: 980px;
    margin: 0 0 18px;
    color: var(--trigonus-blue);
    font-size: clamp(34px, 4.4vw, 48px);
    line-height: 1.15;
    text-align: left;
}

.leipzig-2026 .lp-hero-lead {
    max-width: 910px;
    margin-bottom: 0;
    color: #4b5566;
    font-size: 18px;
    line-height: 1.75;
}

.leipzig-2026 .lp-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 900px;
    margin-top: 30px;
}

.leipzig-2026 .lp-stat {
    min-height: 96px;
    padding: 18px 20px;
    background: var(--trigonus-neutral);
    border-left: 4px solid var(--trigonus-blue);
    border-radius: 4px;
}

.leipzig-2026 .lp-stat-label {
    display: block;
    margin-bottom: 4px;
    color: var(--trigonus-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.leipzig-2026 .lp-stat strong {
    display: block;
    color: var(--trigonus-blue);
    font-size: 22px;
    font-weight: 600;
}

.leipzig-2026 .lp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* -------------------------------------------------------------------------
 * Shared sections and headings
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-section {
    margin: 0;
    padding: 72px 0;
}

.leipzig-2026 .lp-section-neutral {
    background: var(--trigonus-neutral);
}

.leipzig-2026 .lp-section-heading {
    max-width: 930px;
    margin: 0 0 36px;
    text-align: left;
}

.leipzig-2026 .lp-section-heading h2 {
    margin: 0 0 14px;
    font-size: 30px;
    text-align: left;
}

.leipzig-2026 .lp-section-heading p {
    margin-bottom: 0;
    color: #4d5668;
    font-size: 16px;
    line-height: 1.75;
}

.leipzig-2026 .lp-section-heading-center {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.leipzig-2026 .lp-section-heading-center h2,
.leipzig-2026 .lp-section-heading-center p {
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Buttons and icon treatment
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    min-height: 48px;
    margin: 0;
    padding: 12px 18px;
    color: #ffffff !important;
    background: var(--trigonus-blue);
    border: 1px solid var(--trigonus-blue);
    border-radius: 3px;
    box-shadow: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.leipzig-2026 .lp-cta-button:hover,
.leipzig-2026 .lp-cta-button:focus,
.leipzig-2026 .lp-cta-button:active {
    color: #ffffff !important;
    background: var(--trigonus-blue-hover);
    border-color: var(--trigonus-blue-hover);
    box-shadow: 0 1px 5px rgba(68, 68, 68, 0.45);
    text-decoration: none !important;
    transform: translateY(-1px);
}

.leipzig-2026 .lp-cta-button-secondary {
    color: var(--trigonus-blue) !important;
    background: #ffffff;
    border-color: var(--trigonus-blue);
}

.leipzig-2026 .lp-cta-button-secondary:hover,
.leipzig-2026 .lp-cta-button-secondary:focus,
.leipzig-2026 .lp-cta-button-secondary:active {
    color: #ffffff !important;
    background: var(--trigonus-blue);
    border-color: var(--trigonus-blue);
}

.leipzig-2026 .lp-cta-button-compact {
    min-width: 0;
    min-height: 42px;
    padding: 9px 14px;
    font-size: 15px;
}

.leipzig-2026 .lp-cta-icon,
.leipzig-2026 .lp-benefit-icon {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 8px;
    font-size: 1.35em;
    line-height: 1;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Overview cards
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.leipzig-2026 .lp-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--trigonus-border);
    border-top: 4px solid var(--trigonus-blue);
    border-radius: 5px;
    box-shadow: 0 5px 18px rgba(35, 56, 104, 0.08);
}

.leipzig-2026 .lp-card-image {
    display: block;
    width: 100%;
    height: 245px;
    object-fit: cover;
}

.leipzig-2026 .lp-card-body {
    padding: 24px;
}

.leipzig-2026 .lp-badge {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--trigonus-blue-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.85px;
    text-transform: uppercase;
}

.leipzig-2026 .lp-card h3 {
    margin: 0 0 10px;
    color: var(--trigonus-blue);
    font-size: 22px;
    text-align: left;
}

.leipzig-2026 .lp-card p {
    min-height: 52px;
    margin-bottom: 17px;
}

.leipzig-2026 .lp-mini-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 20px;
}

.leipzig-2026 .lp-mini-fact {
    min-width: 0;
    padding: 10px 8px;
    background: var(--trigonus-neutral);
    border-radius: 3px;
    text-align: center;
}

.leipzig-2026 .lp-mini-fact span {
    display: block;
    color: var(--trigonus-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.leipzig-2026 .lp-mini-fact strong {
    display: block;
    margin-top: 4px;
    color: var(--trigonus-blue);
    font-size: 13px;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Calculator
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-calculator-section {
    background: #ffffff;
}

.leipzig-2026 .lp-calculator-select {
    max-width: 850px;
    margin: 0 auto 34px;
    padding: 21px 24px;
    background: var(--trigonus-neutral);
    border-left: 5px solid var(--trigonus-blue);
    border-radius: 4px;
}

.leipzig-2026 .lp-calculator-select label {
    display: block;
    margin-bottom: 8px;
    color: var(--trigonus-blue);
    font-weight: 600;
}

.leipzig-2026 .lp-calculator-select .form-control {
    height: 44px;
    color: var(--trigonus-text);
    background: #ffffff;
    border-color: #cfd6e4;
    border-radius: 3px;
}

.leipzig-2026 .lp-calculator-hint {
    margin: 10px 0 0;
    color: var(--trigonus-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.leipzig-2026 .lp-calculator-form {
    display: block;
    width: 100%;
}

.leipzig-2026 .lp-calculator-controls {
    height: 100%;
    padding: 26px 24px;
    background: var(--trigonus-neutral);
    border-radius: 4px;
}

.leipzig-2026 .lp-calculator-controls .form-group {
    margin-bottom: 26px;
}

.leipzig-2026 .lp-calculator-controls .form-group:last-of-type {
    margin-bottom: 18px;
}

.leipzig-2026 .lp-calculator-controls label {
    margin-bottom: 7px;
    color: var(--trigonus-text);
    font-weight: 600;
}

.leipzig-2026 .lp-calculator-controls .input-group-addon {
    color: #ffffff;
    background: var(--trigonus-blue);
    border-color: var(--trigonus-blue);
}

.leipzig-2026 .lp-calculator-controls .form-control {
    height: 42px;
    border-color: #cfd6e4;
    border-radius: 0 3px 3px 0;
}

.leipzig-2026 .lp-range-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.leipzig-2026 .lp-range-label label {
    margin: 0;
}

.leipzig-2026 .lp-range-label output {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 3px 8px;
    color: var(--trigonus-blue);
    background: #ffffff;
    border: 1px solid #d6dce7;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Native range styling with the QNG-style blue triangular thumb. */
.leipzig-2026 input[type="range"] {
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.leipzig-2026 input[type="range"]:focus {
    outline: none;
}

.leipzig-2026 input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: #cbd4e6;
    border-radius: 0;
}

.leipzig-2026 input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -2px;
    background: var(--trigonus-blue);
    border: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    appearance: none;
    -webkit-appearance: none;
}

.leipzig-2026 input[type="range"]::-moz-range-track {
    width: 100%;
    height: 5px;
    background: #cbd4e6;
    border: 0;
    border-radius: 0;
}

.leipzig-2026 input[type="range"]::-moz-range-progress {
    height: 5px;
    background: var(--trigonus-blue-light);
}

.leipzig-2026 input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--trigonus-blue);
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.leipzig-2026 .lp-chart-panel {
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid var(--trigonus-border);
    border-radius: 4px;
}

.leipzig-2026 #investment_chart {
    width: 100%;
    height: 680px;
    min-height: 680px;
    background: #ffffff;
}

.leipzig-2026 .lp-calculator-result {
    margin-top: 28px;
}

.leipzig-2026 .lp-calculator-result p {
    line-height: 1.65;
}

.leipzig-2026 strong.highlight,
.leipzig-2026 strong.bold-highlight {
    background: #eaeefc;
}

.leipzig-2026 strong.bold-highlight {
    font-weight: 700;
}

.leipzig-2026 .lp-highlight-box {
    margin-top: 18px;
    padding: 16px 18px;
    background: #eaeefc;
    border-left: 4px solid var(--trigonus-blue);
}

.leipzig-2026 .investment_rechner_disclaimer,
.leipzig-2026 .investment_rechner_disclaimer p {
    margin-top: 15px;
    color: #333333;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
 * Offer details
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-offer {
    padding: 50px 0;
    border-top: 1px solid #d6dce7;
}

.leipzig-2026 .lp-offer:first-of-type {
    border-top: 0;
}

.leipzig-2026 .lp-offer-image {
    display: block;
    width: 100%;
    height: 470px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 5px 18px rgba(35, 56, 104, 0.10);
}

.leipzig-2026 .lp-offer-content {
    padding: 4px 8px;
}

.leipzig-2026 .lp-offer h2 {
    margin: 0 0 12px;
    color: var(--trigonus-blue);
    font-size: 28px;
    text-align: left;
}

.leipzig-2026 .lp-fit-box {
    margin: 20px 0;
    padding: 15px 17px;
    background: #ffffff;
    border-left: 4px solid var(--trigonus-blue);
}

.leipzig-2026 .lp-data-table {
    margin-bottom: 0;
    background: #ffffff;
    border: 1px solid #dce1eb;
}

.leipzig-2026 .lp-data-table > tbody > tr > th,
.leipzig-2026 .lp-data-table > tbody > tr > td {
    padding: 12px 14px;
    vertical-align: middle;
    border-top: 1px solid #e4e8ef;
}

.leipzig-2026 .lp-data-table > tbody > tr:first-child > th,
.leipzig-2026 .lp-data-table > tbody > tr:first-child > td {
    border-top: 0;
}

.leipzig-2026 .lp-data-table th {
    width: 38%;
    color: var(--trigonus-blue);
    background: var(--trigonus-neutral-light);
    font-weight: 600;
}

.leipzig-2026 .lp-pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.leipzig-2026 .lp-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: var(--trigonus-blue) !important;
    background: #ffffff;
    border: 1px solid var(--trigonus-blue);
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none !important;
}

.leipzig-2026 .lp-pdf-button:hover,
.leipzig-2026 .lp-pdf-button:focus {
    color: #ffffff !important;
    background: var(--trigonus-blue);
}

.leipzig-2026 .lp-doc-note {
    margin-top: 9px;
    color: var(--trigonus-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.leipzig-2026 .lp-contact-row {
    margin-top: 22px;
}

.leipzig-2026 .lp-disclaimer {
    color: var(--trigonus-muted);
    font-size: 12px;
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
 * TRIGONUS role, benefits and expert statement
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-trigonus-role {
    background: #ffffff;
}

.leipzig-2026 .lp-role-row {
    display: flex;
    align-items: center;
}

.leipzig-2026 .lp-role-image {
    display: block;
    width: 100%;
    padding: 15px 25px 15px 0;
}

.leipzig-2026 .lp-role-copy {
    padding: 18px 0 18px 18px;
}

.leipzig-2026 .lp-role-copy h2 {
    margin: 0 0 16px;
    text-align: left;
}

.leipzig-2026 .lp-trigonus-benefits {
    margin-top: 46px;
    padding: 34px 38px;
    color: #ffffff;
    background: var(--trigonus-blue-panel);
    border-radius: 5px;
}

.leipzig-2026 .lp-trigonus-benefits h3 {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: 24px;
    text-align: left;
}

.leipzig-2026 .lp-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
}

.leipzig-2026 .lp-benefit-item {
    display: flex;
    align-items: flex-start;
    color: #ffffff;
}

.leipzig-2026 .lp-benefit-item strong,
.leipzig-2026 .lp-benefit-item span {
    display: block;
    color: #ffffff;
}

.leipzig-2026 .lp-benefit-item strong {
    margin-bottom: 2px;
    font-size: 16px;
}

.leipzig-2026 .lp-benefit-item > div > span {
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.5;
}

.leipzig-2026 .lp-expert-section {
    background: var(--trigonus-neutral);
    border-top: 1px solid #d8dee9;
}

.leipzig-2026 .lp-expert-person {
    padding-right: 34px;
    text-align: center;
}

.leipzig-2026 .lp-expert-person h2 {
    margin: 0 0 22px;
    font-size: 25px;
    text-align: center;
}

.leipzig-2026 .lp-expert-image {
    display: block;
    width: 210px;
    height: 210px;
    margin: 0 auto 16px;
    object-fit: cover;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(35, 56, 104, 0.18);
}

.leipzig-2026 .lp-expert-person h3 {
    margin: 8px 0 3px;
    text-align: center;
}

.leipzig-2026 .lp-expert-person .small {
    margin-top: 16px;
    text-align: left;
}

.leipzig-2026 .lp-expert-copy {
    padding: 24px 26px;
    background: #ffffff;
    border-left: 4px solid var(--trigonus-blue);
    border-radius: 4px;
}

.leipzig-2026 .lp-expert-copy .expertenstimme {
    margin-bottom: 17px;
    font-size: 16px;
    line-height: 1.75;
}

.leipzig-2026 .lp-expert-copy .expertenstimme:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Contact, FAQ and footer actions
 * ---------------------------------------------------------------------- */

.leipzig-2026 .lp-contact-section {
    background: #ffffff;
}

.leipzig-2026 .lp-contact-panel {
    /*
    max-width: 920px;
    background: var(--trigonus-neutral);
    */
    margin: 0 auto;
    padding: 38px 42px;

    border-top: 4px solid var(--trigonus-blue);
    border-radius: 4px;
    text-align: center;
}

.leipzig-2026 .lp-contact-panel h2 {
    margin: 0 0 12px;
    text-align: center;
}

.leipzig-2026 .lp-contact-panel p {
    max-width: 760px;
    margin: 0 auto 22px;
    color: #4d5668;
}

.leipzig-2026 .faq .panel {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid #dfe4ee;
    border-radius: 3px;
    box-shadow: none;
}

.leipzig-2026 .faq .panel-heading {
    padding: 0;
    background: #fcfdfe !important;
    border: 0;
}

.leipzig-2026 .faq .panel-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.leipzig-2026 .faq .panel-title a {
    position: relative;
    display: block;
    padding: 16px 52px 16px 18px;
    color: #4b5260;
    font-weight: 600;
    text-decoration: none;
}

.leipzig-2026 .faq .panel-title a::after {
    content: "−";
    position: absolute;
    top: 50%;
    right: 19px;
    color: var(--trigonus-blue);
    font-size: 22px;
    font-weight: 400;
    transform: translateY(-50%);
}

.leipzig-2026 .faq .panel-title a.collapsed::after {
    content: "+";
}

.leipzig-2026 .faq .panel-body {
    padding: 18px;
    color: #454d5c;
    border-top: 1px solid #e5e9f0 !important;
}

.leipzig-2026 .lp-footer-actions {
    background: #ffffff;
    text-align: center;
}

.leipzig-2026 .lp-footer-button-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 360px));
    justify-content: center;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.leipzig-2026 .lp-footer-button-stack .lp-cta-button {
    width: 100%;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 991px) {
    .leipzig-2026 .lp-section {
        padding: 58px 0;
    }

    .leipzig-2026 .lp-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .leipzig-2026 .lp-mini-facts {
        grid-template-columns: 1fr;
    }

    .leipzig-2026 .lp-card p {
        min-height: 0;
    }

    .leipzig-2026 #investment_chart {
        height: 590px;
        min-height: 590px;
    }

    .leipzig-2026 .lp-calculator-controls {
        margin-bottom: 25px;
    }

    .leipzig-2026 .lp-offer-image {
        height: 390px;
        margin-bottom: 28px;
    }

    .leipzig-2026 .lp-role-row {
        display: block;
    }

    .leipzig-2026 .lp-role-image {
        padding-right: 0;
    }

    .leipzig-2026 .lp-role-copy {
        padding-left: 0;
    }

    .leipzig-2026 .lp-expert-person {
        padding-right: 15px;
        margin-bottom: 28px;
    }
}

@media (max-width: 767px) {
    .leipzig-2026 .lp-hero {
        padding: 42px 0 38px;
    }

    .leipzig-2026 .lp-hero h1 {
        font-size: 34px;
    }

    .leipzig-2026 .lp-hero-lead {
        font-size: 16px;
    }

    .leipzig-2026 .lp-stat-grid,
    .leipzig-2026 .lp-card-grid,
    .leipzig-2026 .lp-benefit-grid,
    .leipzig-2026 .lp-footer-button-stack {
        grid-template-columns: 1fr;
    }

    .leipzig-2026 .lp-hero-actions {
        display: block;
    }

    .leipzig-2026 .lp-hero-actions .lp-cta-button {
        width: 100%;
        margin-bottom: 10px;
    }

    .leipzig-2026 .lp-section {
        padding: 48px 0;
    }

    .leipzig-2026 .lp-section-heading h2 {
        font-size: 27px;
    }

    .leipzig-2026 .lp-card-image {
        height: 225px;
    }

    .leipzig-2026 .lp-cta-button {
        width: 100%;
        min-width: 0;
    }

    .leipzig-2026 .lp-calculator-select,
    .leipzig-2026 .lp-calculator-controls,
    .leipzig-2026 .lp-contact-panel,
    .leipzig-2026 .lp-trigonus-benefits {
        padding-right: 20px;
        padding-left: 20px;
    }

    .leipzig-2026 #investment_chart {
        height: 460px;
        min-height: 460px;
    }

    .leipzig-2026 .lp-offer {
        padding: 40px 0;
    }

    .leipzig-2026 .lp-offer-image {
        height: 290px;
    }

    .leipzig-2026 .lp-pdf-actions {
        display: block;
    }

    .leipzig-2026 .lp-pdf-button {
        justify-content: center;
        width: 100%;
        margin-bottom: 8px;
    }

    .leipzig-2026 .lp-data-table th {
        width: 42%;
    }

    .leipzig-2026 .lp-expert-copy {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .leipzig-2026 .lp-hero h1 {
        font-size: 30px;
    }

    .leipzig-2026 .lp-stat-grid {
        gap: 9px;
    }

    .leipzig-2026 .lp-stat {
        min-height: 0;
        padding: 14px 16px;
    }

    .leipzig-2026 .lp-card-body {
        padding: 20px;
    }

    .leipzig-2026 #investment_chart {
        height: 410px;
        min-height: 410px;
    }

    .leipzig-2026 .lp-range-label {
        display: block;
    }

    .leipzig-2026 .lp-range-label output {
        display: inline-block;
        margin-top: 5px;
    }

    .leipzig-2026 .lp-data-table > tbody > tr > th,
    .leipzig-2026 .lp-data-table > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .leipzig-2026 .lp-data-table > tbody > tr > th {
        padding-bottom: 6px;
        border-top: 1px solid #dfe4ee;
    }

    .leipzig-2026 .lp-data-table > tbody > tr > td {
        padding-top: 7px;
        border-top: 0;
    }
}

/* -------------------------------------------------------------------------
 * Final design refinement: closer to the established QNG landing page
 * ---------------------------------------------------------------------- */

/* Eyebrows remain restrained, but need enough contrast on pale blue areas. */
.leipzig-2026 .lp-kicker,
.leipzig-2026 .lp-section-kicker,
.leipzig-2026 .lp-badge {
    color: #5d73a8;
}

.leipzig-2026 .lp-section-heading {
    max-width: 980px;
}

.leipzig-2026 .lp-section-heading h2 {
    font-size: 29px;
}

/* QNG highlighting language: deliberate emphasis without heavy bold text. */
.leipzig-2026 strong.highlight,
.leipzig-2026 .jae-container strong {
    font-weight: normal;
    background-color: #eaeefc;
}

/* Use the same triangular geometry as the QNG/Webshims range handle. */
.leipzig-2026 input[type="range"]::-webkit-slider-thumb {
    width: 0;
    height: 0;
    margin-top: -7px;
    background: transparent;
    border: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 20px solid #11368a;
    border-bottom: none;
    border-radius: 0;
    clip-path: none;
    appearance: none;
    -webkit-appearance: none;
}

.leipzig-2026 input[type="range"]::-moz-range-thumb {
    width: 0;
    height: 0;
    background: transparent;
    border: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 20px solid #11368a;
    border-bottom: none;
    border-radius: 0;
    clip-path: none;
}

/* Fallback when the old QNG Webshims layer is loaded elsewhere. */
.leipzig-2026 .ws-range-rail.ws-range-track .ws-range-thumb,
.leipzig-2026 .ws-range .ws-range-thumb {
    position: relative;
    top: -7px;
    width: 0;
    height: 0;
    background-color: transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 20px solid #11368a;
    border-bottom: none;
}

.leipzig-2026 .ws-range .ws-range-progress {
    background: #3e6ece;
}

/* More horizontal room for the chart on wide screens. */
.leipzig-2026 .lp-chart-panel {
    overflow: hidden;
}

.leipzig-2026 #investment_chart {
    height: 720px;
    min-height: 720px;
}

/* Subtle even/odd rhythm without turning every object into a new design. */
.leipzig-2026 #angebote-im-detail {
    background: #ffffff;
}

.leipzig-2026 .lp-offer {
    margin-right: -28px;
    margin-left: -28px;
    padding: 56px 28px;
    border-top: 0;
    border-bottom: 1px solid #d9dfeb;
}

.leipzig-2026 .lp-offer-odd {
    background: #ffffff;
}

.leipzig-2026 .lp-offer-even {
    background: #f0f2f7;
}

.leipzig-2026 .lp-offer:last-of-type {
    border-bottom: 0;
}

.leipzig-2026 .lp-offer-odd .lp-fit-box {
    background: #f0f2f7;
}

.leipzig-2026 .lp-offer-even .lp-fit-box {
    background: #ffffff;
}

.leipzig-2026 .lp-offer .lp-badge {
    color: #536a9f;
}

/* Role section: more reading width and QNG-style highlighted statements. */
.leipzig-2026 .lp-role-copy {
    max-width: 590px;
    padding: 18px 0 18px 28px;
}

.leipzig-2026 .lp-role-copy h2 {
    margin-bottom: 15px;
    font-size: 27px;
}

.leipzig-2026 .lp-role-copy p {
    line-height: 1.82;
}

/* The benefits box deliberately returns to the narrower QNG overlay rhythm. */
.leipzig-2026 .lp-benefits-row {
    margin-top: 38px;
}

.leipzig-2026 .lp-trigonus-benefits {
    margin-top: 0;
    padding: 38px 42px;
    background: #24499f;
}

.leipzig-2026 .lp-trigonus-benefits h3 {
    margin-bottom: 20px;
}

.leipzig-2026 .lp-benefit-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leipzig-2026 .lp-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 10px;
    color: #ffffff;
    line-height: 1.55;
}

.leipzig-2026 .lp-benefit-list li:last-child {
    margin-bottom: 0;
}

.leipzig-2026 .lp-benefit-list strong,
.leipzig-2026 .lp-benefit-list span {
    color: #ffffff;
}

.leipzig-2026 .lp-benefit-list strong {
    font-weight: 700;
}

/* Full-width horizontal CTA instead of a small box floating in whitespace. */
.leipzig-2026 .lp-contact-section {
    padding: 54px 0;
    background: #ffffff;
}

.leipzig-2026 .lp-contact-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 34px 40px;
    /*
    background: #f0f2f7;
    */
    border-top: 0;
    border-left: 5px solid #11368a;
    border-radius: 4px;
    text-align: left;
}

.leipzig-2026 .lp-contact-copy {
    max-width: 780px;
}

.leipzig-2026 .lp-contact-panel h2 {
    margin: 0 0 10px;
    font-size: 28px;
    text-align: left;
}

.leipzig-2026 .lp-contact-panel p {
    max-width: none;
    margin: 0;
    text-align: left;
}

.leipzig-2026 .lp-contact-action {
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .leipzig-2026 #investment_chart {
        height: 610px;
        min-height: 610px;
    }

    .leipzig-2026 .lp-role-copy {
        max-width: none;
        padding-left: 0;
    }

    .leipzig-2026 .lp-benefits-row > [class*="col-"] {
        width: 100%;
    }

    .leipzig-2026 .lp-contact-panel {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .leipzig-2026 .lp-offer {
        margin-right: -15px;
        margin-left: -15px;
        padding: 44px 15px;
    }

    .leipzig-2026 .lp-trigonus-benefits {
        padding: 30px 24px;
    }

    .leipzig-2026 .lp-contact-panel {
        display: block;
        padding: 28px 24px;
    }

    .leipzig-2026 .lp-contact-action {
        margin-top: 22px;
    }

    .leipzig-2026 .lp-contact-action .lp-cta-button {
        width: 100%;
    }

    .leipzig-2026 #investment_chart {
        height: 470px;
        min-height: 470px;
    }
}

@media (max-width: 480px) {
    .leipzig-2026 #investment_chart {
        height: 420px;
        min-height: 420px;
    }
}


/* Rechnerhinweis: Erklärung und Kontakt in einer gemeinsamen Box. */
.leipzig-2026 .lp-highlight-box p {
    margin: 0 0 10px;
}

.leipzig-2026 .lp-highlight-box .lp-highlight-box-detail {
    color: #4d5668;
    font-size: 13px;
    line-height: 1.6;
}

.leipzig-2026 .lp-highlight-box > a {
    display: inline-block;
    margin-top: 2px;
    font-weight: 600;
}

/*
 * Persönliche Einordnung:
 * Das Panel nutzt die volle Containerbreite.
 * Der Inhalt bleibt links, rechts entsteht bewusster Freiraum.
 */
.leipzig-2026 .lp-contact-panel {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 38px 40px;
    text-align: left;
}

.leipzig-2026 .lp-contact-copy {
    max-width: none;
}

.leipzig-2026 .lp-contact-panel h2,
.leipzig-2026 .lp-contact-panel p {
    text-align: left;
}

.leipzig-2026 .lp-contact-panel p {
    margin: 0;
}

.leipzig-2026 .lp-contact-action {
    margin-top: 22px;
}

@media (max-width: 767px) {
    .leipzig-2026 .lp-contact-panel {
        padding: 28px 24px;
    }
}
/* =========================================================
   Leipzig 2026 – responsive Tabellen und Dokument-CTAs
   Ans Ende von assets/css/leipzig-2026.css setzen
   ========================================================= */

/*
 * Grundschutz:
 * Lange Dateinamen, Texte oder Links dürfen die Inhaltsbreite
 * auf kleinen Bildschirmen nicht vergrößern.
 */
.leipzig-2026,
.leipzig-2026 * {
    box-sizing: border-box;
}

.leipzig-2026 table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.leipzig-2026 table th,
.leipzig-2026 table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* ---------------------------------------------------------
   PDF-CTAs – Tablet und Desktop
   --------------------------------------------------------- */

/*
 * Funktioniert unabhängig davon, welche konkrete Buttonklasse
 * im PHP-Markup verwendet wird.
 */
.leipzig-2026 table a[href$=".pdf"],
.leipzig-2026 table a[href*=".pdf?"] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    max-width: 100%;
    min-height: 42px;
    margin: 4px 8px 4px 0;
    padding: 9px 13px;

    color: #11368a;
    background: #ffffff;
    border: 1px solid #b8c4df;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;

    white-space: normal;
    overflow-wrap: anywhere;

    transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
}

.leipzig-2026 table a[href$=".pdf"]:hover,
.leipzig-2026 table a[href$=".pdf"]:focus,
.leipzig-2026 table a[href*=".pdf?"]:hover,
.leipzig-2026 table a[href*=".pdf?"]:focus {
    color: #ffffff;
    background: #11368a;
    border-color: #11368a;
    text-decoration: none;
}

/*
 * PDF-Icon nicht stauchen.
 */
.leipzig-2026 table a[href$=".pdf"] i,
.leipzig-2026 table a[href$=".pdf"] svg,
.leipzig-2026 table a[href*=".pdf?"] i,
.leipzig-2026 table a[href*=".pdf?"] svg {
    flex: 0 0 auto;
}


/* ---------------------------------------------------------
   Tablet: Links dürfen umbrechen
   --------------------------------------------------------- */

@media (max-width: 991px) {
    .leipzig-2026 table {
        table-layout: auto;
    }

    /*
     * Linke Bezeichnungsspalte bleibt kompakt,
     * ohne die Dokument-CTAs zusammenzuquetschen.
     */
    .leipzig-2026 table td:first-child,
    .leipzig-2026 table th:first-child {
        width: 35%;
    }

    .leipzig-2026 table td:last-child {
        width: 65%;
    }

    .leipzig-2026 table a[href$=".pdf"],
    .leipzig-2026 table a[href*=".pdf?"] {
        vertical-align: top;
    }
}


/* ---------------------------------------------------------
   Smartphone: Jede Tabellenzeile wird ein lesbarer Datenblock
   --------------------------------------------------------- */

@media (max-width: 767px) {
    /*
     * Bootstrap-Container auf sehr schmalen Geräten nicht
     * zusätzlich durch große Innenabstände verengen.
     */
    .leipzig-2026 .lp-offer-section .container,
    .leipzig-2026 .lp-offer-detail .container,
    .leipzig-2026 #angebote .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /*
     * Klassische Tabelle in vertikale Datenkarten umwandeln.
     */
    .leipzig-2026 table,
    .leipzig-2026 table tbody,
    .leipzig-2026 table tr,
    .leipzig-2026 table th,
    .leipzig-2026 table td {
        display: block;
        width: 100% !important;
        max-width: 100%;
    }

    .leipzig-2026 table {
        border: 0;
        background: transparent;
    }

    .leipzig-2026 table tbody {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .leipzig-2026 table tr {
        margin: 0;
        padding: 13px 14px;

        background: #ffffff;
        border: 1px solid #dfe4ef;
        border-left: 3px solid #11368a;
        border-radius: 2px;
    }

    /*
     * Zellen verlieren die Desktop-Trennlinien.
     */
    .leipzig-2026 table th,
    .leipzig-2026 table td {
        padding: 0;
        border: 0;
        text-align: left;
    }

    /*
     * Erste Zelle = Bezeichnung, etwa „Kaufpreise“.
     */
    .leipzig-2026 table td:first-child,
    .leipzig-2026 table th:first-child {
        margin: 0 0 5px;
        color: #52648e;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    /*
     * Zweite Zelle = eigentlicher Wert.
     */
    .leipzig-2026 table td:last-child,
    .leipzig-2026 table th:last-child {
        color: #273044;
        font-size: 15px;
        line-height: 1.55;
    }

    /*
     * Beide Dokumente untereinander statt gequetscht nebeneinander.
     * Große Touchfläche nach gängigen Mobile-Konventionen.
     */
    .leipzig-2026 table a[href$=".pdf"],
    .leipzig-2026 table a[href*=".pdf?"] {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin: 7px 0 0;
        padding: 12px 14px;

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

        font-size: 15px;
        line-height: 1.35;
    }

    /*
     * Erster PDF-Link braucht keinen zusätzlichen oberen Abstand,
     * sofern er direkt am Beginn der Wertzelle steht.
     */
    .leipzig-2026 table td:last-child > a[href$=".pdf"]:first-child,
    .leipzig-2026 table td:last-child > a[href*=".pdf?"]:first-child {
        margin-top: 2px;
    }

    /*
     * Erläuterung unter den Downloads klar absetzen.
     */
    .leipzig-2026 table td:last-child small,
    .leipzig-2026 table td:last-child .lp-document-note,
    .leipzig-2026 table td:last-child .lp-table-note {
        display: block;
        width: 100%;
        margin-top: 9px;
        color: #687184;
        font-size: 12px;
        line-height: 1.5;
    }

    /*
     * Allgemeine große CTA-Buttons ebenfalls vor Überlauf schützen.
     */
    .leipzig-2026 .lp-cta-button,
    .leipzig-2026 .jae-btn,
    .leipzig-2026 .rueckrufBitteTrigger {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* ---------------------------------------------------------
   Sehr schmale Geräte
   --------------------------------------------------------- */

@media (max-width: 420px) {
    .leipzig-2026 table tr {
        padding: 12px;
    }

    .leipzig-2026 table td:last-child {
        font-size: 14px;
    }

    .leipzig-2026 table a[href$=".pdf"],
    .leipzig-2026 table a[href*=".pdf?"] {
        padding: 11px 12px;
        font-size: 14px;
    }
}
/* Hinweistext unter Factsheet und Beispielrechnung darf umbrechen */
@media (max-width: 767px) {
    .leipzig-2026 table td:last-child small,
    .leipzig-2026 table td:last-child .lp-document-note,
    .leipzig-2026 table td:last-child .lp-table-note {
        display: block;
        width: 100%;
        max-width: 100%;

        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;

        margin-top: 9px;
        line-height: 1.5;
    }
}

/* =========================================================
   Mobile: Innenabstand für die Hauptbereiche
   Verhindert, dass Überschriften am Bildschirmrand kleben
   ========================================================= */

@media (max-width: 767px) {
    /*
     * Etwas mehr Abstand links als rechts.
     * Gilt nur für die obersten Container der Inhaltssektionen.
     */
    .leipzig-2026 section > .container,
    .leipzig-2026 .lp-hero > .container,
    .leipzig-2026 .lp-calculator-section > .container,
    .leipzig-2026 .lp-offer-section > .container,
    .leipzig-2026 .lp-expert-section > .container,
    .leipzig-2026 .lp-contact-section > .container {
        width: 100%;
        padding-left: 22px !important;
        padding-right: 18px !important;
    }

    /*
     * Bootstrap verwendet negative Außenabstände bei .row.
     * Diese werden reduziert, damit der zusätzliche Containerabstand
     * nicht wieder aufgehoben wird.
     */
    .leipzig-2026 section > .container > .row,
    .leipzig-2026 .lp-hero > .container > .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    /*
     * Passende Spaltenabstände: Der tatsächliche Textbeginn
     * bleibt dadurch bei ungefähr 22 px vom linken Bildschirmrand.
     */
    .leipzig-2026 section > .container > .row > [class*="col-"],
    .leipzig-2026 .lp-hero > .container > .row > [class*="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* =========================================================
   EK-Rendite in den Übersichtskarten + Modellhinweis
   Nur zusätzlich ans Ende der bestehenden CSS-Datei setzen
   ========================================================= */

/*
 * Das Sternchen an der EK-Rendite etwas ruhiger darstellen.
 */
.leipzig-2026 .lp-mini-fact sup {
    position: relative;
    top: -0.25em;
    margin-left: 1px;
    color: var(--trigonus-blue);
    font-size: 9px;
    line-height: 1;
}

/*
 * Lange Bezeichnungen wie „EK-Rendite n. St.“
 * müssen innerhalb der kleinen Spalte umbrechen können.
 */
.leipzig-2026 .lp-mini-fact span,
.leipzig-2026 .lp-mini-fact strong {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}


/*
 * In deinem bestehenden CSS wird .lp-mini-facts unter 991 px
 * wieder auf eine einzige Spalte gesetzt.
 *
 * Dieser nachgelagerte Patch erzeugt stattdessen ein sinnvolles
 * 2×2-Raster für die vier Kennzahlen.
 */
@media (max-width: 991px) {
    .leipzig-2026 .lp-mini-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/*
 * Gemeinsame Fußnote unter den vier Angebotskarten.
 * Keine zusätzliche große Box, sondern eine ruhige Trennlinie.
 */
.leipzig-2026 .lp-model-note {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 7px;

    width: 100%;
    margin: 24px 0 0;
    padding: 14px 0 0;

    color: var(--trigonus-muted);
    border-top: 1px solid var(--trigonus-border);

    font-size: 12.5px;
    line-height: 1.65;
}

.leipzig-2026 .lp-model-note > sup {
    flex: 0 0 auto;
    color: var(--trigonus-blue);
    font-size: 11px;
    font-weight: 700;
}

.leipzig-2026 .lp-model-note-copy {
    flex: 1 1 720px;
    min-width: 0;

    white-space: normal;
    overflow-wrap: anywhere;
}


/*
 * Der CTA bleibt optisch Teil des Hinweises und wird nicht
 * zu einem weiteren dominanten blauen Hauptbutton.
 */
.leipzig-2026 .lp-model-note-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-left: 18px;

    color: var(--trigonus-blue);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;

    white-space: normal;
}

.leipzig-2026 .lp-model-note-cta:hover,
.leipzig-2026 .lp-model-note-cta:focus {
    color: var(--trigonus-blue-hover);
    text-decoration: underline;
}

.leipzig-2026 .lp-model-note-cta .pe-7s-angle-right-circle {
    flex: 0 0 auto;
    font-size: 19px;
}


/*
 * Mobile: Text normal fließen lassen und CTA darunter setzen.
 */
@media (max-width: 767px) {
    .leipzig-2026 .lp-model-note {
        display: block;
        font-size: 12px;
    }

    .leipzig-2026 .lp-model-note > sup {
        display: inline;
        margin-right: 2px;
    }

    .leipzig-2026 .lp-model-note-copy {
        display: inline;
    }

    .leipzig-2026 .lp-model-note-cta {
        display: flex;
        width: fit-content;
        max-width: 100%;
        margin: 11px 0 0;

        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .leipzig-2026 .lp-mini-fact {
        padding-right: 6px;
        padding-left: 6px;
    }

    .leipzig-2026 .lp-mini-fact span {
        font-size: 10px;
    }

    .leipzig-2026 .lp-mini-fact strong {
        font-size: 12px;
    }
}