/* studibedarf.de – Shop (NextOMS). Schlank, ohne Framework. Farben wie bisher: Blau #2582d3, Navy #374973 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
:root { --brand: #1f74c0; --brand-d: #1a5f9e; --navy: #374973; --ink: #1f2933; --mut: #66727f; --line: #e3e7ec; --bg: #ffffff; --soft: #f4f6f9; --ok: #23803f; --warn: #a35800; --bad: #d63b30;
  --r: 14px; --font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); }
img { max-width: 100%; height: auto; }
a { color: var(--brand-d); text-decoration: none; } a:where(:not(.btn)):hover { color: var(--navy); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pad { padding-top: 28px; padding-bottom: 48px; } .center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 8px; }
.h1 { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -.015em; color: var(--navy); }
h2:not(.legacy *) { color: var(--navy); font-size: 21px; margin: 0 0 12px; } .h2 { color: var(--navy); font-size: 21px; margin: 0 0 12px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-d); margin-bottom: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; background: var(--soft); } .pill.ok { background: #e7f6ec; color: #1f7a40; }
.small { font-size: 13px; } .muted { color: var(--mut); } .ok { color: var(--ok); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px 20px; background: var(--brand); color: #fff; font: 600 15px var(--font); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: var(--brand-d); } .btn:active { transform: scale(.98); } .btn:disabled { background: #e3e7ec; color: #59636e; cursor: default; transform: none; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; margin-left: 6px; }
.btn.sec { background: var(--soft); color: var(--ink); border: 1px solid var(--line); } .btn.big { padding: 14px 24px; font-size: 16px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.testbar { background: #fff4d6; color: #7a5200; text-align: center; font-size: 13px; padding: 6px 12px; }
/* Kopf */
.topbar { background: var(--navy); color: #e8edf6; font-size: 13px; text-align: center; padding: 7px 0; }
.hd { position: sticky; top: 0; z-index: 30; background: #fff; transition: box-shadow .2s; }
.hd.scrolled { box-shadow: 0 6px 24px -14px rgba(31,41,51,.35); }
.hd-in { display: flex; align-items: center; gap: 28px; height: 78px; }
.logo { flex: none; display: block; } .logo img { width: 280px; height: auto; display: block; }
.search { flex: 1; display: flex; max-width: 560px; margin-left: auto; background: var(--soft); border: 1px solid transparent; border-radius: 12px; overflow: hidden; transition: border-color .15s, background .15s; }
.search:focus-within { background: #fff; border-color: var(--brand); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 16px; font: 15px var(--font); color: var(--ink); outline: none; }
.search button { border: 0; background: transparent; padding: 0 16px; color: var(--mut); cursor: pointer; font-size: 19px; display: flex; align-items: center; }
.cartbtn { position: relative; color: var(--ink); padding: 10px; font-size: 24px; display: flex; border-radius: 12px; } .cartbtn:hover { background: var(--soft); }
.cartbtn .cnt { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; border-radius: 99px; background: var(--brand); color: #fff; font: 700 11px/19px var(--font); text-align: center; padding: 0 5px; }
.burger { display: none; border: 0; background: none; cursor: pointer; color: var(--ink); font-size: 26px; padding: 8px; margin-left: -8px; border-radius: 10px; }
.nav-hd, .scrim { display: none; }
.nav > ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0 auto; padding-top: 0; padding-bottom: 6px; }
.nav li { position: relative; }
.nav > ul > li > a { display: flex; align-items: center; gap: 6px; padding: 9px 13px; color: var(--ink); font-weight: 500; font-size: 15px; border-radius: 10px; transition: background .15s, color .15s; }
.nav > ul > li > a:hover, .nav li.has:hover > a, .nav li.has:focus-within > a { background: var(--soft); color: var(--brand-d); }
.nav li.hl { margin-left: auto; } .nav li.hl + li.hl { margin-left: 0; }
.nav li.hl > a { color: var(--brand-d); font-weight: 600; }
.nav .dd { display: none; position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border-radius: 14px; box-shadow: 0 22px 50px -20px rgba(31,41,51,.35), 0 0 0 1px rgba(31,41,51,.06); padding: 8px; z-index: 5; }
.nav li.has:hover .dd, .nav li.has:focus-within .dd { display: block; }
.nav .dd ul { list-style: none; margin: 0; padding: 0; } .nav .dd a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); font-size: 14.5px; } .nav .dd a:hover { background: var(--soft); color: var(--brand-d); }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
@media (max-width: 960px) {
  .hd-in { height: 62px; gap: 10px; } .burger { display: flex; } .logo img { width: 190px; }
  .hd-in .search { order: 9; flex-basis: 100%; max-width: none; margin: 0; }
  .hd-in { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 10px; row-gap: 8px; } .cartbtn { margin-left: auto; }
  .nav { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); background: #fff; transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 20px 0 50px -20px rgba(0,0,0,.35); }
  .nav.open { transform: none; }
  .nav-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; font-size: 17px; }
  .nav-x { border: 0; background: var(--soft); border-radius: 10px; font-size: 20px; padding: 8px; display: flex; cursor: pointer; color: var(--ink); }
  .nav > ul { display: block; padding: 0 8px 24px; }
  .nav > ul > li > a { padding: 13px 12px; font-size: 16px; font-weight: 600; }
  .nav li.hl { margin: 0; }
  .nav .dd { display: block; position: static; box-shadow: none; padding: 0 0 6px 10px; min-width: 0; }
  .nav .dd a { padding: 9px 12px; color: var(--mut); }
  .scrim { position: fixed; inset: 0; z-index: 70; background: rgba(15,23,42,.45); }
  .scrim:not([hidden]) { display: block; }
  html.menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
/* Brotkrumen, Raster, Kacheln */
.crumbs { font-size: 13px; color: var(--mut); padding-top: 14px; padding-bottom: 6px; } .crumbs a { color: var(--mut); text-decoration: none; } .crumbs a:hover { color: var(--brand); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 18px 0 40px; }
.slider { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 18px; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory; }
.slider .card { scroll-snap-align: start; }
.card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; transition: box-shadow .2s, border-color .2s; min-width: 0; }
.card:hover { color: var(--ink); border-color: #cfd7e1; }
.card:hover { box-shadow: 0 14px 30px -20px rgba(31,41,51,.35); } .card:hover .cn { color: var(--brand-d); }
.card .ci { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; overflow: hidden; }
.card .ci img { width: 100%; height: 100%; object-fit: contain; }
.card .cn { font-weight: 600; font-size: 15px; line-height: 1.35; } .card .cp { font-weight: 700; color: var(--navy); margin-top: auto; } .card .cp small { font-weight: 500; color: var(--mut); } .card s { color: var(--mut); font-weight: 400; }
/* Produktseite */
.pd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; padding-top: 8px; padding-bottom: 24px; }
@media (max-width: 860px) { .pd { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.gmain { background: #fff; border: 1px solid var(--line); border-radius: 18px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gmain img { width: 100%; height: 100%; object-fit: contain; }
.gthumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; } .gthumbs button { flex: none; width: 72px; height: 72px; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 4px; cursor: pointer; }
.gthumbs button.on { border-color: var(--brand); } .gthumbs img { width: 100%; height: 100%; object-fit: contain; }
.buy .nr { color: var(--mut); font-size: 13px; margin-bottom: 12px; }
.buy .price { font-size: 30px; font-weight: 700; color: var(--navy); } .buy .price small { font-size: 16px; color: var(--mut); font-weight: 500; } .buy .price s { font-size: 17px; color: var(--mut); font-weight: 400; }
.vat { font-size: 13px; color: var(--mut); margin-bottom: 16px; } .vat a { color: var(--mut); border-bottom: 1px dotted currentColor; }
.tiers { border-collapse: collapse; margin: 0 0 18px; font-size: 14px; min-width: 240px; } .tiers caption { text-align: left; font-size: 13px; color: var(--mut); padding-bottom: 6px; }
.tiers th, .tiers td { border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; text-align: left; font-variant-numeric: tabular-nums; } .tiers th { font-weight: 600; font-size: 12.5px; color: var(--mut); }
.opt { border: 0; padding: 0; margin: 0 0 14px; } .opt legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.opt button { border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; margin: 0 6px 6px 0; font: 600 14px var(--font); cursor: pointer; min-width: 48px; }
.opt button.on { border-color: var(--brand); background: #eaf3fc; color: var(--brand-d); } .opt button.na { opacity: .35; text-decoration: line-through; }
.avail { font-size: 14px; margin: 6px 0 14px; font-weight: 600; } .avail::before { content: "●"; margin-right: 6px; } .avail.ok { color: var(--ok); } .avail.low { color: var(--warn); } .avail.out { color: var(--bad); }
.addrow { display: flex; gap: 10px; } .qty input { width: 76px; height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; font: 600 16px var(--font); text-align: center; }
.addrow .btn { flex: 1; }
.usp { list-style: none; padding: 0; margin: 18px 0 0; font-size: 14px; color: var(--mut); } .usp li::before { content: "✓"; color: var(--ok); margin-right: 8px; font-weight: 700; }
.pdx { padding-top: 12px; padding-bottom: 28px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.desc .rich { max-width: 80ch; } .props table { border-collapse: collapse; font-size: 14.5px; } .props th, .props td { text-align: left; padding: 8px 18px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .props th { color: var(--mut); font-weight: 600; }
/* Warenkorb */
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } @media (max-width: 860px) { .cgrid { grid-template-columns: minmax(0, 1fr); } }
.clines { list-style: none; margin: 0; padding: 0; } .clines li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cimg img { border-radius: 10px; background: #fff; border: 1px solid var(--line); object-fit: contain; } .cinfo { display: flex; flex-direction: column; font-size: 14px; color: var(--mut); min-width: 0; } .cinfo b { color: var(--ink); font-size: 15px; } .cinfo a { text-decoration: none; }
.cinfo em { font-style: normal; font-weight: 600; } .cqty { display: flex; align-items: center; gap: 8px; } .cqty button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: 600 15px var(--font); }
.csum { font-weight: 700; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .clines li { grid-template-columns: 56px minmax(0, 1fr); } .cqty, .csum { grid-column: 2; } .csum { text-align: left; } }
.ctot { background: var(--soft); border-radius: 18px; padding: 20px; display: grid; gap: 8px; position: sticky; top: 130px; }
.ctot > div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; } .ctot > div.big { font-size: 21px; font-weight: 700; color: var(--navy); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ctot .btn { margin-top: 8px; }
/* Fuß */
.ft { margin-top: 40px; background: #1f2a3f; color: #c9d3e3; font-size: 14.5px; }
.ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; padding-top: 40px; padding-bottom: 28px; }
.ft h3 { color: #fff; font-size: 15px; margin: 0 0 10px; } .ft ul { list-style: none; margin: 0; padding: 0; } .ft li { margin: 6px 0; } .ft a { color: #c9d3e3; text-decoration: none; } .ft a:hover { color: #fff; }
.ft .pay { display: flex; flex-wrap: wrap; gap: 6px; } .ft .pay img { background: #fff; border-radius: 6px; padding: 3px; }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
.linkbtn { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } .linkbtn:hover { color: var(--navy, #16325c); text-decoration: underline; } .ft .linkbtn:hover, .tb .linkbtn:hover { color: #fff; }
/* Hinweise */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14.5px; opacity: 0; transition: .25s; z-index: 60; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); } .toast a { color: #fff; font-weight: 700; margin-left: 8px; }
.consent { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.4); padding: 18px; font-size: 14px; }
.consent p { margin: 0 0 10px; } .consent label { margin-right: 14px; } .consent .cbtn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .consent .btn { padding: 9px 14px; font-size: 14px; }
/* übernommene Inhalte: Abstände an das neue Layout angleichen */
.legacy { overflow-x: hidden; } .legacy img { height: auto; }
/* Bundles */
.bdl { padding-top: 6px; padding-bottom: 48px; } .bdl-hd { max-width: 760px; margin-bottom: 22px; } .bdl-intro { color: var(--mut); margin-bottom: 12px; }
.bdl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } @media (max-width: 860px) { .bdl-grid { grid-template-columns: minmax(0, 1fr); } }
.bdl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bdl-item { display: grid; grid-template-columns: auto 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; transition: opacity .2s, border-color .2s; }
.bdl-item:not(.on) { opacity: .55; } .bdl-item.on { border-color: #cfd7e1; }
.bdl-check input { width: 20px; height: 20px; accent-color: var(--brand); }
.bdl-img img { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; }
.bdl-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bdl-t a { color: var(--ink); } .bdl-t a:hover { color: var(--brand-d); }
.bdl-var select { margin-top: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 500 14px var(--font); background: #fff; max-width: 260px; }
.bdl-var { display: flex; flex-direction: column; }
.bdl-p { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .bdl-item { grid-template-columns: auto 64px minmax(0, 1fr); } .bdl-img img { width: 64px; height: 64px; } .bdl-p { grid-column: 3; } }
.bdl-sum { background: var(--soft); border-radius: 18px; padding: 20px; display: grid; gap: 8px; position: sticky; top: 140px; }
.bdl-sum > div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; } .bdl-sum .ok { color: #1f7a40; font-weight: 600; }
.bdl-sum .big { font-size: 22px; font-weight: 700; color: var(--navy); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; } .bdl-sum p { margin: 0; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.bcard { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; color: var(--ink); transition: box-shadow .2s; }
.bcard:hover { color: var(--ink); box-shadow: 0 14px 30px -20px rgba(31,41,51,.35); } .bcard b { font-size: 17px; }
.bimgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .bimgs img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.bcard .more { margin-top: auto; color: var(--brand-d); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* Startseite mobil */
.home-mobile { padding: 0 16px 24px; }
.mh-hero { margin: 12px -4px 8px; padding: 26px 20px 22px; border-radius: 22px; background: linear-gradient(150deg, #eaf3fc 0%, #f6f9fd 60%, #fff 100%); }
.mh-hero .mh-t { margin: 0 0 10px; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; color: var(--navy); }
.mh-hero p { margin: 0 0 18px; color: #4a5562; }
.mh-cta { display: flex; flex-wrap: wrap; gap: 8px; } .mh-cta .btn { flex: 1 1 auto; }
.mh-sec { margin-top: 26px; }
.mh-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-cat { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: #fff; }
.mh-cat b { font-size: 14px; font-weight: 600; line-height: 1.3; } .mh-ci { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; }
.mh-ci img { width: 100%; height: 100%; object-fit: contain; }
.mh-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.mh-scroll > * { scroll-snap-align: start; }
.mh-cfg, .mh-fs { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; color: #fff; background: var(--navy); }
.mh-cfg:hover, .mh-fs:hover { color: #fff; }
.mh-cfg > span:nth-child(2), .mh-fs > span { display: flex; flex-direction: column; gap: 2px; flex: 1; } .mh-cfg b, .mh-fs b { font-size: 16px; } .mh-cfg span span, .mh-fs span span { font-size: 14px; color: #d9e1ee; }
.mh-cfg-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 22px; flex: none; }
.mh-fs { background: #eef5ec; color: var(--ink); } .mh-fs:hover { color: var(--ink); } .mh-fs span span { color: #4a5562; } .mh-fs > .ico { font-size: 26px; color: #1f7a40; }
.mh-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mh-usp li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; } .mh-usp .ico { font-size: 20px; color: var(--brand-d); }
.cat-intro { max-width: 80ch; color: #4a5562; margin-bottom: 8px; }
/* ===== 0.32: Kopfleiste mit Icons ===== */
.topbar { padding: 0; font-size: 12.5px; }
.tb-in { display: flex; justify-content: space-between; gap: 18px; padding-top: 7px; padding-bottom: 7px; overflow: hidden; }
.tb-it { display: inline-flex; align-items: center; gap: 7px; color: #e8edf6; white-space: nowrap; } a.tb-it:hover { color: #fff; } .tb-it .ico { font-size: 15px; opacity: .9; }
@media (max-width: 960px) { .tb-in { justify-content: center; } .tb-it:not(.tb-1) { display: none; } }
/* Warenkorb-Symbol leuchtet auf */
.cartbtn.bump { animation: bump .7s cubic-bezier(.3,1.6,.5,1); } .cartbtn.bump .cnt { animation: glow 1s ease; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.95); } 100% { transform: none; } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(31,116,192,.6); } 100% { box-shadow: 0 0 0 14px rgba(31,116,192,0); } }
/* Mini-Warenkorb */
.minicart { position: fixed; inset: 0; z-index: 100001; }
.mc-scrim { position: absolute; inset: 0; background: rgba(15,23,42,.4); opacity: 0; transition: opacity .25s; }
.mc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); }
.minicart.open .mc-scrim { opacity: 1; } .minicart.open .mc-panel { transform: none; }
.mc-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .mc-hd b { display: inline-flex; gap: 8px; align-items: center; color: #1f7a40; }
.mc-body { flex: 1; overflow-y: auto; padding: 8px 18px; }
.mc-it { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mc-it img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; } .mc-it > span { display: flex; flex-direction: column; min-width: 0; } .mc-it small { color: var(--mut); }
.mc-sum { display: flex; justify-content: space-between; padding: 14px 0; font-size: 16px; }
.mc-ft { display: grid; gap: 8px; padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
/* Fenster */
.modal { position: fixed; inset: 0; z-index: 100002; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s; }
.modal.open { opacity: 1; } .modal-box { background: #fff; border-radius: 20px; width: min(980px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px); transition: transform .25s; }
.modal.open .modal-box { transform: none; } .modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .modal-body { overflow-y: auto; padding: 8px 18px 18px; }
/* Galerie */
.gmain { position: relative; } .gmain img.fade { animation: gfade .3s ease; } @keyframes gfade { from { opacity: .3; } to { opacity: 1; } }
.gnav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 4px 16px -6px rgba(0,0,0,.35); color: var(--ink); font-size: 20px; display: grid; place-items: center; cursor: pointer; transition: transform .15s, background .15s; }
.gnav:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .gnav.prev { left: 12px; } .gnav.prev .ico { transform: rotate(180deg); } .gnav.next { right: 12px; }
.gcount { position: absolute; bottom: 10px; right: 12px; background: rgba(31,41,51,.7); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 99px; }
.gthumbs { flex-wrap: wrap; overflow: visible; } .gthumbs button { width: 64px; height: 64px; transition: border-color .15s; } .gthumbs button:hover { border-color: #b8c4d2; }
@media (max-width: 860px) { .gthumbs { display: none; } }
/* Kacheln, Sterne, Abzeichen */
.ci { position: relative; } .badge { position: absolute; top: 8px; left: 8px; background: #b42318; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mut); }
.st { position: relative; display: inline-block; letter-spacing: 1px; color: #d7dde4; font-size: 14px; line-height: 1; }
.st::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--r); overflow: hidden; color: #b26a00; white-space: nowrap; }
/* Liste: Sortierung, Zwischenüberschriften */
.lst-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 -6px; } .lst-bar select { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: 500 14px var(--font); background: #fff; }
.grp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } .grp-nav a { background: var(--soft); color: var(--ink); border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 500; } .grp-nav a:hover { background: #e6edf6; color: var(--brand-d); }
.grp-h { margin: 34px 0 -4px; font-size: 22px; color: var(--navy); scroll-margin-top: 150px; } .grp-h small { font-size: 14px; color: var(--mut); font-weight: 500; }
/* Textmarker (wie auf der Startseite) */
.mark { background-image: linear-gradient(transparent 58%, rgba(255,213,74,.6) 58%, rgba(255,213,74,.6) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 .08em; }
html.anim .mark { background-size: 0% 100%; transition: background-size 1s cubic-bezier(.3,.7,.3,1) .15s; } html.anim .mark.in { background-size: 100% 100%; }
/* Einblenden beim Scrollen */
html.anim .reveal, html.anim .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.anim .reveal.in, html.anim .stagger > .in { opacity: 1; transform: none; }
/* Schieberegler mit Pfeilen, ohne Balken */
.slider-wrap { position: relative; } .slider, .mh-scroll, .gthumbs, .kf-steps { scrollbar-width: none; } .slider::-webkit-scrollbar, .mh-scroll::-webkit-scrollbar { display: none; }
.sl-btn { position: absolute; top: 38%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--ink); }
.sl-btn.prev { left: -14px; } .sl-btn.prev .ico { transform: rotate(180deg); } .sl-btn.next { right: -14px; } @media (max-width: 860px) { .sl-btn { display: none; } }
/* Lieferprognose */
.dlv { margin: 16px 0 4px; border: 1px solid #f1d27a; background: #fffaeb; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; }
.dlv-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .dlv-dhl { background: #ffcc00; color: #d40511; font: italic 800 13px/1 var(--font); padding: 4px 7px; border-radius: 5px; letter-spacing: .02em; }
.dlv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.dlv-steps::before { content: ""; position: absolute; top: 15px; left: 16%; right: 16%; height: 3px; background: linear-gradient(90deg, #23803f 0 50%, #e5d39b 50%); border-radius: 3px; }
.dlv-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; } .dlv-steps b { font-size: 12.5px; } .dlv-steps span:not(.dot) { font-size: 12.5px; color: #5a4a12; }
.dlv-steps .dot { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #e5d39b; display: grid; place-items: center; font-size: 15px; color: #8a6d00; } .dlv-steps li.on .dot { background: #23803f; border-color: #23803f; color: #fff; }
.dlv-cd { margin: 10px 0 0; display: flex; gap: 6px; align-items: center; color: #5a4a12; font-size: 13px; }
/* Warenkorb: Sets, Versand */
.cset { grid-template-columns: 72px minmax(0, 1fr) auto auto; } .cset .cinfo b { color: var(--ink); }
.cset-parts summary { cursor: pointer; color: var(--brand-d); font-size: 13.5px; } .cset-parts ul { list-style: none; margin: 6px 0; padding: 0 0 0 2px; font-size: 13px; } .cset-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.cset-act { display: flex; gap: 14px; margin-top: 6px; font-size: 13.5px; } .cset-act a, .cset-act .linkbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-d); } .cset-act .linkbtn:hover { color: var(--bad); }
.clines li.out { opacity: .3; transition: opacity .2s; }
.shipsel { border: 0; margin: 4px 0; padding: 0; display: grid; gap: 6px; } .shipsel legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.shipsel label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; cursor: pointer; }
.shipsel input { accent-color: var(--brand); margin-top: 3px; }
/* Artikelseite: Hinweise, Bewertungen, Kaufleiste */
.opt button.sale { border-style: dashed; } .optnote { margin: -4px 0 12px; font-size: 13.5px; color: var(--warn); font-weight: 600; } .warn { color: var(--warn); }
.pd-extra { margin-top: 8px; }
.rv { max-width: 860px; } .rv-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rv-sum > b { font-size: 34px; color: var(--navy); }
.rv-list { display: grid; gap: 12px; } .rv-it { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; } .rv-it p { margin: 6px 0; } .rv-a { background: var(--soft); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.rv-form { margin-top: 16px; } .rv-form summary { list-style: none; display: inline-flex; } .rv-form summary::-webkit-details-marker { display: none; }
.rv-form form { display: grid; gap: 10px; max-width: 520px; margin-top: 12px; } .rv-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.rv-form input:not([type=radio]), .rv-form textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 15px var(--font); }
.rv-stars { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .rv-stars legend { width: 100%; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.rv-stars input { position: absolute; opacity: 0; } .rv-stars label { font-size: 30px; color: #d7dde4; cursor: pointer; transition: color .1s, transform .1s; }
.rv-stars input:checked ~ label, .rv-stars label:hover, .rv-stars label:hover ~ label { color: #c77c00; } .rv-stars input:focus-visible + label { outline: 2px solid var(--brand); }
.hp { position: absolute; left: -9999px; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.3);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation: up .25s ease; }
.buybar div { display: flex; flex-direction: column; min-width: 0; } .buybar b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .buybar span { font-weight: 700; color: var(--navy); }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
/* Fußzeile: Versand */
.ft-h2 { margin-top: 18px !important; } .ship-logos { display: flex; align-items: center; gap: 10px; color: #c9d3e3; margin-bottom: 8px; font-size: 13.5px; } .ship-logos img { background: #fff; border-radius: 6px; padding: 3px; height: auto; }
.ship-logos .spd { background: #fff; color: var(--navy); border-radius: 6px; width: 40px; height: 30px; display: grid; place-items: center; font-size: 18px; }
/* Bestickung: Formular */
.stick-embed { background: linear-gradient(180deg, #f2f6fb, #fff); padding: 40px 0 20px; margin-top: 30px; scroll-margin-top: 120px; }
/* Startseite mobil: Startbild */
.mh-hero.has-img { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.95) 55%), var(--hero) center top / cover no-repeat; padding-top: 150px; }
@media (prefers-reduced-motion: reduce) { .minicart *, .modal, .modal-box, .cartbtn.bump, .buybar { animation: none !important; transition: none !important; } }
/* Preise mit Sternchen (Erklärung: Fußzeile/Tooltip) */
.ast::after { content: "*"; font-size: .72em; vertical-align: super; margin-left: 1px; font-weight: 600; }
.kf-pr::after, .kf-sum .tot span:last-child::after, #kf-bartot::after { content: "*"; font-size: .72em; vertical-align: super; margin-left: 1px; }
/* Kurzansicht */
.qv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; padding: 10px 0; } @media (max-width: 760px) { .qv { grid-template-columns: 1fr; } }
.qv-img > img { width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .qv-th { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .qv-th img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.qv .price { font-size: 24px; font-weight: 700; color: var(--navy); margin: 8px 0; } .qv .rich { max-height: 260px; overflow: auto; margin-bottom: 12px; }
/* Ankündigungsleiste */
.ann { font-size: 14px; font-weight: 600; } .ann-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 9px; padding-bottom: 9px; text-align: center; }
.ann a, .ann span { color: inherit; } .ann a:hover { text-decoration: none; opacity: .9; } .ann-x { border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; font-size: 14px; margin-left: auto; } .ann-in > :first-child { margin-left: auto; }
.ann-blau { background: #1f74c0; color: #fff; } .ann-gruen { background: #1d7a43; color: #fff; } .ann-gold { background: #ffe08a; color: #3d2e00; } .ann-rot { background: #b42318; color: #fff; } .ann-dunkel { background: #1f2a3f; color: #fff; }
/* Chat-Assistent (nur Desktop) */
.chat { position: fixed; right: 22px; bottom: 22px; z-index: 9989; } @media (max-width: 960px) { .chat { display: none; } }
.chat-btn { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; padding: 12px 18px; font: 600 15px var(--font); cursor: pointer; box-shadow: 0 14px 30px -12px rgba(31,41,51,.55); transition: transform .15s; }
.chat-btn:hover { transform: translateY(-2px); } .chat-btn .ico { font-size: 20px; } .chat.open .chat-btn { display: none; }
.chat-box { width: 380px; height: min(560px, calc(100vh - 140px)); background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06); display: flex; flex-direction: column; overflow: hidden; animation: up .25s ease; }
.chat-box header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--navy); color: #fff; } .chat-box header b { display: flex; gap: 8px; align-items: center; } .chat-box .nav-x { background: rgba(255,255,255,.15); color: #fff; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f6f8fb; }
.cm { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; } .cm.assistant { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.cm.user { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .cm a { font-weight: 600; } .cm.typing { color: var(--mut); animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .4; } }
.chat-box form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .chat-box input { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 14px var(--font); } .chat-box form .btn { padding: 10px 14px; }
.chat-note { margin: 0; padding: 0 12px 10px; font-size: 11px; color: var(--mut); }
/* 0.32: Leiste „Fachschaftsshop geöffnet“ */
.fsbar { background: linear-gradient(180deg, #1f8a4f, #17663c); color: #fff; font-size: 13px; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset; }
.fsbar-in { display: flex; align-items: center; justify-content: center; gap: 6px 14px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.fsbar svg { width: 16px; height: 16px; } .fsbar-l { font-weight: 700; }
.fsbar a { color: #fff; text-decoration: none; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset; font-weight: 600; } .fsbar a:hover { background: rgba(255,255,255,.28); }
/* 0.32: Konto, Sendungsverfolgung */
.acctbtn { color: var(--ink); padding: 10px; font-size: 22px; display: flex; border-radius: 12px; } .acctbtn:hover { background: var(--soft); }
@media (max-width: 900px) { .acctbtn { margin-left: auto; } .acctbtn + .cartbtn { margin-left: 0; } }
.note { padding: 12px 16px; border-radius: 14px; margin: 12px 0; font-weight: 600; } .note.ok { background: #eaf7ef; color: #135c33; border: 1px solid #bfe3cc; } .note.err { background: #fdf0ee; color: #8e2318; border: 1px solid #f2c9c2; }
.konto-grid { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 32px; align-items: start; margin-top: 16px; }
.konto-login { padding: 22px; border-radius: 20px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 10px 30px rgba(16,32,64,.08); max-width: 680px; }
.konto-login label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.konto-login input { font: 16px var(--font); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; width: 100%; box-sizing: border-box; }
.konto-login .fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.konto-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 18px; }
.ord-list { display: grid; gap: 14px; margin: 18px 0; }
.ord { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 #fff inset, 0 4px 18px rgba(16,32,64,.06); }
.ord-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord-st { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #eef2f7; color: #2a3a52; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset; }
.ord-st.lv2 { background: #e6f0fb; color: #0b4f92; } .ord-st.lv3 { background: #e5f5ec; color: #135c33; } .ord-st.lv-1 { background: #fdf0ee; color: #8e2318; }
.ord-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 14px 0 6px; }
.ord-prog li { font-size: 12px; color: #6a7484; padding-top: 10px; border-top: 4px solid #e3e8ef; border-radius: 2px; }
.ord-prog li.on { color: #10304f; font-weight: 700; border-top-color: #1f8a4f; }
.ord-ship { display: grid; gap: 8px; margin: 10px 0; }
.ord-pkg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f6f8fb; } .ord-pkg > div { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ord-pkg > svg { width: 22px; height: 22px; color: #d40511; flex: none; }
.ord-items { margin: 10px 0; padding-left: 0; list-style: none; font-size: 14px; } .ord-items li { padding: 3px 0; } .ord-items li > span:first-child { display: inline-block; min-width: 34px; color: #59636e; }
.ord-f { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; } .ord-f > span { margin-right: auto; }
.ord-f form { margin: 0; } .ord-f button.chip { cursor: pointer; font-family: inherit; }
.chip svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .konto-grid, .konto-login .fg2 { grid-template-columns: 1fr; } }
.konto-inv { padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(16,32,64,.06); margin-bottom: 8px; }
.konto-inv summary { cursor: pointer; display: flex; align-items: center; gap: 8px; } .konto-inv summary svg { width: 18px; height: 18px; }
.konto-inv table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; } .konto-inv th { text-align: left; font-size: 12px; color: #59636e; font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.konto-inv td { padding: 7px 4px; border-bottom: 1px solid #f0f2f5; } .konto-inv .r { text-align: right; }
@media (max-width: 600px) { .konto-inv th:nth-child(3), .konto-inv td:nth-child(3) { display: none; } }
/* 0.32.1: Kopfleiste – Icons bewegt (Telefon klingelt, LKW fährt, Brief fliegt, Schild glänzt) */
.tb-it svg { transform-origin: 50% 50%; }
.tbi-phone svg { animation: tbRing 4s ease-in-out infinite; }
.tbi-truck svg { animation: tbDrive 3.2s ease-in-out infinite; }
.tbi-mail svg { animation: tbSend 4.5s ease-in-out infinite; }
.tbi-shield svg, .tbi-check svg { animation: tbPulse 3.6s ease-in-out infinite; }
@keyframes tbRing { 0%, 60%, 100% { transform: rotate(0); } 63% { transform: rotate(-16deg); } 66% { transform: rotate(14deg); } 69% { transform: rotate(-12deg); } 72% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } 78% { transform: rotate(0); } }
@keyframes tbDrive { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1px) translateY(-.5px); } 45% { transform: translateX(3px); } 50% { transform: translateX(3px) translateY(-.6px); } 70% { transform: translateX(0); } }
@keyframes tbSend { 0%, 55%, 100% { transform: translate(0, 0); opacity: 1; } 68% { transform: translate(7px, -5px) rotate(-8deg); opacity: 0; } 69% { transform: translate(-7px, 4px); opacity: 0; } 82% { transform: translate(0, 0); opacity: 1; } }
@keyframes tbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .tb-it svg { animation: none !important; } }
/* 0.32.1: Set-Inhalt immer sichtbar */
.cset-h { display: block; color: #4a5562; font-size: 13px; margin-top: 2px; }
.cset-parts ul { margin: 4px 0 6px; } .cset-parts li { color: #3a4553; }
/* Warenkorb-Summe: Inhalt bleibt im Kasten */
@media (min-width: 861px) { .cgrid { grid-template-columns: minmax(0, 1fr) 380px; } }
.ctot { grid-template-columns: minmax(0, 1fr); min-width: 0; box-sizing: border-box; } .ctot > * { min-width: 0; }
.ctot .shipsel label { min-width: 0; } .ctot .shipsel label > span:first-of-type { overflow-wrap: anywhere; }
/* DHL-Lieferprognose wie im alten Shop: gelber Kopf, drei Stationen */
.dlv { margin: 16px 0 4px; border: 1px solid #f0c419; background: #fff; border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 4px 14px rgba(120,90,0,.08); }
.dlv-hd { margin: 0; padding: 9px 14px; background: linear-gradient(180deg, #ffd633, #ffcc00); gap: 10px; }
.dlv-hd b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #3a2a00; }
.dlv-dhl { background: transparent; color: #d40511; font-size: 15px; padding: 0; }
.dlv-steps { padding: 14px 10px 12px; }
.dlv-steps::before { top: 30px; left: 18%; right: 18%; height: 4px; background: linear-gradient(90deg, #23a047 0 45%, #f0a000 60%, #d40511 100%); opacity: .85; }
.dlv-steps .dot { width: 34px; height: 34px; border: 2px solid #f0c419; color: #8a6d00; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.dlv-steps li.on .dot { background: #23a047; border-color: #23a047; color: #fff; }
.dlv-steps li:last-child .dot { background: #fff4cc; }
.dlv-steps b { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #6b6f76; margin-top: 4px; }
.dlv-steps span:not(.dot) { font-size: 13px; font-weight: 700; color: #1f2937; line-height: 1.3; }
.dlv-steps li:last-child span:not(.dot) { color: #8a5a00; background: #fff4cc; border-radius: 999px; padding: 1px 8px; }
.dlv-cd { margin: 0; padding: 8px 14px 10px; border-top: 1px dashed #eee3b8; font-size: 12.5px; color: #4b5563; }
/* 0.32.1: Werkzeug-Leiste (Bundles, Konfigurator, Größenberater, Retoure) – unter dem Kopf, am Handy als 4er-Raster */
.nav li.hl { display: none; }
.tools { background: linear-gradient(180deg, #f7f9fc, #eef2f7); border-bottom: 1px solid #e3e8ef; }
.tools-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.tool { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); background: #fff;
  border: 1px solid rgba(20,40,70,.08); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(16,32,64,.06); transition: transform .15s, box-shadow .15s; min-width: 0; }
.tool:hover { transform: translateY(-1px); box-shadow: 0 1px 0 #fff inset, 0 8px 20px -8px rgba(16,32,64,.25); }
.tool.on { border-color: currentColor; }
.tool-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 19px;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 8px -2px rgba(0,0,0,.25); }
.tool-ic svg { width: 20px; height: 20px; }
.tool-tx { display: grid; min-width: 0; line-height: 1.2; } .tool-tx b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-tx small { font-size: 12px; color: #5b6573; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-gold .tool-ic { background: linear-gradient(180deg, #f5b73b, #d98a00); }
.t-blue .tool-ic { background: linear-gradient(180deg, #3b8fe0, #0b5fae); }
.t-green .tool-ic { background: linear-gradient(180deg, #34b06a, #17803f); }
.t-rose .tool-ic { background: linear-gradient(180deg, #ee6a7a, #c9344a); }
.t-violet .tool-ic { background: linear-gradient(180deg, #8f7af0, #5b43c9); }
.tool:hover .tool-ic svg { animation: tbPulse .6s ease; }
@media (max-width: 760px) {
  .tools-in { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding-top: 8px; padding-bottom: 8px; }
  .tool { flex-direction: column; gap: 5px; padding: 8px 2px 7px; text-align: center; border-radius: 12px; }
  .tool-ic { width: 34px; height: 34px; border-radius: 10px; }
  .tool-tx b { font-size: 11.5px; white-space: normal; line-height: 1.15; } .tool-tx small { display: none; }
}
/* 0.32.1: Zahlart, Summenzeilen, Kassen-Knopf */
.paysel label span small { display: block; font-size: 12px; color: #5b6573; margin-top: 1px; }
.ctot > div.sumrow { font-size: 14px; color: #374151; } .ctot > div.sumrow span:first-child { min-width: 0; }
.ctot .dlv { margin: 8px 0 0; } .dlv-pay { margin: 2px 0 0; }
.ctot a.btn.gocheckout, .ctot a.btn.gocheckout:visited { color: #fff !important; background: linear-gradient(180deg, #2b8ad6 0%, #0b5fae 100%); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px -6px rgba(11,95,174,.6); font-size: 17px; }
.ctot a.btn.gocheckout:hover { filter: brightness(1.06); }
.ctot > div.dlv { display: block; }
.ctot .dlv-steps b { font-size: 9.5px; }
.tool-tx i { display: none; font-style: normal; }
@media (max-width: 760px) { .tool-tx b { display: none; } .tool-tx i { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; } }
.paygrp { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #1f6b3a; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .05em; }
.paygrp.spaeter { color: #6b5a12; } .paygrp svg { width: 15px; height: 15px; }
/* Fachschaftsshop-Leiste: am Handy nur ein Link */
.fsbar-m { display: none; }
@media (max-width: 760px) { .fsbar { font-size: 12.5px; } .fsbar-in { padding-top: 5px; padding-bottom: 5px; } .fsbar-in > a:not(.fsbar-m), .fsbar-l { display: none; } .fsbar-m { display: inline-block; background: none !important; box-shadow: none !important; padding: 0 !important; } }
/* Seitenwarenkorb: Lieferprognose + direkt zur Kasse */
.mc-ship { margin: 4px 18px 0; font-size: 12.5px; color: #5b6573; }
.mini .dlv, [data-minicart] .dlv { margin: 10px 18px 6px; }
.mc-ft a.btn.gocheckout, .mc-ft a.btn.gocheckout:visited { color: #fff !important; background: linear-gradient(180deg, #2b8ad6 0%, #0b5fae 100%); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 6px 16px -6px rgba(11,95,174,.6); }
.mc-link { text-align: center; font-weight: 600; color: var(--brand-d); padding: 4px; }
.mc-cont { justify-self: center; font-size: 13.5px; color: #5b6573; }
.mc-it > b { white-space: nowrap; } .mc-ship { margin: 0 0 4px; } [data-minicart] .dlv { margin: 8px 0 6px; }
.paygrp.sofort svg { color: #e0a100; fill: #ffcc00; animation: tbPulse 2.4s ease-in-out infinite; }
/* 0.32.2: Einwilligung – „Nur notwendige“ und „Alle akzeptieren“ gleichwertig; Chat-Hinweis */
.consent .cbtn .btn:not(.sec) { flex: 1 1 140px; }
.chat-note { margin: 0; padding: 8px 14px; font-size: 11.5px; line-height: 1.4; color: #5b6573; background: #f6f8fb; border-bottom: 1px solid var(--line); } .chat-note a { color: inherit; text-decoration: underline; }
.konto p a, .fsr p a, .ctot p a, .chat-note a { text-decoration: underline; text-underline-offset: 2px; }
/* Hoch/Runter-Knöpfe rechts unten (über dem Chat) */
.scrollbtns { position: fixed; right: 22px; bottom: 92px; z-index: 9980; display: grid; gap: 8px; }
.sbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(20,40,70,.12); display: grid; place-items: center; cursor: pointer; color: var(--navy);
  background: linear-gradient(180deg, #fff, #eef2f7); box-shadow: 0 1px 0 #fff inset, 0 6px 18px -6px rgba(16,32,64,.35); transition: transform .15s, opacity .2s; }
.sbtn:hover { transform: translateY(-2px); } .sbtn svg { width: 20px; height: 20px; transform: rotate(-90deg); } .sbtn.down svg { transform: rotate(90deg); } .sbtn.down:hover { transform: translateY(2px); }
.sbtn[hidden] { display: none; }
@media (max-width: 960px) { .scrollbtns { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 6px; } .sbtn { width: 40px; height: 40px; } }
@media (max-width: 960px) { body:has(.buybar:not([hidden])) .scrollbtns { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
.slider-wrap.fit .sl-btn { display: none; } .slider-wrap.fit .slider { justify-content: center; }
.sl-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
/* 0.32.4: ausverkauft / Nachbestellung */
.badge.so { left: auto; right: 8px; background: #3f4652; } .badge.bo { left: auto; right: 8px; background: #8a5a00; }
.notify { border: 1px solid #f2c9c2; background: #fff7f5; border-radius: 16px; padding: 14px 16px; margin: 10px 0; }
.notify p { margin: 0 0 8px; font-size: 14px; } .notify-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-row input[type=email] { flex: 1 1 200px; font: 15px var(--font); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.notify .hp { position: absolute; left: -9999px; } .avail.out { color: #a3261b; }
.addrow[hidden], .notify[hidden] { display: none !important; }
/* Bild-Rätsel */
.cap { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #f8fafc; }
.cap.err { border-color: #d9534f; background: #fff5f4; }
.cap-q { margin: 0 0 10px; font-size: 13.5px; color: #374151; } .cap-q b { color: var(--navy); }
.cap-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cap-tiles button { position: relative; aspect-ratio: 1; max-height: 64px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: transform .1s, background .15s; box-shadow: 0 1px 2px rgba(16,32,64,.06); }
.cap-tiles button:hover { background: #f1f5fb; } .cap-tiles button:active { transform: scale(.94); }
.cap-tiles button.on { background: #e6f0fb; border-color: #2b8ad6; box-shadow: 0 0 0 2px rgba(43,138,214,.25); }
.cap-tiles button i { position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%; background: #0b5fae; color: #fff; font: 700 11.5px/21px var(--font); font-style: normal; display: none; }
.cap-tiles button.on i { display: block; }
/* Lieferprognose: Hinweis-Tooltip und „bei …“ */
.dlv-hd { position: relative; } .dlv-hd b { flex: 1; }
.dlv-i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #6b5300; background: rgba(255,255,255,.55); color: #4a3a00; font: italic 700 12px/1 Georgia, serif; cursor: help; }
.dlv-i span { position: absolute; right: -6px; top: calc(100% + 8px); width: 250px; padding: 10px 12px; border-radius: 12px; background: #1f2937; color: #fff; font: 400 12.5px/1.45 var(--font); text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 5; }
.dlv-i:hover span, .dlv-i:focus span, .dlv-i:focus-visible span { opacity: 1; visibility: visible; }
.dlv { overflow: visible; } .dlv-hd { border-radius: 15px 15px 0 0; }
.dlv-for { margin: 0; padding: 8px 14px 0; font-size: 12px; color: #6b7280; text-align: center; }
.mc-it > b, .mc-it .ast { white-space: nowrap; flex: none; }
/* Sternchen bleibt hinter dem €-Betrag */
.ast { white-space: nowrap; }
/* ===== 0.34: Kasse ===== */
.co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.co-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #1d6b3d; } .co-secure svg { width: 16px; height: 16px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
.co-box { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 20px; margin: 0 0 16px; background: #fff; display: grid; gap: 12px; box-shadow: 0 1px 0 #fff inset, 0 4px 18px rgba(16,32,64,.05); min-width: 0; }
.co-box legend { font-weight: 700; font-size: 17px; color: var(--navy); padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.co-box legend span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: linear-gradient(180deg, #2b8ad6, #0b5fae); }
.co label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; color: #2b3644; min-width: 0; } .co label em { font-style: normal; font-weight: 400; color: #6b7280; } .co label small { font-weight: 400; color: #6b7280; font-size: 12px; }
.co input:not([type=checkbox]):not([type=radio]), .co select, .co textarea { font: 16px var(--font); border: 1px solid #cfd6df; border-radius: 12px; padding: 11px 12px; width: 100%; box-sizing: border-box; background: #fff; }
.co input:focus, .co select:focus, .co textarea:focus { outline: none; border-color: #2b8ad6; box-shadow: 0 0 0 3px rgba(43,138,214,.18); }
.co input.bad { border-color: #d9534f; box-shadow: 0 0 0 3px rgba(217,83,79,.15); }
.co .fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .co .fg-street { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } .co .fg-city { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .co .fg2, .co .fg-street { grid-template-columns: 1fr; } .co .fg-city { grid-template-columns: 110px 1fr; } .co .fg-city > label:last-child { grid-column: 1 / -1; } }
.co-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 500 !important; } .co-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.co-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-seg label { display: flex !important; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; font-weight: 600; background: #f8fafc; }
.co-seg label:has(input:checked) { border-color: #2b8ad6; background: #e8f2fc; color: #0b4f92; box-shadow: 0 0 0 2px rgba(43,138,214,.2); }
.co-seg input { position: absolute; opacity: 0; pointer-events: none; } .co-seg svg { width: 18px; height: 18px; }
.co-hint { border-radius: 12px; padding: 10px 12px; background: #fff8e6; border: 1px solid #f3d27a; font-size: 13.5px; } .co-hint p { margin: 0 0 4px; } .co-hint p:last-child { margin: 0; }
.co-hint.ok { background: #eef8f1; border-color: #bfe3cc; color: #135c33; } .co-hint.err { background: #fdf0ee; border-color: #f2c9c2; color: #8e2318; } .co-hint .chip { margin-left: 6px; font-size: 12px; padding: 4px 10px; cursor: pointer; font-family: inherit; }
.lf-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; } .lf-it { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.lf-it:hover { border-color: #2b8ad6; background: #f4f9fe; } .lf-it span { grid-column: 1; font-size: 13px; color: #4b5563; } .lf-it em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 12.5px; color: #0b4f92; font-weight: 700; }
.shipsel label.off { opacity: .45; cursor: not-allowed; }
.co-side { position: sticky; top: 120px; display: grid; gap: 16px; } @media (max-width: 960px) { .co-side { position: static; } }
.co-sum, .co-up { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16,32,64,.08); display: grid; gap: 12px; }
.co-sum h2, .co-up h2 { margin: 0; }
.co-lines { display: grid; gap: 12px; max-height: 320px; overflow: auto; padding: 8px 2px 2px 0; }
.co-l, .co-ui { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; } .co-l > b:last-child, .co-ui > .chip, .co-ui > button { white-space: nowrap; }
.co-l > span:nth-child(2), .co-ui > span { display: grid; min-width: 0; } .co-l > span:nth-child(2) > b { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; } .co-l small, .co-ui small { color: #6b7280; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-img { position: relative; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; overflow: visible; } .co-img img { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; }
.co-img i { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #4b5563; color: #fff; font: 700 11px/20px var(--font); font-style: normal; text-align: center; }
.co-tot { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; } .co-tot > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .co-tot > div.big { font-size: 20px; font-weight: 800; color: var(--navy); padding-top: 6px; border-top: 1px solid var(--line); }
.co-agb { font-size: 13px !important; } .co-agb a { text-decoration: underline; }
.co-err { background: #fdf0ee; border: 1px solid #f2c9c2; color: #8e2318; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.co-go { width: 100%; } .co-go svg { width: 18px; height: 18px; } .co-go.busy { opacity: .7; cursor: progress; } .co-legal { margin: 0; }
.co-ui .chip.solid { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 18px; cursor: pointer; }
/* Bestellung abgeschlossen */
.od { max-width: 860px; } .od-hero { display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: 20px; margin-bottom: 16px; }
.od-hero.ok { background: linear-gradient(160deg, #f1faf4, #e3f4ea); border: 1px solid #bfe3cc; } .od-hero.wait { background: #fff8e6; border: 1px solid #f3d27a; }
.od-hero h1 { margin: 0 0 4px; } .od-hero p { margin: 0; } .od-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(180deg, #2a9a5c, #17663c); } .od-hero.wait .od-ic { background: linear-gradient(180deg, #f5b73b, #d98a00); } .od-ic svg { width: 26px; height: 26px; }
.od .card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; margin-bottom: 14px; }
.od-bank dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 8px 0; } .od-bank dt { color: #6b7280; } .od-bank dd { margin: 0; } .mono { font-family: ui-monospace, Menlo, monospace; }
.od-i { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; } .od-i small { display: block; color: #6b7280; font-size: 12px; } .od-tot { font-size: 17px; font-weight: 800; color: var(--navy); border: 0; }
.od-next { display: flex; gap: 8px; align-items: center; } .od-next svg { width: 18px; height: 18px; color: #d40511; }
.od-pay { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .od-pay p { margin: 0; }
.co-seg.co-seg2 { grid-template-columns: 1fr 1fr; }
.co small.ok { color: #135c33; font-weight: 600; } .co small.err { color: #a3261b; font-weight: 600; }
.co-landnote { display: flex; gap: 6px; align-items: flex-start; margin: 0; } .co-landnote svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.co-taxfree span { line-height: 1.4; }
.co label > .lbl { display: block; } .co label > .lbl em { font-style: normal; font-weight: 400; color: #6b7280; }
.od-instant { display: flex; gap: 10px; align-items: flex-start; background: #fff8e1; border: 1px solid #f3d27a; border-radius: 12px; padding: 10px 12px; font-size: 14px; } .od-instant svg { width: 20px; height: 20px; color: #d98a00; flex: none; margin-top: 1px; }
.ord-pay { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; } .ord-pay.ok { background: #e5f5ec; color: #135c33; } .ord-pay.open { background: #fff4d6; color: #7a5600; }

.co input.good { border-color: #3a9b63; } .co-hint button.link { background: none; border: 0; padding: 0; margin-left: 4px; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.co-err.ok { background: #eef8f1; border-color: #bfe3cc; color: #135c33; }
.co-einv { display: grid; gap: 12px; margin-top: 4px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; } .co-seg label small { font-weight: 400; color: #6b7280; margin-left: 4px; }
.co label small.err { color: #b42318; font-weight: 600; }
.od-bankgrid { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .od-bankgrid dl { flex: 1 1 300px; } .od-bankgrid dd { overflow-wrap: anywhere; }
.od-copy { margin-left: 6px; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 1px 9px; font: 600 11.5px/1.6 var(--font); color: #374151; cursor: pointer; vertical-align: 1px; } .od-copy:hover { background: #f3f4f6; } .od-copy.done { background: #eef8f1; border-color: #bfe3cc; color: #135c33; }
.od-giro { display: grid; justify-items: center; gap: 6px; width: 150px; text-align: center; } .od-giro svg { border: 1px solid var(--line); border-radius: 10px; } .od-giro small { font-size: 11.5px; color: #4b5563; line-height: 1.35; }
.od-vop { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff8e6; border: 1px solid #f3d27a; font-size: 13.5px; line-height: 1.45; }
@media (max-width: 560px) { .od-giro { width: 100%; } }

/* übernommene Produktinhalte: alle Blöcke in Seitenbreite (Bild-Text-Blöcke liefen bis zum Rand) */
.pd-extra .legacy .cms-block-container { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
.pd-extra .legacy .cms-block-image-text-cover .cms-image-container { border-radius: 24px; overflow: hidden; }
/* Bootstrap-Helfer aus Shopware-Inhalten */
.legacy .flex-column { flex-direction: column !important; } .legacy .justify-content-center { justify-content: center !important; } .legacy .justify-content-end { justify-content: flex-end !important; }
.legacy .align-items-center { align-items: center !important; } .legacy .h-100 { height: 100% !important; }
/* Größenberater-Kasten: Anprobe-Bild unten am Kasten */
.legacy .row.no-gutters > .d-flex.flex-column:has(> a > img) { justify-content: flex-end !important; }
.tb-lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 4px; vertical-align: 1px; flex: none; }
.tb-lamp.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: tbl 2.4s ease-in-out infinite; } .tb-lamp.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
@keyframes tbl { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.08); } }
/* Galerie: Bilder gleiten herein/hinaus */
.gmain img[data-slide] { position: absolute; inset: 0; will-change: transform, opacity; }
.gmain img.g-in-r { animation: gInR .45s cubic-bezier(.2,.8,.2,1) both; } .gmain img.g-in-l { animation: gInL .45s cubic-bezier(.2,.8,.2,1) both; }
.gmain img.g-out-l { animation: gOutL .45s cubic-bezier(.2,.8,.2,1) both; } .gmain img.g-out-r { animation: gOutR .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gInR { from { transform: translateX(28%) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gInL { from { transform: translateX(-28%) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gOutL { to { transform: translateX(-28%) scale(.96); opacity: 0; } } @keyframes gOutR { to { transform: translateX(28%) scale(.96); opacity: 0; } }

.mc-cont:hover { color: var(--brand-d); text-decoration: underline; }
/* Retourenportal */
.rp .rp-lead { max-width: 760px; color: #374151; margin: 4px 0 14px; }
.rp-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; } .rp-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--soft); color: #5b6573; font-size: 13.5px; font-weight: 600; }
.rp-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: 12px; } .rp-steps li.on { background: #e8f1fb; color: var(--brand-d); } .rp-steps li.on span { background: var(--brand); color: #fff; border-color: var(--brand); }
.rp-card { max-width: 820px; } .rp-act { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .rp-act .linkbtn { color: var(--brand-d); font-weight: 600; } .rp-act .linkbtn:hover { text-decoration: underline; color: var(--navy); }
.rp .hp { position: absolute; left: -9999px; } .rp-mine { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .rp-mine p { margin: 0 6px 0 0; }
.rp-items { display: grid; gap: 8px; } .rp-it { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto minmax(160px, 230px); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.rp-it.nw { opacity: .6; } .rp-chk { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; } .rp-chk input { width: 18px !important; height: 18px; margin-top: 2px; } .rp-chk span { display: grid; } .rp-chk small { color: var(--mut); font-size: 12px; }
.rp-it select, .rp-it input[type=number], .rp-freeit input { font: 14px var(--font); border: 1px solid var(--line); border-radius: 10px; padding: 8px; width: 100%; box-sizing: border-box; }
.rp-freeit { grid-template-columns: minmax(0, 1fr) 70px minmax(150px, 220px); margin-bottom: 8px; }
.rp-legal { font-size: 13px; color: #4b5563; background: var(--soft); border-radius: 12px; padding: 10px 12px; margin: 0; }
.rp-ok { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #eef8f1; border: 1px solid #bfe3cc; max-width: 820px; } .rp-ok > .ico { font-size: 28px; color: #1d8048; flex: none; } .rp-ok div { display: grid; } .rp-ok span { color: #2d4a38; font-size: 14px; }
.rp-h { margin: 24px 0 10px; } .rp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 980px; }
.rp-opt { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: #fff; display: grid; gap: 10px; align-content: start; position: relative; } .rp-opt h3 { margin: 0; font-size: 18px; } .rp-opt p { margin: 0; color: #374151; font-size: 14.5px; }
.rp-badge { justify-self: start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-d); background: #e8f1fb; border-radius: 99px; padding: 3px 10px; }
.rp-pay { display: flex; flex-wrap: wrap; gap: 8px; } .btn.ghost { background: #fff; color: var(--brand-d); border: 1px solid #c9d8ea; } .btn.ghost:hover { background: #f1f6fc; }
.rp-lbl { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .rp-lbl figure { margin: 0; text-align: center; } .rp-lbl img { border: 1px solid var(--line); border-radius: 12px; background: #fff; } .rp-lbl figcaption { font-size: 12px; color: var(--mut); }
.rp-lbl-act { display: grid; gap: 8px; } .rp-addr { font-style: normal; background: var(--soft); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.rp-foot { margin-top: 18px; }
@media (max-width: 700px) { .rp-it { grid-template-columns: 1fr 70px; } .rp-it > .muted { display: none; } .rp-it select { grid-column: 1 / -1; } .rp-freeit { grid-template-columns: 1fr 70px; } }
.rp-card[hidden] { display: none !important; } .card.rp-ok { display: flex; flex-direction: row; } .rp-ok > svg { width: 30px; height: 30px; color: #1d8048; flex: none; }
/* Bestickung */
.stk-hero { background: linear-gradient(135deg, #16325c 0%, #1f5fa8 60%, #2a7fd0 100%); color: #fff; padding: 40px 0 44px; }
.stk-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: center; }
.stk-hero .eyebrow { color: #cfe0f5; } .stk-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 12px; color: #fff; } .stk-hero p { color: #e3ecf8; font-size: 17px; max-width: 560px; margin: 0 0 18px; }
.stk-hero figure { margin: 0; } .stk-hero img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.stk-facts { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; } .stk-facts li { display: flex; gap: 12px; align-items: center; } .stk-facts svg { width: 22px; height: 22px; flex: none; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.14); box-sizing: content-box; }
.stk-facts span { display: grid; font-size: 13.5px; color: #cfe0f5; } .stk-facts b { color: #fff; font-size: 15px; }
.stk-cta { display: flex; gap: 10px; flex-wrap: wrap; } .stk-hero .btn { background: #fff; color: #16325c; } .stk-hero .btn:hover { background: #e8f1fb; } .stk-hero .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); } .stk-hero .btn.ghost:hover { background: rgba(255,255,255,.12); }
.stk-sec { padding-top: 44px; } .stk-sec > .muted { max-width: 720px; }
.stk-steps { list-style: none; counter-reset: s; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stk-steps li { counter-increment: s; position: relative; padding: 46px 16px 16px; border-radius: 18px; background: var(--soft); display: grid; gap: 4px; } .stk-steps li::before { content: counter(s); position: absolute; top: 14px; left: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 12.5px/24px var(--font); text-align: center; }
.stk-steps b { color: #16325c; } .stk-steps span { font-size: 13.5px; color: #4b5563; line-height: 1.45; }
.stk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .stk-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; } .stk-card h3 { margin: 0 0 10px; font-size: 18px; color: #16325c; }
.stk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .stk-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: #374151; }
.stk-list li::before { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; font: 700 11px/18px var(--font); text-align: center; color: #fff; } .stk-list li.ok::before { content: "✓"; background: #1d8048; } .stk-list li.no::before { content: "!"; background: #c77c00; }
.stk-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 6px; } .stk-tbl td { padding: 7px 0; border-bottom: 1px solid var(--line); } .stk-tbl td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .stk-tbl .sum td { font-weight: 700; border-bottom: 0; color: #16325c; }
.stk-per { margin: 0; color: var(--brand-d); } .stk-gal { display: grid; gap: 12px; align-content: start; } .stk-gal figure { margin: 0; } .stk-gal img { width: 100%; height: 240px; object-fit: cover; border-radius: 20px; } .stk-gal figcaption { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.stk-min { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px; background: #e8f1fb; } .stk-min b { font-size: 34px; color: #16325c; line-height: 1; } .stk-min span { font-size: 13.5px; color: #34465e; }
.stk-req { margin-top: 48px; padding: 44px 0; background: var(--soft); } .stk-req .muted { max-width: 720px; } .stk-contact { margin: 14px 0 0; font-size: 14px; color: #4b5563; }
.stk-faq { display: grid; gap: 8px; margin: 14px 0 20px; max-width: 900px; } .stk-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; } .stk-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: #16325c; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.stk-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--brand); } .stk-faq details[open] summary::after { content: "–"; } .stk-faq p { margin: 0 0 14px; color: #374151; font-size: 14.5px; }
@media (max-width: 900px) { .stk-hero-in, .stk-two { grid-template-columns: 1fr; } .stk-steps { grid-template-columns: 1fr 1fr; } .stk-hero figure { order: -1; } .stk-hero img { aspect-ratio: 16/10; } }
@media (max-width: 520px) { .stk-steps { grid-template-columns: 1fr; } }
/* Anfragekorb / Angebot */
.pd-quote, .cart-quote .linkbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--brand-d); font-weight: 600; font-size: 14px; } .pd-quote span { font-weight: 400; color: var(--mut); font-size: 13px; }
.pd-quote:hover, .cart-quote .linkbtn:hover { color: var(--navy); text-decoration: underline; } .cart-quote { text-align: center; }
.qt-lead { max-width: 780px; color: #374151; } .qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 20px; align-items: start; margin-top: 14px; }
.qt-list { padding: 8px 18px; border-radius: 20px; } .qt-l { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px auto 30px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qt-img img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; } .qt-n { display: grid; min-width: 0; } .qt-n small { color: var(--mut); font-size: 12px; } .qt-n a { color: inherit; }
.qt-l input { width: 72px; font: 15px var(--font); border: 1px solid var(--line); border-radius: 10px; padding: 7px; box-sizing: border-box; } .qt-p { white-space: nowrap; } .qt-x { border: 0; background: none; color: #9aa3ad; cursor: pointer; font-size: 15px; } .qt-x:hover { color: var(--bad); }
.qt-tot { padding: 12px 0 6px; display: grid; gap: 6px; } .qt-tot > div { display: flex; justify-content: space-between; } .qt-tot .big { font-size: 20px; font-weight: 800; color: var(--navy); border-top: 1px solid var(--line); padding-top: 8px; }
.qt-form { position: sticky; top: 90px; } .qt-zip { display: grid; grid-template-columns: 100px 1fr 140px; gap: 10px; } .qt-form select { font: 15px var(--font); border: 1px solid var(--line); border-radius: 12px; padding: 11px 8px; width: 100%; }
.qt-form textarea { font: 15px var(--font); border: 1px solid var(--line); border-radius: 12px; padding: 10px; width: 100%; box-sizing: border-box; } .qt .hp { position: absolute; left: -9999px; }
.qt-empty, .qt-done { padding: 22px; border-radius: 20px; max-width: 760px; display: grid; gap: 14px; } .qt-act { display: flex; gap: 10px; flex-wrap: wrap; } .qt-act form { margin: 0; }
.qt-sum { display: grid; gap: 2px; } .qt-sum b { font-size: 30px; color: var(--navy); } .qt-sum small { color: var(--mut); }
@media (max-width: 900px) { .qt-grid { grid-template-columns: 1fr; } .qt-form { position: static; } .qt-l { grid-template-columns: 48px minmax(0, 1fr) 64px 28px; } .qt-p { grid-column: 2; } .qt-zip { grid-template-columns: 90px 1fr; } .qt-zip label:last-child { grid-column: 1 / -1; } }
.mc-tax { margin: -10px 0 6px; font-size: 12px; color: #5b6573; text-align: right; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 900px; } .qa-opt { padding: 22px; border-radius: 20px; display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); }
.qa-opt.on { box-shadow: 0 0 0 2px var(--brand); } .qa-opt p { margin: 0; color: #374151; } .qa-r { display: grid; gap: 6px; } .qa-r label { display: flex; gap: 8px; align-items: center; font-size: 14.5px; }
.qa-t { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; } .qa-t textarea { font: 15px var(--font); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.quotebtn { position: relative; color: var(--ink); padding: 10px; font-size: 24px; display: flex; border-radius: 12px; } .quotebtn:hover { background: var(--soft); } .quotebtn[hidden] { display: none; }
.quotebtn .cnt { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; border-radius: 99px; background: #c77c00; color: #fff; font: 700 11px/19px var(--font); text-align: center; padding: 0 5px; box-sizing: border-box; } .quotebtn.bump { animation: bump .7s cubic-bezier(.3,1.6,.5,1); }
@media (max-width: 480px) { .hd .quotebtn, .hd .cartbtn, .hd .acctbtn { padding: 7px; } .hd .logo img { max-width: 44vw; height: auto; } .hd .logo { min-width: 0; flex: 0 1 auto; } }
.kf-quotebtn { display: block; width: 100%; margin-top: 8px; text-align: center; font-size: 13px; color: var(--brand-d, #1a5f9e); font-weight: 600; } .kf-quotebtn:hover { text-decoration: underline; } .kf-quotebtn:disabled { opacity: .4; cursor: default; text-decoration: none; }
.qt-set { border-bottom: 1px solid var(--line); } .qt-set .qt-l { border-bottom: 0; } .qt-parts { list-style: none; margin: -4px 0 10px 68px; padding: 8px 12px; background: var(--soft); border-radius: 12px; font-size: 13px; display: grid; gap: 3px; }
.qt-parts li { display: flex; justify-content: space-between; gap: 10px; } .qt-parts small { color: var(--mut); } .qt-tot .ok { color: #1d8048; }
@media (max-width: 900px) { .qt-parts { margin-left: 0; } }

@media (max-width: 760px) { .tool-tx b { font-size: 10.5px; hyphens: auto; } .tool-ic { width: 30px; height: 30px; } .tool-ic svg { width: 17px; height: 17px; } }
@media (min-width: 761px) and (max-width: 1180px) { .tool-tx small { display: none; } }
.dlv-steps:has(.dlv-cus) { grid-template-columns: repeat(4, 1fr); } .dlv-steps:has(.dlv-cus)::before { left: 12%; right: 12%; }
.dlv-steps li.dlv-cus .dot { border-color: #8f7af0; color: #5b43c9; } .dlv-steps li.dlv-cus span:not(.dot) { color: #5b43c9; font-weight: 600; }
.dlv-steps:has(.dlv-cus) b { font-size: 10px; letter-spacing: 0; hyphens: manual; overflow-wrap: anywhere; max-width: 100%; padding: 0 2px; } .dlv-steps:has(.dlv-cus) span:not(.dot) { font-size: 11.5px; }
@media (max-width: 760px) { .tool-tx i, .tool-tx b { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.1; } }
@media (max-width: 760px) { .tool-tx i { font-size: 10.5px; overflow-wrap: normal !important; letter-spacing: -.01em; } .tool { padding-left: 1px; padding-right: 1px; } }
/* Chat: schließen, Einwilligung, Tipp-Animation, Vorschläge */
.chat-box[hidden] { display: none !important; } .chat-box { position: relative; }
.chat-consent { position: absolute; inset: 52px 0 0 0; z-index: 3; background: rgba(246,248,251,.97); display: flex; align-items: center; padding: 18px; } .chat-consent[hidden] { display: none; }
.chat-consent > div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; box-shadow: 0 10px 30px -14px rgba(16,32,64,.35); }
.chat-consent b { font-size: 15px; color: var(--navy); } .chat-consent p { margin: 0; font-size: 13px; line-height: 1.45; color: #374151; } .chat-consent a { text-decoration: underline; }
.chat-box form.off { opacity: .45; pointer-events: none; }
.cm.typing .dots { display: inline-flex; gap: 4px; padding: 2px 0; } .cm.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6b5; animation: chatDot 1.1s infinite ease-in-out; }
.cm.typing .dots i:nth-child(2) { animation-delay: .15s; } .cm.typing .dots i:nth-child(3) { animation-delay: .3s; } @keyframes chatDot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.cm.typing-on::after { content: "▍"; margin-left: 1px; color: var(--brand); animation: chatCaret .8s steps(2) infinite; } @keyframes chatCaret { 50% { opacity: 0; } }
.chat-sug { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 2px; } .chat-sug button { border: 1px solid #c9d8ea; background: #fff; color: var(--brand-d); border-radius: 99px; padding: 6px 11px; font: 600 12.5px var(--font); cursor: pointer; text-align: left; }
.chat-sug button:hover { background: #eef4fb; border-color: var(--brand); }
.chat-box header .nav-x { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; font-size: 18px; } .chat-box header .nav-x:hover { background: rgba(255,255,255,.16) !important; }
.rp-alt { margin-top: 26px; max-width: 980px; } .rp-alt h2 { margin: 0 0 10px; } .rp-alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.rp-alt-it { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rp-alt-it:hover { border-color: #b8cbe4; box-shadow: 0 8px 20px -12px rgba(16,32,64,.3); color: var(--ink); } .rp-alt-it > svg { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 1px; }
.rp-alt-it span { display: grid; gap: 2px; } .rp-alt-it b { font-size: 14.5px; color: var(--navy); } .rp-alt-it small { font-size: 12.5px; color: var(--mut); line-height: 1.4; }
.rp-dlg { border: 0; border-radius: 20px; padding: 24px 24px 20px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 30px 80px -20px rgba(15,23,42,.5); } .rp-dlg::backdrop { background: rgba(15,23,42,.45); }
.rp-dlg h2 { margin: 0 32px 10px 0; } .rp-dlg p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #374151; } .rp-dlg a { text-decoration: underline; }
.rp-dlg-x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--soft); width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 15px; }
/* Suche: Vorschläge beim Tippen */
.sg { position: fixed; z-index: 90; max-height: min(70vh, 560px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(16,32,64,.18); padding: 8px; }
.sg[hidden] { display: none !important; }
.sg a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.sg a:hover, .sg a.on { background: var(--soft); }
.sg-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 8px 10px 4px; }
.sg-img { width: 44px; height: 44px; flex: none; border-radius: 8px; background: var(--soft); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sg-img img { width: 100%; height: 100%; object-fit: contain; }
.sg-n { flex: 1; min-width: 0; line-height: 1.3; } .sg-n small { display: block; color: var(--bad); font-size: 12px; }
.sg-p b { white-space: nowrap; font-size: 14px; }
.sg-cat::before { content: "▸"; color: var(--brand); }
.sg-terms { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px; } .sg-terms a { padding: 5px 10px; background: var(--soft); border-radius: 999px; font-size: 13px; }
.sg-fix { padding: 8px 10px; font-size: 13.5px; color: var(--warn); }
.sg-none { padding: 14px 10px; color: var(--mut); font-size: 14px; }
.sg-all { justify-content: center; font-weight: 600; color: var(--brand) !important; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px !important; margin-top: 4px; }
/* Suchergebnis: Filter */
.srch-fix { background: #fff8e6; border: 1px solid #f3d999; color: #6b4a00; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.srch-fix a { color: inherit; text-decoration: underline; margin-left: 6px; }
.srch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 10px; font-size: 14px; }
.srch-bar label { display: flex; align-items: center; gap: 6px; color: var(--mut); }
.srch-bar select, .srch-bar input:not([type=checkbox]) { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.srch-bar input[size] { width: 76px; }
.srch-chk { color: var(--ink) !important; }
.srch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.srch-chips .chip { text-decoration: none; } .srch-chips .chip small { color: var(--mut); margin-left: 3px; }
.srch-chips .chip.on { background: var(--brand); color: #fff; border-color: var(--brand); } .srch-chips .chip.on small { color: rgba(255,255,255,.8); }
.srch-chips .chip-mf { font-style: italic; }
.fsr-opts { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 6px; margin: 4px 0 12px; display: grid; gap: 8px; } .fsr-opts legend { font-size: 13px; font-weight: 700; padding: 0 6px; }
/* ---------- 0.39: Feinschliff Shop ---------- */
#gzb-popup { display: none !important; }   /* einschiebender Größenberater-Hinweis auf der Startseite: entfernt */
/* weicher Seitenwechsel (View Transitions; ältere Browser: sanftes Einblenden) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sbFadeOut .16s ease-in both; } ::view-transition-new(root) { animation: sbFadeIn .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sbFadeOut { to { opacity: 0; } } @keyframes sbFadeIn { from { opacity: 0; transform: translateY(6px); } }
@supports not (view-transition-name: none) { #inhalt { animation: sbFadeIn .38s cubic-bezier(.2,.7,.2,1) both; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), #inhalt { animation: none !important; } }
/* Logo: „eine Marke der meladis GmbH“ */
.logo { position: relative; }
.logo-tag { position: absolute; left: 34px; top: calc(100% + 2px); white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: #4a5568; pointer-events: none; }
.logo-tag i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .3s cubic-bezier(.2,1.2,.4,1); transition-delay: calc(var(--i) * 14ms); }
.logo:hover .logo-tag i, .logo:focus-visible .logo-tag i { opacity: 1; transform: none; }
@keyframes sbTagOut { to { opacity: 0; transform: translateY(-4px); filter: blur(3px); } }
@media (max-width: 960px) { .logo-tag { display: none; } }
/* Kopfleiste mobil: Hinweise wechseln sich ab */
@media (max-width: 960px) {
  .tb-in { position: relative; height: 32px; padding-top: 0; padding-bottom: 0; }
  .tb-it, .tb-it:not(.tb-1) { display: inline-flex; position: absolute; left: 0; right: 0; top: 0; bottom: 0; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; pointer-events: none; }
  .tb-it.on { opacity: 1; transform: none; pointer-events: auto; } .tb-it.off { opacity: 0; transform: translateY(-10px); }
}
/* Chat-Assistent: unten links, ausblendbar */
.chat { left: 22px; right: auto; }
.chat-box { transform-origin: bottom left; }
.chat-hide { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.25); font: 700 14px/22px var(--font); cursor: pointer; padding: 0; }
.chat.open .chat-hide { display: none; } .chat.gone { display: none !important; }
@media (max-width: 960px) {
  .chat { display: block; left: 12px; bottom: 12px; } .chat-btn { padding: 12px; } .chat-btn span { display: none; }
  .chat-box { width: calc(100vw - 24px); height: min(70vh, 560px); }
}
/* Seitenwarenkorb: größer und ruhige Scrollleiste */
.mc-panel { width: min(460px, 94vw); }
.mc-body, .chat-log, .sg, .co-items, .clines { scrollbar-width: thin; scrollbar-color: rgba(31,41,51,.22) transparent; }
.mc-body::-webkit-scrollbar, .chat-log::-webkit-scrollbar, .sg::-webkit-scrollbar { width: 8px; }
.mc-body::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb, .sg::-webkit-scrollbar-thumb { background: rgba(31,41,51,.18); border-radius: 8px; border: 2px solid #fff; }
.mc-body::-webkit-scrollbar-thumb:hover { background: rgba(31,41,51,.32); } .mc-body::-webkit-scrollbar-track { background: transparent; }
.mc-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%); }
/* Menü mobil: zweite Seite (Werkzeuge, Service, Rechtliches) – Klavier-Wechsel */
.nav .nav-p2, .nav .nav-more, .nav .nav-fs { display: none; }
@media (max-width: 960px) {
  .nav .nav-more { display: block; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
  .nav-more button, .nav-back button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: var(--soft); border-radius: 12px; padding: 13px 14px; font: 600 15px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
  .nav-more button span { margin-left: auto; font-size: 20px; color: var(--brand); } .nav-more svg, .nav-p2 a svg { width: 18px; height: 18px; color: var(--brand); }
  .nav .nav-p2 { display: block; padding: 0 8px 24px; position: absolute; left: 0; right: 0; top: 60px; visibility: hidden; }
  .nav-p2 li { opacity: 0; transform: perspective(500px) rotateX(-75deg) translateY(-8px); transform-origin: top; transition: opacity .22s, transform .32s cubic-bezier(.2,1.2,.4,1); transition-delay: calc(var(--i, 0) * 28ms); }
  .nav-p2 a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 10px; } .nav-p2 a:active { background: var(--soft); }
  .nav-p2 .nav-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); font-weight: 700; padding: 14px 12px 4px; }
  .nav-back { margin-bottom: 4px; } .nav-back button span { font-size: 20px; color: var(--brand); }
  .nav-p1 > li { transition: opacity .2s, transform .3s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i, 0) * 22ms); transform-origin: top; }
  .nav.p2 .nav-p1 > li { opacity: 0; transform: perspective(500px) rotateX(80deg); pointer-events: none; }
  .nav.p2 .nav-p2 { visibility: visible; } .nav.p2 .nav-p2 li { opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 28ms); }
  .nav { position: fixed; } .nav.p2 .nav-p1 { max-height: 0; overflow: hidden; transition: max-height 0s .5s; }
  .nav .nav-fs { display: block; margin: 0 4px 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #e8f6ee, #e7f0fb); }
  .nav-fs-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #12805c; text-transform: uppercase; letter-spacing: .06em; }
  .nav .nav-fs a { display: block !important; padding: 8px 0 2px !important; font-size: 15px !important; font-weight: 700; color: var(--ink); } .nav-fs a small { display: block; font-weight: 500; color: var(--mut); font-size: 12px; }
}
/* Schnell-Hinzufügen in der Kategorie */
.card { position: relative; }
.qa { position: absolute; z-index: 3; right: 18px; top: calc(12px + min(100% - 24px, 100%) - 58px); display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px rgba(31,116,192,.8); cursor: pointer; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .2s, transform .25s cubic-bezier(.2,1.3,.4,1), background .2s; }
.card .ci + .qa, .card > .qa { top: auto; }
.qa svg { width: 18px; height: 18px; } .qa b { font-size: 17px; line-height: 1; }
.card:hover .qa, .card:focus-within .qa, .qa:focus-visible { opacity: 1; transform: none; } .qa:hover { background: var(--brand-d); }
.qa.busy { opacity: .6 !important; } .qa.ok { background: var(--ok); opacity: 1; transform: none; }
@media (hover: none) { .qa { opacity: 1; transform: none; height: 36px; padding: 0 10px; } }
/* Fenster (Variante wählen, Anprobe-Hinweis) */
.sbm { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 16px; } .sbm[hidden] { display: none; }
.sbm-bg { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.sbm-box { position: relative; width: min(460px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 22px; padding: 26px 24px 22px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .22s, transform .3s cubic-bezier(.2,1.2,.4,1); }
.sbm.on .sbm-bg { opacity: 1; } .sbm.on .sbm-box { opacity: 1; transform: none; }
.sbm-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--soft); font-size: 20px; cursor: pointer; }
.sbm h3 { margin: 0 32px 6px 0; font-size: 19px; } .sbm-sub { margin: 0 0 12px; color: var(--mut); font-size: 14px; }
.sbm-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sbm-box { overflow-x: hidden; } .sbm-vars button { min-width: 0; } .sbm-vars b { font-size: 14.5px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.sbm-vars.long { grid-template-columns: 1fr; gap: 6px; } .sbm-vars.long button { flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; }
.sbm-vars.long b { flex: 1; font-size: 14px; font-weight: 600; } .sbm-vars.long span { white-space: nowrap; font-size: 13px; text-align: right; }
.sbm-vars.long button:not(:disabled)::after { content: '+'; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sbm-vars button { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sbm-vars button:hover:not(:disabled) { border-color: var(--brand); background: #f1f7fd; } .sbm-vars button:disabled { opacity: .45; cursor: not-allowed; } .sbm-vars span { font-size: 12px; color: var(--mut); }
.sbm-more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--brand); }
.sbm-ic { font-size: 40px; margin-bottom: 4px; } .sbm-try p { margin: 0 0 10px; }
.sbm-list { margin: 0 0 16px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.sbm-act { display: flex; flex-wrap: wrap; gap: 8px; } .sbm-act .btn { flex: 1 1 180px; justify-content: center; text-align: center; }
/* Geschenkverpackung */
.gift { margin: 14px 0; border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 0; overflow: hidden; }
.gift summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; } .gift summary::-webkit-details-marker { display: none; }
.gift-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fde7ef, #fff3d6); color: #c2185b; flex: none; } .gift-ic svg { width: 22px; height: 22px; }
.gift summary > span:nth-child(2) { flex: 1; } .gift summary small { display: block; color: var(--mut); font-size: 13px; } .gift summary em { color: #c2185b; font-style: normal; font-weight: 700; }
.gift-prev { display: flex; } .gift-prev img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--soft); margin-left: -8px; border: 2px solid #fff; transition: transform .25s; } .gift:hover .gift-prev img:first-child { transform: rotate(-8deg); } .gift:hover .gift-prev img:last-child { transform: rotate(6deg); }
.gift-styles { display: flex; gap: 12px; padding: 0 16px 6px; } .gift-styles figure { margin: 0; text-align: center; font-size: 13px; font-weight: 600; } .gift-styles img { width: 120px; height: 120px; object-fit: contain; background: var(--soft); border-radius: 14px; }
.gift-rows { list-style: none; margin: 0; padding: 6px 16px 14px; display: grid; gap: 8px; }
.gift-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; border-top: 1px solid var(--line); } .gift-n { flex: 1 1 200px; font-size: 14px; } .gift-n i { font-style: normal; color: var(--mut); }
.gift-seg { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; }
.gift-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: 600 13px var(--font); color: var(--mut); cursor: pointer; } .gift-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
/* Conversion-Booster an der Kasse */
.boost { position: relative; margin: 14px 0; padding: 16px; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang, 0deg), #1f74c0, #23b26d, #f5b301, #e8457a, #1f74c0) border-box; border: 2px solid transparent; animation: boostSpin 6s linear infinite, boostIn .6s cubic-bezier(.2,1.2,.4,1) both; box-shadow: 0 14px 40px -18px rgba(31,116,192,.55); }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes boostSpin { to { --ang: 360deg; } } @keyframes boostIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.boost-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .boost-hd b { font-size: 17px; } .boost-hd small { display: block; color: var(--mut); font-size: 13px; }
.boost-spark { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff4d6; color: #b37400; animation: boostPulse 2.2s ease-in-out infinite; } .boost-spark svg { width: 20px; height: 20px; }
@keyframes boostPulse { 50% { transform: scale(1.12) rotate(12deg); box-shadow: 0 0 0 8px rgba(245,179,1,.15); } }
.boost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.boost-it { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--soft); animation: boostIn .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(.15s + var(--i) * .09s); transition: transform .2s, box-shadow .2s; }
.boost-it:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(16,32,64,.45); }
.boost-img img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.boost-t b { display: block; font-size: 14.5px; } .boost-t span { display: block; font-size: 13px; line-height: 1.35; color: #3b4652; } .boost-t small { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); } .boost-t strong { color: var(--ink); }
.boost-add { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font: 700 22px/1 var(--font); cursor: pointer; animation: boostGlow 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
.boost-add:hover { transform: scale(1.08); } .boost-add.ok { background: var(--ok); animation: none; }
@keyframes boostGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,116,192,.45); } 50% { box-shadow: 0 0 0 9px rgba(31,116,192,0); } }
@media (prefers-reduced-motion: reduce) { .boost, .boost-it, .boost-add, .boost-spark { animation: none !important; } }
/* Startseite mobil (neu) */
.mh-fsopen { margin: 12px -4px 4px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #e6f6ed, #e8f1fc); box-shadow: inset 0 0 0 1px rgba(18,128,92,.15); }
.mh-fsopen-h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .mh-fsopen-h svg { width: 28px; height: 28px; color: #12805c; flex: none; }
.mh-fsopen-h b { display: block; font-size: 15px; } .mh-fsopen-h small { color: #3c4a57; font-size: 13px; }
.mh-fsl { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 6px; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 6px 16px -12px rgba(0,0,0,.35); }
.mh-fsl span { flex: 1; } .mh-fsl b { display: block; font-size: 15px; } .mh-fsl small { color: var(--mut); font-size: 12.5px; } .mh-fsl svg { color: #12805c; }
.mh-hero { padding: 20px 18px 16px; } .mh-hero .mh-t { font-size: 24px; margin-bottom: 6px; } .mh-hero p { margin: 0; font-size: 14.5px; }
.mh-chips { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -16px 0; padding: 2px 16px 6px; scrollbar-width: none; } .mh-chips::-webkit-scrollbar { display: none; }
.mh-chip { flex: 0 0 auto; width: 92px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink); text-decoration: none; }
.mh-chip span { width: 72px; height: 72px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.mh-chip img { width: 80%; height: 80%; object-fit: contain; } .mh-chip b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.mh-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .mh-h a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--brand); }
.mh-swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.mh-swipe::-webkit-scrollbar { display: none; } .mh-swipe > * { scroll-snap-align: start; min-width: 0; }
.mh-swipe .card { padding: 10px; } .mh-swipe .card .cn { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mh-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mh-tool { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--soft); color: var(--ink); text-decoration: none; }
.mh-tool svg { width: 26px; height: 26px; margin-bottom: 6px; } .mh-tool b { font-size: 14.5px; } .mh-tool small { color: var(--mut); font-size: 12.5px; }
.mh-tool.t-green { background: #e9f7ef; } .mh-tool.t-green svg { color: #12805c; } .mh-tool.t-blue { background: #e8f1fc; } .mh-tool.t-blue svg { color: var(--brand); }
.mh-tool.t-gold { background: #fff5e0; } .mh-tool.t-gold svg { color: #b26b00; } .mh-tool.t-violet { background: #f1ebfb; } .mh-tool.t-violet svg { color: #6d3fc0; }
.mh-swipe .mh-bund { grid-column: span 2; }
.mh-bund { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.mh-bimg { position: relative; height: 104px; margin-bottom: 6px; } .mh-bimg img { position: absolute; top: 4px; left: calc(var(--k) * 30%); width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); transform: rotate(calc((var(--k) - 1) * 6deg)); }
.mh-bund b { font-size: 15px; } .mh-bund small { color: var(--mut); }
.mh-two { display: grid; gap: 10px; } .mh-inst { background: #f2f4f7; }
/* Gratisartikel ab Bestellwert */
.free { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--soft); border: 1px dashed #c9d3df; }
.free-img img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: #fff; filter: grayscale(1); opacity: .55; transition: filter .4s, opacity .4s; }
.free-t b { display: block; font-size: 13.5px; } .free-t small { display: block; font-size: 12px; color: var(--mut); }
.free-bar { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: #dfe6ee; overflow: hidden; } .free-bar i { display: block; height: 100%; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, #1f74c0, #23b26d); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.free-p { font-size: 13px; color: var(--mut); }
.free.on { background: #ecf8f1; border: 1px solid #bfe3cc; } .free.on .free-img img { filter: none; opacity: 1; animation: freePop .6s cubic-bezier(.2,1.4,.4,1); } .free.on .free-bar { display: none; } .free.on .free-p { color: var(--ok); font-weight: 700; }
@keyframes freePop { from { transform: scale(.6) rotate(-12deg); } }

.gift-tip { flex: 1 1 220px; align-self: center; margin: 0; font-size: 13px; color: var(--mut); line-height: 1.45; }
.gift-sel { font: 500 13.5px var(--font); padding: 8px 30px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); max-width: 100%; }
.gift-sel.on { border-color: #e7a3bd; background: #fff5f8; color: #a3154c; font-weight: 600; }
.gift-no { font-size: 12.5px; color: var(--mut); }
.gift-boxes { list-style: none; margin: 0; padding: 10px 16px 14px; display: grid; gap: 8px; background: #fffafc; border-top: 1px dashed #f0c6d6; }
.gift-boxes li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .gift-boxes img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: #fff; }
.gift-boxes span { flex: 1; min-width: 0; } .gift-boxes small { display: block; color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chat-Assistent weicht der Kaufleiste aus */
.chat { transition: bottom .25s ease; }
body:has(.buybar:not([hidden])) .chat { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* Booster: Textmarker-Effekt und Konfetti */
.boost .hl { color: inherit; padding: 0 3px; margin: 0 -3px; border-radius: 3px 8px 4px 9px; background: linear-gradient(100deg, rgba(255,226,64,.15) 0%, rgba(255,222,40,.85) 6%, rgba(255,214,30,.7) 94%, rgba(255,226,64,.2) 100%) no-repeat 0 62% / 0% 72%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.boost.go .hl { animation: hlDraw .7s cubic-bezier(.45,.05,.3,1) var(--d, .3s) forwards; }
@keyframes hlDraw { to { background-size: 100% 72%; } }
.boost-it[data-confetti] { position: relative; overflow: visible; }
.cf { position: absolute; left: 50%; top: 40%; width: 7px; height: 11px; border-radius: 2px; pointer-events: none; z-index: 5; animation: cfFly 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
.cf.r { border-radius: 50%; width: 7px; height: 7px; }
@keyframes cfFly { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boost .hl { animation: none; background-size: 100% 72%; } .cf { display: none; } }
/* M33 Zahlungsstatus im Kundenkonto */
.ord-paybox { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; padding: 10px 14px; border-radius: 14px; font-size: 14px; background: #fff8e6; border: 1px solid #f3dfa6; }
.ord-paybox svg { width: 20px; height: 20px; flex: none; color: #9a6b00; } .ord-paybox > div { flex: 1; min-width: 0; } .ord-paybox small { display: block; color: var(--mut); font-size: 12.5px; }
.ord-paybox.ok { background: #ecf8f1; border-color: #bfe6cf; } .ord-paybox.ok svg { color: #1c8a4c; }
.ord-paybox.late { background: #fdeeee; border-color: #f2c4c4; } .ord-paybox.late svg { color: #c0392b; }

/* Schrift „Schlank“ (Einstellungen → Online-Shop → Schrift im Shop): DM Sans, Überschriften und Fettes eine Stufe leichter */
body.font-slim { --font: "DM Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-synthesis: none; letter-spacing: -.003em; }
body.font-slim :is(b, strong, th, summary b) { font-weight: 600; }
body.font-slim :is(h1, h2, h3, h4, .h1, .h2, .h3, legend, legend *) { font-weight: 500; }
body.font-slim :is(.h1, h1) { letter-spacing: -.015em; }
body.font-slim :is(.btn, .chip, label b, .co-sum b, .nav a, .tile b) { font-weight: 500; }
body.font-slim input, body.font-slim select, body.font-slim textarea, body.font-slim button { font-family: var(--font); }

/* Geschenkverpackung „aktuell nicht verfügbar“ */
.gift-na .gift-prev img { filter: grayscale(.8); opacity: .6; }
.gift-na-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 99px; background: #f1f3f6; color: #5b6573; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gift-req { display: grid; gap: 8px; padding: 0 16px 16px; } .gift-req p { margin: 0; font-size: 13.5px; color: #3b4652; }
.gift-req-row { display: flex; flex-wrap: wrap; gap: 8px; } .gift-req-row input { flex: 1 1 220px; }
.gift-req input, .gift-req select, .gift-req textarea { font: 15px var(--font); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; box-sizing: border-box; }
.gift-req textarea { width: 100%; resize: vertical; } .gift-req .btn { justify-self: start; }
.gift-req-msg.ok { color: #135c33; font-weight: 600; } .gift-req-msg.err { color: #b42318; }
body.font-slim .co :is(label, .label, .co-seg2 label) { font-weight: 500; }

/* Fußzeile: Zahlarten automatisch, Stripe-Hinweis, Packstation */
.ft .pay a { display: inline-flex; } .ft .pay-txt { display: inline-flex; align-items: center; height: 30px; padding: 0 8px; border-radius: 6px; background: #fff; color: #1f2933; font: 700 11px/1 var(--font); }
.ft .pay-via { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,.7); } .ft .pay-via img { height: 18px; width: auto; background: #fff; border-radius: 4px; padding: 2px 5px; }
/* Schlanke Schrift: Navigation etwas größer, damit sie nicht zu klein wirkt */
body.font-slim .nav > ul > li > a { font-size: 16.5px; letter-spacing: .005em; }
body.font-slim .tool-tx b { font-size: 15.5px; } body.font-slim .ft a, body.font-slim .ft li { font-size: 15.5px; }
body.has-buybar .chat { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }

/* DHL Packstation / Postfiliale im Checkout */
.co-seg label:has(input[value=packstation]:checked), .co-seg label:has(input[value=postfiliale]:checked) { border-color: #d40511; background: #fff6cc; color: #1a1a1a; box-shadow: 0 0 0 2px rgba(255,204,0,.55); }
.dhl-box { margin: 12px 0; padding: 0 16px 16px; border-radius: 16px; background: #fffbea; border: 1px solid #f5d35c; display: grid; gap: 12px; }
.dhl-box-h { display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 12px 16px; border-radius: 15px 15px 0 0; background: #ffcc00; }
.dhl-box-h > img:first-child { background: #fff; border-radius: 6px; padding: 4px 6px; width: 58px; height: auto; }
.dhl-box-h span { flex: 1; min-width: 0; } .dhl-box-h b { display: block; color: #1a1a1a; font-size: 15px; } .dhl-box-h small { display: block; color: #4a3b00; font-size: 12.5px; }
.dhl-box-h .dhl-ps { width: 64px; height: auto; border-radius: 6px; }
.dhl-box input { background: #fff; }
.dhl-find { justify-self: start; background: #d40511 !important; color: #fff !important; border-color: #d40511 !important; padding: 10px 16px !important; font-weight: 600; }
.dhl-find svg { color: #fff; }
.dhl-box .lf-list { max-height: 440px; gap: 8px; }
.dhl-box .lf-it { background: #fff; border: 1px solid #ecd27a; border-left: 4px solid #ffcc00; border-radius: 12px; padding: 12px 14px; }
.dhl-box .lf-it:hover, .dhl-box .lf-it.on { border-color: #d40511; border-left-color: #d40511; background: #fffdf3; }
.dhl-box .lf-it em { color: #d40511; font-style: normal; font-weight: 700; }
@media (max-width: 560px) { .dhl-box-h .dhl-ps { display: none; } }

/* ===================== Wissensdatenbank ===================== */
.kb { --kb-ink: #1b2430; --kb-acc: #1f74c0; color: var(--kb-ink); }
.kb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kb-draft { margin: 0; padding: 8px 16px; background: #fff4d6; color: #7a5600; text-align: center; font-size: 13.5px; font-weight: 600; }
.kb-t-start { --t: #7c3aed; --tb: #f3edff; } .kb-t-kittel { --t: #0f8a5f; --tb: #e7f7ef; } .kb-t-instrumente { --t: #1f74c0; --tb: #e8f2fc; } .kb-t-labor { --t: #c2410c; --tb: #fdf0e8; }
/* Startseite */
.kb-hero { padding-bottom: 8px; }
.kb-eyebrow { margin: 18px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kb-acc); }
.kb-hero h1 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.02em; max-width: 30ch; color: var(--navy); }
.kb-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; align-items: center; } .kb-hero-in > img { width: 220px; height: 220px; border-radius: 28px; background: #f3f7fc; } @media (max-width: 760px) { .kb-hero-in { grid-template-columns: 1fr; } .kb-hero-in > img { display: none; } }
.kb-intro { max-width: 68ch; font-size: 16.5px; line-height: 1.6; color: #3a4654; } .kb-intro p { margin: 0 0 10px; }
.kb-search { position: relative; max-width: 560px; margin: 18px 0 22px; } .kb-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mut); }
.kb-search input { width: 100%; box-sizing: border-box; font: 16px var(--font); padding: 14px 16px 14px 42px; border: 1px solid #cfd6df; border-radius: 14px; background: #fff; }
.kb-search input:focus { outline: none; border-color: var(--kb-acc); box-shadow: 0 0 0 3px rgba(31,116,192,.15); }
.kb-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kb-door { display: grid; grid-template-columns: 44px 1fr; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--tb); color: var(--kb-ink); text-decoration: none; border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.kb-door:hover { border-color: var(--t); transform: translateY(-1px); }
.kb-door-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--t); display: grid; place-items: center; } .kb-door-ic svg { width: 22px; height: 22px; }
.kb-door b { font-size: 15.5px; line-height: 1.25; } .kb-door small { color: #5b6573; font-size: 12.5px; }
.kb-list { padding-top: 10px; padding-bottom: 40px; }
.kb-sec { margin-top: 34px; scroll-margin-top: 110px; }
.kb-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; color: var(--navy); }
.kb-sec-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--tb); color: var(--t); display: grid; place-items: center; } .kb-sec-ic svg { width: 17px; height: 17px; }
.kb-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kb-rows li { border-bottom: 1px solid var(--line); }
.kb-rows a { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 14px 4px; color: inherit; text-decoration: none; }
.kb-rows a:hover b { color: var(--kb-acc); }
.kb-rows img { width: 72px; height: 72px; border-radius: 12px; background: #f7f8fa; object-fit: cover; }
.kb-row-t b { display: block; font-size: 16.5px; line-height: 1.3; margin-bottom: 3px; transition: color .15s; }
.kb-row-t span { display: block; color: #55606d; font-size: 14px; line-height: 1.45; }
.kb-row-m { color: var(--mut); font-size: 12.5px; white-space: nowrap; }
.kb-none { margin: 30px 0; color: #55606d; }
.kb-foot { margin: 34px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--mut); max-width: 80ch; }
/* Artikel */
.kb-head { padding-bottom: 6px; }
.kb-topic { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 4px 10px; border-radius: 99px; background: var(--tb); color: var(--t); font-size: 12.5px; font-weight: 700; text-decoration: none; } .kb-topic svg { width: 14px; height: 14px; }
.kb-head h1 { margin: 10px 0 8px; font-size: clamp(27px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.02em; max-width: 28ch; color: var(--navy); }
.kb-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--mut); font-size: 13.5px; } .kb-meta span { display: inline-flex; align-items: center; gap: 5px; } .kb-meta svg { width: 15px; height: 15px; }
.kb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; padding-top: 18px; padding-bottom: 40px; align-items: start; }
.kb-main { max-width: 74ch; min-width: 0; }
.kb-short { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; padding: 20px 22px; border-radius: 18px; background: #f3f7fc; border-left: 5px solid var(--kb-acc); }
.kb-short-h { margin: 0 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-acc); }
.kb-short p { margin: 0; font-size: 17.5px; line-height: 1.6; color: #22303f; }
.kb-short figure { margin: 0; width: 200px; } .kb-short img { width: 200px; height: 200px; border-radius: 14px; background: #fff; display: block; }
.kb-short figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--mut); }
.kb-toc-m { display: none; }
.kb-body { counter-reset: kbh; font-size: 17px; line-height: 1.7; }
.kb-body h2 { counter-increment: kbh; position: relative; margin: 2.1em 0 .5em; padding-top: 18px; border-top: 1px solid var(--line); font-size: 24px; line-height: 1.25; color: var(--navy); scroll-margin-top: 110px; }
.kb-body h2::before { content: counter(kbh, decimal-leading-zero); display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--kb-acc); }
.kb-body h3 { margin: 1.5em 0 .35em; font-size: 19px; color: #24324a; }
.kb-body p { margin: 0 0 1em; } .kb-body a { color: var(--kb-acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kb-body a.kb-ext::after, .kb-src a.kb-ext::after { content: '↗'; margin-left: 2px; font-size: .8em; text-decoration: none; display: inline-block; }
.kb-body ul, .kb-body ol { margin: 0 0 1.1em; padding-left: 1.3em; } .kb-body li { margin: .3em 0; } .kb-body li::marker { color: var(--kb-acc); font-weight: 700; }
.kb-body ol { list-style: none; padding: 0; counter-reset: kbo; } .kb-body ol > li { counter-increment: kbo; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px dashed #e3e7ec; margin: 0; }
.kb-body ol > li::before { content: counter(kbo); position: absolute; left: 0; top: 9px; width: 28px; height: 28px; border-radius: 50%; background: #e8f2fc; color: var(--kb-acc); font: 700 14px/28px var(--font); text-align: center; }
.kb-tbl { overflow-x: auto; margin: 1.2em 0 1.4em; border: 1px solid var(--line); border-radius: 14px; }
.kb-tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.kb-tbl th { background: #f4f6f9; text-align: left; padding: 10px 14px; font-size: 13px; letter-spacing: .02em; color: #3d4a5a; border-bottom: 1px solid var(--line); }
.kb-tbl td { padding: 11px 14px; border-bottom: 1px solid #eef1f4; vertical-align: top; } .kb-tbl tr:last-child td { border-bottom: 0; } .kb-tbl td:first-child { font-weight: 600; color: #24324a; }
.kb-body dl { margin: 0; } .kb-body dt { margin-top: 16px; font-weight: 700; color: var(--navy); font-size: 17.5px; } .kb-body dd { margin: 4px 0 0; padding-left: 14px; border-left: 3px solid #e8f2fc; }
.kb-faq { margin-top: 2.4em; padding: 22px 24px; border-radius: 18px; background: #fbfaf6; border: 1px solid #efe9d8; }
.kb-faq h2 { margin: 0 0 8px; font-size: 22px; color: var(--navy); } .kb-faq dl { margin: 0; } .kb-faq div { padding: 14px 0; border-top: 1px solid #efe9d8; } .kb-faq div:first-child { border-top: 0; }
.kb-faq dt { font-weight: 700; font-size: 16.5px; color: #24324a; } .kb-faq dt::before { content: 'F '; color: #b07a00; font-weight: 800; }
.kb-faq dd { margin: 6px 0 0; font-size: 16px; line-height: 1.65; color: #3a4654; } .kb-faq dd p { margin: 0 0 .6em; } .kb-faq a { color: var(--kb-acc); }
.kb-next { margin-top: 2.4em; } .kb-next h2, .kb-src h2 { font-size: 20px; margin: 0 0 12px; color: var(--navy); }
.kb-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kb-next-grid a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.kb-next-grid a:hover { border-color: var(--kb-acc); background: #f7fafe; } .kb-next-grid img { width: 56px; height: 56px; border-radius: 10px; flex: none; background: #f7f8fa; }
.kb-next-grid b { display: block; font-size: 15px; line-height: 1.3; } .kb-next-grid small { display: block; margin-top: 3px; color: #5b6573; font-size: 13px; line-height: 1.4; }
.kb-src { margin-top: 2.4em; padding: 18px 20px; border-radius: 14px; background: #f6f7f9; font-size: 14px; line-height: 1.6; color: #4a5562; }
.kb-src h2 { display: flex; align-items: center; gap: 8px; font-size: 16px !important; } .kb-src h2 svg { width: 18px; height: 18px; color: var(--mut); }
.kb-src p { margin: 0 0 .7em; } .kb-src ul { margin: 0; padding-left: 1.1em; } .kb-src a { color: #2b5f93; }
.kb-side { position: sticky; top: 120px; display: grid; gap: 22px; font-size: 14px; }
.kb-side p { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.kb-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.kb-toc a { display: block; padding: 5px 0 5px 12px; margin-left: -2px; border-left: 2px solid transparent; color: #4a5562; text-decoration: none; line-height: 1.35; }
.kb-toc a:hover { color: var(--kb-acc); } .kb-toc a.on { border-left-color: var(--kb-acc); color: var(--kb-acc); font-weight: 600; }
.kb-sib ul { list-style: none; margin: 0; padding: 0; } .kb-sib li a { display: block; padding: 6px 0; color: #34404d; text-decoration: none; border-bottom: 1px solid #f0f2f5; line-height: 1.35; } .kb-sib li a:hover { color: var(--kb-acc); }
.kb-sib-all { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--kb-acc); text-decoration: none; }
.kb-shop { margin-top: 10px; padding: 26px 0 34px; background: var(--soft); border-top: 1px solid var(--line); }
.kb-shop h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 18px; color: #3d4a5a; } .kb-shop h2 svg { width: 18px; height: 18px; }
@media (max-width: 960px) {
  .kb-doors { grid-template-columns: 1fr 1fr; } .kb-grid { grid-template-columns: 1fr; gap: 0; } .kb-side { display: none; }
  .kb-toc-m { display: block; margin: 18px 0 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; } .kb-toc-m summary { font-weight: 700; cursor: pointer; } .kb-toc-m ol { margin: 8px 0 0; padding-left: 1.2em; } .kb-toc-m a { color: #34404d; }
}
@media (max-width: 640px) {
  .kb-short { grid-template-columns: 1fr; } .kb-short figure { width: 100%; display: flex; gap: 12px; align-items: center; } .kb-short img { width: 120px; height: 120px; } .kb-short figcaption { margin: 0; }
  .kb-rows a { grid-template-columns: 56px 1fr; } .kb-rows img { width: 56px; height: 56px; } .kb-row-m { display: none; }
  .kb-next-grid { grid-template-columns: 1fr; } .kb-body { font-size: 16.5px; } .kb-doors { grid-template-columns: 1fr; }
}

/* Sprachumschalter */
.langsw { position: relative; } .langsw summary { list-style: none; display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--ink); font: 600 13px var(--font); }
.langsw summary::-webkit-details-marker { display: none; } .langsw summary:hover { background: var(--soft); } .langsw summary svg { width: 20px; height: 20px; }
.langsw ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(16,32,64,.4); }
.langsw a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; } .langsw a:hover { background: var(--soft); }
.langsw a b { width: 24px; font-size: 12px; color: var(--mut); } .langsw a[aria-current] { background: #e8f2fc; color: var(--brand-d); font-weight: 600; }
@media (max-width: 960px) { .langsw summary span { display: none; } }
.ft h3 a { color: #fff; } .ft .ft-more { color: #fff; font-weight: 600; }
/* Rechtstexte / Umwelt */
.legal-page h1 { display: flex; align-items: center; gap: 10px; } .legal-page h1 svg { width: 30px; height: 30px; color: #23803f; }
.legal-body { max-width: 78ch; font-size: 16px; line-height: 1.7; } .legal-body h2 { margin: 1.8em 0 .5em; font-size: 22px; color: var(--navy); } .legal-body h3 { margin: 1.3em 0 .3em; font-size: 18px; }
.legal-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 15px; } .legal-body th, .legal-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .legal-body th { background: var(--soft); }
.legal-body ul.docs { list-style: none; padding: 0; display: grid; gap: 8px; } .legal-body ul.docs li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; } .legal-body ul.docs a { font-weight: 600; color: var(--brand); }

/* Fußzeile: Vertrauens-Badges, „Erstellt mit ♥ in der Pfalz“ */
.ft-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 6px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 18px; }
.ft-badges { display: flex; align-items: center; gap: 10px; } .ft-badges img { height: 34px; width: auto; border-radius: 6px; opacity: .92; } .ft-badges img:hover { opacity: 1; }
.ft-made { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.7); } .ft-heart { color: #ff5a7a; } .ft-made img { width: 16px; height: 16px; }
@media (max-width: 640px) { .ft-trust { justify-content: center; } .ft-badges img { height: 30px; } }
/* Widerruf ohne Anmeldung */
.rf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.rf .rp-card { max-width: none; }
.rf-items { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; } .rf-items legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--navy); }
.rf-items .linkbtn { justify-self: start; color: var(--brand-d); font-weight: 600; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.rf-more { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; } .rf-more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--navy); }
.rf-more[open] summary { margin-bottom: 10px; } .rf-plz { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.rf-req { font-size: 12.5px; }
.rf-side { display: grid; gap: 12px; position: sticky; top: 90px; }
.rf-box { background: var(--soft); border-radius: 16px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; color: #374151; }
.rf-box h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 14.5px; color: var(--navy); } .rf-box h3 svg { width: 18px; height: 18px; color: var(--brand-d); }
.rf-box p { margin: 0 0 6px; } .rf-box p:last-child { margin: 0; } .rf-box .rp-addr { background: #fff; margin: 6px 0; font-size: 13px; }
.rf-box a { color: var(--brand-d); text-decoration: underline; } .rf-small { background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.rf-done { align-items: flex-start !important; } .rf-done h2 { margin: 0 0 6px; } .rf-done p { margin: 0 0 8px; }
@media (max-width: 900px) { .rf-grid { grid-template-columns: 1fr; } .rf-side { position: static; } }
/* Pflichtangaben am Artikel */
.bprice { font-size: 13px; color: #4b5563; margin: 2px 0 0; } .bprice span { font-weight: 600; color: var(--ink); } .bprice small { color: var(--mut); }
.pd-legal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 22px; align-items: start; border-top: 1px solid var(--line); padding-top: 22px; }
.pd-legal h2 { font-size: 18px; margin: 0 0 10px; } .pd-legal h3 { font-size: 14.5px; margin: 14px 0 6px; color: var(--navy); }
.pd-safe dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin: 0; font-size: 13.5px; line-height: 1.5; }
.pd-safe dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin-bottom: 2px; } .pd-safe dd { margin: 0; color: #374151; }
.pd-safe a, .pd-guar a { color: var(--brand-d); text-decoration: underline; text-underline-offset: 2px; }
.pd-safe ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: #374151; } .pd-safe li + li { margin-top: 4px; }
.pd-guar { background: var(--soft); border-radius: 18px; padding: 14px; } .pd-guar h2 { font-size: 15px; }
.pd-guar-img { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: box-shadow .2s; } .pd-guar-img:hover { box-shadow: 0 10px 26px -14px rgba(16,32,64,.4); }
.pd-guar-img img { display: block; width: 100%; height: auto; }
.pd-guar p { font-size: 12.5px; color: #4b5563; margin: 8px 2px 0; line-height: 1.45; }
@media (max-width: 800px) { .pd-legal { grid-template-columns: 1fr; } .pd-guar { max-width: 420px; } }
.ft-badges .reclay { height: 26px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }
.umw-lic { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--soft); border-radius: 14px; padding: 12px 16px; margin: 12px 0; font-size: 14px; } .umw-lic img { height: 40px; width: auto; }
.rf-done[hidden] { display: none !important; }
.rf-form, .rf-done { grid-column: 1; } .rf-side { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) { .rf-side { grid-column: 1; grid-row: auto; } }
.pd-legal-g { grid-template-columns: minmax(240px, 380px); }
.pd-legal-s .pd-legal { grid-template-columns: 1fr; }
.fsr-opts .fsr-chk { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.45; cursor: pointer; }
.fsr-opts .fsr-chk input { width: 18px !important; height: 18px; min-height: 0; flex: none; margin: 2px 0 0; padding: 0; }
.fsr-opts .fsr-chk span { flex: 1; min-width: 0; }
/* Kategorie-Kreise (mobil): Produktbilder mit weißem Hintergrund verschmelzen mit der Kreisfarbe */
.mh-chips { gap: 6px; }
.mh-chip { width: 88px; gap: 7px; }
.mh-chip span { width: 70px; height: 70px; background: radial-gradient(circle at 50% 40%, #f4f8fd 0%, #e6eef8 100%); box-shadow: none; isolation: isolate; transition: transform .15s; }
.mh-chip:active span { transform: scale(.95); }
.mh-chip img { width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.mh-chip b { font-size: 11.5px; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; color: var(--navy); }
/* Kaufleiste wirklich ausblenden (display:flex überschrieb [hidden]) – Chat & Scroll-Knöpfe weichen nur aus, wenn sie sichtbar ist */
.buybar[hidden] { display: none !important; }
body.has-buybar .chat { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
body.has-buybar .scrollbtns { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 960px) { body:not(.has-buybar) .chat { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }
/* Geschenkboxen in der Kasse: Inhalt umbrechen, ein Artikel je Zeile */
.gift-boxes li { align-items: flex-start; } .gift-boxes img { margin-top: 2px; }
.gift-boxes small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: grid !important; gap: 2px; margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.gift-boxes small span::before { content: "– "; color: #d6a2b8; }
.gift-boxes .gift-bx-p { white-space: nowrap; flex: none; }
.pd-legal-s .pd-guar { max-width: 420px; }
/* Packstation/Postfiliale: Postnummer breit, 3-stellige Nummer schmal, beide auf einer Linie */
.dhl-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 6px 12px; align-items: end; }
.dhl-row label { display: grid; gap: 6px; margin: 0; min-width: 0; }
.dhl-row input { height: 48px; box-sizing: border-box; margin: 0; width: 100%; }
.dhl-row .dhl-st input { text-align: center; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.dhl-pn-help { grid-column: 1 / -1; margin-top: -2px; color: #6b5a14; font-size: 12px; }
@media (max-width: 420px) { .dhl-row { grid-template-columns: minmax(0, 1fr) 96px; } }
/* Fußzeile: Preis-Hinweis so klein wie der Copyright-Hinweis; Prüf-Logos gleich groß */
.ft-bot, .ft-bot a, .ft-bot .linkbtn, .ft-bot span { font-size: 12.5px !important; line-height: 1.5; }
.ft-badges { gap: 8px; } .ft-badges a { display: inline-flex; }
.ft-badges img, .ft-badges .reclay { height: 34px !important; width: 78px !important; object-fit: contain; box-sizing: border-box; border-radius: 6px; background: #fff; padding: 3px 6px !important; }
@media (max-width: 640px) { .ft-badges img, .ft-badges .reclay { height: 30px !important; width: 70px !important; } }
/* Startseite: Fenster „Empfohlenes Bundle“ – Variablen fehlten außerhalb von .bnd-wrap (eckig, ohne Rahmen) */
.bnd-modal-overlay { --bnd-radius: 22px; --bnd-primary: #1f74c0; --bnd-primary-dk: #16325c; --bnd-primary-lt: #eef5fc; --bnd-border: #e3e9f2; --bnd-bg: #f6f9fc; --bnd-text: #1f2a44; --bnd-text-muted: #5b6573; --bnd-med: #1f74c0; --bnd-bio: #22a06b; --bnd-shadow-lg: 0 30px 80px -24px rgba(15,23,42,.45); }
.bnd-modal-overlay .bnd-modal { border-radius: 22px; overflow: hidden auto; }
.bnd-modal-overlay .bnd-modal__header { border-radius: 22px 22px 0 0; }
.bnd-modal-overlay .bnd-modal__intro { margin: 1rem 1.25rem .25rem; border: 0; border-radius: 14px; background: var(--bnd-primary-lt); color: #374151; }
.bnd-modal-overlay .bnd-modal__item { border-radius: 16px; border: 1px solid var(--bnd-border); }
.bnd-modal-overlay .bnd-modal__item:hover { transform: none; box-shadow: 0 10px 24px -16px rgba(16,32,64,.35); }
.bnd-modal-overlay .bnd-modal__item img { border-radius: 12px; }
.bnd-modal-overlay .bnd-modal__item-arrow { font-size: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bnd-primary-lt); display: grid; place-items: center; flex: none; transition: background .15s, transform .15s; }
.bnd-modal-overlay .bnd-modal__item-arrow::before { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--bnd-primary); border-right: 2px solid var(--bnd-primary); transform: translateX(-1px) rotate(45deg); }
.bnd-modal-overlay .bnd-modal__item:hover .bnd-modal__item-arrow { background: var(--bnd-primary); transform: none; } .bnd-modal-overlay .bnd-modal__item:hover .bnd-modal__item-arrow::before { border-color: #fff; }
.bnd-modal-overlay .bnd-modal__close { border-radius: 12px; }
.bnd-modal-overlay .bnd-modal__footer { border-top: 0; padding-bottom: .5rem; }
.bnd-modal-overlay .sb-bundle-cta { display: flex; justify-content: center; margin: 4px 1.25rem 1.25rem !important; padding: 13px 18px; border-radius: 14px; background: #16325c !important; background-image: none !important; color: #fff !important; font-weight: 700; text-shadow: none; box-shadow: 0 10px 24px -14px rgba(22,50,92,.7); }
.bnd-modal-overlay .sb-bundle-cta:hover { background: #1f4a85 !important; }
/* Anfragekorb: Formular „Angebot an“ oben bündig (eine andere Regel machte aus sticky ein relative + 90px Versatz) */
.qt-form.konto-login { position: sticky; top: 90px; }
@media (max-width: 900px) { .qt-form.konto-login { position: static; } }
/* 0.50 Gutschein / Freunde werben */
.co-vc { margin-top: 10px; font-size: 13.5px; } .co-vc summary { cursor: pointer; color: var(--brand-d); font-weight: 600; } .co-vc-in { display: flex; gap: 8px; margin-top: 8px; } .co-vc-in input { flex: 1; min-width: 0; text-transform: uppercase; }
.co-vc .ok { color: var(--ok, #188038); } .co-vc .err { color: var(--bad, #c5221f); } .co-vc .linkbtn { text-decoration: underline; color: inherit; margin-left: 6px; } .co-vc .linkbtn:hover { color: var(--bad, #c5221f); }
.rf-box { margin: 18px 0; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, #eef6ff, #f3fbf3); border: 1px solid var(--line); display: grid; gap: 12px; }
.rf-box h2 { margin: 0; font-size: 20px; } .rf-box p { margin: 0; } .rf-code { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rf-code code { font-size: 18px; font-weight: 800; letter-spacing: .06em; padding: 8px 14px; border-radius: 12px; background: #fff; border: 1px dashed var(--brand-d); }
.rf-share { display: flex; flex-wrap: wrap; gap: 8px; } .rf-share .btn { display: inline-flex; align-items: center; gap: 6px; } .rf-wa { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
.rf-land { max-width: 760px; margin: 0 auto; text-align: center; padding: 40px 16px 60px; } .rf-gift { font-size: 64px; line-height: 1; animation: rfpop .7s cubic-bezier(.2,1.6,.4,1) both; } @keyframes rfpop { from { transform: scale(.3) rotate(-15deg); opacity: 0; } }
.rf-land h1 { margin: 14px 0 8px; } .rf-land .rf-amt { color: var(--brand-d); } .rf-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0; } .rf-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; text-align: left; margin-top: 26px; } .rf-steps div { padding: 14px; border-radius: 16px; background: var(--soft, #f5f7fa); } .rf-steps b { display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .rf-steps { grid-template-columns: 1fr; } }
/* 0.51 Warenkorb teilen & Sammelbestellung */
.sh-box { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fbfcfe; display: grid; gap: 12px; } .sh-h { display: grid; gap: 2px; }
.sh-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sh-opt { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; cursor: pointer; display: grid; gap: 4px; font: inherit; color: inherit; } .sh-opt span { font-size: 13px; color: var(--muted, #6b7280); } .sh-opt.on, .sh-opt:hover { border-color: var(--brand-d); box-shadow: 0 0 0 1px var(--brand-d); }
.sh-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .sh-form label { display: grid; gap: 4px; font-size: 13px; flex: 1; min-width: 180px; } .sh-form .err:empty { display: none; }
.sh-link { display: flex; gap: 8px; } .sh-link input { flex: 1; min-width: 0; } .sh-done { display: grid; gap: 10px; } .sh-done a { word-break: break-all; }
@media (max-width: 640px) { .sh-opts { grid-template-columns: 1fr; } }
.ls { max-width: 980px; } .ls-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; } .ls-items { display: grid; gap: 10px; margin: 16px 0; }
.ls-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .ls-it img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #f5f6f8; }
.ls-it .t { display: grid; gap: 3px; } .ls-it small { color: var(--muted, #6b7280); } .ls-tier { font-size: 12.5px; color: var(--brand-d); } .ls-it select, .ls-it input[type=number] { max-width: 150px; }
.ls-q { display: flex; gap: 8px; align-items: center; } .ls-q input { width: 64px; }
.ls-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px; border-radius: 16px; background: var(--navy, #1f2a44); color: #fff; z-index: 5; } .ls-bar input { min-width: 180px; }
.ls-people { display: grid; gap: 10px; } .ls-p { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; } .ls-p h3 { margin: 0 0 6px; display: flex; justify-content: space-between; font-size: 15px; } .ls-p li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 2px 0; }
.ls-save { padding: 12px 14px; border-radius: 14px; background: #e9f7ee; color: #14532d; } .ls-next { padding: 10px 14px; border-radius: 14px; background: #fff7e6; color: #7a4b00; font-size: 13.5px; }
@media (max-width: 640px) { .ls-it { grid-template-columns: 52px minmax(0, 1fr); } .ls-it > :last-child { grid-column: 1 / -1; } .ls-it img { width: 52px; height: 52px; } }
.sh-box [hidden], .ls [hidden] { display: none !important; }
.sh-box input, .ls input:not([type=checkbox]), .ls select, .co-vc input { font: 16px var(--font); border: 1px solid #cfd6df; border-radius: 12px; padding: 10px 12px; box-sizing: border-box; background: #fff; color: var(--ink); }
.sh-box input:focus, .ls input:focus, .ls select:focus, .co-vc input:focus { outline: none; border-color: #2b8ad6; box-shadow: 0 0 0 3px rgba(43,138,214,.18); }
.ls-bar input { color: var(--ink); } .ls .ok { color: #188038; } .ls .err { color: #c5221f; } .ls .badge { padding: 4px 10px; border-radius: 99px; background: #e8f0fe; color: #1a56db; font-size: 13px; font-weight: 600; }
.ls-p ul { list-style: none; padding: 0; margin: 0; }
.tier-hint { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: #eef6ff; color: #1f3b63; }
/* 0.52 Sammelbestellung mit Reservierung */
.pool-note { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #f3efff; color: #3b2a72; font-size: 14px; } .pool-note a { color: inherit; text-decoration: underline; margin-left: 4px; }
.pl-bar { height: 14px; border-radius: 99px; background: #ece8f7; overflow: hidden; } .pl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c5cff, #22c55e); transition: width .8s; }
.pl-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); margin: 14px 0; }
.pl-cd { display: flex; gap: 8px; } .pl-cd span { min-width: 58px; text-align: center; padding: 8px 6px; border-radius: 12px; background: var(--navy, #1f2a44); color: #fff; font-weight: 800; font-size: 22px; line-height: 1; } .pl-cd small { display: block; font-size: 10.5px; font-weight: 600; opacity: .75; margin-top: 4px; }
.pl-ppl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pl-ppl span { padding: 4px 10px; border-radius: 99px; background: #f1f3f6; font-size: 13px; } .pl-ppl span.m { background: #efe9ff; }
.pl-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; } .pl-how div { padding: 12px 14px; border-radius: 14px; background: #f7f8fa; font-size: 13.5px; } .pl-how b { display: block; }
@media (max-width: 700px) { .pl-top { grid-template-columns: 1fr; } .pl-how { grid-template-columns: 1fr; } }
/* 0.53 Sammelbestellung: Animation, Spar-Rechner, mobil */
@keyframes plIn { from { opacity: 0; transform: translateY(12px); } } @keyframes plPop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } } @keyframes plTick { 0% { transform: translateY(-4px); opacity: .4; } }
@keyframes plGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); } 50% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } } @keyframes plShine { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.pl-in { animation: plIn .6s cubic-bezier(.2,.8,.2,1) both; }
.pl-hero { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 22px; align-items: center; padding: 22px; margin: 16px 0; border-radius: 24px; background: linear-gradient(135deg, #f5f1ff, #eefaf3); border: 1px solid #e5def9; }
.pl-hero.won { animation: plIn .6s both, plGlow 2.4s 1s 3; }
.pl-save { display: grid; gap: 2px; } .pl-save b { font-size: clamp(30px, 6vw, 42px); line-height: 1.05; color: #15803d; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .pl-save small, .pl-time small { color: #5b5670; font-size: 12.5px; }
.pl-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 8px; } .pl-row b { font-size: 18px; }
.pl-bar { height: 14px; border-radius: 99px; background: rgba(124,92,255,.14); overflow: hidden; } .pl-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c5cff, #22c55e, #7c5cff); background-size: 200% 100%; transition: width 1.4s cubic-bezier(.2,.8,.2,1); animation: plShine 3s linear infinite; }
.pl-ppl span { animation: plPop .45s cubic-bezier(.2,1.4,.4,1) both; }
.pl-time { display: grid; gap: 6px; justify-items: center; }
.pl-cd { display: flex; gap: 6px; } .pl-cd span { min-width: 54px; text-align: center; padding: 9px 4px 7px; border-radius: 14px; background: #1f2a44; color: #fff; font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .pl-cd span.tick { animation: plTick .35s ease; }
.pl-cd small { display: block; font-size: 10px; font-weight: 600; opacity: .7; margin-top: 4px; } .pl-cd.urgent span { background: #b42318; }
.pl-cd.sm span { min-width: 42px; font-size: 16px; padding: 7px 3px 5px; border-radius: 10px; }
.pl-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; } .pl-how div { position: relative; padding: 14px 14px 14px 52px; border-radius: 16px; background: #f7f8fa; font-size: 13.5px; } .pl-how b { display: block; }
.pl-how i { position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #7c5cff; color: #fff; }
.pl-step { display: inline-flex; align-items: center; border: 1px solid #cfd6df; border-radius: 12px; overflow: hidden; background: #fff; } .pl-step button { width: 40px; height: 44px; border: 0; background: #f4f5f8; font-size: 20px; cursor: pointer; color: var(--ink); }
.pl .pl-step input { width: 54px; border: 0 !important; border-radius: 0 !important; text-align: center; box-shadow: none !important; padding: 10px 4px !important; -moz-appearance: textfield; } .pl-step input::-webkit-outer-spin-button, .pl-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pl-calc { position: sticky; bottom: 10px; z-index: 6; display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; padding: 14px 18px; border-radius: 20px; background: #1f2a44; color: #fff; box-shadow: 0 18px 40px -16px rgba(15,23,42,.6); animation: plIn .4s both; }
.pl-calc small { display: block; font-size: 12px; opacity: .75; } .pl-calc b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .pl-calc s { opacity: .8; }
.pl-c2.pop .pl-sv { animation: plPop .4s cubic-bezier(.2,1.4,.4,1); } .pl-sv { color: #4ade80; }
.pl-go { justify-self: end; } .pl-note { grid-column: 1 / -1; margin: 0; opacity: .75; } .pl-note:empty { display: none; }
.pl-sh { margin-top: 16px; } .pl-admin { margin-top: 16px; padding: 16px; display: grid; gap: 8px; } .pl-legal { margin-top: 22px; } .pl-legal a { color: inherit; }
.pool-note { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(135deg, #f5f1ff, #eefaf3); border: 1px solid #e5def9; animation: plIn .5s both; }
.pool-note .pn-t { display: grid; gap: 4px; flex: 1 1 320px; } .od-pool .pl-cd { margin: 6px 0; }
.legal-extra { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.sh-wrap { margin: 14px 0; } .sh-wrap > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-d); font-size: 14px; } .sh-wrap > summary::-webkit-details-marker { display: none; } .sh-wrap[open] > summary { margin-bottom: 4px; }
@media (max-width: 760px) {
  .pl-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .pl-time { justify-items: start; } .pl-how { grid-template-columns: 1fr; }
  .pl-calc { position: fixed; left: 10px; right: 10px; bottom: 10px; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 12px 14px; } .pl-go { grid-column: 1 / -1; justify-self: stretch; } .pl-calc b { font-size: 19px; }
  .pl form { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { .pl-in, .pl-ppl span, .pl-calc, .pool-note, .pl-hero.won { animation: none; } .pl-bar i { animation: none; transition: none; } }
/* 0.56 Sammelbestellung vereinfacht */
.sh-wrap > summary { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid #e5def9; border-radius: 16px; background: linear-gradient(135deg, #f7f4ff, #f0faf4); color: var(--ink); font-size: 14px; }
.sh-wrap > summary b { display: block; } .sh-wrap > summary small { color: #6b7280; font-size: 12.5px; } .sh-sum-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #7c5cff; color: #fff; font-size: 20px; }
.sh-chev { margin-left: auto; font-size: 22px; color: #7c5cff; transition: transform .2s; } .sh-wrap[open] .sh-chev { transform: rotate(90deg); } .sh-wrap[open] > summary { border-radius: 16px 16px 0 0; border-bottom-color: transparent; }
.sh-wrap .sh-box { margin: 0; border-radius: 0 0 16px 16px; border-color: #e5def9; border-top: 0; background: #fff; animation: plIn .35s both; }
.sh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .sh-steps div { display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: #f7f8fa; font-size: 13px; } .sh-steps span { color: #6b7280; font-size: 12.5px; line-height: 1.35; }
.sh-steps i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #efe9ff; color: #6b4fd8; font-size: 18px; font-style: normal; margin-bottom: 4px; }
.sh-video { display: inline-flex; align-items: center; gap: 8px; justify-self: start; border: 0; background: none; padding: 4px 0; color: #6b4fd8; font: 600 14px var(--font); cursor: pointer; } .sh-video .ico { font-size: 22px; }
.sh-form label small { font-size: 11.5px; } .sh-form .btn { display: inline-flex; align-items: center; gap: 8px; } .sh-next { flex-basis: 100%; margin: 0; }
@media (max-width: 640px) { .sh-steps { grid-template-columns: 1fr; } .sh-steps div { grid-template-columns: 34px 1fr; column-gap: 10px; } .sh-steps i { grid-row: span 2; margin: 0; } }
.pl-vid { display: inline-flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 99px; padding: 8px 14px; color: #6b4fd8; font: 600 14px var(--font); cursor: pointer; box-shadow: 0 4px 14px -8px rgba(0,0,0,.3); } .pl-vid .ico { font-size: 20px; }
.sh-wrap .sh-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; align-items: start; } .sh-wrap .sh-form label { min-width: 0; } .sh-wrap .sh-form input { width: 100%; }
.sh-wrap .sh-form .btn { grid-column: 1 / -1; justify-self: start; } .sh-wrap .sh-form .err, .sh-wrap .sh-next { grid-column: 1 / -1; }
/* 0.56 Sammelbestellung teilen */
.psh { display: grid; gap: 10px; margin-top: 14px; } .psh-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.psh-b { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: 600 12.5px var(--font); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.psh-b:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(0,0,0,.3); } .psh-b span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; }
.psh-b.wa span { background: #25d366; } .psh-b.ig span { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .psh-b.sc span { background: #fffc00; color: #111; } .psh-b.tg span { background: #29a9eb; } .psh-b.ml span { background: #6b7280; } .psh-b.qr span { background: #1f2a44; }
.psh-row { display: flex; gap: 8px; flex-wrap: wrap; } .psh-row input { flex: 1 1 200px; min-width: 0; font: 14px var(--font); border: 1px solid #cfd6df; border-radius: 12px; padding: 9px 12px; } .psh-row .btn { display: inline-flex; gap: 6px; align-items: center; } .psh-hint:empty { display: none; }
.psh-qr { position: fixed; inset: 0; z-index: 9996; display: grid; place-items: center; padding: 16px; background: rgba(10,14,30,.75); backdrop-filter: blur(6px); } .psh-qr[hidden] { display: none; }
.psh-qr-box { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px 24px 22px; border-radius: 26px; background: #fff; width: min(380px, 100%); animation: pvUp .3s both; } .psh-qr-box > b { font-size: 20px; }
.psh-qr-code svg { width: min(280px, 72vw); height: auto; display: block; }
@media (max-width: 640px) { .psh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@keyframes pshUp { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .psh-qr-box { animation: pshUp .3s both; }
.psh-qrx { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(31,42,68,.08); display: grid; place-items: center; cursor: pointer; font-size: 18px; color: #1f2a44; }
/* Cookie-Banner: kompakter Text, „Nur notwendige“ grau */
.consent { font-size: 12.5px; line-height: 1.45; } .consent p b { font-size: 14px; } .consent label { font-size: 13px; }
.consent .btn[data-cn] { background: #eceff3; color: #4b5563; border-color: #eceff3; box-shadow: none; } .consent .btn[data-cn]:hover { background: #e1e5ea; color: #374151; }
/* Erklärvideo-Button auffälliger */
.sh-video, .pl-vid { display: inline-flex; align-items: center; gap: 10px; justify-self: start; border: 0; border-radius: 99px; padding: 8px 18px 8px 8px; background: linear-gradient(135deg, #7b5cf0, #1a6fb0); color: #fff; font: 700 14.5px var(--font); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(91,70,216,.7); transition: transform .15s, box-shadow .15s; }
.sh-video:hover, .pl-vid:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(91,70,216,.8); color: #fff; }
.sh-video .ico, .pl-vid .ico { width: 34px; height: 34px; font-size: 16px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.22); position: relative; }
.sh-video .ico::after, .pl-vid .ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: vidPulse 1.8s ease-out infinite; }
@keyframes vidPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sh-video .ico::after, .pl-vid .ico::after { animation: none; } }
/* Kasse: Sammelbestellungs-Hinweis mit Buttons */
.pool-note .pn-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pool-note .pn-b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; font: 600 13.5px var(--font); text-decoration: none; transition: background .15s; }
.pool-note .pn-b1 { background: #6b4fd8; color: #fff; } .pool-note .pn-b1:hover { background: #5a3fc4; color: #fff; }
.pool-note .pn-b2 { background: #fff; color: #4b5563; border: 1px solid #d6dae1; } .pool-note .pn-b2:hover { background: #f3f4f6; color: #374151; }
/* Sammelbestellung starten: geteilter Versand hervorgehoben */
.sh-ship { color: #0f8a4a; }
.sh-shipnote { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: #e9f8ef; color: #14532d; font-size: 13px; line-height: 1.4; } .sh-shipnote .ico { font-size: 20px; flex: none; color: #0f8a4a; }
.sh-tier { margin: 0; padding: 10px 12px; border-radius: 14px; background: #f4f0ff; color: #3b2a85; font-size: 13px; line-height: 1.45; }
/* Social-Logos (Dateien aus dem Logo-Set) */
.psh-b span.lg { background: none !important; width: 40px; height: 40px; } .psh-b span.lg img { width: 40px; height: 40px; display: block; }
.sh-logos { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-style: normal; } .sh-logos img { width: 24px; height: 24px; display: block; }
.sh-logos b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1f2a44; color: #fff; font-size: 8.5px; letter-spacing: .02em; }
.sh-shipnote.eco { background: #eef8e6; color: #2f5a14; } .sh-shipnote.eco .ico { color: #4d8a1f; }
.sh-steps b.sh-pkg { display: inline; color: #1f2a44; } .sh-pkg mark { background: linear-gradient(transparent 45%, #ffe45c 45%, #ffe45c 92%, transparent 92%); color: inherit; padding: 0 2px; }
/* Warenkorb: Angebot-Icon größer */
.cart-quote .linkbtn { gap: 10px; text-align: left; } .cart-quote .linkbtn .ico { flex: none; width: 38px; height: 38px; font-size: 22px; display: inline-grid; place-items: center; border-radius: 11px; background: #e8f1fb; color: var(--brand-d); }
/* Retoure: DHL-Code aufs Handy */
.rp-tophone { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--soft); } .rp-tophone b { display: block; } .rp-tophone span { font-size: 13px; color: var(--mut); line-height: 1.4; }
.rp-tp-qr svg { width: 120px; height: 120px; display: block; background: #fff; border-radius: 10px; padding: 6px; }
.rp-mob { display: none !important; } @media (max-width: 760px) { .rp-desk { display: none; } .rp-mob { display: inline-flex !important; } }
.rp-phone { max-width: 520px; text-align: center; } .rp-ph-qr { margin: 14px auto; } .rp-ph-qr img { width: min(300px, 80vw); height: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 8px; }
.rp-ph-act { display: grid; gap: 10px; justify-items: center; } .rp-ph-act .btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-width: 260px; } .rp-ph-act [hidden] { display: none !important; }
.rp-ph-how { text-align: left; margin: 18px auto 10px; max-width: 400px; line-height: 1.5; font-size: 14.5px; }
/* Lieferprognose: voraussichtlich-Hinweis, Urlaub, Feiertage */
.dlv-cd { align-items: flex-start; } .dlv-cd > .ico { flex: none; margin-top: 2px; } .dlv-cd > span { flex: 1; }
.dlv-i.sm { width: 18px; height: 18px; font-size: 10.5px; margin-top: 1px; } .dlv-i.sm span { right: -4px; width: 260px; }
.dlv-vac { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 14px; border-top: 1px dashed #eee3b8; background: #fff4e0; color: #7a4a00; font-size: 12.5px; line-height: 1.45; } .dlv-vac .ico { flex: none; font-size: 16px; margin-top: 1px; }
.dlv-vac.hol { background: #eef5fc; color: #24456b; }
/* Kopfleiste: Infokästen beim Überfahren */
.vacbar { background: #ffb020; color: #3d2600; font-size: 13px; line-height: 1.45; padding: 7px 0; } .vacbar .wrap { display: flex; gap: 8px; align-items: flex-start; justify-content: center; } .vacbar .ico { flex: none; font-size: 16px; margin-top: 1px; }
.tb-w { display: contents; }
@media (min-width: 961px) {
  .topbar { position: relative; z-index: 60; } .tb-in { overflow: visible; }
  .tb-w { display: block; position: relative; } .tb-w.has-dd > .tb-it { cursor: pointer; }
  .tb-dd { position: absolute; top: calc(100% + 7px); left: 50%; width: 320px; transform: translate(-50%, -6px); padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--ink); text-align: left; font-size: 13.5px; line-height: 1.5; box-shadow: 0 24px 60px -18px rgba(16,32,64,.45), 0 0 0 1px rgba(16,32,64,.06); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; z-index: 80; }
  .tb-dd::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .tb-dd::after { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); }
  .tb-w:first-child .tb-dd { left: 0; transform: translateY(-6px); } .tb-w:first-child .tb-dd::after { left: 40px; } .tb-w:last-child .tb-dd { left: auto; right: 0; transform: translateY(-6px); } .tb-w:last-child .tb-dd::after { left: auto; right: 34px; }
  .tb-w.has-dd:hover .tb-dd, .tb-w.has-dd:focus-within .tb-dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .08s, .08s, 0s; }
  .tb-w.has-dd:first-child:hover .tb-dd, .tb-w.has-dd:first-child:focus-within .tb-dd, .tb-w.has-dd:last-child:hover .tb-dd, .tb-w.has-dd:last-child:focus-within .tb-dd { transform: none; }
}
@media (max-width: 960px) { .tb-dd { display: none; } }
.tdd-hd { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .tdd-hd small { display: block; color: var(--mut); font-size: 12px; }
.tdd-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: #e8f1fb; color: var(--brand-d); } .tdd-ic.dhl { background: #ffcc00; color: #d40511; font: italic 900 15px var(--font); } .tdd-ic.ok { background: #e7f8ee; color: #0f8a4a; }
.tdd-big { display: block; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; line-height: 1.15; text-decoration: none; white-space: nowrap; } .tdd-big.sm { font-size: 16px; } a.tdd-big:hover { color: var(--brand-d); }
.tdd-st { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-weight: 600; font-size: 13px; } .tdd-st i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tdd-st.on i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); } .tdd-st.off i { background: #ef4444; }
.tb-dd p { margin: 0 0 8px; } .tdd-ul { margin: 0 0 8px; padding-left: 18px; } .tdd-ul li { margin: 2px 0; } .tdd-sm { font-size: 12px; color: var(--mut); }
.tdd-lnk { display: inline-block; margin-top: 2px; font-weight: 700; color: var(--brand-d); text-decoration: none; } .tdd-lnk:hover { text-decoration: underline; }
/* Sprachvorschlag */
.langhint { background: #eef5fc; border-bottom: 1px solid var(--line); font-size: 14px; } .langhint[hidden] { display: none; }
.langhint .wrap { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; padding-top: 8px; padding-bottom: 8px; } .langhint .ico { font-size: 18px; color: var(--brand-d); }
.langhint .btn.sm { padding: 6px 14px; font-size: 13.5px; } .langhint .linkbtn { color: var(--mut); font-size: 13px; }
/* FAQ */
.faqp { max-width: 860px; } .faqp .lead { color: var(--mut); max-width: 64ch; }
.faq-q { width: 100%; margin: 14px 0 10px; padding: 12px 16px; border: 1px solid #cfd6df; border-radius: 14px; font: 15px var(--font); }
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .faq-nav a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 99px; background: var(--soft); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; } .faq-nav a:hover { background: #e2ecf8; }
.faq-sec { margin: 22px 0; scroll-margin-top: 110px; } .faq-sec[hidden] { display: none; } .faq-sec h2 { display: flex; gap: 10px; align-items: center; } .faq-sec h2 span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #e8f1fb; color: var(--brand-d); font-size: 18px; }
.faq-it { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin: 8px 0; } .faq-it[hidden] { display: none; }
.faq-it summary { cursor: pointer; padding: 13px 44px 13px 16px; font-weight: 700; list-style: none; position: relative; } .faq-it summary::-webkit-details-marker { display: none; }
.faq-it summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--brand-d); transition: transform .2s; } .faq-it[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { padding: 0 16px 12px; line-height: 1.55; } .faq-a p { margin: 0 0 8px; } .faq-sm { font-size: 13px; color: var(--mut); }
.faq-contact { display: flex; gap: 14px; align-items: flex-start; padding: 18px; margin-top: 26px; } .faq-contact b { display: block; font-size: 17px; } .faq-contact p { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; } .faq-contact .btn { display: inline-flex; gap: 6px; align-items: center; }
.rp-vac { display: flex; gap: 8px; align-items: flex-start; background: #fff4e0; color: #7a4a00; border-radius: 12px; padding: 10px 14px; } .rp-vac .ico { flex: none; margin-top: 2px; }
.rv-echt { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; max-width: 70ch; } .rv-echt .ico { flex: none; margin-top: 2px; }
.chat-ai { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.22); font-size: 11px; font-weight: 600; vertical-align: 1px; }

/* Artikelseite mit gestalteter Seite: Eigenschaften + bisherige Beschreibung kompakt darunter */
.pd-more { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.pd-more .props h2 { font-size: 18px; }
.pd-old { border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; }
.pd-old > summary { cursor: pointer; padding: 14px 0; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-old > summary::-webkit-details-marker { display: none; }
.pd-old > summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--mut); }
.pd-old[open] > summary::after { content: '–'; }
.pd-old > .rich { padding: 0 0 16px; font-size: 14.5px; }

/* Hinweis „Kein Medizinprodukt“ kompakt: auf dem Handy ohne Bild */
@media (max-width: 600px) { [data-mdr] > img { display: none !important; } [data-mdr] { padding: 12px 14px !important; margin: 16px auto !important; } }

/* M37 Landingpages je Uni & Studiengang – schlicht, wenig Bausteine */
.lp .lp-kick { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--brand-d); text-transform: uppercase; letter-spacing: .04em; }
.lp .lp-intro { max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--ink); margin: 6px 0 20px; }
.lp-bundle { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 900px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); transition: box-shadow .2s; }
.lp-bundle:hover { color: var(--ink); box-shadow: 0 14px 30px -20px rgba(31,41,51,.35); }
.lp-bundle .bimgs { margin: 0; } .lp-bundle b { display: block; font-size: 18px; margin: 2px 0 4px; } .lp-bundle .more { color: var(--brand-d); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-tag { font-size: 12px; font-weight: 700; color: var(--brand-d); }
.lp-fs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 900px; margin: 0 0 28px; padding: 14px 18px; border-radius: 16px; background: var(--soft, #f3f7fb); }
.lp-fs > .ico { font-size: 24px; color: var(--brand-d); flex: none; } .lp-fs > div { flex: 1 1 260px; } .lp-fs b { display: block; } .lp-fs span { font-size: 14px; color: var(--mut); }
.lp-faq { max-width: 900px; } .lp-faq details { border-bottom: 1px solid var(--line); padding: 12px 0; } .lp-faq summary { cursor: pointer; font-weight: 600; } .lp-faq p { margin: 8px 0 0; color: var(--ink); }
.lp-more { margin-top: 20px; } .lp-more a { color: var(--brand-d); }
.lp-unis { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lp-unis a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.lp-unis a:hover { border-color: var(--brand-d); color: var(--ink); } .lp-unis .ico { font-size: 20px; color: var(--brand-d); flex: none; } .lp-unis small { display: block; color: var(--mut); }
@media (max-width: 720px) { .lp-bundle { grid-template-columns: 1fr; } }

/* M38 Kundenstimmen + Bewertungsseite */
.voices { margin: 28px auto 8px; } .voices-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .voices-h .h2 { margin: 0; }
.voices-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.voice { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.voice blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); } .voice figcaption a { color: var(--brand-d); }
.rvo { max-width: 820px; } .rvo-it { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .rvo-it img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: var(--soft); }
.rvo-b { flex: 1; min-width: 0; display: grid; gap: 8px; } .rvo-b a { color: var(--ink); } .rvo-b input, .rvo-b textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.rvo-it.done { opacity: .7; } .rvo .btn.big { margin-top: 16px; } .rvo .rv-stars label { font-size: 28px; }

/* Fachschaftsshop-Seite: Rundgang & Demo (neuer Tab) + Anfrage */
.fsj-try { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; margin-bottom: 22px; border-radius: 20px; background: linear-gradient(120deg, #eef5fc, #f3efff); }
.fsj-try > div:first-child { flex: 1 1 360px; } .fsj-try .h2 { margin: 2px 0 6px; } .fsj-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Kundenkonto löschen */
.konto-del { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); } .konto-del summary { cursor: pointer; font-size: 14px; color: var(--mut); }
.konto-del form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; } .konto-del input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.konto-del-confirm { max-width: 640px; padding: 20px 22px; margin-bottom: 22px; border: 2px solid #e5484d; } .btn.danger { background: #d93a3f; border-color: #d93a3f; color: #fff; }
.konto-del-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* 404 – Petrischale unter der Lupe */
.nf { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 56px 24px 72px; min-height: 62vh; }
.nf-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; z-index: 0; animation: nfBlob 14s ease-in-out infinite alternate; }
.nf-blob.b1 { width: 380px; height: 380px; background: #cfe5fb; left: -80px; top: -60px; } .nf-blob.b2 { width: 300px; height: 300px; background: #e5dcff; right: 8%; bottom: -80px; animation-delay: -5s; } .nf-blob.b3 { width: 220px; height: 220px; background: #d6f3e4; left: 40%; top: 10%; animation-delay: -9s; }
@keyframes nfBlob { to { transform: translate(40px, 30px) scale(1.12); } }
.nf-mol { position: absolute; z-index: 0; width: 70px; opacity: .5; animation: nfFloat 9s ease-in-out infinite; } .nf-mol line { stroke: #9cb8d6; stroke-width: 3; } .nf-mol circle { fill: #fff; stroke: #7fa6cf; stroke-width: 3; }
.nf-mol.m1 { left: 6%; bottom: 14%; } .nf-mol.m2 { right: 6%; top: 12%; animation-delay: -3s; width: 60px; } .nf-mol.m3 { left: 46%; bottom: 6%; animation-delay: -6s; width: 48px; }
@keyframes nfFloat { 50% { transform: translateY(-16px) rotate(8deg); } }
.nf-stage { --px: 0px; --py: 0px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2px; transform: translate(var(--px), var(--py)); transition: transform .4s cubic-bezier(.2,.9,.3,1); }
.nf-d { font-size: clamp(110px, 17vw, 210px); font-weight: 900; line-height: 1; letter-spacing: -.06em; color: #16325c; text-shadow: 0 18px 40px rgba(22,50,92,.18); animation: nfBob 3.2s ease-in-out infinite; }
.nf-d:last-of-type { animation-delay: -1.6s; }
@keyframes nfBob { 50% { transform: translateY(-10px); } }
.nf-dish { width: clamp(100px, 15vw, 186px); aspect-ratio: 1; margin: 0 6px; }
.nf-dish svg { width: 100%; height: 100%; animation: nfSpin 22s linear infinite; filter: drop-shadow(0 14px 22px rgba(26,111,176,.22)); }
.nf-dish .rim { fill: #e8f2fc; stroke: #1a6fb0; stroke-width: 6; } .nf-dish .agar { fill: #fff6d9; } .nf-dish .col circle { fill: #f2a541; opacity: .85; transform-origin: center; transform-box: fill-box; animation: nfGrow 2.6s ease-in-out infinite; }
.nf-dish .col circle:nth-child(2n) { fill: #e86a7a; animation-delay: -1.2s; } .nf-dish .col circle:nth-child(3n) { fill: #47b37a; animation-delay: -.6s; }
@keyframes nfSpin { to { transform: rotate(360deg); } } @keyframes nfGrow { 50% { transform: scale(1.35); } }
.nf-lens { position: absolute; width: clamp(90px, 12vw, 150px); left: 0; top: 18%; animation: nfScan 7s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.nf-lens circle { fill: none; stroke: #1f2933; stroke-width: 7; } .nf-lens .glass { fill: rgba(170,215,255,.28); stroke: none; } .nf-lens .glare { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; } .nf-lens line { stroke: #1f2933; stroke-width: 11; stroke-linecap: round; }
@keyframes nfScan { 0% { transform: translate(0, 0) rotate(-6deg); } 35% { transform: translate(120%, -14%) rotate(8deg); } 55% { transform: translate(200%, 10%) rotate(-4deg); } 80% { transform: translate(90%, 22%) rotate(6deg); } 100% { transform: translate(0, 0) rotate(-6deg); } }
.nf-copy { position: relative; z-index: 1; } .nf-kick { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--brand-d); letter-spacing: .02em; }
.nf-copy .h1 { margin: 0 0 10px; } .nf-text { color: var(--mut); font-size: 16.5px; line-height: 1.6; max-width: 46ch; margin: 0 0 20px; }
.nf-search { display: flex; gap: 8px; max-width: 520px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px -22px rgba(22,50,92,.45); border: 1px solid var(--line); }
.nf-search input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font: inherit; background: transparent; outline: none; } .nf-search .btn { display: inline-flex; align-items: center; gap: 6px; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nf-chips a { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.8); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; transition: transform .15s, border-color .15s; display: inline-flex; align-items: center; gap: 6px; }
.nf-chips a:hover { transform: translateY(-2px); border-color: var(--brand-d); color: var(--brand-d); } .nf-chips a.home { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
.nf-copy > * { animation: nfIn .7s cubic-bezier(.2,.9,.3,1) both; } .nf-copy > :nth-child(2) { animation-delay: .08s; } .nf-copy > :nth-child(3) { animation-delay: .16s; } .nf-copy > :nth-child(4) { animation-delay: .24s; } .nf-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes nfIn { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 860px) { .nf { grid-template-columns: minmax(0, 1fr); padding-left: 16px; padding-right: 16px; text-align: center; padding-top: 32px; } .nf-text, .nf-search { margin-left: auto; margin-right: auto; } .nf-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .nf *, .nf-blob { animation: none !important; } }
.pay-via { flex-wrap: wrap; }

/* Fußzeile: Zahlungsdienstleister sauber nebeneinander */
.ft .pay-via { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; } .pay-via-l { display: flex; gap: 8px; align-items: center; }
.pay-via-l img { height: 26px !important; width: auto; padding: 5px 9px !important; border-radius: 6px !important; background: #fff; box-sizing: border-box; }
/* Kopfleiste Versand: voraussichtliche Übergabe an DHL */
.tdd-now { margin: 10px 0 6px; padding: 8px 10px; border-radius: 10px; background: #fff8d6; font-size: 13.5px; line-height: 1.45; }
/* gestaltete Artikelseiten: Bild nicht zu groß (weniger Weißraum) */
.pd-extra [data-story] img[loading] { max-width: 380px !important; width: 100% !important; margin: 0 auto; }
.pd-extra [data-story] div[style*="flex:1 1 320px"]:has(> img) { flex: 0 1 380px !important; display: flex; justify-content: center; }
/* leerer Mini-Warenkorb */
.mc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 8px; }
.mc-empty img { width: 210px; height: auto; animation: mcPup 3.4s ease-in-out infinite; } .mc-empty b { font-size: 18px; } .mc-empty p { margin: 0 0 6px; color: var(--mut); font-size: 14px; max-width: 30ch; }
.mc-empty .btn { width: 100%; justify-content: center; } @keyframes mcPup { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.mc-panel:has(.mc-empty) .mc-ft, .mc-panel:has(.mc-empty) .mc-hd b { display: none; }
@media (prefers-reduced-motion: reduce) { .mc-empty img { animation: none; } }
.co-share { margin: 0 0 18px; }

/* 0.66: Serverstandort + Social-Symbole in der Fußzeile */
.ft-de { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: inherit; opacity: .85; white-space: nowrap; }
.ft-de i { width: 22px; height: 14px; border-radius: 2px; background: linear-gradient(#000 0 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.ft-soc { display: inline-flex; gap: 10px; align-items: center; margin-right: 6px; } .ft-soc a { display: inline-grid; place-items: center; transition: transform .15s; } .ft-soc a:hover { transform: translateY(-2px); }
.ft-soc img { width: 30px; height: 30px; border-radius: 9px; } .ft-soc b { font-size: 12px; padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; opacity: .85; }

/* 0.66.2 */
.ft-badges img.ft-srv { width: 124px !important; height: 42px !important; padding: 3px 6px !important; background: #fff; object-fit: contain; }
.tool-tx b { line-height: 1.15; }
@media (max-width: 760px) { .tool-tx i { white-space: normal; line-height: 1.12; } }

/* 0.66.3: Badges, bestätigter Kauf, Fußzeilen-Siegel, Herz */
.ci .cbs { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; } .ci .cbs .badge { position: static; box-shadow: 0 2px 6px -2px rgba(0,0,0,.3); }
.pbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .pbadge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 8px -3px rgba(0,0,0,.35); }
.vbuy { display: inline-flex; align-items: center; gap: 4px; color: #188038; font-weight: 600; white-space: nowrap; } .vbuy svg { width: 15px; height: 15px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: #1f9d55; color: #fff; stroke-width: 3.2; }
.ft-badges { gap: 12px; } .ft-badges img, .ft-badges .reclay, .ft-badges img.ft-srv { width: 112px !important; height: 42px !important; padding: 4px 8px !important; object-fit: contain; background: #fff; border-radius: 8px; opacity: 1; transition: transform .2s ease, box-shadow .2s ease; }
.ft-badges img:hover, .ft-badges a:hover img { transform: scale(1.12); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
@media (max-width: 640px) { .ft-badges img, .ft-badges .reclay, .ft-badges img.ft-srv { width: 96px !important; height: 38px !important; } }
.ft-heart { animation: ftBeat 1.3s ease-in-out infinite; transform-origin: center; } @keyframes ftBeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(.95); } 45% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .ft-heart { animation: none; } .ft-badges img { transition: none; } }
.ci .cbs .badge { font-size: 11px; padding: 2px 8px; }

/* 0.66.4: Retourenportal mit Erklär-Animation rechts */
.rp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 28px; align-items: start; margin-bottom: 8px; }
.rp-top .rp-alt-grid { max-width: none !important; }
@media (max-width: 960px) { .rp-top { grid-template-columns: minmax(0, 1fr); gap: 16px; } .rp-top-r { max-width: 520px; } }

/* 0.66.4: Qualitäts-Siegel – schwebt über dem Artikelbild */
.qbs { position: absolute; left: 6px; right: 6px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.qbs img, .card .ci .qbs img { width: var(--qw, 45%); min-width: 44px; height: auto; object-fit: initial; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation: qbFloat 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.gmain .qbs.big { left: 14px; right: 14px; bottom: auto; top: 14px; } .gmain .qbs.big img { width: var(--qw, 22%); }
@keyframes qbFloat { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 25% { transform: translate(-3px, -6px) rotate(1deg); } 50% { transform: translate(0, -9px) rotate(2deg); } 75% { transform: translate(3px, -4px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .qbs img { animation: none; } }

.rp-info { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); } .rp-info > h2 { margin: 0 0 14px; }

/* 0.66.6: Konfigurator – Anzahl Sets */
.kf-sets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.kf-sets-t { display: grid; flex: 1 1 220px; } .kf-sets-t small { color: var(--mut); font-size: 13px; }
.kf-step { display: inline-flex; align-items: center; border: 1px solid #cfd6df; border-radius: 12px; overflow: hidden; } .kf-step button { width: 42px; height: 42px; border: 0; background: #f3f6fa; font: 700 20px var(--font); color: var(--navy); cursor: pointer; } .kf-step button:disabled { opacity: .4; cursor: default; } .kf-step b { min-width: 44px; text-align: center; font-size: 17px; }
.kf-setsum { flex-basis: 100%; font-size: 14px; color: #1f5f34; } .kf-setsum b { font-size: 16px; }

/* 0.66.6: Retourenportal – Auswahl Widerruf / Reklamation mit großen Bildern */
.rp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 8px; }
.rp-ch { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; border: 2px solid; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.rp-ch:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(16,32,64,.45); color: var(--ink); }
.rp-ch img { flex: none; width: 84px; height: 84px; } .rp-ch > span { display: grid; gap: 4px; } .rp-ch em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rp-ch b { font-size: 18px; line-height: 1.25; } .rp-ch small { font-size: 13.5px; color: #4b5563; line-height: 1.45; } .rp-ch i { font-style: normal; font-weight: 700; font-size: 14px; margin-top: 4px; }
.rp-ch-w { border-color: #9cc3ef; background: linear-gradient(160deg, #f2f8ff, #fff); } .rp-ch-w em, .rp-ch-w i { color: #0b5fae; }
.rp-ch-d { border-color: #f3b2a6; background: linear-gradient(160deg, #fff4f1, #fff); } .rp-ch-d em, .rp-ch-d i { color: #b42318; }
@media (max-width: 1100px) and (min-width: 961px) { .rp-choice { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rp-choice { grid-template-columns: 1fr; } .rp-ch img { width: 64px; height: 64px; } }

/* 0.66.6: FAQ – übernommene Antworten + Wissensdatenbank */
.faq-a .faq-ol, .faq-a .faq-ul { margin: 6px 0 10px; padding-left: 22px; } .faq-a .faq-ol li, .faq-a .faq-ul li { margin: 4px 0; }
.faq-a .faq-note, .faq-a .faq-tip { margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; } .faq-a .faq-note { background: #fff7ed; border: 1px solid #fed7aa; } .faq-a .faq-tip { background: #f0f7ff; border: 1px solid #cfe2fb; }
.faq-a .faq-contact-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .faq-a .faq-contact-row .btn { margin-left: 0; }
.faq-kb { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #1f3a6e, #2b6cb0); box-shadow: 0 14px 30px -18px rgba(31,58,110,.8); }
.faq-kb:hover { color: #fff; filter: brightness(1.06); } .faq-kb-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.16); display: grid; place-items: center; } .faq-kb-ic svg { width: 24px; height: 24px; }
.faq-kb > span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .faq-kb b { font-size: 17px; } .faq-kb small { opacity: .85; font-size: 13.5px; } .faq-kb em { font-style: normal; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .faq-kb em { display: none; } }
.faq-kbl { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; } .faq-kbl a { display: block; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-weight: 600; }
.kb-rows .kb-noimg { width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; background: #eef3f9; color: var(--kb-acc, #1f74c0); } .kb-rows .kb-noimg svg { width: 30px; height: 30px; }
@media (max-width: 640px) { .kb-rows .kb-noimg { width: 56px; height: 56px; } }

/* 0.66.7: Fußzeile – Hambacher Schloss (nur große Bildschirme), dezent im Hintergrund rechts */
@media (min-width: 1100px) {
  .ft { position: relative; isolation: isolate; overflow: hidden; }
  .ft::before { content: ''; position: absolute; top: -4%; right: 0; height: 128%; aspect-ratio: 3 / 2; max-width: 72vw; z-index: -1; pointer-events: none;
    background: url('footer-schloss.webp?v=3') right top / cover no-repeat; opacity: .26; filter: grayscale(.3); }
}

/* 0.67.7: Verwendungszweck – rot, pulsierend */
.od-ref { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 11px 13px; border-radius: 12px; background: #fdecec; border: 1.5px solid #d92d20; color: #8a1c13; font-size: 13.5px; line-height: 1.45; animation: odRef 2.2s ease-in-out infinite; }
.od-ref b { color: #b42318; } .od-ref-ic { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #d92d20; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; animation: odRefIc 1.1s ease-in-out infinite; }
@keyframes odRef { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } 50% { box-shadow: 0 0 0 5px rgba(217,45,32,.16); } }
@keyframes odRefIc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .od-ref, .od-ref-ic { animation: none; } }

/* 0.67.8 */
.lf-list[hidden] { display: none !important; }
.rp-it select { text-overflow: ellipsis; min-width: 0; }

/* 0.67.9: Bestellseite – „So geht's weiter“ */
.od-lead { font-size: 15.5px; color: inherit !important; opacity: .9; margin: 2px 0 4px; }
.od-steps { padding: 20px 22px; }
.ost { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; counter-reset: s; }
.ost li { position: relative; display: grid; justify-items: center; text-align: center; gap: 3px; padding: 0 4px; }
.ost li::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--line, #e5e9f0); z-index: 0; }
.ost li:first-child::before { display: none; } .ost li.done::before, .ost li.now::before { background: #1f9d55; }
.ost-dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #f1f4f8; color: #98a2b3; border: 2px solid #e5e9f0; }
.ost-dot svg { width: 19px; height: 19px; }
.ost li.done .ost-dot { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.ost li.now .ost-dot { background: #fff; border-color: var(--brand, #1b6fd8); color: var(--brand, #1b6fd8); box-shadow: 0 0 0 0 rgba(27,111,216,.35); animation: ostPulse 1.8s ease-out infinite; }
.ost b { font-size: 13.5px; margin-top: 4px; } .ost small { font-size: 12px; color: var(--mut, #667085); line-height: 1.35; } .ost li:not(.done):not(.now) b { color: var(--mut, #667085); font-weight: 600; }
@keyframes ostPulse { 0% { box-shadow: 0 0 0 0 rgba(27,111,216,.35); } 70% { box-shadow: 0 0 0 10px rgba(27,111,216,0); } 100% { box-shadow: 0 0 0 0 rgba(27,111,216,0); } }
.ost-trk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f8fb; font-size: 14px; } .ost-trk svg { width: 20px; height: 20px; color: #d40511; } .ost-trk span { flex: 1; } .ost-trk b { font-family: ui-monospace, monospace; }
.od-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .ost { grid-template-columns: 1fr; gap: 0; }
  .ost li { grid-template-columns: 40px 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 0 0 14px; }
  .ost li .ost-dot { grid-row: span 2; } .ost li b { margin-top: 2px; }
  .ost li::before { top: -14px; left: 19px; width: 3px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .ost li.now .ost-dot { animation: none; } }
/* 0.67.9: Hinweis „Kein Medizinprodukt“ – Bild immer quadratisch (Story-Regel streckte es auf 380 px) */
[data-mdr] > img, .pd-extra [data-story] [data-mdr] > img[loading] { flex: none !important; width: 88px !important; max-width: 88px !important; height: 88px !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 !important; }
/* Abmahn-Check 0.68.6: Vergleichspreis, Lieferzeit, Grundpreis in Karten, AGB drucken */
.buy .pref { font-size: 13px; color: var(--mut); margin-top: 2px; }
.buy .dlt { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 6px 0 2px; color: var(--ink); } .buy .dlt svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--navy); } .buy .dlt small { color: var(--mut); } .buy .dlt a { color: inherit; }
.card .cpr, .card .cbp { display: block; font-size: 11.5px; color: var(--mut); font-weight: 400; line-height: 1.35; margin-top: 2px; }
@media print { .agb-section-body { display: block !important; } .agb-section-arrow { display: none; } }
/* FAQ ↔ Wissensdatenbank (0.68.7) */
.kb-doors { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kb-t-faq { --t: #0e7490; --tb: #e6f6f9; } .kb-door-faq { --t: #0e7490; --tb: #e6f6f9; }
.kb-faq-sec { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #eef2f7; color: #5b6573; font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.kb-faqhits .faq-it { margin: 8px 0; }
.kb-help { margin-top: 44px; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, #f3f9fb, #fff); border: 1px solid #d7ecf1; }
.kb-help-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .kb-help-hd > div { flex: 1 1 280px; } .kb-help-hd .kb-sec-ic { width: 44px; height: 44px; border-radius: 12px; } .kb-help-hd .kb-sec-ic svg { width: 22px; height: 22px; }
.kb-help-hd h2 { margin: 0; font-size: 22px; color: var(--navy); } .kb-help-hd p { margin: 2px 0 0; color: #5b6573; font-size: 14.5px; }
.kb-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.kb-help-grid a { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; row-gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.kb-help-grid a:hover { border-color: #0e7490; transform: translateY(-1px); }
.kb-help-grid span { grid-row: span 3; width: 36px; height: 36px; border-radius: 10px; background: #e6f6f9; color: #0e7490; display: grid; place-items: center; } .kb-help-grid span svg { width: 18px; height: 18px; }
.kb-help-grid b { font-size: 15px; line-height: 1.25; } .kb-help-grid small { color: #5b6573; font-size: 12.5px; line-height: 1.35; } .kb-help-grid em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #0e7490; }
.kb-askfaq { margin-top: 2.4em; padding: 18px 20px; border-radius: 18px; background: #f6fafc; border: 1px solid var(--line); }
.kb-askfaq h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; margin: 0 0 10px; color: var(--navy); } .kb-askfaq h2 svg { width: 20px; height: 20px; color: #0e7490; }
.kb-askfaq .faq-it { background: #fff; } .kb-askfaq-ft { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.faq-more { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: #f0f7ff; border: 1px solid #cfe2fb; color: inherit; text-decoration: none; }
.faq-more:hover { border-color: var(--brand); } .faq-more svg { width: 20px; height: 20px; flex: none; color: var(--brand-d); } .faq-more span { flex: 1; display: grid; } .faq-more small { font-size: 12px; color: var(--mut); } .faq-more b { font-size: 14.5px; } .faq-more em { font-style: normal; color: var(--brand-d); font-weight: 700; }
.faq-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 13.5px; } .faq-rel > span { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-weight: 600; } .faq-rel > span svg { width: 16px; height: 16px; }
.faq-rel a { padding: 4px 11px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none; } .faq-rel a:hover { border-color: var(--brand); }
.faq-kbhits { margin: 22px 0; } .faq-kbhits[hidden] { display: none; } .faq-kbhits h2 { display: flex; gap: 10px; align-items: center; } .faq-kbhits h2 span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #f0f7ff; color: var(--brand-d); } .faq-kbhits h2 svg { width: 18px; height: 18px; }
.faq-kbhits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .faq-kbhits li[hidden] { display: none; }
.faq-kbhits a { display: grid; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; } .faq-kbhits a:hover { border-color: var(--brand); } .faq-kbhits small { color: var(--mut); font-size: 13px; }
/* Chat-Roboter (nur Desktop): schwebt über „Fragen?“, winkt ab und zu */
.chat-bot { position: absolute; left: 14px; bottom: calc(100% + 4px); width: 60px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; animation: botFloat 3.2s ease-in-out infinite; will-change: transform; backface-visibility: hidden; }
.chat-bot::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -4px; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(22,50,92,.28), rgba(22,50,92,0)); animation: botShadow 3.2s ease-in-out infinite; will-change: transform, opacity; z-index: -1; }
.chat-bot img { display: block; width: 60px; height: auto; transform-origin: 50% 90%; animation: botWiggle 9s ease-in-out infinite; will-change: transform; backface-visibility: hidden; }
.chat-bot-say { position: absolute; left: 62px; top: 8px; white-space: nowrap; background: #fff; color: var(--navy); font: 600 12.5px var(--font); padding: 5px 10px; border-radius: 12px 12px 12px 3px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; animation: botSay 9s ease-in-out infinite; }
.chat-bot:hover .chat-bot-say { opacity: 1; transform: none; animation: none; }
.chat-bot:hover img { animation: botWiggle .9s ease-in-out infinite; }
@keyframes botFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@keyframes botShadow { 0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: 1; } 50% { transform: translate3d(0, 6px, 0) scaleX(.75); opacity: .55; } }
@keyframes botWiggle { 0%, 84%, 100% { transform: rotate(0.01deg); } 87% { transform: rotate(-8deg); } 90% { transform: rotate(7deg); } 93% { transform: rotate(-5deg); } 96% { transform: rotate(3deg); } }
@keyframes botSay { 0%, 82%, 100% { opacity: 0; transform: translateY(4px); } 86%, 97% { opacity: 1; transform: none; } }
.chat.open .chat-bot { display: none; }
@media (max-width: 960px), (hover: none) { .chat-bot { display: none; } }
@media (prefers-reduced-motion: reduce) { .chat-bot, .chat-bot img, .chat-bot-say, .chat-bot::after { animation: none !important; } }

/* Vertrauens-Siegel Fußzeile: Glanz, Zoom +50 %, Info wird „geschrieben“ */
.ft-badges.tb3 { position: relative; gap: 12px; flex-wrap: wrap; }
.tb3-b { position: relative; display: inline-flex; border-radius: 10px; overflow: hidden; outline: none; transform-origin: 50% 100%; transition: transform .28s cubic-bezier(.2,.8,.2,1.2), box-shadow .28s; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -10px rgba(0,0,0,.7); z-index: 1; }
.tb3-b img, .ft-badges.tb3 .tb3-b img { display: block; width: 112px !important; height: 42px !important; padding: 4px 8px !important; object-fit: contain; background: linear-gradient(180deg, #fff 0%, #fff 55%, #eef2f7 100%); border-radius: 10px; opacity: 1; transform: none !important; box-shadow: none !important; }
.tb3-b::before { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 48%); mix-blend-mode: screen; }
.tb3-b::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; pointer-events: none; transform: skewX(-22deg) translateX(0); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); animation: tb3Shine 6s ease-in-out infinite; animation-delay: var(--sh, 0s); }
.tb3-b:hover, .tb3-b:focus-visible, .tb3-b.on { transform: scale(1.5); z-index: 5; box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 18px 34px -12px rgba(0,0,0,.75); }
.tb3-b:hover::after, .tb3-b.on::after { animation: tb3Shine 1.1s ease-out 1; }
@keyframes tb3Shine { 0%, 70% { transform: skewX(-22deg) translateX(0); } 100% { transform: skewX(-22deg) translateX(520%); } }
.tb3-say { position: absolute; left: 0; bottom: calc(100% + 34px); z-index: 20; width: min(380px, calc(100vw - 32px)); padding: 12px 14px 13px; border-radius: 14px; background: #fff; color: #1f2a44; font: 400 13.5px/1.45 var(--font, Inter, sans-serif); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.tb3-say.show { opacity: 1; transform: none; }
.tb3-say b { display: block; margin-bottom: 3px; font-weight: 700; color: #0b5fae; }
.tb3-say span::after { content: "▍"; margin-left: 1px; color: #0b5fae; animation: tb3Caret .8s steps(1) infinite; }
.tb3-say.done span::after { content: none; }
.tb3-say::after { content: ""; position: absolute; left: var(--ax, 40px); bottom: -7px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 0 0 3px 0; }
@keyframes tb3Caret { 50% { opacity: 0; } }
@media (max-width: 640px) { .tb3-b img, .ft-badges.tb3 .tb3-b img { width: 96px !important; height: 38px !important; } .tb3-b:hover, .tb3-b.on { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .tb3-b, .tb3-say { transition: none; } .tb3-b::after, .tb3-say span::after { animation: none; } }

/* Zahlarten & Versand: Zoom beim Überfahren (ohne Info) */
.pay a, .pay .pay-txt, .pay-via-l img, .ship-logos img { transition: transform .22s cubic-bezier(.2,.8,.2,1.2), box-shadow .22s; position: relative; }
.pay a:hover, .pay .pay-txt:hover, .pay-via-l img:hover { transform: scale(1.3); z-index: 3; }
.ship-logos:hover img { transform: scale(1.18); }
@media (prefers-reduced-motion: reduce) { .pay a, .pay .pay-txt, .pay-via-l img, .ship-logos img { transition: none; } }

/* Fachschafts-Artikel (/fachschaften) */
.fsa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 0; }
.fsa-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line, #e3e8ef); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.fsa-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(16,42,84,.45); border-color: var(--brand, #0b5fae); }
.fsa-tile .fsa-uni { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-d, #0b4a8a); }
.fsa-tile b { font-size: 17px; } .fsa-tile .fsa-meta { font-size: 13.5px; color: var(--mut); } .fsa-tile .fsa-open { font-style: normal; color: #1a7f37; font-weight: 600; }
.fsa-tile .more { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand, #0b5fae); } .fsa-tile .more svg { width: 16px; height: 16px; }
.fsa-h1uni { display: block; font-size: .55em; font-weight: 600; color: var(--mut); margin-top: 4px; }
.fsa-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 900px; margin: 14px 0 6px; padding: 14px 18px; border-radius: 16px; background: #eef5ff; border: 1px solid #d6e6fb; }
.fsa-state.open { background: #eaf7ee; border-color: #cdebd6; } .fsa-state > svg { width: 26px; height: 26px; flex: none; color: var(--brand-d, #0b4a8a); } .fsa-state.open > svg { color: #1a7f37; }
.fsa-state > div { flex: 1 1 280px; } .fsa-state b { display: block; } .fsa-state span { font-size: 14px; color: var(--mut); }
.fsa-note { display: flex; gap: 8px; align-items: flex-start; max-width: 80ch; } .fsa-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pd-fsset { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff8e6; border: 1px solid #f3e1a8; font-size: 14px; line-height: 1.45; } .pd-fsset svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #a26b00; }

/* Unterkategorien über der Artikelliste */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: visible; padding: 4px 2px 12px; margin: 6px 0 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line, #dfe5ee); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.subnav a span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #eef3f9; color: var(--mut); font-size: 12px; font-weight: 600; text-align: center; }
.subnav a:hover { border-color: var(--brand, #0b5fae); transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(16,42,84,.5); }
.subnav a.on { background: var(--brand, #0b5fae); border-color: var(--brand, #0b5fae); color: #fff; } .subnav a.on span { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) { .subnav { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .subnav a { padding: 8px 13px; font-size: 13.5px; } }
#artikel { scroll-margin-top: 150px; }

/* Kasse: Adressbuch */
.co-ab { margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: #f5f8fc; border: 1px solid #e1e8f2; }
.co-ab-t { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; }
.co-ab-i { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 0; border-top: 1px dashed #dde5ef; font-size: 14px; } .co-ab-i:first-of-type { border-top: 0; }
.co-ab-i > span:first-child { flex: 1 1 260px; min-width: 0; }
.co-ab-b { display: inline-flex; gap: 6px; } .co-ab-b button { padding: 5px 11px; border-radius: 999px; border: 1px solid #cdd8e6; background: #fff; color: var(--brand-d, #0b4a8a); font: 600 12.5px/1.2 inherit; cursor: pointer; }
.co-ab-b button:hover { border-color: var(--brand, #0b5fae); background: #eef5ff; } .co-ab-b button.on { background: var(--brand, #0b5fae); border-color: var(--brand, #0b5fae); color: #fff; }

/* Seitenwarenkorb: Menge ± und ausgegraute (entfernte) Positionen */
.mc-q { display: inline-flex; align-self: flex-start; width: auto; align-items: center; gap: 2px; margin-top: 6px; border: 1px solid var(--line, #dfe5ee); border-radius: 10px; background: #fff; overflow: hidden; }
.mc-q button { width: 30px; height: 28px; border: 0; background: none; font: 600 16px/1 inherit; color: var(--brand-d, #0b4a8a); cursor: pointer; } .mc-q button:hover:not(:disabled) { background: #eef5ff; } .mc-q button:disabled { opacity: .35; cursor: default; }
.mc-q b { min-width: 26px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.mc-it > span { min-width: 0; } .mc-it > span small { display: block; }
.mc-park { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #d7dfea; } .mc-park-t { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.mc-it.off > img, .mc-it.off > span:not(.mc-park-b) { opacity: .5; filter: grayscale(1); } .mc-it.off:hover > img, .mc-it.off:hover > span:not(.mc-park-b) { opacity: .75; } .mc-it.off > span b { text-decoration: line-through; text-decoration-thickness: 1px; }
.mc-park-b { display: inline-flex; align-items: center; gap: 4px; } .mc-back { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--brand, #0b5fae); background: #fff; color: var(--brand-d, #0b4a8a); font: 600 12.5px/1.1 inherit; cursor: pointer; white-space: nowrap; }
.mc-back:hover { background: var(--brand, #0b5fae); color: #fff; } .mc-del { width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--mut); cursor: pointer; font-size: 14px; } .mc-del:hover { background: #fdeceb; color: #c5221f; }
[data-mc-body].busy { opacity: .6; pointer-events: none; transition: opacity .15s; }

/* Social-Leiste: hinterlegte Kanäle farbig, nicht hinterlegte transparent */
.ft-soc { flex-wrap: wrap; justify-content: center; gap: 8px; } .ft-soc-t { font-size: 12.5px; font-weight: 600; opacity: .8; margin-right: 2px; }
.ft-soc .off { opacity: .28; filter: grayscale(1); cursor: default; } .ft-soc .off:hover { transform: none; }
.ft-soc b { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 6px 10px; border-radius: 9px; border: 1px solid currentColor; line-height: 1; white-space: nowrap; }
.ft-soc a b { background: rgba(255,255,255,.08); }
@media (max-width: 640px) { .ft-soc { display: flex; width: 100%; margin: 0 0 10px; } .ft-soc-t { width: 100%; text-align: center; margin: 0 0 2px; } }

/* Impressum: Anflug-Karte */
.anflug { margin: 8px auto 28px; }
.af-stage { position: relative; height: clamp(320px, 46vw, 520px); border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #e9f3fc 0%, #d4e6f7 60%, #c3dbf2 100%); box-shadow: 0 18px 40px -24px rgba(16,42,84,.45); isolation: isolate; }
.af-map, .af-layer { position: absolute; inset: 0; } .af-map svg { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; } .anflug.ready .af-map svg { opacity: 1; }
.af-map path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.af-map .im-world path, .af-map .im-eu path { fill: #f4f7fb; stroke: #b9c8da; stroke-width: .8; }
.af-map .im-de { fill: #dbe9fb; stroke: #0b5fae; stroke-width: 1.6; transition: fill .6s; } .anflug.z-de .af-map .im-de { fill: #cfe2fa; }
.af-layer { pointer-events: none; }
.af-layer [data-p] { position: absolute; left: 0; top: 0; will-change: transform; }
.af-dot { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0 -6px; font: 600 12.5px/1 var(--font, Inter, sans-serif); color: #23395d; white-space: nowrap; opacity: 0; transition: opacity .5s; text-shadow: 0 1px 0 #fff, 0 0 6px #fff; }
.af-dot i { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #23395d; } .anflug.z-pf .af-dot { opacity: 1; } .af-cap { } .anflug.z-de .af-cap { opacity: 1; } .anflug.z-pf .af-cap { opacity: 0; }
.af-region { transform-origin: 0 0; margin: -18px 0 0 -40px; font: 800 30px/1 var(--font, Inter, sans-serif); letter-spacing: .3em; text-transform: uppercase; color: rgba(11,95,174,.22); opacity: 0; transition: opacity .6s; } .anflug.z-pf .af-region { opacity: 1; } .anflug.z-ha .af-region { opacity: 0; }
.af-pin { width: 0; height: 0; opacity: 0; transition: opacity .5s; } .anflug.z-de .af-pin { opacity: 1; }
.af-pin::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #e3342f; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); z-index: 2; }
.af-pulse { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(227,52,47,.35); animation: afPulse 2s ease-out infinite; } .af-pulse.d2 { animation-delay: 1s; }
@keyframes afPulse { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.af-pin img { max-width: none; position: absolute; left: -70px; bottom: 22px; width: 140px; height: auto; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 14px 28px -10px rgba(16,42,84,.6); opacity: 0; transform: translateY(12px) scale(.6); transform-origin: 50% 100%; transition: opacity .5s, transform .6s cubic-bezier(.2,1.4,.4,1); }
.anflug.done .af-pin img { opacity: 1; transform: none; animation: afBob 3s ease-in-out .8s infinite; }
@keyframes afBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.af-kick { position: absolute; left: 18px; top: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); font: 700 15px/1 var(--font, Inter, sans-serif); color: #16325c; box-shadow: 0 6px 16px -8px rgba(16,42,84,.4); transition: opacity .2s, transform .2s; } .af-kick.swap { opacity: 0; transform: translateY(-6px); }
.af-card { position: absolute; right: 18px; bottom: 18px; max-width: 300px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -16px rgba(16,42,84,.55); font-size: 14px; color: #23395d; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.af-card.on { opacity: 1; transform: none; } .af-card b { font-size: 16px; color: #16325c; } .af-card small { margin-top: 4px; color: var(--mut); }
.af-replay { position: absolute; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.9); color: #0b4a8a; font: 600 13px/1 var(--font, Inter, sans-serif); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(16,42,84,.4); } .af-replay:hover { background: #fff; }
@media (max-width: 640px) { .af-stage { height: 380px; border-radius: 16px; } .af-card { left: 12px; right: 12px; bottom: 12px; max-width: none; } .af-replay { top: 14px; bottom: auto; left: auto; right: 12px; } .af-pin img { width: 110px; left: -55px; } .af-region { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .af-pulse, .anflug.done .af-pin img { animation: none; } }
.af-town { margin: 14px 0 0 16px; font: 800 15px/1 var(--font, Inter, sans-serif); color: #16325c; text-shadow: 0 1px 0 #fff, 0 0 8px #fff; opacity: 0; transition: opacity .5s; } .anflug.z-ha .af-town { opacity: 1; }

.co-vc-fake { display: flex; gap: 5px; align-items: flex-start; margin: 6px 0 0; font-size: 8pt; line-height: 1.4; color: #6b7280; } .co-vc-fake svg { flex: none; margin-top: 1px; color: #b7791f; }
.lbl-v, .co label > .lbl-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; align-self: stretch; } .lbl-v > span:first-child { flex: none; }
.vbadge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #b45309; background: linear-gradient(90deg, #fff7d6, #ffe9d6); border: 1px solid #f6c77a; border-radius: 999px; padding: 2px 10px 2px 4px; white-space: nowrap; animation: vbIn .35s ease-out; } .vbadge[hidden] { display: none; } .vbadge img { width: 18px; height: 18px; }
@keyframes vbIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.co-firm-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .co-firm-hit > span { margin-right: 4px; }
.lbl-v, .co label > .lbl-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; align-self: stretch; }
.vbadge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #b5531b; background: linear-gradient(90deg, #fff6d6, #ffe9dc); border: 1px solid #f6c46e; border-radius: 999px; padding: 2px 10px 2px 4px; white-space: nowrap; animation: vb-in .45s cubic-bezier(.2,1.4,.4,1); }
.vbadge[hidden] { display: none; } .vbadge img { width: 18px; height: 18px; display: block; }
@keyframes vb-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.konto-firm .vbadge { margin-left: 8px; }