/* Zinstag Landingpage · Bausteine für alle drei Richtungen (Entwurf 13.11.2026) */
:root{
  --pfirsich:#FF9A76; --gold:#FFC94F; --lime:#CFEF45; --mint:#6FDCA0; --warn:#E5602A;
  --band: linear-gradient(90deg,#FF9A76 0%,#FFC94F 33%,#CFEF45 66%,#6FDCA0 100%);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block}
button,input{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* Kopfzeile */
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.marke{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.02em;text-decoration:none;color:inherit}
.marke i{width:24px;height:24px;border-radius:50%;background:var(--band)}
.nav nav{display:flex;align-items:center;gap:28px;font-size:15px}
.nav nav a{color:inherit;text-decoration:none;opacity:.75}
.nav nav a.pill{opacity:1;padding:10px 18px;border-radius:22px;font-weight:600}

/* Warteliste */
.liste{display:flex;gap:8px;padding:6px;border-radius:32px;max-width:460px;width:100%}
.liste input{flex:1;min-width:0;border:0;background:transparent;padding:0 16px;font-size:16px;outline:none}
.liste button{border:0;cursor:pointer;padding:14px 22px;border-radius:26px;font-size:16px;font-weight:600;white-space:nowrap}
.klein{font-size:14px;margin-top:12px}
.danke{display:none;font-size:15px;font-weight:500;margin-top:12px}
.liste.ok + .klein{display:none}
.liste.ok ~ .danke{display:block}

/* Klickbares iPhone: der echte Prototyp, verkleinert über --s */
.iphone{--s:.78;position:relative;width:calc(390px * var(--s));height:calc(844px * var(--s));flex-shrink:0}
.iphone .rahmen{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;border-radius:56px;background:#0B0B0C;padding:12px;box-shadow:0 0 0 2px #2B2A28 inset,0 50px 90px rgba(20,30,25,.22)}
.iphone iframe{display:block;width:366px;height:820px;border:0;border-radius:44px;background:#ECEFED}
.iphone .insel{position:absolute;top:23px;left:50%;transform:translateX(-50%);width:78px;height:30px;border-radius:15px;background:#0B0B0C;pointer-events:none}
.tipp{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 14px 8px 10px;border-radius:20px;white-space:nowrap;pointer-events:none}
.tipp i{width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 0 rgba(229,96,42,.5);animation:puls 1.8s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(229,96,42,.55)}70%{box-shadow:0 0 0 12px rgba(229,96,42,0)}100%{box-shadow:0 0 0 0 rgba(229,96,42,0)}}

/* Schwebende Zins-Karten */
.karte{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:20px;white-space:nowrap;animation:schweben 6s ease-in-out infinite}
.karte:nth-of-type(2n){animation-delay:-3s}
.karte .p{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.karte b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.karte span{display:block;font-size:13px;margin-top:2px}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Mini-Zinsband (Kacheln, Schritte) */
.mband{display:flex;gap:3px}
.mband i{flex:1;height:26px;border-radius:6px;background-image:var(--band);background-size:1200% 100%}
.mband i:first-child{border-radius:13px 6px 6px 13px}
.mband i.leer{background:#DCE1DF}
.mband i.ende{flex:0 0 34px;border-radius:6px 13px 13px 6px;background:linear-gradient(180deg,#A6EAC2,#62CE94)}

.entwurf{font-size:12px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:28px 16px;opacity:.55}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .nav{height:64px}
  .nav nav a:not(.pill){display:none}
  .nav nav a.pill{padding:8px 14px;font-size:14px}
  .liste{flex-direction:column;border-radius:24px;gap:6px}
  .liste input{padding:14px 14px;text-align:center}
  .liste button{padding:15px 16px;border-radius:20px}
}