/* ==========================================================================
CRVD.KITCHEN — Release 0.2 (Global Visual System — Sprint 18.2)
Direction A3 "Magazine" (Warm Charcoal foundation) for the dark product
environment, combined with the A2 warm-paper treatment scoped to the
Background Reader only. Two complementary environments, one token system.
See docs/02-Infrastructure-Architecture for the Sprint 18/18.1/18.2 record.
========================================================================== */
/* PRIVACY HARDENING -- self-hosted fonts, replacing the former
fonts.googleapis.com/fonts.gstatic.com runtime request (see the
maintainability note in prototype/product/assets/fonts/README.md for
provenance and update instructions). Same families, same weights, same
Google Fonts binaries -- fetched once from the exact CSS2 request this
product already used (Oswald:wght@400;500;600;700&Roboto:ital,wght@0,
400;0,500;0,700;1,400), verified as genuine WOFF2 (file signature 'wOF2')
before being committed. Both Oswald and Roboto are served by Google as
variable fonts for this weight range: the four Oswald weights, and the
three Roboto normal weights, each collapse to a single shared binary per
subset -- exactly mirroring Google's own CSS2 output, not a simplification
introduced here. Only the "latin" and "latin-ext" subsets are vendored
(this product is German-first; both ranges together cover ä/ö/ü/ß and
the wider Latin-diacritic set) -- the cyrillic/greek/vietnamese subsets
Google's API also offers are not fetched, since nothing in this product
uses them and vendoring them would be pure unused weight. */
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:400;
font-display:swap; src:url('assets/fonts/oswald-normal-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:'Oswald'; font-style:normal; font-weight:400;
font-display:swap; src:url('assets/fonts/oswald-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:500;
font-display:swap; src:url('assets/fonts/oswald-normal-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:'Oswald'; font-style:normal; font-weight:500;
font-display:swap; src:url('assets/fonts/oswald-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:600;
font-display:swap; src:url('assets/fonts/oswald-normal-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:'Oswald'; font-style:normal; font-weight:600;
font-display:swap; src:url('assets/fonts/oswald-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Oswald'; font-style:normal; font-weight:700;
font-display:swap; src:url('assets/fonts/oswald-normal-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:'Oswald'; font-style:normal; font-weight:700;
font-display:swap; src:url('assets/fonts/oswald-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Roboto'; font-style:italic; font-weight:400;
font-display:swap; src:url('assets/fonts/roboto-italic-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:'Roboto'; font-style:italic; font-weight:400;
font-display:swap; src:url('assets/fonts/roboto-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:400;
font-display:swap; src:url('assets/fonts/roboto-normal-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:'Roboto'; font-style:normal; font-weight:400;
font-display:swap; src:url('assets/fonts/roboto-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:500;
font-display:swap; src:url('assets/fonts/roboto-normal-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:'Roboto'; font-style:normal; font-weight:500;
font-display:swap; src:url('assets/fonts/roboto-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Roboto'; font-style:normal; font-weight:700;
font-display:swap; src:url('assets/fonts/roboto-normal-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:'Roboto'; font-style:normal; font-weight:700;
font-display:swap; src:url('assets/fonts/roboto-normal-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
/* ---- backgrounds: dark product environment ---- */
--canvas:#0F0D12; /* page canvas -- C · Vessel base, warm near-black (Constitution §2.1) */
--nav-bg:#08060B; /* topbar / bottom nav -- one step darker than canvas */
--surface:#1E1B22; /* primary surface: cards, recipe cards, shefindings */
--surface-2:#262129; /* secondary surface: inputs, textareas */
--surface-elevated:#2C2530; /* sheets, modals -- sits above primary surface */
--surface-premium:#241620; /* PL8 surfaces -- restrained, not neon */
/* ---- backgrounds: reading environment (Background Reader only) ---- */
--editorial-paper:#F4EEE0; /* warm cream paper surface */
--editorial-ink:#221E1A; /* primary text on paper */
--editorial-ink-secondary:#584E40; /* secondary text on paper */
/* ---- text: dark product environment ---- */
--text-primary:#F5F1EC;
--text-body:#C9C0C4;
--text-secondary:#A79FA4;
--muted:#948C93;
--text-disabled:#5C5560;
/* ---- borders: dark product environment ---- */
--hairline:#2E272D; /* subtle divider -- decorative list rows only */
--border-default:#6A6666; /* actionable boundaries -- clears 3:1 vs surface */
--border-strong:#7C7678; /* hover / emphasis */
--border-interactive:#E219B5; /* selected / focused actionable boundary */
--border-premium:rgba(226,25,181,0.35); /* PL8 surfaces only */
--editorial-divider:rgba(34,30,26,0.15); /* dividers on the paper surface */
/* ---- actions ---- */
/* --magenta-brand is the raw brand value and is never remapped. --magenta is
rescoped to editorial ink inside the Reader, so anything that genuinely
needs brand magenta on a Reader surface must reference --magenta-brand.
Purely an alias: no rendered value changes anywhere. */
--magenta-brand:#E219B5;
/* THE SIGNAL -- shared CSS mask source (Signal Material + Motion
sprint; Free/PL8 no longer an insertion point as of the Signal
Consolidation sprint -- those decorative instances were removed
outright). A CSS-only duplicate of SIGNAL_SVG's exact path/rect
coordinates (app.js), used ONLY as a mask shape for material
layers -- never as the rendered mark itself. Duplicated rather
than referenced by id specifically because SIGNAL_SVG is inserted
multiple times in the same document (Hero, Menschen, entry,
ceremony) and HTML ids must be unique -- an id-based mask
reference would collide. SIGNAL_SVG itself (app.js) is NEVER
modified by this token; if that geometry ever changes, this
string must be updated to match by hand. */
--signal-mask-src:url('data:image/svg+xml, set to opacity:0 below, a
masked ::before takes over as the visible material. "The material
should match. The prominence should not": SAME gradient recipe as
Menschen (same tonal stops, same magenta family -- material varies
in intensity, never in type, per §1.2), but at a fraction of the
opacity, and with NO sheen layer at all -- Hero's choreography
structure is explicitly out of scope this sprint, and a sheen would
need a new GSAP tween to trigger it meaningfully; staying static
here is the conservative reading of "do not make the Hero louder."
Never louder than the wordmark remains true: --so/--sc below are
completely unchanged (still recede-only, still scroll-driven by the
existing Hero choreography), and the new ::before's own low opacity
keeps the mark's peak intensity well under where the near-white
.075 fill used to sit perceptually. */
/* THE SIGNAL'S STAGE. On desktop it generates no box at all
(display:contents), so .pub-hero-signal keeps resolving against
.pub-hero exactly as before -- desktop composition untouched. Below
640px it becomes the viewport-locked, clipping containing block that
the fixed mark used to lack. Decorative only: it must never enlarge
document geometry, and with overflow:clip it cannot. */
.pub-signal-stage{ display:contents; }
@media (max-width:640px){
.pub-signal-stage{ display:block; position:fixed; inset:0; z-index:1;
overflow:clip; pointer-events:none; }
}
.pub-hero-signal{ position:absolute; top:6%; right:-20%; z-index:1; pointer-events:none;
width:min(84vw,820px); height:min(84vw,820px);
/* --so/--sc MUST be declared here, not left to the var() fallback.
GSAP reads the computed start value when it builds a tween, and an
undeclared custom property computes to the empty string, which GSAP
parses as 0 -- producing a tween that runs 0 -> target, i.e. the
Signal fading UP into view. That is both backwards and a governance
breach (recede-only). Declaring them gives GSAP a real 1 to start
from. Verified live: without these, --so animated 0 -> 0.28. */
--so:1; --sc:1;
opacity:var(--so,1);
/* CROP-MASK, corrected (Signal Scale + Proportion sprint): 55%/78% ->
78%/97%. Root cause of the perceived weight difference against the
"Du nimmst deinen Platz ein." ceremony Signal (which has no mask at
all) was never geometry -- the stroke-to-viewBox ratio is 14/200
(7%) in every instance, byte-identical. It was this mask: computed
against the radial-gradient's farthest-corner sizing basis, the
ring's own stroke sits at ~65.8% of that basis, which the OLD
55%/78% stops placed inside the fade zone -- measured effective
ring alpha ~53%, silently thinning the stroke by roughly half
before opacity/--so are even applied. 78%/97% (already proven
correct on the Menschen instance) keeps the ring's own radius
entirely inside the fully-opaque zone -- ring alpha 100% -- and
only fades the empty box corners beyond it, which was the mask's
actual intended job all along. Opacity/scale/position are
untouched -- those are the axes allowed to vary by context; this
fixes only the accidental ratio distortion. */
-webkit-mask-image:radial-gradient(circle at 50% 50%, black 78%, transparent 97%);
mask-image:radial-gradient(circle at 50% 50%, black 78%, transparent 97%);
transform-origin:50% 50%;
transform:translate(var(--px,0px), calc(var(--py,0px) + var(--sy,0px))) scale(var(--sc,1));
animation:signalBreathe 19s cubic-bezier(.22,.61,.36,1) infinite; }
.pub-hero-signal svg{ width:100%; height:100%; display:block; opacity:0; }
.pub-hero-signal::before{
content:''; position:absolute; inset:0;
-webkit-mask-image:var(--signal-mask-src); mask-image:var(--signal-mask-src);
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
background:var(--signal-satin-gradient);
opacity:.11; }
/* Signal scroll variables (Premium Hero sprint). --so (opacity) and --sc
(scale) are written by the Hero choreography in app.js so the Signal
outlasts the rest of the composition and then recedes -- "bridge by
persistence": it is the last thing standing, and it never brightens or
grows to earn that. Both are recede-only (never above 1), so the Signal
can never become louder than its resting state and never forms a second
ceremonial peak.
Critically, GSAP writes only these VARIABLES -- never `transform`
itself. CSS below stays the single transform owner, composing scroll
(--sc), pointer parallax (--px/--py) and the breathing keyframe into
one expression. That is what keeps pointer parallax working while the
scroll timeline runs, with no competing writers.
--sy remains supported as a translate contributor but is currently
unused; the Premium choreography moves the Signal by scale/opacity
only. Elements reusing this keyframe (.entry-signal-inner,
.ceremony-signal-inner) never set any of these and fall through to the
defaults, so they are completely unaffected. */
@keyframes signalBreathe{
0%,100%{ transform:translate(var(--px,0px), calc(var(--py,0px) + var(--sy,0px))) scale(var(--sc,1)) rotate(0deg); }
50%{ transform:translate(var(--px,0px), calc(var(--py,0px) + var(--sy,0px))) scale(calc(1.03 * var(--sc,1))) rotate(3deg); } }
/* Persistent Signal (Mobile Hero & Persistent Signal Integration, approved):
below 640px the Signal becomes a fixed, viewport-anchored layer instead
of scrolling away with the hero -- "the Signal remains the stage" as the
user moves into the next section. Geometry, colour, mask and the
breathing/parallax motion are all unchanged; only position and scale
move, per the stated rule (composition/scale/positioning/continuity
only). Desktop is untouched -- still position:absolute, scoped to the
hero, as implemented in the Front Door Production Integration Sprint. */
@media (max-width:640px){
/* GLOBAL VIEWPORT FIX. The stage is what is fixed now; the mark is
absolute inside it and keeps top/right/width/height byte-for-byte.
Same composition, same bleed off the right edge (§5.1), same
signalBreathe transform -- but the box that can be reached by a
horizontal pan is the viewport, not 155vw. */
.pub-hero-signal{ position:absolute; top:2%; right:-38%; width:155vw; height:155vw; }
}
/* Centered-brand hero wordmark, now universal (Hero Refinement Sprint):
was mobile-only (Mobile Hero Recomposition Exploration), now the single
brand anchor at every breakpoint since the nav-corner instance is gone.
Height reduced ~19% from the prior 64px to give the kicker, headline,
message and "Mehr erfahren" more room -- geometry, position and colour
otherwise unchanged. */
.hero-brand-wordmark{ display:flex; justify-content:center; margin-bottom:21px; }
.hero-brand-wordmark svg{ display:block; width:auto; height:52px; }
.pub-hero .pub-section-inner{ position:relative; z-index:2; text-align:center; }
.pub-hero h1{ font-size:clamp(38px,6.5vw,70px); line-height:1.05; letter-spacing:0.008em; margin:22px 0 0; }
.pub-hero .muted-line{ color:var(--muted); font-weight:500; }
.pub-hero .lede{ font-size:17px; line-height:1.6; opacity:0.9; margin:22px auto 0; max-width:460px; }
.pub-hero .actions{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pub-hero .reassurance{ margin-top:18px; font-size:12.5px; color:var(--muted); }
/* Presence in the hero must read as atmosphere, not a claim -- quieter
than the dashboard's presence line (Vessel Integration Sprint): smaller,
more muted, last in the content stack, never competing with the CTA. */
.pub-hero-presence{ justify-content:center; margin-top:28px; font-size:12px; opacity:.8; }
/* Green communicates active presence specifically -- scoped to the public
hero only. The dashboard's presence dot (Vessel Integration Sprint)
keeps its original muted --text-secondary treatment; not part of this
sprint's scope. */
.pub-hero-presence .presence-dot{ background:var(--presence-active); }
/* Sprint 14 final -- the CRVD.KITCHEN opening shot. No traveling element,
no keyframes, no glow/halo, no loop. One class toggle drives three
staggered one-way settles that all start together and finish in order
purely by differential duration: headline first, "TREND." a beat later,
primary CTA last (material shadow depth + one clipped reflection
sweep). Entirely disabled under prefers-reduced-motion -- the page then
paints directly in its final, settled state. Secondary CTA and "KEIN"
are never touched. */
/* "TREND." -- refined satin material treatment only (Founder-approved
final pass): a tight, warm gradient plus a very fine vertical grain,
clipped to the letterforms. This gradient itself never animates or
sweeps -- only its brightness settles, alongside the rest of the
system, via the media-query block below. */
.pub-hero .hero-trend{
font-weight:500;
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, rgba(0,0,0,0.045) 1px, rgba(0,0,0,0.045) 2px),
linear-gradient(100deg, #887F84 0%, #9B928E 45%, #A29A96 55%, #887F84 100%);
-webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
/* Primary CTA -- resting material shadow (never a colored glow) plus the
one-shot reflection sweep. The sweep element is clipped by the button's
own overflow:hidden, so it is only ever visible while crossing the
button and invisible at both ends -- never a resting shine, never
repeats. Scoped to .pub-hero so no other button on the site is
affected. */
.pub-hero .btn-primary{ position:relative; overflow:hidden;
box-shadow:0 10px 24px -8px rgba(35,10,20,0.45), 0 2px 6px rgba(20,6,12,0.3), inset 0 1px 0 rgba(255,255,255,0.10); }
.pub-hero .btn-primary::after{
content:''; position:absolute; top:-60%; left:0; width:34%; height:220%;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.24) 50%, transparent 100%);
transform:translateX(340%) rotate(10deg);
pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
.pub-hero .hero-headline-settle{ transition:opacity 800ms var(--patient), filter 800ms var(--patient); }
.pub-hero .hero-trend{ transition:opacity 1100ms var(--patient), filter 1100ms var(--patient); }
.pub-hero .btn-primary{ transition:box-shadow 1600ms var(--patient); }
.pub-hero .btn-primary::after{ transition:transform 1200ms var(--patient); }
.pub-hero.hero-arriving .hero-headline-settle{ opacity:0.85; filter:brightness(0.92); }
.pub-hero.hero-arriving .hero-trend{ opacity:0.8; filter:brightness(0.88); }
.pub-hero.hero-arriving .btn-primary{ box-shadow:0 2px 6px -3px rgba(20,6,12,0.15), inset 0 0 0 rgba(255,255,255,0); }
.pub-hero.hero-arriving .btn-primary::after{ transform:translateX(-260%) rotate(10deg); }
/* ARRIVAL -> SCROLL OWNERSHIP HANDOFF (Premium Hero sprint).
The arrival above animates opacity/filter for up to ~1.6s. The scroll
choreography animates opacity on the same elements. A visitor who
scrolls immediately after load would otherwise have both writing the
same properties at once, which flickers. So the moment app.js builds
the scroll timeline it stamps .hero-scroll-owned here, and every
arrival transition is dropped: arrival keeps its visual result (it is
one-way and lands on the resting state) but stops being an animator.
Exactly one owner at any moment, decided by a class rather than by
whether the user happened to wait. */
.pub-hero.hero-scroll-owned .hero-headline-settle,
.pub-hero.hero-scroll-owned .hero-trend,
.pub-hero.hero-scroll-owned .btn-primary,
.pub-hero.hero-scroll-owned .btn-primary::after{ transition:none; }
}
/* Recession, section arrival (Hero Recession Sprint): staggered by child
position rather than as one block -- kicker, then heading, then the
rest of the section's body, 0/90/180ms apart. Same one-way,
differential-duration grammar the Hero arrival already uses. Works
across every .pub-section unmodified because each one already opens
kicker -> heading -> body, in that DOM order. */
.pub-section-inner.pub-reveal > *{ opacity:0; transform:translateY(22px); transition:opacity 700ms var(--patient), transform 700ms var(--patient); }
.pub-section.seen .pub-section-inner.pub-reveal > *{ opacity:1; transform:translateY(0); }
.pub-section.seen .pub-section-inner.pub-reveal > *:nth-child(2){ transition-delay:90ms; }
.pub-section.seen .pub-section-inner.pub-reveal > *:nth-child(n+3){ transition-delay:180ms; }
/* ---------------------------------------------------------------------- *
* PUBLIC EDITORIAL SCALE (Public Experience Redesign, Phase 2)
*
* The page previously ran 70 (hero) then 34/38/38/38/38/38 then 50 -- one
* peak followed by six identical mid-weight sections. That flatness, not
* missing animation, is what made everything after the Hero feel like a
* different (and lesser) product.
*
* The rhythm is now deliberate:
* PEAK Die Frage ~64 the differentiating idea
* QUIET Das Essen ~28 the image carries the section
* MID Die Menschen ~44 voices carry the section
* PEAK Frei ~56 / QUIET PL8 ~30 -- hierarchy as scale
* FINAL Einladung ~72 deliberately the largest type on the page
*
* The finale out-scaling the Hero is intentional: the conversion moment
* should be the loudest thing a visitor reaches, not a smaller echo of the
* opening. All of these are one-line declarations so the rhythm can be
* read, and adjusted, in a single place. */
.pub-h-peak{ font-size:clamp(38px,6vw,64px); line-height:1.04; letter-spacing:0.006em; margin:18px 0 0; }
/* Frei sits just below Die Frage. Two peaks at an identical size read as
two equal claims; the differentiating idea has to stay the taller one. */
#pub-frei .pub-h-peak{ font-size:clamp(34px,5.2vw,56px); }
.pub-h-mid{ font-size:clamp(30px,4.6vw,44px); line-height:1.1; margin:16px 0 0; }
.pub-h-quiet{ font-size:clamp(22px,2.9vw,28px); line-height:1.25; margin:0; }
.pub-h-sub{ font-size:clamp(21px,2.9vw,30px); line-height:1.3; margin:14px 0 0; font-weight:500; }
.pub-h-final{ font-size:clamp(40px,7vw,72px); line-height:1.02; letter-spacing:0.004em; margin:18px 0 0; }
/* Supporting copy scales with the statements it supports -- a 64px
headline over 15px body is what made the old sections read as cramped. */
/* The gap between a statement and its support is doing hierarchy work:
too tight and they read as one paragraph, so it scales with the
viewport rather than sitting at a fixed 22px. */
.pub-lede-lg{ font-size:clamp(17px,1.55vw,20px); line-height:1.6; color:var(--text-body);
max-width:34em; margin:clamp(30px,4.6vh,52px) 0 0; }
.pub-aside{ font-size:14.5px; line-height:1.6; color:var(--text-secondary);
margin:clamp(22px,3vh,32px) 0 0; max-width:40em; }
/* ---------------------------------------------------------------------- *
* THE HELD STAGE -- Phase 1 (Frage -> Essen).
*
* Replaces the travelling-Aperture architecture. Previously each scene
* had its OWN position:sticky stage, which only behaves as a stage once
* that section's top reaches the viewport top -- entry and exit were
* therefore ordinary document flow and the food container visibly
* travelled upward before and after the staged moment.
*
* Now ONE sticky stage spans both scenes: it locks at the start of Frage
* and releases only after Essen. Both scenes are absolutely positioned
* layers inside it, so nothing in the stage is ever positioned as a
* function of scrollY and no content container can travel.
*
* The stage itself must never receive a transform -- .veil / .pub-grain /
* #pub-net are position:fixed siblings, and a transformed ancestor would
* become their containing block (the documented boxed-vignette bug
* class). GSAP animates only the LAYERS inside the stage, never the
* stage or the wrapper.
*
* .pub-held-wrap supplies scroll duration only and has no visual
* treatment. Menschen is not part of this stage yet (Phase 2). */
/* 230vh -> 290vh (Held Stage Phase 2, Menschen integration). The
existing Frage->Food timeline is untouched -- its tween positions in
initHeldStage are exactly as before; extending the wrapper only gives
the newly-appended food-recession + 3-voice + Signal-return + release
tweens their own room after it, inside Founder's approved 285-300vh
target. Verified live against real measured pixel ranges, not just
computed from this value -- see the sprint report for actual numbers. */
/* 260vh -> 285vh (Refinement sprint): the increase is entirely the new
Signal-as-final-beat content (photograph further darkens, a brief
unscheduled pause, the Signal emerges and settles) -- voice pacing
itself was tightened, not lengthened; see initHeldStage. */
/* 285vh -> 300vh (Visual Polish sprint): Founder's read was that the
Voice 1 -> 2 transition felt rushed. Fix is longer HOLD per voice
(initHeldStage timeline duration grew 2.38->2.50, +5%), and this
height grew by the same proportion so the extra timeline duration
becomes more reading time at the same pacing, not the same duration
spread thinner. 300vh lands exactly at the previously Founder-
approved 285-300vh ceiling from the prior sprint -- no new range
opened. */
/* 300vh -> 318vh (Food -> Signal Handoff sprint): the old pre-emerge
food-darkening step (~0.20 timeline units) is removed outright and
reallocated into a new post-emerge Food Recession beat plus a
genuine Signal Solo Hold (initHeldStage timeline duration grew
2.50->2.65, +6%) -- net growth is deliberately small because most of
the new beats' time was reclaimed from the step they replaced, not
added on top of an unchanged timeline. Height grew by the same ~6%
so the Solo Hold gets real reading distance rather than the same
pacing spread thinner. */
/* 318vh -> ~190vh -> ~300vh (Held-Stage Story Refinement v2): the food-
emergence and dual-voice content stays retired; timeline duration
1.60->2.45. Explicitly a TEST value, not a locked standard -- the v1
single-line beats read as too thin, so v2 trades a longer section for
real editorial reading time (each beat now carries an eyebrow,
headline and subline, HOLD-dominant) and a genuinely multi-stage
Signal climax. Frage's own budget (0.00-0.43) is untouched, and the
vh-per-unit rate is held constant so its own scroll-pixel feel is
unaffected by the section's total growth. See initHeldStage's
timeline comment in app.js for the beat-by-beat reasoning. */
.pub-held-wrap{ position:relative; z-index:2; width:100%; height:300vh; }
/* --stage-dim composes into filter:brightness() -- the PRE-REVEAL beat
(initHeldStage) nudges this to ~0.93 for an "almost subconscious"
darkening right before the Signal arrives, no new visual object.
Declared here (not left to the var() fallback) for the same reason
--so/--essen-blur are declared elsewhere in this file: GSAP reads the
computed start value when building a tween, and an undeclared custom
property resolves to the empty string, which breaks the filter
shorthand entirely rather than just leaving brightness at 1. */
.pub-held-stage{ position:sticky; top:0; height:100svh; width:100%; overflow:hidden;
--stage-dim:1; filter:brightness(var(--stage-dim,1)); }
.pub-held-layer{ position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center;
padding:0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
/* Frage sits above the sequence layer in paint order; both are dark by
default now that there is no photograph beneath either of them. */
.pub-held-frage{ z-index:2; }
/* Headline lines as blocks so each can be given its own timing. They
replace the previous (viewBox only), so in a plain block it expands to the column
-- the same defect .essen/.wt already correct on their own screens. Scoped
to Story for the same reason they scoped theirs: Recipe Detail and the
Guidelines use this class too and are not part of this slice. */
.story .bt-detail-back{ display:inline-flex; align-items:center; gap:7px; min-height:44px;
padding:0; margin:0 0 16px; }
.story .bt-detail-back svg{ flex:none; width:17px; height:17px; }
/* ---- the hero: statement · photograph · featured Story ----
One composition. On mobile it is one vertical rhythm; at desktop the
photograph becomes the hinge between the editorial statement (left) and the
Story it opens (right). Deliberately not three equal columns. */
.story-hero{ margin:0 0 6px; }
/* ---- masthead ---- */
.story-mast{ padding-top:8px; margin:0 0 16px; }
.story-eyebrow{ font-family:var(--font-c); font-size:11px; font-weight:700; letter-spacing:0.22em;
text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.story-mast-title{ font-size:clamp(26px,7.2vw,34px); line-height:1.06; max-width:18ch; margin:0;
color:var(--text-primary); }
.story-mast-intro{ font-family:var(--font-c); font-size:16px; line-height:1.6; color:var(--text-body);
margin:14px 0 0; max-width:42ch; }
/* ---- the image slot ----
One component for every Story image. With a real file it is the photograph;
without one it is an intentional editorial area with print crop marks -- it
shows the composition the future photograph will occupy and never pretends
to be that photograph. */
/* A photograph, not a media container: no border, no card, no surrounding
box, no tonal field behind it -- only the crop. The tinted field belongs to
the empty state alone. The single restrained radius is the same softening
the Product's own objects use (Start's doorway, Konto's entries), so the
image belongs to CRVD's surfaces instead of sitting on top of them. */
.story-fig{ display:block; position:relative; overflow:hidden; }
.story-fig-img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Landscape, not portrait: an editorial photograph in a composition, never an
avatar, headshot module or profile card. 5:4 rather than 4:3 after the first
real photograph: a portrait source needs the slightly taller frame to keep
headroom, the gesture and the room around the subject in one image without
turning the Hub into a portrait. One frame at every width -- cover means the
crop is identical on 390 and 1440, so a photo is judged once. */
.story-fig--feature{ aspect-ratio:var(--story-feature-ratio); border-radius:14px; }
/* Presentation-only magnification around the image's own focal point (set
per image, see storyImage()). This is what makes the square concentrate on
the person: everything outside it -- ceiling, scaffolding, oven, the person
in the foreground -- simply falls outside the frame. The file is untouched. */
.story-fig--feature .story-fig-img{ transform:scale(var(--story-feature-zoom,1)); }
.story-fig--hero, .story-fig--inline{ aspect-ratio:3/2; border-radius:14px; }
.story-fig.is-empty{ background:linear-gradient(176deg,#EFE7D6 0%,#E7DECB 100%); }
.story-fig.is-empty::before{ content:''; position:absolute; inset:14px; pointer-events:none;
background:
linear-gradient(var(--story-ink-line),var(--story-ink-line)) left top/18px 1px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) left top/1px 18px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) right top/18px 1px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) right top/1px 18px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) left bottom/18px 1px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) left bottom/1px 18px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) right bottom/18px 1px no-repeat,
linear-gradient(var(--story-ink-line),var(--story-ink-line)) right bottom/1px 18px no-repeat; }
.story-fig-note{ position:absolute; left:28px; bottom:24px; font-family:var(--font-c); font-size:10.5px;
font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(34,30,26,0.42); }
/* ---- the control ----
The heading carries the button and the button stretches across its entry,
so the whole area is tappable while the document outline stays real
headings. Focus draws around the entry, not around the words. */
.story-open{ display:inline; background:none; border:0; margin:0; padding:0; font:inherit; color:inherit;
letter-spacing:inherit; text-transform:inherit; text-align:left; cursor:pointer;
transition:color 140ms var(--patient); }
.story-open::after{ content:''; position:absolute; inset:0; }
.story-open:focus-visible{ outline:2px solid var(--editorial-ink); outline-offset:4px; }
.story-feature:has(.story-open:focus-visible){ outline:2px solid var(--editorial-ink); outline-offset:8px; }
/* the entry now has its own edge, so the ring hugs the surface instead of
floating away from it */
.story-entry:has(.story-open:focus-visible){ outline:2px solid var(--editorial-ink); outline-offset:4px; }
.story-feature:has(.story-open:focus-visible) .story-open:focus-visible,
.story-entry:has(.story-open:focus-visible) .story-open:focus-visible{ outline:none; }
.story-label{ font-family:var(--font-c); font-size:10.5px; font-weight:700; letter-spacing:0.2em;
text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
/* ---- featured Story ---- */
.story-feature{ position:relative; margin:0 0 54px; }
.story-feature-media{ margin:0 0 16px; }
.story-feature-title{ margin:0; font-size:clamp(34px,9.6vw,46px); line-height:0.98; }
.story-feature-teaser{ font-family:var(--font-c); font-size:16.5px; line-height:1.6; color:var(--text-body);
margin:14px 0 0; max-width:40ch; }
/* The one deliberate accent on this screen. */
.story-feature-action{ display:inline-block; margin:20px 0 0; padding-bottom:5px; font-family:var(--font-c);
font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
color:var(--magenta-brand); border-bottom:1.5px solid var(--magenta-brand); }
/* ---- the collection: editorial surfaces on paper ----
The same grammar the Product uses elsewhere (GROUND / SURFACE / LIGHT /
EDGE / MOTION), spoken in paper instead of in the dark canvas:
GROUND the paper the whole screen sits on stays continuous -- no entry
is a box drawn ON the page, each is a lighter sheet lying on it.
SURFACE one tonal lift out of --editorial-paper itself (no second beige,
no white box): #F9F4E8, about 2% lighter than the ground.
LIGHT one warm radial from the top-left corner, transparent long before
any edge -- the room's light falling on a sheet, not a gradient
fill.
EDGE a single lit top edge, the paper equivalent of the 1px highlight
Start's objects carry. No outline, no drop shadow, no ring.
MOTION only in answer to touch: the sheet lightens, its edge brightens,
the title goes to full ink, and a press settles it by 0.5%.
Typography still leads: the surface is a quiet material under it, which is
what keeps this an editorial page rather than four UI cards. */
.story-section-label{ font-family:var(--font-c); font-size:10.5px; font-weight:700; letter-spacing:0.2em;
text-transform:uppercase; color:var(--muted); margin:0 0 14px; padding-top:26px;
border-top:1px solid var(--hairline); }
.story-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.story-entry{ position:relative; isolation:isolate; padding:22px 20px 24px; border-radius:14px;
background:
radial-gradient(118% 92% at 0% 0%, rgba(255,251,240,0.9) 0%, rgba(255,251,240,0) 58%),
var(--story-surface);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.72);
transition:background-color 260ms var(--patient), box-shadow 260ms var(--patient),
transform 200ms var(--patient); }
.story-entry-title{ margin:0; font-size:clamp(22px,5.8vw,27px); line-height:1.08; }
.story-entry-teaser{ font-family:var(--font-c); font-size:15px; line-height:1.55; color:var(--text-body);
margin:11px 0 0; max-width:46ch; }
@media (hover:hover){
/* the sheet answers the hand: tone, edge, ink -- no underline, no arrow,
no second accent */
.story-entry:hover{ background-color:var(--story-surface-lit);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.95); }
.story-entry:hover .story-open{ color:#0F0D0B; }
.story-feature:hover .story-feature-action{ background:var(--magenta-brand); color:var(--editorial-paper);
padding-left:6px; padding-right:6px; }
}
.story-entry:has(.story-open:active){ transform:scale(0.995); }
.story-feature-action{ transition:background-color 160ms var(--patient), color 160ms var(--patient); }
.story-closing{ font-family:var(--font-c); font-size:13.5px; line-height:1.5; color:var(--muted);
margin:48px 0 0; padding-top:22px; border-top:1px solid var(--hairline); }
.story-closing::before{ content:'— '; }
/* ---- Story Article: the Reader ----
The Hub is discovery, the Article is reading, so the Article gets quieter
rather than more decorated: the same paper, the same ink, the same
.background-body at 16.5px/1.9 -- and none of the Hub's surfaces. Hierarchy
comes from type, space, imagery and rhythm.
The column is a three-track grid (margin · measure · margin) instead of a
centred box: every block sits in the measure, and an image that wants more
room simply takes the outer tracks. At 390 the outer tracks are zero, so
the same rule produces a single column with no breakout and no overflow. */
.story-read{ display:grid; grid-template-columns:1fr min(640px, 100%) 1fr; max-width:1080px;
margin:0 auto; padding-top:6px; }
.story-read > *{ grid-column:2; }
/* the opening: where you are, which Story, then reading begins */
.story-read-head{ margin:0 0 34px; }
.story-article-title{ font-size:clamp(30px,8.4vw,40px); line-height:1.02; margin:0; max-width:17ch;
color:var(--text-primary); }
.story-lead{ font-family:var(--font-c); font-size:clamp(17.5px,4.6vw,19px); line-height:1.6;
color:var(--text-primary); margin:20px 0 0; max-width:44ch; }
/* body rhythm -- scoped to the Reader so the legal and guideline screens,
which share .background-body, keep the spacing they were designed with */
.story-read .background-body{ margin-bottom:28px; }
/* Consecutive paragraphs sit about half a line apart (line-height 1.9 x 16.5px
= 31px; gap 28px - 14px = 14px), so a longform Story reads as one article
while each paragraph stays plainly separate. The Reader is a grid, whose
items do not collapse margins, so the tightening is applied only BETWEEN two
paragraphs: the space before an H2, quote, image or the footer keeps its
28px + own margin exactly as designed. */
.story-read .background-body + .background-body{ margin-top:-14px; }
.story-read .background-body:last-of-type{ margin-bottom:0; }
/* A section heading is a pause, not a new screen: a short editorial rule, a
step up in scale, and space that binds it to the text it introduces. */
.story-h2{ font-size:clamp(18px,4.4vw,21px); line-height:1.16; margin:52px 0 18px;
color:var(--text-primary); max-width:36ch; }
.story-h2::before{ content:''; display:block; width:34px; height:1px; margin:0 0 20px;
background:var(--story-ink-line); }
/* A pull quote interrupts on purpose: scale and space carry it, so it needs
no bar, no quotation marks, no card -- and no accent colour. */
.story-quote{ margin:46px 0; }
.story-quote p{ font-family:var(--font-c); font-style:italic; font-size:clamp(20px,5.2vw,24px);
line-height:1.4; color:var(--text-primary); margin:0; max-width:30ch; }
.story-figure{ margin:38px 0; }
.story-figure--hero{ margin:0 0 38px; }
.story-fig-cap{ font-family:var(--font-c); font-size:12.5px; line-height:1.5; color:var(--muted);
margin:10px 0 0; max-width:46ch; }
/* the continuation */
.story-foot{ margin-top:54px; padding-top:26px; border-top:1px solid var(--hairline); }
.story-next{ display:block; width:100%; padding:6px 0 4px; background:none; border:0; text-align:left;
color:inherit; cursor:pointer; }
.story-next-k{ display:block; font-family:var(--font-c); font-size:10.5px; font-weight:700;
letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.story-next-t{ display:block; font-family:var(--font-d); text-transform:uppercase;
font-size:clamp(22px,5.6vw,26px); line-height:1.08; color:var(--text-primary);
transition:color 140ms var(--patient); }
@media (hover:hover){ .story-next:hover .story-next-t{ color:#0F0D0B; } }
.story-next:focus-visible{ outline:2px solid var(--editorial-ink); outline-offset:6px; }
.story-end-back{ margin:0; }
/* STORY 05 ONLY -- one quiet transition into PL8 after the article. Generous
space above so the article's last line still ends the story; type only (no
card, no fill, no accent colour): a short headline, one line, one action. */
.story-pl8{ margin-top:88px; }
.story-pl8-h{ font-family:var(--font-d); font-size:clamp(20px,5vw,23px); line-height:1.15; color:var(--text-primary); margin:0; }
.story-pl8-p{ font-family:var(--font-c); font-size:15px; line-height:1.55; color:var(--text-body); margin:8px 0 0; }
.story-pl8-act{ display:inline-flex; align-items:center; min-height:44px; margin:10px 0 0; padding:0; background:none; border:0;
border-bottom:1px solid var(--story-ink-line); font-family:var(--font-c); font-size:11px; font-weight:700; letter-spacing:.2em;
text-transform:uppercase; color:var(--text-primary); cursor:pointer; }
.story-pl8-act:focus-visible{ outline:2px solid var(--editorial-ink); outline-offset:6px; }
/* ---- 1440: an editorial composition, not the mobile column stretched ---- */
@media (min-width:1024px){
.story{ padding:36px 56px 88px; }
/* statement | (photograph · featured Story). The outer split is deliberately
uneven -- the statement is the quieter half -- and the photograph sits
between the two headlines, carrying the composition. */
/* The square is shorter than the upright frame it replaces, so the image
column widens slightly to keep the photograph anchoring the composition.
Proportions only -- the composition itself is unchanged. */
.story-hero{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,2.37fr); column-gap:64px;
align-items:center; padding-top:18px; margin-bottom:76px; }
.story-mast{ padding:0; margin:0; }
.story-eyebrow{ margin-bottom:16px; }
.story-mast-title{ font-size:clamp(30px,2.6vw,38px); line-height:1.04; max-width:13ch; }
.story-mast-intro{ margin:16px 0 0; font-size:16.5px; max-width:34ch; }
.story-feature{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:56px;
align-items:center; margin:0; }
.story-feature-media{ margin:0; }
/* Related, not competing: the featured Story is the larger voice, the
editorial statement the environment around it. */
.story-feature-title{ font-size:clamp(36px,3.1vw,46px); }
.story-feature-teaser{ font-size:17px; margin-top:15px; }
.story-section-label{ margin-bottom:20px; }
/* Two columns, but not a 2x2 grid: the right column steps down, so the four
surfaces read as an editorial sequence rather than four aligned modules.
Each sheet also stops short of its column, which keeps the paper ground
visible between and around them. */
.story-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; row-gap:40px; }
.story-entry{ padding:30px 32px 34px; max-width:470px; }
.story-entry:nth-child(2n){ margin-top:64px; }
.story-entry:nth-child(2n+1){ justify-self:start; }
.story-entry:nth-child(2n){ justify-self:end; }
.story-entry-title{ font-size:clamp(26px,2.1vw,31px); }
.story-entry-teaser{ font-size:15.5px; }
.story-closing{ margin-top:64px; }
/* Reading measure stays constrained -- the extra width becomes breathing
room, an opening composition and room for imagery, never longer lines. */
.story-read{ grid-template-columns:1fr min(640px, 100%) 1fr; padding-top:18px; }
.story-read-head{ margin-bottom:44px; }
.story-article-title{ font-size:clamp(36px,3.2vw,46px); }
.story-lead{ margin-top:22px; font-size:19px; }
.story-h2{ margin:60px 0 20px; }
.story-quote{ margin:56px 0; }
/* One editorial offset: the quote steps out of the measure into the left
margin instead of being decorated. */
.story-quote{ grid-column:1 / 3; justify-self:end; width:min(720px, 100%); }
.story-quote p{ max-width:26ch; }
/* Imagery may take the outer tracks; text never does. */
.story-figure--hero, .story-figure--wide{ grid-column:1 / -1; justify-self:center;
width:min(820px, 100%); }
.story-foot{ margin-top:64px; }
}
/* ---- motion: arrival only, never ambient ---- */
@keyframes story-rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes story-reveal{ from{ opacity:0; transform:scale(1.012); } to{ opacity:1; transform:none; } }
.story-hub .story-eyebrow{ animation:story-rise 460ms var(--patient) 40ms both; }
.story-hub .story-mast-title{ animation:story-rise 520ms var(--patient) 100ms both; }
.story-hub .story-mast-intro{ animation:story-rise 520ms var(--patient) 160ms both; }
.story-hub .story-feature-media{ animation:story-reveal 700ms var(--patient) 200ms both; }
/* The Reader settles once, at the opening only, and is then still: nothing
animates while reading, and no image or paragraph waits for a scroll. */
.story-article .story-read-head > *{ animation:story-rise 420ms var(--patient) both; }
.story-article .story-label{ animation-delay:60ms; }
.story-article .story-article-title{ animation-delay:110ms; }
.story-article .story-lead{ animation-delay:160ms; }
@media (prefers-reduced-motion: reduce){
.story-hub .story-eyebrow,
.story-hub .story-mast-title,
.story-hub .story-mast-intro,
.story-hub .story-feature-media,
.story-article .story-read-head > *{ animation:none; }
/* The surfaces keep their material (tone, light, edge) -- only the movement
goes: no transition, no press travel. Hierarchy never depended on it. */
.story-open, .story-feature-action, .story-entry{ transition:none; }
.story-entry:has(.story-open:active){ transform:none; }
}
/* PACE (bodytype) */
.bt-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.bt-card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:var(--s5); text-align:left; cursor:pointer; }
.bt-card:hover{ border-color:var(--border-strong); }
.bt-card.selected{ border-color:var(--magenta); background:var(--surface-premium); }
.bt-card h3{ font-size:19px; margin:6px 0 8px; }
.bt-card p{ font-size:14px; color:var(--text-body); line-height:1.55; }
.bt-detail-back{ background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; margin-bottom:var(--s4); padding:6px 0; }
.bt-trait{ margin-bottom:var(--s5); }
/* Sprint 18.2 -- trait labels are ordinary informational text (Mindset,
Stärken, Herausforderungen), not an action -- moved off magenta onto the
same quiet kicker treatment used everywhere else. */
.bt-trait h4{ font-size:13px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; margin-bottom:6px; }
.bt-trait p{ font-size:14.5px; line-height:1.6; color:var(--text-body); }
/* premium */
.pl8-hero{ text-align:center; padding:var(--s6) 0; }
.pl8-hero h1{ font-size:clamp(28px,6vw,42px); margin:10px 0; }
.pl8-feature-list{ display:grid; grid-template-columns:1fr; gap:12px; margin:var(--s6) 0; text-align:left; }
.pl8-feature{ display:flex; gap:12px; align-items:flex-start; }
.pl8-feature svg{ flex-shrink:0; width:20px; height:20px; color:var(--magenta); margin-top:2px; }
.pl8-feature h4{ font-size:14.5px; margin-bottom:4px; }
.pl8-feature p{ font-size:13.5px; color:var(--text-body); line-height:1.5; }
.pl8-price-card{ background:var(--surface-premium); border:1px solid var(--border-premium); border-radius:var(--radius); padding:var(--s6); text-align:center; }
.ai-tabs{ display:flex; gap:8px; margin-bottom:var(--s5); border-bottom:1px solid var(--hairline); }
.ai-tabs button{ background:none; border:none; color:var(--muted); font-size:13.5px; font-weight:600; padding:10px 4px; margin-right:16px; cursor:pointer; border-bottom:2px solid transparent; }
.ai-tabs button.active{ color:var(--text-primary); border-bottom-color:var(--magenta); }
.ai-callout{ background:var(--surface-premium); border:1px solid var(--border-premium); border-radius:var(--radius); padding:var(--s5); margin-bottom:var(--s5); }
.ai-callout p{ font-size:13.5px; color:var(--text-body); line-height:1.55; }
.shopping-list{ list-style:none; margin:0; padding:0; }
.shopping-list li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px; }
.shopping-list input{ width:16px; height:16px; }
.mealplan-day{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--hairline); font-size:14px; }
.mealplan-day .d{ color:var(--text-secondary); width:80px; flex-shrink:0; }
/* account */
.account-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--hairline); font-size:14.5px; gap:var(--s4); }
.account-row .v{ color:var(--text-secondary); font-size:13.5px; }
/* This specific row's value is now a full situation sentence rather than a
short type name (Legacy Personalization Decoupling, Phase 2) -- let it
wrap and right-align instead of forcing a single line. A dedicated class
keeps this scoped to that one row; every other .account-row (short
values like "Mitgliedschaft") keeps the default single-line vertical
centering untouched. */
.account-row-wrap{ align-items:flex-start; }
.account-row-wrap .v{ text-align:right; max-width:60%; line-height:1.45; }
/* ---------------------------------------------------------------------- *
* ACCOUNT PERSONALIZATION -- Slice 1
*
* The personal state surface. Deliberately NOT a card in the conventional
* sense: no fill, no border, no radius, no shadow. A near-black tonal lift
* that emerges from the page ground, closed by a single hairline. Reuses
* existing tokens throughout -- no new colour is introduced by this feature.
* ---------------------------------------------------------------------- */
/* ONE GRID. The card previously bled ±24px past every other divider via
negative margins, so its bottom hairline sat 48px wider than the receipt's
and the section rules -- measured 146→1294 against 170→1270. It now shares
the content column exactly, so every line on the screen starts and ends on
the same two edges. */
/* VISUAL PASS -- the identity plate no longer ENDS, it DISSOLVES. The ground
moved onto its own layer so that layer can be masked away toward the bottom,
which lets the closing hairline go entirely: the surface fades into the
canvas instead of being ruled off it. One less horizontal band, and the
difference between a composed plate and a boxed card. */
/* overflow:hidden is gone with the crop it used to disguise: the Signal is a
complete symbol sitting inside the plate now, so nothing needs clipping --
and clipping is what forced the ground to stop on a hard vertical edge. */
.acct-card{ position:relative;
margin:0 0 var(--s7);
padding:var(--s6) 0 var(--s8); }
/* NO RECTANGLE. Two soft radials that are already transparent at every edge,
so the plate has no border, no corner and nothing to read as a container --
it is light in a room, not a card on a page. The magenta bloom is anchored
where the Signal actually sits, which is what makes the mark look like the
source of it rather than an object placed on top of it. */
.acct-card::after{ content:''; position:absolute; inset:0 -16px; z-index:0;
pointer-events:none;
background:
radial-gradient(84% 52% at 74% 76%, rgba(226,25,181,0.15) 0%, rgba(226,25,181,0) 70%),
radial-gradient(78% 46% at 34% 22%, rgba(214,198,226,0.055) 0%, rgba(214,198,226,0) 72%);
/* Fades at top and bottom so the light has no beginning and no end. With
the horizontal bleed above, the plate meets the canvas on all four sides
without a single edge -- there is no rectangle left to read as a card. */
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%); }
.acct-card > *{ position:relative; z-index:2; }
/* MEASURE. The approved pitch was composed at ~390px. Applied to a 1100px
container the type sprawled and the tonal ground spread to invisibility,
which is what read as "flat". Constraining the copy restores the pitch's
proportions on every viewport and leaves the right of the card as
deliberate negative space for the Signal to occupy. */
.acct-card-inner{ position:relative; z-index:2; max-width:34rem; }
/* THE SIGNAL -- membership, never identity (Design Constitution §1.2,
hierarchy rule LOCKED). One instance, cropped, bleeding off the right edge,
radial-masked so it fades at its own edges, behind all content, and never
in a CTA's visual field. Arrives AFTER the content, which is what keeps it
atmospheric rather than structural. */
/* THE SIGNAL. Previously 45% of it sat outside the card and was destroyed by
overflow:hidden at the far edge of an 1100px container -- it read as
accidentally clipped, which is exactly what it was. Now sized to the card's
own height and placed so roughly three quarters of the arc is on-surface:
a composed fragment that leaves the frame on purpose (§5.1), occupying the
negative space the measure constraint opens up on its right. Opacity stays
at the specified .115. */
/* THE SIGNAL, CORRECTED (Founder direction 5). It was 420px and deliberately
bled off the right edge; even at 86% on-surface it read as a symbol that
had been chopped rather than one that had been placed. The direction is
now the opposite: a COMPLETE symbol living quietly in the environment.
Reduced to 172-200px, entirely inside the card with real margin around it,
and the edge mask is gone -- there is no crop left to disguise. Opacity
rises from .115 to .17 because a smaller mark at the old value would have
disappeared; it is still far below the name, the anchor and the Focus row,
so it gains readability without gaining rank. */
/* VISUAL PASS -- the Signal stops being something parked in leftover space
and becomes the plate's atmospheric anchor: larger, and now EMITTING. The
bloom behind it is what turns the right of the composition from empty into
inhabited. It gains presence, never rank -- still the dimmest object on the
surface, still complete and uncropped, still never an avatar. */
.acct-sig{ position:absolute; z-index:1; pointer-events:none;
/* Centred via calc, not transform, so the entrance keyframe owns transform
outright and the mobile override can reposition without fighting it. */
width:clamp(190px, 19vw, 268px); height:clamp(190px, 19vw, 268px);
top:calc(50% - clamp(95px, 9.5vw, 134px)); right:clamp(20px, 5vw, 84px);
opacity:0; color:var(--magenta);
animation:acctSigIn 1900ms var(--patient) 350ms forwards; }
/* A close halo, not a wide wash: the plate's own ground carries the broad
atmosphere. Measured deliberately -- at -58% the halo reached 155px past
the mark and pushed the document 29px wider than the viewport at 1440. */
.acct-sig::before{ content:''; position:absolute; inset:-30%; border-radius:50%;
background:radial-gradient(closest-side,
rgba(226,25,181,0.22) 0%, rgba(226,25,181,0.08) 44%, rgba(226,25,181,0) 78%);
transform:translate3d(var(--sig-px,0px),
calc(var(--sig-y,0px) * 0.5 + var(--sig-py,0px)), 0); }
/* When GSAP drives the arrival it owns opacity outright. The CSS keyframe is
the fallback path only -- and parking the mark at rest here also fixes a
real defect of that keyframe: innerHTML is rebuilt on every state change,
so the Signal re-faded in each time a member touched a Focus word. */
.acct.acct-gsap .acct-sig{ animation:none; opacity:.17; }
/* DEPTH DRIFT. Two elements, two owners, deliberately: the wrapper's entrance
keyframe owns transform outright, so the scroll-linked drift lives on the
svg inside it and the two can never fight. JS writes only --sig-y (see
initAccountMotion); this rule is the sole place a transform is composed.
At rest --sig-y is 0px, so the approved composition is exactly what a
member sees before they scroll. */
/* Three inputs, ONE composed transform, and JS writes none of it directly:
--sig-y is the scroll-linked depth drift, --sig-px/--sig-py the pointer
lean. Composing them here is what keeps the wrapper's transform free for
the arrival, so the entrance and the responses can never fight. */
.acct-sig svg{ width:100%; height:100%; display:block;
transform:translate3d(var(--sig-px, 0px),
calc(var(--sig-y, 0px) + var(--sig-py, 0px)), 0); }
@keyframes acctSigIn{
from{ opacity:0; transform:translate(12px,-6px) scale(.965); }
to{ opacity:.17; transform:none; } }
/* VISUAL PASS -- editorial scale. The member's name is now unambiguously the
largest thing on the screen; every label around it was pulled down a step
so the contrast is carried by TYPE, before any line or container. */
.acct-name{ font-family:var(--font-d); font-weight:500;
font-size:clamp(40px, 8.4vw, 64px); line-height:0.98;
letter-spacing:0.004em; color:var(--text-primary); margin:0 0 12px;
min-height:clamp(40px, 8.4vw, 64px); }
.acct-since{ font-size:10.5px; letter-spacing:0.185em; text-transform:uppercase;
color:var(--muted); font-weight:500; margin:0 0 var(--s6);
display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
/* PRODUCT-TRUTH CLOSEOUT -- account-identity metadata, deliberately NOT
.acct-since's own uppercase/letter-spaced treatment: an email reads as
noise once spaced out and its case is meaningful, unlike a member-since
date. Same quiet weight and colour, normal case, its own line.
:has() tightens the gap above ONLY when an email line actually follows,
so a member with no email (session genuinely missing it) sees the exact
original spacing before "Deine Woche" -- nothing shifts for that case.
break-all is the deliberate overflow guard for a long, unbroken address on
a narrow viewport. */
.acct-since:has(+ .acct-email){ margin-bottom:var(--s3); }
.acct-email{ font-size:12px; letter-spacing:0.01em; color:var(--muted);
font-weight:500; margin:0 0 var(--s6); word-break:break-all; }
.acct-lbl{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--muted); font-weight:600; margin:0 0 9px; }
.acct-anchor{ font-family:var(--font-d); font-weight:400;
font-size:clamp(22px, 4.6vw, 29px); line-height:1.22;
letter-spacing:0.002em; color:var(--text-primary); margin:0 0 4px; max-width:14em; }
.acct-anchor-empty{ color:var(--text-secondary); }
/* 44px hit area without 44px of visual weight: the negative block margin
absorbs the extra height so spacing reads unchanged, while the tappable
box is full size. Measured at 27px before this. */
.acct-edit{ background:none; border:none; padding:0; color:var(--muted);
font-family:var(--font-c); font-size:12.5px; cursor:pointer;
text-decoration:underline; text-underline-offset:3px; letter-spacing:normal;
text-transform:none;
display:inline-flex; align-items:center; min-height:44px; margin:-9px 0; }
.acct-edit:hover{ color:var(--text-secondary); }
/* .acct-split (the in-card horizontal rule) was removed by the visual pass:
the identity plate is separated by space now, not by bands. */
/* CAUSE <-> EFFECT. Pointing at the adaptation that this sentence produces
lights the sentence up, and vice versa. The cue is a hairline GROWING out
of the label -- deliberately neutral, never magenta: on this screen magenta
means "CRVD is adapting this", and a hover state is not that. The plate
clips at its own edge, so the cue lives inside the type rather than in a
margin that would be cut off. */
.acct-beat-situation{ position:relative; margin-bottom:var(--s7); }
.acct-beat-situation .acct-lbl,
.acct-domains-lead{ transition:color 300ms var(--patient); }
.acct-beat-situation .acct-lbl::after{ content:''; display:inline-block;
vertical-align:middle; width:0; height:1px; margin-left:0;
background:var(--border-strong);
transition:width 320ms var(--patient), margin-left 320ms var(--patient); }
.acct-beat-situation.is-linked .acct-lbl{ color:var(--text-secondary); }
.acct-beat-situation.is-linked .acct-lbl::after{ width:26px; margin-left:10px; }
/* RECOGNITION. One beat, once, when the member has just changed their week:
the sentence they rewrote and the adaptation it produces acknowledge each
other. A one-shot lift, never a loop. */
.acct-beat-situation.is-recognised .acct-anchor{ animation:acctRecognise 1100ms var(--patient); }
@keyframes acctRecognise{
0%{ opacity:1; } 22%{ opacity:.55; } 60%{ opacity:1; } 100%{ opacity:1; } }
/* FOCUS -- an editorial word-selector, not chips. The active option steps up
in size and weight and grows a magenta underline that wipes in from the
left. No box, no fill: boxes would make five peers look like five buttons,
which is what the previous chip treatment got wrong. */
.focus-sel{ display:flex; flex-wrap:wrap; gap:5px var(--s5); align-items:baseline; }
.focus-word{ position:relative; background:none; border:none; cursor:pointer;
padding:10px 0 11px; font-family:var(--font-d); font-weight:400; font-size:15px;
letter-spacing:0.05em; text-transform:uppercase; color:#6E6670;
transition:color 300ms var(--patient), font-size 300ms var(--patient); }
.focus-word::after{ content:''; position:absolute; left:0; right:100%; bottom:3px;
height:1px; background:var(--magenta); transition:right 340ms var(--patient); }
.focus-word:hover{ color:var(--text-secondary); }
/* TACTILE. The press is acknowledged in 60ms -- before the write leaves the
browser -- so the control feels precise rather than laggy, while the word
still only *steps forward* once the state is real. Nothing moves, nothing
scales: the acknowledgement is tonal, which is what keeps five peers from
reading as five buttons. */
.focus-word:active{ color:var(--text-primary); transition-duration:60ms; }
.focus-word.is-active{ color:var(--text-primary); font-weight:500; font-size:19px; }
.focus-word.is-active::after{ right:0; }
/* min-height reserves one wrapped line so switching Focus never shifts the
layout, but 2.4em left an obvious dead band under a one-line description. */
.focus-desc{ font-size:13px; line-height:1.5; color:var(--text-secondary);
margin:var(--s3) 0 0; min-height:1.6em; }
/* Local Focus confirmation. Deliberately NOT an adaptation dot: Focus has no
active consumer, so it may not use that semantic
(PERSONALIZATION_CONTEXT_CONTRACT v1.1, Invariant 10). */
.focus-ok{ font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--muted); font-weight:600; margin:var(--s2) 0 0;
opacity:0; transition:opacity 400ms var(--patient); }
.focus-ok.is-on{ opacity:1; }
/* ADAPTATION RECEIPT. The dot means exactly one thing: CRVD is actively
adapting this. Never a bullet, never decoration, never a status indicator.
This is the payoff of the whole composition, so it carries the largest body
type on the screen and the most air around it -- weight bought with type and
space, not with a container. It stays one truthful line; nothing here scales
with how full the section looks. */
.acct-receipt{ padding:var(--s2) 0 var(--s6); margin-bottom:var(--s6);
border-bottom:1px solid var(--hairline); }
.acct-receipt .acct-lbl{ margin-bottom:var(--s4); }
.acct-receipt ul{ margin:0; padding:0; list-style:none; max-width:34rem; }
.acct-receipt li{ display:grid; grid-template-columns:auto 1fr; gap:14px;
align-items:start; padding:2px 0; font-size:15px; line-height:1.58;
color:var(--text-primary); }
/* The halo is the dot's own meaning made legible -- "actively adapting" -- not
decoration bolted onto it, and it is deliberately static: a pulse would turn
a semantic mark into a status light. */
.adapt-dot{ width:5px; height:5px; border-radius:50%; background:var(--magenta);
margin-top:9px; flex:none; box-shadow:0 0 7px 1px rgba(226,25,181,0.34); }
/* ---------------------------------------------------------------------- *
* ESSEN & KOCHEN (Slice 2) -- the deeper-personalization layer.
*
* Instruments, not form rows. The whole surface uses exactly three devices
* already established on this screen: the .acct-lbl eyebrow, the editorial
* word-selector borrowed from Focus, and open space. No control gets a box,
* because a box around each of three would make them read as three settings
* rather than one instrument panel. Existing tokens only; magenta appears on
* exactly one thing at a time -- the current selection.
* ---------------------------------------------------------------------- */
/* ENTRY POINT on Account. Full-width so it is unmistakably tappable, but
ruled rather than boxed so it belongs to the same grid as every divider
above it. The name carries the weight; the values underneath are the
payload, which is why they are shown rather than a chevron. */
/* The entry point is a READOUT of the instruments behind it, not a nav row.
Three miniature rails, each showing where that member's answer actually
sits -- so Account carries the instrument language rather than another
headline/copy/divider stanza, and the link states its own contents. An
undeclared instrument shows its rail with no blade, which reads as an
empty gauge: honest, and an invitation. */
.kitchen-entry{ display:grid; grid-template-columns:1fr auto; align-items:center;
gap:var(--s5) var(--s7); width:100%; text-align:left; background:none;
border:none; border-bottom:1px solid var(--hairline); cursor:pointer;
padding:var(--s2) 0 var(--s6); margin:0 0 var(--s6); color:inherit;
font-family:inherit; }
.kitchen-entry .acct-lbl{ display:block; grid-column:1; margin-bottom:6px; }
.kitchen-entry-text{ grid-column:1; grid-row:2; }
.kitchen-entry-name{ display:block; font-family:var(--font-d); font-weight:500;
font-size:23px; line-height:1.2; letter-spacing:0.004em; color:var(--text-primary);
transition:color 260ms var(--patient); }
.kitchen-entry-sub{ display:block; margin-top:7px; font-size:13.5px;
line-height:1.5; color:var(--text-secondary); }
/* A factual body reading on the overview. Typeset, not tiled: display type
and tabular figures give the number enough presence to be read at a
glance, while it stays inside the domain's existing subline and never
becomes a stat card. Quieter than the detail screen by design -- there
the value is the protagonist, here it is a statement of where things
stand. */
.acct-stat{ display:inline-flex; align-items:baseline; gap:4px;
font-family:var(--font-d); font-weight:500; font-size:19px; line-height:1.2;
color:var(--text-primary); font-variant-numeric:tabular-nums;
margin-right:var(--s3); }
.acct-stat-u{ font-family:var(--font-c); font-size:10.5px; font-weight:500;
letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.acct-stat-meta{ font-size:13px; color:var(--text-secondary); }
.kitchen-entry:hover .kitchen-entry-name{ color:var(--magenta); }
.kitchen-mini-row{ position:relative; height:9px; }
.kitchen-mini-row::before{ content:''; position:absolute; left:0; right:0; top:4px;
height:1px; background:var(--hairline); }
.kitchen-mini-b{ position:absolute; top:0; width:2px; height:9px; margin-left:-1px;
background:var(--magenta); border-radius:1px;
box-shadow:0 0 6px 0 rgba(226,25,181,0.45);
transition:left 420ms var(--patient); }
.kitchen-entry:hover .kitchen-mini-row::before{ background:var(--text-disabled); }
@media (max-width:640px){
.kitchen-entry{ gap:var(--s4) var(--s5); }
}
.essen-title{ font-family:var(--font-d); font-weight:500; font-size:29px;
line-height:1.14; letter-spacing:0.008em; color:var(--text-primary);
margin:var(--s2) 0 var(--s3); max-width:15em; }
.essen-lede{ font-size:14px; line-height:1.6; color:var(--text-secondary);
margin:0 0 var(--s8); max-width:34rem; }
.essen-loading{ font-size:14px; color:var(--muted); margin-top:var(--s7); }
/* One rule between instruments, none above the first and none below the
last: the separation is the space, the rule only confirms it. */
.kitchen-inst{ padding:0 0 var(--s7); margin:0 0 var(--s7);
border-bottom:1px solid var(--hairline); max-width:34rem; }
.kitchen-inst:last-of-type{ border-bottom:none; padding-bottom:var(--s5); }
/* ====================================================================== *
* CRVD PERSONALIZATION INSTRUMENTS -- THE CALIBRATED RAIL
*
* One grammar, three instances. Every personalization instrument in the
* product is built from the same four parts, in the same order:
*
* READOUT the answer, in display type, large. Rolls behind a mask when
* it changes -- the value is replaced, never cross-faded.
* RAIL a hairline track sitting in a shallow trough. The trough is
* one inset highlight and one shadow, not a box: depth without
* a container.
* TICKS calibration marks rising from the rail. Their SPACING CARRIES
* MEANING -- on the time instrument they sit at their true
* position on a 0-60 minute scale, so the rail is a measurement
* scale rather than four equidistant words.
* BLADE a magenta indicator that travels to the active tick and
* settles there.
*
* MAGENTA, deliberately: the blade, the active tick and the bloom are the
* CRVD identity colour used as a precision indicator (Founder direction 7).
* They are never dots. The magenta DOT keeps its single meaning -- CRVD is
* actively adapting this -- and lives only in the adaptation receipt. Two
* different forms, two different places, no collision.
*
* Adding a fourth instrument later means choosing points and a readout.
* It does not mean designing a new control.
* ====================================================================== */
.kitchen-inst-head{ display:flex; align-items:flex-end;
justify-content:space-between; gap:var(--s4); margin:0 0 var(--s5); }
/* READOUT -- masked. The box is fixed height with overflow hidden, so the
outgoing value leaves upward while the incoming one arrives from below:
a value is replaced, not faded. tabular-nums so 8 and 1 occupy identical
width and nothing beside the readout can shift. */
.kitchen-read{ position:relative; overflow:hidden; height:46px; min-width:2.2em;
display:block; }
.kitchen-read-v{ display:block; font-family:var(--font-d); font-weight:500;
font-size:40px; line-height:46px; letter-spacing:0.01em;
color:var(--text-primary); font-variant-numeric:tabular-nums;
white-space:nowrap; }
.kitchen-read.is-unset .kitchen-read-v{ color:var(--text-disabled); font-weight:400; }
/* The word readouts (leftovers) carry the same weight as the numerals but
cannot use their scale without wrapping. */
.kitchen-read.is-word{ min-width:0; }
.kitchen-read.is-word .kitchen-read-v{ font-size:26px; }
/* margin-right:auto, not space-between across three children: the unit
belongs to the numeral it qualifies and must sit against it. Left to
space-between it floated into the middle of the row, reading as a third
independent element. */
.kitchen-unit{ font-family:var(--font-c); font-size:12px; font-weight:500;
letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
padding-bottom:9px; white-space:nowrap; margin-right:auto; margin-left:-6px; }
/* RAIL + TROUGH. 44px tall so the whole track is a comfortable touch strip,
with the line itself optically centred inside it. */
/* Inset by half a tick box. A tick at left:0% / left:100% carries a 44px hit
column centred on the mark, so at the raw edges those columns hung 22px
past the content and pushed the document 15px wider than the viewport --
measured 405 against 390. Insetting the rail by 22px puts the outermost
hit columns flush with the content edge instead of past it, and the scale
reads as deliberately inset rather than running off the page. */
/* touch-action:pan-y is the whole scroll-intent solution, and it is
declarative rather than guessed: the browser keeps VERTICAL panning for
itself, so the page still scrolls normally with a finger on the rail,
and hands us every HORIZONTAL gesture without our ever calling
preventDefault on a scroll. No movement thresholds, no direction
sniffing, no scroll-blocking listener. */
.kitchen-rail{ position:relative; height:52px; margin:0 22px var(--s4);
touch-action:pan-y; cursor:grab; }
.kitchen-rail.is-held{ cursor:grabbing; }
/* The track brightens under the hand -- the instrument acknowledges being
held before the value has changed at all. */
.kitchen-rail.is-held::before{ background:var(--border-default); }
.kitchen-rail:hover::before{ background:var(--text-disabled); }
.kitchen-rail::before{ content:''; position:absolute; left:0; right:0; top:25px;
height:1px; background:var(--hairline);
transition:background-color 200ms var(--patient); }
/* The trough: one hairline of light above the track and a soft shadow below
it. Barely visible on its own -- what it does is make the blade look like
it is sitting IN something. */
.kitchen-rail::after{ content:''; position:absolute; left:0; right:0; top:26px;
height:6px; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); }
/* TICKS. Each is a real button -- the rail is operable, not a readout with
decoration. The visible mark is the ::after; the button itself is an
invisible column wide enough to hit comfortably. */
/* pointer-events:none is deliberate and load-bearing. The rail owns every
pointer gesture, so a tap and a drag are the same code path and can never
both fire for one touch (which would have written twice). The buttons stay
in the DOM, focusable and clickable BY KEYBOARD -- Enter/Space dispatches
a click without any pointer event -- so the calibration marks remain the
accessible, labelled, individually reachable control they were. */
.kitchen-tick{ position:absolute; top:0; height:52px; width:44px;
margin-left:-22px; padding:0; border:none; background:none;
display:block; pointer-events:none; }
.kitchen-tick::after{ content:''; position:absolute; left:50%; width:1px;
margin-left:-0.5px; top:19px; height:7px; background:var(--text-disabled);
transition:height 260ms var(--patient), top 260ms var(--patient),
background-color 260ms var(--patient); }
.kitchen-tick.is-major::after{ top:16px; height:10px; background:var(--muted); }
.kitchen-rail:hover .kitchen-tick::after{ background:var(--text-secondary); }
.kitchen-tick.is-on::after{ top:13px; height:16px; background:var(--magenta); }
/* Under the hand every mark lifts slightly -- the whole scale responds, not
just the one being aimed at. */
.kitchen-rail.is-held .kitchen-tick::after{ top:17px; height:11px; }
.kitchen-rail.is-held .kitchen-tick.is-on::after{ top:13px; height:16px; }
.kitchen-tick:focus-visible::after{ background:var(--magenta); top:13px; height:16px; }
/* Minor calibration marks between the labelled points -- texture that makes
the rail read as a measured scale. Not operable, not tab stops. */
.kitchen-minor{ position:absolute; top:23px; width:1px; height:4px;
background:var(--hairline); pointer-events:none; }
/* BLADE. A bar, never a dot -- the dot is spoken for. Sits astride the rail
with a soft bloom beneath it so the active point has energy without
anything glowing permanently. */
/* THE HANDLE. Still a blade, never a circular thumb -- but now unmistakably
a thing to take hold of: 3px wide and 34px tall it stands clear of the
16px marks, and it carries its own bloom so it reads as sitting ABOVE the
scale rather than drawn onto it. The ::before is a 44px invisible grab
column, which is what makes it catchable without making it look heavy. */
.kitchen-blade{ position:absolute; top:9px; left:0; width:3px; height:34px;
margin-left:-1.5px; background:var(--magenta); pointer-events:none;
border-radius:1.5px;
box-shadow:0 0 14px 2px rgba(226,25,181,0.55), 0 0 3px 0 rgba(226,25,181,0.9);
transition:height 180ms var(--patient), top 180ms var(--patient),
width 180ms var(--patient), box-shadow 180ms var(--patient); }
.kitchen-blade::before{ content:''; position:absolute; top:-9px; bottom:-9px;
left:50%; width:44px; margin-left:-22px; }
/* A soft disc of light behind the handle: local depth, so the blade looks
lit rather than painted. Grows when held. */
.kitchen-blade::after{ content:''; position:absolute; left:50%; top:50%;
width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
background:radial-gradient(circle, rgba(226,25,181,0.28) 0%, rgba(226,25,181,0) 70%);
transition:transform 200ms var(--patient), opacity 200ms var(--patient); }
.kitchen-rail:hover .kitchen-blade{ height:38px; top:7px; }
.kitchen-rail.is-held .kitchen-blade{ width:4px; margin-left:-2px; height:42px; top:5px;
box-shadow:0 0 20px 3px rgba(226,25,181,0.65), 0 0 4px 0 rgba(226,25,181,1);
transition-duration:90ms; }
.kitchen-rail.is-held .kitchen-blade::after{ transform:scale(1.5); }
.kitchen-blade.is-hidden{ opacity:0; }
.kitchen-labels{ position:relative; height:15px; margin:0 22px var(--s4); }
.kitchen-lab{ position:absolute; transform:translateX(-50%);
font-family:var(--font-d); font-weight:400; font-size:12.5px;
letter-spacing:0.04em; color:var(--text-disabled); white-space:nowrap;
transition:color 260ms var(--patient); }
/* The end labels align to the rail's ends rather than centring on them.
Centring is fine for a digit, but "Lieber frisch" is 78px wide and half of
it hung off the page. Aligning the outer edges also reads more precisely:
the scale is bounded by its labels. */
.kitchen-lab:first-child{ transform:none; }
.kitchen-lab:last-child{ transform:translateX(-100%); }
.kitchen-lab.is-on{ color:var(--text-primary); font-weight:500; }
/* STEPPER -- kept alongside the rail on portions only, as the precise and
unambiguous path (and the obvious keyboard one). Secondary to the rail by
size and weight: the rail is the instrument, these adjust it. */
.kitchen-step{ display:flex; align-items:center; gap:var(--s3); }
.kitchen-step-btn{ width:44px; height:44px; flex:none; border-radius:50%;
border:1px solid var(--hairline); background:none; color:var(--text-secondary);
font-size:18px; line-height:1; cursor:pointer; display:flex;
align-items:center; justify-content:center;
transition:border-color 200ms var(--patient), color 200ms var(--patient),
background-color 200ms var(--patient); }
.kitchen-step-btn:hover:not(:disabled){ color:var(--text-primary); border-color:var(--border-strong); }
.kitchen-step-btn:active:not(:disabled){ background:rgba(226,25,181,0.12);
border-color:var(--magenta); color:var(--text-primary); transition-duration:70ms; }
.kitchen-step-btn:disabled{ opacity:.28; cursor:default; }
.kitchen-hint{ font-size:13px; line-height:1.5; color:var(--text-secondary);
margin:0; min-height:1.5em; }
/* Reserved height, always present, so a confirmation or an error appearing
never moves the instrument below it. */
.kitchen-msg{ font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
font-weight:600; margin:var(--s3) 0 0; min-height:1.2em;
opacity:0; transition:opacity 400ms var(--patient); }
.kitchen-msg.is-ok{ opacity:1; color:var(--muted); }
.kitchen-msg.is-error{ opacity:1; color:var(--magenta); letter-spacing:0.04em;
text-transform:none; font-size:12.5px; font-weight:400; }
.essen-foot{ font-size:12.5px; line-height:1.6; color:var(--muted);
margin:var(--s7) 0 0; max-width:32rem; }
/* .bt-detail-back measures 43x73 here -- 1px under the touch minimum, and it
wraps because the icon and label are inline in a narrow column. Scoped to
this screen rather than corrected on the shared class: .bt-detail-back is
also used by Recipe Detail and the Guidelines, and this slice is not the
place to change how those look. */
.essen .bt-detail-back, .wt .bt-detail-back{ display:inline-flex; align-items:center; gap:6px;
min-height:44px; padding:0; margin-bottom:var(--s5); }
.essen .bt-detail-back svg, .wt .bt-detail-back svg{ flex:none; }
@media (max-width:640px){
/* The reserved confirmation slot plus a 48px rule gap left ~75px of dead
space under every instrument on a 390px screen. The instruments keep
their separation; the surplus goes. */
.kitchen-inst{ padding-bottom:var(--s5); margin-bottom:var(--s5); }
.essen-lede{ margin-bottom:var(--s7); }
.essen-title{ font-size:26px; }
.kitchen-read{ height:42px; }
.kitchen-read-v{ font-size:34px; line-height:42px; }
.kitchen-read.is-word .kitchen-read-v{ font-size:22px; }
}
@media (min-width:1024px){
/* Desktop gets breathing room, not a second column: three instruments in
two columns would read as a settings grid, which is the one thing this
surface must not be. */
.essen-title{ font-size:34px; }
.kitchen-inst{ padding-bottom:var(--s8); margin-bottom:var(--s8); }
}
/* ====================================================================== *
* P1 -- THREE-TIER ACCOUNT COMPOSITION
*
* The screen had nine equal eyebrow headings in identical type. Replacing
* them with nine differently styled headings would have solved nothing, so
* there are now exactly THREE announcements -- Du / Deine Küche / Dein Konto --
* and they are a different typographic species from everything beneath
* them: display face, sentence case, several steps larger. Everything that
* used to be a chapter is now either a field label inside a tier or lives
* behind the collapsed account area.
*
* Hierarchy comes from type, scale, proximity and whitespace. No cards, no
* tiles, no containers added anywhere.
* ====================================================================== */
/* VISUAL PASS -- THE TIER MARK IS THE QUIETEST TYPE ON THE SCREEN.
The three announcements were previously the brightest thing a member saw,
which is exactly what made the page read as a document with chapters. The
relationship is now inverted: the mark is a dim label in the margin, and
the member's own name, their own sentence and their own numbers carry the
light. Hierarchy from type and contrast, before any rule or container. */
/* A DIFFERENT SPECIES FROM EVERY OTHER LABEL. Uppercase letter-spaced type is
what every micro-label on this screen already is, so a tier set that way
would just be a bigger eyebrow. The tier is therefore the one heading in
mixed-case display type -- large enough to structure the page, dim enough
that it never outshines the member's own words. */
.acct-tier{ font-family:var(--font-d); font-weight:500;
font-size:clamp(26px, 5.8vw, 33px); text-transform:none;
line-height:1.06; letter-spacing:0.012em; color:var(--text-disabled);
margin:0 0 var(--s5); }
/* CLEANUP PASS -- the first tier keeps its level and loses its ink. Kicker,
tier and name were three introductions in a row; the name is the one that
says something. The heading stays in the accessibility tree so the outline
still has three tiers, and on desktop the rail column stays reserved so all
three tiers still share one axis. */
.acct-tier-quiet{ position:absolute; width:1px; height:1px; margin:-1px;
padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
white-space:nowrap; border:0; }
.acct-tier-block{ margin:var(--s9) 0 0; }
.acct-tier-block.acct-du{ margin-top:0; }
/* The eyebrows that survive are demoted so they cannot compete with the
member's own words -- but only to --muted. At --text-disabled a 10px
uppercase label measured about 3.2:1 on this ground, which is below AA for
text that small; quiet is a design decision, illegible is a defect. */
.acct-card .acct-lbl{ color:var(--muted); }
/* ---------------------------------------------------------------------- *
* THE TRACE -- the relationship made visible.
*
* One vertical line runs from the first adaptation down through the domains.
* The magenta markers sit ON it; each domain hangs off it by a plain hairline
* node. Cause and effect stop being two stacked sections and become one
* connected object, which is the whole claim of this tier. It is also the
* device that replaces the horizontal rules: the page is now organised by a
* single vertical thread and by space, not by equal horizontal bands.
* ---------------------------------------------------------------------- */
/* CLEANUP PASS -- FELT, NOT DIAGRAMMED. A continuous rule at hairline weight
read as a timeline: evenly present between every node, which is what a
process diagram looks like. The long line is now barely there -- an
atmospheric seam rather than a connector -- and the connection gathers
strength only AROUND the markers, where it means something. Same single
device, a fraction of the contrast, no extra marks. */
.acct-thread{ --thread-pad:34px; --thread-x:5px;
position:relative; padding-left:var(--thread-pad); }
/* ONE GROUND UNDER THE WHOLE REGION, and no rectangle anywhere in it. A very
faint wash, transparent at every edge and masked away top and bottom, so
what CRVD adapts, what it knows and the instruments themselves sit in one
volume of light instead of three unrelated places on black. Far below the
identity plate's strength -- the member is still the brightest thing on
the screen. */
.acct-thread::before{ content:''; position:absolute; z-index:0;
inset:-24px -24px -16px -16px; pointer-events:none;
background:
radial-gradient(66% 46% at 62% 74%, rgba(226,25,181,0.055) 0%, rgba(226,25,181,0) 72%),
radial-gradient(70% 40% at 34% 16%, rgba(214,198,226,0.026) 0%, rgba(214,198,226,0) 74%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); }
.acct-thread > *:not(.acct-thread-line){ position:relative; z-index:1; }
.acct-thread-line{ z-index:1; }
/* The editorial statements keep their measure; the instrument surfaces below
are free to use the width the tier actually has. */
.acct-receipt-list, .acct-nothing-yet{ max-width:34rem; }
.acct-domains{ max-width:38rem; }
.acct-thread-line{ position:absolute; left:var(--thread-x); top:9px; bottom:0;
width:1px; transform-origin:top center;
background:linear-gradient(180deg,
rgba(245,241,236,0.075) 0%, rgba(245,241,236,0.020) 20%,
rgba(245,241,236,0.013) 60%, transparent 94%); }
/* Receipt, no longer self-announcing: it sits directly under "Deine Küche",
which is what it is. The dot keeps its single meaning, and now also keeps
its place -- it is the point where the effect meets the trace. */
.acct-receipt-list{ list-style:none; margin:0 0 var(--s8); padding:0; }
.acct-receipt-list li{ position:relative; padding:0 0 var(--s5); }
.acct-receipt-list li:last-child{ padding-bottom:0; }
.adapt-effect{ display:block; font-family:var(--font-d); font-weight:400;
font-size:clamp(19px, 4vw, 23px); line-height:1.26; letter-spacing:0.004em;
color:var(--text-primary); max-width:17em; }
/* THE ORIGIN. Not a caption -- the way back to the answer that produced the
line above it. Same fact the screen already held, finally in the order the
relationship runs: you told CRVD something, so this changed. */
/* 44px of hit area without 44px of visual weight -- the same negative-margin
pattern .acct-edit and .btn-quiet already use on this screen. */
.adapt-src{ background:none; border:none; padding:0; margin:4px 0 -12px;
display:inline-flex; align-items:center; min-height:44px; cursor:pointer;
font-family:var(--font-c); font-size:10.5px; font-weight:600;
letter-spacing:0.185em; text-transform:uppercase; color:var(--muted);
transition:color 260ms var(--patient); }
.adapt-src-from{ font-weight:400; letter-spacing:0.12em; margin-right:.45em;
color:var(--text-disabled); }
.adapt-src::after{ content:''; display:inline-block; width:0; height:1px;
margin-left:0; background:var(--border-strong);
transition:width 320ms var(--patient), margin-left 320ms var(--patient); }
.adapt-src:hover, .adapt-src:focus-visible{ color:var(--text-secondary); }
.adapt-src:hover::after, .adapt-src:focus-visible::after{ width:22px; margin-left:10px; }
.acct-receipt-list li.is-linked .adapt-src{ color:var(--text-secondary); }
.acct-receipt-list li.is-recognised .adapt-effect{
animation:acctRecognise 1100ms var(--patient); }
.acct-nothing-yet{ font-size:15px; line-height:1.6; color:var(--text-secondary);
margin:0 0 var(--s8); max-width:30em; }
.acct-domains-lead{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
color:var(--muted); font-weight:600; margin:0 0 var(--s5); }
/* TIER 3 -- one quiet disclosure. Native : keyboard-operable and
announced by assistive technology without a line of JavaScript, and
without adding a sixth interaction model to a screen this refactor is
removing models from. */
/* VISUAL PASS -- the lid. The rule across the page is gone: a full-width
hairline is precisely what made this read as one more section instead of
a layer that is closed. What says "closed" now is a drawn mark that opens,
and the space above it. */
.acct-admin{ margin:var(--s9) 0 0; }
.acct-admin-summary{ list-style:none; cursor:pointer;
display:grid; grid-template-columns:1fr auto; align-items:center;
column-gap:var(--s5); min-height:44px; padding:0; }
.acct-admin-summary::-webkit-details-marker{ display:none; }
.acct-admin-summary:focus-visible{ outline:2px solid var(--magenta); outline-offset:6px; }
.acct-tier-admin{ display:block; grid-column:1; margin:0 0 5px;
transition:color 220ms var(--patient); }
.acct-admin-summary:hover .acct-tier-admin{ color:var(--text-secondary); }
.acct-admin-hint{ display:block; grid-column:1; font-size:14px; color:var(--muted); }
.acct-admin[open] .acct-admin-hint{ color:var(--text-disabled); }
/* A drawn plus that becomes a minus. Two 1px strokes, no glyph, no icon set:
the same restraint as every other mark on this screen. */
.acct-admin-mark{ grid-column:2; grid-row:1 / span 2; position:relative;
width:16px; height:16px; align-self:center; }
.acct-admin-mark::before, .acct-admin-mark::after{ content:''; position:absolute;
left:0; top:7.5px; width:16px; height:1px; background:var(--text-disabled);
transition:transform 380ms var(--patient), background 220ms var(--patient); }
.acct-admin-mark::after{ transform:rotate(90deg); }
.acct-admin[open] .acct-admin-mark::after{ transform:rotate(0deg); }
.acct-admin-summary:hover .acct-admin-mark::before,
.acct-admin-summary:hover .acct-admin-mark::after{ background:var(--text-secondary); }
/* Opens FROM a hidden state INTO its real resting state. The rule below adds
nothing that has to finish: if the animation never runs, the panel is
already visible at full height. That is deliberate -- this tier holds the
only route to signing out. */
.acct-admin-body{ margin-top:var(--s6); }
.acct-admin[open] .acct-admin-body{ animation:acctLidOpen 420ms var(--patient); }
@keyframes acctLidOpen{
from{ opacity:0; transform:translateY(-10px); }
to{ opacity:1; transform:none; } }
/* ---------------------------------------------------------------------- *
* THE ADMINISTRATIVE MODULES.
*
* Deliberately the ONE contained language on this screen. DU and CRVD & DU
* are open, editorial and spatial because they are the member; this layer is
* administration, and letting it be modular is what makes that difference
* legible instead of flattening everything into one texture.
*
* These are not cards. The surface is lifted about two percent off the
* canvas, has no border, no shadow and a single soft magenta breath in one
* corner -- the same light as the identity plate, at a fraction of its
* strength, so this layer still belongs to the same product. Hierarchy
* inside a module comes from type and space; the response lives on the rows.
* ---------------------------------------------------------------------- */
.acct-mods{ display:grid; gap:var(--s4); }
.acct-mod{ position:relative; overflow:hidden;
border-radius:18px; padding:var(--s5) var(--s5) var(--s5);
background:
radial-gradient(120% 140% at 88% 0%, rgba(226,25,181,0.045) 0%, rgba(226,25,181,0) 58%),
rgba(245,241,236,0.022); }
.acct-mod-h{ font-family:var(--font-c); font-size:10px; font-weight:600;
letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
margin:0 0 var(--s4); }
.acct-mod-row{ margin:0; }
.acct-mod-row + .acct-mod-row{ margin-top:2px; }
/* 44px of hit area, and a real response: the row lights and steps forward. */
.acct-mod-row .btn-quiet{ display:inline-flex; align-items:center;
min-height:44px; margin:-9px 0; text-underline-offset:4px;
transition:color 220ms var(--patient), transform 220ms var(--patient); }
.acct-mod-row .btn-quiet:hover,
.acct-mod-row .btn-quiet:focus-visible{ color:var(--text-primary); transform:translateX(3px); }
.acct-mod-note{ font-size:13.5px; line-height:1.6; color:var(--text-secondary);
margin:var(--s3) 0 0; }
/* Read-only state inside a module: no rules, the pair is held by alignment. */
.acct-mod .account-row{ border-bottom:none; padding:5px 0; font-size:14.5px; }
.acct-mod .account-row .v{ color:var(--text-primary);
font-variant-numeric:tabular-nums; }
.acct-mod-sub{ margin-top:var(--s4); padding-top:var(--s4);
border-top:1px solid rgba(245,241,236,0.06); }
/* Reachable, never promoted. */
.acct-mod-quiet{ margin-top:var(--s4); }
.acct-mod-quiet .btn-quiet{ color:var(--text-disabled); }
.acct-mod-quiet .btn-quiet:hover,
.acct-mod-quiet .btn-quiet:focus-visible{ color:var(--action-destructive); }
@media (max-width:640px){
.acct-tier{ margin-bottom:var(--s4); }
.acct-tier-block{ margin-top:var(--s8); }
.acct-thread{ --thread-pad:26px; --thread-x:4px; }
.acct-admin{ margin-top:var(--s8); }
}
/* ---------------------------------------------------------------------- *
* DESKTOP -- CONTROLLED ASYMMETRY.
*
* The tier marks HANG in a left rail, right-aligned against a shared axis,
* and the content runs in its own measure beside them. That single move is
* what stops the desktop screen reading as a stack of centred sections: the
* eye gets a vertical axis to follow and the content sits off it, with the
* Signal weighting the far right of the identity plate.
*
* This is composition only -- it is NOT the P2 sticky architecture, which
* stays deliberately unimplemented. Nothing here scrolls independently.
* ---------------------------------------------------------------------- */
@media (min-width:1024px){
.acct-tier-block{ display:grid;
grid-template-columns:10.5rem minmax(0, 1fr); column-gap:var(--s7); }
.acct-tier-block > .acct-tier{ grid-column:1; text-align:right;
align-self:start; margin:0; padding-top:14px; }
.acct-tier-block > .acct-tier-body{ grid-column:2; min-width:0; }
.acct-du > .acct-tier{ padding-top:26px; }
.acct-admin-summary{ grid-template-columns:10.5rem minmax(0, 1fr) auto;
column-gap:var(--s7); align-items:start; }
.acct-tier-admin{ grid-column:1; grid-row:1 / span 2; text-align:right;
margin:0; padding-top:2px; }
.acct-admin-hint{ grid-column:2; grid-row:1; }
.acct-admin-mark{ grid-column:3; grid-row:1 / span 2; align-self:start; }
/* DESKTOP -- the two domains sit side by side at UNEQUAL widths, sized to
what they actually hold: three readings against one measurement. Not a
pair of matched cards, and never height-matched -- align-items:start
lets each surface end where its own content ends. */
.acct-domains{ max-width:none; display:grid;
grid-template-columns:1.42fr 0.78fr; column-gap:var(--s4);
align-items:start; }
.acct-domains-lead{ grid-column:1 / -1; }
.acct-thread [data-domain="essen"]{ grid-column:1; margin-bottom:0; }
/* The narrow surface stacks: name above measurement. Side by side inside
296px the name column fell to about 120px and threw its arrow onto a
line of its own. */
.acct-thread [data-domain="koerper"]{ grid-column:2;
margin-left:0; padding-left:var(--s5); margin-bottom:0;
border-radius:16px; grid-template-columns:1fr; }
.acct-thread [data-domain="koerper"] .kitchen-entry-text{ grid-column:1; grid-row:1; }
.acct-thread [data-domain="koerper"] .dom-readout{ grid-column:1; grid-row:2;
margin-top:var(--s4); align-items:flex-start; }
.acct-thread .kitchen-entry-name{ font-size:27px; }
/* The 48px column gap was costing the name the width its own arrow needs. */
.acct-thread .kitchen-entry{ column-gap:var(--s5); }
.dom-line{ grid-template-columns:auto clamp(80px, 10vw, 150px); }
.acct-admin-body{ margin-left:calc(10.5rem + var(--s7)); max-width:44rem; }
/* Two columns, asymmetric on purpose and never height-matched: Aktivität
carries the most content and gets the wider column; the modules simply
end where their content ends. align-items:start is what keeps this from
becoming a dashboard grid. */
.acct-mods{ grid-template-columns:1.15fr 0.85fr; align-items:start;
gap:var(--s4); }
}
/* ---------------------------------------------------------------------- *
* DOMAINS REGION (Slice 3). Two deeper-personalization domains is exactly
* where an Account screen turns into a settings list, so they are presented
* as ONE titled region -- "Was du CRVD beigebracht hast" -- rather than two
* rows that happen to sit together. The heading does the framing; each
* domain then states its own contents through its own instrument readout.
* ---------------------------------------------------------------------- */
.acct-domains{ margin:0; }
.acct-domains > .acct-lbl{ margin-bottom:var(--s4); }
.acct-domains .kitchen-entry:last-child{ margin-bottom:0; }
/* ---------------------------------------------------------------------- *
* THE TRACE, CONTINUED -- everything that hangs off the line.
*
* The marker sits ON the trace; the domains hang off it by a neutral node.
* That distinction is the semantics drawn rather than written: magenta only
* where CRVD is actively adapting, plain hairline everywhere else.
* ---------------------------------------------------------------------- */
.acct-thread .adapt-dot{ position:absolute;
left:calc(var(--thread-x) - 3px - var(--thread-pad)); top:9px;
width:7px; height:7px; margin-top:0;
box-shadow:0 0 10px 1px rgba(226,25,181,0.40); }
/* Where the connection is actually FELT: a short brightening of the seam
through each marker, fading out above and below it. Neutral, never
magenta -- the marker owns the only magenta on this axis. */
.acct-receipt-list li::before{ content:''; position:absolute;
left:calc(var(--thread-x) - var(--thread-pad)); top:-16px;
width:1px; height:56px; pointer-events:none;
background:linear-gradient(180deg, transparent 0%,
rgba(245,241,236,0.16) 42%, rgba(245,241,236,0.05) 74%, transparent 100%); }
/* ====================================================================== *
* THE PERSONALIZATION SURFACE -- the third spatial language on this screen.
*
* Three related languages, deliberately not one component repeated:
* DU light in a room. No edge anywhere, no surface at all.
* DEINE KÜCHE INSTRUMENT SURFACES. Lit from the side the rails sit on,
* anchored to the trace by one squared-off corner, and awake
* to being approached.
* DEIN KONTO compact modules. Even radius, even fill, static.
*
* What separates a Küche surface from an Account module: the light is
* DIRECTIONAL (it gathers where the instrument is, so the rails read as part
* of the surface rather than drawn on top of it), the shape is ASYMMETRIC
* (the corner facing the trace is nearly square -- the surface hangs off the
* seam), and the surface RESPONDS. An Account module does none of that,
* because administration is not personal and should not breathe.
*
* P3 NOTE: each surface is its own positioned, rounded, self-contained box
* with the domain's real values inside it. That makes it a usable ORIGIN for
* a later expand-into-detail transition -- the surface can grow into the
* detail screen rather than being replaced by it. Nothing here assumes that
* yet; it just does not stand in its way.
* ====================================================================== */
.acct-thread .kitchen-entry{ position:relative;
border-bottom:none; margin:0 0 var(--s5);
/* Bleeds LEFT so the surface's own content lands on exactly the same edge
as the editorial statements above it, while the box itself stops a few
pixels clear of the trace. The trace stays outside; the surface hangs
off it. */
margin-left:calc(10px - var(--thread-pad));
padding:var(--s5) var(--s5) var(--s5) calc(var(--thread-pad) - 10px);
border-radius:5px 22px 22px 22px;
background:
radial-gradient(72% 128% at 96% 46%, rgba(226,25,181,0.075) 0%, rgba(226,25,181,0) 66%),
linear-gradient(102deg, rgba(245,241,236,0.032) 0%, rgba(245,241,236,0.015) 52%,
rgba(245,241,236,0.006) 100%);
box-shadow:inset 0 1px 0 rgba(245,241,236,0.045);
transition:background 340ms var(--patient), box-shadow 340ms var(--patient),
transform 340ms var(--patient); }
.acct-thread .kitchen-entry:last-child{ margin-bottom:0; }
/* AWAKE. The light gathers, the edge catches a little more, and the surface
lifts by a single pixel -- calm, and unmistakably a response. */
.acct-thread .kitchen-entry:hover,
.acct-thread .kitchen-entry:focus-visible,
.acct-thread .kitchen-entry.is-linked{
transform:translateY(-1px);
background:
radial-gradient(76% 132% at 96% 46%, rgba(226,25,181,0.135) 0%, rgba(226,25,181,0) 68%),
linear-gradient(102deg, rgba(245,241,236,0.050) 0%, rgba(245,241,236,0.024) 52%,
rgba(245,241,236,0.010) 100%);
box-shadow:inset 0 1px 0 rgba(245,241,236,0.085),
0 14px 34px -22px rgba(226,25,181,0.55); }
.acct-thread .kitchen-entry:active{ transform:translateY(0); opacity:.92; }
/* KÖRPER stays subordinate: a quieter ground, less light, a tighter shape.
It is private personal context, not a second instrument panel. */
.acct-thread [data-domain="koerper"]{
border-radius:5px 16px 16px 16px;
background:
radial-gradient(64% 120% at 96% 50%, rgba(226,25,181,0.030) 0%, rgba(226,25,181,0) 66%),
linear-gradient(102deg, rgba(245,241,236,0.022) 0%, rgba(245,241,236,0.010) 60%,
rgba(245,241,236,0.004) 100%); }
.acct-thread [data-domain="koerper"]:hover,
.acct-thread [data-domain="koerper"]:focus-visible,
.acct-thread [data-domain="koerper"].is-linked{
background:
radial-gradient(68% 124% at 96% 50%, rgba(226,25,181,0.065) 0%, rgba(226,25,181,0) 68%),
linear-gradient(102deg, rgba(245,241,236,0.036) 0%, rgba(245,241,236,0.017) 60%,
rgba(245,241,236,0.007) 100%);
box-shadow:inset 0 1px 0 rgba(245,241,236,0.065),
0 12px 28px -22px rgba(226,25,181,0.34); }
/* ONE INSTRUMENT, NOT TEXT PLUS A GRAPHIC.
Each cooking answer now sits on the row of the rail that describes it,
sharing a baseline with it: "Für 4" and its blade are one reading. The
value is right-aligned against the rail so the pair reads as a single
object rather than as a label and a picture that happen to be near each
other. No headers, no legend, no box -- three readings. */
.dom-readout{ grid-column:2; grid-row:1 / span 2; display:flex;
flex-direction:column; gap:11px; align-items:stretch; }
.dom-line{ display:grid; grid-template-columns:auto clamp(72px, 17vw, 150px);
align-items:center; column-gap:var(--s4); }
.dom-val{ font-size:14px; line-height:1.2; color:var(--text-body);
text-align:right; white-space:nowrap;
transition:color 300ms var(--patient); }
.dom-val-open{ color:var(--text-disabled); }
.kitchen-entry:hover .dom-val, .kitchen-entry:focus-visible .dom-val,
.kitchen-entry.is-linked .dom-val{ color:var(--text-primary); }
.dom-line .kitchen-mini-row{ position:relative; height:13px; }
.dom-line .kitchen-mini-row::before{ content:''; position:absolute;
left:0; right:0; top:6px; height:1px; background:var(--hairline);
transition:background 300ms var(--patient); }
.dom-line .kitchen-mini-b{ height:13px; width:2px;
transition:left 420ms var(--patient), height 260ms var(--patient),
box-shadow 260ms var(--patient), top 260ms var(--patient); }
.kitchen-entry:hover .kitchen-mini-b,
.kitchen-entry:focus-visible .kitchen-mini-b,
.kitchen-entry.is-linked .kitchen-mini-b{
height:19px; top:-3px; box-shadow:0 0 11px 1px rgba(226,25,181,0.62); }
.kitchen-entry:hover .dom-line .kitchen-mini-row::before,
.kitchen-entry.is-linked .dom-line .kitchen-mini-row::before{
background:var(--border-strong); }
/* KÖRPER states itself in the same column, and states a fact rather than a
position. The overview rail was removed deliberately: one mark inside the
member's own recorded range is a movement story told by a picture, and
this surface answers "where do I stand", not "where am I heading". */
.dom-readout-single{ justify-content:center; align-items:flex-end; gap:4px; }
.dom-measure{ display:inline-flex; align-items:baseline; gap:5px;
font-family:var(--font-d); font-weight:500;
font-size:clamp(26px, 6vw, 34px); line-height:1;
color:var(--text-primary); font-variant-numeric:tabular-nums;
transition:color 300ms var(--patient); }
.dom-measure-meta{ font-size:13px; color:var(--text-secondary); }
/* The affordance lives on the name, not in a chevron column: a settings list
has chevrons, an editorial entry has a direction. */
.kitchen-entry-name{ display:block; }
.kitchen-entry-name::after{ content:'\2192'; display:inline-block;
margin-left:.42em; font-size:.68em; opacity:.28;
transition:opacity 260ms var(--patient), transform 260ms var(--patient); }
.kitchen-entry:hover .kitchen-entry-name::after,
.kitchen-entry:focus-visible .kitchen-entry-name::after,
.kitchen-entry.is-linked .kitchen-entry-name::after{
opacity:.85; transform:translateX(5px); }
.acct-thread .kitchen-entry-name{ font-size:clamp(24px, 5.2vw, 30px); }
.acct-thread .kitchen-entry-sub{ margin-top:9px; font-size:14px; }
.acct-thread .kitchen-entry:active{ opacity:.82; }
@media (max-width:640px){
/* MOBILE: the reading STACKS under the domain rather than squeezing into a
second column. Side by side, a 358px row left the name about 130px and
pushed its arrow onto a line of its own. Stacked, the name gets the full
measure and each reading gets a full-width rail -- which reads more like
an instrument panel here, not less. */
/* Stacked, the instrument sits in the LOWER half of the surface, so the
light moves with it -- the rails stay inside their own light rather than
next to it. */
/* The surface costs vertical room, so it gives some back: tighter padding
and a shorter gap before the domains keep the page close to where it was
before the surfaces existed. */
.acct-receipt-list{ margin-bottom:var(--s7); }
.acct-thread .kitchen-entry{ grid-template-columns:1fr; margin-bottom:var(--s5);
padding-top:var(--s4); padding-bottom:var(--s4);
background:
radial-gradient(84% 62% at 78% 82%, rgba(226,25,181,0.075) 0%, rgba(226,25,181,0) 70%),
linear-gradient(168deg, rgba(245,241,236,0.032) 0%, rgba(245,241,236,0.014) 58%,
rgba(245,241,236,0.006) 100%); }
.acct-thread .kitchen-entry:hover,
.acct-thread .kitchen-entry:focus-visible,
.acct-thread .kitchen-entry.is-linked{
background:
radial-gradient(88% 66% at 78% 82%, rgba(226,25,181,0.135) 0%, rgba(226,25,181,0) 72%),
linear-gradient(168deg, rgba(245,241,236,0.050) 0%, rgba(245,241,236,0.023) 58%,
rgba(245,241,236,0.010) 100%); }
.acct-thread [data-domain="koerper"]{
background:
radial-gradient(70% 56% at 74% 84%, rgba(226,25,181,0.030) 0%, rgba(226,25,181,0) 70%),
linear-gradient(168deg, rgba(245,241,236,0.022) 0%, rgba(245,241,236,0.010) 62%,
rgba(245,241,236,0.004) 100%); }
.acct-thread .kitchen-entry-text{ grid-column:1; grid-row:1; }
.acct-thread .kitchen-entry-name{ font-size:24px; }
.dom-readout{ grid-column:1; grid-row:2; margin-top:var(--s4); }
.dom-line{ grid-template-columns:7.6em 1fr; column-gap:var(--s4); }
.dom-val{ font-size:13.5px; text-align:left; }
.dom-readout-single{ align-items:flex-start; margin-top:var(--s3); }
}
/* ====================================================================== *
* THE MEASURE -- Weight (Slice 3).
*
* Same family as the calibrated rail, inverted. On the discrete rails the
* scale stands still and the blade travels, because eight answers fit on
* screen. Weight has 2 200 possible answers, so the relationship flips the
* way it does on a real instrument: THE INDEX IS FIXED AND THE TAPE MOVES
* UNDER IT. Same blade, same bloom, same trough, same drag and settle.
*
* The tape visibly runs past both edges of its window, which is the whole
* affordance -- nothing that continues beyond its frame reads as static.
* ====================================================================== */
.wt-measure{ margin:var(--s6) 0 var(--s7); max-width:34rem; }
/* Once measurements exist the hero number is already stated above, so the
instrument stops repeating it: the same control, in a recording role
rather than a display one. Shouting "77,9 kg" twice in a row read as a
bug, not as emphasis. */
.wt-readout{ display:flex; align-items:baseline; gap:8px; margin:0 0 var(--s4); }
.wt-value{ font-family:var(--font-d); font-weight:500; font-size:52px; line-height:1;
letter-spacing:0.01em; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.wt-unit{ font-family:var(--font-c); font-size:13px; font-weight:500; letter-spacing:0.16em;
text-transform:uppercase; color:var(--muted); }
/* The window is the instrument's aperture. Its edges fade the tape out so
the scale reads as continuing beyond the frame rather than being cut. */
.wt-window{ position:relative; height:76px; overflow:hidden; cursor:grab;
touch-action:pan-y; margin:0 0 var(--s5);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, black 11%, black 89%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0%, black 11%, black 89%, transparent 100%); }
.wt-window.is-held{ cursor:grabbing; }
.wt-tape{ position:absolute; top:0; left:0; height:76px; will-change:transform; }
.wt-mark{ position:absolute; top:30px; width:1px; height:9px; background:var(--hairline); }
.wt-mark.is-whole{ top:27px; height:12px; background:var(--text-disabled); }
.wt-mark.is-major{ top:22px; height:17px; background:var(--muted); }
.wt-num{ position:absolute; top:46px; transform:translateX(-50%);
font-family:var(--font-d); font-weight:400; font-size:12px; letter-spacing:0.04em;
color:var(--text-disabled); }
/* The index -- the same blade as the rails, standing still. */
.wt-index{ position:absolute; left:50%; top:14px; width:3px; height:34px; margin-left:-1.5px;
background:var(--magenta); border-radius:1.5px; pointer-events:none;
box-shadow:0 0 14px 2px rgba(226,25,181,0.55), 0 0 3px 0 rgba(226,25,181,0.9);
transition:height 180ms var(--patient), top 180ms var(--patient), box-shadow 180ms var(--patient); }
.wt-index::after{ content:''; position:absolute; left:50%; top:50%;
width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
background:radial-gradient(circle, rgba(226,25,181,0.26) 0%, rgba(226,25,181,0) 70%);
transition:transform 200ms var(--patient); }
.wt-window:hover .wt-index{ height:38px; top:12px; }
.wt-window.is-held .wt-index{ height:44px; top:9px;
box-shadow:0 0 20px 3px rgba(226,25,181,0.65), 0 0 4px 0 rgba(226,25,181,1);
transition-duration:90ms; }
.wt-window.is-held .wt-index::after{ transform:scale(1.5); }
/* DORMANT vs ENGAGED. With a record above it the instrument arrives as an
ACTION, not a display: its readout collapses to nothing so it cannot
repeat the authoritative value as a second headline. It is still fully
visible and fully draggable -- only the number defers. The moment the
member engages, the readout opens and takes prominence, because from then
on the draft is the number that matters. */
.wt-measure.is-action .wt-readout{ height:0; opacity:0; overflow:hidden;
margin:0; transition:height 280ms var(--patient), opacity 200ms var(--patient),
margin 280ms var(--patient); }
.wt-measure.is-action.is-engaged .wt-readout{ height:46px; opacity:1; margin:0 0 var(--s4); }
.wt-measure.is-action.is-engaged .wt-value{ color:var(--text-primary); }
/* PRECISION ENTRY. One calibrated trough holding the stepper, the number and
its unit -- the same recessed ground as the rail, so typing a value reads
as another way of driving the instrument rather than a form pasted below
it. The cannot legally contain a