/* ═══════════════════════════════════════════════════════════════════════════ QUEST V2 — das Auftragsbrett von Grünbach Gleiches Vorgehen wie dorf-v2.css: laedt NACH style.css, ueberschreibt gezielt, faellt weg → altes Layout ist sofort zurueck. Die Questlogik in quests.js wird nicht angefasst; renderQuests() schreibt weiter genau dasselbe Markup wie vorher, es steht nur woanders. MISCHUNG: rund 70 % modernes blau/weisses Spiel-UI, 30 % Spielwelt. Die Fantasy steckt ausschliesslich in Kulisse, Doris und den Blaettern ueber der Panelkante — Karten, Reiter, Balken und Knoepfe bleiben unveraendert. AUFBAU (alles absolut in .main-col, das Panel dazwischen): .qv2-szene z 0 Kulissenbild + Doris-Ecke #contentScroll z 1 das eigentliche Quest-UI (scrollt) .qv2-vorn z 2 AP-Anzeige, Blaetter — liegen UEBER dem Panel ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════ DESKTOP (ab 641px) ══════════════════════ */ @media (min-width: 641px) { :root { /* Breite des Kulissenstreifens links. Das Brett im Bild endet bei rund 31 % der Bildbreite — 25vw trifft das knapp darunter, die Grenzen halten den Streifen bei sehr schmalen und sehr breiten Fenstern brauchbar. */ --qv2-links: clamp(276px, 25vw, 420px); /* Rechter Rand. Er ist KEIN verlorener Platz, sondern der Grund, warum das Panel wie ein Gegenstand VOR der Szene liegt und nicht wie eine Seite, die zufaellig ein Foto im Hintergrund hat. ⚠️ 5vw ist gemessen, nicht geschaetzt: das Kulissenbild fuellt mit "cover" immer die volle Breite, die Panelkante liegt also stabil bei 95 % des Bildes. Dort steht der rechte Pfosten des Grünbach-Schilds. Bei einem breiteren Rand (getestet mit 7vw) schnitt die Panelkante mitten durch das Wort und es stand „h →" am Rand. */ --qv2-rechts: clamp(56px, 5vw, 90px); --qv2-luft: 16px; } /* ── Die Charakterspalte bleibt stehen ──────────────────────────────── Beim Umbau (22a3319) war sie hier ausgeblendet: volle Breite fuers Questinterface, dafuer eine schwebende AP-Anzeige oben links. Seit es in der Spalte den Schnellzugriff gibt (713f6d2), muss sie auf JEDER Seite da sein — sonst verschwinden die Lieblingsziele genau dort, wo man sie braucht (Minni, 2026-09-13). Nachgemessen mit Spalte: Panel 758 px bei 1440, 518 px bei 1100, kein Querlauf, Doris ueberlappt nichts. Die schwebende AP-Anzeige ist damit entfallen — die Spalte zeigt die AP direkt daneben. Mobil gibt es keine Spalte; dort bleibt .qv2-mob-ap. */ /* ── Kulisse ────────────────────────────────────────────────────────── Liegt NEBEN dem Scrollbereich, nicht darin: so steht sie still, waehrend die Questliste darueber scrollt. (Gleiche Ueberlegung wie bei der Dorfbuehne.) */ .main-col.qv2-hat-szene { position: relative; overflow: hidden; } .qv2-szene, .qv2-vorn { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .qv2-szene { z-index: 0; } .qv2-vorn { z-index: 2; } .qv2-vorn > * { position: absolute; } /* "left center": das Auftragsbrett steht im Bild links. Bei "center" waere es je nach Fensterverhaeltnis halb abgeschnitten, und Doris stuende vor dem leeren Dorfplatz statt vor dem Brett. */ .qv2-bild { position: absolute; inset: 0; background: url('../assets/quest/brett.webp') left center / cover no-repeat; } /* Es gibt nur ein Tagbild. Der Nachtmodus graded es, statt ein zweites zu laden — dasselbe Vorgehen wie bei der Dorfszene. */ [data-theme="dark"] .qv2-bild::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at 14% 86%, rgba(120,78,32,.22), transparent 70%), linear-gradient(180deg, rgba(12,28,60,.62) 0%, rgba(8,18,40,.54) 50%, rgba(5,12,28,.46) 100%); } /* Sehr leichter Schleier: nimmt dem Bild die Unruhe unter dem Panel, ohne es auszuwaschen. Am linken Rand bleibt es klar — dort steht das Brett. */ .qv2-schleier { position: absolute; inset: 0; background: radial-gradient(130% 90% at 12% 100%, rgba(255,255,255,.26), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%, rgba(30,42,74,.12) 100%); } [data-theme="dark"] .qv2-schleier { display: none; } /* ── Das Questinterface ─────────────────────────────────────────────── Der Scrollbereich wird durchsichtig und laesst links den Streifen frei; das Panel darin traegt die Flaeche. */ .main-col.qv2-hat-szene > .content-scroll { position: relative; z-index: 1; background: transparent; padding: var(--qv2-luft) var(--qv2-rechts) 26px var(--qv2-links); } /* Ein helles, leicht schwebendes Panel vor der Spielwelt. Bewusst fast deckend: die Karten darin sollen genauso gut lesbar bleiben wie vorher, der Bildhintergrund darf nicht durch die Texte scheinen. Zwei background-Zeilen: die erste ist der Rueckfall fuer Browser ohne color-mix, die zweite gibt dem Rand einen Hauch Durchsicht. */ .main-col.qv2-hat-szene .q2-wrap { background: var(--card); background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 22px 56px rgba(24,38,68,.26), 0 2px 8px rgba(24,38,68,.10); padding: 16px 18px 20px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } [data-theme="dark"] .main-col.qv2-hat-szene .q2-wrap { box-shadow: 0 22px 56px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); } /* ⚠️ Rasterzellen duerfen schrumpfen. Gitterkinder haben von Haus aus min-width:auto und werden nie schmaler als ihr Inhalt — die Schienenleiste einer langen Questreihe (10 Stationen) ist rund 413px breit und sprengte bei 1100px Fensterbreite gemessen die Spalte um 44px nach rechts. Mit min-width:0 greift stattdessen das overflow-x:auto, das .q2-rail ohnehin schon hat: die Reihe scrollt in sich, die Karte bleibt im Raster. Nur hier gesetzt, damit das alte Layout unberuehrt bleibt. */ .main-col.qv2-hat-szene .q2-grid > * { min-width: 0; } /* ── Doris am Brett ─────────────────────────────────────────────────── Bild und Sprechblase stecken in EINER Ecke, die so breit ist wie der Streifen. Dadurch skalieren beide gemeinsam und die Blase bleibt an ihrer Schulter, ohne dass zwei absolute Positionen aufeinander abgestimmt werden muessen. */ .qv2-ecke { left: 0; bottom: 0; width: var(--qv2-links); display: block; } /* 70 % statt der ganzen Streifenbreite: rechts neben ihrem Kopf muss die Sprechblase Platz haben, ohne ihr Gesicht zu verdecken. Dasselbe Verhaeltnis wie im Entwurf. */ .qv2-doris { display: block; width: 76%; height: auto; filter: drop-shadow(0 12px 20px rgba(26,38,64,.34)); } [data-theme="dark"] .qv2-doris { filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)) brightness(.86); } /* Sprechblase als HTML/CSS, nicht als Grafik: so folgt sie dem Theme, ist uebersetzbar und bleibt bei jeder Schriftgroesse scharf. ⚠️ Die rechte Kante bleibt INNERHALB des Streifens (right: 3%), damit sie das Panel nicht anschneidet — gemessen ragte sie mit right:-6% um 24px darueber und lag auf der linken Kante der ersten Questkarte. */ .qv2-blase { position: absolute; left: 52%; right: 3%; bottom: 52%; padding: 9px 12px 10px; background: var(--card); background: color-mix(in srgb, var(--card) 96%, transparent); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; box-shadow: 0 10px 24px rgba(24,38,68,.22); } /* Der Zipfel zeigt nach links unten auf Doris. Zwei Dreiecke: das untere traegt die Randfarbe, das obere deckt es bis auf den Rand wieder ab. */ .qv2-blase::before, .qv2-blase::after { content: ''; position: absolute; left: -9px; bottom: 7px; border: 5px solid transparent; border-right-width: 9px; border-left-width: 0; } .qv2-blase::before { border-right-color: var(--border); } .qv2-blase::after { left: -8px; border-right-color: var(--card); } .qv2-blase-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .82rem; color: var(--primary-d); margin-bottom: 2px; } [data-theme="dark"] .qv2-blase-name { color: var(--primary); } .qv2-blase-text { margin: 0; font-size: .74rem; line-height: 1.45; color: var(--text2); } /* ── Blattwerk ueber der Panelkante ─────────────────────────────────── Der eigentliche Trick fuer "das UI steckt in der Welt": ein paar Zweige liegen VOR dem Panel, nicht dahinter. Bewusst sparsam und alle an den Ecken — mitten im Text haetten sie nichts zu suchen. Die Dateien gibt es bereits (Megamenue und Newskasten nutzen sie), es kommt kein neues Bild dazu. */ .qv2-blatt { opacity: .92; } /* ⚠️ Ueber "right" statt "left" gesetzt: so liegt die RECHTE Kante des Zweigs an einer bekannten Stelle — 12px hinter der linken Panelkante — egal wie breit er bei der aktuellen Fenstergroesse gerade ist. Mit left+width haengt die Ueberlappung an der Breite und waechst mit ihr; in der ersten Fassung lag der Zweig dadurch quer ueber dem Reiter „Aufträge". Er darf die Ecke beruehren, aber nichts verdecken. */ .qv2-blatt--ol { right: calc(100% - var(--qv2-links) - 12px); top: -20px; width: clamp(112px, 11vw, 172px); transform: rotate(-3deg); } /* Spiegelbildlich zu --ol: die LINKE Kante liegt 14px vor der rechten Panelkante, der Rest haengt im rechten Rand. Gemessen deckte die erste Fassung 52x41px des Reiters „Erledigt" ab. */ .qv2-blatt--or { left: calc(100% - var(--qv2-rechts) - 14px); top: -16px; width: clamp(58px, 5.6vw, 92px); transform: scaleX(-1) rotate(7deg); } [data-theme="dark"] .qv2-blatt { opacity: .62; filter: brightness(.8); } /* ⚠️ KEIN zweites Grünbach-Schild als Overlay. Es steckt bereits im Kulissenbild (rechts unten) und stuende sonst doppelt da. Ein Versuch mit eigenem Schild deckte ausserdem gemessen 60x133px einer Questkarte ab — das Panel ist so hoch wie sein Inhalt, unten rechts steht also fast immer eine Karte. Deko verdeckt hier nichts; das gilt fuer alle Teile in .qv2-vorn und ist der Grund fuer die gerechneten Kanten oben. */ /* ── Enger: der Questinhalt hat Vorrang ─────────────────────────────── Unter 1240px wird die Blase zuerst still (sie braucht die meiste Breite fuer den wenigsten Nutzen), unter 1080px geht auch Doris. Die Kulisse und die AP-Anzeige bleiben — sie kosten keine Breite. */ @media (max-width: 1239px) { .qv2-blase { display: none; } } @media (max-width: 1079px) { :root { --qv2-links: 0px; --qv2-rechts: 16px; } .qv2-ecke { display: none; } /* Ohne Doris-Streifen beginnt das Panel am linken Rand. (Frueher rueckte es hier 44 px nach unten, um der schwebenden AP-Anzeige Platz zu machen — die gibt es nicht mehr.) */ .main-col.qv2-hat-szene > .content-scroll { padding: var(--qv2-luft) var(--qv2-rechts) 26px var(--qv2-luft); } .qv2-blatt--ol { right: auto; left: -16px; top: 20px; } } } /* ══════════════════════ MOBIL (bis 640px) ══════════════════════ Nach dem Mobil-Entwurf: dieselbe Szene wie am Desktop, nur als randloses Kopfbild ueber der Liste. Darueber schwebt die AP-Karte — und sie bleibt beim Scrollen oben stehen, weil AP auf dieser Seite die Waehrung sind. Das Quest-UI selbst bleibt, was es ist. Geaendert werden nur zwei Anordnungen, die auf 375px Breite nicht aufgehen: die Reiterleiste und der Kopf der Tagesaufgaben-Karte. Gleiche Elemente, gleiche Texte. */ @media (max-width: 640px) { /* Entspricht dem Polster von .content-scroll (style.css, @media 640px: padding:10px). Steht hier als EINE Zahl, damit das randlose Kopfbild nicht an drei Stellen nachgezogen werden muss. */ .q2-wrap { --qv2-mob-rand: 10px; } /* ⚠️ Die Huelle darf KEIN eigener Kasten sein. Ein sticky Element klebt nur, solange sein Elternteil im Bild ist — steckte die AP-Karte in einem Kaestchen, das nur so hoch ist wie das Kopfbild, waere sie mit dem Bild nach oben gerollt. Gemessen: nach 500px Scrollen stand sie bei -75px. display:contents haengt Karte und Szene direkt unter .q2-wrap. */ .qv2-mob-kopf { display: contents; } /* ── AP-Karte ─────────────────────────────────────────────────────────── ⚠️ Sie steht VOR der Szene im Fluss und zieht diese mit einem negativen Rand unter sich. Nur so kann sie sticky sein: absolut in der Szene positioniert waere die Szene ihr Bezugsrahmen und sie waere mit ihr aus dem Bild gescrollt. Die Zahl unten ist ihre Hoehe plus ihr oberer Rand. */ .qv2-mob-ap { position: sticky; top: 6px; z-index: 6; width: max-content; max-width: calc(100% - 16px); margin: 8px 0 -52px 4px; display: flex; flex-direction: column; gap: 6px; padding: 7px 11px 8px; background: var(--card); background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 6px 18px rgba(24,38,68,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* 1px hoher Merker vor der Karte — siehe qv2MobilKleben() im JS. */ .qv2-mob-merker { height: 1px; margin: 0; } /* Klebt sie oben, wird sie zur Leiste ueber die volle Breite: als schmale Karte deckte sie gemessen die Ueberschrift der ersten Tagesaufgabe halb ab. Am Kopfbild bleibt sie schmal, wie im Entwurf. */ .qv2-mob-ap.klebt { width: auto; max-width: none; margin-left: 0; margin-right: 0; flex-direction: row; align-items: center; gap: 10px; background: var(--card); background: color-mix(in srgb, var(--card) 97%, transparent); box-shadow: 0 8px 22px rgba(24,38,68,.28); } .qv2-mob-ap.klebt .qv2-mob-ap-track { flex: 1; width: auto; } .qv2-mob-ap-kopf { display: flex; align-items: center; gap: 7px; line-height: 1.1; } .qv2-mob-ap-lbl { font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); } .qv2-mob-ap-zahl { font-size: .84rem; font-weight: 900; color: var(--text); white-space: nowrap; margin-left: 2px; } .qv2-mob-ap-track { display: block; width: 128px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); } .qv2-mob-ap-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), #7c92f9); transition: width .25s; } .qv2-mob-ap-fill.ist-knapp { background: linear-gradient(90deg, var(--gold), #fbbf24); } .qv2-mob-ap-fill.ist-leer { background: linear-gradient(90deg, var(--red), #f87171); } /* ── Kopfbild ─────────────────────────────────────────────────────────── Randlos bis an die Bildschirmkanten, wie im Entwurf. Die Hoehe haengt am Seitenverhaeltnis, ist aber nach oben gedeckelt: auf kleinen Geraeten soll die Liste nicht erst nach einem halben Bildschirm anfangen. */ .qv2-mob-szene { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--qv2-mob-rand)) 12px; /* ⚠️ Feste Hoehe statt aspect-ratio + max-height: sobald die Deckelung greift, rechnet aspect-ratio die BREITE aus der gedeckelten Hoehe zurueck — gemessen war die Szene dadurch 337 statt 375px breit und endete 38px vor dem rechten Bildschirmrand. */ height: clamp(240px, 42vh, 360px); background: url('../assets/quest/brett-klein.webp') left center / cover no-repeat; border-bottom: 1.5px solid var(--border); } [data-theme="dark"] .qv2-mob-szene::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,28,60,.62), rgba(6,14,32,.5)); } /* Sie sitzt links am Brett wie am Desktop. 62 % laesst rechts daneben Platz fuer die Sprechblase, ohne ihr Gesicht zu verdecken. */ .qv2-mob-doris { position: absolute; left: -2%; bottom: 0; z-index: 2; width: 62%; height: auto; filter: drop-shadow(0 8px 14px rgba(26,38,64,.34)); } [data-theme="dark"] .qv2-mob-doris { filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) brightness(.86); } .qv2-mob-blase { position: absolute; left: 46%; right: 3%; bottom: 30%; z-index: 3; padding: 8px 11px 9px; background: var(--card); background: color-mix(in srgb, var(--card) 96%, transparent); border: 1px solid var(--border); border-radius: 13px 13px 13px 4px; box-shadow: 0 8px 20px rgba(24,38,68,.24); } .qv2-mob-blase::before, .qv2-mob-blase::after { content: ''; position: absolute; left: -9px; bottom: 7px; border: 5px solid transparent; border-right-width: 9px; border-left-width: 0; } .qv2-mob-blase::before { border-right-color: var(--border); } .qv2-mob-blase::after { left: -8px; border-right-color: var(--card); } .qv2-mob-blase .qv2-blase-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: .76rem; color: var(--primary-d); margin-bottom: 1px; } [data-theme="dark"] .qv2-mob-blase .qv2-blase-name { color: var(--primary); } .qv2-mob-blase .qv2-blase-text { margin: 0; font-size: .68rem; line-height: 1.4; color: var(--text2); } /* ── Reiter als 2x2 ───────────────────────────────────────────────────── style.css macht die Leiste mobil waagerecht scrollbar. Das versteckt den vierten Reiter hinter einer Geste, die niemand sieht — im Entwurf stehen alle vier gleichzeitig da. Nur hier, nicht bei der Rangliste, die dieselbe Klasse benutzt. */ #contentScroll .q2-wrap .view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; } #contentScroll .q2-wrap .view-tab { flex: 1 1 auto; justify-content: center; padding: 10px 8px; font-size: .78rem; white-space: normal; } /* ── Tagesaufgaben ────────────────────────────────────────────────────── Untereinander statt zweispaltig: bei 200px Mindestbreite standen sie zwischen 481 und 640px zu zweit nebeneinander und die Texte brachen auf fuenf Zeilen um. .daily-task-grid gibt es nur auf der Questseite. */ .daily-task-grid { grid-template-columns: 1fr; } /* Kopf der Karte wie im Entwurf: Symbol links, Titel daneben, XP/Gold rechts — statt Symbol und Belohnung allein in einer Zeile darueber. ⚠️ display:contents an .dtask-top, damit Symbol und Belohnung eigene Rasterzellen werden. Gleiche Elemente, gleiche Texte, andere Ordnung. */ .q2-wrap .dtask-card { display: grid; grid-template-columns: auto 1fr auto; column-gap: 11px; row-gap: 7px; align-items: start; } .q2-wrap .dtask-top { display: contents; } .q2-wrap .dtask-emoji { grid-column: 1; grid-row: 1 / span 2; font-size: 1.7rem; align-self: center; } .q2-wrap .dtask-title { grid-column: 2; grid-row: 1; align-self: center; } .q2-wrap .dtask-badges { grid-column: 3; grid-row: 1; } .q2-wrap .dtask-desc { grid-column: 2 / -1; grid-row: 2; } /* Alles Weitere (Fortschritt, Raetsel, Fertig-Kasten, Fusszeile) laeuft ueber die volle Breite darunter. */ .q2-wrap .dtask-card > *:not(.dtask-top):not(.dtask-emoji):not(.dtask-badges):not(.dtask-title):not(.dtask-desc) { grid-column: 1 / -1; } }