/*
 * editorial.css — Redaktionelles Bild- und Lesesystem für bispos.app
 *
 * Warum eine eigene Datei:
 *  - vendor.min.css (Bootstrap) wird per PurgeCSS eingeschmolzen; .figure-img und
 *    .figure-caption sind dabei herausgefallen, weshalb Bildunterschriften live wie
 *    normaler Fließtext aussahen. Regeln hier sind purge-fest.
 *  - main.css liegt nur auf einem Teil der Seiten — dieses Blatt wird überall dort
 *    eingebunden, wo redaktionelle Bilder stehen.
 *
 * Konvention: alle Klassen tragen das Präfix bp- (BISpicy). Bildunterschriften und
 * Bildstrecken sind bewusst am Zeitungslayout orientiert: Bild belegt, Unterschrift
 * erklärt, beides bleibt vom Fließtext unterscheidbar.
 */

:root {
    --bp-accent: #3c85ac;          /* CI-Anker Teal */
    --bp-ink: #001220;
    --bp-muted: #56626d;
    --bp-line: #e3e8ec;
    --bp-surface: #f6f8fa;
}

/* ---------------------------------------------------------------- Bildblock */

.bp-figure {
    margin: 2.25rem 0;
}

.bp-figure > img,
.bp-figure picture > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 6px 26px rgba(0, 18, 32, .10);
}

/* Bildunterschrift: kleiner, gedeckt, mit Teal-Kante — der meistgelesene Text
   nach der Überschrift, deshalb klar vom Fließtext abgesetzt. */
.bp-figure__caption,
figcaption.figure-caption {
    margin-top: .7rem;
    padding-left: .85rem;
    border-left: 3px solid var(--bp-accent);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--bp-muted);
    text-align: left;
}

.bp-figure__caption strong,
figcaption.figure-caption strong {
    color: var(--bp-ink);
    font-weight: 600;
}

/* Herkunftszeile (z. B. „Screenshot: BISpicy POS 1.2.51") */
.bp-figure__credit {
    display: block;
    margin-top: .2rem;
    font-size: .75rem;
    color: #8a949d;
}

/* Bootstrap-Ersatz: fällt sonst dem CSS-Purge zum Opfer */
.figure-img {
    margin-bottom: 0;
    line-height: 1;
}

/* 🚨 Ein width-Attribut am <img> zusammen mit einer Hoehenbegrenzung per CSS
   staucht das Bild: die Hoehe wird gekappt, die Breite bleibt beim Attributwert.
   Der TSE-Bon (438x1385) erschien dadurch als 438x440 - platt gedrueckt.
   Seit die Pixelmasse ueberall nachgetragen sind, kann das auf jeder Seite
   auftreten. Deshalb: wo eine Kante begrenzt ist, folgt die andere. */
img[style*="max-height"],
img[style*="max-width"] {
    width: auto;
    height: auto;
}

/* ------------------------------------------------------- Screenshot-Rahmen */

/* Produkt-Screenshots werden gerahmt statt beschnitten: object-fit:cover würde
   Bedienelemente abschneiden und damit den Belegcharakter zerstören. */
.bp-shot {
    padding: .5rem;
    background: linear-gradient(160deg, #eef2f5 0%, #e2e8ed 100%);
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
}

.bp-shot > img {
    border-radius: .6rem;
    box-shadow: 0 2px 10px rgba(0, 18, 32, .12);
}

/* Hochformate begrenzen: Ein Bon-Ausdruck ist 363x1441 px und fuellt sonst
   anderthalb Bildschirmseiten. width:auto haelt das Seitenverhaeltnis, ohne zu
   beschneiden - Zuschnitt wuerde gerade den unteren Teil des Bons mit Signatur
   und QR-Code wegschneiden. Gilt bewusst NUR fuer Hochformate: ein Deckel fuer
   alle wuerde die 74 querformatigen Screenshots ohne Not verkleinern (auf einem
   flachen Fenster teils auf zwei Drittel der Spaltenbreite). */
/* Zwei Selektoren, weil .bp-figure__grid img { width:100% } dieselbe Spezifitaet
   hat und weiter unten steht: In einer Bildstrecke gewann sonst die Breite gegen
   den Hoehendeckel, und der Bon wurde erneut gestaucht (im Browser gemessen:
   532x612 statt 194x612). */
.bp-shot--portrait > img,
.bp-figure__grid .bp-shot--portrait > img {
    display: block;
    max-height: 68vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* ------------------------------------------------------------ Bildstrecken */

/* Zwei bis drei Aufnahmen eines Ablaufs nebeneinander, mit gemeinsamer
   Unterschrift — auf dem Handy stapeln sie automatisch. */
/* Mindestbreite 320px: darunter ist auf einem UI-Screenshot nichts mehr zu
   erkennen. Eine Viererreihe aus 1920er Aufnahmen landete im Test bei 294 px
   Anzeigebreite - lesbar war da nichts mehr. */
.bp-figure__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.bp-figure__grid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 6px 26px rgba(0, 18, 32, .10);
}

.bp-figure__grid .bp-shot > img {
    box-shadow: 0 2px 10px rgba(0, 18, 32, .12);
}

/* Einzelne Zelle einer Bildstrecke mit eigener kurzer Unterschrift */
.bp-figure__grid figure {
    margin: 0;
}

.bp-figure__grid .bp-figure__caption {
    margin-top: .5rem;
    padding-left: .6rem;
    border-left-width: 2px;
    font-size: .8125rem;
}

/* Vier Aufnahmen als 2x2-Feld statt als Reihe: vier Spalten nebeneinander
   ergaeben je ~290 px - zu wenig fuer eine Bedienoberflaeche. Vier Spalten
   erst, wenn wirklich Platz ist. */
/* minmax(0,1fr) statt 1fr: verhindert, dass ein breites Bild die Spalte
   aufzieht und das Raster ueber den Container hinauswaechst. */
.bp-figure__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1800px) {
    .bp-figure__grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575.98px) {
    .bp-figure__grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Nummerierte Schrittbilder */
.bp-step {
    position: relative;
}

.bp-step__no {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bp-accent);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 18, 32, .25);
}

/* ------------------------------------------------------ Bild neben dem Text */

@media (min-width: 992px) {
    .bp-figure--side {
        float: right;
        width: 42%;
        margin: .35rem 0 1.25rem 1.75rem;
    }

    .bp-figure--side-left {
        float: left;
        margin: .35rem 1.75rem 1.25rem 0;
    }
}

/* Randabfallendes Aufmacherbild innerhalb einer Textspalte */
.bp-figure--wide > img {
    border-radius: 1rem;
}

/* ------------------------------------------------------------- Pull-Quote */

.bp-pullquote {
    margin: 2rem 0;
    padding: 1rem 0 1rem 1.5rem;
    border-left: 4px solid var(--bp-accent);
    font-size: 1.3rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--bp-ink);
}

.bp-pullquote cite {
    display: block;
    margin-top: .6rem;
    font-size: .875rem;
    font-style: normal;
    font-weight: 400;
    color: var(--bp-muted);
}

/* ------------------------------------------------------- Erklärgrafik-Box */

.bp-explainer {
    margin: 2.25rem 0;
    padding: 1.25rem;
    background: var(--bp-surface);
    border: 1px solid var(--bp-line);
    border-radius: 1rem;
}

/* Volle Spaltenbreite: Wird die Grafik kleiner gerendert, schrumpft die
   Beschriftung mit - bei 760 px Deckel lag sie im Test bei 8 px. */
.bp-explainer > img,
.bp-explainer > svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Sehr schmale Schirme: waagerechte Ketten bleiben nur scrollbar lesbar */
@media (max-width: 575.98px) {
    .bp-explainer {
        padding: .75rem;
        overflow-x: auto;
    }

    .bp-explainer > img,
    .bp-explainer > svg {
        min-width: 620px;
    }

    .bp-explainer .bp-figure__caption {
        position: sticky;
        left: 0;
    }
}

/* ---------------------------------------------------------------- Lightbox */

[data-zoom] {
    cursor: zoom-in;
}

.bp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 18, 32, .88);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity .18s ease;
}

.bp-lightbox.is-open {
    opacity: 1;
}

.bp-lightbox img {
    max-width: 100%;
    max-height: 88vh;
    border-radius: .5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.bp-lightbox__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    padding: 0 1.5rem;
    color: rgba(255, 255, 255, .88);
    font-size: .875rem;
    text-align: center;
}

.bp-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.bp-lightbox__close:hover {
    background: rgba(255, 255, 255, .3);
}

@media (prefers-reduced-motion: reduce) {
    .bp-lightbox {
        transition: none;
    }
}

/* ------------------------------------------------ Sprungnavigation (lange Listen) */

/* Fuer Seiten, die aus sehr vielen gleichartigen Eintraegen bestehen
   (Versionsverlauf: 119 Karten). Bleibt beim Scrollen am oberen Rand stehen. */
/* Die Kopfleiste (.bp-header) liegt fest bei 64 px Hoehe und z-index 1050 -
   eine bei top:0 klebende Leiste verschwindet dahinter. Im Test war die
   Sprungleiste dadurch unsichtbar, obwohl sie funktionierte. */
.bp-jumpnav {
    position: sticky;
    top: var(--bp-header-h, 64px);
    z-index: 20;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bp-line);
    padding: .6rem 0;
}

.bp-jumpnav__inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.bp-jumpnav__title {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bp-accent);
}

.bp-jumpnav__scroll {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.bp-jumpnav__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--bp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bp-ink);
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.bp-jumpnav__item:hover,
.bp-jumpnav__item:focus {
    border-color: var(--bp-accent);
    color: var(--bp-accent);
}

.bp-jumpnav__count {
    font-size: .6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--bp-accent);
    border-radius: 999px;
    padding: .05rem .4rem;
}

/* Anker weder unter der Kopfleiste noch unter der Sprungleiste verschwinden
   lassen: 64 px Kopf + 55 px Leiste + Luft. */
.version-card {
    scroll-margin-top: 136px;
}

/* ------------------------------------------------------------ Bild-Aufmacher */

/* Aufmacherbild direkt unter dem Hero: volle Breite, ohne Layout-Sprung. */
.bp-lead {
    margin: 0 0 2rem;
}

.bp-lead > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 18, 32, .16);
}

@media (max-width: 575.98px) {
    .bp-figure {
        margin: 1.75rem 0;
    }

    .bp-pullquote {
        font-size: 1.15rem;
    }
}