:root {
    --orange: #F7A12E;
    --orange-dark: #E58F17;
    --orange-dark-disabled: #ffc370;
    --orange-soft: #FFF3E0;
    --gray-soft: #f2f1f0;
    --ink: #2F2F33;
    --ink-soft: #5C5C63;
    --line: #E6E3DE;
    --field: #F1F0ED;
    --col-listing: #F5F4F1;
    --card: #FFFFFF;
    --ground: #ECEAE5;
    --open: #FFF0B3;
    --open-ink: #6B4E00;
    --no: #3A3A3F;
}

* {
    box-sizing: border-box
}
/*
                html {
                    scroll-behavior: smooth
                }

                body {
                    margin: 0;
                    background: var(--ground);
                    color: var(--ink);
                    font-family: Nunito,"Segoe UI",system-ui,sans-serif;
                    font-size: 15px;
                    line-height: 1.45;
                    padding: 0 16px 96px;
                    background-image: linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px);
                    background-size: 64px 64px
                }
        */
/*body {
    padding: 0 16px 96px;
}
*/
.wrap {
    max-width: 1010px;
    margin: 0 auto;
}

.note {
    background: var(--open);
    color: var(--open-ink);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-top: 16px
}

.note b {
    font-weight: 800
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    flex-wrap: wrap
}

.logo {
    font-weight: 800;
    font-size: 19px
}

.logo small {
    font-weight: 600;
    color: var(--orange)
}

.link {
    color: var(--orange-dark);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: 0;
    font-family: inherit;
    padding: 0
}

.section.card {
    background: var(--card);
    border-radius: 14px;
    padding: 32px 28px 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06)
}

h1.listing {
    font-size: 27px;
    font-weight: 800;
    margin: 0 0 6px;
    text-wrap: balance
}

.lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 16px
}

.explain {
    background: var(--field);
    border-left: 4px solid var(--orange);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    margin: 16px 0 8px;
    /*max-width: 70ch*/
}

.explain p {
    margin: 0 0 6px
}

.explain p:last-child {
    margin: 0
}

.btn.listing {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    border: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    line-height: 1.25
}

.btn.ghost {
    background: var(--card);
    color: var(--orange-dark);
    border: 2px solid var(--orange);
    box-shadow: none
}

.btn.off {
    opacity: .45;
    box-shadow: none;
    cursor: not-allowed
}

.btn:focus-visible, .choice:focus-within, input:focus-visible {
    outline: 3px solid #2F6FE0;
    outline-offset: 2px
}

.open {
    display: inline-block;
    background: var(--open);
    color: var(--open-ink);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle
}

.hint {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0
}

.coupon {
    border: 2px dashed var(--orange);
    background: var(--orange-soft);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.coupon small {
    display: block;
    color: var(--ink-soft);
    font-weight: 700;
    width: 100%
}

.coupon code {
    font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    background: #fff;
    padding: 7px 11px;
    border-radius: 7px
}

.coupon .copy {
    border: 0;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    font: 700 13px inherit;
    cursor: pointer
}

.coupon .apply {
    border: 0;
    background: var(--orange-dark);
    color: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    font: 700 13px inherit;
    cursor: pointer
}

.coupon .apply:disabled {
    border: 0;
    background: var(--orange-dark-disabled);
    color: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    font: 700 13px inherit;
    cursor: default
}

.coupon p {
    width: 100%;
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft)
}

.spotlight {
    border: 2px dashed var(--orange);
    background: var(--gray-soft);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.spotlight small {
    display: block;
    color: var(--ink-soft);
    font-weight: 700;
    width: 100%
}

.spotlight code {
    font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    background: #fff;
    padding: 7px 11px;
    border-radius: 7px
}

.spotlight .copy {
    border: 0;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: 7px 13px;
    font: 700 13px inherit;
    cursor: pointer
}

.spotlight p {
    width: 100%;
    margin: 0;
    font-size: 13px;
    color: var(--ink-soft)
}

.upsell-choice {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: 9px;
    padding: 11px 12px;
    font-weight: 800;
    cursor: pointer
}

.upsell-choice input {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 1px;
    accent-color: var(--orange)
}

.pricecalc {
    width: 100%;
    background: #fff;
    border-radius: 9px;
    padding: 10px 0;
    font-size: 13px
}

.pricecalc div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0
}

.pricecalc .discount {
    color: #27834a;
    font-weight: 800
}

.pricecalc .total {
    border-top: 1px solid var(--line);
    margin-top: 4px;
    padding-top: 7px;
    font-size: 15px;
    font-weight: 800
}


[hidden] {
    display: none !important
}

section.listing > *, .fields > *, .submit > *, .selected > *, .choice {
    min-width: 0
}

.hint, .chk, .open, .selected {
    overflow-wrap: anywhere
}

/* ---------- Preisseite: Desktop-Tabelle ---------- */
.tablewrap {
    overflow-x: auto;
    margin-top: 22px
}

table.listing {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 0;
    min-width: 880px;
    font-variant-numeric: tabular-nums
}

table.listing th, td {
    padding: 8px 10px;
    vertical-align: middle;
    text-align: center;
    font-weight: 600
}

table.listing th {
    background: var(--col-listing);
    font-weight: 800;
    font-size: 16px;
    padding-top: 44px;
    position: relative;
    border-radius: 10px 10px 0 0
}

table.listing th:first-child {
    background: transparent
}

table.listing th .badge {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    line-height: 28px;
    background: var(--orange);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 10px 10px 0 0
}

table.listing th.max {
    outline: 3px solid var(--orange);
    outline-offset: -3px
}

table.listing td.max {
    border-left: 3px solid var(--orange);
    border-right: 3px solid var(--orange)
}

table.listing tbody td {
    background: var(--col-listing);
    border-top: 1px solid #fff
}

table.listing td.label {
    background: transparent;
    text-align: left;
    border-top: 1px solid var(--line);
    padding-left: 0;
    font-size: 14px
}

table.listing thead td.label {
    border: 0
}

.btnrow td {
    padding: 12px 10px 4px
}

.btnhint td {
    font-size: 12px;
    color: var(--ink-soft);
    padding: 0 10px 14px
}

.ok {
    color: var(--orange);
    font-size: 20px;
    font-weight: 800
}

.no {
    color: var(--no);
    font-size: 18px;
    font-weight: 800
}

.price {
    font-size: 20px;
    font-weight: 800
}

.price small {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600
}

table.listing td.last {
    padding-bottom: 16px
}

table.listing td.max.last {
    border-bottom: 3px solid var(--orange);
    border-radius: 0 0 10px 10px
}

.tail {
    font-size: 12px;
    color: var(--ink-soft);
    margin: 14px 0 0
}

/* ---------- Preisseite: Mobile-Karten ---------- */
.offers {
    display: none;
    gap: 14px;
    margin-top: 20px
}

.offer {
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    background: var(--card)
}

.offer.max {
    border-color: var(--orange)
}

.offer .badge {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 6px
}

.offer h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800
}

.offer .p {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 0
}

.offer .p small {
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600
}

.offer ul {
    list-style: none;
    padding: 0;
    margin: 12px 0
}

.offer li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 14px;
    padding: 5px 0;
    border-top: 1px solid var(--line)
}

.offer li .ok, .offer li .no {
    font-size: 15px;
    line-height: 1.4;
    width: 18px;
    flex: none
}

.offer .btn {
    width: 100%
}

.offer details {
    margin-top: 6px;
    font-size: 13px
}

.offer summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--orange-dark)
}

.section.listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    border-radius: 14px;
    margin-top: 18px;
    flex-wrap: wrap
}

.section.listing h2 {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800
}

.section.listing p {
    margin: 0;
    max-width: 64ch
}

.max-box {
    background: var(--orange);
    color: #fff
}

.max-box .btn {
    background: #fff;
    color: var(--orange-dark)
}

.fil-box {
    background: var(--card);
    box-shadow: 0 8px 30px rgba(0,0,0,.06)
}

.section.listing .btn {
    flex: none
}

/* ---------- Bestellseite ---------- */
.narrow {
    max-width: 860px;
    margin: 0 auto
}

.company {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--field);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0 22px
}

.pin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--orange);
    flex: none
}

.company b {
    font-size: 16px;
    font-weight: 800;
    display: block
}

.company span {
    color: var(--ink-soft);
    font-size: 14px
}

.selected {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 2px solid var(--orange);
    background: var(--orange-soft);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 18px;
    flex-wrap: wrap
}

.selected b {
    font-size: 16px;
    font-weight: 800
}

.choices {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.choice {
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--card);
    display: block
}

.choice input {
    margin: 0 8px 0 0;
    accent-color: var(--orange)
}

.choice b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px
}

.choice small {
    color: var(--ink-soft);
    display: block;
    font-size: 13px
}

.choice.on {
    border-color: var(--orange);
    background: var(--orange-soft)
}

.tag {
    display: inline-block;
    margin-top: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px
}

.tag.grey {
    background: #6b6b70
}

section.listing {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px 24px;
    padding: 22px 0;
    border-top: 1px solid var(--line)
}

section.listing h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800
}

.fields {
    display: grid;
    gap: 10px
}

.row.listing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.row3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 10px
}

.f {
    background: var(--field);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 15px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.f small {
    font-size: 11px;
    color: var(--ink-soft);
    font-weight: 600
}

.f.ph {
    color: #9a9aa0
}

.chk {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px
}

.chk input {
    accent-color: var(--orange);
    margin-top: 2px;
    width: 20px;
    height: 20px;
    flex: none
}

.radio {
    display: flex;
    gap: 18px;
    font-size: 14px;
    flex-wrap: wrap
}

.radio label {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 32px
}

.radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--orange)
}

.submit {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    display: grid;
    gap: 12px
}

.submit .hint {
    max-width: 70ch
}

.sticky {
    display: none
}

@media (max-width:990px) {
    /*    body {
        padding-bottom: 120px
    }
*/
    .wrap {
        margin-left: 8px;
        margin-right: 8px;
    }

    .card {
        padding: 22px 16px
    }

    h1.listing {
        font-size: 23px
    }

    .tablewrap {
        display: none
    }

    .offers {
        display: grid
    }

    .section.listing {
        padding: 18px 16px
    }

    .section.listing .btn {
        width: 100%
    }

    .choices {
        grid-template-columns: 1fr
    }

    section.listing {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .row.listing, .row3 {
        grid-template-columns: 1fr
    }

    .sticky {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--card);
        border-top: 1px solid var(--line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -6px 20px rgba(0,0,0,.08);
        z-index: 5
    }

    .sticky .btn {
        width: 100%;
        font-size: 15px
    }

    .submit .btnwrap {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}
/* ---------- NEU: Garantie-Zeile als Abschluss des Regionskastens ---------- */
.region .garantie {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.18);
}

.region .garantie .badge {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.region .garantie .badge b {
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    color: #fff;
}

.region .garantie .badge span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 2px;
}

.region .garantie .txt {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.4;
    color: #d9d7d2;
}

.region .garantie .txt b {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: normal;
}

.region .garantie .btn-boost {
    flex: 0 0 auto;
    background: var(--orange);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .04em;
    padding: 11px 22px;
    border-radius: 24px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(247,161,46,.4);
}

.region .garantie .btn-boost:hover {
    background: var(--orange-dark);
}

@media (max-width: 760px) {
    .region .garantie {
        flex-wrap: wrap;
    }

    .region .garantie .btn-boost {
        flex: 1 1 100%;
        text-align: center;
    }
}