/* Intro 1.3.1 – mobile first */

.intro-selector,
.intro-selector * {
    box-sizing: border-box;
}

.intro-selector {
    --intro-bg: #0d0d0d;
    --intro-text: #fff;
    --intro-muted: #d3d3d3;
    --intro-mobile-height: 50;
    --intro-desktop-height: 100;
    --intro-content-max: 440px;
    --intro-transition: 550ms;
    --intro-brand-top-mobile: 18px;
    --intro-brand-top-desktop: 18px;
    --intro-heading-axis: 36%;
    --intro-title-mobile: 42px;
    --intro-title-desktop: 72px;
    --intro-description-mobile: 16px;
    --intro-description-desktop: 15px;
    --intro-bullets-mobile: 11px;
    --intro-bullets-desktop: 10px;
    --intro-button-mobile: 11px;
    --intro-button-desktop: 10px;

    position: relative;
    width: 100%;
    max-width: none;
    overflow: hidden;
    background: var(--intro-bg);
    color: var(--intro-text);
    isolation: isolate;
    font-family: inherit;
}

.intro-selector--full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.intro-selector__sr-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.intro-selector__panels {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.intro-panel {
    --intro-accent: #009fe3;
    --intro-overlay-strong: rgba(0,0,0,.6);
    --intro-overlay-mid: rgba(0,0,0,.36);
    --intro-overlay-soft: rgba(0,0,0,.18);
    --intro-hover-overlay: rgba(0,0,0,0);
    --intro-focus-angle-mobile: 90deg;
    --intro-focus-angle-desktop: 90deg;
    --intro-focus-angle: var(--intro-focus-angle-mobile);
    --intro-axis-focus-width: 72%;
    --intro-image-pos-mobile: center center;
    --intro-image-pos-desktop: center center;
    --intro-logo-mobile: 52px;
    --intro-logo-desktop: 94px;
    --intro-align-mobile: left;
    --intro-align-desktop: left;
    --intro-align-items-mobile: flex-start;
    --intro-align-items-desktop: flex-start;
    --intro-content-justify-mobile: flex-end;
    --intro-content-justify-desktop: center;
    --intro-list-items-mobile: flex-start;
    --intro-list-justify-mobile: flex-start;
    --intro-list-direction-mobile: row;
    --intro-list-items-desktop: flex-start;
    --intro-list-justify-desktop: flex-start;
    --intro-list-direction-desktop: row;

    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: calc(var(--intro-mobile-height) * 1vh);
    min-height: calc(var(--intro-mobile-height) * 1svh);
    overflow: hidden;
    color: var(--intro-text) !important;
    text-decoration: none !important;
    background: #080b0f;
    transition: flex-grow var(--intro-transition) cubic-bezier(.4,0,.2,1), filter 250ms ease;
}

.intro-selector--aviation-first .intro-panel--aviation { order: 1; }
.intro-selector--aviation-first .intro-panel--auto { order: 2; }

.intro-panel:focus-visible {
    outline: 2px solid var(--intro-accent);
    outline-offset: -4px;
}

.intro-panel__picture,
.intro-panel__image,
.intro-panel__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.intro-panel__picture {
    display: block;
    z-index: 0;
    overflow: hidden;
}

.intro-panel__image {
    display: block;
    object-fit: cover;
    object-position: var(--intro-image-pos-mobile);
    opacity: 1 !important;
    transform: scale(1.001);
    transition: transform 800ms cubic-bezier(.4,0,.2,1), filter 500ms ease !important;
}

/* Enfolds Standard-Bildhover innerhalb des Intro zuverlässig deaktivieren. */
#top .intro-selector .image-overlay,
#top .intro-selector .image-overlay-inside {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#top .intro-selector a:hover img {
    opacity: 1 !important;
}

.intro-panel__overlay {
    z-index: 1;
    pointer-events: none;
    transition: background 550ms ease, opacity 550ms ease;
}

.intro-panel__overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--intro-hover-overlay);
    opacity: 0;
    transition: opacity 500ms ease;
}

.intro-panel:hover .intro-panel__overlay::after,
.intro-panel:focus-within .intro-panel__overlay::after {
    opacity: 1;
}

/* Mittelachsen-Fokus: Mobile nutzt einen vertikalen Lesbarkeitsverlauf.
 * Auf Desktop überschreibt die instanzbezogene CSS-Regel die Richtung:
 * Auto wird an der rechten Innenkante, Aviation an der linken Innenkante dunkler. */
.intro-panel--overlay-axis .intro-panel__overlay {
    background: linear-gradient(to top, var(--intro-overlay-strong) 0%, var(--intro-overlay-mid) 42%, var(--intro-overlay-soft) 68%, transparent 100%);
}

/* Textfokus: stärker dort, wo der Inhalt sitzt; der Rest des Fotos bleibt lebendig. */
.intro-panel--overlay-focus .intro-panel__overlay {
    background:
        linear-gradient(to top, var(--intro-overlay-strong) 0%, var(--intro-overlay-mid) 36%, transparent 72%),
        linear-gradient(var(--intro-focus-angle), var(--intro-overlay-strong) 0%, var(--intro-overlay-soft) 46%, transparent 78%);
}

.intro-panel--overlay-directional .intro-panel__overlay {
    background: linear-gradient(to top, var(--intro-overlay-strong) 0%, var(--intro-overlay-mid) 52%, rgba(0,0,0,.08) 82%, transparent 100%);
}

.intro-panel--overlay-solid .intro-panel__overlay {
    background: var(--intro-overlay-strong);
}

.intro-panel--overlay-none .intro-panel__overlay {
    background: transparent;
}

.intro-panel__content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: var(--intro-content-justify-mobile);
    align-items: var(--intro-align-items-mobile);
    text-align: var(--intro-align-mobile);
    padding: 2rem 1.25rem;
}

.intro-panel__inner {
    width: min(100%, var(--intro-content-max));
}

.intro-panel__anchor,
.intro-panel__pretitle,
.intro-panel__posttitle {
    width: 100%;
}

.intro-panel__pretitle {
    display: flex;
    flex-direction: column;
    align-items: var(--intro-align-items-mobile);
}

.intro-panel__logo {
    display: block;
    width: auto;
    max-width: min(78%, 280px);
    height: var(--intro-logo-mobile);
    object-fit: contain;
    object-position: center;
    margin: 0 0 1rem;
}

.intro-panel__eyebrow {
    margin: 0 0 .55rem;
    color: var(--intro-accent);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.intro-panel__title,
#top .intro-panel__title {
    margin: 0 0 .8rem;
    padding: 0;
    color: var(--intro-text);
    font-family: inherit;
    font-size: var(--intro-title-mobile);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -.035em;
    text-transform: none;
}

.intro-panel__title span {
    display: block;
    color: var(--intro-accent);
}

.intro-panel__description,
#top .intro-panel__description {
    max-width: 34rem;
    margin: 0 0 1rem;
    color: rgba(255,255,255,.9);
    font-size: var(--intro-description-mobile);
    line-height: 1.58;
    font-weight: 400;
    text-shadow: 0 1px 16px rgba(0,0,0,.32);
}

.intro-panel__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: var(--intro-list-items-mobile);
    gap: .34rem;
    width: 100%;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
}

.intro-panel__list li {
    display: flex;
    align-items: center;
    justify-content: var(--intro-list-justify-mobile);
    flex-direction: var(--intro-list-direction-mobile);
    gap: .6rem;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.93);
    font-size: var(--intro-bullets-mobile);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0,0,0,.28);
}

.intro-panel__list li::before {
    content: "";
    width: 16px;
    height: 1px;
    flex: 0 0 16px;
    background: var(--intro-accent);
    opacity: .78;
}

.intro-panel__button,
#top .intro-panel__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: .86rem 1.1rem;
    border: 1px solid rgba(255,255,255,.46);
    color: #fff !important;
    background: rgba(0,0,0,.20);
    font-family: inherit;
    font-size: var(--intro-button-mobile);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none !important;
    backdrop-filter: blur(4px);
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.intro-panel:hover .intro-panel__button,
.intro-panel:focus-within .intro-panel__button {
    border-color: var(--intro-accent);
    background: color-mix(in srgb, var(--intro-accent) 12%, rgba(0,0,0,.18));
}

.intro-selector--zoom .intro-panel:hover .intro-panel__image,
.intro-selector--zoom .intro-panel:focus-within .intro-panel__image {
    transform: scale(1.045) !important;
}

.intro-selector__brand {
    position: absolute;
    z-index: 8;
    top: var(--intro-brand-top-mobile);
    left: 50%;
    width: min(92%, 560px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .24rem;
    padding: .2rem .75rem;
    pointer-events: none;
}

.intro-selector__brand-logo {
    display: block;
    width: auto;
    height: 36px;
    margin: 0 0 .25rem;
    object-fit: contain;
}

.intro-selector__brand-name,
#top .intro-selector__brand-name {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.intro-selector__brand-name span { color: #009fe3; }

.intro-selector__brand-subtitle {
    color: rgba(255,255,255,.76);
    font-size: 8px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.intro-selector__divider,
.intro-selector__badge { display: none; }

.intro-selector__divider {
    position: absolute;
    z-index: 6;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(255,255,255,.14);
    pointer-events: none;
}

.intro-selector__badge {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 54px;
    padding: .75rem 1rem;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(13,13,13,.88);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.intro-selector__badge span {
    color: rgba(255,255,255,.48);
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    white-space: nowrap;
}

.intro-selector__footer {
    position: absolute;
    z-index: 7;
    right: .75rem;
    bottom: .65rem;
    left: .75rem;
    text-align: center;
    color: rgba(255,255,255,.34);
    font-size: 7px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    pointer-events: none;
}

.intro-selector--animate .intro-panel__anchor {
    animation: introFadeUp 720ms ease both;
}

.intro-selector--animate .intro-panel--aviation .intro-panel__anchor {
    animation-delay: 80ms;
}

@keyframes introFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 600px) {
    .intro-panel__content {
        padding-inline: 2rem;
        padding-block: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Barrierefreiheit: Bei aktivierter Systemoption „Bewegung reduzieren“
     * werden bewegte Effekte abgeschaltet statt auf nahezu 0 ms beschleunigt.
     * So entsteht kein abrupter Zoom.
     */
    .intro-selector *,
    .intro-selector *::before,
    .intro-selector *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    .intro-selector--zoom .intro-panel:hover .intro-panel__image,
    .intro-selector--zoom .intro-panel:focus-within .intro-panel__image {
        transform: scale(1.001) !important;
    }
}


/* =========================================================
   Mobile Swipe-Leistungsflächen (1.3.1)
   Desktop standardmäßig unsichtbar; Aktivierung/Track erfolgt
   instanzbezogen über die dynamische Breakpoint-Regel.
   ========================================================= */
.intro-mobile-detail {
    --intro-detail-bg: #0d0d0d;
    --intro-detail-color: #fff;
    --intro-detail-accent: #009fe3;
    --intro-detail-align: left;
    --intro-detail-items: flex-start;
    --intro-detail-justify: center;

    display: none;
    position: relative;
    overflow: hidden;
    align-items: var(--intro-detail-items);
    justify-content: var(--intro-detail-justify);
    padding: clamp(1.5rem, 7vw, 2.5rem) clamp(1.25rem, 7vw, 2.25rem);
    background: var(--intro-detail-bg);
    color: var(--intro-detail-color);
    text-align: var(--intro-detail-align);
}

/* Keine seitliche Akzentlinie: die Leistungsfläche bleibt bewusst ruhig. */
.intro-mobile-detail::before {
    display: none;
}

.intro-mobile-detail__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 34rem);
}

.intro-mobile-detail__title,
#top .intro-mobile-detail__title {
    margin: 0 0 .8rem;
    padding: 0;
    color: var(--intro-detail-color);
    font-family: inherit;
    font-size: clamp(22px, 6.4vw, 30px);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none !important;
}

.intro-mobile-detail__title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-top: .9rem;
    margin-left: 0;
    background: var(--intro-detail-accent);
}

.intro-mobile-detail[style*="--intro-detail-align:center"] .intro-mobile-detail__title::after {
    margin-left: auto;
    margin-right: auto;
}

.intro-mobile-detail[style*="--intro-detail-align:right"] .intro-mobile-detail__title::after {
    margin-left: auto;
    margin-right: 0;
}

.intro-mobile-detail__text,
#top .intro-mobile-detail__text {
    margin: 0;
    color: color-mix(in srgb, var(--intro-detail-color) 88%, transparent);
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.6;
    font-weight: 400;
}

/* iOS/Safari: Bild + Overlay auf stabilen Compositor-Layern halten.
 * Verhindert kurzes Aufblitzen des ungedimmten Fotos während des Swipes. */
.intro-selector--mobile-swipe-details .intro-panel__picture,
.intro-selector--mobile-swipe-details .intro-panel__overlay,
.intro-selector--mobile-swipe-details .intro-panel__content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.intro-selector--mobile-swipe-details .intro-panel__overlay {
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    opacity: 1 !important;
    transition: none !important;
}

.intro-selector--mobile-swipe-details .intro-panel__overlay::after {
    transition: none !important;
}

.intro-selector--mobile-swipe-details.is-dragging .intro-panel__overlay {
    opacity: 1 !important;
}

.intro-selector--mobile-swipe-details {
    -webkit-user-select: none;
    user-select: none;
}

.intro-selector--mobile-swipe-details .intro-mobile-detail {
    cursor: default;
}