/* ═══════════════════════════════════════════════════════════════════════ BUREAU PARADISO — bureau.css Ein Design-System für alle Seiten: index, ki-sichtbarkeit, Fallstudie 01–03, impressum, datenschutz. Regel: hier lebt, was auf 2+ Seiten mit 4+ Wiederholungen vorkommt. Seitenlokales Layout (Grids, Gaps, Einzelfälle) bleibt inline. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · FONTS — HN LT (Headline-Familie) ────────────────────────────── */ @font-face { font-family:'Schibsted Grotesk'; src:url('Fonts/SchibstedGrotesk.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT'; src:url('Fonts/HelveticaNeueLT-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT'; src:url('Fonts/HelveticaNeueLT-Heavy.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT'; src:url('Fonts/HelveticaNeueLT-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT'; src:url('Fonts/HelveticaNeueLT-Roman.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT'; src:url('Fonts/HelveticaNeueLT-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:'HN LT Outline'; src:url('Fonts/HelveticaNeueLT-BoldOutline.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* Schibsted Grotesk lädt per Google- im jeder Seite. */ /* ── 2 · TOKENS ──────────────────────────────────────────────────────── */ :root { --ink: #0A0A0A; --paper: #FAFAF7; --red: #EB0000; --grau: #5A5A56; --line: #D8D8D2; --line-soft: #ECECE6; --white: #FFFFFF; } /* ── 3 · BASE ────────────────────────────────────────────────────────── */ html, body { margin:0; padding:0; background:var(--paper); } body { font-family:'Schibsted Grotesk',sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; font-size:17px; line-height:1.6; } * { box-sizing:border-box; } a { color:var(--ink); text-decoration:none; } a:hover { color:var(--red); } textarea::placeholder, input::placeholder { color:#9A9A94; opacity:1; } /* ── 4 · TYPE ────────────────────────────────────────────────────────── */ /* Vier reale Skalen, keine erfundenen. 1–2: index. 3: ki-Sektionen. 4: Fallstudien. */ .display-1 { font-family:'HN LT',sans-serif; font-size:clamp(44px,5.6vw,92px); line-height:1.02; font-weight:900; letter-spacing:-0.025em; text-wrap:pretty; margin:0; } .display-2 { font-family:'HN LT',sans-serif; font-size:clamp(34px,4.4vw,72px); line-height:1.04; font-weight:700; letter-spacing:-0.025em; text-wrap:pretty; margin:0; } .display-3 { font-family:'HN LT',sans-serif; font-size:clamp(28px,3.4vw,48px); line-height:1.1; font-weight:700; letter-spacing:-0.02em; text-wrap:pretty; margin:0; } .display-4 { font-family:'HN LT',sans-serif; font-size:clamp(26px,3vw,42px); line-height:1.16; font-weight:800; letter-spacing:-0.015em; text-wrap:pretty; margin:0; } .outline { font-family:'HN LT Outline',sans-serif; font-weight:700; letter-spacing:-0.01em; } .kicker { font-size:12px; text-transform:uppercase; letter-spacing:0.16em; color:var(--grau); } .num { font-size:64px; font-weight:900; line-height:0.85; letter-spacing:-0.03em; color:var(--red); } .mono { font-variant-numeric:tabular-nums; } /* ── 5 · LAYOUT ──────────────────────────────────────────────────────── */ .wrap { max-width:1500px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px; } .sect { max-width:1500px; margin:0 auto; border-top:1px solid var(--ink); padding:88px 40px; display:flex; flex-direction:column; } .eyebrow { display:flex; align-items:baseline; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:0.16em; color:var(--grau); } .sq { width:9px; height:9px; background:var(--red); display:inline-block; flex:none; } .rowline { border-bottom:1px solid var(--line); } .prose-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; font-size:17px; line-height:1.65; } /* Abbildungen — Rahmen + Beschriftungszeile (Fallstudien-Grammatik) */ .frame { width:100%; height:auto; display:block; border:2px solid var(--ink); } .figrow { display:flex; gap:16px; align-items:baseline; font-size:13px; } .figno { font-weight:700; color:var(--red); } /* ── 6 · KOMPONENTEN ─────────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:12px; font-size:13px; text-transform:uppercase; letter-spacing:0.12em; font-weight:700; border:2px solid var(--ink); padding:15px 28px; color:var(--ink); } .btn:hover { background:var(--red); border-color:var(--red); color:var(--white); } .btn-red { background:var(--red); border-color:var(--red); color:var(--white); } .btn-red:hover { background:var(--ink); border-color:var(--ink); color:var(--white); } .tile { border:1px solid var(--ink); padding:28px; background:var(--paper); } .card { border:2px solid var(--ink); background:var(--white); display:flex; flex-direction:column; } .check { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:16px; line-height:1.55; } .check .sq { margin-top:8px; } /* Hover-Utilities — EIN System statt drei (ersetzt bp-h-1…7 und die klassifizierbaren style-hover=""). !important schlägt Inline-Styles. */ .hov-red:hover { color:var(--red) !important; } .hov-ink:hover { color:var(--ink) !important; } .hov-btn:hover { background:var(--red) !important; border-color:var(--red) !important; color:var(--white) !important; } /* Sprachwechsler (Header, DE·EN·IT) */ .lang-btn { color:var(--grau); font-weight:500; letter-spacing:0.1em; } .lang-btn.on { color:var(--ink); font-weight:700; border-bottom:2px solid var(--red); } .lang-btn:hover { color:var(--red); } /* ── 7 · RESPONSIVE (ehem. bp-mobile-fixes, 4 Kopien → 1) ────────────── */ @media (max-width: 760px) { html { overflow-x: clip; } body { overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; } [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; } section, footer { padding-left: 20px !important; padding-right: 20px !important; } section { padding-top: 56px !important; padding-bottom: 56px !important; } header { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; padding: 12px 20px !important; } header > div:nth-child(2) { display: none !important; } header nav { display: none !important; } .bp-burger { display: flex !important; } h1 { font-size: clamp(34px, 10.5vw, 42px) !important; } .num, [style*="font-size:64px"] { font-size: 40px !important; } [data-stagger] > a[style*="grid-template-columns:24px"], [data-stagger] > a[style*="grid-template-columns: 24px"], [data-stagger] > div[style*="grid-template-columns:24px"], [data-stagger] > div[style*="grid-template-columns: 24px"] { grid-template-columns: 24px minmax(0,1fr) !important; row-gap: 2px !important; } [data-stagger] > a[style*="grid-template-columns:24px"] > span:nth-child(3), [data-stagger] > a[style*="grid-template-columns: 24px"] > span:nth-child(3), [data-stagger] > a[style*="grid-template-columns:24px"] > span:nth-child(4), [data-stagger] > a[style*="grid-template-columns: 24px"] > span:nth-child(4) { grid-column: 2 !important; } [data-stagger] > div[style*="grid-template-columns:24px"] > span:nth-child(3), [data-stagger] > div[style*="grid-template-columns: 24px"] > span:nth-child(3), [data-stagger] > div[style*="grid-template-columns:24px"] > span:nth-child(4), [data-stagger] > div[style*="grid-template-columns: 24px"] > span:nth-child(4) { display: none !important; } [style*="gap:96px"] { gap: 48px !important; } [style*="gap:88px"] { gap: 44px !important; } [style*="gap:64px"] { gap: 36px !important; } div[style*="grid-template-columns:minmax(150px"], div[style*="grid-template-columns: minmax(150px"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } div[style*="grid-template-columns:minmax(150px"] > :last-child, div[style*="grid-template-columns: minmax(150px"] > :last-child { grid-column: 1 / -1 !important; } nav[style*="position:fixed"], nav[style*="position: fixed"] { max-width: calc(100vw - 24px) !important; flex-wrap: wrap !important; bottom: 12px !important; left: 12px !important; } nav[style*="position:fixed"] a, nav[style*="position: fixed"] a { padding: 8px 9px !important; font-size: 10px !important; } [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; } [style*="font-size:clamp(52px"] { font-size: clamp(38px, 11vw, 52px) !important; } [style*="margin:0 -40px"] { margin: 0 -20px !important; } } /* ── 8 · MOBILE-MENÜ (Burger + Overlay; JS in bureau.js) ─────────────── */ .bp-burger { display:none; flex-direction:column; justify-content:center; align-items:stretch; gap:5px; width:42px; height:42px; padding:9px; margin:0; background:transparent; border:0; cursor:pointer; color:inherit; } .bp-burger span { display:block; height:2px; width:100%; background:currentColor; border-radius:1px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease; transform-origin:center; } .bp-menu { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; padding:0; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s; } .bp-menu.open { opacity:1; visibility:visible; transition:opacity .22s ease; } .bp-menu .bp-menu-top { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; min-height:66px; } .bp-menu .bp-menu-brand { font-weight:700; font-size:16px; } .bp-menu .bp-close { width:42px; height:42px; background:transparent; border:0; cursor:pointer; position:relative; color:inherit; } .bp-menu .bp-close::before, .bp-menu .bp-close::after { content:""; position:absolute; left:9px; right:9px; top:50%; height:2px; background:currentColor; border-radius:1px; } .bp-menu .bp-close::before { transform:rotate(45deg); } .bp-menu .bp-close::after { transform:rotate(-45deg); } .bp-menu nav { display:flex; flex-direction:column; padding:24px 20px; gap:0; flex:1; } .bp-menu nav a { display:block; padding:18px 0; font-size:26px; font-weight:700; line-height:1.2; text-decoration:none; color:inherit; border-bottom:1px solid rgba(0,0,0,0.12); } .bp-menu nav a:last-child { border-bottom:0; } html.bp-menu-lock, html.bp-menu-lock body { overflow:hidden !important; } @media (min-width: 761px) { .bp-burger, .bp-menu { display:none !important; } } /* ── Live-Links: der Domainname IST die Adresse ─────────────────────────── */ .bp-live { color:inherit; text-decoration:none; transition:color .18s ease; } .bp-live-arrow { display:inline-block; margin-left:.16em; font-size:.36em; vertical-align:.72em; font-weight:900; color:inherit; transition:color .18s ease, transform .18s cubic-bezier(.4,0,.2,1); } h1:hover .bp-live, h1:hover .bp-live-arrow { color:var(--red); } h1:hover .bp-live-arrow { transform:translate(.1em,-.1em); } .bp-live-row { text-decoration:none; transition:color .18s ease; } .bp-live-row:hover { color:var(--red) !important; } .bp-shot { display:block; } .bp-shot .frame { transition:border-color .18s ease; } .bp-shot:hover .frame { border-color:var(--red); }