/* ============================================================ Style_2-2_Woerterbuch.css — Wörterbuch-Seite (alle Einträge) ============================================================ Designvorgaben: - Primärfarbe (Dunkelblau): var(--primary) / #0A3D62 - Akzentfarbe (Goldgelb): var(--accent) / #F4C542 - Sekundärfarbe (Grün): var(--secondary)/ #2E5E2E - Hintergrund: var(--bg-light) / #F8F5F0 - Neutral Grau: var(--neutral) / #E6E6E6 Aufbau der Seite von oben nach unten: 1. Titel-Block (.section-intro) 2. großes Suchfeld (.wb-suchfeld) 3. Filterzeile: Niveau-Buttons + Wortart-Auswahl (.wb-filter) 4. Alphabet-Leiste A–Ž (.wb-abc) 5. Statuszeile ("123 Treffer") (.wb-status) 6. Trefferliste als Karten-Grid (.wb-liste) Die .level-btn-Optik der Niveau-Buttons steht zentral in /Code/Style.css – wie auf der Vokabel- und der Grammatik-Übersicht. Hier stehen nur die Ergänzungen dieser Seite. ============================================================ */ /* ── Main-Bereich ──────────────────────────────────────────── */ main { /* Abstand nach oben, da der Header fixed (ca. 63 px hoch) ist */ margin-top: 70px; padding: 70px 5%; /* width: 100% ist Pflicht, nicht Kosmetik (siehe CLAUDE.md): ist ein Flex-Container,
ein Flex-Item. Ohne feste Breite schrumpft es auf Inhaltsbreite und wird von breiten Inhalten über den Viewport gebläht – der Überlauf würde dann unsichtbar abgeschnitten statt scrollbar zu sein. */ width: 100%; } /* ── Section-Intro Block ───────────────────────────────────── */ /* Pflicht-Struktur laut Designvorgabe für alle Sections */ .section-intro { text-align: center; margin-bottom: 30px; } .section-intro h1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.4rem; text-transform: uppercase; /* Großbuchstaben bei Haupttiteln */ letter-spacing: 0.5px; color: var(--primary); margin-bottom: 12px; } .section-intro p { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; color: var(--secondary); } /* ============================================================ 1. SUCHFELD ============================================================ */ /* Wrapper zentriert das Feld und begrenzt seine Breite auf großen Monitoren – ein über 1400px breites Eingabefeld liest sich schlecht. */ .wb-suchfeld { position: relative; /* Bezugspunkt für Lupe und X-Button */ max-width: 620px; margin: 0 auto 22px; } .wb-suchfeld input { width: 100%; /* links Platz für die Lupe, rechts für den Leeren-Button */ padding: 14px 46px 14px 46px; border: 2px solid var(--neutral); border-radius: 6px; /* Designvorgabe: 6px */ background: #fff; font-family: 'Open Sans', sans-serif; font-size: 1.05rem; color: var(--primary); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .wb-suchfeld input::placeholder { color: #8a8a8a; /* 4,6:1 auf Weiß – lesbar, aber zurückhaltend */ } .wb-suchfeld input:focus { outline: none; /* durch den Rahmen unten ersetzt */ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.15); } /* Lupe links im Feld – rein dekorativ, deshalb pointer-events: none, damit ein Klick darauf trotzdem im Eingabefeld landet. */ .wb-suchfeld-lupe { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--secondary); pointer-events: none; } /* X-Button rechts im Feld: leert die Suche. Wird per JS ein-/ausgeblendet. */ .wb-suchfeld-leeren { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; border-radius: 6px; cursor: pointer; color: var(--primary); font-size: 1.1rem; transition: background 0.2s; } .wb-suchfeld-leeren:hover { background: var(--neutral); } /* WICHTIG: Das HTML-Attribut "hidden" versteckt ein Element nur über die Browser-Standardregel [hidden] { display: none }. Sobald wir hier selbst ein display setzen (oben: flex), gewinnt unsere Regel – der Button bliebe trotz hidden sichtbar. Deshalb muss jedes Element, das per hidden ein-/ausgeblendet wird UND ein eigenes display bekommt, diese Zeile haben. Betrifft auf dieser Seite den Leeren-Button und den "Weitere anzeigen"- Bereich (siehe .wb-mehr-wrap weiter unten). */ .wb-suchfeld-leeren[hidden] { display: none; } /* ============================================================ 2. FILTERZEILE (Niveau + Wortart) ============================================================ */ .wb-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-bottom: 22px; } /* Eine Gruppe = Beschriftung + Bedienelemente */ .wb-filter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /*
bringt von Haus aus Rahmen und Innenabstand mit – hier wird beides entfernt, die Struktur bleibt aber erhalten (wichtig für Screenreader: die benennt die Gruppe). */ border: none; padding: 0; margin: 0; } .wb-filter-label { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--secondary); /* sitzt ohne float mitten im Textfluss über der Gruppe. float: left reiht sie stattdessen als erstes Element in die Flex-Zeile ein – so steht "Niveau" links neben den Buttons. */ float: left; padding: 0; margin-right: 4px; line-height: 34px; /* auf Höhe der Buttons ausrichten */ } /* Niveau-Buttons: kompaktere Variante der zentralen .level-btn-Optik aus /Code/Style.css. Nur Größe wird hier angepasst, Farben und Aktiv-Zustand bleiben projektweit einheitlich. */ .wb-filter .level-btn { padding: 6px 14px; font-size: 0.82rem; min-height: 34px; } /* Wortart-Auswahl */ .wb-select { font-family: 'Open Sans', sans-serif; font-size: 0.88rem; color: var(--primary); background: #fff; border: 2px solid var(--primary); border-radius: 6px; padding: 7px 12px; min-height: 34px; cursor: pointer; transition: border-color 0.25s ease; } .wb-select:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* ============================================================ 3. ALPHABET-LEISTE (A–Ž) ============================================================ */ /* Die Leiste steckt in einem
-Element. Auf dem Desktop ist es immer offen und die unsichtbar – dort ist Platz genug. Auf schmalen Geräten klappt das JS es zu (siehe abcBoxAnpassen() im HTML) und die wird zur Aufklapp-Zeile. */ .wb-abc-box { margin-bottom: 4px; } /* Aufklapp-Zeile – auf dem Desktop ausgeblendet, siehe @media unten */ .wb-abc-summary { display: none; } .wb-abc { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; margin: 0 auto 10px; } .wb-abc-btn { min-width: 38px; min-height: 38px; /* Touch-Ziel */ padding: 4px 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--primary); background: #fff; border: 1px solid var(--neutral); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .wb-abc-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* Gerade gewählter Buchstabe – wie .level-btn.active in Goldgelb, damit "ausgewählt" projektweit dieselbe Farbe hat. */ .wb-abc-btn.active { background: var(--accent); border-color: var(--accent); color: var(--primary); font-weight: 700; } .wb-abc-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Erklärzeile unter dem Alphabet (Dž/Lj/Nj-Hinweis) */ .wb-abc-hinweis { max-width: 900px; margin: 0 auto 26px; text-align: center; font-size: 0.8rem; color: #5a5a5a; } /* ============================================================ 4. STATUSZEILE ============================================================ */ .wb-status { max-width: 1100px; margin: 0 auto 18px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--secondary); min-height: 1.6em; /* verhindert Springen beim Umschalten */ } /* Fehlermeldung (JSON nicht ladbar) */ .wb-status.wb-fehler { color: #b03030; } /* ============================================================ 5. TREFFERLISTE ============================================================ */ /* auto-fill füllt so viele Spalten wie möglich; auf dem Handy bleibt dadurch automatisch eine einzige Spalte übrig. */ .wb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; list-style: none; /*