/* ============================================================ Pfeiffer Stahlrohrmaste · LP Lichtmaste DIN EN 40 Design-System: design/DESIGN-SYSTEM.md · Anti-Slop: design/ANTI-SLOP.md Kritisches CSS (Tokens, Base, Header, Hero) liegt inline im . ============================================================ */ /* ---------- Fonts (Rest der Familie) ---------- */ @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/source-sans-pro-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-sans-pro-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/source-sans-pro-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Sans Pro';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/source-sans-pro-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/source-sans-pro-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-sans-pro-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-sans-pro-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/source-sans-pro-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/source-sans-pro-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-code-pro-400-latin.woff2') format('woff2')} @font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-code-pro-600-latin.woff2') format('woff2')} /* ---------- Global ---------- */ ::selection{background:var(--c-red);color:#fff} :focus-visible{outline:2px solid var(--c-red);outline-offset:3px} h2{font-size:clamp(1.875rem,4.2vw,3.25rem);line-height:1.04;letter-spacing:-.02em;font-weight:900;color:var(--c-ink);margin:0 0 20px;max-width:22ch} h3{font-size:clamp(1.2rem,2vw,1.4rem);line-height:1.25;font-weight:700;color:var(--c-ink);margin:0 0 8px} p{margin:0 0 1em} a{color:var(--c-red)} a:hover{color:var(--c-red-dark)} .section-lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:300;max-width:60ch;margin-bottom:0} .kicker{font-family:var(--f-mono);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-red);margin:0 0 12px} .kicker::before{content:"";display:inline-block;width:22px;height:2px;background:var(--c-red);vertical-align:middle;margin-right:10px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--c-ink);color:#fff;padding:12px 20px;z-index:100} .skip-link:focus{left:0} /* ---------- KPI-Panel: ruhige Großzahlen-Reihe auf dunkler Bühne ---------- */ .panel-kpi{color:var(--c-on-night);padding-block:96px} .kicker-light{color:var(--c-zinc)} .kicker-light::before{background:var(--c-red)} .kpi-board{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:0;text-align:center} .kpi{padding:40px 20px 34px;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(26px) saturate(1.1);backdrop-filter:blur(26px) saturate(1.1);border-radius:10px} .kpi::before{content:"";display:block;width:28px;height:3px;background:var(--c-red);margin:0 auto 22px} .kpi-num{display:block;font-family:var(--f-mono);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;line-height:1;font-size:clamp(2.25rem,4.2vw,3.75rem)} .kpi-num i{font-style:normal;font-size:.45em;color:var(--c-zinc);margin-inline:5px} .kpi-num u{text-decoration:none;font-size:.45em;color:var(--c-zinc);margin-left:5px} .kpi-label{display:block;font-size:.9375rem;color:var(--c-zinc);margin-top:14px;max-width:none} @media (max-width:900px){ .kpi-board{grid-template-columns:1fr 1fr;gap:14px} .kpi{padding:28px 14px 24px} .kpi:last-child{grid-column:1/-1} .kpi-num{font-size:clamp(2rem,8vw,2.75rem)} } /* ---------- S2 · Ab Lager ---------- */ .ablager{background:var(--c-bg);padding-block:clamp(96px,12vw,168px) clamp(64px,9vw,128px)} .ablager-grid{margin-top:clamp(40px,5vw,72px)} .answer-block{font-size:clamp(1.125rem,1.9vw,1.4375rem);font-weight:300;line-height:1.55;max-width:52em;margin:0 0 clamp(48px,6vw,88px)} .answer-block strong{font-weight:700;color:var(--c-ink)} .ablager-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start} .ablager-media{margin:0;position:relative} .ablager-media img{width:100%;height:auto} .ablager-media figcaption{font-family:var(--f-mono);font-size:.75rem;color:var(--c-muted);margin-top:12px} .ablager-steps h2{margin-bottom:32px} .step-list{list-style:none;margin:0;padding:0;display:grid;gap:26px} .step-list li{display:block;border-top:1px solid var(--c-line-soft);padding-top:18px;position:relative} .step-list li::before{content:"";position:absolute;top:-1px;left:0;width:30px;height:3px;background:var(--c-red)} .step-head{display:flex;align-items:center;gap:14px;margin-bottom:10px} .step-head .li-icon{width:38px;height:38px;margin:0} .step-no{font-family:var(--f-mono);font-weight:600;font-size:.9375rem;color:var(--c-muted);border:0;padding:0} .step-list h3{margin-bottom:4px} .step-list p{margin:0;color:var(--c-text)} .step-contact{margin-top:28px;padding-top:20px;border-top:1px solid var(--c-line-soft);font-size:.9375rem;color:var(--c-muted);text-align:center} @media (max-width:900px){.ablager-grid{grid-template-columns:1fr}.ablager-media{order:2}} /* ---------- S3 · Sortiment ---------- */ .sortiment{background:var(--c-bg-soft);padding-block:clamp(64px,9vw,128px)} .sortiment .section-lead{margin-bottom:40px} .sort-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:24px} .sort-filter label{font-size:.875rem;font-weight:600;color:var(--c-ink)} .sort-filter select{font:400 .9375rem var(--f-sans);padding:9px 12px;border:1px solid var(--c-line);background:#fff;border-radius:2px;color:var(--c-ink)} .filter-count{font-family:var(--f-mono);font-size:.8125rem;color:var(--c-muted);margin-left:auto} .sort-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--c-ink);margin-bottom:0} .sort-tab{font:600 .9375rem var(--f-sans);padding:13px 20px;background:transparent;border:0;cursor:pointer;color:var(--c-text);position:relative;transition:color .2s} .sort-tab:hover{color:var(--c-ink)} .sort-tab.is-active{color:#fff;background:var(--c-ink)} .sort-panel{display:none;background:#fff;padding:24px;border:1px solid var(--c-line-soft);border-top:0} .sort-panel.is-active{display:block} .sort-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px} .sort-desc{margin:0;max-width:56ch;color:var(--c-text)} .pdf-link{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .sort-table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:640px} .sort-table thead th{font-family:var(--f-mono);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-align:left;color:var(--c-muted);padding:10px 12px;border-bottom:2px solid var(--c-ink);white-space:nowrap} .sort-table tbody td,.sort-table tbody th{padding:9px 12px;border-bottom:1px solid var(--c-line-soft);font-variant-numeric:tabular-nums;text-align:left} .sort-table tbody td{font-family:var(--f-mono);font-size:.875rem} .cell-code{font-family:var(--f-mono);font-weight:600;color:var(--c-ink);white-space:nowrap} .row-group th{font-family:var(--f-mono);font-size:.8125rem;font-weight:600;color:var(--c-ink);background:var(--c-bg-soft);padding:8px 12px;border-bottom:1px solid var(--c-line)} .sort-table tbody tr:hover td,.sort-table tbody tr:hover th{background:#fbfbfa} .sort-table tr.is-hidden{display:none} .cell-add{text-align:right;white-space:nowrap} .add-btn{font:600 .8125rem var(--f-sans);color:var(--c-ink);background:transparent;border:1px solid var(--c-line);padding:6px 12px;cursor:pointer;transition:all .2s var(--e-out);border-radius:2px} .add-btn span{color:var(--c-red);font-weight:700;margin-right:2px} .add-btn:hover{border-color:var(--c-ink)} .add-btn.is-added{background:var(--c-ink);border-color:var(--c-ink);color:#fff} .add-btn.is-added span{color:#fff} .sort-foot{margin-top:32px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px} .sort-equip{font-size:.9375rem;color:var(--c-text);margin:0;padding-left:16px;border-left:2px solid var(--c-red)} .sort-custom{font-size:.9375rem;color:var(--c-muted);margin:0} @media (max-width:900px){.sort-foot{grid-template-columns:1fr}.sort-tab{flex:1 1 auto;text-align:center;padding:12px 10px;font-size:.875rem}} /* ---------- S4 · Detail ---------- */ .detail{background:var(--c-bg);padding-block:clamp(64px,9vw,128px)} .detail-lead,.qual-lead{margin-bottom:clamp(40px,6vw,72px)} .detail-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center} .detail-list{list-style:none;margin:28px 0;padding:0;display:grid;gap:2px} .detail-list li{padding:14px 16px;background:var(--c-bg-soft);cursor:pointer;transition:background .2s;border-left:2px solid transparent;font-size:.9688rem;line-height:1.5} .detail-list li strong{display:block;color:var(--c-ink)} .detail-list li:hover{background:var(--c-bg-softer)} .detail-list li.is-active{border-left-color:var(--c-red);background:var(--c-bg-softer)} .detail-note{font-family:var(--f-mono);font-size:.8125rem;color:var(--c-muted);line-height:1.7} .detail-media{margin:0} .detail-stage{position:relative;max-width:440px;margin-inline:auto} .detail-stage img{width:100%;height:auto} .hotspot{position:absolute;left:var(--hx);top:var(--hy);width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;background:transparent;cursor:pointer} .hotspot::before{content:"";position:absolute;inset:6px;border:1.5px solid var(--c-muted);background:rgba(255,255,255,.85);border-radius:50%;transition:all .25s var(--e-out)} .hotspot::after{content:"";position:absolute;inset:11px;background:var(--c-muted);border-radius:50%;transition:background .25s} .hotspot:hover::before,.hotspot.is-active::before{border-color:var(--c-red);inset:3px} .hotspot:hover::after,.hotspot.is-active::after{background:var(--c-red)} .hotspot.is-active::before{box-shadow:0 0 0 4px rgba(191,0,15,.12)} .detail-caption{font-family:var(--f-mono);font-size:.75rem;color:var(--c-muted);margin-top:12px;text-align:center} @media (max-width:900px){.detail-grid{grid-template-columns:1fr}.detail-media{max-width:360px;margin-inline:auto}} /* ---------- S5 · Qualität (dunkel) ---------- */ .qualitaet{background:var(--c-night);color:var(--c-on-night);padding-block:clamp(96px,12vh,160px);min-height:100dvh;display:grid;align-items:center} .qualitaet h2{color:#fff} .qualitaet .section-lead{color:var(--c-zinc)} .qual-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start} .cert-list{list-style:none;margin:32px 0 0;padding:0} .cert-list li{border-top:1px solid rgba(255,255,255,.14)} .cert-list li:last-child{border-bottom:1px solid rgba(255,255,255,.14)} .cert-list a{display:flex;align-items:baseline;gap:16px;padding:14px 4px;color:var(--c-on-night);text-decoration:none;transition:background .2s} .cert-list a:hover{background:rgba(255,255,255,.06)} .cert-norm{font-family:var(--f-mono);font-weight:600;font-size:.8125rem;color:var(--c-zinc);flex:0 0 120px;white-space:nowrap} .cert-list a:hover .cert-norm{color:#fff} .cert-list a::after{content:"PDF";font-family:var(--f-mono);font-size:.6875rem;font-weight:600;color:#fff;background:var(--c-red);border:0;padding:4px 10px;margin-left:auto;border-radius:4px} .qual-media{margin:0;position:relative;top:48px} .qual-media img{width:100%;height:auto} .qual-media figcaption{font-family:var(--f-mono);font-size:.75rem;color:var(--c-zinc);margin-top:12px} @media (max-width:900px){.qual-grid{grid-template-columns:1fr}.qual-media{top:0}} /* ---------- S6 · Produktion ---------- */ .produktion{background:var(--c-bg);padding-block:clamp(64px,9vw,128px) 0;overflow:clip} .produktion .section-lead{margin-bottom:48px} .prod-track{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:24px;max-width:min(100%,var(--w-max))} @media (max-width:900px){.prod-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86vw;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.prod-track::-webkit-scrollbar{display:none}} .prod-step{scroll-snap-align:start;position:relative} .prod-step .step-no{display:block;margin-bottom:12px;font-size:1.25rem} .prod-step img{width:100%;aspect-ratio:4/3;object-fit:cover} .prod-step h3{margin-top:16px} .prod-step p{font-size:.9375rem;margin:0} .prod-note{font-family:var(--f-mono);font-size:.8125rem;color:var(--c-muted);border-top:1px solid var(--c-line-soft);padding-block:20px 64px;margin:0} /* ---------- S7 · Farben ---------- */ .farben{background:var(--c-bg-soft);padding-block:clamp(56px,7vw,96px)} .farben-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,72px);align-items:center} .farben-copy{text-align:center} .farben-copy p{max-width:58ch;margin-inline:auto} .ral-chips{justify-content:center} .ral-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .chip{display:inline-flex;align-items:center;gap:8px;font:600 .8125rem var(--f-sans);padding:8px 14px;border:1px solid var(--c-line);background:#fff;cursor:pointer;border-radius:2px;transition:border-color .2s} .chip::before{content:"";width:16px;height:16px;background:var(--chip);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .chip:hover{border-color:var(--c-ink)} .chip.is-active{border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)} .farben-note{font-size:.8125rem;color:var(--c-muted);margin-top:16px} .farben-grid{align-items:stretch} .farben-visual{display:flex;margin-block:calc(-1*clamp(56px,7vw,96px))} .farb-stage{position:relative;width:100%;min-height:480px} .farb-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--e-out);border-radius:0} .farb-bild.is-active{opacity:1} @media (max-width:900px){.farben-grid{grid-template-columns:1fr}.farben-visual{margin-block:0;margin-top:32px}.farb-stage{min-height:340px}} /* ---------- S8 · Referenzen ---------- */ .referenzen{background:var(--c-bg);padding-block:clamp(64px,9vw,128px)} .ref-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;margin-top:40px} .ref-card{margin:0;position:relative} .ref-card img{width:100%;height:auto;object-fit:cover} .ref-card figcaption{padding-top:16px} .ref-card h3{margin-bottom:6px} .ref-card p{font-size:.9375rem;color:var(--c-text);margin:0;max-width:44ch} .ref-card:nth-child(1){grid-column:span 7} .ref-card:nth-child(1) img{aspect-ratio:16/10} .ref-card:nth-child(2){grid-column:span 5} .ref-card:nth-child(3){grid-column:span 5} .ref-card.ref-text{grid-column:span 7;background:var(--c-night);color:var(--c-on-night);display:flex;align-items:flex-end;padding:28px;min-height:300px;position:relative;overflow:hidden} .ref-text-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0} .ref-card.ref-text::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,26,.15),rgba(22,23,26,.82) 70%)} .ref-card.ref-text figcaption{position:relative;z-index:1} .ref-card.ref-text h3{color:#fff} .ref-card.ref-text p{color:var(--c-zinc)} .ref-more{margin-top:16px} .ref-more a{color:#fff;font-weight:600} @media (max-width:900px){.ref-grid{grid-template-columns:1fr}.ref-card:nth-child(n){grid-column:auto}} /* ---------- HafenCity-Vollbild-Panel ---------- */ .panel-hafencity{color:#fff} .hafencity-copy{max-width:720px;margin-inline:auto;text-align:center} .hafencity-copy h2{color:#fff} .hafencity-copy p{color:rgba(255,255,255,.85);font-size:clamp(1.0625rem,1.6vw,1.25rem);max-width:44ch;margin-inline:auto} /* ---------- S9 · Herkunft ---------- */ .herkunft{background:var(--c-bg-soft);border-block:1px solid var(--c-line-soft);padding-block:clamp(40px,5vw,64px)} .herkunft-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center} .herkunft-jahr{font-weight:900;font-size:clamp(3.5rem,9vw,7rem);line-height:.9;letter-spacing:-.03em;color:var(--c-line);font-variant-numeric:tabular-nums} .herkunft h2{font-size:clamp(1.375rem,2.4vw,1.75rem);margin-bottom:10px;max-width:none} .herkunft p{margin:0;max-width:70ch} .herkunft em{font-style:italic;font-weight:600;color:var(--c-ink)} @media (max-width:720px){.herkunft-grid{grid-template-columns:1fr;gap:12px}} /* ---------- S10 · FAQ ---------- */ .faq{background:var(--c-bg);padding-block:clamp(64px,9vw,128px)} .faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;align-items:start;margin-top:36px} .faq details{background:var(--c-bg-soft);border-left:2px solid transparent;transition:border-color .2s} .faq details[open]{border-left-color:var(--c-red)} .faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary h3{display:inline;font-size:1.0625rem;margin:0} .faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:600 1.375rem var(--f-mono);color:var(--c-red);transition:transform .3s var(--e-out)} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq-body{padding:0 20px 20px} .faq-body p{margin:0;font-size:.9688rem} .faq-stand{font-family:var(--f-mono);font-size:.75rem;color:var(--c-muted);margin-top:24px} @media (max-width:900px){.faq-cols{grid-template-columns:1fr}} /* ---------- S11 · Anfrage ---------- */ .anfrage{background:var(--c-bg-soft);padding-block:clamp(64px,9vw,128px)} .anfrage-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:start} .anfrage form{margin-top:32px} .merkliste-box{background:#fff;border:1px solid var(--c-line);border-left:3px solid var(--c-red);padding:16px 20px;margin-bottom:28px} .merkliste-box h3{font-size:.9375rem;margin-bottom:10px} .merkliste-box ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .merkliste-box li{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:.875rem} .merkliste-box .qty{display:inline-flex;align-items:center;gap:6px} .merkliste-box .qty button{width:24px;height:24px;border:1px solid var(--c-line);background:#fff;cursor:pointer;font:600 .875rem var(--f-mono);line-height:1;border-radius:2px} .merkliste-box .qty button:hover{border-color:var(--c-ink)} .merkliste-box .remove{margin-left:auto;background:none;border:0;color:var(--c-muted);cursor:pointer;font-size:1.125rem;line-height:1;padding:4px} .merkliste-box .remove:hover{color:var(--c-red)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px} .form-field{display:flex;flex-direction:column;gap:6px} .form-field-wide{grid-column:1/-1} .form-field label{font-size:.875rem;font-weight:600;color:var(--c-ink)} .form-field .opt{font-weight:400;color:var(--c-muted)} .form-field input,.form-field textarea{font:400 1rem var(--f-sans);padding:12px 14px;border:1px solid var(--c-line);border-radius:2px;background:#fff;color:var(--c-ink);width:100%} .form-field input:focus,.form-field textarea:focus{outline:2px solid var(--c-red);outline-offset:0;border-color:var(--c-red)} .form-field input.is-invalid,.form-field textarea.is-invalid{border-color:var(--c-red)} .field-error{font-size:.8125rem;color:var(--c-red);margin:0} .hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important} .form-consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:24px} .form-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--c-red)} .form-consent label{font-size:.875rem;font-weight:400;line-height:1.55;color:var(--c-text)} .form-consent .field-error{grid-column:2} .consent-note{font-size:.8125rem;color:var(--c-muted);margin-top:8px} .btn-submit{margin-top:24px;min-width:280px} .btn-submit[disabled]{opacity:.6;cursor:wait} .form-status{margin-top:16px;font-weight:600;min-height:1.5em} .form-status.is-ok{color:#1c7a3d} .form-status.is-error{color:var(--c-red)} .anfrage-kontakt{background:var(--c-night);color:var(--c-on-night);padding:32px 28px;position:sticky;top:96px} .anfrage-kontakt h3{color:#fff;margin-bottom:20px} .kontakt-list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:20px} .kontakt-list li{display:grid;gap:2px;border-left:2px solid var(--c-red);padding-left:14px} .kontakt-role{font-family:var(--f-mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-zinc)} .kontakt-list strong{color:#fff} .kontakt-list a{color:var(--c-on-night);text-decoration:none;font-family:var(--f-mono);font-size:.875rem} .kontakt-list a:hover{color:#fff;text-decoration:underline} .kontakt-adresse{font-style:normal;font-size:.9375rem;color:var(--c-zinc);line-height:1.7;border-top:1px solid rgba(255,255,255,.14);padding-top:20px} .kontakt-adresse a{color:var(--c-on-night)} @media (max-width:900px){.anfrage-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.anfrage-kontakt{position:static}} /* ---------- S12 · Finale ---------- */ .finale{background:transparent;color:var(--c-on-night);padding-block:clamp(80px,12vw,160px);border-bottom:4px solid var(--c-red)} .finale-line{font-size:clamp(2rem,6vw,4.5rem);font-weight:900;line-height:1.02;letter-spacing:-.025em;color:#fff;max-width:18ch;margin:0 0 40px} .finale-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:24px} .finale-tel{color:var(--c-zinc);font-family:var(--f-mono);font-size:1rem;text-decoration:none} .finale-tel:hover{color:#fff} /* ---------- Footer ---------- */ .site-footer{background:var(--c-bg);padding-block:48px;border-top:1px solid var(--c-line-soft)} .footer-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,2fr);gap:32px;align-items:start} .site-footer p{font-size:.875rem;color:var(--c-muted);margin:16px 0 0} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .site-footer nav a{color:var(--c-text);text-decoration:none;font-size:.9375rem} .site-footer nav a:hover{color:var(--c-red)} .footer-copy{text-align:right;font-family:var(--f-mono);font-size:.75rem!important} @media (max-width:720px){.footer-grid{grid-template-columns:1fr}.footer-copy{text-align:left}} /* ---------- Merkliste-Bar ---------- */ .merkliste-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--c-ink);color:#fff;box-shadow:0 -8px 24px rgba(0,0,0,.12);transform:translateY(0);transition:transform .4s var(--e-out)} .merkliste-bar[hidden]{display:block;transform:translateY(110%);pointer-events:none;visibility:hidden} .merkliste-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px} .merkliste-bar span{font-family:var(--f-mono);font-size:.9375rem} .merkliste-bar .btn{padding:10px 22px;font-size:.9375rem} body.has-merkliste{padding-bottom:64px} /* Mobiler Wisch-Hinweis für Tabellen */ @media (max-width:720px){ .table-scroll::before{content:"Tabelle seitlich wischen für alle Maße";display:block;font-family:var(--f-mono);font-size:.6875rem;color:var(--c-muted);padding:4px 0 8px} } /* ---------- ScrollFlow: Tiefen-Ebenen ---------- */ [data-flow]{will-change:transform} @media (prefers-reduced-motion: reduce){[data-flow]{will-change:auto;transform:none!important}} /* ---------- Reveals & Motion ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)} .reveal.is-visible{opacity:1;transform:none} .hero-media img{transition:transform .2s linear} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---------- Print ---------- */ @media print{ .site-header,.merkliste-bar,.finale,.hero-ctas,.sort-filter,.add-btn{display:none!important} .sort-panel{display:block!important} body{font-size:11pt} } /* ============================================================ KLEUSBERG-LAYER (Kundenvorgabe: 1:1-Designsprache der Vorlage, übersetzt in Pfeiffer-CI). Überschreibt kaskadisch das Basissystem. Referenzwerte aus Live-Analyse: Display 85px/700/uppercase/zentriert lh .88 ls -2%, Fließtext 32px/400 zentriert, Pills 1px Border vollrund, Flächen #161616 / #ebebeb, Inline-Bilder 1840px mit Radius. ============================================================ */ /* --- Typo: zentrierte Uppercase-Displays, große zentrierte Absätze --- */ h2{font-size:clamp(1.875rem,3.5vw,3.5rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;text-align:center;max-width:none;margin-inline:auto} .qualitaet h2,.hafencity-copy h2{font-size:clamp(1.875rem,3.5vw,3.5rem);text-transform:none;line-height:1.05} .herkunft h2{font-size:clamp(1.375rem,2.4vw,1.75rem);text-transform:none;text-align:left} .section-lead,.answer-block{font-size:clamp(1.25rem,2.3vw,2rem);font-weight:400;line-height:1.45;text-align:center;max-width:46ch;margin-inline:auto} .answer-block{margin-bottom:clamp(48px,6vw,88px)} .kicker{display:none} .section-lead{margin-bottom:0} /* --- Sektionsköpfe zentrieren --- */ .ablager-steps h2,.detail-copy h2,.anfrage h2{text-align:center} .sortiment .section-lead{margin-bottom:40px} .finale-line{text-transform:uppercase;text-align:center;max-width:none;margin-inline:auto} .finale-ctas{justify-content:center} .finale .wrap{text-align:center} /* --- Pills: alle Buttons und Chips vollrund (Kleusberg-Formsprache) --- */ .btn{border-radius:8px;padding:15px 34px;font-size:1.125rem} .header-cta{padding:10px 24px;font-size:.9375rem} .btn-ghost{box-shadow:inset 0 0 0 1px var(--c-line)} .add-btn{border-radius:6px;padding:6px 16px} .chip{border-radius:6px;padding:10px 20px;font-size:.9375rem} .sort-tab{border:1px solid var(--c-line);border-radius:8px;margin:0 8px 12px 0;padding:12px 24px;background:#fff} .sort-tab.is-active{background:var(--c-ink);border-color:var(--c-ink)} .sort-tabs{border-bottom:0;gap:0;justify-content:center} .sort-panel{border:0;border-radius:10px} .sort-filter{justify-content:center} .sort-filter select{border-radius:8px;padding:10px 18px} .pdf-link{border:1px solid var(--c-line);border-radius:8px;padding:8px 18px;text-decoration:none} .pdf-link:hover{border-color:var(--c-ink)} /* --- Formular: weiche Radien, Pill-Submit --- */ .form-field input,.form-field textarea{border-radius:6px} .form-field textarea{border-radius:6px} .btn-submit{border-radius:8px} .merkliste-box{border-radius:8px} .merkliste-box .qty button{border-radius:5px} .anfrage-kontakt{border-radius:10px} .merkliste-bar .btn{border-radius:8px} /* --- Bilder & Karten: Kleusberg-Radius --- */ .ablager-media img,.qual-media img,.ref-card img,.prod-step img,.detail-stage img,.farb-bild{border-radius:8px} .ref-card.ref-text{border-radius:8px} .faq details{border-radius:8px;border-left:0} .faq details[open]{border-left:0;box-shadow:inset 0 0 0 1.5px var(--c-red)} .hero-media img{border-radius:8px} /* --- Header: schwebend-transparent, Logo-Chip links, Kontakt-Pill Mitte --- */ .site-header{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none} .site-header .header-bar>*{pointer-events:auto} .header-bar{height:76px} .brand{background:none;border-radius:0;padding:0;box-shadow:none} .brand img{transition:filter .4s var(--e-out)} body.header-on-dark .brand img{filter:brightness(0) invert(1)} .header-tel{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(22,22,22,.14);border-radius:8px;padding:10px 20px} .header-cta{margin-left:0} .header-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:10px} @media (max-width:560px){.brand{padding:7px 12px}} /* --- Marquee (1x pro Seite, Kleusberg-Newsletter-Muster) --- */ .marquee{overflow:clip;background:var(--c-bg);border-top:1px solid var(--c-line-soft);padding-block:28px} .marquee-intro{border-top:0;background:rgba(191,0,15,.045);-webkit-backdrop-filter:blur(24px) saturate(1.1);backdrop-filter:blur(24px) saturate(1.1);padding-block:26px;margin-block:clamp(56px,8vw,104px)} .marquee a{display:flex;width:max-content;gap:0;text-decoration:none;animation:marquee 28s linear infinite} .marquee a:hover{animation-play-state:paused} .marquee span{font-size:clamp(2.25rem,5vw,4.0625rem);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;color:var(--c-ink);white-space:nowrap;padding-right:.6em} .marquee span em{font-style:normal;color:var(--c-red)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.marquee a{animation:none}} /* ---------- Line-by-line Scroll-Scrubbing (Runde 8) ---------- */ [data-lines] .l-line{display:block;overflow:visible} [data-lines] .l-inner{display:inline-block;opacity:0;transform:translateY(30px);will-change:transform,opacity} @media (prefers-reduced-motion: reduce){[data-lines] .l-inner{opacity:1!important;transform:none!important}} /* Listen-Icons (Higgsfield-Set) */ .li-icon{width:40px;height:40px;object-fit:contain;display:block} .detail-list li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start} .detail-list .li-icon{margin-top:2px} /* Progress-Bar am oberen Bildschirmrand (Runde 8, Override) */ .nav-rail{position:fixed!important;left:0;right:0;top:0!important;bottom:auto!important;height:6px!important;background:transparent!important;z-index:70;pointer-events:none} .rail-fill{position:absolute;left:0;top:0;height:100%!important;width:100%;background:var(--c-red);transform-origin:left;transform:scaleX(0);will-change:transform} .rail-ticks{display:none!important} /* ---------- Scroll-Indikator im Hero (textlos) ---------- */ .scroll-cue{margin:clamp(40px,9vh,110px) auto 0;width:44px;height:44px;display:grid;place-items:center} .scroll-cue span{width:16px;height:16px;border-right:2px solid var(--c-ink);border-bottom:2px solid var(--c-ink);transform:rotate(45deg);opacity:.75} @media (prefers-reduced-motion: no-preference){ .scroll-cue span{animation:cue 2.2s var(--e-out) infinite} @keyframes cue{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.75}50%{transform:rotate(45deg) translate(5px,5px);opacity:.35}} }