/* ==========================================================================
   BESCHRIFTUNG
   ==========================================================================

   Aufbau der Datei:

     1. Farben und Grundlagen
     2. Hero - die Druckmaschine
     3. Uebergang in den hellen Teil
     4. Leistungen (die fuenf Zeilen)
     5. Referenzen als Druckbogen
     6. Kunden / Marquee
     7. Handy und Tablet
     8. Reduzierte Bewegung

   Alles hier ist mit bs- vorangestellt. Dadurch kann sich nichts mit
   werbet.css oder grafic.css in die Quere kommen, auch wenn spaeter
   mal zwei Dateien auf derselben Seite landen.

   Die Lightbox kommt aus lightbox.css und ist hier absichtlich nicht
   noch einmal beschrieben - eine Aenderung dort wirkt auf alle Seiten.
   ========================================================================== */


/* ==========================================================================
   1. FARBEN UND GRUNDLAGEN
   ========================================================================== */

.bs-page {

    /* Halle: der dunkle Teil ganz oben, in dem die Maschine steht. */
    --bs-hall:        #12171e;
    --bs-hall-soft:   #1b222b;

    /* Papier: der helle Teil darunter. */
    --bs-paper:       #f4f6f9;
    --bs-paper-2:     #e9edf3;

    --bs-ink:         #16202f;
    --bs-ink-dim:     #5e6b7b;
    --bs-ink-faint:   #8b97a6;

    --bs-accent:      #1e4f9e;
    --bs-accent-lit:  #6ba4f2;

    --bs-line:        rgba(22, 32, 47, 0.14);
    --bs-line-soft:   rgba(22, 32, 47, 0.08);

    /* Eine Schriftfamilie fuer die technischen Zeilen. Absichtlich ohne
       Webfont: die Seite soll nichts nachladen muessen, was sie nicht
       ohnehin schon hat. */
    --bs-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

    position: relative;
    background: var(--bs-paper);
    color: var(--bs-ink);

    /*
     * Hier steht bewusst KEIN overflow auf dem Seitenrahmen.
     *
     * overflow-x: hidden macht aus diesem Element einen eigenen
     * Scrollbereich - und position: sticky im Hero richtet sich dann
     * nach diesem Bereich statt nach dem Fenster. Die Buehne bleibt
     * dadurch nicht mehr stehen und die ganze Druckanimation laeuft
     * einfach nach oben weg.
     *
     * Was ueberstehen koennte, wird an Ort und Stelle beschnitten:
     * die Kundenreihe in .bs-marquee-wrapper, die Maschine in
     * .bs-hero-stage.
     */
}

.bs-page *,
.bs-page *::before,
.bs-page *::after {
    box-sizing: border-box;
}

.bs-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.bs-kicker {
    display: block;
    font-family: var(--bs-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bs-accent);
    margin-bottom: 0.9rem;
}


/* ==========================================================================
   2. HERO - DIE DRUCKMASCHINE
   ==========================================================================

   Die Buehne bleibt stehen, waehrend der Scrollweg darunter ablaeuft.
   Die Hoehe dieses Wegs bestimmt, wie lange man an der Maschine bleibt.
   Alles Bewegte im Hero ist ausschliesslich transform und Maskenposition,
   nie Schatten oder Unschaerfe - sonst fangen aeltere Geraete an zu ruckeln.
*/

.bs-hero {
    position: relative;
    background: var(--bs-hall);
}

.bs-hero-track {
    height: 340vh;
    position: relative;
}

.bs-hero-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 520px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-inline: clamp(1rem, 2.6vw, 2.5rem);
    padding-block: clamp(4.5rem, 7vw, 6rem) clamp(0.9rem, 2.2vw, 1.6rem);
    overflow: hidden;
}

/* Die Maschine liegt als eigene Ebene dahinter und laeuft ueber alle
   vier Kanten hinaus. Sonst steht sie in einem Kaestchen mitten im Bild. */
.bs-hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bs-hero-scene svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Korn. Ohne das bleiben Verlaeufe Verlaeufe und werden nie Oberflaeche.
   Bewusst ohne mix-blend-mode: eine Mischung ueber das ganze Bild kostet
   pro Bild Rechenzeit und hat den Hero spuerbar ausgebremst. */
.bs-hero-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
}

/* Nach unten wird die Halle dunkler. Darauf liegt die Bildunterschrift,
   und der Uebergang in den hellen Teil faengt hier schon an. */
.bs-hero-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    z-index: 1;
    pointer-events: none;
    /* Am unteren Ende steht die Halle ganz durch. Sonst scheint die
       weisse Bahn durch und der Abschnitt darunter beginnt im Nebel. */
    background: linear-gradient(180deg,
        rgba(18, 23, 30, 0) 0%,
        rgba(18, 23, 30, 0.90) 40%,
        var(--bs-hall) 72%,
        var(--bs-hall) 100%);
}

.bs-hero-head,
.bs-hero-foot,
.bs-hero-hint {
    position: relative;
    z-index: 2;
}

.bs-hero-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    align-items: baseline;
    font-family: var(--bs-mono);
    font-size: 0.69rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-ink-faint);
}
.bs-hero-head b {
    color: var(--bs-accent-lit);
    font-weight: 500;
}

.bs-hero-foot {
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.7rem 1.8rem;
}

.bs-hero-sub {
    margin: 0;
    max-width: 44ch;
    line-height: 1.6;
    color: var(--bs-ink-faint);
    font-size: clamp(0.92rem, 1.4vw, 1.08rem);
    text-wrap: pretty;
}
.bs-hero-sub strong {
    color: #e8edf4;
    font-weight: 600;
}

.bs-hero-read {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.2rem;
    justify-content: flex-end;
    text-align: right;
    font-family: var(--bs-mono);
    font-size: 0.69rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bs-ink-faint);
}
.bs-hero-read b {
    color: var(--bs-accent-lit);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.bs-hero-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(0.5rem, 1.4vw, 1.1rem);
    transform: translateX(-50%);
    font-family: var(--bs-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bs-ink-faint);
    transition: opacity 0.4s ease;
    pointer-events: none;
}


/* ==========================================================================
   3. UEBERGANG IN DEN HELLEN TEIL
   ==========================================================================

   Bewusst kurz gehalten. Ein langer Verlauf zwischen zwei Abschnitten
   sieht nach Nebel aus, nicht nach Uebergang.
*/

.bs-services {
    position: relative;
    background: var(--bs-paper);
    padding-block: clamp(4.5rem, 9vw, 8.5rem) clamp(4rem, 8vw, 7rem);
}

.bs-services::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
    pointer-events: none;
    background: linear-gradient(180deg, var(--bs-hall) 0%, var(--bs-paper) 100%);
}

/* Feines Papierkorn ueber dem hellen Teil. */
.bs-services::after,
.bs-references::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

.bs-services > .bs-container,
.bs-references > .bs-container {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   4. LEISTUNGEN
   ========================================================================== */

.bs-section-head {
    /* Bewusst in rem und nicht in ch: ch bezieht sich auf die
       Schriftgroesse DIESES Elements, nicht auf die der Ueberschrift
       darin - die Spalte waere sonst nicht halb so breit wie gedacht. */
    max-width: min(100%, 46rem);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.bs-section-head h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.16;
    color: var(--bs-ink);
    text-wrap: balance;
    max-width: 20ch;
}

.bs-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: center;
    padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
    border-top: 1px solid var(--bs-line-soft);
}
.bs-row:first-of-type {
    border-top: 0;
}

/* Jede zweite Zeile andersherum. Ueber die Reihenfolge im Grid, nicht
   ueber direction - sonst dreht sich auch die Leserichtung im Text. */
.bs-row--flip .bs-row-media { order: 2; }
.bs-row--flip .bs-row-text  { order: 1; }

.bs-row-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--bs-paper-2) 0%, #dbe2ea 55%, #cfd8e3 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 38px -26px rgba(15, 29, 54, 0.45);
}
.bs-row-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Die Nummer liegt hinter dem Bild. Fehlt das Bild, bleibt sie als
   Platzhalter stehen - dann klafft dort kein Loch. */
.bs-row-nr {
    position: absolute;
    right: 0.4em;
    bottom: -0.22em;
    font-size: clamp(5rem, 13vw, 9.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(30, 79, 158, 0.13);
    pointer-events: none;
    user-select: none;
}

.bs-row-label {
    display: block;
    font-family: var(--bs-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bs-accent);
    margin-bottom: 0.85rem;
}

.bs-row-text h3 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.35rem, 2.7vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--bs-ink);
    text-wrap: balance;
}

.bs-row-text p {
    margin: 0 0 1.6rem;
    max-width: 50ch;
    line-height: 1.75;
    color: var(--bs-ink-dim);
    font-size: clamp(0.95rem, 1.2vw, 1.04rem);
}

/* Zwei kurze Eckdaten je Zeile. Als Beschreibungsliste, weil es
   genau das ist: Begriff und Wert. */
.bs-chips {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.bs-chips > div {
    border: 1px solid var(--bs-line);
    border-radius: 2px;
    padding: 0.55rem 0.85rem 0.6rem;
    background: rgba(255, 255, 255, 0.72);
}
.bs-chips dt {
    font-family: var(--bs-mono);
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bs-ink-faint);
    margin-bottom: 0.2rem;
}
.bs-chips dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bs-ink);
}


/* ==========================================================================
   5. REFERENZEN ALS DRUCKBOGEN
   ==========================================================================

   Andere Handschrift als auf der Werbetechnik- und der Grafikseite:
   dort Karten in gleichen Groessen, hier ein Bogen mit Schnittmarken,
   Kontrollkeil und ungleichen Formaten nebeneinander - so, wie mehrere
   Auftraege gemeinsam auf eine Bahn gedruckt werden.
*/

.bs-references {
    position: relative;
    background: linear-gradient(180deg, var(--bs-paper) 0%, var(--bs-paper-2) 100%);
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.bs-ref-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem 3rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.bs-ref-head h2 {
    margin: 0;
    font-size: clamp(1.6rem, 3.3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.18;
    color: var(--bs-ink);
    text-wrap: balance;
}
.bs-ref-head p {
    margin: 0;
    max-width: 34ch;
    line-height: 1.7;
    color: var(--bs-ink-dim);
    font-size: 0.96rem;
}

/* Der Bogen selbst */
.bs-sheet {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--bs-line-soft);
    padding: clamp(1.5rem, 3.2vw, 2.75rem);
    padding-left: clamp(2.6rem, 4.6vw, 4.25rem);   /* Platz fuer den Keil */
    box-shadow: 0 30px 60px -44px rgba(15, 29, 54, 0.5);
}

/* Schnittmarken an den Ecken. Zwei Striche je Ecke, gebaut aus dem
   Element und seinem ::before - deshalb braucht es keine Grafik. */
.bs-sheet-mark {
    position: absolute;
    width: 22px;
    height: 1px;
    background: var(--bs-ink-faint);
    opacity: 0.55;
}
.bs-sheet-mark::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 22px;
    background: var(--bs-ink-faint);
}
.bs-sheet-mark--tl { top: -11px;    left: -11px; }
.bs-sheet-mark--tr { top: -11px;    right: -11px; }
.bs-sheet-mark--tr::before { left: auto; right: 0; }
.bs-sheet-mark--bl { bottom: -11px; left: -11px; }
.bs-sheet-mark--bl::before { top: auto; bottom: 0; }
.bs-sheet-mark--br { bottom: -11px; right: -11px; }
.bs-sheet-mark--br::before { top: auto; bottom: 0; left: auto; right: 0; }

/* Kontrollkeil am linken Rand des Bogens */
.bs-sheet-bar {
    position: absolute;
    left: clamp(0.9rem, 1.7vw, 1.5rem);
    top: clamp(1.5rem, 3.2vw, 2.75rem);
    bottom: clamp(1.5rem, 3.2vw, 2.75rem);
    width: 10px;
    display: grid;
    grid-auto-rows: 1fr;
    gap: 3px;
}
.bs-sheet-bar i {
    display: block;
    background: var(--c);
    opacity: 0.85;
}

/* Ungleiche Formate nebeneinander, wie beim Ausschiessen mehrerer
   Auftraege auf eine Bahn. Zwoelf Spalten, damit sich 7/5 und 5/7
   sauber aufteilen lassen.

   align-items: stretch ist hier wichtig: beide Kacheln einer Reihe
   sind dadurch gleich hoch, und der Unterschied kommt allein aus der
   Breite. Sonst steht unter der schmaleren ein Loch. */
.bs-ref-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.75rem);
    align-items: stretch;
}
.bs-ref-grid > *:nth-child(4n + 1) { grid-column: span 7; }
.bs-ref-grid > *:nth-child(4n + 2) { grid-column: span 5; }
.bs-ref-grid > *:nth-child(4n + 3) { grid-column: span 5; }
.bs-ref-grid > *:nth-child(4n + 4) { grid-column: span 7; }

.bs-ref-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bs-ref-item:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 5px;
}

/* Schnittmarken auch an jeder Kachel - jede ist ein eigener Job. */
.bs-ref-mark {
    position: absolute;
    width: 12px;
    height: 1px;
    background: var(--bs-ink-faint);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
}
.bs-ref-mark::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 12px;
    background: var(--bs-ink-faint);
}
.bs-ref-mark--tl { top: -6px;    left: -6px; }
.bs-ref-mark--tr { top: -6px;    right: -6px; }
.bs-ref-mark--tr::before { left: auto; right: 0; }
.bs-ref-mark--bl { bottom: -6px; left: -6px; }
.bs-ref-mark--bl::before { top: auto; bottom: 0; }
.bs-ref-mark--br { bottom: -6px; right: -6px; }
.bs-ref-mark--br::before { top: auto; bottom: 0; left: auto; right: 0; }

.bs-ref-item:hover .bs-ref-mark,
.bs-ref-item:focus-visible .bs-ref-mark {
    opacity: 0.75;
}

.bs-ref-img {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: clamp(220px, 27vw, 400px);
    overflow: hidden;
    background: var(--bs-paper-2);
}

.bs-ref-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* ganzes Bild sichtbar, wird in die Vorschau eingepasst */
    display: block;
    transform: scale(1.01);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.bs-ref-item:hover .bs-ref-img img {
    transform: scale(1.045);
}

.bs-ref-hint {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: inline-block;
    padding: 0.42rem 0.72rem;
    background: rgba(18, 23, 30, 0.82);
    color: #eef3fa;
    font-family: var(--bs-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.bs-ref-item:hover .bs-ref-hint,
.bs-ref-item:focus-visible .bs-ref-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Jobzeile unter der Kachel, wie auf einem Laufzettel */
.bs-ref-info {
    display: block;
    flex: 0 0 auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-line);
    margin-top: 0.75rem;
}
.bs-ref-job {
    display: block;
    font-family: var(--bs-mono);
    font-size: 0.63rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bs-ink-faint);
    margin-bottom: 0.3rem;
}
.bs-ref-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bs-ink);
    line-height: 1.3;
}

/* Hinweis, solange $BS_DEBUG an ist */
.bs-ref-missing {
    grid-column: span 12;
    display: grid;
    gap: 0.4rem;
    padding: 1.25rem 1.4rem;
    border: 1px dashed rgba(196, 72, 72, 0.55);
    background: rgba(196, 72, 72, 0.06);
    color: #8a2f2f;
    font-size: 0.9rem;
    text-align: left;
}
.bs-ref-missing strong { font-size: 0.98rem; }
.bs-ref-missing code {
    font-family: var(--bs-mono);
    font-size: 0.8rem;
    color: var(--bs-ink);
    background: rgba(22, 32, 47, 0.06);
    padding: 0.3rem 0.5rem;
    justify-self: start;
    overflow-wrap: anywhere;
}
.bs-ref-missing-note {
    font-size: 0.78rem;
    color: var(--bs-ink-dim);
}


/* ==========================================================================
   6. KUNDEN / MARQUEE
   ==========================================================================

   Die Schleife wird im Script so weit geklont, bis sie zweimal ueber die
   Fensterbreite reicht, und dann exakt um eine Reihenbreite zurueckgesetzt.
   Dadurch gibt es keinen Sprung, egal wie breit das Fenster ist.
*/

.bs-clients {
    position: relative;
    z-index: 1;
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--bs-line-soft);
}

.bs-clients-head h3 {
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--bs-ink);
}

.bs-marquee-wrapper {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.bs-marquee-track {
    display: flex;
    align-items: center;
    gap: clamp(2.25rem, 5vw, 4.5rem);
    width: max-content;
    will-change: transform;
}

.bs-client-logo-box {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: clamp(44px, 6vw, 66px);
}
.bs-client-logo-box img {
    max-height: 100%;
    width: auto;
    max-width: clamp(110px, 15vw, 190px);
    object-fit: contain;
    /* Logos kommen in allen Farben. Entsaettigt halten sie die Reihe
       ruhig, beim Darueberfahren zeigen sie ihre eigene Farbe. */
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.bs-client-logo-box:hover img {
    filter: grayscale(0);
    opacity: 1;
}


/* ==========================================================================
   7. EINBLENDEN BEIM SCROLLEN
   ==========================================================================

   Bewusst zurueckhaltend: nur ein kurzer Weg nach oben. Alles andere
   lenkt von dem ab, was oben im Hero passiert.
*/

.bs-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bs-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Kommt das Script nicht durch, ist trotzdem alles zu sehen. */
.bs-page.no-js .bs-reveal {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   8. HANDY UND TABLET
   ========================================================================== */

@media (max-width: 960px) {

    .bs-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    /* Auf schmalen Schirmen steht das Bild immer oben, auch in den
       gedrehten Zeilen. */
    .bs-row--flip .bs-row-media { order: 0; }
    .bs-row--flip .bs-row-text  { order: 0; }

    .bs-ref-grid > *:nth-child(n) { grid-column: span 6; }
    .bs-ref-img { min-height: clamp(200px, 32vw, 300px); }
}

@media (max-width: 760px) {

    .bs-hero-stage {
        /* Reichlich Luft oben, damit die Navigation nicht auf der
           technischen Zeile liegt - auch wenn sie zweizeilig umbricht. */
        padding-block: clamp(5.5rem, 21vw, 7.5rem) 1rem;
    }
    .bs-hero-head {
        gap: 0.2rem 1rem;
        font-size: 0.64rem;
    }
    .bs-hero-read {
        justify-content: flex-start;
        text-align: left;
        font-size: 0.64rem;
    }
    .bs-hero-hint { display: none; }

    .bs-section-head { max-width: none; }

    .bs-sheet {
        padding: 1.1rem;
        padding-left: 2.2rem;
    }
    .bs-sheet-bar { width: 7px; left: 0.7rem; top: 1.1rem; bottom: 1.1rem; }

    .bs-ref-grid > *:nth-child(n) { grid-column: span 12; }

    .bs-ref-hint {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   9. REDUZIERTE BEWEGUNG
   ==========================================================================

   Wer das im System eingestellt hat, bekommt dieselbe Seite ohne
   Scrollstrecke: die Maschine steht dann still im fertigen Zustand.
*/

@media (prefers-reduced-motion: reduce) {

    .bs-hero-track { height: auto; }
    .bs-hero-stage {
        position: relative;
        height: auto;
        min-height: 620px;
    }
    .bs-hero-hint { display: none; }

    .bs-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .bs-ref-img img,
    .bs-ref-hint { transition: none; }
}