/* =========================================================
   BASIS
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #02050b;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #dff7ff;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #02050b;
}


/* =========================================================
   HERO

   Desktop: 1672 × 941
   Mobile:   941 × 1672
   ========================================================= */


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.navigation-bar {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    height: 64px;

    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding: 0 54px;

    background:
        linear-gradient(
            to right,
            rgba(3, 10, 17, 0.00) 0%,
            rgba(3, 10, 17, 0.00) 19%,
            rgba(3, 10, 17, 0.18) 29%,
            rgba(3, 10, 17, 0.43) 42%,
            rgba(3, 10, 17, 0.56) 100%
        );

    box-shadow:
        0 -1px 0 rgba(120, 220, 255, 0.06);
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

.navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 38px;
}

.navigation button {
    appearance: none;

    border: 0;
    background: transparent;

    padding: 8px 0;

    color: rgba(225, 247, 255, 0.82);

    font-size: 15px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    cursor: pointer;

    text-shadow:
        0 0 10px rgba(70, 205, 255, 0.30);

    transition:
        color 180ms ease,
        text-shadow 180ms ease;
}

.navigation button:hover,
.navigation button.active {
    color: #ffffff;

    text-shadow:
        0 0 8px rgba(90, 220, 255, 0.85),
        0 0 18px rgba(60, 185, 255, 0.50);
}

.navigation button:focus-visible {
    outline: 1px solid rgba(135, 225, 255, 0.8);
    outline-offset: 6px;
}


/* =========================================================
   HOLOGRAMM – DESKTOP
   ========================================================= */


/* dezente Scanlines */

.holo::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(160, 230, 255, 0.025) 0px,
            rgba(160, 230, 255, 0.025) 1px,
            transparent 1px,
            transparent 5px
        );
}


/* =========================================================
   PANELS
   ========================================================= */

.panel {
    position: relative;
    z-index: 2;

    display: none;

    width: 100%;
    height: 100%;
}

.panel.active {
    display: block;
}


/* =========================================================
   HOME / LOGO
   ========================================================= */

.intro {
    position: relative;

    display: flex;

    width: 100%;
    height: 100%;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;
}




.intro-logo-wrap {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.intro-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 285px;

    opacity: 0.97;

    filter:
        drop-shadow(
            0 0 13px rgba(120, 225, 255, 0.46)
        )
        drop-shadow(
            0 0 34px rgba(80, 210, 255, 0.28)
        );

    animation:
        holoLogoFlicker
        5.2s
        linear
        infinite;
}


.intro-logo-wrap::after {
    content: "";

    position: absolute;

    top: -12%;
    left: -34%;

    width: 26%;
    height: 124%;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.62),
            rgba(255, 255, 255, 0)
        );

    transform:
        skewX(-18deg);

    animation:
        holoLogoShine
        6.0s
        ease-in-out
        infinite;
}


@keyframes holoLogoFlicker {

    0%,
    6%,
    8%,
    27%,
    29%,
    61%,
    63%,
    100% {

        opacity: 0.97;

        filter:
            drop-shadow(
                0 0 13px rgba(120, 225, 255, 0.46)
            )
            drop-shadow(
                0 0 34px rgba(80, 210, 255, 0.28)
            );
    }

    7% {
        opacity: 0.72;

        filter:
            drop-shadow(
                0 0 6px rgba(120, 225, 255, 0.20)
            )
            drop-shadow(
                0 0 16px rgba(80, 210, 255, 0.10)
            );
    }

    28% {
        opacity: 0.82;
    }

    62% {
        opacity: 0.86;
    }
}


@keyframes holoLogoShine {

    0%,
    14% {
        left: -34%;
        opacity: 0;
    }

    18% {
        opacity: 0.76;
    }

    39% {
        left: 116%;
        opacity: 0.20;
    }

    100% {
        left: 116%;
        opacity: 0;
    }
}


/* =========================================================
   STANDARD TEXT
   ========================================================= */

.panel h1 {
    margin:
        0
        0
        16px;

    padding-right: 82px;

    font-size: 31px;
    font-weight: 500;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.panel h2 {
    margin:
        0
        0
        12px;

    font-size: 20px;
    font-weight: 500;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.panel p {
    max-width: 610px;

    margin:
        0
        0
        15px;

    font-size: 17px;
    line-height: 1.50;

    color: rgba(224, 247, 255, 0.88);
}


.holo-link {
    display: inline-block;

    color: #c5f2ff;

    text-decoration: none;

    padding-bottom: 3px;

    border-bottom:
        1px solid rgba(135, 226, 255, 0.52);
}


/* =========================================================
   SCROLLBEREICHE IM HOLOGRAMM
   ========================================================= */

.panel-scroll {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 12px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(140, 225, 255, 0.30)
        rgba(90, 180, 210, 0.07);
}


.panel-scroll::-webkit-scrollbar {
    width: 7px;
}


.panel-scroll::-webkit-scrollbar-track {
    background:
        rgba(90, 180, 210, 0.07);
}


.panel-scroll::-webkit-scrollbar-thumb {
    background:
        rgba(140, 225, 255, 0.30);

    border-radius: 20px;
}


.panel-scroll::-webkit-scrollbar-thumb:hover {
    background:
        rgba(160, 235, 255, 0.42);
}


/* =========================================================
   HOLO – BEREICHSNAVIGATION
   ========================================================= */

.section-subnav {
    display: flex;
    gap: 19px;

    margin-bottom: 12px;

    padding:
        0
        0
        7px
        0;

    border-bottom:
        1px solid rgba(130, 220, 255, 0.22);
}

.section-subnav button {
    appearance: none;

    border: 0;
    background: transparent;

    padding: 0;

    color: rgba(203, 240, 250, 0.62);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    cursor: pointer;
}

.section-subnav button:hover {
    color: #ffffff;

    text-shadow:
        0 0 9px rgba(80, 210, 255, 0.55);
}


/* =========================================================
   BAND – UNTERNAVIGATION
   ========================================================= */

.band-subnav {
    display: flex;
    gap: 19px;

    margin-bottom: 8px;

    padding:
        0
        0
        7px
        0;

    border-bottom:
        1px solid rgba(130, 220, 255, 0.22);
}


.band-subnav button,
.band-home-link {
    appearance: none;

    border: 0;
    background: transparent;

    padding: 0;

    color: rgba(203, 240, 250, 0.62);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    cursor: pointer;
}


.band-subnav button:hover,
.band-subnav button.active,
.band-home-link:hover {
    color: #ffffff;

    text-shadow:
        0 0 9px rgba(80, 210, 255, 0.55);
}


/* =========================================================
   BAND – UNTERSEITEN
   ========================================================= */

.band-view {
    display: none;

    height:
        calc(100% - 34px);
}


.band-view.active {
    display: block;
}


/* =========================================================
   BAND PHOTO
   ========================================================= */

.band-photo-stage {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;
}


.band-photo-effect {
    position: relative;

    width: 100%;
    height: 98%;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    transform: translateY(-8px);
}


/* Sweep nur über der Band-Silhouette */

.band-photo-effect::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.08) 45%,
            rgba(255, 255, 255, 0.62) 50%,
            rgba(180, 240, 255, 0.24) 54%,
            transparent 60%,
            transparent 100%
        );

    background-size: 260% 100%;
    background-position: 150% 0;

    -webkit-mask-image:
        url("../assets/No Jazz Today Band-Foto.png");
    -webkit-mask-repeat:
        no-repeat;
    -webkit-mask-position:
        center bottom;
    -webkit-mask-size:
        contain;

    mask-image:
        url("../assets/No Jazz Today Band-Foto.png");
    mask-repeat:
        no-repeat;
    mask-position:
        center bottom;
    mask-size:
        contain;

    opacity: 0;

    mix-blend-mode: screen;

    z-index: 2;

    animation:
        bandPhotoSweep
        7.0s
        ease-in-out
        infinite;
}


.band-photo {
    position: relative;
    z-index: 1;

    display: block;

    width: auto;
    height: 100%;

    max-width: 100%;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(
            0 0 10px rgba(90, 215, 255, 0.22)
        );

    animation:
        bandPhotoFlicker
        6.4s
        linear
        infinite;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 66%,
            rgba(0, 0, 0, 0.90) 76%,
            rgba(0, 0, 0, 0.52) 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 66%,
            rgba(0, 0, 0, 0.90) 76%,
            rgba(0, 0, 0, 0.52) 88%,
            transparent 100%
        );
}


@keyframes bandPhotoFlicker {

    0%,
    10%,
    12%,
    38%,
    40%,
    71%,
    73%,
    100% {
        opacity: 1;
    }

    11% {
        opacity: 0.78;
    }

    39% {
        opacity: 0.88;
    }

    72% {
        opacity: 0.82;
    }
}


@keyframes bandPhotoSweep {

    0%,
    14% {
        background-position: 150% 0;
        opacity: 0;
    }

    18% {
        opacity: 0.78;
    }

    38% {
        background-position: -60% 0;
        opacity: 0.18;
    }

    100% {
        background-position: -60% 0;
        opacity: 0;
    }
}


/* =========================================================
   AUDIO
   ========================================================= */

.audio-panel {
    padding-top: 4px;
}

.audio-kicker {
    margin-bottom: 7px;

    color: rgba(190, 232, 246, 0.66);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.audio-panel h1 {
    margin-bottom: 24px;
    padding-right: 0;
}

.audio-player {
    display: flex;
    align-items: center;

    gap: 18px;

    max-width: 610px;
}

.audio-toggle {
    position: relative;

    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    border:
        1px solid rgba(145, 230, 255, 0.55);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            rgba(125, 225, 255, 0.11) 0%,
            rgba(65, 175, 230, 0.06) 52%,
            rgba(20, 70, 105, 0.02) 100%
        );

    box-shadow:
        inset 0 0 16px rgba(120, 225, 255, 0.06),
        0 0 14px rgba(80, 205, 255, 0.16);

    cursor: pointer;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.audio-toggle:hover {
    border-color:
        rgba(185, 245, 255, 0.88);

    box-shadow:
        inset 0 0 16px rgba(120, 225, 255, 0.09),
        0 0 20px rgba(80, 205, 255, 0.28);
}

.audio-toggle:active {
    transform: scale(0.97);
}

.audio-toggle.playing {
    border-color:
        rgba(190, 245, 255, 0.95);

    box-shadow:
        inset 0 0 20px rgba(120, 225, 255, 0.12),
        0 0 22px rgba(80, 205, 255, 0.34);
}

.audio-icon {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: block;
}

.audio-icon-play {
    width: 0;
    height: 0;

    margin-left: 2px;

    border-top:
        8px solid transparent;

    border-bottom:
        8px solid transparent;

    border-left:
        13px solid rgba(225, 250, 255, 0.94);
}

.audio-toggle.playing .audio-icon-play {
    width: 13px;
    height: 16px;

    margin-left: 0;

    border: 0;

    background:
        linear-gradient(
            to right,
            rgba(225, 250, 255, 0.94) 0 38%,
            transparent 38% 62%,
            rgba(225, 250, 255, 0.94) 62% 100%
        );
}

.audio-track-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.audio-progress {
    position: relative;

    display: block;

    width: 100%;
    height: 18px;

    padding: 0;
    border: 0;
    background: transparent;

    cursor: pointer;
}

.audio-progress::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 8px;

    height: 2px;

    background:
        rgba(145, 220, 245, 0.18);

    box-shadow:
        0 0 8px rgba(70, 190, 235, 0.10);
}

.audio-progress-fill {
    position: absolute;

    left: 0;
    top: 7px;

    width: 0%;
    height: 4px;

    background:
        rgba(185, 242, 255, 0.88);

    box-shadow:
        0 0 10px rgba(90, 220, 255, 0.44);
}

.audio-progress-fill::after {
    content: "";

    position: absolute;

    right: -4px;
    top: -2px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(225, 250, 255, 0.98);

    box-shadow:
        0 0 10px rgba(100, 225, 255, 0.60);
}

.audio-time {
    display: flex;
    justify-content: space-between;

    margin-top: 4px;

    color:
        rgba(190, 230, 242, 0.64);

    font-size: 12px;

    letter-spacing: 0.08em;
}


/* =========================================================
   LIVE
   ========================================================= */

.live-event {
    max-width: 610px;
}

.live-date {
    margin-bottom: 6px;

    color: rgba(190, 232, 246, 0.72);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.live-event strong {
    color: rgba(238, 252, 255, 0.98);
    font-weight: 600;
}

.live-links {
    display: flex;
    flex-wrap: wrap;

    gap:
        10px
        18px;

    margin-top: 18px;
}


/* =========================================================
   MEMBERS
   ========================================================= */

.member-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px
        26px;

    margin-top: 8px;
}


.member {
    padding:
        8px
        0;

    border-bottom:
        1px solid rgba(120, 215, 245, 0.14);

    font-size: 16px;
    line-height: 1.3;
}


.member strong {
    display: block;

    color:
        rgba(232, 250, 255, 0.96);

    font-weight: 500;
}


.member span {
    color:
        rgba(190, 230, 242, 0.64);

    font-size: 13px;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.member-list-rich {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
}

.member-rich {
    padding:
        9px
        0
        12px;
}

.member-rich p {
    max-width: 625px;

    margin:
        7px
        0
        0;

    font-size: 15px;
    line-height: 1.42;

    color:
        rgba(218, 244, 252, 0.82);
}


/* =========================================================
   KONTAKT
   ========================================================= */

.contact-block {
    display: grid;
    gap: 8px;

    margin-bottom: 22px;
}


.contact-block a {
    color: #c5f2ff;
    text-decoration: none;
}


.imprint {
    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid rgba(120, 215, 245, 0.18);
}


.imprint-title {
    margin-bottom: 8px;

    color:
        rgba(215, 244, 252, 0.74);

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.imprint p {
    font-size: 14px;
    line-height: 1.42;

    color:
        rgba(210, 240, 248, 0.72);
}


/* =========================================================
   HOLO SWITCH
   ========================================================= */

.holo.switching {
    animation:
        holoSwitch
        240ms
        linear;
}


@keyframes holoSwitch {

    0% {
        opacity: 1;
    }

    25% {
        opacity: 0.30;
    }

    48% {
        opacity: 0.92;
    }

    68% {
        opacity: 0.48;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */


/* =========================================================
   PRESS / DOWNLOADS
   ========================================================= */

.press-panel {
    height: calc(100% - 33px);
    padding-right: 14px;
}

.press-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.press-kicker {
    margin-bottom: 4px;
    color: rgba(203, 240, 250, 0.58);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.press-intro h1 {
    margin-bottom: 0;
}

.press-kit-download {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid rgba(135, 226, 255, 0.44);
    background: rgba(75, 190, 225, 0.08);
    color: #e6faff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    box-shadow: inset 0 0 20px rgba(70, 200, 240, 0.04);
    transition: background 180ms ease, border-color 180ms ease, text-shadow 180ms ease;
}

.press-kit-download:hover {
    background: rgba(75, 190, 225, 0.15);
    border-color: rgba(155, 236, 255, 0.75);
    text-shadow: 0 0 10px rgba(90, 220, 255, 0.55);
}

.press-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

.press-group {
    min-width: 0;
}

.press-group-photos {
    grid-column: 1 / -1;
}

.press-group h2 {
    margin-bottom: 7px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(130, 220, 255, 0.18);
    font-size: 12px;
    letter-spacing: 0.13em;
    color: rgba(220, 247, 255, 0.78);
}

.press-download {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
    color: rgba(224, 247, 255, 0.91);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.28;
    border-bottom: 1px solid rgba(130, 220, 255, 0.08);
}

.press-download:hover {
    color: #ffffff;
    text-shadow: 0 0 9px rgba(80, 210, 255, 0.48);
}

.press-download span {
    flex: 0 0 auto;
    color: rgba(190, 235, 247, 0.46);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.press-ai-note,
.band-photo-note,
.site-image-note {
    color: rgba(194, 229, 239, 0.56);
    font-size: 10px;
    line-height: 1.35;
}

.press-ai-note {
    max-width: none !important;
    margin: 16px 0 5px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: rgba(194, 229, 239, 0.56) !important;
}

.band-photo-note {
    position: absolute;
    right: 8px;
    bottom: 2px;
    z-index: 6;
    max-width: 360px;
    text-align: right;
    text-shadow: 0 0 8px rgba(2, 8, 13, 0.95);
}

.site-image-note {
    max-width: 570px;
    margin: 12px 0 16px;
}

/* =========================================================
   FINAL PRESS / AI / DATENSCHUTZ UPDATE
   ========================================================= */

.band-photo-note {
    left: 50%;
    right: auto;
    bottom: 2px;
    width: 88%;
    max-width: 540px;
    transform: translateX(-50%);
    text-align: center;
}

.press-intro {
    display: block;
    margin-bottom: 14px;
}

.press-kit-primary {
    margin: 0 0 22px;
    padding: 12px 14px 14px;
    border: 1px solid rgba(135, 226, 255, 0.22);
    background: rgba(75, 190, 225, 0.055);
}

.press-kit-primary h2 {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(220, 247, 255, 0.78);
}

.press-kit-download {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 10px 13px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: none;
}

.press-kit-download span {
    flex: 0 0 auto;
    color: rgba(190, 235, 247, 0.52);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.press-files-heading {
    margin: 0 0 12px;
    color: rgba(224, 247, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.press-list {
    display: block;
}

.press-group {
    margin-bottom: 18px;
}

.press-group-photos {
    margin-bottom: 6px;
}

.press-photo-download {
    align-items: center;
}

.press-photo-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 10px;
}

.press-photo-title {
    flex: 0 0 auto !important;
    color: rgba(224, 247, 255, 0.91) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
}

.press-photo-ai {
    flex: 1 1 auto !important;
    min-width: 0;
    color: rgba(194, 229, 239, 0.46) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

.press-filetype {
    flex: 0 0 auto !important;
    color: rgba(190, 235, 247, 0.46) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

.contact-panel {
    height: calc(100% - 33px);
    padding-right: 14px;
}

.imprint a,
.privacy a {
    color: #c5f2ff;
    text-decoration: none;
}

.privacy {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(120, 215, 245, 0.18);
}

.privacy p {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.42;
    color: rgba(210, 240, 248, 0.68);
}

.site-image-note strong {
    color: rgba(220, 247, 255, 0.70);
}


/* =========================================================
   HOME KI-HINWEIS
   ========================================================= */



/* =========================================================
   PRESS DOWNLOADS – FEINTUNING
   ========================================================= */

.download-title {
    display: block;

    color: rgba(230, 248, 252, 0.94);

    font-size: 15px;
    line-height: 1.35;
}

.download-note {
    display: block;

    margin-top: 2px;

    color: rgba(203, 240, 250, 0.46);

    font-size: 11px;
    line-height: 1.32;
}


/* =========================================================
   GLOBALER KI-HINWEIS ZUR HINTERGRUNDSZENE
   ========================================================= */

.background-ai-note {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    z-index: 90;

    display: flex;
    width: 30px;
    margin: 0;
    padding: 10px 0;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    color: rgba(232, 247, 252, 0.84);

    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.025em;

    white-space: nowrap;

    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);

    background: rgba(2, 10, 18, 0.72);
    border-right: 1px solid rgba(118, 221, 248, 0.18);

    pointer-events: none;
}




/* =========================================================
   ROUTED HOLO CONTENT
   ========================================================= */

.holo-nav:empty {
    display: none;
}

.holo-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.holo.has-nav .holo-content {
    height: calc(100% - 34px);
}

.route-page {
    position: relative;
    width: 100%;
    height: 100%;
}

.route-page .press-panel,
.route-page .contact-panel {
    height: 100%;
}

.route-page.route-social {
    padding-top: 4px;
}

.route-load-error {
    padding: 26px;
    color: rgba(230, 248, 252, 0.9);
    font-size: 16px;
    line-height: 1.5;
}

/* =========================================================
   DESKTOP SIZE TUNING – OCT UPDATE
   ========================================================= */

/* Larger and more readable home logo */
.intro-logo {
    max-width: 94%;
    max-height: 405px;
}

/* Wider and larger general typography inside the holo screen */
.panel h1 {
    font-size: 34px;
    margin-bottom: 18px;
}

.panel h2 {
    font-size: 22px;
    margin-bottom: 14px;
}

.panel p {
    max-width: 780px;
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.56;
}

.audio-player,
.live-event,
.member-rich p {
    max-width: 780px;
}

.member-rich p {
    font-size: 16px;
    line-height: 1.48;
}

.band-subnav,
.section-subnav {
    gap: 22px;
}

.band-subnav button,
.band-home-link,
.section-subnav button {
    font-size: 14px;
    letter-spacing: 0.15em;
}

/* PHOTO page: image larger overall, but pushed down and left.
   AI note appears as holo overlay on the right side. */
.band-photo-stage {
    justify-content: flex-start;
    align-items: flex-end;
}

.band-photo-effect {
    width: 60%;
    height: 92%;
    justify-content: flex-start;
    align-items: flex-end;
    transform: translate(8px, 28px);
}

.band-photo-effect::after {
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}

.band-photo {
    object-position: left bottom;
}

.band-photo-note {
    position: absolute;
    left: auto;
    right: 6.5%;
    top: 52%;
    bottom: auto;
    width: 31%;
    max-width: 320px;
    min-width: 230px;
    transform: translateY(-50%);
    z-index: 6;
    margin: 0;
    padding: 12px 14px 12px 16px;
    text-align: left;
    color: rgba(214, 243, 250, 0.82);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    font-family: "Courier New", Courier, monospace;
    text-shadow: 0 0 10px rgba(2, 10, 16, 0.98);
    background: linear-gradient(90deg, rgba(90, 210, 245, 0.10), rgba(90, 210, 245, 0.02));
    border-left: 1px solid rgba(150, 230, 255, 0.42);
    box-shadow: inset 0 0 18px rgba(80, 205, 255, 0.05);
    pointer-events: none;
}

.band-photo-note::after {
    content: " ▌";
    color: rgba(188, 242, 255, 0.78);
    animation: bandPhotoCursor 1s steps(1) infinite;
}

@keyframes bandPhotoCursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* =========================================================
   PHOTO / TYPO / HOLO NAV REFINEMENT
   ========================================================= */

/* Band photo: keep the strong left alignment, make it large again,
   sink it a little further into the lower holo area, and let the
   added size grow mainly upward and to the right. */
.band-photo-effect {
    width: 72%;
    height: 108%;
    transform: translate(6px, 42px);
}

/* AI note: one-line holo readout. The box itself grows to the right;
   its right border is the cursor. */
.band-photo-note {
    left: 50%;
    right: auto;
    top: 45%;
    bottom: auto;

    width: 0;
    max-width: none;
    min-width: 0;

    transform: none;
    overflow: hidden;
    white-space: nowrap;

    padding: 8px 0 8px 12px;
    margin: 0;

    color: rgba(220, 247, 255, 0.86);
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.025em;
    text-align: left;

    background: linear-gradient(
        90deg,
        rgba(85, 210, 248, 0.10),
        rgba(85, 210, 248, 0.025)
    );

    border-left: 1px solid rgba(150, 233, 255, 0.22);
    border-right: 2px solid rgba(205, 249, 255, 0.92);
    border-top: 1px solid rgba(145, 230, 255, 0.10);
    border-bottom: 1px solid rgba(145, 230, 255, 0.10);

    box-shadow:
        inset 0 0 14px rgba(75, 200, 245, 0.035),
        0 0 10px rgba(65, 190, 240, 0.04);

    text-shadow: 0 0 7px rgba(95, 220, 255, 0.24);

    animation:
        bandPhotoNoteReveal 2.7s steps(66, end) 0.45s forwards,
        bandPhotoNoteCursor 0.78s step-end 3.2s infinite;
}

.band-photo-note::after {
    content: none;
}

@keyframes bandPhotoNoteReveal {
    from { width: 0; }
    to   { width: 46%; }
}

@keyframes bandPhotoNoteCursor {
    0%, 49% { border-right-color: rgba(205, 249, 255, 0.92); }
    50%, 100% { border-right-color: transparent; }
}

/* Members descriptions should read at the same size as the other
   main text blocks. */
.member-rich p {
    max-width: 780px;
    font-size: 18px;
    line-height: 1.56;
}

.member-rich strong {
    font-size: 18px;
}

.member-rich span {
    font-size: 13px;
}

/* Give the in-holo navigation more presence and use the free space
   above it. */
.holo-nav {
    margin-top: -8px;
}

.band-subnav,
.section-subnav {
    gap: 24px;
    margin-bottom: 11px;
    padding-bottom: 8px;
    border-bottom-color: rgba(145, 228, 255, 0.30);
}

.band-subnav button,
.band-home-link,
.section-subnav button {
    color: rgba(220, 247, 255, 0.78);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.145em;
    text-shadow:
        0 0 7px rgba(85, 210, 255, 0.22),
        0 0 15px rgba(70, 190, 245, 0.10);
}

.band-subnav button:hover,
.band-subnav button.active,
.band-home-link:hover,
.section-subnav button:hover {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(120, 232, 255, 0.92),
        0 0 20px rgba(75, 205, 255, 0.50);
}

@media (prefers-reduced-motion: reduce) {
    .band-photo-note {
        width: 46%;
        animation: none;
        border-right-color: rgba(205, 249, 255, 0.60);
    }
}

/* =========================================================
   PHOTO REFINEMENT V3 – larger/lower band + 3-column HUD note
   ========================================================= */

/* Grow from the left/bottom anchor mainly towards the upper right,
   then sink the whole group slightly farther into the lower haze. */
.band-photo-effect {
    width: 82%;
    height: 122%;
    transform: translate(4px, 58px);
}

/* Three independent holo readouts along the lower screen edge. */
.band-photo-note {
    left: 37%;
    right: auto;
    top: auto;
    bottom: 16px;

    width: 60%;
    max-width: none;
    min-width: 0;

    transform: none;
    display: grid;
    grid-template-columns: 1.35fr 1.35fr 0.72fr;
    gap: 8px;

    padding: 0;
    margin: 0;

    overflow: visible;
    white-space: normal;

    background: none;
    border: 0;
    box-shadow: none;

    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(220, 247, 255, 0.84);
    text-shadow: 0 0 7px rgba(95, 220, 255, 0.24);

    animation: none;
}

.band-photo-note::after {
    content: none;
}

.band-photo-note span {
    display: block;
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;

    padding: 8px 0 8px 10px;

    background: linear-gradient(
        90deg,
        rgba(85, 210, 248, 0.11),
        rgba(85, 210, 248, 0.025)
    );

    border-left: 1px solid rgba(150, 233, 255, 0.20);
    border-right: 2px solid rgba(205, 249, 255, 0.92);
    border-top: 1px solid rgba(145, 230, 255, 0.09);
    border-bottom: 1px solid rgba(145, 230, 255, 0.09);

    box-shadow:
        inset 0 0 14px rgba(75, 200, 245, 0.035),
        0 0 10px rgba(65, 190, 240, 0.04);
}

.band-photo-note span:nth-child(1) {
    animation:
        bandHudReveal 0.95s steps(26, end) 0.35s forwards,
        bandHudCursor 0.70s step-end 1.30s 2;
}

.band-photo-note span:nth-child(2) {
    animation:
        bandHudReveal 0.95s steps(27, end) 1.35s forwards,
        bandHudCursor 0.70s step-end 2.30s 2;
}

.band-photo-note span:nth-child(3) {
    animation:
        bandHudReveal 0.60s steps(9, end) 2.35s forwards,
        bandHudCursor 0.70s step-end 2.95s 2;
}

@keyframes bandHudReveal {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes bandHudCursor {
    0%, 49% { border-right-color: rgba(205, 249, 255, 0.92); }
    50%, 100% { border-right-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .band-photo-note span {
        width: 100%;
        animation: none !important;
        border-right-color: rgba(205, 249, 255, 0.55);
    }
}

/* =========================================================
   PHOTO HUD V4 – 3 ZEILEN RECHTS NEBEN DEM BAND-FOTO
   ========================================================= */

.band-photo-note {
    left: auto;
    right: 4.5%;
    top: 49%;
    bottom: auto;

    width: 36%;
    max-width: 390px;
    min-width: 280px;

    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 5px;

    padding: 0;
    margin: 0;

    overflow: visible;
    white-space: normal;

    background: none;
    border: 0;
    box-shadow: none;

    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.025em;
    color: rgba(220, 247, 255, 0.86);
    text-shadow: 0 0 7px rgba(95, 220, 255, 0.24);

    animation: none;
}

.band-photo-note span {
    display: block;
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;

    padding: 8px 0 8px 11px;

    background: linear-gradient(
        90deg,
        rgba(85, 210, 248, 0.11),
        rgba(85, 210, 248, 0.025)
    );

    border-left: 1px solid rgba(150, 233, 255, 0.20);
    border-right: 2px solid rgba(205, 249, 255, 0.92);
    border-top: 1px solid rgba(145, 230, 255, 0.09);
    border-bottom: 1px solid rgba(145, 230, 255, 0.09);

    box-shadow:
        inset 0 0 14px rgba(75, 200, 245, 0.035),
        0 0 10px rgba(65, 190, 240, 0.04);
}

.band-photo-note span:nth-child(1) {
    animation:
        bandHudReveal 0.95s steps(26, end) 0.35s forwards,
        bandHudCursor 0.70s step-end 1.30s 2;
}

.band-photo-note span:nth-child(2) {
    animation:
        bandHudReveal 0.95s steps(27, end) 1.35s forwards,
        bandHudCursor 0.70s step-end 2.30s 2;
}

.band-photo-note span:nth-child(3) {
    animation:
        bandHudReveal 0.55s steps(9, end) 2.35s forwards,
        bandHudCursor 0.70s step-end 2.90s 2;
}

@media (prefers-reduced-motion: reduce) {
    .band-photo-note span {
        width: 100%;
        animation: none !important;
        border-right-color: rgba(205, 249, 255, 0.55);
    }
}

/* =========================================================
   PHOTO HUD V5 – RECHTS VOM FOTO, UNTEN AM HOLO-RAND
   ========================================================= */

.band-photo-note {
    left: auto;
    right: 3.2%;
    top: auto;
    bottom: 5.5%;

    width: 31.5%;
    max-width: 345px;
    min-width: 260px;

    transform: none;
}


/* =========================================================
   FIX 01 — DESKTOP BAND PHOTO + KI NOTE
   ========================================================= */
@media (min-width: 900px) and (orientation: landscape) {

    /* Reserve a real left photo column and right text column. */
    .band-photo-stage {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    /* Reduce the photo from the recovered oversized state.
       Keep it left; allow only a slight crop at the top. */
    .band-photo-effect {
        position: absolute;
        left: 2.5%;
        bottom: 0;
        width: 56%;
        height: 91%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        transform: none;
        overflow: visible;
    }

    .band-photo {
        display: block;
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: left bottom;
    }

    /* KI block owns the right column; it cannot grow into the photo. */
    .band-photo-note {
        left: 61%;
        right: 3%;
        top: 61%;
        bottom: auto;
        max-width: none;
    }

    .band-photo-note .hud-line {
        max-width: 100%;
    }
}