/* _content/TerminalApp.Client/Components/FeedItems/MediaDisplay.razor.rz.scp.css */
.media-display__video-button[b-b25y0xgmd6] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.media-display__video-button video[b-b25y0xgmd6] {
    pointer-events: none;
}
/* _content/TerminalApp.Client/Components/Interactions/GestureHint.razor.rz.scp.css */
.gesture-hint[b-u0u9990hpv] {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 80;
    pointer-events: none;
    overflow: visible;
}

.gesture-hint:not(.is-on)[b-u0u9990hpv] {
    visibility: hidden;
}

.gesture-hint__cluster[b-u0u9990hpv] {
    position: absolute;
    left: var(--hint-x);
    top: var(--hint-y);
    transform-origin: 50% 12%;
}

.gesture-hint__finger[b-u0u9990hpv],
.gesture-hint__ghost[b-u0u9990hpv] {
    width: 1em;
    height: 1em;
    font-size: 5.4rem;
    line-height: 1;
}

.gesture-hint__finger[b-u0u9990hpv] {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0.28rem 0.55rem rgba(0, 0, 0, 0.5));
}

.gesture-hint__ghost[b-u0u9990hpv] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    filter: blur(0.08rem);
}

.gesture-hint__ripple[b-u0u9990hpv],
.gesture-hint__trail[b-u0u9990hpv],
.gesture-hint__spark[b-u0u9990hpv] {
    position: absolute;
    left: 50%;
    pointer-events: none;
}

.gesture-hint__ripple[b-u0u9990hpv] {
    top: 12%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0.8rem color-mix(in srgb, var(--color-primary, #11a2b4) 70%, transparent);
    opacity: 0;
}

.gesture-hint__trail[b-u0u9990hpv] {
    width: 1.35rem;
    height: 11rem;
    margin-left: -0.68rem;
    border-radius: 999px;
    opacity: 0;
    filter: blur(0.12rem);
    background: linear-gradient(
        to top,
        transparent 0%,
        color-mix(in srgb, var(--color-secondary, #c8f29a) 55%, transparent) 35%,
        color-mix(in srgb, var(--color-primary, #11a2b4) 90%, #fff) 100%
    );
}

.gesture-hint__spark[b-u0u9990hpv] {
    top: 18%;
    width: 0.45rem;
    height: 0.45rem;
    margin: -0.22rem 0 0 -0.22rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0.7rem #fff, 0 0 1.3rem var(--color-primary, #11a2b4);
    opacity: 0;
}

.gesture-hint.is-left .gesture-hint__finger[b-u0u9990hpv],
.gesture-hint.is-left .gesture-hint__ghost[b-u0u9990hpv] {
    transform: rotate(-40deg);
    transform-origin: 50% 12%;
}

.gesture-hint.is-right .gesture-hint__finger[b-u0u9990hpv],
.gesture-hint.is-right .gesture-hint__ghost[b-u0u9990hpv] {
    transform: rotate(40deg);
    transform-origin: 50% 12%;
}

.gesture-hint.is-center .gesture-hint__finger[b-u0u9990hpv],
.gesture-hint.is-center .gesture-hint__ghost[b-u0u9990hpv] {
    transform: rotate(-10deg);
    transform-origin: 50% 12%;
}

.gesture-hint--tap .gesture-hint__cluster[b-u0u9990hpv] {
    animation: hint-tap-b-u0u9990hpv 2.8s ease-in-out both;
}

.gesture-hint--tap .gesture-hint__ripple[b-u0u9990hpv] {
    animation: hint-ripple-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--tap .gesture-hint__ripple--late[b-u0u9990hpv] {
    animation-delay: 0.12s;
    border-color: color-mix(in srgb, var(--color-secondary, #c8f29a) 80%, #fff);
}

.gesture-hint--swipe-up .gesture-hint__cluster[b-u0u9990hpv] {
    animation: hint-swipe-up-b-u0u9990hpv 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gesture-hint--swipe-down .gesture-hint__cluster[b-u0u9990hpv] {
    animation: hint-swipe-down-b-u0u9990hpv 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gesture-hint--swipe-up .gesture-hint__trail[b-u0u9990hpv] {
    top: 14%;
    transform-origin: top center;
    animation: hint-trail-follow-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--swipe-down .gesture-hint__trail[b-u0u9990hpv] {
    top: auto;
    bottom: 82%;
    transform-origin: bottom center;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-primary, #11a2b4) 95%, #fff) 0%,
        color-mix(in srgb, var(--color-secondary, #c8f29a) 55%, transparent) 45%,
        transparent 100%
    );
    animation: hint-trail-follow-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--swipe-up .gesture-hint__ghost--a[b-u0u9990hpv],
.gesture-hint--swipe-down .gesture-hint__ghost--a[b-u0u9990hpv] {
    animation: hint-ghost-a-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--swipe-up .gesture-hint__ghost--b[b-u0u9990hpv],
.gesture-hint--swipe-down .gesture-hint__ghost--b[b-u0u9990hpv] {
    animation: hint-ghost-b 2.8s ease-out both;
}

.gesture-hint--swipe-up .gesture-hint__spark[b-u0u9990hpv] {
    animation: hint-spark-up-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--swipe-down .gesture-hint__spark[b-u0u9990hpv] {
    animation: hint-spark-down-b-u0u9990hpv 2.8s ease-out both;
}

.gesture-hint--swipe-up .gesture-hint__spark--late[b-u0u9990hpv],
.gesture-hint--swipe-down .gesture-hint__spark--late[b-u0u9990hpv] {
    animation-delay: 0.18s;
}

@keyframes hint-tap-b-u0u9990hpv {
    0% { opacity: 0; transform: translate(-50%, -16%) scale(0.9); }
    16%, 74% { opacity: 1; transform: translate(-50%, -16%) scale(1); }
    28% { transform: translate(-50%, -16%) scale(0.78); }
    40% { transform: translate(-50%, -16%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -16%) scale(0.94); }
}

@keyframes hint-ripple-b-u0u9990hpv {
    0%, 22% { opacity: 0; transform: scale(0.4); }
    28% { opacity: 0.95; transform: scale(0.7); }
    62% { opacity: 0; transform: scale(3.2); }
    100% { opacity: 0; transform: scale(3.2); }
}

@keyframes hint-swipe-up-b-u0u9990hpv {
    0% { opacity: 0; transform: translate(-50%, 11vh) scale(0.9); }
    12% { opacity: 1; transform: translate(-50%, 7vh) scale(1.04); }
    82% { opacity: 1; transform: translate(-50%, -10vh) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -13vh) scale(0.92); }
}

@keyframes hint-swipe-down-b-u0u9990hpv {
    0% { opacity: 0; transform: translate(-50%, -11vh) scale(0.9); }
    12% { opacity: 1; transform: translate(-50%, -7vh) scale(1.04); }
    82% { opacity: 1; transform: translate(-50%, 10vh) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 13vh) scale(0.92); }
}

@keyframes hint-trail-b-u0u9990hpv {
    0%, 8% { opacity: 0; transform: scaleY(0.15); }
    22% { opacity: 0.95; transform: scaleY(1); }
    70% { opacity: 0.45; transform: scaleY(1.35); }
    100% { opacity: 0; transform: scaleY(1.55); }
}

@keyframes hint-ghost-a-b-u0u9990hpv {
    0%, 12% { opacity: 0; transform: translateY(0); }
    30% { opacity: 0.35; }
    100% { opacity: 0; transform: translateY(1.6rem); }
}

.gesture-hint--swipe-up .gesture-hint__ghost--a[b-u0u9990hpv] {
    animation-name: hint-ghost-up-a-b-u0u9990hpv;
}

.gesture-hint--swipe-up .gesture-hint__ghost--b[b-u0u9990hpv] {
    animation-name: hint-ghost-up-b-b-u0u9990hpv;
}

.gesture-hint--swipe-down .gesture-hint__ghost--a[b-u0u9990hpv] {
    animation-name: hint-ghost-down-a-b-u0u9990hpv;
}

.gesture-hint--swipe-down .gesture-hint__ghost--b[b-u0u9990hpv] {
    animation-name: hint-ghost-down-b-b-u0u9990hpv;
}

@keyframes hint-ghost-up-a-b-u0u9990hpv {
    0%, 10% { opacity: 0; transform: translateY(0) scale(1); }
    28% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(2.1rem) scale(0.92); }
}

@keyframes hint-ghost-up-b-b-u0u9990hpv {
    0%, 16% { opacity: 0; transform: translateY(0) scale(1); }
    36% { opacity: 0.22; }
    100% { opacity: 0; transform: translateY(3.4rem) scale(0.86); }
}

@keyframes hint-ghost-down-a-b-u0u9990hpv {
    0%, 10% { opacity: 0; transform: translateY(0) scale(1); }
    28% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-2.1rem) scale(0.92); }
}

@keyframes hint-ghost-down-b-b-u0u9990hpv {
    0%, 16% { opacity: 0; transform: translateY(0) scale(1); }
    36% { opacity: 0.22; }
    100% { opacity: 0; transform: translateY(-3.4rem) scale(0.86); }
}

@keyframes hint-spark-up-b-u0u9990hpv {
    0%, 18% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    32% { opacity: 1; transform: translate(-1.1rem, -1.4rem) scale(1); }
    100% { opacity: 0; transform: translate(-1.8rem, -3.2rem) scale(0.2); }
}

@keyframes hint-spark-down-b-u0u9990hpv {
    0%, 18% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    32% { opacity: 1; transform: translate(0.9rem, -1.5rem) scale(1); }
    100% { opacity: 0; transform: translate(1.5rem, -3.4rem) scale(0.2); }
}

@keyframes hint-trail-follow-b-u0u9990hpv {
    0%, 8% { opacity: 0; transform: scaleY(0.2); }
    20% { opacity: 1; transform: scaleY(0.85); }
    72% { opacity: 0.55; transform: scaleY(1.45); }
    100% { opacity: 0; transform: scaleY(1.7); }
}
/* _content/TerminalApp.Client/Components/Interactions/SwipeUpHint.razor.rz.scp.css */
.swipe-up-sheet[b-g76fhp7rrg] {
    position: fixed;
    right: 5vw;
    bottom: 0;
    left: 5vw;
    z-index: 60;
    display: flex;
    width: 90vw;
    height: 5.5rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-on-media) 24%, transparent);
    border-bottom: 0;
    border-radius: 1.75rem 1.75rem 0 0;
    background: color-mix(in srgb, var(--color-backdrop) 94%, transparent);
    box-shadow: 0 -0.8rem 2rem color-mix(in srgb, var(--color-shadow) 45%, transparent);
    /* Kein backdrop-filter: das Sheet liegt dauerhaft ueber dem Video, der Blur
       muesste sonst pro Videoframe neu gerastert werden. */
    box-sizing: border-box;
    transition: height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.swipe-up-sheet--open[b-g76fhp7rrg] {
    height: min(88dvh, calc(100dvh - 4.5rem));
}

.swipe-up-sheet--dragging[b-g76fhp7rrg] {
    transition: none;
}

.swipe-up-sheet--dragging:not(.swipe-up-sheet--open)[b-g76fhp7rrg] {
    height: calc(5.5rem + var(--swipe-drag-offset, 0px));
}

.swipe-up-sheet--dragging.swipe-up-sheet--open[b-g76fhp7rrg] {
    height: calc(min(88dvh, calc(100dvh - 4.5rem)) - var(--swipe-drag-offset, 0px));
}

.swipe-up-sheet--open .swipe-up-hint[b-g76fhp7rrg] {
    height: 1rem;
    flex-basis: 1rem;
}

.swipe-up-sheet--open:not(.swipe-up-sheet--dragging) .swipe-up-hint__icon[b-g76fhp7rrg] {
    visibility: hidden;
    opacity: 0;
    animation: none;
}

.swipe-up-sheet__body[b-g76fhp7rrg] {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.swipe-up-hint[b-g76fhp7rrg] {
    position: relative;
    width: 100%;
    height: 5.5rem;
    flex: 0 0 5.5rem;
    z-index: 1;
    margin: 0;
    border: 0;
    appearance: none;
    background: transparent;
    display: grid;
    justify-items: center;
    align-items: center;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    color: var(--color-on-media);
    text-align: center;
    font: inherit;
    transition: background-color 180ms ease-out;
}

.swipe-up-hint--dragging[b-g76fhp7rrg] {
    cursor: grabbing;
    transition: none;
}

.swipe-up-hint__content[b-g76fhp7rrg] {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.5rem 1.5rem 0 0;
    background: transparent;
    animation: none;
    box-sizing: border-box;
}

.swipe-up-hint__icon[b-g76fhp7rrg] {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--color-secondary);
    animation: none;
}

.swipe-up-hint__label[b-g76fhp7rrg] {
    color: var(--color-on-media);
    font-size: var(--text-kiosk-label);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .swipe-up-sheet[b-g76fhp7rrg] {
        right: 5vw;
        left: 5vw;
        width: 90vw;
        height: 4.75rem;
    }

    .swipe-up-sheet--open[b-g76fhp7rrg] {
        height: min(90dvh, calc(100dvh - 3.75rem));
    }

    .swipe-up-sheet--dragging:not(.swipe-up-sheet--open)[b-g76fhp7rrg] {
        height: calc(4.75rem + var(--swipe-drag-offset, 0px));
    }

    .swipe-up-sheet--dragging.swipe-up-sheet--open[b-g76fhp7rrg] {
        height: calc(min(90dvh, calc(100dvh - 3.75rem)) - var(--swipe-drag-offset, 0px));
    }

    .swipe-up-hint[b-g76fhp7rrg] {
        height: 4.75rem;
        flex-basis: 4.75rem;
    }

    .swipe-up-hint__content[b-g76fhp7rrg] {
        height: 100%;
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .swipe-up-sheet[b-g76fhp7rrg],
    .swipe-up-hint__content[b-g76fhp7rrg],
    .swipe-up-hint__icon[b-g76fhp7rrg] {
        animation: none;
    }
}
/* _content/TerminalApp.Client/Components/MockTools/MockDebugPanel.razor.rz.scp.css */
.mock-debug[b-30ohnwwbil] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    font-size: 1rem;
    color: #e8eef7;
    pointer-events: none;
}

.mock-debug.is-open[b-30ohnwwbil] {
    pointer-events: auto;
}

.mock-debug__fab[b-30ohnwwbil] {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    min-width: 4.5rem;
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
    background: #f59e0b;
    color: #111;
    font-weight: 800;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.35);
}

.mock-debug__panel[b-30ohnwwbil] {
    pointer-events: auto;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 1.25rem;
    font-size: 1.05rem;
    border-radius: 0;
    background: rgba(12, 18, 28, 0.98);
    box-sizing: border-box;
}

.mock-debug__head[b-30ohnwwbil] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    font-size: 1.4rem;
}

.mock-debug__head button[b-30ohnwwbil],
.mock-debug__chips button[b-30ohnwwbil],
.mock-debug__kind button[b-30ohnwwbil] {
    border: 0;
    border-radius: 0.4rem;
    padding: 0.55rem 0.85rem;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
}

.mock-debug__label[b-30ohnwwbil] {
    margin: 0.65rem 0 0.35rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

.mock-debug__chips[b-30ohnwwbil] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mock-debug__grid[b-30ohnwwbil] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.65rem;
    margin: 0.65rem 0;
}

.mock-debug__grid label[b-30ohnwwbil] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mock-debug__grid input[type="number"][b-30ohnwwbil] {
    width: 100%;
    border-radius: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0b1220;
    color: inherit;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
}

.mock-debug__check[b-30ohnwwbil] {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
}

.mock-debug__kinds[b-30ohnwwbil] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mock-debug__kind[b-30ohnwwbil] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
}

.mock-debug__kind button.is-on[b-30ohnwwbil] {
    background: #38bdf8;
    color: #082f49;
}
/* _content/TerminalApp.Client/Components/ProgressBarComponent.razor.rz.scp.css */
.terminal-progress[b-nhr47hmke8] {
    position: relative;
    width: 100%;
    height: 100%;
}

.terminal-progress[b-nhr47hmke8]  [role="progressbar"] {
    height: 4px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.terminal-progress[b-nhr47hmke8]  [role="progressbar"] > [data-state] {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
}

.terminal-progress__overlay[b-nhr47hmke8] {
    position: absolute;
    inset: 0;
    height: 4px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.terminal-progress__overlay-indicator[b-nhr47hmke8] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-error, #ff3f5f);
    transform: scaleX(0);
    transform-origin: right center;
    animation: overlay-countdown-b-nhr47hmke8 var(--overlay-duration) linear forwards;
    animation-play-state: paused;
}

.terminal-progress__overlay-indicator.is-running[b-nhr47hmke8] {
    animation-play-state: running;
}

@keyframes overlay-countdown-b-nhr47hmke8 {
    to { transform: scaleX(1); }
}
/* _content/TerminalApp.Client/Pages/Feed.razor.rz.scp.css */
.terminal-feed[b-1nqxs4uuwb] {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.terminal-feed__shell[b-1nqxs4uuwb] {
    --feed-rail-left: clamp(4rem, 8.5vw, 7rem);
    --feed-rail-right: clamp(3rem, 6.5vw, 4.5rem);
    --feed-stage-max-width: calc(100vw - var(--feed-rail-left) - var(--feed-rail-right) - 2rem);
    --feed-progress-height: clamp(10px, 1.5dvh, 16px);
    --feed-bar-min-height: clamp(72px, 7dvh, 136px);
    --feed-free-height: calc(100dvh - var(--feed-progress-height) - env(safe-area-inset-bottom, 0px));
    --feed-stage-height: min(
        calc(var(--feed-free-height) - 2 * var(--feed-bar-min-height)),
        calc(var(--feed-stage-max-width) * 16 / 9)
    );
    /* Die 9:16-Stage ist meist breitenbegrenzt und laesst vertikal Platz uebrig.
       Dieser Rest gehoert zu gleichen Teilen in Kopf- und Fusszeile, sonst kleben
       deren Inhalte am Displayrand statt mittig im sichtbaren Freiraum zu sitzen. */
    --feed-bar-height: calc((var(--feed-free-height) - var(--feed-stage-height)) / 2);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: var(--feed-progress-height) var(--feed-bar-height) minmax(0, 1fr) var(--feed-bar-height);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

/* dvh-Zeilen ergeben krumme Hoehen; zentrierte Kinder landen dann auf halben
   Geraetepixeln und bekommen weiche Kanten. */
@supports (height: round(down, 10.5px, 1px)) {
    .terminal-feed__shell[b-1nqxs4uuwb] {
        --feed-progress-height: round(clamp(10px, 1.5dvh, 16px), 2px);
        --feed-stage-height: round(down, min(
            calc(var(--feed-free-height) - 2 * var(--feed-bar-min-height)),
            calc(var(--feed-stage-max-width) * 16 / 9)
        ), 32px);
        --feed-bar-height: round(down, calc((var(--feed-free-height) - var(--feed-stage-height)) / 2), 2px);
    }
}

.terminal-feed__progress[b-1nqxs4uuwb],
.terminal-feed__header[b-1nqxs4uuwb],
.terminal-feed__footer[b-1nqxs4uuwb],
.terminal-feed__nav[b-1nqxs4uuwb] {
    position: relative;
    z-index: 30;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
}

.terminal-feed__footer[b-1nqxs4uuwb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1rem;
    box-sizing: border-box;
    overflow: visible;
}

.terminal-feed__progress[b-1nqxs4uuwb] {
    width: 100%;
    align-self: stretch;
    padding: 0.35rem 1rem 0;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .terminal-feed__shell[b-1nqxs4uuwb] {
        --feed-progress-height: 6px;
        --feed-bar-min-height: clamp(48px, 7dvh, 72px);
    }

    .terminal-feed__progress[b-1nqxs4uuwb] {
        padding: 2px 12px 0;
    }
}

.terminal-feed__body[b-1nqxs4uuwb] {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: var(--feed-rail-left) minmax(0, 1fr) var(--feed-rail-right);
    align-items: stretch;
    min-width: 0;
    min-height: 0;
}

.terminal-feed__nav[b-1nqxs4uuwb] {
    position: relative;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 0.5rem 0 0.5rem max(0.35rem, 1vw);
    overflow: visible;
    box-sizing: border-box;
}

.feed-nav[b-1nqxs4uuwb] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    align-items: stretch;
    justify-content: center;
    gap: clamp(0.2rem, 1vh, 0.6rem);
    padding: clamp(0.35rem, 1.2vh, 0.8rem) clamp(0.25rem, 0.6vw, 0.5rem);
    border: 1px solid color-mix(in srgb, var(--color-on-media) 24%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--color-backdrop) 92%, transparent);
    box-shadow: 0.5rem 0 1.6rem color-mix(in srgb, var(--color-shadow) 40%, transparent);
    /* Kein backdrop-filter: der Blur laege ueber dem laufenden Video und muesste
       pro Videoframe neu gerastert werden. */
    contain: layout paint;
    overflow-y: auto;
    box-sizing: border-box;
}

.feed-nav__item[b-1nqxs4uuwb] {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: clamp(0.35rem, 1vh, 0.7rem);
    border: 1px solid transparent;
    border-radius: 1rem;
    background: transparent;
    color: var(--color-on-media);
    font: inherit;
    cursor: pointer;
    transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out;
}

.feed-nav__item[b-1nqxs4uuwb]  svg {
    flex: 0 0 auto;
    width: clamp(1.9rem, 4.2vw, 3rem);
    height: clamp(1.9rem, 4.2vw, 3rem);
    color: var(--feed-nav-accent, var(--color-on-media));
}

/* Touch-Geräte halten :hover nach dem Tippen fest, daher nur für echte Zeiger. */
@media (hover: hover) and (pointer: fine) {
    .feed-nav__item:hover[b-1nqxs4uuwb] {
        border-color: var(--feed-nav-accent, var(--color-primary));
        background: color-mix(in srgb, var(--feed-nav-accent, var(--color-primary)) 18%, transparent);
        transform: translateX(0.1rem);
    }
}

.feed-nav__item:focus-visible[b-1nqxs4uuwb] {
    border-color: var(--feed-nav-accent, var(--color-primary));
    background: color-mix(in srgb, var(--feed-nav-accent, var(--color-primary)) 18%, transparent);
    outline: none;
}

.feed-nav__item:active[b-1nqxs4uuwb] {
    transform: translateX(0);
}

.feed-nav__item.is-active[b-1nqxs4uuwb] {
    border-color: var(--feed-nav-accent, var(--color-primary));
    background: color-mix(in srgb, var(--feed-nav-accent, var(--color-primary)) 26%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feed-nav-accent, var(--color-primary)) 45%, transparent);
}

@media (hover: none) {
    .feed-nav__item:hover[b-1nqxs4uuwb] {
        transform: none;
    }
}

.feed-nav__item--map[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-accent-info); }
.feed-nav__item--school[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-accent-success); }
.feed-nav__item--events[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-accent-warning); }
.feed-nav__item--training[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-secondary); }
.feed-nav__item--internship[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-primary); }
.feed-nav__item--study[b-1nqxs4uuwb] { --feed-nav-accent: var(--color-tertiary); }

@media (prefers-reduced-motion: reduce) {
    .feed-nav__item[b-1nqxs4uuwb] { transition: none; }
}

@media (max-width: 480px) {
    .terminal-feed__shell[b-1nqxs4uuwb] {
        --feed-rail-left: clamp(2.75rem, 14vw, 3.75rem);
        --feed-rail-right: clamp(2.5rem, 12vw, 3.5rem);
    }

    .terminal-feed__footer[b-1nqxs4uuwb] {
        padding-inline: 0.5rem;
    }

    .terminal-feed__nav[b-1nqxs4uuwb] {
        padding: 0.35rem 0 0.35rem 0.3rem;
    }

    .feed-nav[b-1nqxs4uuwb] {
        gap: 0.2rem;
        padding: 0.3rem 0.25rem;
    }
}

.terminal-feed__gesture-column[b-1nqxs4uuwb] {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: 0;
}

.terminal-feed[b-1nqxs4uuwb]  .terminal-feed__gesture-rail {
    position: relative;
    flex: 0 1 26rem;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 0.5rem max(0.35rem, 1vw) 0.5rem 0;
    box-sizing: border-box;
    touch-action: none;
    cursor: grab;
}

.swipe-rail__controls[b-1nqxs4uuwb] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-right: max(0.35rem, 1vw);
}

.swipe-rail__hold[b-1nqxs4uuwb],
.swipe-rail__restart[b-1nqxs4uuwb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 3.5rem);
    height: 3rem;
    padding: 0.3rem;
    border: 1px solid color-mix(in srgb, var(--color-on-media) 24%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--color-backdrop) 92%, transparent);
    color: var(--color-on-media);
    box-sizing: border-box;
}

.swipe-rail__hold[b-1nqxs4uuwb],
.swipe-rail__restart[b-1nqxs4uuwb] {
    cursor: pointer;
    touch-action: none;
}

.swipe-rail__hold:focus-visible[b-1nqxs4uuwb],
.swipe-rail__restart:focus-visible[b-1nqxs4uuwb] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.swipe-rail__hold.is-holding[b-1nqxs4uuwb],
.swipe-rail__restart:active[b-1nqxs4uuwb] {
    background: color-mix(in srgb, var(--color-primary) 24%, var(--color-backdrop));
}

.swipe-rail__hold[b-1nqxs4uuwb]  svg,
.swipe-rail__restart[b-1nqxs4uuwb]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.swipe-rail[b-1nqxs4uuwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1.2vh, 0.9rem);
    width: 100%;
    height: 100%;
    padding: clamp(0.5rem, 1.4vh, 1rem) 0.25rem;
    border: 1px solid color-mix(in srgb, var(--color-on-media) 22%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-primary) 30%, var(--color-backdrop)),
            color-mix(in srgb, var(--color-backdrop) 92%, transparent) 48%,
            color-mix(in srgb, var(--color-tertiary) 30%, var(--color-backdrop)));
    box-shadow: 0 0 1.4rem color-mix(in srgb, var(--color-primary) 32%, transparent);
    /* Kein backdrop-filter: die Dauer-Animation im Inneren wuerde den Blur in jedem
       Frame neu berechnen. Deckendere Stops ersetzen die Trennwirkung. */
    contain: layout;
    box-sizing: border-box;
}

.swipe-rail__arrows[b-1nqxs4uuwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.swipe-rail__arrows[b-1nqxs4uuwb]  svg {
    flex: 0 0 auto;
    width: clamp(1.3rem, 3vw, 2.1rem);
    height: clamp(1.3rem, 3vw, 2.1rem);
    color: var(--color-on-media);
}

.swipe-rail__arrows--up[b-1nqxs4uuwb]  svg {
    animation: swipe-rail-rise-b-1nqxs4uuwb 1.2s ease-in-out infinite;
}

.swipe-rail__arrows[b-1nqxs4uuwb]  svg:last-child {
    margin-top: -0.35rem;
}

.swipe-rail__arrows--up[b-1nqxs4uuwb]  svg:last-child,
.swipe-rail__arrows--down[b-1nqxs4uuwb]  svg:first-child {
    animation-delay: 0.18s;
}

.swipe-rail__arrows--down[b-1nqxs4uuwb]  svg {
    animation: swipe-rail-sink-b-1nqxs4uuwb 1.2s ease-in-out infinite;
}

.swipe-rail__track[b-1nqxs4uuwb] {
    position: relative;
    flex: 1 1 auto;
    width: 0.3rem;
    min-height: 3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-on-media) 18%, transparent);
    overflow: hidden;
}

.swipe-rail__comet[b-1nqxs4uuwb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, var(--color-primary), var(--color-tertiary), transparent);
    animation: swipe-rail-comet-b-1nqxs4uuwb 1.6s ease-in-out infinite;
    opacity: 0.82;
    transform: translateY(76%);
}

/* Traegt die Bewegung des Thumbs, damit translateY sich auf die Trackhoehe bezieht. */
.swipe-rail__thumb-travel[b-1nqxs4uuwb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: swipe-rail-thumb-b-1nqxs4uuwb 1.6s ease-in-out infinite;
    transform: translateY(40%);
}

.swipe-rail__thumb[b-1nqxs4uuwb] {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(0.85rem, 2vw, 1.15rem);
    height: clamp(0.85rem, 2vw, 1.15rem);
    margin-left: calc(clamp(0.85rem, 2vw, 1.15rem) / -2);
    border-radius: 999px;
    background: var(--color-on-media);
    box-shadow: 0 0 0.8rem var(--color-primary);
}

@keyframes swipe-rail-rise-b-1nqxs4uuwb {
    0%, 100% { transform: translateY(0.18rem); opacity: 0.5; }
    50% { transform: translateY(-0.18rem); opacity: 1; }
}

@keyframes swipe-rail-sink-b-1nqxs4uuwb {
    0%, 100% { transform: translateY(-0.18rem); opacity: 0.5; }
    50% { transform: translateY(0.18rem); opacity: 1; }
}

/* translateY statt top: Prozentwerte beziehen sich auf die Eigenhoehe (42% der
   Trackhoehe), daher 100%/42% = 238.1% und -45%/42% = -107.1%. */
@keyframes swipe-rail-comet-b-1nqxs4uuwb {
    0% { transform: translateY(238.1%); opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateY(-107.1%); opacity: 0; }
}

@keyframes swipe-rail-thumb-b-1nqxs4uuwb {
    0% { transform: translateY(100%); opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateY(-45%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .swipe-rail__arrows[b-1nqxs4uuwb]  svg,
    .swipe-rail__comet[b-1nqxs4uuwb],
    .swipe-rail__thumb-travel[b-1nqxs4uuwb] {
        animation: none;
    }

    .swipe-rail__thumb[b-1nqxs4uuwb] {
        top: 40%;
    }
}

.terminal-feed__viewport[b-1nqxs4uuwb] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.terminal-feed[b-1nqxs4uuwb]  .terminal-feed__stage {
    /* Natives Panning bleibt aus: die horizontale Geste gehoert den Feed-Items
       (Swipe-Game), sonst bricht der Browser sie per pointercancel ab. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 20;
    width: auto;
    height: min(100%, var(--feed-stage-height));
    max-width: var(--feed-stage-max-width);
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 1rem;
    contain: layout paint;
}

.terminal-feed[b-1nqxs4uuwb]  .terminal-feed__stage img {
    -webkit-user-drag: none;
}

.feed-content-surface[b-1nqxs4uuwb] {
    background: var(--color-backdrop);
}

/* Die Karten stehen alle im Layout und werden nur verschoben. display:none wuerde
   Layout und Bild-Dekodierung verwerfen und beides in den Swipe-Frame legen. */
.feed-item[b-1nqxs4uuwb] {
    --feed-offset: 0%;
    --feed-scale: 1;
    --feed-opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate3d(0, var(--feed-offset), 0) scale(var(--feed-scale));
    opacity: var(--feed-opacity);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease-out;
    backface-visibility: hidden;
    contain: layout paint;
}

.feed-item.current[b-1nqxs4uuwb] {
    z-index: 10;
}

.feed-item--prev[b-1nqxs4uuwb] {
    --feed-offset: -100%;
    --feed-scale: 0.985;
    --feed-opacity: 0.92;
}

.feed-item--next[b-1nqxs4uuwb] {
    --feed-offset: 100%;
    --feed-scale: 0.985;
    --feed-opacity: 0.92;
}

/* Karten ausserhalb des Fensters bleiben gerendert, aber unsichtbar und inert. */
.feed-item--parked[b-1nqxs4uuwb] {
    --feed-offset: 200%;
    visibility: hidden;
    pointer-events: none;
}

.feed-item--suppressed[b-1nqxs4uuwb] {
    visibility: hidden;
    pointer-events: none;
}

.terminal-feed--instant-navigation .feed-item[b-1nqxs4uuwb] {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .feed-item[b-1nqxs4uuwb] {
        transition: none;
    }
}