/* Figtree - lokal eingebunden */
@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-300italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-500italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-600italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-800italic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree/figtree-v9-latin-900italic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* =============================================================
   style.css  –  Kummerc Platform Stylesheet
   Bootstrap 5.3 + Custom Components
   ============================================================= */
/* 1. CSS-Variablen & Brand Tokens
   ---------------------------------------------- */
:root {
    /* Brand colours */
    --km-primary: #004E61;
    --km-primary-dark: #0b3f4a;
    --km-primary-mid: #0b4b5a;
    --km-accent: #E7533B;

    /* Neutrals */
    --km-surface: #f8f9fa;
    --km-border: rgba(0, 0, 0, .08);
    --km-border-hover: rgba(0, 0, 0, .14);
    --km-text-muted: rgba(0, 0, 0, .55);
    --km-text-soft: rgba(0, 0, 0, .72);

    /* Shadows */
    --km-shadow-sm: 0 .35rem 1rem    rgba(0, 0, 0, .10);
    --km-shadow-md: 0 .75rem 1.5rem  rgba(0, 0, 0, .10);
    --km-shadow-lg: 0 .85rem 1.75rem rgba(0, 0, 0, .12);

    /* Radii */
    --km-radius-sm: .75rem;
    --km-radius-md: 1rem;
    --km-radius-lg: 1.2rem;
    --km-radius-pill: 999px;

    /* Bootstrap border-radius override */
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.2rem;
    --bs-border-radius-xxl: 1.5rem;
    --bs-border-radius-pill: 999px;

    /* Background tokens */
    --km-bg-standard: rgba(0, 78, 97, .04);
    --km-bg-ad: rgba(30, 140, 60, .05);
    --km-bg-sponsored: rgba(231, 83, 59, .05);
    --km-bg-white: #fff;
    --km-bg-blue: #f0f7f9;
    --km-bg-blue-dark: #eef4f3;
    --km-bg-green: #f0f7f2;
}

/* ==============================================
   Backgrounds, Tints & Glass Utilities
   Erweiterbar — neue Variante = neue Zeile
   ============================================== */
/* --- Backgrounds (Sections, Container) --- */
.km-bg-white {
    background: #fff;
}

.km-bg-white {
    background: var(--km-bg-white);
}

.km-bg-soft {
    background: var(--km-surface);
}

.km-bg-blue {
    background: var(--km-bg-blue);
}

.km-bg-blue-dark {
    background: var(--km-bg-blue-dark);
}

.km-bg-teal {
    background: var(--km-primary);
}

.km-bg-dark {
    background: var(--km-primary-dark);
}

.km-bg-green {
    background: var(--km-bg-green);
}

/* --- Card Tints (dezente Tönung, nur für Cards) --- */
.km-tint-default {
    background: var(--km-bg-standard);
}

.km-tint-ad {
    background: var(--km-bg-ad);
}

.km-tint-sponsored {
    background: var(--km-bg-sponsored);
}

/* --- Glass (nur auf Bildhintergrund verwenden) --- */
.km-glass-sm {
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .20);
}

.km-glass-md {
    background: rgba(255, 255, 255, .20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .28);
}

.km-glass-lg {
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .40);
}

/* 2. Bootstrap anpassungen */
/* Einheitliche Border Radius für alle Buttons & Inputs */
.btn,
.btn-sm,
.btn-lg,
.form-control,
.form-select,
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    border-radius: var(--km-radius-sm) !important;
}

.btn-sm {
    border-radius: .5rem !important;
}

.btn-lg {
    border-radius: var(--km-radius-md) !important;
}

/* Input-Groups: aussen runden, innen nahtlos (wie Header-Suche).
   Überschreibt die pauschale Rundung oben, damit Präfix/Suffix
   bündig im selben Rahmen sitzen statt als eigene Kästchen. */
.input-group {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    overflow: hidden;
}

.input-group:focus-within {
    border-color: var(--km-primary);
    box-shadow: 0 0 0 2px rgba(0, 78, 97, .12);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
    border-radius: 0 !important;
    border-color: transparent;
    box-shadow: none !important;
}

.input-group > .form-control:focus,
.input-group > .form-select:focus {
    box-shadow: none !important;
}

.input-group > .input-group-text {
    background: var(--km-bg-blue);
    color: var(--km-primary);
    font-weight: 600;
    border: none;
}

/* Trenner zwischen Präfix und Feld — dezent statt harte Kante */
.input-group > .input-group-text:first-child {
    border-right: 1px solid var(--km-border);
}

.input-group > .input-group-text:last-child {
    border-left: 1px solid var(--km-border);
}

/* Pill buttons bleiben pill */
.rounded-pill {
    border-radius: var(--km-radius-pill) !important;
}

.bg-primary,
.btn-primary {
    --bs-bg-opacity: 1;
    background-color: var(--km-primary) !important;
}

.btn-primary {
    border-color: var(--km-primary) !important;
}

/* 3. Animationen */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pop-in {
    0% {
        transform: translate(50%, -50%) scale(0);
        opacity: 0;
    }

    60% {
        transform: translate(50%, -50%) scale(1.3);
        opacity: 1;
    }

    100% {
        transform: translate(50%, -50%) scale(1);
        opacity: 1;
    }
}

.shake-animate {
    display: inline-block;
    animation: shake 0.5s ease-in-out 1s 2;
}

.zoom-animate {
    display: inline-block;
    animation: zoom 0.4s ease-in-out 2s 2;
}

/* 4. Basis / Reset */
html {
    overflow-x: hidden;
}

body {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    opacity: 0;
    animation: fadeIn .3s ease-in forwards;
}

a {
    text-decoration: none;
}

h4 i {
    color: var(--km-accent);
}

.h5 {
    font-size: 1.1rem;
}

/* Extra bottom padding for mobile fixed nav */
.pb-extra {
    padding-bottom: 8rem;
}

/* 5. Badges & Overlays */
.badge-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--km-accent);
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translate(50%, -50%) scale(0);
    opacity: 0;
    animation: pop-in 0.5s ease-out 0.5s forwards;
}

.overlay-category {
    position: absolute;
    right: 0;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

/* 6. Header & Navigation
   ---------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Pill-shaped search bar in header */
.header-search .input-group-text {
    border-right: 0;
    border-radius: var(--km-radius-pill) 0 0 var(--km-radius-pill);
}

.header-search .form-control {
    border-left: 0;
    border-radius: 0 var(--km-radius-pill) var(--km-radius-pill) 0;
}

/* User icon nav (mobile bottom bar) */
ul.nav-user {
    font-size: 1.75rem;
    margin-bottom: 0;
}

ul.nav-user li {
    padding: 0 0.5rem;
}

ul.nav-user a {
    color: var(--km-primary) !important;
    transition: color 0.1s ease-in-out;
}

ul.nav-user a:hover {
    color: var(--km-accent) !important;
}

/* 7. Layout Hilfsklassen */
.proportions-box-square {
    position: relative;
    padding: 100% 0 0 !important;
    height: 0;
}

.proportions-box-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Background position helpers */
.background-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.background-left-top {
    background-position: left top;
}

.background-left-center {
    background-position: left center;
}

.background-left-bottom {
    background-position: left bottom;
}

.background-right-top {
    background-position: right top;
}

.background-right-center {
    background-position: right center;
}

.background-right-bottom {
    background-position: right bottom;
}

.background-center-top {
    background-position: center top;
}

.background-center-center {
    background-position: center center;
}

.background-center-bottom {
    background-position: center bottom;
}

/* Border widths */
.border-width-1 {
    border-width: 1px  !important;
}

.border-width-2 {
    border-width: 2px  !important;
}

.border-width-3 {
    border-width: 3px  !important;
}

.border-width-4 {
    border-width: 4px  !important;
}

.border-width-6 {
    border-width: 6px  !important;
}

.border-width-8 {
    border-width: 8px  !important;
}

.border-width-12 {
    border-width: 12px !important;
}

.border-width-16 {
    border-width: 16px !important;
}

.border-width-24 {
    border-width: 24px !important;
}

/* Image object-fit helpers */
.image-fit {
    object-fit: contain;
    object-position: center center;
}

.image-fit-left-top {
    object-position: left top;
}

.image-fit-left-center {
    object-position: left center;
}

.image-fit-left-bottom {
    object-position: left bottom;
}

.image-fit-right-top {
    object-position: right top;
}

.image-fit-right-center {
    object-position: right center;
}

.image-fit-right-bottom {
    object-position: right bottom;
}

.image-fit-center-top {
    object-position: center top;
}

.image-fit-center-center {
    object-position: center center;
}

.image-fit-center-bottom {
    object-position: center bottom;
}

/* Transitions */
.transition {
    transition: all 0.25s ease-in;
}

.transition-slow {
    transition: all 0.5s ease-in;
}

.transition-very-slow {
    transition: all 1s ease-in;
}

/* Opacity */
.opacity-100 {
    opacity: 1    !important;
}

.opacity-85 {
    opacity: 0.85 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-50 {
    opacity: 0.50 !important;
}

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-0 {
    opacity: 0    !important;
}

/* Misc */
.line-height-1 {
    line-height: 1 !important;
}

.mw-lg-50 {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.mw-75 {
    max-width: 75%;
}

/* Semantic helpers */
.text-muted-soft {
    color: var(--km-text-muted);
}

.bg-surface {
    background-color: var(--km-surface);
}

/* 8. Mobile footer nav */
nav#nav_footer {
    padding: 1rem 0 0 0;
}

nav#nav_footer ul {
    max-width: 80%;
}

nav#nav_footer li {
    line-height: 1;
}

nav#nav_footer i {
    font-size: 2.4rem;
    color: #fff;
}

nav#nav_footer .kummerc-icon {
    background-color: var(--km-primary);
    margin-top: -40px;
    padding: 20px 20px 16px 20px;
    border-radius: 50%;
}

nav#nav_footer .kummerc-icon i {
    font-size: 4.4rem;
}

.kummerc-icon img {
    transition: transform 0.3s ease-in-out;
    width: 64px;
    height: 64px;
}

.kummerc-icon:hover img {
    transform: rotate(90deg);
}

/* 9. Listing-Card
   ---------------------------------------------- */
.marketplace-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    will-change: transform;
}

.marketplace-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--km-shadow-lg);
    border-color: var(--km-border-hover);
}

@media (hover: hover) {
    .marketplace-card:hover .overlay-fav {
        transform: translateY(-1px);
    }
}

/* Image container */
.card-media {
    overflow: hidden;
}

/* 4:3 ratio image for listing cards */
.card-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    width: 100%;
}

/* Flex card body */
.card-body-compact {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: .85rem !important;
    padding-bottom: .95rem !important;
}

/* Title: 2-line clamp */
.title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 10. Quickfacts */
.quickfacts {
    max-height: 64px;
    overflow: hidden;
    align-content: flex-start;
}

.quickfacts .fact {
    display: inline-flex;
    align-items: center;
    gap: .40rem;
    padding: .28rem .52rem;
    border: 1px solid rgba(0, 0, 0, .14);
    background: rgba(0, 0, 0, .03);
    border-radius: var(--km-radius-pill);
    font-size: .85rem;
    line-height: 1;
    color: var(--km-text-soft);
    white-space: nowrap;
}

.quickfacts .fact i {
    opacity: .72;
    font-size: .95em;
}

.quickfacts .fact b {
    font-weight: 650;
    color: rgba(0, 0, 0, .88);
}

.quickfacts .fact .unit {
    opacity: .75;
    margin-left: .1rem;
}

/* 11. Preis & Meta */
.price-row {
    margin-top: auto;
    padding-top: .35rem;
}

.price {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--km-primary-mid);
    white-space: nowrap;
}

.meta {
    font-size: .9rem;
    color: var(--km-text-muted);
    white-space: nowrap;
}

.meta i {
    opacity: .75;
}

/* 12. Card Overlays */
/* Favourite button on card image */
.overlay-fav {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.overlay-fav:hover {
    transform: translateY(-1px);
    box-shadow: var(--km-shadow-md);
}

/* Standalone favourite button (object detail page) */
.fav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
    border: 1px solid var(--km-border-hover) !important;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

.fav-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--km-shadow-sm);
}

/* Category badge overlaid on card image */
.overlay-category {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: .32rem .62rem;
    border-radius: var(--km-radius-pill);
    background: rgba(255, 90, 60, .90);
    font-weight: 600;
    font-size: .85rem;
    backdrop-filter: blur(8px);
}

/* 13. Kategorie-Kacheln
   ---------------------------------------------- */
.categories {
    background: transparent;
}

/* Vertical card – one colour theme per category */
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
    border-radius: var(--km-radius-md);
    border: 1px solid var(--km-border);
    background: var(--km-bg-white, #fff);
    transition: transform .18s ease, box-shadow .18s ease;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--km-shadow-md);
}

.category-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: .85rem;
    transition: transform .18s ease;
}

.category-card:hover .category-card__icon {
    transform: scale(1.1);
}

.category-card__icon i {
    font-size: 1.65rem;
}

.category-card__title {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    line-height: 1.2;
}

.category-card__count {
    font-size: .78rem;
    margin: 0;
    opacity: .7;
}

/* All categories use the same brand colours — no per-category rainbow */
.category-card--realestate,
.category-card--vehicles,
.category-card--boats,
.category-card--private,
.category-card--services {
    background: var(--km-bg-white, #fff);
    border-color: var(--km-border);
}

.category-card--realestate .category-card__icon,
.category-card--vehicles .category-card__icon,
.category-card--boats .category-card__icon,
.category-card--private .category-card__icon,
.category-card--services .category-card__icon {
    background: rgba(0, 78, 97, .08);
}

.category-card--realestate .category-card__icon i,
.category-card--vehicles .category-card__icon i,
.category-card--boats .category-card__icon i,
.category-card--private .category-card__icon i,
.category-card--services .category-card__icon i {
    color: var(--km-primary-mid);
}

.category-card--realestate .category-card__title,
.category-card--vehicles .category-card__title,
.category-card--boats .category-card__title,
.category-card--private .category-card__title,
.category-card--services .category-card__title {
    color: var(--km-primary-mid);
}

.category-card--realestate .category-card__count,
.category-card--vehicles .category-card__count,
.category-card--boats .category-card__count,
.category-card--private .category-card__count,
.category-card--services .category-card__count {
    color: var(--km-text-muted);
}

@media (max-width: 575px) {
    .category-card {
        padding: 1.1rem .75rem 1rem;
    }

    .category-card__icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    .category-card__icon i {
        font-size: 1.35rem;
    }
}

/* Section head (used on index + seller page) */
.section-head__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.section-head__sub {
    margin: 0;
}

.section-head__link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--km-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.section-head__link:hover {
    color: var(--km-accent);
}

/* 14. Hero Startseite */
.hero-overlay {
    position: relative;
    height: 520px;
    overflow: hidden;
    border-radius: var(--km-radius-lg);
    margin-left: 1rem;
    margin-right: 1rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1;
}

.hero-overlay-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.hero-title {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
}

.hero-search-form {
    padding: 1.5rem;
    border-radius: var(--km-radius-md);
    max-width: 960px;
    width: 100%;
}

.hero-sub {
    font-size: .9rem;
    color: #eee;
}

@media (max-width: 768px) {
    /* Hero grows with its content instead of clipping it */
    .hero-overlay {
        height: auto;
        min-height: 420px;
    }

    .hero-overlay-content {
        height: auto;
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 1.25rem;
    }

    .hero-search-form {
        padding: 1.1rem;
    }
}

/* 15. Ad-Card / Sponsored */
.ad-card {
    border-radius: var(--km-radius-md);
    overflow: hidden;
    background: linear-gradient(180deg, #f4f8f7 0%, #eef4f3 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.ad-media img {
    height: 260px;
    object-fit: cover;
}

@media (min-width: 992px)  {
    .ad-media img {
        height: 300px;
    }
}

@media (min-width: 1200px) {
    .ad-media img {
        height: 340px;
    }
}

.ad-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--km-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
    letter-spacing: .05em;
    text-transform: uppercase;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.ad-body {
    background: transparent;
    padding: 1.5rem 1.5rem 1.75rem;
}

.ad-description {
    font-size: 0.95rem;
    color: #355;
    line-height: 1.45;
}

/* 16. Objekt-Detailseite
   ---------------------------------------------- */
/* Hero media area */
.hero-media {
    background: var(--km-surface);
}

.hero-media-inner {
    max-width: 100%;
    overflow: hidden;
}

/* Carousel main image: 4:3 */
.img-4-3 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* Thumbnail strip below carousel */
.img-4-3-thumbnail {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    display: block;
    border-radius: .5rem;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .65;
    transition: opacity .15s ease, border-color .15s ease;
}

.img-4-3-thumbnail:hover,
.img-4-3-thumbnail.active {
    opacity: 1;
    border-color: var(--km-primary);
}

/* Price box – sticky on desktop */
.price-box {
    border-radius: var(--km-radius-md);
    position: sticky;
    top: 80px;
}

/* Object details grid items */
.detail-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
}

.detail-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
}

.detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* Description text block */
.description-block {
    line-height: 1.7;
    color: #333;
}

/* Map embed */
.map-container {
    border-radius: var(--km-radius-md);
    overflow: hidden;
}

/* 17. Anbieter-Card */
.provider-card {
    border-radius: var(--km-radius-md);
    border: 1px solid var(--km-border);
}

.provider-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.provider-stars {
    color: #f5a623;
    font-size: .95rem;
    display: inline-flex;
    gap: .1rem;
}

.provider-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--km-text-muted);
}

.provider-meta i {
    margin-right: .3rem;
    opacity: .75;
}

.provider-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--km-border);
}

.provider-actions {
    display: flex;
    gap: .5rem;
}

/* Report link (used across detail & provider sections) */
.report-link {
    font-size: .85rem;
    white-space: nowrap;
    transition: opacity .15s ease;
}

.report-link:hover {
    opacity: .75;
}

/* 18. Footer
   ---------------------------------------------- */
.site-footer {
    background: #fff;
    color: var(--km-text-soft);
    border-top: 1px solid var(--km-border);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.site-footer .footer-text {
    max-width: 34rem;
    color: var(--km-text-muted);
    line-height: 1.55;
}

.site-footer .footer-title {
    color: var(--km-primary-mid);
    font-weight: 700;
    margin-bottom: .75rem;
    letter-spacing: .2px;
    font-size: .82rem;
    text-transform: uppercase;
}

.site-footer .footer-links li {
    margin: .35rem 0;
}

.site-footer .footer-links a {
    color: var(--km-text-soft);
    text-decoration: none;
    transition: color .15s ease;
    font-size: .92rem;
}

.site-footer .footer-links a:hover {
    color: var(--km-primary);
}

.site-footer .footer-divider {
    border-color: var(--km-border);
    opacity: 1;
}

.footer-btn {
    border-radius: var(--km-radius-sm);
    padding: .55rem .9rem;
}

.footer-social-link {
    width: 38px;
    height: 38px;
    border-radius: var(--km-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--km-text-soft);
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    transition: transform .15s ease, background .2s ease, color .2s ease;
}

.footer-social-link:hover {
    background: var(--km-primary);
    color: #fff;
    border-color: var(--km-primary);
    transform: translateY(-2px);
}

.footer-meta {
    color: var(--km-text-muted);
    font-size: .95rem;
}

.footer-dot {
    margin: 0 .5rem;
    opacity: .5;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    border-radius: var(--km-radius-sm);
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    color: var(--km-text-soft);
    font-size: .9rem;
    white-space: nowrap;
}

.footer-mini-link {
    color: var(--km-text-muted);
    text-decoration: none;
    font-size: .9rem;
    transition: color .15s ease;
}

.footer-mini-link:hover {
    color: var(--km-primary);
}

@media (max-width: 767.98px) {
    .site-footer {
        padding-bottom: 84px;
    }
}

/* 19. Listing Status Badges */
.listing-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: var(--km-radius-pill);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
}

.listing-status {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* 20. Utility Klassen */
/* Featured: accent border */
.is-featured {
    border: 2px solid var(--km-accent) !important;
}

/* Sponsored: dashed outline */
/* Sold: greyed out with label */
.is-sold {
    opacity: .55;
    pointer-events: none;
}

.is-sold .card-media {
    position: relative;
}

.is-sold .card-media::after {
    content: "SOLD";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .1em;
    display: grid;
    place-items: center;
}

/* Reserved: brand-coloured label */
.is-reserved .card-media {
    position: relative;
}

.is-reserved .card-media::after {
    content: "RESERVED";
    position: absolute;
    inset: 0;
    background: rgba(0, 78, 97, .55);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .08em;
    display: grid;
    place-items: center;
}

/* Generic helper classes */
.has-shadow {
    box-shadow: var(--km-shadow-md);
}

.has-radius {
    border-radius: var(--km-radius-md);
}

.has-border {
    border: 1px solid var(--km-border);
}

/* 21. Filter Sidebar
   ---------------------------------------------- */
/* Sidebar wrapper */
.filter-bar__sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.25rem;
}

/* Section title inside filter */
.filter-bar__section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--km-text-muted);
    margin-bottom: .75rem;
}

/* Divider between filter sections */
.filter-bar__divider {
    border-color: var(--km-border);
    opacity: 1;
    margin: 1rem 0;
}

/* Count buttons (Bedrooms: 1+ 2+ 3+) */
.filter-count-btn {
    min-width: 44px;
}

/* Active filter pills */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    background: rgba(0, 78, 97, .08);
    border: 1px solid rgba(0, 78, 97, .18);
    border-radius: var(--km-radius-pill);
    font-size: .82rem;
    font-weight: 500;
    color: var(--km-primary-mid);
    white-space: nowrap;
}

.filter-pill.active {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: #fff;
}

.filter-pill__remove {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    color: inherit;
    font-size: .75rem;
}

.filter-pill__remove:hover {
    opacity: 1;
}

/* Scrollable pill row on mobile */
.filter-pills-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.filter-pills-scroll::-webkit-scrollbar {
    display: none;
}

/* 22. Sortierleiste */
.sort-bar {
    padding: .5rem 0;
}

.sort-bar__count {
    font-size: .95rem;
}

.sort-bar__select {
    min-width: 160px;
}

/* 23. Offcanvas Footer */
.offcanvas-footer {
    background: #fff;
}

/* 24. Listing Grid - Listenansicht */
.listing-grid--list .col-md-6,
.listing-grid--list .col-xl-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.listing-grid--list .marketplace-card {
    flex-direction: row;
}

.listing-grid--list .listing-card__image {
    width: 220px;
    flex-shrink: 0;
    border-bottom: 0 !important;
    border-right: 1px solid var(--km-border);
}

.listing-grid--list .card-img {
    height: 100%;
    aspect-ratio: unset;
}

.listing-grid--list .overlay-category {
    top: 10px;
    right: 10px;
}

@media (max-width: 575px) {
    .listing-grid--list .marketplace-card {
        flex-direction: column;
    }

    .listing-grid--list .listing-card__image {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--km-border) !important;
    }

    .listing-grid--list .card-img {
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

/* 25. Preis Range Slider
   ---------------------------------------------- */
.price-range {
    padding: .25rem 0;
}

.price-range__values {
    font-size: .85rem;
    color: var(--km-primary-mid);
}

/* Track wrapper – both inputs sit on top of each other */
.price-range__track {
    position: relative;
    height: 4px;
    background: var(--km-border);
    border-radius: var(--km-radius-pill);
    margin: 1rem 0 .5rem;
}

/* Coloured fill between the two handles */
.price-range__fill {
    position: absolute;
    height: 100%;
    background: var(--km-primary);
    border-radius: var(--km-radius-pill);
    pointer-events: none;
}

/* Both range inputs stacked, transparent track/thumb styled below */
.price-range__input {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    outline: none;
    margin: 0;
}

/* Only the thumb is interactive */
.price-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--km-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.price-range__input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--km-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.price-range__input:focus::-webkit-slider-thumb {
    border-color: var(--km-accent);
    transform: scale(1.15);
}

.price-range__input:focus::-moz-range-thumb {
    border-color: var(--km-accent);
    transform: scale(1.15);
}

/* Min handle sits below max so max is always clickable at the right edge */
.price-range__input--min {
    z-index: 2;
}

.price-range__input--max {
    z-index: 3;
}

/* 26. Karten-Ansicht (Leaflet) */
/* Map container (fills results column) */
.map-view {
    position: relative;
}

.map-view__map {
    width: 100%;
    height: 620px;
    border-radius: var(--km-radius-md);
    overflow: hidden;
    border: 1px solid var(--km-border);
    z-index: 0;
}

@media (max-width: 767.98px) {
    .map-view__map {
        height: 480px;
    }
}

/* --- Custom map marker --- */
.map-marker {
    width: 36px;
    height: 36px;
    background: var(--km-primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.map-marker i {
    transform: rotate(45deg);
    color: #fff;
    font-size: .85rem;
}

.map-marker--featured {
    background: var(--km-accent);
}

.map-marker--active {
    background: var(--km-accent);
    transform: rotate(-45deg) scale(1.25);
    z-index: 999;
}

/* --- Popup card (bottom of map on marker click) --- */
.map-popup-card {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 480px;
    background: #fff;
    border-radius: var(--km-radius-md);
    box-shadow: var(--km-shadow-lg);
    padding: 1rem;
    z-index: 500;
    animation: fadeIn .2s ease-in;
}

.map-popup-card__close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: .8rem;
    color: var(--km-text-muted);
    transition: background .15s ease;
    line-height: 1;
}

.map-popup-card__close:hover {
    background: #f0f0f0;
    color: #000;
}

.map-popup-card__img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--km-radius-sm);
    flex-shrink: 0;
}

.map-popup-card__category {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-accent);
    margin-bottom: .15rem;
}

.map-popup-card__title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

/* 27. Bildgalerie - Split Layout
   ---------------------------------------------- */
/* Outer wrapper */
.hero-media {
    background: #fff;
}

/* Desktop: CSS Grid – 3fr main + 1fr thumbs column */
.media-gallery {
    display: none;

    /* hidden on mobile, shown on lg+ */
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    gap: .5rem;
    height: 360px;
    border-radius: var(--km-radius-lg);
    overflow: hidden;
}

@media (min-width: 992px) {
    .media-gallery {
        display: grid;
    }

    .media-gallery--mobile {
        display: none !important;
    }
}

/* Main image */
.media-gallery__main {
    overflow: hidden;
    border-radius: var(--km-radius-md) 0 0 var(--km-radius-md);
}

.media-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .15s ease;
    cursor: zoom-in;
}

/* Thumbnail column: 2x2 grid */
.media-gallery__thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .5rem;
}

/* Individual thumbnail button */
.media-gallery__thumb {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
}

.media-gallery__thumb:last-child {
    border-radius: 0 var(--km-radius-md) var(--km-radius-md) 0;
}

/* Correct border-radius for top-right and bottom-right corners */
.media-gallery__thumbs > .media-gallery__thumb:nth-child(2) {
    border-radius: 0 var(--km-radius-md) 0 0;
}

.media-gallery__thumbs > .media-gallery__thumb:nth-child(4) {
    border-radius: 0 0 var(--km-radius-md) 0;
}

.media-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease, opacity .15s ease;
}

.media-gallery__thumb:hover img {
    transform: scale(1.04);
    opacity: .88;
}

.media-gallery__thumb--active img {
    opacity: .75;
}

/* "Show all" overlay on last thumbnail */
.media-gallery__more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .52);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}

.media-gallery__thumb--more:hover .media-gallery__more-overlay {
    background: rgba(0, 0, 0, .65);
}

/* Mobile carousel slide counter badge */
.media-gallery__counter {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: var(--km-radius-pill);
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* Lightbox modal: 16:9 image ratio */
.img-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    display: block;
}

/* 28. Beschreibungsblock */
.description-block p {
    line-height: 1.75;
    color: #333;
    margin-bottom: 1rem;
}

.description-block p:last-child {
    margin-bottom: 0;
}

.description-block__toggle {
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.description-block__toggle:hover {
    opacity: .8;
}

/* Provider meta: listings count as link */
.provider-meta__listings-link {
    color: var(--km-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.provider-meta__listings-link:hover {
    color: var(--km-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 29. Profil / Seller Seite
   ---------------------------------------------- */
/* ---- Avatar ---- */
.seller-avatar__wrap {
    position: relative;
    display: inline-block;
}

.seller-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: var(--km-shadow-sm);
}

.seller-avatar__verified {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--km-primary);
    font-size: .9rem;
    box-shadow: var(--km-shadow-sm);
}

@media (min-width: 768px) {
    .seller-avatar {
        width: 120px;
        height: 120px;
    }
}

/* ---- Seller info ---- */
.seller-info__subtitle {
    color: var(--km-text-muted);
    font-size: .95rem;
}

/* ---- Seller badges ---- */
.seller-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
}

.seller-badge--verified {
    background: rgba(25, 135, 84, .10);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, .20);
}

.seller-badge--commercial {
    background: rgba(0, 78, 97, .08);
    color: var(--km-primary-mid);
    border: 1px solid rgba(0, 78, 97, .15);
}

/* ---- Rating ---- */
.seller-rating__stars {
    color: #f5a623;
    font-size: .95rem;
    display: inline-flex;
    gap: .1rem;
}

.seller-rating__score {
    font-size: 1rem;
    color: #1a1a1a;
}

.seller-rating__count {
    font-size: .85rem;
}

/* ---- Meta pills ---- */
.seller-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.seller-meta__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--km-text-muted);
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    padding: .25rem .65rem;
    border-radius: var(--km-radius-pill);
}

.seller-meta__item i {
    opacity: .7;
    font-size: .85em;
}

/* ---- CTA box ---- */
.seller-cta {
    border-radius: var(--km-radius-md);
}

/* ---- Stats grid ---- */
.seller-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.seller-stats__item {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    padding: .9rem 1rem;
    text-align: center;
}

.seller-stats__value {
    font-size: 1.5rem;
    font-weight: 750;
    color: var(--km-primary-mid);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.seller-stats__label {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ---- Tab nav ---- */
.tab-nav__link {
    font-size: .85rem;
    padding: .35rem .75rem;
    color: var(--km-text-muted);
    border-radius: var(--km-radius-pill) !important;
}

.tab-nav__link.active {
    background-color: var(--km-primary) !important;
    color: #fff !important;
}

.tab-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .25);
    border-radius: var(--km-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    padding: .05rem .4rem;
    margin-left: .3rem;
    min-width: 20px;
}

.tab-nav__link:not(.active) .tab-nav__count {
    background: rgba(0, 0, 0, .08);
    color: var(--km-text-muted);
}

/* ---- Review cards ---- */
.review-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.review-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--km-primary);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.review-card__name {
    font-weight: 600;
    font-size: .9rem;
    color: #1a1a1a;
    line-height: 1.2;
}

.review-card__date {
    font-size: .78rem;
}

.review-card__stars {
    color: #f5a623;
    font-size: .82rem;
    white-space: nowrap;
}

.review-card__text {
    font-size: .88rem;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* 30. Achievement Badges */
/* ---- Profile: header row ---- */
.seller-achievements__head {
    margin-top: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.seller-achievements__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--km-text-muted);
    margin: 0;
}

.seller-achievements__count {
    font-weight: 400;
    margin-left: .35rem;
    color: var(--km-primary);
}

.seller-achievements__viewall {
    background: none;
    border: none;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--km-primary);
    cursor: pointer;
    transition: color .15s ease;
}

.seller-achievements__viewall:hover {
    color: var(--km-accent);
}

/* ---- Badge wrapper ---- */
.achievement-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    outline: none;
    gap: .3rem;
}

/* ---- Profile badges: 72px ---- */
.achievement-badge__img {
    width: 88px;
    height: 88px;
    border-radius: 0;
    object-fit: contain;
    display: block;
    background: transparent;
    box-shadow: none;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

.achievement-badge:hover .achievement-badge__img,
.achievement-badge:focus .achievement-badge__img {
    transform: scale(1.12) translateY(-3px);
    box-shadow: none;
}

/* ---- Modal badges: larger with name label ---- */
.achievement-badge--lg .achievement-badge__img {
    width: 100px;
    height: 100px;
}

.achievement-badge__name {
    font-size: .72rem;
    font-weight: 600;
    color: var(--km-text-soft);
    text-align: center;
    line-height: 1.2;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Locked badge ---- */
.achievement-badge--locked .achievement-badge__img {
    filter: grayscale(100%) opacity(.35);
}

.achievement-badge--locked .achievement-badge__name {
    color: var(--km-text-muted);
    opacity: .6;
}

.achievement-badge--locked:hover .achievement-badge__img,
.achievement-badge--locked:focus .achievement-badge__img {
    filter: grayscale(80%) opacity(.5);
    transform: scale(1.08) translateY(-2px);
}

/* ---- Tooltip ---- */
.achievement-badge__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1a1a1a;
    color: #fff;
    border-radius: var(--km-radius-sm);
    padding: .45rem .75rem;
    min-width: 155px;
    max-width: 210px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 500;
    white-space: normal;
}

.achievement-badge__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
}

.achievement-badge__tooltip-title {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.3;
}

.achievement-badge__tooltip-desc {
    display: block;
    font-size: .74rem;
    opacity: .75;
    margin-top: .15rem;
    line-height: 1.3;
}

.achievement-badge:hover .achievement-badge__tooltip,
.achievement-badge:focus .achievement-badge__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Modal: badge grid ---- */
.achievements-modal__section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--km-border);
}

.achievements-modal__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

.achievements-modal__grid--locked {
    opacity: .85;
}

/* 31. Cover Banner & Avatar */
/* Cover banner */
.seller-cover {
    position: relative;
    height: 220px;
    background: linear-gradient(135deg, var(--km-primary) 0%, var(--km-primary-mid) 50%, #0d6e85 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

@media (min-width: 768px) {
    .seller-cover {
        height: 280px;
    }
}

/* Overlay to darken uploaded photo for readability */
.seller-cover--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1;
}

/* Edit cover button */
.seller-cover__edit {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .85rem;
    border-radius: var(--km-radius-pill);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .15s ease;
    user-select: none;
}

.seller-cover__edit:hover {
    background: rgba(0, 0, 0, .65);
}

/* Profile body: pulls up to overlap the cover */
.seller-profile__body {
    background: #fff;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--km-border);
}

/* Avatar: larger, overlapping cover */
.seller-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: var(--km-shadow-md);
    margin-top: -55px;

    /* pulls avatar up over the cover */
    position: relative;
    z-index: 2;
    background: #fff;
}

@media (min-width: 768px) {
    .seller-avatar {
        width: 130px;
        height: 130px;
        margin-top: -65px;
    }
}

/* Avatar edit button */
.seller-avatar__edit {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--km-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .8rem;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: var(--km-shadow-sm);
    transition: background .15s ease;
    z-index: 3;
}

.seller-avatar__edit:hover {
    background: var(--km-accent);
}

/* Verified checkmark repositioned */
.seller-avatar__verified {
    position: absolute;
    bottom: 34px;
    right: 0px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #198754;
    font-size: .9rem;
    box-shadow: var(--km-shadow-sm);
    z-index: 4;
}

/* 32. Stats inline */
.seller-stats--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    background: #fff;
}

.seller-stats--inline .seller-stats__item {
    flex: 1 1 80px;
    min-width: 80px;
    text-align: center;
    padding: .65rem .75rem;
    border: none;
    border-right: 1px solid var(--km-border);
    border-radius: 0;
    background: transparent;
}

.seller-stats--inline .seller-stats__item:last-child {
    border-right: none;
}

.seller-stats--inline .seller-stats__value {
    font-size: 1.2rem;
}

.seller-stats--inline .seller-stats__label {
    font-size: .7rem;
}

/* 33. Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--km-text-muted);
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: var(--km-text-muted);
    margin-bottom: 1rem;
    opacity: .6;
}

.empty-state__title {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: .4rem;
}

.empty-state__text {
    font-size: .9rem;
    max-width: 340px;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

/* 34. Auth / Login & Register
   ---------------------------------------------- */
/* Page layout */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f6f8;
    opacity: 1 !important;

    /* override body fade-in */
    animation: none !important;
}

.auth-header {
    background: #fff;
    border-bottom: 1px solid var(--km-border);
    flex-shrink: 0;
}

.auth-header__back {
    text-decoration: none;
    transition: color .15s ease;
}

.auth-header__back:hover {
    color: var(--km-primary) !important;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 2.5rem 0;
}

.auth-footer {
    background: #fff;
    border-top: 1px solid var(--km-border);
    padding: 1rem 0;
    flex-shrink: 0;
}

/* ---- Brand panel (desktop left side) ---- */
.auth-brand-panel {
    background: linear-gradient(160deg, var(--km-primary) 0%, var(--km-primary-mid) 60%, #0d6e85 100%);
    border-radius: var(--km-radius-lg);
    min-height: 540px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.auth-brand-panel::before,
.auth-brand-panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.auth-brand-panel::before {
    width: 300px;
    height: 300px;
    top: -80px;
    right: -80px;
}

.auth-brand-panel::after {
    width: 200px;
    height: 200px;
    bottom: -60px;
    left: -60px;
}

.auth-brand-panel__content {
    position: relative;
    z-index: 1;
    color: #fff;
}

.auth-brand-panel__title {
    color: #fff !important;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.auth-brand-panel__sub {
    color: rgba(255, 255, 255, .75);
    margin-bottom: 2rem;
    font-size: .95rem;
}

.auth-brand-panel__stats {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

.auth-brand-panel__stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.auth-brand-panel__stat-value {
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.auth-brand-panel__stat-label {
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
}

.auth-brand-panel__trust {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .7);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* ---- Auth card (right side) ---- */
.auth-card {
    background: #fff;
    border-radius: var(--km-radius-lg);
    box-shadow: var(--km-shadow-md);
    overflow: hidden;
}

/* Tab switcher */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--km-border);
}

.auth-tab {
    flex: 1;
    padding: 1rem;
    background: none;
    border: none;
    font-size: .95rem;
    font-weight: 600;
    color: var(--km-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.auth-tab.active {
    color: var(--km-primary);
    border-bottom-color: var(--km-primary);
}

.auth-tab:hover:not(.active) {
    color: #333;
}

/* Panels */
.auth-panel {
    display: none;
    padding: 2rem;
}

.auth-panel.active {
    display: block;
}

.auth-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.auth-card__sub {
    color: var(--km-text-muted);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

/* Social login buttons */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.auth-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: 100%;
    padding: .65rem 1rem;
    background: #fff;
    border: 1px solid var(--km-border-hover);
    border-radius: var(--km-radius-md);
    font-size: .9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.auth-social__btn:hover {
    background: var(--km-surface);
    border-color: var(--km-border-hover);
}

/* Divider */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.25rem 0;
    color: var(--km-text-muted);
    font-size: .82rem;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--km-border);
}

.auth-divider span {
    position: relative;
    background: #fff;
    padding: 0 .75rem;
}

/* Form elements */
.auth-form__group {
    margin-bottom: 1rem;
}

.auth-form__label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .35rem;
    color: #333;
}

.auth-form__input-wrap {
    position: relative;
}

.auth-form__icon {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--km-text-muted);
    font-size: .9rem;
    pointer-events: none;
}

.auth-form__input {
    padding-left: 2.4rem !important;
    border-radius: var(--km-radius-md) !important;
    border-color: var(--km-border-hover) !important;
    font-size: .9rem;
}

.auth-form__input:focus {
    border-color: var(--km-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 78, 97, .12) !important;
}

/* Password toggle button */
.auth-form__toggle-pw {
    position: absolute;
    top: 50%;
    right: .9rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--km-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: .9rem;
    line-height: 1;
}

.auth-form__toggle-pw:hover {
    color: #333;
}

.auth-form__forgot {
    font-size: .82rem;
    color: var(--km-primary);
    text-decoration: none;
}

.auth-form__forgot:hover {
    text-decoration: underline;
}

/* Submit button */
.auth-form__submit {
    width: 100%;
    padding: .75rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: var(--km-radius-md);
    margin-top: .5rem;
    margin-bottom: .75rem;
}

/* Switch link (inline) */
.auth-form__switch {
    text-align: center;
    font-size: .85rem;
    color: var(--km-text-muted);
    margin: 0;
}

.auth-switch-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--km-primary);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-switch-link:hover {
    color: var(--km-accent);
}

/* Account type selector */
.auth-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.auth-type-option {
    cursor: pointer;
}

.auth-type-option input {
    display: none;
}

.auth-type-option__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .85rem .5rem;
    border: 2px solid var(--km-border-hover);
    border-radius: var(--km-radius-md);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
    font-size: .85rem;
}

.auth-type-option__card i {
    font-size: 1.3rem;
    color: var(--km-text-muted);
    transition: color .15s ease;
}

.auth-type-option__title {
    font-weight: 700;
    color: #333;
    font-size: .85rem;
    line-height: 1.2;
}

.auth-type-option__desc {
    font-size: .75rem;
    color: var(--km-text-muted);
}

.auth-type-option input:checked + .auth-type-option__card {
    border-color: var(--km-primary);
    background: rgba(0, 78, 97, .05);
}

.auth-type-option input:checked + .auth-type-option__card i {
    color: var(--km-primary);
}

/* Password strength indicator */
.auth-strength {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .4rem;
}

.auth-strength__track {
    flex: 1;
    height: 4px;
    background: var(--km-border);
    border-radius: var(--km-radius-pill);
    overflow: hidden;
}

.auth-strength__fill {
    height: 100%;
    width: 0%;
    border-radius: var(--km-radius-pill);
    transition: width .25s ease, background-color .25s ease;
}

.auth-strength__label {
    font-size: .75rem;
    font-weight: 600;
    min-width: 42px;
    text-align: right;
}

/* 35. Dashboard
   ---------------------------------------------- */
/* Layout */
.dashboard-layout {
    min-height: calc(100vh - 60px);
    background: #f4f6f8;
}

.dashboard-sidebar {
    background: #fff;
    border-right: 1px solid var(--km-border);
    min-height: calc(100vh - 60px);
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.dashboard-main {
    min-height: calc(100vh - 60px);
}

.dashboard-content {
    padding: 2rem;
    max-width: 1100px;
}

/* Header nav avatar */
.dashboard-nav__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--km-border);
}

/* ---- Account nav sidebar ---- */
.account-nav {
    padding: 1.5rem 0;
}

.account-nav__user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid var(--km-border);
    margin-bottom: .75rem;
}

.account-nav__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.account-nav__name {
    font-weight: 700;
    font-size: .88rem;
    color: #1a1a1a;
    line-height: 1.2;
}

.account-nav__role {
    font-size: .75rem;
    color: var(--km-text-muted);
}

.account-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-nav__item {
    margin: .1rem 0;
}

.account-nav__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1.25rem;
    color: var(--km-text-soft);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    border-radius: 0;
    transition: background .12s ease, color .12s ease;
    position: relative;
}

.account-nav__link i {
    width: 16px;
    text-align: center;
    font-size: .9rem;
    opacity: .75;
    flex-shrink: 0;
}

.account-nav__link:hover {
    background: var(--km-surface);
    color: var(--km-primary);
}

.account-nav__item--active .account-nav__link {
    color: var(--km-primary);
    background: rgba(0, 78, 97, .07);
    font-weight: 700;
    border-right: 3px solid var(--km-primary);
}

.account-nav__item--active .account-nav__link i {
    opacity: 1;
}

.account-nav__badge {
    margin-left: auto;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    color: var(--km-text-muted);
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: var(--km-radius-pill);
    line-height: 1.4;
}

.account-nav__badge--unread {
    background: var(--km-accent);
    border-color: var(--km-accent);
    color: #fff;
}

.account-nav__divider {
    height: 1px;
    background: var(--km-border);
    margin: .6rem 1.25rem;
}

.account-nav__link--danger {
    color: #dc3545;
}

.account-nav__link--danger:hover {
    background: rgba(220, 53, 69, .06);
    color: #dc3545;
}

/* ---- Stats cards ---- */
.stats-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.stats-card__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--km-radius-sm);
    display: grid;
    place-items: center;
    font-size: .95rem;
    margin-bottom: .75rem;
}

.stats-card__icon--primary {
    background: rgba(0, 78, 97, .10);
    color: var(--km-primary);
}

.stats-card__icon--success {
    background: rgba(25, 135, 84, .10);
    color: #198754;
}

.stats-card__icon--accent {
    background: rgba(231, 83, 59, .10);
    color: var(--km-accent);
}

.stats-card__icon--warning {
    background: rgba(255, 193, 7, .15);
    color: #856404;
}

.stats-card__value {
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    line-height: 1.1;
}

.stats-card__label {
    font-size: .8rem;
    color: var(--km-text-muted);
    margin-top: .15rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.stats-card__trend {
    font-size: .78rem;
    font-weight: 500;
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.stats-card__trend--up {
    color: #198754;
}

.stats-card__trend--down {
    color: var(--km-accent);
}

.stats-card__trend--neutral {
    color: var(--km-text-muted);
}

/* ---- Dashboard card (generic container) ---- */
.dashboard-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.25rem;
}

.dashboard-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dashboard-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

.dashboard-card__sub {
    font-size: .8rem;
    color: var(--km-text-muted);
    margin: .1rem 0 0;
}

.dashboard-card__action {
    font-size: .82rem;
    font-weight: 600;
    color: var(--km-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 1rem;
}

.dashboard-card__action:hover {
    color: var(--km-accent);
}

/* ---- Listing manager table ---- */
.listing-manager__table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
    font-weight: 600;
    border-top: none;
}

/* Row hover = same subtle tint as the other cards (not Bootstrap's darker default) */
.listing-manager__table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--km-surface);
}

.listing-manager__item {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.listing-manager__thumb {
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--km-radius-sm);
    flex-shrink: 0;
}

.listing-manager__thumb--sold {
    filter: grayscale(60%) opacity(.65);
}

.listing-manager__name {
    font-size: .88rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.listing-manager__meta {
    font-size: .75rem;
}

.listing-manager__row--sold td {
    opacity: .65;
}

/* Listing status badges */
.listing-status-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
}

.listing-status-badge--active {
    background: rgba(25, 135, 84, .10);
    color: #198754;
}

.listing-status-badge--reserved {
    background: rgba(0, 78, 97, .10);
    color: var(--km-primary);
}

.listing-status-badge--sold {
    background: rgba(0, 0, 0, .06);
    color: var(--km-text-muted);
}

.listing-status-badge--paused {
    background: rgba(255, 193, 7, .15);
    color: #856404;
}

/* ---- Message cards ---- */
.message-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--km-radius-sm);
    border: 1px solid var(--km-border);
    background: #fff;
    transition: background .12s ease;
    color: inherit;
}

.message-card:hover {
    background: var(--km-surface);
}

.message-card--unread {
    border-left: 3px solid var(--km-accent);
    background: rgba(231, 83, 59, .03);
}

.message-card__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--km-accent);
    margin-left: .4rem;
    vertical-align: middle;
}

.message-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--km-primary);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.message-card__body {
    flex: 1;
    min-width: 0;
}

.message-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .2rem;
}

.message-card__name {
    font-weight: 700;
    font-size: .88rem;
    color: #1a1a1a;
}

.message-card__time {
    font-size: .75rem;
    color: var(--km-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.message-card__preview {
    font-size: .82rem;
    color: var(--km-text-soft);
    margin: 0 0 .25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.message-card__listing {
    font-size: .75rem;
    color: var(--km-primary);
    font-weight: 500;
}

/* ---- Notification list (dashboard) ---- */
.notification-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    border-radius: var(--km-radius-sm);
    border: 1px solid var(--km-border);
    background: #fff;
    transition: background .12s ease;
    color: inherit;
}

.notification-item:hover {
    background: var(--km-surface);
}

.notification-item--unread {
    border-left: 3px solid var(--km-accent);
    background: rgba(231, 83, 59, .03);
}

.notification-item__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--km-radius-sm);
    display: grid;
    place-items: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.notification-item__icon--message {
    background: rgba(231, 83, 59, .10);
    color: var(--km-accent);
}

.notification-item__icon--offer {
    background: rgba(25, 135, 84, .10);
    color: #198754;
}

.notification-item__icon--saved {
    background: rgba(255, 193, 7, .15);
    color: #856404;
}

.notification-item__icon--system {
    background: rgba(0, 78, 97, .10);
    color: var(--km-primary);
}

.notification-item__body {
    flex: 1;
    min-width: 0;
}

.notification-item__text {
    font-size: .85rem;
    color: var(--km-text-soft);
    margin: 0 0 .15rem;
    line-height: 1.35;
}

.notification-item__text strong {
    color: #1a1a1a;
    font-weight: 700;
}

.notification-item__time {
    font-size: .75rem;
    color: var(--km-text-muted);
}

.notification-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--km-accent);
    flex-shrink: 0;
    margin-top: .5rem;
}

/* ---- Downloads (dashboard) ---- */
.download-group__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
    margin: 0 0 .5rem;
}

.download-group + .download-group {
    margin-top: 1.25rem;
}

.download-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.download-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: var(--km-radius-sm);
    border: 1px solid var(--km-border);
    background: #fff;
    transition: background .12s ease;
}

.download-item:hover {
    background: var(--km-surface);
}

.download-item__icon {
    width: 38px;
    height: 38px;
    border-radius: var(--km-radius-sm);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.download-item__icon--invoice {
    background: rgba(220, 53, 69, .10);
    color: #dc3545;
}

.download-item__icon--cert {
    background: rgba(0, 78, 97, .10);
    color: var(--km-primary);
}

.download-item__body {
    flex: 1;
    min-width: 0;
}

.download-item__title {
    font-weight: 600;
    font-size: .88rem;
    color: #1a1a1a;
}

.download-item__meta {
    font-size: .75rem;
    color: var(--km-text-muted);
}

.download-item__action {
    flex-shrink: 0;
}

/* ---- Achievement list (dashboard) ---- */
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.achievement-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.achievement-list__badge {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.achievement-list__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.achievement-list__info {
    min-width: 0;
}

.achievement-list__title {
    font-weight: 600;
    font-size: .88rem;
    color: #1a1a1a;
}

.achievement-list__desc {
    font-size: .78rem;
    color: var(--km-text-muted);
    line-height: 1.3;
}

.achievement-list__item--locked .achievement-list__badge img {
    filter: grayscale(100%) opacity(.4);
}

.achievement-list__item--locked .achievement-list__title {
    color: var(--km-text-muted);
}

.achievement-list__lock {
    font-size: .7rem;
    color: var(--km-text-muted);
    margin-left: .35rem;
}

/* ---- Favorites grid ---- */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .6rem;
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem;
    border-radius: var(--km-radius-sm);
    border: 1px solid var(--km-border);
    color: inherit;
    transition: background .12s ease;
}

.favorite-item:hover {
    background: var(--km-surface);
}

.favorite-item__img {
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--km-radius-sm);
    flex-shrink: 0;
}

.favorite-item__info {
    flex: 1;
    min-width: 0;
}

.favorite-item__title {
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-item__price {
    font-size: .88rem;
    font-weight: 700;
    color: var(--km-primary-mid);
}

.favorite-item__remove {
    background: none;
    border: none;
    padding: .25rem;
    cursor: pointer;
    flex-shrink: 0;
    font-size: .9rem;
    opacity: .65;
    transition: opacity .15s ease;
}

.favorite-item__remove:hover {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .dashboard-content {
        padding: 1.25rem;
    }
}

/* 36. News Cards */
.news-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
    color: inherit;
}

.news-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--km-shadow-md);
}

.news-card__image {
    position: relative;
    overflow: hidden;
}

.news-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

/* Mobile: all card images same height via aspect-ratio */
@media (max-width: 767px) {
    .card-img,
    .news-card__img,
    .feed-post__img-wrap {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .feed-post__img {
        aspect-ratio: 4 / 3;
        height: auto;
        width: 100%;
    }
}

.news-card:hover .news-card__img {
    transform: scale(1.04);
}

.news-card__tag {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--km-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
}

.news-card__body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.news-card__date {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin-bottom: .5rem;
}

.news-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__excerpt {
    font-size: .85rem;
    color: var(--km-text-muted);
    line-height: 1.55;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--km-primary);
    transition: color .15s ease;
}

.news-card:hover .news-card__link {
    color: var(--km-accent);
}

/* 37. SEO Textbereich */
.seo-section__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.seo-section__body p {
    font-size: .9rem;
    color: var(--km-text-muted);
    line-height: 1.7;
    margin-bottom: .75rem;
}

.seo-section__body p:last-child {
    margin-bottom: 0;
}

.seo-section__link {
    color: var(--km-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.seo-section__link:hover {
    color: var(--km-accent);
}

/* --- News Cards: magazine layout additions --- */
/* Featured (large left card) */
.news-card--featured .news-card__img--featured {
    aspect-ratio: 16 / 9;
}

.news-card__title--featured {
    font-size: 1.2rem;
    -webkit-line-clamp: 3;
}

.news-card--featured .news-card__excerpt {
    -webkit-line-clamp: 4;
}

/* Compact (small right cards – horizontal layout) */
.news-card--compact {
    flex-direction: row;
    align-items: stretch;
}

.news-card__image-side {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
}

.news-card__img--side {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.news-card--compact:hover .news-card__img--side {
    transform: scale(1.06);
}

.news-card__tag--sm {
    font-size: .68rem;
    padding: .15rem .45rem;
}

.news-card__body--compact {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-card__body--compact .news-card__title {
    font-size: .92rem;
    -webkit-line-clamp: 3;
    margin-bottom: .5rem;
}

@media (max-width: 767px) {
    .news-card--compact {
        flex-direction: column;
    }

    .news-card__image-side {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .news-card__img--side {
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

/* 38. Feature Bar */
.feature-bar {
    background: #fff;
}

.feature-bar__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-right: 1px solid var(--km-border);
    height: 100%;
}

.feature-bar__item--last {
    border-right: none;
}

.feature-bar__icon {
    font-size: 1.5rem;
    color: var(--km-primary);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.feature-bar__title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.feature-bar__sub {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin-top: .1rem;
}

/* Compact news excerpt */
.news-card__excerpt--sm {
    font-size: .82rem;
    -webkit-line-clamp: 2;
    margin-bottom: .5rem;
}

@media (max-width: 767.98px) {
    .feature-bar__item {
        border-right: none;
        border-bottom: 1px solid var(--km-border);
        padding: 1rem 1.25rem;
    }

    .feature-bar__item--last {
        border-bottom: none;
    }
}

/* 39. News Seite
   ---------------------------------------------- */
/* Page hero */
.news-page-hero__title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.news-page-hero__sub {
    color: var(--km-text-muted);
    margin-bottom: 1.25rem;
}

/* Filter tabs */
.news-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.news-filter-tab {
    background: none;
    border: 1px solid var(--km-border-hover);
    border-radius: var(--km-radius-pill);
    padding: .3rem .85rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--km-text-muted);
    cursor: pointer;
    transition: all .15s ease;
}

.news-filter-tab:hover {
    border-color: var(--km-primary);
    color: var(--km-primary);
}

.news-filter-tab.active {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: #fff;
    font-weight: 600;
}

/* Featured article (overview page) */
.news-featured {
    display: block;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-lg);
    overflow: hidden;
    color: inherit;
    transition: box-shadow .15s ease;
}

.news-featured:hover {
    box-shadow: var(--km-shadow-lg);
}

.news-featured__image {
    position: relative;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}

.news-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.news-featured:hover .news-featured__img {
    transform: scale(1.03);
}

.news-featured__body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.news-featured__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    margin-bottom: .75rem;
}

.news-featured__excerpt {
    color: var(--km-text-muted);
    line-height: 1.65;
    font-size: .95rem;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.news-featured__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* ---- Article page ---- */
.news-article__tag {
    position: static;
    display: inline-flex;
    font-size: .78rem;
}

.news-article__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
    .news-article__title {
        font-size: 1.5rem;
    }
}

/* Author row */
.news-article__author {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.news-article__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.news-article__author-name {
    font-weight: 700;
    font-size: .9rem;
    color: #1a1a1a;
}

.news-article__author-role {
    font-size: .78rem;
}

/* Share buttons */
.news-article__share {
    display: flex;
    gap: .4rem;
}

.news-share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--km-border-hover);
    background: #fff;
    color: var(--km-text-muted);
    display: grid;
    place-items: center;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s ease;
}

.news-share-btn:hover {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: #fff;
}

/* Hero image */
.news-article__hero-figure {
    margin: 1.5rem 0;
}

.news-article__hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--km-radius-md);
    display: block;
}

.news-article__caption {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin-top: .5rem;
    font-style: italic;
}

/* Article body typography */
.news-article__body {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.news-article__body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2rem;
    margin-bottom: .75rem;
}

.news-article__body p {
    margin-bottom: 1rem;
}

.news-article__body ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.news-article__body ul li {
    margin-bottom: .4rem;
}

.news-article__lead {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.7;
    font-weight: 500;
    border-left: 3px solid var(--km-primary);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* Callout box */
.news-article__callout {
    display: flex;
    gap: .85rem;
    background: rgba(0, 78, 97, .06);
    border: 1px solid rgba(0, 78, 97, .15);
    border-radius: var(--km-radius-md);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.news-article__callout-icon {
    font-size: 1.1rem;
    color: var(--km-primary);
    flex-shrink: 0;
    margin-top: .15rem;
}

.news-article__callout p {
    margin: 0;
    font-size: .9rem;
}

/* Tags */
.news-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.news-article__tag-item {
    display: inline-flex;
    padding: .25rem .7rem;
    background: var(--km-surface);
    border: 1px solid var(--km-border-hover);
    border-radius: var(--km-radius-pill);
    font-size: .78rem;
    color: var(--km-text-muted);
}

/* Author bio */
.news-article__author-bio {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
}

.news-article__author-bio-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.news-article__author-bio-name {
    font-weight: 700;
    font-size: .95rem;
}

/* Sidebar */
.news-sidebar__card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.1rem 1.25rem;
}

.news-sidebar__card-head {
    font-weight: 700;
    font-size: .9rem;
    color: #1a1a1a;
    margin-bottom: .75rem;
}

.news-sidebar__article {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--km-border);
    color: inherit;
    transition: opacity .15s ease;
}

.news-sidebar__article:last-of-type {
    border-bottom: none;
}

.news-sidebar__article:hover {
    opacity: .8;
}

.news-sidebar__article-img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--km-radius-sm);
    flex-shrink: 0;
}

.news-sidebar__article-title {
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-sidebar__article-meta {
    font-size: .75rem;
    margin-top: .2rem;
}

/* 40. Business / Shop Newsfeed */
.feed-section {
    background: #f0f7f9;
}

/* Feed list container */
.feed-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ---- Feed Card ---- */
.feed-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
}

/* Sponsored card: subtle accent border top */
.feed-card--sponsored {
    border-top: 3px solid var(--km-accent);
}

/* Header row: avatar, name, time, menu */
.feed-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem .75rem;
    position: relative;
}

.feed-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.feed-card__meta {
    flex: 1;
    min-width: 0;
}

.feed-card__name {
    font-weight: 700;
    font-size: .9rem;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

.feed-card__name:hover {
    color: var(--km-primary);
}

.feed-card__time {
    font-size: .76rem;
    color: var(--km-text-muted);
    margin-top: .1rem;
}

.feed-card__more {
    background: none;
    border: none;
    color: var(--km-text-muted);
    padding: .3rem .5rem;
    cursor: pointer;
    border-radius: var(--km-radius-sm);
    transition: background .12s ease;
    flex-shrink: 0;
}

.feed-card__more:hover {
    background: var(--km-surface);
    color: #333;
}

/* Post text */
.feed-card__body {
    padding: 0 1.1rem .75rem;
}

.feed-card__text {
    font-size: .92rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
    white-space: pre-line;
}

/* Image grids */
.feed-card__images {
    margin-bottom: .75rem;
}

.feed-card__images--1 .feed-card__img-wrap--single {
    height: 260px;
}

.feed-card__images--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    height: 220px;
}

.feed-card__images--3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    height: 260px;
}

.feed-card__img-wrap--main {
    grid-row: 1 / 3;
}

.feed-card__img-wrap {
    overflow: hidden;
}

.feed-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.feed-card__img-wrap:hover .feed-card__img {
    transform: scale(1.04);
}

/* Footer: reactions + CTA */
.feed-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.1rem .9rem;
    border-top: 1px solid var(--km-border);
    gap: .5rem;
}

.feed-card__reactions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Reaction buttons */
.feed-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--km-radius-pill);
    padding: .3rem .7rem;
    font-size: .85rem;
    color: var(--km-text-muted);
    cursor: pointer;
    transition: all .12s ease;
}

.feed-reaction-btn:hover {
    background: var(--km-surface);
    border-color: var(--km-border-hover);
    color: var(--km-primary);
}

.feed-reaction-btn.active {
    background: rgba(0, 78, 97, .08);
    border-color: var(--km-primary);
    color: var(--km-primary);
    font-weight: 600;
}

.feed-card__cta {
    flex-shrink: 0;
    font-size: .82rem;
}

/* ---- Suggested shops sidebar ---- */
.feed-sidebar {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.1rem 1.25rem;
    position: sticky;
    top: 80px;
}

.feed-sidebar__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--km-text-muted);
    margin-bottom: 1rem;
}

.feed-suggest__list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.feed-suggest__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--km-border);
}

.feed-suggest__item:last-child {
    border-bottom: none;
}

.feed-suggest__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.feed-suggest__info {
    flex: 1;
    min-width: 0;
}

.feed-suggest__name {
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-suggest__meta {
    font-size: .75rem;
}

.feed-suggest__follow {
    flex-shrink: 0;
    font-size: .78rem;
    padding: .25rem .65rem;
}

/* Follow button: already-following state = muted/subtle */
.feed-suggest__follow.followed {
    background: var(--km-surface);
    border-color: var(--km-border);
    color: var(--km-text-muted);
}

/* Hover on a followed button hints at un-following */
.feed-suggest__follow.followed:hover {
    background: rgba(231, 83, 59, .08);
    border-color: var(--km-accent);
    color: var(--km-accent);
}

/* Clickable follow row (links to the shop profile) */
a.feed-suggest__item {
    color: inherit;
    text-decoration: none;
    transition: background .12s ease;
}

a.feed-suggest__item:hover .feed-suggest__name {
    color: var(--km-primary);
}

/* Follow status label (read-only, e.g. dashboard preview) */
.feed-suggest__status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--km-primary);
    white-space: nowrap;
}

.feed-suggest__status i {
    font-size: .72rem;
}

/* Feed post: image left (desktop), card (mobile) */
.feed-post {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.feed-post:hover {
    box-shadow: var(--km-shadow-sm);
    transform: translateY(-1px);
}

.feed-post--sponsored {
    border-left: 3px solid var(--km-accent);
}

/* Image wrapper: fixed width on desktop */
.feed-post__img-wrap {
    position: relative;
    width: 180px;
    flex-shrink: 0;
}

.feed-post__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sponsored badge on image */
.feed-post__sponsored-badge {
    position: absolute;
    top: .5rem;
    left: .5rem;
    background: var(--km-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Right content */
.feed-post__body {
    flex: 1;
    min-width: 0;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.feed-post__title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-post__text {
    font-size: .82rem;
    color: var(--km-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-post__date {
    font-size: .74rem;
    color: var(--km-text-muted);
    margin-top: auto;
    padding-top: .2rem;
}

/* Footer: poster avatar + name left, CTA right */
.feed-post__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--km-border);
    margin-top: .25rem;
}

.feed-post__poster {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.feed-post__poster-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.feed-post__shop-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--km-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-post__cta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--km-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .12s ease;
}

.feed-post__cta:hover {
    color: var(--km-accent);
}

/* Mobile: flip to card layout */
@media (max-width: 767px) {
    .feed-post {
        flex-direction: column;
    }

    .feed-post__img-wrap {
        width: 100%;
        height: 200px;
    }
}

/* ---- Mobile: consistent image heights across all card types ---- */
@media (max-width: 767px) {
    .card-img,
    .news-card__img,
    .feed-post__img {
        aspect-ratio: 4 / 3;
        height: auto;
        width: 100%;
    }

    .feed-post__img-wrap {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

/* ---- News compact card (image ~50% left, text right) ---- */
.news-compact {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    color: inherit;
    flex: 1;
    transition: box-shadow .15s ease, transform .15s ease;
}

.news-compact:hover {
    box-shadow: var(--km-shadow-md);
    transform: translateY(-2px);
}

.news-compact__img-wrap {
    position: relative;
    width: 48%;
    flex-shrink: 0;
    overflow: hidden;
}

.news-compact__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.news-compact:hover .news-compact__img {
    transform: scale(1.04);
}

.news-compact__body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.news-compact__title {
    font-size: .95rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-compact__excerpt {
    font-size: .82rem;
    color: var(--km-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 575px) {
    .news-compact {
        flex-direction: column;
    }

    .news-compact__img-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* Sponsored / Featured cards - einheitliche orange Umrandung */
.marketplace-card.is-featured,
.listing-card.is-featured {
    border: 2px solid var(--km-accent) !important;
    box-shadow: 0 0 0 1px rgba(231, 83, 59, .15);
}

.feed-post--sponsored {
    border: 2px solid var(--km-accent) !important;
}

/* Help / FAQ Seite */
.help-hero {
    background: linear-gradient(135deg, #f0f7f9 0%, #e8f4f7 100%);
    border-bottom: 1px solid var(--km-border);
}

.faq-item {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md) !important;
    margin-bottom: .75rem;
    overflow: hidden;
}

.faq-item .accordion-button {
    font-weight: 600;
    font-size: .95rem;
    color: #1a1a1a;
    background: #fff;
}

.faq-item .accordion-button:not(.collapsed) {
    color: var(--km-primary);
    background: rgba(0, 78, 97, .04);
    box-shadow: none;
}

.faq-item .accordion-button::after {
    filter: none;
}

.faq-item .accordion-body {
    font-size: .9rem;
    color: var(--km-text-muted);
    line-height: 1.7;
}

.help-contact-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow .15s ease;
}

.help-contact-card:hover {
    box-shadow: var(--km-shadow-md);
}

.help-contact-card .icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 78, 97, .08);
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    font-size: 1.3rem;
    color: var(--km-primary);
}

/* Help page - hero components */
.help-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
}

.help-search .input-group-text {
    background: #fff;
    border-right: none;
    color: var(--km-text-muted);
}

.help-search .form-control {
    border-left: none;
}

.help-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.help-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    background: var(--km-surface);
    border: 1px solid var(--km-border-hover);
    border-radius: var(--km-radius-pill);
    font-size: .82rem;
    font-weight: 500;
    color: var(--km-primary);
    text-decoration: none;
    transition: all .15s ease;
}

.help-pill:hover {
    background: var(--km-primary);
    border-color: var(--km-primary);
    color: #fff;
}

/* KPI tiles in hero */
.help-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.kpi-tile {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 1rem 1.1rem;
}

.kpi-icon {
    font-size: 1.1rem;
    color: var(--km-primary);
    margin-bottom: .4rem;
}

.kpi-title {
    font-size: .88rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 .2rem;
}

.kpi-sub {
    font-size: .78rem;
    color: var(--km-text-muted);
    margin: 0;
}

/* Popular topics sidebar */
.help-topic-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--km-surface);
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    text-decoration: none;
    color: #1a1a1a;
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: .5rem;
    transition: all .15s ease;
}

.help-topic-link:hover {
    background: rgba(0, 78, 97, .06);
    border-color: var(--km-primary);
    color: var(--km-primary);
}

/* ==============================================
   Dark Mode
   via data-bs-theme="dark" on <html>
   ============================================== */
[data-bs-theme="dark"] {
    --km-primary: #3a9db5;
    --km-primary-dark: #2d8099;
    --km-primary-mid: #4ab0c8;
    --km-accent: #e8644a;
    --km-surface: #1e1e1e;
    --km-border: rgba(255,255,255,.1);
    --km-border-hover: rgba(255,255,255,.2);
    --km-text-muted: #9a9a9a;
    --km-shadow-sm: 0 1px 4px rgba(0,0,0,.4);
    --km-shadow-md: 0 4px 16px rgba(0,0,0,.5);
    --km-shadow-lg: 0 8px 32px rgba(0,0,0,.6);
    color-scheme: dark;
}

/* background overrides */
[data-bs-theme="dark"] body {
    background: #141414;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .bg-white {
    background: #1e1e1e !important;
}

[data-bs-theme="dark"] .bg-light {
    background: #242424 !important;
}

[data-bs-theme="dark"] .border-bottom {
    border-color: rgba(255,255,255,.08) !important;
}

[data-bs-theme="dark"] .border-top {
    border-color: rgba(255,255,255,.08) !important;
}

/* navbar */
[data-bs-theme="dark"] .site-header nav {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,.08) !important;
}

[data-bs-theme="dark"] .header-search .form-control,
[data-bs-theme="dark"] .header-search .input-group-text {
    background: #2a2a2a !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #e0e0e0;
}

/* cards */
[data-bs-theme="dark"] .listing-card,
[data-bs-theme="dark"] .news-card,
[data-bs-theme="dark"] .feed-post,
[data-bs-theme="dark"] .news-compact,
[data-bs-theme="dark"] .feed-sidebar,
[data-bs-theme="dark"] .news-sidebar__card {
    background: #1e1e1e;
    border-color: rgba(255,255,255,.1);
}

/* category tiles */
[data-bs-theme="dark"] .category-card {
    background: #242424;
    border-color: rgba(255,255,255,.1);
}

/* feature bar */
[data-bs-theme="dark"] .feature-bar {
    background: #1a1a1a;
    border-color: rgba(255,255,255,.08) !important;
}

/* feed section */
[data-bs-theme="dark"] .feed-section {
    background: #1c2422;
}

/* footer */
[data-bs-theme="dark"] .site-footer {
    background: #0d0d0d;
}

/* text */
[data-bs-theme="dark"] .text-muted {
    color: #888 !important;
}

[data-bs-theme="dark"] .listing-card__title,
[data-bs-theme="dark"] .news-card__title,
[data-bs-theme="dark"] .feed-post__title,
[data-bs-theme="dark"] .section-head__title {
    color: #e0e0e0;
}

/* seo section */
[data-bs-theme="dark"] .seo-section {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* dark mode toggle button */
.footer-dark-toggle {
    font-size: .78rem;
    opacity: .7;
    transition: opacity .15s ease;
}

.footer-dark-toggle:hover {
    opacity: 1;
}

/* Mixed card - shop posts & news combined */
.mixed-card {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease;
}

.mixed-card:hover {
    box-shadow: var(--km-shadow-md);
    transform: translateY(-2px);
}

.mixed-card--sponsored {
    border: 2px solid var(--km-accent);
}

.mixed-card__img {
    overflow: hidden;
}

.mixed-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.mixed-card:hover .mixed-card__image {
    transform: scale(1.04);
}

.mixed-card__body {
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .35rem;
}

.mixed-card__badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.mixed-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: var(--km-radius-pill);
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mixed-badge--post {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.mixed-badge--sponsored {
    background: var(--km-accent);
    color: #fff;
    border: none;
}

.mixed-card__title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mixed-card__teaser {
    font-size: .78rem;
    color: var(--km-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mixed-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .5rem;
    border-top: 1px solid var(--km-border);
    margin-top: auto;
    gap: .5rem;
}

.mixed-card__meta {
    font-size: .72rem;
    color: var(--km-text-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mixed-card__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mixed-card__cta {
    font-size: .75rem;
    font-weight: 600;
    color: var(--km-primary);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .12s ease;
}

.mixed-card:hover .mixed-card__cta {
    color: var(--km-accent);
}

/* Listing card background variants
   Standard   = leicht blau   (normale Inserate)
   Ad / Feed  = leicht grün   (Werbeanzeigen & Shop Posts)
   Sponsored  = leicht orange (bezahlte Hervorhebung)
   -------------------------------------------------- */
.listing-card,
.marketplace-card {
    background-color: var(--km-bg-standard);
}

.listing-card.is-ad,
.ad-card {
    background-color: var(--km-bg-ad);
}

.listing-card.is-featured,
.marketplace-card.is-featured {
    background-color: var(--km-bg-sponsored);
}

/* Detail Slider (Objekt-Detailseite)
   ---------------------------------------------- */
.detail-slider__main {
    background: #000;
}

.detail-slider__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease;
}

/* Prev / Next Arrows */
.detail-slider__prev,
.detail-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .9rem;
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease;
    z-index: 2;
}

.detail-slider__prev:hover,
.detail-slider__next:hover {
    transform: translateY(-50%) scale(1.08);
}

.detail-slider__prev {
    left: .75rem;
}

.detail-slider__next {
    right: .75rem;
}

.detail-slider__prev:hover,
.detail-slider__next:hover {
    background: rgba(255,255,255,.15);
    transform: translateY(-50%) scale(1.08);
}

/* Counter badge */
.detail-slider__counter {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: var(--km-radius-pill);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Thumbnail strip */
.detail-slider__thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.detail-slider__thumbs::-webkit-scrollbar {
    display: none;
}

.detail-slider__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 56px;
    border-radius: var(--km-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s ease, border-color .15s ease;
}

.detail-slider__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-slider__thumb:hover {
    opacity: .85;
}

.detail-slider__thumb.active {
    border-color: var(--km-accent);
    border-width: 2px;
    opacity: 1;
}

/* Floor plan gallery */
.floorplan-item {
    position: relative;
    cursor: zoom-in;
    border-radius: var(--km-radius-md);
    overflow: hidden;
    border: 1px solid var(--km-border);
}

.floorplan-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    width: 100%;
    transition: transform .25s ease;
}

.floorplan-item:hover img {
    transform: scale(1.03);
}

.floorplan-item__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: .4rem .75rem;
    backdrop-filter: blur(4px);
}

/* ============================================
   Feed Carousel (Startseite)
   ============================================ */
/* Feed mini card */
.feed-card-mini {
    background: #fff;
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    cursor: pointer;
}

.feed-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: var(--km-shadow-lg);
    border-color: var(--km-border-hover);
}

.feed-card-mini--sponsored,
.feed-card-mini--sponsored:hover {
    border: 2px solid var(--km-accent) !important;
}

/* Image area */
.feed-card-mini__img-wrap {
    overflow: hidden;
}

.feed-card-mini__slides {
    position: relative;
    aspect-ratio: 16 / 9;
}

.feed-card-mini__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .3s ease;
}

.feed-card-mini__slide.active {
    opacity: 1;
}

/* Dots */
.feed-card-mini__dots {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.feed-card-mini__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: background .2s ease, transform .2s ease;
}

.feed-card-mini__dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Body */
.feed-card-mini__body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}

.feed-card-mini__meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    color: var(--km-text-muted);
}

.feed-card-mini__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.feed-card-mini__shop {
    font-weight: 700;
    color: #1a1a1a;
    font-size: .75rem;
}

.feed-card-mini__time {
    margin-left: auto;
    flex-shrink: 0;
}

.feed-card-mini__text {
    font-size: .82rem;
    color: #333;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-card-mini__cta {
    background: none;
    border: none;
    padding: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--km-primary);
    cursor: pointer;
    text-align: left;
    margin-top: auto;
    transition: color .12s ease;
    text-decoration: none;
    display: inline-block;
}

.feed-card-mini__cta:hover {
    color: var(--km-accent);
}

/* Hero Glassmorphism
   ---------------------------------------------- */
/* Search form inputs on glass background */
.hero-search-form.km-glass-sm {
    border-radius: var(--km-radius-md);
    padding: 1.25rem 1.5rem;
}

.hero-search-form.km-glass-sm .form-control,
.hero-search-form.km-glass-sm .form-select {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .5);
}

/* Sign up pill */
.hero-signup-pill {
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff !important;
    font-weight: 700;
    padding: .1rem .6rem;
    border-radius: var(--km-radius-pill);
    border: 1px solid rgba(255, 255, 255, .35);
    text-decoration: none !important;
    transition: background .15s ease;
}

.hero-signup-pill:hover {
    background: rgba(255, 255, 255, .35);
}

/* Glassy CTA buttons */
.hero-glass-btn {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s ease, transform .15s ease;
}

.hero-glass-btn:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
    transform: translateY(-1px);
}

/* Status dot (Open/Closed/Vacation) */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.status-dot--open {
    background: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, .2);
}

.status-dot--closed {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .2);
}

.status-dot--vacation {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}

/* Object Details — label above / value below, 3-col grid */
.detail-table__cell {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem .5rem .75rem;
}

.detail-table__cell .detail-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--km-text-muted);
}

.detail-table__cell .detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--km-primary-mid);
}

.detail-table__cell--hidden {
    display: none;
}

/* Group separator every 3 rows */
.detail-table .row {
    border-bottom: none;
}

/* Detail group labels */
.detail-group-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--km-primary);
    background: var(--km-bg-blue);
    padding: .5rem .75rem;
    border-radius: var(--km-radius-sm);
    margin: 1rem 0 .25rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.detail-group-label:first-child {
    margin-top: .25rem;
}

/* Detail Accordion */
.detail-accordion {
    border-radius: var(--km-radius-md);
    overflow: hidden;
}

.detail-accordion__item {
    border: none;
    margin-bottom: .4rem;
    border-radius: var(--km-radius-sm) !important;
    overflow: hidden;
    border: 1px solid var(--km-border) !important;
}

.detail-accordion__btn {
    background: #fff !important;
    color: var(--km-primary) !important;
    font-size: .78rem;
    font-weight: 700;
    padding: .8rem 1rem;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background .15s ease;
}

.detail-accordion__btn:not(.collapsed) {
    background: var(--km-bg-blue) !important;
    color: var(--km-primary) !important;
    border-bottom: 1px solid var(--km-border) !important;
}

.detail-accordion__btn.collapsed {
    color: #444 !important;
}

.detail-accordion__btn.collapsed i {
    color: var(--km-text-muted);
    opacity: .6;
}

.detail-accordion__btn::after {
    filter: invert(25%) sepia(50%) saturate(800%) hue-rotate(160deg);
    width: .8rem;
    height: .8rem;
    background-size: .8rem;
}

.detail-accordion__btn.collapsed::after {
    filter: none;
    opacity: .35;
}

.detail-accordion .accordion-body {
    padding: 0;
    background: #fff;
}

.detail-accordion .detail-table__cell {
    padding: .65rem 1rem;
}

/* ============================================
   Listing Form Components
   ============================================ */
/* Section card */
.km-form-section {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-md);
    overflow: hidden;
}

.km-form-section__header {
    background: var(--km-bg-blue);
    color: var(--km-primary);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.km-form-section__body {
    background: #fff;
    padding: 1.25rem;
}

/* Label */
.km-label {
    font-size: .78rem;
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: .35rem;
}

/* Hint text */
.km-hint {
    font-size: .7rem;
    color: var(--km-text-muted);
    margin-top: .25rem;
}

/* Dropzone */
.km-dropzone {
    border: 2px dashed var(--km-border);
    border-radius: var(--km-radius-md);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    background: var(--km-bg-blue);
}

.km-dropzone:hover {
    border-color: var(--km-primary);
    background: #e8f3f7;
}

.km-dropzone--sm {
    padding: 1rem;
}

.km-dropzone__icon {
    font-size: 2rem;
    color: var(--km-primary);
    opacity: .5;
    display: block;
    margin-bottom: .5rem;
}

.km-dropzone__title {
    font-weight: 600;
    color: #333;
    font-size: .9rem;
    margin-bottom: .25rem;
}

.km-dropzone__sub {
    font-size: .8rem;
    color: var(--km-text-muted);
    margin-bottom: .25rem;
}

.km-dropzone__hint {
    font-size: .7rem;
    color: var(--km-text-muted);
}

.km-dropzone__link {
    color: var(--km-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Map placeholder */
.km-map-placeholder {
    height: 180px;
    background: var(--km-bg-blue);
    border: 1px solid var(--km-border);
}

/* Checkbox pill */
.km-checkbox {
    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-sm);
    transition: border-color .15s ease, background .15s ease;
}

.km-checkbox__input {
    display: none;
}

.km-checkbox__label {
    display: block;
    padding: .5rem .75rem;
    font-size: .8rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    border-radius: var(--km-radius-sm);
    transition: background .15s ease, color .15s ease;
    margin: 0;
    user-select: none;
}

.km-checkbox__input:checked + .km-checkbox__label {
    background: var(--km-bg-blue);
    color: var(--km-primary);
    font-weight: 700;
}

.km-checkbox:has(.km-checkbox__input:checked) {
    border-color: var(--km-primary);
}

/* Opening Hours Modal */
.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .6rem;
    border-radius: var(--km-radius-sm);
    transition: background .1s ease;
}

.hours-day {
    font-size: .82rem;
    color: #444;
}

.hours-time {
    font-size: .82rem;
    font-weight: 600;
    color: var(--km-primary-mid);
}

.hours-row--closed .hours-day,
.hours-row--closed .hours-time {
    color: var(--km-text-muted);
    font-weight: 400;
}

.hours-row--today {
    background: var(--km-bg-blue);
}

.hours-row--today .hours-day {
    font-weight: 700;
    color: var(--km-primary);
}

.hours-row--today .hours-time {
    color: var(--km-primary);
}

/* ============================================
   Site Header — nav, search, avatar, dropdowns
   ============================================ */
.header-search {
    border-radius: var(--km-radius-sm);
    overflow: hidden;
    border: 1px solid var(--km-border);
}

.header-search .form-control,
.header-search .input-group-text {
    background: var(--km-bg-blue);
    border: none;
    box-shadow: none;
    border-radius: 0 !important;
}

.header-search .form-control:focus {
    background: #fff;
}

.header-search:focus-within {
    border-color: var(--km-primary);
}

.km-avatar-btn {
    background: none;
    border: none;
    padding: .35rem .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: var(--km-radius-sm);
    transition: background .12s ease;
}

.km-avatar-btn:hover {
    background: var(--km-bg-blue);
}

.km-avatar-btn[aria-expanded="true"] {
    background: var(--km-bg-blue);
}

.km-avatar-btn img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--km-border);
}

.km-avatar-btn span {
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
}

.km-msg-btn,
.km-bell-btn {
    color: #444;
}

.km-msg-icon {
    position: relative;
    display: inline-flex;
}

.km-msg-icon .badge {
    position: absolute;
    top: -7px;
    right: -8px;
    font-size: .55rem;
    padding: .15rem .3rem;
    min-width: 16px;
    background: var(--km-accent);
    border-radius: 999px;
    line-height: 1;
}

@media (min-width: 992px) {
    .header-search-nav {
        max-width: 440px;
    }
}

/* Mobile menu — clean, flat */
@media (max-width: 991.98px) {
    #mainNav {
        margin-top: .75rem;
        border-top: 1px solid var(--km-border);
        padding-top: 1rem;
    }

    #mainNav .navbar-nav {
        gap: .1rem !important;
    }

    #mainNav .nav-item > .nav-link {
        padding: .75rem .85rem;
        border-radius: var(--km-radius-sm);
        display: flex;
        align-items: center;
        transition: background .12s ease;
        position: relative;
    }

    #mainNav .nav-item > .nav-link:hover,
    #mainNav .nav-item > .nav-link:active {
        background: var(--km-bg-blue);
    }

    /* Categories: flat inline submenu, no shadow/rounding */
    #mainNav .dropdown-menu {
        position: static !important;
        border: none;
        box-shadow: none;
        background: var(--km-bg-soft);
        margin: 0 0 .35rem;
        padding: .35rem;
        transform: none !important;
    }

    #mainNav .dropdown-menu .dropdown-item {
        padding: .6rem .75rem;
        border-radius: var(--km-radius-sm);
        font-size: .9rem;
    }

    #mainNav .dropdown-menu .dropdown-item:hover,
    #mainNav .dropdown-menu .dropdown-item:active {
        background: #fff;
    }

    #mainNav .dropdown-divider {
        margin: .3rem .25rem;
        opacity: .5;
    }

    #mainNav .nav-divider {
        height: 1px;
        background: var(--km-border);
        margin: .6rem .25rem;
    }

    #mainNav .km-msg-btn,
    #mainNav .km-bell-btn {
        justify-content: flex-start;
    }

    #mainNav .km-msg-icon .badge {
        position: static !important;
        margin-left: .5rem;
        top: auto;
        right: auto;
    }

    #mainNav .km-msg-btn .d-lg-none,
    #mainNav .km-bell-btn .d-lg-none {
        margin-left: 0 !important;
    }

    #mainNav .km-msg-btn,
    #mainNav .km-bell-btn {
        display: flex;
        align-items: center;
    }

    #mainNav .km-msg-icon {
        align-items: center;
    }

    #mainNav .mobile-user {
        background: var(--km-bg-blue);
        border-radius: var(--km-radius-sm);
    }

    #mainNav .mobile-user .nav-link {
        font-weight: 600;
        color: var(--km-primary) !important;
    }

    #mainNav .mobile-user .nav-link:hover {
        background: transparent;
    }

    #mainNav .btn {
        margin-top: .5rem;
    }

    /* Open parent connects seamlessly with submenu card */
    #mainNav .dropdown-toggle::after {
        transition: transform .2s ease;
        margin-left: auto;
    }

    #mainNav .dropdown-toggle[aria-expanded="true"] {
        background: var(--km-bg-soft) !important;
        color: var(--km-primary) !important;
        font-weight: 600;
        border-radius: var(--km-radius-sm) var(--km-radius-sm) 0 0;
        margin-bottom: 0;
    }

    #mainNav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Submenu joins directly under the open parent */
    #mainNav .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
        margin-top: 0;
        border-radius: 0 0 var(--km-radius-sm) var(--km-radius-sm);
    }
}

/* Unified button radius across header */
.site-header .btn {
    border-radius: var(--km-radius-sm) !important;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}

/* Button hover states */
.site-header .btn-primary:hover {
    background: var(--km-primary-dark) !important;
    border-color: var(--km-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,78,97,.25);
}

.site-header .btn-outline-secondary:hover {
    background: var(--km-accent);
    border-color: var(--km-accent);
    color: #fff;
}

@media (min-width: 992px) {
    /* Consistent height for all interactive nav elements */
    .site-header .navbar-nav .nav-link,
    .site-header .navbar-nav .btn,
    .site-header .km-avatar-btn {
        height: 42px;
        display: flex;
        align-items: center;
    }

    /* Search field: whole group fixed height, children fill it */
    .site-header .header-search {
        height: 42px;
    }

    .site-header .header-search .form-control,
    .site-header .header-search .input-group-text {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .navbar-nav .nav-link {
        border-radius: var(--km-radius-sm);
        transition: background .12s ease, color .12s ease;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .site-header .navbar-nav .btn {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: center;
    }

    .navbar-nav .nav-item > .nav-link:hover,
    .navbar-nav .nav-item > .nav-link:focus {
        background: var(--km-bg-blue);
        color: var(--km-primary);
    }

    .navbar-nav .dropdown-toggle[aria-expanded="true"] {
        background: var(--km-bg-blue);
        color: var(--km-primary);
    }

    .navbar .dropdown-menu {
        border: none;
        box-shadow: 0 8px 28px rgba(0,0,0,.1);
        border-radius: var(--km-radius-lg);
        padding: .5rem;
        margin-top: .5rem;
        overflow: hidden;
    }

    .navbar .dropdown-menu .dropdown-item {
        border-radius: var(--km-radius-md);
        padding: .55rem .85rem;
    }

    .navbar .dropdown-menu .dropdown-item:hover {
        background: var(--km-bg-blue);
    }
}

/* Price suffix — ono (negotiable) / fixed */
.price-tag {
    font-size: .68rem;
    font-weight: 500;
    color: var(--km-text-muted);
    margin-left: .35rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ============================================
   Scroll Reveal Animations
   Only active when <body> has .reveal-ready (added by JS).
   Without JS everything stays fully visible.
   ============================================ */
.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}

.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children (e.g. cards) */
.reveal-ready .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}

.reveal-ready .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   Profilkopf — Feinschliff für schmale Screens
   ============================================ */
@media (max-width: 575.98px) {
    /* Cover war 220px hoch ohne Inhalt — kostet nur Scrollweg */
    .seller-cover {
        height: 150px;
    }

    .seller-avatar {
        width: 92px;
        height: 92px;
        margin-top: -46px;
    }

    /* Verified-Haken an die kleinere Avatargröße anpassen */
    .seller-avatar__verified {
        bottom: 28px;
    }

    .seller-cover__edit {
        bottom: .6rem;
        right: .6rem;
        font-size: .75rem;
        padding: .3rem .7rem;
    }

    /* Name etwas kompakter, damit Badges daneben Platz haben */
    .seller-info h1 {
        font-size: 1.4rem;
    }

    .seller-info__subtitle {
        font-size: .88rem;
    }

    /* Alle 6 Achievements in eine Reihe — Badges teilen sich die Breite */
    .seller-achievements__row {
        flex-wrap: nowrap !important;
        gap: .35rem !important;
        justify-content: space-between;
    }

    .seller-achievements__row .achievement-badge {
        flex: 1 1 0;
        min-width: 0;
    }

    .seller-achievements__row .achievement-badge__img {
        width: 100%;
        height: auto;
        max-width: 56px;
    }

    /* Tooltips sind Hover-basiert und auf Touch nutzlos — sie ragen
       zudem über den rechten Rand und erzeugen dort weissen Überlauf */
    .seller-achievements__row .achievement-badge__tooltip {
        display: none;
    }
}

/* ============================================================
   REVERSIBLER LAYOUT-BLOCK: Dashboard App-Shell
   Fixe Sidebar, nur .dashboard-main scrollt (Desktop ≥992px).
   Header-Höhe wird per Flexbox automatisch berücksichtigt.
   Zum Rückbau: diesen Block + Klasse "dashboard-shell" am
   <body> von dashboard.html entfernen.
   ============================================================ */
@media (min-width: 992px) {
    body.dashboard-shell {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.dashboard-shell .site-header {
        flex: 0 0 auto;
    }

    body.dashboard-shell .dashboard-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body.dashboard-shell .dashboard-layout > .container-fluid,
    body.dashboard-shell .dashboard-layout > .container-fluid > .row {
        height: 100%;
    }

    /* Sidebar steht fest, scrollt nur intern falls sehr lang */
    body.dashboard-shell .dashboard-sidebar {
        position: static;
        top: auto;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }

    /* Nur dieser Bereich scrollt */
    body.dashboard-shell .dashboard-main {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}