.mco-fs {
    --mco-blue: #2563eb;
    --mco-ink: #0f172a;
    --mco-muted: #64748b;
    --mco-line: #e6eaf0;
    --mco-soft: #f4f6fa;
    --mco-radius: 16px;
    --mco-shadow: 0 4px 16px rgba(15,23,42,0.06);
    --mco-shadow-lg: 0 12px 32px rgba(15,23,42,0.10);
    max-width: 920px; margin: 0 auto;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--mco-ink);
    -webkit-text-size-adjust: 100%;
}
.mco-fs *, .mco-fs *::before, .mco-fs *::after { box-sizing: border-box; }

.mco-fs-form {
    background: #fff; border: 1px solid var(--mco-line); border-radius: var(--mco-radius);
    padding: 22px; box-shadow: var(--mco-shadow);
}
.mco-fs-row { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-end; flex-wrap: wrap; }
.mco-fs-field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.mco-fs-field-small { flex: 0 0 110px; }
.mco-fs-field label { font-size: 12px; font-weight: 700; color: var(--mco-muted); }
.mco-fs-field input, .mco-fs-field select {
    padding: 12px 14px; border: 1px solid var(--mco-line); border-radius: 12px; font-size: 15px;
    background: #fff; color: var(--mco-ink); transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}
.mco-fs-field input:focus, .mco-fs-field select:focus {
    outline: none; border-color: var(--mco-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.mco-fs-swap {
    flex: 0 0 auto; border: 1px solid var(--mco-line); background: var(--mco-soft); border-radius: 12px;
    width: 44px; height: 44px; cursor: pointer; font-size: 17px; margin-bottom: 1px;
    transition: background .15s ease, transform .15s ease;
}
.mco-fs-swap:hover { background: #e9edf3; transform: rotate(180deg); }
.mco-fs-submit {
    width: 100%; background: var(--mco-ink); color: #fff; border: 0; border-radius: 12px;
    padding: 15px; font-weight: 700; font-size: 15px; cursor: pointer; letter-spacing: .01em;
    transition: background .15s ease;
}
.mco-fs-submit:hover { background: var(--mco-blue); }

.mco-fs-autocomplete-wrap { position: relative; }
.mco-fs-autocomplete {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: #fff; border: 1px solid var(--mco-line); border-radius: 12px;
    box-shadow: var(--mco-shadow-lg); margin-top: 6px; overflow: hidden;
}
.mco-fs-suggest-item {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: #fff; border: 0; padding: 12px 14px; font-size: 14px; cursor: pointer; text-align: left;
    transition: background .12s ease;
}
.mco-fs-suggest-item:hover { background: var(--mco-soft); }
.mco-fs-suggest-city { font-weight: 700; color: var(--mco-ink); }
.mco-fs-suggest-code { font-size: 11px; font-weight: 700; color: #94a3b8; background: var(--mco-soft); border-radius: 6px; padding: 3px 8px; }

.mco-fs-layout { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; margin-top: 22px; }
.mco-fs-status { padding: 40px 16px; text-align: center; color: var(--mco-muted); grid-column: 1 / -1; }
.mco-fs-sidebar {
    background: #fff; border: 1px solid var(--mco-line); border-radius: var(--mco-radius); padding: 18px;
    position: sticky; top: 16px; box-shadow: var(--mco-shadow);
}
.mco-fs-filter-group { padding: 12px 0; border-bottom: 1px solid var(--mco-soft); }
.mco-fs-filter-group:first-child { padding-top: 0; }
.mco-fs-filter-group:last-child { border-bottom: 0; padding-bottom: 0; }
.mco-fs-filter-group h3 { margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mco-muted); }
.mco-fs-filter-row {
    display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mco-ink);
    padding: 6px 0; cursor: pointer;
}
.mco-fs-filter-row input { accent-color: var(--mco-blue); width: 16px; height: 16px; }
.mco-fs-filter-count { margin-left: auto; color: #94a3b8; font-size: 12px; font-weight: 600; }

.mco-fs-dropdown { position: relative; }
.mco-fs-dd-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
    font-size: 13.5px; font-weight: 600; color: #1e293b; cursor: pointer;
}
.mco-fs-dd-toggle:hover { border-color: #cbd5e1; }
.mco-fs-dd-caret { color: #94a3b8; transition: transform .2s ease; }
.mco-fs-dd-open .mco-fs-dd-caret { transform: rotate(180deg); }
.mco-fs-dd-panel {
    margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff;
}
.mco-fs-dd-search {
    width: 100%; border: 0; border-bottom: 1px solid #f1f5f9; padding: 10px 12px; font-size: 14px; outline: none;
}
.mco-fs-dd-actions { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.mco-fs-dd-link {
    background: #f1f5f9; border: 0; border-radius: 8px; padding: 6px 12px;
    font-size: 12px; font-weight: 700; color: #475569; cursor: pointer;
}
.mco-fs-dd-link:hover { background: #e2e8f0; }
.mco-fs-dd-list { max-height: 240px; overflow-y: auto; }
.mco-fs-dd-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    font-size: 13.5px; color: #1e293b; cursor: pointer; border-bottom: 1px solid #f8fafc;
}
.mco-fs-dd-item:last-child { border-bottom: 0; }
.mco-fs-dd-item:hover { background: #f8fafc; }
.mco-fs-dd-item input { accent-color: #2563eb; flex: 0 0 auto; }
.mco-fs-dd-item-name { flex: 1; }

.mco-fs-results { margin-top: 0; }
.mco-fs-results-head {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 2px 2px 16px; font-weight: 700; color: var(--mco-ink); font-size: 15px;
}
.mco-fs-results-sub { font-weight: 400; font-size: 12px; color: var(--mco-muted); }
.mco-fs-sort-tabs { display: flex; gap: 4px; background: var(--mco-soft); border-radius: 12px; padding: 4px; }
.mco-fs-sort-tab {
    border: 0; background: transparent; padding: 8px 16px; border-radius: 9px;
    font-size: 13px; font-weight: 700; color: var(--mco-muted); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mco-fs-sort-tab.mco-fs-tab-active { background: #fff; color: var(--mco-ink); box-shadow: 0 1px 4px rgba(15,23,42,0.1); }

@media (max-width: 780px) {
    .mco-fs-layout { grid-template-columns: 1fr; gap: 16px; }
    .mco-fs-sidebar { position: static; }
}

@media (max-width: 600px) {
    .mco-fs { padding: 0; }
    .mco-fs-form { padding: 16px; border-radius: 14px; }
    .mco-fs-row { gap: 10px; margin-bottom: 10px; }
    .mco-fs-field { min-width: calc(50% - 5px); }
    .mco-fs-field input, .mco-fs-field select { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
    .mco-fs-swap { order: 3; width: 100%; height: 40px; margin: 2px 0 4px; }
    .mco-fs-swap:hover { transform: none; }
    .mco-fs-field-small { flex: 1 1 calc(33% - 8px); min-width: 0; }
    .mco-fs-submit { padding: 16px; font-size: 16px; border-radius: 12px; }
    .mco-fs-results-head { padding: 0 2px 12px; font-size: 14px; }
    .mco-fs-sort-tabs { width: 100%; }
    .mco-fs-sort-tab { flex: 1; text-align: center; padding: 11px; }
    .mco-fs-sidebar { padding: 16px; border-radius: 14px; }
    .mco-fs-filter-row { padding: 9px 0; font-size: 15px; }
    .mco-fs-suggest-item { padding: 14px; }
    .mco-fs-dd-item { padding: 12px; font-size: 15px; }
}

.mco-fs-ticket {
    position: relative;
    display: grid; grid-template-columns: 160px 1fr 168px;
    align-items: center; gap: 20px;
    background: #fff; border: 1px solid var(--mco-line); border-radius: var(--mco-radius);
    padding: 20px 22px; margin-bottom: 14px;
    box-shadow: var(--mco-shadow);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mco-fs-ticket:hover { box-shadow: var(--mco-shadow-lg); transform: translateY(-2px); border-color: #d7deea; }

.mco-fs-badge {
    position: absolute; top: -11px; left: 18px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
    padding: 5px 11px; border-radius: 999px; text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(22,163,74,0.25);
}
.mco-fs-badge-cheap { background: #16a34a; color: #fff; }

.mco-fs-ticket-airline { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.mco-fs-airline-logo {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #334155); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.mco-fs-airline-name { font-size: 13.5px; font-weight: 700; color: var(--mco-ink); }
.mco-fs-chip {
    font-size: 10px; font-weight: 700; color: var(--mco-blue); background: #eff4ff;
    border-radius: 999px; padding: 3px 9px;
}

.mco-fs-ticket-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.mco-fs-route-time { display: flex; flex-direction: column; align-items: center; min-width: 108px; max-width: 140px; }
.mco-fs-route-time b { font-size: 20px; color: var(--mco-ink); letter-spacing: -.01em; }
.mco-fs-route-time span { font-size: 11px; color: var(--mco-muted); font-weight: 700; text-align: center; line-height: 1.3; }
.mco-fs-route-line { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mco-fs-route-line span { font-size: 11px; color: var(--mco-muted); font-weight: 600; }
.mco-fs-route-bar {
    width: 100%; min-width: 80px; height: 2px; position: relative;
    background: linear-gradient(90deg, #cbd5e1, #94a3b8, #cbd5e1);
}
.mco-fs-route-bar::before {
    content: ''; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px;
    border-radius: 50%; background: #94a3b8;
}
.mco-fs-route-bar::after {
    content: '✈'; position: absolute; right: -4px; top: -8px; font-size: 12px; color: var(--mco-blue);
}

.mco-fs-ticket-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mco-fs-ticket-price { font-size: 23px; font-weight: 800; color: var(--mco-ink); white-space: nowrap; letter-spacing: -.02em; }

@media (max-width: 700px) {
    .mco-fs-ticket {
        grid-template-columns: 1fr;
        grid-template-areas: "airline" "route" "price";
        gap: 16px; text-align: left; padding: 18px 16px;
    }
    .mco-fs-ticket-airline { grid-area: airline; flex-direction: row; align-items: center; gap: 10px; }
    .mco-fs-ticket-route { grid-area: route; gap: 12px; }
    .mco-fs-ticket-price { font-size: 22px; }
    .mco-fs-route-time { min-width: 0; max-width: none; align-items: flex-start; }
    .mco-fs-route-time:last-child { align-items: flex-end; }
    .mco-fs-route-time b { font-size: 18px; }
    .mco-fs-route-line { padding: 0 8px; }
    .mco-fs-badge { top: -10px; left: 14px; }
    .mco-fs-ticket-price-col {
        grid-area: price;
        flex-direction: row; align-items: center; justify-content: space-between;
        width: 100%; gap: 12px;
        border-top: 1px solid var(--mco-soft); padding-top: 16px;
    }
    .mco-fs-ticket-price-col .mco-fs-book-btn { flex: 0 0 auto; padding: 13px 22px; }
}

.mco-fs-book-btn {
    background: var(--mco-blue); color: #fff; border: 0; border-radius: 10px; padding: 11px 20px;
    font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, transform .1s ease; box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.mco-fs-book-btn:hover { background: #1d4ed8; }
.mco-fs-book-btn:active { transform: scale(0.97); }
.mco-fs-book-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.mco-fs-fallback-btn {
    display: inline-block; margin-top: 10px; background: var(--mco-ink); color: #fff !important;
    text-decoration: none; border-radius: 12px; padding: 13px 20px; font-weight: 700;
}


/* Animierter Flug-Loader */
.mco-fs-loader{max-width:760px;margin:28px auto;text-align:center;padding:24px 18px;border:1px solid #e5eaf2;border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.07);overflow:hidden}
.mco-fs-loader-sky{position:relative;height:92px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#eef5ff 0%,#f8fbff 100%)}
.mco-fs-loader-plane{position:absolute;left:-64px;top:33px;font-size:34px;line-height:1;filter:drop-shadow(0 5px 5px rgba(37,99,235,.22));animation:mcoFsFly 2.7s linear infinite}
.mco-fs-loader-cloud{position:absolute;width:50px;height:16px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:16px -7px 0 1px rgba(255,255,255,.95),31px 0 0 -2px rgba(255,255,255,.95)}
.mco-fs-loader-cloud.cloud-one{left:12%;top:23px;animation:mcoFsCloud 6s linear infinite}
.mco-fs-loader-cloud.cloud-two{left:65%;top:61px;transform:scale(.72);animation:mcoFsCloud 8s linear infinite reverse}
.mco-fs-loader-title{margin-top:17px;font-size:18px;font-weight:750;color:#334155}
.mco-fs-loader-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.mco-fs-loader-dots span{width:7px;height:7px;border-radius:50%;background:#2563eb;animation:mcoFsDot 1.2s ease-in-out infinite}
.mco-fs-loader-dots span:nth-child(2){animation-delay:.16s}.mco-fs-loader-dots span:nth-child(3){animation-delay:.32s}
@keyframes mcoFsFly{0%{left:-64px;transform:translateY(5px) rotate(2deg)}45%{transform:translateY(-7px) rotate(-2deg)}100%{left:calc(100% + 64px);transform:translateY(3px) rotate(2deg)}}
@keyframes mcoFsCloud{0%{transform:translateX(0)}50%{transform:translateX(18px)}100%{transform:translateX(0)}}
@keyframes mcoFsDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
@media (max-width:700px){.mco-fs-loader{margin:20px auto;padding:18px 12px;border-radius:16px}.mco-fs-loader-sky{height:76px}.mco-fs-loader-plane{top:26px;font-size:30px}.mco-fs-loader-title{font-size:16px}}
@media (prefers-reduced-motion:reduce){.mco-fs-loader-plane,.mco-fs-loader-cloud,.mco-fs-loader-dots span{animation:none}.mco-fs-loader-plane{left:50%;transform:translateX(-50%)}}
