/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}


/* ========= Base ========= */
:root {
    --bg: #f6f7fb;
    --card: #ffffff;
    --border: rgba(0,0,0,.08);
    --shadow: 0 6px 18px rgba(22,28,45,.08);
}

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    font-size: 0.95rem; /* kompakter als Bootstrap-Default */
    line-height: 1.35;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

/* ========= Layout ========= */
.container {
    max-width: 1180px;
}

main.container {
    padding-top: 0.75rem !important;
    padding-bottom: 1rem !important;
}

/* ========= Navbar (Master) ========= */
.navbar {
    min-height: 52px;
}

    .navbar .btn {
        padding: .25rem .5rem;
    }
    /* kompakter */
    .navbar strong {
        font-weight: 600;
    }

/* ========= Cards ========= */
.card {
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow) !important;
}

    .card .card-body {
        padding: 0.9rem !important;
    }
    /* kompakter */
    .card.border-0 {
        border-color: transparent !important;
    }
/* falls du border-0 nutzt */

/* ========= Buttons ========= */
.btn {
    border-radius: 12px;
    padding: .35rem .65rem;
    font-weight: 600;
}

.btn-sm {
    padding: .22rem .5rem;
    border-radius: 10px;
    font-weight: 600;
}

.btn:focus {
    box-shadow: none !important;
}

/* ========= Forms ========= */
.form-control, .form-select {
    border-radius: 12px;
    padding: .38rem .6rem;
}

    .form-control:focus, .form-select:focus {
        box-shadow: none;
        border-color: rgba(13,110,253,.35);
    }

.input-group-sm .form-control,
.input-group-sm .form-select {
    padding: .28rem .5rem;
}

label.form-label {
    margin-bottom: .25rem;
}

/* ========= Tables ========= */
.table {
    margin-bottom: 0;
}

    .table > :not(caption) > * > * {
        padding: .4rem .5rem;
    }
/* kompakter */
.table-sm > :not(caption) > * > * {
    padding: .3rem .45rem;
}

.table th {
    font-weight: 700;
}

/* ========= Badges ========= */
.badge {
    border-radius: 999px;
    padding: .3rem .55rem;
    font-weight: 700;
}

/* ========= Alerts (dezent) ========= */
.alert {
    border-radius: 14px;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
}

/* ========= Kalender-Karten (optional global) ========= */
.tag-karte {
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* ========= Print ========= */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .card {
        box-shadow: none !important;
        border: 0 !important;
    }
}



/* ================================
   COMPACT MODE OVERRIDES
   (ans Ende von site.css setzen)
   ================================ */

/* global etwas kompakter */
body {
    font-size: 0.92rem;
    line-height: 1.25;
}

main.container {
    padding-top: .5rem !important;
    padding-bottom: .75rem !important;
}

.mb-3 {
    margin-bottom: .6rem !important;
}

.mb-2 {
    margin-bottom: .4rem !important;
}

.mt-3 {
    margin-top: .6rem !important;
}

.mt-2 {
    margin-top: .4rem !important;
}

/* Card kompakter */
.card {
    border-radius: 14px !important;
}

    .card .card-body {
        padding: .65rem .75rem !important;
    }

/* Buttons kompakter */
.btn {
    padding: .30rem .55rem;
    border-radius: 10px;
    font-weight: 600;
}

.btn-sm {
    padding: .20rem .45rem !important;
    border-radius: 10px !important;
}

.btn:focus {
    box-shadow: none !important;
}

/* Inputs kompakter */
.form-control, .form-select {
    padding: .30rem .50rem !important;
    border-radius: 10px !important;
}

label.form-label {
    margin-bottom: .15rem !important;
    font-size: .86rem;
}

/* Tabellen kompakter */
.table > :not(caption) > * > * {
    padding: .28rem .40rem !important;
}

/* ===== EinkaufMobil spezifisch ===== */
.einkaufmobil .card .card-body {
    padding: .55rem .60rem !important;
}

.einkaufmobil h1.h5 {
    font-size: 1.05rem;
}

/* Mobile Item: kleiner, weniger whitespace */
.einkaufmobil .item {
    padding: .40rem .50rem !important;
    border-radius: 12px !important;
}

    .einkaufmobil .item + .item {
        margin-top: .35rem !important;
    }

.einkaufmobil .muted {
    font-size: .82rem;
}

.einkaufmobil .chip {
    font-size: .78rem !important;
    padding: .2rem .45rem !important;
}

/* Checkbox & Icon-Button für Finger */
.einkaufmobil .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem !important;
}

.einkaufmobil .item .btn-sm {
    padding: .22rem .42rem !important;
}

/* Auf sehr kleinen Screens noch kompakter */
@media (max-width: 576px) {
    .container {
        padding-left: .6rem !important;
        padding-right: .6rem !important;
    }

    .einkaufmobil .card .card-body {
        padding: .5rem .55rem !important;
    }

    .einkaufmobil .item {
        padding: .38rem .45rem !important;
    }
}
/* ===== Sticky Header EinkaufMobil ===== */
.einkaufmobil .sticky-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(246,247,251,.92); /* leicht transparent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .45rem .25rem;
}

/* Filterzeile kompakt */
.einkaufmobil .filterbar .card-body {
    padding: .5rem .55rem !important;
}

/* Auf sehr kleinen Screens: weniger Gap */
@media (max-width: 576px) {
    .einkaufmobil .filterbar .row,
    .einkaufmobil .filterbar .d-flex {
        gap: .35rem !important;
    }
}

/* Sticky-Header robust */
.einkaufmobil .sticky-topbar {
    top: 0;
    z-index: 1050; /* höher */
    background: #f6f7fb; /* fest, kein transparent */
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .35rem .25rem;
}


/* Noch kompaktere Items */
.einkaufmobil .item {
    padding: .28rem .40rem !important;
    border-radius: 10px !important;
}

    .einkaufmobil .item + .item {
        margin-top: .25rem !important;
    }

    .einkaufmobil .item .muted,
    .einkaufmobil .item .small {
        font-size: .78rem !important;
    }

    .einkaufmobil .item .flex-grow-1 > div:first-child {
        line-height: 1.1 !important;
    }

.einkaufmobil .form-check-input {
    width: 1.05rem !important;
    height: 1.05rem !important;
    margin-top: .10rem !important;
}

.einkaufmobil .item .btn-sm {
    padding: .12rem .32rem !important;
    border-radius: 10px !important;
}

.h6 {
    font-style: italic !important;
    font-weight: 550 !important;
    background-color: aliceblue;
}

.btn {
    /*    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.525rem;
*/
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: 0.85rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
}