/* ========================================================== css/recipe-page.css Parchment-tokenisierter Stil fuer alle aus build_recipes_html.rb generierten HTML-Seiten (recipe-detail, handel, grundlagen, poudres, vorwort, quellen-index, book-about, rezepte-index). Layout-grundlage: body.parchment-page liefert die surface (siehe parchment.css). Diese datei stylet die .rz-* komponenten DARUEBER: sections, badges, tabellen, footnotes, books-switcher, nav etc. Klassennamen unveraendert, damit die Ruby-templates 1:1 weiter funktionieren - es aendert sich nur das visuelle theme. Vorher (SHARED_CSS inline in build_recipes_html.rb): - body#4a2e0a (dark brown) + color#eed4a2 (warm beige) - Crimson Text serif Jetzt: - parchment surface via parchment-page - var(--ink/--seal/--paper-*) tokens - EB Garamond via var(--serif-display/body) ========================================================== */ /* Body-Background kommt aus .parchment-surface-Klasse (parchment.css) die im Build via gesetzt wird. Hier nur die alte parchment.css-Pseudos killen damit kein doppeltes Rendern stattfindet. background-color als Longhand damit das parchment-surface bg-image nicht ueberschrieben wird. */ body.parchment-page { background-color: var(--paper); } body.parchment-page::before, body.parchment-page::after { display: none; } /* ── Buchmalerei-Dekostreifen am linken Rand ───────────────────────────── Illuminierte Manuskript-Border mit Goldsprenkeln aus /assets/decos/book-border-1.webp. Reaktiviert den ::before-Pseudo der oben fuer Recipe-Pages auf display:none gesetzt wurde. Positioniert mit rechter Kante direkt am linken Aussenrand des .rz-wrap (max-width: 900px, margin: 0 auto). Formel: wrap-left-edge = 50vw - 450px deco-left = wrap-left-edge - deco-width max(8px, ...) sorgt fuer minimalen Viewport-Abstand statt negativem left bei schmalen Browsern. Sichtbar erst ab 1240px Viewport, damit der Streifen Platz hat ohne den 900px-Wrap-Aussenrand zu beruehren. Standard: position:fixed (Streifen bleibt beim Scrollen stehen). Zum Testen "mitscrollend" --rz-deco-position: absolute setzen. :has(.rz-wrap) limitiert auf Recipe-Pages die ueber build_recipes_html.rb generiert werden (nicht rezepte-home, das hat kein .rz-wrap). */ :root { --rz-deco-position: absolute; /* 'absolute' scrollt mit, 'fixed' bleibt stehen */ --rz-deco-width: clamp(120px, 10.5vw, 188px); --rz-deco-scale: 88%; /* Skalierung des Borders innerhalb der Streifenbreite (kein stretching) */ --rz-deco-top: 96px; /* Start unter dem sticky-header (Header ~76px + Abstand) */ --rz-deco-img: url('/assets/decos/book-border-stack.webp'); /* Sprite: b2 + b3 vertikal gestackt */ --rz-deco-opacity: 0.85; --rz-deco-filter: saturate(0.45) blur(0.25px); /* Buch-Alterung: entsaettigt, minimal weich */ --rz-deco-gap: 8px; /* positiv = Abstand zum .rz-wrap; negativ = Ueberlapp ins Wrap-Bereich */ --rz-deco-tint: transparent; /* z.B. rgba(245,232,200,0.35) fuer parchment-mix (braucht Alpha > 0 fuer blend) */ --rz-deco-blend: normal; /* z.B. multiply, color-burn, darken, luminosity */ --rz-wrap-half: 450px; /* haelfte von .rz-wrap max-width (900px) */ } @media (min-width: 1200px) { body.parchment-page:has(.rz-wrap)::before { display: block; content: ''; position: var(--rz-deco-position); top: var(--rz-deco-top); bottom: 0; width: var(--rz-deco-width); left: max(8px, calc(50vw - var(--rz-wrap-half) - var(--rz-deco-width) - var(--rz-deco-gap))); background-image: var(--rz-deco-img); background-color: var(--rz-deco-tint); background-blend-mode: var(--rz-deco-blend); background-repeat: repeat-y; background-position: right top; background-size: var(--rz-deco-scale) auto; z-index: 0; pointer-events: none; opacity: var(--rz-deco-opacity); filter: var(--rz-deco-filter); /* parchment.css default-Properties fuer ::before explizit zuruecksetzen */ -webkit-mask: none; mask: none; box-shadow: none; } } /* Wide-Variante (.rz-wrap-wide max-width 1280px): half-width = 640px. Breakpoint proportional zur main-Variante (1200 + 380 delta). */ @media (min-width: 1580px) { body.parchment-page:has(.rz-wrap-wide)::before { --rz-wrap-half: 640px; } } /* Wrap: zentrierter content-block, sitzt ueber parchment surface. Etwas mehr top-padding weil site-header sticky drueber. */ .rz-wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; font-family: var(--serif-body); color: var(--ink); } .rz-wrap-wide { max-width: 1280px; } /* ── Breadcrumb-Nav (Fyndling > Rezepte > Buch) ── Sitzt direkt unter dem site-header. */ .rz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 18px 0; font-size: 0.95rem; color: var(--ink-soft); } .parchment-page .rz-nav a { color: var(--seal); text-decoration: none; border-bottom: none; } .parchment-page .rz-nav a:hover { text-decoration: underline; text-decoration-color: var(--seal); border-bottom: none; } /* Books-Switcher:

-dropdown im breadcrumb */ .rz-books-switcher { display: inline-block; position: relative; } .rz-books-switcher summary { cursor: pointer; list-style: none; color: var(--seal); user-select: none; border-bottom: none; } .rz-books-switcher summary::-webkit-details-marker { display: none; } .rz-books-switcher summary:hover, .rz-books-switcher[open] summary { text-decoration: underline; text-decoration-color: var(--seal); } .rz-books-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 4px 0; min-width: 280px; box-shadow: 0 4px 16px rgba(40, 20, 10, 0.18); z-index: 100; } .rz-books-menu a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; color: var(--ink); font-size: 0.92rem; text-decoration: none; border-bottom: none; line-height: 1.35; } .rz-books-menu a:hover { background: var(--paper-2); color: var(--seal); text-decoration: none; } .rz-books-menu .rz-books-icon { flex-shrink: 0; font-size: 1.1rem; } .rz-books-menu .rz-books-meta { display: block; font-size: 0.78rem; color: var(--ink-fade); margin-top: 2px; } .rz-books-menu .rz-books-active { opacity: 0.5; cursor: default; pointer-events: none; } .rz-books-sublist { border-top: 1px solid var(--rule); margin-top: 4px; padding: 4px 0 2px; max-height: 60vh; overflow-y: auto; } .rz-books-sublist .rz-books-cookbook { padding: 5px 14px 5px 28px; font-size: 0.86rem; } .rz-books-sublist .rz-books-cookbook strong { font-weight: 500; } .rz-books-sublist .rz-books-cookbook .rz-books-icon { font-size: 0.95rem; opacity: 0.75; } .rz-books-sublist .rz-books-cookbook .rz-books-meta { font-size: 0.72rem; } /* Globaler Action-Link "Rezeptsuche" rechts in der nav. Selector mit .parchment-page a... bumpt Specificity (0,2,1) damit parchment.css default-a-Border-Bottom (gleiche Spec) via Source-Order geschlagen wird. */ .parchment-page a.rz-nav-search { margin-left: 24px; color: var(--seal); text-decoration: none; font-weight: 600; border-bottom: none; display: inline-flex; align-items: center; gap: 0.3em; } .parchment-page a.rz-nav-search:hover { text-decoration: underline; text-decoration-color: var(--seal); border-bottom: none; } .rz-nav-search img.ui-icon { width: 1.4em; height: 1.4em; vertical-align: 0; margin: 0; } /* ── Typography ── H1 bleibt dark-sepia (das ist DER hauptakzent der seite, kein noetiger farb-fight mit seal-deep). H2/H3-section-headers bekommen seal-deep - rote akzente fuer visual rhythm im sonst monochromen sepia-text. */ .rz-wrap h1 { font-family: var(--serif-display); font-size: 2rem; font-weight: 600; margin: 8px 0 4px; color: var(--ink-2); line-height: 1.15; } .rz-wrap h2 { font-family: var(--serif-display); font-size: 1.3rem; font-weight: 600; margin: 0 0 12px; color: var(--seal-deep); letter-spacing: 0.005em; } .rz-wrap h3 { font-family: var(--serif-display); font-size: 1.05rem; font-weight: 600; margin: 14px 0 6px; color: var(--seal-deep); } .rz-sub { font-style: italic; color: var(--ink-soft); margin: 0 0 18px; } /* ── Section ── */ /* Sections sind jetzt "luft-blocks" statt karten - kein border, nur dezenter bg-tint + groessere vertical-margins fuer den block-rhythmus. Vorher wirkten gestapelte sections wie "box an box". */ .rz-section { background: transparent; border: none; border-radius: 0; padding: 0; margin: 22px 0; line-height: 1.6; } /* ── Handschriftliche Marginalie auf Recipe-Pages ───────────────────────── Etymologie/Quellen-Notiz in Caveat, leicht rotiert, schwebt rechts neben dem Section-Inhalt - der Text fliesst drumherum wie eine Manuskript- Randglosse. Mobile: stack ueber dem Text statt schweben. */ .hand-note--recipe { float: right; shape-outside: margin-box; font-family: 'Caveat', cursive; font-weight: 400; font-size: 1.05rem; color: var(--seal); line-height: 1.2; max-width: 180px; margin: 0.2em 0 0.8em 1.2em; transform: rotate(-2deg); pointer-events: none; } @media (max-width: 700px) { .hand-note--recipe { float: none; margin: 0.4em 0 0.8em; max-width: none; } } /* Marginalie direkt neben dem Scan-Bild. Die figure.rz-scan-figure-with-note enthaelt einen .rz-scan-row Flex-Container mit Bild links + Notiz rechts. */ .rz-scan-figure-with-note .rz-scan-row { display: flex; align-items: center; gap: 1.5em; } .rz-scan-figure-with-note .rz-scan-row > :first-child { flex: 1; min-width: 0; } .hand-note--scan { flex-shrink: 0; font-family: 'Caveat', cursive; font-weight: 400; font-size: 1.4rem; color: var(--seal); line-height: 1.15; max-width: 200px; transform: rotate(-4deg); pointer-events: none; } @media (max-width: 700px) { .rz-scan-figure-with-note .rz-scan-row { flex-direction: column; align-items: stretch; gap: 0.6em; } .hand-note--scan { max-width: none; text-align: right; } } /* hand_note links vom Scan-Bild - ab 1100px als Flex-Row neben der figure. Schmale Viewport: hand_note ueber dem Scan gestapelt (column). */ .rz-scan-has-hn .rz-scan-hn-layout { display: flex; flex-direction: column; align-items: center; gap: 0.6em; } .rz-scan-has-hn .rz-scan-hn-layout .hand-note--recipe { float: none; margin: 0; max-width: 200px; text-align: center; } .rz-scan-has-hn .rz-scan-hn-layout > figure { width: 100%; } @media (min-width: 1100px) { .rz-scan-has-hn .rz-scan-hn-layout { flex-direction: row; align-items: center; gap: 2.5em; } .rz-scan-has-hn .rz-scan-hn-layout .hand-note--recipe { flex-shrink: 0; max-width: 160px; text-align: left; transform: rotate(-3deg); } .rz-scan-has-hn .rz-scan-hn-layout > figure { flex: 1; min-width: 0; width: auto; } } /* Em im fliesstext einer section bekommt subtilen seal-akzent - bricht den monotonen sepia-fluss. Strong bleibt ink-2 fuer ruhigen lese-akzent. */ .rz-section em { color: var(--seal-deep); font-style: italic; } .rz-section a { color: var(--seal); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--seal) 40%, transparent); border-bottom: none; } .rz-section a:hover { text-decoration-color: var(--seal); color: var(--seal-deep); } /* Section-Text-Headings (in Transkript-Bloecken) - seal-deep accent wie die haupt-h2/h3, mit hairline-underline fuer textur. */ .rz-text-heading { font-family: var(--serif-display); color: var(--seal-deep); margin: 24px 0 10px; font-weight: 600; letter-spacing: 0.01em; } h3.rz-text-heading { font-size: 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--seal) 30%, transparent); padding-bottom: 4px; } h4.rz-text-heading { font-size: 0.95rem; color: var(--ink-soft); } .rz-text-list { margin: 10px 0 14px; padding-left: 1.8em; line-height: 1.55; } .rz-text-list li { margin-bottom: 6px; } /* ── Footnotes ── */ .rz-fn-ref { font-size: 0.7em; vertical-align: super; line-height: 0; } .rz-fn-ref a { text-decoration: none; color: var(--seal); padding: 0 1px; border-bottom: none; } .rz-fn-ref a:hover { text-decoration: underline; } .rz-footnotes { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.85em; color: var(--ink-soft); } .rz-footnotes h3 { font-family: var(--serif-display); font-size: 0.72rem; color: var(--ink-fade); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 600; } .rz-footnotes ol { padding-left: 2.6em; margin: 0; } .rz-footnotes li { margin-bottom: 8px; line-height: 1.55; padding-left: 0.3em; } .rz-footnotes li::marker { font-size: 0.85em; color: var(--ink-fade); } .rz-footnotes li:target { background: color-mix(in oklab, var(--seal) 12%, transparent); padding: 2px 6px; border-radius: 4px; } .rz-fn-back { text-decoration: none; color: var(--ink-fade); margin-left: 4px; border-bottom: none; } .rz-fn-back:hover { color: var(--seal); } .rz-fn-highlight { background: color-mix(in oklab, var(--seal) 12%, transparent); border-radius: 4px; transition: background 800ms ease; } /* ── Badges ── Container mit flex-layout: badges sitzen alle auf gleicher baseline, gap statt manuelle margins/spaces zwischen badges. */ .rz-badges { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 8px; margin-bottom: 12px; } .rz-badge { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--serif-body); font-size: 0.85rem; padding: 0 10px; border-radius: 4px; font-weight: 600; line-height: 1.4; /* Min-height damit dots-only diff-badge nicht kleiner ist als badges mit icons (icons sind ~1.3em tall, dots-text waere sonst ~1em). */ min-height: calc(1.7em + 10px); } /* Badge-Anchors: badge-course + badge-tag sind s die zu rezepte-home suche linken. parchment.css default-a (color: --seal) muss hier ueberschrieben werden. border-bottom wird in parchment.css via :not(.rz-badge) bereits ausgenommen, kein Override noetig. */ .parchment-page a.rz-badge, .parchment-page a.rz-badge:hover { text-decoration: none; cursor: pointer; } /* UI-icons in badges: kleiner als der globale .ui-icon-default (1.75em), aber gross genug fuer detail-erkennbarkeit. */ .rz-badge img.ui-icon { width: 1.7em; height: 1.7em; vertical-align: 0; margin: 0; } .badge-lager { background: color-mix(in oklab, var(--moss) 18%, transparent); border: 1px solid color-mix(in oklab, var(--moss) 45%, transparent); color: var(--moss); } .badge-diff { background: var(--paper-1); border: 1px solid var(--rule-strong); color: var(--ink-soft); } .badge-course { background: color-mix(in oklab, var(--seal-hi) 14%, transparent); border: 1px solid color-mix(in oklab, var(--seal-hi) 40%, transparent); color: var(--seal-deep); } /* Warn-style fuer interpretations-badge: warmes ocker-gold, klar als "achtung" lesbar ohne grell zu sein. */ .badge-interpret { background: color-mix(in oklab, var(--gold) 18%, var(--paper-1)); border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); color: color-mix(in oklab, var(--gold) 70%, var(--ink-2)); } /* Difficulty-dots: monospace fuer gleichmaessige punkt-spacing, kleiner + faded damit's nicht dominiert. */ .rz-diff-dots { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--ink-fade); letter-spacing: 0.05em; } /* ── Redaktionelle Anmerkung (editor's note) ── Vorher: .rz-section mit fast unsichtbarem bg/border-override = drei verschachtelte boxen wenn der note innerhalb einer section sitzt. Jetzt: links-randige aside, mehr "Randnotiz" als "Karte", spart visuelles gewicht. */ .rz-editors-note { margin: 22px 0; padding: 4px 16px 4px 18px; border-left: 3px solid color-mix(in oklab, var(--seal) 50%, transparent); background: color-mix(in oklab, white 10%, var(--paper-1)); color: var(--ink-soft); } .parchment-page .rz-editors-note p { font-style: italic; line-height: 1.6; } .parchment-page .rz-editors-note p strong { color: var(--ink-2); font-style: normal; } .parchment-page .rz-editors-note p:first-child img.ui-icon { /* Doc-icon vor dem "Redaktionelle Anmerkung:" prefix - etwas kleiner hier als der globale default, weil's im inline-text-fluss sitzt. */ width: 1.4em; height: 1.4em; vertical-align: -0.35em; margin-right: 0.35em; } /* Translation-comparisons nested innerhalb editor's note: kompakte liste, kein eigener box-frame mehr. */ .rz-translation-comparisons { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--rule); font-style: normal; } .rz-translation-comparisons > p { font-style: normal; } .parchment-page .rz-translation-comparisons ul { list-style: none; padding-left: 0; margin: 6px 0; } .parchment-page .rz-translation-comparisons li { margin-bottom: 10px; padding: 6px 12px; background: var(--paper-1); border-radius: 4px; font-style: normal; line-height: 1.5; } .rz-translation-comparisons-why { display: inline-block; margin-top: 3px; color: var(--ink-fade); font-size: 0.95em; } /* Lagerküche-Tipp als block-paragraph (im moderne-uebersetzung-section). Eigene klasse statt .badge-lager weil block-layout das inline-flex der badge nicht greifen laesst und das icon (vertical-align: -0.45em) nach oben rutscht. Hier: flex mit align-items: flex-start, icon haengt am text-anfang. */ .parchment-page .rz-lager-tipp { display: flex; align-items: flex-start; gap: 0.55em; margin: 12px 0; padding: 12px 16px; border-radius: 6px; background: color-mix(in oklab, var(--moss) 14%, var(--paper-1)); border: 1px solid color-mix(in oklab, var(--moss) 40%, transparent); color: var(--ink); line-height: 1.55; font-style: normal; } .parchment-page .rz-lager-tipp img.ui-icon { width: 1.6em; height: 1.6em; vertical-align: 0; margin: 0; flex-shrink: 0; margin-top: 0.05em; } .parchment-page .rz-lager-tipp strong { color: var(--moss); } .badge-tag { background: var(--paper-1); border: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; user-select: none; transition: filter 150ms ease, background 150ms ease; } .badge-tag:hover { filter: brightness(0.97); background: var(--paper-2); } .badge-tag:active { filter: brightness(0.92); } .badge-tag[data-tag="pasta"] { background: color-mix(in oklab, #d4a050 22%, var(--paper-1)); border-color: color-mix(in oklab, #d4a050 50%, transparent); } .badge-tag[data-tag="reis"] { background: color-mix(in oklab, #cfc498 22%, var(--paper-1)); border-color: color-mix(in oklab, #b8a86c 50%, transparent); } .badge-tag[data-tag="brei"] { background: color-mix(in oklab, #c4a07a 22%, var(--paper-1)); border-color: color-mix(in oklab, #a07c50 50%, transparent); } .badge-tag[data-tag="beilage"] { background: color-mix(in oklab, #b08eb8 22%, var(--paper-1)); border-color: color-mix(in oklab, #8a6c95 50%, transparent); } .badge-tag[data-tag="huelsenfruechte"] { background: color-mix(in oklab, #8aa874 22%, var(--paper-1)); border-color: color-mix(in oklab, #688a52 50%, transparent); } .badge-tag[data-tag="brot"] { background: color-mix(in oklab, #bc9070 22%, var(--paper-1)); border-color: color-mix(in oklab, #946640 50%, transparent); } .badge-tag[data-tag="vegetarisch"] { background: color-mix(in oklab, #88b070 26%, var(--paper-1)); border-color: color-mix(in oklab, #5a8848 55%, transparent); } .badge-tag[data-tag="fastenspeise"] { background: color-mix(in oklab, #80a0c0 22%, var(--paper-1)); border-color: color-mix(in oklab, #5878a8 50%, transparent); } .badge-tag[data-tag="vegan"] { background: color-mix(in oklab, var(--moss) 32%, var(--paper-1)); border-color: var(--moss); color: var(--moss); } /* ── Meta-line (course · time · serves) ── */ .rz-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; font-size: 0.92rem; color: var(--ink-soft); font-style: italic; } .rz-meta > span { display: inline-flex; align-items: center; gap: 0.35em; } .rz-meta img.ui-icon { width: 1.4em; height: 1.4em; vertical-align: 0; margin: 0; } /* ── Scan (Faksimile) ── */ .rz-scan img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule-strong); border-radius: 4px; margin: 8px 0; } .rz-scan figcaption { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; } .rz-scan figcaption a { color: var(--seal); text-decoration: underline; text-underline-offset: 2px; border-bottom: none; } /* Scan-frame: das gescannte manuskript ist selbst schon parchment- anmutung, ein zusaetzlicher textur-frame doppelt nur. Background- image weg, nur dezente kontrast-kante. */ .rz-scan-parchment { background-color: transparent; background-image: none; border: 1px solid var(--rule); border-radius: 4px; padding: 0; margin: 8px 0; } .rz-scan-parchment img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } .rz-scan-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; font-size: 0.85rem; color: var(--ink-soft); } .rz-scan-pager button { width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rz-scan-pager button:hover { color: var(--seal); } .rz-scan-pager button[disabled] { opacity: 0.22; cursor: default; } .rz-scan-pager button svg { width: 28px; height: 28px; display: block; fill: currentColor; } .rz-scan-caption-reset { color: inherit; text-decoration: none; cursor: pointer; text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: none; } .rz-scan-caption-reset:hover { text-decoration: underline; } /* Specificity-bump via .parchment-page-prefix damit parchment.css' .parchment-page p (font-size: inherit + font-style: normal + color --ink-2) den source-hinweis nicht zur normalen-text-groesse aufblaest. */ .parchment-page .rz-transcript-source { display: block; font-size: 0.78rem; color: var(--ink-fade); margin: 1em 0 0; padding-top: 0.5em; border-top: 1px solid var(--rule-soft); font-style: italic; line-height: 1.4; text-align: right; } /* Sprach-label in der transkription-h2: kleiner + italic damit verschachtelte klammern vermieden werden (label hat oft selbst schon klammern wie "Frühneuhochdeutsch (alemannisch-schwäbisch)"). */ .rz-transkription-lang { font-size: 0.78em; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-left: 0.3em; } /* ── Tasting-Notes (Redaktion hat das Rezept gekocht) ── */ .rz-tasting-notes { background: color-mix(in oklab, white 8%, var(--paper-1)); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 22px; margin: 24px 0; } .rz-tasting-notes h2 { margin-top: 0; color: var(--seal-deep); font-size: 1.1rem; } .rz-tasting-note { padding: 8px 0; } .rz-tasting-note + .rz-tasting-note { border-top: 1px dashed var(--rule-soft); margin-top: 14px; padding-top: 14px; } .rz-tasting-note header { font-size: 0.95rem; margin-bottom: 8px; color: var(--ink-2); } .rz-tn-marker { font-size: 1.15rem; margin-right: 4px; } .rz-tn-date { color: var(--ink-fade); font-size: 0.85em; margin-left: 6px; } .rz-tn-context { color: var(--ink-soft); margin: 4px 0 12px; font-size: 0.92rem; } .rz-tn-photo { margin: 12px 0; text-align: center; } .rz-tn-photo img { max-width: 100%; max-height: 520px; width: auto; height: auto; border-radius: 6px; box-shadow: 0 3px 12px rgba(40, 20, 10, 0.22); } .rz-tn-photo figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; font-style: italic; } /* ── Zutaten-Tabelle ── */ table.rz-zutaten { width: 100%; border-collapse: collapse; margin: 10px 0; } table.rz-zutaten th { text-align: left; font-family: var(--serif-display); font-size: 0.85rem; color: var(--ink-fade); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule); } table.rz-zutaten td { padding: 5px 8px 5px 0; vertical-align: top; font-size: 0.95rem; border-bottom: 1px solid var(--rule-soft); } table.rz-zutaten td:first-child { color: var(--ink-2); font-style: italic; } table.rz-zutaten td a { color: var(--seal); text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--seal) 50%, transparent); transition: border-color 140ms ease; } table.rz-zutaten td a:hover { border-bottom-color: var(--seal); } table.rz-zutaten td a[target="_blank"]::after { content: ""; display: inline-block; width: 1.6em; height: 1.6em; vertical-align: -0.5em; margin-left: 3px; background: url("/assets/icons/ui/link-extern.webp") center / contain no-repeat; opacity: 0.65; } /* Ext-link icon (Bildquelle / Transkription in rz-attribution-dl). KEIN inline-flex - das verschluckt die vertical-align der img und laesst sie hoch ueber der Baseline schweben. Plain inline + img mit vertical-align:middle. */ a.rz-ext-link { border-bottom: none !important; margin-left: 3px; opacity: 0.7; transition: opacity 140ms ease; } a.rz-ext-link:hover { opacity: 1; } .ui-icon-ext { width: 1em; height: 1em; vertical-align: middle; margin: 0; } /* ── Lesarten (Quellen-Varianten) ── */ .rz-lesarten-intro { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 12px; } .rz-lesart { border-left: 3px solid color-mix(in oklab, var(--seal) 50%, transparent); padding: 10px 14px; margin: 10px 0; background: color-mix(in oklab, var(--seal) 6%, var(--paper-1)); border-radius: 0 6px 6px 0; } .rz-lesart-term { margin: 0 0 4px; font-size: 0.95rem; } .rz-lesart-primary { margin: 2px 0; font-size: 0.92rem; } .rz-lesart-alt-label { margin: 6px 0 2px; font-size: 0.85rem; color: var(--ink-soft); } .rz-lesarten-alt { margin: 2px 0 4px 18px; padding: 0; font-size: 0.88rem; color: var(--ink-soft); } .rz-lesarten-alt li { margin: 2px 0; } /* ── Glossary (inline dt/dd) ── */ .rz-glossary dt { display: inline; font-weight: 600; color: var(--ink-2); } .rz-glossary dd { display: inline; margin: 0 0 0 6px; color: var(--ink); } .rz-glossary dd::after { content: ''; display: block; margin-bottom: 6px; } /* ── FAQ ── */ details.rz-faq { border-bottom: 1px solid var(--rule); padding: 8px 0; } details.rz-faq summary { cursor: pointer; font-weight: 600; font-family: var(--serif-display); color: var(--ink-2); list-style: none; padding: 2px 0; } details.rz-faq summary::-webkit-details-marker { display: none; } details.rz-faq summary::before { content: ''; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.45em; background: url('/assets/icons/ui/sort-down.webp') center/contain no-repeat; transform: rotate(-90deg); transition: transform 160ms ease; vertical-align: -0.08em; } details.rz-faq[open] summary::before { transform: rotate(0deg); } details.rz-faq p { margin: 8px 0 4px; color: var(--ink); line-height: 1.6; } /* ── CTA "Alle Rezepte" ── */ .rz-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 28px 0 20px; } /* Rote Wachssiegel-Optik analog .btn-primary aus parchment.css. Specificity-bump damit parchment.css' .parchment-page a default (border-bottom seal-35%) ueberschrieben wird. */ .parchment-page .rz-cta a { display: inline-block; background: var(--seal); border: 1px solid var(--seal-deep); padding: 10px 22px; border-radius: 8px; color: var(--paper); text-decoration: none; font-family: var(--serif-display); font-weight: 600; border-bottom: 1px solid var(--seal-deep); box-shadow: 0 2px 6px -2px rgba(125, 42, 34, 0.4); transition: background 140ms ease, border-color 140ms ease, transform 80ms ease; } .parchment-page .rz-cta a:hover { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--paper); } .parchment-page .rz-cta a:active { transform: translateY(1px); } /* ── Verwandte Rezepte (sichtbar in pre-rendered SEO + viewer) ── */ .rezepte-related { margin: 28px 0 8px; } .rezepte-related h4 { font-family: var(--serif-display); font-size: 0.85rem; color: var(--ink-fade); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; font-weight: 600; } .rezepte-related-group { margin: 0 0 14px; } .rezepte-related-group:last-child { margin-bottom: 0; } .rezepte-related-source { font-size: 0.92rem; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .rezepte-related-icon { font-size: 1.05em; } .rezepte-related-year { font-weight: 400; color: var(--ink-fade); font-size: 0.82rem; font-style: italic; } .rezepte-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .rezepte-related li { display: inline-block; margin: 0; } .rezepte-toc-link { display: inline-block; background: var(--paper-1); border: 1px solid var(--rule-strong); color: var(--ink-2); padding: 4px 12px; border-radius: 14px; font-size: 0.85rem; text-decoration: none; border-bottom: none; line-height: 1.4; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .rezepte-toc-link:hover { background: color-mix(in oklab, white 5%, var(--paper-1)); border-color: var(--seal); color: var(--seal); text-decoration: none; } /* ── Footer / Attribution ── */ .rz-wrap footer { color: var(--ink-fade); font-size: 0.85rem; text-align: center; margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 16px; } .rz-wrap footer a { color: var(--seal); border-bottom: none; } .rz-attribution { margin: 0.5rem 0 0; padding: 0; } .rz-attribution dt { display: inline; font-weight: 600; color: var(--ink-2); } .rz-attribution dt::after { content: ': '; } .rz-attribution dd { display: inline; margin: 0; color: var(--ink-soft); } .rz-attribution dd::after { content: ''; display: block; margin-bottom: 3px; } /* ── Card-grids (rezepte-index, book-overview) ── */ .rz-card { position: relative; background: rgba(255,255,255,0.25); border: none; border-radius: 8px; padding: 14px 18px 38px; margin: 12px 0; transition: background 150ms ease; } .rz-card:hover { background: rgba(255,255,255,0.42); } /* .parchment-page a... bumpt Specificity (0,2,1) damit parchment.css default-a-Border-Bottom (gleiche Spec) via Source-Order geschlagen wird. */ .parchment-page .rz-card a { color: var(--seal); text-decoration: none; font-family: var(--serif-display); font-size: 1.1rem; font-weight: 600; border-bottom: none; } .parchment-page .rz-card a:hover { color: var(--seal-deep, #7a1c0a); text-decoration: underline; text-decoration-color: var(--seal); border-bottom: none; } .rz-card-meta { font-size: 0.72rem; color: var(--ink-fade); font-style: italic; opacity: 0.75; margin: 3px 0 6px; } .rz-card-snippet { margin: 4px 0 0; font-size: 0.92rem; color: var(--ink-soft); } .rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 16px 0; } /* Course-Icon bottom-right in source-page recipe cards */ .rz-card-course-icon { position: absolute; bottom: 10px; right: 12px; width: 26px; height: 26px; opacity: 0.5; pointer-events: none; } /* ── Vorwort + Grundlagen + Sektions-Container ── */ .rz-vorwort { background: linear-gradient(135deg, color-mix(in oklab, var(--seal) 5%, var(--paper-1)), var(--paper-1)); border: 1px solid var(--rule); border-left: 4px solid var(--seal); border-radius: 6px; padding: 22px 28px; margin: 20px 0 26px; line-height: 1.65; } /* rz-grundlagen: kein Box-Styling - fliessender Inhalt ohne Hintergrund/Border */ .rz-grundlagen { line-height: 1.65; } /* --flat ist jetzt no-op (rz-grundlagen hat schon kein Box-Styling mehr), bleibt als Klasse erhalten damit existierende HTML-Templates nicht geaendert werden muessen. */ .rz-grundlagen--flat { } .rz-vorwort h2, .rz-grundlagen h2 { font-family: var(--serif-display); font-size: 1.35rem; margin: 0 0 14px; color: var(--ink-2); } .rz-vorwort h3, .rz-grundlagen h3 { font-family: var(--serif-display); font-size: 1.1rem; margin: 22px 0 8px; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 4px; } .rz-vorwort h3 { border-bottom: none; } /* vorwort etwas weicher */ .rz-grundlagen h4 { font-family: var(--serif-display); font-size: 1rem; margin: 14px 0 4px; color: var(--seal-deep); } .rz-vorwort h5, .rz-grundlagen h5 { font-family: var(--serif-display); font-size: 0.95rem; font-style: italic; font-weight: 600; margin: 12px 0 2px; color: var(--ink-soft); letter-spacing: 0.01em; } .rz-vorwort p, .rz-grundlagen p { margin: 8px 0; } .rz-vorwort em, .rz-grundlagen em { font-style: italic; color: var(--seal-deep); } .rz-vorwort strong, .rz-grundlagen strong { color: var(--ink-2); } .rz-vorwort a, .rz-grundlagen a { color: var(--seal); text-decoration: underline; border-bottom: none; } .rz-vorwort a:hover, .rz-grundlagen a:hover { color: var(--seal-deep); } .rz-grundlagen-list, .rz-vorwort-promises { margin: 8px 0 10px 22px; padding: 0; } .rz-grundlagen-list li { margin: 4px 0; padding-left: 4px; } .rz-vorwort-promises li { margin: 10px 0; padding-left: 6px; } .rz-vorwort-sig, .rz-grundlagen-sig { margin-top: 20px; text-align: right; font-style: italic; color: var(--ink-fade); font-size: 0.92rem; } .rz-vorwort-cta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--ink); } /* ── Mini-Rezept-Card (innerhalb Grundlagen) ── */ .rz-mini-rezept { background: color-mix(in oklab, white 35%, var(--paper)); border: none; border-radius: 8px; padding: 12px 18px; margin: 12px 0 14px; font-size: 0.95rem; } .rz-mini-rezept h4 { margin: 0 0 4px; color: var(--seal-deep); font-family: var(--serif-display); font-size: 0.95rem; font-weight: 600; } .rz-mini-rezept p { margin: 4px 0; line-height: 1.55; } /* ── Poudres-Tabelle (Gewuerzmischungen) ── */ .rz-poudres-tabelle { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.92rem; } .rz-poudres-tabelle th { text-align: left; font-family: var(--serif-display); font-size: 0.82rem; color: var(--ink-fade); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule-strong); } .rz-poudres-tabelle td { padding: 8px 12px 8px 0; vertical-align: top; border-bottom: 1px solid var(--rule); line-height: 1.5; } .rz-poudres-tabelle td:first-child { color: var(--ink-2); white-space: nowrap; font-style: italic; } /* ── Translate / Viewer-Action-Buttons (rechts oben, vor dem H1) ── Rote wachssiegel-CTA analog .btn-primary aus parchment.css. Selector als "a.rz-translate-btn" damit Specificity (0,2,1) das parchment.css-default ".parchment-page a:not(.rz-badge)" (0,2,1) bei gleicher Spec via Quellreihenfolge sicher schlaegt. */ .parchment-page a.rz-translate-btn { float: right; margin: 4px 0 0 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: var(--seal); border: 1px solid var(--seal-deep); color: var(--paper); font-family: var(--serif-display); font-size: 0.9rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--seal-deep); box-shadow: 0 2px 6px -2px rgba(125, 42, 34, 0.4); transition: background 140ms ease, border-color 140ms ease, transform 80ms ease; } .parchment-page a.rz-translate-btn:hover { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--paper); } .parchment-page a.rz-translate-btn:active { transform: translateY(1px); } /* Inline-SVG-icons (Globus, Viewer-rect) sind via stroke=currentColor eingefaerbt - mit .paper-color text greift das automatisch auch fuer die svg-strokes (kein zusaetzliches filter noetig wie bei .btn-primary img.ui-icon). */ /* ── Grundlagen-TOC (sticky-sidebar bei wide layout) ── :has() reset fuer overflow auf html/body damit position:sticky greift. */ html:has(.rz-grundlagen-layout), body:has(.rz-grundlagen-layout) { overflow: visible; } .rz-grundlagen-layout { display: block; } .rz-grundlagen-main { min-width: 0; } .rz-grundlagen-toc { background: none; border: none; border-radius: 0; padding: 4px 0; margin: 16px 0 20px; font-size: 0.92rem; line-height: 1.5; } .rz-grundlagen-toc summary { cursor: pointer; font-weight: 600; padding: 6px 0; list-style: none; color: var(--ink-2); font-family: var(--serif-display); } .rz-grundlagen-toc summary::-webkit-details-marker { display: none; } .rz-grundlagen-toc summary::after { content: ' ▾'; color: var(--ink-fade); } .rz-grundlagen-toc[open] summary::after { content: ' ▴'; } .rz-grundlagen-toc nav { margin-top: 4px; } /* ToC-Item-Pattern (analog #rezepte-viewer .rezepte-toc-list li button) - Basis: --ink auf transparent - Hover: --seal-Text auf --paper-2 - Active: --seal-deep-Text auf seal-getoentem Hintergrund, fett Kein border-left/border-bottom als Marker - rein Hintergrund + Farbe. Selektor mit .parchment-page bumpt Spec damit parchment.css default-a (border-bottom) via Source-Order geschlagen wird. */ .rz-toc-list, .rz-toc-list ol { list-style: none; padding-left: 0; margin: 6px 0; line-height: 1.35; } .rz-toc-list > li { margin: 1px 0; } .parchment-page .rz-toc-list > li > a { display: block; padding: 7px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; border: none; border-bottom: none; } .rz-toc-list ol { padding-left: 14px; margin: 2px 0 6px; font-size: 0.9rem; } .parchment-page .rz-toc-list ol > li > a { display: block; padding: 5px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; border: none; border-bottom: none; } .parchment-page .rz-toc-list a:hover { color: var(--seal); background: color-mix(in oklab, white 5%, var(--paper-1)); border-bottom: none; } .parchment-page .rz-toc-list a.rz-toc-active { color: var(--seal-deep); font-weight: 600; background: color-mix(in oklab, black 5%, var(--paper-1)); } html { scroll-behavior: smooth; scroll-padding-top: 76px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Breakpoint 1100px: ab da sidebar sticky daneben statt klappbar oben */ @media (min-width: 1100px) { .rz-grundlagen-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; } .rz-grundlagen-toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; margin: 0; align-self: start; border-right: 1px solid var(--rule); padding-right: 20px; } .rz-grundlagen-toc summary::after { opacity: 0.3; font-size: 0.85em; } }