/* ============================================================
   DATADROP · PROBLEM-BANNER
   Kompakter weisser Banner zwischen Logo-Leiste und „Das Produkt".
   Ersetzt die frühere Sektion „Facts" (#why).

   Die Papierkarte läuft sichtbar ab, danach übernimmt die DataCard.

   Nutzt ausschliesslich die Design-Tokens aus main.css.
   ============================================================ */

/* Logo-Leiste ruecken wir dichter an die Landingpage und setzen die
   Trennlinie unter statt ueber den Banner. Ueberschreibt main.css. */
.hero{flex-direction:column;justify-content:center;padding-bottom:0}
.hero>.herogrid{width:100%}
/* Eigener Hintergrund entfaellt, damit der Verlauf der Landingpage
   durchscheint und die Leiste optisch dazugehoert. */
.logostrip{width:100%;padding:34px 0 40px;background:transparent;
  border-top:0;border-bottom:1px solid var(--line)}
@media(max-width:900px){.logostrip{padding:26px 0 34px}}
@media(max-width:600px){.logostrip{padding:20px 0 28px}}

.pb{position:relative;z-index:1;background:var(--paper);
    padding:clamp(50px,6vw,80px) 0}

.pb-grid{display:grid;grid-template-columns:1fr minmax(330px,.95fr);
  gap:clamp(30px,5vw,72px);align-items:center;max-width:1020px;margin:0 auto}

/* ---------- Textspalte ---------- */
.pb-tx{min-width:0}

.pb-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:#c8383a;
  background:rgba(224,65,60,.075);border:1px solid rgba(224,65,60,.18);
  padding:6px 14px;border-radius:30px;margin-bottom:16px}
.pb-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#e0413c;
  box-shadow:0 0 0 0 rgba(224,65,60,.55);animation:pbPulse 2.4s ease-out infinite}
@keyframes pbPulse{0%{box-shadow:0 0 0 0 rgba(224,65,60,.55)}70%{box-shadow:0 0 0 8px rgba(224,65,60,0)}100%{box-shadow:0 0 0 0 rgba(224,65,60,0)}}

.pb-h{font-family:var(--display);font-size:clamp(26px,3.3vw,42px);line-height:1.08;
  letter-spacing:-.6px;color:var(--ink);margin:0 0 16px}
.pb-lead{font-size:16.5px;line-height:1.64;color:var(--txt-soft);margin:0;max-width:520px}

/* Sechs Fakten-Pillen ueber die volle Breite – uebernimmt die Aussagen
   und die Icons der frueheren Sektion „Facts". */
.pb-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:1020px;margin:clamp(34px,4vw,50px) auto 0;padding:0}
.pb-facts li{display:flex;align-items:center;gap:10px;font-size:13.2px;line-height:1.4;
  color:var(--txt-soft);background:var(--paper-2);border:1px solid var(--line);
  border-radius:30px;padding:9px 16px 9px 12px;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.pb-facts li:hover{border-color:rgba(224,65,60,.3);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,15,36,.06)}
.pb-facts li b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-facts .di{width:22px;height:22px;flex:none;vertical-align:top}
@media(max-width:900px){.pb-facts{grid-template-columns:repeat(2,1fr);max-width:640px}}
@media(max-width:620px){.pb-facts{grid-template-columns:1fr;max-width:420px}
  .pb-facts li{font-size:12.8px}}

/* ============================================================
   Bühne · Kartenstapel
   Container-Queries: alles im Inneren skaliert mit der Bühnenbreite,
   dadurch bleibt die Karte auf jeder Grösse proportional lesbar.
   ============================================================ */
.pb-stage{position:relative;width:100%;max-width:440px;margin-inline:auto;
  aspect-ratio:1.586/1;container-type:inline-size}

.pb-stack{position:absolute;inset:0;isolation:isolate}

/* Papier-Visitenkarte: fotorealistische Vorlage aus img/.
   Die Karte ist bereits mehrfach von Hand korrigiert und zerknittert –
   genau das Problem, das der Banner beschreibt. */
.pb-paper{position:absolute;left:50%;top:50%;width:118%;
  transform:translate(-50%,-50%);transform-origin:50% 50%}
.pb-paper img{display:block;width:100%;height:auto}

/* Stempel „Veraltet" – landet in der freien Fläche rechts der Mitte */
.pb-stamp{position:absolute;right:11%;top:30%;
  font-family:var(--display);font-size:3.4cqw;letter-spacing:.26cqw;text-transform:uppercase;
  color:#d4322d;opacity:0;border:.55cqw solid #d4322d;border-radius:1.1cqw;padding:.7cqw 1.8cqw;
  transform:rotate(-11deg) scale(2.3);mix-blend-mode:multiply;z-index:6;white-space:nowrap}

/* DataCard */
.pb-new{position:absolute;inset:0}
.pb-new img{width:100%;height:100%;object-fit:cover;border-radius:4.2cqw;display:block;
  box-shadow:0 20px 44px rgba(28,31,58,.28)}

/* ============================================================
   Ablauf der Schleife (13 Sekunden)
   Die alte Karte liegt da -> Stempel „Veraltet" -> sie kippt weg ->
   die DataCard steigt auf und bleibt rund vier Sekunden stehen.
   Das Skript startet die Schleife erst im Sichtfeld.
   ============================================================ */
.pb--a .pb-stack,.pb--a .pb-stamp,.pb--a .pb-new,.pb--a .pb-cap{
  animation-duration:13s;animation-iteration-count:infinite;animation-play-state:paused}
.pb--a.is-live .pb-stack,.pb--a.is-live .pb-stamp,
.pb--a.is-live .pb-new,.pb--a.is-live .pb-cap{animation-play-state:running}

.pb--a .pb-stack{animation-name:pbPaper;animation-timing-function:ease-in-out}
.pb--a .pb-stamp{animation-name:pbStamp;animation-timing-function:cubic-bezier(.3,1.5,.5,1)}
.pb--a .pb-new{animation-name:pbNew;animation-timing-function:ease-in-out}
.pb--a .pb-cap{animation-name:pbCap;animation-timing-function:ease-in-out}

@keyframes pbStamp{
  0%,32%{opacity:0;transform:rotate(-11deg) scale(2.3)}
  38%,54%{opacity:.88;transform:rotate(-11deg) scale(1)}
  57%,100%{opacity:0;transform:rotate(-11deg) scale(1)}
}
/* Die Karte atmet leicht, damit sie nicht tot wirkt, und kippt dann weg. */
@keyframes pbPaper{
  0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
  28%{opacity:1;transform:translateY(-5px) rotate(-.5deg) scale(1.008)}
  56%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
  66%,94%{opacity:0;transform:translateY(46px) rotate(-5deg) scale(.92)}
  99%,100%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
}
/* Die DataCard bleibt bewusst lange stehen (rund vier Sekunden),
   damit die Aussage „Immer aktuell" ankommt. */
@keyframes pbNew{
  0%,60%{opacity:0;transform:translateY(28px) scale(.95)}
  67%,92%{opacity:1;transform:translateY(0) scale(1)}
  96%,100%{opacity:0;transform:translateY(-12px) scale(.98)}
}
@keyframes pbCap{
  0%,64%{opacity:0;transform:translateY(8px)}
  71%,91%{opacity:1;transform:translateY(0)}
  95%,100%{opacity:0;transform:translateY(0)}
}

/* Bildunterschrift unter der Bühne */
.pb-cap{position:absolute;left:0;right:0;bottom:-32px;text-align:center;
  font-size:13px;font-weight:800;color:var(--green);letter-spacing:.2px;opacity:0}
.pb-cap svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;margin-right:5px}

/* Ohne Bewegung: den Problemzustand zeigen (Karte mit Stempel) */
@media(prefers-reduced-motion:reduce){
  .pb--a .pb-stack,.pb--a .pb-stamp,.pb--a .pb-new,
  .pb--a .pb-cap,.pb-eyebrow::before{animation:none}
  .pb--a .pb-stamp{opacity:.88;transform:rotate(-11deg) scale(1)}
  .pb--a .pb-new,.pb--a .pb-cap{opacity:0}
}

/* ============================================================
   Übergang in „Das Produkt"
   ============================================================ */
.pb-next{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; /* Pfeil zentriert UNTER dem Satz */
  max-width:1020px;margin:clamp(36px,4.4vw,56px) auto 0;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);text-align:center;
  font-size:14.5px;line-height:1.6;color:var(--txt-soft)}
.pb-next b{color:var(--ink);font-weight:800}
.pb-next i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(59,67,149,.08);color:var(--blue);animation:pbBob 2.6s ease-in-out infinite}
.pb-next i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes pbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.pb-next i{animation:none}}

/* ============================================================
   Responsiv
   ============================================================ */
@media(max-width:900px){
  .pb-grid{grid-template-columns:1fr;gap:40px;max-width:520px}
  .pb-tx{text-align:center}
  .pb-lead{margin-inline:auto}
  .pb-facts{justify-content:center}
  .pb-stage{max-width:400px}
  .pb-next{flex-direction:column;gap:14px}
}
@media(max-width:560px){
  .pb{padding:46px 0}
  .pb-stage{max-width:300px}
  .pb-facts li{font-size:12.2px;padding:6px 12px}
  .pb-lead{font-size:15.5px}
}

/* Fallback ohne Container-Queries: feste Groesse fuer den Stempel */
@supports not (container-type:inline-size){
  .pb-stamp{font-size:12px;letter-spacing:.9px;border-width:2px;border-radius:4px;padding:3px 7px}
  .pb-new img{border-radius:14px}
}