/* css/responsive.css
   Cluster Responsive: Die einzigen breiten Breakpoints der Seite –
   Tablet (min-width: 700px) und Desktop (min-width: 1100px).
   Mobile-first: Die Basis-Styles sitzen in den anderen Dateien, hier
   kommen nur min-width-Queries, die einzelne Werte anpassen
   (Spalten, Anzahl Vögel/Wellen, Abstände). */

/* Kleine Displays: Ein Teil der Hintergrund-Animationen entfällt und
   die Kachelabstände schrumpfen. Die Basisraster sind bereits einspaltig;
   Player und Footer skalieren ihre Höhe mit der dynamischen Viewport-Höhe. */
@media (max-width: 699px) {
    .container {
        margin-bottom: clamp(150px, 30vh, 240px);
        /* 78 px oben, damit die gedrehte Überschrift nicht in den
           diagonalen clip-path (links 80 px) hineinragt. Unten bleibt
           der kompakte Abstand. */
        padding-block: 78px clamp(42px, 7vw, 60px);
    }

    /* Kontakt: Auf dem Smartphone wirkt der Desktop-Rhythmus von 45 px
       zu luftig. Fluid auf ca. 28–38 px verringern. */
    .lead,
    .streaming li {
        line-height: clamp(28px, 7.6vw, 38px);
    }

    .waves-layer:nth-child(n + 4) {
        display: none;
    }

    .birds-layer {
        --birds-count: 2;
    }

    .site-header {
        --header-offset: 8px;
        /* Das Logo gleitet per transform, nicht per top – wie der Rest
           der Parallax-Bewegung. */
        transition: transform 0.4s ease;
    }

    /* Player sichtbar: Er sitzt oben (8 px), das Logo darunter – 8 px
       Luft zwischen beiden. --player-height misst js/main.js; ausgeblendet
       ist der Player 0 und das Logo bleibt an seinem Platz. */
    body:has(.player.is-visible) .site-header {
        transform: translateY(calc(8px + var(--player-height, 0px) + 8px));
    }

    /* In der größten Zoom-Variante (vor dem Scrollen) nimmt das Logo
       90 % der Bildschirmbreite ein. Der Parallax-Faktor --logo-scale
       bleibt unverändert; Tablet und Desktop behalten 45 vw. */
    .site-logo {
        width: 90vw;
    }

    /* Cover und Tickets auf dem Smartphone: kleinere Karten, damit mehr
       als eine vollständige Karte in die Reihe passt (ca. 50–60 % der
       Desktop-Größe). Vinylscheibe und Auswurfwege skalieren über die
       Variablen in layout.css automatisch mit. */
    .album {
        --album-size: clamp(140px, 40vw, 190px);
    }

    .ticket {
        --ticket-width: clamp(155px, 41vw, 200px);
    }

    /* Im schmalen Ticket stehen Ort, Adresse und Datum untereinander:
       Für die alte Zweispalten-Anordnung ist neben der kleineren Karte
       kein Platz mehr. */
    .ticket__content {
        display: flex;
        flex-direction: column;
        padding: 6px;
    }

    .ticket__location {
        font-size: 18px;
        line-height: 1.1;
    }

    .ticket__date,
    .ticket__address {
        position: static;
        font-size: 12px;
        line-height: 1.3;
        text-align: left;
    }

    .ticket__address {
        order: 2;
        margin-top: auto;
    }

    .ticket__date {
        order: 3;
        margin-top: 4px;
    }

    /* Der „SOLD OUT“-Stempel gehört zur verkleinerten Karte. */
    .ticket--soldout::after {
        width: 150px;
        height: 70px;
        padding: 4px;
        border-width: 5px;
        font-size: 30px;
    }

    /* Player auf dem Smartphone: volle Bildschirmbreite, oben angedockt.
       Sobald er erscheint, rutscht das Logo darunter (Header-Regel unten),
       damit der Player nicht im Bild stört.
       Anordnung im Grid: Cover links, Titel mittig, Buttons rechts,
       Titelnummer darunter. */
    .player {
        top: 8px;
        left: 0;
        right: 0;
        width: auto;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        padding: clamp(6px, 1.5vh, 10px) 10px;
        border-inline: 0;
        border-radius: 0;
    }

    .player__artwork {
        grid-column: 1;
        grid-row: 1;
        width: 77px; /* Cover (56) + sichtbarer Plattenüberstand (21) */
        height: 56px;
        margin: 0;
    }

    .player__track {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .player__controls {
        grid-column: 3;
        grid-row: 1;
    }

    /* Titelnummer („1 / x“) sitzt unter den Buttons, rechts im Grid. */
    .player__position {
        grid-column: 3;
        grid-row: 2;
        justify-self: center;
    }

    .player__cover {
        width: 56px;
        height: 56px;
    }

    .player__record {
        top: 3px; /* 50 px Platte in 56 px Coverhöhe zentriert */
        left: 27px;
        width: 50px;
        height: 50px;
    }

    .player__controls {
        gap: 4px;
    }

    .player__button {
        width: 30px;
        height: 30px;
    }

    .player__button svg {
        width: 15px;
        height: 15px;
    }

    .player__button--prev::before,
    .player__button--prev::after,
    .player__button--next::before,
    .player__button--next::after {
        top: 8px;
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-right-width: 9px;
    }

    .player__button--prev::before { right: 15px; }
    .player__button--prev::after  { right: 7px; }
    .player__button--next::before { left: 15px; }
    .player__button--next::after  { left: 7px; }

    .player__button--play::after {
        top: 8px;
        left: 11px;
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 11px;
    }

    .player__button--pause::before,
    .player__button--pause::after {
        top: 8px;
        height: 14px;
    }

    .player__button--pause::before { left: 10px; }
    .player__button--pause::after  { right: 10px; }

    .footer {
        padding: 8px 10px;
        padding: clamp(8px, 2vh, 18px) 10px;
    }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}

/* Tablet: die horizontalen Reihen behalten ihre Kartenbreiten. Der volle
   Wellenbestand bleibt sichtbar und sechs Möwen fliegen. */
@media (min-width: 700px) {
    .ticket__date,
    .ticket__address {
        font-size: clamp(16px, 2.15vw, 20px);
        line-height: 1.1;
    }

    .birds-layer {
        --birds-count: 6;
    }
}