/* ============================================================
   GÄRTNEREI HOHN — DAS BLÄTTERBUCH
   Die Imagebroschüre, 36 Seiten, zum Durchblättern.
   ------------------------------------------------------------
   AUFBAU

   .bb__buch ist die Doppelseite: zwei Seiten breit, eine hoch.
   Darin liegen 18 Blätter, jedes halb so breit wie das Buch,
   alle auf der RECHTEN Hälfte gestapelt.

   Ein Blatt dreht sich um seine linke Kante (transform-origin:
   left center) um -180 Grad — und liegt dann auf der linken
   Hälfte. Genau wie eine echte Seite.

       zu:      [        ] [ Titel  ]
       1x um:   [ Seite 2] [ Seite 3]
       ganz um: [Seite 36] [        ]

   Damit man beim Drehen die Rückseite sieht und nicht durch das
   Blatt hindurch, steht die Rückseite selbst um 180 Grad gedreht
   und beide Flächen sind rückseitig unsichtbar (backface-visibility).
   ============================================================ */

.blaetterbuch {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------------
   DIE BÜHNE — hier lebt die Perspektive
   ------------------------------------------------------------
   Ohne `perspective` gäbe es keine Tiefe: Das Blatt würde beim
   Drehen einfach schmaler und wieder breiter, wie ein Blatt
   Papier von der Seite — flach, tot. Die Perspektive macht die
   Wölbung.
   ------------------------------------------------------------ */
.bb__buehne {
  perspective: 2600px;
  perspective-origin: center 45%;
  display: flex;
  justify-content: center;
}

.bb__buch {
  position: relative;
  /* Zwei quadratische Seiten nebeneinander = 2:1.
     Die Breite folgt dem Platz, aber nie über 1080 px — darüber
     wird eine 210-mm-Seite größer als das Original. */
  inline-size: min(100%, 1080px);
  aspect-ratio: 2 / 1;
  transform-style: preserve-3d;
}

/* Der Buchrücken. Ohne ihn schaut man beim Umschlagen für einen
   Moment ins Nichts — das Buch wirkt hohl. */
.bb__ruecken {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.10) 12%,
      rgba(0,0,0,0)   26%,
      rgba(0,0,0,0)   74%,
      rgba(0,0,0,.10) 88%,
      rgba(0,0,0,.30) 100%),
    #2B3A34;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------
   EIN BLATT
   ------------------------------------------------------------ */
.bb__blatt {
  position: absolute;
  inset-block: 0;
  /* Alle Blätter liegen RECHTS und drehen nach links. */
  inset-inline-start: 50%;
  inline-size: 50%;

  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.28, .78, .30, 1);
  will-change: transform;
}

/* Umgeschlagen. Nicht exakt 180° — bei genau 180 flackern manche
   Browser, weil Vorder- und Rückseite deckungsgleich liegen. */
.bb__blatt.um { transform: rotateY(-179.9deg); }

.bb__flaeche {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;      /* sonst sieht man die Rückseite durchscheinen */
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #fff;
}
.bb__vorn   { transform: rotateY(0deg);   }
.bb__hinten { transform: rotateY(180deg); }

.bb__flaeche img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;                /* Die Seiten sind quadratisch,
                                       die Fläche auch — kein Beschnitt. */
  display: block;
}

/* Der Bund wirft einen Schatten auf die Seite — das ist es, was
   ein Bild wie Papier aussehen lässt und nicht wie ein Bildschirm.
   Vorderseiten sind rechte Seiten (Schatten links), Rückseiten
   sind linke Seiten (Schatten rechts). */
.bb__vorn::after,
.bb__hinten::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 12%;
  pointer-events: none;
}
.bb__vorn::after {
  inset-inline-start: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
.bb__hinten::after {
  inset-inline-end: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}

/* ⛔ HIER STAND `.bb__nr` — EINE ZWEITE SEITENZAHL.
   Ich habe in jede Ecke eine Zahl gesetzt und dabei übersehen, dass
   die Broschüre ihre Seitenzahlen GEDRUCKT trägt. Auf Seite 2 stand
   dann zweimal die 2; auf dem Umschlag eine 1, die es im Heft nicht
   gibt. Was schon auf dem Papier steht, wird nicht darübergelegt.

   Die Seitenzahl bekommt jetzt nur noch, wer sie braucht: als
   gesprochene Ansage in der Bedienleiste (role="status"). */

/* ------------------------------------------------------------
   DIE BEDIENLEISTE
   ------------------------------------------------------------ */
.bb__leiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.bb__pfeil {
  inline-size: 3rem;                /* 48 px — bequem für einen Finger */
  block-size: 3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);   /* 3,16:1 auf Nachtgrün — reicht für Bedienelemente */
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.bb__pfeil:hover:not(:disabled) {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.75);
}
.bb__pfeil:focus-visible {
  outline: 2px solid var(--hohn-erde-licht);
  outline-offset: 3px;
}
.bb__pfeil:disabled { opacity: .28; cursor: default; }

.bb__mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  min-inline-size: 14rem;
}

.bb__stand {
  margin: 0;
  font-size: var(--fs-klein);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: rgba(255,255,255,.86);     /* ergibt #DFE1E0 — gerechnet: 11,85:1 auf Nachtgrün */
  text-align: center;
}

.bb__sprung {
  font: inherit;
  font-size: var(--fs-klein);
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  padding: .45rem 2rem .45rem .7rem;
  max-inline-size: 15rem;
  cursor: pointer;

  /* Der eigene Pfeil des Browsers ist auf dunklem Grund oft
     unsichtbar. Also ein eigener. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position: right 1rem center, right .65rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.bb__sprung:focus-visible {
  outline: 2px solid var(--hohn-erde-licht);
  outline-offset: 2px;
}
/* Die Einträge der Liste zeichnet das Betriebssystem, nicht wir —
   dort gilt das dunkle Layout nicht. Also dunkle Schrift auf Weiß. */
.bb__sprung option { color: #1C221F; background: #fff; }

/* ------------------------------------------------------------
   DER HINWEIS
   ------------------------------------------------------------ */
.bb__hinweis {
  margin: 1.5rem auto 0;
  max-inline-size: 46rem;
  text-align: center;
  font-size: var(--fs-klein);
  line-height: 1.6;
  color: rgba(255,255,255,.72);     /* ergibt #B9BCBB — gerechnet: 8,25:1 auf Nachtgrün */
}
.bb__hinweis a {
  color: var(--hohn-erde-licht);    /* #F2C0B0 auf #1C2621 — gerechnet: 9,60:1 */
  text-decoration: underline;
  text-underline-offset: .2em;
}
.bb__groesse {
  display: block;
  margin-top: .2rem;
  font-size: var(--fs-mikro);
  color: rgba(255,255,255,.55);
}

/* ============================================================
   AUF DEM HANDY: EINE SEITE, KEIN 3D
   ------------------------------------------------------------
   Eine Doppelseite auf 360 px Breite wären zwei Seiten à 170 px.
   Darauf ist nichts zu erkennen. Also: eine Seite, bildschirmbreit.

   Und ohne 3D. Ein Umschlag, dessen eine Hälfte außerhalb des
   Bildschirms liegt, sieht kaputt aus, nicht elegant. Hier gleitet
   die Seite — das ist ehrlicher als ein halbes Kunststück.
   ============================================================ */
@media (max-width: 760px) {
  .bb__buehne { perspective: none; }

  .bb__buch {
    inline-size: min(100%, 30rem);
    aspect-ratio: 1 / 1;            /* EINE quadratische Seite */
    transform-style: flat;
  }

  .bb__ruecken { display: none; }

  .bb__blatt {
    inset-inline-start: 0;
    inline-size: 100%;
    transform: none !important;     /* kein 3D mehr — das JS steuert
                                       jetzt über .zeigt-vorn / .zeigt-hinten */
    transform-style: flat;
    transition: none;
    /* Standardmäßig unsichtbar. Sichtbar wird immer nur EINE Fläche. */
    pointer-events: none;
    z-index: 0 !important;
  }

  .bb__flaeche {
    transform: none !important;
    backface-visibility: visible;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
  }
  /* Die eine sichtbare Seite */
  .bb__blatt.zeigt-vorn   .bb__vorn,
  .bb__blatt.zeigt-hinten .bb__hinten {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }
  .bb__blatt.zeigt-vorn, .bb__blatt.zeigt-hinten { z-index: 2 !important; }

  /* Kein Bundschatten auf einer einzelnen Seite */
  .bb__vorn::after, .bb__hinten::after { display: none; }

  .bb__leiste { gap: .75rem; }
  .bb__mitte  { min-inline-size: 0; }
  .bb__sprung { max-inline-size: 11rem; }
}

/* ============================================================
   BEWEGUNG ABGESTELLT
   ------------------------------------------------------------
   Kein Umschlagen mehr. Die Seite wechselt sofort. Der Inhalt
   ist derselbe — nur die Drehung fällt weg. Für Menschen mit
   vestibulären Störungen ist eine Drehung im Raum kein Effekt,
   sondern Übelkeit.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bb__blatt   { transition: none; }
  .bb__flaeche { transition: none; }
}
.no-motion .bb__blatt   { transition: none; }
.no-motion .bb__flaeche { transition: none; }

/* ============================================================
   OHNE JAVASCRIPT
   ------------------------------------------------------------
   Dann liegt das Buch einfach zu und zeigt den Titel. Die
   Bedienleiste verschwindet — Knöpfe, die nichts tun, sind
   schlimmer als keine Knöpfe. Der Download-Knopf bleibt.
   ============================================================ */
.kein-js .bb__leiste { display: none; }