/*
 * Splash-Intro /demo (Markup: includes/demo-motion/splash.php). Aus design-previews/splash/ übernommen:
 * Animation D „Wörter“, Farbe „Wald & Bernstein“ (Werte aus berater-landing.css), Such-Demo. Schriften kommen von der Seite.
 */
html.sp-lock, html.sp-lock body { overflow: hidden; }

.sp {
    --ease: cubic-bezier(.16, 1, .3, 1);
    --sp-text: #f6f3ec; --sp-logo: #f6f3ec; --sp-acc: #40d6a0; --sp-hi: #f2b544;
    --sp-skip-bg: rgba(255,255,255,.1); --sp-skip-line: rgba(255,255,255,.28); --sp-soft: rgba(255,255,255,.08);
    --d0: .3s; --step: .45s;
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center;
    padding: 24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));
    background: radial-gradient(80% 60% at 50% 8%, rgba(125,238,194,.14), transparent 65%), linear-gradient(165deg, #24493b 0%, #2a5443 55%, #31614d 100%);
    color: var(--sp-text);
    overflow: hidden; cursor: default; text-align: center;
    /* Sicherheitsnetz: ohne JavaScript verschwindet der Splash trotzdem */
    animation: sp-failsafe 1ms linear 9s forwards;
}
@keyframes sp-failsafe { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@media (min-width: 768px) { .sp { cursor: pointer; } }
.sp p { margin: 0; }

/* ruhig wanderndes Licht */
.sp-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sp-fx i { position: absolute; width: 90vmax; height: 90vmax; left: 50%; top: 50%; margin: -45vmax 0 0 -45vmax; border-radius: 50%; background: radial-gradient(circle, var(--sp-soft) 0%, transparent 60%); animation: sp-breathe 6s ease-in-out infinite alternate; }
@keyframes sp-breathe { from { transform: translate(-12%, -10%) scale(.9); } to { transform: translate(12%, 8%) scale(1.1); } }

.sp-stage { position: relative; z-index: 2; width: 100%; max-width: 960px; display: grid; justify-items: center; gap: clamp(.4rem, 1.5vh, .9rem); }
.sp-line { --delay: calc(var(--d0) + var(--i) * var(--step)); color: var(--sp-text); font: 700 clamp(1.5rem, 5.4vw, 3.4rem)/1.18 'Outfit', system-ui, sans-serif; letter-spacing: -.012em; text-wrap: balance; }
.sp-w { display: inline-block; white-space: nowrap; animation: sp-word .95s var(--ease) calc(var(--delay) + var(--c) * 85ms) both; }
@keyframes sp-word { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Logo: beide SVGs im Original-Rahmen (286 Einheiten hoch), Abstand 75 Einheiten wie im Logo */
.sp-logo { --H: clamp(2.6rem, 13vw, 5rem); display: flex; align-items: flex-start; gap: calc(var(--H) * .262); margin: clamp(.3rem, 1.4vh, .9rem) 0; color: var(--sp-logo); }
.sp-mark, .sp-word { display: block; height: var(--H); width: auto; max-width: none; flex-shrink: 0; }
.sp-acc { color: var(--sp-acc); }
.sp-mark { transform-origin: 50% 85%; animation: sp-mark .95s cubic-bezier(.34, 1.35, .64, 1) var(--delay) both; }
.sp-word { animation: sp-wordmark 1.1s var(--ease) calc(var(--delay) + .3s) both; }
@keyframes sp-mark { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sp-wordmark { from { opacity: 0; transform: translateX(-28px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

@media (max-height: 500px) {
    .sp-line { font-size: clamp(1.1rem, 7.5vh, 2.2rem); }
    .sp-logo { --H: clamp(2rem, 13vh, 3.6rem); }
    .sp-stage { gap: .2rem; }
}

/* Überspringen */
.sp-skip {
    position: absolute; z-index: 3;
    right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    padding: 9px 14px 9px 16px; border-radius: 99px;
    font: 500 14px/1 'Inter', system-ui, sans-serif; letter-spacing: .01em;
    color: var(--sp-text); background: var(--sp-skip-bg); border: 1px solid var(--sp-skip-line);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    cursor: pointer; opacity: 0; animation: sp-fade .6s ease .8s forwards;
    transition: background .2s, transform .2s;
}
.sp-skip svg { display: block; width: 15px; height: 15px; }
.sp-skip:hover { background: var(--sp-skip-line); }
.sp-skip:active { transform: scale(.96); }
.sp-skip:focus-visible { outline: 2px solid var(--sp-hi); outline-offset: 3px; }

.sp-progress { position: absolute; z-index: 3; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sp-hi); opacity: .5; transform-origin: left; transform: scaleX(0); animation: sp-progress var(--hold) linear forwards; }
@keyframes sp-progress { to { transform: scaleX(1); } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-fade-out { to { opacity: 0; } }

/* Abgang: Inhalt zoomt weich weg, Hintergrund blendet aus */
.sp.is-out { animation: sp-out var(--exit) ease forwards; }
.sp.is-out .sp-stage { animation: sp-stage-out var(--exit) cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sp-out { 40% { opacity: 1; } to { opacity: 0; } }
@keyframes sp-stage-out { to { opacity: 0; transform: scale(1.08); filter: blur(8px); } }

/* ============ Such-Demo: Suchfeld → „Pforzheim“ → Vorschlag → Profil ============
   Zeitleiste relativ zu --s. Grundzustand = Endzustand, damit reduzierte Bewegung ohne Animation stimmt.
   +0.0 einblenden · +0.5 Fokus · +0.7 tippen (90 ms/Zeichen) · +1.65 Vorschlag · +2.05 Tipp · +2.2 Suche · +2.6 Profil · +3.2 „Ihr Profil“ */
.sp-search {
    --ui: #fbf9f4; --ui-text: #1c1a15; --ui-text-2: #6a655a; --ui-green: #1f6b4e; --ui-press: #efe6cf;
    position: relative; width: min(100%, 440px); margin-top: clamp(.9rem, 3.2vh, 1.8rem);
    display: grid; gap: 10px; text-align: left; font: 500 15px/1.3 'Inter', system-ui, sans-serif;
    animation: sp-s-in .8s var(--ease) var(--s) both;
}
@keyframes sp-s-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sp-sb {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 16px; border-radius: 16px;
    background: var(--ui); color: var(--ui-text);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.08);
    outline: 2px solid transparent; outline-offset: 3px;
    animation: sp-s-ring 1.8s ease calc(var(--s) + .5s) both;
}
@keyframes sp-s-ring { 0% { outline-color: transparent; } 12%, 88% { outline-color: var(--sp-hi); } 100% { outline-color: transparent; } }
.sp-sb__ico { display: block; width: 20px; height: 20px; flex-shrink: 0; color: var(--ui-green); }
.sp-sb__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-weight: 600; }
.sp-sb__ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #8f897b; font-weight: 500; opacity: 0; animation: sp-s-ph .25s ease calc(var(--s) + .55s) both; }
@keyframes sp-s-ph { from { opacity: 1; } to { opacity: 0; } }
/* 50 ms linear statt 1 ms steps(1): bei 1 ms endete der Fortschritt in manchen Browsern (u. a. Handy) bei 0,9999…, die Buchstaben blieben unsichtbar */
.sp-sb__typed span { display: inline-block; animation: sp-s-type 50ms linear calc(var(--s) + .7s + var(--k) * 90ms) both; }
@keyframes sp-s-type { from { max-width: 0; opacity: 0; } to { max-width: 1em; opacity: 1; } }
.sp-sb__caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; border-radius: 1px; background: var(--ui-green); opacity: 0; animation: sp-s-caret .55s steps(1) calc(var(--s) + .5s) 3; }
@keyframes sp-s-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
.sp-sb__go { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ui-green); color: #fff; animation: sp-s-press .35s ease calc(var(--s) + 2.15s) both; }
@keyframes sp-s-press { 0%, 100% { transform: none; } 40% { transform: scale(.88); } }
.sp-sb__arrow { display: block; width: 20px; height: 20px; animation: sp-s-hide .45s linear calc(var(--s) + 2.2s); }
.sp-sb__spin { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; animation: sp-s-show .45s linear calc(var(--s) + 2.2s), sp-s-rot .6s linear infinite; }
@keyframes sp-s-hide { 0%, 100% { opacity: 0; } }
@keyframes sp-s-show { 0%, 100% { opacity: 1; } }
@keyframes sp-s-rot { to { transform: rotate(360deg); } }

.sp-sugg {
    position: absolute; z-index: 2; top: 58px; left: 0; right: 0;
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; overflow: hidden;
    background: var(--ui); color: var(--ui-text); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    animation: sp-s-sugg .8s ease calc(var(--s) + 1.65s) both;
}
@keyframes sp-s-sugg {
    0% { opacity: 0; transform: translateY(-6px); background: var(--ui); }
    22% { opacity: 1; transform: none; background: var(--ui); }
    55%, 75% { opacity: 1; transform: none; background: var(--ui-press); }
    100% { opacity: 0; transform: translateY(-4px); background: var(--ui-press); }
}
.sp-sugg__ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #e4efe8; color: var(--ui-green); }
.sp-sugg__ico svg { display: block; width: 18px; height: 18px; }
.sp-sugg__txt { flex: 1; min-width: 0; display: grid; }
.sp-sugg__txt b { font-weight: 700; }
.sp-sugg__txt small { font-size: 12.5px; color: var(--ui-text-2); }
.sp-sugg__badge { flex-shrink: 0; padding: 3px 8px; border-radius: 99px; background: #e4efe8; color: var(--ui-green); font-size: 12px; font-weight: 600; }
.sp-tap { position: absolute; left: 29px; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(31,107,78,.28); opacity: 0; animation: sp-s-tap .5s ease-out calc(var(--s) + 2.05s) both; }
@keyframes sp-s-tap { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(2.6); } }

.sp-res {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px;
    margin-top: 12px; /* Abzeichen ragt 10 px nach oben: Luft zum Suchfeld und dessen Fokus-Rahmen */
    background: var(--ui); color: var(--ui-text);
    box-shadow: 0 22px 50px -20px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.08);
    animation: sp-s-res .9s var(--ease) calc(var(--s) + 2.6s) both;
}
@keyframes sp-s-res { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.sp-res::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--sp-hi), 0 0 28px -4px var(--sp-hi); pointer-events: none; animation: sp-fade .7s ease calc(var(--s) + 3.2s) both; }
/* „Beispiel-Foto“ hat unten ein Namensschild: leicht vergrößert, damit es außerhalb des Runds liegt */
.sp-res__ph { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; overflow: hidden; }
.sp-res__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.2); transform-origin: 50% 20%; }
.sp-res__body { min-width: 0; display: grid; gap: 1px; }
.sp-res__body > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: sp-s-row .6s var(--ease) calc(var(--s) + 2.75s) both; }
.sp-res__body > :nth-child(2) { animation-delay: calc(var(--s) + 2.85s); }
.sp-res__body > :nth-child(3) { animation-delay: calc(var(--s) + 2.95s); }
@keyframes sp-s-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sp-res__body b { font: 700 16px/1.25 'Outfit', system-ui, sans-serif; }
.sp-res__body span { font-size: 12.5px; color: var(--ui-text-2); }
.sp-res__body .sp-res__km { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-green); font-weight: 600; }
.sp-res__km svg { display: block; width: 13px; height: 13px; flex-shrink: 0; }
.sp-res__badge { position: absolute; z-index: 2; top: -10px; right: 14px; padding: 4px 10px; border-radius: 99px; background: var(--sp-hi); color: #1c1a15; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); animation: sp-s-badge .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--s) + 3.2s) both; }
@keyframes sp-s-badge { from { opacity: 0; transform: scale(.5) translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
    .sp-search { font-size: 14px; gap: 8px; }
    .sp-sb { height: 48px; padding-left: 13px; }
    .sp-sb__go { width: 36px; height: 36px; }
    .sp-sugg { top: 54px; }
    .sp-res { padding: 10px 12px 10px 10px; gap: 10px; margin-top: 12px; }
    .sp-res__ph { width: 46px; height: 46px; border-radius: 12px; }
    .sp-res__body b { font-size: 15px; }
    .sp-res__body span { font-size: 12px; }
    .sp-res__person { display: none; }
}
@media (max-height: 500px) {
    .sp-search { margin-top: .4rem; gap: 6px; font-size: 13px; width: min(100%, 400px); }
    .sp-sb { height: 40px; border-radius: 12px; }
    .sp-sb__go { width: 32px; height: 32px; border-radius: 9px; }
    .sp-sugg { top: 46px; padding: 6px 10px; }
    .sp-sugg__ico { width: 28px; height: 28px; }
    .sp-res { padding: 7px 10px 7px 7px; border-radius: 14px; margin-top: 10px; }
    .sp-res__ph { width: 38px; height: 38px; border-radius: 10px; }
    .sp-res__body b { font-size: 14px; }
    .sp-res__body > :nth-child(2) { display: none; }
}

/* Reduzierte Bewegung: fertiges Bild, nur ruhiges Ein- und Ausblenden */
.sp--rm .sp-stage *, .sp--rm .sp-stage *::after, .sp--rm .sp-fx i { animation: none !important; }
.sp--rm .sp-stage { animation: sp-fade .5s ease both !important; }
.sp--rm.is-out { animation: sp-fade-out .4s ease forwards !important; }
.sp--rm.is-out .sp-stage { animation: none !important; }