/* Expert Program Screen – Dark Conference Look analog Sponsoring/Training Providers */
/* Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | Kontakt-Shell 1:1 wie Training Providers */

.screen-expert-program-page {
    width: min(var(--color-home-max), calc(100% - 28px));
    margin: 0 auto;
    color: var(--color-home-text);
    padding: 32px 0 64px;
}

.screen-expert-program-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-home-cyan);
    font: 750 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.screen-expert-program-eyebrow::before {
    content: "";
    width: 29px;
    height: 1px;
    background: currentColor;
}

.screen-expert-program-headline {
    font-size: clamp(30px, 4.6vw, 48px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.14;
    margin: 0 0 18px;
    padding-left: 18px;
    border-left: 4px solid var(--color-home-cyan);
    color: var(--color-home-text);
    width: 100%;
}

.screen-expert-program-hero-lead {
    margin: 0 0 22px;
    color: var(--color-home-lead);
    font-size: 17px;
    line-height: 1.65;
    width: 100%;
    max-width: 760px;
}

.screen-expert-program-section {
    margin-top: 44px;
    max-width: 760px;
}

.screen-expert-program-section-packages {
    max-width: min(var(--color-home-max), 100%);
}

/* .screen-expert-program-section-persons | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Volle Breite fuer Dreier-Zeile Personen-Argumente */
.screen-expert-program-section-persons {
    max-width: min(var(--color-home-max), 100%);
}

.screen-expert-program-section-title {
    margin: 0 0 14px;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--color-home-text);
}

.screen-expert-program-body {
    margin: 0 0 14px;
    color: var(--color-home-lead);
    font-size: 16px;
    line-height: 1.65;
}

.screen-expert-program-test-badge {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-home-cyan) 45%, var(--color-home-line));
    background: color-mix(in srgb, var(--color-home-cyan) 12%, var(--color-home-panel));
    color: var(--color-home-cyan);
    font: 700 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.03em;
}

.screen-expert-program-includes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px;
}

/* .screen-expert-program-persons-list | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Drei Premium-Kacheln in einer Zeile Desktop/Tablet */
.screen-expert-program-persons-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
    align-items: stretch;
}

.screen-expert-program-include-item {
    border: 1px solid var(--color-home-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-home-panel) 88%, #000);
    padding: 16px 16px 12px;
}

/* .screen-expert-program-person-item | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Premium-Dark-Kachel Border Panel Padding */
.screen-expert-program-person-item {
    border: 1px solid var(--color-home-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-home-panel) 90%, #000);
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-sizing: border-box;
}

.screen-expert-program-include-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-home-text);
}

/* .screen-expert-program-person-title | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Starker Kachel-Titel */
.screen-expert-program-person-title {
    margin: 0;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--color-home-text);
}

/* .screen-expert-program-person-body | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Ruhiger Body in Personen-Kachel */
.screen-expert-program-person-body {
    margin: 0;
    color: var(--color-home-lead);
    font-size: 15px;
    line-height: 1.65;
}

.screen-expert-program-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.screen-expert-program-package-tile {
    border: 1px solid var(--color-home-line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-home-panel) 90%, #000);
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.screen-expert-program-package-tile-accent {
    border-color: color-mix(in srgb, var(--color-home-cyan) 55%, var(--color-home-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-home-cyan) 25%, transparent);
}

.screen-expert-program-package-name {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    color: var(--color-home-text);
}

.screen-expert-program-package-price {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-home-cyan);
}

.screen-expert-program-price-suffix {
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
    color: var(--color-home-lead);
}

.screen-expert-program-package-period {
    margin: 0;
    color: var(--color-home-lead);
    font-size: 14px;
}

.screen-expert-program-package-features {
    margin: 4px 0 0;
    padding: 0 0 0 18px;
    color: var(--color-home-lead);
    font-size: 14px;
    line-height: 1.55;
}

.screen-expert-program-package-feature {
    margin: 0 0 6px;
}

.screen-expert-program-package-note {
    margin: 4px 0 0;
    color: var(--color-home-lead);
    font-size: 13px;
    line-height: 1.5;
}

.screen-expert-program-contact-section {
    padding: 56px 0 72px;
    background: var(--color-home-bg);
    color: var(--color-home-text);
}

/* .screen-expert-program-contact-shell | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | Shell 1:1 wie Training Providers */
.screen-expert-program-contact-shell {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--color-home-line);
    border-radius: 20px;
    background: radial-gradient(ellipse at top right, rgba(92, 225, 230, 0.1), transparent 65%), var(--color-home-panel);
}

.screen-expert-program-contact-title {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.screen-expert-program-contact-intro {
    margin: 0 0 20px;
    color: var(--color-home-lead);
}

/* .screen-expert-program-contact | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | Kontaktzeile flex row space-between */
.screen-expert-program-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
    margin-top: 28px;
}

.screen-expert-program-contact-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* .screen-expert-program-contact-photo | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | Foto 88px wie Training Providers */
.screen-expert-program-contact-photo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(92, 225, 230, 0.35);
}

.screen-expert-program-contact-name {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 900;
}

.screen-expert-program-contact-role {
    margin: 6px 0 0;
    color: var(--color-home-muted);
}

/* .screen-expert-program-open-inquiry-modal | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | CTA Optik analog Schulungsanbieter-Button */
.screen-expert-program-open-inquiry-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 52px;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--color-home-cyan);
    color: var(--color-home-bg);
    font-weight: 800;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.screen-expert-program-open-inquiry-modal:hover {
    background: var(--color-home-purple);
    color: var(--color-home-btn-text);
}

.screen-expert-program-open-inquiry-modal:focus-visible {
    background: var(--color-home-purple);
    color: var(--color-home-btn-text);
    outline: 3px solid var(--color-home-cyan);
    outline-offset: 4px;
}

/* .screen-expert-program-contact-button | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | CTA Breite auto rechts */
.screen-expert-program-contact-button {
    width: auto;
    flex-shrink: 0;
}

/* .screen-expert-program-cta-icon | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance | CTA-Icon erbt Button-Farbe */
.screen-expert-program-cta-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    color: inherit;
}

/* .screen-expert-program-modal | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | z-index 12000, keine Scrollbar */
.screen-expert-program-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* .screen-expert-program-modal[hidden] | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | hidden schlägt display flex */
.screen-expert-program-modal[hidden] {
    display: none;
}

/* .screen-expert-program-modal-backdrop | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Apple-Backdrop absolut im Modal */
.screen-expert-program-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
}

/* .screen-expert-program-modal-panel | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Dialogkarte ohne Scrollbar */
.screen-expert-program-modal-panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    max-height: calc(100dvh - 1rem);
    margin: 0;
    overflow: hidden;
    padding: 0.7rem 0.7rem 0.5rem;
    border-radius: 1.25rem;
    background: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
    color: var(--color-home-text);
}

/* .screen-expert-program-modal-headline | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Titel lässt Platz für Close */
.screen-expert-program-modal-headline {
    padding-right: 3.1rem;
    margin: 0;
    color: var(--color-home-text);
}

/* #expert-program-modal-title | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Kompakte Modal-Überschrift */
#expert-program-modal-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

/* .screen-expert-program-modal-description | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Kompakte Einleitung */
.screen-expert-program-modal-description {
    margin: 0.15rem 2.6rem 0.35rem 0;
    color: var(--color-home-lead);
    font-size: 0.75rem;
    line-height: 1.25;
}

/* .screen-expert-program-form-section | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Sektionsfläche mit Rand und Innenabstand */
.screen-expert-program-form-section {
    margin: 0 0 0.3rem;
    padding: 0.35rem 0.45rem 0.28rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    overflow: hidden;
}

/* .screen-expert-program-form-section-title | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Sektionstitel in der Fläche */
.screen-expert-program-form-section-title {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--color-home-text);
}

/* .screen-expert-program-form | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Formular ohne Scrollbar */
.screen-expert-program-form {
    margin: 0;
    overflow: hidden;
}

/* .screen-expert-program-field-row | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Zweispaltige Feldzeile */
.screen-expert-program-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

/* .screen-expert-program-field | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Kompakter Feldabstand */
.screen-expert-program-field {
    margin-bottom: 0.2rem;
}

/* .screen-expert-program-input, .screen-expert-program-textarea | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Feldfläche ungleich Dialogfläche */
.screen-expert-program-input,
.screen-expert-program-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    padding: 0.32rem 0.55rem;
    background-color: var(--color-surface-elevated);
    color: var(--color-home-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

/* .screen-expert-program-input:focus, .screen-expert-program-textarea:focus | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Textfokus nicht gelb */
.screen-expert-program-modal .screen-expert-program-input:focus,
.screen-expert-program-modal .screen-expert-program-textarea:focus {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-border);
    outline: none;
}

/* .screen-expert-program-textarea | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Placeholder bleibt in der Fläche */
.screen-expert-program-textarea {
    display: block;
    resize: none;
    overflow: hidden;
    min-height: 4.6rem;
}

/* .screen-expert-program-input::placeholder, .screen-expert-program-textarea::placeholder | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Placeholder lesbar */
.screen-expert-program-input::placeholder,
.screen-expert-program-textarea::placeholder {
    color: rgba(246, 247, 251, 0.55);
}

/* .screen-expert-program-field-invalid | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Leichte Danger-Fläche und Danger-Rand */
.screen-expert-program-modal .screen-expert-program-input.screen-expert-program-field-invalid,
.screen-expert-program-modal .screen-expert-program-textarea.screen-expert-program-field-invalid,
.screen-expert-program-modal .screen-expert-program-input.screen-expert-program-field-invalid:focus,
.screen-expert-program-modal .screen-expert-program-textarea.screen-expert-program-field-invalid:focus,
.screen-expert-program-modal .screen-expert-program-checkbox.screen-expert-program-field-invalid {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger);
}

/* .screen-expert-program-field-valid | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Leichte Success-Fläche und Success-Rand */
.screen-expert-program-modal .screen-expert-program-input.screen-expert-program-field-valid,
.screen-expert-program-modal .screen-expert-program-textarea.screen-expert-program-field-valid,
.screen-expert-program-modal .screen-expert-program-input.screen-expert-program-field-valid:focus,
.screen-expert-program-modal .screen-expert-program-textarea.screen-expert-program-field-valid:focus,
.screen-expert-program-modal .screen-expert-program-checkbox.screen-expert-program-field-valid {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
}

/* .screen-expert-program-modal .screen-expert-program-field-error | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Fehlerabstand mindestens 0.4rem, schlägt Widget-Margin */
.screen-expert-program-modal .screen-expert-program-field-error {
    margin: 0.4rem 0 0;
    color: var(--color-danger);
    font-size: 0.72rem;
    line-height: 1.25;
}

/* .screen-expert-program-field-error p | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Fehlertext in Danger-Farbe */
.screen-expert-program-field-error p {
    margin: 0;
    color: var(--color-danger);
}

/* .screen-expert-program-field-error-hidden | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Leerer Fehler-Slot ohne Höhe */
.screen-expert-program-field-error-hidden {
    display: none;
}

/* .screen-expert-program-checkbox-label | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Checkbox-Text neben dem Control */
.screen-expert-program-checkbox-label {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    color: var(--color-home-text);
    font-size: 0.72rem;
    line-height: 1.25;
}

/* .screen-expert-program-checkbox | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Checkbox-Fläche für Rot und Grün */
.screen-expert-program-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0.1rem 0 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    background-color: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}

/* .screen-expert-program-spam-question | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-contact-form-captcha, @skill-change-provenance | Sichtbare Mathefrage ohne Block-Label */
.screen-expert-program-spam-question {
    margin: 0 0 0.2rem;
    color: var(--color-home-text);
    font-size: 0.75rem;
    line-height: 1.25;
    font-weight: 600;
}

/* .screen-expert-program-checkbox-field | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Privacy-Zeile kompakt */
.screen-expert-program-checkbox-field {
    margin: 0;
}

/* .screen-expert-program-modal-actions | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Nur Submit in der Aktionszeile */
.screen-expert-program-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.2rem;
    overflow: hidden;
}

/* .screen-expert-program-modal-submit-button | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | Submit mit Icon, Breite auto */
.screen-expert-program-modal-submit-button {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0.4rem 0.8rem;
    background: var(--color-home-cyan);
    color: var(--color-home-bg);
    font-size: 0.82rem;
}

/* html.screen-expert-program-modal-page-scroll-locked | Änderungsprotokoll: 2026-11-12 | subagent-check-popup | @skill-modal-popup-windows, @skill-change-provenance | html und body ohne Seiten-Scrollbar */
html.screen-expert-program-modal-page-scroll-locked,
html.screen-expert-program-modal-page-scroll-locked body {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media (max-width: 980px) {
    .screen-expert-program-packages-grid {
        grid-template-columns: 1fr;
    }

    .screen-expert-program-includes-list {
        grid-template-columns: 1fr;
    }

    .screen-expert-program-field-row {
        grid-template-columns: 1fr;
    }
}

/* .screen-expert-program-persons-list mobile | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-tiles, @skill-change-provenance, @skill-briefing-first | Personen-Kacheln auf schmal untereinander */
@media (max-width: 700px) {
    .screen-expert-program-persons-list {
        grid-template-columns: 1fr;
    }
}

/* Kontaktzeile Mobile stapeln wie Training Providers */
@media (max-width: 600px) {
    /* .screen-expert-program-contact | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-css-rules, @skill-change-provenance, @skill-briefing-first | Mobile Spalte */
    .screen-expert-program-contact {
        flex-direction: column;
        align-items: stretch;
    }

    .screen-expert-program-contact-main {
        gap: 14px;
    }

    .screen-expert-program-contact-name {
        font-size: 1.3rem;
    }
}