/* Verbindungssuche */

#hv-jp { display: flex; flex-direction: column; gap: 1.2rem; box-sizing: border-box; padding: .5rem clamp(1rem, 3.5vw, 2.6rem) 2rem; max-width: 64rem; margin: 0 auto; width: 100%; color: inherit; font-size: .9rem; }
#hv-jp [hidden] { display: none !important; }

/* ---------- Kopf mit Formular ---------- */
#hv-jp .hv-jp__hero {
    padding: 1.3rem;
    border-radius: 1.4rem;
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 1rem 2.4rem rgba(91, 33, 182, .3);
}
#hv-jp .hv-jp__herohead { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
#hv-jp .hv-jp__heroicon { display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; border-radius: .9rem; background: rgba(255, 255, 255, .18); font-size: 1.2rem; }
#hv-jp .hv-jp__herohead h1 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
#hv-jp .hv-jp__herohead p { margin: .15rem 0 0; font-size: .8rem; opacity: .85; }

#hv-jp .hv-jp__form { display: flex; flex-direction: column; gap: .9rem; }
#hv-jp .hv-jp__route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: .75rem; }
#hv-jp .hv-jp__rail { display: flex; flex-direction: column; align-items: center; padding: 1.15rem 0; }
#hv-jp .hv-jp__dot { width: .85rem; height: .85rem; border: 3px solid #fff; border-radius: 50%; }
#hv-jp .hv-jp__railline { flex: 1; width: 0; margin: .25rem 0; border-left: 3px dotted rgba(255, 255, 255, .7); }
#hv-jp .hv-jp__pin { font-size: 1.05rem; line-height: 1; }
#hv-jp .hv-jp__fields { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
#hv-jp .hv-jp__field { position: relative; }
#hv-jp .hv-jp__field input {
    width: 100%;
    padding: .85rem 1rem;
    border: 2px solid transparent;
    border-radius: .9rem;
    background: #fff;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12);
}
#hv-jp .hv-jp__field input::placeholder { color: #6b7280; font-weight: 500; }
#hv-jp .hv-jp__field input:focus { border-color: #c4b5fd; outline: none; }
#hv-jp .hv-jp__field input.is-chosen { border-color: #86efac; }
#hv-jp .hv-jp__swap { align-self: center; display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1rem; cursor: pointer; transform: rotate(90deg); }
#hv-jp .hv-jp__swap:hover { background: rgba(255, 255, 255, .32); }
#hv-jp .hv-jp__suggest { position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; right: 0; margin: 0; padding: .3rem; max-height: 17rem; overflow-y: auto; list-style: none; border-radius: .9rem; background: #fff; color: #111827; box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .35); }
#hv-jp .hv-jp__suggest li { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: .6rem; cursor: pointer; }
#hv-jp .hv-jp__suggest li i { color: #7c3aed; }
#hv-jp .hv-jp__suggest li span { display: flex; flex-direction: column; min-width: 0; }
#hv-jp .hv-jp__suggest li small { color: #6b7280; }
#hv-jp .hv-jp__suggest li[aria-selected="true"], #hv-jp .hv-jp__suggest li:hover { background: #f3f0ff; }

#hv-jp .hv-jp__when { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
#hv-jp .hv-jp__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
#hv-jp .hv-jp__chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
#hv-jp .hv-jp__chip:hover { background: rgba(255, 255, 255, .22); }
#hv-jp .hv-jp__chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #5b21b6; }
#hv-jp .hv-jp__chip--input { padding: .3rem .8rem; cursor: text; }
#hv-jp .hv-jp__chip--input input { padding: .2rem 0; border: 0; background: transparent; color: #fff; color-scheme: dark; font-size: .85rem; font-weight: 700; }
#hv-jp .hv-jp__chip--input input:focus { outline: none; }

#hv-jp .hv-jp__options summary { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .82rem; font-weight: 700; cursor: pointer; opacity: .95; list-style: none; }
#hv-jp .hv-jp__options summary::-webkit-details-marker { display: none; }
#hv-jp .hv-jp__optbody { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: .6rem; }
#hv-jp .hv-jp__optgroup { display: flex; flex-direction: column; gap: .35rem; }
#hv-jp .hv-jp__optgroup > span { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

#hv-jp .hv-jp__go { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.2rem; border: 0; border-radius: 1rem; background: #fff; color: #5b21b6; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18); }
#hv-jp .hv-jp__go:hover { background: #f3f0ff; }
#hv-jp .hv-jp__go:disabled { opacity: .65; cursor: progress; }

/* ---------- Ergebnis ---------- */
#hv-jp .hv-jp__hint { display: flex; align-items: flex-start; gap: .6rem; margin: .3rem 0; opacity: .8; }
#hv-jp .hv-jp__hint--warn { padding: .9rem 1.1rem; border: 1px solid rgba(245, 158, 11, .45); border-radius: .9rem; background: rgba(245, 158, 11, .1); opacity: 1; }
#hv-jp .hv-jp__loading { display: flex; align-items: center; gap: .5rem; padding: 1.2rem .4rem; opacity: .85; }
#hv-jp .hv-jp__loading span { width: .55rem; height: .55rem; border-radius: 50%; background: #7c3aed; animation: hv-jp-pulse 1s infinite ease-in-out; }
#hv-jp .hv-jp__loading span:nth-child(2) { animation-delay: .15s; }
#hv-jp .hv-jp__loading span:nth-child(3) { animation-delay: .3s; margin-right: .4rem; }
@keyframes hv-jp-pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

#hv-jp .hv-jp__resulthead h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
#hv-jp .hv-jp__resulthead h2 i { margin: 0 .35rem; font-size: .8rem; opacity: .55; }
#hv-jp .hv-jp__resulthead p { margin: .2rem 0 .8rem; font-size: .78rem; opacity: .7; }
#hv-jp .hv-jp__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .7rem; }
#hv-jp .hv-jp__conn { overflow: hidden; border: 1px solid rgba(148, 163, 184, .3); border-radius: 1.1rem; background: rgba(255, 255, 255, .55); box-shadow: 0 .2rem .8rem rgba(15, 23, 42, .06); }
.dark #hv-jp .hv-jp__conn { background: rgba(255, 255, 255, .04); box-shadow: none; }
#hv-jp .hv-jp__head { display: flex; flex-direction: column; gap: .7rem; width: 100%; padding: 1rem 1.1rem; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
#hv-jp .hv-jp__head:hover { background: rgba(124, 58, 237, .06); }
#hv-jp .hv-jp__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
#hv-jp .hv-jp__times { display: flex; align-items: baseline; gap: .55rem; font-variant-numeric: tabular-nums; }
#hv-jp .hv-jp__times b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
#hv-jp .hv-jp__times i { font-size: .8rem; opacity: .5; }
#hv-jp .hv-jp__badges { display: flex; align-items: center; gap: .6rem; }
#hv-jp .hv-jp__rel { padding: .2rem .6rem; border-radius: 999px; background: rgba(22, 163, 74, .15); color: #15803d; font-size: .72rem; font-weight: 800; }
.dark #hv-jp .hv-jp__rel { color: #86efac; }
#hv-jp .hv-jp__warn { color: #d97706; }
#hv-jp .hv-jp__caret { opacity: .55; transition: transform .15s ease; }
#hv-jp .hv-jp__head[aria-expanded="true"] .hv-jp__caret { transform: rotate(180deg); }
#hv-jp .hv-jp__bar { display: flex; align-items: center; height: .45rem; }
#hv-jp .hv-jp__bar span { height: 100%; border-radius: 999px; }
#hv-jp .hv-jp__bar .hv-jp__gap { flex: 0 0 .35rem; background: transparent; }
#hv-jp .hv-jp__bottom { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
#hv-jp .hv-jp__chain { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
#hv-jp .hv-jp__chev { font-size: .55rem; opacity: .5; }
#hv-jp .hv-jp__meta { font-size: .8rem; font-weight: 600; opacity: .8; }
#hv-jp .haver-line { display: inline-block; min-width: 2.1rem; padding: .12rem .5rem; border-radius: .35rem; background: var(--hv-line, #475569); color: #fff; font-size: .76rem; font-weight: 800; line-height: 1.35; text-align: center; }

#hv-jp .hv-jp__detail { padding: .4rem 1.1rem 1.1rem; border-top: 1px solid rgba(148, 163, 184, .22); }
#hv-jp .hv-jp__leg { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .5rem; padding: .8rem 0 .2rem; }
#hv-jp .hv-jp__legtime { display: flex; flex-direction: column; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: .95rem; }
#hv-jp .hv-jp__legtime span { font-weight: 600; opacity: .65; }
#hv-jp .hv-jp__legbody { position: relative; display: flex; flex-direction: column; gap: .5rem; padding-left: 1.3rem; border-left: 5px solid var(--leg, #475569); border-radius: 2px; }
#hv-jp .hv-jp__legstop { position: relative; font-weight: 700; }
#hv-jp .hv-jp__legstop::before { content: ""; position: absolute; left: -1.78rem; top: .35rem; width: .8rem; height: .8rem; border: 3px solid var(--leg, #475569); border-radius: 50%; background: #fff; }
.dark #hv-jp .hv-jp__legstop::before { background: #0b0d10; }
#hv-jp .hv-jp__legstop a { color: inherit; text-decoration: none; }
#hv-jp .hv-jp__legstop a:hover { text-decoration: underline; }
#hv-jp .hv-jp__legline { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .8rem; opacity: .9; }
#hv-jp .hv-jp__linklink { margin-left: auto; color: inherit; font-size: .72rem; text-decoration: underline; opacity: .7; }
#hv-jp .hv-jp__calls { font-size: .78rem; }
#hv-jp .hv-jp__calls summary { cursor: pointer; opacity: .75; }
#hv-jp .hv-jp__calls ol { margin: .35rem 0 0; padding: 0; list-style: none; }
#hv-jp .hv-jp__calls li { padding: .12rem 0; }
#hv-jp .hv-jp__calls b { display: inline-block; min-width: 3rem; font-variant-numeric: tabular-nums; }
#hv-jp .hv-jp__wait { display: flex; align-items: center; gap: .6rem; margin: .5rem 0 .1rem; padding: .55rem .8rem; border-radius: .7rem; background: rgba(124, 58, 237, .1); font-size: .8rem; font-weight: 600; }
#hv-jp .hv-jp__notice { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgba(245, 158, 11, .45); border-radius: .7rem; background: rgba(245, 158, 11, .1); color: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; }
#hv-jp .hv-jp__notice i { margin-top: .15rem; color: #d97706; }
#hv-jp .hv-jp__later { align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem; border: 1px solid rgba(124, 58, 237, .5); border-radius: .9rem; background: transparent; color: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
#hv-jp .hv-jp__later:hover { background: rgba(124, 58, 237, .1); }

@media (max-width: 767px) {
    #hv-jp .hv-jp__hero { padding: 1rem; border-radius: 1.1rem; }
    #hv-jp .hv-jp__route { grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; }
    #hv-jp .hv-jp__times b { font-size: 1.3rem; }
}