/* ============================================================ ClapNClaw — Werkbank Design System (shared) Single source of truth for design tokens + site chrome (nav with Branchen dropdown, organized footer, legal prose). Pair with /shared/werkbank.js for / . Load order in : ============================================================ */ /* ── DESIGN TOKENS ───────────────────────────────────────── */ :root{ --bg:#FBF9F4;--bg2:#F3F0E8;--bg3:#EAE6DC; --fg:#1A1814;--fg2:rgba(26,24,20,.62);--fg3:rgba(26,24,20,.38);--fg4:rgba(26,24,20,.18); --green:#2D5F3F;--green-dim:rgba(45,95,63,.10);--green-mid:rgba(45,95,63,.25); --yellow:#FFD000;--yellow-ink:#1A1814;--yellow-text:#7A6200;--yellow-dim:rgba(255,208,0,.18); --datev:#5A9200;--datev-bg:rgba(90,146,0,.10); --card:#FFFFFF;--card-border:rgba(26,24,20,.10); --r:18px;--r-sm:10px; --mono:'DM Mono',monospace; --shadow:0 4px 32px rgba(26,24,20,.07),0 1px 4px rgba(26,24,20,.04); --shadow-lg:0 12px 56px rgba(26,24,20,.10),0 2px 8px rgba(26,24,20,.05); --nav-bg:rgba(251,249,244,.88); } [data-theme="dark"]{ --bg:#18160F;--bg2:#1F1D14;--bg3:#26231A; --fg:#EDE9DF;--fg2:rgba(237,233,223,.62);--fg3:rgba(237,233,223,.38);--fg4:rgba(237,233,223,.15); --green:#7AC494;--green-dim:rgba(122,196,148,.10);--green-mid:rgba(122,196,148,.22); --yellow:#FFD000;--yellow-ink:#1A1814;--yellow-text:#FFD000;--yellow-dim:rgba(255,208,0,.12); --datev:#8CC93F;--datev-bg:rgba(140,201,63,.10); --card:#201E16;--card-border:rgba(237,233,223,.10); --shadow:0 4px 32px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.18); --shadow-lg:0 12px 56px rgba(0,0,0,.36),0 2px 8px rgba(0,0,0,.20); --nav-bg:rgba(24,22,15,.88); } /* ── BASE (so pages relying only on this stylesheet — e.g. legal docs — get the right font/background instead of the browser's serif default) ───────────── */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .35s,color .35s} /* ── NAV (fixed pill) ────────────────────────────────────── */ .wbnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1200px;z-index:200;height:54px;padding:0 14px 0 20px;display:flex;align-items:center;gap:18px;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:14px;transition:background .35s,border-color .35s} .wbnav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0} .wbnav-logo svg{width:26px;height:26px} .wbnav-logo-text{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--fg)} .wbnav-logo-text span{color:var(--green)} .wbnav-links{display:flex;gap:4px;flex:1;list-style:none;margin:0;padding:0;align-items:center} .wbnav-links>li{position:relative} .wbnav-links a,.wbnav-drop-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);text-decoration:none;transition:color .15s;background:none;border:none;cursor:pointer;padding:8px 10px;display:inline-flex;align-items:center;gap:5px;line-height:1} .wbnav-links a:hover,.wbnav-drop-btn:hover,.wbnav-links a.cur{color:var(--fg)} .wbnav-caret{font-size:8px;transition:transform .2s} .wbnav-has-drop:hover .wbnav-caret,.wbnav-has-drop.open .wbnav-caret{transform:rotate(180deg)} /* dropdown panel */ .wbnav-drop{position:absolute;top:calc(100% + 10px);left:-8px;min-width:280px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;display:flex;flex-direction:column;gap:2px} .wbnav-has-drop:hover .wbnav-drop,.wbnav-has-drop:focus-within .wbnav-drop,.wbnav-has-drop.open .wbnav-drop{opacity:1;visibility:visible;transform:translateY(0)} .wbnav-drop::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px} .wbnav-drop a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-transform:none;letter-spacing:0;transition:background .15s} .wbnav-drop a:hover{background:var(--bg2)} .wbnav-drop-ic{width:34px;height:34px;border-radius:9px;background:var(--green-dim);border:1px solid var(--green-mid);color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s} .wbnav-drop a:hover .wbnav-drop-ic{background:var(--green);color:#fff;border-color:var(--green)} .wbnav-drop-ic svg{width:18px;height:18px;display:block} .wbnav-drop-tx{display:flex;flex-direction:column;gap:2px} .wbnav-drop-tx b{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--fg);text-transform:none} .wbnav-drop-tx small{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:0;color:var(--fg2);text-transform:none} .wbnav-end{display:flex;gap:8px;align-items:center;flex-shrink:0} .wbnav-icon{background:none;border:1px solid var(--fg4);border-radius:40px;padding:5px 10px;cursor:pointer;font-size:13px;line-height:1;transition:border-color .15s;color:var(--fg)} .wbnav-icon:hover{border-color:var(--yellow)} .wbnav-lang{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg2);text-decoration:none;border:1px solid var(--fg4);border-radius:40px;padding:5px 9px;transition:all .15s} .wbnav-lang:hover{border-color:var(--green);color:var(--green)} .wbnav-ghost{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--fg2);text-decoration:none;padding:6px 12px;border:1px solid var(--fg4);border-radius:40px;transition:all .15s} .wbnav-ghost:hover{border-color:var(--green);color:var(--green)} .wbnav-cta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--yellow-ink);font-weight:500;padding:8px 16px;border-radius:6px;text-decoration:none;transition:opacity .15s;white-space:nowrap} .wbnav-cta:hover{opacity:.86} /* hamburger + mobile drawer */ .wbnav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0} .wbnav-burger svg{width:22px;height:22px;stroke:var(--fg);stroke-width:1.6;fill:none} .wbnav-mobile{display:none;position:fixed;top:74px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:440px;z-index:199;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:14px;flex-direction:column;gap:1px} .wbnav-mobile.open{display:flex;animation:wbm-in .2s cubic-bezier(.16,1,.3,1)} @keyframes wbm-in{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .wbnav-mobile a{font-family:'Outfit',sans-serif;font-size:16px;font-weight:500;color:var(--fg);text-decoration:none;padding:13px 14px;border-radius:10px;transition:background .15s} .wbnav-mobile a:hover,.wbnav-mobile a:active{background:var(--bg2)} .wbnav-mobile .wbm-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);padding:16px 14px 6px} .wbnav-mobile .wbm-sub{font-size:15px;color:var(--fg2);margin:1px 0 1px 12px;padding-left:18px;border-left:2px solid var(--card-border)} .wbnav-mobile .wbm-sub:hover{border-left-color:var(--green-mid)} .wbnav-mobile .wbm-cta{background:var(--yellow);color:var(--yellow-ink);text-align:center;font-weight:600;margin-top:12px;padding:15px} .wbnav-mobile .wbm-cta:hover{background:var(--yellow);opacity:.9} .wbm-foot{display:flex;align-items:stretch;gap:8px;margin-top:12px;padding-top:14px;border-top:1px solid var(--card-border)} .wbm-foot .wbm-theme{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--fg4);border-radius:10px;padding:0 16px;cursor:pointer;font-size:15px;color:var(--fg);transition:border-color .15s} .wbm-foot .wbm-lang{flex:1;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--fg4);border-radius:10px;padding:12px;font-weight:500;display:flex;align-items:center;justify-content:center} .wbm-foot .wbm-theme:hover,.wbm-foot .wbm-lang:hover{border-color:var(--green);color:var(--green)} /* ── FOOTER (organized columns) ──────────────────────────── */ .wbfoot{background:var(--bg2);border-top:1px solid var(--card-border);transition:background .35s} .wbfoot-grid{max-width:1100px;margin:0 auto;padding:64px 40px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .wbfoot-brand-logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:16px} .wbfoot-brand-logo svg{width:24px;height:24px} .wbfoot-brand-logo span{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;letter-spacing:-.025em;color:var(--fg)} .wbfoot-brand-logo span b{color:var(--green);font-weight:600} .wbfoot-tagline{font-size:14px;color:var(--fg2);line-height:1.7;max-width:280px;margin-bottom:18px} .wbfoot-eu{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--green);background:var(--green-dim);border:1px solid var(--green-mid);border-radius:40px;padding:5px 12px} .wbfoot-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin:0 0 16px;font-weight:500} .wbfoot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .wbfoot-col a{font-family:'Inter',sans-serif;font-size:14px;color:var(--fg2);text-decoration:none;transition:color .15s} .wbfoot-col a:hover{color:var(--green)} .wbfoot-bar{border-top:1px solid var(--card-border);max-width:1100px;margin:0 auto;padding:20px 40px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between} .wbfoot-copy{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fg3)} .wbfoot-meta{display:flex;gap:16px;flex-wrap:wrap} .wbfoot-meta a{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--fg3);text-decoration:none;transition:color .15s} .wbfoot-meta a:hover{color:var(--green)} /* ── LEGAL / UTILITY PROSE (for impressum, datenschutz, agb) ─ */ .wbdoc{max-width:760px;margin:0 auto;padding:130px 24px 80px} .wbdoc h1{font-family:'Outfit',sans-serif;font-size:clamp(32px,5vw,52px);font-weight:700;line-height:1.02;letter-spacing:-.035em;color:var(--fg);margin-bottom:10px} .wbdoc h1 em{font-style:italic;color:var(--green)} .wbdoc-meta{font-family:var(--mono);font-size:11px;color:var(--fg3);letter-spacing:.04em;margin-bottom:2.5rem} .wbdoc h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--fg);margin:2.6rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--fg4)} .wbdoc h3{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;color:var(--fg);margin:1.5rem 0 .4rem} .wbdoc p,.wbdoc li{font-size:15.5px;line-height:1.78;color:var(--fg2)} .wbdoc p{margin-bottom:.9rem} .wbdoc strong{color:var(--fg);font-weight:600} .wbdoc ul{padding-left:1.4rem;margin:.6rem 0 1rem} .wbdoc li{margin-bottom:.45rem} .wbdoc a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--green-mid);transition:border-color .15s} .wbdoc a:hover{border-color:var(--green)} .wbdoc section{margin-bottom:.5rem} .wbdoc table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:13.5px} .wbdoc th,.wbdoc td{padding:.7rem .85rem;border:1px solid var(--card-border);text-align:left;vertical-align:top;color:var(--fg2);line-height:1.55} .wbdoc th{background:var(--bg2);font-weight:600;color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.04em} .wbdoc-highlight{background:var(--green-dim);border:1px solid var(--green-mid);border-left:3px solid var(--green);border-radius:var(--r-sm);padding:18px 20px;margin:1.4rem 0} .wbdoc-highlight p{margin-bottom:.5rem;color:var(--fg)} .wbdoc-highlight p:last-child{margin-bottom:0} .wbdoc-notice{background:var(--yellow-dim);border:1px solid var(--yellow);border-radius:var(--r-sm);padding:16px 20px;margin:1.4rem 0;font-size:14.5px;color:var(--fg)} /* language toggle for bilingual docs */ [data-lang="de"] .wb-en{display:none} [data-lang="en"] .wb-de{display:none} /* ── RESPONSIVE ──────────────────────────────────────────── */ @media(max-width:980px){ /* declutter the bar: only logo · CTA · hamburger; theme + lang move into the drawer */ .wbnav-links,.wbnav-ghost,.wbnav-lang,.wbnav-icon{display:none} .wbnav-burger{display:block} .wbnav-end{margin-left:auto;gap:6px} .wbfoot-grid{grid-template-columns:1fr 1fr;gap:32px 24px;padding:48px 24px 32px} .wbfoot-brand{grid-column:1 / -1} } @media(max-width:560px){ .wbnav{width:calc(100% - 24px);padding:0 8px 0 14px;gap:8px;height:52px} .wbnav-cta{padding:9px 14px} .wbnav-logo-text{font-size:16px} /* footer en teléfono: solo legales + contacto (feedback Catalina). El grid de 4 columnas (marca + Produkt + Branchen + Resources) es demasiado pesado en mobile; se oculta y queda la barra con copyright, Impressum/Datenschutz/AGB y el email de contacto. */ .wbfoot-grid{display:none} .wbfoot-bar{border-top:none;padding:20px;flex-direction:column;align-items:flex-start;gap:10px} .wbdoc{padding:104px 18px 60px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important} .wbnav-mobile.open{animation:none} }