/* ========================================================================== EssenzNatur — round 2 components. Loaded after sections.css. Reuses the existing tokens throughout; nothing new is declared at :root. The homepage now runs nine bands, so the rhythm rules at the end matter as much as the components: no two adjacent bands may share a background, and vertical padding stays on the same scale. ========================================================================== */ /* Ghost button sitting on the hero photograph: the default ghost borrows --line, which disappears against a dark image. */ .btn--onmedia{ color:var(--on-deep);border-color:rgba(232,245,233,.5);background:rgba(20,48,23,.28); backdrop-filter:blur(2px); } .btn--onmedia:hover,.btn--onmedia:focus-visible{ color:#fff;border-color:var(--on-deep);background:rgba(20,48,23,.5); } /* Shared "read on" link under a band. */ .sec-more{margin:var(--s-6) 0 0} .sec-more .more{display:inline-flex;align-items:center;min-height:44px;line-height:var(--lh-body)} /* ========================================================================== 02 — Product portfolio ========================================================================== */ .pgrid{ display:grid;gap:1px;background:var(--line); grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; list-style:none;margin:0;padding:0; } .pgrid-item{min-width:0;background:var(--card)} .pgrid-item>.pcard{height:100%} .pgrid--home{grid-template-columns:repeat(3,minmax(0,1fr))} .pgrid--archive{grid-template-columns:repeat(12,minmax(0,1fr));background:transparent} .pgrid--archive>.pgrid-item{grid-column:span 3} .pgrid--archive.pgrid--count-3>.pgrid-item{grid-column:span 4} .pgrid--archive.pgrid--count-5{ grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-5); border:0;border-radius:0;overflow:visible; } .pgrid--archive.pgrid--count-5>.pgrid-item{ grid-column:span 2;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; } .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(4){grid-column:2 / span 2} .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(5){grid-column:4 / span 2} .pgrid--archive.pgrid--count-11>.pgrid-item:nth-last-child(-n+3){grid-column:span 4} /* Brief §9 card spec: #f9f9f9 ground, 15–20px padding. The hover lifts to white rather than darkening, now that the card ground is the tinted one. */ .pcard{ background:var(--card);padding:var(--gap);text-decoration:none;color:inherit; display:flex;flex-direction:column;gap:var(--s-2);min-height:150px; transition:background var(--dur) var(--ease); } .pcard:hover,.pcard:focus-visible{background:var(--white)} .pcard-fig{margin:0 0 var(--s-3);aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-sm)} .pcard-fig img{width:100%;height:100%;object-fit:cover} .pcard-body{display:flex;flex-direction:column;gap:var(--s-1)} .pcard-name{font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-lede);letter-spacing:var(--ls-display);line-height:var(--lh-h);margin:0} .pcard-bot{font-family:var(--data);font-size:var(--fs-micro);color:var(--sage);font-style:normal} .pcard-marker{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s-2)} .pcard-desc{ margin-top:var(--s-3);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden; } .pcard-unit{ margin-top:auto;padding-top:var(--s-3); font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--muted); } .pcard:hover .pcard-name,.pcard:focus-visible .pcard-name{color:var(--sage)} /* ========================================================================== 03 — Industries ========================================================================== */ .ind{ display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md); padding:var(--s-6);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); } .ind:hover,.ind:focus-visible{border-color:var(--sage);box-shadow:var(--e-2)} .ind h3{font-size:var(--fs-h3)} .ind p{margin:0;font-size:var(--fs-small);color:var(--muted);flex:1} .ind .more{margin-top:var(--s-2)} /* ========================================================================== 04 — Why EssenzNatur ========================================================================== */ .why{ list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); } /* A column, so the four route links sit on one baseline across the row however unevenly the reasons above them wrap. margin-top:auto on the link is what does it; the rule needs the flex context to work. */ .why li{ border-top:2px solid var(--sage);padding-top:var(--s-4); display:flex;flex-direction:column; } .why-icon{ display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s-4); border:1px solid var(--sage-2);border-radius:50%;background:var(--mist);color:var(--deep); } .why-icon .en-icon{width:22px;height:22px} .why h3{font-size:var(--fs-h3);margin:0 0 var(--s-2)} .why p{margin:0;font-size:var(--fs-small);color:var(--muted)} /* The one concrete fact behind the reason. Set in the data face at label size so it reads as evidence rather than as a second sentence of the description — the distinction the band exists to make. Selected as `.why .why-f` rather than `.why-f`: the element is a

, so the `.why p` rule above it is (0,1,1) and would win against a single class. Two classes beat it without reaching for !important. */ .why .why-f{ margin:var(--s-3) 0 0; padding-top:var(--s-3);border-top:1px solid var(--line); font-family:var(--data);font-size:var(--fs-micro); line-height:var(--lh-micro);color:var(--ink); } .why-more{ margin-top:auto;padding-top:var(--s-4); font-size:var(--fs-small);line-height:var(--lh-small); color:var(--sage);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--line); } .why-more:hover,.why-more:focus{text-decoration-color:var(--sage)} /* ========================================================================== 05 — India → Germany → worldwide ========================================================================== */ /* Exactly three stages, so the track count is fixed. auto-fit was fitting a fourth empty track at desktop width and leaving a gap on the right. */ .flow{ list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr));position:relative; } @media (max-width:820px){.flow{grid-template-columns:1fr}} .flow-i{position:relative;padding-left:var(--s-6)} .flow-i::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--sage-2),rgba(74,124,78,.15)); } .flow-n{ display:inline-block;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--deep);background:var(--on-deep-3); padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);margin-bottom:var(--s-3); } .flow-i h3{font-size:var(--fs-h3);margin-bottom:var(--s-2);color:var(--on-deep)} .flow-i p{margin:0;font-size:var(--fs-small);color:var(--on-deep-2)} /* ========================================================================== 06 — Quality you can verify ========================================================================== */ .verify{list-style:none;margin:var(--s-5) 0 0;padding:0;border-top:1px solid var(--line)} .verify li{ position:relative;padding:var(--s-4) 0 var(--s-4) var(--s-6); border-bottom:1px solid var(--line-2); font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-body);letter-spacing:var(--ls-display); } .verify li::before{ content:"";position:absolute;left:2px;top:1.42em;width:13px;height:7px; border-left:2px solid var(--sage);border-bottom:2px solid var(--sage); transform:rotate(-45deg); } /* ========================================================================== 08 — Sustainability metrics on a light ground ========================================================================== */ .stats--light{background:var(--line);border-color:var(--line)} .stats--light .stat{background:var(--white)} .stats--light .stat-v{color:var(--ink)} .stats--light .stat-u{color:var(--sage)} .stats--light .stat p{color:var(--muted)} /* ========================================================================== 09 — Request a sample ========================================================================== */ /* The CTA band was a sixth vertical rhythm at 64→110px. It is the standard rhythm — there are three, and this is not a fourth. */ .sec--cta{padding:var(--sec-y) 0} .cta2{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s-7);align-items:center} .cta2 h2{margin-bottom:var(--s-4)} .cta2 .lede{margin:0 0 var(--s-6);max-width:44ch} .cta2-l{ font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase; color:var(--on-deep-3);margin:0 0 var(--s-4); } .deliver{list-style:none;margin:0;padding:0;display:grid;gap:0} .deliver li{ position:relative;padding:var(--s-4) 0 var(--s-4) var(--s-6); border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-lede);color:var(--on-deep);letter-spacing:var(--ls-display); } .deliver li:first-child{border-top:1px solid rgba(255,255,255,.14)} .deliver li::before{ content:"";position:absolute;left:2px;top:1.45em;width:13px;height:7px; border-left:2px solid var(--on-deep-3);border-bottom:2px solid var(--on-deep-3); transform:rotate(-45deg); } /* The Brief fixes CTA text at 1em/700 on both desktop and mobile, so the large variant grows by padding, not by type. */ .btn--lg{padding:var(--s-4) var(--s-6)} @media (max-width:860px){ .cta2{grid-template-columns:1fr;gap:var(--s-7)} } /* ========================================================================== Applications page — two routes and the cross-link ========================================================================== */ .path{ display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit; background:var(--card);border:1px solid var(--line-2);border-left:3px solid var(--line); border-radius:var(--r-md);padding:var(--s-6); transition:border-color var(--dur) var(--ease); } .path:hover,.path:focus-visible{border-left-color:var(--sage);border-color:var(--sage-2)} .path--on{border-left-color:var(--sage)} .path h3{font-size:var(--fs-h3)} .path p{margin:0;font-size:var(--fs-small);color:var(--muted);flex:1} .crosslink{ display:flex;justify-content:space-between;align-items:center;gap:var(--s-6); flex-wrap:wrap;text-decoration:none;color:inherit; background:var(--mist);border:1px solid var(--line);border-radius:var(--r-md); padding:var(--s-6);transition:border-color var(--dur) var(--ease); } .crosslink:hover,.crosslink:focus-visible{border-color:var(--sage)} .crosslink-e{ display:block;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-2); } .crosslink-h{display:block;font-family:var(--display);font-weight:var(--fw-heading);font-size:var(--fs-lede);margin-bottom:var(--s-1)} .crosslink-p{display:block;font-size:var(--fs-small);color:var(--muted);max-width:60ch} .plist--tight .prow{padding-top:var(--s-3);padding-bottom:var(--s-3)} .industry-decision-grid{align-items:stretch} .industry-next{ position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden; padding:clamp(28px,4vw,56px);border:1px solid var(--line-on-deep-2); background:var(--deep);color:var(--on-deep); } .industry-next::after{ content:"";position:absolute;right:-90px;bottom:-120px;width:260px;aspect-ratio:1; border:1px solid var(--line-on-deep);border-radius:50%;box-shadow:0 0 0 40px rgba(255,255,255,.025); pointer-events:none; } .industry-next-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s-6);border:1px solid var(--line-on-deep-2);border-radius:50%;color:var(--focus-on-dark)} .industry-next-icon .en-icon{width:22px;height:22px} .industry-next .eyebrow{color:var(--focus-on-dark)} .industry-next h3{position:relative;z-index:1;max-width:18ch;margin-bottom:var(--s-3);color:var(--white)} .industry-next>p:not(.eyebrow){position:relative;z-index:1;max-width:50ch;margin:0;color:var(--on-deep-2)} .industry-next-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:auto;padding-top:var(--s-7)} .industry-next-actions .btn{max-width:100%;white-space:normal;text-align:center} .industry-next-actions .btn--ghost{border-color:var(--line-on-deep-2);color:var(--white);background:transparent} .industry-next-actions .btn--ghost:hover,.industry-next-actions .btn--ghost:focus-visible{border-color:var(--focus-on-dark);background:rgba(255,255,255,.07);color:var(--white)} .quality-regulatory-route-grid{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:clamp(40px,8vw,120px); align-items:center;padding:clamp(32px,5vw,72px);border:1px solid var(--line);background:var(--mist); } .quality-regulatory-route-grid h2{max-width:18ch;margin:0} .quality-regulatory-route-grid>div:last-child>p{max-width:62ch;margin:0 0 var(--s-5);color:var(--muted)} .regulatory-matrix{margin-top:clamp(56px,8vw,104px);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)} .page-template-template-regulatory{overflow-x:clip} /* ========================================================================== Footer — a sixth column for Legal (round 2 spec) ========================================================================== */ .fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.05fr .8fr} @media (max-width:1240px){.fgrid{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.fgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.fgrid{grid-template-columns:1fr}} /* ========================================================================== Section rhythm. Nine bands on one page makes adjacency errors visible, so the alternation is enforced here rather than left to whoever edits front-page.php next: two neighbouring sections may not share a background. ========================================================================== */ .sec--mist + .sec--mist{background:var(--paper)} /* --ink is the Brief's #333 body grey now, which is not a band colour. Two adjacent dark bands separate on --deeper instead. */ .sec--dark + .sec--dark{background:var(--deeper)} /* ========================================================================== Mobile corrections, from rendering the site at 375px in a real browser. Two classes of problem showed up: interactive targets well under the 44px minimum, and a set of micro-labels that are legible on a desktop monitor but not in the hand. On type: a strict 14px floor everywhere would flatten the typographic system — the uppercase mono eyebrows, data labels and unit tags are a deliberate device and are meant to read as small. What is corrected here is the genuinely illegible end: nothing below 12px survives on a phone, and body-grade copy is lifted to 14px. The remaining 12-13.4px labels are flagged in FINAL-AUDIT.md for a decision rather than changed unilaterally. ========================================================================== */ @media (max-width:1024px){ .knowledge-grid--count-4{grid-template-columns:repeat(2,minmax(0,1fr))} /* The language switcher must stay reachable on every screen — it is the primary control on a bilingual site. */ .lang a{min-height:44px;display:flex;align-items:center;font-size:var(--fs-micro)} .burger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} } /* Touch targets apply up to 1024px: 768 and 1024 are tablet widths and are touched, not clicked. Above that a mouse is the assumption and the tighter desktop rhythm is correct. */ @media (max-width:1024px){ .brand{min-height:44px} .cookie .btn{min-height:44px} footer.site li a{min-height:44px;display:flex;align-items:center} .strip a{min-height:44px} /* Selection chips on the sample form were 33px tall. The label is the tap target here — the 13px checkbox inside it is not meant to be aimed at. */ .chip{min-height:44px} .consent{min-height:44px;align-items:center} .certs a,.mems a,.acc-q,.tds-tabs button{min-height:44px} .btn{min-height:44px} /* Every "read on" link, not only the ones inside .sec-more — the sample form's sidebar carries a bare one that was 16px tall. */ a.more{min-width:44px;min-height:44px;display:inline-flex;align-items:center} .sres-h a{display:inline-flex;align-items:center;min-height:44px} /* Standalone contact links (mailto, tel) are targets in their own right, unlike a link inside a running sentence. */ .val a[href^="mailto"],.val a[href^="tel"], .aside a[href^="mailto"],.aside a[href^="tel"], footer.site a[href^="mailto"]{min-height:44px;display:inline-flex;align-items:center} /* Product-row links in the documentation matrix, the back links, and the application filter bar were all a few pixels short. */ .dt-n,.back,.filters a{min-height:44px;display:inline-flex;align-items:center} /* The burger only appears below 1000px, so at 1024 the desktop menu is still on screen and being touched. */ #primary-menu a{min-height:44px;display:flex;align-items:center} } /* ========================================================================== Grid tracks that can actually shrink. "1fr" is shorthand for minmax(auto, 1fr), and that auto minimum refuses to go below the content's min-content width. Three things in these cards set a hard floor: long German compounds, the nowrap pending chip at 147px, and the data table's own min-width. The result was horizontal page scroll on Company, Sustainability, FAQ and Documentation — at 768 as well as 375, which a phone-only check would have missed. Applied at every width rather than inside a breakpoint, because the same overflow appeared in the three-column layout. ========================================================================== */ .g3 > *,.g2 > *,.qgrid > *,.usp > *,.why > *,.certs > *,.mems > *, .stats > *,.pgrid > *,.kinds > *,.flow > *,.chain > *,.split > *{ min-width:0; } .case,.qbox,.val,.vm,.region,.ind,.path,.pcard,.stat,.usp-i,.why li{ overflow-wrap:anywhere; } /* The chip is nowrap so it reads as one token on a desktop row, but that made it the widest thing in a narrow card. Let it wrap when the card is tight. */ @media (max-width:1024px){ .pend{white-space:normal} } /* The documentation matrix scrolls inside its own box — but only if the box itself is allowed to be narrower than the table. */ .dtable-wrap{min-width:0;max-width:100%} /* The accordion button pushed its "+" past the edge when a question did not wrap. */ .acc-q{min-width:0} .acc-q span{min-width:0;overflow-wrap:anywhere} .acc-q .acc-icon{flex:0 0 auto} @media (max-width:720px){ .pcard{min-height:auto;padding:var(--s-5) var(--s-4)} /* Type floor. .btn is deliberately absent: Brief §9 holds CTA text at 1em (16px) on mobile as well as desktop, and shrinking it here would undo that on every phone. */ .brand i{font-size:var(--fs-micro)} .eyebrow{font-size:var(--fs-micro)} .trust li{font-size:var(--fs-micro)} .more,.card-n,.stat-u,.cta2-l,.crosslink-e{font-size:var(--fs-micro)} .pcard-unit{font-size:var(--fs-micro)} .pcard-bot{font-size:var(--fs-micro)} .pcard-marker{font-size:var(--fs-small)} .flag,.gate p,.gate-mini{font-size:var(--fs-small)} footer.site{font-size:var(--fs-small)} .fbot{font-size:var(--fs-micro)} } /* ========================================================================== Responsive — 375 / 768 / 1024 / 1440 ========================================================================== */ @media (max-width:1024px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .pgrid--home{grid-template-columns:repeat(3,minmax(0,1fr))} .pgrid.pgrid--archive{grid-template-columns:repeat(2,minmax(0,1fr))} .pgrid--archive>.pgrid-item, .pgrid--archive.pgrid--count-3>.pgrid-item, .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(-n+3), .pgrid--archive.pgrid--count-5>.pgrid-item:nth-last-child(-n+2), .pgrid--archive.pgrid--count-11>.pgrid-item:nth-last-child(-n+3){grid-column:auto} .pgrid.pgrid--archive.pgrid--count-5{grid-template-columns:repeat(4,minmax(0,1fr))} .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(n){grid-column:span 2} .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(5){grid-column:2 / span 2} } @media (max-width:768px){ .flow-i{padding-left:var(--s-5)} .verify li,.deliver li{font-size:var(--fs-body)} .quality-regulatory-route-grid{grid-template-columns:1fr;padding:var(--s-6)} } @media (max-width:520px){ .knowledge-grid--count-1,.knowledge-grid--count-4{grid-template-columns:1fr} .pgrid{grid-template-columns:1fr} .pgrid.pgrid--archive{grid-template-columns:1fr} .pgrid.pgrid--archive.pgrid--count-5{grid-template-columns:1fr} .pgrid--archive.pgrid--count-5>.pgrid-item:nth-child(n){grid-column:auto} .why{grid-template-columns:1fr} .crosslink{flex-direction:column;align-items:flex-start;gap:var(--s-4)} } /* ========================================================================== Product detail page — the client's seven-section structure. The specification table is the reason this exists: nine rows, same order on every product, so two data sheets can be read side by side. It scrolls inside its own wrapper on a phone rather than widening the page, matching the documentation matrix. ========================================================================== */ .pdp-botanical{margin:calc(var(--s-2) * -1) 0 var(--s-4);font-size:var(--fs-lede);color:var(--muted)} .pdp-botanical em{font-style:italic} .pdp-hero-split{margin-top:var(--s-5);align-items:start} .pdp-hero-split>*{min-width:0} .pdp-hero-copy .h1-sm{overflow-wrap:break-word} /* The global split becomes one column at 1000px. Match that breakpoint here so the product name and actions never fall behind a large illustration on tablets and small laptops. Named children keep the order robust if another element is added to the hero later. */ @media(max-width:1000px){.pdp-hero-copy{order:-1}} @media(max-width:520px){ .pdp-hero-copy .acts{display:grid;grid-template-columns:minmax(0,1fr)} .pdp-hero-copy .btn{width:100%;justify-content:center} } .pdp-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)} .pdp-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)} .pdp-table th,.pdp-table td{text-align:left;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);vertical-align:top} .pdp-table tr:last-child th,.pdp-table tr:last-child td{border-bottom:0} .pdp-table th{ width:34%;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--muted);font-weight:var(--fw-micro);white-space:nowrap; } .pdp-table td{color:var(--ink)} @media (max-width:600px){ .pdp-table{table-layout:fixed} .pdp-table th{width:42%;white-space:normal} .pdp-table th,.pdp-table td{padding:var(--s-3) var(--s-4);word-break:normal} .pdp-table th{hyphens:auto;overflow-wrap:normal} .pdp-table td{overflow-wrap:break-word} } /* Quality documentation. Deliberately a status list, not a tick list: a document nobody has confirmed shows its pending marker, never a tick. */ /* Seven items never divide evenly into an auto-fit grid, so a 1px-gap background would show the container colour through the trailing empty track — the same defect e01bdb8 fixed in the India/Germany band. Each item carries its own border instead, and empty tracks stay invisible. */ .pdp-docs{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid; gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .pdp-doc{background:var(--white);border:1px solid var(--line); border-radius:var(--r-sm);padding:var(--s-4) var(--s-5); display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)} .pdp-doc-n{font-size:var(--fs-small)} .pdp-doc.is-on .pdp-doc-n{font-weight:var(--fw-micro)} .pdp-doc-s{font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--sage)} .pdp-other{margin:0 0 var(--s-4);font-size:var(--fs-small);color:var(--muted)} /* Supply information. */ .pdp-supply{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .pdp-supply li{border-top:1px solid var(--line);padding-top:var(--s-4)} .pdp-supply-l{display:block;font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro); text-transform:uppercase;color:var(--sage);margin-bottom:var(--s-2)} .pdp-supply-v{font-size:var(--fs-small);color:var(--ink)} /* ======================================================================== Premium audit refinements ======================================================================== */ /* A footnote whose text has been withdrawn must not leave its margins behind. Several .flag notes existed only to say a value was not confirmed yet; their strings are now empty, and without this the page keeps the paragraph box and the space around it. Same for the evidence legend and the pending chip, both of which now render nothing at all. */ .flag:empty,.pend:empty,.prov-legend:empty,.prov-value:empty{display:none} /* Evidence states are a small typographic grammar, not a collection of badges. The legend appears once per dense component; rows carry only the corresponding rule, italic treatment, or pending dot. */ .prov-legend{ list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap; gap:var(--s-3) var(--s-5);font-family:var(--data);font-size:var(--fs-micro); line-height:var(--lh-micro);color:var(--muted) } .prov-legend-i{display:inline-flex;align-items:center;gap:var(--s-2)} .prov-key{display:inline-flex;align-items:center;justify-content:center;width:12px;height:16px} .prov-legend-i--confirmed .prov-key{border-left:2px solid var(--sage)} .prov-legend-i--request{font-style:italic} .prov-legend-i--pending .prov-key{color:var(--amber);background:transparent;font-style:normal} .prov-value{display:inline-flex;align-items:center;min-height:24px} .prov-value--confirmed{ border-left:2px solid var(--sage);padding-left:var(--s-2);font-family:var(--data); font-weight:var(--fw-micro);font-variant-numeric:tabular-nums } .prov-value--request{font-style:italic;color:var(--muted)} .prov-value--pending{ min-width:16px;justify-content:center;color:var(--amber);background:transparent; font-family:var(--data);font-size:var(--fs-body);font-weight:var(--fw-micro);line-height:1 } .prov-value--pending>span[aria-hidden="true"]{display:inline-block;transform:translateY(-1px)} .prov-mark{display:inline-flex;align-items:center;justify-content:center;width:12px;height:16px} .prov-mark--confirmed{border-left:2px solid var(--sage)} .prov-mark--pending{color:var(--amber);background:transparent} /* Same reasoning as .pend in sections.css: the dark treatment keys off every dark ground the grammar can land on, not only .sec--dark. */ .sec--dark .prov-legend,footer.site .prov-legend{color:var(--on-deep-2)} .sec--dark .prov-legend-i--confirmed .prov-key,.sec--dark .prov-value--confirmed, .sec--dark .prov-mark--confirmed, footer.site .prov-legend-i--confirmed .prov-key,footer.site .prov-value--confirmed, footer.site .prov-mark--confirmed{border-left-color:var(--focus-on-dark)} .sec--dark .prov-legend-i--pending .prov-key,.sec--dark .prov-value--pending, .sec--dark .prov-mark--pending, footer.site .prov-legend-i--pending .prov-key,footer.site .prov-value--pending, footer.site .prov-mark--pending{color:var(--amber-on-dark);background:transparent} /* The documentation matrix owns its scrollport. contain:inline-size prevents the table's min-content width from widening the page on a phone. */ .dtable-wrap{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;contain:inline-size} .dtable-scroll{display:block;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} #dokumentenmatrix{overflow-x:clip} body.page-template-template-qualitaet{overflow-x:clip} .dtable{width:max-content;min-width:100%;table-layout:auto} .dtable thead{position:sticky;top:var(--s-8);z-index:2;background:var(--paper)} .dtable thead th:first-child,.dtable tbody th[scope="row"]{position:sticky;left:0;background:var(--paper);z-index:1;box-shadow:1px 0 0 var(--line)} .dtable thead th:first-child{z-index:3} /* The amber tint on an unconfirmed matrix cell went with the pending mark: an empty cell already says the document is not listed, and colouring it restated the review state the rest of the site no longer shows. */ .dmobile{display:none} /* Product records replace generic product photography with information the buyer can actually evaluate. */ .pdp-record{border-top:2px solid var(--sage);border-bottom:1px solid var(--line);padding:var(--s-5) 0} .pdp-record>.card-n{margin-bottom:var(--s-4)} .pdp-record dl{margin:0 0 var(--s-4)} .pdp-record dl>div{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line-2)} .pdp-record dt{font-family:var(--data);font-size:var(--fs-micro);line-height:var(--lh-micro);text-transform:uppercase;letter-spacing:var(--ls-micro);color:var(--muted)} .pdp-record dd{margin:0;font-size:var(--fs-small)} .pdp-record .prov-legend{margin-bottom:0} .pdp-docs{display:block;border-top:1px solid var(--line)} .pdp-doc{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:var(--s-3) 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-4)} .pdp-docs+.flag{max-width:72ch} /* Intentional reading measures keep large screens from turning short introductions into empty two-column compositions. */ .page-intro,.company-intro,.company-copy,.evidence-copy{max-width:820px} .evidence-copy{margin-left:auto;margin-right:auto} .contact-facts{max-width:820px} /* Editorial visuals are evidence-adjacent, never framed as documentary proof. The split keeps introductions compact on large screens and yields to one reading column before German copy is forced into a narrow measure. */ .page-visual-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;gap:var(--s-8)} .page-visual-copy{min-width:0;max-width:820px} .page-visual-media{min-width:0} .page-visual-media .ph{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Long technical pages keep their orientation without a bulky sidebar. The strip becomes sticky only after the visitor reaches it and stays a single horizontally scrollable line on narrow screens. */ .page-jump{position:sticky;top:var(--s-8);z-index:45;background:rgba(255,255,255,.96);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);box-shadow:0 8px 24px -24px rgba(20,48,23,.75);backdrop-filter:blur(10px)} .admin-bar .page-jump{top:calc(var(--s-8) + 32px)} .page-jump-inner{display:flex;align-items:center;gap:var(--s-5);min-height:56px} .page-jump-label{flex:0 0 auto;font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage)} .page-jump-links{display:flex;align-items:center;gap:var(--s-5);min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin} .page-jump-links li{flex:0 0 auto} .page-jump-links a{display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent} .page-jump-links a:hover,.page-jump-links a:focus-visible{color:var(--ink);border-bottom-color:var(--sage)} .page-jump~section[id],.page-jump~.zpdp section[id]{scroll-margin-top:calc(var(--s-8) + 68px)} @media (max-width:782px){ .admin-bar .page-jump{top:calc(var(--s-8) + 46px)} } @media (max-width:720px){ .page-jump-inner{display:flex;min-height:56px;padding-top:0;gap:var(--s-3)} .page-jump-label{display:flex;align-items:center} .page-jump-links{gap:var(--s-4)} } .section-editorial{margin:var(--s-6) 0 var(--s-7)} .section-editorial .ph,.industry-visual{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .industry-visual{margin:0 0 var(--s-5)} .ph--captioned{display:block;overflow:visible;aspect-ratio:auto} .ph--captioned img{display:block;aspect-ratio:var(--r,16/10);object-fit:cover} .ph-caption{padding:var(--s-2) 0 0;font-family:var(--data);font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);color:var(--muted)} .state-visual{max-width:480px;margin:var(--s-6) auto 0} .article-visual{margin:var(--s-6) 0} .article-card .ph{border:0;border-bottom:1px solid var(--line-2)} .knowledge-grid{background:transparent;gap:var(--gap)} .knowledge-grid>*{border:1px solid var(--line)} .knowledge-grid--count-1{grid-template-columns:minmax(0,760px)} .knowledge-grid--count-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1024px){ .knowledge-grid--count-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .knowledge-grid--count-1,.knowledge-grid--count-4{grid-template-columns:1fr} } .search-state-visual{max-width:480px;margin:var(--s-6) 0 0} .pdp-editorial{margin-bottom:var(--s-5)} .sres--visual{display:grid;grid-template-columns:144px minmax(0,1fr);gap:var(--s-5);align-items:start} .sres-media .ph{border:0} .sres-copy{min-width:0} .art .wp-block-table{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} .art--legal .wp-block-table{width:100%;margin:0} .art .wp-block-table table{width:100%;table-layout:fixed} .art .wp-block-table th,.art .wp-block-table td{overflow-wrap:anywhere;word-break:normal;vertical-align:top} .art .wp-block-table th{width:42%;text-align:left;font-weight:var(--fw-heading)} .art .wp-block-table thead th{width:auto;background:var(--card)} .art .wp-block-table:has(thead) table{min-width:680px;table-layout:auto} .sus-crops{ margin:0 0 var(--s-3)!important;font-family:var(--data);font-size:var(--fs-micro)!important; line-height:var(--lh-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage)!important; } .sus-detail-grid{margin-top:var(--s-6)} .sus-detail-grid .val{height:100%;display:flex;flex-direction:column} .sus-detail-grid .pend{align-self:flex-start;margin-top:auto} .sus-detail-note{margin-top:var(--s-5)} @media(max-width:900px){ .page-visual-intro{grid-template-columns:1fr;align-items:start;gap:var(--s-6)} .page-visual-copy{max-width:820px} } @media(max-width:520px){ .sres--visual{grid-template-columns:96px minmax(0,1fr);gap:var(--s-3)} .art--legal .wp-block-table table,.art--legal .wp-block-table tbody, .art--legal .wp-block-table tr,.art--legal .wp-block-table th, .art--legal .wp-block-table td{display:block;width:100%} .art--legal .wp-block-table tr{padding:var(--s-3) 0;border-bottom:1px solid var(--line-2)} .art--legal .wp-block-table tr:first-child{border-top:1px solid var(--line-2)} .art--legal .wp-block-table th,.art--legal .wp-block-table td{padding:var(--s-1) 0;border:0;overflow-wrap:anywhere} } /* Compact form: the qualifying questions stay visible; less-common contact context is progressively disclosed. */ .gate--text{grid-template-columns:1fr} .form-optional{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 var(--s-5)} .form-optional summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--sage)} .form-optional-body{padding:var(--s-4) 0 var(--s-2)} .fset--consent{margin-top:var(--s-5)} .chip span{min-height:44px;display:inline-flex;align-items:center} .consent{min-height:44px;align-items:flex-start;padding:var(--s-2) 0} .consent input{width:20px;height:20px;min-width:20px;min-height:20px;margin-top:2px} .consent a{text-decoration:underline;text-underline-offset:2px} .consent a{display:inline-flex;align-items:center;min-height:44px} form[aria-busy="true"]{opacity:.78} form[aria-busy="true"] button[type="submit"]{cursor:wait} /* Ghost buttons placed on media keep the approved on-media contrast while active; the generic ghost active state is for light surfaces. */ .btn--onmedia:active{background:var(--white);border-color:var(--white);color:var(--deep)} /* The five remaining footer groups fit deliberately; unknown contact data is shown as a pending evidence state instead of invented hours or a phone. */ .fgrid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))} .footer-address{margin:0;display:flex;align-items:center;gap:var(--s-2);font-family:var(--data);font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--on-deep-3)} .footer-address .prov-value--pending{color:var(--amber-on-dark);background:transparent} .footer-subheading{margin-top:var(--s-5)} footer.site li a{display:flex;align-items:center;min-height:44px} footer.site a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px} /* Premium footer: one precise closing system, with the primary conversion action first and four labelled groups below. */ footer.site{padding:0 0 var(--s-5)} .footer-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-7);padding:var(--s-7) 0;border-bottom:1px solid var(--line-on-deep)} .footer-cta>div{min-width:0} footer.site .footer-cta .eyebrow{margin:0 0 var(--s-2);color:var(--focus-on-dark)} footer.site .footer-cta .eyebrow{white-space:normal;overflow-wrap:anywhere} footer.site .footer-cta h2{margin:0 0 var(--s-3);font-family:var(--display);font-size:var(--fs-h2);font-weight:var(--fw-heading);line-height:var(--lh-h);letter-spacing:var(--ls-display);text-transform:none;color:#fff} .footer-cta p{margin:0;max-width:var(--measure);color:var(--on-deep-2)} .footer-cta>.btn{white-space:nowrap} footer.site .footer-cta>.btn{background:var(--white);border-color:var(--white);color:var(--deep)} footer.site .footer-cta>.btn:hover, footer.site .footer-cta>.btn:focus-visible, footer.site .footer-cta>.btn:active{background:transparent;border-color:var(--focus-on-dark);color:var(--white)} .fgrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-7);padding-top:var(--s-7)} /* One footer row. The brand block is now the first cell of the same grid as the four columns, instead of a separate band stacked beneath them. The columns still arrive inside their own