/* Website-Leasing.io · Bereich „Kommt bald“ (App + WhatsApp-Community) auf Startseite und Shop-Seite. Von Hand gepflegt, HTML: _intern/seo/baukasten/kommt_bald.py */
.kb-raster { display: grid; gap: 18px; margin-top: 34px; }
.kb-karte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 22px; border: 1px solid var(--bg-3); border-radius: 24px; background: var(--bg-1); overflow: hidden; }
.kb-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lime); color: var(--lime); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.kb-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
@media (prefers-reduced-motion: no-preference) { .kb-chip::before { animation: kb-puls 2400ms ease-in-out infinite; } }
@keyframes kb-puls { 50% { opacity: 0.25; } }
.kb-karte h3 { font-size: clamp(1.45rem, 4.8vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; margin: 16px 0 10px; }
.kb-karte h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -0.01em; }
.kb-karte > p, .kb-text > p { color: var(--text-2); }
.kb-liste { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.kb-liste li { padding-left: 16px; border-left: 2px solid var(--lime); color: var(--text-2); line-height: 1.4; }
.kb-liste b { display: block; color: var(--text); font-weight: 700; }
.kb-buehne { position: relative; display: flex; justify-content: center; align-items: center; min-height: 390px; margin: 30px -6px 0; }
.kb-handy { position: relative; flex: none; width: 45%; max-width: 270px; aspect-ratio: 520 / 1125; border-radius: 26px; border: 5px solid #0A0908; outline: 1px solid var(--line); background: #F3F4F6; overflow: hidden; }
.kb-handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kb-handy.mitte { z-index: 2; }
.kb-handy.links { z-index: 1; width: 35%; max-width: 215px; margin-right: -5%; transform: rotate(-7deg) translateY(10px); }
.kb-handy.rechts { z-index: 1; width: 35%; max-width: 215px; margin-left: -5%; transform: rotate(7deg) translateY(10px); }
/* Beim Scrollen fächern die Handys aus dem Stapel auf. Ohne Unterstützung stehen sie einfach aufgefächert da. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kb-buehne { view-timeline: --kb-buehne block; }
    .kb-handy.links { animation: kb-links linear both; animation-timeline: --kb-buehne; animation-range: entry 15% cover 45%; }
    .kb-handy.rechts { animation: kb-rechts linear both; animation-timeline: --kb-buehne; animation-range: entry 15% cover 45%; }
    @keyframes kb-links { from { transform: translateX(46%) scale(0.92); } to { transform: rotate(-7deg) translateY(10px); } }
    @keyframes kb-rechts { from { transform: translateX(-46%) scale(0.92); } to { transform: rotate(7deg) translateY(10px); } }
  }
}
.kb-bild-hinweis { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-3); }
.kb-nachrichten { display: grid; gap: 10px; margin-top: 24px; }
.kb-nachricht { position: relative; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-3); line-height: 1.35; }
.kb-nachricht span { display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.kb-absender { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; color: var(--text-3); }
.kb-absender svg { flex: none; color: var(--lime); }
.kb-beitreten { align-self: flex-start; margin-top: 22px; }
.kb-kleingedruckt { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--text-3); max-width: 46em; }
@media (min-width: 900px) {
  .kb-raster { grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); gap: 20px; }
  .kb-karte { padding: 34px 32px; }
  .kb-app { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); column-gap: 28px; align-items: center; }
  .kb-buehne { margin: 0; min-height: 500px; }
  .kb-app .kb-bild-hinweis { grid-column: 2; margin-top: 10px; }
  .kb-nachrichten { margin-top: auto; padding-top: 24px; }
}
.kb-bald { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--bg-3); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); vertical-align: 2px; }
.kb-app-knopf { display: inline-flex; }