/*
 * Hero-Motion – App-Telefon (Vorschau, „Ausblick · Die App 2027“). Markup: sections/app-phone.php, Ablauf: app-phone.js.
 * Schritt-Klassen .ap-s1 … .ap-s7 liegen am Wurzelelement .ap und sammeln sich während eines Durchlaufs an.
 */

.ap { position: relative; display: grid; justify-items: center; gap: 18px; font-family: var(--bl-font); -webkit-font-smoothing: antialiased; }
.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap p, .ap h4, .ap dl, .ap dd { margin: 0; }

/* ---------------------------------------------------------------- Gerät */
.ap__device {
    position: relative; width: 270px; height: 560px; padding: 10px; border-radius: 52px;
    background: linear-gradient(145deg, #4a5a52 0%, #1d2a24 38%, #0b130f 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 4px #0a110d,
        0 60px 90px -45px rgba(5, 15, 10, .85), 0 30px 40px -30px rgba(0, 0, 0, .5);
}
.ap__key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#3a4a42, #141d18); }
.ap__key--power { right: -2px; top: 150px; height: 74px; }
.ap__key--up { left: -2px; top: 128px; height: 44px; }
.ap__key--down { left: -2px; top: 182px; height: 44px; }
.ap__screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: #0f1c16; isolation: isolate; }
.ap__glare {
    position: absolute; inset: 10px; z-index: 30; border-radius: 42px; pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .05) 100%);
}
.ap__homebar { position: absolute; left: 50%; bottom: 7px; z-index: 25; width: 96px; height: 4px; border-radius: 4px; transform: translateX(-50%); background: rgba(255, 255, 255, .6); }
.ap--b .ap__homebar, .ap--c .ap__homebar { background: rgba(20, 32, 26, .5); }

.ap__status { position: absolute; left: 0; right: 0; top: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0 30px; font: 600 12.5px/1 var(--bl-font); }
.ap__status--light { color: #f3f6f4; }
.ap__status--dark { color: #14201a; }
.ap__status-ico { display: inline-flex; align-items: center; gap: 5px; }
.ap__status-ico svg { height: 10px; width: auto; fill: currentColor; }
.ap-b__island { position: absolute; top: 10px; left: 50%; z-index: 16; width: 84px; height: 24px; border-radius: 14px; background: #030504; transform: translateX(-50%); }

.ap__stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
/* Android/iOS in der App-Karte: groß, über dem Telefon */
.hs-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------- gemeinsame Bausteine */
.ap-push { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 20px; text-align: left; }
.ap-push__icon {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(150deg, #2a6a50, #174632); color: var(--bl-acc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ap-push__icon svg { width: 18px; height: 18px; }
.ap-push__body { min-width: 0; }
.ap-push__top { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; }
.ap-push__top b { font-weight: 600; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-push__top span { flex: none; opacity: .5; }
.ap-push strong { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; }
.ap-push p { margin-top: 1px; font-size: 11px; line-height: 1.35; opacity: .8; }

.ap-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; padding: 3px; border-radius: 11px; font-size: 11px; font-weight: 600; }
.ap-seg__opt { position: relative; z-index: 1; padding: 6px 0; text-align: center; transition: color .3s ease; }
.ap-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1); }
.ap-seg--dark { background: rgba(255, 255, 255, .07); color: rgba(238, 243, 239, .55); }
.ap-seg--dark .ap-seg__thumb { background: rgba(255, 255, 255, .15); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.ap-seg--dark .ap-seg__opt--a { color: #fff; }
.ap-seg--light { background: rgba(255, 255, 255, .72); color: #6a726c; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px -12px rgba(20, 32, 26, .5); }
.ap-seg--light .ap-seg__thumb { background: #14201a; }
.ap-seg--light .ap-seg__opt--a { color: #fff; }

.ap-live { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--bl-mint); box-shadow: 0 0 0 3px rgba(125, 238, 194, .2); animation: ap-blink 2s ease-in-out infinite; }
@keyframes ap-blink { 50% { opacity: .35; } }

.ap-tap { position: absolute; left: 50%; top: 50%; z-index: 3; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 255, 255, .4); opacity: 0; pointer-events: none; }
@keyframes ap-tap { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ap-pop { from { transform: scale(.4); } to { transform: scale(1); } }

.ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; padding: 12px 22px 24px; font-size: 15px; }
.ap-tabs--dark { background: linear-gradient(180deg, rgba(12, 22, 18, 0), rgba(12, 22, 18, .96) 38%); color: rgba(238, 243, 239, .38); }
.ap-tabs--dark .is-on { color: var(--bl-acc); }
.ap-tabs--light { background: rgba(251, 249, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(20, 32, 26, .08); color: #9aa19c; }
.ap-tabs--light .is-on { color: var(--bl-green); }

/* Symbol-Kacheln und Chips (A, B, C) */
.ap-a__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; background: rgba(255, 255, 255, .07); color: rgba(238, 243, 239, .75); }
.ap-a__ico--amber { background: linear-gradient(150deg, #f6cf6a, #e5a63a); color: #3b2a0b; }
.ap-a__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ap-a__chips em { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); color: rgba(238, 243, 239, .75); }
.ap-a__chips--light em { background: #eef1ec; color: #4d5650; }

/* ---------------------------------------------------------------- A: Live-Postfach (dunkel) */
.ap-a {
    position: absolute; inset: 0; color: #eef3ef;
    background: radial-gradient(120% 55% at 100% 0%, rgba(125, 238, 194, .11), transparent 60%), linear-gradient(180deg, #14261e, #0c1612);
}
.ap-a__island {
    position: absolute; top: 10px; left: 50%; z-index: 16; width: 84px; height: 24px; overflow: hidden;
    border-radius: 14px; background: #030504; transform: translateX(-50%);
    transition: width .55s cubic-bezier(.3, 1.25, .5, 1), height .55s cubic-bezier(.3, 1.25, .5, 1), border-radius .55s ease;
}
.ap-a__island-cam { position: absolute; right: 10px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3c55, #070b10 60%); transition: opacity .2s; }
.ap-push--island { position: absolute; left: 4px; right: 4px; top: 4px; color: #f1f5f2; opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .3s ease; }
.ap-s1 .ap-a__island { width: 236px; height: 80px; border-radius: 28px; }
.ap-s1 .ap-a__island-cam { opacity: 0; }
.ap-s1 .ap-push--island { opacity: 1; transform: none; transition-delay: .22s; }
.ap-s2 .ap-a__island { width: 84px; height: 24px; border-radius: 14px; }
.ap-s2 .ap-a__island-cam { opacity: 1; }
.ap-s2 .ap-push--island { opacity: 0; transform: scale(.92); transition-delay: 0s; }

.ap-a__head { padding: 50px 16px 0; }
.ap-a__bar { display: flex; justify-content: space-between; align-items: center; }
.ap-a__logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: var(--bl-acc); }
.ap-a__logo svg { width: 16px; height: 16px; }
.ap-a__bell { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); font-size: 12px; color: #dfe7e2; }
.ap-a__badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bl-acc); color: #1c1a15; font: 800 9.5px/17px var(--bl-font); text-align: center; box-shadow: 0 0 0 2px #13241d; }
.ap-a__n3 { display: none; }
.ap-s2 .ap-a__n2 { display: none; }
.ap-s2 .ap-a__n3 { display: inline-block; animation: ap-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.ap-a__head h4 { margin-top: 14px; font: 800 24px/1.05 var(--bl-font-head); letter-spacing: -.02em; color: #f6f8f6; }
.ap-a__sub { margin-top: 5px; display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: rgba(238, 243, 239, .6); }

.ap-a__list { display: grid; gap: 8px; padding: 14px 12px 0; }
.ap-a__item {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start;
    max-height: 120px; padding: 11px; border-radius: 16px; overflow: hidden;
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07);
}
.ap-a__txt { min-width: 0; display: grid; gap: 2px; }
.ap-a__txt b { font-size: 12.5px; font-weight: 700; color: #f4f7f5; }
.ap-a__txt small { font-size: 10px; color: rgba(238, 243, 239, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-a__tag { align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ap-a__tag--new { background: var(--bl-acc); color: #1c1a15; }
.ap-a__tag--done { display: none; background: rgba(125, 238, 194, .15); color: var(--bl-mint); }
.ap-a__tag--done svg { width: 9px; height: 9px; }
/* Neue Anfrage: zuerst eingeklappt, rutscht in Schritt 2 oben in die Liste */
.ap-a__item--new {
    max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0;
    border-color: rgba(242, 181, 68, .45); background: linear-gradient(95deg, rgba(242, 181, 68, .16), rgba(255, 255, 255, .04) 65%);
    transition: max-height .6s cubic-bezier(.2, .8, .2, 1), padding .6s cubic-bezier(.2, .8, .2, 1), margin .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease .15s;
}
.ap-s2 .ap-a__item--new { max-height: 120px; padding-top: 11px; padding-bottom: 11px; margin-bottom: 0; opacity: 1; }
.ap-a__item--new .ap-tap { left: 40%; }
.ap-s3 .ap-a__item--new .ap-tap { animation: ap-tap .6s ease-out; }
.ap-s7 .ap-a__tag--new { display: none; }
.ap-s7 .ap-a__tag--done { display: inline-flex; }

.ap-a__sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; padding: 8px 16px 28px; border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, #1e352b, #142520); border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -30px 60px -10px rgba(0, 0, 0, .6); transform: translateY(105%); transition: transform .55s cubic-bezier(.2, .9, .25, 1);
}
.ap-s4 .ap-a__sheet { transform: none; }
.ap-s7 .ap-a__sheet { transform: translateY(105%); }
.ap-a__grab { display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.ap-a__sheet-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.ap-a__sheet-head b { display: block; font-size: 15px; font-weight: 800; }
.ap-a__sheet-head small { font-size: 10.5px; color: rgba(238, 243, 239, .6); }
.ap-a__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.ap-a__facts div { min-width: 0; padding: 8px 10px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.ap-a__facts dt { font-size: 8.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(238, 243, 239, .5); }
.ap-a__facts dd { margin-top: 2px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ok { display: inline-flex !important; align-items: center; gap: 4px; color: var(--bl-mint); }
.ap-ok svg { width: 10px; height: 10px; }
.ap-a__note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10.5px; color: rgba(238, 243, 239, .6); }
.ap-a__note i { color: var(--bl-acc); }
.ap-a__cta { position: relative; display: grid; height: 40px; margin-top: 12px; overflow: hidden; border-radius: 13px; background: var(--bl-acc); color: #1c1a15; font-size: 12.5px; font-weight: 800; transition: background-color .35s ease; }
.ap-a__cta > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .35s ease, opacity .35s ease; }
.ap-a__cta-2 { opacity: 0; transform: translateY(100%); }
.ap-a__cta-2 svg { width: 13px; height: 13px; }
.ap-a__cta .ap-tap { background: rgba(0, 0, 0, .2); }
.ap-s5 .ap-a__cta .ap-tap { animation: ap-tap .6s ease-out; }
.ap-s6 .ap-a__cta { background: var(--bl-mint); }
.ap-s6 .ap-a__cta-1 { opacity: 0; transform: translateY(-100%); }
.ap-s6 .ap-a__cta-2 { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- B: Karte Region / Deutschland */
.ap-b { position: absolute; inset: 0; background: #ece8de; color: #14201a; }
.ap-b__map { position: absolute; inset: 0; overflow: hidden; }
.ap-b__region { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 126px 268px; transition: transform .9s cubic-bezier(.6, 0, .2, 1), opacity .6s ease; }
.ap-b__land { fill: #ece8de; }
.ap-b__forest { fill: #d8e2d1; }
.ap-b__river { fill: none; stroke: #bcd7de; stroke-width: 9; stroke-linecap: round; }
.ap-b__road { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.ap-b__road--main { stroke: #fbf1d4; stroke-width: 6; }
.ap-b__place { font: 700 9px var(--bl-font); fill: #4b544e; }
.ap-b__place--sm { font-size: 7.5px; font-weight: 600; fill: #7a827c; }
.ap-b__radius { fill: rgba(31, 107, 78, .07); stroke: var(--bl-green); stroke-width: 1.5; stroke-dasharray: 4 5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .9s cubic-bezier(.2, .9, .3, 1.1); }
.ap-s1 .ap-b__radius { transform: scale(1); }
.ap-b__pin { fill: var(--bl-acc); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
.ap-s1 .ap-b__pin:not(.ap-b__pin--new) { transform: scale(1); }
.ap-b__pin--new { fill: #e2762a; }
.ap-s7 .ap-b__pin--new { transform: scale(1); }
.ap-b__newring { fill: none; stroke: #e2762a; stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.ap-s7 .ap-b__newring { animation: ap-ring 1.4s ease-out 2; }
@keyframes ap-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.ap-b__me { fill: var(--bl-green); stroke: #fff; stroke-width: 3; }
.ap-b__me-ring { fill: rgba(31, 107, 78, .2); transform-box: fill-box; transform-origin: center; animation: ap-pulse 2.4s ease-out infinite; }
@keyframes ap-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.3); opacity: 0; } }

.ap-b__de { position: absolute; inset: 180px 22px 112px; display: grid; place-items: center; opacity: 0; transform: scale(1.9); transition: opacity .6s ease, transform .9s cubic-bezier(.6, 0, .2, 1); pointer-events: none; }
.ap-de { width: 100%; height: 100%; overflow: visible; }
.ap-de__dots circle { fill: #b4c1b8; opacity: 0; transition: opacity .3s ease var(--d, 0s); }
.ap-de__pin { fill: var(--bl-acc); stroke: #fff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
.ap-de__home { fill: var(--bl-green); stroke: #fff; stroke-width: 2; }
.ap-de__home-ring { fill: rgba(31, 107, 78, .22); transform-box: fill-box; transform-origin: center; animation: ap-pulse 2.4s ease-out infinite; }
.ap-s3 .ap-b__region { transform: scale(.28); opacity: 0; }
.ap-s3 .ap-b__de { opacity: 1; transform: none; }
.ap-s3 .ap-de__dots circle { opacity: 1; }
.ap-s3 .ap-de__pin { transform: scale(1); }
.ap-s5 .ap-b__region { transform: none; opacity: 1; }
.ap-s5 .ap-b__de { opacity: 0; transform: scale(1.9); }
.ap-s5 .ap-de__dots circle { opacity: 0; transition-delay: 0s; }
.ap-s5 .ap-de__pin { transform: scale(0); transition-delay: 0s; }

.ap-b__head { position: absolute; left: 12px; right: 12px; top: 46px; z-index: 5; }
.ap-b__search { display: grid; grid-template-columns: 14px minmax(0, 1fr) 14px; gap: 9px; align-items: center; height: 38px; padding: 0 13px; border-radius: 13px; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 24px -14px rgba(20, 32, 26, .5); font-size: 11.5px; color: #78807a; }
.ap-b__search i { font-size: 11px; color: #4b544e; }
.ap-b__head .ap-seg { margin-top: 8px; }
.ap-s3 .ap-seg--light .ap-seg__thumb { transform: translateX(100%); }
.ap-s3 .ap-seg--light .ap-seg__opt--a { color: #6a726c; }
.ap-s3 .ap-seg--light .ap-seg__opt--b { color: #fff; }
.ap-s5 .ap-seg--light .ap-seg__thumb { transform: none; }
.ap-s5 .ap-seg--light .ap-seg__opt--a { color: #fff; }
.ap-s5 .ap-seg--light .ap-seg__opt--b { color: #6a726c; }
.ap-seg--light .ap-tap { background: rgba(20, 32, 26, .2); }
.ap-s2 .ap-seg__opt--b .ap-tap { animation: ap-tap .6s ease-out; }
.ap-s4 .ap-seg__opt--a .ap-tap { animation: ap-tap .6s ease-out; }

.ap-b__chip { position: absolute; left: 50%; top: 138px; z-index: 5; display: grid; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; }
.ap-b__chip > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(20, 32, 26, .9); color: #f1f5f2; transition: opacity .35s ease, transform .35s ease; }
.ap-b__chip-b { opacity: 0; transform: translateY(6px); }
.ap-b__chip-b i { color: var(--bl-acc); }
.ap-s3 .ap-b__chip-a { opacity: 0; transform: translateY(-6px); }
.ap-s3 .ap-b__chip-b { opacity: 1; transform: none; }
.ap-s5 .ap-b__chip-a { opacity: 1; transform: none; }
.ap-s5 .ap-b__chip-b { opacity: 0; transform: translateY(6px); }

.ap-push--drop {
    position: absolute; left: 8px; right: 8px; top: 8px; z-index: 18; color: #14201a;
    background: rgba(250, 250, 247, .88); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .04);
    transform: translateY(-130%); transition: transform .55s cubic-bezier(.2, .9, .25, 1.05);
}
.ap-s6 .ap-push--drop { transform: none; }
.ap-s7 .ap-push--drop { transform: translateY(-130%); }
.ap-b__card {
    position: absolute; left: 10px; right: 10px; bottom: 22px; z-index: 6; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -18px rgba(20, 32, 26, .55);
    transform: translateY(150%); transition: transform .6s cubic-bezier(.2, .9, .25, 1) .25s;
}
.ap-s7 .ap-b__card { transform: none; }
.ap-b__card-txt { min-width: 0; display: grid; gap: 2px; }
.ap-b__card-txt b { font-size: 12.5px; }
.ap-b__card-txt small { font-size: 10px; color: #6f7771; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-b__go { padding: 8px 10px; border-radius: 10px; background: var(--bl-green); color: #f3f8f4; font-size: 10.5px; font-weight: 800; }

/* ---------------------------------------------------------------- C: Schwebende Oberfläche (gewählt) – die Suche */
.ap-c__stage { position: relative; padding: 0 64px; perspective: 1300px; }
.ap--c .ap__device { transform: rotateY(-15deg) rotateX(5deg) rotateZ(1deg); animation: ap-sway 9s ease-in-out infinite; }
@keyframes ap-sway {
    0%, 100% { transform: rotateY(-15deg) rotateX(5deg) rotateZ(1deg); }
    50% { transform: rotateY(-8deg) rotateX(3deg) rotateZ(0deg) translateY(-6px); }
}
.ap-c { position: absolute; inset: 0; padding: 50px 14px 0; background: linear-gradient(180deg, #f8f5ee, #ebe6da); color: #14201a; }
.ap-c__head small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--bl-green-text); }
.ap-c__head b { display: block; margin-top: 2px; font: 800 22px/1.1 var(--bl-font-head); letter-spacing: -.01em; }

/* Suchfeld: „Pforzheim“ wird getippt, danach erscheinen die Treffer (Durchlauf 10 s, wiederholt) */
.ap-c__search {
    display: grid; grid-template-columns: 14px minmax(0, 1fr) 30px; gap: 9px; align-items: center; height: 40px; margin-top: 10px; padding: 0 6px 0 13px;
    border-radius: 14px; background: #fff; border: 1.5px solid var(--bl-green); box-shadow: 0 0 0 4px rgba(31, 107, 78, .12), 0 12px 24px -16px rgba(20, 32, 26, .5);
}
.ap-c__search > i { font-size: 12px; color: var(--bl-green); }
.ap-c__field { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 700; color: #14201a; }
.ap-c__typed { white-space: nowrap; clip-path: inset(0 100% 0 0); }
.ap-c__caret { width: 1.5px; height: 15px; margin-left: 1px; background: var(--bl-green); animation: ap-caret 1s steps(1) infinite; }
@keyframes ap-caret { 50% { opacity: 0; } }
.ap-c__go { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--bl-green); color: #f3f8f4; font-size: 11px; }
.ap-c__filters { display: flex; gap: 6px; margin-top: 9px; }
.ap-c__filters span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; background: #fff; color: #4b544e; border: 1px solid rgba(20, 32, 26, .1); white-space: nowrap; }
.ap-c__filters .is-on { background: #14201a; color: #f3f6f4; border-color: #14201a; }
.ap-c__filters .is-on i { color: var(--bl-acc); }
.ap-c__count { margin: 10px 2px 7px; font-size: 10.5px; color: #6f7771; }
.ap-c__count b { color: #14201a; }
.ap-c__list { display: grid; gap: 6px; }
.ap-c__row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 8px 9px 8px 10px;
    border-radius: 15px; background: #fff; border: 1px solid rgba(20, 32, 26, .06); box-shadow: 0 8px 18px -16px rgba(20, 32, 26, .5);
}
.ap-c__row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.ap-c__row > div { min-width: 0; }
.ap-c__row b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-c__row small { display: block; font-size: 9.5px; color: #6f7771; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-c__km { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 9.5px; font-weight: 700; color: var(--bl-green-text); white-space: nowrap; }
.ap-c__km i { font-size: 8px; }
.ap-c__call { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bl-green); color: #f3f8f4; font-size: 11px; box-shadow: 0 6px 12px -6px rgba(31, 107, 78, .8); }
.ap-c__count, .ap-c__row { opacity: 0; transform: translateY(10px); }
.is-in .ap-c__typed { animation: ap-type 10s steps(9, end) infinite; }
.is-in .ap-c__count, .is-in .ap-c__row { animation: ap-results 10s cubic-bezier(.2, .8, .2, 1) infinite; }
.is-in .ap-c__row:nth-child(1) { animation-delay: .12s; }
.is-in .ap-c__row:nth-child(2) { animation-delay: .24s; }
.is-in .ap-c__row:nth-child(3) { animation-delay: .36s; }
@keyframes ap-type { 0%, 4% { clip-path: inset(0 100% 0 0); } 16%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ap-results { 0%, 20% { opacity: 0; transform: translateY(10px); } 26%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px); } }

/* Schwebende Karten */
.ap-c__float { position: absolute; z-index: 5; display: grid; align-items: center; gap: 10px; border-radius: 18px; opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .9, .3, 1.1); }
.ap-c__float b { display: block; font-size: 12px; }
.ap-c__float small { display: block; font-size: 10px; }
/* Suchen in: Region / Deutschland (wechselt von selbst) */
.ap-c__float--scope { left: 0; top: 96px; grid-template-columns: 36px auto; padding: 12px 14px; background: #14201a; color: #eef3ef; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); transform: translate(-26px, 10px); }
.ap-c__float-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(242, 181, 68, .16); color: var(--bl-acc); font-size: 15px; }
.ap-c__float--scope b { font-size: 10.5px; font-weight: 600; color: rgba(238, 243, 239, .6); }
.ap-c__mini { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 5px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .08); font-size: 10.5px; font-weight: 700; }
.ap-c__mini-a, .ap-c__mini-b { position: relative; z-index: 1; padding: 5px 9px; text-align: center; color: rgba(238, 243, 239, .6); }
.ap-c__mini-a { color: #1c1a15; }
.ap-c__mini-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: var(--bl-acc); }
.is-in .ap-c__mini-thumb { animation: ap-scope 6s cubic-bezier(.5, 0, .2, 1) 1.5s infinite; }
.is-in .ap-c__mini-a { animation: ap-scope-a 6s steps(1) 1.5s infinite; }
.is-in .ap-c__mini-b { animation: ap-scope-b 6s steps(1) 1.5s infinite; }
@keyframes ap-scope { 0%, 42% { transform: none; } 50%, 92% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes ap-scope-a { 0%, 45% { color: #1c1a15; } 46%, 95% { color: rgba(238, 243, 239, .6); } 96%, 100% { color: #1c1a15; } }
@keyframes ap-scope-b { 0%, 45% { color: rgba(238, 243, 239, .6); } 46%, 95% { color: #1c1a15; } 96%, 100% { color: rgba(238, 243, 239, .6); } }
/* Anruf mit einem Tipp */
.ap-c__float--call { right: 0; top: 286px; grid-template-columns: 34px auto 36px; padding: 10px 10px 10px 11px; background: #fff; color: #14201a; box-shadow: 0 30px 50px -24px rgba(10, 20, 15, .55); transform: translate(26px, 0); }
.ap-c__float--call img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ap-c__float--call small { color: var(--bl-green-text); font-weight: 600; }
.ap-c__call--lg { width: 36px; height: 36px; font-size: 13px; }
.is-in .ap-c__call--lg { animation: ap-ring-call 2.4s ease-in-out 2.6s infinite; }
@keyframes ap-ring-call {
    0%, 70%, 100% { box-shadow: 0 6px 12px -6px rgba(31, 107, 78, .8), 0 0 0 0 rgba(31, 107, 78, .4); }
    85% { box-shadow: 0 6px 12px -6px rgba(31, 107, 78, .8), 0 0 0 10px rgba(31, 107, 78, 0); }
}
/* Anfrage: klein und ruhig */
.ap-c__float--lead { left: 14px; bottom: 74px; grid-template-columns: 26px auto; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(252, 251, 247, .96); color: #14201a; box-shadow: 0 22px 40px -22px rgba(10, 20, 15, .55), 0 0 0 1px rgba(20, 32, 26, .06); transform: translate(-20px, 0); }
.ap-c__lead-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bl-acc); color: #1c1a15; font-size: 11px; }
.ap-c__float--lead b { font-size: 10.5px; }
.ap-c__float--lead small { font-size: 9.5px; color: #6f7771; }
.is-in .ap-c__float { opacity: 1; transform: none; animation: ap-bob 6s ease-in-out infinite; }
.is-in .ap-c__float--scope { transition-delay: .5s; animation-delay: .5s; }
.is-in .ap-c__float--call { transition-delay: 1.1s; animation-delay: 1.8s; }
.is-in .ap-c__float--lead { transition-delay: 1.7s; animation-delay: 3s; }
@keyframes ap-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Store-Knöpfe (groß, eigene Gestaltung – keine offiziellen Store-Abzeichen, solange es die App nicht gibt) */
.ap-store { display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px 10px 14px; border-radius: 14px; background: #0b1511; border: 1px solid rgba(246, 243, 236, .22); color: #f6f3ec; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .75); }
.ap-store i { width: 26px; font-size: 26px; text-align: center; }
.ap-store small { display: block; font-size: 10.5px; letter-spacing: .03em; color: rgba(246, 243, 236, .6); }
.ap-store b { display: block; font: 700 18px/1.1 var(--bl-font-head); }

/* ---------------------------------------------------------------- Einbau in die App-Karte (Ausblick B) und Zeitleiste (A) */
/* Telefon steht unten fast bündig in der Karte: nur der Rahmen läuft unter den Kartenrand (Knöpfe und Karten unten bleiben sichtbar) */
.hs-leg--plan .ap { zoom: .82; margin: 30px auto 0; }
/* Hinweis unter dem Telefon: Vorschau, nicht das echte App-Design */
.ap__note { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--bl-text-3); background: var(--bl-card-sunken); border: 1px dashed var(--bl-border-strong); }
.ap__note i { font-size: 12px; }
.hs-leg--plan .ap__note { color: rgba(246, 243, 236, .75); background: rgba(246, 243, 236, .07); border-color: rgba(246, 243, 236, .25); }
.hs-leg--plan .ap__stores { display: none; }
.hs-leg--plan .ap--c .ap-c__stage { padding: 0 44px; }
@media (max-width: 560px) {
    .hs-stores { flex-wrap: nowrap; }
    .hs-stores .ap-store { flex: 1 1 0; min-width: 0; gap: 9px; padding: 9px 10px 9px 11px; }
    .hs-stores .ap-store i { width: 22px; font-size: 22px; }
    .hs-stores .ap-store b { font-size: 16px; }
    .hs-leg--plan .ap { zoom: .76; }
    .hs-leg--plan .ap--c .ap-c__stage { padding: 0 30px; }
}

/* Kurzer Rücksprung zwischen zwei Durchläufen ohne sichtbares Zurückfahren */
.ap.ap-reset *, .ap.ap-reset *::before, .ap.ap-reset *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .ap *, .ap *::before, .ap *::after { transition: none !important; animation: none !important; }
    .ap--c .ap__device { transform: rotateY(-12deg) rotateX(4deg); }
}