/* ============================================================
   diBP – Referenzen als Kapseln
   ============================================================
   Drei Reihen, die abwechselnd nach links und rechts wandern.
   Jede Kommune steht als Kapsel darin: Wappen im Kreis, daneben
   Name und Gattung.

   Beim Überfahren richtet sich das Wappen auf und tritt aus
   seiner Umrandung heraus - es steht dann schräg über der
   Kapsel statt flach darin. Dafür sorgen perspective am Element
   und translateZ am Bild; ohne 3D-Unterstützung bleibt es flach
   und wird nur größer.

   Aufbau in kapseln.js, Daten in kunden.js.

   Im Ordner liegen drei Fassungen desselben Abschnitts:
     karte.js/css       Deutschlandkarte mit Tropfen (Rückfall)
     referenzen.js/css  Wand aus drei wandernden Spalten
     kapseln.js/css     diese hier - eingebunden ist nur eine
   ============================================================ */

.kp-wand{
  --kp-rot:      #A72920;
  --kp-rot-hell: #DE5245;
  --kp-tinte:    #16191D;
  --kp-grund:    #F2F4F5;      /* Hintergrund des Abschnitts */
  --kp-luft:     18px;         /* Abstand zwischen zwei Kapseln */
  position:relative;
}

/* ---------- Kennzahlen über dem Band ---------- */
.kp-stats{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  font-size:13.5px;color:var(--slate);margin-bottom:clamp(18px,2.4vw,28px);
}
.kp-stat b{color:var(--kp-tinte);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Das Band ----------
   Es reicht über den Textblock hinaus bis an beide Seitenränder:
   die Reihen sollen aus dem Bild heraus- und hineinlaufen, nicht an
   einer Textkante enden. Dafür wird die Begrenzung des Textblocks
   mit negativen Rändern aufgehoben. */
.kp-band{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:clamp(26px,3.4vw,44px) 0;
  overflow:hidden;
}

/* Weiche Kanten links und rechts: die Kapseln verschwinden, statt
   abgeschnitten zu werden. */
.kp-band::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,var(--kp-grund) 0,rgba(242,244,245,0) clamp(70px,11vw,170px)),
    linear-gradient(270deg,var(--kp-grund) 0,rgba(242,244,245,0) clamp(70px,11vw,170px));
}

/* Die Reihen stehen etwas luftiger, als sie muessten: ein
   aufgerichtetes Wappen ragt ueber seine Kapsel hinaus und braucht
   den Platz nach oben. */
.kp-reihen{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(20px,2.4vw,30px)}

/* ---------- Eine Reihe ----------
   Jeder Satz Kapseln steht viermal hintereinander. Die Reihe fährt
   genau um ein Viertel ihrer Breite - dann steht die zweite Kopie
   dort, wo die erste begann, und der Sprung zurück ist nicht zu
   sehen. Die Richtung wechselt von Reihe zu Reihe. */
.kp-reihe{
  display:flex;align-items:center;gap:var(--kp-luft);width:max-content;
  will-change:transform;
  /* Anfassen und schieben: senkrecht bleibt das Wischen bei der
     Seite, waagerecht nimmt es die Reihe. */
  touch-action:pan-y;
  cursor:grab;
}
.kp-reihe.kp-greift{cursor:grabbing}
/* Beim Schieben soll keine Schrift markiert werden. */
.kp-band.kp-schiebt{user-select:none;-webkit-user-select:none}

/* Die Fahrt steht in kapseln.js, nicht hier: eine CSS-Animation
   laesst sich nicht anfassen, anhalten und weiterschieben. */

/* ---------- Die Kapsel ---------- */
.kp-kapsel{
  position:relative;
  display:flex;align-items:center;gap:13px;
  padding:9px 24px 9px 9px;
  border:1px solid rgba(22,25,29,.16);border-radius:999px;
  background:#fff;
  transition:border-color .35s ease,box-shadow .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);
  /* Kein overflow:hidden - das Wappen soll heraustreten dürfen. */
}
.kp-kapsel:hover{
  z-index:2;                       /* über die Nachbarn */
  transform:translateY(-2px);
  border-color:var(--kp-rot);
  box-shadow:0 14px 30px rgba(22,25,29,.12);
}

/* ---------- Die Umrandung, aus der das Wappen tritt ---------- */
.kp-ring{
  position:relative;flex:0 0 54px;width:54px;height:54px;
  border-radius:50%;
  border:1px solid rgba(22,25,29,.2);
  background:var(--kp-grund);
  /* Das Wappen steht auf einer Grundlinie im Ring, es schwebt nicht
     in dessen Mitte - sonst hätte der Schatten darunter keinen Ort. */
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8px;
  /* Der Fluchtpunkt liegt im Ring, genau auf der Standlinie des
     Wappens - nicht in der Mitte der Kapsel. Lag er dort, wanderte
     das Wappen beim Herankommen nach links oben, weil alles, was dem
     Betrachter entgegenkommt, sich vom Fluchtpunkt entfernt. Jetzt
     ist der Fluchtpunkt der Fuß: der bleibt stehen, und das Wappen
     wächst nach oben und in die Breite. */
  perspective:420px;
  perspective-origin:50% 85%;
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}

/* Die Schattenellipse am Fuß. Sie bleibt liegen, während das Wappen
   sich darüber aufrichtet - genau das macht den Eindruck, dass es
   steht und nicht klebt. */
.kp-ring::after{
  content:"";position:absolute;left:50%;bottom:3px;z-index:-1;
  width:78%;height:10px;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(22,25,29,.45) 0%, rgba(22,25,29,.2) 45%, rgba(22,25,29,0) 72%);
  transform:translateX(-50%) scaleX(.45);
  opacity:0;
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,.9,.26,1);
}
.kp-kapsel:hover .kp-ring::after{opacity:1;transform:translateX(-50%) scaleX(1)}
/* Der Ring bleibt als Vertiefung zurueck, aus der das Wappen
   getreten ist - daher der Schatten nach innen. */
.kp-kapsel:hover .kp-ring{
  border-color:var(--kp-rot);background:#fff;
  box-shadow:inset 0 2px 7px rgba(22,25,29,.15);
}

/* Querliegende Schriftzüge - Hanau etwa - stehen nicht auf einer
   Spitze. Unten im Kreis ist kaum Breite: ein Schriftzug ragte dort
   links und rechts über den Ring hinaus. Sie stehen deshalb in der
   Mitte, wo der Kreis am breitesten ist, und ihr Schatten rückt
   mit. kapseln.js vergibt die Klasse nach dem Seitenverhältnis des
   geladenen Bildes. */
.kp-ring.kp-quer{align-items:center;padding-bottom:0}
.kp-ring.kp-quer img{max-width:72%;max-height:44%}
.kp-ring.kp-quer::after{bottom:9px;width:68%}

.kp-ring img{
  max-width:80%;max-height:74%;width:auto;height:auto;display:block;
  /* Wächst von der Spitze nach oben, nicht aus der Mitte: der Fuß
     bleibt dort stehen, wo der Schatten liegt. */
  transform-origin:50% 100%;
  /* Ruhig im Grundzustand: achtzehn bunte Wappen nebeneinander sind
     ein Fleckenteppich. */
  filter:grayscale(.66) drop-shadow(0 0 0 rgba(22,25,29,0));
  opacity:.9;
  transform:translateZ(0);
  transition:transform .5s cubic-bezier(.22,.9,.26,1),
             filter .5s ease, opacity .5s ease;
}
/* Aufrichten: das Bild kommt dem Betrachter entgegen (translateZ),
   kippt dabei leicht nach hinten (rotateX) und wirft einen Schatten
   auf den Ring, aus dem es heraustritt. */
.kp-kapsel:hover .kp-ring img{
  transform:translateZ(102px) rotateX(12deg) scale(1.46);
  filter:grayscale(0) drop-shadow(0 8px 9px rgba(22,25,29,.22));
  opacity:1;
}

/* Wo noch keine Freigabe vorliegt, steht der Anfangsbuchstabe im
   Ring - er richtet sich genauso auf. */
.kp-mono{
  font:800 21px/1 'Nunito Sans',sans-serif;letter-spacing:-.5px;
  color:var(--kp-rot);
  padding-bottom:4px;
  transform-origin:50% 100%;
  transform:translateZ(0);
  transition:transform .5s cubic-bezier(.22,.9,.26,1),
             color .4s ease, text-shadow .5s ease;
}
.kp-kapsel:hover .kp-mono{
  transform:translateZ(96px) rotateX(12deg) scale(1.26);
  text-shadow:0 8px 10px rgba(22,25,29,.3);
}

/* ---------- Beschriftung ---------- */
.kp-text{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.kp-text b{font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--kp-tinte)}
.kp-text span{font-size:12px;color:var(--slate);margin-top:2px}

/* ---------- Schmale Schirme ---------- */
@media (max-width:700px){
  .kp-wand{--kp-luft:12px}
  .kp-kapsel{padding:7px 18px 7px 7px;gap:10px}
  .kp-ring{flex:0 0 44px;width:44px;height:44px}
  .kp-mono{font-size:17px}
  .kp-text b{font-size:13px}
  .kp-text span{font-size:11.5px}
}

/* ---------- Ohne Bewegung ----------
   Keine Fahrt, kein Aufrichten: die Kapseln stehen als Block da und
   brechen um. Die Kopien werden ausgeblendet, sonst stünde jede
   Kommune viermal. */
@media (prefers-reduced-motion:reduce){
  .kp-band{margin-left:0;margin-right:0;overflow:visible}
  .kp-band::after{display:none}
  .kp-reihe{flex-wrap:wrap;width:auto;justify-content:center;
    cursor:default;transform:none !important}
  .kp-doppel{display:none}
  .kp-kapsel,.kp-ring,.kp-ring img,.kp-mono{transition:none}
  .kp-kapsel:hover{transform:none;box-shadow:none}
  .kp-kapsel:hover .kp-ring img{transform:none}
  .kp-kapsel:hover .kp-mono{transform:none;text-shadow:none}
  .kp-ring::after{display:none}
}

/* ══════════════════════════════════════════════════════════════
   NACHTRAG ZUR BARRIEREFREIHEIT — steht so nicht im Entwurf.

   Knopf zum Anhalten des Bandes (WCAG 2.2.2). Bewusst zurückhaltend:
   er gehört zur Bedienung, nicht zur Schauseite. Unter dem Band
   rechts, in der Zeile der übrigen Kleinschrift.
   ══════════════════════════════════════════════════════════════ */
.kp-pause{
  display:flex;align-items:center;gap:7px;margin:14px 0 0 auto;
  font:inherit;font-size:13px;font-weight:600;line-height:1;
  color:#5E6B76;background:#fff;
  border:1px solid #E3E7EA;border-radius:999px;
  padding:8px 14px 8px 11px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.kp-pause svg{width:14px;height:14px;flex:0 0 auto;fill:currentColor}
.kp-pause:hover{border-color:#A72920;color:#A72920}
.kp-pause:focus-visible{outline:2px solid #A72920;outline-offset:2px}
/* Angehalten: der Knopf zeigt, dass er gedrückt ist - nicht nur über
   die Farbe, sondern auch über den vollen Rahmen und das Zeichen,
   das dann auf „weiter" steht. */
.kp-pause[aria-pressed="true"]{
  border-color:#A72920;color:#A72920;background:rgba(167,41,32,.06);
}

@media (max-width:640px){
  .kp-pause{margin-right:0}
}