/*---------------------------------------------------------------------------------
Theme Name: Kai
Text Domain: kai
Version: 1.2.0
Description: Kai is a teeny-tiny WordPress theme that can be used a starter theme or a really lightweight blog theme. It consists of three PHP files and weighs in at just 36 KB, excluding screenshot.png. It features the aside post format, Block Editor support, featured images, and a responsive design. Demo: https://www.bewegung-heilt.com
Tags: blog, one-column, custom-menu, featured-images, post-formats, threaded-comments, translation-ready, block-styles, wide-blocks
Author: Florian Breitenberger
Author URI: https://www.florianbreitenberger.com
License: GNU General Public License version 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Theme URI: https://www.florianbreitenberger.com
Requires PHP: 5.4
Tested up to: 6.3
All files, unless otherwise stated, are released under the GNU General Public License
version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
-----------------------------------------------------------------------------------
0. CSS Reset
1. Document Setup
2. Structure
3. Header
4. Blog
5. Entry Content
6. Comments
7. Pagination
8. Error 404
9. Footer
10. Media Queries
----------------------------------------------------------------------------------- */
/* COLOR #FF4D24 */
@font-face {
font-family: 'Oxanium';
src: url('https://wagenthaler.com/shop/wp-content/themes/kai/assets/fonts/Oxanium-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
#site-brand {
background: url('https://wagenthaler.com/shop/wp-content/uploads/2026/01/Wagenthaler-Performance-Logo-Desktop-210x105-schwarz.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 1;
/* transition: opacity 0.4s ease-in-out; */
}
/* --- TEXT MARKIERUNG (Selection Farbe) --- */
::selection {
background: #FF4D24;
/* Dein Orange */
color: #ffffff;
/* Text wird Weiß für besseren Kontrast */
}
/* Für Firefox (manchmal noch nötig) */
::-moz-selection {
background: #FF4D24;
color: #ffffff;
}
/* --- GLOBALE FOCUS FARBE (Tastatur-Navigation) --- */
*:focus-visible {
outline: 2px solid #FF4D24 !important;
/* Dein Orange */
outline-offset: 3px;
/* 3px Abstand zum Element (sieht edler aus) */
box-shadow: none !important;
/* Entfernt evtl. blaue Glow-Effekte vom Theme */
}
/* --- FORMULAR FELDER (Inputs) --- */
/* Bei Eingabefeldern will man meist den Rahmen färben, nicht den Outline */
input:focus,
textarea:focus,
select:focus {
border-color: #FF4D24 !important;
outline: none !important;
}
/* Sticky (z.B. Schwarz auf Weißem Header) */
#site-header.is-sticky #site-brand,
body.menu-open #site-brand {
filter: invert(1);
}
/* ==========================================================================
MOBILE SMART SCROLL: CLASSIC PUSH BEHAVIOR
========================================================================== */
@media (max-width: 1024px) {
/* 1. GRUNDLAGE FÜR STICKY */
html,
body,
#site-content,
.content {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* 2. TOP BAR (Immer sichtbar ganz oben) */
#top-area {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 1020;
background: #fff;
width: 100%;
}
/* 3. HEADER (Der "Geist") */
#site-header {
position: -webkit-sticky !important;
position: sticky !important;
/* Klebt unter der Topbar */
top: var(--topbar-h, 46px) !important;
z-index: 1010;
width: 100%;
/* Die Animation */
transition: transform 0.3s ease-in-out;
will-change: transform;
/* STANDARD (Runterscrollen): Versteckt (nach oben geschoben) */
transform: translateY(-100%);
}
body.scroll-up #site-header {
background: #000;
}
/* 4. FILTER BAR */
.custom-filter-bar-wrapper {
position: -webkit-sticky !important;
position: sticky !important;
/* Klebt standardmäßig direkt unter der Topbar (da Header weg ist) */
top: var(--topbar-h, 46px) !important;
z-index: 1000;
width: 100%;
background: #f3f3f3;
/* Animation: Wir bewegen 'transform', nicht 'top', für Performance */
transition: transform 0.3s ease-in-out;
will-change: transform;
transform: translateY(0);
/* Standard Position */
}
/* Header fährt runter (sichtbar) */
body.scroll-up #site-header {
transform: translateY(0);
}
/* Filter weicht nach unten aus (um Header-Höhe) */
body.scroll-up .custom-filter-bar-wrapper {
transform: translateY(var(--nav-h, -14px));
}
/* ZUSTAND: GANZ OBEN (Reset) */
/* Wenn wir ganz oben sind, soll der Header natürlich da sein */
body.at-top #site-header {
transform: translateY(0);
}
body.at-top .custom-filter-bar-wrapper {
transform: translateY(0);
/* Hier kein Push nötig, da im Fluss */
}
}
.top-area-m {
display: none;
}
@media (max-width: 782px) {
.top-area-d {
display: none;
}
.top-area-m {
display: block !important;
}
.btn-nav {
display: none !important;
}
.slider {
width: 75%;
}
.dot::after {
display: none;
}
.tabs>.wp-block-column:first-child .wp-block-button__link {
font-size: 57px !important;
}
.telex-wrapper {
margin: 64px 0 32px;
}
.grey {
padding: 7.5% 5% !important;
}
.wp-block-column:first-child figure,
.wp-block-column:last-child figure,
.wp-block-column:first-child .map-modal-link a,
.wp-block-column:last-child .map-modal-link a {
position: relative !important;
}
}
/* -------------------------------------------------------------------------------- */
/* 0. CSS Reset
/* -------------------------------------------------------------------------------- */
html.no-scroll,
body.no-scroll {
overflow: hidden;
}
h5,
h6,
blockquote,
address,
cite,
img,
fieldset,
form,
label,
legend,
table,
caption,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
text-align: left;
}
h2 em {
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------------------------------------------------------- */
/* 1. Document Setup
/* -------------------------------------------------------------------------------- */
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p.plus a {
text-decoration: none !important;
}
a {
color: #9a9a9a;
text-decoration: none;
}
.wrapper-contact .grey p a {
opacity: 1;
}
.wrapper-contact a:hover {
opacity: 1;
}
.wrapper-contact {
margin: 0 0 12px
}
img {
display: block;
height: auto;
max-width: 100%;
}
iframe {
display: block;
width: 100%;
}
.clear {
clear: both;
}
input::-webkit-input-placeholder {
color: #767676;
}
input:-ms-input-placeholder {
color: #767676;
}
input::-moz-placeholder {
color: #767676;
}
/* -------------------------------------------------------------------------------- */
/* 2. Structure
/* -------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Oxanium';
text-transform: uppercase;
font-weight: 700;
}
/* h2 stroke */
p.stroke,
h2.stroke {
position: relative;
display: inline-block;
font-family: 'Oxanium';
padding: 0;
color: transparent;
-webkit-text-stroke: 2px #333;
background: none !important;
text-transform: uppercase;
font-size: 70px !important;
/* Animation */
clip-path: inset(0 100% 0 0);
transition: clip-path 0.9s cubic-bezier(.22, .9, .25, 1);
}
h3 {
font-size: 28px;
}
h4 {
font-size: 32px;
}
body:not(.woocommerce-checkout) h3,
footer h4 {
position: relative;
padding-left: 15px;
margin: 32px 0 16px;
}
footer h4::before {
content: "";
height: 25px;
width: 4px;
background-color: #FF4D24;
top: 9px;
left: 0;
position: absolute;
}
/* -------------------------------------------------------------------------------- */
/* 3. Site Header
/* -------------------------------------------------------------------------------- */
/* ===========================
Base & Layout
=========================== */
#site-header {
transition:
transform 0.28s cubic-bezier(.4, 0, .2, 1),
background-color 0.2s ease;
}
@media (min-width: 769px) {
#site-header {
position: -webkit-sticky;
/* Für Safari */
position: sticky;
}
}
#site-header.is-mobile-hidden {
transform: translateY(-100%);
}
#site-header.is-scrolled.is-mobile-visible {
transform: translateY(0);
border-bottom: 2px #FFF solid;
}
body.menu-open .hamburger__bar,
#site-header.is-sticky .hamburger__bar {
background: #fff;
}
.is-sticky .site-header__inner {
background-color: #000;
}
.is-sticky .top-site-header__inner {
background-color: #000 !important;
}
.is-sticky .site-header__inner::after {
height: 2px;
}
/* ==========================================================================
1. NAVIGATION (MOBILE & BASE)
========================================================================== */
/* Das Overlay-Container */
.nav-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.98);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Wenn das Menü via JS geöffnet wird (Body bekommt .menu-open) */
body.menu-open .nav-container {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
list-style: none;
}
/* Zustand bei offenem Menü */
body.menu-open .menu-list li a {
opacity: 1;
transform: translateY(0);
}
/* Stagger: Nacheinander einblenden (nth-child) */
body.menu-open .menu-list li:nth-child(1) a {
transition-delay: 80ms;
}
body.menu-open .menu-list li:nth-child(2) a {
transition-delay: 120ms;
}
body.menu-open .menu-list li:nth-child(3) a {
transition-delay: 160ms;
}
body.menu-open .menu-list li:nth-child(4) a {
transition-delay: 200ms;
}
body.menu-open .menu-list li:nth-child(5) a {
transition-delay: 240ms;
}
body.menu-open .menu-list li:nth-child(6) a {
transition-delay: 280ms;
}
body.menu-open .menu-list li:nth-child(7) a {
transition-delay: 320ms;
}
body.menu-open .menu-list li:nth-child(8) a {
transition-delay: 360ms;
}
.sub-menu {
display: none;
}
/* ==========================================================================
2. DESKTOP NAVIGATION (Ab 769px)
========================================================================== */
@media (min-width: 769px) {
.menu-list .sub-menu li a {
padding: 10px !important;
color: #FFF !important;
}
/* Submenu Desktop — visibility-based for hover-bridge support */
.menu-list .sub-menu {
position: absolute;
top: calc(100% - 8px);
left: -10px;
background: #111111;
min-width: 200px;
padding: 10px 0;
list-style: none;
z-index: 1000;
visibility: hidden;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
pointer-events: none;
}
.menu-list li:hover>.sub-menu,
.menu-list li.submenu-open>.sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
pointer-events: auto;
}
/* Hover bridges — invisible hitboxes keep submenu open while cursor travels */
.menu-list > li::after {
content: '';
position: absolute;
top: 100%;
left: -10px;
width: calc(100% + 20px);
height: 18px;
pointer-events: auto;
z-index: 1;
}
.menu-list > li > .sub-menu::before {
content: '';
position: absolute;
bottom: 100%;
left: -20px;
width: calc(100% + 40px);
height: 20px;
pointer-events: auto;
}
/* Hover-Background (Gleitendes Feld) */
.hover-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(255, 255, 255, 0.12);
z-index: -1;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s ease, opacity 0.3s ease;
opacity: 0;
display: block !important;
}
.hover-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background-color: #FF4D24;
/* Dein Orange */
}
}
/* -------------------------------------------------------------------------------- */
/* 5. Entry Content
/* -------------------------------------------------------------------------------- */
/* ===========================
Allgemeines
=========================== */
.content {
overflow-x: hidden;
}
.content p {
line-height: 1.55;
}
h5,
h6 {
font-weight: 700;
margin: 30px 0;
}
/* =========================================================
Tabs – Mobile First (echte Höhen, kein Mitrechnen)
========================================================= */
/* Tab-Content: nur aktiver sichtbar – SEO-freundlich */
.wp-block-columns.tabs .wp-block-column:last-child>.wp-block-group {
visibility: hidden;
height: 0;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
.wp-block-columns.tabs .wp-block-column:last-child>.wp-block-group.is-active {
visibility: visible;
height: auto;
opacity: 1;
pointer-events: auto;
overflow: visible;
margin-bottom: 60px;
}
/* Spalten auf Mobile NICHT strecken */
.wp-block-columns.tabs,
.wp-block-columns.tabs.is-layout-flex {
align-items: flex-start;
}
/* Rechte Spalte: normales Layout */
.wp-block-columns.tabs .wp-block-column:last-child {
display: block;
}
/* Button-Höhenbegrenzung */
.wp-container-core-buttons-is-layout-8cf370e7 .tabs-exclude,
.wp-container-core-buttons-is-layout-8cf370e7 .tabs-exclude .wp-block-button__link {
max-height: 100px;
}
.woocommerce div.product form.cart div.quantity {
margin: 0 12px 0 0;
}
.post-type-archive-product li.product,
.tax-product_cat li.product,
.related.products li.product,
.content .woocommerce ul.products li.product {
background: #F3F3F3;
padding: 18px;
}
.post-type-archive-product li.product::before,
.tax-product_cat li.product::before,
.related.products li.product::before,
.content .woocommerce ul.products li.product::before {
content: "";
position: absolute;
right: -10px;
top: -10px;
width: 10px;
height: 10px;
z-index: 20;
background: #FF4D24;
}
/* Entfernt das before-Element bei jedem 4. Produkt in der 4er-Spalte */
.woocommerce ul.products.columns-4 li.product:nth-child(4n)::before {
content: none !important;
display: none !important;
}
/* ===========================
Product Disclaimer
=========================== */
.product-disclaimer {
margin-bottom: 20px;
padding: 15px;
background-color: #f9f9f9;
/* Dezentes Grau */
border-left: 3px solid #FF4D24;
/* Dein Akzent-Orange */
font-size: 14px;
line-height: 1.4;
color: #666;
}
.product-disclaimer p {
margin: 0 !important;
}
.product-disclaimer strong {
color: #000;
text-transform: uppercase;
font-family: 'Oxanium', sans-serif;
}
/* --- CUSTOM CATEGORY HERO (50vh) --- */
.custom-category-hero {
position: relative;
width: 100vw;
height: 50vh;
min-height: 400px;
/* Mindesthöhe für Mobile */
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40px;
/* Abstand zum Inhalt darunter */
}
/* Dunkler Overlay für Lesbarkeit */
.custom-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
/* 40% Schwarz */
z-index: 1;
}
/* Der Text Container */
.custom-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px;
max-width: 1200px;
}
/* Die H1 Überschrift */
.custom-hero-content h1 {
color: #ffffff !important;
font-size: 3.5rem;
/* Groß und mächtig */
font-weight: 700;
text-transform: uppercase;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
/* Leichter Schatten für Lesbarkeit */
}
/* Mobile Anpassung */
@media (max-width: 768px) {
.custom-category-hero {
height: 40vh;
min-height: 300px;
}
.custom-hero-content h1 {
font-size: 2rem;
}
}
.category-intro-wrapper h2.h2-first {
font-size: 24px;
}
.category-intro-wrapper h2.h2-second {
font-size: 16px;
}
.category-intro-wrapper h2.h2-first {
margin-bottom: 12px;
}
.category-intro-wrapper h2.h2-second {
margin-top: 12px;
}
/* Vehicle CTA box (shop home + category pages) */
.shop-vehicle-cta {
text-align: center;
background: #f0f0f0;
padding: 48px 40px;
margin: 40px auto 60px;
max-width: 680px;
border-top: 3px solid #FF4D24;
}
.shop-vehicle-cta__eyebrow {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Oxanium', sans-serif;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.35em;
color: #FF4D24;
margin-bottom: 16px;
}
.shop-vehicle-cta__eyebrow::before,
.shop-vehicle-cta__eyebrow::after {
content: '';
display: block;
width: 36px;
height: 1px;
background: rgba(255,77,36,0.5);
}
.shop-vehicle-cta__text {
position: relative;
z-index: 1;
font-family: 'Oxanium', sans-serif;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #111;
margin: 0 0 28px;
line-height: 1.6;
}
/* -------------------------------------------------------------------------------- */
/* 7.2 CURSOR
/* -------------------------------------------------------------------------------- */
/* 1. Globaler Fix: Versteckt den Zeiger auf ALLEM */
html.custom-cursor-enabled,
html.custom-cursor-enabled * {
cursor: none !important;
}
/* 2. Ausnahme: Nur dort, wo man wirklich den System-Cursor braucht (Inputs) */
html.custom-cursor-enabled input,
html.custom-cursor-enabled textarea,
html.custom-cursor-enabled select,
html.custom-cursor-enabled [contenteditable] {
cursor: auto !important;
}
/* 3. Sichtbarkeit steuern */
html.custom-cursor-ready #custom-cursor {
opacity: 1;
}
/* 4. DER FIX: Cursor-Positionierung */
#custom-cursor {
position: fixed;
left: 0;
top: 0;
width: 26px;
height: 26px;
background: rgba(209, 209, 209, .25);
z-index: 999999;
display: grid;
place-items: center;
pointer-events: none !important;
opacity: 0;
will-change: transform;
/* WICHTIG: Variablen + Zentrierung in einer Regel */
transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%);
transition:
width 180ms cubic-bezier(.2, .8, .2, 1),
height 180ms cubic-bezier(.2, .8, .2, 1),
background-color 140ms ease,
opacity 300ms ease;
}
/* 5. Kleiner Dot innen */
#custom-cursor .inner-dot {
width: 8px;
height: 8px;
background: #FF4D24;
display: block;
transition: opacity 120ms, transform 120ms;
}
/* 6. Aktiver Zustand (Hover)
#custom-cursor.is-active {
width: 56px;
height: 56px;
background: #FF4D24;
}
#custom-cursor.is-active .inner-dot {
opacity: 0;
transform: scale(.6);
}
/* 7. Plus-Icon
#custom-cursor .plus {
position: absolute;
width: 18px;
height: 18px;
opacity: 0;
transition: opacity 120ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1);
transform: scale(0.5);
}
#custom-cursor.is-active .plus {
opacity: 1;
transform: scale(1);
}
#custom-cursor .plus::before,
#custom-cursor .plus::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 14px;
background: #fff;
}
#custom-cursor .plus::before { transform: translate(-50%, -50%) rotate(0deg); }
#custom-cursor .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
*/
/* 8. Klick-Feedback */
#custom-cursor.is-pressed {
/* Auch hier: Position halten + Scale addieren */
transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%) scale(0.9);
}
/* Ausnahmen für Inputs */
html.custom-cursor-enabled :is(input, textarea, select, [contenteditable], iframe) {
cursor: auto !important;
}
@media (hover: none),
(pointer: coarse) {
#custom-cursor {
display: none !important;
}
html.custom-cursor-enabled body {
cursor: auto !important;
}
}
/* -------------------------------------------------------------------------------- */
/* 8. Error 404
/* -------------------------------------------------------------------------------- */
.error404 .post p {
text-align: center;
}
/* -------------------------------------------------------------------------------- */
/* 9. Footer
/* -------------------------------------------------------------------------------- */
/* --- FIX: Kontakt-Banner Spalten nebeneinander erzwingen --- */
/* 1. Container als Flexbox definieren */
.wrapper-contact {
display: flex !important;
flex-direction: row !important;
/* Horizontale Ausrichtung */
flex-wrap: nowrap !important;
/* Kein Umbruch auf Desktop */
align-items: stretch !important;
/* Beide Spalten gleich hoch ziehen */
gap: 20px !important;
/* Kein Abstand zwischen Bild und Text */
width: 100%;
}
/* 2. Die beiden Spalten (Bild und Text) */
.wrapper-contact .wp-block-column {
flex: 0 0 50% !important;
/* Fix 50% Breite */
width: 50% !important;
max-width: 50% !important;
margin: 0 !important;
/* Keine Außenabstände */
}
/* 3. Das Bild sauber einpassen (Object-Fit) */
/* Damit füllt das Bild die Höhe komplett aus, auch wenn der Text länger ist */
.wrapper-contact picture,
.wrapper-contact img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* Bild beschneiden statt verzerren */
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
/* Optional: Ecken scharf machen */
}
/* 4. Text-Box Styling (Grauer Kasten) */
.wrapper-contact .grey {
background-color: #f4f4f4 !important;
padding: 40px 50px !important;
/* Etwas mehr Luft */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
/* Text vertikal zentrieren */
}
/* 5. Mobile Optimierung: Untereinander stapeln */
@media (max-width: 900px) {
.wrapper-contact {
flex-direction: column !important;
/* Untereinander */
}
.wrapper-contact .wp-block-column {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* Auf Handy das Bild nicht so riesig hoch machen */
.wrapper-contact picture {
max-height: 400px !important;
}
.wrapper-contact .grey {
padding: 30px !important;
}
}
/* assets/css/back-to-top.css */
/* Basis: unsichtbar, aber animierbar (do NOT transition visibility) */
.back-to-top {
opacity: 0;
position: fixed;
width: 74px;
height: 95px;
right: 25px;
bottom: 25px;
margin: 0;
z-index: 9999;
visibility: hidden;
transition: opacity .3s ease;
background-color: rgba(209, 209, 209, .25) !important;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
}
/* Accessible focus styles */
.back-to-top:focus,
.back-to-top:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Icon/text inside */
.back-to-top__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
z-index: 0;
}
.back-to-top__icon svg {
fill: #fff;
}
.back-to-top__icon::after {
content: "";
position: absolute;
background-color: #FF4D24;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
z-index: -1;
transition: height .4s;
}
.back-to-top:hover .back-to-top__icon:after {
height: 100%;
}
footer h4,
footer h3,
footer p,
footer dl,
footer dt {
color: #FFF;
}
/* Back-to-top - adapted for your HTML markup (#back-to-top + .wrapper-svg--back-to-top) */
/* ==========================================================================
#Back to Top styles - start
========================================================================== */
#back-to-top svg {
transform: translateY(-3px);
transition: all 0.35s ease;
}
#back-to-top svg g rect:nth-of-type(1),
#back-to-top svg g rect:nth-of-type(3) {
width: 14px;
transition: width .2s;
}
#back-to-top svg g rect:nth-of-type(2) {
width: 20px;
transition: width .2s;
}
#back-to-top:hover svg {
transform: translateY(0);
height: 37px;
width: 22px;
}
#back-to-top:hover svg g rect:nth-of-type(1),
#back-to-top:hover svg g rect:nth-of-type(3) {
width: 9px;
transition: width .2s;
}
#back-to-top:hover svg g rect:nth-of-type(2) {
width: 37px !important;
transition: width .2s;
}
/* ==========================================================================
#Back to Top styles - end
========================================================================== */
.site-footer {
padding: 3rem 2rem;
}
.footer-columns {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-column {
flex: 1 1 calc(25% - 8px);
min-width: 200px;
}
.footer-column .footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column .footer-menu li {
margin-bottom: 0.75rem;
}
.footer-column .footer-menu li a {
font-size: 16px;
}
/* Responsive: Columns untereinander bei <768px */
@media (max-width: 768px) {
.footer-columns {
flex-direction: column;
}
.footer-column {
flex: 1 1 100%;
}
}
/* Sichtbar-für-Screenreader Utility */
.site-footer__visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
footer .footer-bottom {
width: 100%;
background: #000;
}
footer .bottom-footer__inner {
padding: 18px 5% 12px;
color: #FFF;
justify-content: normal;
}
footer .footer-bottom {
font-size: 12px;
}
/* Footer legal links */
.footer-legal-links {
margin: 8px 0;
font-size: 0.8rem;
}
.footer-legal-links a {
color: #aaa;
text-decoration: none;
}
.footer-legal-links a:hover {
color: #fff;
}
/* Shop homepage intro */
.shop-intro {
text-align: center;
padding: 40px 20px 20px;
max-width: 900px;
margin: 0 auto;
}
.shop-intro h1 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
margin-bottom: 12px;
color: #fff;
}
.shop-intro p {
color: #aaa;
font-size: 1rem;
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
}
/* Grundlayout */
footer {
background-color: #161616;
line-height: 1.4;
}
footer address h3 {
padding-left: 0;
}
footer .footer-logo-wrapper .logo-footer {
width: 210px;
height: auto;
margin: 0 auto 32px 0;
}
footer address .head,
footer address .sub-head {
font-size: 20px;
color: #9a9a9a;
}
footer address .head {
margin-bottom: 6px;
}
footer address .sub-head {
margin-bottom: 12px;
}
footer address h3::before {
content: none;
}
footer li:not(.s) a:before {
content: '';
position: absolute;
width: 6px;
height: 6px;
top: 8px;
background: #FF4D24;
transform: translateX(0);
/* start offscreen */
transition: transform .2s ease-out;
visibility: hidden;
}
footer li:not(.s) a:hover:before {
transform: translateX(-15px);
visibility: visible;
}
footer li a {
font-family: 'Oxanium';
font-weight: 700;
text-transform: uppercase;
color: #FFF;
font-size: 13px;
line-height: 1.53em;
letter-spacing: .05em;
position: relative;
display: flex;
white-space: normal;
overflow: hidden;
transition: padding .2s ease-out;
margin: 0;
opacity: 0.55;
}
footer li a:hover {
padding-left: 16px;
opacity: 1;
}
footer p a {
text-decoration: underline !important;
color: #fff;
}
.inner {
padding-top: 120px;
margin: 0 auto 30px;
width: 90%;
}
.footer-column.badge {
display: flex;
align-items: center;
justify-content: center;
}
/* Variablen für leichtes Anpassen */
:root {
--badge-size: 280px;
--top-icon-size: 80px;
--top-icon-border: 6px;
--ring-thickness: 16px;
--ring-color: #FF4D24;
--inner-bg: #ffffff;
--accent: #2b6b63;
--text-color: #444;
--subtitle-size: 14px;
--rating-size: 36px;
--google-font: "Arial", "Helvetica", sans-serif;
--margin-top: -12.5%;
}
/* Badge Styles */
.rating-badge {
width: var(--badge-size);
height: var(--badge-size);
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
float: right;
margin-top: var(--margin-top);
margin-right: 5%;
}
footer .rating-badge {
margin: 0;
float: none;
}
.badge-ring {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
position: relative;
border-radius: 50%;
display: grid;
place-items: center;
background: conic-gradient(from 90deg, var(--ring-color) 0deg, var(--ring-color) 360deg);
overflow: visible;
pointer-events: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.badge-ring::after {
content: "";
position: absolute;
inset: var(--ring-thickness);
border-radius: 50%;
background: var(--inner-bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
z-index: 0;
pointer-events: none;
}
.badge-inner {
width: calc(100% - (var(--ring-thickness) * 2));
height: calc(100% - (var(--ring-thickness) * 2));
border-radius: 50%;
background: var(--inner-bg);
display: grid;
place-items: center;
z-index: 1;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.badge-top-icon {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: var(--top-icon-size);
height: var(--top-icon-size);
border-radius: 50%;
background: var(--inner-bg);
display: grid;
place-items: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
border: var(--top-icon-border) solid var(--ring-color);
overflow: hidden;
z-index: 3;
top: -12.5%;
}
.badge-top-icon .badge-img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
background: transparent;
}
.badge-top-icon>a {
display: block;
width: 100%;
height: 100%;
line-height: 0;
}
.badge-text-fallback {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-weight: 700;
color: var(--ring-color);
background: transparent;
font-size: calc(var(--top-icon-size) * 0.45);
font-family: var(--google-font);
text-transform: uppercase;
}
.badge-content {
text-align: center;
max-width: 70%;
color: var(--text-color);
font-family: var(--google-font);
}
.badge-subtitle {
font-size: var(--subtitle-size);
color: #666;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.google-logo {
font-weight: 700;
font-size: 38px;
line-height: 1;
margin: 6px 0 10px;
letter-spacing: 0.02em;
font-family: var(--google-font);
display: inline-block;
}
.google-logo .g {
color: #4285F4;
}
.google-logo .o1 {
color: #EA4335;
}
.google-logo .o2 {
color: #FBBC05;
}
.google-logo .g2 {
color: #4285F4;
}
.google-logo .l {
color: #34A853;
}
.google-logo .e {
color: #EA4335;
}
.rating {
width: 120px;
height: 24px;
margin: 0 auto;
/* URL-encoded SVG als Maske oder Background */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat-x;
background-size: 24px 24px;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
}
.rating-number {
font-size: var(--rating-size);
color: #333;
font-weight: 700;
margin-top: 6px;
}
/* Responsive adjustments */
@media (max-width: 420px) {
:root {
--badge-size: 220px;
--top-icon-size: 64px;
--top-icon-border: 6px;
--ring-thickness: 12px;
--rating-size: 28px;
--margin-top: -20%;
}
.google-logo {
font-size: 24px;
}
}
/* Spalteninhalte horizontal/vertikal zentriert */
.col-cont,
.col-hr {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
flex: 0 0 50%;
}
@media (max-width: 768px) {
.col-cont,
.col-hr {
min-height: auto;
justify-content: flex-start;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
.col-cont>* {
width: 100%;
max-width: 320px;
text-align: left;
}
.col-cont>*+* {
margin-top: 0.5rem;
}
@media (max-width: 768px) {
.col-cont {
align-items: flex-start;
}
.col-cont>* {
max-width: none;
width: 100%;
}
}
footer p {
margin: 0 0 0.5rem;
}
footer dl {
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
footer dl div {
display: grid;
grid-template-columns: 3rem 1fr;
align-items: center;
gap: 2rem;
}
footer dt {
font-weight: 600;
}
.site-footer__link {
color: #3498db;
text-decoration: none;
}
.site-footer__link:hover,
.site-footer__link:focus {
color: #5dade2;
text-decoration: underline;
text-underline-offset: 2px;
}
.site-footer a:focus-visible {
outline: 3px solid #3498db;
outline-offset: 3px;
border-radius: 2px;
}
@media (max-width: 768px) {
.site-footer__inner {
flex-direction: column;
gap: 1.25rem;
}
.site-footer__col {
flex: 0 0 100%;
}
footer dl div {
grid-template-columns: 4rem 1fr;
}
}
footer .col-cont ul {
display: flex;
gap: 12px;
}
li.ig,
li.ig a,
li.ig svg {
width: 35px;
height: 35px;
}
.sm li.s a {
padding: 0 !important;
}
.sm {
padding-bottom: calc(1.5 * var(--site-footer-padding-vertical));
}
.sm ul {
display: flex;
gap: 16px;
list-style: none;
}
.col-span-full {
grid-column: 1 / -1;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/* WOOCOMMERCE */
/* --- Grundstruktur der Produktliste --- */
ul.wc-block-product-template {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
padding: 0;
list-style: none;
margin: 0;
}
/* --- Einzelne Produktkarte --- */
ul.wc-block-product-template li.wc-block-product {
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
}
/* --- Produktbild --- */
.wc-block-components-product-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.wc-block-components-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Sale Badge --- */
.wc-block-components-product-sale-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ff4d24;
color: #fff;
font-weight: bold;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.8rem;
text-transform: uppercase;
}
/* --- Titel --- */
ul.wc-block-product-template li h2.wp-block-post-title {
font-size: 1rem;
margin: 0.75rem 0 0.5rem;
font-weight: 600;
line-height: 1.3;
padding: 0 0.5rem;
}
/* --- Preis --- */
.wc-block-components-product-price {
font-size: 0.95rem;
margin-bottom: 0.75rem;
color: #333;
}
.wc-block-components-product-price del {
color: #aaa;
margin-right: 0.3rem;
}
.wc-block-components-product-price ins {
color: #ff4d24;
font-weight: bold;
}
/* --- Button --- */
.wp-block-button__link {
display: inline-block;
padding: 0.5rem 1.2rem;
border-radius: 8px;
background-color: #ff4d24;
color: #000 !important;
text-decoration: none;
font-weight: 600;
margin-bottom: 1rem;
transition: background-color 0.3s ease;
}
.wp-block-button__link:hover {
background-color: #e5431b;
color: #FFF !important;
}
/* --- Produktkarte: Equal Height aktivieren --- */
ul.wc-block-product-template li.wc-block-product {
display: flex;
flex-direction: column;
height: 100%;
}
/* --- Titel darf wachsen --- */
ul.wc-block-product-template li h2.wp-block-post-title {
flex-grow: 1;
/* DAS ist der Schlüssel */
}
/* --- Preis bleibt direkt unter dem Titel --- */
.wc-block-components-product-price {
margin-top: 0.5rem;
}
/* --- Button immer auf gleicher Höhe --- */
.wp-block-woocommerce-product-button {
margin-top: auto;
/* schiebt Button nach unten */
}
.related h2 {
margin: 80px 0 40px;
;
}
/* 1. Das Raster (Grid) für alle Listen-Typen */
.post-type-archive-product .products,
.tax-product_cat .products,
.related.products .products,
.content .woocommerce ul.products {
display: flex !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 0;
/* Abstände steuern wir über margin an den Items */
}
/* 2. Jede Produkt-Karte als Flex-Spalte auf eine Höhe zwingen */
.post-type-archive-product li.product,
.tax-product_cat li.product,
.related.products li.product,
.content .woocommerce ul.products li.product {
display: flex !important;
flex-direction: column !important;
width: calc(25% - 20px) !important;
/* 4-Spalten Layout */
margin: 0 5px 10px 5px !important;
float: none !important;
/* Deaktiviert alte Float-Layouts */
}
/* 3. Der Link-Block (Bild, Titel, Status) als wachsender Bereich */
.woocommerce-LoopProduct-link {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
/* Schiebt alles unter sich (Preis/Button) nach unten */
text-decoration: none !important;
}
/* 4. Titel vereinheitlichen (H3 aus deinem PHP-Wechsel) */
.woocommerce-loop-product__title {
min-height: 100px !important;
margin: 15px 0 10px 0 !important;
line-height: 1.3 !important;
display: flex !important;
align-items: flex-start !important;
}
/* 5. Lagerstatus (Archiv/EOL/Sofort lieferbar) */
.akr-loop-status {
min-height: 30px !important;
margin-bottom: 15px !important;
font-size: 0.9em !important;
font-weight: bold;
}
/* 6. Preis-Bereich: Hält die Höhe, auch wenn wir den Preis bei 0€ ausblenden */
.price {
min-height: 45px !important;
display: block !important;
margin: 0 !important;
}
.wc-gzd-additional-info {
margin: 0 !important;
}
/* 8. Der Button: Dockt durch margin-top:auto immer ganz unten an */
.product .button {
margin-top: auto !important;
align-self: flex-start !important;
width: auto !important;
white-space: nowrap !important;
}
/* Responsive für Mobile (1 Spalte) */
@media (max-width: 768px) {
.content .woocommerce ul.products li.product,
li.product {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
.price,
.stock {
color: #000 !important;
}
.single-product .flex-control-thumbs {
display: flex;
gap: 10px;
}
/* Container reset */
.filter-item.search-filter {
position: static;
/* Wichtig, damit das Overlay sich am Viewport orientieren kann */
}
/* Das Overlay (Standard: versteckt) */
.search-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(22, 22, 22, 0.98);
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
justify-content: center;
align-items: flex-start;
backdrop-filter: blur(10px);
z-index: 99999;
}
.search-filter.search-active {
position: relative;
z-index: 100000;
}
.search-filter.search-active .search-overlay {
opacity: 1 !important;
visibility: visible !important;
}
.custom-filter-bar-wrapper:not(.is-stuck) .search-filter.search-active .search-overlay {
top: 0;
padding-top: 200px;
}
.custom-filter-bar-wrapper.is-stuck .search-filter.search-active .search-overlay {
top: 0;
padding-top: 80px;
}
/* When search is open: break filter bar stacking context so overlay can escape */
.custom-filter-bar-wrapper:has(.search-active) {
z-index: auto;
}
.search-overlay-inner {
width: 90%;
position: relative;
padding: 0 5%;
}
/* Input Feld riesig machen */
.live-search-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid #555;
font-size: 2rem;
/* Riesige Schrift */
color: #fff;
padding: 20px 0;
outline: none;
font-weight: 700;
}
.live-search-input::placeholder {
color: #555;
}
.live-search-input:focus {
border-bottom-color: #FF4D24;
}
/* Schließen Button (X) */
.close-search-btn {
position: absolute;
right: 0;
top: -16px;
background: none;
border: none;
color: #fff;
font-size: 30px;
cursor: pointer;
transition: color 0.3s;
}
.close-search-btn:hover {
color: #FF4D24;
}
/* Ergebnisse */
.live-search-results {
margin-top: 30px;
color: #fff;
}
.search-results-list {
list-style: none;
padding: 0;
margin: 0;
}
.search-result-item {
display: flex;
align-items: center;
gap: 20px;
padding: 15px 0;
border-bottom: 1px solid #333;
text-decoration: none;
transition: transform 0.2s;
}
.search-result-item:hover {
transform: translateX(10px);
}
.result-img img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
}
.result-info {
display: flex;
flex-direction: column;
}
.result-title {
font-size: 16px;
font-weight: 600;
color: #fff;
}
.result-price {
color: #FF4D24;
font-weight: 400;
font-size: 14px;
}
/* Container relativ machen für absolute Positionierung */
.live-search-form {
position: relative;
}
/* 1. Das X (Standard-Zustand, wenn Text da ist) */
.clear-input-btn {
position: absolute;
right: 0;
top: 25px;
/* Anpassen an deine Schriftgröße */
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
color: #666;
font-size: 20px;
font-weight: bold;
display: none;
/* Standard: unsichtbar */
z-index: 20;
transition: color 0.2s;
}
.clear-input-btn:hover {
color: #FF4D24;
}
/* 2. Der Spinner (Standard: unsichtbar) */
.search-spinner {
display: none;
position: absolute;
right: 5px;
/* Gleiche Position wie X */
top: 28px;
width: 24px;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
border-top-color: #FF4D24;
animation: spin 0.8s linear infinite;
z-index: 21;
/* Über dem X */
}
/* 3. LOGIK: Wenn geladen wird (.loading Klasse am Formular) */
/* X ausblenden, Spinner anzeigen */
.live-search-form.loading .clear-input-btn {
display: none !important;
}
.live-search-form.loading .search-spinner {
display: block;
}
/* Animation für Spinner */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Container für den Button */
.view-all-results {
padding: 20px 0;
text-align: center;
margin-top: 10px;
}
/* Der Button selbst */
.btn-view-all {
display: inline-block;
padding: 12px 30px;
background-color: #FF4D24;
/* Deine Akzentfarbe */
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid #FF4D24;
transition: all 0.3s ease;
cursor: pointer;
}
/* Hover Effekt */
.btn-view-all:hover {
background-color: transparent;
color: #FF4D24;
transform: translateY(-2px);
/* Leichter 3D Effekt */
}
/* 1. Das native blaue X muss weg bleiben */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none !important;
-webkit-appearance: none !important;
}
/* WICHTIG: Damit Klick UND Hover funktionieren */
.filter-item.is-active .filter-dropdown,
.sub-filter-item.is-active .filter-dropdown {
display: block !important;
}
/* Fixt das Problem, dass Hover nach einem Klick nicht mehr geht */
.filter-item:hover .filter-dropdown,
.sub-filter-item:hover .filter-dropdown,
.filter-item.is-active .filter-dropdown,
.sub-filter-item.is-active .filter-dropdown {
display: block !important;
}
/* Versteckt Dropdowns standardmäßig sauber */
.filter-dropdown {
display: none;
}
/* ==========================================================================
MOBILE LAYOUT (< 1024px)
========================================================================== */
@media (max-width: 1024px) {
.custom-filter-bar.main-row {
display: block !important;
padding: 0 !important;
height: auto !important;
border: none !important;
}
/* --- ZEILE 1: FAHRZEUG --- */
.filter-row-primary {
display: flex;
width: 100%;
height: 56px;
background-color: #161616;
border-bottom: 1px solid #333;
}
.vehicle-sub-row {
top: 0;
height: 46px;
}
.vehicle-group {
width: 100%;
/* Volle Breite */
border: none;
}
/* --- ZEILE 2: SUCHE - DROPDOWNS - RESET --- */
.filter-row-secondary {
display: flex;
width: 100%;
height: 58px;
margin-top 8px;
background-color: #1a1a1a;
border-bottom: 1px solid #333;
}
/* 1. Suche (Links außen) */
.search-filter {
flex: 0 0 50px;
/* Fixe Breite */
width: 50px;
border-right: 1px solid #222;
}
.search-filter .filter-label {
font-size: 0;
display: block;
height: 100%;
}
.search-filter .filter-label::before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: 16px auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* 2. Dropdowns (Mitte) */
.filter-row-secondary .filter-item:not(.search-filter):not(.reset-filter) {
flex: 1;
/* Teilen sich den Platz in der Mitte */
min-width: 0;
border-right: 1px solid #222;
padding: 0 2px;
display: flex;
justify-content: center;
align-items: center;
}
/* Schrift kleiner machen, damit 3 Stück passen */
.filter-row-secondary .filter-label {
font-size: 10px;
/* Kleinere Schrift für Mobile */
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 3. Reset (Rechts außen) */
.reset-filter {
flex: 0 0 50px;
/* Fixe Breite */
width: 50px;
background: #111;
border-left: 1px solid #222;
/* Trennlinie links */
}
.reset-filter a {
font-size: 18px;
color: #999;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* Dropdowns */
.filter-dropdown {
top: 100px !important;
}
}
/* ==========================================================================
DESKTOP LAYOUT (> 1024px)
========================================================================== */
@media (min-width: 1025px) {
.custom-filter-bar.main-row {
display: flex !important;
align-items: center;
height: 60px;
}
/* Container auflösen */
.filter-row-primary,
.filter-row-secondary {
display: contents;
}
/* REIHENFOLGE */
.search-filter {
order: 1;
width: 60px;
}
.sort-filter {
order: 2;
flex: 1;
}
.stock-filter {
order: 3;
flex: 1;
}
.category-filter {
order: 4;
flex: 1;
}
.marke-filter {
order: 5;
flex: 1;
}
/* Fahrzeug kommt nach den Kategorien */
.vehicle-group {
order: 6;
flex: 2;
}
/* Reset ganz rechts */
.reset-filter {
order: 6;
width: auto;
padding: 0 20px;
border-left: none;
}
/* Standard Styles Desktop */
.filter-item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #333;
}
.filter-dropdown {
top: 60px !important;
}
}
/* --------------------------------------------------------- */
/* AKRAPOVIC STYLE TABS (OPTIMIERT) */
/* --------------------------------------------------------- */
/* 1. Globaler Reset für Woo-Tabs (Überschreibt Theme-Standards) */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
content: none !important;
}
/* 2. Haupt-Container */
.woocommerce-tabs {
margin-top: 60px !important;
width: 100%;
clear: both;
}
/* 3. Die Tab-Liste (UL) */
.woocommerce-tabs ul.wc-tabs {
display: flex !important;
flex-wrap: wrap;
align-items: center;
margin: 0 0 30px 0 !important;
padding: 0 !important;
list-style: none !important;
/* Graue Basis-Linie */
border-bottom: 4px solid #e1e1e1 !important;
background: transparent !important;
/* Wichtig für die Stapelung der Linien: */
overflow: visible !important;
position: relative !important;
z-index: 1 !important;
}
/* 4. Einzelne Tabs (LI) */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.wc-tabs li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* 5. Der Link (Text) */
.woocommerce-tabs ul.wc-tabs li a {
display: block !important;
padding: 0 40px 15px 0 !important;
/* Rechts Platz für Abstand */
margin-bottom: 0 !important;
/* Typografie */
font-family: 'Oxanium', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
line-height: 1.2em !important;
letter-spacing: 0.05em !important;
color: #888 !important;
/* Inaktiv Grau */
text-decoration: none !important;
/* Layering Fix (Damit er ÜBER der grauen Linie liegt) */
position: relative !important;
background: transparent !important;
z-index: 10 !important;
transition: color 0.3s ease;
}
/* Sonderregel: Letzter Tab hat keinen Abstand rechts */
.woocommerce-tabs ul.wc-tabs li:last-child a {
padding-right: 0 !important;
}
/* 6. Der Rote Unterstrich (Basis) */
.woocommerce-tabs ul.wc-tabs li a::after {
content: "";
position: absolute;
/* Exakte Positionierung über der grauen Linie */
bottom: -4px !important;
left: 0;
width: 0%;
/* Startet unsichtbar */
height: 4px;
/* Deckt die 4px graue Linie exakt ab */
background-color: #ff4d24 !important;
z-index: 20 !important;
/* Liegt ganz oben */
transition: width 0.3s ease;
}
/* 7. Interaktion (Hover & Active) */
/* Text färben */
.woocommerce-tabs ul.wc-tabs li.active a,
.woocommerce-tabs ul.wc-tabs li:hover a {
color: #ff4d24 !important;
}
/* Linie ausfahren */
.woocommerce-tabs ul.wc-tabs li.active a::after,
.woocommerce-tabs ul.wc-tabs li:hover a::after {
/* 100% minus das Padding rechts, damit nur der Text unterstrichen ist */
width: calc(100% - 40px) !important;
}
/* Linie beim letzten Tab (da kein Padding) voll ausfahren */
.woocommerce-tabs ul.wc-tabs li:last-child.active a::after,
.woocommerce-tabs ul.wc-tabs li:last-child:hover a::after {
width: 100% !important;
}
/* 8. Panel Inhalt */
.woocommerce-tabs .panel {
border: none !important;
box-shadow: none !important;
padding: 20px 0 !important;
background: transparent !important;
}
/* Doppelte Überschrift im Panel verstecken */
.woocommerce-tabs .panel>h2:first-child {
display: none !important;
}
/* --------------------------------------------------------- */
/* MOBILE ANPASSUNG (unter 768px) */
/* --------------------------------------------------------- */
@media only screen and (max-width: 768px) {
.woocommerce-tabs ul.wc-tabs {
flex-direction: column !important;
align-items: flex-start !important;
border-bottom: none !important;
gap: 20px;
}
.woocommerce-tabs ul.wc-tabs li {
width: 100% !important;
margin-bottom: 15px !important;
border-bottom: 1px solid #eee !important;
}
.woocommerce-tabs ul.wc-tabs li a {
padding: 0 0 10px 0 !important;
font-size: 24px !important;
}
/* Rote Linie im Mobile-Mode anpassen */
.woocommerce-tabs ul.wc-tabs li a::after {
bottom: -1px;
/* Direkt auf der Linie */
}
.woocommerce-tabs ul.wc-tabs li.active a::after,
.woocommerce-tabs ul.wc-tabs li:hover a::after {
width: 100% !important;
/* Volle Breite mobil */
}
}
/* 1. Der Slide-Effekt (Hintergrund) - BLEIBT GLEICH */
ul.products li.product {
background-image: linear-gradient(to right, #000, #000) !important;
background-size: 0% 100% !important;
background-repeat: no-repeat !important;
background-position: left top !important;
transition: background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
position: relative;
/* Wichtig für die Button-Positionierung */
overflow: hidden;
/* Damit der Button nicht rausragt beim reinzoomen */
}
/* 2. Hover: Hintergrund auf volle Breite ziehen - BLEIBT GLEICH */
ul.products li.product:hover {
background-size: 100% 100% !important;
}
/* 3. TEXTE AUSBLENDEN (Statt färben) - GEÄNDERT */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .wc-gzd-additional-info,
ul.products li.product .onsale {
transition: all 0.3s ease !important;
opacity: 1;
transform: translateY(0);
}
ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover .price,
ul.products li.product:hover .wc-gzd-additional-info,
ul.products li.product:hover .onsale {
opacity: 0 !important;
/* Text wird unsichtbar */
}
/* Optional: Bild abdunkeln beim Hover */
ul.products li.product img {
transition: opacity 0.3s ease;
}
ul.products li.product:hover img {
opacity: 0.3 !important;
/* Bild scheint nur noch leicht durch */
}
/* --- 4. NEU: DER "MEHR ERFAHREN" BUTTON --- */
a.wagenthaler-overlay-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
/* Zentriert Startposition */
/* Styling */
background: transparent !important;
color: #fff !important;
border: none !important;
font-weight: 700 !important;
text-transform: uppercase;
text-decoration: none !important;
display: inline-flex;
align-items: center;
padding: 0;
z-index: 20;
/* Animation: Erst unsichtbar */
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover: Button erscheint */
ul.products li.product:hover a.wagenthaler-overlay-btn {
opacity: 1 !important;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
/* Zoomt leicht rein */
}
/* --- 5. NEU: DAS PLUS ICON (SVG Base64) --- */
a.wagenthaler-overlay-btn::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 14px;
/* Dein SVG Code */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4NCiAgPGcgaWQ9IlBsdXNfSWNvbl93aGl0ZSIgZGF0YS1uYW1lPSJQbHVzIEljb24gd2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NjEgLTE3NDgpIj4NCiAgICA8cmVjdCBpZD0iTGluZV9IIiBkYXRhLW5hbWU9IkxpbmUgSCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc2MSAxNzU0KSIgZmlsbD0iI2ZmZiIvPg0KICAgIDxyZWN0IGlkPSJMaW5lX1YiIGRhdGEtbmFtZT0iTGluZSBWIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzY3IDE3NDgpIiBmaWxsPSIjZmZmIi8+DQogIDwvZz4NCjwvc3ZnPg0K);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
/* Optional: Drehung bei Button-Hover */
transform: rotate(0);
transition: transform 0.4s ease;
}
/* Kleiner Effekt: Plus dreht sich, wenn man den Button direkt berührt */
a.wagenthaler-overlay-btn:hover::before {
transform: rotate(90deg);
}
/* --- 1. Der Container (Dein gewünschter Style) --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
/* Dein Basis-Code */
clear: both;
width: 100%;
margin: 30px 0 !important;
padding: 25px 30px !important;
background: #ffffff !important;
border: none !important;
/* Standard-Rahmen entfernen */
border-left: 6px solid #ff4d24 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
border-radius: 0 8px 8px 0 !important;
font-size: 1.15em;
line-height: 1.7;
position: relative;
overflow: hidden;
/* Layout & Text */
display: flex !important;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
color: #111 !important;
/* Dunkler Text auf weißem Grund */
font-family: 'Roboto Condensed', sans-serif;
}
/* --- 2. Das Icon (Haken / Info) --- */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
color: #ff4d24 !important;
/* Icon in Orange */
font-size: 1.4em;
position: static !important;
/* Keine absolute Positionierung */
margin-right: 15px;
order: -1;
/* Ganz nach links */
}
/* --- 3. Der "Warenkorb anzeigen" Button --- */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-error .button.wc-forward {
background: #000 !important;
/* Schwarzer Button für Kontrast */
color: #fff !important;
border: none !important;
border-radius: 0 !important;
/* Eckig passend zum Design */
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 25px !important;
float: none !important;
/* WooCommerce Floats fixen */
margin: 0 !important;
transition: background 0.3s ease;
}
/* Button Hover: Orange */
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover {
background: #ff4d24 !important;
color: #fff !important;
}
/* --- 4. Fehlermeldungen (Optional) --- */
/* Falls Fehler (z.B. falsches Passwort) Rot sein sollen statt Orange */
.woocommerce-error {
border-left-color: #d63031 !important;
/* Rot */
}
.woocommerce-error::before {
color: #d63031 !important;
}
/* Fokus-Rahmen NUR bei den Nachrichten entfernen */
.woocommerce-message:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus,
.woocommerce-info:focus-visible,
.woocommerce-error:focus,
.woocommerce-error:focus-visible {
outline: none !important;
/* Kein Rahmen */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
/* Deinen Schatten beibehalten, kein "Glow" */
}
/* --- 5. Mobile Optimierung --- */
@media (max-width: 768px) {
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
flex-direction: column;
/* Untereinander stapeln */
align-items: flex-start;
text-align: left;
padding: 20px !important;
}
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
width: 100%;
/* Volle Breite auf Handy */
text-align: center;
margin-top: 10px !important;
}
/* Icon etwas kleiner auf Handy */
.woocommerce-message::before {
margin-bottom: 10px;
}
}
/* ==========================================================================
VEHICLE MODAL STYLE (HORIZONTAL STACKED)
========================================================================== */
/* 1. Das Modal-Fenster (Weiß, Clean, Scharf) */
.vehicle-overlay-inner {
width: 90%;
max-width: 960px;
/* Breite für 3 Spalten */
background: #fff;
padding: 60px 50px;
position: relative;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
/* Tiefer Schatten für "Floating" Effekt */
border-top: 4px solid #FF4D24;
/* Akrapovic Orange Linie oben */
border-radius: 0;
/* Keine runden Ecken (Technical Look) */
}
/* 2. Typografie */
.vehicle-headline {
text-align: center;
font-size: 32px;
margin: 0 0 50px 0;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
color: #000;
font-family: 'Oxanium', sans-serif;
/* Deine Theme Schrift */
}
.overlay-subhead {
font-size: 12px;
text-transform: uppercase;
color: #999;
letter-spacing: 2px;
margin-bottom: 15px;
font-weight: 700;
font-family: 'Oxanium', sans-serif;
}
/* 3. Layout: Stapelung der Reihen */
.vehicle-stack-layout {
display: flex;
flex-direction: column;
gap: 40px;
/* Viel Luft zwischen den Blöcken */
}
/* REIHE 1: Manuelle Auswahl (3 Spalten Grid) */
.vehicle-steps-horizontal {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
/* REIHE 2: Trenner */
.vehicle-stack-separator {
position: relative;
text-align: center;
margin: 10px 0;
}
.vehicle-stack-separator::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #eee;
z-index: 0;
}
.vehicle-stack-separator span {
position: relative;
background: #fff;
padding: 0 20px;
color: #ccc;
font-size: 11px;
font-weight: 800;
z-index: 1;
font-family: 'Oxanium', sans-serif;
}
/* REIHE 3: KBA Suche (3 Spalten Grid) */
.kba-row-container {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
/* Button bekommt etwas mehr Platz */
gap: 20px;
}
/* 4. Eingabefelder (Inputs & Selects) */
.vehicle-select {
width: 100%;
height: 60px;
/* Hohe, klickbare Felder */
padding: 0 20px;
font-size: 16px;
font-weight: 500;
color: #000;
border: 2px solid #e5e5e5;
background-color: #f9f9f9;
border-radius: 0;
/* Scharfe Kanten */
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
/* Custom Pfeil */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 20px center;
}
/* Fokus-Effekt (Orange) */
.vehicle-select:focus {
border-color: #FF4D24;
background-color: #fff;
outline: none;
box-shadow: 0 0 0 4px rgba(255, 77, 36, 0.1);
}
/* KBA Text Inputs (Zentriert, kein Pfeil) */
.kba-input {
background-image: none !important;
text-align: center;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: text;
}
.kba-input::placeholder {
color: #ccc;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* 5. Button (Orange, Scharf) */
.btn-vehicle-go {
width: 100%;
height: 60px;
background: #FF4D24;
color: #fff;
border: none;
font-weight: 800;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
border-radius: 0;
font-family: 'Oxanium', sans-serif;
}
.btn-vehicle-go:hover {
background: #e03e1a;
}
.btn-vehicle-go:active {
transform: translateY(1px);
}
/* 6. Hilfstexte & States */
.kba-hint {
text-align: center;
font-size: 12px;
color: #bbb;
margin-top: 15px;
font-style: italic;
}
.vehicle-step.disabled {
opacity: 0.4;
pointer-events: none;
filter: grayscale(1);
}
/* Schließen Button */
.close-vehicle-btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: #ccc;
transition: color 0.2s;
z-index: 10;
}
.close-vehicle-btn:hover {
color: #FF4D24;
}
/* 7. Mobile Responsive */
@media (max-width: 768px) {
.vehicle-overlay-inner {
padding: 30px 20px;
width: 100%;
height: 100%;
max-height: 100vh;
border-top: none;
overflow-y: auto;
}
.vehicle-steps-horizontal,
.kba-row-container {
grid-template-columns: 1fr;
/* Alles untereinander */
gap: 15px;
}
.vehicle-select,
.btn-vehicle-go {
height: 55px;
/* Etwas kleiner auf Mobile */
}
.vehicle-headline {
font-size: 24px;
margin-bottom: 30px;
margin-top: 20px;
}
}
/* =========================================
GRID LOADING SPINNER (Fixed)
========================================= */
.grid-loader {
display: none;
position: absolute;
top: 200px;
left: 50%;
/* WICHTIG: Zentrierung per Margin statt Transform, damit Rotation klappt */
width: 50px;
height: 50px;
margin-left: -25px;
/* Exakt die Hälfte der Breite nach links ziehen */
border: 5px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #FF4D24;
/* Animation läuft jetzt isoliert ohne die Position zu stören */
animation: spin 0.8s linear infinite;
z-index: 100;
}
/* Sicherstellen, dass die Keyframes definiert sind */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.post {
position: relative;
min-height: 400px;
}
/* --- VEHICLE FILTER OVERLAY CSS --- */
/* Trigger Button im Shop Menu */
#vehicle-filter-trigger {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 20px 0 34px;
cursor: pointer;
font-weight: bold;
color: #FF4D24;
text-transform: uppercase;
font-size: 14px;
}
#vehicle-filter-trigger:hover {
color: #FFF;
}
/* Das Overlay (Vollbild oder groß) */
.vehicle-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(22, 22, 22, 0.95);
/* Dunkler Hintergrund, leicht transparent */
backdrop-filter: blur(10px);
z-index: 99999;
/* Über allem */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.vehicle-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* Innerer Container */
.vehicle-overlay-inner {
width: 90%;
max-width: 800px;
background: #fff;
padding: 40px;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border-top: 4px solid #FF4D24;
transform: translateY(20px);
transition: transform 0.3s ease;
}
.vehicle-overlay.is-open .vehicle-overlay-inner {
transform: translateY(0);
}
/* Schließen Button */
.close-vehicle-btn {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
transition: color 0.2s;
}
.close-vehicle-btn:hover {
color: #FF4D24;
}
/* Headline */
.vehicle-headline {
font-size: 24px;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 30px;
text-align: center;
letter-spacing: 1px;
}
/* Die Schritte (Grid Layout) */
.vehicle-steps-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
align-items: flex-start;
}
.vehicle-step {
display: flex;
flex-direction: column;
gap: 10px;
}
.step-label {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
color: #999;
}
/* Select Styling */
.vehicle-select {
width: 100%;
padding: 15px;
font-size: 16px;
font-family: inherit;
border: 2px solid #eee;
background: #fff;
cursor: pointer;
appearance: none;
/* Entfernt Standard-Pfeil */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 15px center;
}
.vehicle-select:focus {
border-color: #FF4D24;
outline: none;
}
.vehicle-step.disabled {
opacity: 0.5;
pointer-events: none;
}
/* Action Button */
.vehicle-step-action {
grid-column: 1 / -1;
/* Volle Breite */
text-align: center;
margin-top: 20px;
}
.btn-vehicle-go {
background: #FF4D24;
color: #fff;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
padding: 15px 40px;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.btn-vehicle-go:hover {
background: #e03e1a;
transform: translateY(-2px);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.vehicle-steps-container {
grid-template-columns: 1fr;
/* Untereinander */
}
.vehicle-overlay-inner {
padding: 20px;
max-height: 90vh;
overflow-y: auto;
}
}
/* ===== RESET / GLOBAL ===== */
*,
*::before,
*::after {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
html {
scrollbar-gutter: stable;
}
/* ===== TYPOGRAPHY / BODY ===== */
body,
html {
-webkit-font-smoothing: antialiased;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
color: #000;
min-height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
}
.desc h2 {
font-size: 18px;
}
.desc h2,
.desc p {
margin-bottom: 16px
}
.screen-reader-text {
position: absolute !important;
overflow: hidden;
left: -999px;
top: -999px;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
}
/* ===== HEADER / NAV ===== */
#top-area-inner {
height: 80px;
}
.site-header__inner::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background-color: #fff;
transition: height 0.3s ease;
}
#top-area {
position: relative;
z-index: 99999;
font-size: 14px;
}
.top-site-header__inner {
padding: 8px 12px;
line-height: 1.2;
justify-content: normal;
background-color: #161616;
display: flex;
align-items: center;
min-height: 100%;
height: 100%;
box-sizing: border-box;
gap: 1.5rem;
color: #9a9a9a !important;
}
.top-site-header__inner a {
color: #FFF !important;
}
.widget {
position: relative;
}
.widget:after {
content: '';
position: absolute;
width: 2px;
height: 14px;
top: 5px;
right: -13px;
background-color: #FF4D24;
}
.logo {
width: 105px;
height: 53px;
}
/* ===== FULL WIDTH / ALIGN ===== */
.alignfull {
position: relative;
left: 50%;
transform: translateX(-50%);
max-width: 100vw;
width: 100vw;
}
/* ===========================
Breadcrumbs
=========================== */
.breadcrumbs {
font-size: 14px;
line-height: 1.5;
display: flex;
margin-bottom: 12px;
overflow-wrap: anywhere;
height: 100px;
background-color: #f3f3f3;
font-family: 'Oxanium';
text-transform: uppercase;
}
.breadcrumbs-inner {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 0 40px;
}
.breadcrumbs__label {
font-weight: 600;
margin-right: 0.5rem;
}
.breadcrumbs__list {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
list-style: none;
padding: 0 !important;
margin: 0 !important;
}
.breadcrumbs__item {
display: inline-flex;
align-items: center;
max-width: 100%;
}
.breadcrumbs__sep {
margin: 0 0.25rem 0 0.5rem;
color: #9ca3af;
}
.breadcrumbs a:hover {
color: #FF4D24 !important;
text-decoration: none !important
}
.breadcrumbs a {
text-decoration: none !important
}
.breadcrumbs [aria-current="page"] {
color: #000;
font-weight: 600;
text-decoration: none;
}
@media (max-width:420px) {
.breadcrumbs__label {
display: block;
margin: 0 0 0.25rem 0;
}
}
.breadcrumbs__sep {
margin: 0 15px;
}
.breadcrumbs__sep:after {
content: '';
position: relative;
display: inline-block;
width: 2px;
height: 11px;
top: 1px;
background-color: #FF4D24;
}
/* ===== PAGE HEIGHT ===== */
body.home {
min-height: 50vw;
}
body:not(.home) {
min-height: 45vw;
}
/* ===== SITE HEADER ===== */
#site-header {
top: 0;
width: 100%;
will-change: box-shadow, height;
z-index: 10001;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* When filter bar is docked to header, raise it above the header
so the hover-bg slides under it; sub-menus drop below the bar */
.custom-filter-bar-wrapper.is-stuck {
z-index: 10002 !important;
}
/* Push sub-menus below the docked filter bar */
body.filter-stuck .menu-list .sub-menu {
top: calc(100% + var(--filter-bar-h, 60px) - 8px);
}
/* Extend hover bridges when filter bar is stuck */
body.filter-stuck .menu-list > li::after {
height: calc(var(--filter-bar-h, 60px) + 18px);
}
body.filter-stuck .menu-list > li > .sub-menu::before {
height: calc(var(--filter-bar-h, 60px) + 20px);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 auto;
padding: 0 5%;
position: relative;
height: 100%;
box-sizing: border-box;
}
#site-header .sub-menu a,
#site-header.is-sticky a,
body.menu-open .menu-list li a {
color: #FFF !important;
}
/* Keep Termin orange in all header states */
#site-header.is-sticky #menu-item-184 > a,
body.menu-open #menu-item-184 > a {
color: #FF4D24 !important;
}
#site-brand {
display: inline-block;
width: 105px;
height: 53px;
position: relative;
margin-right: auto;
z-index: 99999;
}
.site-header__inner :is(.menu-toggle, .hamburger, .nav-toggle, .site-nav__toggle, button.menu-toggle, button.hamburger) {
order: 3;
flex: 0 0 auto;
}
/* ===== BUTTONS / HAMBURGER ===== */
button {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
.hamburger {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: transparent;
z-index: 999999;
}
.hamburger__bar {
width: 24px;
height: 2px;
background: #000;
border-radius: 2px;
}
.hamburger__bar+.hamburger__bar {
margin-top: 6px;
}
.menu-overlay {
opacity: 0;
}
/* ===== POST CONTENT ===== */
.post,
.desc {
width: 90%;
margin: 60px 5%;
position: relative
}
p {
line-height: 1.55;
}
.content h2 {
font-weight: 700;
font-size: clamp(20px, 3vw, 40px);
line-height: 1.3;
}
.post ol {
margin-left: 1.5rem;
list-style: decimal;
}
.post li {
line-height: 1.5;
margin-top: 0.5em;
}
.wp-block-spacer {
height: 100px;
}
/* ===== MEDIA QUERIES ===== */
@media (max-width: 620px) {
.toggle-menu {
display: block;
}
.site-nav {
display: none;
margin: 20px 0 0;
}
#site-content {
overflow-x: hidden;
}
.cta-btn {
display: none !important;
}
.has-text-align-right,
.has-text-align-center {
text-align: left !important;
}
.wp-block-buttons.is-content-justification-center {
justify-content: left !important;
}
h2.has-text-align-right::after,
h2.has-text-align-center::after {
margin-left: 0 !important;
margin-right: auto !important;
}
.hero-text h1 {
line-height: 1.5;
}
#site-header:not(.is-scrolled) .site-header__inner {
background-color: transparent !important;
}
.site-header__inner {
height: 100px !important;
background-color: #000;
}
}
@media (max-width: 768px) and (orientation: portrait) {
.top-site-header__inner span {
display: none;
}
#top-area .top-site-header__inner {
justify-content: center !important;
}
.headline {
display: none !important;
}
}
@media (min-width: 769px),
(orientation: landscape) and (min-width: 640px) {
.top-site-header__inner {
padding: 12px !important;
}
}
.nav-container {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
opacity: 0;
display: inline-block;
font-family: 'Oxanium', sans-serif;
font-size: 24px;
color: #000;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding: 15px;
text-decoration: none;
transform: translateY(-10px);
transition: opacity 360ms cubic-bezier(.2, .9, .2, 1),
transform 360ms cubic-bezier(.2, .9, .2, 1);
will-change: opacity, transform;
}
.sub-menu {
display: none;
}
@media (min-width: 769px) {
/* On desktop, sub-menus are controlled via visibility, not display */
.sub-menu {
display: block !important;
}
}
@media (min-width: 769px) {
.hamburger {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
pointer-events: none;
}
.nav-container {
position: relative;
top: auto;
left: auto;
width: auto;
height: 100%;
background: transparent;
opacity: 1;
visibility: visible;
pointer-events: auto;
display: block;
align-content: center;
z-index: 100;
}
.menu-list {
display: flex;
gap: 20px;
justify-content: flex-end;
}
.menu-list li {
position: relative;
opacity: 1;
transform: none;
}
.menu-list li a {
opacity: 1;
transform: none;
font-family: 'Oxanium', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 35px 15px;
transition: color 0.3s ease;
color: #000 !important;
}
/* Termin Vereinbaren — orange CTA */
#menu-item-184 > a {
color: #FF4D24 !important;
}
/* Warenkorb — cart icon */
#menu-item-1563 > a {
font-size: 0;
line-height: 0;
position: relative;
display: inline-flex;
align-items: center;
padding: 35px 15px;
}
#menu-item-1563 > a::before {
content: '';
display: block;
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
font-size: 14px;
}
.menu-list ul:not(.sub-menu) li a[aria-current="page"]::before {
width: calc(100% + 20px);
left: -10px;
position: absolute;
content: "";
top: 0;
height: 6px;
background: #FF4D24;
transition: width .22s ease, transform .22s ease;
transform-origin: left center;
}
}
body.single-product .woocommerce span.onsale {
left: 14px !important;
top: 14px !important;
right: auto !important;
}
body:not(.single-product) .woocommerce span.onsale {
top: 14px !important;
right: 14px !important;
}
.woocommerce span.onsale {
background-color: #000;
border-radius: 0;
padding-left: 12px;
padding-right: 12px;
line-height: 1;
min-height: 0;
min-width: 0;
}
/* 1. Der Wrapper ist der Chef (Position & Z-Index) */
.custom-filter-bar-wrapper {
position: -webkit-sticky;
position: sticky;
top: var(--header-h, 122px);
/* Variable vom JS */
z-index: 9999;
/* Hoch genug über dem Content */
width: 100%;
}
/* 2. Die Row ist nur noch für das Layout (Flexbox) zuständig */
.custom-filter-bar.main-row {
display: flex;
width: 100%;
background: #161616;
height: 60px;
align-items: center;
padding: 0 5%;
border-bottom: 1px solid #333;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* 3. Sub-Leiste (Fahrzeug) korrekt positionieren */
.vehicle-sub-row {
display: none;
position: absolute;
left: 0;
top: -3px;
width: 100%;
height: 68px;
background: #1f1f1f;
border-bottom: 2px solid #FF4D24;
z-index: 900;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
flex-direction: row;
align-items: center;
}
/* --- ITEM STYLES --- */
.filter-item {
flex: 1;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
}
.filter-item:hover {
background: #FF4D24;
}
.filter-label {
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.5px;
color: #fff;
white-space: nowrap;
z-index: 1;
}
/* Standard (Mobile First): Desktop-Text ausblenden, Mobile-Text zeigen */
.filter-label .desktop-text {
display: none;
}
.filter-label .mobile-text {
display: inline;
}
/* Ab Desktop (> 1024px): Umkehren */
@media (min-width: 1025px) {
.filter-label .desktop-text {
display: inline;
}
.filter-label .mobile-text {
display: none;
}
}
/* Reset Button */
.filter-item.reset-filter {
flex: 0 0 auto;
padding: 0 20px;
}
.filter-item.reset-filter:hover {
background: #333;
}
/* Trigger Hover Effekt: Zeige Sub-Leiste */
.vehicle-trigger-group:hover .vehicle-sub-row,
.vehicle-sub-row:hover {
display: flex;
}
/* Items IN der Sub-Leiste */
.sub-filter-item {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
/* 1. Alte Rahmen zurücksetzen */
.sub-filter-item {
border-right: 0 !important;
border-left: 0 !important;
}
/* 2. Die "Intelligente" Linie: */
/* Wende einen linken Rahmen auf jedes Item an, das auf ein anderes Item folgt */
.sub-filter-item+.sub-filter-item {
border-left: 1px solid #333 !important;
}
.sub-label {
color: #ccc;
font-size: 13px;
text-transform: uppercase;
font-weight: 600;
}
.sub-filter-item:hover .sub-label {
color: #fff;
}
/* --- DROPDOWNS (ALLE) --- */
.filter-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
width: max-content;
background: #fff;
border: 1px solid #ddd;
z-index: 100;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
HOVER-FIX FÜR FAHRZEUG-ELEMENTE
========================================================================== */
/* 1. Den Eltern-Container "totstellen"
(Verhindert, dass der ganze Balken orange wird) */
.filter-item.vehicle-trigger-group:hover {
background-color: transparent !important;
color: inherit;
}
/* 2. Die Kinder (Marke & Modell) reagieren lassen */
.vehicle-sub-row .sub-filter-item {
transition: background-color 0.2s ease;
}
.vehicle-sub-row:hover {
background-color: #333;
/* Dein Dunkelgrau für Hover */
cursor: pointer;
}
/* 3. Textfarben beim Hover anpassen (damit Label weiß wird) */
.vehicle-sub-row:hover .sub-label {
color: #fff;
}
/* Optional: Wenn du willst, dass beim Hover über das Modell
auch der Trennstrich verschwindet (cleaner Look) */
.vehicle-sub-row .sub-filter-item:hover {
border-color: transparent;
}
/* Dropdown erscheint bei Hover über Haupt-Item ODER Sub-Item */
.filter-item:not(.vehicle-trigger-group):hover .filter-dropdown,
.sub-filter-item:hover .filter-dropdown {
display: block;
}
.filter-dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.filter-dropdown ul li a {
display: block;
padding: 10px 15px;
color: #333;
font-size: 14px;
border-bottom: 1px solid #eee;
white-space: nowrap;
}
.filter-dropdown ul li a:hover {
background: #f9f9f9;
color: #FF4D24;
}
/* Suche */
.filter-dropdown input {
margin: 10px;
padding: 5px;
border: 1px solid #ccc;
}
/* Korrektur des Content-Bereichs: Shop UND Suche */
body.woocommerce-shop .post,
body.search .post {
width: 95% !important;
margin-top: 60px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Standard Zustand */
.custom-filter-bar-wrapper {
background-color: transparent;
}
/* Zustand: Wenn angedockt (Sticky) UND Overlay ist NICHT offen */
/* Wir nutzen :not(:has(...)) um zu prüfen, ob das Overlay die Klasse .is-open hat */
body:not(:has(#vehicle-filter-overlay.is-open)) .custom-filter-bar-wrapper.is-stuck {
background-color: #f3f3f3 !important;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* Auch die Border-Korrektur nur anwenden, wenn Overlay zu ist */
body:not(:has(#vehicle-filter-overlay.is-open)) .custom-filter-bar-wrapper.is-stuck .custom-filter-bar.main-row {
border-bottom-color: transparent;
}
/* Responsive Anpassung für Tablets */
@media (max-width: 1024px) and (min-width: 769px) {
.content .woocommerce ul.products li.product {
width: calc(50% - 20px) !important;
}
}
/* Responsive Anpassung für Mobile */
@media (max-width: 768px) {
.content .woocommerce ul.products li.product {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Versteckt das native blaue "X" von Chrome/Safari */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none !important;
-webkit-appearance: none !important;
}
input[type="search"] {
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.live-search-form {
position: relative;
}
.clear-input-btn {
position: absolute;
right: 0;
top: 25px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
color: #666;
font-size: 20px;
font-weight: bold;
display: none;
z-index: 20;
transition: color 0.2s;
}
.clear-input-btn:hover {
color: #FF4D24;
}
.search-spinner {
display: none;
position: absolute;
right: 5px;
top: 28px;
width: 24px;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
border-top-color: #FF4D24;
animation: spin 0.8s linear infinite;
z-index: 21;
}
.live-search-form.loading .clear-input-btn {
display: none !important;
}
.live-search-form.loading .search-spinner {
display: block;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.view-all-results {
padding: 20px 0;
text-align: center;
margin-top: 10px;
}
.btn-view-all {
display: inline-block;
padding: 12px 30px;
background-color: #FF4D24;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid #FF4D24;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-view-all:hover {
background-color: transparent;
color: #FF4D24;
transform: translateY(-2px);
}
/* ===========================
Buttons
=========================== */
.single_add_to_cart_button,
.wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
position: relative;
display: inline-grid;
place-items: center;
padding: 25px 49px 21px 46px !important;
margin-top: 24px;
color: #000 !important;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
background: #e9e6ed !important;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
transition: none;
overflow: hidden !important;
border-radius: 0 !important;
}
.single_add_to_cart_button:hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
color: #FFF !important;
}
.single_add_to_cart_button .btn-inner,
.wp-block-button__link .btn-inner,
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
transform: translateX(3px);
transition: transform .4s cubic-bezier(.25, .46, .45, .94)
}
.single_add_to_cart_button:hover .btn-inner,
.wp-block-button__link:hover .btn-inner,
.wc-block-cart__submit-button:hover .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button:hover .wc-block-components-button__text {
transform: translateX(0);
}
.single_add_to_cart_button::before,
.wp-block-button__link::before,
.wc-block-cart__submit-button::before,
.wc-block-components-checkout-place-order-button::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, #FF4D24 8px, transparent 8px),
#FF4D24;
transform: translate3d(calc(-100% + 6px), 0, 0);
will-change: transform;
transition: transform .55s cubic-bezier(.25, .46, .45, .94);
z-index: 1;
}
.single_add_to_cart_button>*,
.wp-block-button__link>*,
.wc-block-cart__submit-button>*,
.wc-block-components-checkout-place-order-button>* {
position: relative;
z-index: 2;
}
.single_add_to_cart_button:hover::before,
.wp-block-button__link:hover::before,
.wc-block-cart__submit-button:hover::before,
.wc-block-components-checkout-place-order-button:hover::before {
transform: translate3d(0, 0, 0);
}
.single_add_to_cart_button>.btn-inner,
.wp-block-button__link>.btn-inner,
.wc-block-cart__submit-button>.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button>.wc-block-components-button__text {
position: relative;
display: inline-flex;
align-items: center;
gap: 1rem;
z-index: 2;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.single_add_to_cart_button>.btn-inner::before,
.wp-block-button__link>.btn-inner::before,
.wc-block-cart__submit-button>.wc-block-components-button__text::before,
.wc-block-components-checkout-place-order-button>.wc-block-components-button__text::before {
content: "";
display: inline-block;
width: 2px;
height: 14px;
background: currentColor;
transform-origin: center;
transition: transform .4s cubic-bezier(.25, .46, .45, .94);
flex: 0 0 auto;
}
.single_add_to_cart_button>.btn-inner::after,
.wp-block-button__link>.btn-inner::after,
.wc-block-cart__submit-button>.wc-block-components-button__text::after,
.wc-block-components-checkout-place-order-button>.wc-block-components-button__text::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translate(-6px, -50%) rotate(0deg);
width: 14px;
height: 2px;
background: currentColor;
transform-origin: center;
transition: transform .4s cubic-bezier(.25, .46, .45, .94);
pointer-events: none;
}
.single_add_to_cart_button:hover>.btn-inner::before,
.single_add_to_cart_button:focus>.btn-inner::before,
.single_add_to_cart_button:active>.btn-inner::before,
.wp-block-button__link:hover>.btn-inner::before,
.wp-block-button__link:focus>.btn-inner::before,
.wp-block-button__link:active>.btn-inner::before,
.wc-block-cart__submit-button:hover>.wc-block-components-button__text::before,
.wc-block-cart__submit-button:focus>.wc-block-components-button__text::before,
.wc-block-cart__submit-button:active>.wc-block-components-button__text::before,
.wc-block-components-checkout-place-order-button:hover>.wc-block-components-button__text::before,
.wc-block-components-checkout-place-order-button:focus>.wc-block-components-button__text::before,
.wc-block-components-checkout-place-order-button:active>.wc-block-components-button__text::before {
transform: rotate(-90deg);
}
.single_add_to_cart_button:hover>.btn-inner::after,
.single_add_to_cart_button:focus>.btn-inner::after,
.single_add_to_cart_button:active>.btn-inner::after,
.wp-block-button__link:hover>.btn-inner::after,
.wp-block-button__link:focus>.btn-inner::after,
.wp-block-button__link:active>.btn-inner::after,
.wc-block-cart__submit-button:hover>.wc-block-components-button__text::after,
.wc-block-cart__submit-button:focus>.wc-block-components-button__text::after,
.wc-block-cart__submit-button:active>.wc-block-components-button__text::after,
.wc-block-components-checkout-place-order-button:hover>.wc-block-components-button__text::after,
.wc-block-components-checkout-place-order-button:focus>.wc-block-components-button__text::after,
.wc-block-components-checkout-place-order-button:active>.wc-block-components-button__text::after {
transform: translate(-6px, -50%) rotate(-90deg);
}
.single_add_to_cart_button svg,
.single_add_to_cart_button .icon,
.wp-block-button__link svg,
.wp-block-button__link .icon,
.wc-block-cart__submit-button svg,
.wc-block-cart__submit-button .icon,
.wc-block-components-checkout-place-order-button svg,
.wc-block-components-checkout-place-order-button .icon {
display: inline-block;
transform: translateX(0);
transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.single_add_to_cart_button:hover svg,
.single_add_to_cart_button:hover .icon,
.wp-block-button__link:hover svg,
.wp-block-button__link:hover .icon,
.wc-block-cart__submit-button:hover svg,
.wc-block-cart__submit-button:hover .icon,
.wc-block-components-checkout-place-order-button:hover svg,
.wc-block-components-checkout-place-order-button:hover .icon {
transform: translateX(-2px);
}
.single_add_to_cart_button:focus-visible,
.wp-block-button__link:focus-visible,
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 77, 36, 0.12);
}
/* KORREKTUR: Plus-Icon im Checkout Button zusammenfügen */
/* 1. Den Text-Container auf den Inhalt schrumpfen */
/* Damit 'left: 0' für den horizontalen Strich exakt beim vertikalen Strich liegt */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
width: auto !important;
flex: 0 1 auto !important;
display: inline-flex !important;
/* Erzwingt Flexbox für die ::before Ausrichtung */
justify-content: center;
}
/* 2. Den Button selbst als Grid definieren, damit der geschrumpfte Text zentriert bleibt */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
display: inline-grid !important;
place-items: center !important;
}
/* 3. Eventuelle Standard-SVGs von WooCommerce (Pfeile etc.) ausblenden */
.wc-block-cart__submit-button svg,
.wc-block-components-checkout-place-order-button svg {
display: none !important;
}
/* --- FIX: Abgeschnittenes Euro-Zeichen in der Bestellübersicht --- */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item .wc-block-components-product-price {
overflow: visible !important;
/* Verbietet das Abschneiden */
padding-right: 5px !important;
/* Gibt dem €-Zeichen 5px Puffer nach rechts */
width: auto !important;
/* Verhindert künstliche Verengung */
max-width: none !important;
display: inline-block !important;
/* Stellt sicher, dass Padding wirkt */
}
/* --- FIX: Abgeschnittene Box/Schatten in der Bestellübersicht --- */
/* 1. Dem übergeordneten Layout erlauben, überstehende Inhalte (Schatten) anzuzeigen */
.wc-block-components-sidebar-layout,
.wc-block-checkout,
.wp-block-woocommerce-checkout-order-summary-block {
overflow: visible !important;
}
/* 2. Der Box selbst etwas Abstand zum Rand geben, falls sie zu eng sitzt */
.wc-block-components-sidebar .wc-block-components-main {
margin-right: 5px !important;
/* Kleiner Sicherheitsabstand rechts */
}
/* 3. Speziell für den Bestellübersicht-Block (die graue Box) */
.wp-block-woocommerce-checkout-order-summary-block {
box-sizing: border-box !important;
width: 100% !important;
/* Falls ein Schatten da ist, braucht er Platz: */
margin: 10px 0 !important;
}
.wc-gzd-checkout .wc-block-components-order-summary,
.wc-gzd-checkout .wc-block-components-order-summary.is-large {
padding: 24px 36px 36px 24px !important;
}
/* Mehr Platz für die rechte Spalte im Checkout */
@media (min-width: 1000px) {
.wc-block-components-sidebar {
padding-right: 15px !important;
padding-left: 15px !important;
}
}
/* --- FIX: Preise in der Bestellübersicht rechtsbündig auf eine Linie --- */
.wc-block-components-order-summary-item__total-price {
/* 1. Ausrichtung nach ganz rechts erzwingen */
margin-left: auto !important;
/* 2. Flexbox nutzen, um Inhalte rechts zu stapeln */
display: flex !important;
flex-direction: column !important;
/* Falls Sale-Preise untereinander stehen sollen */
align-items: flex-end !important;
/* WICHTIG: Richtet alles an der rechten Kante aus */
/* 3. Textausrichtung */
text-align: right !important;
/* 4. Platz schaffen & Abschneiden verhindern */
overflow: visible !important;
padding-right: 2px !important;
/* Einheitlicher Abstand zum Rand für ALLE Preise */
width: auto !important;
min-width: 100px;
/* Optional: Reserviert Platz, damit es "stabiler" wirkt */
padding-left: 24px !important;
}
/* Sicherstellen, dass auch innere Elemente (wie Streichpreise) rechts kleben */
.wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
display: flex !important;
flex-direction: column !important;
/* Oder 'row', je nach Geschmack */
align-items: flex-end !important;
text-align: right !important;
width: 100% !important;
}
.wp-block-woocommerce-checkout-order-summary-block {
border-radius: 2px !important;
}
.wc-block-components-form .wc-block-components-text-input input[type=email],
.wc-block-components-form .wc-block-components-text-input input[type=number],
.wc-block-components-form .wc-block-components-text-input input[type=password],
.wc-block-components-form .wc-block-components-text-input input[type=tel],
.wc-block-components-form .wc-block-components-text-input input[type=text],
.wc-block-components-form .wc-block-components-text-input input[type=url],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=url],
.wc-blocks-components-select .wc-blocks-components-select__select {
border: 1px solid hsla(0, 0%, 7%, .11) !important;
border-radius: 2px !important;
}
.cart .quantity {
display: inline-flex;
align-items: center;
background-color: #FF4D24;
height: 70px;
padding: 0 10px;
}
.cart .quantity input.qty {
background: transparent;
border: none;
color: #fff;
font-size: 20px;
font-weight: bold;
width: 40px;
text-align: center;
outline: none;
}
.qty-btns {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.qty-btn {
background: none;
border: none;
color: white;
font-size: 12px;
line-height: 1;
cursor: pointer;
padding: 2px;
}
.cart .quantity input::-webkit-outer-spin-button,
.cart .quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 1. TABELLEN-STRUKTUR AUFBRECHEN */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td {
display: block !important;
width: 100% !important;
text-align: left !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. LABEL STYLEN (MOTORISIERUNG) */
.variations th.label {
margin-bottom: 8px !important;
}
.variations th.label label {
font-family: sans-serif;
/* Passt sich deinem Theme an */
font-weight: 800;
text-transform: uppercase;
font-style: italic;
/* Performance-Look */
font-size: 0.85rem;
letter-spacing: 1px;
color: #000;
}
/* 3. DAS DROPDOWN (SELECT FIELD) */
.variations td.value select {
width: 100% !important;
height: 50px !important;
padding: 0 15px !important;
border: 1px solid #e0e0e0 !important;
background-color: #f9f9f9 !important;
font-weight: 600;
font-size: 1rem;
color: #333;
border-radius: 0 !important;
/* Kantiger Look passend zum Branding */
appearance: none;
/* Entfernt Standard-Browser-Pfeil */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
transition: border-color 0.3s ease;
cursor: pointer;
}
.variations td.value select:focus {
border-color: #FF4D24 !important;
/* Dein Akzent-Orange */
outline: none;
}
/* 4. ZURÜCKSETZEN LINK (REBOOT) */
.reset_variations {
display: inline-block !important;
margin-top: 10px !important;
font-size: 0.75rem !important;
text-transform: uppercase;
font-weight: 700;
color: #FF4D24 !important;
text-decoration: none;
transition: opacity 0.2s;
}
.reset_variations:hover {
opacity: 0.7;
}
.single_add_to_cart_button {
margin-bottom: 64px !important;
}
/* =========================================
ROBUSTE LIST-ANSICHT (Grid-Fix)
========================================= */
/* 1. Die Liste selbst: Produkte untereinander */
.search-results .content ul.products {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
margin: 40px 0 !important;
padding: 0 !important;
}
/* 2. Die Produkt-Karte als Grid-Container */
.search-results .content ul.products li.product {
width: 100% !important;
background: #fff;
border: 1px solid #eee;
border-radius: 4px;
padding: 0 20px 0 0 !important;
/* Rechts Platz für Preis */
margin: 0 !important;
/* Das Grid-Layout der Karte */
display: grid !important;
/* Spalten: Bild (200px) | Inhalt (Auto) | Preis/Action (Rechts) */
grid-template-columns: 200px 1fr auto !important;
grid-template-rows: auto auto auto !important;
align-items: center !important;
gap: 10px 30px !important;
transition: all 0.2s ease;
}
.search-results .content ul.products li.product:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border-color: #FF4D24;
}
/* 3. WICHTIG: Den WooCommerce-Link "unsichtbar" machen */
/* Damit Bild und Titel direkt am Grid der Karte teilnehmen */
.search-results .content ul.products li.product a.woocommerce-loop-product__link {
display: contents !important;
}
/* 4. Das Bild (Links) */
.search-results .content ul.products li.product img {
grid-column: 1;
/* Spalte 1 */
grid-row: 1 / span 3;
/* Über alle Zeilen */
width: 100% !important;
height: 160px !important;
object-fit: contain !important;
padding: 10px;
margin: 0 !important;
background: #fff;
}
/* 5. Der Titel (Mitte Oben) */
.search-results .content ul.products li.product h3,
.search-results .content ul.products li.product .woocommerce-loop-product__title {
grid-column: 2;
/* Spalte 2 */
grid-row: 1;
font-size: 18px !important;
font-weight: 700 !important;
margin: 20px 0 5px 0 !important;
text-align: left !important;
color: #000 !important;
align-self: end !important;
/* Nach unten drücken zum Status */
}
/* 6. Der Status & Meta (Mitte Unten) */
.search-results .akr-loop-status {
grid-column: 2;
/* Spalte 2 */
grid-row: 2;
text-align: left !important;
margin: 0 !important;
font-size: 13px !important;
align-self: start !important;
/* Nach oben drücken zum Titel */
}
/* Status-Farben */
.search-results .akr-loop-status.in-stock {
color: #27ae60;
}
.search-results .akr-loop-status.out-of-stock {
color: #c0392b;
}
.search-results .akr-loop-status.available-on-backorder {
color: #f39c12;
}
/* MwSt Info (Mitte ganz unten) */
.search-results .content ul.products li.product p.wc-gzd-additional-info {
grid-column: 2;
grid-row: 3;
text-align: left !important;
font-size: 11px !important;
color: #999;
margin: 0 0 20px 0 !important;
}
/* 7. Preis & Button (Rechts) */
.search-results .content ul.products li.product .price {
grid-column: 3;
/* Spalte 3 */
grid-row: 1 / span 3;
/* Zentriert über alle Zeilen */
text-align: right !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-end !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #FF4D24 !important;
margin: 0 !important;
padding: 20px !important;
background: #fdfdfd;
/* Leichter Hintergrund für Preisbereich */
height: 100%;
border-left: 1px solid #f0f0f0;
}
/* Streichpreis kleiner machen */
.search-results .content ul.products li.product .price del {
font-size: 0.6em !important;
color: #aaa !important;
font-weight: 400 !important;
opacity: 1 !important;
display: block !important;
}
/* Angebots-Badge im Listenmodus ausblenden oder anpassen */
.search-results .content ul.products li.product .onsale {
display: none !important;
/* Stört oft im Listen-Layout */
}
/* Button (falls vorhanden) ausblenden für cleaneren Look */
.search-results .content ul.products li.product .button {
display: none !important;
}
.woocommerce ul.products li.product a img,
.woocommerce-checkout img,
.woocommerce-cart img {
mix-blend-mode: multiply;
}
/* ============================================================
WAGENTHALER SALE BADGES (BLOCK CART & CROSS SELLS)
============================================================ */
/* 1. BASIS-STYLING FÜR ALLE BADGES (Schwarz & Eckig) */
/* Wir zielen auf beide Klassen, die im HTML vorkommen */
.wc-block-components-product-sale-badge,
.wc-block-components-sale-badge {
background-color: #000000 !important;
color: #ffffff !important;
border-radius: 0 !important;
/* Eckig */
border: none !important;
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
padding: 6px 10px !important;
z-index: 20 !important;
}
/* Der Text im Badge */
.wc-block-components-product-sale-badge__text,
.wc-block-components-sale-badge__text {
font-weight: 700 !important;
}
.wc-block-components-quantity-selector {
border-radius: 2px !important;
}
/* Container Abstand */
.wagenthaler-full-width-cross-sells {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid #eee;
clear: both;
width: 100%;
}
/* Überschrift stylen */
.wagenthaler-full-width-cross-sells h2 {
font-size: 1.5rem;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 1px;
}
/* Grid Layout für die Produkte (damit sie nebeneinander stehen) */
.wagenthaler-full-width-cross-sells ul.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 4 Produkte nebeneinander */
gap: 30px;
}
.wagenthaler-full-width-cross-sells ul.products li.product {
width: 100% !important;
/* Wichtig, um Floats zu überschreiben */
margin: 0 !important;
}
/* Mobile Optimierung */
@media (max-width: 768px) {
.wagenthaler-full-width-cross-sells ul.products {
grid-template-columns: repeat(2, 1fr);
/* 2 nebeneinander auf Handy */
gap: 15px;
}
}
/* ============================================================
MOBILE FIX: CROSS SELLS (2-Spalten Grid)
============================================================ */
@media (max-width: 768px) {
/* 1. Das Grid erzwingen */
.wagenthaler-custom-cross-sells ul.products {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
/* 2 Spalten hart kodiert */
gap: 10px !important;
/* Kleinerer Abstand für mehr Platz */
margin: 0 !important;
padding: 0 !important;
}
/* 2. Die einzelnen Produkte zähmen */
.wagenthaler-custom-cross-sells ul.products li.product {
width: 100% !important;
/* Füllt die Grid-Zelle, nicht den Screen */
margin: 0 !important;
padding: 0 !important;
float: none !important;
background: transparent !important;
/* Optional: Kein grauer Kasten */
border: none !important;
}
/* 3. Bild sauber darstellen */
.wagenthaler-custom-cross-sells ul.products li.product img {
width: 100% !important;
height: auto !important;
margin-bottom: 10px !important;
}
/* 4. Titel kleiner machen (damit er nicht riesig ist) */
.wagenthaler-custom-cross-sells ul.products li.product h3.woocommerce-loop-product__title {
font-size: 13px !important;
line-height: 1.3 !important;
min-height: 35px !important;
/* Einheitliche Höhe */
margin-bottom: 5px !important;
padding: 0 5px !important;
/* Etwas Abstand zum Rand */
}
/* 5. Preis anpassen */
.wagenthaler-custom-cross-sells .price {
font-size: 14px !important;
padding: 0 5px !important;
display: block !important;
text-align: left !important;
/* Oder center, je nach Wunsch */
}
/* 6. Button (Mehr erfahren) mobil anpassen */
.wagenthaler-custom-cross-sells a.wagenthaler-overlay-btn {
/* Mobil evtl. immer sichtbar machen oder Standard lassen? */
/* Hier lassen wir es wie Desktop (bei Hover/Touch sichtbar) */
}
/* 7. Sale Badge Position korrigieren falls nötig */
.wagenthaler-custom-cross-sells .onsale {
top: 5px !important;
right: 5px !important;
font-size: 10px !important;
padding: 4px 6px !important;
}
}
/* ------------------------------------------------------------
A. POSITIONIERUNG BEI PRODUKT-BILDERN (Cross-Sells)
Hier muss es oben rechts im Bild schweben.
------------------------------------------------------------ */
/* Der Container um das Bild muss relativ sein, damit 'absolute' funktioniert */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
position: relative !important;
overflow: visible !important;
/* Wichtig, falls es am Rand abgeschnitten wird */
}
/* Das Badge im Bild */
.wc-block-components-product-image .wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-image .wc-block-components-product-sale-badge {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin: 0 !important;
/* Optional: Ein kleiner Abstand zum Rand, sieht edler aus */
transform: translate(0, 0);
}
/* ------------------------------------------------------------
B. POSITIONIERUNG IN DER WARENKORB-LISTE (Neben Preis)
Hier darf es NICHT fliegen, sondern muss als Block stehen.
------------------------------------------------------------ */
/* Wir zielen speziell auf die Badges innerhalb der Cart-Tabelle */
.wc-block-cart-items .wc-block-components-sale-badge {
position: static !important;
/* Fließt normal im Text */
display: inline-block !important;
margin-top: 5px !important;
width: auto !important;
float: none !important;
}
/* Die Schrift bei "Spare X €" etwas anpassen */
.wc-block-cart-items .wc-block-components-sale-badge {
font-size: 11px !important;
background-color: #000 !important;
/* Schwarz */
color: #fff !important;
}
/* --- 3. Styling für die neuen Cross-Sells (Unten) --- */
.wagenthaler-custom-cross-sells {
width: 100%;
clear: both;
margin-top: 60px;
padding-top: 40px;
}
/* Das Grid Layout erzwingen */
.wagenthaler-custom-cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
/* 4 nebeneinander */
gap: 20px !important;
}
.wagenthaler-custom-cross-sells ul.products::before,
.wagenthaler-custom-cross-sells ul.products::after {
display: none !important;
/* Alte Floats bereinigen */
}
/* Mobile: 2 nebeneinander */
@media (max-width: 768px) {
.wagenthaler-custom-cross-sells ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ============================================================
WAGENTHALER SALE BADGES (KOMBINIERT: BLOCK & CLASSIC)
============================================================ */
/* --- 1. BLOCK BADGES (Warenkorb Liste: "Spare ...") --- */
.wc-block-components-product-sale-badge,
.wc-block-components-sale-badge {
background-color: #000000 !important;
color: #ffffff !important;
border-radius: 0 !important;
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 4px 8px !important;
border: none !important;
/* Im Warenkorb (Liste) soll es fließen */
position: static !important;
display: inline-block !important;
width: auto !important;
margin-top: 5px !important;
}
/* --- 2. CLASSIC BADGES (Für die neuen Cross-Sells unten) --- */
/* Das ist der Teil, der dir gefehlt hat! */
.wagenthaler-custom-cross-sells .onsale {
background-color: #000000 !important;
/* Schwarz */
color: #ffffff !important;
/* Weiß */
border-radius: 0 !important;
/* Eckig */
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
line-height: 1 !important;
padding: 6px 10px !important;
/* Positionierung auf dem Bild */
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
/* Reset falls Theme 'left' setzt */
z-index: 9 !important;
margin: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
}
/* Container-Fix für Classic Badges, damit 'absolute' funktioniert */
.wagenthaler-custom-cross-sells .product,
.wagenthaler-custom-cross-sells .woocommerce-loop-product__link {
position: relative !important;
overflow: visible !important;
}
/* --- 3. LAYOUT & GRID (Cross-Sells) --- */
.wagenthaler-custom-cross-sells {
width: 100%;
clear: both;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}
.wagenthaler-custom-cross-sells h2 {
font-size: 1.5rem;
text-transform: uppercase;
margin-bottom: 25px;
letter-spacing: 1px;
font-weight: 700;
}
/* Grid Layout */
.wagenthaler-custom-cross-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Floats und alte Styles killen */
.wagenthaler-custom-cross-sells ul.products::before,
.wagenthaler-custom-cross-sells ul.products::after {
display: none !important;
}
.wagenthaler-custom-cross-sells ul.products li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
}
/* --- FIX: Listen-Punkte (Bullets) entfernen --- */
.wagenthaler-custom-cross-sells ul.products,
.wagenthaler-custom-cross-sells ul.products li.product {
list-style: none !important;
/* Entfernt den Punkt-Typ */
list-style-type: none !important;
/* Doppelt hält besser */
padding-left: 0 !important;
/* Entfernt die Einrückung von links */
margin-left: 0 !important;
/* Entfernt Außenabstand */
}
/* Der Marker selbst (dein Ansatz, aber verstärkt) */
.wagenthaler-custom-cross-sells ul.products li.product::marker {
display: none !important;
content: "" !important;
/* Inhalt löschen */
}
/* Quantity Selector im Cart (dein Snippet) */
.wc-block-components-quantity-selector {
border-radius: 2px !important;
}
/* Mobile Optimierung */
@media (max-width: 1024px) {
.wagenthaler-custom-cross-sells ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.wagenthaler-custom-cross-sells ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
/* =========================================
MOBILE RESPONSIVE (Zurück zur Karte)
========================================= */
@media (max-width: 768px) {
/* Zurück zum Spalten-Layout */
.search-results .content ul.products li.product {
display: flex !important;
flex-direction: column !important;
text-align: center !important;
padding: 20px !important;
gap: 10px !important;
}
.search-results .content ul.products li.product a.woocommerce-loop-product__link {
display: contents !important;
/* Bleibt contents, aber Flexbox regelt Reihenfolge im DOM */
}
.search-results .content ul.products li.product img {
grid-column: auto;
grid-row: auto;
height: auto !important;
max-width: 100% !important;
}
.search-results .content ul.products li.product h3 {
text-align: center !important;
}
.search-results .content ul.products li.product .price {
border-left: none !important;
background: transparent !important;
align-items: center !important;
padding: 0 !important;
}
.search-results .akr-loop-status {
text-align: center !important;
align-self: center !important;
}
}
/* Container Reset */
.woocommerce-pagination,
ul.page-numbers {
position: relative;
display: flex;
align-items: center;
justify-content: center;
/* Zentriert */
margin-top: 90px;
border: none !important;
padding: 0;
list-style: none;
min-height: 80px;
}
ul.page-numbers li {
border: none !important;
margin: 0;
padding: 0;
display: flex;
align-items: center;
float: none !important;
overflow: visible !important;
}
/* Basis Styling der Zahlen */
.woocommerce-pagination span.page-numbers,
.woocommerce-pagination a.page-numbers {
position: relative;
margin: 0 14px;
padding: 0;
transform: translateY(0) scale(1);
transition: all .2s;
font-family: Oxanium, cursive;
font-weight: 600;
text-transform: uppercase;
font-size: 17px;
line-height: 1.2em;
color: #000;
background: transparent !important;
border: none !important;
text-decoration: none;
display: block;
}
/* Aktive Seite & Hover */
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination span.page-numbers:not(.dots):hover,
.woocommerce-pagination a.page-numbers:not(.next):not(.prev):hover {
transform: translateY(1px) scale(1.7);
color: #000 !important;
font-weight: 700;
}
/* Dots (...) */
.woocommerce-pagination .page-numbers.dots {
transform: scale(1) !important;
color: #9a9a9a;
}
/* --- NEXT / PREV BUTTONS (Container) --- */
.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
/* Startbreite */
height: 60px;
margin-left: 20px;
text-decoration: none;
overflow: hidden;
/* Hintergrund bleibt drin */
border: 1px solid transparent;
transition: width 0.3s ease;
cursor: pointer;
top: 4px;
}
/* --- SVG STYLING (Der Pfeil) --- */
.woocommerce-pagination .page-numbers svg {
position: relative;
z-index: 10;
width: 26px;
/* Fixe Breite */
height: 24px;
fill: #000;
overflow: visible;
/* WICHTIG: Damit der Pfeil rauswachsen kann ohne Zoom */
transition: fill 0.3s ease, transform 0.3s ease;
}
/* Die Linien im SVG */
.woocommerce-pagination .page-numbers svg rect {
transition: width 0.2s ease, fill 0.3s ease;
}
/* --- DER ORANGE HINTERGRUND (Slide-Effekt) --- */
.woocommerce-pagination .page-numbers.next::before,
.woocommerce-pagination .page-numbers.prev::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FF4D24;
z-index: 0;
transform: translateX(-101%);
/* Start Links draußen */
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Prev Background von rechts */
.woocommerce-pagination .page-numbers.prev::before {
left: auto;
right: 0;
transform: translateX(101%);
}
/* --- HOVER EFFEKTE --- */
/* 1. Hintergrund fährt rein */
.woocommerce-pagination .page-numbers.next:hover::before,
.woocommerce-pagination .page-numbers.prev:hover::before {
transform: translateX(0);
}
/* 2. Container wird breiter */
.woocommerce-pagination .page-numbers.next:hover,
.woocommerce-pagination .page-numbers.prev:hover {
width: 149px;
}
/* 3. Pfeil wird weiß (Rects färben) */
.woocommerce-pagination .page-numbers.next:hover svg rect,
.woocommerce-pagination .page-numbers.prev:hover svg rect {
fill: #ffffff !important;
}
/* 4. PFEIL ANIMATION (Lang werden) */
/* Flügel kürzer (9px) */
.woocommerce-pagination .page-numbers.next:hover svg g rect:nth-of-type(1),
.woocommerce-pagination .page-numbers.next:hover svg g rect:nth-of-type(3),
.woocommerce-pagination .page-numbers.prev:hover svg g rect:nth-of-type(1),
.woocommerce-pagination .page-numbers.prev:hover svg g rect:nth-of-type(3) {
width: 9px;
}
/* Schaft lang (37px) */
.woocommerce-pagination .page-numbers.next:hover svg g rect:nth-of-type(2),
.woocommerce-pagination .page-numbers.prev:hover svg g rect:nth-of-type(2) {
width: 37px !important;
}
/* 5. BEWEGUNG & ROTATION */
/* Next: Zeigt nach rechts (180deg im SVG nötig?), bewegt sich nach rechts */
.woocommerce-pagination .page-numbers.next svg {
transform: rotate(180deg);
/* Falls SVG nach links zeigt, hier drehen */
}
.woocommerce-pagination .page-numbers.next:hover svg {
transform: rotate(180deg) translateX(-5px);
/* Minus, weil gedreht */
}
/* Prev: Zeigt nach links (0deg), bewegt sich nach links */
.woocommerce-pagination .page-numbers.prev svg {
transform: rotate(0deg);
}
.woocommerce-pagination .page-numbers.prev:hover svg {
transform: translateX(-5px);
}
/* -------------------------------------------------------------------------------- */
/* 10. Media Queries
/* -------------------------------------------------------------------------------- */
@media (max-width: 620px) {
.faq,
.info {
padding: 2rem 0;
}
.faq img,
.info img {
width: 25% !important;
}
.first,
.second,
.third {
margin: 0;
top: 0;
bottom: 0;
left: 0;
}
#site-header .site-title {
margin-top: 40px;
}
#site-header__inner {
padding: 1rem 2rem;
}
#primary-menu-mobile a {
font-size: 1.25rem;
}
body .is-layout-grid {
display: block !important;
}
body .wp-container-core-buttons-is-layout-16018d1d {
justify-content: inherit;
}
body .wp-container-core-buttons-is-layout-8cf370e7 {
gap: 0;
}
span.sep {
margin: 0 10px;
}
.pagination a+a {
margin-left: 20px;
}
.site-footer {
padding-bottom: 50px;
}
.inner {
flex-direction: column;
gap: 1rem;
}
.col-cont,
.col-hr {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
/* Links in Kontaktblock untereinander darstellen statt
hacks */
.col-cont address p a,
.col-cont address p a+a {
display: block;
margin-top: 0.5rem;
word-break: break-word;
}
.col-cont,
.col-hr {
align-items: flex-start;
text-align: left;
}
.col-hr,
.sm {
margin-top: 48px;
}
.sm {
padding-bottom: 64px;
}
}
@media (max-width: 500px) {
.post:before,
.comments:before,
.comment-respond:before,
.comments .comment-respond:after,
.pagination:before,
.site-footer:before {
margin: 30px auto;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
/* Respect reduced motion */
.hero-slide .hero-caption,
.hero-slide .hero-caption * {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
/* reduced motion fallback */
.hero-slide .hero-caption,
.hero-slide.caption-in .hero-caption,
.hero-slide.caption-in .hero-caption * {
transition: none !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Reduced motion: keine großen Animationen */
.hero-pagination__btn,
.hero-pagination__btn::before {
transition: none !important;
transform: none !important;
}
/* Optional: Reduced motion */
.back-to-top,
.back-to-top.is-visible {
transition: none !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* respect reduced motion */
.badge-ring,
.badge-inner {
animation: none;
transform: none;
opacity: 1;
}
/* accessibility: reduced motion */
.wp-block-column.btn picture img,
.wp-block-column.btn img {
transition: none !important;
transform: none !important;
}
.wp-block-column.btn>h3,
.wp-block-column.btn>p,
.wp-block-column.btn .wp-block-button__link {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
/* Respect reduced motion preferences */
#site-header,
#site-header.is-sticky {
transition: none !important;
}
/* Reduced motion: respektieren */
.home .wp-block-media-text__content,
.home .wp-block-media-text__media {
transform: none !important;
transition: none !important;
opacity: 1 !important;
}
/* reduced motion */
* {
animation: none !important;
}
.hero-slide {
transition: none !important;
transform: none !important;
}
.hero-slide .hero-caption {
transition: none !important;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.parallax__img {
transform: none !important;
}
}
/* ===========================
No Products Found Notice
=========================== */
.wc-no-products-notice {
text-align: center;
padding: 80px 40px;
max-width: 640px;
margin: 0 auto;
}
.wc-no-products-icon {
color: #999;
margin-bottom: 24px;
}
.wc-no-products-title {
font-size: 24px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
color: #000;
}
.wc-no-products-text {
font-size: 17px;
line-height: 1.6;
color: #555;
margin-bottom: 8px;
}
.wc-no-products-text strong {
color: #000;
}
.wc-no-products-subtext {
font-size: 15px;
line-height: 1.6;
color: #888;
margin-bottom: 40px;
}
.wc-no-products-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.wc-no-products-btn {
display: inline-block;
padding: 14px 32px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
}
.wc-no-products-btn--primary {
background: #FF4D24;
color: #fff;
border: 2px solid #FF4D24;
}
.wc-no-products-btn--primary:hover {
background: transparent;
color: #FF4D24;
}
.wc-no-products-btn--secondary {
background: transparent;
color: #000;
border: 2px solid #000;
}
.wc-no-products-btn--secondary:hover {
background: #000;
color: #fff;
}