@font-face { font-family: "AB-audiowide"; src: url("/themes/anjas/assets/fonts/audiowide/Audiowide-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-audiowide { font-family: "AB-audiowide", sans-serif; } @font-face { font-family: "AB-rubikbubbles"; src: url("/themes/anjas/assets/fonts/rubikbubbles/RubikBubbles-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-rubikbubbles { font-family: "AB-rubikbubbles", sans-serif; } @font-face { font-family: "AB-mountainsofchristmas"; src: url("/themes/anjas/assets/fonts/mountainsofchristmas/MountainsofChristmas-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-mountainsofchristmas { font-family: "AB-mountainsofchristmas", sans-serif; } @font-face { font-family: "AB-greatvibes"; src: url("/themes/anjas/assets/fonts/greatvibes/GreatVibes-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-greatvibes { font-family: "AB-greatvibes", sans-serif; } @font-face { font-family: "AB-creepster"; src: url("/themes/anjas/assets/fonts/creepster/Creepster-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-creepster { font-family: "AB-creepster", sans-serif; } @font-face { font-family: "AB-pacifico"; src: url("/themes/anjas/assets/fonts/pacifico/Pacifico-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } .schrift-pacifico { font-family: "AB-pacifico", sans-serif; } @font-face { font-family: "AB-mountainsofchristmas"; src: url("/themes/anjas/assets/fonts/mountainsofchristmas/MountainsofChristmas-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* End ANjAS shared fonts */ div#alcacookiesoverlay { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: #00000080; display: flex; justify-content: center; align-items: center; z-index: 9999; } .fancybox-margin { z-index: 1 !important; } .alcacookiealert { z-index: 999 !important; } .alcacookieButtons .btn-accept.lds-dual-ring-parent:after { content: " "; display: block; width: 12px; height: 12px; margin-left: 10px; border: 6px solid #fff; border-color: transparent white; border-radius: 50%; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .alcacookiealert p, .alcacookie-btn-cms, .alcacookie-btn-cms:hover { color: var(--alca-cookie-text-color); } .alcacookieButtons--swiss #alcaCookieOk { order: 0; } .alcacookieButtons--swiss .alcaCookieConfig { order: 1; } .akb__button {padding: 3px 10px;} p.title_text_content { margin-top: 0; margin-bottom: .5rem; color: #8c003c; font-weight: 700; line-height: 24px; font-size: 20px; text-align: center; } .custombanners.displayCustomBanners2 { padding: 30px 5px 15px; width: 100vw; position: relative; margin-left: -50vw; left: 50%; background: #5f002a; } .banner-item { cursor: pointer; position: relative; padding: 0 15px; width: 33.3333%; float: left; height: 125px; } .custom-html { display: table; margin: auto; position: absolute; width: 100%; top: 0; left: 0; bottom: 0; right: 0; } .center-one { padding: 30px 25px; margin: 25px -10px 45px; border-radius: 5px; box-shadow: 10px 20px 15px #f0eaef; border: 1px solid #f0eaef; min-height: 300px; } @media (max-width: 420px) { .center-one { padding: 0; } } @media (max-width: 600px) { .center-one { padding: 30px 7px; margin-left: -10px; margin-right: -10px; } } @media (max-width: 1075px) { .center-one { width: auto; height: auto; } } h1.product__name {color: #fff;} h1.title_text, h2.title_text, h3.title_text, h5.title_text, h6.title_text, p.text2, p.title-abspann, h4.title_text { padding: 3px 0; text-align: center; } p.title-abspann { margin-top: 0; margin-bottom: .5rem; color: #fff; font-weight: 700; line-height: 30px; font-size: clamp(14px, 3vw, 20px); } .backgr1 { background: #8c003c; color: #fff !important; } /* Die transition stand frueher in einer Sammelregel mit acht weiteren Selektoren aus dem alten PRS004-Theme (#header_logo, .category-wrap, .image-container, .link-item, .nav-link, .payment-logo, .shoppingcart, .user-info-inner). Keiner davon kommt im anjas-Theme noch vor; die Nachfolger stehen am Ende dieser Datei. */ .pic { float: left; margin-right: 10px; margin-bottom: 20px; transition: all 0.2s ease-in-out; } .text-home { text-align: justify; margin-left: 200px; } ::after, ::before { -moz-box-sizing: border-box; } .banner-item { cursor: pointer; } .banner-item { cursor: pointer; } .custombanners.displayCustomBanners2 .banner-item p { padding-left: 72px; text-align: left; } h5.vorteile, p.vorteile { line-height: 22px; padding: 6px 0 4px 72px; padding-left: 72px; text-align: left; color: #fff; font-size: clamp(16px, 5vw, 20px); font-weight: 700; text-transform: uppercase; } .wichtig, h4.title_text a, span.wichtig { font-weight: 700; color: #8c003c; } .custombanners.displayCustomBanners2 .banner-item p { padding-left: 72px; text-align: left; } .icon-text a, p.icon-text, p.text2 { color: #fff; } [class*=" icon-"], [class^="icon-"] { font-weight: 400; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } @media (max-width: 420px) { h1.title_text, h2.title_text, h3.title_text, h4.title_text, h5.title_text, h6.title_text, p.title-abspann, h4.title_text, .title_text { line-height: 24px; font-weight: 600; } } @media (max-width: 600px) { h1.title_text, h2.title_text, h3.title_text, h4.title_text, h5.title_text, h6.title_text, p.title-abspann, h4.title_text, .title_text { line-height: 24px; padding: 8px 5px 8px 15px; text-align: left; } .text-home { float: none; width: auto; padding-left: 5px !important; padding-right: 5px !important; } .pic { width: 30%; } } /* -------------------------------------------------------------------------- * SEO-Textblock: Bildvergroesserung und Umbruch unter dem sm-Punkt * ----------------------------------------------------------------------- */ /* Der Hover-Effekt fehlte komplett. .pic hatte zwar eine transition (weiter oben), aber nirgends stand ein transform, das sie haette animieren koennen. Der Uebergang liegt jetzt auf dem Bild selbst, nicht auf dem umgebenden div — sonst wuerde der Klickbereich des Links mitwachsen. :focus-within nimmt die Tastaturbedienung mit. */ .grow img { transition: transform 0.3s ease-in-out; } .grow:hover img, .grow:focus-within img { transform: scale(1.1); } @media (prefers-reduced-motion: reduce) { .grow img, .navbar-brand img, .footer__trust-logo { transition: none; } } /* Unter dem Bootstrap-Punkt sm steht das Bild mittig und der Text darunter. .text-home behielt bisher auch auf dem Handy sein margin-left: 200px — der Block bei max-width: 600px setzt es nirgends zurueck. Auf einem 375px-Schirm blieben davon 175px Textbreite uebrig. */ @media (max-width: 575.98px) { /* text-align statt margin: auto — .pic ist ein Block ueber die volle Breite, zentriert werden muss das Bild darin. */ .pic { float: none; width: auto; margin-right: 0; text-align: center; } .text-home { margin-left: 0; } } /* -------------------------------------------------------------------------- * Dieselbe Vergroesserung wie bei .grow, uebertragen auf die Nachfolger der * alten PRS004-Klassen. Von den neun urspruenglichen Selektoren existiert im * Theme nur noch .pic; #header_logo, .category-wrap, .link-item, .payment-logo, * .shoppingcart und .user-info-inner heissen heute anders oder sind entfallen. * ----------------------------------------------------------------------- */ /* Logo und Zahlungslogos hatten bisher transition-duration: 0s, also gar keinen Uebergang. */ .navbar-brand img, .footer__trust-logo { transition: transform 0.3s ease-in-out; } /* .header-block__action-btn (Konto- und Warenkorbsymbol) bringt aus dem Theme bereits transition: all .2s ease-in-out mit — die deckt transform ab. Eine eigene transition wuerde die uebrigen Eigenschaften dieser Regel stillschweigend abschalten, deshalb steht sie oben nicht dabei. */ .navbar-brand:hover img, .navbar-brand:focus-visible img, .footer__trust-logo:hover, .header-block__action-btn:hover, .header-block__action-btn:focus-visible { transform: scale(1.1); } /* -------------------------------------------------------------------------- * Mobil: Querscrollen und Stapelreihenfolge * ----------------------------------------------------------------------- */ /* Der USP-Block hat die Seite auf dem Handy auf 523px aufgeblaeht (Viewport 375) — man konnte 148px nach rechts schieben. Ursache: .custom-html ist ein display: table und kann nicht schmaler werden als sein laengstes Wort plus die 72px Einzug aus p.vorteile. In einer 122px breiten Spalte sprengt das die Zeile. Das alte PRS004-Theme hatte dafuer vier Medienabfragen; beim Uebernehmen der Regeln sind sie hier verlorengegangen und stehen jetzt unveraendert wieder da. Nebenwirkung des Ueberhangs war das mobile Menue: es ist position: fixed und haengt damit am Layout-Viewport. Sobald man nach rechts schob, lagen die Aufklapppfeile und das Untermenue-Bild ausserhalb des Sichtfelds. Am Menue selbst war nichts falsch, das erledigt sich hiermit mit. */ @media (max-width: 1200px) { .custombanners.displayCustomBanners2 .banner-item { width: 50%; } } @media (max-width: 771px) { .custombanners.displayCustomBanners2 .banner-item { width: 95%; height: 110px; padding-left: 50px; } } @media (max-width: 603px) { .custom-html { margin-left: 10px; } } @media (max-width: 420px) { .custombanners.displayCustomBanners2 .banner-item { height: 150px; } } /* Der Laufschriftbalken im Kopf steht 4px ueber den Inhaltsbereich hinaus und erzeugt damit am Desktop einen waagrechten Rollbalken. clip statt hidden, damit kein Rollcontainer entsteht. */ .usp-bar { overflow-x: clip; } /* Kontaktbutton und Bewertungsband haengen direkt am . Das mobile Menue steckt dagegen in .header__sticky — einem Stapelkontext mit z-index: 1021. Der z-index des Offcanvas (1045) gilt nur INNERHALB dieses Kontexts; nach aussen tritt das ganze Menue mit 1021 an. Alles, was am body einen hoeheren Wert hat, deckt es zu — egal wie hoch man das Menue selbst schraubt. Statt eines Wettlaufs nach oben ruecken die beiden Schaltflaechen unter diese Schwelle; ueber gewoehnlichem Seiteninhalt liegen sie damit weiterhin. */ #lhcom_floating_widget, .anjach { z-index: 1019; } /* Nur die Aufklapp-Schaltflaechen der CMS-Akkordeons. .info-title steht am

, der Ausloeser liegt als