/* Overrides for pages using the landing2026 backend layout */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

h5, h6, p, li:not(.custom-menu li, .homefooter li), strong {
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    letter-spacing: 0.4px;
}

@media (min-width: 993px) {
    .dfa-page .container,
    .dfc-page .container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

.header-home-background-layer {
    margin: 0 !important;
}
.header-home-background-layer:after {
    display: none;
}

.landing-hero {
    position: relative;
    min-height: 720px;
    height: auto !important;
    display: flex;
    align-items: center;
}

.landing-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1, 25, 43, 0.5) 0%, rgba(1, 25, 43, 0.35) 40%, rgba(1, 25, 43, 0.88) 100%);
    z-index: 0;
    pointer-events: none;
}

.landing-hero-container {
    padding-top: 26vh;
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
    min-height: 98vh;
}

.landing-hero-content {
    max-width: 1000px;
}

/* Content element at colPos 5: plain text, e.g. "✓ EGRED 2 · EASA-anerkannte Ausbildungsorganisation".
   Fluid wraps it in <div class="hero-badge">, so no HTML/classes needed in the editor. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #3ddb84;
    border-radius: 30px;
    background-color: rgba(24, 212, 122, 0.15);
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 36px;
}

.hero-badge:before {
    content: "\2713";
    margin-right: 8px;
    color: #3ddb84;
}

.hero-badge,
.hero-badge p,
.hero-badge * {
    color: #3ddb84 !important;
    font-weight: 700;
    font-size: 16px;
}

.hero-badge p,
.hero-badge * {
    background-color: transparent !important;
}

.hero-badge p {
    margin-bottom: 0;
}

/* Content element at colPos 4: heading + intro paragraph.
   Select the highlighted words in the heading and apply the "Highlight (green)"
   style from the RTE Styles dropdown (wraps them in <span class="hero-highlight">). */
.landing-hero-content h1 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1.1;
    margin-bottom: 28px;
}

.landing-hero-content h1 .hero-highlight {
    color: #3ddb84;
}

.landing-hero-content p {
    font-size: 20px;
    max-width: 620px;
    margin-bottom: 32px;
}

.landing-hero-content p,
.landing-hero-content p * {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: transparent !important;
}

/* Content element at colPos 9: the two CTA links, e.g.
   <p><a href="...">Jetzt online anmelden</a> <a href="...">Lieber erst beraten lassen</a></p>
   Insert each as a normal link via the RTE link dialog, then pick the matching
   style from the link's "Class" dropdown: "Primary (orange)" / "Secondary (outline)". */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.hero-actions > div,
.hero-actions p {
    display: contents;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: none;
    filter: none;
    background-image: none;
}

.hero-actions a.cta-primary {
    background-color: #e8630a;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(232, 99, 10, 0.35);
}

.hero-actions a.cta-primary:after {
    content: "\2192";
}

/* .cta-primary button style, usable in any content element/section (not just
   hero actions), e.g. the testimonial section's CTA button. */
a.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    background-color: #e8630a;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(232, 99, 10, 0.35);
}

a.cta-primary:after {
    content: "\2192";
}

.hero-actions a.cta-secondary {
    background-color: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-actions a.cta-secondary:hover {
    border-color: #fff;
}

/* .cta-secondary button style, usable in any content element/section (not
   just hero actions), e.g. the "Mehr als eine Ausbildung" CTA button. */
a.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    background-color: transparent;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

a.cta-secondary:after {
    content: "\2192";
}

a.cta-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #fff;
}

/* "Jetzt anmelden" CTA button added to the sticky top bar
   (partials/HeaderdfaLanding.html), scaled down to fit the 75px-tall bar.
   No arrow here (unlike the base .cta-primary) to keep it compact. */
.dfainfotopbar-new a.header-cta-btn {
    padding: 10px 20px;
    font-size: 14px;
    vertical-align: middle;
    margin-top: 5px;
}

.dfainfotopbar-new a.header-cta-btn:after {
    content: none;
}

/* Contact/Login/Winkelwagen icon+label sit on the dark navy side of the top
   bar gradient on Landing2026 (HeaderdfaLanding.html, marked with
   .landing-header-bar); the site-wide colors are dark navy on dark navy
   there, so make them white so they stay legible. Training2026 reuses the
   shared Headerdfa.html (no .landing-header-bar) and keeps the original
   dark-navy-on-green styling, so this must not be scoped to
   .dfainfotopbar-new alone even though this stylesheet loads on both pages. */
.landing-header-bar .menu-items-right-text {
    color: #fff;
}

.landing-header-bar .menu-items-right .fas {
    color: #fff;
}

.landing-header-bar .languagemenu {
    color: #fff;
}

/* Content elements at colPos 6/14/15/16: one stat each, e.g.
   <p><span class="accent-lg">35.000+</span></p>
   <p>Ausgebildete Piloten</p>
   Select the number text and pick "Accent Text (green, bold, large)" from the
   RTE Styles dropdown; leave the caption line as plain text. */
.landing-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-stat p {
    margin-bottom: 4px;
}

.hero-stat p:last-child {
    margin-bottom: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-stat .accent-lg {
    display: inline-block;
    font-size: 28px;
    line-height: 1.2;
}

.hero-stat .accent-lg,
.hero-stat .accent-lg * {
    color: #3ddb84 !important;
    font-weight: 700 !important;
    background-color: transparent !important;
}

.hero-stat p,
.hero-stat p * {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: transparent !important;
}

/* USP section: colPos 17 (left, eyebrow + heading), colPos 18 (right, intro
   paragraph + a numbered list), colPos 19 (dark CTA box, rendered under the
   right column). For colPos 17, write the eyebrow line, select it, and pick
   "Eyebrow Label (orange)" or "(green)" from the RTE Styles dropdown:
   <p class="eyebrow eyebrow-orange">EGRED 2</p>
   <h2>EIN EU-DROHNENZEUGNIS IST DER ANFANG. EGRED 2 VERLANGT MEHR.</h2>
   For colPos 18, write the intro paragraph followed by a normal numbered list
   (toolbar "Insert/Remove Numbered List" button) — numbering, colour and the
   divider lines are all added by CSS:
   <p>Intro copy…</p>
   <ol><li><strong>Betriebshandbuch</strong><br>Description…</li>…</ol>
   For colPos 19, write the text, then insert the link via the RTE link
   dialog and pick "Arrow Green" from its Class dropdown:
   <p>Finden Sie in fünf Minuten heraus, wo Ihre Organisation steht.</p>
   <p><a href="#" class="link-arrow-green">EGRED 2 Betriebs-Checkliste herunterladen</a></p> */
.usp-section {
    background-color: #efe8dc;
    padding: 90px 0;
}

/* Reusable RTE style, not tied to this section: select a short line of text
   (its own paragraph) and pick "Eyebrow Label (orange)" or "(green)" from the
   Styles dropdown. */
.eyebrow {
    display: inline-block;
    position: relative;
    padding-left: 26px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.eyebrow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 2px;
    transform: translateY(-50%);
}

.eyebrow,
.eyebrow * {
    background-color: transparent !important;
}

.eyebrow-orange,
.eyebrow-orange * {
    color: #e8630a !important;
}

.eyebrow-orange:before {
    background-color: #e8630a;
}

.eyebrow-green,
.eyebrow-green * {
    color: #3ddb84 !important;
}

.eyebrow-green:before {
    background-color: #3ddb84;
}

.usp-left h2 {
    color: #0a1e2e;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0;
}

.usp-right {
    color: #0a1e2e;
}

.usp-right > p:first-child {
    font-size: 18px;
    color: #4a5560;
    max-width: 620px;
    margin-bottom: 32px;
}

.usp-right ol {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    counter-reset: usp-counter;
}

.usp-right ol li {
    counter-increment: usp-counter;
    position: relative;
    padding: 20px 0 20px 55px;
    border-bottom: 1px solid rgba(10, 30, 46, 0.12);
}

.usp-right ol li:first-child {
    padding-top: 0;
}

.usp-right ol li:before {
    content: counter(usp-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 20px;
    color: #e8630a;
    font-weight: 700;
    font-size: 13px;
}

.usp-right ol li:first-child:before {
    top: 0;
}

.usp-right ol li strong {
    color: #0a1e2e;
}

.usp-right ol li p {
    margin-bottom: 0;
}

.usp-cta-box {
    background-color: #0a1e2e;
    border-radius: 8px;
    padding: 30px 36px;
}

.usp-cta-box p {
    margin-bottom: 12px;
}

.usp-cta-box p:last-child {
    margin-bottom: 0;
}

.usp-cta-box p,
.usp-cta-box p *:not(a) {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: transparent !important;
}

/* Reusable RTE link style, not tied to this box: insert a link via the RTE
   link dialog and pick "Arrow Green" or "Arrow Orange" from the Class dropdown. */
.link-arrow-green,
.link-arrow-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
}

.link-arrow-green {
    color: #3ddb84 !important;
}

.link-arrow-orange {
    color: #e8630a !important;
}

.link-arrow-green:after,
.link-arrow-orange:after {
    content: "\2192";
}

/* "For Wen" section: colPos 20 (eyebrow + heading), colPos 24/25/26/27 (one
   card each). For colPos 20, use the same eyebrow + h2 pattern as the USP
   section above (pick "Eyebrow Label (green)" this time):
   <p class="eyebrow eyebrow-green">FÜR WEN</p>
   <h2>FÜR WEN IST DIESES PROGRAMM?</h2>
   For each card, paste the icon markup via the RTE's Source view (the icon
   can't be inserted from the Styles dropdown — that only restyles selected
   text, it can't create a new empty element), then add a bold title
   paragraph and a plain description paragraph:
   <i class="usp-icon fas fa-shield-alt"></i>
   <p><strong>Feuerwehr &amp; Katastrophenschutz</strong></p>
   <p>Nachweissuche, Lagerkundung…</p>
   Icon colour alternates orange/green automatically by card position. */
.forwen-section {
    background-color: #f2efe8;
    padding: 90px 0;
}

.forwen-section .eyebrow {
    margin-bottom: 16px;
}

.forwen-section h2 {
    color: #0a1e2e;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 40px;
}

.forwen-grid {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgba(10, 30, 46, 0.12);
    background-color: #f7f4ee;
}

.forwen-card {
    flex: 1 1 0;
    min-width: 220px;
    padding: 32px 28px;
    border-right: 1px solid rgba(10, 30, 46, 0.12);
}

.forwen-card:last-child {
    border-right: none;
}

.usp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 13px;
    font-style: normal;
    margin-bottom: 24px;
}

.forwen-card:nth-child(odd) .usp-icon {
    color: #e8630a;
}

.forwen-card:nth-child(even) .usp-icon {
    color: #3ddb84;
}

.forwen-card p:first-of-type {
    font-weight: 700;
    color: #0a1e2e;
    margin-bottom: 8px;
}

.forwen-card p:last-child {
    color: #4a5560;
    font-size: 14px;
}

@media (max-width:992px) {
    .forwen-card {
        flex: 1 1 50%;
    }
}

@media (max-width:576px) {
    .forwen-card {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid rgba(10, 30, 46, 0.12);
    }
    .forwen-card:last-child {
        border-bottom: none;
    }
}

/* "Program" section: colPos 28 (eyebrow + heading + intro), colPos 29 (left
   half of the main card), colPos 30 (right half: price + spec list + button),
   colPos 32/33 (the two smaller follow-up cards below).

   For colPos 28:
   <p class="eyebrow eyebrow-green">DAS PROGRAMM</p>
   <h2>DIE EGRED BOS ONLINE-THEORIE — IHRE BASIS FÜR KONFORMEN DROHNENBETRIEB</h2>
   <p>Das Kernprodukt für jede BOS-Organisation. Darunter: zwei Wege, um weiterzugehen.</p>

   For colPos 29 (pick "Pill Badge (green)" from Styles for the first line and
   "Section Label (green, no dash)" for the list label; the checklist is a
   normal bulleted list, laid out in 2 columns by CSS):
   <p class="pill pill-green">KERNPROGRAMM · ONLINE</p>
   <h3>EGRED BOS Training</h3>
   <p>6–8 Stunden Selbststudium…</p>
   <p class="label-green">WAS DIE AUSBILDUNG ABDECKT</p>
   <ul><li>DE-STS-BOS-Szenarien &amp; SORA/SAIL II</li>…</ul>

   For colPos 30, paste the ready-made markup via RTE Source view — see the
   comment above the ".price-row" rule further down this file.

   For colPos 32/33, same eyebrow + h3 + p pattern, then a plain bulleted
   list for the tag pills, then one link (pick "Arrow Green" for card 1,
   "Arrow Orange" for card 2 from the link's Class dropdown):
   <p class="eyebrow eyebrow-green">PRAKTISCHE VERTIEFUNG</p>
   <h3>Wollen Sie die Anwendung vertiefen?</h3>
   <p>Die Online-Theorie ist die Basis…</p>
   <ul><li>VLOS-Praxistraining</li><li>Nachtoperationen</li><li>BVLOS</li></ul>
   <p><a href="#" class="link-arrow-green">Praxistrainings ansehen</a></p> */
.program-section {
    background-color: #0a1e2e;
    padding: 90px 0;
}

.program-section .eyebrow {
    margin-bottom: 16px;
}

.program-section h2 {
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 16px;
}

.program-section h2,
.program-section h2 * {
    color: #fff !important;
    background-color: transparent !important;
}

.program-section > .container > div > p:not(.eyebrow) {
    margin-bottom: 40px;
}

.program-section > .container > div > p:not(.eyebrow),
.program-section > .container > div > p:not(.eyebrow) * {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
}

.program-card {
    display: flex;
    flex-wrap: wrap;
    background-color: #132b40;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 40px;
    gap: 40px;
    margin-bottom: 24px;
}

.program-card-left {
    flex: 1 1 55%;
    min-width: 280px;
}

.program-card-right {
    flex: 1 1 300px;
    background-color: #1f354d;
    border-radius: 8px;
    padding: 28px;
    align-self: flex-start;
}

/* Reusable RTE style, not tied to this section: a small solid pill badge. */
.pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pill,
.pill * {
    background-color: transparent !important;
}

.pill-green {
    background-color: rgba(24, 212, 122, 0.15) !important;
}

.pill-green,
.pill-green * {
    color: #3ddb84 !important;
}

.pill-orange {
    background-color: rgba(232, 99, 10, 0.15) !important;
}

.pill-orange,
.pill-orange * {
    color: #e8630a !important;
}

.program-card-left h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.program-card-left p:not(.pill):not(.eyebrow):not(.label-green):not(.label-orange) {
    margin-bottom: 24px;
}

.program-card-left p:not(.pill):not(.eyebrow):not(.label-green):not(.label-orange),
.program-card-left p:not(.pill):not(.eyebrow):not(.label-green):not(.label-orange) * {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: transparent !important;
}

/* Reusable RTE style, not tied to this section: same colour treatment as
   the eyebrow labels but without the dash — for labels that sit directly
   under a title/paragraph instead of above a heading. */
.label-green,
.label-orange {
    display: block;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.label-green,
.label-green * {
    color: #3ddb84 !important;
    background-color: transparent !important;
}

.label-orange,
.label-orange * {
    color: #e8630a !important;
    background-color: transparent !important;
}

.program-card-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 30px;
}

.program-card-left ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    color: #fff;
    break-inside: avoid;
}

.program-card-left ul li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #3ddb84;
    font-weight: 700;
}

/* colPos 30: paste this as-is (via RTE Source view) — no manual styling to
   apply, all classes below are already wired to CSS:
   <div class="price-row"><span class="amount">€249,99</span><span class="unit">inkl. MwSt. / Person</span></div>
   <div class="price-note">Direkt nach Bestellung startklar</div>
   <div class="spec-list">
     <div class="spec-row"><span>Dauer</span><span>6–8 Stunden</span></div>
     <div class="spec-row"><span>Format</span><span>Online, eigenes Tempo</span></div>
     <div class="spec-row"><span>Prüfung EGRED 2</span><span>Lernkontrolle, kein Examen</span></div>
     <div class="spec-row"><span>EASA STS-Prüfung</span><span>Kostenlos inklusive</span></div>
     <div class="spec-row"><span>Voraussetzung STS</span><span>Gültiger A2-Nachweis</span></div>
   </div>
   <a href="#" class="btn btn-primary">Jetzt online anmelden</a> */
.price-row {
    margin-bottom: 8px;
}

.price-row .amount,
.price-row .unit {
    color: #fff;
}

.price-row .amount {
    font-size: 32px;
    font-weight: 700;
    margin-right: 8px;
}

.price-row .unit {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.price-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-list {
    margin-bottom: 20px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.spec-row span:first-child {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.spec-row span:last-child {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.program-card-right .btn.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 30px;
    background-color: #e8630a;
    color: #fff !important;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    box-shadow: none;
}

.program-followup-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.program-followup-card {
    flex: 1 1 300px;
    background-color: #132b40;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 32px;
}

.program-followup-card h3 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 8px;
}

.program-followup-card p:not(.eyebrow) {
    margin-bottom: 20px;
}

.program-followup-card p:not(.eyebrow,.label-green,.label-orange) {
    color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
}

.program-followup-card ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
}

.program-followup-card ul li {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Full-bleed image section: colPos 34, overlays the page's SECOND FAL image
   (the hero above already uses the first one). Text stays inside the normal
   .container width instead of running edge-to-edge.
   <p class="eyebrow eyebrow-green">REALER EINSATZ</p>
   <h2>VOM TRAININGSRAUM DIREKT IN DEN EINSATZ.</h2>
   <p>Unsere Ausbildung ist auf die Geräte und Szenarien ausgerichtet…</p> */
.image-section {
    position: relative;
    min-height: 64vh;
    display: flex;
    align-items: center;
}

.image-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(30, 30, 32, 0.9) 0%, rgba(30, 30, 32, 0.65) 35%, rgba(30, 30, 32, 0.3) 70%);
    z-index: 0;
    pointer-events: none;
}

.image-section-container {
    position: relative;
    z-index: 1;
    padding-bottom: 60px;
}

.image-section-container .eyebrow {
    margin-bottom: 16px;
}

.image-section-container h2 {
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 600px;
    margin-bottom: 16px;
}

.image-section-container h2,
.image-section-container h2 * {
    color: #fff !important;
    background-color: transparent !important;
}

.image-section-container p:not(.eyebrow) {
    max-width: 480px;
}

.image-section-container p:not(.eyebrow),
.image-section-container p:not(.eyebrow) * {
    color: rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
}

/* Testimonial section: colPos 35 (left: badge, heading, desc, checklist),
   colPos 36 (button under the left column), colPos 37 (quote, right column),
   colPos 38 (author block under the quote — paste via RTE Source view).

   For colPos 35 (pick "Pill Badge (orange)" from Styles for the first line;
   the checklist is a normal bulleted list, laid out in 2 columns by CSS):
   <p class="pill pill-orange">DRONE FLIGHT COMPANY</p>
   <h2>Zertifiziert ist nicht dasselbe wie einsatzbereit.</h2>
   <p>Andere Anbieter verkaufen ein Zertifikat…</p>
   <ul><li>Entwicklung des Betriebshandbuchs</li>…</ul>

   For colPos 36, insert the link and pick "Primary (orange)" from the link's
   Class dropdown:
   <p><a href="#" class="cta-primary">Mehr über Drone Flight Company</a></p>

   For colPos 37, just write the quote as a plain paragraph — the green quote
   mark above it is added automatically by CSS:
   <p>Die Beschaffung von Drohnen ist nicht die Herausforderung…</p>

   For colPos 38, paste via Source view (avatar initials, name, title):
   <div class="testimonial-author">
     <div class="avatar">NL</div>
     <div class="author-info"><strong>Nils Lau</strong><span>Sales Manager Germany</span></div>
   </div> */
.testimonial-section {
    background-color: #efe8dc;
    padding: 90px 0;
}

.testimonial-card {
    display: flex;
    flex-wrap: wrap;
    background-color: #0a1e2e;
    border-radius: 10px;
    padding: 48px;
    gap: 40px;
}

.testimonial-card-left {
    flex: 1 1 55%;
    min-width: 280px;
}

.testimonial-card-left h2,
.testimonial-card-left h3 {
    color: #fff;
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 16px;
}

.testimonial-card-left p:not(.pill) {
    margin-bottom: 24px;
}

.testimonial-card-left p:not(.pill, .cta-primary, .eyebrow, .label-green, .label-orange) {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: transparent !important;
}

.testimonial-card-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 30px;
}

.testimonial-card-left ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    color: #fff;
    break-inside: avoid;
}

.testimonial-card-left ul li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #3ddb84;
    font-weight: 700;
}

.testimonial-card-button {
    margin-top: 24px;
}

/* Training2026 "Mehr als eine Ausbildung" section: full-bleed solid dark
   background instead of the beige-section/dark-card look used elsewhere,
   scoped via this extra class so the original testimonial section
   (landing2026) is unaffected. */
.testimonial-section-solid {
    background-color: #0a1e2e;
}

.testimonial-section-solid .testimonial-card {
    background-color: transparent;
    padding: 0;
}

.testimonial-card-right {
    flex: 1 1 320px;
    background-color: #132b40;
    border-radius: 8px;
    padding: 28px;
    align-self: flex-start;
}

.testimonial-quote:before {
    content: "\275D";
    display: block;
    color: #3ddb84;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
}

.testimonial-quote p {
    font-style: italic;
    line-height: 1.6;
}

.testimonial-quote p,
.testimonial-quote p * {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
}

.testimonial-author-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-author .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #3ddb84;
    color: #0a1e2e;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.testimonial-author .author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-author .author-info strong {
    color: #fff;
}

.testimonial-author .author-info span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Review section, colPos 39. Stars are static (added by the template, not
   editable). Content element: quote as the first paragraph, name/organisation
   as the second — bold the organisation name:
   <p>„Die Trainer waren super, es war eine tolle Zusammenarbeit — wir fühlen
   uns gut vorbereitet für den Einsatz."</p>
   <p><strong>Regieeinheit Katastrophenschutz IUK</strong> — Kreis Dithmarschen</p> */
.review-section {
    background-color: #e5f5ec;
    padding: 90px 0;
    text-align: center;
}

.review-stars {
    color: #e8630a;
    font-size: 22px;
    letter-spacing: 4px;
    margin-bottom: 24px;
}

.review-quote {
    max-width: 760px;
    margin: 0 auto;
}

.review-quote p:first-child {
    color: #0a1e2e;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.35;
    margin-bottom: 20px;
}

.review-quote p:last-child {
    font-size: 15px;
    margin-bottom: 0;
}

.review-quote p:last-child,
.review-quote p:last-child * {
    color: rgba(10, 30, 46, 0.55) !important;
    background-color: transparent !important;
}

.review-quote p:last-child strong {
    color: #0a1e2e !important;
    font-weight: 700;
}

/* Final section: colPos 40 (dark CTA bar), colPos 7 (info column, paste HTML),
   colPos 8 (insert a Form content element, form "Beratungsgespräch anfragen").

   For colPos 40, write eyebrow + text, then a link styled "Primary (orange)"
   from the Class dropdown:
   <p class="eyebrow eyebrow-green">BEREITS ENTSCHIEDEN?</p>
   <p>Direkt online anmelden — Zugangscode in Minuten per E-Mail.</p>
   <p><a href="#" class="cta-primary">Jetzt online anmelden</a></p>

   For colPos 7, paste via Source view: */
.final-section {
    background-color: #f7f5f0;
    padding: 90px 0;
}

.final-cta-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 32px;
    row-gap: 6px;
    background-color: #0a1e2e;
    border-radius: 10px;
    padding: 36px 44px;
    margin-bottom: 60px;
}

.final-cta-bar > div {
    display: contents;
}

.final-cta-bar p,
.final-cta-bar h3 {
    margin-bottom: 0;
    grid-column: 1;
    text-transform: none;
    font-size: 16px;
}
.final-cta-bar h3 {
    color: rgba(255, 255, 255, 0.85) !important;
}

.final-cta-bar p:nth-child(2):not(:has(a)),
.final-cta-bar h3 {
    font-weight: 700;
    color: #fff !important;
}

.final-cta-bar p:has(a) {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.final-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.final-info {
    flex: 1 1 480px;
}

.final-info h2 {
    color: #0a1e2e;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 16px;
}

.final-info > p {
    margin-bottom: 32px;
}

.final-info > p:not(.eyebrow) {
    color: #4b5560;
}

/* Contact person block, paste via Source view:
   <div class="final-contact">
     <div class="avatar">NL</div>
     <div class="contact-info">
       <strong>Nils Lau</strong>
       <span>Sales Manager Germany</span>
       <span class="phone">+49 173 571 3641</span>
     </div>
   </div> */
.final-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 36px;
}

.final-contact .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0a1e2e;
    color: #3ddb84;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.final-contact .contact-info {
    display: flex;
    flex-direction: column;
}

.final-contact .contact-info strong {
    color: #0a1e2e;
    font-weight: 700;
}

.final-contact .contact-info span {
    color: #4b5560;
    font-size: 13px;
}

.final-contact .contact-info .phone a {
    color: #3ddb84 !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    margin-top: 2px;
}

/* Link cards, paste via Source view (repeat per card):
   <a class="final-link-card" href="#">
     <span class="final-link-icon"><i class="fas fa-clipboard-check"></i></span>
     <span class="final-link-text">
       <strong>EGRED 2 Betriebs-Checkliste</strong>
       <span>Status Ihrer Organisation in 5 Minuten</span>
     </span>
     <span class="final-link-arrow">&#8594;</span>
   </a> */
.final-link-card,
.final-link-card:hover,
.final-link-card * {
    text-decoration: none !important;
}

.final-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
}

.final-link-card:hover {
    box-shadow: 0 8px 24px rgba(10, 30, 46, 0.1);
}

.final-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(24, 212, 122, 0.15);
    color: #3ddb84;
    font-size: 16px;
    flex-shrink: 0;
}

.final-link-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.final-link-text strong {
    color: #0a1e2e;
    font-size: 15px;
    font-weight: 700 !important;
}

.final-link-text span {
    color: #4b5560;
    font-size: 13px;
}

.final-link-arrow {
    color: #3ddb84;
    font-weight: 700;
    flex-shrink: 0;
}

/* Form column: insert a Form content element (form "Beratungsgespräch
   anfragen"). Field markup/classes come from the TYPO3 form framework
   template, styled generically below — adjust selectors after checking the
   rendered markup in the browser. */
.final-form {
    flex: 1 1 480px;
    /* offsets the #quote anchor below the fixed 75px .dfainfotopbar-new
       header so a scroll-to-anchor link doesn't land with the form hidden
       behind it */
    scroll-margin-top: 90px;
}

.final-form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

/* First child is TYPO3's hidden form-state wrapper (just hidden inputs) —
   dissolve it so it doesn't occupy a grid cell and push every real field
   over by one slot. */
.final-form form > div:first-child {
    display: contents;
}

.final-form form > div:nth-last-child(-n+3),
.final-form .form-group:has(textarea) {
    grid-column: 1 / -1;
}

.final-form .form-group {
    margin-bottom: 20px;
}

.final-form label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0a1e2e;
    margin-bottom: 8px;
}

.final-form .form-control,
.final-form input[type="text"],
.final-form input[type="email"],
.final-form input[type="tel"],
.final-form textarea {
    width: 100%;
    border: 1px solid #d8d2c4;
    border-radius: 4px;
    padding: 22px 14px;
    font-size: 15px;
    background-color: #fff;
    color: #0a1e2e;
    max-width: unset !important;

}

.final-form textarea {
    min-height: 130px;
    resize: vertical;
}

.final-form .actions,
.final-form .form-navigation,
.final-form .btn-toolbar,
.final-form .btn-group {
    display: block;
    width: 100%;
}

.final-form button[type="submit"],
.final-form input[type="submit"],
.final-form .btn {
    display: block;
    width: 100% !important;
    background-color: transparent;
    border: 2px solid #0a1e2e;
    border-radius: 4px;
    color: #0a1e2e;
    font-weight: 700;
    padding: 14px;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}

.final-form button[type="submit"]:hover,
.final-form .btn:hover {
    background-color: #0a1e2e;
    color: #fff;
}

@media (max-width:992px) {
    .final-cta-bar {
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }
    .final-cta-bar p:has(a) {
        grid-column: 1;
        grid-row: auto;
        margin-top: 12px;
    }
}

@media (max-width:992px) {
    .landing-hero-container {
        padding-top: 140px;
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
        min-height: auto;
    }
    .hero-highlight {
        word-break: break-all;
    }
    .usp-left {
        margin-bottom: 40px;
    }
    .program-card-left ul {
        column-count: 1;
    }
    .testimonial-card-left ul {
        column-count: 1;
    }
}

/* ==========================================================================
   Training 2026 (pages using the training2026 backend layout)
   ========================================================================== */

/* Hero: dark navy, text left / rounded image card right, facts bar below.
   colPos 100: eyebrow + bold green lead sentence:
   <p class="eyebrow eyebrow-green">EGRED 2 · EASA STS</p>
   <p class="training-hero-lead">Erfüllen Sie EGRED 2 und EASA STS — mit einer praxisnahen Online-Ausbildung.</p>
   colPos 101: heading + intro paragraph (same as landing2026's hero heading):
   <h1>EGRED BOS Online-Training</h1>
   <p>Bei Brandeinsatz, Nachtsuche oder Beobachtungsmission…</p>
   colPos 102: the two CTA buttons — same as landing2026 (colPos 9 pattern):
   <p><a href="#" class="cta-primary">Jetzt online anmelden</a> <a href="#" class="cta-secondary">Lieber erst beraten lassen</a></p>
   colPos 103: paste via Source view, one span per stat:
   <div class="stat-pill"><strong>35.000+</strong><span>Piloten ausgebildet</span></div>
   <div class="stat-pill"><strong>98%</strong><span>Erfolgsrate</span></div>
   <div class="stat-pill"><strong>EASA</strong><span>Anerkannt</span></div> */
.training-hero {
    background-color: #0a1e2e;
    padding-top: 200px;
}

.training-hero-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
}

.training-hero-content {
    flex: 1 1 460px;
}

.training-hero-eyebrow .eyebrow {
    margin-bottom: 14px;
}

.training-hero-lead {
    color: #3ddb84;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
    max-width: 480px;
    margin-bottom: 0;
}

.training-hero-heading h1 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.1;
    margin: 18px 0 20px;
}

.training-hero-heading p,
.training-hero-heading p * {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: transparent !important;
}

.training-hero-heading p {
    font-size: 17px;
    max-width: 560px;
    margin-bottom: 28px;
}

.training-hero-image {
    flex: 1 1 420px;
    position: relative;
}

.training-hero-image-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

.training-hero-image-stats {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background-color: rgba(10, 30, 46, 0.8);
    border-radius: 8px;
    overflow: hidden;
}

.training-hero-image-stats > div {
    display: contents;
}

.stat-pill {
    flex: 1 1 0;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
}

.stat-pill strong {
    color: #3ddb84;
    font-weight: 700;
    font-size: 20px;
}

.stat-pill span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.training-hero-facts {
    background-color: #132b40;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.training-hero-facts .container {
    display: flex;
    flex-wrap: wrap;
}

.training-fact {
    flex: 1 1 0;
    padding: 22px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.training-fact:last-child {
    border-right: none;
}

/* colPos 104-107: just two plain paragraphs, label then value:
   <p>Studiendauer</p>
   <p>6–8 Stunden</p> */
.training-fact p,
.training-fact p *:not(.hero-highlight) {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
}

.training-fact p .hero-highlight {
    background-color: transparent !important;
}

.training-fact p:first-child {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.training-fact p:last-child {
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
}

.training-fact p:last-child.label-green {
    color: #3ddb84 !important;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 0;
}

/* Anchor menu: jump links to each section below, colPos 149 (paste via Source
   view). Static (non-sticky) on desktop; sticks under the fixed
   .dfainfotopbar-new header on mobile only, where space is tighter. Each
   link's href must match a section id below (#for-whom, #curriculum,
   #exam-certificates, #what-you-get, #learning-environment,
   #real-world-use, #go, #ready-for-more, #more-than-one-training,
   #still-unsure). Smooth-scroll offset is handled by the inline script in
   Training2026.html; scroll-margin-top below is just a fallback for direct
   hash links / page loads.
   Paste via Source view:
   <a href="#for-whom">Für wen</a>
   <a href="#curriculum">Inhalt</a>
   <a href="#go">Preise</a> */
.anchor-menu {
    position: static;
    z-index: 400;
    background-color: #fff;
    border-bottom: 1px solid rgba(20, 43, 68, 0.1);
}

.anchor-menu-inner {
    padding: 18px 15px;
}

/* TYPO3 wraps the pasted HTML content element in its own .frame div, so the
   flex layout has to target that (the links' actual parent) rather than
   .anchor-menu-inner directly. TYPO3 also auto-injects an empty <a id="cXXX">
   anchor as the first child of every content element frame; hide it so it
   doesn't eat a gap slot. */
.anchor-menu-inner .frame {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 28px;
}

.anchor-menu-inner .frame > a:empty {
    display: none;
}

.anchor-menu a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: #142b44;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
}

.anchor-menu a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #3ddb84;
    flex: 0 0 auto;
}

.anchor-menu a:hover {
    color: #3ddb84;
}

.anchor-menu a.is-active {
    color: #3ddb84;
}

#for-whom,
#curriculum,
#exam-certificates,
#what-you-get,
#learning-environment,
#real-world-use,
#go,
#ready-for-more,
#more-than-one-training,
#still-unsure {
    scroll-margin-top: 106px;
}

@media (max-width: 768px) {
    .anchor-menu {
        position: sticky;
        top: 65px;
    }

    .anchor-menu-inner {
        padding: 12px 15px;
    }

    .anchor-menu-inner .frame {
        gap: 8px 20px;
    }

    .anchor-menu a {
        font-size: 17px;
    }

    #for-whom,
    #curriculum,
    #exam-certificates,
    #what-you-get,
    #learning-environment,
    #real-world-use,
    #go,
    #ready-for-more,
    #more-than-one-training,
    #still-unsure {
        scroll-margin-top: 125px;
    }
}

/* Reusable callout box (left accent border), used across several sections.
   Paste via Source view:
   <p class="callout-text"><strong>Keine Vorkenntnisse erforderlich.</strong> Ob Sie…</p> */
.callout {
    border-left: 4px solid;
    border-radius: 6px;
    padding: 20px 24px;
    margin-top: 24px;
}

.callout-text {
    margin-bottom: 0;
}

.callout-green {
    background-color: #e5f5ec;
    border-left-color: #3ddb84;
}

.callout-green .callout-text,
.callout-green .callout-text * {
    color: #0a1e2e !important;
    background-color: transparent !important;
}

.callout-orange {
    background-color: #f4ece0;
    border-left-color: #e8630a;
}

.callout-orange .callout-text,
.callout-orange .callout-text * {
    color: #0a1e2e !important;
    background-color: transparent !important;
}

/* Fuer wen: white background, heading + 5 checkmark cards.
   colPos 109-113: just a plain paragraph, e.g.
   <p>Drohnenpiloten bei Feuerwehr, Polizei, THW, DRK oder Rettungsdienst, die EGRED 2 erfüllen müssen</p> */
.checkcard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0;
}

.checkcard {
    background-color: #efe8dc;
    border-radius: 8px;
    padding: 24px 26px;
}

.checkcard p {
    position: relative;
    padding-left: 30px;
    margin-bottom: 0;
    color: #0a1e2e;
}

.checkcard p:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    color: #3ddb84;
    font-weight: 700;
}

/* Inhalt: beige background, numbered curriculum list (left) + image card (right) */
.curriculum-section {
    background-color: #efe8dc;
    padding: 90px 0;
    font-family: 'Barlow', sans-serif;
}

.curriculum-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
    margin-top: 32px;
}

.curriculum-list {
    flex: 1 1 500px;
    color: #0a1e2e;
}

.curriculum-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: curriculum-counter;
}

.curriculum-list ol li {
    counter-increment: curriculum-counter;
    position: relative;
    padding: 18px 0 18px 45px;
    border-bottom: 1px solid rgba(10, 30, 46, 0.12);
    font-size: 15px;
    line-height: 1.5;
}

.curriculum-list ol li:first-child {
    padding-top: 0;
}

.curriculum-list ol li:before {
    content: counter(curriculum-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 18px;
    color: #e8630a;
    font-weight: 700;
    font-size: 13px;
}

.curriculum-list ol li:first-child:before {
    top: 0;
}

.curriculum-list ol li strong {
    color: #0a1e2e;
}

.curriculum-list ol li p {
    margin-bottom: 0;
}

/* colPos 117: insert a "Text & Media" (textpic) content element — the photo
   in the media field, and BOTH the label and caption as bodytext (leave the
   image's own Caption field empty, since bodytext already renders right
   after the image and lets you control the label/caption order directly):
   <p class="label-green">Echter Einsatz</p>
   <p>Feuerwehr Einsatzleitung beim praktischen Drohnentraining im Feld — genau die Situation, auf die diese Ausbildung vorbereitet.</p> */
.curriculum-image-card {
    flex: 1 1 420px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #0a1e2e;
}

.curriculum-image-card .ce-gallery,
.curriculum-image-card .ce-outer,
.curriculum-image-card .ce-inner,
.curriculum-image-card .ce-row,
.curriculum-image-card .ce-column,
.curriculum-image-card figure.image {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.curriculum-image-card .image-embed-item {
    display: block;
    width: 100%;
    height: auto;
}

.curriculum-image-card .image-caption {
    display: none;
}

.curriculum-image-card .ce-bodytext {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 24px 24px;
    background: linear-gradient(180deg, rgba(10, 30, 46, 0) 0%, rgba(10, 30, 46, 0.85) 45%, rgba(10, 30, 46, 0.95) 100%);
}

.curriculum-image-card .ce-bodytext p:first-child {
    margin-bottom: 10px;
}

.curriculum-image-card .ce-bodytext p:last-child {
    margin-bottom: 0;
}

.curriculum-image-card .ce-bodytext p:not(.label-green):not(.label-orange),
.curriculum-image-card .ce-bodytext p:not(.label-green):not(.label-orange) * {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: transparent !important;
}

/* Pruefung & Zertifikate: white background, 2 icon cards.
   colPos 119/120, paste via Source view:
   <div class="icard-icon"><svg>...</svg></div>
   <h3>Prüfung</h3>
   <p>Für den EGRED 2-Teil ist kein formelles Examen erforderlich…</p>
   <p>Optional legen Sie kostenlos das offizielle EASA STS-Examen ab…</p>
   <div class="note">Voraussetzung für die EASA STS-Prüfung…</div>
   (Zertifikate card: same structure, swap .note for <p class="pill pill-green">…</p> badges) */
.pruefung-section {
    background-color: #fff;
    padding: 90px 0;
}

.pruefung-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 32px;
}

.pruefung-card {
    background-color: #efe8dc;
    border-radius: 10px;
    padding: 30px;
}

.pruefung-card .icard-icon,
.pruefung-card .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: rgba(24, 212, 122, 0.15);
    color: #3ddb84;
    font-size: 18px;
    margin-bottom: 16px;
}

.pruefung-card h3 {
    color: #0a1e2e;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: none;
    font-size: 18px;
}

.pruefung-card p:not(.pill),
.pruefung-card p:not(.pill) * {
    color: #4b5560 !important;
    background-color: transparent !important;
}

.pruefung-card .note {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 8px;
    background-color: rgba(240, 145, 42, 0.12);
    color: #0a1e2e !important;
    font-size: 14px;
    line-height: 1.5;
}

.pruefung-card .note * {
    color: #0a1e2e !important;
    background-color: transparent !important;
}

.pruefung-card .pill {
    margin-right: 8px;
    margin-bottom: 8px;
    display: inline-block;
}

.cert-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cert-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: rgba(24, 212, 122, 0.12);
    color: #1e8c4f;
    font-size: 13px;
    font-weight: 600;
}

.cert-pill svg {
    flex-shrink: 0;
    color: #3ddb84;
}

/* Was Sie erhalten: beige background, single-column divided checklist.
   colPos 122, a normal bulleted list:
   <ul><li>Offizielles Teilnahmezertifikat der Drone Flight Academy, gemäß EGRED 2</li>…</ul> */
.erhalten-section {
    background-color: #efe8dc;
    padding: 90px 0;
}

.divided-checklist ul {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.divided-checklist ul li {
    position: relative;
    padding: 16px 0 16px 30px;
    border-bottom: 1px solid rgba(10, 30, 46, 0.12);
    color: #0a1e2e;
}

.divided-checklist ul li:first-child {
    padding-top: 0;
}

.divided-checklist ul li:last-child {
    border-bottom: none;
}

.divided-checklist ul li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 16px;
    color: #3ddb84;
    font-weight: 700;
}

/* Lernumgebung: white background, 6 icon cards + 2 callouts.
   colPos 124-129: use an HTML content element (not RTE Text) so the
   Font Awesome <i> icon survives — CKEditor strips empty inline tags on save.
   <span class="feature-icon"><i class="fas fa-desktop"></i></span>
   <h4>Jedes Gerät</h4>
   <p>Jederzeit und überall zugänglich über Laptop, Tablet oder Smartphone.</p> */
.learning-environment-section {
    background-color: #fff;
    padding: 90px 0;
}

.iconcard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 32px 0;
}

.iconcard {
    border: 1px solid rgba(10, 30, 46, 0.1);
    border-radius: 10px;
    padding: 26px;
}

.iconcard .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e8c4f;
    font-size: 22px;
    margin-bottom: 16px;
}

.iconcard h3,
.iconcard h4 {
    color: #0a1e2e;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.iconcard p,
.iconcard p * {
    color: #4b5560 !important;
    background-color: transparent !important;
}

.iconcard p {
    margin-bottom: 0;
}

/* Full-bleed image section quote card overlay (paste via Source view):
   <div class="testimonial-quote-mini"><p>„Die Trainer waren super…"</p><p class="quote-author">Regieeinheit Katastrophenschutz IUK, Kreis Dithmarschen</p></div> */
.image-section-quote {
    max-width: 360px;
    margin-top: 24px;
}

.testimonial-quote-mini {
    background-color: rgba(10, 30, 46, 0.55);
    border-left: 3px solid #3ddb84;
    border-radius: 6px;
    padding: 18px 22px;
}

.testimonial-quote-mini p {
    font-style: italic;
}

.testimonial-quote-mini p,
.testimonial-quote-mini p * {
    color: #fff !important;
    background-color: transparent !important;
}

.testimonial-quote-mini .quote-author {
    font-style: normal;
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 0;
}

.testimonial-quote-mini .quote-author,
.testimonial-quote-mini .quote-author * {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Pricing/order card: dark card, badge + heading + desc + 4 numbered steps
   (colPos 134), then the Modulesfe plugin content element (colPos 190)
   rendered below/beside it for the real qty + checkout submit.
   colPos 134, paste via Source view:
   <p class="pill pill-green">JETZT STARTEN</p>
   <h2>EGRED BOS Online-Training anmelden</h2>
   <p>Mit der Bestellung erhalten Sie direkt einen Zugangscode per E-Mail…</p>
   <ol class="pricing-steps">
     <li>Anzahl der Zugangscodes wählen und bestellen</li>
     <li>Zugangscode(s) per E-Mail erhalten — sofort einsetzbar</li>
     <li>Online-Theorie im eigenen Tempo absolvieren, 6–8 Stunden</li>
     <li>Optional: kostenloses EASA STS-Examen ablegen</li>
   </ol>
   <p class="pricing-price"><span class="pricing-amount">€249,99</span> <span class="pricing-unit">inkl. MwSt.</span></p>
   <p class="pricing-note">pro Zugangscode / Person</p> */
.pricing-section {
    background-color: #efe8dc;
    padding: 90px 0;
    scroll-margin-top: 100px;
}

.pricing-card {
    background-color: #0a1e2e;
    border-radius: 12px;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.pricing-card > div:first-child {
    flex: 1 1 520px;
    padding: 44px;
}

.pricing-card h2 {
    color: #fff;
    font-weight: 700;
    margin: 14px 0 12px;
}

.pricing-card > div > p:not(.pill):not(.pricing-note),
.pricing-card > div > p:not(.pill):not(.pricing-note) * {
    color: rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
}

.pricing-steps {
    list-style: none;
    counter-reset: pricing-step;
    margin: 24px 0 0;
    padding: 0;
}

.pricing-steps li {
    counter-increment: pricing-step;
    position: relative;
    padding: 8px 0 8px 40px;
    color: rgba(255, 255, 255, 0.85);
}

.pricing-steps li:before {
    content: counter(pricing-step);
    position: absolute;
    left: 0;
    top: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #3ddb84;
    color: #0a1e2e;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-amount {
    color: #fff;
    font-weight: 700;
    font-size: 36px;
}

.pricing-unit {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.pricing-note {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px;
    margin-top: 6px;
}

/* The Modulesfe plugin content element (colPos 190) — pick "New (translated,
   redesigned)" from its FlexForm "Style" field so it renders the
   `.voucher-form-v2` markup below instead of the old Dutch layout used
   elsewhere on the site (that one is untouched, still `.voucher-form`). */
.pricing-plugin {
    flex: 1 1 360px;
    padding: 44px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    background-color: #142b44;
}

.tx-dswmedia-dronetrainingformulie {
    margin-bottom: 0 !important;
}

.pricing-plugin .voucher-form-v2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pricing-plugin .price-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pricing-plugin .price-amount {
    color: #fff;
    font-weight: 700;
    font-size: 36px;
}

.pricing-plugin .price-suffix {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.pricing-plugin .price-unit-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 6px 0 0;
}

.pricing-plugin .price-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 24px 0;
}

.pricing-plugin .qty-field {
    margin-bottom: 4px;
}

.pricing-plugin .qty-upsell {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid rgba(24, 212, 122, 0.35);
    background-color: rgba(24, 212, 122, 0.08) !important;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.5;
}

.pricing-plugin .qty-upsell p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75) !important;
}

.pricing-plugin .qty-upsell a {
    color: #3ddb84 !important;
    font-weight: 700;
    text-decoration: underline;
}

.pricing-plugin .qty-label {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.pricing-plugin .qty-stepper {
    background-color: #142b44;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.pricing-plugin .qty-stepper-btn {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: none;
    width: 40px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pricing-plugin .qty-stepper-btn:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.pricing-plugin .qty-stepper .form-control {
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    text-align: center;
    padding: 10px 14px;
    background-color: #142b44;
    color: #fff;
    width: 70px;
    -webkit-appearance: none;
    appearance: none;
}

.pricing-plugin .button-submit-custom {
    display: block;
    width: 100%;
    background-color: #e8630a;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 14px 30px;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
}

.pricing-plugin .logos-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.pricing-plugin .logos-payment span {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: #fff;
    border-radius: 6px;
    padding: 8px 6px;
    min-width: 0;
}

.pricing-plugin .logos-payment img {
    max-width: 100%;
    max-height: 28px;
    width: auto;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .pricing-plugin {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Sticky CTA bar: a live clone of the pricing-plugin's qty stepper + submit
   button, plus the training name, fixed to the bottom of the viewport.
   body.has-sticky-cta is added by the inline script in Modules/List.html
   only when this bar is actually present on the page. The bar's background
   runs edge-to-edge but .sticky-cta-bar-inner keeps its content aligned to
   the same max-width as the rest of the page's .container. */
body.has-sticky-cta {
    padding-bottom: 84px;
}

.sticky-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background-color: #142b44;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.sticky-cta-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.sticky-cta-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-cta-qty-label {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sticky-cta-stepper {
    flex: 0 0 auto;
    background-color: #0a1e2e;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.sticky-cta-stepper .qty-stepper-btn {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: none;
    width: 40px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.sticky-cta-stepper .qty-stepper-btn:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.sticky-cta-qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 8px;
    color: #fff;
    font-weight: 700;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky-cta-bar .sticky-cta-submit {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .sticky-cta-qty-label {
        display: none;
    }

    .sticky-cta-stepper .qty-stepper-btn {
        width: 30px;
        font-size: 16px;
    }

    .sticky-cta-qty-value {
        min-width: 28px;
        padding: 0 4px;
    }

    .sticky-cta-bar .sticky-cta-submit {
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (min-width: 993px) {
    .sticky-cta-bar-inner {
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 24px;
    }

    .sticky-cta-name {
        font-size: 16px;
    }

    .sticky-cta-bar .sticky-cta-submit {
        min-width: 260px;
    }
}

/* Bereit fuer mehr: beige background, 4 tagged dark cards + outline CTA.
   colPos 136-139, paste via Source view:
   <p class="tagcard-label">PRÄSENZ</p>
   <h3>VLOS-Praxistraining</h3>
   <p>Flugtraining für BOS-Einsätze in zwei Stufen, mit und ohne Assistenzsysteme, bei Ihnen vor Ort.</p> */
.bereitmehr-section {
    background-color: #fff;
    padding: 90px 0;
}

.tagcard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 32px 0 40px;
}

.tagcard {
    background-color: #0a1e2e;
    border-radius: 10px;
    padding: 26px;
}

.tagcard-label {
    color: #3ddb84;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.tagcard h3,
.tagcard h4 {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.tagcard p:not(.label-green):not(.label-orange),
.tagcard p:not(.label-green):not(.label-orange) * {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: transparent !important;
}

.tagcard .label-green,
.tagcard .label-orange {
    margin-bottom: 12px;
}

.tagcard p {
    margin-bottom: 0;
}

.bereitmehr-cta {
    text-align: center;
}

/* colPos 140, insert the link then pick "Outline (dark)" from the Class
   dropdown (or paste directly):
   <a href="#" class="btn-outline-dark">Vollständiges Programm ansehen</a> */
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #0a1e2e;
    border-radius: 4px;
    background-color: transparent;
    color: #0a1e2e;
    font-weight: 700;
    padding: 14px 30px;
    text-decoration: none;
}

.btn-outline-dark:after {
    content: "\2192";
}

.btn-outline-dark:hover {
    background-color: #0a1e2e;
    color: #fff;
    text-decoration: none;
}

/* Sie sind sich noch unsicher: light background, reuses .final-link-card */
.still-unsure-section {
    background-color: #f7f5f0;
    padding: 90px 0;
}

.still-unsure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.still-unsure-grid .final-link-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

.still-unsure-grid .final-link-arrow {
    align-self: flex-end;
}

body.has-sticky-cta .homefooter-dfa {
    height: 635px !important;
}

@media (max-width:992px) {
    body.has-sticky-cta .homefooter-dfa {
        height: 735px !important;
    }
    .checkcard-grid,
    .pruefung-grid,
    .iconcard-grid,
    .tagcard-grid,
    .still-unsure-grid {
        grid-template-columns: 1fr;
    }
    .training-hero-facts .container {
        flex-wrap: wrap;
    }
    .training-fact {
        flex: 1 1 50%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .curriculum-grid {
        flex-direction: column;
    }
}