/* ==========================================================================
   O4U Kleinanzeigen: Übersicht /kleinanzeigen/ und Karten (auch Detailseite)
   Vorlage: docs/plans/kleinanzeigen_mockups/Main.dc.html, UebersichtMobil.dc.html,
   FilterMobil.dc.html. Präfix ka-, Farben und Raster aus --hm-* / --o4u-*
   (mu-plugins/o4u-chrome.php, o4u-design-system.php).
   Listeo/Bootstrap setzen globale Stile (inspect_listeo_conflict.py, 10.10.2026):
   input/select 51px hoch mit 16px Rand unten und 0 20px Innenabstand,
   input[type=text]:focus mit eigenem Rahmen, label span 14px #444,
   body p 16px/29px, h1 bis h3 mit 20px/10px Rand, h3 24px, Überschriften 800.
   Deshalb gezielte Rücksetzungen mit .ka-Präfix statt !important.
   ========================================================================== */

.ka {
    --ka-ink: var(--hm-ink, #1d1d1f);
    --ka-ink2: #424245;
    --ka-muted: var(--hm-muted, #6e6e73);
    --ka-alt: var(--hm-bg-alt, #f5f5f7);
    --ka-line: var(--hm-line, #e6e6ea);
    --ka-line2: #d2d2d7;
    --ka-acc: var(--hm-accent, #fe6e0e);
    --ka-acc2: var(--hm-accent-2, #ff8a3d);
    --ka-acct: #a84400;
    --ka-soft: #fff4ec;
    --ka-beige: #f7f4ee;
    --ka-beige2: #ece7dc;
    --ka-pill: var(--o4u-r-pill, 980px);
    font-family: var(--o4u-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--ka-ink);
    background: #fff;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ka *, .ka *::before, .ka *::after { box-sizing: border-box; }
.ka [hidden] { display: none !important; }
.ka a { color: inherit; text-decoration: none; }
.ka a:hover { color: var(--ka-acct); }
.ka p { margin: 0; font-size: inherit; line-height: inherit; }
.ka h1, .ka h2, .ka h3, .ka h4 { color: inherit; margin: 0; font-family: inherit; font-size: inherit; line-height: 1.2; }
.ka ul, .ka ol { margin: 0; padding: 0; list-style: none; }
.ka img { max-width: 100%; }
.ka button { font-family: inherit; }
.ka label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.ka label span { font-size: inherit; color: inherit; font-weight: inherit; }
.ka input, .ka select, .ka textarea {
    height: auto; line-height: normal; margin: 0; box-shadow: none; font-family: inherit;
    color: var(--ka-ink); max-width: 100%; opacity: 1;
}
.ka input[type="checkbox"], .ka input[type="radio"] { width: auto; height: auto; padding: 0; border: 0; background: none; border-radius: 0; }
.ka svg { display: inline-block; flex: 0 0 auto; }
.ka :focus-visible { outline: 2px solid var(--ka-acc); outline-offset: 2px; }
.ka-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ka-wrap { max-width: var(--o4u-raster, 1200px); margin: 0 auto; padding: 0 var(--o4u-rand, 24px); width: 100%; }

/* --- Knöpfe ------------------------------------------------------------- */
.ka .ka-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 15px; line-height: 1.2; border-radius: var(--ka-pill);
    padding: 11px 22px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    min-height: 44px; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.ka .ka-btn svg { width: 18px; height: 18px; }
.ka .ka-btn--pri { background: var(--ka-acc); color: #fff; }
.ka .ka-btn--pri:hover { background: #ea6200; color: #fff; }
.ka .ka-btn--out { background: #fff; border-color: var(--ka-line2); color: var(--ka-ink); }
.ka .ka-btn--out:hover { border-color: var(--ka-ink); color: var(--ka-ink); }
.ka .ka-btn--dark { background: var(--ka-ink); color: #fff; }
.ka .ka-btn--dark:hover { background: #000; color: #fff; }
.ka .ka-link {
    background: none; border: 0; padding: 6px 0; color: var(--ka-acct); font-weight: 600;
    font-size: 13.5px; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center;
}
.ka .ka-link:hover { text-decoration: underline; color: var(--ka-acct); }

/* --- Hero --------------------------------------------------------------- */
.ka-hero {
    background: radial-gradient(60% 120% at 72% -10%, rgba(254, 110, 14, .30), rgba(254, 110, 14, 0) 62%), #0d0d10;
    color: #fff; padding: 18px 0 40px;
}
.ka-crumb { font-size: 13px; color: #a1a1a6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ka .ka-crumb a { color: #d2d2d7; }
.ka .ka-crumb a:hover { color: #fff; }
.ka-crumb svg { width: 12px; height: 12px; }
.ka-hero-grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; margin-top: 30px; }
.ka-hero-l { flex: 999 1 560px; min-width: 0; }
.ka-hero-r { flex: 1 1 320px; max-width: 390px; min-width: 0; }
.ka .ka-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ka-acc2); font-weight: 700; margin: 0 0 12px; }
.ka .ka-h1 { font-size: 54px; line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: #fff; }
.ka .ka-lead { font-size: 18px; line-height: 1.5; color: #c7c7cc; margin: 16px 0 0; max-width: 640px; }

.ka-new { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 14px; }
.ka-new-h {
    display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #d2d2d7; padding: 2px 4px 10px;
}
.ka .ka-new-h a { color: var(--ka-acc2); letter-spacing: 0; text-transform: none; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.ka .ka-new-row {
    display: flex; gap: 12px; align-items: center; padding: 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; min-height: 64px;
}
.ka .ka-new-row:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.ka-new-row img, .ka-new-leer { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ka-new-leer { background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #a1a1a6; }
.ka-new-leer svg { width: 20px; height: 20px; }
.ka-new-txt { min-width: 0; display: flex; flex-direction: column; }
.ka-new-t { font-size: 14px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ka-new-s { font-size: 12.5px; color: #a1a1a6; margin-top: 3px; }
.ka-new-p { margin-left: auto; font-weight: 700; font-size: 14px; white-space: nowrap; padding-left: 8px; }

/* Suchleiste */
.ka-search {
    margin-top: 30px; background: #fff; border-radius: 20px; padding: 8px; display: flex; flex-wrap: wrap;
    gap: 4px; align-items: stretch; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); color: var(--ka-ink);
}
.ka .ka-field {
    display: flex; align-items: center; gap: 12px; padding: 6px 16px; min-height: 60px; border-radius: 14px;
    color: var(--ka-ink); flex: 1 1 200px; min-width: 0; cursor: text;
}
.ka .ka-field:hover { background: var(--ka-alt); }
.ka-field svg { width: 20px; height: 20px; color: var(--ka-muted); }
.ka-field-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ka .ka-field-lab { font-size: 11px; font-weight: 700; color: var(--ka-muted); text-transform: uppercase; letter-spacing: .07em; }
.ka .ka-field input, .ka .ka-field select,
.ka .ka-field input:focus, .ka .ka-field select:focus {
    border: 0; outline: 0; font-weight: 500; font-size: 16px; color: var(--ka-ink); background: transparent;
    width: 100%; min-width: 0; padding: 0; height: 24px; line-height: 24px; box-shadow: none; border-radius: 0;
    -webkit-appearance: none; appearance: none;
}
.ka .ka-field input::placeholder { color: #8e8e93; }
.ka .ka-field select { cursor: pointer; }
.ka .ka-field:focus-within { box-shadow: inset 0 0 0 2px var(--ka-acc); }
.ka-field-q { flex: 3 1 340px; }
.ka .ka-field-r { flex: 0 1 170px; }
.ka .ka-search .ka-btn { min-height: 60px; border-radius: 14px; padding: 0 28px; font-size: 16px; }

.ka-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.ka-quick-l { font-size: 13px; color: #a1a1a6; margin-right: 4px; }
.ka .ka-quick a {
    font-size: 13.5px; font-weight: 500; color: #f5f5f7; border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--ka-pill); padding: 8px 14px; background: rgba(255, 255, 255, .04); min-height: 38px;
    display: inline-flex; align-items: center;
}
.ka .ka-quick a:hover { border-color: var(--ka-acc2); color: #fff; }
.ka-trust {
    display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: #a1a1a6;
}
.ka-trust span { display: inline-flex; gap: 8px; align-items: center; }
.ka-trust svg { width: 16px; height: 16px; color: var(--ka-acc2); }
.ka-trust b { color: #fff; font-weight: 700; }

/* --- Kategorien --------------------------------------------------------- */
.ka-cats { background: var(--ka-alt); border-bottom: 1px solid var(--ka-line); padding: 20px 0; }
.ka-cats-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ka .ka-cat {
    display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 12px 14px; text-align: left;
    font-size: 14px; min-height: 64px; width: 100%; background: #fff; border: 1px solid var(--ka-line); color: var(--ka-ink);
}
.ka .ka-cat:hover { border-color: var(--ka-line2); color: var(--ka-ink); }
.ka .ka-cat.is-on, .ka .ka-cat[aria-current="page"] { border: 1.5px solid var(--ka-acc); box-shadow: 0 6px 18px rgba(254, 110, 14, .14); }
.ka-cat svg { width: 28px; height: 28px; color: var(--ka-acc); }
.ka-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ka-cat-l { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.ka-cat-kurz, .ka-cat-zahl { display: none; }
.ka-cat-n { font-size: 12.5px; color: var(--ka-muted); }
.ka-cat.is-leer .ka-cat-n { color: var(--ka-acct); }

/* --- Handy-Leiste (nur schmal) ------------------------------------------ */
.ka-bar { display: none; }

/* --- Hauptbereich ------------------------------------------------------- */
.ka-main { display: flex; flex-wrap: wrap; gap: 36px; padding-top: 28px; padding-bottom: 64px; align-items: flex-start; }
.ka-side { flex: 1 1 280px; max-width: 300px; min-width: 0; }
.ka-res { flex: 999 1 560px; min-width: 0; }
.ka-sheet-top, .ka-sheet-cats, .ka-sheet-actions { display: none; }

/* Kartenvorschau */
.ka .ka-map {
    position: relative; display: block; width: 100%; height: 118px; border-radius: 14px; overflow: hidden;
    background: #e7ecef; border: 1px solid var(--ka-line); cursor: pointer; padding: 0;
}
.ka-map-land { position: absolute; border-radius: 40% 55% 45% 50%; background: #f3f1ea; }
.ka-pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ka-acc); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ka-map-btn {
    position: absolute; left: 10px; bottom: 10px; background: #fff; border-radius: var(--ka-pill); padding: 8px 12px;
    font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); color: var(--ka-ink);
}
.ka-map-btn svg { width: 15px; height: 15px; color: var(--ka-acc); }

/* --- Filter ------------------------------------------------------------- */
.ka-fhead { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 14px; border-bottom: 1px solid var(--ka-line); }
.ka .ka-fhead h2 { font-size: 20px; display: flex; gap: 8px; align-items: center; letter-spacing: -.02em; font-weight: 700; }
.ka-fhead h2 svg { width: 20px; height: 20px; color: var(--ka-acc); }
.ka-sec { border-bottom: 1px solid var(--ka-line); padding: 14px 0; }
.ka-sec > summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #515154; min-height: 32px; gap: 8px;
}
.ka-sec > summary::-webkit-details-marker { display: none; }
.ka-sec-t { display: inline-flex; align-items: center; gap: 8px; }
.ka-sum-r { display: flex; gap: 8px; align-items: center; }
.ka-sum-r svg { width: 14px; height: 14px; transition: transform .15s; }
.ka-sec[open] > summary .ka-chev { transform: rotate(180deg); }
.ka-sum-new { font-size: 10px; letter-spacing: .06em; color: var(--ka-acct); background: var(--ka-soft); border-radius: 5px; padding: 3px 6px; text-transform: uppercase; }
.ka-sec-sel { font-size: 11px; letter-spacing: .04em; color: var(--ka-acct); text-transform: none; font-weight: 600; white-space: nowrap; }
.ka-secb { padding-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.ka-grp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ka .ka-glab { font-size: 13px; font-weight: 600; color: var(--ka-ink2); display: block; }
.ka .ka-hint { font-size: 12.5px; color: var(--ka-muted); line-height: 1.45; margin: 0; }

.ka-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ka .ka-chip {
    position: relative; border-radius: var(--ka-pill); padding: 7px 12px; font-weight: 500; font-size: 13.5px;
    line-height: 1.1; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; min-height: 36px;
    border: 1px solid var(--ka-line2); background: #fff; color: var(--ka-ink); user-select: none;
}
.ka .ka-chip small { color: var(--ka-muted); font-weight: 500; font-size: 11.5px; }
.ka .ka-chip input, .ka .ka-body input, .ka .ka-sw input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.ka .ka-chip.is-on, .ka .ka-chip:has(input:checked) { border-color: var(--ka-acc); background: var(--ka-soft); color: #8a3800; }
.ka .ka-chip:has(input:focus-visible), .ka .ka-body:has(input:focus-visible), .ka .ka-sw:has(input:focus-visible) { outline: 2px solid var(--ka-acc); outline-offset: 2px; }
.ka .is-off { opacity: .45; cursor: default; }

.ka-checks { display: flex; flex-direction: column; }
.ka .ka-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; min-height: 34px; cursor: pointer; }
.ka .ka-check input { width: 18px; height: 18px; accent-color: var(--ka-acc); margin: 0; flex: 0 0 auto; cursor: pointer; display: inline-block; }
.ka-check-l { min-width: 0; }
.ka .ka-n { margin-left: auto; color: var(--ka-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-left: 8px; }

.ka-flag { width: 18px; height: 12px; border-radius: 2px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); background: #d2d2d7; display: inline-block; }
.ka-flag--de { background: linear-gradient(#000 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7%); }
.ka-flag--at { background: linear-gradient(#c8102e 0 33.4%, #fff 33.4% 66.7%, #c8102e 66.7%); }
.ka-flag--ch { background: linear-gradient(#fff, #fff) center/54% 18% no-repeat, linear-gradient(#fff, #fff) center/14% 60% no-repeat, #da291c; }
.ka-flag--fr { background: linear-gradient(90deg, #0055a4 0 33.4%, #fff 33.4% 66.7%, #ef4135 66.7%); }
.ka-flag--it { background: linear-gradient(90deg, #009246 0 33.4%, #fff 33.4% 66.7%, #ce2b37 66.7%); }
.ka-flag--be { background: linear-gradient(90deg, #000 0 33.4%, #fdda24 33.4% 66.7%, #ef3340 66.7%); }
.ka-flag--nl { background: linear-gradient(#ae1c28 0 33.4%, #fff 33.4% 66.7%, #21468b 66.7%); }
.ka-flag--lu { background: linear-gradient(#ed2939 0 33.4%, #fff 33.4% 66.7%, #00a1de 66.7%); }
.ka-flag--hu { background: linear-gradient(#ce2939 0 33.4%, #fff 33.4% 66.7%, #477050 66.7%); }
.ka-flag--pl { background: linear-gradient(#fff 0 50%, #dc143c 50%); }
.ka-flag--cz { background: linear-gradient(117deg, #11457e 0 32%, transparent 32%), linear-gradient(#fff 0 50%, #d7141a 50%); }
.ka-flag--se { background: linear-gradient(#fecc00, #fecc00) 36% 50%/14% 100% no-repeat, linear-gradient(#fecc00, #fecc00) 50% 50%/100% 20% no-repeat, #006aa7; }
.ka-flag--dk { background: linear-gradient(#fff, #fff) 36% 50%/12% 100% no-repeat, linear-gradient(#fff, #fff) 50% 50%/100% 18% no-repeat, #c8102e; }
.ka-flag--no { background: linear-gradient(#00205b, #00205b) 36% 50%/7% 100% no-repeat, linear-gradient(#00205b, #00205b) 50% 50%/100% 10% no-repeat, linear-gradient(#fff, #fff) 36% 50%/16% 100% no-repeat, linear-gradient(#fff, #fff) 50% 50%/100% 24% no-repeat, #ba0c2f; }
.ka-flag--fi { background: linear-gradient(#003580, #003580) 36% 50%/14% 100% no-repeat, linear-gradient(#003580, #003580) 50% 50%/100% 20% no-repeat, #fff; }
.ka-flag--es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.ka-flag--pt { background: linear-gradient(90deg, #046a38 0 40%, #da291c 40%); }
.ka-flag--gb { background: linear-gradient(#fff, #fff) center/100% 30% no-repeat, linear-gradient(#fff, #fff) center/22% 100% no-repeat, linear-gradient(#c8102e, #c8102e) center/100% 16% no-repeat, linear-gradient(#c8102e, #c8102e) center/12% 100% no-repeat, #012169; }
.ka-flag--ie { background: linear-gradient(90deg, #169b62 0 33.4%, #fff 33.4% 66.7%, #ff883e 66.7%); }
.ka-flag--us { background: linear-gradient(#3c3b6e, #3c3b6e) 0 0/44% 54% no-repeat, repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%); }
.ka-flag--ca { background: linear-gradient(90deg, #d80621 0 25%, #fff 25% 75%, #d80621 75%); }
.ka-flag--li { background: linear-gradient(#002b7f 0 50%, #ce1126 50%); }
.ka-flag--si { background: linear-gradient(#fff 0 33.4%, #005da4 33.4% 66.7%, #ed1c24 66.7%); }
.ka-flag--sk { background: linear-gradient(#fff 0 33.4%, #0b4ea2 33.4% 66.7%, #ee1c25 66.7%); }
.ka-flag--hr { background: linear-gradient(#ff0000 0 33.4%, #fff 33.4% 66.7%, #171796 66.7%); }
.ka-flag--gr { background: repeating-linear-gradient(#0d5eaf 0 11.1%, #fff 11.1% 22.2%); }
.ka-flag--ro { background: linear-gradient(90deg, #002b7f 0 33.4%, #fcd116 33.4% 66.7%, #ce1126 66.7%); }
.ka-flag--eu { background: radial-gradient(circle, #ffcc00 0 16%, transparent 17%) center/100% 100% no-repeat, #003399; }

.ka-switches { display: flex; flex-direction: column; }
.ka .ka-switch { display: flex; align-items: center; gap: 12px; font-size: 14.5px; min-height: 36px; cursor: pointer; }
.ka .ka-switch input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; width: 38px; height: 22px; border-radius: 11px; background: #d2d2d7;
    position: relative; margin: 0; flex: 0 0 auto; cursor: pointer; transition: background .15s; border: 0; padding: 0; display: inline-block;
}
.ka .ka-switch input[type="checkbox"]::before {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s;
}
.ka .ka-switch input[type="checkbox"]:checked { background: var(--ka-acc); }
.ka .ka-switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
.ka .ka-switch input[type="checkbox"]:disabled { cursor: default; }
.ka-switch-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ka .ka-switch-l small { font-size: 12px; color: var(--ka-muted); display: none; }

.ka-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ka .ka-in, .ka .ka-in:focus {
    border: 1px solid var(--ka-line2); border-radius: 10px; padding: 0 12px; min-height: 42px; height: 42px;
    line-height: 40px; font-weight: 500; font-size: 15px; width: 100%; background: #fff; color: var(--ka-ink); text-align: left;
    box-shadow: none; margin: 0; display: block;
}
.ka .ka-in:focus { border-color: var(--ka-acc); outline: 0; box-shadow: 0 0 0 3px rgba(254, 110, 14, .18); }
.ka .ka-in::placeholder { color: #8e8e93; }
.ka .ka-in:disabled { background: var(--ka-alt); color: var(--ka-muted); cursor: not-allowed; }
.ka-sel-w { position: relative; display: block; }
.ka .ka-sel { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; }
.ka-sel-w::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
    border-right: 1.8px solid #6e6e73; border-bottom: 1.8px solid #6e6e73; transform: rotate(45deg); pointer-events: none;
}

.ka-presets { display: flex; flex-direction: column; }
.ka .ka-preset { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; color: var(--ka-ink); }
.ka .ka-preset::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #8e8e93; flex: 0 0 auto; background: #fff;
}
.ka .ka-preset.is-on::before { border: 5px solid var(--ka-acc); }
.ka .ka-preset.is-on { font-weight: 600; }

.ka .ka-more, .ka-mehr > summary {
    font-size: 13.5px; font-weight: 600; color: var(--ka-acct); cursor: pointer; list-style: none; min-height: 32px;
    display: inline-flex; align-items: center; margin-top: 4px;
}
.ka-mehr > summary::-webkit-details-marker { display: none; }
.ka-mehr-auf { display: none; }
.ka-mehr[open] .ka-mehr-zu { display: none; }
.ka-mehr[open] .ka-mehr-auf { display: inline; }
.ka-mehr { display: flex; flex-direction: column; }
.ka-mehr[open] > summary { order: 2; }

.ka-bodies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ka .ka-body {
    position: relative; border-radius: 12px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center;
    gap: 3px; font-weight: 500; font-size: 12.5px; cursor: pointer; min-height: 72px; text-align: center;
    border: 1px solid var(--ka-line2); background: #fff; color: var(--ka-ink);
}
.ka-body svg { width: 44px; height: 22px; }
.ka .ka-body small { font-size: 11px; color: var(--ka-muted); }
.ka .ka-body.is-on, .ka .ka-body:has(input:checked) { border-color: var(--ka-acc); background: var(--ka-soft); color: #8a3800; }

.ka-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.ka .ka-sw { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.ka-sw-b { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .16); display: block; }
.ka .ka-sw.is-on .ka-sw-b, .ka .ka-sw:has(input:checked) .ka-sw-b { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ka-acc); }
.ka-sw-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ka-fbtm { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.ka-fbtm .ka-btn { width: 100%; }

/* --- Ergebnis-Kopf ------------------------------------------------------ */
.ka-rhead { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.ka-rhead-t { min-width: 0; }
.ka .ka-rh-t { font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.ka .ka-rh-s { font-size: 14px; color: var(--ka-muted); margin: 6px 0 0; }
.ka-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ka .ka-sort { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ka-muted); }
.ka .ka-sort select, .ka .ka-sort select:focus {
    border: 1px solid var(--ka-line2); border-radius: var(--ka-pill); padding: 0 34px 0 14px; min-height: 40px; height: 40px;
    line-height: 38px; font-weight: 600; font-size: 13.5px; color: var(--ka-ink); background: #fff; -webkit-appearance: none;
    appearance: none; cursor: pointer; width: auto;
}
.ka-seg { display: inline-flex; border: 1px solid var(--ka-line2); border-radius: var(--ka-pill); padding: 3px; background: #fff; }
.ka .ka-seg button {
    border: 0; background: transparent; border-radius: var(--ka-pill); padding: 0 13px; font-weight: 600; font-size: 13px;
    display: inline-flex; gap: 6px; align-items: center; cursor: pointer; color: var(--ka-ink2); min-height: 34px;
}
.ka-seg button svg { width: 15px; height: 15px; }
.ka .ka-seg button[aria-pressed="true"] { background: var(--ka-ink); color: #fff; }
.ka .ka-merk-link {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--ka-acct);
    border: 1px solid #ffd2b3; background: var(--ka-soft); border-radius: var(--ka-pill); padding: 0 12px; min-height: 40px;
}
.ka-merk-link svg { width: 15px; height: 15px; fill: var(--ka-acc); stroke: var(--ka-acc); }

.ka-active { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; align-items: center; }
.ka .ka-achip {
    background: var(--ka-soft); color: var(--ka-acct); border: 1px solid #ffd2b3; border-radius: var(--ka-pill);
    padding: 5px 8px 5px 12px; font-weight: 600; font-size: 13px; display: inline-flex; gap: 6px; align-items: center;
    cursor: pointer; min-height: 34px; white-space: nowrap;
}
.ka .ka-achip:hover { border-color: var(--ka-acc); color: #8a3800; }
.ka-achip svg { width: 14px; height: 14px; }
.ka .ka-hinweis { margin-top: 14px; font-size: 14px; color: #8a3800; background: var(--ka-soft); border-radius: 12px; padding: 10px 14px; }

.ka-save { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px 12px 16px; border-radius: 14px; background: var(--ka-alt); }
.ka-save > svg { width: 20px; height: 20px; color: var(--ka-acc); }
.ka .ka-save p { font-size: 14px; color: var(--ka-ink2); flex: 1; }
.ka .ka-save .ka-btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }

/* --- Karten (auch Detailseite, ähnliche Angebote) ----------------------- */
.ka-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ka-card {
    background: #fff; border: 1px solid var(--ka-line); border-radius: 16px; overflow: hidden; display: flex;
    flex-direction: column; position: relative; transition: box-shadow .2s, transform .2s; min-width: 0;
}
.ka-card:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.ka-cimg { display: block; position: relative; aspect-ratio: 4 / 3; background: #ececef; overflow: hidden; }
.ka-cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.ka-cimg--hoch::before {
    content: ""; position: absolute; inset: 0; background: var(--ka-bg) center / cover no-repeat;
    transform: scale(1.2); filter: blur(22px) saturate(1.15) brightness(.9);
}
.ka-cimg img.ka-cimg-fit { object-fit: contain; }
.ka-cimg-leer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8e8e93; font-size: 13px; }
.ka-cimg-leer svg { width: 32px; height: 32px; }
.ka-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; right: 64px; }
.ka-badge {
    font-weight: 700; font-size: 11.5px; line-height: 1; padding: 6px 9px; border-radius: var(--ka-pill); background: #fff;
    color: var(--ka-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); display: inline-flex; gap: 5px; align-items: center;
}
.ka-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ka-acc); display: block; }
.ka-badge-h {
    width: 16px; height: 16px; border-radius: 4px; background: var(--ka-ink); color: #fff; font-style: normal;
    font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.ka-photos {
    position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .66); color: #fff; font-weight: 600;
    font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 8px; display: flex; gap: 5px; align-items: center;
}
.ka-photos svg { width: 13px; height: 13px; }
.ka .ka-fav {
    position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .96);
    border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    color: var(--ka-ink); padding: 0; z-index: 2;
}
.ka .ka-fav svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }
.ka .ka-fav.is-on, .ka .ka-fav[aria-pressed="true"] { color: var(--ka-acc); }
.ka .ka-fav.is-on svg, .ka .ka-fav[aria-pressed="true"] svg { fill: var(--ka-acc); }
.ka-cb { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.ka-ceye { font-size: 12.5px; font-weight: 600; color: var(--ka-muted); }
.ka .ka-ct {
    font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ka .ka-ct a { color: var(--ka-ink); }
.ka .ka-ct a:hover { color: var(--ka-acct); }
.ka .ka-ct a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ka-cf { font-size: 13.5px; color: var(--ka-ink2); line-height: 1.4; }
.ka-ctags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ka-tag { font-weight: 500; font-size: 12px; line-height: 1; color: var(--ka-ink2); background: var(--ka-alt); border-radius: 6px; padding: 6px 8px; }
.ka-cfoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ka-line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ka-price { font-size: 21px; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.ka-price--q { font-size: 15px; }
.ka-loc { font-size: 12.5px; color: var(--ka-muted); display: flex; gap: 6px; align-items: center; text-align: right; line-height: 1.3; min-width: 0; }
.ka-loc > span:last-child { overflow-wrap: anywhere; }

.ka-sell {
    grid-column: 1 / -1; background: var(--ka-beige); border: 1px solid var(--ka-beige2); border-radius: 16px; padding: 24px 28px;
    display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center;
}
.ka-sell-ic { width: 56px; height: 56px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ka-acc); flex: 0 0 auto; }
.ka-sell-ic svg { width: 28px; height: 28px; }
.ka-sell-t { flex: 1 1 380px; min-width: 0; }
.ka .ka-sell h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; }
.ka .ka-sell p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ka-ink2); }
.ka-sell-a { display: flex; gap: 10px; flex-wrap: wrap; }

.ka-empty {
    margin-top: 20px; border: 1px dashed #cfcfd4; border-radius: 18px; padding: 48px 28px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ka-empty > svg { width: 48px; height: 48px; color: var(--ka-acc); }
.ka .ka-empty h3 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.ka .ka-empty p { color: var(--ka-muted); font-size: 15px; max-width: 460px; line-height: 1.5; }
.ka-empty-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }

.ka-pag { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.ka .ka-pag a {
    min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--ka-pill); border: 1px solid var(--ka-line2);
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14.5px; gap: 6px; color: var(--ka-ink);
}
.ka .ka-pag a[aria-current="page"] { background: var(--ka-ink); border-color: var(--ka-ink); color: #fff; }
.ka-pag svg { width: 16px; height: 16px; }
.ka-pag-l { color: var(--ka-muted); padding: 0 2px; }
.ka .ka-pag-s { font-size: 13px; color: var(--ka-muted); width: 100%; text-align: center; margin-top: 4px; }

.ka-ergebnis { transition: opacity .15s; }
.ka.is-laedt .ka-ergebnis { opacity: .55; }

/* Kartenansicht */
.ka-kartenansicht { margin-top: 20px; }
.ka-mapbox { height: 68vh; min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--ka-line); background: #e7ecef; position: relative; z-index: 1; }
.ka .ka-map-hinweis { font-size: 12.5px; color: var(--ka-muted); margin-top: 8px; }
.ka-pin-m { border-radius: 50%; background: var(--hm-accent, #fe6e0e); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.ka-popup { display: flex; gap: 10px; align-items: center; min-width: 220px; font-family: var(--o4u-font, "Inter", sans-serif); }
.ka-popup img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.ka-popup b { display: block; font-size: 13.5px; line-height: 1.3; color: #1d1d1f; }
.ka-popup span { display: block; font-size: 13px; font-weight: 700; color: #1d1d1f; margin-top: 3px; }
.ka-popup a { color: #a84400; font-weight: 600; font-size: 12.5px; }

/* --- SEO-Bereich -------------------------------------------------------- */
.ka-seo { background: var(--ka-alt); padding: 64px 0; border-top: 1px solid var(--ka-line); }
.ka .ka-kick { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ka-acct); font-weight: 700; margin: 0 0 10px; }
.ka .ka-h2 { font-size: 32px; letter-spacing: -.03em; font-weight: 800; line-height: 1.1; }
.ka-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }
.ka .ka-links h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: #515154; margin: 0 0 8px; font-weight: 700; }
.ka .ka-links a { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; padding: 9px 0; border-bottom: 1px solid #e1e1e6; min-height: 44px; align-items: center; }
.ka-links a span { color: var(--ka-muted); font-size: 13px; }
.ka-help-w { margin-top: 64px; }
.ka-help { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ka .ka-help a { background: #fff; border: 1px solid var(--ka-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ka-ink); }
.ka .ka-help a:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .08); color: var(--ka-ink); }
.ka-help-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--ka-soft); display: flex; align-items: center; justify-content: center; color: var(--ka-acc); margin-bottom: 6px; flex: 0 0 auto; }
.ka-help-ic svg { width: 22px; height: 22px; }
.ka-help-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ka .ka-help small { font-size: 11.5px; font-weight: 700; color: var(--ka-acct); letter-spacing: .08em; text-transform: uppercase; }
.ka .ka-help b { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
.ka .ka-help-txt > span { font-size: 14px; color: var(--ka-muted); line-height: 1.45; }
.ka .ka-help-chev { display: none; }
.ka-two { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 64px; }
.ka-faq { flex: 3 1 520px; min-width: 0; }
.ka .ka-faq .ka-h2 { margin-bottom: 8px; }
.ka-faq details { border-bottom: 1px solid #dcdce0; padding: 16px 0; }
.ka-faq summary {
    list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; cursor: pointer;
    font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-height: 32px;
}
.ka-faq summary::-webkit-details-marker { display: none; }
.ka-faq summary svg { width: 18px; height: 18px; transition: transform .15s; color: var(--ka-muted); }
.ka-faq details[open] summary svg { transform: rotate(45deg); }
.ka .ka-faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ka-ink2); max-width: 680px; }
.ka-text { flex: 2 1 340px; min-width: 0; }
.ka .ka-text h2 { font-size: 20px; letter-spacing: -.02em; margin: 0 0 10px; font-weight: 700; }
.ka .ka-text p { font-size: 14.5px; line-height: 1.65; color: var(--ka-ink2); margin: 0 0 12px; }

/* ==========================================================================
   Breiten
   ========================================================================== */
@media (max-width: 1100px) {
    .ka-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ka-cats-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ka-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Handy und Tablet: Filter als Vollbild-Blatt, feste Leiste oben */
@media (max-width: 900px) {
    .ka .ka-h1 { font-size: 40px; }
    .ka-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ka-main { padding-top: 12px; gap: 0; }
    .ka-res { flex-basis: 100%; display: flex; flex-direction: column; }
    .ka-res > .ka-active { order: -1; margin: 0 0 12px; }
    .ka-tools .ka-sort, .ka-tools .ka-seg { display: none; }

    .ka-bar {
        display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 8px; position: sticky; top: var(--o4u-hd-h, 0px);
        z-index: 900; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--ka-line); padding: 10px 16px;
        -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
    }
    .ka .ka-bar-btn {
        position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
        border-radius: var(--ka-pill); border: 1px solid var(--ka-line2); background: #fff; font-weight: 600; font-size: 14px;
        color: var(--ka-ink); cursor: pointer; padding: 0 10px; white-space: nowrap; overflow: hidden; min-width: 0;
    }
    .ka-bar-btn svg { width: 17px; height: 17px; }
    .ka .ka-bar-f, .ka .ka-bar-f:hover { background: var(--ka-ink); color: #fff; border-color: var(--ka-ink); }
    .ka-badge-n {
        min-width: 20px; height: 20px; border-radius: 10px; background: var(--ka-acc); color: #1d1d1f; font-size: 12px; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
    }
    .ka .ka-bar-sort select {
        position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px;
        -webkit-appearance: none; appearance: none; border: 0; padding: 0;
    }

    /* Seitenleiste wird Blatt (geschlossen: display none, damit nichts seitlich übersteht) */
    .ka-side { display: none; max-width: none; flex-basis: 100%; }
    .ka-side.is-open, .ka-side:target {
        display: block; position: fixed; inset: 0; z-index: 100050; background: #fff; overflow-y: auto;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .ka-side .ka-map, .ka-side .ka-fhead, .ka-side .ka-fbtm { display: none; }
    .ka-sheet-top {
        display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; height: 60px; padding: 0 8px 0 4px;
        border-bottom: 1px solid var(--ka-line); background: #fff; position: sticky; top: 0; z-index: 3;
    }
    .ka .ka-sheet-x {
        width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-left: 8px; color: var(--ka-ink);
    }
    .ka-sheet-x svg { width: 22px; height: 22px; }
    .ka .ka-sheet-h { font-size: 17px; font-weight: 700; text-align: center; }
    .ka .ka-sheet-reset { color: var(--ka-acct); font-weight: 600; font-size: 15px; min-height: 44px; padding: 0 4px; display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
    .ka-sheet-top { grid-template-columns: 60px 1fr auto; }
    .ka-sheet-cats {
        display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px; border-bottom: 1px solid var(--ka-line); scrollbar-width: none;
    }
    .ka-sheet-cats::-webkit-scrollbar { display: none; }
    .ka .ka-sheet-cats a {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ka-pill); padding: 0 14px;
        min-height: 44px; font-size: 14px; font-weight: 600; border: 1px solid var(--ka-line2); color: var(--ka-ink);
    }
    .ka-sheet-cats a small { font-weight: 500; color: var(--ka-muted); font-size: 12.5px; }
    .ka .ka-sheet-cats a[aria-current="page"] { border: 1.5px solid var(--ka-acc); background: var(--ka-soft); color: #8a3800; }
    .ka-sheet-actions {
        display: grid; grid-template-columns: 52px 1fr; gap: 10px; position: sticky; bottom: 0; background: #fff;
        border-top: 1px solid var(--ka-line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .06); z-index: 3;
    }
    .ka .ka-bell {
        width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ka-line2); background: #fff; display: flex;
        align-items: center; justify-content: center; cursor: pointer; color: var(--ka-ink); padding: 0;
    }
    .ka-bell svg { width: 22px; height: 22px; }
    .ka .ka-apply {
        display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--ka-pill);
        background: var(--ka-acc); color: #fff; font-weight: 700; font-size: 16.5px; border: 0; cursor: pointer; width: 100%;
    }
    .ka-sec { border-bottom: 8px solid var(--ka-alt); padding: 18px 16px; }
    .ka-sec > summary { font-size: 17px; font-weight: 700; letter-spacing: -.015em; text-transform: none; color: var(--ka-ink); }
    .ka-sum-r svg { width: 18px; height: 18px; color: var(--ka-muted); }
    .ka-sec-sel { font-size: 13px; }
    .ka-secb { padding-top: 14px; gap: 16px; }
    .ka .ka-glab { font-size: 14px; }
    .ka .ka-chip { min-height: 44px; padding: 0 15px; font-size: 15px; }
    .ka .ka-chip small { font-size: 12.5px; }
    .ka .ka-check { min-height: 48px; font-size: 16px; border-bottom: 1px solid #f0f0f3; gap: 12px; }
    .ka .ka-check:last-child { border-bottom: 0; }
    .ka .ka-check input { width: 22px; height: 22px; }
    .ka .ka-check .ka-flag { width: 22px; height: 15px; }
    .ka .ka-n { font-size: 14px; }
    .ka .ka-switch { min-height: 48px; font-size: 16px; border-bottom: 1px solid #f0f0f3; }
    .ka .ka-switch:last-child { border-bottom: 0; }
    .ka .ka-switch-l { order: 1; flex: 1; }
    .ka .ka-switch .ka-n { order: 2; margin-left: 0; }
    .ka .ka-switch input[type="checkbox"] { order: 3; width: 50px; height: 30px; border-radius: 15px; }
    .ka .ka-switch input[type="checkbox"]::before { width: 26px; height: 26px; }
    .ka .ka-switch input[type="checkbox"]:checked::before { transform: translateX(20px); }
    .ka .ka-switch-l small { display: block; font-size: 13px; }
    .ka .ka-in, .ka .ka-in:focus { min-height: 48px; height: 48px; line-height: 46px; font-size: 16px; border-radius: 12px; padding: 0 14px; }
    .ka .ka-sel { padding-right: 34px; }
    .ka .ka-preset { min-height: 48px; font-size: 16px; border-bottom: 1px solid #f0f0f3; }
    .ka .ka-more, .ka-mehr > summary { min-height: 44px; font-size: 15px; }
    .ka .ka-body { min-height: 84px; font-size: 13.5px; font-weight: 600; border-radius: 14px; }
    .ka-body svg { width: 52px; height: 26px; }
    .ka-swatches { gap: 14px; }
    .ka .ka-sw { width: 52px; font-size: 12px; color: var(--ka-ink2); }
    .ka-sw-b { width: 40px; height: 40px; }
    .ka-sw-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; text-align: center; }
    .ka .ka-achip { min-height: 44px; padding: 0 10px 0 13px; font-size: 13.5px; }
    .ka-active { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .ka-active::-webkit-scrollbar { display: none; }
    .ka .ka-fav { width: 44px; height: 44px; }
    .ka .ka-merk-link { min-height: 44px; }
    .ka .ka-pag a { min-width: 44px; }
}

@media (max-width: 620px) {
    .ka-wrap { padding: 0 16px; }
    .ka-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
    .ka .ka-h1 { font-size: 31px; line-height: 1.05; }
    .ka .ka-lead { font-size: 15px; margin-top: 10px; }
    .ka .ka-eyebrow { font-size: 11px; margin: 18px 0 8px; }
    .ka-hero { padding: 14px 0 22px; background: radial-gradient(90% 90% at 80% -10%, rgba(254, 110, 14, .32), rgba(254, 110, 14, 0) 62%), #0d0d10; }
    .ka-hero-grid { margin-top: 0; gap: 18px; }
    .ka-hero-r { display: none; }
    .ka-search { flex-direction: column; flex-wrap: nowrap; border-radius: 16px; padding: 6px; gap: 2px; margin-top: 18px; box-shadow: none; }
    .ka .ka-field, .ka .ka-field-r { flex: 0 0 auto; min-height: 52px; padding: 0 12px; }
    .ka .ka-field + .ka-field { border-top: 1px solid #ececf0; border-radius: 0; }
    .ka .ka-field-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ka .ka-search .ka-btn { min-height: 50px; border-radius: 12px; margin-top: 4px; width: 100%; }
    .ka-quick { flex-wrap: nowrap; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px; scrollbar-width: none; }
    .ka-quick::-webkit-scrollbar { display: none; }
    .ka .ka-quick a { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
    .ka-trust { display: none; }

    .ka-cats { padding: 14px 0; }
    .ka-cats-in { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
    .ka-cats-in::-webkit-scrollbar { display: none; }
    .ka .ka-cat { flex: 0 0 auto; width: auto; min-height: 44px; border-radius: var(--ka-pill); padding: 0 14px; gap: 8px; }
    .ka .ka-cat.is-on, .ka .ka-cat[aria-current="page"] { box-shadow: none; }
    .ka-cat svg { width: 20px; height: 20px; }
    .ka-cat-txt { flex-direction: row; align-items: baseline; gap: 6px; }
    .ka-cat-l { font-size: 14px; font-weight: 600; }
    .ka-cat-lang, .ka-cat-n { display: none; }
    .ka-cat-kurz { display: inline; }
    .ka-cat-zahl { display: inline; font-weight: 500; color: var(--ka-muted); font-size: 12.5px; }

    .ka .ka-rh-t { font-size: 22px; }
    .ka .ka-rh-s { font-size: 13.5px; margin-top: 4px; }
    .ka-cb { padding: 12px 14px 14px; gap: 5px; }
    .ka-sell { padding: 18px; }
    .ka-sell-a { width: 100%; }
    .ka-sell-a .ka-btn { flex: 1 1 auto; }
    .ka-save { flex-wrap: wrap; }
    .ka .ka-save .ka-btn { width: 100%; min-height: 48px; }
    .ka-empty { padding: 36px 18px; }
    .ka-empty-a .ka-btn { width: 100%; }
    .ka-mapbox { height: 70vh; min-height: 360px; }

    .ka-seo { padding: 40px 0; }
    .ka .ka-h2 { font-size: 24px; }
    .ka-links { grid-template-columns: 1fr; gap: 18px; }
    .ka-help-w { margin-top: 40px; }
    .ka-help { grid-template-columns: 1fr; gap: 10px; }
    .ka .ka-help a { flex-direction: row; align-items: center; gap: 12px; padding: 14px; min-height: 64px; border-radius: 14px; }
    .ka-help-ic { width: 40px; height: 40px; border-radius: 11px; margin: 0; }
    .ka-help-ic svg { width: 20px; height: 20px; }
    .ka-help-txt { gap: 2px; }
    .ka .ka-help small { display: none; }
    .ka .ka-help b { font-size: 15px; }
    .ka .ka-help-txt > span { font-size: 13px; }
    .ka .ka-help-chev { display: block; margin-left: auto; width: 18px; height: 18px; color: #8e8e93; }
    .ka-two { margin-top: 40px; gap: 32px; }
    .ka-faq summary { font-size: 16px; }
}

html.ka-lock, html.ka-lock body { overflow: hidden; }
/* Offenes Filterblatt: schwebende Knöpfe (Chat, Einwilligung) würden "Angebote anzeigen" verdecken */
html.ka-lock #listeo-floating-chat-widget, html.ka-lock .cmplz-manage-consent { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .ka-card, .ka-card:hover { transition: none; transform: none; }
    .ka-ergebnis, .ka-sum-r svg, .ka-faq summary svg { transition: none; }
}