/* ═══════════════════════════════════════════════════════════════════════════ Midnight Quests — Aufsatz auf den geteilten Compass-Stylesheet. style.css sagt es selbst: "keep using var(--gold) / var(--red), not raw hex … remapping the values restyles the whole site coherently". Genau das passiert hier. Die ~2100 Regeln bleiben unangetastet; nur die Werte wechseln von Gold auf Wegweiser-Grün. Deshalb heißen die Variablen weiterhin --gold: sie umzubenennen hieße, den geteilten Stylesheet zu forken. Reihenfolge im : fonts.css → style.css → quests.css ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Nacht bleibt Nacht — das ist die Familie. Der Akzent wandert von der Uhrmacher-Goldader auf ein Grün, wie es Wegmarkierungen im Wald tragen. */ --gold: #5EC98B; --gold-soft: #9BE8BB; --blue: #5EC98B; --blue-dim: rgba(94,201,139,0.14); --blue-glow: rgba(94,201,139,0.30); --purple: #45A972; /* gedämpft, für Sekundärflächen */ --orange: #7FDBA6; --green: #E4EFE7; --red: #A3182A; /* bleibt: Fehler und Löschen sollen nicht grün sein */ --text: #F2F6F2; --text-2: #8E9A90; --text-muted: #8E9A90; --text-3: #454C46; --border: rgba(94,201,139,0.13); --border-2: rgba(94,201,139,0.24); } /* ── Lecks im geteilten Stylesheet ────────────────────────────────────────── Vier Stellen in style.css tragen die Compass-Farben als rohes Hex und gehen damit an den Variablen vorbei. Ohne diese Korrekturen leuchtet auf einer grünen Seite ein blauer Knopf und ein goldener Sprachschalter. (Der blaue Hover ist ein Rest aus der Zeit vor der Gold-Umstellung — auf der Compass-Seite ist er ebenfalls sichtbar, aber das ist nicht meine Baustelle und wird nicht ungefragt an der Live-Seite geändert.) */ .btn-primary:hover { background: var(--gold-soft); box-shadow: 0 4px 16px var(--blue-glow); } .lang-btn.lang-active { background: rgba(94,201,139,.18) !important; } .lang-btn.lang-active::after { background: rgba(94,201,139,.16); } .footer-mark { filter: drop-shadow(0 0 18px rgba(94,201,139,.30)); } /* Der Primärknopf trägt bei Compass dunkle Schrift auf Gold. Auf dem Grün braucht er dasselbe, sonst steht heller Text auf hellem Grund. */ .btn-primary { color: #06110B; } /* ── Teile, die style.css nicht kennt ─────────────────────────────────────── .features-grid/.feature-* und .download-hint gibt es dort nicht (Compass baut den Abschnitt anders auf). Sie gehören damit hierher, nicht in den geteilten Stylesheet. */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; transition: border-color .2s, transform .2s; } .feature-card:hover { border-color: var(--border-2); transform: translateY(-2px); } .feature-icon { font-size: 26px; line-height: 1; margin-bottom: 14px; } .feature-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .feature-text { color: var(--text-2); font-size: 14px; line-height: 1.65; } .download-hint { margin-top: 14px; color: var(--text-2); font-size: 13px; min-height: 1em; } .btn-dl-ver { font-size: .82em; opacity: .72; font-weight: 700; letter-spacing: .2px; } .btn-primary:disabled { transform: none !important; box-shadow: none !important; } /* Das Marken-Zeichen ist ein Inline-SVG, kein Bild — es nimmt damit currentColor an und braucht keine zweite Anfrage. `currentColor` löst in einem NICHT auf (dann wird es schwarz), was auf der Compass-Seite schon einmal Arbeit gekostet hat. */ .mq-mark { display: block; } .mq-mark path, .mq-mark circle, .mq-mark line { vector-effect: non-scaling-stroke; } .nav-logo .mq-mark { width: 26px; height: 26px; color: var(--gold); } .hero-logo-svg { width: 132px; height: 132px; color: var(--gold); margin: 0 auto 18px; filter: drop-shadow(0 0 26px rgba(94,201,139,.28)); } .btn .mq-mark { width: 18px; height: 18px; margin-right: 9px; flex: none; } /* ── Markt ────────────────────────────────────────────────────────────────── Ein Markt, zwei Arten. Der Umschalter ist die oberste Ebene, die Kategorien darunter wechseln mit ihm — sonst stünden Fahrradschlauch und Sprachlehrer in derselben Liste und keine Filterleiste ergäbe Sinn. */ .mq-kind { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .mq-kind button { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-2); transition: background .18s, color .18s; } .mq-kind button.on { background: var(--gold); color: #06110B; } .mq-kind button:not(.on):hover { color: var(--text); } /* Dienstleistungen haben kein Foto — statt eines leeren Rahmens trägt die Karte ihr Kategoriezeichen groß. */ .listing-img-placeholder.mq-service { font-size: 40px; background: radial-gradient(120% 120% at 50% 0%, rgba(94,201,139,.14), transparent 70%); } .mq-badge-service { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #06110B; background: var(--gold); padding: 2px 7px; border-radius: 4px; } .mq-badge-item { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--border-2); padding: 2px 7px; border-radius: 4px; } /* Preisangabe bei Dienstleistungen trägt eine Einheit ("/ Std."), die nicht Teil des Preises ist und deshalb nicht wie er aussehen darf. */ .mq-unit { color: var(--text-3); font-size: 12px; font-weight: 500; margin-left: 3px; } /* ── Profile: zu Fuß / Rad / Motorrad ───────────────────────────────────── */ .mq-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 0; } .mq-mode { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px; text-align: center; } .mq-mode .g { font-size: 26px; line-height: 1; } .mq-mode b { display: block; margin: 9px 0 4px; font-size: 14.5px; } .mq-mode span { color: var(--text-2); font-size: 12.5px; line-height: 1.5; } @media (max-width: 560px) { .mq-modes { grid-template-columns: 1fr; } } /* ── Fortschrittsbalken "Karte aufgedeckt" ──────────────────────────────── */ .mq-cover { margin-top: 22px; } .mq-cover-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .mq-cover-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1); } .mq-cover-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; } /* ── Hinweiskasten ──────────────────────────────────────────────────────── */ .mq-note { border-left: 2px solid var(--border-2); padding: 2px 0 2px 16px; color: var(--text-2); font-size: 13.5px; line-height: 1.65; margin: 16px 0; }