/* Logo-Plastic Produktkatalog – Erscheinungsbild nach www.logoplastic.ch
   Schrift: Open Sans (Titel und Text). Akzent: Orange #FF6600 auf Anthrazit #333, Flächen #ECF0F4.
   Titel in Grossbuchstaben, Schaltflächen als Pill (30 px Radius) wie auf der Website. */

/* @font-face steht eingebettet in schriften.css (von build.py erzeugt) */

:root {
  --red: #FF6600;            /* Akzent (Name aus der Biplast-Fassung beibehalten) */
  --primary: #FF6600;
  --fg: #333333;
  --muted-fg: #6b6f73;
  --muted: #ECF0F4;
  --border: #d5dbe1;
  --radius: 6px;
  --ui-fill: #ECF0F4;        /* Flächen von Suchfeld, Auswahllisten, Hover in der Bedienung */
  --paper: #fff;
  --chrome: #fff;
  --chrome-fg: #333333;
  --chrome-border: #dfe4e9;
  --stage: #ECF0F4;
  --font-head: "Open Sans", system-ui, arial, sans-serif;
  --font-sans: "Open Sans", system-ui, arial, sans-serif;
  --bar: 56px;
  --s: 1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chrome: #2b2b2b; --chrome-fg: #fff; --chrome-border: #474747; --stage: #333333; --ui-fill: #3a3a3a; color-scheme: dark;
  }
}
:root[data-theme="dark"] { --chrome: #2b2b2b; --chrome-fg: #fff; --chrome-border: #474747; --stage: #333333; --ui-fill: #3a3a3a; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--stage); color: var(--chrome-fg); font: 15px/1.5 var(--font-sans);
  display: grid; grid-template-rows: var(--bar) 1fr var(--bar); overflow: hidden;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; background: #fff; padding: 8px 12px; }

/* ---------- Leisten */
.bar { display: flex; align-items: stretch; background: var(--chrome); z-index: 5; }
.bar.top { border-bottom: 1px solid var(--chrome-border); }
.bar.bottom { border-top: 1px solid var(--chrome-border); align-items: center; justify-content: center; gap: 4px; padding: 0 12px; }
.brand { display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--chrome-border); color: var(--chrome-fg); }
.logo-bar { height: 28px; width: auto; }
.doc-title { display: flex; align-items: center; padding: 0 20px; font: 700 14px var(--font-head); white-space: nowrap; }
.doc-title span { color: var(--muted-fg); font-weight: 700; margin-left: 6px; }
.quick { position: relative; display: flex; align-items: center; flex: 1; max-width: 360px; margin: 10px 12px; }
.quick svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted-fg); }
.quick input { width: 100%; height: 36px; border: 1px solid var(--chrome-border); background: transparent; color: inherit; padding: 0 10px 0 32px; font: 14px var(--font-sans); border-radius: 0; }
.quick input:focus { outline: none; border-color: var(--fg); }
.tools { display: flex; align-items: stretch; margin-left: auto; }
.ico { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-width: 44px; min-height: 44px; justify-content: center; font-size: 13px; }
.ico:hover { color: var(--red); }
.tools .ico span { display: none; }
@media (min-width: 1280px) { .tools .ico span { display: inline; } }
.ico b { position: absolute; top: 8px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--red); color: #fff; font: 700 10px/16px var(--font-sans); text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid currentColor; font: 600 13px var(--font-sans); text-decoration: none; text-transform: none; cursor: pointer; }
.btn svg { width: 16px; height: 16px; }
.btn.red { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.red:hover { background: var(--red); border-color: var(--red); }
.btn:not(.red):hover { color: var(--red); }
.cta { margin: 0; min-height: 100%; border: 0; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; padding: 0 22px; }
.pager { display: flex; align-items: center; gap: 16px; flex: 1; max-width: 640px; }
.pager input { flex: 1; accent-color: var(--red); }
#pageLabel { font-size: 13px; white-space: nowrap; min-width: 210px; text-align: right; color: var(--chrome-fg); }
#pageLabel b { font-weight: 600; }
.show-s { display: none; }

/* ---------- Bühne */
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 20px 64px; overflow: hidden; }
.book-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#book { width: 100%; height: 100%; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--chrome-fg); opacity: .7; }
.nav:hover { opacity: 1; color: var(--red); }
.nav svg { width: 28px; height: 28px; }
.nav.prev { left: 10px; } .nav.next { right: 10px; }
.nav[disabled] { opacity: .15; pointer-events: none; }
.hint { position: absolute; bottom: 4px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; color: var(--muted-fg); transition: opacity .6s; pointer-events: none; }
.hint.gone { opacity: 0; }

/* ---------- Seite (Gestaltungsraster 440 × 622, skaliert über --s) */
.page { background: var(--paper); overflow: hidden; color: var(--fg); }
.page.k-back { background: var(--fg); }  /* sonst blitzt an den Rändern der weisse Seitengrund durch */
.page.blank { background: transparent; pointer-events: none; }  /* Platzhalter: vor dem Umschlag und hinter der Rückseite ist nichts */
.page.cutting { clip-path: var(--cut) !important; }  /* Innenseite von Umschlag/Rückseite beim Umblättern */
.pg {
  position: absolute; left: 0; top: 0; width: 440px; height: 622px; transform: scale(var(--s)); transform-origin: 0 0;
  font: 400 8.6px/1.5 var(--font-sans); color: var(--fg); padding: 34px 38px 36px; display: flex; flex-direction: column;
}
.page.left .pg { padding-left: 46px; padding-right: 30px; }
.page.right .pg { padding-left: 30px; padding-right: 46px; }
body.portrait .page .pg { padding-left: 30px; padding-right: 46px; }
.page.left::after, .page.right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.page.left::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.09), transparent); }
.page.right::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.07), transparent); }
body.portrait .page::after { display: none; }
.pg [role="button"] { cursor: pointer; text-align: left; }
.pg [role="button"] > *, .pg a > * { pointer-events: none; }
.pg h1, .pg h2, .pg h3, .pg h4 { font-family: var(--font-head); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.pg h2 { font-size: 19px; margin-bottom: 10px; max-width: 330px; }
.pg h3 { font-size: 11px; margin: 14px 0 6px; }
.pg h4 { font-size: 8.8px; margin-bottom: 2px; }
.pg p { margin: 0 0 6px; }
.pg .eyebrow { font: 700 6.8px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.pg .lead { font-size: 9.6px; line-height: 1.5; color: var(--fg); }
.pg .small { font-size: 7.4px; color: var(--muted-fg); }
.pg a { color: inherit; text-decoration: none; }

.run { display: flex; justify-content: space-between; align-items: center; height: 14px; margin-bottom: 18px; font: 700 6.8px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); border-bottom: 1px solid var(--border); padding-bottom: 8px; box-content: content-box; }
.run .logo-run { height: 10px; width: auto; color: var(--fg); }
.page.left .run { flex-direction: row-reverse; }
body.portrait .page .run { flex-direction: row; }
.content { flex: 1; min-height: 0; position: relative; }
.folio { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 6.6px; color: var(--muted-fg); height: 10px; }
.folio .num { font: 700 8px var(--font-head); color: var(--fg); }
.page.left .folio { flex-direction: row; }
.page.right .folio { flex-direction: row-reverse; }
body.portrait .page .folio { flex-direction: row-reverse; }

/* Daumenregister am Seitenrand */
.tabs { position: absolute; top: 70px; bottom: 70px; width: 17px; display: flex; flex-direction: column; gap: 2px; }
.page.right .tabs, body.portrait .page .tabs { right: 0; left: auto; }
.page.left .tabs { left: 0; }
.tab { flex: 1; background: var(--muted); color: var(--muted-fg); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.tab span { writing-mode: vertical-rl; font: 700 5.8px var(--font-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.page.left .tab span { transform: rotate(180deg); }
body.portrait .page .tab span { transform: none; }
.tab:hover { background: var(--fg); color: #fff; }
.tab.on { background: var(--red); color: #fff; }

/* Umschlag */
.cover { position: relative; height: calc(100% + 70px); display: flex; flex-direction: column; margin: -34px -46px -36px -30px; padding: 34px 38px; }
.cover-top { display: flex; justify-content: space-between; align-items: center; }
.logo-cover { height: 30px; width: auto; color: var(--fg); }
.cover-year { font: 700 6.8px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); }
.cover-title { margin-top: 74px; }
.cover-title h1 { font-size: 42px; line-height: 1; letter-spacing: -.02em; hyphens: manual; }
.cover-title .lead { margin-top: 14px; max-width: 280px; font-size: 10.5px; }
.cover-img { width: calc(100% + 76px); margin: auto -38px 0; display: block; }
.cover-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.cover-cats span { border: 1px solid var(--border); padding: 3px 7px; font: 700 6.4px var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.cover-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 3px solid var(--red); font-size: 7.4px; color: var(--muted-fg); }

/* Rückseite */
.back { height: calc(100% + 70px); margin: -34px -30px -36px -46px; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--fg); color: #fff; gap: 18px; }
body.portrait .back { margin: -34px -46px -36px -30px; }
.logo-back { height: 42px; width: auto; color: #fff; }
.back .claim { font-size: 11px; max-width: 300px; line-height: 1.5; }
.back .claim b { font-family: var(--font-head); font-size: 15px; }
.back address { font-style: normal; font-size: 8px; line-height: 1.7; border-top: 3px solid var(--red); padding-top: 12px; }
.back .small { color: hsl(3 0% 65%); }

/* Inhalt */
.toc { list-style: none; margin: 8px 0 0; padding: 0; }
.toc li [role="button"] { display: flex; width: 100%; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--muted); }
.toc li [role="button"]:hover span { color: var(--red); }
.toc li span { flex: 1; }
.toc li i { font-style: normal; font: 700 8px var(--font-head); }
.toc .l0 { margin-top: 10px; }
.toc .l0 span { font: 700 10px var(--font-head); }
.toc .l0 [role="button"] { border-bottom: 1px solid var(--fg); }
.toc .l1 span { padding-left: 14px; font-size: 8.8px; }
.howto { margin-top: 12px; background: var(--muted); padding: 10px 12px; }

/* Textbausteine */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--border); margin: 10px 0 4px; }
.facts div { padding: 8px 6px 8px 0; }
.facts b { display: block; font: 700 13px var(--font-head); color: var(--red); }
.facts span { font-size: 7px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .08em; }
.fig { margin: 10px 0 0; }
.fig img { width: 100%; height: 96px; object-fit: cover; display: block; }
.fig.wide img { height: 190px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.grid2.tight { gap: 8px 16px; }
.grid2.tight p { font-size: 8px; }
.tile { border-top: 2px solid var(--fg); padding-top: 6px; }
.tile .no, .step .no { font: 700 8px var(--font-head); color: var(--red); display: block; margin-bottom: 2px; }
.list > div { border-top: 1px solid var(--border); padding: 5px 0 2px; }
.callout { margin-top: 12px; background: var(--muted); padding: 10px 12px 6px; border-left: 3px solid var(--red); }
.callout h3 { margin-top: 0; }
.step { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.step img { width: 150px; height: 96px; object-fit: cover; display: block; }
.step .sub { font-weight: 600; font-size: 8px; color: var(--muted-fg); margin-bottom: 3px; }
.step p { font-size: 8px; }
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.cert { display: flex; flex-direction: column; gap: 3px; }
.cert-doc { width: 100%; aspect-ratio: 3/4; object-fit: contain; background: var(--muted); padding: 8px; display: block; }
.cert-icon { width: 34px; height: 34px; margin-top: 4px; }
.cert b { font: 700 10px var(--font-head); }
.cert span { font-size: 7.4px; color: var(--muted-fg); }
.cert i, .doc-link span { font-style: normal; font-size: 7.4px; font-weight: 600; color: var(--red); }
.doc-link { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--fg); padding: 9px 12px; margin: 16px 0 8px; }
.doc-link b { font: 700 9px var(--font-head); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
.team figure { margin: 0; }
.team img { width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: 50% 20%; display: block; background: var(--muted); }
.team figcaption { padding-top: 4px; }
.team b { display: block; font: 700 8.4px var(--font-head); }
.team span { display: block; font-size: 7px; color: var(--muted-fg); line-height: 1.3; }
.team-contact div { aspect-ratio: 1.6; background: var(--red); color: #fff; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; }
.team-contact b { font-size: 11px; }
.team-contact span { color: #fff; font-size: 7.4px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; border-top: 1px solid var(--fg); padding-top: 12px; }
.contact h4 { margin: 0 0 4px; font-size: 9.4px; }
.contact table { border-collapse: collapse; margin-bottom: 12px; }
.contact th, .contact td { text-align: left; font-weight: 400; padding: 1px 8px 1px 0; vertical-align: top; font-size: 8px; }
.contact th { font-weight: 600; }
.contact a { text-decoration: underline; text-underline-offset: 2px; }
.contact-actions { display: flex; gap: 8px; margin-top: 8px; }
.pg .btn { min-height: 26px; padding: 0 12px; font-size: 8px; color: var(--fg); }
.pg .btn.red { color: #fff; }
.pg .claim { margin-top: auto; position: absolute; bottom: 0; left: 0; right: 0; font-size: 8px; color: var(--muted-fg); border-top: 1px solid var(--border); padding-top: 8px; }
.pg .claim b { color: var(--fg); }
.back .claim { position: static; border: 0; padding: 0; color: #fff; }
.back .claim b { color: #fff; }

/* Kapitelauftakt */
.opener { display: flex; flex-direction: column; height: 100%; }
.chap { font: 700 46px/1 var(--font-head); color: var(--red); letter-spacing: -.03em; margin-bottom: 8px; }
.hero { width: 100%; height: 170px; object-fit: contain; object-position: 50% 100%; display: block; margin-bottom: 14px; }
.hero.collage { display: flex; align-items: flex-end; justify-content: center; gap: 8px; background: var(--muted); padding: 14px; }
.hero.collage img { height: 100%; width: auto; max-width: 18%; object-fit: contain; }
.stats { display: flex; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--border); margin: 8px 0 12px; }
.stats div { flex: 1; padding: 7px 8px 7px 0; }
.stats b { display: block; font: 700 10.5px var(--font-head); }
.stats span { font-size: 6.8px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); }

/* Produktkarten */
.cards { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 12px 14px; height: 100%; }
.card { position: relative; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--fg); padding-top: 6px; transition: background .15s; }
.card .ph { flex: 1; min-height: 0; background: var(--muted); display: flex; align-items: center; justify-content: center; padding: 8px; margin-bottom: 6px; }
.card .ph img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: transform .25s; }
.card:hover .ph img { transform: scale(1.05); }
.card .ct { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.card .cn { font: 700 8.8px/1.2 var(--font-head); }
.card .cv { font: 700 8.8px/1.2 var(--font-head); color: var(--red); white-space: nowrap; }
.card .cm { font-size: 7px; color: var(--muted-fg); line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .cnr { font-size: 7px; margin-top: 2px; }
.card .cnr b { font-weight: 700; }
.card .bm { position: absolute; left: 6px; top: 12px; width: 7px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); display: none; }
.card.saved .bm { display: block; }
.card:hover .cn { color: var(--red); }
.card.flash { animation: flash 1.6s ease 2; }
@keyframes flash { 0%,100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 3px var(--red); } }

/* Register */
.h-reg { font-size: 15px !important; }
.reg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rr { display: grid; grid-template-columns: 26px 1fr 14px; gap: 4px; width: 100%; height: 11.4px; align-items: center; font-size: 6.9px; border-bottom: 1px dotted var(--border); }
.rr b { font-weight: 700; }
.rr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr i { font-style: normal; font-weight: 700; text-align: right; }
.rr:hover { color: var(--red); }
.rg { height: 25.6px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--fg); padding-bottom: 2px; }
.rg b { font: 700 9px var(--font-head); }
.rg span { font-size: 6.4px; color: var(--muted-fg); }
.reg-first .small { margin-bottom: 4px; }
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.glance table { width: 100%; border-collapse: collapse; }
.glance th { text-align: left; font: 700 8px var(--font-head); border-bottom: 1px solid var(--fg); padding: 0 0 4px; }
.glance td { font-size: 7.6px; padding: 2.5px 0; border-bottom: 1px solid var(--muted); }
.glance td + td { text-align: right; font-weight: 600; }
.notes { height: 100%; background-image: repeating-linear-gradient(transparent 0 23px, var(--border) 23px 24px); background-position: 0 30px; }

/* ---------- Panel (Suche, Inhalt, Detail, Merkliste, Lupe) */
.panel { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; }
.panel[hidden] { display: none; }
.panel-back { position: absolute; inset: 0; background: rgba(10,10,10,.45); animation: fade .2s; }
.panel-box { position: relative; width: min(960px, 100%); height: 100%; background: var(--chrome); color: var(--chrome-fg); display: flex; flex-direction: column; animation: slide .25s ease; }
.panel.narrow .panel-box { width: min(480px, 100%); }
.panel.wide .panel-box { width: 100%; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--bar); padding: 0 8px 0 24px; border-bottom: 1px solid var(--chrome-border); flex: none; }
.panel-head h2 { font: 700 18px var(--font-head); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-body { flex: 1; overflow: auto; padding: 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.eyebrow-ui { font: 700 11px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }

/* Suche */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-fg); }
.field select, .field input, .form input, .form textarea { height: 40px; border: 1px solid var(--chrome-border); background: var(--chrome); color: var(--chrome-fg); font: 14px var(--font-sans); padding: 0 10px; border-radius: 0; width: 100%; }
.field select:focus, .field input:focus, .form input:focus, .form textarea:focus { outline: none; border-color: var(--chrome-fg); }
.search-main { position: relative; margin-bottom: 14px; }
.search-main input { height: 48px; font-size: 16px; padding-left: 40px; }
.search-main svg { position: absolute; left: 12px; top: 14px; color: var(--muted-fg); }
.res-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 12px; font-size: 13px; flex-wrap: wrap; }
.linkbtn { color: var(--red); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip { border: 1px solid var(--chrome-border); padding: 4px 10px; font-size: 12px; min-height: 32px; }
.chip.on { background: var(--chrome-fg); color: var(--chrome); border-color: var(--chrome-fg); }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.res { display: flex; flex-direction: column; text-align: left; border-top: 1px solid var(--chrome-fg); padding-top: 8px; }
.res .ph { height: 150px; background: #f3f1f2; display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 8px; }
.res .ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.res b { font: 700 14px/1.25 var(--font-head); }
.res span { font-size: 12px; color: var(--muted-fg); }
.res:hover b { color: var(--red); }
.empty { padding: 40px 0; text-align: center; color: var(--muted-fg); }

/* Detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; }
.d-img { background: #f3f1f2; display: flex; align-items: center; justify-content: center; padding: 24px; position: sticky; top: 0; height: min(560px, 70vh); }
.d-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.d-head h3 { font: 700 26px/1.15 var(--font-head); margin: 0 0 4px; }
.d-head .vol { font: 700 20px var(--font-head); color: var(--red); }
.d-head .nr { margin: 8px 0 0; font-size: 14px; }
.d-text { font-size: 14px; color: var(--muted-fg); margin: 12px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.actions .btn { color: var(--chrome-fg); }
.actions .btn.red { color: #fff; }
.sheet { margin-top: 18px; }
.sheet h4 { font: 700 13px var(--font-head); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--chrome-fg); }
.sheet dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.sheet dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--chrome-border); font-size: 13px; }
.sheet dl div:nth-child(odd) { margin-right: 16px; }
.sheet dt { color: var(--muted-fg); }
.sheet dd { margin: 0; font-weight: 600; text-align: right; }
.sheet dd.na { font-weight: 400; color: var(--muted-fg); }
.related { margin-top: 28px; }
.related .results { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.related .res .ph { height: 110px; }
.related .res b { font-size: 12px; }
.related p { font-size: 12px; color: var(--muted-fg); margin: 0 0 12px; }
.d-nav { display: flex; justify-content: space-between; margin-top: 24px; border-top: 1px solid var(--chrome-border); padding-top: 12px; font-size: 13px; }

/* Formular */
.form { display: grid; gap: 12px; max-width: 520px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form textarea { height: 140px; padding: 10px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .sum { background: var(--muted); color: var(--fg); padding: 12px 14px; font-size: 13px; }
.form .sum ul { margin: 6px 0 0; padding-left: 18px; }
.form .note { font-size: 12px; color: var(--muted-fg); }
.req { color: var(--red); }

/* Merkliste */
.mlist { list-style: none; margin: 0 0 16px; padding: 0; }
.mlist li { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--chrome-border); }
.mlist img { width: 60px; height: 60px; object-fit: contain; background: #f3f1f2; padding: 4px; }
.mlist b { display: block; font: 700 14px var(--font-head); }
.mlist span { font-size: 12px; color: var(--muted-fg); }
.mlist button.t { font-size: 13px; text-align: left; }

/* Inhalt-Panel */
.toc-ui { list-style: none; padding: 0; margin: 0; }
.toc-ui button { display: flex; width: 100%; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--chrome-border); font-size: 15px; text-align: left; }
.toc-ui .l0 button { font: 700 16px var(--font-head); border-bottom-color: var(--chrome-fg); margin-top: 12px; }
.toc-ui .l1 button { padding-left: 16px; }
.toc-ui button:hover { color: var(--red); }
.toc-ui i { font-style: normal; color: var(--muted-fg); }

/* Lupe */
.zoom-body { padding: 0 !important; background: var(--stage); }
.zoom-pages { display: flex; flex-direction: column; align-items: safe center; width: max-content; min-width: 100%; gap: 16px; padding: 16px; }
.zoom-page { position: relative; background: #fff; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.12); flex: none; }

.toast { position: fixed; left: 50%; bottom: calc(var(--bar) + 16px); transform: translateX(-50%); background: var(--fg); color: #fff; padding: 10px 16px; font-size: 14px; z-index: 30; max-width: calc(100% - 32px); }
.noscript { position: fixed; inset: auto 0 0; background: #fff; padding: 12px; margin: 0; }

/* ---------- Schmale Bildschirme */
@media (max-width: 900px) {
  .doc-title { display: none; }
}
@media (max-width: 640px) {
  :root { --bar: 52px; }
  .brand { padding: 0 14px; border-right: 0; }
  .logo-bar { height: 22px; }
  .quick { display: none; }
  .hide-s { display: none; }
  .show-s { display: inline-flex; }
  .tools .ico { padding: 0 8px; }
  .stage { padding: 8px 8px 22px; }
  .nav { display: none; }
  .pager { gap: 8px; }
  #pageLabel { min-width: 0; font-size: 12px; }
  .pager input { display: none; }
  .bar.bottom { justify-content: space-between; }
  .panel-body { padding: 16px; }
  .panel-head { padding-left: 16px; }
  .detail { grid-template-columns: 1fr; gap: 16px; }
  .d-img { position: static; height: 280px; }
  .d-head h3 { font-size: 22px; }
  .sheet dl { grid-template-columns: 1fr; }
  .sheet dl div:nth-child(odd) { margin-right: 0; }
  .results { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .res .ph { height: 120px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .form .row { grid-template-columns: 1fr; }
}

/* ---------- Druck (Datenblatt-Druck läuft über ein eigenes Fenster) */
@media print {
  body { display: block; overflow: visible; background: #fff; }
  .bar, .nav, .hint, .panel, .toast { display: none !important; }
}


/* ---------- Logo-Plastic: Abweichungen zur Biplast-Grundgestaltung */
.btn { border-radius: 30px; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.cta { border-radius: 0; }
.quick input, .field select, .field input, .form input, .form textarea, .chip { border-radius: 30px; }
.form textarea { border-radius: 16px; }
.pg h1, .pg h2 { text-transform: uppercase; font-weight: 600; letter-spacing: .01em; }
.pg h2 { font-size: 17px; }
.pg h3, .pg h4 { font-weight: 700; }
.pg .eyebrow::before { content: "— "; }
.doc-title, .panel-head h2, .d-head h3, .res b, .mlist b { font-weight: 700; }
.card .ph, .res .ph, .d-img, .mlist img, .fig img, .step img, .team img, .cert-doc, .hero.collage, .tile, .callout, .howto { border-radius: var(--radius); }
.card { border-top: 0; padding-top: 0; }
.card .ph { margin-bottom: 7px; }
.tab { border-radius: 4px 0 0 4px; }
.page.left .tab { border-radius: 0 4px 4px 0; }

/* Produktkarten 3 × 3 */
.cards.three { grid-template-columns: repeat(3, 1fr); gap: 10px 10px; }
.cards.three .card .ph { padding: 5px; background: var(--muted); }
.cards.three .card .cn, .cards.three .card .cv { font-size: 7.6px; }
.cards.three .card .cm, .cards.three .card .cnr { font-size: 6.2px; }
.card .cs { font: 700 5.6px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 1px; }

/* Umschlag und Rückseite mit Titelbild der Website */
.cover { background: #333; color: #fff; overflow: hidden; }
.cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.cover > *:not(.cover-bg) { position: relative; }
.cover .logo-cover, .back .logo-back { color: #fff; }
.cover-year { color: rgba(255,255,255,.75); }
.cover-title { margin-top: 120px; }
.cover-title h1 { font-size: 40px; color: var(--red); }
.cover-title .lead { color: #fff; max-width: 300px; }
.cover-title .eyebrow { color: #fff; }
.cover-cats { margin-top: auto; }
.cover-cats span { border-color: rgba(255,255,255,.5); border-radius: 30px; color: #fff; }
.cover-foot { color: rgba(255,255,255,.8); border-top-color: var(--red); }
.back { background: #333; position: relative; overflow: hidden; }
.back > *:not(.cover-bg) { position: relative; }
.back .cover-bg { opacity: .25; }

/* Kapitelauftakt */
.op-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.op-head .chap { margin: 0; }
.op-head h2 { margin: 0; }
.hero.tall { height: 230px; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius); }
.series-list { font-size: 7.4px; line-height: 1.8; color: var(--muted-fg); }
.series-list b { color: var(--fg); }
.series-list [role="button"] { display: inline; color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
.series-list [role="button"]:hover { color: var(--red); }

/* Unternehmen */
.facts.six { grid-template-columns: repeat(3, 1fr); }
.facts.six b { color: var(--red); }
.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); }
.timeline b { font: 700 10px var(--font-head); color: var(--red); }
.timeline h4 { margin-bottom: 1px; }
.timeline p { font-size: 7.6px; margin: 0; }
.team.four { grid-template-columns: repeat(4, 1fr); gap: 9px 9px; }
.team.four img, .team .noimg { aspect-ratio: 1; display: block; width: 100%; background: var(--muted); border-radius: var(--radius); object-position: 50% 15%; }
.team .gebiet { color: var(--fg) !important; font-size: 6.4px !important; }
.sites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.sites div { border-top: 2px solid var(--fg); padding-top: 4px; display: flex; flex-direction: column; font-size: 7.2px; }
.sites b { font-size: 8.4px; }
.sites .ort { color: var(--red); font-weight: 700; }
.docs { display: grid; gap: 6px; }
.docs .doc-link { margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; border-radius: var(--radius); }
.docs .doc-link span { color: var(--muted-fg); font-weight: 400; }
.docs .doc-link i { font-style: normal; font-size: 7.4px; font-weight: 700; color: var(--red); }

/* Detail: Serieninfo */
.serie-info { margin-top: 18px; background: var(--muted); color: var(--fg); padding: 12px 14px; border-radius: var(--radius); font-size: 13px; }
.serie-info h4 { font-size: 13px; margin: 0 0 6px; }
.serie-info p { margin: 0 0 6px; }
.d-head .nr { color: var(--muted-fg); }
.form select { height: 40px; border: 1px solid var(--chrome-border); background: var(--chrome); color: var(--chrome-fg); font: 14px var(--font-sans); padding: 0 10px; border-radius: 30px; width: 100%; }

.hero.short { height: 110px; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius); }
.card .cn { overflow-wrap: anywhere; hyphens: auto; }
/* Inhaltsverzeichnis: 11 Kapitel und 3 Register müssen auf eine Seite */
.k-toc .toc li [role="button"] { padding: 1.6px 0; }
.k-toc .toc .l0 { margin-top: 6px; }
.k-toc .toc .l0 span { font-size: 9px; }
.k-toc .toc .l1 span { font-size: 8px; }

/* Daumenregister mit 12 Einträgen */
.tabs { top: 40px; bottom: 40px; gap: 1.5px; }
.tab span { font-size: 5.3px; letter-spacing: .06em; }

/* Kapitelbilder der Website: freigestellte Hochformate → ganz zeigen, auf Grau */
.hero.tall, .hero.short { object-fit: contain; object-position: 50% 50%; background: var(--muted); padding: 8px; }
.hero.tall { height: 225px; }
.hero.short { height: 150px; }

/* Register: Logo-Plastic-Artikelnummern (z. B. 11-1000-21-0000) brauchen eine breitere Spalte */
.k-register .rr { grid-template-columns: 54px 1fr 14px; }
.k-register .rr b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Umschlag v2: nach dem Header der Website-Startseite */
.cover.v2 { background: #fff; color: var(--fg); padding: 0; display: flex; flex-direction: column; }
.cv-hero { position: relative; height: 300px; flex: none; overflow: hidden; background: #333; color: #fff; }
.cv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.cv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,30,.55) 0%, rgba(30,30,30,.15) 35%, rgba(30,30,30,.78) 100%); }
.cv-top, .cv-title { position: relative; z-index: 1; }
.cv-top { display: flex; justify-content: space-between; align-items: center; padding: 24px 30px 0; }
.cv-top .logo-cover { height: 24px; width: auto; color: #fff; }
.cv-year { font: 700 6.4px var(--font-head); letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; padding: 3px 9px; }
.cv-title { position: absolute; left: 30px; right: 30px; bottom: 22px; }
.cv-eyebrow { font: 600 7px var(--font-head); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; }
.cv-title h1 { font: 600 30px/1.02 var(--font-head); text-transform: uppercase; letter-spacing: .005em; margin: 0; hyphens: manual; }
.cv-title h1 span { display: block; }
.cv-title h1 .o { color: var(--red); }
.cv-lead { font-size: 9px; margin: 8px 0 0; max-width: 290px; color: rgba(255,255,255,.92); }
.cv-facts { display: grid; grid-template-columns: repeat(4, 1fr); background: #333; color: #fff; padding: 9px 30px; flex: none; }
.cv-facts div { display: flex; flex-direction: column; }
.cv-facts b { font: 700 13px var(--font-head); color: var(--red); line-height: 1.1; }
.cv-facts span { font-size: 6.2px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; padding: 12px 30px 10px; background: var(--muted); }
.cv-tile { display: flex; flex-direction: column; min-height: 0; background: #fff; border-radius: var(--radius); overflow: hidden; cursor: pointer; position: relative; transition: box-shadow .15s; }
.cv-tile:hover { box-shadow: 0 0 0 1.5px var(--red); }
.cv-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #f4f6f8; }
.cv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-name { font: 700 6.6px/1.15 var(--font-head); padding: 4px 18px 4px 6px; text-transform: uppercase; letter-spacing: .03em; }
.cv-n { position: absolute; right: 5px; bottom: 4px; font: 700 6.6px var(--font-head); color: var(--red); }
.cv-search .cv-img { background: var(--red); color: #fff; flex-direction: column; gap: 2px; }
.cv-search .cv-img b { font: 700 17px var(--font-head); line-height: 1; }
.cv-search .cv-img i { font-style: normal; font-size: 6.2px; letter-spacing: .08em; text-transform: uppercase; }
.cv-foot { display: flex; justify-content: space-between; gap: 8px; background: var(--red); color: #fff; padding: 7px 30px; font: 600 6.6px var(--font-head); letter-spacing: .04em; flex: none; }
.cv-img img { object-fit: cover; object-position: 50% 35%; }
.cv-name { overflow-wrap: anywhere; hyphens: auto; padding-right: 16px; min-height: 22px; display: flex; align-items: center; }

/* ---------- Logo: keine Icon-Kontur, negativ auf dunklem Grund */
svg.logo-bar, svg.logo-run, svg.logo-cover, svg.logo-back, svg.logo-neg { stroke: none; fill: none; }
.logo-neg path:not(mask path) { fill: #fff; }
.cv-top .logo-cover { height: 26px; }

/* ---------- Bedienelemente im Logo-Plastic-Stil (Shop-Header, Website-Footer, Pill-Buttons) */
.bar.top { border-top: 4px solid var(--red); border-bottom: 1px solid var(--chrome-border); box-shadow: 0 2px 10px rgba(51,51,51,.06); }
.brand { border-right: 0; padding: 0 18px 0 22px; }
.logo-bar { height: 30px; }
.doc-title { font: 700 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; padding: 0 14px; border-left: 1px solid var(--chrome-border); }
.doc-title span { color: var(--red); margin-left: 8px; }
.quick { max-width: 340px; }
.quick input { background: var(--ui-fill); border: 1px solid transparent; height: 38px; padding-left: 36px; font-size: 13px; }
.quick input:focus { background: var(--chrome); border-color: var(--red); }
.quick svg { left: 13px; color: var(--red); }
.tools { gap: 2px; align-items: center; padding-right: 10px; }
.tools .ico { min-height: 38px; border-radius: 30px; padding: 0 13px; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--chrome-fg); transition: background .15s, color .15s; }
.tools .ico svg { color: var(--red); width: 18px; height: 18px; }
.tools .ico:hover { background: var(--ui-fill); color: var(--chrome-fg); }
.ico b { top: 3px; right: 3px; border-radius: 30px; min-width: 17px; height: 17px; line-height: 17px; box-shadow: 0 0 0 2px var(--chrome); }
.cta { min-height: 40px !important; margin-left: 8px; padding: 0 20px; border-radius: 30px !important; letter-spacing: .1em; font-size: 11px; }
.cta svg { stroke-width: 2.2; }

.bar.bottom { background: #333; color: #fff; border-top: 0; }
.bar.bottom .ico { color: #fff; border-radius: 30px; }
.bar.bottom .ico:hover { color: var(--red); background: rgba(255,255,255,.08); }
#pageLabel { color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .04em; }
#pageLabel b { color: #fff; }
.pager input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: #555; outline: none; }
.pager input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 3px solid #333; box-shadow: 0 0 0 1.5px var(--red); cursor: pointer; }
.pager input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 3px solid #333; cursor: pointer; }
.pager input[type=range]::-moz-range-progress { background: var(--red); height: 4px; border-radius: 4px; }

.nav { width: 46px; height: 46px; border-radius: 50%; background: var(--chrome); color: var(--red); opacity: 1; box-shadow: 0 3px 14px rgba(51,51,51,.14); transition: background .15s, color .15s, transform .15s; }
.nav:hover { background: var(--red); color: #fff; transform: translateY(-50%) scale(1.05); }
.nav svg { width: 22px; height: 22px; stroke-width: 2.4; }
.nav.prev { left: 14px; } .nav.next { right: 14px; }
.hint { color: #6b6f73; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* Panels */
.panel-back { background: rgba(51,51,51,.55); }
.panel-head { border-bottom: 0; box-shadow: inset 0 -3px 0 var(--red); }
.panel-head h2 { font: 600 15px var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.panel-head .x { border-radius: 50%; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.panel-head .x:hover { background: var(--ui-fill); color: var(--red); }
.search-main input { border-radius: 30px; background: var(--ui-fill); border-color: transparent; }
.search-main input:focus { background: var(--chrome); border-color: var(--red); }
.search-main svg { color: var(--red); }
.chip { font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; background: var(--chrome); }
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.field { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.field select { background-color: var(--ui-fill); border-color: transparent; }
.res { border-top: 0; border-radius: var(--radius); padding: 6px; transition: box-shadow .15s; }
.res:hover { box-shadow: 0 0 0 1.5px var(--red); }
.res .ph { border-radius: var(--radius); background: var(--muted); }
.linkbtn { text-decoration-color: rgba(255,102,0,.45); }
.eyebrow-ui { letter-spacing: .14em; }
.toc-ui .l0 button { border-bottom-color: var(--red); }
.toast { border-radius: 30px; background: #333; padding: 11px 20px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.mlist img { border-radius: var(--radius); }
@media (max-width: 640px) {
  .brand { padding: 0 12px; }
  .logo-bar { height: 24px; }
  .tools .ico { padding: 0 9px; }
}
/* Werkzeug-Beschriftungen erst bei viel Platz, damit das Suchfeld nutzbar bleibt */
.quick { min-width: 220px; }
@media (max-width: 1560px) { .tools .ico span { display: none; } .tools .ico { padding: 0 11px; } }
@media (max-width: 1100px) { .doc-title span { display: none; } }
@media (max-width: 900px) { .quick { min-width: 0; } }

/* ---------- Kästchen («4 Gründe» u. a.): Karte statt Linie mit runden Ecken */
.tile { border-top: 0; background: var(--muted); border-radius: var(--radius); padding: 8px 9px 7px; }
.tile .no { color: var(--red); }

/* ---------- Daumenregister: anthrazit wie die Website-Navigation, aktiv orange */
.tab { background: #474747; color: rgba(255,255,255,.88); }
.tab:hover { background: #333; color: #fff; }
.tab.on { background: var(--red); color: #fff; }

/* ---------- Umschlag v3 «Hell / Print»: Logo positiv auf Weiss, Kategorieverzeichnis */
.cover.v3 { background: #fff; color: var(--fg); padding: 30px 34px 0; display: flex; flex-direction: column; }
.c3-top { display: flex; justify-content: space-between; align-items: center; }
.c3-top .logo-cover { height: 26px; width: auto; }
.c3-year { font: 700 6.5px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); }
.c3-title { margin-top: 44px; border-left: 4px solid var(--red); padding-left: 14px; }
.c3-eyebrow { font: 600 7px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 0 0 7px; }
.cover.v3 h1 { font: 600 31px/1.02 var(--font-head); text-transform: uppercase; color: var(--fg); margin: 0; hyphens: manual; }
.c3-lead { font-size: 9px; color: var(--muted-fg); margin: 8px 0 0; max-width: 280px; }
.c3-hero { margin: 18px -34px 0; height: 190px; background: var(--muted); }
.c3-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c3-list { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 22px; }
.c3-list li { display: flex; align-items: baseline; gap: 7px; font: 600 7.6px var(--font-head); text-transform: uppercase; letter-spacing: .04em; padding: 3px 0; border-bottom: 1px solid #e3e8ed; break-inside: avoid; cursor: pointer; }
.c3-list li > * { pointer-events: none; }
.c3-list li span { color: var(--red); font-weight: 700; width: 12px; }
.c3-list li i { margin-left: auto; font-style: normal; color: var(--muted-fg); font-weight: 400; }
.c3-list li:hover { color: var(--red); }
.c3-foot { margin: auto -34px 0; display: flex; justify-content: space-between; padding: 9px 34px; border-top: 3px solid var(--red); font-size: 7px; color: var(--muted-fg); }

/* Rückseite im Stil des Umschlags C */
.page.k-back { background: #fff; }
.back.v3 { background: #fff; color: var(--fg); padding: 30px 34px 0; justify-content: flex-start; align-items: stretch; gap: 0; }
.back.v3 .c3-top .logo-back { height: 26px; width: auto; color: inherit; }
.back.v3 h1 { font: 600 27px/1.04 var(--font-head); text-transform: uppercase; color: var(--fg); margin: 0; hyphens: manual; }
.back.v3 .c3-hero { height: 180px; }
.b3-kontakt { margin: 20px 0 0; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 14px; font-size: 8px; line-height: 1.55; }
.b3-kontakt dt { font: 700 6px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 2px; }
.b3-kontakt dd { margin: 0 0 8px; }
.b3-kontakt a { color: inherit; text-decoration: none; }
.b3-kontakt a:hover { color: var(--red); }

/* ---------- Farben statt Artikelnummer auf den Produktkarten */
.card { min-width: 0; }  /* lange Farblisten dürfen die Rasterspalte nicht verbreitern */
.card .cnr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0 1px 1px; }  /* Platz, damit der erste Farbpunkt nicht angeschnitten wird */
.fp { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 2px; vertical-align: 0; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.35); }

/* ---------- Branchen-Einstieg im Inhaltsverzeichnis */
.toc-br { margin-top: 14px; }
.toc-br .eyebrow { margin-bottom: 5px; }
.bchips { display: flex; flex-wrap: wrap; gap: 4px; }
.bchip { font: 700 6.4px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border: 1px solid var(--fg); border-radius: 999px; cursor: pointer; }
.bchip:hover { background: var(--red); border-color: var(--red); color: #fff; }
.toc-ui-h { font: 700 11px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin: 18px 0 6px; }
.toc-ui a { display: flex; width: 100%; justify-content: space-between; padding: 10px 0 10px 16px; border-bottom: 1px solid var(--chrome-border); font-size: 15px; color: inherit; text-decoration: none; }
.toc-ui a:hover { color: var(--red); }
a.bchip { color: inherit; text-decoration: none; }