/* style.editorial-2026.css — Editorial Redesign 2026 v1 * * Loads AFTER tokens.css and AFTER the existing 3 stylesheets in * style.min-fixed.css, style.premium-2026-fixed.css, style.upgrade-2026-fixed.css. * * This file maps the editorial-magazine prototype to the existing static-HTML * class system documented in CLAUDE.md (.site-header, .article-header, * .recipe-card, .rezeptkarte, .nutri-score, .prep-card, etc.) and adds new * editorial-only classes (.editorial-*). * * Where a class name already exists in the legacy stylesheets we increase * specificity by chaining a body-level [data-editorial] attribute. Add * to every page once you're ready to switch. */ /* ───────────────────────────────────────────────────────────── 1. GLOBAL TYPE & BODY ───────────────────────────────────────────────────────────── */ [data-editorial] body, body[data-editorial] { background: var(--color-cream); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-editorial] h1, [data-editorial] h2, [data-editorial] h3, [data-editorial] h4 { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 400; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; } /* italic accent helper — wrap the last word in for the "Heimat." trick */ [data-editorial] i, [data-editorial] em.accent { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380; color: var(--color-clay); } /* ─── eyebrows ─────────────────────────────────────────────── */ .editorial-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); } .editorial-eyebrow--clay { color: var(--color-clay); } .editorial-eyebrow--moss { color: var(--color-moss); } .editorial-eyebrow--gold { color: var(--color-gold-soft); } /* ─── containers ───────────────────────────────────────────── */ .editorial-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--pad-x); } .editorial-container--narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); } /* ─── section labels (numbered, rule + right link) ─────────── */ .editorial-section-label { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--color-ink); padding-top: 14px; margin-bottom: 32px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .editorial-section-label__n { color: var(--color-ink); } .editorial-section-label__t { color: var(--color-ink); } .editorial-section-label__r { margin-left: auto; color: var(--color-ink-dim); } .editorial-section-label__r:hover { color: var(--color-clay); } /* ─── buttons ──────────────────────────────────────────────── */ .editorial-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: var(--color-ink); color: var(--color-cream); border: 1px solid var(--color-ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; text-decoration: none; border-radius: 0; } .editorial-btn:hover { background: var(--color-clay); border-color: var(--color-clay); color: #fff; } .editorial-btn--ghost { background: transparent; color: var(--color-ink); } .editorial-btn--ghost:hover { background: var(--color-ink); color: var(--color-cream); } .editorial-btn--clay { background: var(--color-clay); border-color: var(--color-clay); color: #fff; } .editorial-btn--clay:hover { background: var(--color-clay-deep); border-color: var(--color-clay-deep); } /* ─── underline link animation ─────────────────────────────── */ .editorial-link-u { position: relative; display: inline-block; } .editorial-link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(1); transition: transform .35s; } .editorial-link-u:hover::after { transform: scaleX(0); transform-origin: right; } /* ─── focus ring ───────────────────────────────────────────── */ [data-editorial] :focus-visible { outline: 2px solid var(--color-clay); outline-offset: 3px; border-radius: 2px; } /* ─── stars ────────────────────────────────────────────────── */ .editorial-stars { display: inline-flex; gap: 1px; color: var(--color-clay); } .editorial-stars svg { display: block; } /* ───────────────────────────────────────────────────────────── 2. TOP-BAR (above the masthead) ───────────────────────────────────────────────────────────── */ .editorial-topbar { border-bottom: 1px solid var(--color-rule); padding: 10px 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-dim); background: var(--color-cream); } .editorial-topbar__inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .editorial-topbar__sep { opacity: .4; } .editorial-topbar__right { margin-left: auto; display: flex; gap: 16px; align-items: center; } .editorial-topbar a, .editorial-topbar button { color: inherit; background: transparent; border: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } /* ───────────────────────────────────────────────────────────── 3. MASTHEAD (the huge "RezepteKosmos" wordmark) ───────────────────────────────────────────────────────────── */ .editorial-masthead { background: var(--color-cream); } .editorial-masthead__inner { padding-top: 28px; padding-bottom: 20px; position: relative; } .editorial-masthead__row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); } .editorial-masthead__row--top { margin-bottom: 14px; } .editorial-masthead__row--bottom { margin-top: 14px; } .editorial-masthead__brand-row { text-align: center; } .editorial-brand { display: inline-block; font-family: var(--font-display); font-size: clamp(56px, 12.5vw, 176px); line-height: .85; letter-spacing: -.04em; font-variation-settings: "opsz" 144, "SOFT" 0, "wght" 360; color: var(--color-ink); text-decoration: none; } .editorial-brand i { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360; color: var(--color-clay); } /* ───────────────────────────────────────────────────────────── 4. PRIMARY NAV (restyle of existing .site-header nav) ───────────────────────────────────────────────────────────── */ [data-editorial] .site-header nav, .editorial-nav { border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); background: var(--color-cream); position: sticky; top: 0; z-index: 50; } .editorial-nav__inner { display: flex; align-items: stretch; justify-content: center; gap: 0; } .editorial-nav__link { padding: 16px 22px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; border-right: 1px solid var(--color-rule); transition: color .2s, background .2s; cursor: pointer; } .editorial-nav__link:last-child { border-right: none; } .editorial-nav__link:hover { background: var(--color-ink); color: var(--color-cream); } .editorial-nav__link.is-active { color: var(--color-clay); } .editorial-nav__search { margin-left: auto; background: transparent; border: none; border-left: 1px solid var(--color-rule); padding: 16px 22px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); cursor: pointer; } /* ───────────────────────────────────────────────────────────── 5. COVER HERO ───────────────────────────────────────────────────────────── */ .editorial-cover { position: relative; border-bottom: 1px solid var(--color-ink); background: var(--color-cream); } .editorial-cover__inner { padding-top: 32px; padding-bottom: 32px; } .editorial-cover__strip { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } .editorial-cover__photo { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--color-rule); } .editorial-cover__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.8s cubic-bezier(.2,.6,.2,1); } .editorial-cover__photo:hover img { transform: scale(1.03); } .editorial-cover__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,17,13,.55) 0%, rgba(20,17,13,.2) 35%, rgba(20,17,13,.4) 60%, rgba(20,17,13,.9) 100%); } .editorial-cover__title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 5vw, 80px); color: #faf6ee; } .editorial-cover__title, [data-editorial] .editorial-cover__title { font-family: var(--font-display); font-size: clamp(56px, 11vw, 184px); line-height: .85; letter-spacing: -.03em; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 360; text-shadow: 0 2px 1px rgba(0,0,0,.35), 0 8px 40px rgba(0,0,0,.45); margin: 0; color: #faf6ee !important; } .editorial-cover__title i { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360; color: var(--color-gold-soft); } .editorial-cover__sub { margin-top: 28px; max-width: 540px; font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: rgba(250,246,238,.85); } .editorial-cover__sub em { color: #fff; font-style: italic; } .editorial-cover__ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; } .editorial-cover__marginalia { position: absolute; top: clamp(20px, 4vw, 40px); right: clamp(20px, 4vw, 40px); text-align: right; color: rgba(250,246,238,.85); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; line-height: 1.7; } /* ───────────────────────────────────────────────────────────── 6. TRUST STRIP (4-column stats bar) ───────────────────────────────────────────────────────────── */ .editorial-trust { border-bottom: 1px solid var(--color-rule); background: var(--color-cream-2); } .editorial-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .editorial-trust__cell { padding: 32px 28px; border-right: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; } .editorial-trust__cell:last-child { border-right: none; } .editorial-trust__n { font-family: var(--font-display); font-size: 56px; line-height: .95; font-variation-settings: "opsz" 96, "wght" 380; color: var(--color-ink); } /* ───────────────────────────────────────────────────────────── 7. RECIPE CARDS (extends legacy .recipe-card) ───────────────────────────────────────────────────────────── */ [data-editorial] .recipe-card, .editorial-card { display: block; color: var(--color-ink); text-decoration: none; background: transparent; box-shadow: none; border: none; border-radius: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1); } [data-editorial] .recipe-card:hover, .editorial-card:hover { transform: translateY(-3px); } [data-editorial] .recipe-card img, .editorial-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 0; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); } [data-editorial] .recipe-card:hover img, .editorial-card:hover img { transform: scale(1.04); } [data-editorial] .recipe-card__body, .editorial-card__body { padding: 16px 0 0; } [data-editorial] .recipe-card__kicker, .editorial-card__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); margin-bottom: 8px; } [data-editorial] .recipe-card__title, .editorial-card__title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 30; margin: 0; } [data-editorial] .recipe-card__meta, .editorial-card__meta { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-dim); } /* Large editorial card variant */ .editorial-card--large img { aspect-ratio: 4/5; } .editorial-card--large .editorial-card__title { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; font-variation-settings: "opsz" 96, "wght" 400, "SOFT" 30; } /* List variant */ .editorial-card--list { display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-rule); } .editorial-card--list img { aspect-ratio: 1/1; } /* ───────────────────────────────────────────────────────────── 8. ARTICLE HEADER (single recipe + blog) ───────────────────────────────────────────────────────────── */ [data-editorial] .article-header { background: var(--color-cream); padding: 48px 0 32px; border-bottom: 1px solid var(--color-rule); } [data-editorial] .article-header .container, [data-editorial] .article-header .container--narrow { max-width: 900px; text-align: center; } [data-editorial] .breadcrumb { margin-bottom: 24px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-dim); } [data-editorial] .breadcrumb a { color: inherit; text-decoration: none; } [data-editorial] .breadcrumb__sep { margin: 0 10px; opacity: .4; } [data-editorial] .article-header h1 { font-family: var(--font-display); font-size: clamp(48px, 8vw, 120px); line-height: .96; letter-spacing: -.022em; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 380; margin: 0; } [data-editorial] .article-header h1 i { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380; color: var(--color-clay); } [data-editorial] .article-header__byline { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--color-ink-dim); } [data-editorial] .article-header__byline img, [data-editorial] .byline__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } [data-editorial] .article-header__byline strong { color: var(--color-ink); font-weight: 600; } [data-editorial] .article-header__rating { margin-top: 20px; } [data-editorial] .recipe-meta { margin-top: 36px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); padding: 20px 0; } [data-editorial] .recipe-meta__item { text-align: center; border-right: 1px solid var(--color-rule); padding: 0 8px; } [data-editorial] .recipe-meta__item:last-child { border-right: none; } [data-editorial] .recipe-meta__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); margin-bottom: 6px; display: block; } [data-editorial] .recipe-meta__value { font-family: var(--font-display); font-size: 24px; font-variation-settings: "opsz" 36, "wght" 400; display: block; } /* ───────────────────────────────────────────────────────────── 9. SHARE BAR ───────────────────────────────────────────────────────────── */ [data-editorial] .share-bar { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-rule); } [data-editorial] .share-bar__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); } [data-editorial] .share-bar__btns { display: flex; gap: 12px; } [data-editorial] .share-btn { width: 38px; height: 38px; background: transparent; border: 1px solid var(--color-rule-strong); border-radius: 0; cursor: pointer; font-size: 14px; transition: background .2s, color .2s; display: inline-flex; align-items: center; justify-content: center; } [data-editorial] .share-btn:hover { background: var(--color-ink); color: var(--color-cream); } /* ───────────────────────────────────────────────────────────── 10. ARTICLE BODY — DROP CAP, INTRO, LISTS ───────────────────────────────────────────────────────────── */ [data-editorial] .article-intro { margin-bottom: 64px; } [data-editorial] .article-intro p:first-of-type::first-letter, [data-editorial] .dropcap::first-letter { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500; font-size: 5.8em; line-height: .85; float: left; padding: 8px 12px 0 0; color: var(--color-clay); } [data-editorial] .article-intro p { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.55; font-variation-settings: "opsz" 24, "wght" 380; color: var(--color-ink-2); margin: 0 0 22px; } [data-editorial] .article-intro p + p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; font-variation-settings: normal; } /* numbered "why this recipe works" list */ [data-editorial] .editorial-numlist { list-style: none; padding: 0; margin: 0 0 64px; display: flex; flex-direction: column; } [data-editorial] .editorial-numlist li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); font-size: 16px; line-height: 1.65; color: var(--color-ink-2); } [data-editorial] .editorial-numlist li::before { content: attr(data-n); font-family: var(--font-display); font-size: 22px; color: var(--color-moss); font-variation-settings: "opsz" 36, "wght" 500; min-width: 40px; display: inline-block; } /* ───────────────────────────────────────────────────────────── 11. NUTRI-SCORE (refines the existing block — sections 5/25 of upgrade.css) ───────────────────────────────────────────────────────────── */ [data-editorial] .nutri-score { border: 1px solid var(--color-rule-strong); overflow: hidden; margin-bottom: 64px; display: grid; grid-template-columns: 180px 1fr; background: var(--color-paper); } [data-editorial] .nutri-score::before { display: none; } [data-editorial] .nutri-score__badge { background: var(--color-moss-deep); color: #faf6ee; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; grid-row: span 2; } [data-editorial] .nutri-score__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,246,238,.7); } [data-editorial] .nutri-score__letters { display: flex; gap: 2px; } [data-editorial] .nutri-score__letter { width: 12px; height: 6px; background: rgba(250,246,238,.3); color: transparent; font-size: 0; } [data-editorial] .nutri-score__letter--active { background: #faf6ee; } [data-editorial] .nutri-score__note { padding: 28px; margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-ink-2); } [data-editorial] #nutri-macros { grid-column: 2; grid-row: 2; padding: 0 28px 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } [data-editorial] #nutri-macros > * { background: var(--color-cream-2); padding: 14px 16px; border: 1px solid var(--color-rule); border-radius: 0; } [data-editorial] #nutri-macros .macro-value { font-family: var(--font-display); font-size: 22px; line-height: 1; font-variation-settings: "opsz" 36, "wght" 400; } [data-editorial] #nutri-macros .macro-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); margin-top: 4px; } /* ───────────────────────────────────────────────────────────── 12. REZEPTKARTE (recipe card with serving stepper + ingredients) ───────────────────────────────────────────────────────────── */ [data-editorial] .rezeptkarte { background: var(--color-paper); border: 1px solid var(--color-rule-strong); padding: 40px; margin-bottom: 64px; border-radius: 0; box-shadow: none; } [data-editorial] .rezeptkarte__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--color-rule); } [data-editorial] .rezeptkarte__title { font-family: var(--font-display); font-size: 30px; font-variation-settings: "opsz" 60, "wght" 400; margin: 0; } [data-editorial] .serving-calc { display: flex; align-items: center; gap: 12px; } [data-editorial] .serving-calc label, [data-editorial] .serving-calc span:not(.serving-calc__input) { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); } [data-editorial] .serving-calc__input, [data-editorial] input.serving-calc__input { font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 500; font-size: 18px; width: 56px; text-align: center; border: 1px solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); padding: 8px; -moz-appearance: textfield; } [data-editorial] .serving-calc__input::-webkit-outer-spin-button, [data-editorial] .serving-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } [data-editorial] .ingredients-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } [data-editorial] .ingredients-grid h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-clay); margin: 0 0 16px; } [data-editorial] .ingredients-grid ul { list-style: none; padding: 0; margin: 0; } [data-editorial] .ingredients-grid li { padding: 12px 0; border-bottom: 1px solid var(--color-rule); display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; } [data-editorial] .ingredients-grid li::after { content: ""; width: 18px; height: 18px; border: 1px solid var(--color-rule-strong); flex: 0 0 18px; align-self: flex-start; margin-top: 2px; } /* ───────────────────────────────────────────────────────────── 13. METHOD / PREP CARDS ───────────────────────────────────────────────────────────── */ [data-editorial] .prep-section { margin-bottom: 64px; } [data-editorial] .prep-section__heading { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-variation-settings: "opsz" 72, "wght" 400; margin: 0 0 32px; } [data-editorial] .prep-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } [data-editorial] .prep-card { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; padding: 20px; background: transparent; border: 1px solid var(--color-rule); border-radius: 0; cursor: pointer; transition: background .25s, opacity .25s; box-shadow: none; } [data-editorial] .prep-card.completed { background: var(--color-cream-2); opacity: .55; } [data-editorial] .prep-card__media { aspect-ratio: 1/1; overflow: hidden; background: var(--color-rule); } [data-editorial] .prep-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } [data-editorial] .prep-card__body { padding: 0; } [data-editorial] .prep-card__number { font-family: var(--font-display); font-size: 48px; line-height: .9; color: var(--color-clay); font-variation-settings: "opsz" 96, "wght" 380; position: static; background: transparent; border-radius: 0; width: auto; height: auto; padding: 0; } [data-editorial] .prep-card__title { font-family: var(--font-display); font-size: 24px; font-variation-settings: "opsz" 36, "wght" 400; margin: 0; display: inline-block; margin-left: 14px; } [data-editorial] .prep-card__text { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--color-ink-2); } /* ───────────────────────────────────────────────────────────── 14. TIPS / FAQ / PULL QUOTE ───────────────────────────────────────────────────────────── */ .editorial-tips { background: var(--color-ink); color: var(--color-cream); padding: 32px; margin-bottom: 64px; border-radius: 0; } .editorial-tips__title { font-family: var(--font-display); font-size: 30px; font-variation-settings: "opsz" 60, "wght" 400; color: var(--color-cream); margin: 0 0 22px; } .editorial-tips ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; } .editorial-tips li { display: flex; gap: 14px; font-size: 15px; line-height: 1.6; color: rgba(250,246,238,.85); } .editorial-tips li::before { content: "—"; color: var(--color-gold-soft); flex: 0 0 auto; } [data-editorial] .faq-item { border-bottom: 1px solid var(--color-rule); } [data-editorial] .faq-item__q { padding: 20px 0; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: 20px; font-variation-settings: "opsz" 36, "wght" 400; cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; } [data-editorial] .faq-item__toggle { font-family: var(--font-mono); font-size: 18px; color: var(--color-clay); } [data-editorial] .faq-item__a { padding: 0 0 22px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-ink-dim); max-width: 720px; } .editorial-pullquote { margin: 80px 0; padding: 40px 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); text-align: center; } .editorial-pullquote p { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; font-variation-settings: "opsz" 96, "SOFT" 80, "wght" 360; margin: 0; } .editorial-pullquote__mark { color: var(--color-clay); font-size: 1.3em; line-height: 0; vertical-align: -.2em; } /* ───────────────────────────────────────────────────────────── 15. SIDEBAR (recipe page right column) ───────────────────────────────────────────────────────────── */ [data-editorial] .recipe-sidebar { position: sticky; top: 80px; } [data-editorial] .sidebar-card { background: var(--color-paper); border: 1px solid var(--color-rule-strong); padding: 24px; margin-bottom: 28px; border-radius: 0; box-shadow: none; } [data-editorial] .sidebar-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-rule); } [data-editorial] .sidebar-row:last-child { border-bottom: none; } [data-editorial] .sidebar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); } [data-editorial] .sidebar-value { font-family: var(--font-display); font-size: 15px; font-variation-settings: "opsz" 24, "wght" 500; } [data-editorial] .sidebar-related { background: var(--color-cream-2); padding: 24px; border: 1px solid var(--color-rule); } [data-editorial] .sidebar-recipe { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; } [data-editorial] .sidebar-recipe img { width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover; } /* ───────────────────────────────────────────────────────────── 16. FOOTER (extends legacy .site-footer) ───────────────────────────────────────────────────────────── */ [data-editorial] .site-footer { background: var(--color-forest); color: #cfc6b1; margin-top: 80px; } [data-editorial] .site-footer .container { padding-top: 80px; padding-bottom: 40px; } [data-editorial] .site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 60px; align-items: start; } [data-editorial] .site-footer__brand { font-family: var(--font-display); font-size: 44px; line-height: .9; color: #faf6ee; font-variation-settings: "opsz" 96, "SOFT" 0, "wght" 380; } [data-editorial] .site-footer__brand i { color: var(--color-clay); font-style: italic; } [data-editorial] .site-footer__bottom { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(250,246,238,.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,246,238,.5); } /* ───────────────────────────────────────────────────────────── 17. ARCHIVE PAGE (rezepte/index.html) ───────────────────────────────────────────────────────────── */ [data-editorial] .rezepte-masthead { border-bottom: 1px solid var(--color-ink); padding: 60px 0 56px; background: var(--color-cream); } [data-editorial] .rezepte-masthead .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; } [data-editorial] .rezepte-masthead h1 { font-family: var(--font-display); font-size: clamp(72px, 11vw, 196px); letter-spacing: -.035em; line-height: .96; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 360; } [data-editorial] .rezepte-masthead h1 i { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360; color: var(--color-clay); } /* sticky filter bar */ [data-editorial] .editorial-filterbar { background: var(--color-cream-2); border-bottom: 1px solid var(--color-rule); position: sticky; top: 49px; /* matches the nav height: 16+16+17 ≈ 49 */ z-index: 40; } [data-editorial] .editorial-filterbar__inner { padding: 20px 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } [data-editorial] .editorial-filterbar input[type="text"], [data-editorial] .editorial-filterbar input[type="search"] { flex: 1 1 240px; min-width: 200px; border: 1px solid var(--color-rule-strong); background: var(--color-paper); padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-ink); outline: none; letter-spacing: .04em; border-radius: 0; } [data-editorial] .filter-btn, [data-editorial] .editorial-filterbar select { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule-strong); border-radius: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } [data-editorial] .filter-btn.is-active, [data-editorial] .editorial-filterbar select:not([data-default]) { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); } [data-editorial] .rezepte-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; column-gap: 28px; padding-top: 32px; padding-bottom: var(--pad-section); } [data-editorial] .rezepte-grid__featured { grid-column: 1 / span 2; grid-row: span 2; } [data-editorial] .rezepte-grid--list { display: block; } [data-editorial] .rezepte-grid--list .recipe-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-rule); } [data-editorial] .rezepte-grid--list .recipe-card img { aspect-ratio: 1/1; } /* ───────────────────────────────────────────────────────────── 18. READING PROGRESS BAR (top of recipe page) ───────────────────────────────────────────────────────────── */ [data-editorial] .reading-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: transparent; z-index: 60; pointer-events: none; } [data-editorial] .reading-progress__fill { height: 100%; background: var(--color-clay); width: 0%; transition: width .1s; } /* ───────────────────────────────────────────────────────────── 19. UTILITY OVERRIDES (kill legacy rounded corners + cards) ───────────────────────────────────────────────────────────── */ [data-editorial] .recipe-card, [data-editorial] .sidebar-card, [data-editorial] .rezeptkarte, [data-editorial] .prep-card, [data-editorial] .nutri-score, [data-editorial] .btn-primary, [data-editorial] .btn-outline, [data-editorial] .btn-small, [data-editorial] input, [data-editorial] button { border-radius: 0 !important; } /* ───────────────────────────────────────────────────────────── 20. RESPONSIVE — narrow viewports ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { [data-editorial] .editorial-cover__marginalia { display: none; } [data-editorial] .editorial-trust__grid { grid-template-columns: repeat(2, 1fr); } [data-editorial] .editorial-trust__cell:nth-child(2) { border-right: none; } [data-editorial] .editorial-trust__cell:nth-child(1), [data-editorial] .editorial-trust__cell:nth-child(2) { border-bottom: 1px solid var(--color-rule); } [data-editorial] .rezepte-grid { grid-template-columns: repeat(2, 1fr); } [data-editorial] .rezepte-grid__featured { grid-column: span 2; grid-row: auto; } [data-editorial] .ingredients-grid { grid-template-columns: 1fr; } [data-editorial] .nutri-score { grid-template-columns: 1fr; } [data-editorial] .nutri-score__badge { grid-row: auto; } [data-editorial] #nutri-macros { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, 1fr); } [data-editorial] .recipe-meta { grid-template-columns: repeat(2, 1fr); gap: 16px 0; } [data-editorial] .recipe-meta__item { border-right: none; } [data-editorial] .site-footer__grid { grid-template-columns: 1fr 1fr; } [data-editorial] .prep-card { grid-template-columns: 1fr; } [data-editorial] .editorial-tips ul { grid-template-columns: 1fr; } [data-editorial] .rezepte-masthead .container { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-editorial] .editorial-trust__grid { grid-template-columns: 1fr; } [data-editorial] .editorial-trust__cell { border-right: none; border-bottom: 1px solid var(--color-rule); } [data-editorial] .recipe-meta { grid-template-columns: 1fr; } [data-editorial] .recipe-meta__item { border-right: none; border-bottom: 1px solid var(--color-rule); padding-bottom: 12px; margin-bottom: 12px; } [data-editorial] .site-footer__grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────── 21. NAV CONSISTENCY — site-header + dropdowns share cream palette Added 2026-05-23 to fix white side-edges and white dropdowns reported on the home page. ───────────────────────────────────────────────────────────── */ [data-editorial] .site-header { background: var(--color-cream) !important; border-bottom: 1px solid var(--color-ink) !important; box-shadow: none !important; } /* mega-menu and simple-dropdown popouts: match editorial palette */ [data-editorial] .site-header .nav-dropdown { background: var(--color-cream) !important; border: 1px solid var(--color-ink) !important; border-radius: 0 !important; box-shadow: 0 30px 60px -20px rgba(20,17,13,.25) !important; color: var(--color-ink); } [data-editorial] .site-header .nav-dropdown .mega-link, [data-editorial] .site-header .nav-dropdown .simple-link { color: var(--color-ink); } [data-editorial] .site-header .nav-dropdown .mega-link:hover, [data-editorial] .site-header .nav-dropdown .simple-link:hover { background: var(--color-ink); color: var(--color-cream); } [data-editorial] .site-header .mega-col__label, [data-editorial] .site-header .simple-dropdown__label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--color-ink-dim); } /* mega-featured card inside the dropdown */ [data-editorial] .site-header .mega-featured { background: var(--color-cream-2); border: 1px solid var(--color-rule); border-radius: 0; } [data-editorial] .site-header .mega-featured__item { color: var(--color-ink); border-radius: 0; } [data-editorial] .site-header .mega-featured__item:hover { background: var(--color-paper); } /* search overlay backdrop: also cream */ [data-editorial] .search-overlay { background: rgba(250,246,238,.96) !important; } [data-editorial] .search-overlay__input { background: transparent !important; border-bottom: 1px solid var(--color-ink) !important; font-family: var(--font-display); color: var(--color-ink); } /* search overlay must sit ABOVE the sticky header (z-index:1000) and mobile drawer (z-index:1001) so the input is clickable/typeable */ .search-overlay { z-index: 1100; } /* live search results (JS-rendered into #search-suggestions / mobile container) */ .search-results { margin-top: 6px; } .search-suggestion { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--color-paper); color: var(--color-ink); text-decoration: none; font-size: 15px; } .search-suggestion:hover, .search-suggestion.is-active { background: rgba(240,90,40,.10); color: var(--color-clay); } .search-suggestion__type { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-fog); margin-left: 12px; flex: none; } .search-noresults { padding: 10px 14px; font-size: 14px; color: var(--color-fog); } [data-theme="dark"] .search-suggestion { border-bottom-color: #2a2a27; color: var(--color-cream); } [data-theme="dark"] .search-suggestion:hover, [data-theme="dark"] .search-suggestion.is-active { background: rgba(240,90,40,.18); color: var(--color-clay); } .mobile-search__results { margin-top: 6px; } /* mobile menu drawer */ [data-editorial] .mobile-menu__drawer { background: var(--color-cream) !important; border-left: 1px solid var(--color-ink); } [data-editorial] .mobile-nav__link, [data-editorial] .mobile-nav__trigger { color: var(--color-ink); } /* dark-mode overrides — when html[data-theme="dark"] is set, ink/cream are already inverted by tokens.css, so the rules above adapt automatically */ /* ───────────────────────────────────────────────────────────── 22. NON-RECIPE MASTHEADS — blog/index, tipps, ueber-uns, regionen, saison, newsletter, kontakt, legal pages Cream-centered editorial hero, replaces legacy dark gradient. ───────────────────────────────────────────────────────────── */ [data-editorial] .blog-masthead, [data-editorial] .page-masthead { background: var(--color-cream) !important; background-image: none !important; border-bottom: 1px solid var(--color-rule); padding: clamp(48px, 7vw, 110px) 0 clamp(40px, 5vw, 80px) !important; text-align: center; position: relative; overflow: visible !important; } [data-editorial] .blog-masthead::before, [data-editorial] .blog-masthead::after, [data-editorial] .page-masthead::before, [data-editorial] .page-masthead::after { display: none !important; } [data-editorial] .blog-masthead .container, [data-editorial] .page-masthead .container { max-width: 900px; } [data-editorial] .blog-masthead__content, [data-editorial] .page-masthead__content { text-align: center; margin: 0 auto; } [data-editorial] .blog-masthead__eyebrow, [data-editorial] .page-masthead__eyebrow { display: inline-block; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-clay) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; font-weight: 600; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-editorial] .blog-masthead__title, [data-editorial] .page-masthead__title { font-family: var(--font-display) !important; font-size: clamp(48px, 8vw, 120px) !important; line-height: .96 !important; letter-spacing: -.022em !important; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 380 !important; color: var(--color-ink) !important; margin: 0 0 24px 0 !important; text-shadow: none !important; } [data-editorial] .blog-masthead__title i, [data-editorial] .page-masthead__title i { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380; color: var(--color-clay); } [data-editorial] .blog-masthead__sub, [data-editorial] .page-masthead__sub { font-family: var(--font-body) !important; font-size: 17px !important; line-height: 1.6 !important; color: var(--color-ink-dim) !important; max-width: 640px !important; margin: 0 auto 28px !important; text-shadow: none !important; } [data-editorial] .page-masthead__pills, [data-editorial] .blog-masthead__pills, [data-editorial] .rezepte-cats { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0 !important; margin-top: 32px; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); padding: 0; background: var(--color-cream); } [data-editorial] .page-masthead__pill, [data-editorial] .blog-masthead__pill, [data-editorial] .rezepte-cat { font-family: var(--font-mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding: 16px 22px !important; background: transparent !important; border: none !important; border-right: 1px solid var(--color-rule) !important; border-radius: 0 !important; color: var(--color-ink) !important; text-decoration: none; transition: background .2s, color .2s; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-editorial] .page-masthead__pill:last-child, [data-editorial] .blog-masthead__pill:last-child, [data-editorial] .rezepte-cat:last-child { border-right: none !important; } [data-editorial] .page-masthead__pill:hover, [data-editorial] .blog-masthead__pill:hover, [data-editorial] .rezepte-cat:hover { background: var(--color-ink) !important; color: var(--color-cream) !important; } [data-editorial] .page-masthead__pill--active, [data-editorial] .blog-masthead__pill--active, [data-editorial] .rezepte-cat--active { background: var(--color-ink) !important; color: var(--color-cream) !important; } [data-editorial] .page-masthead__stats, [data-editorial] .blog-masthead__stats { display: flex !important; justify-content: center; gap: 0 !important; margin: 32px auto 0 !important; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: 18px 0 !important; max-width: 720px; } [data-editorial] .page-masthead__stat, [data-editorial] .blog-masthead__stat { flex: 1; border-right: 1px solid var(--color-rule); padding: 0 20px; } [data-editorial] .page-masthead__stat:last-child, [data-editorial] .blog-masthead__stat:last-child { border-right: none; } [data-editorial] .page-masthead__stat-n, [data-editorial] .blog-masthead__stat-n { display: block; font-family: var(--font-display) !important; font-size: 36px !important; line-height: 1 !important; color: var(--color-ink) !important; font-variation-settings: "opsz" 96, "wght" 400; } [data-editorial] .page-masthead__stat-l, [data-editorial] .blog-masthead__stat-l { display: block; font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-ink-dim) !important; margin-top: 6px; } /* ───────────────────────────────────────────────────────────── 23. BLOG INDEX CARDS — editorial card pattern ───────────────────────────────────────────────────────────── */ [data-editorial] .blog-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 44px !important; padding: clamp(48px, 6vw, 80px) 0 !important; } @media (max-width: 900px) { [data-editorial] .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; } } @media (max-width: 600px) { [data-editorial] .blog-grid { grid-template-columns: 1fr !important; } } [data-editorial] .blog-card { background: var(--color-paper) !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--color-rule); transition: opacity .2s !important; display: flex !important; flex-direction: column !important; overflow: hidden; text-decoration: none; color: inherit; } [data-editorial] .blog-card:hover { opacity: .82; transform: none !important; box-shadow: none !important; } [data-editorial] .blog-card .blog-card__image-wrap, [data-editorial] .blog-card .recipe-card__image-wrap { border-radius: 0 !important; aspect-ratio: 4/3; overflow: hidden; background: var(--color-rule); } [data-editorial] .blog-card img { width: 100% !important; height: 100% !important; object-fit: cover; } [data-editorial] .blog-card .blog-card__body, [data-editorial] .blog-card .recipe-card__body { padding: 22px 4px 28px !important; flex: 1; display: flex; flex-direction: column; } [data-editorial] .blog-card .blog-card__eyebrow, [data-editorial] .blog-card .recipe-tag { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-clay) !important; background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 10px !important; font-weight: 600; } [data-editorial] .blog-card .blog-card__title, [data-editorial] .blog-card .recipe-card__title { font-family: var(--font-display) !important; font-size: 26px !important; line-height: 1.18 !important; margin: 0 0 12px !important; color: var(--color-ink) !important; font-variation-settings: "opsz" 48, "wght" 400; } [data-editorial] .blog-card .blog-card__title a, [data-editorial] .blog-card .recipe-card__title a { color: inherit; text-decoration: none; } [data-editorial] .blog-card .blog-card__excerpt, [data-editorial] .blog-card .recipe-card__excerpt { font-size: 15px !important; line-height: 1.6 !important; color: var(--color-ink-dim) !important; margin: 0 0 14px !important; } [data-editorial] .blog-card .blog-card__meta { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .06em !important; color: var(--color-ink-dim) !important; margin-top: auto; } /* ───────────────────────────────────────────────────────────── 24. CONTENT SECTIONS — h2/h3 typography for tipps + ueber-uns ───────────────────────────────────────────────────────────── */ [data-editorial] .section__title, [data-editorial] section .section__title { font-family: var(--font-display) !important; font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 380 !important; color: var(--color-ink) !important; letter-spacing: -.01em !important; } [data-editorial] section h3 { font-family: var(--font-display); font-variation-settings: "opsz" 48, "wght" 500; color: var(--color-ink); } /* tipps page section dividers: editorial border-top */ [data-editorial] section[id="retten"] h2, [data-editorial] section[id="teig"] h2, [data-editorial] section[id="fleisch"] h2, [data-editorial] section[id="sossen"] h2, [data-editorial] section[id="beilagen"] h2, [data-editorial] section[id="meal-prep"] h2, [data-editorial] section[id="aufbewahrung"] h2 { border-bottom: 1px solid var(--color-ink) !important; font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px) !important; font-variation-settings: "opsz" 96, "wght" 400; padding-bottom: 14px !important; margin-bottom: 32px !important; color: var(--color-ink) !important; } [data-editorial] .section--paper { background: var(--color-paper) !important; } [data-editorial] .section { padding: clamp(48px, 6vw, 96px) 0 !important; } /* ───────────────────────────────────────────────────────────── 25. SAISON PAGE — seasonal calendar grid + cards Editorial card pattern, no rounded corners, hairline borders, Fraunces month labels, mono produce items. ───────────────────────────────────────────────────────────── */ [data-editorial] .season-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important; border-top: 1px solid var(--color-rule-strong) !important; border-left: 1px solid var(--color-rule-strong) !important; background: var(--color-rule-strong); margin-top: clamp(24px, 3vw, 48px); } @media (max-width: 900px) { [data-editorial] .season-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { [data-editorial] .season-grid { grid-template-columns: 1fr !important; } } [data-editorial] .season-card { background: var(--color-cream) !important; border: none !important; border-right: 1px solid var(--color-rule-strong) !important; border-bottom: 1px solid var(--color-rule-strong) !important; border-radius: 0 !important; padding: clamp(20px, 2vw, 32px) !important; box-shadow: none !important; cursor: default !important; transition: background .2s !important; } [data-editorial] .season-card:hover { background: var(--color-paper) !important; border-color: var(--color-rule-strong) !important; box-shadow: none !important; transform: none !important; } [data-editorial] .season-card--active { background: var(--color-paper) !important; border-color: var(--color-rule-strong) !important; box-shadow: inset 4px 0 0 var(--color-clay) !important; } [data-editorial] .season-card__month { font-family: var(--font-display) !important; font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 380 !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 400 !important; line-height: 1 !important; color: var(--color-ink) !important; letter-spacing: -.01em !important; margin-bottom: 18px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--color-ink) !important; } [data-editorial] .season-card--active .season-card__month { color: var(--color-clay) !important; border-bottom-color: var(--color-clay) !important; } [data-editorial] .season-card__items { display: flex !important; flex-direction: column !important; gap: 8px !important; } [data-editorial] .season-card__item { font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: .04em !important; color: var(--color-ink-2) !important; padding: 6px 0 !important; border-bottom: 1px dashed var(--color-rule) !important; cursor: pointer; transition: color .15s, padding-left .15s; } [data-editorial] .season-card__item:last-child { border-bottom: none !important; } [data-editorial] .season-card__item:hover { color: var(--color-clay) !important; padding-left: 6px; } /* small "Hochsaison" indicator dot if used inline in produce labels */ [data-editorial] .season-card__item[data-link] { color: var(--color-bark) !important; font-weight: 500; } /* "Jetzt im Mai Saison" highlight block on saison home (above grid) */ [data-editorial] .season-now { background: var(--color-cream-2) !important; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); padding: clamp(40px, 5vw, 80px) 0 !important; } [data-editorial] .season-now__title { font-family: var(--font-display) !important; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 380 !important; color: var(--color-ink) !important; } [data-editorial] .season-now__title em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380; color: var(--color-clay); } [data-editorial] .season-now__chip { background: var(--color-cream) !important; border: 1px solid var(--color-rule-strong) !important; border-radius: 0 !important; padding: 14px 18px !important; display: flex !important; align-items: center; gap: 12px; text-decoration: none; transition: background .15s !important; box-shadow: none !important; } [data-editorial] .season-now__chip:hover { background: var(--color-paper) !important; transform: none !important; box-shadow: none !important; } [data-editorial] .season-now__name { font-family: var(--font-display) !important; font-size: 18px !important; color: var(--color-ink) !important; font-variation-settings: "opsz" 36, "wght" 400; } [data-editorial] .season-now__sub { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-moss) !important; } /* sitemap.html — make link-section headings editorial typography */ [data-editorial] main > .container > div > div > h2 { font-family: var(--font-display) !important; font-variation-settings: "opsz" 48, "wght" 400 !important; font-size: 22px !important; border-bottom: 1px solid var(--color-ink) !important; padding-bottom: 12px !important; margin-bottom: 18px !important; color: var(--color-ink) !important; } [data-editorial] main > .container > div > div > ul > li > a { font-family: var(--font-body); font-size: 15px; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; } [data-editorial] main > .container > div > div > ul > li > a:hover { color: var(--color-clay); border-bottom-color: var(--color-clay); } /* ───────────────────────────────────────────────────────────── 26. RECIPE ARTICLE-HEADER OVERRIDE (defeats legacy !important) The legacy style.upgrade-2026-fixed.css forces .article-header into a dark-green masthead via !important. Restate the editorial centered-cream version with matching !important so it wins. ───────────────────────────────────────────────────────────── */ [data-editorial] .article-header, html[data-editorial] .article-header, body[data-editorial] .article-header { background: var(--color-cream) !important; padding: clamp(48px, 6vw, 96px) 0 clamp(28px, 4vw, 56px) !important; border-bottom: 1px solid var(--color-rule) !important; border-top: none !important; overflow: visible !important; position: relative !important; } /* kill the dark gradient/blur overlays from legacy */ [data-editorial] .article-header::before, [data-editorial] .article-header::after { display: none !important; content: none !important; } [data-editorial] .article-header .container, [data-editorial] .article-header .container--narrow { max-width: 900px !important; text-align: center !important; position: relative; z-index: 1; } [data-editorial] .article-header h1 { font-family: var(--font-display) !important; font-size: clamp(40px, 7vw, 96px) !important; line-height: .98 !important; letter-spacing: -.022em !important; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 380 !important; color: var(--color-ink) !important; text-shadow: none !important; margin: 0 0 20px 0 !important; } [data-editorial] .article-header h1 i { font-style: italic !important; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 380 !important; color: var(--color-clay) !important; } [data-editorial] .article-header__byline, [data-editorial] .article-header .article-header__byline { margin-top: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; color: var(--color-ink-dim) !important; } [data-editorial] .article-header__byline .byline__meta, [data-editorial] .article-header .article-header__byline .byline__meta { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .06em !important; color: var(--color-ink-dim) !important; } [data-editorial] .article-header__byline .byline__meta a, [data-editorial] .article-header__byline .byline__meta strong, [data-editorial] .article-header .article-header__byline .byline__meta a, [data-editorial] .article-header .article-header__byline .byline__meta strong { color: var(--color-ink) !important; font-weight: 600 !important; } [data-editorial] .article-header__byline .sep, [data-editorial] .article-header .sep { color: var(--color-ink-soft) !important; margin: 0 8px; } [data-editorial] .byline__avatar, [data-editorial] .article-header__byline img { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover !important; border: none !important; } [data-editorial] .trust-badge { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-clay) !important; background: transparent !important; border: 1px solid var(--color-rule-strong) !important; padding: 4px 10px !important; border-radius: 0 !important; } [data-editorial] .article-header__rating { color: var(--color-clay) !important; margin-top: 16px !important; font-family: var(--font-mono) !important; font-size: 13px !important; letter-spacing: .04em !important; } [data-editorial] .article-header__rating span[style*="color:var(--color-fog)"] { color: var(--color-ink-dim) !important; } /* recipe-meta strip: hairline ink borders, no glassmorphism */ [data-editorial] .article-header .recipe-meta { margin: 36px auto 0 !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; border-top: 1px solid var(--color-ink) !important; border-bottom: 1px solid var(--color-ink) !important; padding: 20px 0 !important; background: transparent !important; max-width: 760px; } [data-editorial] .article-header .recipe-meta__item { background: transparent !important; border: none !important; border-right: 1px solid var(--color-rule) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 8px !important; text-align: center !important; } [data-editorial] .article-header .recipe-meta__item:last-child { border-right: none !important; } [data-editorial] .article-header .recipe-meta__label { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-ink-dim) !important; margin-bottom: 4px !important; } [data-editorial] .article-header .recipe-meta__value { font-family: var(--font-display) !important; font-size: 22px !important; font-variation-settings: "opsz" 36, "wght" 400 !important; color: var(--color-ink) !important; } /* "Direkt zum Rezept ↓" CTA */ [data-editorial] .article-header .btn-primary { margin-top: 28px !important; background: var(--color-clay) !important; color: var(--color-cream) !important; border-radius: 0 !important; padding: 14px 28px !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 600 !important; box-shadow: none !important; border: none !important; } [data-editorial] .article-header .btn-primary:hover { background: var(--color-clay-deep) !important; transform: none !important; } /* breadcrumb inside article-header */ [data-editorial] .article-header .breadcrumb { display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px !important; font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--color-ink-dim) !important; background: transparent !important; } [data-editorial] .article-header .breadcrumb a { color: var(--color-ink-dim) !important; text-decoration: none !important; } [data-editorial] .article-header .breadcrumb a:hover { color: var(--color-clay) !important; } [data-editorial] .article-header .breadcrumb__sep, [data-editorial] .article-header .breadcrumb__current { color: var(--color-ink-soft) !important; } /* editorial eyebrow above h1 (already styled by section 22 but ensure it sits cleanly inside article-header centered container) */ [data-editorial] .article-header .editorial-eyebrow, [data-editorial] .article-header .editorial-eyebrow--clay { display: inline-block !important; color: var(--color-clay) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 22px 0 !important; text-shadow: none !important; } /* ───────────────────────────────────────────────────────────── 27. SIDEBAR PILL TAGS — Auf-einen-Blick footer pills (Region · Kategorie · Diet/Feature) ───────────────────────────────────────────────────────────── */ [data-editorial] .sidebar-card .sidebar-tags { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-rule); } [data-editorial] .sidebar-card .sidebar-tag { display: inline-block; padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-clay); background: transparent; border: 1px solid var(--color-rule-strong); border-radius: 0; font-weight: 600; } /* sidebar-card h3 — match image: uppercase mono, ink-dim color */ [data-editorial] .sidebar-card h3 { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-ink-dim) !important; font-weight: 600 !important; margin-bottom: 18px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--color-rule); } /* sidebar-related h3 — same treatment */ [data-editorial] .sidebar-related h3 { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--color-moss) !important; font-weight: 600 !important; margin-bottom: 18px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--color-rule); } /* sidebar-recipe row: tighter editorial layout */ [data-editorial] .sidebar-related .sidebar-recipe { padding: 12px 0 !important; border-bottom: 1px solid var(--color-rule); align-items: center; } [data-editorial] .sidebar-related .sidebar-recipe:last-child { border-bottom: none; } [data-editorial] .sidebar-related .sidebar-recipe__title { font-family: var(--font-display); font-size: 15px; font-variation-settings: "opsz" 24, "wght" 500; color: var(--color-ink); line-height: 1.25; } [data-editorial] .sidebar-related .sidebar-recipe__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-dim); margin-top: 4px; } /* ───────────────────────────────────────────────────────────── 28. PREMIUM SHARE-BAR (2026-05-23) Cleaner editorial look with SVG icons, brand-colour hover, localStorage save, native Web Share API on mobile, print stylesheet. Activated by .share-bar--premium class. ───────────────────────────────────────────────────────────── */ [data-editorial] .share-bar.share-bar--premium { background: var(--color-cream-2) !important; border-top: 1px solid var(--color-rule) !important; border-bottom: 1px solid var(--color-rule) !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; padding: 0 !important; margin: clamp(20px, 2.5vw, 32px) 0 !important; position: relative !important; display: block !important; } [data-editorial] .share-bar--premium .share-bar__inner { display: flex !important; align-items: center; justify-content: space-between; gap: 18px; padding: 14px clamp(16px, 3vw, 24px); flex-wrap: wrap; max-width: var(--container-max); margin: 0 auto; } [data-editorial] .share-bar--premium .share-bar__label { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--color-ink-dim) !important; white-space: nowrap; } [data-editorial] .share-bar--premium .share-bar__btns { display: flex !important; flex-wrap: wrap; gap: 6px !important; align-items: stretch; margin: 0 !important; } [data-editorial] .share-bar--premium .share-btn { width: auto !important; height: auto !important; border-radius: 0 !important; background: var(--color-paper) !important; border: 1px solid var(--color-rule-strong) !important; box-shadow: none !important; display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 14px !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 500 !important; color: var(--color-ink) !important; cursor: pointer; text-decoration: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease !important; } [data-editorial] .share-bar--premium .share-btn svg { display: block !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; } [data-editorial] .share-bar--premium .share-btn__lbl { display: inline-block; line-height: 1; } [data-editorial] .share-bar--premium .share-btn:hover { transform: translateY(-1px) !important; border-color: var(--color-ink) !important; } [data-editorial] .share-bar--premium .share-btn:focus-visible { outline: 2px solid var(--color-clay); outline-offset: 2px; } /* Brand-coloured hover (per service) */ [data-editorial] .share-bar--premium .share-btn--mail:hover { background: var(--color-clay) !important; color: #fff !important; border-color: var(--color-clay) !important; } [data-editorial] .share-bar--premium .share-btn--pinterest:hover { background: #e60023 !important; color: #fff !important; border-color: #e60023 !important; } [data-editorial] .share-bar--premium .share-btn--whatsapp:hover { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; } [data-editorial] .share-bar--premium .share-btn--copy:hover { background: var(--color-ink) !important; color: var(--color-cream) !important; border-color: var(--color-ink) !important; } [data-editorial] .share-bar--premium .share-btn--print:hover { background: var(--color-bark) !important; color: #fff !important; border-color: var(--color-bark) !important; } [data-editorial] .share-bar--premium .share-btn--save:hover, [data-editorial] .share-bar--premium .share-btn--save.is-saved { background: #ffe5e5 !important; color: #c11d1d !important; border-color: #c11d1d !important; } [data-editorial] .share-bar--premium .share-btn--native { background: var(--color-ink) !important; color: var(--color-cream) !important; border-color: var(--color-ink) !important; } [data-editorial] .share-bar--premium .share-btn--native:hover { background: var(--color-clay) !important; border-color: var(--color-clay) !important; } /* Toast feedback (Link kopiert, Rezept gespeichert …) */ [data-editorial] .share-bar--premium .share-bar__toast { position: absolute !important; top: 100%; right: clamp(16px, 3vw, 24px); margin-top: 6px; background: var(--color-ink); color: var(--color-cream); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease; z-index: 10; white-space: nowrap; } [data-editorial] .share-bar--premium .share-bar__toast.is-visible { opacity: 1; transform: translateY(0); } /* mobile: drop the text labels, keep icons; let buttons fill width */ @media (max-width: 720px) { [data-editorial] .share-bar--premium .share-bar__inner { flex-direction: column; align-items: flex-start; gap: 12px; } [data-editorial] .share-bar--premium .share-btn__lbl { display: none; } [data-editorial] .share-bar--premium .share-btn { padding: 10px 14px !important; } [data-editorial] .share-bar--premium .share-btn--native .share-btn__lbl { display: inline-block; } [data-editorial] .share-bar--premium .share-btn--native { flex: 1; justify-content: center; } } /* PRINT STYLESHEET — strip everything but recipe card when user prints */ @media print { body { background: #fff !important; color: #111 !important; } .editorial-topbar, .editorial-masthead, .site-header, .site-footer, .cookie-banner, .share-bar, .ad-container, .ad-rhythm, .blog-ad-container, .recipe-sidebar, .editorial-comments-cta, .comments-cta, .section--related, .related-articles, .recipe-themen-strip, .reading-progress, .search-overlay, .mobile-menu, .jump-recipe, .editorial-author-block, #newsletter { display: none !important; } .recipe-main-col { width: 100% !important; max-width: 100% !important; } .recipe-two-col { grid-template-columns: 1fr !important; gap: 0 !important; } .article-header, .article-hero, .nutri-score, .ingredients-section, .rezeptkarte, .prep-section, .nutrition-table, .faq-section, .faq-item { page-break-inside: avoid; } a[href]::after { content: ""; } } /* ───────────────────────────────────────────────────────────── 29. PREP-CARD MOBILE IMPROVEMENTS (2026-05-24) Better aspect-ratio rendering of 1024×1024 step images on phones and tablets. Replaces the brittle fixed-height crop that caused the squished/stretched look users reported. ───────────────────────────────────────────────────────────── */ [data-editorial] .prep-card__media { background: var(--color-cream-2) !important; overflow: hidden !important; position: relative; } [data-editorial] .prep-card__media img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center !important; display: block !important; border-radius: 0 !important; } /* Tablet: keep 2-column prep-grid up to 900px wide */ @media (max-width: 900px) { [data-editorial] .prep-card__media img { aspect-ratio: 4 / 3 !important; } } /* Mobile: prep-grid collapses (legacy rule at 640px) → use the full available card width so the high-res 1024-px source gets to breathe. */ @media (max-width: 640px) { [data-editorial] .prep-card { border-radius: 0 !important; } [data-editorial] .prep-card__media img { aspect-ratio: 16 / 10 !important; min-height: clamp(180px, 56vw, 280px) !important; } [data-editorial] .prep-card__body { padding: 16px 18px !important; } [data-editorial] .prep-card__title { font-size: 1rem !important; font-family: var(--font-display) !important; color: var(--color-ink) !important; } [data-editorial] .prep-card__text { font-size: 0.9375rem !important; line-height: 1.65 !important; color: var(--color-ink-dim) !important; } } /* Step-number badge stays in top-left of the media container */ [data-editorial] .prep-card__media .prep-card__number, [data-editorial] .prep-card__number { position: absolute !important; top: 12px; left: 12px; width: 36px; height: 36px; background: var(--color-clay); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; box-shadow: 0 4px 12px rgba(217, 70, 30, 0.4); z-index: 2; } /* Print: prep-cards render in 1 column at full width */ @media print { .prep-card { break-inside: avoid; page-break-inside: avoid; } .prep-card__media img { aspect-ratio: 16/9 !important; max-height: 200px !important; } } /* ───────────────────────────────────────────────────────────── 30. RECIPE MAIN-COL + BELOW-FOLD MOBILE POLISH (2026-05-25) Covers: Themenwelten chip-strip (no CSS existed anywhere), science-block + recipe-section padding, nutrition-table overflow guard, and container tightening at 480 px. ───────────────────────────────────────────────────────────── */ /* ── Nutrition table: prevent overflow clip on phones ── */ [data-editorial] .recipe-main-col .nutrition-table, [data-editorial] .container--narrow .nutrition-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ══════════════════════════════════════════════════════════ THEMENWELTEN CHIP-STRIP (.recipe-themen-strip) Full base + responsive — no rules existed in any stylesheet ══════════════════════════════════════════════════════════ */ [data-editorial] .recipe-themen-strip { padding: 40px 24px 48px; border-top: 1px solid rgba(0, 0, 0, 0.06); } [data-editorial] .rts__head { margin-bottom: 24px; } [data-editorial] .rts__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-fog); margin-bottom: 8px; } [data-editorial] .rts__title { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 700; color: var(--color-ink); line-height: 1.2; margin: 0; } [data-editorial] .rts__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } [data-editorial] .rts__chip { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; text-decoration: none; background: var(--color-paper); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; } [data-editorial] .rts__chip:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.12); } [data-editorial] .rts__chip--moss { border-left: 3px solid var(--color-moss); } [data-editorial] .rts__chip--clay { border-left: 3px solid var(--color-clay); } [data-editorial] .rts__chip--bark { border-left: 3px solid var(--color-bark); } [data-editorial] .rts__chip-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; } [data-editorial] .rts__chip-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } [data-editorial] .rts__chip-txt strong { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-editorial] .rts__chip-txt span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ─── TABLET: ≤ 900px ─── */ @media (max-width: 900px) { [data-editorial] .rts__chips { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* ─── MOBILE: ≤ 640px ─── */ @media (max-width: 640px) { /* Tighten side padding for all sections inside main-col */ [data-editorial] .recipe-main-col .container--narrow { padding-left: 16px !important; padding-right: 16px !important; } /* Premium recipe sections (Geschichte, Fehler, Pairing, etc.) */ [data-editorial] .recipe-section { padding-left: 16px; padding-right: 16px; } /* Science-block */ [data-editorial] .science-block { margin: 32px 16px !important; padding: 20px 20px !important; } /* Maria tip pull-quote */ [data-editorial] .maria-tip { margin-left: 16px !important; margin-right: 16px !important; } /* Chip-strip */ [data-editorial] .recipe-themen-strip { padding: 32px 16px 40px; } [data-editorial] .rts__chips { grid-template-columns: repeat(2, 1fr); gap: 10px; } [data-editorial] .rts__chip { padding: 12px 14px; border-radius: 14px; gap: 10px; } [data-editorial] .rts__chip-txt strong { font-size: 0.875rem; } [data-editorial] .rts__chip-txt span { font-size: 0.625rem; } [data-editorial] .rts__title { font-size: 1.125rem; } /* Author card horizontal padding */ [data-editorial] .author-card { padding-left: 20px !important; padding-right: 20px !important; } /* Comments CTA */ [data-editorial] .comments-cta { padding-left: 16px !important; padding-right: 16px !important; } } /* ─── SMALL PHONE: ≤ 480px ─── */ @media (max-width: 480px) { /* Chip-strip: 1-col */ [data-editorial] .rts__chips { grid-template-columns: 1fr; gap: 8px; } [data-editorial] .rts__chip { padding: 12px 16px; border-radius: 12px; } /* Science-block tighter */ [data-editorial] .science-block { padding: 18px 16px !important; margin: 24px 0 !important; border-radius: 16px !important; } /* Nutri-macro tile: smaller text on tiny screens */ [data-editorial] #nutri-macros > span { font-size: 0.45rem !important; } [data-editorial] #nutri-macros > span strong { font-size: 1.125rem !important; } } /* Mobile footer menu override: two columns */ @media (max-width: 640px) { .footer-main__inner { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; } .footer-col--brand { grid-column: 1 / -1 !important; margin-bottom: 8px !important; } }