/* ===================================================================== Walddenkpfad – interaktiver Waldtyp-Test Design: Claude-Design-Handoff „Variante C – Geführtes Modul". Tokens 1:1 aus dem Handoff. Schrift wird vom geerbt (KEIN font-family setzen – behebt den Arial-Fallback). ===================================================================== */ :root { /* Ein Grün-System statt vier konkurrierender Töne */ --wd-green-deep: #2c5234; /* Kopfband, Überschriften-Akzent, Sieger-Balken */ --wd-green: #3c7146; /* eine interaktive Farbe: Buttons, Links, Auswahl */ --wd-green-hover: #2f5b38; --wd-green-soft: #7ca37a; /* sekundärer Balken */ --wd-tint: #eef2ea; /* Auswahl-Fläche */ --wd-tint-2: #f4f7f1; /* Footer-/Ergebnis-Fläche */ --wd-track: #e4e7e0; /* Balken-Schiene */ --wd-line: #e2e7dd; /* Haarlinien / Trenner */ --wd-ink: #1c2b22; /* Überschriften */ --wd-body: #2c3a31; /* Fließtext */ --wd-muted: #5e6b62; /* Hinweistext */ --wd-r-sm: 10px; --wd-r-md: 16px; --wd-r-lg: 20px; --wd-r-pill: 999px; --wd-1: 4px; --wd-2: 8px; --wd-3: 12px; --wd-4: 16px; --wd-5: 24px; --wd-6: 32px; --wd-7: 48px; --wd-8: 64px; --wd-shadow-sm: 0 1px 2px rgba(28, 43, 34, 0.05); --wd-shadow-md: 0 6px 22px rgba(28, 43, 34, 0.08); } /* Inhalte auf den Lehrpfad-/Stations-/Ergebnisseiten NICHT erst beim Scrollen einblenden (Kadence-Scroll-Animation „AOS"). Sonst „schwingen" Boxen unten erst spät ins Bild und wirken wie versteckte Inhalte. Diese CSS wird nur auf den Walddenkpfad-Seiten geladen, betrifft also keine anderen Seiten. */ [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; visibility: visible !important; } /* Scope-Wrapper – erben die Seitenschrift */ .wd-c, .wd-result { font-family: inherit; color: var(--wd-body); } .wd-c *, .wd-result * { box-sizing: border-box; } .wd-orig-hidden { display: none !important; } /* ---------- Buttons (einheitlich) ---------- */ .wd-btn { display: inline-block; font: inherit; font-size: 17px; font-weight: 700; line-height: 1; text-decoration: none; border: none; border-radius: var(--wd-r-pill); padding: 15px 28px; cursor: pointer; white-space: nowrap; transition: background 0.15s, box-shadow 0.15s; } .wd-btn--primary { background: var(--wd-green); color: #fff !important; } .wd-btn--primary:hover, .wd-btn--primary:focus-visible { background: var(--wd-green-hover); color: #fff !important; } .wd-btn--ghost { background: transparent; color: var(--wd-green) !important; box-shadow: inset 0 0 0 2px var(--wd-green); } .wd-btn--ghost:hover, .wd-btn--ghost:focus-visible { background: var(--wd-tint); } .wd-btn:focus-visible { outline: 3px solid var(--wd-green-deep); outline-offset: 2px; } /* ===================================================================== STATION – Geführtes Modul (Variante C) ===================================================================== */ .wd-c { margin: var(--wd-5) 0 var(--wd-6); } .wd-module { border-radius: var(--wd-r-lg); background: #fff; box-shadow: var(--wd-shadow-md); overflow: hidden; border: 1px solid var(--wd-line); } /* Kopfband */ .wd-mod-head { background: var(--wd-green-deep); color: #fff; padding: var(--wd-5) var(--wd-6); } .wd-mod-step { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-3); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: var(--wd-3); } .wd-mod-q { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0 0 var(--wd-4); } .wd-prog { height: 6px; border-radius: var(--wd-r-pill); background: rgba(255, 255, 255, 0.22); overflow: hidden; } .wd-prog > i { display: block; height: 100%; background: #fff; border-radius: inherit; transition: width 0.4s ease; } /* Optionen */ .wd-mod-body { padding: var(--wd-2) var(--wd-6); } .wd-opt { display: flex; align-items: center; gap: var(--wd-5); padding: var(--wd-4); margin-left: calc(-1 * var(--wd-4)); border-bottom: 1px solid var(--wd-line); border-left: 3px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .wd-opt:last-child { border-bottom: none; } .wd-opt:hover { background: var(--wd-tint); } .wd-opt:focus-visible { outline: 3px solid var(--wd-green); outline-offset: -3px; } .wd-opt__ico { flex: 0 0 auto; width: 48px; height: 48px; } .wd-opt__ico img, .wd-opt__ico svg { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; } .wd-opt__txt { flex: 1; font-size: 17px; line-height: 1.45; color: var(--wd-body); } .wd-opt__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--wd-line); display: grid; place-items: center; transition: background 0.15s, border-color 0.15s; } .wd-opt__check svg { opacity: 0; transition: opacity 0.15s; } .wd-opt.is-selected { background: var(--wd-tint); border-left-color: var(--wd-green); } .wd-opt.is-selected .wd-opt__txt { color: var(--wd-ink); font-weight: 600; } .wd-opt.is-selected .wd-opt__check { background: var(--wd-green); border-color: var(--wd-green); } .wd-opt.is-selected .wd-opt__check svg { opacity: 1; } /* Footer */ .wd-mod-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--wd-4); padding: var(--wd-5) var(--wd-6); background: var(--wd-tint-2); border-top: 1px solid var(--wd-line); } .wd-hint { margin: 0; font-size: 15px; color: var(--wd-muted); } /* ===================================================================== ERGEBNIS – Modul mit Kopfband (Variante wd-rC) ===================================================================== */ .wd-result.wd-rC { margin: 0 0 var(--wd-6); } .wd-res-module { background: #fff; border-radius: var(--wd-r-lg); overflow: hidden; border: 1px solid var(--wd-line); box-shadow: var(--wd-shadow-md); } .wd-res-head { background: var(--wd-green-deep); color: #fff; padding: var(--wd-5) var(--wd-6); } .wd-res-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin: 0 0 var(--wd-2); } .wd-res-title { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: #fff; margin: 0; } .wd-res-inner { padding: var(--wd-6); } .wd-res-sub { margin: 0 0 var(--wd-6); font-size: 16px; color: var(--wd-muted); } /* Balken */ .wd-bars { display: flex; flex-direction: column; gap: var(--wd-4); margin-bottom: var(--wd-6); } .wd-bar { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: var(--wd-4); } .wd-bar__label { font-size: 16px; color: var(--wd-body); } .wd-bar__track { height: 12px; border-radius: var(--wd-r-pill); background: var(--wd-track); overflow: hidden; } .wd-bar__fill { height: 100%; border-radius: inherit; background: var(--wd-green-soft); transition: width 0.4s ease; } .wd-bar__num { font-size: 16px; text-align: right; color: var(--wd-muted); font-variant-numeric: tabular-nums; } .wd-bar.is-top .wd-bar__label { font-weight: 700; color: var(--wd-green-deep); } .wd-bar.is-top .wd-bar__fill { background: var(--wd-green-deep); } .wd-bar.is-top .wd-bar__num { color: var(--wd-ink); font-weight: 700; } .wd-bar.is-zero .wd-bar__label { color: var(--wd-muted); } .wd-res-actions { display: flex; gap: var(--wd-3); flex-wrap: wrap; } /* Gewinner-Profil weiter unten auf der Seite hervorheben */ .wd-winner-heading { scroll-margin-top: 90px; padding-left: var(--wd-3); border-left: 5px solid var(--wd-green-deep); } /* ---------- Responsive ---------- */ @media (max-width: 640px) { .wd-mod-head, .wd-mod-body, .wd-mod-foot, .wd-res-head, .wd-res-inner { padding-left: var(--wd-5); padding-right: var(--wd-5); } .wd-mod-foot { flex-direction: column; align-items: stretch; text-align: center; } .wd-mod-foot .wd-btn { width: 100%; } .wd-opt { gap: var(--wd-4); } .wd-bar { grid-template-columns: 88px 1fr 24px; gap: var(--wd-3); } .wd-res-title { font-size: 25px; } } @media (prefers-reduced-motion: reduce) { .wd-opt, .wd-btn, .wd-prog > i, .wd-bar__fill, .wd-opt__check, .wd-opt__check svg { transition: none; } }