/* ===================================================================== STAUDINGER · v3 "Spielarten" — six experiments in a different kind of playful. Each activates via [data-v3] on and is independent. Built in batches: #1 Primer, #4 Werkstatt (this file grows per batch). ===================================================================== */ /* ---------- internal style chooser (only renders with ?pick) ---------- */ .chooser { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; background: rgba(18,18,22,.93); color: #f4f2ec; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "IBM Plex Mono", monospace; padding: .7rem .9rem; max-height: 48vh; overflow: auto; } .chooser__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; } .chooser__bar b { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .chooser__hint { font-size: .56rem; opacity: .45; letter-spacing: .12em; text-transform: uppercase; } .chooser__x { margin-left: auto; color: #f4f2ec; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.28); padding: .45em .8em; border-radius: 999px; cursor: pointer; } .chooser__x:hover { background: rgba(255,255,255,.12); } .chooser__grid { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .chooser__group { width: 100%; font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; opacity: .45; margin: .45rem 0 .1rem; } .chooser__item { color: #f4f2ec; font-size: .72rem; letter-spacing: .03em; padding: .5em .85em; border-radius: 9px; background: rgba(255,255,255,.08); transition: background .2s, color .2s; } .chooser__item:hover { background: rgba(255,255,255,.18); } .chooser__item.on { background: #f4f2ec; color: #16161a; } .chooser__title { cursor: default; } /* collapsed = small re-openable pill (bottom-left) — the picker is never lost */ .chooser.is-collapsed { right: auto; max-height: none; overflow: visible; padding: 0; cursor: pointer; } .chooser.is-collapsed .chooser__grid, .chooser.is-collapsed .chooser__hint, .chooser.is-collapsed .chooser__x { display: none; } .chooser.is-collapsed .chooser__bar { margin: 0; padding: .5rem .9rem; } .chooser.is-collapsed .chooser__title { cursor: pointer; } .chooser.is-collapsed .chooser__title::after { content: " ▴"; opacity: .55; } /* ===================================================================== #1 · PRIMER → FERTIG The page loads "unpainted" (greyscale) and paints in section-by-section as you scroll. A paint-roller progress bar tracks how far you've got. ===================================================================== */ html[data-v3="primer"] .deckline { opacity: .18; } .primer-progress { position: fixed; top: 0; left: 0; height: 5px; width: 0%; z-index: 66; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width .08s linear; } html:not([data-v3="primer"]) .primer-progress { display: none; } html[data-v3="primer"] main section { filter: grayscale(.95) contrast(.9) opacity(.97); transition: filter 1.2s var(--ease); } html[data-v3="primer"] main section.painted { filter: none; } /* a faint "Grundierung" stamp until the section is painted */ html[data-v3="primer"] main section::after { content: "Grundierung"; position: absolute; top: 14px; right: 16px; z-index: 5; font-family: var(--mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(40,38,32,.4); transition: opacity .7s var(--ease); pointer-events: none; } html[data-v3="primer"] main section.painted::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { html[data-v3="primer"] main section { filter: none; transition: none; } html[data-v3="primer"] main section::after { display: none; } } /* ===================================================================== #4 · DAS WERKSTATTBUCH Reskins the page as a painter's notebook: ruled paper, handwritten headings, photos taped in at an angle. ===================================================================== */ html[data-v3="werkstatt"] body { background-color: #efe7d4; background-image: repeating-linear-gradient(transparent 0, transparent 29px, rgba(60,70,90,.10) 30px), linear-gradient(90deg, transparent 52px, rgba(200,90,80,.25) 53px, transparent 54px); } html[data-v3="werkstatt"] .deckline { opacity: .65; filter: saturate(.75); } html[data-v3="werkstatt"] h1, html[data-v3="werkstatt"] h2, html[data-v3="werkstatt"] .eco__quote, html[data-v3="werkstatt"] .brandmark b { font-family: "Caveat", var(--serif); letter-spacing: 0; font-weight: 700; } html[data-v3="werkstatt"] h1 { font-size: clamp(3.4rem, 10vw, 8rem); line-height: .98; } html[data-v3="werkstatt"] .eyebrow { font-family: "Caveat", var(--mono); text-transform: none; font-size: 1.15rem; letter-spacing: .01em; color: var(--ink-80); } html[data-v3="werkstatt"] .eyebrow::before { display: none; } html[data-v3="werkstatt"] .svc__num { font-family: "Caveat", var(--mono); font-size: 1.25rem; letter-spacing: 0; color: var(--accent); transform: rotate(-2deg); display: inline-block; } /* photos get taped onto the page */ html[data-v3="werkstatt"] .svc__media, html[data-v3="werkstatt"] .plate { border: 10px solid #fffdf7; border-radius: 2px; box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); transform: rotate(-1.5deg); } html[data-v3="werkstatt"] .svc:nth-child(even) .svc__media { transform: rotate(1.7deg); } html[data-v3="werkstatt"] .plate:nth-child(odd) { transform: rotate(1.3deg); } html[data-v3="werkstatt"] .plate:nth-child(3n) { transform: rotate(-2deg); } html[data-v3="werkstatt"] .svc__media::before, html[data-v3="werkstatt"] .plate::before { content: ""; position: absolute; top: -13px; left: 50%; z-index: 4; width: 86px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(214,198,150,.72); box-shadow: 0 2px 5px -2px rgba(0,0,0,.3); } html[data-v3="werkstatt"] .gallery-sec { background: transparent; } html[data-v3="werkstatt"] .eco { background: #e7d9bd; color: var(--ink); } html[data-v3="werkstatt"] .eco::after { display: none; } html[data-v3="werkstatt"] .eco h2, html[data-v3="werkstatt"] .eco p, html[data-v3="werkstatt"] .eco__quote { color: var(--ink); } html[data-v3="werkstatt"] .eco__quote span { color: var(--accent); } html[data-v3="werkstatt"] .foot { background: #2c2820; } /* ===================================================================== BUFFET · NOIR — dark, cinematic; colour as glow against near-black ===================================================================== */ html[data-style="noir"] { --paper: #141318; --paper-2: #1e1c24; --ink: #f3f0ea; --ink-80: #d2cec6; --ink-60: #a4a09a; --ink-40: #6f6c66; --ink-15: #34323c; --koralle: #ff5a47; --ocker: #ecb94f; --waldgruen: #3ea677; --terrakotta: #e8693c; --sand: #cdbfa6; --accent: var(--koralle); } html[data-style="noir"] body { background: var(--paper); color: var(--ink); } html[data-style="noir"] .head.scrolled { box-shadow: 0 1px 0 var(--ink-15), 0 14px 30px -26px #000; } html[data-style="noir"] .gallery-sec { background: var(--paper-2); } html[data-style="noir"] .eco { background: #0f1d16; } html[data-style="noir"] .form { background: var(--paper-2); } html[data-style="noir"] .field input, html[data-style="noir"] .field textarea { background: var(--paper); color: var(--ink); } html[data-style="noir"] .chip { background: var(--paper-2); } html[data-style="noir"] .wall__chip { background: var(--paper-2); color: var(--ink); } html[data-style="noir"] .zahlen li { background: var(--paper-2); } html[data-style="noir"] .foot { background: #0b0a0e; color: var(--ink); } /* ===================================================================== BUFFET · BRUTALIST — stark mono, hard borders, offset shadows, no curves ===================================================================== */ html[data-style="brutalist"] { --paper: #ffffff; --paper-2: #f0f0f0; --ink: #000000; --ink-80: #111; --ink-60: #333; --ink-40: #767676; --ink-15: #000; --koralle: #ff3b00; --ocker: #ffd400; --waldgruen: #0a7d3c; --terrakotta: #ff3b00; --sand: #e8e8e8; --accent: var(--koralle); } html[data-style="brutalist"] body { font-family: "IBM Plex Mono", monospace; } html[data-style="brutalist"] h1, html[data-style="brutalist"] h2, html[data-style="brutalist"] h3 { font-family: "IBM Plex Mono", monospace; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; } html[data-style="brutalist"] * { border-radius: 0 !important; } html[data-style="brutalist"] .svc__media, html[data-style="brutalist"] .plate, html[data-style="brutalist"] .chip, html[data-style="brutalist"] .wall, html[data-style="brutalist"] .form, html[data-style="brutalist"] .field input, html[data-style="brutalist"] .field textarea, html[data-style="brutalist"] .zahlen { border: 2px solid #000 !important; box-shadow: 6px 6px 0 #000 !important; } html[data-style="brutalist"] .btn { border: 2px solid #000; box-shadow: 4px 4px 0 #000; } html[data-style="brutalist"] .btn--ghost { background: #fff; } html[data-style="brutalist"] .cta .btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(255,255,255,.22); } html[data-style="brutalist"] .deckline { height: 9px; } html[data-style="brutalist"] .brush::after { display: none; } html[data-style="brutalist"] .svc__title::after { display: none; } /* ===================================================================== BUFFET · ART-DÉCO — warm black + gold, high-contrast serif, symmetry ===================================================================== */ html[data-style="artdeco"] { --paper: #16130d; --paper-2: #201b12; --ink: #f1e7cf; --ink-80: #dccca4; --ink-60: #ab9d7c; --ink-40: #756c55; --ink-15: #332e1e; --koralle: #c9a24a; --ocker: #d8b15a; --waldgruen: #6f7d52; --terrakotta: #b8863a; --sand: #cdbf9a; --accent: #c9a24a; --accent-ink: #16130d; } html[data-style="artdeco"] body { background: var(--paper); color: var(--ink); } html[data-style="artdeco"] h1, html[data-style="artdeco"] h2, html[data-style="artdeco"] h3 { font-family: "Playfair Display", var(--serif); font-weight: 700; letter-spacing: 0; } html[data-style="artdeco"] .gallery-sec { background: var(--paper-2); } html[data-style="artdeco"] .eco { background: #11281d; } html[data-style="artdeco"] .form { background: var(--paper-2); } html[data-style="artdeco"] .field input, html[data-style="artdeco"] .field textarea { background: var(--paper); color: var(--ink); } html[data-style="artdeco"] .chip, html[data-style="artdeco"] .wall__chip, html[data-style="artdeco"] .zahlen li { background: var(--paper-2); } html[data-style="artdeco"] .btn--ghost { border-color: var(--accent); color: var(--accent); } html[data-style="artdeco"] .foot { background: #0e0b06; color: var(--ink); } /* ===================================================================== BUFFET · TOSKANA — warm earth, soft Fraunces serif, magazine ===================================================================== */ html[data-style="toskana"] { --paper: #f6efe2; --paper-2: #eee3cf; --ink: #382c21; --ink-80: #574636; --ink-60: #7c6a57; --ink-40: #a8967f; --ink-15: #ddccb2; --koralle: #c1502e; --ocker: #d79a3a; --waldgruen: #69782f; --terrakotta: #b34f2b; --sand: #e3d5ba; --accent: #b34f2b; } html[data-style="toskana"] h1, html[data-style="toskana"] h2, html[data-style="toskana"] h3 { font-family: "Fraunces", var(--serif); font-weight: 600; } html[data-style="toskana"] .eco { background: #4c5a2a; } /* ===================================================================== BUFFET · SWISS — international grid, Archivo, red accent, monochrome ===================================================================== */ html[data-style="swiss"] { --paper: #ffffff; --paper-2: #f3f3f3; --ink: #111111; --ink-80: #2a2a2a; --ink-60: #565656; --ink-40: #9a9a9a; --ink-15: #e3e3e3; --koralle: #e8200f; --ocker: #e8200f; --waldgruen: #111111; --terrakotta: #e8200f; --sand: #ededed; --accent: #e8200f; } html[data-style="swiss"] body { font-family: "Archivo", var(--sans); } html[data-style="swiss"] h1, html[data-style="swiss"] h2, html[data-style="swiss"] h3 { font-family: "Archivo", var(--sans); font-weight: 800; letter-spacing: -.035em; } html[data-style="swiss"] .eco { background: #111111; } html[data-style="swiss"] .eco .eyebrow::before { background: var(--accent); } html[data-style="swiss"] .brush::after { height: .18em; border-radius: 0; } /* ===================================================================== BUFFET · PASTELL — soft, airy, rounded; gentle palette ===================================================================== */ html[data-style="pastell"] { --paper: #fbf3f1; --paper-2: #f7e9ea; --ink: #4a3b42; --ink-80: #6a5660; --ink-60: #8d7680; --ink-40: #b8a4ac; --ink-15: #ecdce0; --koralle: #e89a93; --ocker: #ecc98a; --waldgruen: #9cc0a0; --terrakotta: #e0a489; --sand: #efe2d6; --accent: #e89a93; --accent-ink: #3a2e23; } html[data-style="pastell"] .svc__media, html[data-style="pastell"] .plate, html[data-style="pastell"] .wall, html[data-style="pastell"] .form { border-radius: 24px; } html[data-style="pastell"] .eco { background: #cfe1d2; color: var(--ink); } html[data-style="pastell"] .eco::after { display: none; } html[data-style="pastell"] .eco h2, html[data-style="pastell"] .eco p, html[data-style="pastell"] .eco__quote { color: var(--ink); } html[data-style="pastell"] .eco .eyebrow { color: var(--ink-60); } html[data-style="pastell"] .eco__quote span { color: var(--accent); } /* ===================================================================== BUFFET · PLAKATIV — poster energy: huge Anton type, loud blocks ===================================================================== */ html[data-style="plakativ"] { --paper: #fff8ec; --paper-2: #ffefcd; --ink: #1a1410; --ink-80: #2e2620; --ink-60: #5c5046; --ink-40: #9a8c7e; --ink-15: #ecdcc2; --koralle: #ff4d2e; --ocker: #ffb703; --waldgruen: #138a52; --terrakotta: #ff4d2e; --sand: #ffe7b3; --accent: #ff4d2e; } html[data-style="plakativ"] h1 { font-family: "Anton", var(--sans); font-weight: 400; line-height: .98; letter-spacing: 0; text-transform: uppercase; } html[data-style="plakativ"] .hero h1 { font-size: clamp(4rem, 15vw, 11rem); line-height: 1; } html[data-style="plakativ"] .page-hero h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); line-height: .98; } /* Anton uppercase umlauts (Ä/Ü/Ö) need vertical room so dots aren't clipped */ html[data-style="plakativ"] h1, html[data-style="plakativ"] h2, html[data-style="plakativ"] h3 { padding-top: .04em; } html[data-style="plakativ"] h2, html[data-style="plakativ"] h3 { font-family: "Anton", var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0; } html[data-style="plakativ"] .eco { background: var(--accent); } html[data-style="plakativ"] .eco h2, html[data-style="plakativ"] .eco p, html[data-style="plakativ"] .eco__quote { color: #fff; } html[data-style="plakativ"] .eco__quote span, html[data-style="plakativ"] .eco__quote::before, html[data-style="plakativ"] .eco__quote::after { color: #1a1410; } /* ===================================================================== BUFFET · RISOGRAPH — two-tone print, heavy grain, offset misregistration ===================================================================== */ html[data-style="riso"] { --paper: #f4efe2; --paper-2: #ece4d3; --ink: #2a2926; --ink-80: #46443f; --ink-60: #6c685f; --ink-40: #9a958a; --ink-15: #d8d0bf; --koralle: #ff5247; --ocker: #ff5247; --waldgruen: #1d8a5b; --terrakotta: #ff5247; --sand: #d9d2c0; --accent: #ff5247; } html[data-style="riso"] body::before { opacity: .12; } html[data-style="riso"] .svc__media, html[data-style="riso"] .plate { box-shadow: 7px 7px 0 #1d8a5b; } html[data-style="riso"] .brush::after { background: #1d8a5b; } html[data-style="riso"] .eco { background: #1d8a5b; } html[data-style="riso"] .deckline span:nth-child(odd) { background: var(--accent); } html[data-style="riso"] .deckline span:nth-child(even) { background: #1d8a5b; } /* ===================================================================== BUFFET · MEMPHIS — 80s playful, clashing brights, confetti, chunky ===================================================================== */ html[data-style="memphis"] { --paper: #fdf6ee; --paper-2: #fbeede; --ink: #1c1b22; --ink-80: #36343f; --ink-60: #5f5c69; --ink-40: #9a96a2; --ink-15: #e7ddcf; --koralle: #ff5d8f; --ocker: #ffd23f; --waldgruen: #2ec27e; --terrakotta: #ff8c42; --sand: #ffe2c2; --accent: #ff5d8f; --accent-ink: #1c1b22; } html[data-style="memphis"] h1, html[data-style="memphis"] h2, html[data-style="memphis"] h3 { font-family: "Anton", var(--sans); text-transform: uppercase; letter-spacing: 0; font-weight: 400; } html[data-style="memphis"] .svc__media, html[data-style="memphis"] .plate, html[data-style="memphis"] .wall { border-radius: 18px; border: 3px solid var(--ink); } html[data-style="memphis"] .hero { overflow: clip; } html[data-style="memphis"] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2; background-image: radial-gradient(var(--ocker) 14%, transparent 15%), radial-gradient(var(--waldgruen) 12%, transparent 13%); background-size: 54px 54px, 78px 78px; background-position: 0 0, 27px 27px; } html[data-style="memphis"] .eco { background: var(--waldgruen); } html[data-style="memphis"] .chip.is-active { box-shadow: 0 0 0 3px var(--ink); } /* ===================================================================== BUFFET · VINTAGE / HANDWERK — heritage slab, forest green + gold, cream ===================================================================== */ html[data-style="vintage"] { --paper: #f1ead7; --paper-2: #e7dcc2; --ink: #23301f; --ink-80: #3a4733; --ink-60: #5e6a52; --ink-40: #8a907a; --ink-15: #d3c9ae; --koralle: #9c4a2a; --ocker: #b8862f; --waldgruen: #2f5135; --terrakotta: #9c4a2a; --sand: #e7dcc2; --accent: #2f5135; } html[data-style="vintage"] body { font-family: "Zilla Slab", var(--serif); } html[data-style="vintage"] h1, html[data-style="vintage"] h2, html[data-style="vintage"] h3 { font-family: "Zilla Slab", var(--serif); font-weight: 700; letter-spacing: -.01em; } html[data-style="vintage"] .eyebrow { color: var(--ocker); } html[data-style="vintage"] .eco { background: #2f5135; } html[data-style="vintage"] .foot { background: #1a241a; } /* ===================================================================== BUFFET · BAUHAUS — geometric primaries (red/yellow/black), hard, Archivo ===================================================================== */ html[data-style="bauhaus"] { --paper: #f3efe6; --paper-2: #e9e1d0; --ink: #161616; --ink-80: #2b2b2b; --ink-60: #565656; --ink-40: #999; --ink-15: #d7cfbe; --koralle: #e2231a; --ocker: #f5c518; --waldgruen: #161616; --terrakotta: #e2231a; --sand: #e9e1d0; --accent: #e2231a; } html[data-style="bauhaus"] body { font-family: "Archivo", var(--sans); } html[data-style="bauhaus"] h1, html[data-style="bauhaus"] h2, html[data-style="bauhaus"] h3 { font-family: "Archivo", var(--sans); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; } html[data-style="bauhaus"] * { border-radius: 0 !important; } html[data-style="bauhaus"] .eco { background: var(--ocker); } html[data-style="bauhaus"] .eco h2, html[data-style="bauhaus"] .eco p, html[data-style="bauhaus"] .eco__quote { color: #161616; } html[data-style="bauhaus"] .eco .eyebrow { color: #161616; } html[data-style="bauhaus"] .eco__quote span, html[data-style="bauhaus"] .eco__quote::before, html[data-style="bauhaus"] .eco__quote::after { color: #e2231a; }