/* --------------------------------------------------------------------------- Glossar — eigene Styles WICHTIG: Dieses File ist handgeschrieben und wird NICHT vom Tailwind-Build in /dev erzeugt. Grund: der Build erzeugt ausschliesslich css/styles.min.css, und der Quellbaum in /dev auf diesem Server ist nicht der, aus dem die ausgelieferte styles.min.css gebaut wurde (siehe Notiz unten). Glossar-Styles hier zu halten heisst: ein Deploy der generierten styles.min.css kann sie nicht ueberschreiben, und es braucht keinen Build-Lauf auf dem Server. Geladen wird das File nur von den Templates "Glossar-Uebersicht" und "Glossar-Begriff". Alles, was mit bestehenden Klassen aus styles.min.css loesbar ist (cms-text-xl, page-header, max-w-5xl, px-4 …), wird dort geloest und steht nicht hier. Farben kommen aus den CSS-Variablen der ausgelieferten styles.min.css (--color-yellow, --color-gray-dark, --text-*). Dark Mode laeuft ueber die Klasse .dark am -Element (setzt js/scripts.min.js). --------------------------------------------------------------------------- */ /* ---------- Begriffs-Seite ---------- */ .glossar-kicker { text-decoration: none; } .glossar-kicker:hover { text-decoration: underline; } /* Fliesstext eines Eintrags: zwei Absaetze, angenehme Zeilenlaenge */ .glossar-body { max-width: 42em; } .glossar-body p { margin: 0 0 1em; line-height: 1.6; } .glossar-body p:last-child { margin-bottom: 0; } .glossar-body code { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.9em; padding: 0.1em 0.3em; background-color: rgb(0 0 0 / 0.07); border-radius: 0.2em; } .dark .glossar-body code { background-color: rgb(255 255 255 / 0.12); } /* Links im Glossar-Text und automatisch gesetzte Begriffslinks: gleiche gelbe Markierung wie Links im page-header */ .glossar-body a, a.glossar-link { background-color: var(--color-yellow); text-decoration: none; } .dark .glossar-body a, .dark a.glossar-link { background-color: var(--color-gray-dark); } .glossar-body a:hover, a.glossar-link:hover { text-decoration: underline; } /* ---------- Siehe auch ---------- */ .glossar-seealso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem; } @media (min-width: 768px) { .glossar-seealso { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .glossar-seealso a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } /* ---------- Uebersicht: A–Z-Sprungnavigation ---------- */ .glossar-az { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 2rem; } .glossar-az a, .glossar-az span { display: inline-block; min-width: 1.75em; padding: 0.1em 0.25em; text-align: center; text-decoration: none; } .glossar-az a:hover { background-color: var(--color-yellow); } .dark .glossar-az a:hover { background-color: var(--color-gray-dark); } /* Buchstaben ohne Eintraege bleiben sichtbar, aber ohne Link */ .glossar-az span { opacity: 0.35; } /* ---------- Uebersicht: Kategorie-Filter ---------- */ .glossar-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; } .glossar-cats button { padding: 0.25em 0.75em; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; font: inherit; line-height: 1.4; } .glossar-cats button:hover { background-color: var(--color-yellow); } .dark .glossar-cats button:hover { background-color: var(--color-gray-dark); } .glossar-cats button.is-active { background-color: var(--color-yellow); } .dark .glossar-cats button.is-active { background-color: var(--color-gray-dark); } /* ---------- Uebersicht: Buchstabengruppen und Liste ---------- */ /* Sanftes Springen fuer die A-Z-Navigation. Steht bewusst hier und nicht in styles.min.css: dieses File laedt nur auf den beiden Glossar-Templates, die Regel bleibt damit auf das Glossar beschraenkt. `no-preference` statt `reduce`: wer "Bewegung reduzieren" gesetzt hat, bekommt weiterhin den harten Sprung. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .glossar-letter { margin: 0 0 2.5rem; /* Abstand unter der stickyen Navbar, sonst steht die Ueberschrift darunter. */ scroll-margin-top: 6rem; } .glossar-letter > h2 { margin: 0 0 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid currentColor; } .glossar-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; } @media (min-width: 768px) { .glossar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .glossar-list > li { min-width: 0; } .glossar-list a { text-decoration: none; background-color: var(--color-yellow); } .dark .glossar-list a { background-color: var(--color-gray-dark); } .glossar-list a:hover { text-decoration: underline; } /* Definition in der Uebersicht: der vollstaendige Satz steht im Markup (Crawler, Screenreader), sichtbar sind drei Zeilen. */ .glossar-def { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: var(--text-small, 1rem); line-height: 1.45; opacity: 0.8; margin-top: 0.15rem; } /* Kategorie-Filter: rein in CSS, gesteuert vom data-cat am Container. Eintraege anderer Kategorien und dadurch leere Buchstabengruppen verschwinden. Reihenfolge = Reihenfolge der TV-Optionen. */ .glossar-index[data-cat="design-ux"] .glossar-list > li:not([data-cat="design-ux"]), .glossar-index[data-cat="technik"] .glossar-list > li:not([data-cat="technik"]), .glossar-index[data-cat="seo-content"] .glossar-list > li:not([data-cat="seo-content"]), .glossar-index[data-cat="struktur-projekt"] .glossar-list > li:not([data-cat="struktur-projekt"]), .glossar-index[data-cat="ecommerce"] .glossar-list > li:not([data-cat="ecommerce"]) { display: none; } .glossar-index[data-cat="design-ux"] .glossar-letter:not(:has(> .glossar-list > li[data-cat="design-ux"])), .glossar-index[data-cat="technik"] .glossar-letter:not(:has(> .glossar-list > li[data-cat="technik"])), .glossar-index[data-cat="seo-content"] .glossar-letter:not(:has(> .glossar-list > li[data-cat="seo-content"])), .glossar-index[data-cat="struktur-projekt"] .glossar-letter:not(:has(> .glossar-list > li[data-cat="struktur-projekt"])), .glossar-index[data-cat="ecommerce"] .glossar-letter:not(:has(> .glossar-list > li[data-cat="ecommerce"])) { display: none; }