/* CR-3D Breadcrumb Redesign: kompakte, schlichte Leiste statt des bisherigen grossen teal Hero-Banners (223px hoch, zentrierter Seitentitel). Gilt sitebreit (#opal-breadscrumb erscheint auf jeder Nicht-Startseite), da diese Leiste ueberall dieselbe Grundstruktur hat. */ #opal-breadscrumb.opal-breadscrumb { background: #ffffff !important; background-image: none !important; border-bottom: 1px solid #e2e5e8; /* 160px oben - gleicher Wert wie der ".nav_spacing_kc"-Spacer, den KingComposer-Seiten manuell an den Seitenanfang setzen, um Platz fuer die fixierte Navbar (".masthead-fixed") zu lassen. Diese Leiste wird aber nicht per KC gebaut, sondern global vom Theme ausgegeben (siehe workspace_fnc_render_breadcrumbs() in inc/template.php) und hatte den Abstand vorher nur ueber die grosse Bannerhoehe "zufaellig" mit erledigt - jetzt, wo die Leiste kompakt ist, muss der Abstand explizit gesetzt werden, sonst liegt die Navbar drüber. */ padding: 160px 0 0; min-height: 0; margin-bottom: 0; text-align: center; } #opal-breadscrumb .container { padding-top: 18px; padding-bottom: 18px; } /* Unter 1000px: kein oberes Padding mehr (Rueckfrage/Wunsch 2026-07-24) - Achtung, das widerspricht der Begruendung oben (".masthead-fixed" ist hier laut Messung eine ECHTE fixierte Navbar bis zu 155px hoch, die die Leiste dann ueberdecken kann). Falls das nach dem Test sichtbar ueberlappt, bitte Bescheid geben statt hier einfach wieder aufzustocken. */ @media (max-width: 999.98px) { #opal-breadscrumb.opal-breadscrumb { padding-top: 0; } } /* Shop/Produkt-Seiten (nicht Warenkorb/Kasse): Abstand zur Navbar oben um ~20% reduzieren (160px -> 128px), aber NUR ab 1024px Breite. Bei ".masthead-fixed" ist die Navbar bis 1023px eine ECHTE fixierte Leiste, die bis zu 155px hoch reicht (gemessen bei 480px/768px Breite) - 128px wuerde dort ueberlappen. Ab 1024px ist der Header dagegen nur absolut IM (nicht-fixierten) Header-Wrapper positioniert, real nur ~99px hoch - 128px lassen dort reichlich Luft (~30px). */ @media (min-width: 1024px) { body:not(.woocommerce-cart):not(.woocommerce-checkout) #opal-breadscrumb.opal-breadscrumb { padding-top: 85px; } } /* Breadcrumb-Pfad (Home > Kategorie > ...) - klein, Montserrat, teal Links */ #opal-breadscrumb .breadcrumb, #opal-breadscrumb .opal-woocommerce-breadcrumb { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: #6b7280; } #opal-breadscrumb .breadcrumb li, #opal-breadscrumb .opal-woocommerce-breadcrumb li { color: #6b7280; padding: 0; } #opal-breadscrumb .breadcrumb li:not(:last-child)::after, #opal-breadscrumb .opal-woocommerce-breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: #d7dbdf; } #opal-breadscrumb .breadcrumb a, #opal-breadscrumb .opal-woocommerce-breadcrumb a { color: #07737a; text-decoration: none; } #opal-breadscrumb .breadcrumb a:hover, #opal-breadscrumb .opal-woocommerce-breadcrumb a:hover { color: #055a5f; text-decoration: underline; } #opal-breadscrumb .breadcrumb li.active { color: #6b7280; } /* Basis-Theme (css/style.css) setzt per FontAwesome-Icon ("\f10c", ein Kreis) ein ::before vor jedes Breadcrumb-Element ausser dem ersten. Auf dem Shop-Breadcrumb (ul traegt BEIDE Klassen ".breadcrumb.opal-woocommerce-breadcrumb") wird dieses ::before aber fuer die Trapez-Anschluss- Optik zwischen "Shop" und dem naechsten Element gebraucht - ein pauschales content:none auf li::before hat das kaputt gemacht (SHOP klebte direkt an FILAMENTE ohne Trenner). Daher gezielt NUR das letzte/aktive Element treffen, wo der Kreis urspruenglich sichtbar war (z.B. /service/usb_update/, das keine WooCommerce-Klasse hat und daher keinen eigenen Trapez-Anschluss braucht). */ #opal-breadscrumb .breadcrumb li:last-child::before { content: none !important; } /* Seitentitel ("Shop", "Produkte", ...) - per JS (breadcrumb-redesign.js) aus der
    raus und VOR den Breadcrumb-Pfad als Geschwisterelement eingefuegt (ungueltiges HTML vorher:

    / war Kind der
      ). 26px Basisgroesse * ~1.4 = 36px. */ #opal-breadscrumb .title-page { /* "position:absolute" ueberschreiben - Altlast aus der frueheren grossen Hero-Banner-Version (Titel lag dort ueber dem Hintergrundbild), sorgte hier dafuer, dass der Titel aus dem normalen Textfluss rausfaellt und sich mit der
        ueberlagert statt sauber darueber zu stehen. */ position: static; display: block; margin: 0 0 6px; font-family: 'Good Times', sans-serif; font-size: 36px; font-weight: 900; letter-spacing: 1px; color: #07737a; } #opal-breadscrumb .title-page span { font-size: inherit; font-weight: inherit; color: inherit; } /* Warenkorb/Kasse: kein Pfad ("Home / Warenkorb" bringt nichts, nur 2 Stufen) und kein Divider - stattdessen nur der Seitentitel selbst, zentriert und in Teal, direkt ueber dem Formular. */ body.woocommerce-cart #opal-breadscrumb.opal-breadscrumb, body.woocommerce-checkout #opal-breadscrumb.opal-breadscrumb { border-bottom: none; /* Ab 999px und darunter: kein eigener Navbar-Abstand mehr noetig - die sitebreite ".row-offcanvas{padding-top:155px}"-Regel (Additional CSS) deckt das bereits ab, unser eigener 155px-Puffer hat den Abstand vorher verdoppelt. */ padding-top: 0; } /* Nur Warenkorb (nicht Kasse) unter 1000px: etwas Abstand nach unten zum Formular. */ @media (max-width: 999.98px) { body.woocommerce-cart #opal-breadscrumb.opal-breadscrumb { margin-bottom: 22px; } } /* Ab 1000px ist #opal-masthead nicht mehr fixiert, aber sein Kind ".header-main" ist "position:absolute" (kollabiert die Header-Hoehe im normalen Textfluss auf 0) - 125px reichen, um die reale ~99px-Hoehe von ".header-main" auszugleichen. */ @media (min-width: 1000px) { body.woocommerce-cart #opal-breadscrumb.opal-breadscrumb, body.woocommerce-checkout #opal-breadscrumb.opal-breadscrumb { padding-top: 125px; } } /* Weniger Luft direkt ueber/unter der Ueberschrift selbst (der obere 160px-Navbar-Abstand oben in #opal-breadscrumb.opal-breadscrumb bleibt unangetastet - der ist strukturell noetig). */ body.woocommerce-cart #opal-breadscrumb .container, body.woocommerce-checkout #opal-breadscrumb .container { padding-top: 6px; padding-bottom: 6px; } body.woocommerce-cart #opal-breadscrumb .breadcrumb, body.woocommerce-checkout #opal-breadscrumb .breadcrumb { display: none; } body.woocommerce-cart #opal-breadscrumb .title-page, body.woocommerce-checkout #opal-breadscrumb .title-page { margin: 0; text-align: center; color: #07737a; /* 26px Basisgroesse (siehe ".title-page"-Regel weiter oben) * ~1.7 = 44px. */ font-family: 'Good Times', sans-serif; font-size: 44px; font-weight: 900; } /* Erstes Breadcrumb-Element ("Shop" auf WooCommerce-Seiten, "Home" ueberall sonst) als Rechteck mit schraeg abgeschnittener rechter Kante (Trapez), im selben Winkel wie die "/"-Trenner. Gilt fuer beide Breadcrumb-Varianten (".breadcrumb" und ".opal-woocommerce-breadcrumb"), da workspace_fnc_breadcrumbs() in inc/template.php denselben "ol.breadcrumb" fuer normale Seiten ausgibt und dort das erste Element immer "Home" ist. Kein negativer margin-right hier: der Clip-Pfad ist am OBEREN Rand noch nicht eingerueckt (nur die untere rechte Ecke ist schraeg abgeschnitten), ein negativer margin zieht das naechste Element also am oberen Rand UNTER das Trapez - sichtbar als Text, der teilweise von der teal Flaeche ueberdeckt wird (siehe /kategorie/elektronik/ vor diesem Fix). Der Abstand wird stattdessen rein ueber padding-right geregelt. */ #opal-breadscrumb .breadcrumb li:first-child, #opal-breadscrumb .opal-woocommerce-breadcrumb li:first-child { background: #07737a; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: 6px 20px 6px 14px; margin-right: 0; } #opal-breadscrumb .breadcrumb li:first-child a, #opal-breadscrumb .opal-woocommerce-breadcrumb li:first-child a { color: #fff; } #opal-breadscrumb .breadcrumb li:first-child::after, #opal-breadscrumb .opal-woocommerce-breadcrumb li:first-child::after { content: none; }