/* ============================================================================= * RH BUTTON SYSTEM – ENDFASSUNG * Ritz & Häfliger * * Zentrales Button-System für RockSolid TAO / Contao. * * Prinzip: * - Keine separate Farbpalette. * - Jeder Buttontyp besitzt seine eigenen Variablen. * - Normal- und Hoverzustand sind vollständig getrennt steuerbar. * - Technische Controls werden nicht global als Inhaltsbuttons gestaltet. * * ============================================================================= * * TAO-ORIGINALSELEKTOREN – DOKUMENTATION * * TAO fasst in main.css u. a. folgende Selektoren in sein Button-System: * * Allgemein: * button * .button * input[type="submit"] * input[type="reset"] * input[type="button"] * * Varianten: * button.-secondary * .button.-secondary * input[type="submit"].-secondary * * button.-tertiary * .button.-tertiary * input[type="submit"].-tertiary * * button.-quaternary * .button.-quaternary * input[type="submit"].-quaternary * * Zusatzvarianten: * button.-single * .button.-single * input[type="submit"].-single * * button.-small * .button.-small * input[type="submit"].-small * * RockSolid Content Elements: * .feature-box-link * .feature-box-link.-secondary * .feature-box-link.-tertiary * .feature-box-link.-quaternary * * .headline-box-link * .headline-box-link.-secondary * .headline-box-link.-tertiary * .headline-box-link.-quaternary * * .highlight-box-link * * Spezialelemente: * .rotating-boxes-item-content .rotating-boxes-item-link * .pricing-table-plan a * .pricing-table-plan.-highlighted a * * Header: * .header-login .formbody input[type=submit] * .header-dropdown > ul input[type=submit] * * Footer: * .footer-bar input[type=submit] * .footer-bar button * * RH-ZUORDNUNG: * * Button 1: * Button inline ohne Variantenklasse * Feature Box ohne Variantenklasse * Headline Box ohne Variantenklasse * Highlight Box * * Button 2: * .-secondary * hervorgehobene Pricing Table * * Button 3: * .-tertiary * normale Pricing Table * Rotating Box Link * * Button 4: * .-quaternary * * Icon-Boxen: * Link = .icon-boxes-item-link.-link * Button 1 = .icon-boxes-item-link ohne Variantenklasse * Button 2 = .icon-boxes-item-link.-secondary * Button 3 = .icon-boxes-item-link.-tertiary * Button 4 = .icon-boxes-item-link.-quaternary * * Teaser-Boxen: * Link = normaler Textlink ohne .button-Klasse * Button 1 = .teaser-boxes-item > a.button * Button 2 = .teaser-boxes-item > a.button.-secondary * Button 3 = .teaser-boxes-item > a.button.-tertiary * Button 4 = .teaser-boxes-item > a.button.-quaternary * * Wichtig: * .icon-boxes-item-link.-link ist ein TEXTLINK und wird bewusst * NICHT von der gemeinsamen Button-Basis erfasst. * * Formularsystem: * allgemeine Formulare im Hauptinhalt * Suche * Registrierung * Login-Seite * Kontaktformular * Newsletter * Header-Login / Header-Dropdown Submit * Footer-Formulare * Fixed Note / Cookie-Hinweis (OK-Button) * * BEWUSST NICHT GLOBAL GESTYLT: * Navigation-Suchbutton / Lupenbutton * Mobile Navigation Search * Slidersteuerungen * Lightbox-/Colorbox-Steuerungen * Hamburger * reine Icon-Controls * ========================================================================== */ :root { /* ========================================================================= * 1. ALLGEMEINE TECHNISCHE EINSTELLUNGEN * ====================================================================== */ --rh-btn-font: "Montserrat", Arial, sans-serif; --rh-btn-weight: 400; --rh-btn-size: clamp(13.5px, calc(12.210744px + 0.330579vw), 17.5px); --rh-btn-size-small: clamp(12px, calc(11.033058px + 0.247934vw), 15px); --rh-btn-pad-y: 0.67em; --rh-btn-pad-x: 1.4em; --rh-btn-small-pad-y: 0.55em; --rh-btn-small-pad-x: 1.3em; --rh-btn-border-width: 1px; --rh-btn-speed: 180ms; --rh-form-btn-height: 48.5px; /* ========================================================================= * 2. BUTTON 1 – STANDARD * ====================================================================== */ --rh-btn-border: #284258; --rh-btn-bg: transparent; --rh-btn-text: #284258; --rh-btn-radius: 999px; --rh-btn-hover-border: #284258; --rh-btn-hover-bg: #284258; --rh-btn-hover-text: #ffffff; /* ========================================================================= * 3. BUTTON 2 – SECONDARY * ====================================================================== */ --rh-b2-border: #284258; --rh-b2-bg: #284258; --rh-b2-text: #ffffff; --rh-b2-radius: 999px; --rh-b2-hover-border: #284258; --rh-b2-hover-bg: transparent; --rh-b2-hover-text: #284258; /* ========================================================================= * 4. BUTTON 3 – TERTIARY * ====================================================================== */ --rh-b3-border: #284258; --rh-b3-bg: transparent; --rh-b3-text: #284258; --rh-b3-radius: 999px; --rh-b3-hover-border: #d33b32; --rh-b3-hover-bg: transparent; --rh-b3-hover-text: #d33b32; /* ========================================================================= * 5. BUTTON 4 – QUATERNARY * ====================================================================== */ --rh-b4-border: #d33b32; --rh-b4-bg: #d33b32; --rh-b4-text: #ffffff; --rh-b4-radius: 999px; --rh-b4-hover-border: #284258; --rh-b4-hover-bg: #284258; --rh-b4-hover-text: #ffffff; /* ========================================================================= * 5A. ICON-BOXEN – TEXTLINK * * Die Backend-Auswahl "Link" ist keine Buttonvariante. * ====================================================================== */ --rh-iconbox-link-color: var(--rh-btn-text); --rh-iconbox-link-hover-color: var(--rh-btn-text); --rh-iconbox-link-weight: 400; --rh-iconbox-link-letter-spacing: 0.03em; --rh-iconbox-link-transform: uppercase; --rh-iconbox-link-border-width: 1px; --rh-iconbox-link-border-gap: 0.35em; --rh-iconbox-link-margin-top: 0.75em; /* Icon-Box – Farben Text und Überschrift folgen der zentralen Typografie. Icon und Box-Rahmen können hier unabhängig angepasst werden. */ --rh-iconbox-icon-color: #8570a6; --rh-iconbox-icon-bg: #ffffff; --rh-iconbox-icon-hover-color: #ffffff; --rh-iconbox-icon-hover-bg: #8570a6; --rh-iconbox-border-color: #b2b9c4; --rh-iconbox-text-color: var(--ty-color-text); --rh-iconbox-heading-color: var(--ty-color-heading); --rh-iconbox-inverted-text-color: var(--ty-color-inverted); --rh-iconbox-inverted-heading-color: var(--ty-color-inverted); --rh-iconbox-inverted-icon-color: var(--ty-color-inverted); /* In Bereichen mit "Textfarbe invertieren" folgt der Link dem Bereich. */ --rh-iconbox-link-inverted-color: inherit; --rh-iconbox-link-inverted-hover-color: inherit; /* ========================================================================= * 6. ALLGEMEINE FORMULARE IM HAUPTINHALT * ====================================================================== */ /* Eigene, kompaktere Grösse für Submit-Buttons im Hauptinhalt */ --rh-form-main-size: clamp( 13px, calc(12.033058px + 0.247934vw), 16px ); --rh-form-main-height: 42px; --rh-form-main-pad-x: 1.3em; --rh-form-border: #57a1e0; --rh-form-bg: #57a1e0; --rh-form-text: #ffffff; --rh-form-radius: 999px; --rh-form-hover-border: #57a1e0; --rh-form-hover-bg: #ffffff; --rh-form-hover-text: #57a1e0; /* ========================================================================= * 7. SUCHE * ====================================================================== */ --rh-search-height: 42px; --rh-search-border: #57a1e0; --rh-search-bg: #57a1e0; --rh-search-text: #ffffff; --rh-search-radius: 0px; --rh-search-hover-border: #57a1e0; --rh-search-hover-bg: #ffffff; --rh-search-hover-text: #57a1e0; /* ========================================================================= * 8. REGISTRIERUNG * ====================================================================== */ --rh-register-border: #57a1e0; --rh-register-bg: #57a1e0; --rh-register-text: #ffffff; --rh-register-radius: 999px; --rh-register-hover-border: #57a1e0; --rh-register-hover-bg: #ffffff; --rh-register-hover-text: #57a1e0; /* ========================================================================= * 9. LOGIN-SEITE * ====================================================================== */ --rh-login-border: #57a1e0; --rh-login-bg: #57a1e0; --rh-login-text: #ffffff; --rh-login-radius: 999px; --rh-login-hover-border: #57a1e0; --rh-login-hover-bg: #ffffff; --rh-login-hover-text: #57a1e0; /* ========================================================================= * 10. KONTAKTFORMULAR * ====================================================================== */ --rh-contact-border: #57a1e0; --rh-contact-bg: #57a1e0; --rh-contact-text: #ffffff; --rh-contact-radius: 999px; --rh-contact-hover-border: #57a1e0; --rh-contact-hover-bg: #ffffff; --rh-contact-hover-text: #57a1e0; /* ========================================================================= * 11. NEWSLETTER * ====================================================================== */ --rh-newsletter-height: 42px; --rh-newsletter-border: #57a1e0; --rh-newsletter-bg: #57a1e0; --rh-newsletter-text: #ffffff; --rh-newsletter-radius: 0px; --rh-newsletter-hover-border: #57a1e0; --rh-newsletter-hover-bg: #ffffff; --rh-newsletter-hover-text: #57a1e0; /* ========================================================================= * 12. HEADER-LOGIN / HEADER-DROPDOWN * ====================================================================== */ --rh-header-form-border: #57a1e0; --rh-header-form-bg: #57a1e0; --rh-header-form-text: #ffffff; --rh-header-form-radius: 0px; --rh-header-form-hover-border: #57a1e0; --rh-header-form-hover-bg: #ffffff; --rh-header-form-hover-text: #57a1e0; /* ========================================================================= * 13. FOOTER-FORMULARE * ====================================================================== */ --rh-footer-form-border: #57a1e0; --rh-footer-form-bg: #57a1e0; --rh-footer-form-text: #ffffff; --rh-footer-form-radius: 0px; --rh-footer-form-hover-border: #57a1e0; --rh-footer-form-hover-bg: #ffffff; --rh-footer-form-hover-text: #57a1e0; /* ========================================================================= * FIXED NOTE / COOKIE-HINWEIS * * Folgt standardmässig Button 2 / Secondary, * kann aber unabhängig angepasst werden. * ====================================================================== */ --rh-fixed-note-border: var(--rh-b2-border); --rh-fixed-note-bg: var(--rh-b2-bg); --rh-fixed-note-text: var(--rh-b2-text); --rh-fixed-note-radius: var(--rh-b2-radius); --rh-fixed-note-hover-border: var(--rh-b2-hover-border); --rh-fixed-note-hover-bg: var(--rh-b2-hover-bg); --rh-fixed-note-hover-text: var(--rh-b2-hover-text); } /* ============================================================================= * 13. ICON-BOXEN – FARBSTEUERUNG * * WICHTIG: * TAO-Geometrie, Positionierung, Grössen und Animationen bleiben unangetastet. * Hier werden ausschliesslich Farben der Icon-Boxen zentralisiert. * * TAO-Iconvarianten: * Standard = keine Zusatzklasse * Icons invertiert = .-inverted-icon * Grosse Icons = .-large-icon * Grosse Icons invertiert = .-large-icon.-inverted-icon * Icons neben Überschriften = .-headline-icon * * .-large-icon ändert nur die Grösse und benötigt keine eigene Farbregel. * .-headline-icon besitzt bewusst KEINEN Kreis / Rahmen / Hintergrund. * ========================================================================== */ /* ------------------------------------------------------------------------- * 13.1 Grundfarben * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item { color: var(--rh-iconbox-text-color); } .ce_rsce_tao_icon_boxes .icon-boxes-item h3 { color: var(--rh-iconbox-heading-color); } /* ------------------------------------------------------------------------- * 13.2 STANDARD / GROSSE ICONS * * Die Klasse .-large-icon verändert TAO-seitig nur die Icon-Grösse. * Deshalb gilt dieselbe Farbsteuerung für Standard und Grosse Icons. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item:not(.-headline-icon):not(.-inverted-icon)::before { border-color: var(--rh-iconbox-icon-color); color: var(--rh-iconbox-icon-color); } /* Box mit eigener Hintergrundfarbe, nicht invertiert: Kreisfläche bewusst weiss. */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon)::before { background-color: var(--rh-iconbox-icon-bg); } /* Hover / Focus für Standard und Grosse Icons */ .ce_rsce_tao_icon_boxes .icon-boxes-item:not(.-headline-icon):not(.-inverted-icon):hover::before, .ce_rsce_tao_icon_boxes .icon-boxes-item:not(.-headline-icon):not(.-inverted-icon):focus::before { border-color: var(--rh-iconbox-icon-color); color: var(--rh-iconbox-icon-hover-color); background-color: var(--rh-iconbox-icon-hover-bg); } /* ------------------------------------------------------------------------- * 13.3 ICONS INVERTIERT / GROSSE ICONS INVERTIERT * * Gefüllter Kreis in der Akzentfarbe, helles Icon. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-inverted-icon:not(.-headline-icon)::before { border-color: var(--rh-iconbox-icon-color); color: var(--rh-iconbox-icon-hover-color); background-color: var(--rh-iconbox-icon-color); } .ce_rsce_tao_icon_boxes .icon-boxes-item.-inverted-icon:not(.-headline-icon):hover::before, .ce_rsce_tao_icon_boxes .icon-boxes-item.-inverted-icon:not(.-headline-icon):focus::before { border-color: var(--rh-iconbox-icon-color); color: var(--rh-iconbox-icon-color); background-color: var(--rh-iconbox-icon-hover-color); } /* ------------------------------------------------------------------------- * 13.4 ICONS NEBEN DEN ÜBERSCHRIFTEN * * Diese TAO-Variante besitzt absichtlich KEINEN Kreis. * Deshalb keine background-color- oder border-Flächenregel anwenden. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon::before { color: var(--rh-iconbox-icon-color); background: none; } .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon:hover::before, .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon:focus::before { color: var(--rh-iconbox-icon-color); background: none; } /* ------------------------------------------------------------------------- * 13.5 BOX-RAHMEN * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-boxed, .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color { border-color: var(--rh-iconbox-border-color); } /* ------------------------------------------------------------------------- * 13.6 TEXTFARBE INVERTIEREN * * TAO unterstützt zwei Ebenen: * - lokal an einer einzelnen .icon-boxes-item * - global an einem übergeordneten .-color-inverted-Bereich * * Die Regeln sind auf Icon-Boxen begrenzt. * ---------------------------------------------------------------------- */ /* Text */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item { color: var(--rh-iconbox-inverted-text-color); } /* Überschrift */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted h3, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item h3, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item h3 { color: var(--rh-iconbox-inverted-heading-color); } /* ------------------------------------------------------------------------- * 13.7 INVERTIERT + STANDARD / GROSSE ICONS * * Icon + Rahmen hell. * Bei eigener Box-Hintergrundfarbe übernimmt der Kreis die Boxfarbe. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted:not(.-headline-icon):not(.-inverted-icon)::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item:not(.-headline-icon):not(.-inverted-icon)::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item:not(.-headline-icon):not(.-inverted-icon)::before { border-color: var(--rh-iconbox-inverted-icon-color); color: var(--rh-iconbox-inverted-icon-color); background-color: transparent; } /* eigene Hintergrundfarbe + lokal invertiert */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color.-color-inverted:not(.-headline-icon):not(.-inverted-icon)::before, .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color.-color-inverted:not(.-headline-icon):not(.-inverted-icon):hover::before, .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color.-color-inverted:not(.-headline-icon):not(.-inverted-icon):focus::before { background-color: inherit; } /* eigene Hintergrundfarbe + global invertiert */ .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon)::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon):hover::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon):focus::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon)::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon):hover::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-background-color:not(.-headline-icon):not(.-inverted-icon):focus::before { background-color: inherit; } /* ------------------------------------------------------------------------- * 13.8 INVERTIERT + ICONS INVERTIERT * * TAO behandelt die Kombination "Textfarbe invertieren" + "Icon invertiert" * als helles Icon auf transparenter Fläche. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted.-inverted-icon:not(.-headline-icon)::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-inverted-icon:not(.-headline-icon)::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-inverted-icon:not(.-headline-icon)::before { border-color: var(--rh-iconbox-inverted-icon-color); color: var(--rh-iconbox-inverted-icon-color); background-color: transparent; } /* ------------------------------------------------------------------------- * 13.9 INVERTIERT + ICONS NEBEN DEN ÜBERSCHRIFTEN * * Weiterhin KEIN Kreis. Nur die Iconfarbe wird invertiert. * ---------------------------------------------------------------------- */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted.-headline-icon::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-headline-icon::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon::before { color: var(--rh-iconbox-inverted-icon-color); background: none; } .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted.-headline-icon:hover::before, .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted.-headline-icon:focus::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-headline-icon:hover::before, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item.-headline-icon:focus::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon:hover::before, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item.-headline-icon:focus::before { color: var(--rh-iconbox-inverted-icon-color); background: none; } /* ============================================================================= * 13A. ICON-BOXEN – TEXTLINK * * TAO-Backend-Auswahl "Link": * .icon-boxes-item-link.-link * * Kein Button-Padding, kein Rahmen, kein Hintergrund. * Hover / Focus reagieren auf die gesamte klickbare Icon-Box. * ========================================================================== */ .ce_rsce_tao_icon_boxes .icon-boxes-item-link.-link { display: inline-block; margin-top: var(--rh-iconbox-link-margin-top); padding: 0 0 var(--rh-iconbox-link-border-gap); border: 0; border-bottom: var(--rh-iconbox-link-border-width) solid currentColor; color: var(--rh-iconbox-link-color); font-family: inherit; font-size: inherit; font-weight: var(--rh-iconbox-link-weight); line-height: inherit; letter-spacing: var(--rh-iconbox-link-letter-spacing); text-transform: var(--rh-iconbox-link-transform); text-decoration: none; text-shadow: none; background: transparent; background-image: none; box-shadow: none; transition: color var(--rh-btn-speed) ease, border-color var(--rh-btn-speed) ease; } .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link.-link { color: var(--rh-iconbox-link-hover-color); text-decoration: none; } /* "Link" bei invertierter Textfarbe */ .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item-link.-link, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item-link.-link { color: var(--rh-iconbox-link-inverted-color); } .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted:hover > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted:focus > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes .icon-boxes-item.-color-inverted:focus-visible > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item:hover > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item:focus > .icon-boxes-item-link.-link, .ce_rsce_tao_icon_boxes.-color-inverted .icon-boxes-item:focus-visible > .icon-boxes-item-link.-link, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link.-link, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link.-link, .-color-inverted .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link.-link { color: var(--rh-iconbox-link-inverted-hover-color); } /* ============================================================================= * 14. GEMEINSAME BASIS: CONTENT- UND TAO-AKTIONSBUTTONS * ========================================================================== */ .button.ce_rsce_tao_button, .ce_rsce_tao_feature_box .feature-box-link, .ce_rsce_tao_headline_box .headline-box-link, .ce_rsce_tao_highlight_box .highlight-box-link, .ce_rsce_tao_icon_boxes .icon-boxes-item-link:not(.-link), .teaser-boxes-item > a.button, .rotating-boxes-item-content .rotating-boxes-item-link, .pricing-table-plan a, .fixed-note .fixed-note-button { position: relative; -webkit-appearance: none; appearance: none; display: inline-block; padding: var(--rh-btn-pad-y) var(--rh-btn-pad-x); border-width: var(--rh-btn-border-width); border-style: solid; font-family: var(--rh-btn-font); font-size: var(--rh-btn-size); font-weight: var(--rh-btn-weight); line-height: 1.25; text-align: center; text-decoration: none; text-transform: none; text-shadow: none; background-image: none; box-shadow: none; transition: color var(--rh-btn-speed) ease, background-color var(--rh-btn-speed) ease, border-color var(--rh-btn-speed) ease; } .button.ce_rsce_tao_button:hover, .button.ce_rsce_tao_button:focus, .button.ce_rsce_tao_button:active, .ce_rsce_tao_feature_box .feature-box-link:hover, .ce_rsce_tao_feature_box .feature-box-link:focus, .ce_rsce_tao_feature_box .feature-box-link:active, .ce_rsce_tao_headline_box .headline-box-link:hover, .ce_rsce_tao_headline_box .headline-box-link:focus, .ce_rsce_tao_headline_box .headline-box-link:active, .ce_rsce_tao_highlight_box .highlight-box-link:hover, .ce_rsce_tao_highlight_box .highlight-box-link:focus, .ce_rsce_tao_highlight_box .highlight-box-link:active, .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link:not(.-link), .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link:not(.-link), .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link:not(.-link), .ce_rsce_tao_icon_boxes .icon-boxes-item:active > .icon-boxes-item-link:not(.-link), .teaser-boxes-item > a.button:hover, .teaser-boxes-item > a.button:focus, .teaser-boxes-item > a.button:active, .rotating-boxes-item-content .rotating-boxes-item-link:hover, .rotating-boxes-item-content .rotating-boxes-item-link:focus, .rotating-boxes-item-content .rotating-boxes-item-link:active, .pricing-table-plan a:hover, .pricing-table-plan a:focus, .pricing-table-plan a:active, .fixed-note .fixed-note-button:hover, .fixed-note .fixed-note-button:focus, .fixed-note .fixed-note-button:active { text-decoration: none; text-shadow: none; background-image: none; box-shadow: none; } /* ============================================================================= * 15. BUTTON 1 – STANDARD * ========================================================================== */ .button.ce_rsce_tao_button:not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_feature_box .feature-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_headline_box .headline-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_icon_boxes .icon-boxes-item-link:not(.-link):not(.-secondary):not(.-tertiary):not(.-quaternary), .teaser-boxes-item > a.button:not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_highlight_box .highlight-box-link { border-color: var(--rh-btn-border); border-radius: var(--rh-btn-radius); color: var(--rh-btn-text); background: var(--rh-btn-bg); } .button.ce_rsce_tao_button:not(.-secondary):not(.-tertiary):not(.-quaternary):hover, .button.ce_rsce_tao_button:not(.-secondary):not(.-tertiary):not(.-quaternary):focus, .ce_rsce_tao_feature_box .feature-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary):hover, .ce_rsce_tao_feature_box .feature-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary):focus, .ce_rsce_tao_headline_box .headline-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary):hover, .ce_rsce_tao_headline_box .headline-box-link:not(.-secondary):not(.-tertiary):not(.-quaternary):focus, .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link:not(.-link):not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link:not(.-link):not(.-secondary):not(.-tertiary):not(.-quaternary), .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link:not(.-link):not(.-secondary):not(.-tertiary):not(.-quaternary), .teaser-boxes-item > a.button:not(.-secondary):not(.-tertiary):not(.-quaternary):hover, .teaser-boxes-item > a.button:not(.-secondary):not(.-tertiary):not(.-quaternary):focus, .ce_rsce_tao_highlight_box .highlight-box-link:hover, .ce_rsce_tao_highlight_box .highlight-box-link:focus { border-color: var(--rh-btn-hover-border); color: var(--rh-btn-hover-text); background: var(--rh-btn-hover-bg); } /* ============================================================================= * 16. BUTTON 2 – SECONDARY * ========================================================================== */ .button.ce_rsce_tao_button.-secondary, .ce_rsce_tao_feature_box .feature-box-link.-secondary, .ce_rsce_tao_headline_box .headline-box-link.-secondary, .ce_rsce_tao_icon_boxes .icon-boxes-item-link.-secondary, .teaser-boxes-item > a.button.-secondary, .pricing-table-plan.-highlighted a { border-color: var(--rh-b2-border); border-radius: var(--rh-b2-radius); color: var(--rh-b2-text); background: var(--rh-b2-bg); } .button.ce_rsce_tao_button.-secondary:hover, .button.ce_rsce_tao_button.-secondary:focus, .ce_rsce_tao_feature_box .feature-box-link.-secondary:hover, .ce_rsce_tao_feature_box .feature-box-link.-secondary:focus, .ce_rsce_tao_headline_box .headline-box-link.-secondary:hover, .ce_rsce_tao_headline_box .headline-box-link.-secondary:focus, .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link.-secondary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link.-secondary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link.-secondary, .teaser-boxes-item > a.button.-secondary:hover, .teaser-boxes-item > a.button.-secondary:focus, .pricing-table-plan.-highlighted a:hover, .pricing-table-plan.-highlighted a:focus { border-color: var(--rh-b2-hover-border); color: var(--rh-b2-hover-text); background: var(--rh-b2-hover-bg); } /* ============================================================================= * 17. BUTTON 3 – TERTIARY * ========================================================================== */ .button.ce_rsce_tao_button.-tertiary, .ce_rsce_tao_feature_box .feature-box-link.-tertiary, .ce_rsce_tao_headline_box .headline-box-link.-tertiary, .ce_rsce_tao_icon_boxes .icon-boxes-item-link.-tertiary, .teaser-boxes-item > a.button.-tertiary, .pricing-table-plan:not(.-highlighted) a, .rotating-boxes-item-content .rotating-boxes-item-link { border-color: var(--rh-b3-border); border-radius: var(--rh-b3-radius); color: var(--rh-b3-text); background: var(--rh-b3-bg); } .button.ce_rsce_tao_button.-tertiary:hover, .button.ce_rsce_tao_button.-tertiary:focus, .ce_rsce_tao_feature_box .feature-box-link.-tertiary:hover, .ce_rsce_tao_feature_box .feature-box-link.-tertiary:focus, .ce_rsce_tao_headline_box .headline-box-link.-tertiary:hover, .ce_rsce_tao_headline_box .headline-box-link.-tertiary:focus, .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link.-tertiary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link.-tertiary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link.-tertiary, .teaser-boxes-item > a.button.-tertiary:hover, .teaser-boxes-item > a.button.-tertiary:focus, .pricing-table-plan:not(.-highlighted) a:hover, .pricing-table-plan:not(.-highlighted) a:focus, .rotating-boxes-item-content .rotating-boxes-item-link:hover, .rotating-boxes-item-content .rotating-boxes-item-link:focus { border-color: var(--rh-b3-hover-border); color: var(--rh-b3-hover-text); background: var(--rh-b3-hover-bg); } /* ============================================================================= * 17A. PRICING TABLE – TAO-SCHATTEN / GRADIENT NEUTRALISIEREN * * TAO setzt bei der hervorgehobenen Pricing Table über seine Secondary-Regel * einen inset box-shadow und einen Verlauf. Die normalen Pricing-Pläne laufen * über die Tertiary-Regel. * * Die Selektoren hier besitzen dieselbe/ausreichende Spezifität und stehen * nach TAO main.css. Kein !important nötig. * ========================================================================== */ .pricing-table-plan.-highlighted a, .pricing-table-plan.-highlighted a:hover, .pricing-table-plan.-highlighted a:focus, .pricing-table-plan.-highlighted a:active, .pricing-table-plan:not(.-highlighted) a, .pricing-table-plan:not(.-highlighted) a:hover, .pricing-table-plan:not(.-highlighted) a:focus, .pricing-table-plan:not(.-highlighted) a:active { text-shadow: none; background-image: none; box-shadow: none; } /* ============================================================================= * 18. BUTTON 4 – QUATERNARY * ========================================================================== */ .button.ce_rsce_tao_button.-quaternary, .ce_rsce_tao_feature_box .feature-box-link.-quaternary, .ce_rsce_tao_headline_box .headline-box-link.-quaternary, .ce_rsce_tao_icon_boxes .icon-boxes-item-link.-quaternary, .teaser-boxes-item > a.button.-quaternary { border-color: var(--rh-b4-border); border-radius: var(--rh-b4-radius); color: var(--rh-b4-text); background: var(--rh-b4-bg); } .button.ce_rsce_tao_button.-quaternary:hover, .button.ce_rsce_tao_button.-quaternary:focus, .ce_rsce_tao_feature_box .feature-box-link.-quaternary:hover, .ce_rsce_tao_feature_box .feature-box-link.-quaternary:focus, .ce_rsce_tao_headline_box .headline-box-link.-quaternary:hover, .ce_rsce_tao_headline_box .headline-box-link.-quaternary:focus, .ce_rsce_tao_icon_boxes .icon-boxes-item:hover > .icon-boxes-item-link.-quaternary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus > .icon-boxes-item-link.-quaternary, .ce_rsce_tao_icon_boxes .icon-boxes-item:focus-visible > .icon-boxes-item-link.-quaternary, .teaser-boxes-item > a.button.-quaternary:hover, .teaser-boxes-item > a.button.-quaternary:focus { border-color: var(--rh-b4-hover-border); color: var(--rh-b4-hover-text); background: var(--rh-b4-hover-bg); } /* Alte TAO-Flächenanimation von Button 4 deaktivieren. */ .button.ce_rsce_tao_button.-quaternary::after, .ce_rsce_tao_feature_box .feature-box-link.-quaternary::after, .ce_rsce_tao_headline_box .headline-box-link.-quaternary::after, .teaser-boxes-item > a.button.-quaternary::after { display: none; } /* ============================================================================= * 19. KLEINER INLINE-BUTTON * ========================================================================== */ .button.ce_rsce_tao_button.-small { padding: var(--rh-btn-small-pad-y) var(--rh-btn-small-pad-x); font-size: var(--rh-btn-size-small); } /* ============================================================================= * FIXED NOTE / COOKIE-HINWEIS * * Der TAO-Button .fixed-note-button wird in das RH-Button-System integriert. * Standardmässig entspricht er Button 2 / Secondary. * ========================================================================== */ .fixed-note .fixed-note-button { margin: 0; border-color: var(--rh-fixed-note-border); border-radius: var(--rh-fixed-note-radius); color: var(--rh-fixed-note-text); background: var(--rh-fixed-note-bg); background-image: none; box-shadow: none; text-shadow: none; } .fixed-note .fixed-note-button:hover, .fixed-note .fixed-note-button:focus { border-color: var(--rh-fixed-note-hover-border); color: var(--rh-fixed-note-hover-text); background: var(--rh-fixed-note-hover-bg); background-image: none; box-shadow: none; text-shadow: none; } /* ============================================================================= * 20. FORMULAR-BUTTONS – GEMEINSAME BASIS * ========================================================================== */ .mod_search form button[type="submit"], .mod_search form input[type="submit"], .mod_registration .widget-submit .submit, .mod_login:not(.header-login) .widget-submit .submit, .main-content .ce_form .widget-submit .submit, .main-content .ce_form .widget-submit input[type="submit"], .header-login .formbody button[type="submit"], .header-login .formbody input[type="submit"], .header-dropdown > ul button[type="submit"], .header-dropdown > ul input[type="submit"], .page-footer .widget-submit .submit, .page-footer .widget-submit input[type="submit"], .footer-bar button, .footer-bar input[type="submit"], .mod_subscribe .widget-submit .submit { position: relative; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--rh-form-btn-height); padding: 0 var(--rh-btn-pad-x); border-width: var(--rh-btn-border-width); border-style: solid; font-family: var(--rh-btn-font); font-size: var(--rh-btn-size); font-weight: var(--rh-btn-weight); line-height: 1; text-align: center; text-decoration: none; text-transform: none; text-shadow: none; background-image: none; box-shadow: none; transition: color var(--rh-btn-speed) ease, background-color var(--rh-btn-speed) ease, border-color var(--rh-btn-speed) ease; } /* ============================================================================= * 21. ALLGEMEINE FORMULARE IM HAUPTINHALT * ========================================================================== */ .main-content .ce_form .widget-submit .submit, .main-content .ce_form .widget-submit input[type="submit"] { min-height: var(--rh-form-main-height); padding: 0 var(--rh-form-main-pad-x); font-size: var(--rh-form-main-size); border-color: var(--rh-form-border); border-radius: var(--rh-form-radius); color: var(--rh-form-text); background: var(--rh-form-bg); } .main-content .ce_form .widget-submit .submit:hover, .main-content .ce_form .widget-submit .submit:focus, .main-content .ce_form .widget-submit input[type="submit"]:hover, .main-content .ce_form .widget-submit input[type="submit"]:focus { border-color: var(--rh-form-hover-border); color: var(--rh-form-hover-text); background: var(--rh-form-hover-bg); background-image: none; } /* ============================================================================= * 22. SUCHE * ========================================================================== */ .mod_search form button[type="submit"], .mod_search form input[type="submit"] { height: var(--rh-search-height); min-height: var(--rh-search-height); border-color: var(--rh-search-border); border-radius: var(--rh-search-radius); color: var(--rh-search-text); background: var(--rh-search-bg); } .mod_search form input[type="search"] { height: var(--rh-search-height); min-height: var(--rh-search-height); } .mod_search form button[type="submit"]:hover, .mod_search form button[type="submit"]:focus, .mod_search form input[type="submit"]:hover, .mod_search form input[type="submit"]:focus { border-color: var(--rh-search-hover-border); color: var(--rh-search-hover-text); background: var(--rh-search-hover-bg); background-image: none; } /* ============================================================================= * 23. REGISTRIERUNG * ========================================================================== */ .mod_registration .widget-submit .submit { border-color: var(--rh-register-border); border-radius: var(--rh-register-radius); color: var(--rh-register-text); background: var(--rh-register-bg); } .mod_registration .widget-submit .submit:hover, .mod_registration .widget-submit .submit:focus { border-color: var(--rh-register-hover-border); color: var(--rh-register-hover-text); background: var(--rh-register-hover-bg); background-image: none; } /* ============================================================================= * 24. LOGIN-SEITE * ========================================================================== */ .mod_login:not(.header-login) .widget-submit .submit { border-color: var(--rh-login-border); border-radius: var(--rh-login-radius); color: var(--rh-login-text); background: var(--rh-login-bg); } .mod_login:not(.header-login) .widget-submit .submit:hover, .mod_login:not(.header-login) .widget-submit .submit:focus { border-color: var(--rh-login-hover-border); color: var(--rh-login-hover-text); background: var(--rh-login-hover-bg); background-image: none; } /* ============================================================================= * 25. KONTAKTFORMULAR * * In Contao am Absende-Feld die CSS-Klasse "rh-contact-form" vergeben. * ========================================================================== */ .main-content .ce_form .widget-submit.rh-contact-form .submit, .main-content .ce_form .widget-submit .submit.rh-contact-form, .ce_form .widget-submit.rh-contact-form .submit, .ce_form .widget-submit .submit.rh-contact-form { border-color: var(--rh-contact-border); border-radius: var(--rh-contact-radius); color: var(--rh-contact-text); background: var(--rh-contact-bg); } .main-content .ce_form .widget-submit.rh-contact-form .submit:hover, .main-content .ce_form .widget-submit.rh-contact-form .submit:focus, .main-content .ce_form .widget-submit .submit.rh-contact-form:hover, .main-content .ce_form .widget-submit .submit.rh-contact-form:focus, .ce_form .widget-submit.rh-contact-form .submit:hover, .ce_form .widget-submit.rh-contact-form .submit:focus, .ce_form .widget-submit .submit.rh-contact-form:hover, .ce_form .widget-submit .submit.rh-contact-form:focus { border-color: var(--rh-contact-hover-border); color: var(--rh-contact-hover-text); background: var(--rh-contact-hover-bg); background-image: none; } /* ============================================================================= * 26. NEWSLETTER * ========================================================================== */ .mod_subscribe .widget-submit .submit { height: var(--rh-newsletter-height); min-height: var(--rh-newsletter-height); border-color: var(--rh-newsletter-border); border-radius: var(--rh-newsletter-radius); color: var(--rh-newsletter-text); background: var(--rh-newsletter-bg); } .mod_subscribe input[type="text"], .mod_subscribe input[type="email"] { height: var(--rh-newsletter-height); min-height: var(--rh-newsletter-height); } .mod_subscribe .widget-submit .submit:hover, .mod_subscribe .widget-submit .submit:focus { border-color: var(--rh-newsletter-hover-border); color: var(--rh-newsletter-hover-text); background: var(--rh-newsletter-hover-bg); background-image: none; } /* ============================================================================= * 27. HEADER-LOGIN / HEADER-DROPDOWN * ========================================================================== */ .header-login .formbody button[type="submit"], .header-login .formbody input[type="submit"], .header-dropdown > ul button[type="submit"], .header-dropdown > ul input[type="submit"] { border-color: var(--rh-header-form-border); border-radius: var(--rh-header-form-radius); color: var(--rh-header-form-text); background: var(--rh-header-form-bg); } .header-login .formbody button[type="submit"]:hover, .header-login .formbody button[type="submit"]:focus, .header-login .formbody input[type="submit"]:hover, .header-login .formbody input[type="submit"]:focus, .header-dropdown > ul button[type="submit"]:hover, .header-dropdown > ul button[type="submit"]:focus, .header-dropdown > ul input[type="submit"]:hover, .header-dropdown > ul input[type="submit"]:focus { border-color: var(--rh-header-form-hover-border); color: var(--rh-header-form-hover-text); background: var(--rh-header-form-hover-bg); background-image: none; } /* ============================================================================= * 28. FOOTER-FORMULARE * ========================================================================== */ .page-footer .widget-submit .submit, .page-footer .widget-submit input[type="submit"], .footer-bar button, .footer-bar input[type="submit"] { border-color: var(--rh-footer-form-border); border-radius: var(--rh-footer-form-radius); color: var(--rh-footer-form-text); background: var(--rh-footer-form-bg); } .page-footer .widget-submit .submit:hover, .page-footer .widget-submit .submit:focus, .page-footer .widget-submit input[type="submit"]:hover, .page-footer .widget-submit input[type="submit"]:focus, .footer-bar button:hover, .footer-bar button:focus, .footer-bar input[type="submit"]:hover, .footer-bar input[type="submit"]:focus { border-color: var(--rh-footer-form-hover-border); color: var(--rh-footer-form-hover-text); background: var(--rh-footer-form-hover-bg); background-image: none; } /* ============================================================================= * 29. ACTIVE – ALTE TAO-VERLÄUFE UNTERDRÜCKEN * ========================================================================== */ .button.ce_rsce_tao_button:active, .ce_rsce_tao_feature_box .feature-box-link:active, .ce_rsce_tao_headline_box .headline-box-link:active, .ce_rsce_tao_highlight_box .highlight-box-link:active, .rotating-boxes-item-content .rotating-boxes-item-link:active, .pricing-table-plan a:active, .mod_search form button[type="submit"]:active, .mod_search form input[type="submit"]:active, .mod_registration .widget-submit .submit:active, .mod_login:not(.header-login) .widget-submit .submit:active, .main-content .ce_form .widget-submit .submit:active, .main-content .ce_form .widget-submit input[type="submit"]:active, .header-login .formbody button[type="submit"]:active, .header-login .formbody input[type="submit"]:active, .header-dropdown > ul button[type="submit"]:active, .header-dropdown > ul input[type="submit"]:active, .page-footer .widget-submit .submit:active, .page-footer .widget-submit input[type="submit"]:active, .footer-bar button:active, .footer-bar input[type="submit"]:active, .mod_subscribe .widget-submit .submit:active, .fixed-note .fixed-note-button:active { background-image: none; box-shadow: none; text-shadow: none; } /* ============================================================================= * 30. COLORBOX / LIGHTBOX * * Keine Umgestaltung technischer Colorbox-Steuerungen. * ========================================================================== */ #colorbox button { box-shadow: none; } /* ============================================================================= * ENDE RH BUTTON SYSTEM * ========================================================================== */