/* * Icons * * Das Original bindet Font Awesome Pro 6.4 ein und setzt die Icons ueber * content-Codes (z. B. content:'\f095'). Dieser Nachbau kommt ohne Pro-Lizenz * aus: die gleichen Icons liegen als SVG unter /assets/icons/ und werden hier * als Maske eingesetzt. Groesse, Farbe und Position bleiben unveraendert - * die SVG ist genau 1em hoch, wie die Schrift-Glyphe. * * /assets/icons/fa-*.svg Font Awesome Free 6.4.0 (CC BY 4.0) * /assets/icons/own-*.svg eigene Nachzeichnungen der Pro-Icons * (siehe tools/make_icons.py) */ /* * Font-Awesome-Variablen * * Das CMS setzt in einigen Regeln `font: var(--fa-font-solid)`. Diese Variablen * stammen aus der Pro-CSS und enthalten unter anderem line-height: 1. Ohne sie * waere die Kurzschreibweise ungueltig und die Icon-Box zu niedrig - das Icon * wuerde beschnitten. Deshalb werden sie hier mit denselben Werten definiert. */ :root, :host { --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro"; --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro"; --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro"; --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro"; --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone"; --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp"; --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp"; --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp"; --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; } /* * Klassen aus der Font-Awesome-CSS, die im Markup direkt vorkommen * * Das Popup schliesst ueber . * Zeichen, Groesse und Zeilenhoehe kamen aus der Pro-CSS; ohne diese Regeln * haette das Symbol keine Ausdehnung und waere unsichtbar und nicht klickbar. * Werte unveraendert aus dem Original uebernommen. */ .fa-regular { display: var(--fa-display, inline-block); font-family: "Font Awesome 6 Pro"; font-weight: 400; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .fa-2x { font-size: 2em; } .fa-circle-xmark::before { content: "\f057"; } /* gemeinsame Darstellung aller ersetzten Icons */ .hamburgerPlaceholder:before, .hamburgerPlaceholderActive:before, .telefonIconPlaceholder::before, .specialIconIconPlaceholder::before, .specialIconIconPlaceholder2::before, .quickButtonsElement::before, span.icon::before, span.boxen-icon::before, ul.dropdown li.dir.ebene1:after, ul#nav.dropdown li ul .punktAktivHauptNavi a:before, ul#nav.dropdown li ul li:hover a:before, #unten ul > li::before, #main #content ul > li::before, #slidesAround .textInSlidesJS ul > li::before, #multi_galerie_main_text ul > li::before, .seoTextWrapper ul > li::before, #content-field ul > li::before, ul.fancy-list.fancy-1 > li::before, ul.fancy-list.fancy-2 > li::before, div#nebenspalte a:before, .fa-circle-xmark:before { /* content bleibt unveraendert: so entstehen die Icon-Boxen an genau denselben Stellen wie im Original (das CMS setzt content teils nur fuer Mobilgeraete). Das Ersatzzeichen der fehlenden Pro-Schrift wird unsichtbar gemacht, gezeichnet wird das lokale SVG als Maske. */ -webkit-text-fill-color: transparent; text-fill-color: transparent; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: auto 1em; mask-size: auto 1em; } /* Icons, die inline stehen, brauchen eine Box in Glyphenbreite */ ul.dropdown li.dir.ebene1:after, ul#nav.dropdown li ul .punktAktivHauptNavi a:before, ul#nav.dropdown li ul li:hover a:before, .fa-circle-xmark:before, div#nebenspalte a:before { display: inline-block; height: 1em; vertical-align: -0.125em; } /* ---------------------------------------------------------------- Header */ /* Die Schrift zeichnet die Glyphe einen Hauch tiefer als die Maske in der Box mittig sitzt. Ein Pixel Ausgleich, damit die Icons deckungsgleich liegen. */ .hamburgerPlaceholder:before, .hamburgerPlaceholderActive:before, .telefonIconPlaceholder::before, .specialIconIconPlaceholder::before, .specialIconIconPlaceholder2::before { transform: translate(-0.5px, -1px); } /* Hamburger (Pro: bars, regular) */ .hamburgerPlaceholder:before { -webkit-mask-image: url(/assets/icons/own-bars-regular.svg); mask-image: url(/assets/icons/own-bars-regular.svg); } /* Menue schliessen (Pro: xmark, regular) */ .hamburgerPlaceholderActive:before { -webkit-mask-image: url(/assets/icons/own-xmark-regular.svg); mask-image: url(/assets/icons/own-xmark-regular.svg); } /* Telefon (Free: phone, solid) */ .telefonIconPlaceholder::before, .quickButtonsElement.Telephone::before, .quickButtonsElement.Special1::before, span.icon.Telefon::before, span.icon.Spezial5::before { -webkit-mask-image: url(/assets/icons/fa-solid-phone.svg); mask-image: url(/assets/icons/fa-solid-phone.svg); } /* Stundenplan (Pro: calendar-clock, regular) */ .specialIconIconPlaceholder::before, .quickButtonsElement.Special2::before, span.icon.Spezial3::before { -webkit-mask-image: url(/assets/icons/own-calendar-clock-regular.svg); mask-image: url(/assets/icons/own-calendar-clock-regular.svg); } /* E-Mail (Free: envelope, solid) */ .specialIconIconPlaceholder2::before, .quickButtonsElement.Email::before, span.icon.Mail::before { -webkit-mask-image: url(/assets/icons/fa-solid-envelope.svg); mask-image: url(/assets/icons/fa-solid-envelope.svg); } /* ------------------------------------------------------------ Navigation */ /* Pfeil nach unten bei Menuepunkten mit Untermenue (Pro: angle-down, solid). Der Pro-Pfeil ist flacher als der aus Font Awesome Free, deshalb eigene Nachzeichnung (siehe tools/make_icons.py). */ ul.dropdown li.dir.ebene1:after { -webkit-mask-image: url(/assets/icons/own-angle-down-solid.svg); mask-image: url(/assets/icons/own-angle-down-solid.svg); width: 0.875em; /* Die Box ist 15 Pixel hoch, die Zeilenhoehe betraegt 42 Pixel: die Schrift zeichnet den Pfeil deshalb deutlich unterhalb der Box. Die Maske wird um denselben Betrag nach unten gesetzt (am Original gemessen). */ transform: translateY(12.8px); } /* Pfeil im Untermenue bei Hover und beim aktiven Punkt (Font Awesome 5 Pro: long-arrow-alt-right, solid - kraeftiger Schaft mit dreieckiger Spitze, in Version 6 gibt es diese Form nicht mehr). */ ul#nav.dropdown li ul .punktAktivHauptNavi a:before, ul#nav.dropdown li ul li:hover a:before { -webkit-mask-image: url(/assets/icons/own-arrow-right-fa5-solid.svg); mask-image: url(/assets/icons/own-arrow-right-fa5-solid.svg); width: 1em; /* Ausgleich gegenueber der Schrift-Glyphe (am Original gemessen) */ transform: translate(-0.6px, 4.5px); } /* Pfeil der Unternavigation (Free: angle-down, gedreht) - im Original angle-right */ div#nebenspalte a:before { -webkit-mask-image: url(/assets/icons/fa-solid-angle-down.svg); mask-image: url(/assets/icons/fa-solid-angle-down.svg); width: 0.875em; transform: rotate(-90deg); } /* --------------------------------------------------------------- Inhalte */ /* Aufzaehlungspunkte (Free: circle, solid) */ #unten ul > li::before, #main #content ul > li::before, #slidesAround .textInSlidesJS ul > li::before, #multi_galerie_main_text ul > li::before, .seoTextWrapper ul > li::before, #content-field ul > li::before, ul.fancy-list.fancy-1 > li::before, ul.fancy-list.fancy-2 > li::before { -webkit-mask-image: url(/assets/icons/fa-solid-circle.svg); mask-image: url(/assets/icons/fa-solid-circle.svg); /* Das Original zeichnet den Punkt am linken Rand des Inhaltsbereichs und auf der Schriftlinie, nicht in der Mitte der 8-Pixel-Box. */ -webkit-mask-position: left center; mask-position: left center; transform: translateY(9px); } /* groessere Variante: gleiche Regel, anderer Schriftgrad */ #unten ul.fancy-list.fancy-2 > li::before, #slidesAround .textInSlidesJS ul.fancy-list.fancy-2 > li::before, #multi_galerie_main_text ul.fancy-list.fancy-2 > li::before, .seoTextWrapper ul.fancy-list.fancy-2 > li::before, #content-field ul.fancy-list.fancy-2 > li::before, ul.fancy-list.fancy-2 > li::before { transform: translateY(7px); } /* Standort (Free: location-arrow, solid) */ span.icon.Standort::before, .quickButtonsElement.Location::before { -webkit-mask-image: url(/assets/icons/fa-solid-location-arrow.svg); mask-image: url(/assets/icons/fa-solid-location-arrow.svg); } /* Pfeil in Kacheln und Listen (Pro: arrow-right-long, light) */ span.icon.Spezial1::before, span.icon.Spezial2::before { -webkit-mask-image: url(/assets/icons/own-arrow-right-long-light.svg); mask-image: url(/assets/icons/own-arrow-right-long-light.svg); } /* Anfahrt (Free: car, solid) */ span.boxen-icon.Spezial6::before { -webkit-mask-image: url(/assets/icons/fa-solid-car.svg); mask-image: url(/assets/icons/fa-solid-car.svg); } /* Rabatt-Siegel (Pro: badge-check, solid) */ span.boxen-icon.Dienstleistungen::before { -webkit-mask-image: url(/assets/icons/own-badge-check-solid.svg); mask-image: url(/assets/icons/own-badge-check-solid.svg); } /* Popup schliessen (Free: circle-xmark, regular) */ .fa-circle-xmark:before { -webkit-mask-image: url(/assets/icons/fa-regular-circle-xmark.svg); mask-image: url(/assets/icons/fa-regular-circle-xmark.svg); width: 1em; /* Die Glyphe fuellt bei line-height 1 genau die Zeile - oben ausrichten, sonst waere das Symbol drei Pixel zu hoch und die Zeile zu gross. */ vertical-align: top; }