html {
    --landing-soft-white: #f4eee3;
    /*
     * Elevation: Weiß mit Opacity — je höher in der Stack-Reihenfolge, desto heller.
     * 0 = Seitenhintergrund · 1 = Kartenfläche · 2 = Controls (Buttons in Karten)
     */
    --landing-elev-0: var(--landing-soft-white);
    --landing-elev-1: rgb(255 255 255 / 22%);
    --landing-elev-2: rgb(255 255 255 / 44%);
    --landing-elev-2-hover: rgb(255 255 255 / 54%);
    --landing-elev-2-disabled: rgb(255 255 255 / 26%);
    --landing-apps-card-bg: var(--landing-elev-1);
    --landing-apps-card-btn-bg: var(--landing-elev-2);
}

/* Grundlayout Landing — nutzt CSS-Variablen aus ../styles.css */

/* Eine Viewport-Höhe: keine vertikale Seiten-Scroll; Raster füllt den Rest unter dem Header */
html {
    height: 100%;
    height: 100dvh;
}

body.landing-body {
    margin: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    background: var(--landing-soft-white);
    color: #2f2f2f;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
}

body[data-text-size="l"] {
    line-height: 1.6;
}

a,
a:link {
    color: #9a5a1f;
    text-decoration-color: color-mix(in srgb, #9a5a1f 72%, transparent);
}

a:hover,
a:focus-visible {
    color: #7f4514;
    text-decoration-thickness: 2px;
}

a:visited {
    color: #ad6a2c;
    text-decoration-color: color-mix(in srgb, #ad6a2c 70%, transparent);
}

.landing-header {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 0.75rem 1rem 0.5rem;
    border: 1px solid #e5e5e5;
}

/* Punkt mit Farbwelle vor dem Namen — Steuerung: landing-header-wave.js */
.landing-brand__name-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.landing-brand__stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.landing-brand__wave-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    align-self: center;
}

.landing-brand__wave-dot-canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
}

.landing-brand__wave-dot:hover {
    filter: brightness(1.08);
}

.landing-brand__wave-dot:focus {
    outline: none;
}

.landing-brand__wave-dot:focus-visible {
    outline: none;
}

.landing-brand__wave-dot--paused {
    filter: saturate(0.92) brightness(0.97);
}

/* Wellen-Verlauf: Platzhalter + Header-Text-Buttons (landing-text-gradient.js; --landing-text-grad) */
.landing-text-gradient__overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    overflow: hidden;
}

.landing-text-gradient__overlay-face {
    display: block;
}

/*
 * Klick-Burst: Overlay nutzt background-clip:text — Lücken/Counter sind transparent.
 * Ohne Ausblendung liegt das Original darunter und wirkt als „Doppeltext“.
 * color:transparent auf dem Host deckt auch direkten Text (z.B. Platzhalter-<p>).
 */
.landing-text-gradient__burst-host {
    color: transparent !important;
    text-shadow: none !important;
}

.landing-text-gradient__burst-host > :not(.landing-text-gradient__overlay) {
    visibility: hidden;
}

.landing-text-grad--hover,
.landing-placeholder--apps-active {
    background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
}

.landing-text-grad--hover *,
.landing-placeholder--apps-active * {
    background-image: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-position: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Header: Settings — Hover-Glow + Klick-Puls (Musik: fester Verlaufs-Rand, siehe unten) */
.landing-header__settings-btn {
    transition: border-color 0.14s ease-out, box-shadow 0.14s ease-out;
}

.landing-header__settings-btn.landing-text-grad--icon-hover {
    border-color: color-mix(in srgb, var(--landing-text-swirl-a, #f472b6) 50%, #bdbdbd);
    box-shadow:
        0 0 5px color-mix(in srgb, var(--landing-text-swirl-b, #c084fc) 22%, transparent),
        0 0 1px color-mix(in srgb, var(--landing-text-swirl-a, #f472b6) 35%, transparent);
}

.landing-header__settings-btn.landing-text-grad--icon-pulse {
    animation: landing-text-grad-icon-pulse 0.42s ease-out forwards;
}

@keyframes landing-text-grad-icon-pulse {
    0% {
        border-color: #bdbdbd;
        box-shadow: 0 0 0 transparent;
    }

    20% {
        border-color: color-mix(in srgb, var(--landing-text-swirl-a, #f472b6) 65%, #bdbdbd);
        box-shadow:
            0 0 9px color-mix(in srgb, var(--landing-text-swirl-b, #c084fc) 32%, transparent),
            0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #f472b6) 45%, transparent);
    }

    100% {
        border-color: #bdbdbd;
        box-shadow: 0 0 0 transparent;
    }
}

@keyframes landing-text-grad-hover-pan {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

/* Zwei Background-Layer: nur Verlauf bewegt sich, Pill bleibt schwarz 90 % */
@keyframes landing-text-grad-hover-pan-chip {
    from {
        background-position: 0% 50%, center;
    }

    to {
        background-position: 100% 50%, center;
    }
}

/* Musik-Transport: wandernder Verlauf als Rand (padding-box Füllung + border-box Ring) */
@keyframes landing-music-ctrl-grad-outline {
    from {
        background-position: 0 0, 0% 50%;
    }

    to {
        background-position: 0 0, 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-text-grad--hover,
    .landing-placeholder--apps-active,
    .landing-header__cat-btn[aria-pressed="true"],
    .landing-about-contact-mail {
        animation: none;
        background-position: 22% 50%;
    }

    .landing-mobile-side-title.landing-text-grad--hover {
        background-position: 22% 50%, center;
    }

    .landing-mobile-side-title.landing-text-grad--click-flash {
        animation: none !important;
    }

    .landing-header__music-btn,
    .landing-header__music-skip-btn,
    .landing-music-player__transport .landing-music-player__btn {
        animation: none;
        background-position: 0 0, 30% 50%;
    }

    .landing-header__settings-btn.landing-text-grad--icon-pulse {
        animation: none;
    }
}

.landing-header__menu-toggle {
    display: none;
}

.landing-header__start {
    justify-self: start;
    min-width: 0;
}

.landing-brand {
    margin: 0;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-align: left;
}

.landing-brand__name {
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.landing-brand__name:hover {
    text-decoration: none;
    outline: none;
}

.landing-brand__name:focus-visible {
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 42%, transparent);
    border-radius: 2px;
}

.landing-brand__verb {
    font-weight: 300;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-align: left;
}

/* Tablet/Phone: Wave links, Name + Verb gestapelt — Punkt so hoch wie beide Zeilen. */
@media (max-width: 1024px) {
    .landing-brand {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: 0.45rem;
        row-gap: 0.08rem;
        white-space: normal;
    }

    .landing-brand__wave-dot {
        grid-column: 1;
        grid-row: 1 / -1;
        justify-self: start;
        align-self: stretch;
        width: auto;
        height: auto;
        min-width: 0;
        aspect-ratio: 1;
        max-width: 4.75rem;
    }

    .landing-brand__stack {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.08rem;
        min-width: 0;
    }
}

.landing-header__categories {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.landing-header__cat-btn {
    margin: 0;
    padding: 0.15rem 0.4rem;
    font-family: inherit;
    font-size: clamp(0.72rem, 1.1vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #5a5a5a;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

/* display:inline-flex überschreibt sonst das hidden-Attribut (Admin-only „Stuff“) */
.landing-header__cat-btn[hidden] {
    display: none !important;
}

.landing-header__cat-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.landing-header__cat-btn:hover {
    text-decoration: none;
}

/* Aktive Seite (Header-Kategorie): dauerhafter Verlauf, kein Unterstrich */
.landing-header__cat-btn[aria-pressed="true"],
.landing-header__cat-btn[aria-pressed="true"]:hover {
    background-color: transparent;
    background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    text-underline-offset: 0;
    font-weight: 700;
    animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
}

.landing-header__cat-btn[aria-pressed="true"]:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 42%, transparent);
}

.landing-header__cat-btn:focus-visible {
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 42%, transparent);
}

/*
 * Header: „background: transparent“ (Kurzform) löscht background-image — Verlauf nachziehen.
 * Nur Hover-Klasse (nicht aria-pressed; siehe Block oben).
 */
.landing-brand__name.landing-text-grad--hover,
.landing-brand__name.landing-text-grad--hover:hover,
.landing-header__cat-btn.landing-text-grad--hover,
.landing-header__cat-btn.landing-text-grad--hover:hover {
    background-color: transparent;
    background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    text-underline-offset: 0;
    animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
}

.landing-brand__name.landing-text-grad--hover:focus-visible,
.landing-header__cat-btn.landing-text-grad--hover:focus-visible {
    background-color: transparent;
    background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 42%, transparent);
    animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
}

.landing-header-nav {
    justify-self: end;
    display: flex;
    gap: 0.6rem;
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
}

.landing-header__music-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.landing-header-nav a,
.landing-header__settings-btn {
    color: inherit;
    text-decoration: none;
}

.landing-header-nav a:hover,
.landing-header__settings-btn:hover {
    text-decoration: underline;
}

.landing-header__music-btn {
    color: inherit;
    text-decoration: none;
}

.landing-header__music-skip-btn {
    margin: 0;
    padding: 0;
    font: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    text-decoration: none;
}

.landing-header__music-btn:hover {
    text-decoration: none;
}

.landing-header__music-skip-btn:hover {
    text-decoration: none;
}

.landing-header__settings-btn {
    margin: 0;
    padding: 0;
    font: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.landing-header__settings-btn:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.landing-header__music-btn:focus-visible {
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 38%, transparent);
}

.landing-header__music-skip-btn:focus-visible {
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 38%, transparent);
}

.landing-header__music-btn {
    margin: 0;
    padding: 0;
    font: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.landing-header__settings-btn,
.landing-header__music-btn,
.landing-header__music-skip-btn,
.landing-header-nav > a {
    width: 33px;
    height: 33px;
    min-width: 33px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bdbdbd;
    color: #4f4f4f;
    background: transparent;
    text-decoration: none;
    font-size: 0;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
}

.landing-header__music-skip-btn {
    width: 28px;
    min-width: 28px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

/* Fallback ohne mask-image: Text sichtbar (Play). In mask-fähigen Browsern wird er per @supports wieder ausgeblendet. */
.landing-header__music-btn {
    font-size: 0.95rem;
    line-height: 1;
}

.landing-header__settings-btn::before {
    content: "\2699\FE0E";
    font-size: 17px;
    line-height: 1;
}

.landing-header-nav > a::before {
    content: "\1F511\FE0E";
    font-size: 17px;
    line-height: 1;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .landing-header__music-btn {
        font-size: 0;
    }

    .landing-header__music-skip-btn {
        font-size: 0;
    }

    .landing-header__music-btn::before {
        content: "";
        width: 17px;
        height: 17px;
        display: block;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8,5 20,12 8,19'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8,5 20,12 8,19'/%3E%3C/svg%3E");
    }

    .landing-header__music-btn[aria-label="Pause"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='4' height='14'/%3E%3Crect x='13' y='5' width='4' height='14'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='4' height='14'/%3E%3Crect x='13' y='5' width='4' height='14'/%3E%3C/svg%3E");
    }

    .landing-header__music-skip-btn::before {
        content: "";
        width: 14px;
        height: 14px;
        display: block;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .landing-header__music-skip-btn--prev::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.25' y='5' width='2.25' height='14'/%3E%3Cpolygon points='19.75,5 19.75,19 7.5,12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.25' y='5' width='2.25' height='14'/%3E%3Cpolygon points='19.75,5 19.75,19 7.5,12'/%3E%3C/svg%3E");
    }

    .landing-header__music-skip-btn--next::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='17.5' y='5' width='2.25' height='14'/%3E%3Cpolygon points='4.25,5 4.25,19 16.5,12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='17.5' y='5' width='2.25' height='14'/%3E%3Cpolygon points='4.25,5 4.25,19 16.5,12'/%3E%3C/svg%3E");
    }
}

/* Header-Musik: dauerhaft wandernder Palette-Verlauf als 1px-Rand (Innen = Seitenhintergrund) */
.landing-header__music-btn,
.landing-header__music-skip-btn {
    --music-ctrl-ring-inner: var(--landing-soft-white);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--music-ctrl-ring-inner), var(--music-ctrl-ring-inner)) padding-box,
        var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6)) border-box;
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0% 50%;
    -webkit-background-clip: padding-box, border-box;
    background-clip: padding-box, border-box;
    animation: landing-music-ctrl-grad-outline 2.2s ease-in-out infinite alternate;
}

/* 3 gleich breite Spalten × 3 gleich hohe Zeilen — exakt Resthöhe unter dem Header */
.landing-grid {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.landing-grid__left {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0;
    padding: 0;
    align-content: stretch;
}

/* Mittlere Spalte = mittleres Drittel der Breite; Bilder füllen nur diese Spalte */
.landing-grid__stirn {
    grid-column: 2;
    grid-row: 1;
    container-type: inline-size;
    container-name: stirn-controls;
}

.landing-grid__augen {
    grid-column: 2;
    grid-row: 2;
}

.landing-grid__mund {
    grid-column: 2;
    grid-row: 3;
}

.landing-grid__right {
    grid-column: 3;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0;
    padding: 0;
    align-content: stretch;
}

.landing-side {
    padding: 1rem 1.25rem;
    font-size: var(--fs-s, 0.95rem);
    line-height: 1.5;
    min-height: 0;
    overflow-y: auto;
}

/* Drei vertikale Segmente wie die mittlere Spalte (Stirn / Augen / Mund) */
.landing-side__segment {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    margin: 0;
    position: relative;
}

/* Nach .landing-side: Außenpadding nur in den Segmenten, kein Doppel-Scroll */
.landing-side.landing-grid__left,
.landing-side.landing-grid__right {
    padding: 0;
    overflow-y: hidden;
}

.landing-placeholder {
    margin: 0;
    color: #4f4f4f;
    text-align: center;
    white-space: pre-line;
}

.landing-placeholder--button {
    cursor: pointer;
}

/* Fokus sichtbar; Hover-Verlauf wie alle .landing-placeholder (landing-text-gradient.js) */
.landing-placeholder--button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, #c084fc 45%, transparent);
}

body[data-landing-category="about"] {
    --landing-about-placeholder-font-size: clamp(0.78rem, 1.05vw, 0.98rem);
}

body[data-landing-category="about"] .landing-side__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem 0.9rem;
}

body[data-landing-category="about"] .landing-placeholder {
    max-width: 200px;
    font-size: var(--landing-about-placeholder-font-size);
    line-height: 1.2;
    text-align: left;
    margin: 0 auto;
}

body[data-landing-category="apps"] .landing-side__segment,
body[data-landing-category="theater"] .landing-side__segment,
body[data-landing-category="music"] .landing-side__segment {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem 0.9rem;
}

body[data-landing-category="apps"] .landing-placeholder,
body[data-landing-category="theater"] .landing-placeholder,
body[data-landing-category="music"] .landing-placeholder {
    max-width: 200px;
    font-size: clamp(0.78rem, 1.05vw, 0.98rem);
    line-height: 1.2;
    text-align: left;
    margin: 0 auto;
}

body[data-landing-category="apps"] .landing-grid__stirn {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body[data-landing-category="apps"] .landing-apps-intro {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.75rem 0.25rem;
    box-sizing: border-box;
    text-align: center;
    white-space: pre-line;
}

body[data-landing-category="apps"] .landing-grid__stirn .face-layer__viewport {
    flex: 1 1 auto;
    min-height: 0;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .face-layer[data-layer] .face-layer__slide {
    cursor: default;
}

body[data-landing-category="apps"] .landing-grid__left .landing-side__segment:nth-child(1) {
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

body[data-landing-category="apps"] .landing-grid__right {
    grid-template-rows: 1fr auto;
}

body[data-landing-category="apps"] .landing-grid__right .landing-side__segment:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
}

body[data-landing-category="apps"] .landing-grid__left .landing-side__segment:nth-child(n + 2),
body[data-landing-category="apps"] .landing-grid__right .landing-side__segment:nth-child(2) {
    display: none;
}

body[data-landing-category="apps"] .landing-grid__right .landing-side__segment:nth-child(3) {
    grid-row: 2;
    grid-column: 1;
    flex: 0 0 auto;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 0;
    overflow: visible;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

body[data-landing-category="apps"] .landing-grid__right .landing-side__segment:nth-child(3) > .landing-placeholder {
    display: none;
}

body[data-landing-category="apps"] .landing-grid__right .landing-side__segment:nth-child(3) .landing-legal-footer {
    position: static;
    align-self: flex-end;
    margin-left: auto;
    flex: 0 0 auto;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--selectable {
    cursor: pointer;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--selectable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, #c084fc 45%, transparent);
}

body[data-landing-category="apps"] .landing-side__segment:nth-child(1) > .landing-placeholder {
    display: none;
}

.landing-apps-panel[hidden] {
    display: none !important;
}

body[data-landing-category="apps"] .landing-apps-panel:not([hidden]) {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
}

body[data-landing-category="apps"] .landing-apps-panel--left:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.landing-apps-detail {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.landing-apps-detail__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.landing-apps-detail__body[hidden] {
    display: none !important;
}

.landing-apps-detail__hero {
    display: block;
    flex: 0 0 auto;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__hero {
    display: block;
}

.landing-apps-detail__hero > .landing-settings__title {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
}

.landing-apps-detail__text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.landing-apps-detail__text .landing-app-detail-carousel__intro {
    margin: 0;
    flex: 0 0 auto;
}

.landing-apps-detail__text .landing-app-detail-carousel__bullets {
    margin: 0;
    padding-left: 1.15rem;
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.landing-apps-detail__downloads {
    flex: 0 0 auto;
    margin-top: 0.5rem;
    padding-top: 0.15rem;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-grid__left .landing-side__segment:nth-child(1) {
    padding: 0.65rem 1.15rem 0.85rem;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__hero > .landing-settings__title,
body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__text,
body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__text .landing-app-detail-carousel__bullets,
body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__downloads {
    font-size: clamp(0.78rem, 1.05vw, 0.98rem);
    line-height: 1.2;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__hero > .landing-settings__title {
    margin: 0 0 0.35rem;
    letter-spacing: 0;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-detail__text .landing-app-detail-carousel__bullets li {
    line-height: 1.2;
}

.landing-apps-panel--right,
.landing-apps-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-panel--right .landing-apps-card-list {
    box-sizing: border-box;
    padding-bottom: 0.25rem;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--compact {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    z-index: auto;
    padding: 0;
    background-color: transparent;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--compact .landing-apps-card-panel__inner {
    min-height: 0;
    height: auto;
    background-color: var(--landing-apps-card-bg);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--compact .landing-apps-card-panel__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    min-height: 0;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--compact .landing-apps-card-panel__content {
    gap: 0.2rem;
}

body[data-landing-category="apps"].landing-apps-desktop-layout .landing-apps-card-panel--current .landing-apps-card-panel__inner {
    border-color: #7a4a18;
    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.07),
        0 0 0 1px color-mix(in srgb, #7a4a18 35%, transparent);
}

body[data-landing-category="apps"] .landing-apps-card-slot--mobile {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: transparent;
    padding: 0.35rem 0.45rem 0.5rem;
    box-sizing: border-box;
}

body[data-landing-category="apps"] .landing-apps-card-slot--mobile .landing-apps-card-panel {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    z-index: auto;
    background-color: transparent;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline.landing-apps-card-panel--selectable {
    cursor: default;
    background-color: transparent;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__inner {
    height: auto;
    min-height: 0;
    overflow: visible;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__content {
    overflow: visible;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 0 0 auto;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__actions {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.3rem;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__actions-main {
    flex-wrap: wrap;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__detail-btn {
    font-weight: 600;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.15rem;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__header > .landing-apps-dev-badge,
body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__header > .landing-apps-card-panel__icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__header > .landing-apps-card-panel__title {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 2.1rem;
    box-sizing: border-box;
    text-align: center;
}

body[data-landing-category="apps"] .landing-apps-card-panel--mobile-inline .landing-apps-card-panel__inner--with-icon .landing-apps-card-panel__title {
    text-align: center;
}

/* Theater: linke Stirn- und Mund-Zeile ohne Inhalt */
body[data-landing-category="theater"] .landing-grid__left .landing-side__segment:nth-child(1),
body[data-landing-category="theater"] .landing-grid__left .landing-side__segment:nth-child(3) {
    display: none;
}

/* Musik: eine Spalte = Player bzw. Beschreibung über volle Höhe */
body[data-landing-category="music"] .landing-grid__left .landing-side__segment:nth-child(1),
body[data-landing-category="music"] .landing-grid__right .landing-side__segment:nth-child(1) {
    grid-row: 1 / -1;
}

body[data-landing-category="music"] .landing-grid__left .landing-side__segment:nth-child(n + 2),
body[data-landing-category="music"] .landing-grid__right .landing-side__segment:nth-child(n + 2) {
    display: none;
}

body[data-landing-category="music"] .landing-side__segment {
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

body[data-landing-category="music"] .landing-side__segment .landing-placeholder {
    display: none;
}

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

.landing-music-overview {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}

.landing-music-overview__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.38rem 0.65rem;
    font: inherit;
    font-size: clamp(0.82rem, 1.1vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #3a3a3a;
    background: transparent;
    border: 1px solid #b5ac9b;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.landing-music-overview__toggle:hover {
    color: #2a2a2a;
    border-color: #9a9284;
}

.landing-music-overview__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, #c084fc 45%, transparent);
}

.landing-music-overview--open .landing-music-overview__toggle {
    margin-bottom: 0.45rem;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .landing-music-overview__toggle-icon {
        width: 1.05rem;
        height: 1.05rem;
        flex: 0 0 auto;
        display: block;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='1.5'/%3E%3Cpolygon points='10,9.5 10,15.5 16,12.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='1.5'/%3E%3Cpolygon points='10,9.5 10,15.5 16,12.5'/%3E%3C/svg%3E");
    }
}

.landing-music-overview__media {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.landing-music-divider {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin: 0.2rem 0 0.15rem;
    color: #b5ac9b;
}

body[data-landing-category="music"] .landing-music-divider:not([hidden]) {
    display: flex;
}

.landing-music-divider::before,
.landing-music-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: 0.9;
}

.landing-music-divider__dots {
    flex: 0 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    line-height: 1;
    opacity: 0.95;
}

.landing-music-overview__title {
    margin: 0 0 0.45rem;
    font-size: clamp(0.82rem, 1.1vw, 1rem);
    font-weight: 500;
    color: #3a3a3a;
    line-height: 1.25;
}

.landing-music-overview__video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(38vh, 280px);
    margin: 0 auto;
    object-fit: contain;
    background: #111;
    border-radius: 6px;
}

.landing-music-overview__tagline {
    margin: 0.4rem 0 0;
    font-size: clamp(0.75rem, 0.95vw, 0.9rem);
    font-weight: 400;
    color: #5a5a5a;
    line-height: 1.3;
}

body[data-landing-category="music"] .landing-grid__left .landing-side__segment:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Desktop: Player links, Playlist rechts */
@media (min-width: 768px) {
    body[data-landing-category="music"] .landing-music-panel--left .landing-music-player {
        flex: 0 1 auto;
    }

    body[data-landing-category="music"] .landing-music-panel--right {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding-top: 0.1rem;
    }

    body[data-landing-category="music"] .landing-music-panel--right > .landing-music-player__playlist {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        max-height: none;
        height: auto;
    }

    body[data-landing-category="music"] .landing-music-panel--right > .landing-music-player__list {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
        max-height: none;
        height: auto;
    }
}

.landing-music-panel[hidden] {
    display: none !important;
}

.landing-music-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.landing-music-panel--right {
    font-size: clamp(0.78rem, 1.05vw, 0.95rem);
    line-height: 1.45;
    color: #3a3a3a;
    text-align: left;
}

.landing-music-player__detail {
    margin: 0;
    font-size: clamp(0.68rem, 0.95vw, 0.8rem);
    line-height: 1.35;
    color: #5a5a5a;
    text-align: center;
}

.landing-music-player__detail[hidden] {
    display: none !important;
}

.landing-music-player {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
}

/* Kein display:none — sonst spielt <audio> auf iOS/Safari u. a. oft nicht ab */
.landing-music-player__audio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.landing-music-player__transport {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.landing-music-player__transport .landing-music-player__btn {
    margin: 0;
    padding: 0 0.55rem;
    box-sizing: border-box;
    flex-shrink: 1;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: clamp(0.72rem, 1.05vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f2f2f;
    --music-ctrl-ring-inner: color-mix(in srgb, var(--landing-soft-white) 88%, #c9c2b5);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--music-ctrl-ring-inner), var(--music-ctrl-ring-inner)) padding-box,
        var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6)) border-box;
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0% 50%;
    -webkit-background-clip: padding-box, border-box;
    background-clip: padding-box, border-box;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1;
    animation: landing-music-ctrl-grad-outline 2.2s ease-in-out infinite alternate;
}

.landing-music-player__transport .landing-music-player__btn:hover,
.landing-music-player__transport .landing-music-player__btn:focus-visible {
    --music-ctrl-ring-inner: color-mix(in srgb, var(--landing-soft-white) 75%, #b0a99a);
    outline: none;
}

.landing-music-player__prev,
.landing-music-player__next {
    min-width: 2.35rem;
    padding-inline: 0;
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    line-height: 1;
    font-weight: 700;
}

.landing-music-player__play {
    min-width: 0;
    flex: 0 1 4.75rem;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .landing-music-player__transport .landing-music-player__btn {
        --landing-music-icon-size: 1.05rem;
        font-size: 0;
        letter-spacing: 0;
        text-transform: none;
    }

    .landing-music-player__transport .landing-music-player__btn::before {
        content: "";
        width: var(--landing-music-icon-size);
        height: var(--landing-music-icon-size);
        display: block;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .landing-music-player__prev::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.25' y='5' width='2.25' height='14'/%3E%3Cpolygon points='19.75,5 19.75,19 7.5,12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.25' y='5' width='2.25' height='14'/%3E%3Cpolygon points='19.75,5 19.75,19 7.5,12'/%3E%3C/svg%3E");
    }

    .landing-music-player__next::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='17.5' y='5' width='2.25' height='14'/%3E%3Cpolygon points='4.25,5 4.25,19 16.5,12'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='17.5' y='5' width='2.25' height='14'/%3E%3Cpolygon points='4.25,5 4.25,19 16.5,12'/%3E%3C/svg%3E");
    }

    .landing-music-player__play::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8,5 20,12 8,19'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='8,5 20,12 8,19'/%3E%3C/svg%3E");
    }

    .landing-music-player__play[aria-label="Pause"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='4' height='14'/%3E%3Crect x='13' y='5' width='4' height='14'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='4' height='14'/%3E%3Crect x='13' y='5' width='4' height='14'/%3E%3C/svg%3E");
    }
}

.landing-music-player__now {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    min-width: 0;
    max-width: 100%;
}

.landing-music-player__now-title {
    font-size: clamp(0.78rem, 1.05vw, 0.92rem);
    font-weight: 600;
    color: #2a2a2a;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.landing-music-player__now-tags {
    font-size: clamp(0.6rem, 0.84vw, 0.7rem);
    font-weight: 400;
    color: color-mix(in srgb, #5a5a5a 58%, transparent);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.landing-music-player__now-tags[hidden] {
    display: none !important;
}

.landing-music-player__time {
    font-size: clamp(0.68rem, 0.95vw, 0.8rem);
    color: #5c5c5c;
    font-variant-numeric: tabular-nums;
}

.landing-music-player__seek-label {
    display: block;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.landing-music-player__seek,
.landing-music-player__volume {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 0.45rem;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    --landing-music-range-track: color-mix(in srgb, var(--landing-soft-white) 68%, #b5aea4);
}

.landing-music-player__seek {
    --landing-music-range-fill: 0%;
}

.landing-music-player__volume {
    --landing-music-range-fill: 100%;
}

.landing-music-player__seek::-webkit-slider-runnable-track,
.landing-music-player__volume::-webkit-slider-runnable-track {
    height: 0.45rem;
    border-radius: 999px;
    background-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent var(--landing-music-range-fill, 0%),
            var(--landing-music-range-track) var(--landing-music-range-fill, 0%),
            var(--landing-music-range-track) 100%
        ),
        var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 100% 100%, 300% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0% 50%;
}

.landing-music-player__seek::-webkit-slider-thumb,
.landing-music-player__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: calc((0.45rem - 0.75rem) / 2);
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--landing-soft-white) 88%, #2f2f2f);
    background: #3a3a3a;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.landing-music-player__seek:disabled::-webkit-slider-runnable-track {
    opacity: 0.55;
}

.landing-music-player__seek:disabled::-webkit-slider-thumb {
    opacity: 0.55;
    cursor: not-allowed;
}

.landing-music-player__seek::-moz-range-track,
.landing-music-player__volume::-moz-range-track {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--landing-music-range-track);
}

.landing-music-player__seek::-moz-range-progress,
.landing-music-player__volume::-moz-range-progress {
    height: 0.45rem;
    border-radius: 999px;
    background: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
}

.landing-music-player__seek::-moz-range-thumb,
.landing-music-player__volume::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--landing-soft-white) 88%, #2f2f2f);
    background: #3a3a3a;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.landing-music-player__seek:disabled::-moz-range-thumb {
    opacity: 0.55;
    cursor: not-allowed;
}

.landing-music-player__volume-row {
    width: 100%;
    flex-shrink: 0;
}

.landing-music-player__volume-label {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.landing-music-player__volume-label-text {
    font-size: clamp(0.65rem, 0.95vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #4a4a4a;
}

.landing-music-player__bg-play,
.landing-music-player__shuffle {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.28rem 0.4rem;
    font-size: clamp(0.65rem, 0.95vw, 0.78rem);
    line-height: 1.35;
    color: #3a3a3a;
    background: color-mix(in srgb, var(--landing-soft-white) 92%, transparent);
    border: 1px solid #d6d3cd;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

.landing-music-player__bg-play-input,
.landing-music-player__shuffle-input {
    margin: 0.12rem 0 0;
    flex-shrink: 0;
    accent-color: #7a4a18;
    cursor: pointer;
}

.landing-music-player__bg-play-text,
.landing-music-player__shuffle-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
}

.landing-music-player__list-item--loading,
.landing-music-player__list-item--empty {
    padding: 0.65rem 0.5rem;
    font-size: 0.9em;
    opacity: 0.75;
    list-style: none;
}

.landing-music-player__playlist {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.landing-music-player__search-label {
    display: block;
    flex: 0 0 auto;
    margin: 0;
}

.landing-music-player__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.26rem 0.42rem;
    font: inherit;
    font-size: clamp(0.66rem, 0.92vw, 0.78rem);
    font-weight: 400;
    line-height: 1.25;
    color: #4a4a4a;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid color-mix(in srgb, #d6d3cd 88%, transparent);
    border-radius: 2px;
    outline: none;
}

.landing-music-player__search::placeholder {
    color: color-mix(in srgb, #4a4a4a 52%, transparent);
    opacity: 1;
}

.landing-music-player__search:hover {
    background: rgba(255, 255, 255, 0.48);
}

.landing-music-player__search:focus-visible {
    background: rgba(255, 255, 255, 0.55);
    border-color: color-mix(in srgb, #7a4a18 42%, #d6d3cd);
    box-shadow: 0 0 0 1px color-mix(in srgb, #7a4a18 18%, transparent);
}

.landing-music-player__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 0.72rem;
    width: 0.72rem;
    margin-left: 0.2rem;
    background:
        linear-gradient(45deg, transparent 46%, #6a6a6a 46%, #6a6a6a 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #6a6a6a 46%, #6a6a6a 54%, transparent 54%);
    cursor: pointer;
    opacity: 0.55;
}

.landing-music-player__tag-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem;
    flex: 0 0 auto;
    margin: 0;
    min-width: 0;
}

.landing-music-player__tag-filters[hidden] {
    display: none !important;
}

.landing-music-player__filter-tag {
    margin: 0;
    padding: 0.06rem 0.3rem;
    font: inherit;
    font-size: clamp(0.58rem, 0.82vw, 0.68rem);
    font-weight: 400;
    line-height: 1.25;
    color: color-mix(in srgb, #4a4a4a 88%, transparent);
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid color-mix(in srgb, #d6d3cd 72%, transparent);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.72;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-music-player__filter-tag:hover,
.landing-music-player__filter-tag:focus-visible {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.42);
    outline: none;
}

.landing-music-player__filter-tag[aria-pressed="true"] {
    opacity: 0.95;
    color: #3a3a3a;
    background: rgba(255, 255, 255, 0.52);
    border-color: color-mix(in srgb, #7a4a18 34%, #d6d3cd);
    box-shadow: 0 0 0 1px color-mix(in srgb, #7a4a18 12%, transparent);
}

.landing-music-player__list {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    flex: 1 1 auto;
    max-height: none;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.landing-music-player__list-item {
    margin: 0;
    padding: 0;
}

.landing-music-player__list-item[hidden] {
    display: none !important;
}

.landing-music-player__search-empty {
    margin: 0;
    padding: 0.15rem 0.1rem 0;
    font-size: clamp(0.64rem, 0.88vw, 0.74rem);
    font-weight: 400;
    color: color-mix(in srgb, #4a4a4a 62%, transparent);
    text-align: left;
}

.landing-music-player__search-empty[hidden] {
    display: none !important;
}

.landing-music-player__track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.32rem 0.45rem;
    box-sizing: border-box;
    font-family: inherit;
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    text-align: left;
    color: #2f2f2f;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid #d6d3cd;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.landing-music-player__track-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-music-player__track-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.22rem;
    flex: 0 1 auto;
    max-width: 46%;
    min-width: 0;
}

.landing-music-player__track-tag {
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.58em;
    font-weight: 400;
    letter-spacing: 0.01em;
    opacity: 0.58;
    padding: 0.02rem 0.24rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 2px;
}

.landing-music-player__track:hover,
.landing-music-player__track:focus-visible {
    background: rgba(255, 255, 255, 0.72);
    outline: none;
}

.landing-music-player__track--current {
    border-color: #7a4a18;
    box-shadow: 0 0 0 1px color-mix(in srgb, #7a4a18 35%, transparent);
    font-weight: 600;
}

.landing-legal-footer {
    position: absolute;
    right: 0.75rem;
    bottom: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: clamp(0.68rem, 0.85vw, 0.82rem);
    line-height: 1.1;
    color: #222;
    background: color-mix(in srgb, var(--landing-soft-white) 95%, transparent);
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.landing-legal-footer__link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

.landing-legal-footer__link:hover,
.landing-legal-footer__link:focus-visible {
    color: #5a3b12;
    outline: none;
}

.landing-legal-footer__sep {
    opacity: 0.55;
    user-select: none;
}

.face-layer {
    position: relative;
    min-width: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
}

.face-layer__viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    outline: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: ew-resize;
    /* Slide-Breite = immer volle Viewport-Breite (auch bei nur 1 Bild / Code / Theater). */
    container-type: inline-size;
    container-name: face-slide;
}

.face-layer__viewport::-webkit-scrollbar {
    display: none;
}

/*
 * Steuerung: Grid mit minmax(0,1fr) verhindert Überlappung bei schmaler mittlerer Spalte.
 * Container-Query: unterhalb der Breite stapeln (Auto oben, Mischen unten).
 */
.face-layer.landing-grid__stirn .face-layer__overlay {
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    top: 0.35rem;
    z-index: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.5rem;
    align-items: center;
    box-sizing: border-box;
    pointer-events: none;
}

.face-layer.landing-grid__stirn .face-layer__overlay > * {
    pointer-events: auto;
    min-width: 0;
}

.face-layer__overlay-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.2rem 0.45rem;
    font-size: 0.68rem;
    font-size: clamp(0.62rem, 2.8cqi + 0.35rem, 0.75rem);
    line-height: 1.25;
    color: #222;
    background: color-mix(in srgb, var(--landing-soft-white) 95%, transparent);
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    box-sizing: border-box;
    justify-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.face-layer__overlay-label input {
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.face-layer__overlay-btn {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
    font-size: clamp(0.62rem, 2.8cqi + 0.35rem, 0.75rem);
    line-height: 1.25;
    font-family: inherit;
    color: #222;
    background: color-mix(in srgb, var(--landing-soft-white) 95%, transparent);
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    box-sizing: border-box;
    justify-self: end;
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.face-layer__overlay-btn:hover {
    background: #f5f5f5;
}

@container stirn-controls (max-width: 360px) {
    .face-layer__overlay {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .face-layer__overlay-label {
        justify-self: stretch;
    }

    .face-layer__overlay-btn {
        justify-self: stretch;
    }
}

.face-layer__strip {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    height: 100%;
    width: max-content;
    margin: 0;
    padding: 0;
}

.face-layer__slide {
    flex: 0 0 100cqw;
    width: 100cqw;
    max-width: 100cqw;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@supports not (width: 100cqw) {
    .face-layer__slide {
        flex: 0 0 var(--face-slide-w, 100%);
        width: var(--face-slide-w, 100%);
        max-width: var(--face-slide-w, 100%);
    }
}

/* Nur Hintergrund-Slide-Bilder — nicht Icons/Bilder in Inline-Karten (Apps/About) */
.face-layer__slide > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.face-layer__slide > img.face-layer__img--code-motion {
    transform: translate(var(--code-pan-x, 0%), var(--code-pan-y, 0%)) scale(var(--code-pan-scale, 1.1));
    transition: transform var(--code-pan-transition-ms, 4200ms) ease-in-out;
    will-change: transform;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: none;
}

.face-layer.landing-grid__stirn,
.face-layer.landing-grid__augen {
    box-sizing: border-box;
    border-bottom: 10px solid var(--landing-soft-white);
}

/* Stirn: Inhalt am unteren Rand der Zelle (Übergang zu Augen) */
.face-layer.landing-grid__stirn .face-layer__slide {
    align-items: flex-end;
}

.face-layer.landing-grid__stirn .face-layer__slide > img {
    height: auto;
    max-height: 100%;
    object-position: center bottom;
}

/* Mund: Inhalt am oberen Rand der Zelle (Übergang zu Augen) */
.face-layer.landing-grid__mund .face-layer__slide {
    align-items: flex-start;
}

.face-layer.landing-grid__mund .face-layer__slide > img {
    height: auto;
    max-height: 100%;
    object-position: center top;
}

/* Kategoriewechsel: keine alten Bilder, keine Scroll-/Wheel-Interaktion bis Slides fertig */
body.landing-category-transition .face-layer__viewport {
    visibility: hidden;
    pointer-events: none;
}

body.landing-category-transition .face-layer {
    pointer-events: none;
}

/*
 * Code / Theater / Musik: volle Slide-Breite sofort (nicht erst nach Pan-Animation).
 * Stirn/Mund nutzen sonst height:auto → schmale Bilder mit Rand.
 */
body[data-landing-category="apps"] .face-layer__slide > img,
body[data-landing-category="theater"] .face-layer__slide > img,
body[data-landing-category="music"] .face-layer__slide > img,
body[data-landing-category="apps"] .face-layer.landing-grid__stirn .face-layer__slide > img,
body[data-landing-category="apps"] .face-layer.landing-grid__mund .face-layer__slide > img,
body[data-landing-category="theater"] .face-layer.landing-grid__stirn .face-layer__slide > img,
body[data-landing-category="theater"] .face-layer.landing-grid__mund .face-layer__slide > img,
body[data-landing-category="music"] .face-layer.landing-grid__stirn .face-layer__slide > img,
body[data-landing-category="music"] .face-layer.landing-grid__mund .face-layer__slide > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

body[data-landing-category="about"] .face-layer__slide > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

/* About: Text im jeweiligen Slide (Desktop + Mobile), kein Modal */
body[data-landing-category="about"] .face-layer__slide {
    position: relative;
}

/* Code: Slides = gleiche Triggerfläche wie Mobiltitel (Software / Webdesign / Werkzeuge) */
body[data-landing-category="apps"] .face-layer[data-layer] .face-layer__slide {
    cursor: pointer;
}

/* Theater: Slides verlinken wie Mobiltitel (Brot&Spüle) */
body[data-landing-category="theater"] .face-layer[data-layer] .face-layer__slide--theater-link {
    cursor: pointer;
}

body[data-landing-category="theater"] .face-layer[data-layer] .face-layer__slide--theater-link:focus-visible {
    outline: 2px solid var(--landing-soft-white);
    outline-offset: -3px;
}

.face-layer--inline-content-paused .face-layer__viewport {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    cursor: default;
    touch-action: pan-y;
}

/* Über: zentrierter Mobiltitel ausblenden, solange dieser Layer den Inline-Inhalt zeigt */
body[data-landing-category="about"] .face-layer--inline-content-paused .landing-mobile-side-title {
    display: none !important;
}

body[data-landing-category="theater"] .face-layer--inline-content-paused .landing-mobile-side-title {
    display: none !important;
}

body[data-landing-category="apps"] .face-layer--inline-content-paused .landing-mobile-side-title {
    display: none !important;
}

body[data-landing-category="apps"].landing-apps-inline-open .landing-mobile-side-title {
    display: none !important;
}

.face-layer__slide--about-inline-open > img {
    display: none;
}

.face-layer__slide--apps-inline-open > img {
    display: none;
}

.landing-apps-card-panel {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    background-color: var(--landing-apps-card-bg);
    padding: 0.2rem;
    box-sizing: border-box;
}

.landing-apps-card-panel__inner {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid color-mix(in srgb, #c5bcae 75%, #ffffff);
    background-color: var(--landing-elev-1);
    padding: 0.45rem 0.5rem;
    box-sizing: border-box;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    overflow: hidden;
}

.landing-apps-card-panel__inner--with-icon .landing-apps-card-panel__content {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 0;
}

.landing-apps-card-panel__header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.landing-apps-card-panel__icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    max-width: 1.75rem;
    max-height: 1.75rem;
    object-fit: contain;
    object-position: center;
}

.landing-apps-dev-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a3b12;
    background: linear-gradient(160deg, #faf0dc 0%, #e8d5ad 52%, #c9a86a 100%);
    border: 1px solid #8f6b34;
    clip-path: polygon(50% 0%, 92% 16%, 92% 58%, 50% 100%, 8% 58%, 8% 16%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.landing-apps-dev-badge--card {
    width: 1.75rem;
    height: 1.75rem;
    max-width: 1.75rem;
    max-height: 1.75rem;
    font-size: 0.44rem;
}

.landing-apps-dev-badge__label {
    transform: translateY(8%);
    user-select: none;
}

.landing-apps-card-panel__inner--with-icon .landing-apps-card-panel__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.landing-apps-card-panel__content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.landing-apps-card-panel__title {
    margin: 0;
    font-size: clamp(0.78rem, 1.05vw, 1rem);
    line-height: 1.15;
    color: #262626;
}

.landing-apps-card-panel__text {
    margin: 0;
    font-size: clamp(0.68rem, 0.95vw, 0.85rem);
    line-height: 1.35;
    color: #363636;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.landing-apps-card-panel__path {
    margin: 0;
    font-size: clamp(0.58rem, 0.82vw, 0.72rem);
    line-height: 1.3;
    color: #5a5a5a;
    word-break: break-all;
}

.landing-apps-card-panel__actions {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    min-width: 0;
}

.landing-apps-card-panel__actions-main {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.landing-apps-card-panel__device {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(0.58rem, 0.78vw, 0.7rem);
    font-style: italic;
    line-height: 1.2;
    color: #5a5a5a;
    text-align: left;
    white-space: nowrap;
}

.landing-apps-card-panel__more {
    margin: 0;
    padding: 0.24rem 0.5rem;
    font: inherit;
    font-size: clamp(0.62rem, 0.82vw, 0.74rem);
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, #b8afa2 70%, #ffffff);
    background-color: var(--landing-elev-2);
    color: #2c2c2c;
    cursor: pointer;
}

.landing-apps-card-panel__more:hover,
.landing-apps-card-panel__more:focus-visible {
    outline: none;
    background-color: var(--landing-elev-2-hover);
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.landing-apps-card-panel__download {
    margin: 0;
    padding: 0.24rem 0.5rem;
    font: inherit;
    font-size: clamp(0.62rem, 0.82vw, 0.74rem);
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, #b8afa2 70%, #ffffff);
    background-color: var(--landing-elev-2);
    color: #2c2c2c;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.landing-apps-card-panel__download:hover,
.landing-apps-card-panel__download:focus-visible {
    outline: none;
    background-color: var(--landing-elev-2-hover);
    text-decoration: underline;
    text-underline-offset: 0.14em;
}

.landing-apps-card-panel__download--disabled,
.landing-apps-card-panel__download:disabled {
    opacity: 1;
    background-color: var(--landing-elev-2-disabled);
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

.landing-app-detail-carousel__downloads {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-start;
}

.landing-app-detail-carousel__downloads:empty {
    display: none;
}

.landing-dialog--app-details {
    width: min(99vw, 1800px);
    max-width: 99vw;
    height: 92dvh;
    max-height: 92dvh;
    overflow: hidden;
}

.landing-dialog--app-details .landing-dialog__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.landing-dialog__body--app-details {
    padding-top: 1.9rem;
    padding-right: 0.85rem;
    padding-bottom: 0.65rem;
    padding-left: 0.85rem;
    height: auto;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.landing-dialog__body--app-details > .landing-settings__title {
    flex: 0 0 auto;
    margin: 0 0 0.45rem;
}

.landing-dialog--app-details .landing-app-detail-carousel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.landing-dialog--app-details .landing-app-detail-carousel__text,
.landing-dialog--app-details .landing-apps-detail__text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-right: 0.2rem;
}

.landing-dialog--app-details .landing-app-detail-carousel__intro {
    margin: 0;
    flex: 0 0 auto;
}

.landing-dialog--app-details .landing-app-detail-carousel__bullets {
    margin: 0;
    padding-left: 1.15rem;
    flex: 0 1 auto;
    min-height: 0;
    overflow: visible;
}

.landing-dialog--app-details .landing-app-detail-carousel__downloads {
    flex: 0 0 auto;
    margin-top: 0;
}

.landing-app-detail-carousel {
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
}

.landing-app-detail-carousel__media-wrap {
    flex: 0 0 38%;
    min-height: 0;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: auto;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.landing-app-detail-carousel__media {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
    transform: none;
    cursor: zoom-in;
    border: 7px solid color-mix(in srgb, #333 72%, #ffffff);
    box-sizing: border-box;
    align-self: flex-start;
}

.landing-app-detail-carousel__media-empty {
    color: #666;
    font-size: 0.9rem;
}

.landing-app-detail-carousel__text {
    margin: 0;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 0.92rem;
    line-height: 1.4;
    color: #333;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-right: 0.25rem;
}

.landing-app-detail-carousel__intro {
    margin: 0 0 0.55rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.landing-app-detail-carousel__bullets {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

.landing-app-detail-carousel__bullets li {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.landing-app-detail-carousel__controls {
    display: none;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
}

.landing-app-detail-carousel__btn {
    margin: 0;
    padding: 0.3rem 0.6rem;
    font: inherit;
    border: 1px solid #b8afa2;
    background-color: var(--landing-apps-card-btn-bg);
    color: #2c2c2c;
    cursor: pointer;
}

.landing-app-detail-carousel__counter {
    text-align: center;
    font-size: 0.85rem;
    color: #545454;
}

.landing-dialog.landing-dialog--app-image-lightbox {
    width: min(99vw, 2200px);
    max-width: 99vw;
    height: 98dvh;
    max-height: 98dvh;
    background: rgba(0, 0, 0, 0.92);
    border: none;
    padding: 0;
}

.landing-dialog--app-image-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.landing-app-image-lightbox__inner {
    height: 100%;
    padding: 0;
    background: transparent;
}

.landing-app-image-lightbox__body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    padding: 2.5rem 1rem 1rem;
    box-sizing: border-box;
}

.landing-app-image-lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    min-width: auto;
    min-height: auto;
}

.landing-dialog--app-image-lightbox .landing-dialog__close {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.landing-about-slide-panel {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--landing-soft-white);
    border: none;
    outline: none;
    box-shadow: none;
}

.landing-about-slide-panel__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    padding: 0;
    background: var(--landing-soft-white);
    border: none;
    outline: none;
    box-shadow: none;
}

.landing-about-slide-panel .landing-dialog__close {
    z-index: 3;
}

.landing-about-slide-panel .landing-dialog__body {
    flex: 1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 1.9rem;
    padding-bottom: 1rem;
    padding-left: 0.85rem;
    padding-right: 0.65rem;
    -webkit-overflow-scrolling: touch;
    font-size: var(--landing-about-placeholder-font-size);
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
    background: var(--landing-soft-white);
    scrollbar-gutter: auto;
}

body[data-landing-category="about"] .landing-about-slide-panel .landing-settings__title {
    font-size: var(--landing-about-placeholder-font-size);
    line-height: 1.2;
    text-align: left;
}

body[data-landing-category="about"] .landing-about-slide-panel .landing-dialog__subheading {
    font-size: var(--landing-about-placeholder-font-size);
}

/* Kontakt: Body hero-zentriert (Inline-Panel + Modal) */
.landing-dialog__body:has(.landing-about-contact-mail-wrap) {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    align-items: stretch;
    text-align: center;
    gap: clamp(0.85rem, 3vmin, 1.35rem);
    min-width: 0;
    box-sizing: border-box;
    overflow-x: visible;
    container-type: inline-size;
    container-name: about-contact-mail;
}

.landing-about-slide-panel .landing-dialog__body:has(.landing-about-contact-mail-wrap) {
    overflow-x: visible;
    padding-top: clamp(2.15rem, 5.5dvh, 2.75rem);
    padding-bottom: clamp(1.35rem, 4dvh, 2.25rem);
    padding-left: clamp(0.5rem, 2vw, 0.85rem);
    padding-right: clamp(2.1rem, 8vw, 2.65rem);
}

.landing-dialog__body:has(.landing-about-contact-mail-wrap) > p:not(.landing-about-contact-mail-wrap) {
    margin: 0;
    max-width: min(36rem, 100%);
    min-width: 0;
    line-height: 1.38;
    opacity: 0.9;
}

/* Kontakt: E-Mail hero, zentriert, Wellen-Verlauf (wie --landing-text-grad) */
.landing-about-contact-mail-wrap {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0;
    align-self: stretch;
    overflow: visible;
}

/* Eine Zeile — skaliert an Panelbreite (info@leviraphael.de ≈ 19 Zeichen, Puffer für Bold + Gradient) */
.landing-about-contact-mail {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    font-weight: 700;
    font-size: clamp(0.875rem, calc(100cqw / 12.5), 2.75rem);
    line-height: 1.15;
    letter-spacing: 0;
    padding-inline: 0.1em;
    box-sizing: border-box;
    text-decoration: none;
    background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
}

.landing-about-contact-mail:hover {
    text-decoration: none;
}

.landing-about-contact-mail:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 50%, transparent);
    border-radius: 6px;
}

.landing-about-slide-panel--align-bottom .landing-about-slide-panel__inner {
    justify-content: flex-end;
}

.landing-about-slide-panel--align-bottom .landing-dialog__body {
    flex: 0 1 auto;
    max-height: 92%;
}

.landing-about-slide-panel--align-top .landing-about-slide-panel__inner {
    justify-content: flex-start;
}

.landing-about-slide-panel--align-top .landing-dialog__body {
    flex: 0 1 auto;
    max-height: 92%;
}

.landing-about-slide-panel--align-center .landing-about-slide-panel__inner {
    justify-content: center;
}

.landing-about-slide-panel--align-center .landing-dialog__body {
    flex: 0 1 auto;
    max-height: 96%;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

body[data-landing-category="stuff"].landing-stuff-active .landing-grid__left,
body[data-landing-category="stuff"].landing-stuff-active .landing-grid__right,
body[data-landing-category="stuff"].landing-stuff-active .landing-grid > .face-layer {
    display: none;
}

.landing-stuff-gallery {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.65rem 0.85rem 0.85rem;
    min-height: 0;
    box-sizing: border-box;
}

body[data-landing-category="stuff"].landing-stuff-active .landing-stuff-gallery {
    display: grid;
}

.landing-stuff-gallery__toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
}

.landing-stuff-gallery__toggle-btn,
.landing-stuff-gallery__nav-btn {
    margin: 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid #bdb7ab;
    background: color-mix(in srgb, var(--landing-soft-white) 92%, #ffffff);
    color: #2c2c2c;
    font: inherit;
    font-size: clamp(0.67rem, 1vw, 0.82rem);
    line-height: 1.2;
    cursor: pointer;
}

.landing-stuff-gallery__nav-group {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.landing-stuff-gallery__toggle-btn {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.landing-stuff-gallery__toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.landing-stuff-gallery__counter {
    margin: 0;
    min-width: 4.3rem;
    text-align: center;
    font-size: clamp(0.7rem, 0.95vw, 0.86rem);
    color: #3b3b3b;
}

.landing-stuff-gallery__content {
    display: block;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow-x: hidden;
}

.landing-stuff-gallery__stage,
.landing-stuff-gallery__tiles {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.landing-stuff-gallery[data-stuff-mode="single"] .landing-stuff-gallery__stage {
    display: grid;
    place-items: center;
    overflow: hidden;
    min-height: 0;
    overscroll-behavior: contain;
    touch-action: manipulation;
}

.landing-stuff-gallery[data-stuff-mode="single"] .landing-stuff-gallery__tiles {
    display: none;
}

.landing-stuff-gallery[data-stuff-mode="tiles"] .landing-stuff-gallery__stage {
    display: none;
}

.landing-stuff-gallery[data-stuff-mode="tiles"] .landing-stuff-gallery__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    align-content: start;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.1rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.landing-stuff-gallery__single-image {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: center;
    display: block;
    cursor: zoom-in;
}

.landing-stuff-gallery__tile {
    margin: 0;
    padding: 0;
    width: 100%;
    border: 0;
    background: transparent;
    display: block;
    line-height: 0;
    cursor: pointer;
}

.landing-stuff-gallery__tile[aria-current="true"] {
    border: 0;
    box-shadow: none;
}

.landing-stuff-gallery__tile--wide {
    grid-column: span 2;
}

.landing-stuff-gallery__tile img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.landing-stuff-gallery__empty {
    margin: 0;
    color: #5f5a52;
    font-size: 0.9rem;
}

.landing-stuff-lightbox {
    width: min(100vw, 2200px);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    padding: 0;
    background: rgba(0, 0, 0, 0.9);
}

.landing-stuff-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.landing-stuff-lightbox__inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.landing-stuff-lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    z-index: 4;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.landing-stuff-lightbox__toolbar {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    gap: 0.35rem;
}

.landing-stuff-lightbox__btn {
    margin: 0;
    min-width: 2.25rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.landing-stuff-lightbox__viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    display: grid;
    place-items: center;
    padding: 2.75rem 0.35rem 0.35rem;
    box-sizing: border-box;
}

.landing-stuff-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
}

/* Nur schmale Phones: eine Spalte. Ab 768px (Tablet u. größer) wie Desktop — 3 Spalten. */
@media (max-width: 767px) {
    .landing-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 0.55rem;
        row-gap: 0.5rem;
        padding: 0.6rem 0.75rem 0.5rem;
    }

    .landing-header__start {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 132px);
    }

    .landing-header__menu-toggle {
        order: 2;
        display: none;
        align-items: center;
        margin: 0;
        padding: 0.2rem 0.45rem;
        font: inherit;
        font-size: clamp(0.72rem, 2.7vw, 0.86rem);
        letter-spacing: 0.03em;
        border: 1px solid #b5ac9b;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .landing-header__menu-toggle.landing-text-grad--hover,
    .landing-header__menu-toggle.landing-text-grad--hover:hover {
        background-color: transparent;
        background-image: var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6));
        background-size: 280% 100%;
        background-repeat: no-repeat;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-decoration: none;
        text-underline-offset: 0;
        animation: landing-text-grad-hover-pan 1.65s ease-in-out infinite alternate;
    }

    .landing-brand {
        font-size: clamp(0.78rem, 3vw, 0.92rem);
    }

    .landing-brand__name {
        font-size: clamp(1rem, 4.2vw, 1.25rem);
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .landing-brand__verb {
        margin-left: 0;
    }

    .landing-header-nav {
        order: 2;
        gap: 0.4rem;
        font-size: clamp(0.68rem, 2.7vw, 0.8rem);
        flex-wrap: nowrap;
        justify-content: flex-end;
        text-align: right;
        display: flex;
        align-items: center;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .landing-header__categories {
        order: 3;
        flex: 0 0 100%;
        justify-self: stretch;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.32rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        min-width: 0;
    }

    .landing-header__categories::-webkit-scrollbar {
        display: none;
    }

    .landing-header__cat-btn {
        font-size: clamp(0.74rem, 2.55vw, 0.88rem);
        letter-spacing: 0.025em;
        padding: 0.12rem 0.12rem;
        flex: 1 1 0;
        min-width: 0;
        min-height: 1.65em;
        justify-content: center;
    }

    /* Aktiv: Verlauf reicht — 700 würde „THEATER“ in der gleichen Flex-Spalte abschneiden */
    .landing-header__cat-btn[aria-pressed="true"],
    .landing-header__cat-btn[aria-pressed="true"]:hover {
        font-weight: 600;
    }

    .landing-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        min-width: 0;
    }

    .landing-grid__left,
    .landing-grid__right {
        display: none;
    }

    .landing-grid__stirn {
        grid-column: 1;
        grid-row: 1;
    }

    .landing-grid__augen {
        grid-column: 1;
        grid-row: 2;
    }

    .landing-grid__mund {
        grid-column: 1;
        grid-row: 3;
    }

    body[data-landing-category="apps"].landing-apps-inline-open .landing-grid__stirn {
        grid-row: 1 / -1;
        z-index: 1;
        min-height: 0;
    }

    body[data-landing-category="apps"].landing-apps-inline-open .landing-grid__augen,
    body[data-landing-category="apps"].landing-apps-inline-open .landing-grid__mund {
        display: none;
    }

    body[data-landing-category="apps"].landing-apps-inline-open .landing-grid__stirn .face-layer__viewport {
        flex: 1 1 auto;
        min-height: 0;
    }

    body[data-landing-category="apps"].landing-apps-inline-open .face-layer__slide--apps-inline-open {
        height: 100%;
        min-height: 0;
    }

    .landing-grid > .face-layer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .landing-stuff-gallery {
        padding: 0.5rem 0.55rem 0.65rem;
        gap: 0.45rem;
    }

    .landing-stuff-gallery__toolbar {
        gap: 0.45rem;
        flex-wrap: nowrap;
        grid-template-columns: 1fr auto 1fr;
        justify-items: stretch;
    }

    .landing-stuff-gallery__nav-group {
        grid-column: 2;
        justify-self: center;
        justify-content: center;
    }

    .landing-stuff-gallery__toggle-btn {
        grid-column: 3;
        justify-self: end;
        width: auto;
        justify-content: flex-end;
    }

    .landing-stuff-gallery__toggle-btn,
    .landing-stuff-gallery__nav-btn {
        min-height: 2rem;
        font-size: clamp(0.74rem, 3vw, 0.9rem);
    }

    .landing-stuff-gallery[data-stuff-mode="tiles"] .landing-stuff-gallery__tiles {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    }

    /*
     * Musik mobil: nur Player + Playlist — Face-Layer (Stirn/Augen) und rechte Beschreibung weg;
     * linker Block (#content-left-desktop, erstes Segment) nutzt die volle Höhe unter dem Header.
     */
    body[data-landing-category="music"] .landing-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }

    body[data-landing-category="music"] .landing-grid__stirn,
    body[data-landing-category="music"] .landing-grid__augen,
    body[data-landing-category="music"] .landing-grid__mund {
        display: none !important;
    }

    body[data-landing-category="music"] .landing-grid__left {
        display: grid;
        grid-column: 1;
        grid-row: 1;
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    body[data-landing-category="music"] .landing-grid__right {
        display: none !important;
    }

    body[data-landing-category="music"] .landing-grid__left .landing-side__segment:first-child {
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body[data-landing-category="music"] .landing-music-overview__video {
        max-height: min(32vh, 220px);
    }

    body[data-landing-category="music"] .landing-music-divider {
        margin: 0.35rem 0 0.25rem;
    }

    /* Volle Höhe bis unter den Steuerungen: Panel begrenzt, Scroll nur in der Playlist */
    body[data-landing-category="music"] .landing-music-panel {
        flex: 1 1 0;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-x: hidden;
    }

    body[data-landing-category="music"] .landing-music-panel--right {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body[data-landing-category="music"] .landing-music-player {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    body[data-landing-category="music"] .landing-music-player > .landing-music-player__transport,
    body[data-landing-category="music"] .landing-music-player > .landing-music-player__now,
    body[data-landing-category="music"] .landing-music-player > .landing-music-player__seek-label,
    body[data-landing-category="music"] .landing-music-player > .landing-music-player__volume-row {
        flex-shrink: 0;
    }

    body[data-landing-category="music"] .landing-music-player__playlist {
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
    }

    body[data-landing-category="music"] .landing-music-player__list {
        max-height: none !important;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .landing-mobile-side-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 65;
        color: var(--landing-soft-white);
        text-shadow: none;
        background-color: rgba(47, 47, 47, 0.8);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
        padding: 0.22rem 0.42rem;
        border-radius: 0;
        font-size: clamp(0.72rem, 3.1vw, 0.95rem);
        letter-spacing: 0.02em;
        text-align: center;
        pointer-events: auto;
        max-width: calc(100% - 1.1rem);
        line-height: 1.18;
        overflow-wrap: anywhere;
        opacity: 1;
        transition: opacity 0.16s ease-out;
    }

    .landing-mobile-side-title:hover {
        opacity: 0.75;
    }

    .landing-mobile-side-title strong {
        color: var(--landing-soft-white);
    }

    .landing-mobile-side-title a {
        color: var(--landing-soft-white);
        text-decoration: underline;
        text-underline-offset: 0.18em;
        padding: 0.12em 0.08em;
        margin: 0 -0.08em;
        border-radius: 2px;
    }

    .landing-mobile-side-title a:focus-visible {
        outline: 2px solid var(--landing-soft-white);
        outline-offset: 2px;
    }

    /* Theater · Augen: zwei Zeilen (br), kein anywhere-Umbruch; URL etwas kleiner */
    .landing-mobile-side-title--theater-link {
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.15;
        text-align: center;
    }

    .landing-mobile-side-title--theater-link strong {
        white-space: nowrap;
    }

    .landing-mobile-side-title--theater-link a {
        font-size: 0.8em;
        letter-spacing: -0.02em;
        white-space: nowrap;
        padding: 0.06em 0.05em;
        margin: 0 -0.05em;
        text-underline-offset: 0.12em;
    }

    .landing-mobile-side-title--button {
        cursor: pointer;
    }

    .landing-mobile-side-title--button:focus-visible,
    .landing-mobile-side-title--button:hover {
        text-decoration: none;
        outline: none;
        background-color: rgba(47, 47, 47, 0.8);
    }

    .landing-mobile-side-title--button:focus-visible {
        box-shadow: 0 0 0 2px var(--landing-soft-white), 0 1px 8px rgba(0, 0, 0, 0.32);
    }

    /*
     * Mobile-Segmenttitel + Verlauf: zwei Ebenen — Verlauf nur auf Text, darunter Pill rgba(0,0,0,.9) auf padding-box.
     */
    .landing-mobile-side-title.landing-text-grad--hover,
    .landing-mobile-side-title.landing-text-grad--hover:hover,
    .landing-mobile-side-title.landing-text-grad--hover:focus-visible {
        background-color: transparent;
        background-image:
            var(--landing-text-grad, linear-gradient(105deg, #f472b6, #fb923c, #c084fc, #f472b6)),
            linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
        background-size: 280% 100%, auto;
        background-repeat: no-repeat, no-repeat;
        background-position: 0% 50%, center;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-decoration: none;
        text-underline-offset: 0;
        animation: landing-text-grad-hover-pan-chip 1.65s ease-in-out infinite alternate;
    }

    .landing-mobile-side-title.landing-text-grad--hover strong,
    .landing-mobile-side-title.landing-text-grad--hover a,
    .landing-mobile-side-title.landing-text-grad--hover * {
        background-image: inherit;
        background-size: inherit;
        background-repeat: inherit;
        background-position: inherit;
        -webkit-background-clip: text, padding-box;
        background-clip: text, padding-box;
        color: transparent;
        -webkit-text-fill-color: transparent;
        text-decoration: none;
    }

    /* Theater-Zweizeiler: Pill nur auf dem Container, nicht pro Zeile */
    .landing-mobile-side-title--theater-link.landing-text-grad--hover strong,
    .landing-mobile-side-title--theater-link.landing-text-grad--hover a {
        -webkit-background-clip: text;
        background-clip: text;
    }

    .landing-mobile-side-title--button.landing-text-grad--hover:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-text-swirl-a, #c084fc) 55%, transparent), 0 1px 8px rgba(0, 0, 0, 0.32);
    }

    /* Klick: einmal Verlauf schieben — gleiche Keyframes wie Hover, kein Overlay (kein Doppeltext / Versatz) */
    .landing-mobile-side-title.landing-text-grad--hover.landing-text-grad--click-flash {
        animation: landing-text-grad-hover-pan-chip 0.3s ease-in-out 1;
    }

    .landing-dialog__year-list li {
        white-space: normal;
        line-height: 1.45;
        margin-bottom: 0.5rem;
    }

    .landing-dialog__year-list li > strong {
        display: inline;
    }

    .landing-dialog__year-list li > a {
        display: block;
        margin-top: 0.06rem;
    }

    /*
     * Face-Carousel: horizontal wischen bleibt, aber kein sichtbarer Horizontal-Scroll
     * (Mobile-Browser zeigen sonst oft eine Scroll-Leiste unter dem Bildstreifen).
     */
    .face-layer {
        max-width: 100%;
    }

    .face-layer__viewport {
        width: 100%;
        max-width: 100%;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .face-layer__viewport::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }

    .landing-app-detail-carousel {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
    }

    .landing-dialog.landing-dialog--app-details {
        height: 96dvh !important;
        max-height: 96dvh !important;
    }

    .landing-dialog__body.landing-dialog__body--app-details {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0.35rem;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    .landing-dialog__body.landing-dialog__body--app-details > .landing-settings__title {
        margin: 0;
        flex: 0 0 auto;
    }

    .landing-dialog--app-details .landing-app-detail-carousel__text,
    .landing-dialog--app-details .landing-apps-detail__text {
        width: 100%;
    }

}

@media (max-width: 767px) {
    body[data-text-size="l"] .landing-header {
        row-gap: 0.7rem;
        padding-block: 0.72rem 0.62rem;
    }

    body[data-text-size="l"] .landing-brand {
        font-size: clamp(0.98rem, 3.8vw, 1.12rem);
    }

    body[data-text-size="l"] .landing-header-nav {
        font-size: clamp(0.86rem, 3vw, 0.98rem);
        gap: 0.65rem;
    }

    body[data-text-size="l"] .landing-header__cat-btn {
        font-size: clamp(0.82rem, 2.95vw, 0.96rem);
        padding: 0.12rem 0.14rem;
        line-height: 1.35;
    }

    body[data-text-size="l"] .landing-mobile-side-title {
        font-size: clamp(0.92rem, 4vw, 1.2rem);
        line-height: 1.22;
        padding: 0.28rem 0.5rem;
        max-width: calc(100% - 1.4rem);
    }

    body[data-text-size="l"] .landing-mobile-side-title--theater-link a {
        font-size: 0.76em;
    }

    body[data-text-size="l"] .landing-dialog {
        max-width: min(96vw, 540px);
    }

    body[data-text-size="l"] .landing-dialog.landing-dialog--login {
        max-width: min(94vw, 24rem);
    }

    body[data-text-size="l"] .landing-dialog__inner {
        padding: 1.15rem 1.2rem 1.35rem;
    }

    body[data-text-size="l"] .landing-dialog__body {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    body[data-text-size="l"] .landing-settings__section-title {
        font-size: 1rem;
    }

    body[data-text-size="l"] .landing-settings__pill {
        font-size: 0.98rem;
        padding: 0.44rem 0.7rem;
    }
}

.landing-dialog--legal {
    max-width: min(94vw, 36rem);
}

.landing-dialog__body--legal {
    max-height: min(72vh, 28rem);
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 1rem 1rem 1.1rem;
    padding-top: 2.25rem;
}

.landing-dialog__body--legal .landing-settings__title {
    margin-top: 0;
}

.landing-legal__lead,
.landing-legal__meta {
    margin: 0 0 0.75rem;
    font-size: 0.88em;
    color: #5a5a5a;
}

.landing-legal__list li {
    margin-bottom: 0.35rem;
}

/* Dialog */
.landing-dialog {
    border: 1px solid #d9d0c1;
    border-radius: 0;
    background: var(--landing-soft-white);
    padding: 0;
    max-width: min(92vw, 420px);
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* Login: kompaktes Modal (ohne horizontales Scrollen) */
.landing-dialog.landing-dialog--login {
    max-width: min(92vw, 22rem);
    width: 100%;
    box-sizing: border-box;
}

.landing-dialog.landing-dialog--login .landing-dialog__body--login {
    box-sizing: border-box;
    min-width: 0;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: unset;
    padding: 1.25rem 1rem 0.75rem;
    padding-top: 2.25rem;
}

.landing-dialog.landing-dialog--login .landing-login-form__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
}

.landing-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.landing-login-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.78rem;
    color: #444;
}

.landing-login-form__label {
    line-height: 1.2;
}

.landing-login-form input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    line-height: 1.35;
    border: 1px solid #c4bbb0;
    border-radius: 4px;
    background: #fff;
    color: #222;
}

.landing-login-form input:focus-visible {
    outline: 2px solid #111;
    outline-offset: 1px;
}

.landing-login-form__error {
    margin: 0;
    font-size: 0.8rem;
    color: #b00020;
    line-height: 1.35;
}

.landing-login-form__error[hidden] {
    display: none !important;
}

.landing-login-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding-top: 0.15rem;
}

.landing-dialog.landing-dialog--login .landing-login-form__actions .landing-settings__pill {
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
}

.landing-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.landing-dialog__inner {
    position: relative;
    padding: 0;
    background: var(--landing-soft-white);
}

.landing-dialog__close {
    position: absolute;
    top: 0.35rem;
    right: 0.65rem;
    border: none;
    background: var(--landing-soft-white);
    padding: 0 0.18rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
    z-index: 2;
}

.landing-dialog__body {
    padding-right: 0;
    padding-top: 1.9rem;
    padding-bottom: 1rem;
    padding-left: 0.85rem;
    max-height: 70dvh;
    overflow-y: auto;
    scrollbar-gutter: auto;
    background: var(--landing-soft-white);
    font-size: var(--fs-s, 0.95rem);
    color: #333;
}

.landing-dialog__signature {
    margin: 1rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid #d9d0c1;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    color: #4a4a4a;
}

.landing-dialog__subheading {
    margin: 1rem 0 0.4rem;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: #2f2f2f;
}

.landing-dialog__year-list {
    margin: 0;
    padding-left: 1.1rem;
}

.landing-dialog__year-list li {
    margin: 0 0 0.28rem;
    line-height: 1.35;
}

.landing-dialog__body--settings {
    padding-right: 0;
}

.landing-settings__title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.landing-settings__section {
    padding: 0.75rem 0;
    border-top: 1px solid #eee;
}

.landing-settings__section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.landing-settings__section-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.landing-settings__control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.landing-settings__pill {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #bbb;
    background: var(--landing-soft-white);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.landing-settings__pill[aria-pressed="true"] {
    border-color: #111;
    background: #111;
    color: #fff;
}

.landing-settings__pill:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.landing-settings__legal {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    line-height: 1.2;
}

.landing-settings__legal-link {
    margin: 0;
    padding: 0.12rem 0.08rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: #222;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

.landing-settings__legal-link:hover,
.landing-settings__legal-link:focus-visible {
    color: #5a3b12;
    outline: none;
}

.landing-settings__legal-sep {
    opacity: 0.55;
    user-select: none;
}

.landing-dialog__body--cloned:empty::after {
    content: "(Noch kein Inhalt.)";
    color: #888;
}

/* App-Detail-Dialog muss die generische .landing-dialog Breite übersteuern */
.landing-dialog.landing-dialog--app-details {
    width: min(99vw, 1800px) !important;
    max-width: 99vw !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
}

/* Nach der generischen .landing-dialog-Regel erneut erzwingen, damit keine 420px Begrenzung greift. */
.landing-dialog.landing-dialog--app-image-lightbox {
    width: min(99vw, 2200px) !important;
    max-width: 99vw !important;
    height: 98dvh !important;
    max-height: 98dvh !important;
}

/* Auth-Toasts (landing-auth.js) — wie Dialog: weicher Hintergrund, Rahmen, Poppins */
.landing-auth-toast {
    position: fixed;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 100000;
    max-width: min(92vw, 26rem);
    padding: 0.65rem 1rem;
    border: 1px solid #d9d0c1;
    border-radius: 0;
    background: var(--landing-soft-white, #f4eee3);
    color: #2f2f2f;
    font-family: "Poppins", sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

.landing-auth-toast--sign-in {
    border-left: 4px solid #1a7f37;
}

.landing-auth-toast--sign-out {
    border-left: 4px solid #9a5a1f;
}

.landing-auth-toast--info {
    border-left: 4px solid #6b6b6b;
}

/* Admin: Kontoverwaltung */
body[data-landing-category="admin"].landing-admin-active .landing-grid__left,
body[data-landing-category="admin"].landing-admin-active .landing-grid__right,
body[data-landing-category="admin"].landing-admin-active .landing-grid > .face-layer {
    visibility: hidden;
    pointer-events: none;
}

/* display:flex überschreibt sonst das hidden-Attribut beim Verlassen der Admin-Seite */
.landing-admin-panel[hidden] {
    display: none !important;
}

.landing-admin-panel {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    max-height: min(78vh, 720px);
    overflow: hidden;
}

.landing-admin-panel__header {
    flex: 0 0 auto;
}

.landing-admin-panel__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.landing-admin-panel__hint {
    margin: 0;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.4;
}

.landing-admin-panel__status {
    min-height: 1.2em;
    font-size: 0.85rem;
}

.landing-admin-panel__status--error {
    color: #a11919;
}

.landing-admin-panel__status--success {
    color: #1f6a2d;
}

.landing-admin-panel__layout {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.landing-admin-panel__accounts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: auto;
    border-right: 1px solid #e5e5e5;
    padding-right: 10px;
}

.landing-admin-panel__account-btn {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.landing-admin-panel__account-btn--active {
    border-color: #333;
    background: #f3f3f3;
    font-weight: 600;
}

.landing-admin-panel__editor {
    overflow: auto;
    min-height: 0;
    padding-right: 4px;
}

.landing-admin-panel__account-title {
    margin: 0 0 12px;
    font-size: 1.05rem;
}

.landing-admin-panel__group {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 10px 12px 12px;
}

.landing-admin-panel__group legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.landing-admin-panel__checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 12px;
}

.landing-admin-panel__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
}

.landing-admin-panel__board-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}

.landing-admin-panel__board {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.82rem;
}

.landing-admin-panel__board-path {
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.landing-admin-panel__empty {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

.landing-admin-panel__footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .landing-admin-panel {
        max-height: none;
        padding: 12px;
    }

    .landing-admin-panel__layout {
        grid-template-columns: 1fr;
    }

    .landing-admin-panel__accounts {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        padding-right: 0;
        padding-bottom: 10px;
    }
}