/* ========================================================================== pages/faq.css Haeufige Fragen. Seitenkopf, drei Themengruppen mit Aufklappern, Abschluss mit den beiden direkten Wegen. KEIN JAVASCRIPT. Die Aufklapper sind
und , das kann der Browser selbst: Tastatur, Vorlesen, Aufklappen. Ein eigenes Skript mit role="button" und aria-expanded waere mehr Code fuer schlechteres Verhalten. Ohne Javascript funktioniert die Seite vollstaendig - sie braucht es nicht einmal. IMMER NUR EINE FRAGE OFFEN, Kundenwunsch vom 28.08.2026. Auch das erledigt der Browser: alle einundzwanzig
tragen name="faq" und bilden damit eine Gruppe, in der nur eines offen sein kann. Ein Klick auf die naechste Frage schliesst die vorige, ein Klick auf die offene schliesst sie. Kein Skript, kein Zustand an zwei Stellen. EIN NAME FUER DIE GANZE SEITE, nicht einer je Themengruppe: der Wunsch war "nur eines offen", und die Gruppen liegen ohnehin so weit auseinander, dass man das Schliessen in der vorigen Gruppe nicht sieht. Aeltere Browser ohne das name-Attribut - vor Chrome 120 und Safari 17.2, beide von Dezember 2023, und vor Firefox 130 vom September 2024 - wuerden mehrere Fragen offen lassen. Dafuer liegt js/akkordeon.js daneben, das dieselbe Regel notfalls selbst durchsetzt. Es laeuft immer und findet in aktuellen Browsern nichts zu tun; die Begruendung dafuer steht in der Datei. Die Seite bleibt ohne Javascript vollstaendig benutzbar. FUER WORDPRESS: die Gruppe ist eine Wiederholung, die Frage eine Wiederholung darin. Empfehlung ACF-Repeater "faq_gruppen" mit den Feldern titel, schwungzeile und dem Unterrepeater "fragen" (frage, antwort als WYSIWYG). KEIN eigener Custom Post Type: die Fragen brauchen keine eigene URL, kein Archiv und keine Vorschau, dafuer aber eine feste Reihenfolge zum Ziehen. Ein CPT liefert das Gegenteil von beidem. Die Sprungmarken je Frage bleiben trotzdem verlinkbar - die id kommt im Theme aus sanitize_title() der Frage. ========================================================================== */ /* --- Seitenkopf --------------------------------------------------------- */ /* Wie .kkopf und .rezkopf: kein Bogen, kein Stimmungsbild. Die FAQ-Seite hat kein einzelnes Motiv, das selbst der Inhalt waere - damit ist sie nach der Hero-Regel vom 28.08.2026 eine Infoseite. */ /* UNTERES POLSTER DER SEITENKOEPFE: --sp-8, also 64 px. Vereinheitlicht am 28.08.2026, freigegeben nach Ansicht von /rezepte/. Vorher standen hier drei Werte fuer dieselbe Lage: 32 px (FAQ, Stellenarchiv, Stellendetail), 48 px (Kontakt) und 64 px (Rezeptliste). Massgeblich ist die Startseite: sie setzt zwischen Textblock und Inhalt 62 px. 32 px waren weniger als die Haelfte davon. DIE KOEPFE MIT BOGEN sind NICHT betroffen - .dlkopf, .hakopf und .pkopf liegen bei 114 bis 122 px, darin stecken rund 90 px Bogen. Sie sind strukturell anders und untereinander stimmig. */ .fkopf { background: var(--bg-page); padding-block: var(--sp-sektion) var(--sp-8); } .fkopf__title { font-family: var(--font-body); font-size: var(--fs-600); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--toem-blau); margin: 0 0 var(--sp-4); } /* Der Token, kein em-Faktor - wie im Produktkopf, auf der Rezeptliste und auf der Kontaktseite. NICHT in die em-Gruppen von feinschliff.css eintragen, die wuerden ihn an zwei Breakpoints ueberschreiben. */ .fkopf__title em { font-size: var(--fs-800); margin: -0.08em 0 0; padding-block: 0.04em 0.06em; } .fkopf__lead { max-width: 34rem; font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-muted); margin: 0; } /* --- Sprungmarken zu den drei Gruppen ----------------------------------- */ /* Bei einundzwanzig Fragen ist der Weg zur richtigen Gruppe laenger als der Bildschirm. Drei Links kosten eine Zeile und sparen das Scrollen. Textlinks, keine Pillen: Pillen sehen auf dieser Website nach Filter aus, und hier wird nichts gefiltert. Auszeichnung ueber Schriftdicke und Farbe, wie in der Projektregel vom 28.08.2026 festgelegt. */ .fkopf__themen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5); margin: var(--sp-6) 0 0; padding: 0; list-style: none; } .fkopf__themen__label { font-size: var(--fs-100); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } .fkopf__themen a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; font-size: var(--fs-200); font-weight: 600; color: var(--toem-blau); transition: color var(--dur-hover) var(--ease-hover); } .fkopf__themen a:hover, .fkopf__themen a:focus-visible { color: var(--toem-gold); } .fkopf__themen svg { width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none; } /* --- Themengruppen ------------------------------------------------------ */ /* Die Bahnen wechseln weiss, grau, weiss. Damit haben die drei Themen eine sichtbare Grenze, ohne dass eine zusaetzliche Linie oder ein Rahmen dazu kommt - dasselbe Mittel wie beim Sektionswechsel auf der Startseite. scroll-margin-top: der Kopf klebt oben. Ohne diesen Abstand landet die angesprungene Gruppe UNTER der Navigation und man sieht die Ueberschrift nicht, auf die man geklickt hat. Die kompakte Kopfhoehe ist der richtige Wert, weil der Kopf beim Scrollen genau darauf zusammenfaehrt. ANMERKUNG: dieselbe Luecke besteht projektweit, die Startseite verlinkt /herstellung/#schaelverfahren. Ein globales scroll-padding-top am html waere die saubere Loesung, greift aber in jede Seite ein - deshalb hier erst einmal nur oertlich. */ .faqg { padding-block: var(--sp-sektion); /* scroll-margin-top entfernt am 29.08.2026: das Polster steht jetzt global als scroll-padding-top am html in base.css. Beide zusammen haetten sich auf 136 px addiert. */ } .faqg--hell { background: var(--bg-page); } .faqg--grau { background: var(--bg-soft); } /* GEWICHT 600, NICHT 400. Beide Zwischenueberschriften der Seite laufen ohne Grafolita-Schwungzeile - Entscheidung vom 28.08.2026: die Schwungzeile traegt hier allein die H1, damit die Seite eine Spitze hat und nicht drei. Nach der Gewichtsregel in components/sektionstitel.css laeuft eine Ueberschrift ohne Schwungzeile auf 600: sie steht allein und muss die Praesenz selbst tragen. Die geteilte Gruppe dort setzt 400, weil dort jede Ueberschrift eine Schwungzeile hat. */ .faqg__title, .faqhilfe__title { font-weight: 600; } .faqg__title { margin-bottom: var(--sp-6); } /* --- Abschluss: die Frage fehlt ----------------------------------------- */ /* Die beiden Karten kommen unveraendert aus sections/kontakt.css. Dort sind sie hellgrau auf weisser Bahn - genau die Lage, die hier auch vorliegt, also kein Ueberschreiben. */ .faqhilfe { background: var(--bg-page); padding-block: var(--sp-sektion); } .faqhilfe__lead { max-width: 40rem; margin: 0 0 var(--sp-6); font-size: var(--fs-400); line-height: var(--lh-body); color: var(--text-muted); } /* Keine eigene Breitengrenze. Mit max-width: 46rem waren die Karten 356 px breit und die Mailadresse brach auf zwei Zeilen um. Auf /kontakt/ laufen dieselben Karten ueber die halbe Containerbreite, dort passt sie. */ .faqhilfe .kontakt__direct { margin-bottom: 0; } /* Derselbe Fehler wie im Hinweis der Downloadseite: der Link im Abschlusstext war nicht als Link ausgezeichnet, er erbte die Fliesstextfarbe und lief auf Gewicht 400 ohne Hover. Beim systematischen Durchlauf aller Textlinks der neuen Seiten am 28.08.2026 gefunden. Nach der Projektregel: Gewicht 600, Markenblau, Gold beim Hover, keine Unterstreichung. */ .faqhilfe__lead a { color: var(--toem-blau); font-weight: 600; transition: color var(--dur) var(--ease); } .faqhilfe__lead a:hover, .faqhilfe__lead a:focus-visible { color: var(--toem-gold); }