/* Theme Name: Storefront Child Theme URI: https://shot-mate.com Description: Barrierefreies, SEO-optimiertes Child Theme mit Farbkonzept und Landingpage-Vorlage. Author: Kefayati Solutions (KESOL) Template: storefront Version: 1.0 */ /* ================================================ CSS-Datei: style.css ================================================ */ /* ====================================== Zentrale CSS-Variablen (Corporate Design + Barrierefreiheit) ====================================== */ /* Reguläre Wärte - Light-Mode */ :root { /* ===== Textfarben ===== */ --color-text: #000; /* Standard-Textfarbe – Schwarz */ --color-text-on-brand-color: #fff; /* Textfarbe auf Markenfarbe – Weiß */ /* ===== Textfarben ===== */ --color-text-menu: #000; /* Textfarbe für Navigation – Schwarz im Darkmode */ /* ===== Hintergrundfarben ===== */ --color-bg-light: #fff; /* Standard-Hintergrundfarbe – Weiß */ /* ===== CI-Farbe ===== */ --color-brand: #B10000; /* Corporate Identity – Rot */ /* ===== Kontrastfarben ===== */ --color-contrast-bg: #D3D3D3; /* Kontrast-Hintergrund – Hellgrau */ --color-contrast-text: #000; /* Kontrast-Textfarbe – Schwarz */ /* ===== Produktkarte Hintergrundfarbe ===== */ --color-card-bg: #fff; /* Hintergrundfarbe für Produktkarten – Weiß */ /* ===== Hover-Effekte Button & Links ===== */ --color-hover-link: #B10000; /* Hover-Farbe für Links – CI-Rot */ --color-hover-button: #000; /* Hover-Farbe für Buttons – Schwarz */ --color-link-text: #000; /* Link-Text - Schwarz */ /* ===== Typografie ===== */ --font-family-base: 'fairplex-narrow', serif; /* Basis-Schriftart für Fließtext und Überschriften */ /* ===== Darkmode-Button Farben ===== */ --icon-color: #B10000; /* Standard-Icon-Farbe – Rot */ /* ===== Breadcrumb Shop ===== */ --color-breadcrumb: #000; /* Breadcrumb Farbe Shop - Schwarz */ } /* ====================================== Dark Mode – Manuelle Aktivierung über Klasse .dark-mode Ziel: Umschaltbar per Button, unabhängig vom Betriebssystem ====================================== */ body.dark-mode { /* ===== Textfarben ===== */ --color-text: #fff; /* Standard-Textfarbe – Weiß im Darkmode */ --color-text-on-brand-color: #fff; /* Weiß auf CI-Farbe */ /* ===== Textfarben ===== */ --color-text-menu: #000; /* Textfarbe für Navigation – Schwarz im Darkmode */ /* ===== Hintergrundfarben ===== */ --color-bg-light: #000; /* Seitenhintergrund – Schwarz */ /* ===== CI-Farbe ===== */ --color-brand: #B10000; /* Corporate Identity – Rot bleibt gleich */ /* ===== Kontrastfarben ===== */ --color-contrast-bg: #333; /* Kontrast-Hintergrund – Dunkelgrau */ --color-contrast-text: #fff; /* Kontrast-Text – Weiß */ /* ===== Produktkarte Hintergrundfarbe ===== */ --color-card-bg: #1e1e1e; /* Hintergrundfarbe für Produktkarten – Dunkelgrau */ /* ===== Hover-Effekte Button & Links ===== */ --color-hover-link: #B10000; /* Hover-Farbe für Links – CI-Rot */ --color-hover-button: #000; /* Hover-Farbe für Buttons – Schwarz */ --color-link-text: #fff; /* Link-Text - Schwarz */ /* ===== Darkmode-Button Farben ===== */ --icon-color: #fff; /* Standard-Icon-Farbe – Weiß im Darkmode */ /* ===== Breadcrumb Shop ===== */ --color-breadcrumb: #fff; /* Breadcrumb Farbe Shop - Weiß */ } /* ====================================== GLOBALE TEXTFARBE – Lightmode/Darkmode ====================================== */ /* 🔆 Lightmode: Standard-Textfarbe global setzen */ body:not(.dark-mode) { color: var(--color-text); /* Standardfarbe für Texte im Lightmode (Schwarz) */ } /* 🌙 Darkmode: Standard-Textfarbe global setzen */ body.dark-mode { color: var(--color-text-on-brand-color); /* Weiß als globaler Textwert */ } /* Shop-Produkte & Texte in Lightmode */ body:not(.dark-mode) .price, body:not(.dark-mode) .amount, body:not(.dark-mode) .product_meta, body:not(.dark-mode) .woocommerce-product-details__short-description { color: var(--color-text) !important; } /* Preis auf der Shop-Seite */ .amount { /* Preisangaben in WooCommerce */ color: var(--color-text); /* Standardpreisfarbe – Schwarz im Lightmode */ } /* ====================================== Optional: Visuelle Anpassungen für Hintergrund ====================================== */ body.dark-mode { background-color: var(--color-bg-light); /* Hintergrundfarbe für gesamte Seite */ color: var(--color-text); /* Fließtextfarbe */ } /* Links im Darkmode */ body.dark-mode a { color: var(--color-link-text); /* Linkfarbe: Weiß */ } body.dark-mode a:hover { color: var(--color-hover-link); /* Hover in CI-Rot */ } /* ====================================== GLOBAL – Buttons & Links Ziel: Einheitliches Design für alle Buttons und Links ====================================== */ /* Standard-Button-Stil */ .wp-block-button__link, /* Gutenberg Button */ button, /* HTML Button */ input[type="submit"], /* Formular Absenden-Button */ input[type="button"] { /* Formular generischer Button */ background-color: var(--color-brand); /* CI-Rot als Hintergrund */ color: var(--color-text-on-brand-color); /* Weißer Text auf CI-Rot */ border: none; /* Kein Rahmen */ border-radius: 2em; /* Runde Form – Pillenstil */ padding: 0.7em 1.5em; /* Innenabstand vertikal/horizontal */ font-weight: bold; /* Fetter Text */ font-size: 1rem; /* Einheitliche Textgröße */ text-decoration: none; /* Keine Unterstreichung */ cursor: pointer; /* Zeigt interaktive Funktion */ transition: background-color 0.3s ease, /* Weiche Farbe beim Hover */ color 0.3s ease; /* Weiche Textfarbe beim Hover */ } /* Hover-Effekt für alle Buttons */ .wp-block-button__link:hover, /* Gutenberg Button – Hover */ button:hover, /* HTML Button – Hover */ input[type="submit"]:hover, /* Submit Button – Hover */ input[type="button"]:hover { /* Button – Hover */ background-color: var(--color-hover-button); /* Hintergrund wechselt auf Schwarz */ color: var(--color-brand); /* Text wird CI-Rot */ } /* Such-Button Shop */ .wp-block-search__button:hover { background-color: var(--color-brand); /* CI-Rot las Hintergrund */ color: #000; /* Schriftfarbe - Schwarz */ } /* Submit Button für Bewertung */ .submit:hover { background-color: var(--color-brand) !important; /* CI-Rot las Hintergrund */ color: #000 !important; /* Schriftfarbe - Schwarz */ } /* In den Warenkorb legen Button */ .add_to_cart_button { background-color: var(--color-brand) !important; /* CI-Rot las Hintergrund */ color: #fff !important; /* Textfarbe - Weiß */ } /* In den Warenkorb legen Button HOVER */ .add_to_cart_button:hover { background-color: var(--color-brand) !important; /* CI-Rot las Hintergrund */ color: #000 !important; /* Textfarbe - Schwarz */ } /* Listen Link in Custim-Footer */ .wp-block-list { color: var(--color-link-text); /* Listen Text-Farbe - Weiss/Schwarz */ } /* Globale Link-Stile */ a { /* Alle Links */ color: var(--color-text); /* Standardfarbe – Schwarz */ text-decoration: none; /* Keine Unterstreichung */ transition: color 0.3s ease; /* Weicher Übergang bei Hover */ } /* Hover-Effekt für Links */ a:hover { /* Hover-Zustand für Links */ color: var(--color-hover-link); /* CI-Rot beim Überfahren */ } /* Fokus-Zustand für Barrierefreiheit */ a:focus { /* Fokus-Zustand für Barrierefreiheit */ outline: 3px solid var(--color-brand); /* Deutliche Umrandung im Fokus - Rot */ outline-offset: 2px; /* Abstand der Umrandung */ } /* ====================================== NAVIGATION & TEXT – Farbe + Hover Ziel: Lesbarkeit + CI-Farbe im Hover (Header, Menü, Warenkorb etc.) ====================================== */ /* Navigation & Shop-Elemente – Standardfarbe */ .main-navigation a, /* Hauptnavigation */ .woocommerce a, /* WooCommerce-Elemente */ .woocommerce-cart .amount, /* Preisangaben */ .site-header-cart a, /* Warenkorb-Link */ .site-header .menu a, /* Menüelemente */ .widget a, /* Widgets */ .footer-widgets a { /* Footer-Links */ color: var(--color-text); /* Textfarbe im Lightmode: Schwarz */ transition: color 0.3s ease; /* Sanfter Übergang beim Hover */ } /* Hover-Zustand – CI-Farbe */ .main-navigation a:hover, .woocommerce a:hover, .woocommerce-cart .amount:hover, .site-header-cart a:hover, .site-header .menu a:hover, .widget a:hover, .footer-widgets a:hover { color: var(--color-hover-link); /* Hover-Farbe: CI-Rot */ } /* ====================================== MOBILES MENÜ – Textfarbe & aktive Seite Ziel: Lesbare Navigation auf iOS + korrekte CI-Farbe ====================================== */ /* Handheld Navigation – Mobile Menü */ .handheld-navigation ul#menu-shot-mate-menue-1 li a { color: var(--color-text-menu); /* Lightmode: Schwarze Schrift im Burger-Menü !important hier rausgenommen */ } /* Hover-Effekt für Handheld Navigation */ .handheld-navigation ul#menu-shot-mate-menue-1 li a:hover { color: var(--color-hover-link); /* Hover: CI-Rot - !important hier rausgenommen */ } /* Aktive Seite: CI-Farbe */ .handheld-navigation ul#menu-shot-mate-menue-1 li.current_page_item a, .handheld-navigation ul#menu-shot-mate-menue-1 li a[aria-current="page"] { color: var(--color-brand); /* Aktive Seite: Rot - !important hier rausgenommen*/ } /* ====================================== DARKMODE – Mobiles Menü (Burger-Menü) ====================================== */ /* Handheld Navigation – Mobile Menü im Darkmode */ body.dark-mode .handheld-navigation ul.menu a { color: var(--color-text-menu); } /* Optional: Hover-Effekt im mobilen Menü bei Darkmode */ body.dark-mode .handheld-navigation ul.menu a:hover { color: var(--color-hover-link); } /* ====================================== NAVIGATION – Aktive Seite (Current) in CI-Farbe Ziel: Aktuelle Seite im Menü farblich hervorheben ====================================== */ .main-navigation ul li.current-menu-item > a, /* Aktuelle Seite */ .main-navigation ul li.current_page_item > a, /* Alternative WP-Klasse */ .main-navigation ul li.current-menu-ancestor > a { /* Elternseite bei Unterpunkten */ color: var(--color-brand) !important; /* CI-Rot für aktiven Menüpunkt */ font-weight: bold; /* Optional: Fettschrift für Sichtbarkeit */ } /* Sicherstellen, dass auch Hover-Farbe aktiv bleibt bei aktiver Seite */ .main-navigation ul li.current-menu-item > a:hover, .main-navigation ul li.current_page_item > a:hover, .main-navigation ul li.current-menu-ancestor > a:hover { color: var(--color-brand); /* Hover bleibt CI-Rot */ } /* ====================================== DARKMODE – Navigation & Menü ====================================== */ /* Links im Darkmode – Navigation, Header, WooCommerce, Widgets, Footer */ body.dark-mode .main-navigation a, /* Links im Darkmode für Navigation */ body.dark-mode .site-header .menu a, /* Links im Darkmode für Header-Menü */ body.dark-mode .woocommerce a, /* Links im Darkmode für WooCommerce */ body.dark-mode .woocommerce-cart .amount, /* Preisangaben im Darkmode für WooCommerce */ body.dark-mode .site-header-cart a, /* Links im Darkmode für Warenkorb */ body.dark-mode .widget a, /* Links in Darkmode für Widgets */ body.dark-mode .footer-widgets a { /* Links im Darkmode für Footer-Widgets */ color: var(--color-text-on-brand-color); /* Weißer Text im Darkmode */ } /* Hover-Effekt für Links im Darkmode */ body.dark-mode .main-navigation a:hover, /* Hover-Effekt für Navigation im Darkmode */ body.dark-mode .site-header .menu a:hover, /* Hover-Effekt für Header-Menü im Darkmode */ body.dark-mode .woocommerce a:hover, /* Hover-Effekt für WooCommerce im Darkmode */ body.dark-mode .woocommerce-cart .amount:hover, /* Hover-Effekt für Preisangaben im Darkmode */ body.dark-mode .site-header-cart a:hover, /* Hover-Effekt für Warenkorb im Darkmode */ body.dark-mode .widget a:hover, /* Hover-Effekt für Widgets im Darkmode */ body.dark-mode .footer-widgets a:hover { /* Hover-Effekt für Footer-Widgets im Darkmode */ color: var(--color-hover-link); /* CI-Rot für Hover-Effekt im Darkmode */ } /* ====================================== BREADCRUMB – Pfadnavigation lesbar & CI-konform ====================================== */ .woocommerce-breadcrumb a { color: var(--color-breadcrumb); /* Schwarz/Weiß abhängig von Modus */ } .woocommerce-breadcrumb a:hover { color: var(--color-hover-link) !important; /* Hover-Farbe (Immer Rot) */ } body.dark-mode .woocommerce-breadcrumb a { color: var(--color-breadcrumb); /* Weiß im Darkmode */ } /* ====================================== HEADER ====================================== */ /* Container – optional, falls nötig */ .site-branding { /* Container für das Logo */ display: flex; /* Flexbox für zentrierte Ausrichtung */ align-items: center; /* Vertikale Zentrierung */ justify-content: flex-start; /* Horizontale Zentrierung */ max-width: 100%; /* Maximale Breite des Containers */ padding: 0; /* Kein Innenabstand */ margin: 0 auto; /* Zentriert den Container */ } /* Logo-Bild – quadratisch, skalierend - mit höherer Spezifität */ .site-header .site-branding img.custom-logo { width: 10vw; /* 10% der Viewport-Breite */ aspect-ratio: 1 / 1; /* Quadratisch */ height: auto; /* Automatische Höhe basierend auf Breite */ object-fit: contain; /* Kein Stauchen oder Abschneiden */ max-width: 100px; /* Obergrenze Desktop */ min-width: 40px; /* Untergrenze für kleine Geräte */ } /* Optional: Medienabfrage für besonders kleine Geräte */ @media (max-width: 480px) { .site-header .site-branding img.custom-logo { /* Für kleine Geräte */ width: 20vw; /* 20% der Viewport-Breite */ max-width: 90px; /* Obergrenze für kleine Geräte */ min-width: 50px; /* Untergrenze für kleine Geräte */ } } /* MOBIL: Logo links, Burger-Menü rechts – korrekt mit Flexbox */ @media (max-width: 767px) { /* Gilt für Mobilgeräte bis 767px */ .site-header { /* Gesamtcontainer für Header */ display: flex; /* Aktiviert Flexbox für horizontale Anordnung */ align-items: center; /* Vertikale Ausrichtung: zentriert Logo & Menübutton */ justify-content: space-between; /* Logo links, Menü rechts – mit Platz dazwischen */ flex-wrap: wrap; /* Erlaubt Zeilenumbruch bei wenig Platz */ padding: 1rem 1em; /* Horizontaler Innenabstand links/rechts */ } .menu-toggle { /* Der Burger-Menübutton im Mobil-Header */ margin: 0; /* Entfernt Standard-Margin */ padding: 0.75em 1em; /* Innenabstand: oben/unten 0.75em, rechts/links 1em */ align-self: center; /* Vertikal zentriert im Flex-Container */ } /* Menü-Ausklapp-Design im Mobilbereich schöner gestalten */ .main-navigation ul.menu, .main-navigation ul.nav-menu { /* Menüliste */ background: #f9f9f9; /* Heller Hintergrund (kann angepasst werden) */ padding: 1em; /* Innenabstand rundherum */ margin: 0; /* Kein Außenabstand */ border-radius: 0.5em; /* Abgerundete Ecken */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Weicher Schatten für Tiefe */ transition: all 0.3s ease; /* Weiches Öffnen */ } .main-navigation ul li { /* Menüeinträge */ margin-bottom: 0.75em; /* Abstand zwischen Menüeinträgen */ } .main-navigation ul li:last-child { /* Letzter Menüeintrag */ margin-bottom: 0; /* Kein Abstand nach dem letzten Menüpunkt */ } .custom-logo-link { /* Verhindert Einrückung des Logos */ margin-left: 0 !important; /* Setzt ggf. Theme-Zentrierung außer Kraft */ } } /* ====================================== DARKMODE – Header-Hintergrund ====================================== */ /* Header-Hintergrund im Lightmode */ .site-header { /* Header im Lightmode für besser Lesbarkeit */ background-color: var(--color-header); /* Hintergrund im Lightmode (Weiß) */ color: var(--color-text); /* Textfarbe - Schwarz */ } /* Header-Hintergrund im Darkmode */ body.dark-mode .site-header { /* Header im Darkmode für bessere Lesbarkeit */ background-color: var(--color-header); /* Hintergrund im Darkmode (Schwarz) */ color: var(--color-text); /* Textfarbe – Weiß */ } /* ====================================== Überschriften - Lightmode ====================================== */ /* Überschriften von H1 - H6 - Lightmode */ h1, h2, h3, h4, h5, h6, /* Alle Standard-Überschriften */ .wp-block-heading h1, /* Gutenberg-Überschrift Block */ .wp-block-heading h2, .wp-block-heading h3, .wp-block-heading h4, .wp-block-heading h5, .wp-block-heading h6 { /* Gutenberg-Überschrift Block */ color: var(--color-brand) !important; /* Markenfarbe für Überschriften - Rot */ font-family: var(--font-family-base); /* Schriftart für Überschriften */ font-weight: 700; /* Fetter Text */ line-height: 1.2; /* Zeilenhöhe für bessere Lesbarkeit */ font-style: normal; /* Kein Kursivstil */ } /* ====================================== Überschriften - Darkmode ====================================== */ /* DARKMODE - Überschriften im Cover */ body.dark-mode .wp-block-cover__inner-container h1, /* Gutenberg Cover Block Überschrift */ body.dark-mode .wp-block-cover h1, /* Gutenberg Cover Block Überschrift */ body.dark-mode .wp-block-heading h1 { /* Gutenberg Überschrift Block */ color: var(--color-brand); /* Markenfarbe für Überschriften bleibt Rot */ } /* ====================================== Gutenberg Cover-Block – Hero-Bereich (fixiert für -Hintergrund) Ziel: Korrektes Bildverhältnis & vertikal zentrierter Inhalt ====================================== */ .wp-block-cover.alignfull { /* Vollbreite Cover-Block */ position: relative; /* Positionierung für Inhaltsschichtung */ min-height: 100vh; /* Volle Viewport-Höhe – echter Hero */ overflow: hidden; /* Verhindert Bildüberlauf */ display: flex; /* Flexbox für Zentrierung */ align-items: center; /* Vertikal zentriert */ justify-content: center; /* Horizontal zentriert */ padding: 2em; /* Innenabstand für Inhalte */ text-align: center; /* Texte zentrieren */ } /* Bild korrekt skalieren (keine Verzerrung) */ .wp-block-cover__image-background { /* Hintergrundbild des Cover-Blocks */ object-fit: cover; /* Bild skaliert proportional */ width: 100%; /* Volle Breite des Containers */ height: 100%; /* Volle Abdeckung des Containers */ position: absolute; /* Bild hinter Inhalt positionieren */ top: 0; /* Oben positionieren */ left: 0; /* Linksbündig */ z-index: 0; /* Unter dem Inhalt, aber über dem Overlay */ } /* Dim-Overlay bleibt bestehen, aber unter Text */ .wp-block-cover__background { /* Overlay für dunkle Überlagerung */ position: absolute; /* Overlay über dem Bild */ top: 0; /* Über dem Bild positionieren */ left: 0; /* Linksbündig */ width: 100%; /* Volle Breite */ height: 100%; /* Volle Höhe */ z-index: 1; /* Unter dem Inhalt, aber über dem Bild */ } /* Inhaltsebene */ .wp-block-cover__inner-container { /* Container für den Inhalt */ position: relative; /* Inhalte über Bild und Overlay */ z-index: 2; /* Über dem Overlay, aber unter dem Bild */ display: flex; /* Flexbox für vertikale Ordnung */ flex-direction: column; /* Inhalte untereinander anordnen */ align-items: center; /* Horizontale Zentrierung */ justify-content: center; /* Vertikale Zentrierung */ max-width: 1000px; /* Begrenzung für große Bildschirme */ gap: 1.5em; /* Abstand zwischen Text-Elementen */ } /* Button-Zeile */ .wp-block-cover__inner-container .wp-block-buttons { /* Button-Container */ margin-top: 2em; /* Abstand nach unten */ } /* ====================================== BUTTON – COVER-BEREICH (Hero etc.) Ziel: Einheitliches Button-Design auch im Gutenberg-Cover-Block ====================================== */ /* Button im Cover-Bereich – Einheitliches Design */ .wp-block-cover .wp-block-button__link { /* Button-Link im Cover-Bereich */ background-color: var(--color-brand) !important; /* Hintergrund in CI-Farbe – Rot */ color: var(--color-text-on-brand-color) !important; /* Textfarbe – Weiß */ border-radius: 2em; /* Abgerundete Ecken – Pillenform */ font-weight: bold; /* Fett gedruckter Button-Text */ padding: 0.7em 1.5em; /* Innenabstand: vertikal & horizontal */ font-size: clamp(0.9rem, 2.5vw, 1.2rem); /* Responsiv skalierende Schriftgröße */ text-decoration: none; /* Kein Unterstrich beim Text */ transition: background-color 0.3s ease; /* Weiche Farbüberblendung beim Hover */ } /* Hover-Effekt für Buttons im Cover-Bereich */ .wp-block-cover .wp-block-button__link:hover { /* Hover-Effekt für Buttons im Cover-Bereich */ background-color: var(--color-brand) !important; /* Hover-Zustand – dunkleres Rot */ color: var(--color-hover-button) !important; /* Text: Schwarz wie im restlichen Design */ } /* ====================================== Hero-Typografie – responsiv skalierend Ziel: Auf Desktop mehr visuelle Wirkung ====================================== */ /* Hero-Typografie – Überschrift, Fließtext und Buttons */ @media (min-width: 768px) { /* Gilt ab Tablet quer/kleine Laptops */ .wp-block-cover__inner-container h1 { /* Überschrift im Hero-Bereich */ font-size: 3rem; /* Große Überschrift für Hero */ } .wp-block-cover__inner-container p { /* Fließtext */ font-size: 1.25rem; /* Fließtext leicht größer */ } .wp-block-cover__inner-container .wp-block-buttons a, .wp-block-cover__inner-container .wp-block-buttons button { /* Buttons größer */ font-size: 1.1rem; /* Button-Text größer */ padding: 0.9em 2em; /* Größerer Button-Rahmen */ } } /* Tablet quer und größere Bildschirme */ @media (min-width: 1024px) { /* Gilt für große Laptops/Desktops */ .wp-block-cover__inner-container h1 { /* Überschrift noch größer */ font-size: 3.5rem; /* Noch größer für große Screens */ } .wp-block-cover__inner-container p { /* Fließtext größer */ font-size: 1.4rem; /* Noch größerer Fließtext */ } .wp-block-cover__inner-container .wp-block-buttons a, .wp-block-cover__inner-container .wp-block-buttons button { /* Buttons noch größer */ font-size: 1.15rem; /* Noch größerer Button-Text */ padding: 1em 2.2em; /* Noch größerer Button-Rahmen */ } } /* ====================================== Produktkarten – responsive Cards Design ====================================== */ /* Container für Produktkarten – responsive Gestaltung */ .produktkarten .wp-block-column { /* Container für Produktkarten */ background-color: var(--color-card-bg); /* Weiß im Light-Mode */ padding: 2rem; /* Innenabstand */ border-radius: 1rem; /* Abgerundete Ecken */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Leichter Schatten */ transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Weiche Übergänge */ } /* Dark Mode - Manuele Umschaltung */ body.dark-mode .produktkarten .wp-block-column { /* Container für Produktkarten im Darkmode */ background-color: var(--color-card-bg); /* Dunkler Hintergrund */ box-shadow: 0 4px 14px rgba(255, 255, 255, 0.06); /* Leichter heller Schatten */ } /* Überschrift bleibt in CI-Farbe */ .produktkarten h2 { /* Überschrift in Produktkarten */ color: var(--color-brand); /* CI-Rot */ font-family: var(--font-family-base); /* Eigene Schrift */ font-weight: 700; /* Fetter Text */ margin-top: 1rem; /* Abstand oben */ margin-bottom: 0.5rem; /* Abstand unten */ } /* Button Design */ .produktkarten .wp-block-button__link { /* Button-Link in Produktkarten */ background-color: var(--color-brand); /* CI-Rot Hintergrund */ color: var(--color-text-on-brand-color); /* Weißer Text */ border-radius: 2em; /* Pillenform */ padding: 0.7em 1.5em; /* Innenabstand */ text-decoration: none; /* Keine Unterstreichung */ font-weight: bold; /* Fetter Text */ transition: background-color 0.3s ease; /* Weicher Übergang für Hover-Effekt */ } /* Button Hover */ .produktkarten .wp-block-button__link:hover { /* Hover-Effekt für Button */ background-color: var(--color-brand); /* Dunkleres Rot */ color: var(--color-hover-button); /* Textfarbe Schwarz */ } /* ====================================== Usere Qualitätsversprechen ====================================== */ /* Unsere Qualitätsversprechen - Icons */ .trust-item { text-align: center; /* Vertikaler Zentrierung */ } /* ====================================== Dark Mode Toggle Button – Sichtbarkeit & Positionierung Ziel: Sichtbar und kollisionsfrei auf allen Geräten ====================================== */ /* Basis-Design */ .darkmode-toggle { position: fixed; /* Fixierte Position */ top: 1rem; /* Abstand oben */ right: 1rem; /* Abstand rechts */ z-index: 9999; /* Ganz oben */ width: 40px; /* Breite - 40px */ height: 40px; /* Höhe - 40px */ display: flex; /* Zentriert Icon */ justify-content: center; /* Horizontale Zentrierung */ align-items: center; /* Vertikale Zentrierung */ background: transparent; /* Kein Hintergrund */ border: none; /* Kein Rahmen */ cursor: pointer; /* Zeigt interaktive Funktion */ padding: 0.5rem; /* Innenabstand */ color: var(--icon-color); /* Dynamische Farbe je nach Modus */ } /* Fokus-Stil */ .darkmode-toggle:focus { outline: 3px solid var(--color-brand); /* Aussenlinie bei Fokus */ outline-offset: 2px; /* Abstand zur Linie */ } /* Icon-Größe */ .icon-darkmode, .icon-scroll-to-top { width: 24px; /* Einheitliche Größe für Icons - 24px */ height: 24px; /* Einheitliche Größe für Icons - 24px */ fill: currentColor; /* Füllt die Farbe des Icons mit der aktuellen Textfarbe */ } /* =============================== Mobile PORTRAIT – unten rechts =============================== */ @media screen and (max-height: 700px), (max-width: 480px) { .darkmode-toggle { top: auto !important; /* Oben deaktivieren */ bottom: 1.5rem !important; /* Unten anzeigen */ right: 1rem !important; /* Rechts behalten */ } } /* ================================================ Sticky Buttons unten rechts (Darkmode & Scroll-Up) ================================================ */ /* Container für die Buttons */ .darkmode-scroll-wrapper { position: fixed; /* Fixiert am Bildschirmrand */ bottom: 5.5rem; /* Über der mobilen Bottom-Bar */ right: 1rem; /* Rechts positioniert mit Abstand - 1rem */ display: none; /* Initial ausgeblendet, JS aktiviert es */ flex-direction: column; /* Vertikale Anordnung */ gap: 0.75rem; /* Abstand zwischen den Buttons */ z-index: 9999; /* Immer ganz oben */ } /* Buttons: Einheitlicher Look */ .darkmode-scroll-wrapper button { width: 44px; /* Einheitliche Breite - 44px */ height: 44px; /* Einheitliche Höhe - 44px */ border: none; /* Kein Rahmen */ border-radius: 50%; /* Runde Form */ background: transparent; /* Kein Hintergrund */ color: var(--icon-color); /* Dynamische Farbe je nach Modus */ display: flex; /* Flexbox für zentriertes Icon */ align-items: center; /* Vertikale Zentrierung */ justify-content: center; /* Horizontale Zentrierung */ cursor: pointer; /* Zeigt interaktive Funktion - Zeiger */ padding: 0; /* Kein Innenabstand */ transition: background-color 0.3s ease; /* Weicher Übergang für Hover */ } /* Dezent: Hauchdünner Hover */ .darkmode-scroll-wrapper button:hover { background-color: rgba(0, 0, 0, 0.07); /* Leichter Hover-Effekt */ } /* SVG Icons */ .icon-darkmode, .icon-scroll-to-top { width: 24px; /* Einheitliche Breite - 24px */ height: 24px; /* Einheitliche Höhe - 24px */ fill: currentColor; /* Füllt die Farbe des Icons mit der aktuellen Textfarbe */ } /* Scroll-to-top Button: Zustand "sichtbar" */ #scrollToTopBtn { opacity: 0; /* Startzustand: Unsichtbar */ visibility: hidden; /* Nicht sichtbar, aber im DOM */ transition: opacity 0.3s ease; /* Weicher Übergang */ } /* Sichtbarkeit bei Scroll-Interaktion */ #scrollToTopBtn.visible { opacity: 1; /* Durchsichtigkeitswert auf 1 */ visibility: visible; /* Sichtbar beim Scrollen */ } /* ====================================== Footer - Custom ====================================== */ .logo-footer { width: 150px; /* Breite des Logos im Footer - 150px */ height: auto; /* Automatische Höhe - basierend auf Breite */ margin: 0 auto; /* Zentriert das Logo im Footer */ } /* ====================================== Footer Woocommerce ====================================== */ /* Footer-Container Woocommerce */ .site-info { text-align: center; /* Zentrierter Text im Footer */ font-size: 0.9rem; /* Kleinere Schriftgröße - 90% */ color: var(--color-text); /* Textfarbe – Schwarz */ padding: 1rem 0; /* Innenabstand */ } /* Footer-Cotainer Woocommerce - Darkmode */ body.dark-mode .site-info { /* Footer im Darkmode für bessere Lesbarkeit */ background-color: var(--color-contrast-bg); /* Dunkelgrau für Footer */ color: var(--color-text); /* Weißer Text auf dunklem Hintergrund */ } /* ====================================== DARKMODE – Footer ====================================== */ /* Footer-Hintergrund im Darkmode */ body.dark-mode .site-footer { /* Footer im Darkmode für bessere Lesbarkeit */ background-color: var(--color-contrast-bg); /* Dunkelgrau für Footer */ color: var(--color-text); /* Weißer Text auf dunklem Hintergrund */ } /* Footer-Links im Darkmode */ body.dark-mode .site-footer a { /* Links im Footer */ color: var(--color-text-on-brand-color); /* Links in Weiß */ } /* Hover-Effekt für Footer-Links im Darkmode */ body.dark-mode .site-footer a:hover { /* Hover-Effekt für Links im Footer */ color: var(--color-hover-link); /* Hover in CI-Rot */ }