/* KIDZ.ME — Vom Bild zum Buch (bild-zum-buch-bauen.py, bild-zum-buch.js).
   USER 16-10: „display them as printed photographs on a table. Do this per child and then put all 8 portfolios in a slider.“
   → USER 16-10: „Swap out the table for a bulletin board and pin the images to it“. Je Kind eine Pinnwand (Kork, QI-Foto
   tisch.webp) mit vier angepinnten Abzügen: weißer Rand, Handschrift, eine Reißzwecke oben; dazu eine angepinnte Notizkarte.
   Die acht Pinnwände liegen in einer Wischreihe mit Pfeilen und Punkten. */
.b2b { padding-bottom: 2rem; }
.wrap-breit { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }

/* ---------- Einstieg ---------- */
.b2b-held { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end;
            padding: clamp(1.4rem, 3.5vh, 2.4rem) 0 0; }
/* das Mädchen steht auf der Grundlinie des Textes über der Pinnwand (USER 16-10) */
.b2b-held-text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: 1.6rem 0 .45rem; }
.b2b-held-text p { margin: 0 0 .5rem; }
.b2b-held-text .b2b-hinweis { margin-bottom: 0; }
.b2b-held-bild .maskottchen { justify-content: center; align-items: flex-end; }
.b2b-held-bild img { display: block; max-height: 390px; width: auto; }   /* etwa so hoch wie der Text daneben: kein Leerraum über dem Titel */
.b2b-held h1 { font-family: var(--display); font-weight: 400; margin: .3rem 0 .9rem; line-height: 1.1; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.b2b-held .lead { color: var(--ink-soft); font-size: 1.08rem; max-width: 40rem; margin-bottom: 0; }
.b2b-schritte { list-style: none; counter-reset: s; padding: 0; margin: 1.3rem 0 1.4rem; display: grid; gap: .55rem; max-width: 34rem; }
.b2b-schritte li { counter-increment: s; display: grid; grid-template-columns: 2.1rem 1fr; column-gap: .7rem; align-items: baseline; }
.b2b-schritte li::before { content: counter(s); grid-row: 1 / 3; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
                            border-radius: 50%; background: var(--flieder-hauch, #efeaf8); color: var(--cta, #6b4fa8); font-weight: 700; }
.b2b-schritte strong { font-weight: 650; }
.b2b-schritte span { color: var(--ink-faint); font-size: .92rem; }
.b2b-held-bild .maskottchen { justify-content: center; }

/* ---------- Galerie: Kopf ---------- */
.b2b-galerie { margin-top: 1.2rem; }
.b2b-galerie-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: end; }
.b2b-galerie-kopf h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 0 0 .5rem; }
.b2b-galerie-kopf p { color: var(--ink-soft); max-width: 44rem; margin: 0 0 .5rem; }
.b2b-galerie-kopf .maskottchen img { max-height: 210px; width: auto; }
.b2b-hinweis { font-size: .88rem; color: var(--ink-faint) !important; border-left: 3px solid var(--line-strong); padding-left: .8rem; }

/* ---------- Der Slider ---------- */
.b2b-slider { position: relative; width: min(1180px, calc(100% - 2.5rem)); margin: 1rem auto 0; }
.b2b-spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
            border-radius: 14px; outline-offset: 4px; }
.b2b-spur::-webkit-scrollbar { display: none; }
.b2b-tisch {
  flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px;
  background: #b98b55 var(--tisch) center / cover no-repeat;
}

/* Abzüge: weißer Rand, Platz für die Handschrift, leicht gedreht */
.abzug { position: absolute; margin: 0; background: #fbfaf7; padding: .55rem .55rem 0; border-radius: 2px;
         box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 24px rgba(40, 25, 10, .28); transition: transform .4s ease; }
.abzug img { display: block; width: 100%; height: auto; }
.abzug figcaption { font-family: var(--hand); font-size: clamp(.82rem, 1.3vw, 1.05rem); color: #3b3550; text-align: center;
                    padding: .3rem .2rem .45rem; line-height: 1.2; }
.abzug-1 { left: 5%;  top: 9%;  width: 25%; transform: rotate(-3deg); z-index: 2; }
.abzug-2 { left: 29%; top: 30%; width: 22%; transform: rotate(2deg);  z-index: 3; }
.abzug-3 { left: 51%; top: 8%;  width: 22%; transform: rotate(-1.5deg); z-index: 4; }
.abzug-4 { left: 72%; top: 27%; width: 24%; transform: rotate(2.5deg); z-index: 5; }
.abzug::before, .notiz::before {
  content: ""; position: absolute; left: 50%; top: -.45rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d9d 0 18%, #d8313a 45%, #8f1720 100%);
  box-shadow: 2px 4px 4px rgba(0, 0, 0, .35); z-index: 2;
}
.abzug-2::before { background: radial-gradient(circle at 35% 30%, #a7c8ff 0 18%, #2f6fd6 45%, #183f86 100%); }
.abzug-3::before { background: radial-gradient(circle at 35% 30%, #fff1a0 0 18%, #e2b51b 45%, #8c6a07 100%); }
.abzug-4::before { background: radial-gradient(circle at 35% 30%, #b6f0c0 0 18%, #2f9e4b 45%, #175c28 100%); }
.notiz::before { background: radial-gradient(circle at 35% 30%, #e7c8ff 0 18%, #8a52c9 45%, #4b2580 100%); }
@media (hover: hover) { .abzug:hover { transform: rotate(0deg) scale(1.04); z-index: 9; } }

/* Notizkarte unten links */
.notiz { position: absolute; left: 7%; bottom: 7%; margin: 0; z-index: 6; background: #fffdf3; padding: .7rem 1rem .6rem;
         transform: rotate(-2deg); box-shadow: 0 6px 16px rgba(40, 25, 10, .22); border-radius: 2px; display: grid; gap: .1rem; }
.notiz-wer { font-family: var(--hand); font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: #2f2a40; }
.notiz-stil { font-size: .8rem; color: #6b6380; letter-spacing: .02em; }

/* Pfeile und Punkte */
.b2b-pfeil { position: absolute; top: calc(50% - 1.6rem); z-index: 10; width: 3rem; height: 3rem; border-radius: 50%; border: 0;
             background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer;
             box-shadow: 0 4px 14px rgba(0,0,0,.18); display: grid; place-items: center; padding-bottom: .2rem; }
.b2b-pfeil:hover { background: #fff; }
.b2b-pfeil:focus-visible { outline: 3px solid var(--cta, #6b4fa8); outline-offset: 2px; }
.b2b-pfeil[disabled] { opacity: .35; cursor: default; }
.b2b-zurueck { left: -1.5rem; }
.b2b-weiter { right: -1.5rem; }
.b2b-punkte { display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; }
.b2b-punkt { width: .7rem; height: .7rem; border-radius: 50%; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; }
.b2b-punkt.ist-aktiv { background: var(--cta, #6b4fa8); transform: scale(1.25); }

/* ---------- Text (USER 16-10: „the column is too slim … use 2 columns“) ---------- */
.b2b-text { margin-top: clamp(2.5rem, 6vh, 4rem); }
.b2b-text-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 3rem; }
.b2b-text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 .5rem; }
.b2b-text p { color: var(--ink-soft); margin: 0; }
.b2b-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.b2b-fragen { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 3rem; align-items: center; margin-top: 2.6rem; }
.b2b-text details { border-top: 1px solid var(--line); padding: .7rem 0; }
.b2b-text details:last-child { border-bottom: 1px solid var(--line); }
.b2b-text summary { cursor: pointer; font-weight: 600; }
.b2b-text details p { margin: .5rem 0 0; }
.b2b .weiter-schritt { margin-top: clamp(2.5rem, 6vh, 4rem); }

@media (max-width: 900px) {
  .b2b-held, .b2b-text-raster, .b2b-fragen { grid-template-columns: 1fr; }
  .b2b-held-bild .maskottchen img { max-height: 220px; }
  .b2b-text-bild { display: none; }
  .b2b-zurueck { left: .4rem; } .b2b-weiter { right: .4rem; }
}

/* Telefon: der Tisch wird hochkant, die vier Abzüge liegen zwei über zwei */
@media (max-width: 640px) {
  .b2b-galerie-kopf { grid-template-columns: 1fr; }
  .b2b-galerie-kopf .maskottchen { display: none; }
  .b2b-slider { width: 100%; }
  .b2b-spur { border-radius: 0; }
  .b2b-tisch { aspect-ratio: 4 / 5.4; border-radius: 0; }
  .abzug { padding: .35rem .35rem 0; }
  .abzug-1 { left: 6%;  top: 6%;  width: 43%; transform: rotate(-3deg); }
  .abzug-2 { left: 52%; top: 5%;  width: 41%; transform: rotate(2deg); }
  .abzug-3 { left: 7%;  top: 45%; width: 41%; transform: rotate(2deg); }
  .abzug-4 { left: 51%; top: 46%; width: 42%; transform: rotate(-2deg); }
  .notiz { left: auto; right: 6%; bottom: 3%; padding: .45rem .7rem .4rem; }
  .b2b-pfeil { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; top: auto; bottom: 3%; }
  .b2b-zurueck { left: 4%; } .b2b-weiter { left: 17%; right: auto; }
}
@media (prefers-reduced-motion: reduce) { .b2b-spur { scroll-behavior: auto; } .abzug { transition: none; } }