/* Final visual safeguards loaded after all legacy and page-specific styles. */

body.theme-cinematic {
    overflow-x: clip !important;
}

/* Preserve the original video image; darkness comes only from the separate
   readable-content overlays, never from a filter on the footage itself. */
body.theme-cinematic .cinematic-hero-video {
    filter: none !important;
}

/* By default the footage stays unobscured: remove both the horizontal left
   veil and the legacy heavy bottom veil. The homepage adds a light fade below. */
body.theme-cinematic .cinematic-hero-veil {
    background: none !important;
}

/* Every video hero gets a gentle lower-third fade without muting the footage
   above it. */
body.theme-cinematic .has-cinematic-video .cinematic-hero-veil {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 66.666%,
        rgba(0, 0, 0, 0.5) 100%
    ) !important;
}

/* Speaking pages need contrast only where the desktop copy sits. Keep the
   footage unobscured elsewhere and leave mobile completely veil-free. */
@media (min-width: 701px) {
    /* Long-form hero titles use the same lower content baseline as Workshops,
       Games, Books and News. Their slightly smaller type keeps the complete
       title, subline and actions inside one viewport. */
    body.theme-cinematic .mk-hero.has-cinematic-video,
    body.theme-cinematic .coach-hero.has-cinematic-video,
    body.theme-cinematic .vortrag-hero.has-cinematic-video {
        padding-bottom: 0 !important;
    }

    body.theme-cinematic .mk-hero.has-cinematic-video h1,
    body.theme-cinematic .coach-hero.has-cinematic-video h1,
    body.theme-cinematic .vortrag-hero.has-cinematic-video h1 {
        font-size: clamp(3.8rem, 6vw, 5.8rem) !important;
    }

    body.theme-cinematic.page-vortraege .cinematic-hero-veil,
    body.theme-cinematic.page-speaking .cinematic-hero-veil,
    body.theme-cinematic.page-conferenze .cinematic-hero-veil,
    body.theme-cinematic.page-conferences .cinematic-hero-veil,
    body.theme-cinematic.page-conferencias .cinematic-hero-veil {
        background:
            radial-gradient(
                ellipse 82% 92% at 0% 100%,
                rgba(5, 6, 6, 0.76) 0%,
                rgba(5, 6, 6, 0.52) 42%,
                rgba(5, 6, 6, 0) 100%
            ),
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 66.666%,
                rgba(0, 0, 0, 0.5) 100%
            ) !important;
    }
}

/* The navigation sits on a clean black fade, never on a milky glass slab. */
body.theme-cinematic .header,
body.theme-cinematic .header.scrolled {
    background-color: transparent !important;
    background-image: linear-gradient(
        to bottom,
        rgba(3, 4, 4, 0.5) 0%,
        rgba(3, 4, 4, 0) 100%
    ) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The homepage no longer uses a running-text band, in any language. */
body.theme-cinematic .marquee-section {
    display: none !important;
}

/* No large near-black slabs on the dark page canvas. Content structure comes from spacing and components. */
body.theme-cinematic > section:not(.has-cinematic-video):not(.cta-section):not(.conversation-cta):not(.games-cta),
body.theme-cinematic main > section:not(.has-cinematic-video):not(.cta-section):not(.conversation-cta):not(.games-cta) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Home hero: the media rail always reaches both viewport edges. */
body.theme-cinematic #hero-container > .hero-overlay {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

body.theme-cinematic #hero-container .press-logos {
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.theme-cinematic #hero-container .press-logos-label {
    display: none !important;
}

body.theme-cinematic #hero-container .press-logo[alt="MeinBezirk"] {
    max-width: clamp(82px, 8vw, 128px) !important;
    opacity: 1 !important;
}

/* One stable sound-control position on every video hero. */
body.theme-cinematic .has-cinematic-video .cinematic-sound-toggle {
    position: absolute !important;
    right: clamp(20px, 3vw, 48px) !important;
    bottom: clamp(96px, 14vh, 152px) !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.theme-cinematic .step-domain {
    color: var(--page-accent) !important;
}

body.theme-cinematic .lang-dropdown .lang-flag {
    display: inline-flex !important;
    min-width: 24px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(var(--page-accent-rgb), 0.28) !important;
    border-radius: 4px !important;
    color: var(--page-accent-light) !important;
    font-family: var(--font-tech) !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Section headers are centred as complete modules, with actions beneath them. */
body.theme-cinematic .section-header-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    text-align: center !important;
}

body.theme-cinematic .section-header-row > div:first-child,
body.theme-cinematic .section-header-row > div:first-child > p,
body.theme-cinematic .section-header-row > div:first-child > h2 {
    margin-inline: auto !important;
    text-align: center !important;
}

body.theme-cinematic .section-header-row .scroll-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* Games content keeps its editorial rhythm without offset heading columns. */
body.theme-cinematic .games-section-head-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
}

body.theme-cinematic .games-section-head-row > div,
body.theme-cinematic .games-section-head-row > p,
body.theme-cinematic .games-section-head-row h2 {
    max-width: 900px !important;
    margin-inline: auto !important;
    text-align: center !important;
}

body.theme-cinematic .games-mechanics-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(34px, 5vw, 64px) !important;
}

body.theme-cinematic .games-mechanics-grid .games-section-head {
    position: static !important;
    top: auto !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

body.theme-cinematic .games-mechanics-grid .games-section-head h2,
body.theme-cinematic .games-mechanics-grid .games-section-head p {
    margin-inline: auto !important;
    text-align: center !important;
}

body.theme-cinematic .has-cinematic-video .cinematic-ai-generated {
    position: absolute !important;
    z-index: 6 !important;
    /* Screen centre, even when a legacy hero is taller than one viewport. */
    top: 50vh !important;
    right: clamp(20px, 3vw, 48px) !important;
    width: 16px !important;
    height: 56px !important;
    opacity: 0.48 !important;
    transform: translateY(-50%) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) !important;
    pointer-events: none !important;
}

body.theme-cinematic.has-lang-notice .has-cinematic-video .cinematic-ai-generated {
    top: calc(50vh - 45px) !important;
}

/* Every subpage hero uses the same plain accent-colour kicker. */
body.theme-cinematic .has-cinematic-video .label {
    display: inline-block !important;
    width: auto !important;
    margin: 0 0 1.15rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--page-accent) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    animation: none !important;
}

body.theme-cinematic .has-cinematic-video .label::before,
body.theme-cinematic .has-cinematic-video .label::after {
    content: none !important;
    display: none !important;
}

/* Home slider and CTA. */
body.theme-cinematic .slider-arrow {
    border: 1px solid rgba(232, 231, 226, 0.42) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: var(--page-text) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body.theme-cinematic .slider-arrow:hover,
body.theme-cinematic .slider-arrow:focus-visible {
    border-color: var(--page-accent) !important;
    background: rgba(var(--page-accent-rgb), 0.12) !important;
    color: var(--page-accent-light) !important;
}

/* Every circular navigation control stays legible on the dark canvas. */
body.theme-cinematic .termine-arrow,
body.theme-cinematic .slider-arrow {
    border-color: rgba(232, 231, 226, 0.62) !important;
    background: rgba(9, 13, 15, 0.78) !important;
    color: #f1efe9 !important;
    opacity: 1 !important;
}

body.theme-cinematic .termine-arrow:hover,
body.theme-cinematic .termine-arrow:focus-visible,
body.theme-cinematic .slider-arrow:hover,
body.theme-cinematic .slider-arrow:focus-visible {
    border-color: var(--page-accent) !important;
    background: rgba(var(--page-accent-rgb), 0.16) !important;
    color: var(--page-accent-light) !important;
}

body.theme-cinematic .termine-arrow svg,
body.theme-cinematic .termine-arrow path,
body.theme-cinematic .slider-arrow svg,
body.theme-cinematic .slider-arrow path,
body.theme-cinematic .termine-arrow line,
body.theme-cinematic .termine-arrow polyline,
body.theme-cinematic .slider-arrow line,
body.theme-cinematic .slider-arrow polyline {
    stroke: currentColor !important;
    fill: none !important;
}

/* Legacy publication controls use inline black SVG strokes; override the artwork itself. */
body.theme-cinematic .scroll-controls button,
body.theme-cinematic .scroll-controls > svg {
    color: #f1efe9 !important;
}

body.theme-cinematic .scroll-controls svg circle {
    stroke: rgba(232, 231, 226, 0.72) !important;
    fill: rgba(9, 13, 15, 0.78) !important;
}

body.theme-cinematic .scroll-controls svg path,
body.theme-cinematic .scroll-controls svg line,
body.theme-cinematic .scroll-controls svg polyline {
    stroke: #f1efe9 !important;
    fill: none !important;
}

body.theme-cinematic .scroll-controls button:hover svg circle,
body.theme-cinematic .scroll-controls button:focus-visible svg circle,
body.theme-cinematic .scroll-controls > svg:hover circle,
body.theme-cinematic .scroll-controls > svg:focus-visible circle {
    stroke: var(--page-accent) !important;
    fill: rgba(var(--page-accent-rgb), 0.16) !important;
}

body.theme-cinematic .scroll-controls button:hover svg path,
body.theme-cinematic .scroll-controls button:focus-visible svg path,
body.theme-cinematic .scroll-controls > svg:hover path,
body.theme-cinematic .scroll-controls > svg:focus-visible path {
    stroke: var(--page-accent-light) !important;
}

body.theme-cinematic .slider-dot {
    background: rgba(232, 231, 226, 0.28) !important;
}

body.theme-cinematic .slider-dot.active {
    background: var(--page-accent) !important;
}

body.theme-cinematic .cta-section > .container,
body.theme-cinematic .cta-section h2 {
    text-align: center !important;
}

body.theme-cinematic section.cta-section > .container > h2 {
    width: min(100%, 1100px) !important;
    max-width: 1100px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.theme-cinematic .cta-section h2::before,
body.theme-cinematic .cta-section h2::after {
    content: none !important;
    display: none !important;
}

/* The home editorial slider is fully dark and leaves room for its controls. */
body.theme-cinematic .editorial-card .ec-visual {
    border: 0 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--page-accent-rgb), 0.12), transparent 46%),
        linear-gradient(145deg, rgba(var(--page-accent-rgb), 0.06), rgba(255, 255, 255, 0.012)) !important;
}

body.theme-cinematic .editorial-card .ec-visual::before {
    background: var(--page-accent) !important;
    opacity: 0.08 !important;
}

body.theme-cinematic .profile-slider-container {
    padding-bottom: 28px !important;
}

/* Center an icon whenever the corresponding card copy is centered. */
body.theme-cinematic .ws-goal-card .ws-goal-icon {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The workshop package header belongs to the page's gold accent family. */
body.theme-cinematic .ws-package-header {
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--page-accent-rgb), 0.18), transparent 38%),
        linear-gradient(120deg, rgba(var(--page-accent-rgb), 0.105), rgba(255, 255, 255, 0.025)) !important;
    color: var(--page-text) !important;
}

body.theme-cinematic .ws-package-header::before {
    background: radial-gradient(circle, rgba(var(--page-accent-rgb), 0.16), transparent 70%) !important;
}

body.theme-cinematic .ws-package-header h3 {
    color: var(--page-text) !important;
}

body.theme-cinematic .ws-package-header p {
    color: var(--page-copy-soft) !important;
}

/* Standalone section introductions share one centered editorial axis. */
body.theme-cinematic main section:not(.has-cinematic-video) > .container > h2,
body.theme-cinematic > section:not(.has-cinematic-video) > .container > h2,
body.theme-cinematic .ws-section > .container > .ws-eyebrow,
body.theme-cinematic .ws-section > .container > .ws-headline,
body.theme-cinematic .ws-section > .container > .ws-subline,
body.theme-cinematic .ws-section .ws-eyebrow,
body.theme-cinematic .ws-section .ws-headline,
body.theme-cinematic .ws-section .ws-subline,
body.theme-cinematic .section-header > .eyebrow-accent,
body.theme-cinematic .section-header > h2,
body.theme-cinematic .section-header > p,
body.theme-cinematic .section-intro > .label,
body.theme-cinematic .section-intro > h2,
body.theme-cinematic .section-intro > p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-wrap: balance;
}

/* Legacy section rules use a more specific left-aligned margin shorthand.
   Match that specificity so the heading block itself—not only its text—is centered. */
body.theme-cinematic main section:not(.has-cinematic-video) > .container > h2,
body.theme-cinematic > section:not(.has-cinematic-video) > .container > h2,
body.theme-cinematic section.book-cta-final:not(.has-cinematic-video) > .container > h2,
body.theme-cinematic section.ws-cta-section:not(.has-cinematic-video) > .container > h2 {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body.theme-cinematic .ws-section .ws-headline {
    width: min(100%, 1100px) !important;
    font-size: clamp(2.6rem, 5.4vw, 5.6rem) !important;
    line-height: 0.98 !important;
    text-wrap: balance;
}

/* Final calls to action are headlines, not oversized decorative quotations. */
body.theme-cinematic .ws-cta-section,
body.theme-cinematic .book-cta-final {
    padding-block: clamp(88px, 11vw, 150px) !important;
    text-align: center !important;
}

body.theme-cinematic .ws-cta-section h2,
body.theme-cinematic .book-cta-final h2 {
    width: min(100%, 980px) !important;
    margin: 0 auto clamp(24px, 3vw, 38px) !important;
    color: var(--page-text) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(2.35rem, 4.8vw, 4.7rem) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-wrap: balance;
}

body.theme-cinematic .ws-cta-section p,
body.theme-cinematic .book-cta-final p {
    color: var(--page-copy-soft) !important;
}

body.theme-cinematic .ws-cta-section .ws-btn-primary,
body.theme-cinematic .book-cta-final .book-btn-primary {
    border: 1px solid var(--page-accent) !important;
    background: var(--page-accent) !important;
    color: var(--page-bg) !important;
}

body.theme-cinematic .slider-nav-container {
    margin-bottom: 8px !important;
}

/* Speaker topic modules: separated by quiet tonal surfaces, never white cards. */
body.theme-cinematic .bento-grid {
    gap: clamp(14px, 1.4vw, 22px) !important;
}

body.theme-cinematic .bento-card,
body.theme-cinematic .bento-card[style] {
    min-height: 250px !important;
    padding: clamp(24px, 3vw, 42px) !important;
    border: 1px solid rgba(var(--page-accent-rgb), 0.13) !important;
    border-left: 2px solid rgba(var(--page-accent-rgb), 0.72) !important;
    border-radius: 4px !important;
    background:
        radial-gradient(circle at 0 0, rgba(var(--page-accent-rgb), 0.075), transparent 48%),
        rgba(255, 255, 255, 0.022) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
    color: var(--page-text) !important;
    transform: none !important;
    transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease !important;
}

body.theme-cinematic .bento-card::before {
    margin-bottom: 1.75rem !important;
}

body.theme-cinematic .bento-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: auto 28px 0 28px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(var(--page-accent-rgb), 0.42), transparent) !important;
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
}

body.theme-cinematic .bento-icon {
    display: block !important;
    margin: 0 0 1.55rem !important;
    color: var(--page-accent) !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    transform: none !important;
}

body.theme-cinematic .bento-card:hover {
    border-color: rgba(var(--page-accent-rgb), 0.32) !important;
    border-left-color: var(--page-accent) !important;
    background:
        radial-gradient(circle at 0 0, rgba(var(--page-accent-rgb), 0.12), transparent 52%),
        rgba(255, 255, 255, 0.032) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-3px) !important;
}

body.theme-cinematic .bento-card:hover::after {
    opacity: 1 !important;
}

/* Tonal surfaces: enough separation to structure content without light cards. */
body.theme-cinematic .post-card,
body.theme-cinematic .aktuelles-card,
body.theme-cinematic .service-card,
body.theme-cinematic .approach-step,
body.theme-cinematic .berg-card,
body.theme-cinematic .narrative-card,
body.theme-cinematic .format-card,
body.theme-cinematic .branche-card,
body.theme-cinematic .qual-item,
body.theme-cinematic .rt-card,
body.theme-cinematic .editorial-card,
body.theme-cinematic .ws-goal-card,
body.theme-cinematic .ws-day-card,
body.theme-cinematic .ws-package-card,
body.theme-cinematic .games-world,
body.theme-cinematic .games-usecase-grid article,
body.theme-cinematic .games-outcome-grid article {
    border: 1px solid rgba(var(--page-accent-rgb), 0.16) !important;
    background:
        radial-gradient(circle at 0 0, rgba(var(--page-accent-rgb), 0.09), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 55px rgba(0, 0, 0, 0.13) !important;
}

body.theme-cinematic .post-card:hover,
body.theme-cinematic .aktuelles-card:hover,
body.theme-cinematic .service-card:hover,
body.theme-cinematic .approach-step:hover,
body.theme-cinematic .berg-card:hover,
body.theme-cinematic .narrative-card:hover,
body.theme-cinematic .format-card:hover,
body.theme-cinematic .branche-card:hover,
body.theme-cinematic .qual-item:hover,
body.theme-cinematic .rt-card:hover,
body.theme-cinematic .editorial-card:hover,
body.theme-cinematic .ws-goal-card:hover,
body.theme-cinematic .ws-day-card:hover,
body.theme-cinematic .ws-package-card:hover,
body.theme-cinematic .games-world:hover,
body.theme-cinematic .games-usecase-grid article:hover,
body.theme-cinematic .games-outcome-grid article:hover {
    border-color: rgba(var(--page-accent-rgb), 0.34) !important;
    background:
        radial-gradient(circle at 0 0, rgba(var(--page-accent-rgb), 0.14), transparent 52%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) !important;
}

/* Home news cards: use a cinematic 16:9 frame and the home palette for interviews. */
body.theme-cinematic.page-index .aktuelles-image {
    display: block;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

body.theme-cinematic.page-index .aktuelles-type.interview {
    border: 1px solid rgba(var(--page-accent-rgb), 0.34);
    background: rgba(var(--page-accent-rgb), 0.16) !important;
    color: var(--page-accent-light) !important;
}

/* Approach cards: keep the CTA readable in every hover state. */
body.theme-cinematic .approach-step .approach-link,
body.theme-cinematic .approach-step:hover .approach-link,
body.theme-cinematic .approach-step .approach-link:hover,
body.theme-cinematic .approach-step .approach-link:focus-visible {
    color: var(--page-accent-light) !important;
    opacity: 1 !important;
}

body.theme-cinematic .approach-grid:hover .approach-step:not(:hover) {
    opacity: 0.68 !important;
    filter: none !important;
}

/* Audience tabs form one coherent navigation component. */
body.theme-cinematic .context-tabs-wrapper {
    gap: 4px !important;
    width: fit-content;
    max-width: 100%;
    padding: 6px !important;
    border: 1px solid rgba(var(--page-accent-rgb), 0.15) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body.theme-cinematic .ctx-tab,
body.theme-cinematic .has-cinematic-video .ctx-tab {
    padding: 12px 18px !important;
    border-radius: 8px !important;
    color: var(--page-copy-soft) !important;
}

body.theme-cinematic .ctx-tab::before {
    content: none !important;
}

body.theme-cinematic .ctx-tab.active {
    background: rgba(var(--page-accent-rgb), 0.14) !important;
    color: var(--page-text) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--page-accent-rgb), 0.18) !important;
}

body.theme-cinematic .ctx-tab:hover,
body.theme-cinematic .ctx-tab:focus-visible {
    background: rgba(var(--page-accent-rgb), 0.09) !important;
    color: var(--page-text) !important;
}

/* Shared white media logos in article cards. */
body.theme-cinematic .post-card .media-logo {
    display: block;
    width: auto;
    height: 22px;
    max-width: 96px;
    object-fit: contain;
    object-position: right center;
    opacity: 0.82;
}

/* Profile CTA: centered title and a clearly visible accent action. */
body.theme-cinematic .conversation-cta {
    padding: clamp(84px, 10vw, 140px) 0 !important;
    background: var(--page-bg-alt) !important;
    color: var(--page-text) !important;
    text-align: center !important;
}

body.theme-cinematic .conversation-cta > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
}

body.theme-cinematic .conversation-cta h2 {
    width: min(100%, 1100px) !important;
    margin-inline: auto !important;
    text-align: center !important;
}

body.theme-cinematic .conversation-cta-button,
body.theme-cinematic .conversation-cta-button:hover,
body.theme-cinematic .conversation-cta-button:focus-visible {
    border: 1px solid var(--page-accent) !important;
    background: var(--page-accent) !important;
    color: var(--page-bg) !important;
    box-shadow: 0 14px 36px rgba(var(--page-accent-rgb), 0.18) !important;
}

/* Legal pages are editorial documents, not a dark card inside a dark page. */
body.theme-cinematic .legal-container {
    width: min(100% - (2 * var(--page-gutter)), 980px) !important;
    max-width: 980px !important;
    margin: clamp(120px, 14vw, 180px) auto clamp(80px, 10vw, 140px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.theme-cinematic main.legal-container > section#impressum,
body.theme-cinematic main.legal-container > section#datenschutz {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.theme-cinematic .legal-container h1 {
    border-bottom: 1px solid rgba(var(--page-accent-rgb), 0.3) !important;
    color: var(--page-text) !important;
}

body.theme-cinematic .legal-container h2,
body.theme-cinematic .legal-container h3,
body.theme-cinematic .legal-container h4 {
    color: var(--page-text) !important;
}

body.theme-cinematic .legal-container p,
body.theme-cinematic .legal-container li,
body.theme-cinematic .legal-container .impressum-entry {
    color: var(--page-copy) !important;
}

body.theme-cinematic .legal-container hr {
    height: 1px !important;
    margin: clamp(56px, 8vw, 88px) 0 !important;
    background: linear-gradient(90deg, var(--page-accent), transparent 72%) !important;
    opacity: 0.42;
}

/* Contrast safeguards found in the full route audit. */
body.theme-cinematic .kk-title {
    color: var(--page-text) !important;
    font-weight: 600 !important;
}

body.theme-cinematic .kk-card-placeholder .kk-title {
    color: var(--page-copy-soft) !important;
}

body.theme-cinematic .kk-card-placeholder .kk-cover-wrap {
    border: 0 !important;
    background: linear-gradient(145deg, rgba(var(--page-accent-rgb), 0.08), rgba(255, 255, 255, 0.018)) !important;
    color: var(--page-accent) !important;
    box-shadow: inset 0 1px 0 rgba(var(--page-accent-rgb), 0.12) !important;
}

body.theme-cinematic.page-index .btn-text {
    border-bottom-color: rgba(var(--page-accent-rgb), 0.52) !important;
    color: var(--page-accent-light) !important;
}

body.theme-cinematic.page-markuskirchmair .kw-banner .kw-cta,
body.theme-cinematic.page-markuskirchmair .kw-promo-card .kw-cta {
    background: var(--page-accent) !important;
    color: var(--page-bg) !important;
}

body.theme-cinematic.page-coach button[onclick*="openModal"] {
    background: var(--page-accent) !important;
    color: var(--page-bg) !important;
    border-color: var(--page-accent) !important;
}

/* Footer and form interactions inherit the active page colour in every language. */
body.theme-cinematic footer .footer-link:hover,
body.theme-cinematic footer .footer-link:focus-visible,
body.theme-cinematic footer .footer-link-muted:hover,
body.theme-cinematic footer .footer-link-muted:focus-visible,
body.theme-cinematic footer .footer-list-item:hover {
    color: var(--page-accent-light) !important;
}

body.theme-cinematic .enhanced-input:focus {
    border-color: var(--page-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--page-accent-rgb), 0.14) !important;
}

/* Error pages follow the same dark, accent-led visual system. */
body.theme-cinematic.page-404 > section > div > div:first-child {
    background: linear-gradient(135deg, var(--page-accent-light), var(--page-accent-dark)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

body.theme-cinematic.page-404 > section p {
    color: var(--page-copy) !important;
}

body.theme-cinematic.page-404 > section a {
    border: 1px solid rgba(var(--page-accent-rgb), 0.34) !important;
    background: rgba(var(--page-accent-rgb), 0.09) !important;
    color: var(--page-accent-light) !important;
}

body.theme-cinematic.page-404 > section a:first-of-type {
    border-color: var(--page-accent) !important;
    background: var(--page-accent) !important;
    color: var(--page-bg) !important;
}

body.theme-cinematic.page-workshops .ws-branche-chip span,
body.theme-cinematic.page-workshop .ws-branche-chip span,
body.theme-cinematic.page-ateliers .ws-branche-chip span,
body.theme-cinematic.page-talleres .ws-branche-chip span {
    color: var(--page-text) !important;
}

@media (max-width: 700px) {
    /*
     * Mobile video heroes grow upward from a compact bottom inset. Legacy page
     * paddings previously left 128-164 px below the copy, making it appear
     * vertically centred even though the hero itself used flex-end.
     */
    body.theme-cinematic .has-cinematic-video {
        min-height: 100svh !important;
        height: auto !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        align-items: flex-end !important;
    }

    body.theme-cinematic .has-cinematic-video > .container,
    body.theme-cinematic #hero-container.has-cinematic-video > .hero-overlay {
        align-self: flex-end !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    /* Keep the audio control in its own clear zone below the header. */
    body.theme-cinematic .has-cinematic-video .cinematic-sound-toggle,
    body.theme-cinematic .has-cinematic-video:not(#hero-container) .cinematic-sound-toggle {
        top: calc(var(--notice-height, 0px) + 84px) !important;
        right: 16px !important;
        bottom: auto !important;
        z-index: 40 !important;
    }

    body.theme-cinematic .has-cinematic-video .cinematic-ai-generated {
        right: 16px !important;
        width: 16px !important;
        height: 56px !important;
    }
}

/* Local .php URLs keep the same destination-specific navigation colours. */
body.theme-cinematic .nav-link[href$="markuskirchmair.php"],
body.theme-cinematic .mobile-menu-link[href$="markuskirchmair.php"] { --nav-accent: #d5a66e; }
body.theme-cinematic .nav-link[href$="coach.php"],
body.theme-cinematic .mobile-menu-link[href$="coach.php"] { --nav-accent: #b6a1e5; }
body.theme-cinematic .nav-link[href$="vortraege.php"],
body.theme-cinematic .mobile-menu-link[href$="vortraege.php"] { --nav-accent: #f18470; }
body.theme-cinematic .nav-link[href$="workshops.php"],
body.theme-cinematic .mobile-menu-link[href$="workshops.php"] { --nav-accent: #e1b65a; }
body.theme-cinematic .nav-link[href$="ki-games.php"],
body.theme-cinematic .mobile-menu-link[href$="ki-games.php"] { --nav-accent: #b6ce72; }
body.theme-cinematic .nav-link[href$="buecher.php"],
body.theme-cinematic .mobile-menu-link[href$="buecher.php"] { --nav-accent: #73d4c8; }
body.theme-cinematic .nav-link[href$="aktuelles.php"],
body.theme-cinematic .mobile-menu-link[href$="aktuelles.php"] { --nav-accent: #d28da8; }
body.theme-cinematic .nav-link[href$="speaking.php"],
body.theme-cinematic .nav-link[href$="conferenze.php"],
body.theme-cinematic .nav-link[href$="conferences.php"],
body.theme-cinematic .nav-link[href$="conferencias.php"],
body.theme-cinematic .mobile-menu-link[href$="speaking.php"],
body.theme-cinematic .mobile-menu-link[href$="conferenze.php"],
body.theme-cinematic .mobile-menu-link[href$="conferences.php"],
body.theme-cinematic .mobile-menu-link[href$="conferencias.php"] { --nav-accent: #f18470; }
body.theme-cinematic .nav-link[href$="workshop.php"],
body.theme-cinematic .nav-link[href$="ateliers.php"],
body.theme-cinematic .nav-link[href$="talleres.php"],
body.theme-cinematic .mobile-menu-link[href$="workshop.php"],
body.theme-cinematic .mobile-menu-link[href$="ateliers.php"],
body.theme-cinematic .mobile-menu-link[href$="talleres.php"] { --nav-accent: #e1b65a; }
body.theme-cinematic .nav-link[href$="books.php"],
body.theme-cinematic .nav-link[href$="libri.php"],
body.theme-cinematic .nav-link[href$="livres.php"],
body.theme-cinematic .nav-link[href$="libros.php"],
body.theme-cinematic .mobile-menu-link[href$="books.php"],
body.theme-cinematic .mobile-menu-link[href$="libri.php"],
body.theme-cinematic .mobile-menu-link[href$="livres.php"],
body.theme-cinematic .mobile-menu-link[href$="libros.php"] { --nav-accent: #73d4c8; }

/* Horizontal editorial rails must scroll inside themselves, never widen the page. */
body.theme-cinematic .gallery-track {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: clip !important;
    contain: inline-size paint !important;
}

/* Compact series cards remain genuinely two-column on small screens. */
@media (max-width: 600px) {
    body.theme-cinematic .book-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.theme-cinematic .book-series-item {
        min-width: 0 !important;
        padding: 14px 10px !important;
        overflow: hidden !important;
    }

    body.theme-cinematic .book-series-item img {
        width: auto !important;
        max-width: 100% !important;
        height: 150px !important;
        object-fit: contain !important;
    }
}

/* The icon stays visually restrained while its transparent hit area remains accessible. */
body.theme-cinematic .has-cinematic-video .cinematic-sound-toggle {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background: transparent !important;
}

@media (max-width: 600px) {
    body.theme-cinematic main section:not(.has-cinematic-video) h2,
    body.theme-cinematic main section:not(.has-cinematic-video) > .container > h2 {
        max-width: 100% !important;
        font-size: clamp(1.9rem, 9vw, 2.55rem) !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        text-wrap: balance !important;
    }
}

/* Article detail pages use the same dark, restrained system as every other content page. */
body.theme-cinematic.page-artikel .scroll-progress,
body.theme-cinematic.page-post .scroll-progress {
    background: var(--page-accent) !important;
    animation: none !important;
}

body.theme-cinematic.page-artikel .article-header,
body.theme-cinematic.page-post .article-header {
    margin-top: clamp(88px, 9vw, 132px) !important;
    padding: clamp(42px, 6vw, 78px) clamp(22px, 5vw, 70px) !important;
    border: 1px solid rgba(var(--page-accent-rgb), 0.2) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(var(--page-accent-rgb), 0.13), transparent 34%),
        linear-gradient(145deg, rgba(var(--page-accent-rgb), 0.065), rgba(255, 255, 255, 0.012) 48%, rgba(255, 255, 255, 0.005)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body.theme-cinematic.page-artikel .article-header::before,
body.theme-cinematic.page-post .article-header::before {
    content: none !important;
}

body.theme-cinematic.page-artikel .back-link,
body.theme-cinematic.page-post .back-link {
    color: var(--page-accent-light) !important;
}

body.theme-cinematic.page-artikel .article-meta,
body.theme-cinematic.page-post .article-meta {
    justify-content: center !important;
    margin-bottom: 1.75rem !important;
}

body.theme-cinematic.page-artikel .article-date,
body.theme-cinematic.page-post .article-date {
    color: var(--page-copy) !important;
}

body.theme-cinematic.page-artikel .article-title,
body.theme-cinematic.page-post .article-title {
    max-width: 980px !important;
    margin: 0 auto 1.75rem !important;
    color: var(--page-text) !important;
    text-align: center !important;
    text-wrap: balance !important;
}

body.theme-cinematic.page-artikel .article-excerpt,
body.theme-cinematic.page-post .article-excerpt {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 1.4rem 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(var(--page-accent-rgb), 0.42) !important;
    color: var(--page-copy) !important;
    text-align: center !important;
}

body.theme-cinematic.page-artikel .article-image-wrapper,
body.theme-cinematic.page-post .article-image-wrapper {
    margin-top: clamp(28px, 4vw, 52px) !important;
    border: 1px solid rgba(var(--page-accent-rgb), 0.14) !important;
    box-shadow: 0 22px 65px rgba(0, 0, 0, 0.34) !important;
}

body.theme-cinematic.page-artikel .article-content,
body.theme-cinematic.page-post .article-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: clamp(48px, 7vw, 88px) clamp(2px, 2vw, 20px) !important;
}

body.theme-cinematic.page-artikel .article-content h2,
body.theme-cinematic.page-post .article-content h2,
body.theme-cinematic.page-artikel .article-content h3,
body.theme-cinematic.page-post .article-content h3 {
    color: var(--page-text) !important;
    text-align: center !important;
    text-wrap: balance !important;
}

body.theme-cinematic.page-artikel .article-content h2::after,
body.theme-cinematic.page-post .article-content h2::after {
    left: 50% !important;
    background: var(--page-accent) !important;
    transform: translateX(-50%) !important;
}

body.theme-cinematic.page-artikel .article-content p,
body.theme-cinematic.page-post .article-content p,
body.theme-cinematic.page-artikel .article-content li,
body.theme-cinematic.page-post .article-content li {
    color: var(--page-copy) !important;
}

body.theme-cinematic.page-artikel .article-content strong,
body.theme-cinematic.page-post .article-content strong {
    color: var(--page-text) !important;
}

body.theme-cinematic.page-artikel .share-section,
body.theme-cinematic.page-post .share-section {
    border-top-color: rgba(var(--page-accent-rgb), 0.2) !important;
}

body.theme-cinematic.page-artikel .share-label,
body.theme-cinematic.page-post .share-label {
    color: var(--page-copy) !important;
}

body.theme-cinematic.page-artikel .share-btn,
body.theme-cinematic.page-post .share-btn {
    border: 1px solid rgba(var(--page-accent-rgb), 0.26) !important;
    background: rgba(var(--page-accent-rgb), 0.07) !important;
    color: var(--page-accent-light) !important;
}

body.theme-cinematic.page-artikel .share-btn::before,
body.theme-cinematic.page-post .share-btn::before {
    background: var(--page-accent) !important;
}

body.theme-cinematic.page-artikel .share-btn:hover,
body.theme-cinematic.page-artikel .share-btn:focus-visible,
body.theme-cinematic.page-post .share-btn:hover,
body.theme-cinematic.page-post .share-btn:focus-visible {
    color: var(--page-bg) !important;
}

@media (max-width: 768px) {
    body.theme-cinematic.page-artikel .article-header,
    body.theme-cinematic.page-post .article-header {
        margin-top: 76px !important;
        padding: 34px 18px 38px !important;
        border-radius: 14px !important;
    }

    body.theme-cinematic.page-artikel .article-title,
    body.theme-cinematic.page-post .article-title {
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }

    body.theme-cinematic.page-artikel .article-excerpt,
    body.theme-cinematic.page-post .article-excerpt {
        font-size: 1rem !important;
    }
}

/* Headings inside editorial copy follow the same left edge as their text. */
body.theme-cinematic main section#profile-section .text-block > h2,
body.theme-cinematic main section:not(.has-cinematic-video) > .container:has(> .section-lead) > h2,
body.theme-cinematic > section:not(.has-cinematic-video) > .container:has(> .section-lead) > h2 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
    text-wrap: balance;
}

/* The complete mobile navigation fits into one viewport, including languages and contact. */
@media (max-width: 1100px) {
    /*
     * Include the iPhone status-bar safe area in the fixed navigation layer.
     * The opaque first part prevents scrolled page content from leaking above
     * the header; below the controls it still fades cleanly into the page.
     */
    body.theme-cinematic .header,
    body.theme-cinematic .header.scrolled {
        top: var(--notice-height, 0px) !important;
        height: calc(72px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        background-color: transparent !important;
        background-image: linear-gradient(
            to bottom,
            rgba(3, 4, 4, 0.5) 0%,
            rgba(3, 4, 4, 0) 100%
        ) !important;
        box-sizing: border-box !important;
    }

    body.theme-cinematic .burger-icon {
        top: calc(var(--notice-height, 0px) + env(safe-area-inset-top) + 13px) !important;
    }

    body.theme-cinematic #cursor {
        display: none !important;
    }

    body.theme-cinematic .mobile-menu-overlay {
        height: 100dvh !important;
        min-height: 0 !important;
        padding:
            calc(env(safe-area-inset-top) + 58px)
            24px
            max(16px, env(safe-area-inset-bottom)) !important;
        justify-content: center !important;
        gap: clamp(6px, 1.25dvh, 13px) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.theme-cinematic .mobile-menu-link {
        padding: 0.12rem 0.35rem !important;
        font-size: clamp(1.35rem, 3.45dvh, 1.9rem) !important;
        line-height: 1 !important;
        text-wrap: nowrap !important;
    }

    body.theme-cinematic .mobile-lang-section {
        width: min(100%, 350px) !important;
        margin-top: 0.15rem !important;
        padding-top: 0.55rem !important;
        justify-content: center !important;
        gap: clamp(0.2rem, 1.5vw, 0.65rem) !important;
        border-top-color: rgba(232, 231, 226, 0.12) !important;
    }

    body.theme-cinematic .mobile-lang-link {
        padding: 0.28rem 0.48rem !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }
}

@media (max-width: 1100px) and (max-height: 700px) {
    body.theme-cinematic .mobile-menu-overlay {
        padding-top: calc(env(safe-area-inset-top) + 48px) !important;
        gap: 4px !important;
    }

    body.theme-cinematic .mobile-menu-link {
        font-size: 1.22rem !important;
    }

    body.theme-cinematic .mobile-lang-section {
        margin-top: 0 !important;
        padding-top: 0.38rem !important;
    }
}

/*
 * Mobile cinematic heroes use two scroll phases:
 * 1. eyebrow + headline alone above the fold;
 * 2. description and actions after the first scroll.
 * The portrait video stays pinned until the actual page content begins.
 */
@media (max-width: 700px) {
    body.theme-cinematic .has-cinematic-video.cinematic-mobile-split {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: clip !important;
    }

    body.theme-cinematic .cinematic-mobile-split > .cinematic-hero-media {
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        width: 100% !important;
        /*
         * Use the largest mobile viewport only for the picture layer. On
         * iPhone this lets the portrait video continue behind Safari's top
         * and bottom chrome instead of exposing a strip of page content.
         * The intro below intentionally keeps 100svh so its headline remains
         * inside the currently visible area when the address bar is open.
         */
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 0 -100vh !important;
    }

    @supports (height: 100lvh) {
        body.theme-cinematic .cinematic-mobile-split > .cinematic-hero-media {
            height: 100lvh !important;
            min-height: 100lvh !important;
            margin-bottom: -100lvh !important;
        }
    }

    body.theme-cinematic .cinematic-mobile-split > .container,
    body.theme-cinematic #hero-container.cinematic-mobile-split > .hero-overlay {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-flow {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-intro {
        display: flex !important;
        min-height: calc(100svh + 4px) !important;
        padding:
            calc(var(--notice-height, 0px) + 104px)
            0
            max(30px, env(safe-area-inset-bottom)) !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-intro h1 {
        margin-bottom: 0 !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-details {
        position: relative !important;
        z-index: 0 !important;
        padding: clamp(58px, 10svh, 86px) 0 max(52px, calc(env(safe-area-inset-bottom) + 34px)) !important;
        isolation: isolate !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-details::before {
        content: "" !important;
        position: absolute !important;
        z-index: -1 !important;
        inset: 0 auto 0 50% !important;
        width: 100vw !important;
        background: linear-gradient(
            to bottom,
            rgba(7, 8, 8, 0) 0%,
            rgba(7, 8, 8, 0.46) 28%,
            rgba(7, 8, 8, 0.82) 62%,
            rgba(7, 8, 8, 0.97) 100%
        ) !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }

    /* Home: the subtitle fade runs from clear to 50% black and joins the
       press rail without the legacy 28px spacer. */
    body.theme-cinematic #hero-container.cinematic-mobile-split .hero-text-wrapper.cinematic-mobile-flow {
        margin-bottom: 0 !important;
    }

    body.theme-cinematic #hero-container.cinematic-mobile-split .cinematic-mobile-details::before {
        background: linear-gradient(
            to bottom,
            rgba(7, 8, 8, 0) 0%,
            rgba(7, 8, 8, 0.5) 100%
        ) !important;
    }

    /* Heading-only profile heroes have no details panel to carry the fade.
       Give their lower edge the same seamless transition into page content. */
    body.theme-cinematic .cinematic-mobile-split.cinematic-mobile-heading-only::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 3 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: clamp(150px, 24svh, 220px) !important;
        background: linear-gradient(
            to bottom,
            rgba(7, 8, 8, 0) 0%,
            rgba(7, 8, 8, 0.52) 58%,
            rgba(7, 8, 8, 0.98) 100%
        ) !important;
        pointer-events: none !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-details > :first-child {
        margin-top: 0 !important;
    }

    body.theme-cinematic .cinematic-mobile-split .cinematic-mobile-details > :last-child {
        margin-bottom: 0 !important;
    }
}