/* YouPetStory, öffentliche Landingpage */
:root {
    --lp-ink: #ecf3ef;
    --lp-muted: #b7c9c0;
    --lp-deep: #07261d;
    --lp-forest: #0b3d2e;
    --lp-leaf: #10b981;
    --lp-leaf-2: #34d399;
    --lp-amber: #f59e0b;
    --lp-card: rgba(255, 255, 255, .96);
    --lp-radius: 22px;
    --g: linear-gradient(135deg, #059669, #10b981 55%, #34d399);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.lp {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--lp-ink);
    background:
        radial-gradient(900px 520px at 90% -8%, rgba(52, 211, 153, .38), transparent 58%),
        radial-gradient(720px 480px at -12% 18%, rgba(245, 158, 11, .22), transparent 55%),
        var(--lp-forest);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.lp-deleted {
    margin: 0; padding: .7rem 1rem; text-align: center; font-weight: 700; font-size: .92rem;
    background: #ecfdf5; color: #065f46;
}
a { color: inherit; }
img { max-width: 100%; }

.lp-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1.25rem;
    background: color-mix(in srgb, var(--lp-forest) 78%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lp-logo { display: flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 800; letter-spacing: -.02em; font-size: 1.12rem; }
.lp-logo-mark { font-size: 1.25rem; }
.lp-nav-links { display: flex; align-items: center; gap: .9rem; font-size: .92rem; font-weight: 600; }
.lp-nav-links a { text-decoration: none; opacity: .92; }
.lp-nav-links a:hover { opacity: 1; }
.lp-link-quiet { opacity: .8 !important; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .72rem 1.15rem; border-radius: 999px; font-weight: 700; text-decoration: none;
    border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-sm { padding: .45rem .9rem; font-size: .88rem; background: var(--g); color: #052e24; box-shadow: 0 8px 18px rgba(16,185,129,.28); }
.lp-btn-primary { background: var(--g); color: #052e24; box-shadow: 0 10px 24px rgba(16,185,129,.35); font-size: 1.02rem; padding: .9rem 1.35rem; }
.lp-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.lp-btn-on-dark { background: #fff; color: #065f46; }
.lp-btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }

.lp-hero {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
    max-width: 1120px; margin: 0 auto; padding: 3.2rem 1.25rem 4rem;
}
.lp-kicker { margin: 0 0 .7rem; color: var(--lp-leaf-2); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.12; letter-spacing: -.03em; }
.lp-lead { margin: 0 0 1.4rem; color: var(--lp-muted); font-size: 1.08rem; max-width: 36rem; }
.lp-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.lp-cta-center { justify-content: center; margin-top: 1.6rem; }
.lp-fine { margin: 1rem 0 0; color: rgba(236,243,239,.62); font-size: .85rem; }
.lp-trust { display: flex; flex-wrap: wrap; gap: .45rem .7rem; margin: 1.05rem 0 0; padding: 0; list-style: none; }
.lp-trust li {
    font-size: .8rem; font-weight: 700; color: #052e24;
    background: rgba(255,255,255,.88); border-radius: 999px; padding: .28rem .7rem;
}

.lp-hero-stage { position: relative; min-height: 420px; }
.lp-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(8px); opacity: .4; }
.lp-blob-a { width: 220px; height: 220px; background: #34d399; right: 8%; top: 6%; animation: lp-float 7s ease-in-out infinite; }
.lp-blob-b { width: 160px; height: 160px; background: #f59e0b; left: 4%; bottom: 12%; animation: lp-float 9s ease-in-out infinite reverse; }
.lp-card {
    position: absolute; z-index: 2; display: flex; gap: .75rem; align-items: flex-start;
    width: min(320px, 86%); padding: 1rem 1.05rem; border-radius: var(--lp-radius);
    background: #fff; color: #16211c; box-shadow: 0 22px 50px rgba(0,0,0,.28);
}
.lp-card strong { display: block; font-size: 1rem; }
.lp-card span, .lp-card em, .lp-card p { display: block; font-size: .85rem; color: #55655d; font-style: normal; }
.lp-card em { color: #047857; font-weight: 600; margin-top: .2rem; }
.lp-avatar { width: 44px; height: 44px; border-radius: 14px; background: #ecfdf5; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.lp-card-luna { top: 8%; left: 6%; }
.lp-card-otto { top: 42%; right: 0; }
.lp-card-stamp { bottom: 4%; left: 12%; display: block; }
.lp-stamp {
    display: inline-block; margin-bottom: .35rem; padding: .2rem .55rem; border-radius: 999px;
    background: #d1fae5; color: #065f46; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

.lp-section { max-width: 1120px; margin: 0 auto; padding: 3.4rem 1.25rem; }
.lp-section h2, .lp-band h2 { margin: 0 0 .5rem; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -.02em; }
.lp-section-lead { margin: 0 0 2rem; color: var(--lp-muted); max-width: 36rem; }
.lp-section-alt {
    background: rgba(0,0,0,.14); border-radius: 32px;
    max-width: 1140px; width: calc(100% - 1.2rem);
    margin: 0 auto;
}

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lp-steps li {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--lp-radius); padding: 1.3rem 1.2rem;
}
.lp-step-n {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .7rem;
    border-radius: 10px; background: var(--g); color: #052e24; font-weight: 800;
}
.lp-steps h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.lp-steps p { margin: 0; color: var(--lp-muted); font-size: .95rem; }

.lp-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    gap: 1rem;
    margin: 0 auto;
}
.lp-feature {
    width: 100%; max-width: 340px; text-align: center;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--lp-radius); padding: 1.2rem 1.15rem;
}
.lp-feat-ico { font-size: 1.45rem; }
.lp-feature h3 { margin: .45rem 0 .3rem; font-size: 1.05rem; }
.lp-feature p { margin: 0; color: var(--lp-muted); font-size: .94rem; }

.lp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lp-timeline li {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem;
    padding: 1.05rem 0; border-top: 1px solid rgba(255,255,255,.1);
}
.lp-timeline time { font-weight: 800; color: var(--lp-leaf-2); padding-top: .15rem; }
.lp-timeline strong { display: block; margin-bottom: .15rem; }
.lp-timeline p { margin: 0; color: var(--lp-muted); }

.lp-band { padding: 1.25rem; }
.lp-band-inner {
    max-width: 1120px; margin: 0 auto; padding: 2.4rem 1.5rem;
    border-radius: 28px; text-align: center;
    background: linear-gradient(135deg, rgba(5,150,105,.55), rgba(11,61,46,.9));
    border: 1px solid rgba(255,255,255,.14);
}
.lp-band p { color: var(--lp-muted); max-width: 34rem; margin: 0 auto 1.3rem; }
.lp-band .lp-cta-row { justify-content: center; }

.lp-foot {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center;
    padding: 1.6rem 1rem 2.2rem; color: rgba(236,243,239,.7); font-size: .88rem;
}
.lp-foot a { font-weight: 650; text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; }

@keyframes lp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(16px); }
}
@keyframes lp-pop {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
    .lp-hero { grid-template-columns: 1fr; padding-top: 1.8rem; }
    .lp-hero-stage { min-height: 0; display: grid; gap: .75rem; }
    .lp-blob { display: none; }
    .lp-card { position: relative; width: 100%; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
    .lp-nav-links a:not(.lp-btn):not(.lp-link-quiet) { display: none; }
    .lp-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Mobile-first, alles zentriert (überschreibt oben) ===== */
.lp-nav { justify-content: center; padding: .7rem 1rem; padding-top: calc(.7rem + env(safe-area-inset-top, 0)); }
.lp-nav-links { display: none; }
.lp-hero { grid-template-columns: 1fr; text-align: center; gap: 2rem; padding: 2rem 1.1rem 2.5rem; justify-items: center; }
.lp-hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
.lp-hero h1 { font-size: clamp(1.85rem, 8vw, 2.9rem); }
.lp-lead { margin-left: auto; margin-right: auto; font-size: 1.02rem; }
.lp-cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; margin: 0 auto; gap: .65rem; }
.lp-cta-row .lp-btn { width: 100%; min-height: 52px; }
.lp-hero-stage { min-height: 0; display: grid; gap: .8rem; width: 100%; max-width: 420px; margin: 0 auto; }
.lp-blob { display: none; }
.lp-card, .lp-card-luna, .lp-card-otto, .lp-card-stamp { position: relative; width: 100%; inset: auto; text-align: left; animation: lp-pop .6s ease both; }
.lp-card-otto { animation-delay: .1s; } .lp-card-stamp { animation-delay: .2s; text-align: center; display: block; }
.lp-section { text-align: center; padding: 2.4rem 1.1rem; }
.lp-section-lead { margin-left: auto; margin-right: auto; }
.lp-steps { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.lp-grid { max-width: 520px; }
.lp-steps li, .lp-feature { text-align: center; }
.lp-step-n { margin-left: auto; margin-right: auto; }
.lp-timeline { max-width: 520px; margin: 0 auto; }
.lp-timeline li { grid-template-columns: 1fr; gap: .25rem; text-align: center; }
.lp-section-alt { margin-left: auto; margin-right: auto; border-radius: 26px; }
.lp-band-inner { padding: 2rem 1.1rem; }
.lp-foot { flex-direction: column; align-items: center; text-align: center; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)); }
.lp-foot .lp-dot { display: none; }
.lp-btn { -webkit-tap-highlight-color: transparent; }

@media (min-width: 720px) {
    .lp-nav { justify-content: space-between; padding-inline: 1.5rem; }
    .lp-nav-links { display: flex; }
    .lp-nav-links a:not(.lp-btn):not(.lp-link-quiet) { display: inline; }
    .lp-cta-row { flex-direction: row; justify-content: center; max-width: none; }
    .lp-cta-row .lp-btn { width: auto; }
    .lp-hero { padding-top: 3.4rem; }
    .lp-hero-stage { max-width: 460px; }
    .lp-steps { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
    .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; justify-items: stretch; }
    .lp-feature { max-width: none; }
    .lp-feature:last-child:nth-child(3n + 1) { grid-column: 2; }
    .lp-timeline li { grid-template-columns: 6rem 1fr; text-align: left; }
    .lp-foot { flex-direction: row; }
    .lp-foot .lp-dot { display: inline; }
}

/* ===== Reines CSS-Video: 24 s Schleife, 3 Szenen ===== */
.demo-wrap { display: grid; gap: 1.6rem; justify-items: center; align-items: center; max-width: 900px; margin: 0 auto; }
.demo-phone { position: relative; width: 262px; height: 528px; padding: 10px; border-radius: 42px; background: #0b1512; box-shadow: 0 0 0 2px #26332d, 0 30px 60px rgba(0,0,0,.45); flex: none; }
.demo-notch { position: absolute; top: 10px; left: 50%; width: 84px; height: 20px; margin-left: -42px; border-radius: 0 0 14px 14px; background: #0b1512; z-index: 5; }
.demo-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: #f4f7f5; color: #16211c; text-align: left; }
.demo-status { display: flex; justify-content: space-between; padding: 9px 20px 0; font-size: 10px; font-weight: 700; }
.sc { position: absolute; inset: 30px 0 0 0; padding: 14px 14px 0; opacity: 0; animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: linear; }
.sc1 { opacity: 1; animation-name: scene1; } .sc2 { animation-name: scene2; } .sc3 { animation-name: scene3; }
.d-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.d-head strong { display: block; font-size: 15px; line-height: 1.1; } .d-head small { color: #83918a; font-size: 10.5px; }
.d-avatar { width: 38px; height: 38px; border-radius: 12px; background: #d1fae5; display: grid; place-items: center; font-size: 20px; }
.d-card { background: #fff; border: 1px solid #e3e9e5; border-radius: 16px; padding: 11px 12px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(16,33,28,.05); }
.d-card label { display: block; font-size: 10px; font-weight: 700; color: #55655d; margin-bottom: 5px; }
.d-card strong { display: block; font-size: 13px; } .d-card small { color: #83918a; font-size: 10.5px; }
.d-field { display: flex; align-items: center; min-height: 34px; padding: 6px 9px; border: 1.5px solid #10b981; border-radius: 10px; font-size: 14px; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.d-area { min-height: 62px; align-items: flex-start; }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.t-weight { animation: typeW 24s infinite; } .t-diary { animation: typeD 24s infinite; }
.caret { width: 2px; height: 16px; margin-left: 1px; background: #059669; animation: blink .8s steps(1) infinite; }
.d-btn { margin-top: 9px; padding: 9px; text-align: center; border-radius: 11px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #059669, #34d399); }
.b1 { animation: press1 24s infinite; } .b2 { animation: press2 24s infinite; } .b3 { animation: press3 24s infinite; position: relative; overflow: hidden; }
.b3 .b3b { position: absolute; inset: 0; display: grid; place-items: center; background: #047857; opacity: 0; animation: done3 24s infinite; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 58px; }
.bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: #a7f3d0; }
.bars .newbar { background: #10b981; animation: grow 24s infinite; transform-origin: bottom; }
.d-toast { position: absolute; left: 14px; right: 14px; bottom: 22px; padding: 10px; border-radius: 12px; background: #065f46; color: #fff; font-size: 12px; font-weight: 700; text-align: center; opacity: 0; transform: translateY(12px); animation: toast1 24s infinite; }
.d-entry { padding: 10px 12px; border-radius: 14px; background: #ecfdf5; border-left: 4px solid #10b981; font-size: 12px; opacity: 0; transform: translateY(-8px); animation: entry 24s infinite; }
.d-entry small { display: block; color: #047857; font-weight: 700; font-size: 10px; }
.dim { opacity: .7; } .d-dim { position: absolute; inset: 0; background: rgba(8,20,15,.55); opacity: 0; animation: dimIn 24s infinite; }
.d-modal { position: absolute; left: 12px; right: 12px; bottom: 16px; padding: 14px 13px 13px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,.35); opacity: 0; transform: translateY(40px); animation: modalUp 24s infinite; }
.d-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 10px; font-weight: 800; }
.d-pet { margin: 7px 0 4px; font-size: 19px; font-weight: 800; } .d-pet small { font-size: 11px; font-weight: 500; color: #55655d; }
.d-what { font-size: 12.5px; font-weight: 700; margin-bottom: 3px; } .d-when { font-size: 11.5px; color: #55655d; margin-bottom: 4px; }

.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; width: 100%; max-width: 420px; text-align: center; }
.demo-steps li { padding: .8rem 1rem; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); opacity: .55; animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: linear; }
.demo-steps strong { display: block; } .demo-steps span { font-size: .88rem; color: var(--lp-muted); }
.ds1 { animation-name: cap1; } .ds2 { animation-name: cap2; } .ds3 { animation-name: cap3; }

@keyframes scene1 { 0%, 31% { opacity: 1; } 33.3%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes scene2 { 0%, 31% { opacity: 0; } 34%, 64% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes scene3 { 0%, 64% { opacity: 0; } 67.5%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cap1 { 0%, 32% { opacity: 1; background: rgba(16,185,129,.22); border-color: rgba(52,211,153,.6); } 34%, 100% { opacity: .55; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); } }
@keyframes cap2 { 0%, 33% { opacity: .55; } 34%, 65% { opacity: 1; background: rgba(16,185,129,.22); border-color: rgba(52,211,153,.6); } 67%, 100% { opacity: .55; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); } }
@keyframes cap3 { 0%, 66% { opacity: .55; } 68%, 97% { opacity: 1; background: rgba(16,185,129,.22); border-color: rgba(52,211,153,.6); } 100% { opacity: .55; } }
@keyframes typeW { 0%, 3% { width: 0; animation-timing-function: steps(6, end); } 9%, 32% { width: 6ch; } 33.3%, 100% { width: 0; } }
@keyframes typeD { 0%, 35% { width: 0; animation-timing-function: steps(25, end); } 50%, 65% { width: 25ch; } 66.6%, 100% { width: 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes press1 { 0%, 13% { transform: none; filter: none; } 14% { transform: scale(.94); filter: brightness(.9); } 16%, 100% { transform: none; filter: none; } }
@keyframes press2 { 0%, 53% { transform: none; } 54% { transform: scale(.94); filter: brightness(.9); } 56%, 100% { transform: none; filter: none; } }
@keyframes press3 { 0%, 85% { transform: none; } 86% { transform: scale(.95); filter: brightness(.9); } 88%, 100% { transform: none; filter: none; } }
@keyframes done3 { 0%, 86.5% { opacity: 0; } 88%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes grow { 0%, 14% { transform: scaleY(0); } 19%, 100% { transform: scaleY(1); } }
@keyframes toast1 { 0%, 15% { opacity: 0; transform: translateY(12px); } 17%, 29% { opacity: 1; transform: none; } 31%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes entry { 0%, 56% { opacity: 0; transform: translateY(-8px); } 60%, 65% { opacity: 1; transform: none; } 66.6%, 100% { opacity: 0; } }
@keyframes dimIn { 0%, 68% { opacity: 0; } 71%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes modalUp { 0%, 69% { opacity: 0; transform: translateY(40px); } 73%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(40px); } }

@media (min-width: 860px) {
    .demo-wrap { grid-template-columns: auto 1fr; gap: 3rem; justify-items: start; }
    .demo-steps { text-align: left; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .typed { width: auto !important; } .demo-steps li { opacity: 1; }
    .sc2, .sc3 { display: none; } .d-toast { opacity: 1; transform: none; } .bars .newbar { transform: none; }
}

/* ===== Kopfleiste: Anmelden / Kostenlos starten mit Symbolen (mobil zuerst) ===== */
.lp-nav { justify-content: space-between; }
.lp-nav-links { display: flex; align-items: center; gap: .5rem; }
.lp-nav-links a:not(.pb-login):not(.pb-reg) { display: none; }
.lp-nav-links .mps-lang { display: block; flex: none; }
.pb-login, .pb-reg { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; min-height: 44px; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pb-login { width: 44px; padding: 0; border: 1.5px solid rgba(255,255,255,.35); color: #fff; opacity: 1 !important; }
.pb-login i, .pb-reg i { font-size: 1.05rem; }
.pb-login .pb-txt, .pb-reg .pb-long { display: none; }
.pb-reg { padding: 0 1rem; font-size: .92rem; }
.pb-reg .pb-short { display: inline; }
@media (min-width: 520px) {
    .pb-login { width: auto; padding: 0 1rem; }
    .pb-login .pb-txt, .pb-reg .pb-long { display: inline; }
    .pb-reg .pb-short { display: none; }
}
@media (min-width: 720px) {
    .lp-nav-links a:not(.pb-login):not(.pb-reg) { display: inline; }
    .lp-nav-links { gap: .9rem; }
}