/** * Vösendorf Suche – Frontend * * Die Werte stammen aus der Live-Website, nicht aus einem Entwurf: * Text #06292D, Links #0D5C69, Trennlinien #00A096, Flächen weiss auf * #EBF3F5, Schrift TT Fors, Radius durchgehend 0. Die Ergebniszeile * übernimmt Innenabstand, Schriftgrösse und Pfeil aus den bestehenden * Listen der Seite. * * Alles läuft über Custom Properties. Wer etwas ändern will, überschreibt * eine Variable und nicht eine Regel. */ /* * Eigenes Box-Modell für alle Bestandteile des Plugins. * * Die meisten Themes setzen border-box global – verlassen darf man sich * darauf aber nicht. Ohne diese Regel bezieht sich jede Breiten- und * Mindestbreitenangabe auf die Content-Box, und der runde Suchknopf * gerät um genau seinen Innenabstand zu breit: aus einem Kreis wird ein * Oval. Der Reset ist bewusst auf unsere eigenen Container begrenzt und * fasst den Rest der Seite nicht an. */ .vs-search, .vs-form, .vs-trigger, .vs-overlay, .vs-search *, .vs-form *, .vs-trigger *, .vs-overlay *, .vs-search *::before, .vs-search *::after, .vs-overlay *::before, .vs-overlay *::after { box-sizing: border-box; } /* * Die Variablen müssen auf JEDEM eigenständigen Wurzelelement des Plugins * stehen. Suchknopf und Overlay hängen im Footer und liegen damit * ausserhalb von .vs-search – ohne diese Deklaration wären ihre Farben * schlicht undefiniert und der Knopf bliebe unsichtbar blass. */ .vs-search, .vs-form, .vs-trigger, .vs-overlay { --vs-text: #06292d; --vs-accent: #0d5c69; --vs-line: #00a096; --vs-muted: #8b9fa7; --vs-rule: #d9e5e8; --vs-surface: #fff; --vs-surface-alt: #ebf3f5; --vs-mark-bg: #d6f2ee; --vs-radius: 0; --vs-focus: #0d5c69; /* Leise Trennlinie zwischen Trefferzeilen. Die kräftige Linie in --vs-line bleibt den Abschnitten vorbehalten – sonst wirkt jede Liste wie eine Tabelle. */ --vs-rule-soft: #eaf1f2; /* Noch eine Stufe leiser als --vs-muted, für die Einordnungszeile. */ --vs-muted-soft: #a2b3b9; /* Overlay: Breite orientiert sich an der Lesebreite der Trefferliste. */ --vs-overlay-width: 880px; --vs-overlay-radius: 0; /* * Einzige Rundung im ganzen Plugin: das Kästchen der Beitragsart. * 6px – gross genug, dass es als Etikett lesbar wird, klein genug, * dass es neben den scharfen Kanten der Website nicht auffällt. Alle * Hoverflächen laufen inzwischen wieder eckig. */ --vs-hover-radius: 6px; /* * Schrift. * * "inherit" genügt hier nicht: Elementor setzt TT Fors nicht auf * , sondern über den Kit-Stylesheet auf einzelne Widgets. * Suchknopf und Overlay hängen im Footer, ausserhalb jedes Widgets – * dort erbten sie die Systemschrift, und der Knopf stand plötzlich in * einer anderen Schrift als der Rest der Website. Deshalb der Stack * ausgeschrieben, mit derselben Reihenfolge wie im Theme. */ --vs-font: "TT Fors", "Futura", "Century Gothic", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Farbe des schwebenden Knopfes – bewusst die des vorhandenen Suchen-Knopfes in der Kopfzeile, damit beide als dasselbe Bedienelement gelesen werden. */ --vs-close-size: 44px; --vs-fab-bg: #00a096; --vs-fab-bg-hover: #0d5c69; --vs-fab-fg: #fff; /* Gefüllte Bedienelemente: aktiver Rubrikfilter, Schliessen beim Überfahren. Dieselbe Farbe wie der Suchen-Knopf der Website. */ --vs-chip-fill: #00a096; --vs-chip-fill-fg: #fff; color: var(--vs-text); font-family: var(--vs-font); } /* ========================================================================== Suchformular ========================================================================== */ .vs-form { position: relative; width: 100%; } /* Für Screenreader sichtbar, für das Auge nicht. */ .vs-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .vs-form__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .vs-form__field { display: flex; align-items: stretch; background: var(--vs-surface); border: 1px solid var(--vs-rule); border-radius: var(--vs-radius); } .vs-form__field:focus-within { border-color: var(--vs-accent); box-shadow: inset 0 0 0 1px var(--vs-accent); } .vs-form__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; padding: .75rem 1rem; outline: none; -webkit-appearance: none; appearance: none; } .vs-form__input::-webkit-search-cancel-button, .vs-form__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .vs-form__input::placeholder { color: var(--vs-muted); opacity: 1; } .vs-form__clear { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2.25rem; padding: 0; border: 0; background: transparent; color: var(--vs-muted); cursor: pointer; } .vs-form__clear:hover { color: var(--vs-text); } .vs-form__clear svg { width: 15px; height: 15px; } .vs-form__submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: var(--vs-radius); background: var(--vs-accent); color: #fff; font: inherit; line-height: 1.2; padding: .75rem 1.35rem; cursor: pointer; } .vs-form__submit:hover { background: var(--vs-text); } .vs-form__submit:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 2px; } .vs-loupe { width: 17px; height: 17px; flex: 0 0 auto; } .vs-form__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } /* --- Varianten ---------------------------------------------------------- */ /* * Hero – die Startseiten-Variante. * * Grösser, mit Lupe im Feld statt im Knopf, und darunter die häufigsten * Anliegen als Direktlinks. Das Feld öffnet standardmässig schon beim * Anklicken das Overlay: ein Klick, und man tippt bereits in der Suche, * statt erst eine Ergebnisseite zu laden. */ .vs-formwrap--hero { max-width: 620px; } .vs-form__title { margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 500; color: inherit; } .vs-form--hero .vs-form__field { align-items: center; padding-left: 1.15rem; border-color: transparent; box-shadow: 0 2px 10px rgba(6, 41, 45, .1); } .vs-form--hero .vs-form__icon { display: flex; flex: 0 0 auto; color: var(--vs-muted); } .vs-form--hero .vs-form__icon .vs-loupe { width: 20px; height: 20px; } .vs-form--hero .vs-form__input { padding: 1.05rem .9rem; font-size: 1.0625rem; cursor: text; } .vs-form--hero .vs-form__submit { padding: 1.05rem 1.75rem; align-self: stretch; } /* --- Häufig gesucht ------------------------------------------------------ */ .vs-form__quicklinks { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .55rem; margin-top: .85rem; font-size: .8125rem; } .vs-form__quicklinks-label { color: var(--vs-muted); } .vs-form__quicklinks-list { display: flex; flex-wrap: wrap; gap: .4rem .55rem; list-style: none; margin: 0; padding: 0; } .vs-form__quicklinks-list li { margin: 0; padding: 0; } .vs-form__quicklinks-list li::before, .vs-form__quicklinks-list li::marker { content: none; } .vs-form__quicklinks-list a { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid transparent; } .vs-form__quicklinks-list a:hover { border-bottom-color: currentColor; } /* * Auf dunklem Grund – das Hero-Band der Startseite ist türkis – müssen * Beschriftung und Links hell laufen. Über eine Klasse am Wrapper * steuerbar, damit man sie nicht überschreiben muss. */ .vs-formwrap--hero.is-on-dark .vs-form__title, .vs-formwrap--hero.is-on-dark .vs-form__quicklinks-label { color: rgba(255, 255, 255, .8); } .vs-formwrap--hero.is-on-dark .vs-form__quicklinks-list a { color: #fff; } .vs-form--popup .vs-form__input { padding: .9rem 1.1rem; font-size: 1.0625rem; } .vs-form--popup .vs-form__submit { padding: .9rem 1.5rem; } .vs-form--compact .vs-form__input { padding: .6rem .85rem; font-size: .9375rem; } .vs-form--compact .vs-form__submit { padding: .6rem 1.1rem; font-size: .9375rem; } @media (max-width: 520px) { .vs-form__submit-text { display: none; } .vs-form__submit { padding-left: 1rem; padding-right: 1rem; } } /* ========================================================================== Live-Vorschläge ========================================================================== */ .vs-suggest { position: absolute; z-index: 999; top: 100%; left: 0; right: 0; background: var(--vs-surface); border: 1px solid var(--vs-rule); border-top: 0; border-radius: var(--vs-radius); max-height: min(60vh, 400px); overflow-y: auto; } .vs-suggest[hidden] { display: none; } .vs-suggest__item { display: block; padding: .6rem 1rem; text-decoration: none; color: var(--vs-text); border-bottom: 1px solid var(--vs-rule); line-height: 1.35; } .vs-suggest__item:last-of-type { border-bottom: 0; } .vs-suggest__item:hover, .vs-suggest__item.is-active { background: var(--vs-surface-alt); color: var(--vs-accent); } .vs-suggest__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dieselbe Auszeichnung wie in der Trefferliste – der Zusatz bedeutet hier schliesslich dasselbe. */ .vs-suggest__badge { display: inline-flex; align-items: center; margin-top: .25rem; padding: .15rem .4rem .08rem; border: 1px solid var(--vs-rule-soft); border-radius: var(--vs-hover-radius); font-size: .6rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .3px; color: var(--vs-muted-soft); } .vs-suggest__all { display: block; padding: .6rem 1rem; text-decoration: none; color: var(--vs-accent); background: var(--vs-surface-alt); border-top: 1px solid var(--vs-line); } .vs-suggest__all:hover { text-decoration: underline; } .vs-suggest__empty { padding: .8rem 1rem; margin: 0; color: var(--vs-muted); } /* ========================================================================== Ergebnisseite ========================================================================== */ .vs-search__form { margin-bottom: 1.75rem; max-width: 560px; } .vs-search__head { margin-bottom: 1rem; } .vs-search__count { margin: 0 0 1rem; color: var(--vs-muted); font-size: .8125rem; } .vs-search__hint { margin: .35rem 0 0; font-size: .875rem; color: var(--vs-muted); } .vs-search__back { margin: 0 0 .5rem; font-size: .8125rem; } .vs-search__back a { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid transparent; } .vs-search__back a:hover { border-bottom-color: currentColor; } .vs-search__scope { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: var(--vs-text); } /* --- Filterleiste ------------------------------------------------------- */ /* * Bewusst zurückhaltend: die Gliederung der Seite tragen die beiden * Blöcke darunter. Die Filterleiste ist ein Werkzeug für den, der es * sucht – keine zweite Überschriftenebene. */ /* * Optik wie die Vorschläge im Startzustand des Suchfensters: kräftiger * Schnitt, keine Rahmen, beim Überfahren eine Fläche. Vorher waren es * Reiter mit Unterstrich – eine zweite Formensprache in derselben * Ansicht, direkt über Elementen, die genauso funktionieren. */ .vs-facets { position: relative; margin: 0 0 1.5rem; } /* * Eine Zeile, die sich seitlich schieben lässt, statt einer Leiste, die * über zwei oder drei Zeilen umbricht. Umbrechende Filter schoben die * Treffer nach unten – auf dem Telefon aus dem Bild heraus. Jetzt bleibt * die Höhe konstant, egal wie viele Rubriken es gibt. * * Bewusst ohne scroll-snap: mit Fangpunkten stand die Leiste nach dem * Laden nicht auf 0, sondern auf dem ersten Fangpunkt – und die Blende * links erschien, obwohl links nichts abgeschnitten war. */ .vs-facets__list { display: flex; flex-wrap: nowrap; gap: 0 .1rem; margin: 0 -.55rem; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Die Bildlaufleiste selbst wäre hier nur ein Strich unter den Filtern. */ .vs-facets__list::-webkit-scrollbar { display: none; } /* * Etwas Luft am Ende, damit der nächste Filter angeschnitten stehen * bleibt statt genau an der Kante zu enden. Ein halb sichtbares Element * ist die verlässlichste Aufforderung zum Wischen. */ .vs-facets__list::after { content: ""; flex: 0 0 .75rem; } /* * Weiche Blende an den Rändern – aber nur dort, wo wirklich etwas * abgeschnitten ist. Welche Seite das ist, entscheidet das Skript über * zwei Klassen; ohne JavaScript bleibt die Leiste unmaskiert und * trotzdem bedienbar. * * Umgesetzt als Maske und nicht als weisser Verlauf darüber: die Filter * sind teilweise farbig gefüllt, und ein weisser Schleier über einer * türkisen Fläche sieht nach Fehler aus. Die Maske blendet den Inhalt * selbst aus, unabhängig davon, was darunter liegt. */ .vs-facets.is-overflow-right .vs-facets__list { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 2.25rem); mask-image: linear-gradient(to left, transparent 0, #000 2.25rem); } .vs-facets.is-overflow-left .vs-facets__list { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem); mask-image: linear-gradient(to right, transparent 0, #000 2.25rem); } .vs-facets.is-overflow-left.is-overflow-right .vs-facets__list { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%); } .vs-facets__item { margin: 0; padding: 0; } .vs-facets__item::before, .vs-facets__item::marker { content: none; } .vs-facet { display: inline-block; padding: .3rem .55rem; border: 0; background: transparent; color: var(--vs-accent); text-decoration: none; font-size: .8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background-color .13s ease, color .13s ease; } .vs-facet:hover { background: var(--vs-chip-fill); color: var(--vs-chip-fill-fg); } .vs-facet:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 1px; } /* * Der aktive Filter ist gefüllt, nicht unterstrichen. Ein Unterstrich * verschwindet in einer umbrechenden Leiste; eine Fläche findet das Auge * auch in der zweiten Zeile. */ .vs-facet.is-active { background: var(--vs-chip-fill); color: var(--vs-chip-fill-fg); } .vs-facet__count { margin-left: .3rem; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--vs-muted); } /* --- Die beiden Blöcke -------------------------------------------------- */ .vs-block { margin: 0 0 2.5rem; } .vs-block:last-of-type { margin-bottom: 1.5rem; } .vs-block__title { display: block; margin: 0 0 .3rem; padding: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-transform: none; color: var(--vs-text); } .vs-block__more { margin: .9rem 0 0; font-size: .8125rem; } .vs-block__more a { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid transparent; } .vs-block__more a:hover { border-bottom-color: currentColor; } /* * Der Volltext-Block ist ein

-Element: Auf- und Zuklappen ohne * eine Zeile JavaScript, mit der Tastatur bedienbar, für Screenreader * korrekt ausgezeichnet. */ /* * Keine Linie über dem zweiten Block: sie lag genau unter der letzten * Vorschlagszeile und sah dort aus wie ein Abschluss der Liste statt wie * der Beginn eines neuen Abschnitts. Den Abstand trägt der Rand – wie * überall sonst in dieser Darstellung auch. */ .vs-block--fulltext { padding-top: 0; } /* * Der Abstand gehört zwischen die beiden Blöcke, nicht an den unteren * Block. Steht der Volltextblock allein – weil es keine direkten Treffer * gibt –, wäre er sonst ein Loch über der ersten Überschrift. * * Randzusammenfall beachten: der Abstand ist das Maximum beider Ränder, * nicht ihre Summe. */ .vs-block--primary + .vs-block--fulltext { margin-top: 2.5rem; } .vs-block__summary { display: flex; align-items: baseline; gap: .6rem; cursor: pointer; list-style: none; padding: .25rem 0; } /* Das native Dreieck weicht unserem eigenen Chevron. */ .vs-block__summary::-webkit-details-marker { display: none; } .vs-block__summary::marker { content: none; } .vs-block__summary:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 3px; } .vs-block__summary:hover .vs-block__title { color: var(--vs-accent); } .vs-block__count { font-size: .8125rem; color: var(--vs-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .vs-block__chevron { margin-left: auto; align-self: center; color: var(--vs-line); transition: transform .15s ease; } .vs-block__chevron svg { width: 20px; height: 20px; display: block; } .vs-block--fulltext[open] .vs-block__chevron { transform: rotate(180deg); } .vs-block__body { padding-top: .75rem; } .vs-block__hint { margin: 0 0 .75rem; font-size: .8125rem; color: var(--vs-muted); } @media (prefers-reduced-motion: reduce) { .vs-block__chevron { transition: none; } } /* --- Rubriken ----------------------------------------------------------- */ /* * Der Abstand zwischen den Abschnitten ist deutlich grösser als der * zwischen zwei Trefferzeilen. Diese Staffelung trägt die Gliederung – * deshalb braucht es weder Rahmen noch Flächen um die Abschnitte. */ .vs-group { margin: 0 0 3rem; } .vs-group:last-of-type { margin-bottom: 1.5rem; } .vs-group__title { margin: 0 0 .4rem; padding: 0; font-size: .6125rem; font-weight: 500; line-height: 1.7; letter-spacing: .5px; text-transform: uppercase; color: var(--vs-muted); } .vs-group__more { margin: .9rem 0 0; font-size: .8125rem; } .vs-group__more a { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid transparent; } .vs-group__more a:hover { border-bottom-color: currentColor; } /* --- Trefferliste ------------------------------------------------------- */ .vs-results { list-style: none; margin: 0; padding: 0; } /* * Nur eine leise Linie zwischen den Zeilen, keine oben und keine unten. * Die kräftige Trennung übernimmt der Abstand zwischen den Abschnitten – * das ist der Unterschied zwischen einer Liste und einer Tabelle. */ .vs-result { margin: 0; padding: 0; } .vs-result + .vs-result { border-top: 1px solid var(--vs-rule-soft); transition: border-color .13s ease; } /* * Die Trennlinie liegt auf der Zeilengrenze, die Hoverfläche ragt aber * links und rechts darüber hinaus und hat runde Ecken. Bliebe die Linie * stehen, schnitte sie sichtbar durch die getönte Fläche. * * Deshalb verschwinden beim Überfahren beide Linien, die an die Zeile * grenzen: die über ihr und die der Zeile darunter. Die Fläche steht * dann frei, und die Liste wirkt an dieser Stelle ruhiger statt zerteilt. */ .vs-result:hover, .vs-result:hover + .vs-result, .vs-result:focus-within, .vs-result:focus-within + .vs-result { border-top-color: transparent; } .vs-result::before, .vs-result::marker { content: none; } .vs-result__link { display: flex; align-items: flex-start; gap: 1rem; /* * Der negative Aussenabstand zieht die Hoverfläche über den * Textrand hinaus. Dadurch wirkt die ganze Zeile anfassbar, ohne * dass der Text gegenüber der Überschrift eingerückt erscheint. */ padding: 14px 14px; margin: 0 -14px; /* * Scharfe Ecken wie überall sonst auf der Website. Die Rundung in * --vs-hover-radius bleibt den kleinen Flächen vorbehalten: den * Schnellzugriffen und dem Kästchen der Beitragsart. */ border-radius: 0; text-decoration: none; color: inherit; transition: background-color .13s ease; } .vs-result__link:hover { background: var(--vs-surface-alt); } .vs-result__link:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: -2px; } .vs-result__body { flex: 1 1 auto; min-width: 0; } /* * Der Titel ist der einzige Anker in der Zeile. Er trägt hier mehr * Gewicht als die Fliesstextschnitte der Website (400) – ohne fett zu * werden, was neben der leichten Typografie der Seite fremd wirken würde. */ /* * Titelzeile: Titel und Einordnung stehen nebeneinander auf einer * gemeinsamen Grundlinie. Die Einordnung gehört dorthin, wo das Auge * beim Überfliegen ohnehin ist – unter dem Ausschnitt war sie zu weit * weg vom Titel, den sie beschreibt, und machte jede Zeile dreizeilig. */ .vs-result__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; } .vs-result__title { display: block; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--vs-text); letter-spacing: -.005em; } /* * Der Ausschnitt erscheint nur, wenn der Suchbegriff wirklich im Text * steht (siehe VS_Highlighter). Zwei Zeilen genügen, um den Fund * einzuordnen – darüber hinaus liest ihn ohnehin niemand. */ .vs-result__snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--vs-muted); } /* * Einordnung des Treffers: die Beitragsart im Kästchen, Pfad und Datum * als einfacher Text daneben. */ .vs-result__tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-top: .4rem; } /* Inline hinter dem Titel: kein eigener Abstand nach oben, die Titelzeile setzt ihn über gap. */ .vs-result__tags--inline { display: inline-flex; margin-top: 0; } /* * Der Rahmen macht aus dem Zusatz ein Etikett statt einer Fortsetzung * des Titels. Er ist so leise wie die Trennlinien der Liste und hat * dieselbe Rundung wie die Hoverfläche – zwei Radien nebeneinander * fielen sofort auf. */ /* * Unten etwas weniger Innenabstand als oben: Versalien haben keine * Unterlängen, der Platz dafür bleibt in der Zeilenbox aber stehen. Ohne * die Korrektur sitzt die Schrift optisch zu hoch im Kästchen, obwohl * sie rechnerisch mittig steht. */ .vs-result__type { display: inline-flex; align-items: center; padding: .15rem .4rem .08rem; border: 1px solid var(--vs-rule-soft); border-radius: var(--vs-hover-radius); font-size: .6rem; font-weight: 400; line-height: 1.5; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; color: var(--vs-muted-soft); transition: color .13s ease, border-color .13s ease; } .vs-result__meta { font-size: .625rem; font-weight: 400; line-height: 1.5; letter-spacing: .5px; text-transform: uppercase; color: var(--vs-muted-soft); transition: color .13s ease; } /* * Beim Überfahren wechselt nur die Einordnung auf die Titelfarbe. Der * Titel selbst bleibt, wie er ist – sonst bewegten sich zwei Dinge * gleichzeitig, und die Zeile flackert beim Überstreichen der Liste. */ .vs-result__link:hover .vs-result__type, .vs-result__link:focus-visible .vs-result__type, .vs-result__link:hover .vs-result__meta, .vs-result__link:focus-visible .vs-result__meta { color: var(--vs-text); } .vs-result__link:hover .vs-result__type, .vs-result__link:focus-visible .vs-result__type { border-color: var(--vs-rule); } .vs-result__sep { padding: 0 .15rem; } .vs-arrow { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--vs-line); opacity: .45; transform: translateX(-3px); transition: opacity .13s ease, transform .13s ease, color .13s ease; } .vs-result__link:hover .vs-arrow, .vs-result__link:focus-visible .vs-arrow { color: var(--vs-accent); opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vs-arrow, .vs-result__link { transition: none; } } .vs-mark { background: var(--vs-mark-bg); color: inherit; padding: 0 .08em; } /* --- Blätterung --------------------------------------------------------- */ .vs-pagination { display: flex; align-items: center; gap: 1.5rem; margin: 1.75rem 0 0; flex-wrap: wrap; } .vs-pagination__step { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid transparent; font-size: .9375rem; } .vs-pagination__step:hover { border-bottom-color: currentColor; } .vs-pagination__status { color: var(--vs-muted); font-size: .875rem; font-variant-numeric: tabular-nums; } /* ========================================================================== Leerzustand ========================================================================== */ .vs-empty { padding: 0 0 1.5rem; } /* * Dieselbe Überschrift wie „Unsere Vorschläge“ und „Ergebnisse der * Volltextsuche“. Vorher stand hier eine grosse, dünne Zeile – die kam * aus keinem anderen Teil der Suche vor und wirkte wie eine * Fehlermeldung statt wie ein Abschnitt. */ .vs-empty__title { margin: 0 0 .4rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--vs-text); } .vs-empty__text, .vs-empty__suggestion { margin: 0 0 1.25rem; max-width: 62ch; font-size: .9375rem; line-height: 1.6; color: var(--vs-muted); } .vs-empty__suggestion a { color: var(--vs-accent); text-decoration: none; border-bottom: 1px solid currentColor; } .vs-empty__tips { margin: 0 0 1.75rem; padding-left: 1.1rem; color: var(--vs-muted); font-size: .9375rem; line-height: 1.8; } .vs-empty__form { max-width: 480px; } /* ========================================================================== Schnellzugriffe ========================================================================== */ .vs-quicklinks { margin-top: 2rem; } .vs-quicklinks__title { margin: 0 0 .85rem; font-size: 1rem; font-weight: 400; color: var(--vs-text); } .vs-quicklinks__list { display: flex; flex-wrap: wrap; gap: .15rem; list-style: none; margin: 0 -.65rem; padding: 0; } .vs-quicklinks__list li { margin: 0; padding: 0; } .vs-quicklinks__list li::before, .vs-quicklinks__list li::marker { content: none; } /* * Kein Rahmen mehr: die Vorschläge sind Textlinks, keine Knöpfe. Die * Fläche entsteht erst beim Überfahren – dieselbe Geste wie bei einer * Trefferzeile, damit sich beides gleich anfühlt. */ .vs-quicklinks__list a { display: inline-block; padding: .4rem .65rem; border: 0; /* Scharfe Ecken wie bei der Trefferzeile. */ border-radius: 0; background: transparent; color: var(--vs-accent); text-decoration: none; font-size: .875rem; font-weight: 600; transition: background-color .13s ease; } /* * Dieselbe Rückmeldung wie bei den Rubrikfiltern: gefüllt in der * Akzentfarbe. Die Vorschläge im Startzustand sind Bedienelemente * derselben Art – ein Klick führt in beiden Fällen zu einer Trefferliste * im selben Fenster. Dann sollen sie sich auch gleich anfühlen. */ .vs-quicklinks__list a:hover, .vs-quicklinks__list a:focus-visible { background: var(--vs-chip-fill); color: var(--vs-chip-fill-fg); } .vs-quicklinks__list a:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 1px; } /* ========================================================================== Feinschliff ========================================================================== */ @media (max-width: 640px) { .vs-result__link { gap: .85rem; } .vs-arrow { width: 18px; height: 18px; } } @media print { .vs-facets, .vs-pagination, .vs-quicklinks, .vs-form, .vs-arrow { display: none !important; } } /* ========================================================================== Auslöser ========================================================================== */ .vs-trigger { --vs-fab-size: 56px; display: inline-flex; align-items: center; background: var(--vs-accent); color: #fff; text-decoration: none; border: 0; border-radius: var(--vs-radius); /* Kein "font: inherit" – die Kurzform setzt die Schriftfamilie auf den geerbten Wert zurück und damit auf die Systemschrift. */ font-family: var(--vs-font); font-size: 1rem; font-weight: 400; line-height: 1.2; padding: .75rem 1.35rem; gap: .55rem; cursor: pointer; } .vs-trigger:hover, .vs-trigger:focus { background: var(--vs-text); color: #fff; } .vs-trigger:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 3px; } .vs-trigger__icon { display: flex; flex: 0 0 auto; } .vs-trigger__icon svg { width: 21px; height: 21px; display: block; } /* --- Schwebender Auslöser ----------------------------------------------- */ /* * Im Ruhezustand ein runder Knopf mit reinem Lupensymbol. Beim Überfahren * oder bei Tastaturfokus wächst er nach links auf und gibt das Wort frei. * * Aufgeklappt wird über die Breite des Labels, nicht über die des Knopfes: * so bleibt die runde Form bis zuletzt erhalten, und der Knopf wächst von * seiner Kante weg statt aus der Mitte. */ .vs-trigger--floating { position: fixed; bottom: 1.5rem; z-index: 9998; background: var(--vs-fab-bg); color: var(--vs-fab-fg); font-size: .9375rem; width: auto; min-width: var(--vs-fab-size); height: var(--vs-fab-size); padding: 0 calc((var(--vs-fab-size) - 21px) / 2); gap: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(6, 41, 45, .3); transition: box-shadow .18s ease, background-color .18s ease; overflow: hidden; } .vs-trigger--floating:hover, .vs-trigger--floating:focus-visible { background: var(--vs-fab-bg-hover); color: var(--vs-fab-fg); box-shadow: 0 6px 20px rgba(6, 41, 45, .38); } .vs-trigger--right { right: 1.5rem; flex-direction: row-reverse; } .vs-trigger--left { left: 1.5rem; } /* * max-width statt width: der Übergang braucht einen Zahlenwert, und ein * grosszügiges Maximum passt sich jeder Beschriftung an, ohne dass man * die Breite kennen muss. */ .vs-trigger--floating .vs-trigger__label { display: block; /* * min-width: 0 ist hier zwingend. Flex-Elemente stehen von Haus aus * auf min-width: auto und schrumpfen deshalb nie unter ihre * Inhaltsbreite – max-width: 0 allein bliebe wirkungslos, und der * Knopf wäre im Ruhezustand oval statt rund. */ min-width: 0; max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width .22s ease, opacity .16s ease, margin .22s ease; } .vs-trigger--floating:hover .vs-trigger__label, .vs-trigger--floating:focus-visible .vs-trigger__label { max-width: 10rem; opacity: 1; } .vs-trigger--right:hover .vs-trigger__label, .vs-trigger--right:focus-visible .vs-trigger__label { margin-right: .6rem; } .vs-trigger--left:hover .vs-trigger__label, .vs-trigger--left:focus-visible .vs-trigger__label { margin-left: .6rem; } /* * Geräte ohne Zeiger klappen nie auf – dort bliebe der Text sonst * unerreichbar hinter einem Zustand, den es nicht gibt. Das aria-label * am Link trägt die Beschriftung ohnehin. */ @media (hover: none) { .vs-trigger--floating .vs-trigger__label { display: none; } } /* --- Inline-Varianten ---------------------------------------------------- */ .vs-trigger--icon { padding: .8rem; border-radius: 999px; } .vs-trigger--icon .vs-trigger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } @media (max-width: 640px) { .vs-trigger--floating { --vs-fab-size: 52px; /* Beim iPhone liegt unten der Home-Indikator – ohne den Sicherheitsabstand klebte der Knopf darauf. */ bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .vs-trigger--right { right: calc(1rem + env(safe-area-inset-right, 0px)); } .vs-trigger--left { left: calc(1rem + env(safe-area-inset-left, 0px)); } } @media (prefers-reduced-motion: reduce) { .vs-trigger--floating, .vs-trigger--floating .vs-trigger__label { transition: none; } } @media print { .vs-trigger--floating { display: none !important; } } /* ========================================================================== Overlay ========================================================================== */ html.vs-overlay-open { overflow: hidden; } /* * Kein Vollbild mehr, sondern ein Fenster über der Seite: der Hintergrund * bleibt sichtbar und wird weichgezeichnet. Das erhält die Orientierung – * man sieht, dass man die Seite nicht verlassen hat. */ .vs-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: clamp(1rem, 7vh, 5rem) 1.25rem 1.5rem; } .vs-overlay[hidden] { display: none; } .vs-overlay__backdrop { position: absolute; inset: 0; background: rgba(6, 41, 45, .38); -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%); opacity: 0; transition: opacity .2s ease; } /* * Ohne Backdrop-Filter (ältere Firefox-Versionen) verdunkeln wir stärker. * Sonst bliebe der Hintergrund scharf lesbar und würde mit dem Fenster * um Aufmerksamkeit konkurrieren. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vs-overlay__backdrop { background: rgba(6, 41, 45, .62); } } .vs-overlay.is-open .vs-overlay__backdrop { opacity: 1; } .vs-overlay__panel { position: relative; display: flex; flex-direction: column; width: 100%; /* Etwas breiter als die Lesebreite der Treffer – die Liste bekommt Luft zum Rand, ohne dass die Zeilen zu lang werden. */ max-width: var(--vs-overlay-width); max-height: min(78vh, 780px); background: var(--vs-surface); border-radius: var(--vs-overlay-radius); box-shadow: 0 24px 64px rgba(6, 41, 45, .3), 0 2px 8px rgba(6, 41, 45, .1); opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1); overflow: hidden; } .vs-overlay.is-open .vs-overlay__panel { opacity: 1; transform: none; } .vs-overlay__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } /* --- Kopfzeile ---------------------------------------------------------- */ .vs-overlay__bar { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem .5rem 1.5rem; border-bottom: 1px solid var(--vs-rule); background: var(--vs-surface); } .vs-overlay__form { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: .75rem; } .vs-overlay__icon { flex: 0 0 auto; display: flex; color: var(--vs-muted); } .vs-overlay__icon svg { width: 20px; height: 20px; } .vs-overlay__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.125rem; font-weight: 400; color: var(--vs-text); padding: .85rem 0; outline: none; -webkit-appearance: none; appearance: none; } .vs-overlay__input::-webkit-search-cancel-button, .vs-overlay__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .vs-overlay__input::placeholder { color: var(--vs-muted); opacity: 1; } .vs-overlay__spinner { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--vs-rule); border-top-color: var(--vs-accent); border-radius: 50%; animation: vs-spin .7s linear infinite; } .vs-overlay__spinner[hidden] { display: none; } @keyframes vs-spin { to { transform: rotate(360deg); } } /* * Rundes Zeichen statt beschrifteter Fläche – dieselbe Form wie der * schwebende Suchknopf, nur oben rechts und ruhiger eingefärbt: im * Ruhezustand die gedeckte Fläche, die auch eine Trefferzeile beim * Überfahren bekommt, erst beim Überfahren die Akzentfarbe des * Suchknopfes. So gehören beide sichtbar zusammen, ohne dass zwei * kräftige Farbflächen gleichzeitig um Aufmerksamkeit ringen. */ .vs-overlay__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--vs-close-size); height: var(--vs-close-size); padding: 0; background: var(--vs-surface-alt); border: 0; border-radius: 999px; color: var(--vs-text); cursor: pointer; transition: background-color .13s ease, color .13s ease; } .vs-overlay__close:hover, .vs-overlay__close:focus-visible { background: var(--vs-fab-bg); color: var(--vs-fab-fg); } .vs-overlay__close:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 2px; } .vs-overlay__close svg { width: 18px; height: 18px; display: block; } /* --- Inhalt ------------------------------------------------------------- */ .vs-overlay__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--vs-surface); } .vs-overlay__results { padding: 1.5rem 1.75rem 2rem; } .vs-overlay__hint { margin: 0 0 1.25rem; color: var(--vs-muted); font-size: .9375rem; } .vs-overlay__results .vs-quicklinks { margin-top: 0; } .vs-overlay__results .vs-quicklinks__title { font-size: .6875rem; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--vs-muted-soft); } /* Im Startzustand trägt der Einleitungssatz die Erklärung – die Links stehen direkt darunter. */ .vs-overlay__intro .vs-quicklinks { margin-top: 0; } .vs-overlay__intro .vs-overlay__hint { margin-bottom: .5rem; } /* Im Overlay trägt die Kopfzeile schon das Suchfeld – weder die Ergebnisseite noch der Leerzustand brauchen ein zweites. */ .vs-overlay__results .vs-search__form, .vs-overlay__results .vs-empty__form { display: none; } /* Der letzte Abschnitt braucht unten keinen Abstand mehr. */ .vs-overlay__results .vs-block:last-of-type, .vs-overlay__results .vs-group:last-of-type { margin-bottom: 0; } /* --- Schmale Schirme ---------------------------------------------------- */ /* * Auf dem Telefon nimmt das Fenster die volle Höhe ein. Ein schwebendes * Kästchen mit Rand ringsum wäre dort verschenkter Platz. */ @media (max-width: 640px) { .vs-overlay { padding: 0; } .vs-overlay__panel { max-width: none; max-height: none; height: 100%; box-shadow: none; } .vs-overlay__bar { padding: .4rem .5rem .4rem 1rem; } .vs-overlay__input { font-size: 1.0625rem; } .vs-overlay__results { padding: 1.25rem 1.15rem 2.5rem; } } @media (prefers-reduced-motion: reduce) { .vs-overlay__backdrop, .vs-overlay__panel, .vs-overlay__close { transition: none; } .vs-overlay__spinner { animation: none; } } /* ========================================================================== Touchbedienung ========================================================================== */ /* * Auf Geräten ohne präzisen Zeiger bekommen alle Bedienelemente * mindestens 44 × 44 Punkt. Gemessen hatten der Schliessen-Knopf 37 × 33 * und der Aufklapper des Volltextblocks 36 Punkt Höhe – beides zu klein, * um verlässlich getroffen zu werden. */ @media (pointer: coarse) { .vs-overlay__close { min-width: 44px; min-height: 44px; justify-content: center; } .vs-block__summary { min-height: 44px; padding: .5rem 0; } .vs-quicklinks__list a, .vs-form__quicklinks-list a { padding-top: .65rem; padding-bottom: .65rem; } .vs-form__clear { min-width: 44px; } .vs-facet { padding-top: .5rem; padding-bottom: .8rem; } } /* * Auf dem Telefon füllt das Fenster den Schirm. dvh statt vh: die * Adressleiste mobiler Browser wächst und schrumpft beim Scrollen, und * mit 100vh läge der untere Rand des Fensters dauerhaft darunter. */ @media (max-width: 640px) { @supports (height: 100dvh) { .vs-overlay { height: 100dvh; } } .vs-overlay__results { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); } .vs-overlay__bar { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(.5rem, env(safe-area-inset-right, 0px)); } } /* ========================================================================== Panzerung gegen den Elementor-Kit-Stylesheet ========================================================================== */ /* * Elementor schreibt in seinen Kit-Stylesheet eine Regel der Form * * .elementor-kit-10 a { color: var(--e-global-color-secondary); } * * Deren Spezifität (0,1,1) liegt über der jeder einfachen Klasse (0,1,0). * Das Ergebnis war auf der Live-Website sichtbar: das Lupensymbol im * schwebenden Knopf lief in Elementors Linkfarbe statt in Weiss, und jeder * Treffertitel bekam die Linkfarbe des Themes. * * Statt !important – das jede spätere Anpassung im Child-Theme blockieren * würde – wird die eigene Wurzelklasse verdoppelt. Das hebt die Spezifität * auf (0,2,x), bleibt reguläres CSS und lässt sich weiterhin gezielt * überschreiben. */ .vs-search.vs-search a, .vs-form.vs-form a, .vs-overlay.vs-overlay a { color: inherit; text-decoration: none; } /* * Und dasselbe für Schaltflächen. Der Theme-Reset der Website bringt * * [type="button"], [type="submit"], button { color: #c36; border: 1px solid #c36 } * * mit – gleiche Spezifität wie eine einfache Klasse, aber später im * Quelltext. Deshalb stand der Schliessen-Knopf im Suchfenster in Rosa, * mit Rahmen und in der Systemschrift. */ .vs-overlay.vs-overlay button, .vs-search.vs-search button, .vs-form.vs-form button { font-family: var(--vs-font); border: 0; border-radius: 0; background: transparent; color: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; } /* * Der Theme-Reset enthält ausserdem * * [type="button"], [type="reset"], [type="submit"], button { width: auto } * * – gleiche Spezifität wie eine einzelne Klasse, aber später im * Quelltext. Damit lief meine Breitenangabe ins Leere und aus dem Kreis * wurde ein Oval, sobald der Knopf breiter wurde als hoch. Deshalb steht * die Grösse hier mit der verdoppelten Wurzelklasse noch einmal. */ .vs-overlay.vs-overlay .vs-overlay__close { /* * display gehört zwingend dazu. * * Der Theme-Reset setzt Schaltflächen auf display:block. Damit ist * das justify-content aus der Grundregel wirkungslos – die Box ist * ja kein Flex-Container mehr –, und das Kreuz klebte am linken * Rand des Kreises. Von aussen sah es aus wie ein Zentrierfehler, * tatsächlich fehlte der Container. */ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--vs-close-size); min-width: var(--vs-close-size); height: var(--vs-close-size); min-height: var(--vs-close-size); color: var(--vs-text); background: var(--vs-surface-alt); border-radius: 999px; padding: 0; } .vs-form.vs-form .vs-form__clear { display: flex; align-items: center; justify-content: center; width: 2.25rem; min-width: 2.25rem; padding: 0; } .vs-form.vs-form .vs-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; } /* * Und dasselbe für Eingabefelder. Der Theme-Reset bringt * * input[type="search"], … { border: 1px solid #666; border-radius: 3px } * * mit – Attributselektoren zählen wie eine Klasse und liegen damit über * meiner einfachen Klasse. Das Suchfeld bekam dadurch einen grauen * Rahmen mit abgerundeten Ecken; die Rahmung gehört bei uns aber an das * umgebende Feld, nicht an das Eingabeelement. */ .vs-overlay.vs-overlay .vs-overlay__input, .vs-form.vs-form .vs-form__input { border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; height: auto; min-height: 0; max-width: none; font-family: var(--vs-font); color: inherit; } /* Innenabstand und Schriftgrösse je Variante danach wieder herstellen. */ .vs-overlay.vs-overlay .vs-overlay__input { padding: .85rem 0; font-size: 1.125rem; font-weight: 400; color: var(--vs-text); } /* Unter 17px zoomt iOS beim Antippen in die Seite hinein. */ @media (max-width: 640px) { .vs-overlay.vs-overlay .vs-overlay__input { font-size: 1.0625rem; } } .vs-form.vs-form .vs-form__input { padding: .75rem 1rem; } .vs-form.vs-form .vs-form--hero .vs-form__input, .vs-form--hero.vs-form .vs-form__input { padding: 1.05rem .9rem; } .vs-form--popup.vs-form .vs-form__input { padding: .9rem 1.1rem; } .vs-form--compact.vs-form .vs-form__input { padding: .6rem .85rem; } .vs-overlay.vs-overlay .vs-overlay__close:hover, .vs-overlay.vs-overlay .vs-overlay__close:focus-visible { color: var(--vs-fab-fg); background: var(--vs-fab-bg); } .vs-form.vs-form .vs-form__submit { background: var(--vs-accent); color: #fff; padding: .75rem 1.35rem; } .vs-form.vs-form .vs-form__submit:hover { background: var(--vs-text); color: #fff; } .vs-trigger.vs-trigger { color: #fff; } .vs-trigger.vs-trigger--floating { color: var(--vs-fab-fg); } .vs-search.vs-search .vs-block__more a, .vs-search.vs-search .vs-group__more a, .vs-search.vs-search .vs-search__back a, .vs-search.vs-search .vs-empty__suggestion a, .vs-search.vs-search .vs-pagination__step, .vs-overlay.vs-overlay .vs-quicklinks__list a, .vs-form.vs-form .vs-form__quicklinks-list a { color: var(--vs-accent); } /* Gefüllt beim Überfahren – muss nach der Grundfarbe stehen. */ .vs-overlay.vs-overlay .vs-quicklinks__list a:hover, .vs-overlay.vs-overlay .vs-quicklinks__list a:focus-visible { background: var(--vs-chip-fill); color: var(--vs-chip-fill-fg); } .vs-formwrap--hero.is-on-dark .vs-form.vs-form .vs-form__quicklinks-list a { color: #fff; } .vs-search.vs-search .vs-facet { color: var(--vs-accent); } .vs-search.vs-search .vs-facet:hover, .vs-search.vs-search .vs-facet.is-active { color: var(--vs-chip-fill-fg); } /* ========================================================================== WordPress-Adminleiste ========================================================================== */ /* * Für angemeldete Redakteure liegt oben eine 32 Punkt hohe Leiste. Ohne * diesen Ausgleich schob sich die Oberkante des Suchfensters darunter – * genau die Ansicht, in der die Gemeinde das Plugin abnimmt. */ .admin-bar .vs-overlay { padding-top: calc(3rem + 32px); } .admin-bar .vs-trigger--floating { /* Der Knopf sitzt unten; hier geht es nur um die mobile Leiste, die 46 Punkt hoch ist und den Viewport nach unten schiebt. */ bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } @media screen and (max-width: 782px) { .admin-bar .vs-overlay { padding-top: 46px; } }