/* ============ ANFRAGE & BESTELLUNG ============ */
.af-hero .ab-hero-media img { object-position: 60% center; }
.af-hero .ab-hero-inner h1 { margin-bottom: 14px; }

.af-sec { padding: 64px 0; background: var(--bg-soft); }
.af-sec.af-white { background: #fff; }
.af-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.af-num { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,112,192,.28); }
.af-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--navy); margin: 2px 0 6px; letter-spacing: -.02em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-head p { color: var(--text); margin: 0; }
.af-opt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; }
.af-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 2px 12px rgba(11,45,75,.05); }
.af-white .af-card { background: #fff; }

/* Modus-Karten */
.af-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.af-mode { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 26px 26px 24px; background: #fff; border: 2px solid var(--line); border-radius: 20px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.af-mode:hover { border-color: #b9d6ee; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,45,75,.08); }
.af-mode input { position: absolute; opacity: 0; pointer-events: none; }
.af-mode-ic { grid-row: 1 / 4; width: 64px; height: 64px; border-radius: 18px; background: #e8f2fb; color: var(--blue); display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.af-mode-ic .icon { width: 32px; height: 32px; }
.af-mode-t { font-size: 1.5rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.af-mode-s { font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.af-mode-p { font-size: .875rem; color: var(--text); line-height: 1.5; }
.af-mode-check { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: transparent; transition: all .2s; }
.af-mode-check .icon { width: 16px; height: 16px; }
.af-mode.is-on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,112,192,.12), 0 12px 28px rgba(11,45,75,.1); }
.af-mode.is-on .af-mode-ic { background: var(--blue); color: #fff; }
.af-mode.is-on .af-mode-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.af-mode[data-mode="bestellung"].is-on { border-color: #12965a; box-shadow: 0 0 0 4px rgba(18,150,90,.12), 0 12px 28px rgba(11,45,75,.1); }
.af-mode[data-mode="bestellung"].is-on .af-mode-ic, .af-mode[data-mode="bestellung"].is-on .af-mode-check { background: #12965a; border-color: #12965a; }
.af-mode[data-mode="bestellung"] .af-mode-s { color: #12965a; }

/* Shop-Layout */
.af-shop { display: grid; grid-template-columns: 230px minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.af-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; min-width: 0; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; }
.af-cats { display: flex; flex-direction: column; gap: 6px; }
.af-cat { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: none; text-align: left; cursor: pointer; color: var(--navy); font: inherit; transition: background .15s, border-color .15s; }
.af-cat .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--blue); }
.af-cat strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.af-cat small { color: var(--muted); font-size: .75rem; }
.af-cat:hover { background: var(--bg-soft); }
.af-cat.is-on { background: #e8f2fb; border-color: #b9d6ee; }
.af-cat.is-on strong { color: var(--blue); }

.af-search { position: relative; }
.af-search > .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--muted); }
.af-search input { width: 100%; height: 58px; border: 2px solid var(--line); border-radius: 16px; padding: 0 52px 0 54px; font: inherit; font-size: 1rem; color: var(--navy); background: #fff; transition: border-color .2s, box-shadow .2s; }
.af-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,112,192,.12); }
.af-q-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.af-q-clear .icon { width: 16px; height: 16px; }
.af-search input::-webkit-search-cancel-button, .af-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.af-catalog { min-width: 0; }
.af-props { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.af-props:empty { display: none; }
.af-props-l { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.af-props-l .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.af-prop { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #cfe0ee; background: #f3f8fc; border-radius: 99px; padding: 6px 8px 6px 11px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: all .15s; }
.af-prop .icon { width: 16px; height: 16px; color: var(--blue); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.af-prop em { font-style: normal; font-size: .6875rem; font-weight: 700; background: #fff; color: var(--blue); border-radius: 99px; padding: 2px 7px; min-width: 22px; text-align: center; }
.af-prop:hover { border-color: var(--blue); }
.af-prop.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.af-prop.is-on .icon { color: #fff; }
.af-prop.is-on em { color: var(--blue); }
.af-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfe0ee; background: #f3f8fc; border-radius: 99px; padding: 0 10px 0 12px; height: 32px; font-size: .8125rem; font-weight: 600; color: var(--navy); }
.af-sel > span { color: var(--muted); font-weight: 600; }
.af .af-sel select { width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; padding-top: 0; padding-bottom: 0; padding-left: 0; font-size: .8125rem;
  border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--navy); padding: 0 16px 0 0; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230070C0' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; max-width: 190px; }
.af .af-sel select:focus { outline: none; box-shadow: none; border: 0; }
.af-sel:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,112,192,.12); }
.af-sel.is-on { background: var(--blue); border-color: var(--blue); }
.af-sel.is-on > span, .af-sel.is-on select { color: #fff; }
.af .af-sel.is-on select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.af-sel.is-on select option { color: var(--navy); }
.af-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.af-captcha { margin: 0 0 14px; }
.af-props-reset { border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--blue); text-decoration: underline; cursor: pointer; padding: 6px 4px; }
.af-cat.is-empty { opacity: .45; }
.af-cat-all { border-color: var(--line); }
.af-info { display: block; color: var(--navy); font-weight: 600; margin-bottom: 2px; }
.af-sugg { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.af-none a { color: var(--blue); font-weight: 600; }
.af-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.af-chip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: .8125rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: all .15s; }
.af-chip:hover { border-color: var(--blue); color: var(--blue); }
.af-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.af-meta { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 12px; font-size: .875rem; color: var(--muted); }
.af-meta .link-arrow { font-size: .8125rem; }

.af-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.af-tile { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; cursor: grab; transition: border-color .2s, box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.af-tile:hover, .af-tile:focus-visible { border-color: #b9d6ee; box-shadow: 0 10px 24px rgba(11,45,75,.1); transform: translateY(-2px); outline: none; }
.af-tile.is-drag { opacity: .45; transform: scale(.97); }
.af-tile-img { aspect-ratio: 1 / 1; background: #fafbfd; display: flex; align-items: center; justify-content: center; padding: 14px; }
.af-tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; }
.af-tile-b { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.af-tile-nr { font-weight: 800; color: var(--navy); font-size: .9375rem; }
.af-tile-t { font-size: .8125rem; color: var(--text); line-height: 1.35; }
.af-tile-d { font-size: .75rem; color: var(--muted); margin-top: 4px; }
.af-add { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,112,192,.35); transition: transform .15s, background .15s; }
.af-add .icon { width: 20px; height: 20px; }
.af-add:hover { transform: scale(1.1); background: var(--blue-hover); }
.af-tile-grip { position: absolute; top: 12px; left: 10px; color: #c3d2dd; opacity: 0; transition: opacity .2s; }
.af-tile-grip .icon { width: 18px; height: 18px; }
.af-tile:hover .af-tile-grip { opacity: 1; }
.af-tile.in-cart { border-color: #8fc0e6; }
.af-tile.in-cart::after { content: "In der Auswahl"; position: absolute; left: 10px; top: 10px; font-size: .6875rem; font-weight: 700; color: #fff; background: #12965a; border-radius: 99px; padding: 3px 8px; }
.af-tile.in-cart .af-tile-grip { display: none; }
.af-none { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-soft); border-radius: 16px; }
.af-none .icon { width: 34px; height: 34px; color: var(--blue); }
.af-none strong { color: var(--navy); }
.af-more { display: block; margin: 20px auto 0; }
.af-free { margin-top: 24px; padding: 20px 22px; border: 2px dashed #cfe0ec; border-radius: 16px; display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: center; }
.af-free strong { display: block; color: var(--navy); }
.af-free span { font-size: .875rem; color: var(--muted); }
.af-free-row { display: flex; gap: 10px; }
.af-free-row input { flex: 1; min-width: 0; }
.af-free-row .btn { white-space: nowrap; }

/* Auswahl */
.af-cart { position: sticky; top: 96px; }
.af-cart-in { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 32px rgba(11,45,75,.08); display: flex; flex-direction: column; max-height: calc(100vh - 120px); transition: box-shadow .2s, border-color .2s; }
.af-cart.is-target .af-cart-in { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,112,192,.12), 0 12px 32px rgba(11,45,75,.1); }
.af-cart.is-over .af-drop { background: #e8f2fb; }
.af-cart-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.af-cart-h > .icon { width: 24px; height: 24px; color: var(--blue); }
.af-cart-h strong { font-size: 1.125rem; color: var(--navy); }
.af-badge { min-width: 24px; height: 24px; border-radius: 12px; background: var(--blue); color: #fff; font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.af-badge.bump { animation: afbump .45s; }
@keyframes afbump { 40% { transform: scale(1.4); } }
.af-clear { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8125rem; cursor: pointer; text-decoration: underline; }
.af-cart-close { display: none; }
.af-drop { flex: 1; overflow: auto; padding: 14px; min-height: 220px; border-radius: 0; transition: background .2s; }
.af-empty { border: 2px dashed #cfe0ec; border-radius: 16px; padding: 36px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: .875rem; }
.af-empty .icon { width: 30px; height: 30px; color: #9fc1dc; margin-bottom: 6px; }
.af-empty strong { color: var(--navy); font-size: 1rem; }
.af-cart.is-target .af-empty { border-color: var(--blue); background: #f2f8fd; }
.af-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.af-item { display: grid; grid-template-columns: 60px 1fr 30px; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; animation: afin .3s ease; }
@keyframes afin { from { opacity: 0; transform: translateY(-6px); } }
.af-item-img { width: 60px; height: 60px; border-radius: 12px; background: #fafbfd; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--blue); }
.af-item-img img { max-width: 52px; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.af-item-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.af-item-nr { font-weight: 800; color: var(--navy); font-size: .9375rem; }
.af-item-t { font-size: .8125rem; color: var(--text); line-height: 1.35; }
.af-item-d { font-size: .6875rem; color: var(--muted); }
.af-item-col { font-size: .6875rem; color: var(--muted); }
.af-del { border: 0; background: none; color: #c2cdd6; cursor: pointer; padding: 4px; height: 30px; border-radius: 8px; }
.af-del:hover { color: #d42020; background: #fdecec; }
.af-del .icon { width: 18px; height: 18px; }
.af-sel { margin-top: 6px; height: 34px; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font: inherit; font-size: .8125rem; color: var(--navy); background: #fff; }
.af-sw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.af-swb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cdd8e0; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 50%), var(--sw); cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s; }
.af-swb:hover { transform: scale(1.15); }
.af-swb.is-on { box-shadow: 0 0 0 2px var(--blue); }
.af-qty { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.af-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.af-qty button:hover { border-color: var(--blue); color: var(--blue); }
.af-qty button .icon { width: 14px; height: 14px; }
.af-qty input { width: 70px; height: 30px; border: 1px solid var(--line); border-radius: 8px; text-align: center; font: inherit; font-size: .875rem; font-weight: 700; color: var(--navy); -moz-appearance: textfield; }
.af-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.af-qty span { font-size: .75rem; color: var(--muted); margin-left: 4px; }
.af-cart-f { padding: 16px 20px 20px; border-top: 1px solid var(--line); background: #fbfdfe; border-radius: 0 0 20px 20px; }
.af-cart-sum { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy); }
.af-cart-note { display: flex; gap: 8px; font-size: .75rem; color: var(--muted); line-height: 1.45; margin: 10px 0 14px; }
.af-cart-note .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--blue); margin-top: 1px; }
.af-cart-next { width: 100%; justify-content: center; }
.af-mbar { display: none; }

/* Fly + Toast */
.af-fly { position: fixed; z-index: 9999; object-fit: contain; pointer-events: none; transition: transform .6s cubic-bezier(.5,-.2,.7,1), opacity .6s; border-radius: 12px; }
.af-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; display: flex; gap: 10px; align-items: center; font-size: .9375rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s; z-index: 9998; box-shadow: 0 10px 30px rgba(11,45,75,.3); }
.af-toast .icon { width: 18px; height: 18px; color: #5fd49b; }
.af-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Themen */
.af-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.af-topic { display: flex; gap: 14px; align-items: center; padding: 16px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; transition: all .15s; position: relative; }
.af-topic input { position: absolute; opacity: 0; }
.af-topic-ic { flex: 0 0 46px; height: 46px; border-radius: 12px; background: #e8f2fb; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.af-topic-ic .icon { width: 24px; height: 24px; }
.af-topic strong { display: block; color: var(--navy); font-size: .9375rem; }
.af-topic small { color: var(--muted); font-size: .8125rem; }
.af-topic:hover { border-color: #b9d6ee; }
.af-topic:has(input:checked) { border-color: var(--blue); background: #f2f8fd; }
.af-topic:has(input:checked) .af-topic-ic { background: var(--blue); color: #fff; }
.af-topic:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0,112,192,.2); }

/* Felder */
.af-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.af-span2 { grid-column: 1 / -1; }
.af-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.af-field label { font-size: .875rem; font-weight: 600; color: var(--navy); }
.af-field label small { font-weight: 400; color: var(--muted); }
.af-req { color: #d42020; font-style: normal; }
.af input[type=text], .af input[type=email], .af input[type=tel], .af input[type=date], .af select, .af textarea { width: 100%; border: 1.5px solid #d7e2ea; border-radius: 12px; padding: 12px 14px; font: inherit; font-size: .9375rem; color: var(--navy); background: #fff; transition: border-color .15s, box-shadow .15s; }
.af textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.af input:focus, .af select:focus, .af textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,112,192,.12); }
.af .is-err { border-color: #d42020 !important; box-shadow: 0 0 0 4px rgba(212,32,32,.1) !important; }
.af-counter { position: absolute; right: 12px; bottom: 10px; font-size: .75rem; color: var(--muted); }
.af-plz-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.af-upload { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px; border: 2px dashed #cfe0ec; border-radius: 16px; background: #fbfdfe; cursor: pointer; color: var(--text); text-align: center; transition: all .15s; }
.af-upload .icon { width: 30px; height: 30px; color: var(--blue); }
.af-upload strong { color: var(--navy); }
.af-upload u { color: var(--blue); }
.af-upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-upload.is-over, .af-upload:hover { border-color: var(--blue); background: #f2f8fd; }
.af-files { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.af-files li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-soft); border-radius: 10px; font-size: .875rem; color: var(--navy); }
.af-files li .icon { width: 18px; height: 18px; color: var(--blue); }
.af-files li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-files li small { color: var(--muted); }
.af-files li button { border: 0; background: none; cursor: pointer; color: var(--muted); }
.af-files li button .icon { width: 16px; height: 16px; color: inherit; }
.af-hint { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); margin: 4px 0 0; }
.af-hint .icon { width: 18px; height: 18px; color: #25d366; }
.af-hint a { color: var(--blue); }
.af-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--text); cursor: pointer; line-height: 1.45; }
.af-check input { width: 20px; height: 20px; accent-color: var(--blue); flex: 0 0 20px; margin-top: 1px; }
.af-check a { color: var(--blue); }
.af-check.is-err { color: #d42020; }

/* Versand */
.af-ship { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.af-opt-card { display: flex; gap: 14px; align-items: center; padding: 18px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; position: relative; transition: all .15s; }
.af-opt-card input { position: absolute; opacity: 0; }
.af-opt-card > .icon { width: 28px; height: 28px; color: var(--blue); }
.af-opt-card strong { display: block; color: var(--navy); }
.af-opt-card small { color: var(--muted); font-size: .8125rem; }
.af-opt-card:has(input:checked) { border-color: var(--blue); background: #f2f8fd; box-shadow: 0 0 0 4px rgba(0,112,192,.1); }

/* Zusammenfassung */
.af-final { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.af-sum-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.af-sum-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #fff; font-weight: 700; border-radius: 99px; padding: 8px 16px; }
body[data-af-mode="bestellung"] .af-sum-pill { background: #12965a; }
.af-sum-pill .icon { width: 18px; height: 18px; }
.af-sum-h a, .af-sum-b h3 a { font-size: .8125rem; font-weight: 600; color: var(--blue); }
.af-sum-b h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 18px 0 8px; }
.af-sum-b p { margin: 0; color: var(--navy); line-height: 1.6; font-size: .9375rem; }
.af-sum-t { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.af-sum-t td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--navy); }
.af-sum-t td small { display: block; color: var(--muted); font-size: .8125rem; }
.af-sum-t td:last-child { text-align: right; white-space: nowrap; font-weight: 700; padding-left: 12px; }
.af-sum-empty { color: var(--muted); font-style: italic; }
.af-sum-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.af-sum-tags span { background: #e8f2fb; color: var(--blue); font-size: .8125rem; font-weight: 600; border-radius: 99px; padding: 3px 10px; }
.af-send { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.af-submit { width: 100%; justify-content: center; height: 62px; font-size: 1.0625rem; background: var(--blue); color: #fff; margin-top: 6px; }
.af-submit:hover { background: var(--blue-hover); }
body[data-af-mode="bestellung"] .af-submit { background: #12965a; }
body[data-af-mode="bestellung"] .af-submit:hover { background: #0e7c4a; }
.af-submit.is-busy { opacity: .7; pointer-events: none; }
.af-send-note { font-size: .8125rem; color: var(--muted); margin: 0; text-align: center; }
.af-errors { background: #fdecec; border: 1px solid #f5c2c2; color: #a11a1a; border-radius: 12px; padding: 12px 16px; font-size: .875rem; }
.af-errors ul { margin: 6px 0 0; padding-left: 18px; }
.af-help { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: .875rem; }
.af-help strong { color: var(--navy); }
.af-help a { display: inline-flex; gap: 6px; align-items: center; color: var(--blue); text-decoration: none; }
.af-help .icon { width: 16px; height: 16px; }

/* Danke */
.af-thanks { padding: 90px 0; }
.af-thanks-card { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 48px 36px; box-shadow: 0 16px 40px rgba(11,45,75,.08); }
.af-thanks-ic { width: 84px; height: 84px; border-radius: 50%; background: #12965a; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; animation: afpop .5s ease; }
@keyframes afpop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } }
.af-thanks-ic .icon { width: 44px; height: 44px; }
.af-thanks-card h2 { color: var(--navy); margin-bottom: 10px; }
.af-thanks-card p { color: var(--text); }
.af-thanks-ref { background: var(--bg-soft); border-radius: 12px; padding: 10px; display: inline-block; }
.af-thanks-btns { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1240px) {
  .af-shop { grid-template-columns: 200px minmax(0, 1fr) 310px; }
}
@media (max-width: 1080px) {
  .af-shop { grid-template-columns: minmax(0, 1fr) 320px; }
  .af-side { grid-column: 1 / -1; position: static; }
  .af-legend { display: none; }
  .af-cats { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .af-cats::-webkit-scrollbar { display: none; }
  .af-cat { flex: 0 0 auto; border-color: var(--line); background: #fff; }
  .af-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .af-modes { grid-template-columns: 1fr; gap: 12px; }
  .af-mode { padding: 18px; grid-template-columns: 52px 1fr; }
  .af-mode-ic { width: 52px; height: 52px; }
  .af-mode-t { font-size: 1.25rem; }
  .af-shop { grid-template-columns: 1fr; }
  .af-cart { position: fixed; inset: auto 0 0 0; top: auto; z-index: 300; transform: translateY(105%); transition: transform .3s ease; }
  .af-cart.open { transform: none; }
  .af-cart-in { border-radius: 22px 22px 0 0; max-height: 82vh; }
  .af-cart-close { display: flex; border: 0; background: var(--bg-soft); width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; margin-left: 6px; cursor: pointer; }
  .af-cart-close .icon { width: 16px; height: 16px; }
  .af-mbar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250; display: flex; align-items: center; gap: 10px; height: 58px; border: 0; border-radius: 16px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; padding: 0 18px; box-shadow: 0 10px 30px rgba(11,45,75,.35); transform: translateY(140%); transition: transform .3s; cursor: pointer; }
  .af-mbar .icon { width: 22px; height: 22px; }
  .af-mbar .af-mbar-arr { margin-left: auto; }
  body.af-in-shop .af-mbar, .af-mbar.has { transform: none; }
  body.af-lock { overflow: hidden; }
  .af-toast { bottom: 90px; }
  .af-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .af-add { width: 42px; height: 42px; }
  .af-tile-grip { display: none; }
  .af-free { grid-template-columns: 1fr; }
  .af-ship { grid-template-columns: 1fr; }
  .af-final { grid-template-columns: 1fr; }
  .af-send { position: static; }
}
@media (max-width: 640px) {
  .af-sec { padding: 44px 0; }
  .af-card { padding: 18px; border-radius: 16px; }
  .af-head { gap: 12px; }
  .af-num { flex: 0 0 36px; height: 36px; font-size: 1rem; }
  .af-grid2 { grid-template-columns: 1fr; }
  .af-topics { grid-template-columns: 1fr; }
  .af-free-row { flex-direction: column; }
  .af-search input { height: 52px; font-size: .9375rem; }
  .af-props { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .af-props::-webkit-scrollbar { display: none; }
  .af-prop, .af-props-l, .af-sel { flex: 0 0 auto; }
}
.af [hidden], .af-mbar[hidden] { display: none !important; }
.af-free { grid-template-columns: 1fr; }
.af-mt { display: none; }
.af-empty strong.af-dt + .af-mt { display: none; }
@media (max-width: 900px) { .af-empty .af-dt { display: none; } .af-empty .af-mt { display: inline; } .af-cart:not(.open) { visibility: hidden; } .af-cart.open { visibility: visible; } }
.af-toast { white-space: nowrap; }

/* Hinweis Mindestmengen */
.af-note-sec { padding: 0 0 56px; }
.af-note { display: flex; gap: 22px; background: linear-gradient(135deg, #fff8ec, #fffdf8); border: 1px solid #f3d9a8; border-left: 5px solid #e8a33d; border-radius: 18px; padding: 26px 30px; }
.af-note-ic { flex: 0 0 48px; height: 48px; border-radius: 14px; background: #fde9c6; color: #b9741a; display: flex; align-items: center; justify-content: center; }
.af-note-ic .icon { width: 26px; height: 26px; }
.af-note h2 { font-size: 1.25rem; color: var(--navy); margin: 2px 0 8px; }
.af-note p { color: var(--text); margin: 0 0 10px; }
.af-note-list { margin: 0 0 10px; padding-left: 20px; color: var(--text); line-height: 1.7; }
.af-note-list strong { color: var(--navy); }
.af-pu { display: inline-block; background: #fff; border: 1px solid #f0d29c; color: #8a5a12; font-weight: 700; font-size: .8125rem; border-radius: 99px; padding: 1px 10px; margin: 0 3px; }
.af-note-small { font-size: .875rem; color: var(--muted) !important; margin: 0 !important; }
.af-item-min { display: flex; align-items: center; gap: 5px; font-size: .6875rem; color: #a2671a; margin-top: 6px; }
.af-item-min .icon { width: 13px; height: 13px; }
.af-ordernote { background: #f2faf6; border: 1px solid #bfe5d1; border-radius: 14px; padding: 16px 18px; font-size: .875rem; color: var(--text); }
.af-ordernote > strong { display: flex; align-items: center; gap: 8px; color: #0e7c4a; margin-bottom: 6px; }
.af-ordernote > strong .icon { width: 18px; height: 18px; }
.af-ordernote ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.af-ordernote li { margin-top: 6px; }
.af-ordernote b { color: var(--navy); }
.af-ordernote ol.af-on-steps { margin: 4px 0 0; padding-left: 20px; list-style: decimal; }
.af-ordernote ol.af-on-steps li { margin-top: 2px; }
.af-ordernote ol.af-on-steps li::marker { color: #12965a; font-weight: 600; }
@media (max-width: 640px) { .af-note { flex-direction: column; padding: 20px; gap: 12px; } .af-note-sec { padding-bottom: 40px; } }
.af-note-list, .af-ordernote ul { list-style: disc; } .af-note-list li::marker { color: #e8a33d; } .af-ordernote li::marker { color: #12965a; }
body[data-af-mode="anfrage"] .af-mbar { display: none !important; }
/* Hinweis in BRERO-Blau statt Orange */
.af-note { background: linear-gradient(135deg, #eef6fc, #f7fbfe); border: 1px solid #cfe3f3; border-left: 5px solid var(--blue); }
.af-note-ic { background: #dcecf8; color: var(--blue); }
.af-pu { border-color: #b9d6ee; color: var(--blue); }
.af-note-list li::marker { color: var(--blue); }
.af-item-min { color: var(--muted); }
.af-item-min .icon { color: var(--blue); }
/* Unterüberschriften Angaben / Adressen */
.af-subh { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.af-subh:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.af-subh .icon { width: 18px; height: 18px; }
.af-addrsw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.af-addrsw .af-opt-card { padding: 14px 16px; }
.af-addrsw .af-opt-card > .icon { width: 22px; height: 22px; }
.af-altbox { background: var(--bg-soft); border-radius: 14px; padding: 18px; }
@media (max-width: 640px) { .af-addrsw { grid-template-columns: 1fr; } }
.af select.af-sel { padding: 0 32px 0 10px; height: 36px; font-size: .8125rem; width: auto; min-width: 150px; max-width: 100%; }
/* Zusatzinfos pro Artikel */
.af-x { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; align-self: flex-start; background: #e8f2fb; color: var(--blue); font-size: .6875rem; font-weight: 600; border-radius: 6px; padding: 3px 7px; line-height: 1.3; }
.af-x .icon { width: 12px; height: 12px; flex: 0 0 12px; }
.af-spec { display: block; margin-top: 6px; padding-left: 8px; border-left: 2px solid #e3e9ee; font-size: .6875rem; line-height: 1.4; color: #8a96a3; font-weight: 400; }
.af-sets { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; align-self: flex-start; color: var(--muted); font-size: .6875rem; font-weight: 600; cursor: help; }
.af-sets .icon { width: 13px; height: 13px; color: var(--blue); }
.af-sets-d { margin-top: 6px; font-size: .6875rem; }
.af-sets-d summary { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; }
.af-sets-d summary::-webkit-details-marker { display: none; }
.af-sets-d summary::after { content: "▾"; font-size: .625rem; }
.af-sets-d[open] summary::after { content: "▴"; }
.af-sets-d summary .icon { width: 13px; height: 13px; color: var(--blue); }
.af-sets-l { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.af-sets-l a { background: var(--bg-soft); border: 1px solid var(--line); color: var(--navy); border-radius: 99px; padding: 1px 8px; text-decoration: none; font-weight: 600; }
.af-sets-l a:hover { border-color: var(--blue); color: var(--blue); }
/* Öse Nr. / Ring Nr. hervorheben, Sortimente kompakt */
.af-nr { align-self: flex-start; font-weight: 700 !important; color: #0e7c4a !important; background: #eefaf3; border: 1.5px solid #9fdcbc; border-radius: 8px; padding: 2px 8px; margin-top: 3px; }
.af-tile .af-sets { display: block; line-height: 1.45; font-weight: 500; }
.af-tile .af-sets > .icon { vertical-align: -2px; margin-right: 3px; }
.af-tile .af-sets b { color: var(--navy); font-weight: 700; }
.af-free { margin-top: 0; }
/* Originalfarben */
.af-swb { width: 26px; height: 26px; background: #fff; overflow: hidden; position: relative; }
.af-swb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; transform: scale(1.35); }
.af-swb.is-stock { background: #e3f6ec; border-color: #e3f6ec; box-shadow: 0 0 0 2px #8fd6b1; }
.af-swb.is-stock.is-on { box-shadow: 0 0 0 2px #8fd6b1, 0 0 0 4px var(--blue); }
.af-item-col em { font-style: normal; font-weight: 700; font-size: .625rem; border-radius: 99px; padding: 1px 6px; margin-left: 4px; }
.af-stock { background: #e7f6ee; color: #0e7c4a; }
.af-nostock { background: #eef4fa; color: var(--blue); }
.af-item-col em { white-space: nowrap; display: inline-block; margin: 3px 0 0 0; }
.af-item-col { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.af-swb img { transform: scale(1.15); }
.af-colnote { display: flex; gap: 5px; align-items: flex-start; font-size: .6875rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.af-colnote .icon { width: 12px; height: 12px; flex: 0 0 12px; color: var(--blue); margin-top: 1px; }
.af-tool { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d7e2ea; font-size: .6875rem; color: var(--muted); line-height: 1.35; }
.af-tool > .icon { flex: 0 0 14px; width: 14px; height: 14px; color: var(--blue); margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.af-tool-h { display: block; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.af-tool-add { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 3px 8px 3px 5px; border: 1px solid #b9d6ee; border-radius: 99px; background: #f3f8fc; color: var(--blue); font: inherit; font-size: .6875rem; font-weight: 700; cursor: pointer; text-align: left; }
.af-tool-add small { display: block; font-weight: 600; color: var(--muted); font-size: .625rem; }
.af-tool-add:hover small { color: #e6f0f8; }
.af-tool-add .icon { width: 11px; height: 11px; flex: 0 0 11px; }
.af-tool-add:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.af-tool-m { display: block; width: 100%; font-style: normal; font-weight: 700; color: #b45309; margin-top: 1px; }
.af-fit { display: block; margin-top: 6px; font-size: .6875rem; color: var(--muted); line-height: 1.35; }
.af-fit > span { font-weight: 700; color: var(--navy); }
.af-item .af-tool { border-top: 0; padding-top: 2px; }

.af-note-alt { margin-top: 18px; line-height: 1.6; }
.af-note-alt ol.af-on-steps { margin: 4px 0 0; padding-left: 22px; list-style: decimal; }
.af-note-alt ol.af-on-steps li { margin-top: 2px; }
.af-note-alt ol.af-on-steps li::marker { color: #e8a33d; font-weight: 600; }
.af-note-list2 { margin-top: 18px; }
.af-note-list2 ol.af-on-steps { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.af-note-list2 ol.af-on-steps li { margin-top: 2px; }
.af-note-list2 ol.af-on-steps li::marker { color: #0070C0; }
.af-note-list2 li.af-note-li-small { margin-top: 8px; font-size: .8125rem; color: var(--muted, #6b7a8c); }
.af-note-list.af-note-list2 { list-style: none; padding-left: 0; }
.af-note-list.af-note-list2 > li::marker { content: none; }
.af-tool-m.af-tool-zw { display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: .75rem; color: #3d6b52; }
.af-tool-zw .icon { width: 13px; height: 13px; flex: none; }
/* Masslegende links */
.af-legend { border: 1px solid var(--line, #dfe7ee); border-radius: 12px; background: #fff; padding: 10px 12px; font-size: .6875rem; line-height: 1.35; color: var(--muted, #6b7a8c); display: flex; flex-direction: column; gap: 8px; }
.af-lg-h { font-size: .75rem; color: var(--navy); font-weight: 700; }
.af-lg-t { display: block; font-weight: 700; color: var(--navy); font-size: .6875rem; margin-bottom: 3px; }
.af-legend dl { display: grid; grid-template-columns: 15px 1fr; gap: 3px 6px; margin: 0; align-items: start; }
.af-legend dt { font-weight: 800; color: #0070C0; text-align: center; background: #eef4fa; border-radius: 4px; line-height: 15px; height: 15px; width: 15px; font-size: .625rem; flex: none; }
.af-legend dd { margin: 0; }
.af-lg-f { font-size: .625rem; color: var(--muted, #6b7a8c); }
.af-ordernote ul.af-on-sub { margin: 4px 0 0; padding-left: 18px; list-style: circle; }
.af-ordernote ul.af-on-sub li { margin-top: 3px; }
/* Rückfrage passende Teile (Scheibe, Unterteile, Nagel) */
.af-sg { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 42, 74, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.af-sg-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(15,42,74,.25); width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.af-sg-box > strong { font-size: 1rem; color: var(--navy); }
.af-sg-q { margin: 6px 0 0; font-weight: 600; font-size: .875rem; color: var(--navy); }
.af-sg-o { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line, #dfe7ee); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: .875rem; }
.af-sg-o:has(input:checked) { border-color: #0070C0; background: #f3f8fd; }
.af-sg-o img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #f6f8fa; flex: none; }
.af-sg-o span { display: flex; flex-direction: column; min-width: 0; }
.af-sg-o small { color: var(--muted, #6b7a8c); font-size: .75rem; }
.af-sg-o input { flex: none; accent-color: #0070C0; }
.af-sg-b { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.af-sg-b .btn { height: 42px; padding: 0 20px; }
.af-sg-no { background: none; border: 0; color: var(--muted, #6b7a8c); text-decoration: underline; cursor: pointer; font: inherit; font-size: .875rem; }
.af-sg-b .btn.af-sg-ok { background: #0070C0; color: #fff; border: 0; border-radius: 10px; font-weight: 600; cursor: pointer; }
.af-sg-b .btn.af-sg-ok:hover { background: #005ea3; }
.af-sg-std { align-self: flex-start; font-style: normal; font-size: .6875rem; font-weight: 700; color: #0e7c4a; background: #e3f6ec; border-radius: 99px; padding: 1px 8px; margin-bottom: 2px; }
/* Komplett-/Ergänzungssets hervorheben */
.af-prop[data-p="set"] { background: #fff4df; border-color: #f0c36d; color: #7a4b00; }
.af-prop[data-p="set"] .icon { color: #c98400; }
.af-prop[data-p="set"] em { background: #f7d891; color: #6b4200; }
.af-prop[data-p="set"]:hover { border-color: #e0a93a; }
.af-prop[data-p="set"].is-on { background: #e9a21f; border-color: #e9a21f; color: #fff; }
.af-prop[data-p="set"].is-on .icon { color: #fff; }
.af-prop[data-p="set"].is-on em { background: rgba(255,255,255,.3); color: #fff; }
.af-filters + .af-props { margin-top: 12px; }
.af-props .af-sel { flex: 1 1 0; min-width: 150px; }
.af .af-props .af-sel select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.af-props .af-sel > span { white-space: nowrap; }
.af-props .af-prop[data-p="set"] { order: 10; }
.af-props .af-prop { order: 11; }
.af-props .af-props-reset { order: 12; }
.af-props .af-sel { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 5px 12px 4px; border-radius: 10px; }
.af-props .af-sel > span { font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.af .af-props .af-sel select { font-weight: 700; padding-right: 18px; background-position: right 0 center; }
@media (max-width: 640px) { .af-props .af-sel { flex: 1 1 100%; } .af-props-l { flex: 0 0 100%; } }
@media (max-width: 640px) { .af-props { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; } .af-props .af-sel { flex: 1 1 100%; min-width: 0; } }
.af .af-props .af-sel select { width: 100% !important; max-width: none; }
/* Sets-Filter hervorgehoben */
.af-prop.af-prop-set { background: #fff6e5; border-color: #f1c879; color: #8a5a00; font-weight: 700; }
.af-prop.af-prop-set em { background: #fde3b0; color: #8a5a00; }
.af-prop.af-prop-set .icon { color: #c27c00; }
.af-prop.af-prop-set.is-on { background: #e8a33d; border-color: #e8a33d; color: #fff; }
.af-prop.af-prop-set.is-on em { background: rgba(255,255,255,.3); color: #fff; }
.af-prop.af-prop-set.is-on .icon { color: #fff; }
.af-props .af-sel { order: 5; }
.af-props .af-prop[data-p="farbig"] { order: 11; }
.af-props .af-prop.af-prop-set { order: 12; }
.af-props .af-prop[data-p="ab1"] { order: 13; }
.af-props .af-props-reset { order: 20; }
/* Typ-Banner im Katalog */
.af-ser { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; background: linear-gradient(90deg, #eef5fb, #f7fafd 60%, #fff); border: 1px solid #d6e5f2; border-radius: 16px; padding: 10px 18px 10px 10px; margin-top: 8px; }
.af-ser:first-child { margin-top: 0; }
.af-ser img { width: 112px; height: 84px; object-fit: contain; background: #fff; border-radius: 12px; flex: none; }
.af-ser-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.af-ser-t em { font-style: normal; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0070C0; }
.af-ser-t strong { font-size: 1.125rem; color: var(--navy); line-height: 1.2; }
.af-ser-t span { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.af-ser-n { flex: none; font-size: .75rem; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid #d6e5f2; border-radius: 99px; padding: 4px 10px; }
@media (max-width: 640px) { .af-ser { gap: 12px; padding: 8px 12px 8px 8px; } .af-ser img { width: 72px; height: 56px; } .af-ser-n { display: none; } .af-ser-t span { font-size: .75rem; } }
/* Hinzufügen-Fenster: Farbe / Ausführung / Menge */
.af-sg-head { display: flex; gap: 12px; align-items: center; }
.af-sg-head img { width: 64px; height: 64px; object-fit: contain; background: #f6f8fa; border-radius: 10px; flex: none; }
.af-sg-head div { display: flex; flex-direction: column; min-width: 0; }
.af-sg-head strong { font-size: 1.0625rem; color: var(--navy); }
.af-sg-head span { font-size: .8125rem; color: var(--muted); }
.af-sg-cfg { display: flex; flex-direction: column; gap: 10px; background: #f6f9fc; border: 1px solid #e1eaf2; border-radius: 12px; padding: 12px; margin-top: 4px; }
.af-sg-l { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
.af-sg-l .af-sel, .af-sg-l .af-qty, .af-sg-sw { text-transform: none; letter-spacing: 0; font-weight: 400; }
.af-sg-l .af-sw { margin-top: 2px; }
.af-sg-ex, .af-sg-same { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: .75rem; color: #8a5a00; line-height: 1.4; }
.af-sg-same { color: var(--muted); margin-top: 6px; }
.af-sg-ex .icon, .af-sg-same .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.af-dup { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; border: 1px dashed #b9cfe3; background: #fff; color: #0070C0; border-radius: 99px; padding: 4px 10px; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.af-dup .icon { width: 12px; height: 12px; }
.af-dup:hover { background: #f3f8fd; }
.af-dup { white-space: nowrap; }
.af-linknote { display: flex; gap: 5px; align-items: flex-start; margin-top: 6px; font-size: .6875rem; line-height: 1.4; color: #0e7c4a; background: #effaf4; border-radius: 8px; padding: 5px 8px; }
.af-linknote .icon { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.af-linknote-c { color: var(--muted); background: #f4f7fa; }
/* Gut zu wissen oberhalb der Auswahl Anfrage / Offerte / Bestellung */
.af-note-top { padding: 48px 0 0; }
.af-note-top + .af-modes-sec { padding-top: 40px; }
.af-note-h3 { font-size: 1rem; color: var(--navy); margin: 14px 0 4px; }
.af-note-modes { margin-bottom: 4px; }
@media (max-width: 640px) { .af-note-top { padding-top: 28px; } }
/* Gut zu wissen – kompakt */
.af-gzw { background: #fff; border: 1px solid #d9e6f1; border-radius: 18px; padding: 22px 24px 16px; box-shadow: 0 2px 12px rgba(11,45,75,.04); }
.af-gzw-h { display: flex; gap: 16px; align-items: flex-start; }
.af-gzw-h h2 { font-size: 1.25rem; margin: 2px 0 4px; color: var(--navy); }
.af-gzw-h p { margin: 0; color: var(--text); font-size: .9375rem; line-height: 1.55; max-width: 72ch; }
.af-gzw-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.af-gzw-f { display: flex; gap: 10px; align-items: flex-start; background: #f6f9fc; border: 1px solid #e3ecf4; border-radius: 12px; padding: 12px 14px; }
.af-gzw-f > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.af-gzw-f strong { color: var(--navy); font-size: .9375rem; }
.af-gzw-f span { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.af-gzw-i { width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid #e3ecf4; display: flex; align-items: center; justify-content: center; flex: none; color: #0070C0; }
.af-gzw-i .icon { width: 18px; height: 18px; }
.af-gzw-pu { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.af-gzw-pu .af-pu { margin: 0; }
.af-gzw-foot { margin: 12px 0 0; font-size: .8125rem; color: var(--muted); }
.af-mode-time { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; align-self: end; justify-self: start; margin-top: 12px; font-size: .75rem; font-weight: 700; color: var(--navy); background: #f1f6fb; border-radius: 99px; padding: 4px 10px; }
.af-mode-time .icon { width: 13px; height: 13px; color: #0070C0; }
@media (max-width: 900px) { .af-gzw-facts { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .af-gzw { padding: 18px 16px 14px; } .af-gzw-h .af-note-ic { display: none; } }
/* Farbwahl getrennt: ab Lager / auf Offerte */
.af-swg { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.af-swg-row { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 7px 9px 8px; }
.af-swg-stock { background: #effaf4; border: 1px solid #c9ecd8; }
.af-swg-off { background: #f6f8fb; border: 1px dashed #d3dde8; }
.af-swg-lab { font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.af-swg-stock .af-swg-lab { color: #0e7c4a; }
.af-swg-off .af-swg-lab { color: #5c6b7c; }
.af-swg .af-sw { margin-top: 2px; }
.af-swg-note { font-size: .6875rem; color: var(--muted); line-height: 1.35; }
.af-swg .af-swb.is-stock { background: #fff; border-color: #fff; box-shadow: 0 0 0 1px #cdd8e0; }
.af-swg .af-swb.is-stock.is-on, .af-swg .af-swb.is-on { box-shadow: 0 0 0 2px var(--blue); }
/* gewählte Farbe deutlicher */
.af-item-col { font-size: .875rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-top: 6px; }
.af-item-col em { font-size: .75rem !important; padding: 2px 9px !important; }
.af-ser-acc { background: linear-gradient(90deg, #fff8ec, #fffdf8); border-color: #f3d9a8; padding-left: 18px; } .af-ser-acc .af-ser-t em { color: #b06f00; }
/* Ergänzende Produkte (passende Dichtungsringe/Unterlegscheiben) */
.af-ser-comp { margin-top: 18px; background: linear-gradient(90deg, #eef6fc, #fbfdff); border-color: #bcd9ef; } .af-ser-comp .af-ser-t em { color: #0070C0; }
/* Ergänzende Produkte unter «Ihre Auswahl» */
.af-comp { background: #fff; border: 1px solid #bcd9ef; border-radius: 12px; padding: 14px 14px 10px; box-shadow: 0 8px 22px rgba(11,45,75,.06); }
.af-comp-h em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0070C0; }
.af-comp-h strong { display: block; font-size: 15px; color: var(--ink, #0b2d4b); margin-top: 2px; }
.af-comp-h span { display: block; font-size: 12px; color: #6b7a8a; margin-top: 2px; }
.af-comp ul { list-style: none; margin: 10px 0 0; padding: 0; }
.af-comp-i { display: grid; grid-template-columns: 40px 1fr 32px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #edf2f7; }
.af-comp-i img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #f6f8fa; }
.af-comp-i strong { display: block; font-size: 13px; line-height: 1.25; }
.af-comp-i span { display: block; font-size: 11.5px; color: #6b7a8a; }
.af-comp-i small { display: block; font-size: 11px; color: #0070C0; line-height: 1.3; margin-top: 2px; }
.af-comp-add { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #0070C0; color: #fff; display: grid; place-items: center; cursor: pointer; }
.af-comp-add:hover { background: #005a9a; } .af-comp-add .icon { width: 16px; height: 16px; }
.af-comp-more { margin: 6px 0 2px; font-size: 11.5px; color: #6b7a8a; }
.af-comp-i { padding: 6px 0; }

.af-comp { padding: 12px 12px 8px; } .af-comp-h span { display: none; } .af-comp-i { grid-template-columns: 34px 1fr 28px; gap: 8px; } .af-comp-i img { width: 34px; height: 34px; } .af-comp-add { width: 28px; height: 28px; }


.af-comp-h strong { font-size: 13px; } .af-comp-h em { font-size: 10px; } .af-comp-i strong { font-size: 12px; } .af-comp-i small { font-size: 10.5px; }
@media (max-width: 1080px) { .af-comp { display: none; } }
.af-comp-i { grid-template-columns: 34px 1fr; color: inherit; text-decoration: none; border-radius: 8px; } a.af-comp-i:hover strong { color: #0070C0; text-decoration: underline; }
.af-comp li + li .af-comp-i { border-top: 1px solid #edf2f7; } .af-comp li:first-child .af-comp-i { border-top: 1px solid #edf2f7; }
a.af-comp-more { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 2px; font-size: 11.5px; font-weight: 600; color: #0070C0; text-decoration: none; } a.af-comp-more:hover { text-decoration: underline; } a.af-comp-more .icon { width: 13px; height: 13px; }
.af-comp-h span.af-comp-sub { display: block; font-size: 11px; margin-top: 2px; color: #6b7a8a; }
.af-sg-gnote { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 4px; font-size: 12px; color: #6b7a8a; line-height: 1.4; } .af-sg-gnote .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #0070C0; }
/* Preis-Hinweis in «Ihre Auswahl» bei Offerte und Bestellung ausgeblendet */
body[data-af-mode="offerte"] .af-cart-note, body[data-af-mode="bestellung"] .af-cart-note { display: none; }
/* Info-Hinweise auf Artikelkarten (z. B. «Kleinpackung Prym», «Nur einseitig zu öffnen») – eigene Farbe statt Blau */
.af-x { background: #f1edf9; color: #5b3d8a; border: 1px solid #e0d6f2; }
.af-x .icon { color: #7a55b5; }
/* Maschinen-Info bei Ösen & Scheiben */
.af-mach { margin: 0 0 14px; border: 1px solid #d6e6f4; border-radius: 12px; background: #fbfdff; padding: 10px 12px; }
.af-mach-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; margin-bottom: 8px; }
.af-mach-h .icon { width: 15px; height: 15px; color: #0070C0; align-self: center; }
.af-mach-h strong { color: var(--ink, #0b2d4b); } .af-mach-h span { color: #6b7a8a; font-size: 11.5px; }
.af-mach-bar { display: grid; grid-template-columns: 1fr 1fr; border-radius: 8px; overflow: hidden; }
.af-mach-seg { padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; line-height: 1.35; position: relative; }
.af-mach-seg em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.af-mach-seg strong { font-size: 12.5px; }
.af-mach-seg span { color: #4f6070; }
.af-mach-seg.is-a { background: #e8f2fb; } .af-mach-seg.is-a em, .af-mach-seg.is-a strong { color: #0070C0; }
.af-mach-seg.is-b { background: #0070C0; } .af-mach-seg.is-b em, .af-mach-seg.is-b strong, .af-mach-seg.is-b span { color: #fff; } .af-mach-seg.is-b span { opacity: .9; }
.af-mach-seg.is-a::after { content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left-color: #e8f2fb; border-right: 0; z-index: 1; }
.af-mach-seg.is-b { padding-left: 18px; }
@media (max-width: 600px) { .af-mach-bar { grid-template-columns: 1fr; } .af-mach-seg.is-a::after { display: none; } .af-mach-seg.is-b { padding-left: 10px; } }
/* Maschinen-Info: eigene Farben (Mint / Dunkelschiefer) statt Blau */
.af-mach { border-color: #dfe7ee; background: #fafbfc; }
.af-mach-h .icon { color: #137a4f; }
.af-mach-seg.is-a { background: #e3f5ec; } .af-mach-seg.is-a em, .af-mach-seg.is-a strong { color: #137a4f; } .af-mach-seg.is-a span { color: #3f5a4d; }
.af-mach-seg.is-a::after { border-left-color: #e3f5ec; }
.af-mach-seg.is-b { background: #2b3f52; } .af-mach-seg.is-b em { color: #9fd9bf; }
/* Maschinen-Info: Orange (wie Sortiments-Chip) */
.af-mach { border-color: #f3d9a8; background: #fffdf8; }
.af-mach-h .icon { color: #b06f00; }
.af-mach-seg.is-a { background: #fff1db; } .af-mach-seg.is-a em, .af-mach-seg.is-a strong { color: #a35f00; } .af-mach-seg.is-a span { color: #6b5233; }
.af-mach-seg.is-a::after { border-left-color: #fff1db; }
.af-mach-seg.is-b { background: #d9822b; } .af-mach-seg.is-b em { color: #fff3e0; }
/* Maschinen-Info: neutrales Design (weiss, Pillen, Trennlinie) */
.af-mach { border-color: #e3e8ed; background: #fff; padding: 10px 14px 12px; }
.af-mach-h .icon { color: #0b2d4b; }
.af-mach-bar { border-radius: 0; overflow: visible; gap: 0; }
.af-mach-seg, .af-mach-seg.is-a, .af-mach-seg.is-b { background: none; padding: 2px 14px 0 0; }
.af-mach-seg.is-b { padding-left: 14px; border-left: 1px dashed #cfd8e0; }
.af-mach-seg.is-a::after { display: none; }
.af-mach-seg em { align-self: flex-start; font-size: 10.5px; letter-spacing: .03em; text-transform: none; padding: 2px 8px; border-radius: 999px; margin-bottom: 3px; }
.af-mach-seg.is-a em { background: #0b2d4b; color: #fff; }
.af-mach-seg.is-b em { background: #eef2f5; color: #0b2d4b; border: 1px solid #d5dde4; }
.af-mach-seg.is-a strong, .af-mach-seg.is-b strong { color: #0b2d4b; }
.af-mach-seg.is-a span, .af-mach-seg.is-b span { color: #5f6f7e; opacity: 1; }
@media (max-width: 600px) { .af-mach-seg.is-b { border-left: 0; border-top: 1px dashed #cfd8e0; padding: 8px 0 0; margin-top: 8px; } }
/* Maschinen-Info: einfarbig (Violett, wie Info-Hinweise auf den Karten) */
.af-mach { background: #f4f0fb; border-color: #e0d6f2; }
.af-mach-h .icon { color: #6b45a8; }
.af-mach-seg.is-b { border-left-color: #cdbde9; }
.af-mach-seg.is-a em { background: #5b3d8a; color: #fff; }
.af-mach-seg.is-b em { background: #fff; color: #5b3d8a; border-color: #cdbde9; }
.af-mach-seg.is-a strong, .af-mach-seg.is-b strong, .af-mach-h strong { color: #3f2a63; }
.af-mach-seg.is-a span, .af-mach-seg.is-b span, .af-mach-h span { color: #6a5d80; }
@media (max-width: 600px) { .af-mach-seg.is-b { border-top-color: #cdbde9; } }
/* Dialog: Passende Werkzeuge und Maschinen – kompakt, aufklappbar */
.af-sg-wz { border: 1px solid var(--line, #dfe7ee); border-radius: 12px; padding: 0 12px; margin-top: 8px; background: #fafbfc; }
.af-sg-wz > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; cursor: pointer; font-weight: 600; font-size: .875rem; color: var(--navy); }
.af-sg-wz > summary::-webkit-details-marker { display: none; }
.af-sg-wz > summary small { font-weight: 400; color: #6b7a8a; }
.af-sg-wz > summary .icon { width: 16px; height: 16px; transition: transform .2s; color: #0070C0; }
.af-sg-wz[open] > summary .icon { transform: rotate(180deg); }
.af-sg-wz[open] { padding-bottom: 10px; }
.af-sg-wzl { margin: 4px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8a; }
.af-sg-cg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.af-sg-c { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line, #dfe7ee); background: #fff; border-radius: 9px; padding: 5px 7px; cursor: pointer; min-width: 0; }
.af-sg-c:has(input:checked) { border-color: #0070C0; background: #f2f8fd; }
.af-sg-c input { flex: none; margin: 0; }
.af-sg-c img { width: 28px; height: 28px; object-fit: contain; border-radius: 5px; background: #f6f8fa; flex: none; }
.af-sg-c span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.25; }
.af-sg-c b { font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-sg-c small { color: #6b7a8a; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.af-sg-wzn { display: flex; gap: 6px; font-size: 11px; color: #6b7a8a; margin: 2px 0 0; line-height: 1.4; } .af-sg-wzn .icon { width: 13px; height: 13px; flex: none; margin-top: 1px; color: #0070C0; }
@media (max-width: 420px) { .af-sg-cg { grid-template-columns: 1fr; } }
.af-sg-c b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Maschinen-Info bei Ösen: kleine Tabelle (Variante B) */
.af-mtab { margin: 0 0 14px; border: 1px solid #dfe7ee; border-radius: 12px; overflow: hidden; font-size: 12px; background: #fff; }
.af-mtab-h { background: #0b2d4b; color: #fff; padding: 7px 12px; font-weight: 600; font-size: 12.5px; }
.af-mtab-h span { font-weight: 400; opacity: .85; }
.af-mtab table { width: 100%; border-collapse: collapse; }
.af-mtab th, .af-mtab td { padding: 7px 12px; border-top: 1px solid #edf1f5; vertical-align: top; text-align: left; line-height: 1.4; }
.af-mtab th { width: 110px; font-weight: 700; color: #0070C0; white-space: nowrap; }
.af-mtab td { color: #0b2d4b; }
.af-mtab tr:nth-child(2) th, .af-mtab tr:nth-child(2) td { background: #f7f9fb; }
@media (max-width: 600px) { .af-mtab th { width: auto; } }
.af-mtab th, .af-mtab td { font-size: 12px; } .af-mtab th { font-size: 12px; }
/* Chip «Ab Lager» (grün) */
.af-prop.af-prop-lager { background: #e9f7ef; border-color: #8fd6b1; color: #137a4f; font-weight: 700; }
.af-prop.af-prop-lager em { background: #c9eedb; color: #137a4f; }
.af-prop.af-prop-lager .icon { color: #1c9a63; }
.af-prop.af-prop-lager.is-on { background: #1c9a63; border-color: #1c9a63; color: #fff; }
.af-prop.af-prop-lager.is-on em { background: rgba(255,255,255,.3); color: #fff; }
.af-prop.af-prop-lager.is-on .icon { color: #fff; }
.af-props .af-prop.af-prop-lager { order: 12; }
/* Filterleiste kompakter: 4 Auswahlfelder in einer Zeile, Chips (Sets, Ab Lager, Ab 1 Stück) gemeinsam in der zweiten Zeile */
.af-props .af-sel { flex: 1 1 105px; min-width: 105px; padding: 5px 10px 4px; }
.af .af-props .af-sel select { min-width: 0; font-size: .8125rem; }
.af-props .af-prop.af-prop-set, .af-props .af-prop.af-prop-lager, .af-props .af-prop[data-p="ab1"] { height: 34px; }
.af-props .af-prop.af-prop-set, .af-props .af-prop.af-prop-lager, .af-props .af-prop[data-p="ab1"] { padding: 0 10px; gap: 6px; font-size: .78rem; }
.af-props .af-prop em { padding: 1px 6px; }
.af-gzw-h > div { flex: 1; min-width: 0; }
.af-gzw-h p { max-width: none; }
.af-sg-c[hidden] { display: none; }
.af-sg-c.is-in { opacity: .6; cursor: default; } .af-sg-c.is-in small { color: #1c9a63; font-weight: 600; }
/* Material-Auswahl (Kästchen) im Dialog */
.af-sg-mreq { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7a8a; font-size: 11px; }
.af-sg-mat { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.af-sg-mo { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line, #dfe7ee); background: #fff; border-radius: 10px; padding: 9px 10px; cursor: pointer; font-size: 12.5px; line-height: 1.3; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--navy); }
.af-sg-mo:has(input:checked) { border-color: #0070C0; background: #f2f8fd; box-shadow: 0 0 0 1px #0070C0 inset; }
.af-sg-mo input { margin-top: 2px; flex: none; }
.af-sg-mo b { display: block; font-weight: 700; }
.af-sg-mo small { display: block; color: #5f6f7e; font-size: 11.5px; margin-top: 2px; }
@media (max-width: 420px) { .af-sg-mat { grid-template-columns: 1fr; } }
.af-mess { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #f0f1f3; color: #555b63; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.af-mess .icon { width: 13px; height: 13px; }
.af-sg-mo.is-off { opacity: .45; cursor: not-allowed; }
.af-sg-mhint { display: block; margin-top: 6px; font-size: 11.5px; color: #8a5a00; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Nieten: weitere Unterteile aufklappbar */
.af-sg-more { margin: 2px 0 4px; }
.af-sg-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #0070C0; padding: 4px 2px; list-style: none; }
.af-sg-more > summary::-webkit-details-marker { display: none; }
.af-sg-more > summary::before { content: "▸ "; }
.af-sg-more[open] > summary::before { content: "▾ "; }
.af-sg-mhint[hidden] { display: none !important; }
.af-tool-add { border-radius: 12px; line-height: 1.25; }
.af-sg-mqhint { display: block; margin-top: 6px; font-size: 11.5px; color: #8a5a00; font-weight: 400; text-transform: none; letter-spacing: 0; }
.af-sg-mqhint[hidden] { display: none !important; }
.af-req { color: #c0392b; }
.af-sel.is-err { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.af-sg-c[data-sz][hidden] { display: none !important; }
.af-req { font-style: normal; }

/* Komplettsets: Inhalt im Dialog */
.af-ks { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line, #e3e8ee); border-radius: 12px; background: #fff; font-size: 12.5px; line-height: 1.45; color: #2b3440; max-height: 46vh; overflow: auto; }
.af-ks-t { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0070C0; }
.af-ks p { margin: 0 0 6px; }
.af-ks ul { margin: 0 0 8px; padding-left: 18px; }
.af-ks li { margin: 2px 0; }
.af-ks-sub { color: #55606d; }
.af-ks-qty b, .af-ks-h { font-weight: 700; color: #1d2733; }
.af-ks-h { margin: 8px 0 2px !important; }
.af-ks-h small, .af-ks-sz small { font-weight: 400; color: #7a8591; }
.af-ks-passt { padding: 6px 10px; border-radius: 8px; background: #eef6fc; }
.af-ks-passt span, .af-ks-empf span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #0070C0; }
.af-ks-sz span { white-space: nowrap; }
.af-ks-empf { color: #55606d; }
.af-ks .ks-warn { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: #fff7e6; color: #7a5200; }
.af-ks ul { list-style: disc; } .af-ks li { display: list-item; }
.af-ks .ks-warn { background: #f0f1f3; color: #555b63; }
.af-ks-q { font-style: normal; font-weight: 600; color: #0070C0; margin-left: 4px; font-size: 11.5px; }
.af-ks-passt { margin-bottom: 10px !important; }

.af-ks-img { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 1px solid var(--line, #e3e8ee); border-radius: 12px; background: #fff; cursor: zoom-in; overflow: hidden; }
.af-ks-img img { display: block; width: 100%; height: 220px; object-fit: contain; }
.af-ks-img.is-zoom { cursor: zoom-out; }
.af-ks-img.is-zoom img { height: auto; max-height: 80vh; }
.af-ks-img, .af-ks { flex-shrink: 0; }
.af-ks { max-height: none; overflow: visible; }
.af-sg-box:has(.af-ks) { width: min(600px, 100%); }
.af-ks-img img { height: 260px; }
.af-ks-tech { display: block; margin-top: 2px; font-size: 11.5px; color: #55606d; }
.af-ks-sub { font-size: 14px; font-weight: 700; color: #1d2733; line-height: 1.4; }
.af-ks-h { font-size: 14px; font-weight: 800; }
/* Komplettsets: mehr Luft */
.af-ks { padding: 16px 18px; line-height: 1.55; font-size: 13px; }
.af-ks-h { margin: 16px 0 6px !important; }
.af-ks-sub { margin-bottom: 12px !important; }
.af-ks ul { margin: 0 0 4px; }
.af-ks li { margin: 5px 0; }
.af-ks .ks-warn { margin-top: 10px; padding: 9px 12px; }
.af-ks-empf { margin-top: 18px !important; padding-top: 12px; border-top: 1px solid #edf0f3; }
.af-ks-sz { margin-top: 12px !important; }
.af-ks-passt { margin-bottom: 14px !important; }
.af-ks li:has(> .ks-warn) { list-style: none; margin-left: -18px; }
.af-sg-o em.af-stock, .af-sg-o em.af-nostock { display: inline-block; width: auto; margin: 4px 0 0; padding: 1px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; }
.af-sg-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
.af-sg-tags em { margin: 0 !important; }
.af-sg-o .af-sg-tags { display: flex !important; flex-direction: row; align-items: center; } .af-sg-o .af-sg-tags em { display: inline-flex !important; width: auto !important; flex: none; align-self: auto; }

.af-sg-xinfo { flex-shrink: 0; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #f6f8fa; font-size: 12px; color: #55606d; }
.af-sg-xinfo p { display: flex; gap: 6px; margin: 3px 0; }
.af-sg-xinfo .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; color: #0070C0; }
.af-suit { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 4px 0 2px; padding: 3px 10px; border-radius: 999px; background: #e7f1fa; color: #0070C0; font-size: 12px; font-weight: 700; }
.af-suit .icon { width: 13px; height: 13px; }
.af-suit { border-radius: 10px; line-height: 1.3; }

/* Werkzeuge: Auswahl «Passend für» als Liste */
.af-pick { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 6px; padding: 4px; border: 1px solid var(--line, #dfe5eb); border-radius: 10px; background: #fff; text-transform: none; letter-spacing: 0; }
.af-pick.is-err { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.af-pick-o { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 13px; text-align: left; color: #2b3440; cursor: pointer; }
.af-pick-o b { font-weight: 800; color: #1d2733; }
.af-pick-o span { color: #55606d; font-size: 12.5px; }
.af-pick-o:hover { background: #f3f8fc; }
.af-pick-o.is-on { border-color: #0070C0; background: #eaf3fb; }
.af-pick-o.is-on b { color: #0070C0; }
.af-sel[hidden] { display: none !important; } .af-pick-o span { font-weight: 400; }

.af-ks-badge { display: inline-block; margin: 0 0 8px !important; padding: 2px 10px; border-radius: 999px; background: #e3f6ec; color: #0e7c4a; font-size: 11.5px; font-weight: 700; }
.af-ks-spec { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.af-ks-spec th { text-align: left; font-weight: 600; color: #55606d; padding: 5px 8px 5px 0; border-bottom: 1px solid #edf0f3; width: 45%; vertical-align: top; }
.af-ks-spec td { padding: 5px 0; border-bottom: 1px solid #edf0f3; color: #1d2733; }

.af-vin { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.af-vin input { width: 120px; }
.af-vin em { font-style: normal; color: #55606d; text-transform: none; }
.af-vin-n { display: block; margin-top: 4px; font-size: 11.5px; color: #7a8591; text-transform: none; letter-spacing: 0; font-weight: 400; }
.af-sel.is-err { border-color: #c0392b; }
.af-pick-set { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #fff4e0; color: #8a5a00; font-style: normal; font-size: 11px; font-weight: 600; }
.af-pick-set .icon { width: 11px; height: 11px; }

/* «Passend für» – aufgeräumte Zeilen */
.af-pick { gap: 0; padding: 0; max-height: 300px; }
.af-pick-o { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef1f4; border-radius: 0; }
.af-pick-o:last-child { border-bottom: 0; }
.af-pick-o.is-on { border: 0; border-left: 3px solid #0070C0; padding-left: 9px; background: #eaf3fb; }
.af-pick-r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.af-pick-r b { font-size: 13.5px; font-weight: 800; color: #1d2733; }
.af-pick-d { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: #0070C0; white-space: nowrap; }
.af-pick-a { display: flex; flex-wrap: wrap; gap: 4px; }
.af-pick-a i { font-style: normal; font-size: 11.5px; color: #3c4652; background: #f1f4f7; border-radius: 6px; padding: 1px 7px; }
.af-pick-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.af-pick-k { font-style: normal; font-size: 11px; font-weight: 600; color: #8a5a00; }
.af-pick-o .af-pick-set { margin: 0; padding: 0; background: none; color: #8a5a00; font-size: 11px; font-weight: 600; font-style: normal; display: inline-flex; gap: 4px; align-items: center; }
.af-pick-o .af-pick-set .icon { width: 12px; height: 12px; }
.af-pick-k.af-pick-prym { padding: 1px 8px; border-radius: 999px; background: #eef2fb; color: #2a4a8a; }
.af-ks-tool { background: #f6f8fa !important; margin-top: 10px !important; }
.af-suit.af-suit-g { background: #e3f6ec; color: #0e7c4a; }
.af-ks .af-suit { display: inline-flex; margin: 0 0 8px; }
.af-venote { display: block; margin-top: 6px; font-size: 11px; line-height: 1.4; color: #7a8591; }
/* Dezenter Hinweis auf Individuelle Lösungen */
.af-il-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 500; color: #6b8091; text-decoration: none; white-space: nowrap; }
.af-il-link b { font-weight: 600; color: var(--blue); }
.af-il-link:hover b { text-decoration: underline; }
.af-il-none { display: flex; justify-content: center; margin: 10px 0 0; white-space: normal; }
@media (max-width: 700px) { .af-il-link { margin-left: 0; margin-top: 4px; white-space: normal; } }
#af-cat-link { white-space: nowrap; flex: none; }
.af-meta-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; margin-left: 12px; }
.af-meta-r .af-il-link { margin: 0; white-space: nowrap; }
.af-meta #af-cat-link, .af-meta-r .af-il-link { font-size: .875rem; font-weight: 700; color: var(--blue); }
.af-meta-r .af-il-link .icon { width: 14px; height: 14px; }
/* Links rechts: zwei kompakte Pillen nebeneinander */
.af-meta { gap: 12px; flex-wrap: wrap; }
.af-meta-r { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
.af-meta #af-cat-link, .af-meta-r .af-il-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #eef6fc; border: 1px solid #d6e8f6; color: #0070C0; font-size: .8125rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.af-meta #af-cat-link:hover, .af-meta-r .af-il-link:hover { background: #dcedfa; border-color: #b9d8f0; text-decoration: none; }
.af-meta #af-cat-link .icon, .af-meta-r .af-il-link .icon { width: 13px; height: 13px; }
.af-meta-r .af-il-link { background: #fff; }
.af-meta-r #af-il:empty { display: none; }
@media (max-width: 700px) { .af-meta-r { margin-left: 0; flex-wrap: wrap; } }
@media (max-width: 700px) { .af-meta-r { width: 100%; gap: 6px; } .af-meta #af-cat-link, .af-meta-r .af-il-link { padding: 6px 10px; font-size: .75rem; } }
/* Filter: Titel oben, alle Auswahlfelder auf einer Linie, Chips darunter */
.af-props { flex-wrap: wrap; }
.af-props .af-props-l { flex: 0 0 100%; order: 1; margin-bottom: -2px; }
.af-props .af-sel { flex: 1 1 0; min-width: 0 !important; order: 5; }
.af-props .af-sel > span { overflow: hidden; text-overflow: ellipsis; }
.af-props::after { content: ""; flex: 0 0 100%; height: 0; order: 9; }
@media (max-width: 640px) { .af-props .af-sel { flex: 1 1 calc(50% - 8px); } }
/* Links unter der Artikelzahl: linksbündig */
.af-meta { justify-content: flex-start; }
.af-meta > #af-count { flex: 0 0 100%; }
.af-meta-r { margin-left: 0 !important; }
.af-meta #af-cat-link { background: #fff; }
/* Wechsel Offerte ↔ Bestellung (Auswahl bleibt) */
.af-swm { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #d6e8f6; border-radius: 999px; background: #fff; }
.af-swm-l { padding: 0 6px 0 8px; font-size: .75rem; color: var(--muted); }
.af-swm button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 700; color: #0070C0; cursor: pointer; }
.af-swm button.is-on { background: #0070C0; color: #fff; }
.af-swm button:not(.is-on):hover { background: #eef6fc; }
.af-cart .af-swm { margin: 10px 0 0; }
.af-swm-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #f3f8fc; border: 1px solid #dfeaf4; font-size: .8125rem; color: var(--navy); }
.af-swm-box .af-swm-l { display: none; }
/* Nachbestellung Sortiment (?set=) */
.af-item-set { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; max-width: 100%; margin: 4px 0 6px; padding: 3px 9px; border-radius: 999px; background: #e8f2fb; color: #0070C0; font-size: .6875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; width: fit-content; }
.af-item-set > span { overflow: hidden; text-overflow: ellipsis; }
.af-item-set .icon { width: 12px; height: 12px; flex-shrink: 0; }
.af-item .af-item-mix { display: block; font-size: .78rem; font-weight: 500; line-height: 1.4; color: #4a5a6e; margin: 6px 0 2px; }
/* Farbübersicht */
.af-prop-col { background: #fff; }
.af-prop-col:hover { background: linear-gradient(90deg, #0070C0 0%, #1f8ad6 55%, #7fbbe6 100%); background-origin: border-box; color: #fff; border-color: transparent; }
.af-prop-col:hover .icon { color: #fff; }
.af-cv { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 42, 74, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.af-cv-box { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(15,42,74,.3); width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 22px 18px; }
.af-cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.af-cv-head strong { font-size: 1.125rem; color: var(--navy); }
.af-cv-x { border: 0; background: #f1f6fb; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.af-cv-x .icon { width: 18px; height: 18px; }
.af-cv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.af-cv-grid figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.af-cv-grid img { width: 100%; aspect-ratio: 9 / 10; object-fit: contain; background: #fff; padding: 6px; }
.af-cv-grid figcaption { padding: 8px 10px 10px; font-size: .75rem; line-height: 1.35; color: var(--text); border-top: 1px solid var(--line); background: #f8fbfd; }
.af-cv-grid figcaption b { display: block; color: var(--navy); font-size: .8125rem; }
.af-cv-note { margin: 12px 0 0; font-size: .75rem; color: var(--muted); }
@media (max-width: 760px) { .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-props .af-prop-col { order: 50; }
.af-cv-box[data-k="oe"] .af-cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-cv-box[data-k="oe"] .af-cv-grid img { aspect-ratio: 3 / 2; padding: 4px; }
@media (max-width: 760px) { .af-cv-box[data-k="oe"] .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-cv-box[data-k="nt"] .af-cv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-cv-box[data-k="nt"] .af-cv-grid img { aspect-ratio: 3 / 2; padding: 4px; }
@media (max-width: 760px) { .af-cv-box[data-k="nt"] .af-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.af-cv-sub { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 500; color: var(--muted); }
.af-cv-std { display: inline-block; margin-top: 5px; font-style: normal; font-size: .6875rem; font-weight: 700; color: #1a7f45; background: #e5f6ec; border: 1px solid #b9e3c8; border-radius: 99px; padding: 2px 8px; }
.af-cv-grid figcaption { flex: 1; }
.af-cv-std { color: var(--muted, #5b6b7b); background: #f1f4f7; border-color: #dde3ea; font-weight: 600; }
.af-cv-std { display: block; background: none; border: 0; padding: 0; border-radius: 0; margin-top: 4px; font-size: .75rem; font-weight: 500; color: var(--muted, #5b6b7b); }
.af-cv-std { color: var(--blue, #0070C0); font-weight: 600; }
/* Zeitangaben je Modus */
.af-mode .af-mode-time { display: flex; flex-direction: column; align-items: stretch; gap: 6px; justify-self: stretch; margin-top: 14px; padding: 10px 12px; background: #f4f8fc; border: 1px solid #e1ecf6; border-radius: 12px; font-size: .75rem; font-weight: 500; color: var(--text); white-space: normal; }
.af-mt-row { display: flex; align-items: baseline; gap: 6px; line-height: 1.35; }
.af-mt-row .icon { width: 13px; height: 13px; color: #0070C0; flex: none; position: relative; top: 2px; }
.af-mt-row b { font-weight: 700; color: var(--navy); white-space: nowrap; }
.af-mt-row b::after { content: ":"; }
.af-mt-note { padding-left: 19px; font-size: .6875rem; color: var(--muted, #5b6b7b); line-height: 1.35; }
.af-mode-time.af-mt-fast { background: #eef9f2; border-color: #c7ebd4; }
.af-mode-time.af-mt-fast .icon { color: #1a8a4a; }
.af-mt-fast .af-mt-note { color: #1a7f45; font-size: .75rem; }
.af-mt-fast .af-mt-note strong { font-weight: 700; }
.af-mode-fast { position: absolute; top: 18px; right: 52px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: #1a8a4a; border-radius: 99px; padding: 3px 9px; }
@media (max-width: 760px) { .af-mode-fast { position: static; justify-self: start; grid-column: 2; margin: 2px 0 4px; } }
.af-mt-row { display: block; position: relative; padding-left: 19px; }
.af-mt-row .icon { position: absolute; left: 0; top: 2px; }
.af-mt-row b { white-space: normal; margin-right: 3px; }
.af-mt-row b::after { content: none; }
.af-mode-fast { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; transform: translateY(-2px); }
@media (max-width: 760px) { .af-mode-fast { grid-column: auto; margin: 0 0 0 6px; } }
.af-mode[data-mode="bestellung"] .af-mode-t { padding-right: 34px; }
/* Zeitangaben – überarbeitetes Layout */
.af-mode { grid-template-rows: auto auto auto 1fr; }
.af-mode .af-mode-time { grid-column: 2; align-self: end; display: grid; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; }
.af-mt-row, .af-mt-row.af-mt-row { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; row-gap: 1px; padding-left: 0; position: static; align-items: start; }
.af-mt-row .icon { position: static; grid-row: 1 / 3; width: 15px; height: 15px; margin-top: 1px; }
.af-mt-l { grid-column: 2; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--muted, #5b6b7b); line-height: 1.3; }
.af-mt-v { grid-column: 2; font-size: .8125rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.af-mt-hl .af-mt-v, .af-mt-hl .af-mt-l { color: #1a7f45; }
.af-mt-note { padding: 6px 0 0 24px; border-top: 1px solid rgba(11,45,75,.08); font-size: .6875rem; color: var(--muted, #5b6b7b); line-height: 1.35; }
.af-mt-fast .af-mt-note { color: var(--muted, #5b6b7b); font-size: .6875rem; }
/* Zeitangaben – Variante 3: ruhige Kennzahlen-Leiste über die ganze Kartenbreite */
.af-mode { grid-template-rows: auto auto 1fr auto; }
.af-mode .af-mode-time, .af-mode .af-mode-time.af-mt-fast { grid-column: 1 / -1; grid-row: 4; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 20px 0 0; padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.af-mt-row, .af-mt-row.af-mt-row { display: flex; flex-direction: column; gap: 3px; padding: 0; }
.af-mt-row .icon { display: none; }
.af-mt-l { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7a89); line-height: 1.3; }
.af-mt-v { font-size: .9375rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
.af-mt-pill { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #eaf7ef; color: #17713d; font-size: .8125rem; font-weight: 700; }
.af-mt-pill .icon { width: 16px; height: 16px; flex: none; }
.af-mt-note, .af-mt-fast .af-mt-note { grid-column: 1 / -1; padding: 0; border: 0; font-size: .75rem; color: var(--muted, #6b7a89); line-height: 1.4; }
.af-mt-fast .af-mt-v { color: #17713d; }
.af-mode[data-mode="bestellung"] .af-mode-t { padding-right: 0; }
.af-mode-fast { position: absolute; top: -11px; left: 24px; margin: 0; transform: none; padding: 4px 11px; font-size: .6875rem; box-shadow: 0 3px 8px rgba(26,138,74,.25); }
@media (max-width: 760px) { .af-mode-fast { grid-column: auto; margin: 0; } }
/* Hinweisboxen: Anfrage/Offerte blau, Bestellung grün; «Bestätigung» grün, übrige Titel grau */
.af-ordernote b { color: #5b6b7a; }
.af-ordernote .af-on-ok > b { color: #5b6b7a; }
.af-ordernote.af-on-blue { background: #eef6fc; border-color: #c4def2; }
.af-ordernote.af-on-blue > strong { color: #0070C0; }
.af-ordernote.af-on-blue li::marker, .af-ordernote.af-on-blue ol.af-on-steps li::marker { color: #0070C0; }
.af-send-note { display: none; }
.af-mode { overflow: visible; }
.af-mode .af-mode-time, .af-mode .af-mode-time.af-mt-fast { grid-template-columns: max-content 1fr; column-gap: 28px; }
.af-mt-v { white-space: nowrap; }
.af-mode-fast { right: auto; width: auto; max-width: max-content; white-space: nowrap; }
/* Offerte: Zusatzhinweise klein und grau */
.af-ordernote[data-show="offerte"] > ul > li:not(.af-on-ok), .af-ordernote[data-show="bestellung"] > ul > li:not(.af-on-ok) { font-size: .8125rem; color: #6b7a89; }
/* Weitere Informationen: neutrales Kästchen, grau und kursiv */
.af-ordernote.af-on-more { background: #f6f7f9; border-color: #e3e7ec; margin-top: 10px; font-style: italic; color: #6b7a89; font-size: .8125rem; }
.af-ordernote.af-on-more > strong { color: #5b6b7a; font-style: normal; font-size: .8125rem; }
.af-ordernote.af-on-more li, .af-ordernote.af-on-more > ul > li:not(.af-on-ok) { color: #6b7a89; font-size: .8125rem; }
.af-ordernote.af-on-more li::marker, .af-ordernote.af-on-more ol.af-on-steps li::marker { color: #9aa6b2; }
/* Zeitangaben – zentriert: Hauptwert gross, Lieferzeitraum klein darunter */
.af-mode .af-mode-time, .af-mode .af-mode-time.af-mt-fast { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.af-mode-time > .af-mt-row:first-child { order: 1; align-items: center; gap: 2px; }
.af-mode-time > .af-mt-row:first-child .af-mt-l { font-size: .75rem; }
.af-mode-time > .af-mt-row:first-child .af-mt-v { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }
.af-mode-time > .af-mt-pill { order: 2; align-self: stretch; justify-content: center; font-size: 1rem; padding: 10px 14px; }
.af-mode-time > .af-mt-pill .icon { width: 18px; height: 18px; }
.af-mode-time > .af-mt-row + .af-mt-row { order: 3; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; }
.af-mode-time > .af-mt-row + .af-mt-row .af-mt-l { font-size: .6875rem; }
.af-mode-time > .af-mt-row + .af-mt-row .af-mt-v { font-size: .8125rem; font-weight: 600; color: var(--navy); }
.af-mode-time > .af-mt-row + .af-mt-row .af-mt-l::after { content: ":"; }
.af-mode-time > .af-mt-note { order: 4; text-align: center; }
.af-mode-time > .af-mt-pill { font-size: .9375rem; white-space: nowrap; gap: 6px; padding: 9px 10px; }
.af-mode-time > .af-mt-pill { white-space: normal; text-align: center; text-wrap: balance; }
.af-mode-time > .af-mt-pill { display: block; } .af-mode-time > .af-mt-pill .icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
/* Weitere Informationen: ohne Kästchen, nicht kursiv */
.af-ordernote.af-on-more { background: none; border: 0; padding: 0 4px; font-style: normal; }
.af-ordernote.af-on-more, .af-ordernote.af-on-more > strong, .af-ordernote.af-on-more li, .af-ordernote.af-on-more ol.af-on-steps li, .af-ordernote.af-on-more b { font-size: .8125rem !important; }
/* Weitere Informationen innerhalb der farbigen Box, klein und grau */
.af-ordernote .af-on-more { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(11,45,75,.1); font-size: .8125rem; color: #6b7a89; }
.af-ordernote .af-on-more > strong { display: block; margin-bottom: 2px; font-size: .8125rem; color: #5b6b7a; }
.af-ordernote .af-on-more li, .af-ordernote .af-on-more ol.af-on-steps li, .af-ordernote .af-on-more b { font-size: .8125rem; color: #6b7a89; }
.af-ordernote .af-on-more b { color: #5b6b7a; }
/* Modus-Karten: Zeitangaben kompakter mit Icons */
.af-mode-time > .af-mt-row .icon { display: inline-block; position: static; width: 15px; height: 15px; vertical-align: -2px; color: #0070C0; flex: none; }
.af-mt-fast > .af-mt-row .icon { color: #17713d; }
.af-mode-time > .af-mt-row:first-child { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; }
.af-mode-time > .af-mt-row:first-child .af-mt-l { flex-basis: 100%; text-align: center; }
.af-mode-time > .af-mt-row:first-child .icon { width: 18px; height: 18px; }
.af-mode-time > .af-mt-row:first-child .af-mt-v { font-size: 1.125rem; }
.af-mode-time > .af-mt-row + .af-mt-row { align-items: center; }
.af-mode-time > .af-mt-pill { font-size: .875rem; padding: 7px 10px; }
.af-mode-time > .af-mt-pill .icon { width: 16px; height: 16px; }
.af-mode-time > .af-mt-row:first-child .af-mt-l { order: -1; }
.af-mode-time > .af-mt-row + .af-mt-row .af-mt-v { flex-basis: 100%; text-align: center; } .af-mode-time > .af-mt-row + .af-mt-row .af-mt-l::after { content: none; }
.af-mode-time > .af-mt-row:first-child .af-mt-v { font-size: .9375rem; font-weight: 600; letter-spacing: 0; } .af-mode-time > .af-mt-row:first-child .icon { width: 15px; height: 15px; }
.af-mode-time > .af-mt-pill { background: none; padding: 0; border-radius: 0; font-size: .8125rem; font-weight: 600; color: #17713d; } .af-mode-time > .af-mt-pill .icon { width: 14px; height: 14px; }
/* Umschalter Offerte/Bestellung: neutrales Grau, Bestellung aktiv grün */
.af-swm-box { background: #f5f6f8; border-color: #e3e7ec; color: #4a5a6a; }
.af-swm-box .af-swm { border-color: #e3e7ec; }
.af-swm button[data-swm="bestellung"] { color: #17713d; }
.af-swm button[data-swm="bestellung"].is-on { background: #1a8a4a; color: #fff; }
.af-swm button[data-swm="bestellung"]:not(.is-on):hover { background: #eaf7ef; }
.af-mt-fast > .af-mt-row .af-mt-v, .af-mode-time.af-mt-fast .af-mt-v { color: var(--navy); } .af-mt-fast > .af-mt-row .icon { color: #0070C0; }
.af-mode-time > .af-mt-pill { font-size: .9375rem; font-weight: 600; } .af-mode-time > .af-mt-pill .icon { width: 15px; height: 15px; }
.af-mode-time > .af-mt-pill { color: #12965a; }
/* Zeitangaben insgesamt etwas kleiner */
.af-mode .af-mode-time, .af-mode .af-mode-time.af-mt-fast { gap: 7px; margin-top: 16px; padding-top: 12px; }
.af-mode-time > .af-mt-row:first-child .af-mt-l, .af-mode-time > .af-mt-row + .af-mt-row .af-mt-l { font-size: .625rem; }
.af-mode-time > .af-mt-row:first-child .af-mt-v, .af-mode-time > .af-mt-pill { font-size: .875rem; }
.af-mode-time > .af-mt-row + .af-mt-row .af-mt-v { font-size: .75rem; }
.af-mode-time > .af-mt-row .icon, .af-mode-time > .af-mt-row:first-child .icon, .af-mode-time > .af-mt-pill .icon { width: 13px; height: 13px; }
.af-mode-time > .af-mt-pill { order: 4; font-size: .75rem; margin-top: -4px; } .af-mode-time > .af-mt-pill .icon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.af-mode-fast { font-size: .8125rem; font-weight: 500; padding: 4px 12px; top: -13px; letter-spacing: 0; }
.af-mode-fast { font-size: .875rem; padding: 4px 13px; top: -14px; }
.af-mode-fast { font-size: .75rem; padding: 3px 11px; top: -12px; }
/* i18n-start */
html[lang^="en"] .af-tile.in-cart::after { content: "In your selection"; }
html[lang^="fr"] .af-tile.in-cart::after { content: "Dans la sélection"; }
html[lang^="it"] .af-tile.in-cart::after { content: "Nella selezione"; }
/* i18n-end */