
  #kundenkonto { position: relative; overflow: hidden; background: linear-gradient(180deg, #FDFAF8 0%, #F9EEEB 100%); }
  .konto-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
  .konto-blob--1 { width: 440px; height: 440px; background: #F3D7D1; top: -140px; right: -120px; animation: kontoDrift 16s ease-in-out infinite alternate; }
  .konto-blob--2 { width: 360px; height: 360px; background: #F8E9E5; bottom: -160px; left: -130px; animation: kontoDrift 20s ease-in-out infinite alternate-reverse; }
  @keyframes kontoDrift { from { transform: translate(0, 0); } to { transform: translate(-34px, 26px); } }

  .konto-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
  .konto-teaser__list { list-style: none; padding: 0; margin: 22px 0 30px; }
  .konto-teaser__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: .95rem; line-height: 1.6; margin-bottom: 12px; }
  .konto-teaser__list svg { flex: none; margin-top: 3px; color: #C9847A; }
  .konto-teaser__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .konto-teaser__login { font-size: .9rem; color: #B06A60; text-decoration: none; border-bottom: 1px solid #EAC9C4; padding-bottom: 2px; transition: color .25s; }
  .konto-teaser__login .arr { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
  .konto-teaser__login:hover { color: #96544B; }
  .konto-teaser__login:hover .arr { transform: translateX(4px); }

  /* CTA: sanfter Lift + wiederkehrender Glanzstreifen */
  .konto-cta-btn { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
  .konto-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(201,132,122,.42); }
  .konto-cta-btn::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 34px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-80px) rotate(18deg); animation: kontoShine 4.6s ease-in-out infinite; }
  @keyframes kontoShine { 0%, 64% { transform: translateX(-90px) rotate(18deg); } 86%, 100% { transform: translateX(420px) rotate(18deg); } }

  /* Gestaffeltes Einblenden */
  .konto-motion .konto-fx { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
  #kundenkonto.konto-in .konto-fx { opacity: 1; transform: none; }

  /* Stempelkarte */
  .konto-card-wrap { perspective: 900px; max-width: 400px; margin: 0 auto; }
  .konto-card { position: relative; background: #fff; border: 1px solid #F0DFDC; border-radius: 26px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(201,132,122,.18); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; will-change: transform; }
  .konto-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .konto-card__head .t { font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; color: #2C2220; }
  .konto-card__head img { height: 30px; }
  .konto-card__stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
  .konto-card__stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #EAC9C4; display: flex; align-items: center; justify-content: center; color: #EAC9C4; }
  .konto-card__stamp.f { background: linear-gradient(135deg, #C9847A 0%, #d9a09a 100%); border: 2px solid #C9847A; color: #fff; transform: scale(1); }
  #kundenkonto.konto-in .konto-card__stamp.f { animation: kontoStamp .55s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(.75s + var(--i) * .22s); }
  @keyframes kontoStamp { 0% { transform: scale(0) rotate(-30deg); } 62% { transform: scale(1.22) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
  .konto-card__note { font-size: .85rem; color: #6B5553; line-height: 1.55; text-align: center; }
  .konto-card__note strong { color: #B06A60; }

  /* 15%-Badge: dreht sich rein und schwebt danach sanft */
  .konto-card__badge { position: absolute; top: -18px; right: -14px; background: linear-gradient(135deg, #C9847A 0%, #d9a09a 100%); color: #fff; border-radius: 18px; padding: 12px 18px; text-align: center; box-shadow: 0 10px 26px rgba(201,132,122,.4); transform: scale(1) rotate(4deg); }
  #kundenkonto.konto-in .konto-card__badge { animation: kontoBadgeIn .7s cubic-bezier(.34,1.56,.64,1) .55s forwards, kontoFloat 5.5s ease-in-out 1.6s infinite; }
  @keyframes kontoBadgeIn { from { transform: scale(1) rotate(4deg); } to { transform: scale(1) rotate(4deg); } }
  @keyframes kontoFloat { 0%, 100% { transform: scale(1) rotate(4deg) translateY(0); } 50% { transform: scale(1.04) rotate(6deg) translateY(-7px); } }
  .konto-card__badge .p { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; line-height: 1; }
  .konto-card__badge .s { font-size: .6rem; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; margin-top: 3px; }

  @media (max-width: 900px) {
    .konto-teaser { grid-template-columns: 1fr; gap: 44px; }
    .konto-teaser__visual { order: -1; }
    .konto-card-wrap { max-width: 340px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .konto-blob, .konto-cta-btn::after { animation: none !important; }
    .konto-fx { opacity: 1 !important; transform: none !important; transition: none !important; }
    .konto-card__stamp.f { transform: scale(1) !important; animation: none !important; }
    .konto-card__badge { transform: scale(1) rotate(4deg) !important; animation: none !important; }
  }

.konto-card__example { color:var(--text-2); font-size:.75rem; text-align:center; margin-top:20px; }
@media(max-width:480px){.konto-card{padding:28px 20px}.konto-card__stamps{gap:8px}.konto-card__badge{right:0}.konto-card-wrap{max-width:320px}}
