/* Welche-Zimmerpflanze — shared stylesheet. Editorial green design: Fraunces display + Inter body + Spectral botanical italics. Landing = clean funnel (hero -> step quiz card). Results = photo slideshow + fact sheet + "passt zu dir" checklist. All pages share this file via base.html. */ :root { --display: "Fraunces", Georgia, "Times New Roman", serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --spectral: "Spectral", Georgia, serif; --ease: cubic-bezier(.22, .61, .36, 1); /* surfaces — ladder steps up from white paper (designsystem §1) */ --paper: #ffffff; --card: #fcfdfb; --good-bg: #f6faf5; --good-line: #d9e7d7; --soft: #eaf2ea; /* ink */ --ink: #1d231f; --muted: #5d6a5c; --line: #e4e8e0; --line-soft: #d3dbd2; /* unselected quiz radio, subtle hairlines */ --pip-off: #dfe6dc; --frame-line: #dbe7db; /* photo-frame border on --soft */ --safe-line: #cfe2cf; /* badge.safe border */ --link-tint: #b9cdb9; /* essence-link underline */ /* green — two rungs (designsystem §2): --green = actions, --green-d = surfaces */ --green: #2f6b3c; --green-d: #1f4d29; /* amber — caution only (designsystem §3); palette has no red */ --amber: #9a6a12; /* borders, left rules — NON-TEXT only */ --amber-d: #7f560c; /* all amber text on amber-soft */ --amber-soft: #fbf5e6; --amber-line: #ecdcae; --radius: 16px; /* spacing scale (designsystem §5) — rem, never px, for margin/padding/gap */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--body); color: var(--ink); background: var(--paper); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } /* ── Shared chrome ────────────────────────────────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; max-width: 62rem; width: 100%; margin: 0 auto; padding: 1.1rem 1.25rem 0.3rem; } .brand { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--green-d); text-decoration: none; } .brand b { color: var(--green); } .crumb { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .site-main { flex: 1; width: 100%; padding: 1.25rem 1.25rem 2rem; } .site-footer { text-align: center; padding: 2.4rem 1.25rem 2rem; } .footer-nav a { color: var(--muted); text-decoration: none; font-size: 0.82rem; margin: 0 0.7rem; } .footer-nav a:hover { color: var(--green); } /* ── Landing: hero ────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 2.5rem 0 2rem; max-width: 38rem; margin: 0 auto; } .hero h1 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.08; margin: 0; } .hero h1 em { font-style: italic; color: var(--green); } /* Progressive enhancement: show the enhanced card with JS, the plain form without. The class is flipped no-js -> js in before paint. */ html.no-js .quiz { display: none; } html.js .survey-fallback { display: none; } /* ── Landing: no-JS fallback form ─────────────────────────────────────── */ .survey-fallback { max-width: 40rem; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); /* large surface (designsystem §7) */ } .survey-fallback .hp { position: absolute; left: -9999px; } .fb-field { border: 0; margin: 0 0 1.4rem; padding: 0; } .fb-field legend { font-family: var(--display); font-weight: 500; font-size: 1.1rem; margin-bottom: 0.6rem; padding: 0; } .fb-opt { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.2rem; cursor: pointer; } .fb-opt input { flex: none; } /* ── Landing: embedded quiz card ──────────────────────────────────────── */ .quiz { max-width: 40rem; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 26px -18px rgba(20, 40, 25, .4); } /* qc-head / qc-prog / qc-body share ONE horizontal edge — move together (§7) */ .qc-head { background: var(--green-d); color: #fff; padding: var(--space-4) var(--space-6); } .qc-head h2 { font-family: var(--display); font-weight: 500; font-size: 1.18rem; margin: 0; letter-spacing: -0.01em; } .qc-head p { font-size: 0.78rem; color: rgba(255, 255, 255, .68); margin: 0.15rem 0 0; } .qc-prog { padding: var(--space-3) var(--space-6) 0; } .p-seg { display: flex; gap: 0.35rem; } .p-seg i { flex: 1; height: 0.38rem; border-radius: 999px; background: var(--pip-off); transition: background 0.4s var(--ease); } .p-seg i.on { background: var(--green); } /* fixed height — identical for every question */ .qc-body { padding: var(--space-6); min-height: 33rem; display: flex; flex-direction: column; } .qtext { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 3.4vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 1.1rem; } .opts { display: grid; gap: var(--space-2); } .opt { display: flex; align-items: center; gap: 0.85rem; text-align: left; width: 100%; font: inherit; font-size: 1rem; color: var(--ink); cursor: pointer; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: var(--space-3) var(--space-4); transition: all 0.14s var(--ease); } .opt:hover { border-color: var(--green); } .opt .dot { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--line-soft); display: grid; place-items: center; transition: all 0.14s; } .opt[data-multi] .dot { border-radius: 6px; } .opt.sel { border-color: var(--green); background: var(--soft); } .opt.sel .dot { background: var(--green); border-color: var(--green); } .opt.sel .dot::after { content: "✓"; color: #fff; font-size: 0.7rem; font-weight: 800; } .opt .sub { display: block; font-size: 0.79rem; color: var(--muted); margin-top: 0.1rem; } /* "Calculating results" screen — fills the fixed-height card body during submit */ .loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6rem; } .loading .qtext { margin: 0; } .spinner { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid var(--pip-off); border-top-color: var(--green); animation: wz-spin 0.8s linear infinite; } @keyframes wz-spin { to { transform: rotate(360deg); } } .load-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; text-align: left; } .load-steps li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; color: var(--muted); opacity: 0.5; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); } .load-steps li .ls-mk { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; color: #fff; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .load-steps li.done { opacity: 1; color: var(--ink); } .load-steps li.done .ls-mk { background: var(--green); border-color: var(--green); } .load-steps li.done .ls-mk::after { content: "✓"; } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } } /* footer row inside card: back (symbol) left · Weiter right */ .qc-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.5rem; gap: 1rem; } .qc-back { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); font-size: 1.15rem; cursor: pointer; display: inline-grid; place-items: center; transition: all 0.14s var(--ease); } .qc-back:hover { border-color: var(--green); color: var(--green); } .qc-back.off { visibility: hidden; } .qc-next { font: inherit; font-weight: 600; font-size: 1rem; color: #fff; background: var(--green); border: 0; border-radius: 999px; padding: 0.72rem 1.7rem; cursor: pointer; transition: background 0.15s, opacity 0.15s; } .qc-next:disabled { opacity: 0.4; cursor: not-allowed; } .qc-next:not(:disabled):hover { background: var(--green-d); } /* ── Results: heading ─────────────────────────────────────────────────── */ .rhead, .relax-hint, .cards, .rcats, .rfoot { max-width: 62rem; margin-left: auto; margin-right: auto; } .rhead { padding: 1.2rem 0 0.2rem; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); font-weight: 700; margin: 0 0 0.8rem; } .rhead h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: -0.015em; margin: 0 0 0.35rem; } .rsub { color: var(--muted); margin: 0 0 0.7rem; font-size: 1rem; max-width: 37rem; } .rmeta { color: var(--muted); margin: 0 0 0.6rem; font-size: 0.9rem; } .relax-hint { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); margin: 0.6rem auto 0; color: var(--green-d); font-size: 0.92rem; } /* ── Results: plant card ──────────────────────────────────────────────── */ .card { display: grid; grid-template-columns: 1fr; gap: 1.15rem; padding: 1.9rem 0; border-top: 1px solid var(--line); } .cards .card:last-child { border-bottom: 1px solid var(--line); } @media (min-width: 46rem) { .card { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.7rem; } } .photo { min-width: 0; } .photo .box { aspect-ratio: 4 / 3; border-radius: 16px; background: var(--soft); border: 1px solid var(--frame-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; color: var(--green); } .photo .box .leaf { font-size: 2.6rem; } .photo .box .cap { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } @media (min-width: 46rem) { .photo .box { aspect-ratio: auto; height: 100%; min-height: 18rem; } } .right { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .pname { font-family: var(--display); font-weight: 500; font-size: 1.55rem; letter-spacing: -0.01em; margin: 0 0 0.25rem; } .bot { font-family: var(--spectral); font-style: italic; color: var(--muted); font-size: 1rem; } .pdesc { margin: 0.35rem 0 0.7rem; line-height: 1.55; font-size: 1rem; } .ptip { display: flex; gap: 0.5rem; color: var(--muted); margin: 0; font-size: 0.92rem; } .ptip b { color: var(--green-d); font-weight: 600; } .sec { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; margin-top: auto; padding: var(--space-4); /* compact card (designsystem §7) */ } @media (max-width: 38rem) { .sec { grid-template-columns: 1fr; gap: 1.1rem; } } .slab { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-d); font-weight: 700; margin: 0 0 0.75rem; } .kv { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding: 0.42rem 0; border-bottom: 1px dotted var(--line); } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--muted); } .kv .v { font-weight: 600; text-align: right; } .match { padding-left: 1.6rem; border-left: 1px solid var(--line); } @media (max-width: 38rem) { .match { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 1.1rem; } } .chk { display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0; font-size: 0.92rem; } .chk .mk { flex: none; width: 1.2rem; height: 1.2rem; border-radius: 6px; display: grid; place-items: center; font-size: 0.74rem; color: #fff; font-weight: 800; } .chk.y .mk { background: var(--green); } .chk.n .mk { background: #c2ccbf; } .chk.n, .chk.n small { color: var(--muted); } .chk small { color: var(--muted); } /* Between the last card's bottom line and the rfoot's top line. */ .rcats { margin-top: 2.2rem; } .rcats h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 0 0 0.7rem; } .rfoot { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.9rem 1.3rem; align-items: center; justify-content: space-between; } .rfoot p { margin: 0; color: var(--muted); font-size: 0.86rem; max-width: 24rem; } .restart { font: inherit; font-weight: 600; font-size: 0.92rem; background: var(--green); color: #fff; border: 0; border-radius: 999px; padding: 0.62rem 1.4rem; cursor: pointer; text-decoration: none; display: inline-block; } .restart:hover { background: var(--green-d); } /* ── Photo slideshow (fills the .photo column) ────────────────────────── */ .pic-slider { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--soft); } @media (min-width: 46rem) { .pic-slider { aspect-ratio: auto; height: 100%; min-height: 18rem; } } .pic-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pic-track::-webkit-scrollbar { display: none; } .pic-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; display: block; -webkit-user-select: none; user-select: none; } .pic-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.15s; } .pic-slider:hover .pic-nav, .pic-slider:focus-within .pic-nav { opacity: 1; } .pic-nav.prev { left: 0.4rem; } .pic-nav.next { right: 0.4rem; } .pic-nav:hover { background: #fff; } .pic-dots { position: absolute; left: 0; right: 0; bottom: 0.6rem; display: flex; justify-content: center; gap: 0.3rem; } .pic-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.2s, transform 0.2s; } .pic-dot.on { background: #fff; transform: scale(1.25); } @media (hover: none) { .pic-nav { display: none; } } /* ── Consolidated treatments (design pass 2026-07-06) ───────────────────── ONE treatment each — do not add variants: - text link: .tlink (green, light underline, darker on hover) - filled button: the quiz CTA banner's .plant-cta a (nothing else) - card: .sec/.steckbrief/.wz-split .box/.pcard share the grouped rule - hairline: var(--line), solid for rules, dotted inside the Steckbrief - small text: .meta - badges: .badge.warn / .badge.safe (palette has no red — warn uses the existing muted tone) */ .tlink, .legal a, .plant-sec p a, .card-more { color: var(--green); text-decoration: underline; text-decoration-color: rgba(47, 107, 60, 0.35); text-underline-offset: 2px; transition: color 0.14s var(--ease); } .tlink:hover, .legal a:hover, .plant-sec p a:hover, .card-more:hover { color: var(--green-d); text-decoration-color: currentColor; } .meta { font-size: 0.82rem; color: var(--muted); } .badge { display: inline-block; font-family: var(--body); font-size: 12px; font-weight: 600; line-height: 1; padding: 0.3em 0.65em; border-radius: 999px; vertical-align: middle; white-space: nowrap; } .badge.warn { background: var(--muted); color: #fff; } .badge.safe { background: var(--soft); color: var(--green-d); } /* the one card surface */ .sec, .steckbrief, .wz-split .box, .pcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; } /* Category link list — THE category-link treatment (pill chips removed). */ .cat-list { margin-top: 0.4rem; max-width: 40rem; border-top: 1px solid var(--line); } .cat-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0.15rem; border-bottom: 1px solid var(--line); text-decoration: none; } .cat-list .cl-name { color: var(--green); font-weight: 500; } .cat-list a:hover .cl-name { color: var(--green-d); text-decoration: underline; text-underline-offset: 2px; } .cat-list .cl-meta { color: var(--muted); font-size: 0.88rem; white-space: nowrap; } /* Slim inline quiz CTA — one line between hairline rules (_cta_inline.html). */ .cta-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 0.85rem 0.15rem; } .cta-line p { margin: 0; color: var(--muted); font-size: 0.92rem; } .cta-line .tlink { font-weight: 600; font-size: 0.92rem; white-space: nowrap; } /* "Über diese Seite" — hairline-topped small-text block above the footer. */ .about-page { border-top: 1px solid var(--line); margin-top: 1.8rem; padding: 1.1rem 0 0; } .about-page .slab { margin: 0 0 0.5rem; } .about-page .meta { margin: 0 0 0.3rem; } /* ── Legal pages ──────────────────────────────────────────────────────── */ .legal { max-width: 44rem; margin: 0 auto; } .legal h1 { font-family: var(--display); font-weight: 500; font-size: 1.9rem; letter-spacing: -0.015em; } .legal h2 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin-top: 1.6rem; } .legal-block { line-height: 1.6; } /* ── Plant detail pages (/pflanzen/) ─────────────────────────────── */ /* Reuses existing tokens + .kv / .slab / .eyebrow / .crumb from above. */ /* v10 (docs/plant-page-v10-reference.html): reading measure 48rem, lead/coda prose registers, amber warn accents, diagnostic .probleme table, category chips. `.plant` is shared with the category pages — everything v10-only is scoped under the page-level `.plant-detail` class. */ .crumb a { color: var(--muted); text-decoration: none; } .crumb a:hover { color: var(--green); } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; } .plant { max-width: 62rem; margin: 0 auto; } .plant-detail { max-width: 48rem; } .plant-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem 0 1.6rem; } @media (min-width: 46rem) { .plant-hero { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; } } /* lead — one-liner section quintessence; coda — earned closing line (max ~2/page, only after Standort/Gießen; see plant_pages.py docstring) */ /* .plant covers the category pages too — their intro lead shares the style */ .plant .lead { font-size: 1.04rem; font-weight: 500; } .plant-detail .coda { font-family: var(--spectral); font-style: italic; color: var(--green-d); font-size: 1.02rem; margin-bottom: 0; } /* visually-hidden (screen-reader-only) — the .probleme */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .plant-photo .box { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--frame-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--green); position: relative; overflow: hidden; margin: 0; } .plant-photo .box svg { width: 44%; height: auto; } .plant-photo .box .cap { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .plant-lede h1 { font-family: var(--display); font-weight: 500; letter-spacing: -0.015em; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.08; margin: 0.1rem 0; } .plant-lede .bot { font-family: var(--spectral); font-style: italic; color: var(--muted); font-size: 1.05rem; } .plant-lede .syn { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0; } .plant-essence { margin: 0.9rem 0 1.2rem; font-size: 1.06rem; line-height: 1.55; max-width: 34rem; } .plant-essence b { color: var(--green-d); font-weight: 600; } /* v10 essence carries category LINKS where legacy entries had */ .plant-essence a { color: var(--green-d); font-weight: 600; text-decoration-color: var(--link-tint); text-underline-offset: 2px; } .plant-essence a:hover { color: var(--green); } .steckbrief { padding: var(--space-4); } .steckbrief .slab { margin: 0 0 0.6rem; } /* Steckbrief head row: slab left, derived toxicity verdict badge right */ .sb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } .sb-head .slab { margin-bottom: 0.45rem; } .sb-head .badge { flex: none; margin-top: -0.1rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28em 0.9em; } /* amber verdict badge — plant-page Steckbrief only (results keep .badge.warn) */ .badge.tox { background: var(--amber-soft); color: var(--amber-d); border: 1px solid var(--amber-line); } .sb-head .badge.safe { background: var(--soft); color: var(--green-d); border: 1px solid var(--safe-line); } /* Semantic Steckbrief table — visually identical to the results .kv rows (dotted hairline separators, label left muted, value right bold). */ .steckbrief table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .steckbrief tr { border-bottom: 1px dotted var(--line); } .steckbrief tr:last-child { border-bottom: 0; } .steckbrief th { color: var(--muted); font-weight: 400; text-align: left; padding: 0.42rem 1rem 0.42rem 0; } .steckbrief td { font-weight: 600; text-align: right; padding: 0.42rem 0; } .plant-sec { padding: 1.8rem 0; border-top: 1px solid var(--line); } .plant-sec h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 0 0 0.7rem; } /* v10 measure: calmer fixed section-title size inside the 48rem column. h2 binds tighter to its lead (0.75rem) than paragraphs to each other (1rem) */ .plant-detail .plant-sec h2 { font-size: 1.5rem; line-height: 1.15; margin-bottom: var(--space-3); } .plant-sec p { margin: 0 0 var(--space-4); max-width: 40rem; line-height: 1.6; } .plant-sec p:last-child { margin-bottom: 0; } .plant-sec h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 1.2rem 0 0.4rem; } /* gap between boxes > padding inside them (designsystem §6.1) */ .wz-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: 1.1rem; } @media (min-width: 38rem) { .wz-split { grid-template-columns: 1fr 1fr; } } .wz-split .box { padding: var(--space-4); border-radius: 12px; } .wz-split .box .slab { margin: 0 0 0.5rem; } /* accent-coded pro/contra flags (v10): green vs amber left border */ .wz-split .box.good { background: var(--good-bg); border: 1px solid var(--good-line); border-left: 4px solid var(--green); } .wz-split .box.good .slab { color: var(--green-d); } .wz-split .box.watch { background: var(--amber-soft); border: 1px solid var(--amber-line); border-left: 4px solid var(--amber); } .wz-split .box.watch .slab { color: var(--amber-d); } .wz-split .box p { margin: 0; font-size: 0.95rem; max-width: none; } /* ── diagnostic table (Häufige Probleme) — real , max 3 rows, stacks on mobile with CSS-injected labels ─────────────────────────── */ .probleme { width: 100%; border-collapse: collapse; margin-top: 1rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 0.89rem; border-spacing: 0; } .probleme thead th { background: var(--card); text-align: left; padding: 0.55rem var(--space-4); /* horizontal tracks .probleme td */ font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--green-d); } .probleme tbody td { padding: var(--space-4); /* compact card (designsystem §7) */ border-top: 1px solid var(--line); vertical-align: top; } .probleme td.sym { font-weight: 600; width: 28%; } .probleme td.cause { color: var(--muted); width: 30%; } @media (max-width: 38rem) { .probleme thead { display: none; } .probleme, .probleme tbody, .probleme tr, .probleme td { display: block; width: 100%; } /* beat the desktop 28%/30% column widths (higher specificity than the row above) */ .probleme td.sym, .probleme td.cause { width: 100%; } /* tbody in the selector so this outweighs the desktop `.probleme tbody td` */ .probleme tbody td { border-top: 0; padding: 0.15rem var(--space-4); } .probleme td.sym { padding-top: var(--space-4); } .probleme td.fix { padding-bottom: var(--space-4); } .probleme tr { border-top: 1px solid var(--line); } .probleme tr:first-child { border-top: 0; } .probleme td.cause::before { content: "Woran es liegt: "; font-weight: 600; color: var(--ink); } .probleme td.fix::before { content: "Was hilft: "; font-weight: 600; } } .plant-cta { background: var(--green); border-radius: var(--radius); padding: var(--space-8) var(--space-6); margin: 1.8rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .plant-cta h2 { font-family: var(--display); font-weight: 500; color: #fff; font-size: 1.4rem; margin: 0 0 0.25rem; } .plant-cta p { margin: 0; color: #d7e6d7; font-size: 0.95rem; max-width: 26rem; } .plant-cta a { font-weight: 600; font-size: 0.95rem; background: #fff; color: var(--green-d); text-decoration: none; border-radius: 999px; padding: 0.72rem 1.6rem; white-space: nowrap; transition: transform 0.14s var(--ease); } .plant-cta a:hover { transform: translateY(-1px); } /* gap between cards > padding inside them (designsystem §6.2) */ .plant-related { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: 0.4rem; } @media (min-width: 40rem) { .plant-related { grid-template-columns: repeat(3, 1fr); } } .pcard { display: block; text-decoration: none; padding: var(--space-4); transition: border-color 0.14s var(--ease); } .pcard:hover { border-color: var(--green); } .pcard .n { font-family: var(--display); font-size: 1.1rem; color: var(--green-d); display: block; } .pcard .b { font-family: var(--spectral); font-style: italic; font-size: 0.85rem; color: var(--muted); display: block; } .pcard .badge { margin-top: var(--space-2); } /* internal escalation: name→botanical tightest, .why looser, .stat loosest */ .pcard .why { font-size: 0.85rem; color: var(--ink); margin-top: var(--space-2); display: block; } /* related-card toxicity footer (v10): muted text line, not a badge */ .pcard .stat { font-size: 0.78rem; color: var(--muted); margin-top: var(--space-3); display: block; } /* category chips (v10 plant page) — strictly derived from membership; the category INDEX keeps the .cat-list link-list treatment */ .cats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.3rem; } .cats a { font-size: 0.85rem; font-weight: 500; text-decoration: none; color: var(--green-d); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.95rem; transition: border-color 0.15s, background 0.15s; } .cats a:hover { border-color: var(--green); background: var(--good-bg); } .cats a small { color: var(--muted); font-weight: 400; } /* Category pages: same pcard, plus an optional photo on top. */ @media (min-width: 40rem) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } .cat-grid .pcard .thumb { display: block; width: calc(100% + 2 * var(--space-4)); /* bleeds over the .pcard padding */ margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0.7rem; height: 10rem; object-fit: cover; border-radius: 13px 13px 0 0; } @media (prefers-reduced-motion: no-preference) { .plant-hero > * { animation: wz-rise 0.55s var(--ease) both; } .plant-hero > *:nth-child(2) { animation-delay: 0.07s; } @keyframes wz-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } } /* ── Notice page (HTTP 429 rate-limit, etc.) ──────────────────────────── */ .notice { max-width: 34rem; margin: 3rem auto; text-align: center; } .notice h1 { font-family: var(--display); font-weight: 600; color: var(--green-d); font-size: 1.7rem; margin: 0 0 var(--space-4); } .notice p { margin: 0 0 var(--space-4); color: var(--muted); } .notice-back a { color: var(--green); text-decoration: none; font-weight: 500; } .notice-back a:hover { text-decoration: underline; }