/* ==== Basis aus deinem Snippet (unverändert) ==== */
.text-rotate{display:flex;flex-wrap:wrap;white-space:pre-wrap;position:relative}
.text-rotate-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-rotate-word{display:inline-flex}
.text-rotate-lines{display:flex;flex-direction:column;width:100%}
.text-rotate-element{display:inline-block}
.text-rotate-space{white-space:pre}

/* ==== Bessere Integration im Layout ==== */
.trust-rotate{
  margin: 18px auto 8px;          /* kompakter zwischen Cards und H2 */
  padding: 0 16px;
  max-width: 980px;               /* folgt deiner Content-Breite */
  display: grid;
  place-items: center;
}

/* Schlankere, flachere Pill */
.rotate-pill{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 60px;                   /* vorher 56px */
  padding: 6px 14px;              /* weniger Padding */
  border-radius: 14px;            /* etwas kleinerer Radius */
  width: min(400px, 100%);        /* schmaler, wirkt weniger dominant */
  margin-inline: auto;
  overflow: hidden;

  /* dezenter Look wie deine Cards */
  background: linear-gradient(180deg, rgba(26,30,38,.84), rgba(18,22,30,.78));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 26px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Linker, statischer Teil */
.rotate-static{
  font-weight: 850;
  letter-spacing: .2px;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  font-size: clamp(30px, 1.15vw, 16px);
  line-height: 1;
}

/* Rechter, rotierender Chip */
.rotate-host{
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
  color: #041316;
  background: #67e8f9;           /* dein „bg-cyan-300“ Chip */
  border-radius: 10px;
  padding: .22rem .55rem;         /* kompakter Chip */
  line-height: 1.05;
  text-shadow: none;
  font-size: clamp(30px, 1.15vw, 16px);
  box-shadow: 0 8px 18px rgba(103,232,249,.25), inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Dezente Vergrößerung auf sehr großen Screens, aber zurückhaltend */
@media (min-width: 1280px){
  .rotate-pill{ width: 600px; }
}

/* Auf kleineren Screens: volle Breite, gleiche Höhe – bleibt ruhig im Flow */
@media (max-width: 600px){
  .trust-rotate{ margin: 14px auto 6px; }
  .rotate-pill{ width: 100%; }
}

/* Optional: leichte Hover-Reaktion (sehr subtil) */
.rotate-pill:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.06);
}